@operato/scene-visualizer 9.1.1 → 10.0.0-beta.1

package/dist/three-controls.js

@@ -9,608 +9,406 @@
  * @author erich666 / http://erichaines.com
  */
 import * as THREE from 'three';
-var ThreeControls = function (object, component) {
-    this.object = object;
-    this.component = component;
-    // Set to false to disable this control
-    this.enabled = true;
-    // "target" sets the location of focus, where the object orbits around
-    this.target = new THREE.Vector3();
-    // How far you can dolly in and out ( PerspectiveCamera only )
-    this.minDistance = 0;
-    this.maxDistance = Infinity;
-    // How far you can zoom in and out ( OrthographicCamera only )
-    this.minZoom = 0;
-    this.maxZoom = Infinity;
-    // How far you can orbit vertically, upper and lower limits.
-    // Range is 0 to Math.PI radians.
-    this.minPolarAngle = 0; // radians
-    this.maxPolarAngle = Math.PI; // radians
-    // How far you can orbit horizontally, upper and lower limits.
-    // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
-    this.minAzimuthAngle = -Infinity; // radians
-    this.maxAzimuthAngle = Infinity; // radians
-    // Set to true to enable damping (inertia)
-    // If damping is enabled, you must call controls.update() in your animation loop
-    this.enableDamping = false;
-    this.dampingFactor = 0.25;
-    // This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
-    // Set to false to disable zooming
-    this.enableZoom = true;
-    this.zoomSpeed = 1.0;
-    // Set to false to disable rotating
-    this.enableRotate = true;
-    this.rotateSpeed = 1.0;
-    // Set to false to disable panning
-    this.enablePan = true;
-    this.keyPanSpeed = 7.0; // pixels moved per arrow key push
-    // Set to true to automatically rotate around the target
-    // If auto-rotate is enabled, you must call controls.update() in your animation loop
-    this.autoRotate = (this.component.app && !this.component.app.isEditMode && this.component.state.autoRotate) || false;
-    this.autoRotateSpeed = this.component.state.rotationSpeed || 2.0; // 30 seconds per round when fps is 60
-    // Set to false to disable use of the keys
-    this.enableKeys = true;
-    // The four arrow keys
-    this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
-    // Mouse buttons
-    this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
-    // for reset
-    this.target0 = this.target.clone();
-    this.position0 = this.object.position.clone();
-    this.zoom0 = this.object.zoom;
-    // flags
-    this.cameraChanged = false;
-    //
-    // public methods
-    //
-    this.getPolarAngle = function () {
-        return spherical.phi;
-    };
-    this.getAzimuthalAngle = function () {
-        return spherical.theta;
-    };
-    this.saveState = function () {
-        scope.target0.copy(scope.target);
-        scope.position0.copy(scope.object.position);
-        scope.zoom0 = scope.object.zoom;
-    };
-    this.reset = function () {
-        scope.target.copy(scope.target0);
-        scope.object.position.copy(scope.position0);
-        scope.object.zoom = scope.zoom0;
-        scope.object.updateProjectionMatrix();
-        // scope.dispatchEvent( changeEvent );
-        scope.update();
-        state = STATE.NONE;
-    };
-    // this method is exposed, but perhaps it would be better if we can make it private...
-    this.update = (function () {
-        var offset = new THREE.Vector3();
-        // so camera.up is the orbit axis
-        var quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
-        var quatInverse = quat.clone().invert();
-        var lastPosition = new THREE.Vector3();
-        var lastQuaternion = new THREE.Quaternion();
-        return function update() {
-            // if (!(scope.cameraChanged || scope.autoRotate))
-            //   return false;
-            var position = scope.object.position;
-            offset.copy(position).sub(scope.target);
-            // rotate offset to "y-axis-is-up" space
-            offset.applyQuaternion(quat);
-            // angle from z-axis around y-axis
-            spherical.setFromVector3(offset);
-            if (scope.autoRotate && state === STATE.NONE) {
-                rotateLeft(getAutoRotationAngle());
-            }
-            spherical.theta += sphericalDelta.theta;
-            spherical.phi += sphericalDelta.phi;
-            // restrict theta to be between desired limits
-            spherical.theta = Math.max(scope.minAzimuthAngle, Math.min(scope.maxAzimuthAngle, spherical.theta));
-            // restrict phi to be between desired limits
-            spherical.phi = Math.max(scope.minPolarAngle, Math.min(scope.maxPolarAngle, spherical.phi));
-            spherical.makeSafe();
-            spherical.radius *= scale;
-            // restrict radius to be between desired limits
-            spherical.radius = Math.max(scope.minDistance, Math.min(scope.maxDistance, spherical.radius));
-            // move target to panned location
-            scope.target.add(panOffset);
-            offset.setFromSpherical(spherical);
-            // rotate offset back to "camera-up-vector-is-up" space
-            offset.applyQuaternion(quatInverse);
-            position.copy(scope.target).add(offset);
-            scope.object.lookAt(scope.target);
-            if (scope.enableDamping === true) {
-                sphericalDelta.theta *= 1 - scope.dampingFactor;
-                sphericalDelta.phi *= 1 - scope.dampingFactor;
-            }
-            else {
-                sphericalDelta.set(0, 0, 0);
-            }
-            scale = 1;
-            panOffset.set(0, 0, 0);
-            // update condition is:
-            // min(camera displacement, camera rotation in radians)^2 > EPS
-            // using small-angle approximation cos(x/2) = 1 - x^2 / 8
-            // if ((scope.cameraChanged || zoomChanged) && (
-            //   lastPosition.distanceToSquared(scope.object.position) > EPS ||
-            //   8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS)) {
-            if (zoomChanged ||
-                lastPosition.distanceToSquared(scope.object.position) > EPS ||
-                8 * (1 - lastQuaternion.dot(scope.object.quaternion)) > EPS) {
-                lastPosition.copy(scope.object.position);
-                lastQuaternion.copy(scope.object.quaternion);
-                scope.component.invalidate();
-                scope.cameraChanged = false;
-                zoomChanged = false;
-                return true;
-            }
-            return false;
-        };
-    })();
-    this.dispose = function () { };
-    //
-    // event handlers - FSM: listen for events and reset state
-    //
-    this.onMouseDown = function (event) { };
-    this.onMouseMove = function (event) { };
-    this.onMouseUp = function (event) { };
-    this.onDragStart = function (event) {
-        if (this.enabled === false || this.enableRotate === false)
+const EPS = 0.000001;
+export class ThreeControls {
+    constructor(object, component) {
+        this.enabled = true;
+        this.target = new THREE.Vector3();
+        // How far you can dolly in and out (PerspectiveCamera only)
+        this.minDistance = 0;
+        this.maxDistance = Infinity;
+        // How far you can zoom in and out (OrthographicCamera only)
+        this.minZoom = 0;
+        this.maxZoom = Infinity;
+        // How far you can orbit vertically, upper and lower limits (0 to Math.PI radians)
+        this.minPolarAngle = 0;
+        this.maxPolarAngle = Math.PI;
+        // How far you can orbit horizontally (sub-interval of [-Math.PI, Math.PI])
+        this.minAzimuthAngle = -Infinity;
+        this.maxAzimuthAngle = Infinity;
+        this.enableDamping = false;
+        this.dampingFactor = 0.25;
+        this.enableZoom = true;
+        this.zoomSpeed = 1.0;
+        this.enableRotate = true;
+        this.rotateSpeed = 1.0;
+        this.enablePan = true;
+        this.keyPanSpeed = 7.0;
+        this.enableKeys = true;
+        this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
+        this.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };
+        this.cameraChanged = false;
+        this.lastScale = 1;
+        // Internal state
+        this._state = -1 /* State.NONE */;
+        this._spherical = new THREE.Spherical();
+        this._sphericalDelta = new THREE.Spherical();
+        this._scale = 1;
+        this._panOffset = new THREE.Vector3();
+        this._zoomChanged = false;
+        this._rotateStart = new THREE.Vector2();
+        this._rotateEnd = new THREE.Vector2();
+        this._rotateDelta = new THREE.Vector2();
+        this._panStart = new THREE.Vector2();
+        this._panEnd = new THREE.Vector2();
+        this._panDelta = new THREE.Vector2();
+        this._dollyStart = new THREE.Vector2();
+        this._dollyEnd = new THREE.Vector2();
+        this._dollyDelta = new THREE.Vector2();
+        this._startTime = null;
+        this._offsetTheta = 0;
+        // Cached objects for update()
+        this._offset = new THREE.Vector3();
+        this._lastPosition = new THREE.Vector3();
+        this._lastQuaternion = new THREE.Quaternion();
+        // Cached vectors for pan helpers
+        this._panLeftV = new THREE.Vector3();
+        this._panUpV = new THREE.Vector3();
+        this._panCalcOffset = new THREE.Vector3();
+        this.object = object;
+        this.component = component;
+        this.autoRotate =
+            (component.app && !component.app.isEditMode && component.state.autoRotate) || false;
+        this.autoRotateSpeed = component.state.rotationSpeed || 2.0;
+        this.target0 = this.target.clone();
+        this.position0 = object.position.clone();
+        this.zoom0 = object.zoom;
+        this._quat = new THREE.Quaternion().setFromUnitVectors(object.up, new THREE.Vector3(0, 1, 0));
+        this._quatInverse = this._quat.clone().invert();
+        this.update();
+    }
+    getPolarAngle() {
+        return this._spherical.phi;
+    }
+    getAzimuthalAngle() {
+        return this._spherical.theta;
+    }
+    saveState() {
+        this.target0.copy(this.target);
+        this.position0.copy(this.object.position);
+        this.zoom0 = this.object.zoom;
+    }
+    reset() {
+        this.target.copy(this.target0);
+        this.object.position.copy(this.position0);
+        this.object.zoom = this.zoom0;
+        this.object.updateProjectionMatrix();
+        this.update();
+        this._state = -1 /* State.NONE */;
+    }
+    update() {
+        const position = this.object.position;
+        this._offset.copy(position).sub(this.target);
+        this._offset.applyQuaternion(this._quat);
+        this._spherical.setFromVector3(this._offset);
+        if (this.autoRotate && this._state === -1 /* State.NONE */) {
+            this._rotateLeft(this._getAutoRotationAngle());
+        }
+        this._spherical.theta += this._sphericalDelta.theta;
+        this._spherical.phi += this._sphericalDelta.phi;
+        this._spherical.theta = Math.max(this.minAzimuthAngle, Math.min(this.maxAzimuthAngle, this._spherical.theta));
+        this._spherical.phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, this._spherical.phi));
+        this._spherical.makeSafe();
+        this._spherical.radius *= this._scale;
+        this._spherical.radius = Math.max(this.minDistance, Math.min(this.maxDistance, this._spherical.radius));
+        this.target.add(this._panOffset);
+        this._offset.setFromSpherical(this._spherical);
+        this._offset.applyQuaternion(this._quatInverse);
+        position.copy(this.target).add(this._offset);
+        this.object.lookAt(this.target);
+        if (this.enableDamping) {
+            this._sphericalDelta.theta *= 1 - this.dampingFactor;
+            this._sphericalDelta.phi *= 1 - this.dampingFactor;
+        }
+        else {
+            this._sphericalDelta.set(0, 0, 0);
+        }
+        this._scale = 1;
+        this._panOffset.set(0, 0, 0);
+        if (this._zoomChanged ||
+            this._lastPosition.distanceToSquared(this.object.position) > EPS ||
+            8 * (1 - this._lastQuaternion.dot(this.object.quaternion)) > EPS) {
+            this._lastPosition.copy(this.object.position);
+            this._lastQuaternion.copy(this.object.quaternion);
+            this.component.invalidate();
+            this.cameraChanged = false;
+            this._zoomChanged = false;
+            return true;
+        }
+        return false;
+    }
+    dispose() { }
+    // Event handlers
+    onDragStart(event) {
+        if (!this.enabled || !this.enableRotate)
             return;
-        scope.component.stop();
+        this.component.stop();
         this.autoRotate = false;
-        if (event.altKey === true)
-            state = STATE.PAN;
-        else
-            state = STATE.ROTATE;
-        switch (state) {
-            case STATE.ROTATE:
+        this._state = event.altKey ? 2 /* State.PAN */ : 0 /* State.ROTATE */;
+        switch (this._state) {
+            case 0 /* State.ROTATE */:
                 if (this.enableRotate)
-                    handleDragStartRotate(event);
+                    this._handleDragStartRotate(event);
                 break;
-            case STATE.DOLLY:
-                if (this.enableZoom)
-                    handleDragStartDolly(event);
-                break;
-            case STATE.PAN:
+            case 2 /* State.PAN */:
                 if (this.enablePan)
-                    handleDragStartPan(event);
+                    this._handleDragStartPan(event);
                 break;
         }
-    };
-    this.onDragMove = function (event) {
+    }
+    onDragMove(event) {
         if (!this.enabled)
             return;
-        if (event.altKey === true)
-            state = STATE.PAN;
-        else
-            state = STATE.ROTATE;
-        switch (state) {
-            case STATE.ROTATE:
+        this._state = event.altKey ? 2 /* State.PAN */ : 0 /* State.ROTATE */;
+        switch (this._state) {
+            case 0 /* State.ROTATE */:
                 if (this.enableRotate)
-                    handleDragMoveRotate(event);
+                    this._handleDragMoveRotate(event);
                 break;
-            case STATE.DOLLY:
-                if (this.enableZoom)
-                    handleDragMoveDolly(event);
-                break;
-            case STATE.PAN:
+            case 2 /* State.PAN */:
                 if (this.enablePan)
-                    handleDragMovePan(event);
+                    this._handleDragMovePan(event);
                 break;
         }
-    };
-    this.onDragEnd = function (event) {
-        if (this.enabled === false || this.enableRotate === false)
+    }
+    onDragEnd(event) {
+        if (!this.enabled || !this.enableRotate)
             return;
-        state = STATE.NONE;
-        START_TIME = null;
+        this._state = -1 /* State.NONE */;
+        this._startTime = null;
         this.autoRotate = this.component.state.autoRotate || false;
-        scope.component.threed_animate();
-        // scope.update();
-    };
-    this.onKeyDown = function (event) {
-        if (this.enabled === false || this.enableKeys === false || this.enablePan === false)
+        this.component.threed_animate();
+    }
+    onKeyDown(event) {
+        if (!this.enabled || !this.enableKeys || !this.enablePan)
             return;
-        handleKeyDown(event);
-    };
-    this.onTouchStart = function (event) {
-        if (this.enabled === false)
+        this._handleKeyDown(event);
+    }
+    onTouchStart(event) {
+        if (!this.enabled)
             return;
         switch (event.touches.length) {
-            case 1: // one-fingered touch: rotate
-                if (this.enableRotate === false)
+            case 1:
+                if (!this.enableRotate)
                     return;
-                handleTouchStartRotate(event);
-                state = STATE.TOUCH_ROTATE;
+                this._handleTouchStartRotate(event);
+                this._state = 3 /* State.TOUCH_ROTATE */;
                 break;
-            case 2: // two-fingered touch: pan
+            case 2:
                 this.lastScale = event.scale || 1;
-                if (this.enablePan === false)
+                if (!this.enablePan)
                     return;
-                handleTouchStartPan(event);
-                state = STATE.TOUCH_PAN;
+                this._handleTouchStartPan(event);
+                this._state = 5 /* State.TOUCH_PAN */;
                 break;
-            // case 2: // two-fingered touch: dolly
-            //   if ( this.enableZoom === false ) return;
-            //   handleTouchStartDolly( event );
-            //   state = STATE.TOUCH_DOLLY;
-            //   break;
-            // case 3: // three-fingered touch: pan
-            //   if ( this.enablePan === false ) return;
-            //   handleTouchStartPan( event );
-            //   state = STATE.TOUCH_PAN;
-            //   break;
             default:
-                state = STATE.NONE;
+                this._state = -1 /* State.NONE */;
         }
-    };
-    this.onTouchMove = function (event) {
-        if (this.enabled === false)
+    }
+    onTouchMove(event) {
+        if (!this.enabled)
             return;
         switch (event.touches.length) {
-            case 1: // one-fingered touch: rotate
-                if (this.enableRotate === false)
+            case 1:
+                if (!this.enableRotate)
+                    return;
+                if (this._state !== 3 /* State.TOUCH_ROTATE */)
                     return;
-                if (state !== STATE.TOUCH_ROTATE)
-                    return; // is this needed?...
-                handleTouchMoveRotate(event);
+                this._handleTouchMoveRotate(event);
                 break;
-            case 2: // two-fingered touch: pan
-                if (Math.abs(this.lastScale - event.scale || 1) > 0.05) {
+            case 2:
+                if (Math.abs(this.lastScale - (event.scale || 1)) > 0.05)
                     return;
-                }
-                if (this.enablePan === false)
+                if (!this.enablePan)
                     return;
-                if (state !== STATE.TOUCH_PAN)
-                    return; // is this needed?...
-                handleTouchMovePan(event);
+                if (this._state !== 5 /* State.TOUCH_PAN */)
+                    return;
+                this._handleTouchMovePan(event);
                 break;
-            // case 2: // two-fingered touch: dolly
-            //   if ( this.enableZoom === false ) return;
-            //   if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?...
-            //   handleTouchMoveDolly( event );
-            //   break;
-            // case 3: // three-fingered touch: pan
-            //   if ( this.enablePan === false ) return;
-            //   if ( state !== STATE.TOUCH_PAN ) return; // is this needed?...
-            //   handleTouchMovePan( event );
-            //   break;
             default:
-                state = STATE.NONE;
+                this._state = -1 /* State.NONE */;
         }
-    };
-    this.onTouchEnd = function (event) {
-        if (this.enabled === false)
+    }
+    onTouchEnd(event) {
+        if (!this.enabled)
             return;
         this.lastScale = 1;
-        handleTouchEnd(event);
-        // this.dispatchEvent( endEvent );
-        state = STATE.NONE;
-    };
-    this.doAutoRotate = function (autoRotate) {
-        START_TIME = null;
+        this._state = -1 /* State.NONE */;
+    }
+    doAutoRotate(autoRotate) {
+        this._startTime = null;
         this.cameraChanged = true;
         this.autoRotate = autoRotate;
         this.update();
-    };
-    //
-    // internals
-    //
-    var scope = this;
-    var changeEvent = { type: 'change' };
-    var startEvent = { type: 'start' };
-    var endEvent = { type: 'end' };
-    var STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5 };
-    var state = STATE.NONE;
-    var EPS = 0.000001;
-    // current position in spherical coordinates
-    var spherical = new THREE.Spherical();
-    var sphericalDelta = new THREE.Spherical();
-    var scale = 1;
-    var panOffset = new THREE.Vector3();
-    var zoomChanged = false;
-    var rotateStart = new THREE.Vector2();
-    var rotateEnd = new THREE.Vector2();
-    var rotateDelta = new THREE.Vector2();
-    var panStart = new THREE.Vector2();
-    var panEnd = new THREE.Vector2();
-    var panDelta = new THREE.Vector2();
-    var dollyStart = new THREE.Vector2();
-    var dollyEnd = new THREE.Vector2();
-    var dollyDelta = new THREE.Vector2();
-    var START_TIME = null;
-    var offsetTheta = 0;
-    function getAutoRotationAngle() {
-        if (!START_TIME) {
-            START_TIME = performance.now();
-            offsetTheta = spherical.theta;
+    }
+    // Private helpers
+    _getAutoRotationAngle() {
+        if (!this._startTime) {
+            this._startTime = performance.now();
+            this._offsetTheta = this._spherical.theta;
             return 0;
         }
-        var lastTime = performance.now() - START_TIME;
-        var progress = lastTime / (60000 / scope.autoRotateSpeed);
-        // return - 2 * Math.PI * progress;
-        return 2 * Math.PI * progress + spherical.theta - offsetTheta;
-        // return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
-    }
-    function getZoomScale() {
-        return Math.pow(0.95, scope.zoomSpeed);
-    }
-    function rotateLeft(angle) {
-        sphericalDelta.theta -= angle;
-    }
-    function rotateUp(angle) {
-        sphericalDelta.phi -= angle;
-    }
-    var panLeft = (function () {
-        var v = new THREE.Vector3();
-        return function panLeft(distance, objectMatrix) {
-            v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
-            v.multiplyScalar(-distance);
-            panOffset.add(v);
-        };
-    })();
-    var panUp = (function () {
-        var v = new THREE.Vector3();
-        return function panUp(distance, objectMatrix) {
-            v.setFromMatrixColumn(objectMatrix, 1); // get Y column of objectMatrix
-            v.multiplyScalar(distance);
-            panOffset.add(v);
-        };
-    })();
-    // deltaX and deltaY are in pixels; right and down are positive
-    var pan = (function () {
-        var offset = new THREE.Vector3();
-        return function pan(deltaX, deltaY) {
-            // var element = scope.component === document ? scope.component.body : scope.component
-            const { width, height } = scope.component.bounds;
-            if (scope.object.isPerspectiveCamera) {
-                // perspective
-                var position = scope.object.position;
-                offset.copy(position).sub(scope.target);
-                var targetDistance = offset.length();
-                // half of the fov is center to top of screen
-                targetDistance *= Math.tan(((scope.object.fov / 2) * Math.PI) / 180.0);
-                // we actually don't use screenWidth, since perspective camera is fixed to screen height
-                panLeft((2 * deltaX * targetDistance) / height, scope.object.matrix);
-                // panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
-                panUp((2 * deltaY * targetDistance) / height, scope.object.matrix);
-                // panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
-            }
-            else if (scope.object.isOrthographicCamera) {
-                // orthographic
-                panLeft((deltaX * (scope.object.right - scope.object.left)) / scope.object.zoom / width, scope.object.matrix);
-                // panLeft( deltaX * ( scope.object.right - scope.object.left ) / element.clientWidth, scope.object.matrix );
-                panUp((deltaY * (scope.object.top - scope.object.bottom)) / scope.object.zoom / height, scope.object.matrix);
-                // panUp( deltaY * ( scope.object.top - scope.object.bottom ) / element.clientHeight, scope.object.matrix );
-            }
-            else {
-                // camera neither orthographic nor perspective
-                console.warn('WARNING: ThreeControls.js encountered an unknown camera type - pan disabled.');
-                scope.enablePan = false;
-            }
-        };
-    })();
-    function dollyIn(dollyScale) {
-        if (scope.object.isPerspectiveCamera) {
-            scale /= dollyScale;
+        const elapsed = performance.now() - this._startTime;
+        const progress = elapsed / (60000 / this.autoRotateSpeed);
+        return 2 * Math.PI * progress + this._spherical.theta - this._offsetTheta;
+    }
+    _getZoomScale() {
+        return Math.pow(0.95, this.zoomSpeed);
+    }
+    _rotateLeft(angle) {
+        this._sphericalDelta.theta -= angle;
+    }
+    _rotateUp(angle) {
+        this._sphericalDelta.phi -= angle;
+    }
+    _panLeft(distance, objectMatrix) {
+        this._panLeftV.setFromMatrixColumn(objectMatrix, 0);
+        this._panLeftV.multiplyScalar(-distance);
+        this._panOffset.add(this._panLeftV);
+    }
+    _panUp(distance, objectMatrix) {
+        this._panUpV.setFromMatrixColumn(objectMatrix, 1);
+        this._panUpV.multiplyScalar(distance);
+        this._panOffset.add(this._panUpV);
+    }
+    _pan(deltaX, deltaY) {
+        const { width, height } = this.component.bounds;
+        const cam = this.object;
+        if (cam.isPerspectiveCamera) {
+            this._panCalcOffset.copy(cam.position).sub(this.target);
+            let targetDistance = this._panCalcOffset.length();
+            targetDistance *= Math.tan(((cam.fov / 2) * Math.PI) / 180.0);
+            this._panLeft((2 * deltaX * targetDistance) / height, cam.matrix);
+            this._panUp((2 * deltaY * targetDistance) / height, cam.matrix);
+        }
+        else if (cam.isOrthographicCamera) {
+            this._panLeft((deltaX * (cam.right - cam.left)) / cam.zoom / width, cam.matrix);
+            this._panUp((deltaY * (cam.top - cam.bottom)) / cam.zoom / height, cam.matrix);
+        }
+        else {
+            console.warn('WARNING: ThreeControls encountered an unknown camera type - pan disabled.');
+            this.enablePan = false;
+        }
+    }
+    _dollyIn(dollyScale) {
+        const cam = this.object;
+        if (cam.isPerspectiveCamera) {
+            this._scale /= dollyScale;
         }
-        else if (scope.object.isOrthographicCamera) {
-            scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom * dollyScale));
-            scope.object.updateProjectionMatrix();
-            zoomChanged = true;
+        else if (cam.isOrthographicCamera) {
+            cam.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, cam.zoom * dollyScale));
+            cam.updateProjectionMatrix();
+            this._zoomChanged = true;
         }
         else {
-            console.warn('WARNING: ThreeControls.js encountered an unknown camera type - dolly/zoom disabled.');
-            scope.enableZoom = false;
+            console.warn('WARNING: ThreeControls encountered an unknown camera type - dolly/zoom disabled.');
+            this.enableZoom = false;
         }
     }
