Merge branch 'dev' of github.com:yomotsu/camera-controls into dev

yomotsu · Jan 22, 2023 · 1ddf0a4 · 1ddf0a4
2 parents 5a81760 + e8430e9
commit 1ddf0a4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 22 deletions.
diff --git a/examples/r3f.html → examples/event-attach.html b/examples/r3f.html → examples/event-attach.html
@@ -9,9 +9,9 @@
 <body>
 <div class="info">
 	<p><a href="https://github.com/yomotsu/camera-controls">GitHub repo</a></p>
-	<button onclick="cameraControls.connect( renderer.domElement )">connect</button>
-	<button onclick="cameraControls.dispose()">dispose</button>
-  <button onclick="cameraControls.rotate(  45 * THREE.MathUtils.DEG2RAD, 0, true )">rotate theta 45deg</button>
+	<button onclick="cameraControls.connect( renderer.domElement )">connect (attach all events handlers)</button>
+	<button onclick="cameraControls.disconnect()">disconnect (remove all event listeners)</button>
+	<button onclick="cameraControls.rotate(  45 * THREE.MathUtils.DEG2RAD, 0, true )">rotate theta 45deg</button>
 </div>
 
 <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
@@ -26,7 +26,6 @@
 const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
 camera.position.set( 0, 0, 5 );
 const renderer = new THREE.WebGLRenderer();
-globalThis.renderer = renderer;
 renderer.setSize( width, height );
 document.body.appendChild( renderer.domElement );
 

diff --git a/readme.md b/readme.md
@@ -22,6 +22,7 @@ A camera control for three.js, similar to THREE.OrbitControls yet supports smoot
 - [viewport within the canvas](https://yomotsu.github.io/camera-controls/examples/viewport.html)
 - [z-up camera](https://yomotsu.github.io/camera-controls/examples/camera-up.html)
 - [orthographic](https://yomotsu.github.io/camera-controls/examples/orthographic.html)
+- [event attach / detach](https://yomotsu.github.io/camera-controls/examples/event-attach.html)
 - [user input config](https://yomotsu.github.io/camera-controls/examples/config.html)
 - [mouse drag with modifier keys](https://yomotsu.github.io/camera-controls/examples/mouse-drag-with-modifier-keys.html)
 - [combined gestures](https://yomotsu.github.io/camera-controls/examples/combined-gestures.html)
@@ -123,7 +124,7 @@ CameraControls.install( { THREE: subsetOfTHREE } );
 `CameraControls( camera, domElement )`
 
 - `camera` is a `THREE.PerspectiveCamera` or `THREE.OrthographicCamera` to be controlled.
-- `domElement` is a `HTMLElement` for draggable area.
+- `domElement` is a `HTMLElement` for draggable area. (optional. if domElement is omitted here, can be connect later with `.connect()`)
 
 ## Terms
 
@@ -622,6 +623,24 @@ When you change camera-up vector, run `.updateCameraUp()` to sync.
 
 ---
 
+### connect
+
+Attach all internal event handlers to enable drag control.
+
+---
+
+### disconnect
+
+Detach all internal event handlers to disable drag control.
+
+---
+
+#### `dispose()`
+
+Dispose the cameraControls instance itself, remove all eventListeners.
+
+---
+
 #### `addEventListener( type: string, listener: function )`
 
 Adds the specified event listener.
@@ -652,12 +671,6 @@ Reproduce the control state with JSON. `enableTransition` is where anim or not i
 
 ---
 
-#### `dispose()`
-
-Dispose the cameraControls instance itself, remove all eventListeners.
-
----
-
 ## Tips
 
 ### Normalize accumulated azimuth angle:

diff --git a/src/CameraControls.ts b/src/CameraControls.ts
@@ -1053,7 +1053,6 @@ export class CameraControls extends EventDispatcher {
 			this._domElement.style.touchAction = 'none';
 			this._domElement.style.userSelect = 'none';
 			this._domElement.style.webkitUserSelect = 'none';
-			if ( 'setAttribute' in this._domElement ) this._domElement.setAttribute( 'data-camera-controls-version', VERSION );
 
 			this._domElement.addEventListener( 'pointerdown', onPointerDown );
 			isPointerEventsNotSupported && this._domElement.addEventListener( 'mousedown', onMouseDown );
@@ -1087,8 +1086,6 @@ export class CameraControls extends EventDispatcher {
 			this._domElement.ownerDocument.removeEventListener( 'mouseup', onMouseUp );
 			this._domElement.ownerDocument.removeEventListener( 'touchend', onTouchEnd );
 
-			if ( 'setAttribute' in this._domElement ) this._domElement.removeAttribute( 'data-camera-controls-version' );
-
 		};
 
 		this.cancel = (): void => {
@@ -1101,12 +1098,7 @@ export class CameraControls extends EventDispatcher {
 
 		};
 
-		if ( domElement ) {
-
-			this._addAllEventListeners( domElement );
-
-		}
-
+		if ( domElement ) this.connect( domElement );
 		this.update( 0 );
 
 	}
@@ -2482,22 +2474,41 @@ export class CameraControls extends EventDispatcher {
 	}
 
 	/**
-	 * Connect the cameraControls instance itself, add all eventListeners.
+	 * Attach all internal event handlers to enable drag control.
 	 * @category Methods
 	 */
 	connect( domElement: HTMLElement ): void {
 
+		if ( this._domElement ) {
+
+			console.warn( 'camera-controls is already connected.' );
+			return;
+
+		}
+
+		domElement.setAttribute( 'data-camera-controls-version', VERSION );
 		this._addAllEventListeners( domElement );
 
 	}
 
+	/**
+	 * Detach all internal event handlers to disable drag control.
+	 */
+	disconnect() {
+
+		this._removeAllEventListeners();
+		this._domElement = undefined;
+
+	}
+
 	/**
 	 * Dispose the cameraControls instance itself, remove all eventListeners.
 	 * @category Methods
 	 */
 	dispose(): void {
 
-		this._removeAllEventListeners();
+		this.disconnect();
+		if ( this._domElement && 'setAttribute' in this._domElement ) this._domElement.removeAttribute( 'data-camera-controls-version' );
 
 	}