Skip to content

Commit db72336

Browse files
mrdoobmrdoob
authored
Controls: Require element in connect() (#30772)
1 parent a6bbc0e commit db72336

11 files changed

+73
-27
lines changed

‎editor/js/EditorControls.js

+20-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as THREE from 'three';
22

33
class EditorControls extends THREE.EventDispatcher {
44

5-
constructor( object, domElement ) {
5+
constructor( object ) {
66

77
super();
88

@@ -34,6 +34,8 @@ class EditorControls extends THREE.EventDispatcher {
3434
var pointers = [];
3535
var pointerPositions = {};
3636

37+
var domElement = null;
38+
3739
// events
3840

3941
var changeEvent = { type: 'change' };
@@ -269,21 +271,31 @@ class EditorControls extends THREE.EventDispatcher {
269271

270272
}
271273

272-
this.dispose = function () {
274+
this.connect = function ( element ) {
275+
276+
if ( domElement !== null ) this.disconnect();
277+
278+
domElement = element;
279+
280+
domElement.addEventListener( 'contextmenu', contextmenu );
281+
domElement.addEventListener( 'dblclick', onMouseUp );
282+
domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
283+
284+
domElement.addEventListener( 'pointerdown', onPointerDown );
285+
286+
};
287+
288+
this.disconnect = function () {
273289

274290
domElement.removeEventListener( 'contextmenu', contextmenu );
275291
domElement.removeEventListener( 'dblclick', onMouseUp );
276292
domElement.removeEventListener( 'wheel', onMouseWheel );
277293

278294
domElement.removeEventListener( 'pointerdown', onPointerDown );
279295

280-
};
296+
domElement = null;
281297

282-
domElement.addEventListener( 'contextmenu', contextmenu );
283-
domElement.addEventListener( 'dblclick', onMouseUp );
284-
domElement.addEventListener( 'wheel', onMouseWheel, { passive: false } );
285-
286-
domElement.addEventListener( 'pointerdown', onPointerDown );
298+
};
287299

288300
// touch
289301

‎editor/js/Viewport.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ function Viewport( editor ) {
7474
let objectRotationOnDown = null;
7575
let objectScaleOnDown = null;
7676

77-
const transformControls = new TransformControls( camera, container.dom );
77+
const transformControls = new TransformControls( camera );
7878
transformControls.addEventListener( 'axis-changed', function () {
7979

8080
if ( editor.viewportShading !== 'realistic' ) render();
@@ -274,7 +274,7 @@ function Viewport( editor ) {
274274
// controls need to be added *after* main logic,
275275
// otherwise controls.enabled doesn't work.
276276

277-
const controls = new EditorControls( camera, container.dom );
277+
const controls = new EditorControls( camera );
278278
controls.addEventListener( 'change', function () {
279279

280280
signals.cameraChanged.dispatch( camera );
@@ -345,6 +345,9 @@ function Viewport( editor ) {
345345

346346
}
347347

348+
controls.connect( newRenderer.domElement );
349+
transformControls.connect( newRenderer.domElement );
350+
348351
renderer = newRenderer;
349352

350353
renderer.setAnimationLoop( animate );

‎examples/jsm/controls/ArcballControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -441,13 +441,15 @@ class ArcballControls extends Controls {
441441

442442
if ( domElement !== null ) {
443443

444-
this.connect();
444+
this.connect( domElement );
445445

446446
}
447447

448448
}
449449

450-
connect() {
450+
connect( element ) {
451+
452+
super.connect( element );
451453

452454
this.domElement.style.touchAction = 'none';
453455
this._devPxRatio = window.devicePixelRatio;

‎examples/jsm/controls/DragControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,15 @@ class DragControls extends Controls {
122122

123123
if ( domElement !== null ) {
124124

125-
this.connect();
125+
this.connect( domElement );
126126

127127
}
128128

129129
}
130130

131-
connect() {
131+
connect( element ) {
132+
133+
super.connect( element );
132134

133135
this.domElement.addEventListener( 'pointermove', this._onPointerMove );
134136
this.domElement.addEventListener( 'pointerdown', this._onPointerDown );

‎examples/jsm/controls/FirstPersonControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ class FirstPersonControls extends Controls {
164164

165165
if ( domElement !== null ) {
166166

167-
this.connect();
167+
this.connect( domElement );
168168

169169
this.handleResize();
170170

@@ -174,7 +174,9 @@ class FirstPersonControls extends Controls {
174174

175175
}
176176

177-
connect() {
177+
connect( element ) {
178+
179+
super.connect( element );
178180

179181
window.addEventListener( 'keydown', this._onKeyDown );
180182
window.addEventListener( 'keyup', this._onKeyUp );

‎examples/jsm/controls/FlyControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,15 @@ class FlyControls extends Controls {
8989

9090
if ( domElement !== null ) {
9191

92-
this.connect();
92+
this.connect( domElement );
9393

9494
}
9595

9696
}
9797

98-
connect() {
98+
connect( element ) {
99+
100+
super.connect( element );
99101

100102
window.addEventListener( 'keydown', this._onKeyDown );
101103
window.addEventListener( 'keyup', this._onKeyUp );

‎examples/jsm/controls/OrbitControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -453,15 +453,17 @@ class OrbitControls extends Controls {
453453

454454
if ( this.domElement !== null ) {
455455

456-
this.connect();
456+
this.connect( this.domElement );
457457

458458
}
459459

460460
this.update();
461461

462462
}
463463

464-
connect() {
464+
connect( element ) {
465+
466+
super.connect( element );
465467

466468
this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
467469
this.domElement.addEventListener( 'pointercancel', this._onPointerUp );

‎examples/jsm/controls/PointerLockControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,15 @@ class PointerLockControls extends Controls {
109109

110110
if ( this.domElement !== null ) {
111111

112-
this.connect();
112+
this.connect( this.domElement );
113113

114114
}
115115

116116
}
117117

118-
connect() {
118+
connect( element ) {
119+
120+
super.connect( element );
119121

120122
this.domElement.ownerDocument.addEventListener( 'mousemove', this._onMouseMove );
121123
this.domElement.ownerDocument.addEventListener( 'pointerlockchange', this._onPointerlockChange );

‎examples/jsm/controls/TrackballControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ class TrackballControls extends Controls {
257257

258258
if ( domElement !== null ) {
259259

260-
this.connect();
260+
this.connect( domElement );
261261

262262
this.handleResize();
263263

@@ -268,7 +268,9 @@ class TrackballControls extends Controls {
268268

269269
}
270270

271-
connect() {
271+
connect( element ) {
272+
273+
super.connect( element );
272274

273275
window.addEventListener( 'keydown', this._onKeyDown );
274276
window.addEventListener( 'keyup', this._onKeyUp );

‎examples/jsm/controls/TransformControls.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -358,13 +358,15 @@ class TransformControls extends Controls {
358358

359359
if ( domElement !== null ) {
360360

361-
this.connect();
361+
this.connect( domElement );
362362

363363
}
364364

365365
}
366366

367-
connect() {
367+
connect( element ) {
368+
369+
super.connect( element );
368370

369371
this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
370372
this.domElement.addEventListener( 'pointermove', this._onPointerHover );

‎src/extras/Controls.js

+16-1
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,23 @@ class Controls extends EventDispatcher {
7777
/**
7878
* Connects the controls to the DOM. This method has so called "side effects" since
7979
* it adds the module's event listeners to the DOM.
80+
*
81+
* @param {HTMLDOMElement} element - The DOM element to connect to.
8082
*/
81-
connect() {}
83+
connect( element ) {
84+
85+
if ( element === undefined ) {
86+
87+
console.warn( 'THREE.Controls: connect() now requires an element.' );
88+
return;
89+
90+
}
91+
92+
if ( this.domElement !== null ) this.disconnect();
93+
94+
this.domElement = element;
95+
96+
}
8297

8398
/**
8499
* Disconnects the controls from the DOM.

0 commit comments

Comments
 (0)