-    function dollyOut(dollyScale) {
-        if (scope.object.isPerspectiveCamera) {
-            scale *= dollyScale;
+    _dollyOut(dollyScale) {
+        const cam = this.object;
+        if (cam.isPerspectiveCamera) {
+            this._scale *= dollyScale;
         }
-        else if (scope.object.isOrthographicCamera) {
-            scope.object.zoom = Math.max(scope.minZoom, Math.min(scope.maxZoom, scope.object.zoom / dollyScale));
-            scope.object.updateProjectionMatrix();
-            zoomChanged = true;
+        else if (cam.isOrthographicCamera) {
+            cam.zoom = Math.max(this.minZoom, Math.min(this.maxZoom, cam.zoom / dollyScale));
+            cam.updateProjectionMatrix();
+            this._zoomChanged = true;
         }
         else {
-            console.warn('WARNING: ThreeControls.js encountered an unknown camera type - dolly/zoom disabled.');
-            scope.enableZoom = false;
+            console.warn('WARNING: ThreeControls encountered an unknown camera type - dolly/zoom disabled.');
+            this.enableZoom = false;
         }
     }
-    //
-    // event callbacks - update the object state
-    //
-    function handleDragStartRotate(event) {
-        rotateStart.set(event.offsetX, event.offsetY);
-    }
-    function handleDragStartDolly(event) {
-        dollyStart.set(event.offsetX, event.offsetY);
-    }
-    function handleDragStartPan(event) {
-        panStart.set(event.offsetX, event.offsetY);
-    }
-    function handleDragMoveRotate(event) {
-        rotateEnd.set(event.offsetX, event.offsetY);
-        rotateDelta.subVectors(rotateEnd, rotateStart);
-        var element = scope.component;
-        // rotating across whole screen goes 360 degrees around
-        rotateLeft(((2 * Math.PI * rotateDelta.x) / element.getState('width')) * scope.rotateSpeed);
-        // rotating up and down along whole screen attempts to go 360, but limited to 180
-        rotateUp(((2 * Math.PI * rotateDelta.y) / element.getState('height')) * scope.rotateSpeed);
-        rotateStart.copy(rotateEnd);
-        scope.update();
-    }
-    function handleDragMoveDolly(event) {
-        dollyEnd.set(event.offsetX, event.offsetY);
-        dollyDelta.subVectors(dollyEnd, dollyStart);
-        if (dollyDelta.y > 0) {
-            dollyIn(getZoomScale());
+    // Drag handlers
+    _handleDragStartRotate(event) {
+        this._rotateStart.set(event.offsetX, event.offsetY);
+    }
+    _handleDragStartDolly(event) {
+        this._dollyStart.set(event.offsetX, event.offsetY);
+    }
+    _handleDragStartPan(event) {
+        this._panStart.set(event.offsetX, event.offsetY);
+    }
+    _handleDragMoveRotate(event) {
+        this._rotateEnd.set(event.offsetX, event.offsetY);
+        this._rotateDelta.subVectors(this._rotateEnd, this._rotateStart);
+        const element = this.component;
+        this._rotateLeft(((2 * Math.PI * this._rotateDelta.x) / element.getState('width')) * this.rotateSpeed);
+        this._rotateUp(((2 * Math.PI * this._rotateDelta.y) / element.getState('height')) * this.rotateSpeed);
+        this._rotateStart.copy(this._rotateEnd);
+        this.update();
+    }
+    _handleDragMoveDolly(event) {
+        this._dollyEnd.set(event.offsetX, event.offsetY);
+        this._dollyDelta.subVectors(this._dollyEnd, this._dollyStart);
+        if (this._dollyDelta.y > 0) {
+            this._dollyIn(this._getZoomScale());
         }
-        else if (dollyDelta.y < 0) {
-            dollyOut(getZoomScale());
+        else if (this._dollyDelta.y < 0) {
+            this._dollyOut(this._getZoomScale());
         }
-        dollyStart.copy(dollyEnd);
-        scope.update();
-    }
-    function handleDragMovePan(event) {
-        panEnd.set(event.offsetX, event.offsetY);
-        panDelta.subVectors(panEnd, panStart);
-        pan(panDelta.x, panDelta.y);
-        panStart.copy(panEnd);
-        scope.update();
-    }
-    function handleMouseUp(event) { }
-    function handleKeyDown(event) {
+        this._dollyStart.copy(this._dollyEnd);
+        this.update();
+    }
+    _handleDragMovePan(event) {
+        this._panEnd.set(event.offsetX, event.offsetY);
+        this._panDelta.subVectors(this._panEnd, this._panStart);
+        this._pan(this._panDelta.x, this._panDelta.y);
+        this._panStart.copy(this._panEnd);
+        this.update();
+    }
+    _handleKeyDown(event) {
         switch (event.keyCode) {
-            case scope.keys.UP:
-                pan(0, scope.keyPanSpeed);
-                scope.update();
+            case this.keys.UP:
+                this._pan(0, this.keyPanSpeed);
+                this.update();
                 break;
-            case scope.keys.BOTTOM:
-                pan(0, -scope.keyPanSpeed);
-                scope.update();
+            case this.keys.BOTTOM:
+                this._pan(0, -this.keyPanSpeed);
+                this.update();
                 break;
-            case scope.keys.LEFT:
-                pan(scope.keyPanSpeed, 0);
-                scope.update();
+            case this.keys.LEFT:
+                this._pan(this.keyPanSpeed, 0);
+                this.update();
                 break;
-            case scope.keys.RIGHT:
-                pan(-scope.keyPanSpeed, 0);
-                scope.update();
+            case this.keys.RIGHT:
+                this._pan(-this.keyPanSpeed, 0);
+                this.update();
                 break;
         }
     }
-    function handleTouchStartRotate(event) {
-        var x = event.touches[0].offsetX || event.touches[0].pageX;
-        var y = event.touches[0].offsetY || event.touches[0].pageY;
-        rotateStart.set(x, y);
-    }
-    function handleTouchStartDolly(event) {
-        var dx = event.touches[0].pageX - event.touches[1].pageX;
-        var dy = event.touches[0].pageY - event.touches[1].pageY;
-        var distance = Math.sqrt(dx * dx + dy * dy);
-        dollyStart.set(0, distance);
-    }
-    function handleTouchStartPan(event) {
-        var x = event.touches[0].offsetX || event.touches[0].pageX;
-        var y = event.touches[0].offsetY || event.touches[0].pageY;
-        panStart.set(x, y);
-    }
-    function handleTouchMoveRotate(event) {
-        var x = event.touches[0].offsetX || event.touches[0].pageX;
-        var y = event.touches[0].offsetY || event.touches[0].pageY;
-        rotateEnd.set(x, y);
-        rotateDelta.subVectors(rotateEnd, rotateStart);
-        var element = scope.component === document ? scope.component.body : scope.component;
-        // rotating across whole screen goes 360 degrees around
-        rotateLeft(((2 * Math.PI * rotateDelta.x) / element.model.width) * scope.rotateSpeed);
-        // rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
-        // rotating up and down along whole screen attempts to go 360, but limited to 180
-        rotateUp(((2 * Math.PI * rotateDelta.y) / element.model.height) * scope.rotateSpeed);
-        // rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
-        rotateStart.copy(rotateEnd);
-        scope.update();
-    }
-    function handleTouchMoveDolly(event) {
-        var dx = event.touches[0].pageX - event.touches[1].pageX;
-        var dy = event.touches[0].pageY - event.touches[1].pageY;
-        var distance = Math.sqrt(dx * dx + dy * dy);
-        dollyEnd.set(0, distance);
-        dollyDelta.subVectors(dollyEnd, dollyStart);
-        if (dollyDelta.y > 0) {
-            dollyOut(getZoomScale());
-        }
-        else if (dollyDelta.y < 0) {
-            dollyIn(getZoomScale());
-        }
-        dollyStart.copy(dollyEnd);
-        scope.update();
-    }
-    function handleTouchMovePan(event) {
-        var x = event.touches[0].offsetX || event.touches[0].pageX;
-        var y = event.touches[0].offsetY || event.touches[0].pageY;
-        panEnd.set(x, y);
-        panDelta.subVectors(panEnd, panStart);
-        pan(panDelta.x, panDelta.y);
-        panStart.copy(panEnd);
-        scope.update();
-    }
-    function handleTouchEnd(event) { }
-    this.update();
-};
-ThreeControls.prototype = {}; //Object.create( THREE.EventDispatcher.prototype );
-ThreeControls.prototype.constructor = ThreeControls;
-Object.defineProperties(ThreeControls.prototype, {
-    center: {
-        get: function () {
-            console.warn('THREE.OrbitControls: .center has been renamed to .target');
-            return this.target;
-        }
-    },
-    // backward compatibility
-    noZoom: {
-        get: function () {
-            console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
-            return !this.enableZoom;
-        },
-        set: function (value) {
-            console.warn('THREE.OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.');
-            this.enableZoom = !value;
-        }
-    },
-    noRotate: {
-        get: function () {
-            console.warn('THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.');
-            return !this.enableRotate;
-        },
-        set: function (value) {
-            console.warn('THREE.OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.');
-            this.enableRotate = !value;
-        }
-    },
-    noPan: {
-        get: function () {
-            console.warn('THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.');
-            return !this.enablePan;
-        },
-        set: function (value) {
-            console.warn('THREE.OrbitControls: .noPan has been deprecated. Use .enablePan instead.');
-            this.enablePan = !value;
-        }
-    },
-    noKeys: {
-        get: function () {
-            console.warn('THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.');
-            return !this.enableKeys;
-        },
-        set: function (value) {
-            console.warn('THREE.OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.');
-            this.enableKeys = !value;
-        }
-    },
-    staticMoving: {
-        get: function () {
-            console.warn('THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.');
-            return !this.enableDamping;
-        },
-        set: function (value) {
-            console.warn('THREE.OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.');
-            this.enableDamping = !value;
-        }
-    },
-    dynamicDampingFactor: {
-        get: function () {
-            console.warn('THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.');
-            return this.dampingFactor;
-        },
-        set: function (value) {
-            console.warn('THREE.OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.');
-            this.dampingFactor = value;
-        }
+    // Touch handlers
+    _handleTouchStartRotate(event) {
+        const x = event.touches[0].offsetX || event.touches[0].pageX;
+        const y = event.touches[0].offsetY || event.touches[0].pageY;
+        this._rotateStart.set(x, y);
+    }
+    _handleTouchStartPan(event) {
+        const x = event.touches[0].offsetX || event.touches[0].pageX;
+        const y = event.touches[0].offsetY || event.touches[0].pageY;
+        this._panStart.set(x, y);
+    }
+    _handleTouchMoveRotate(event) {
+        const x = event.touches[0].offsetX || event.touches[0].pageX;
+        const y = event.touches[0].offsetY || event.touches[0].pageY;
+        this._rotateEnd.set(x, y);
+        this._rotateDelta.subVectors(this._rotateEnd, this._rotateStart);
+        const model = this.component.model;
+        this._rotateLeft(((2 * Math.PI * this._rotateDelta.x) / model.width) * this.rotateSpeed);
+        this._rotateUp(((2 * Math.PI * this._rotateDelta.y) / model.height) * this.rotateSpeed);
+        this._rotateStart.copy(this._rotateEnd);
+        this.update();
+    }
+    _handleTouchMovePan(event) {
+        const x = event.touches[0].offsetX || event.touches[0].pageX;
+        const y = event.touches[0].offsetY || event.touches[0].pageY;
+        this._panEnd.set(x, y);
+        this._panDelta.subVectors(this._panEnd, this._panStart);
+        this._pan(this._panDelta.x, this._panDelta.y);
+        this._panStart.copy(this._panEnd);
+        this.update();
     }
-});
+}
 export default ThreeControls;
 //# sourceMappingURL=three-controls.js.map