@itwin/imodel-components-react 5.19.0 → 5.21.0

package/lib/imodel-components-react/navigationaids/CubeNavigationAid.js

@@ -104,195 +104,26 @@ export var CubeHover;
  * @public
  */
 export class CubeNavigationAid extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._start = Vector2d.createZero();
-        this.state = {
-            dragging: false,
-            startRotMatrix: Matrix3d.createIdentity(),
-            endRotMatrix: Matrix3d.createIdentity(),
-            animation: 1,
-            hoverMap: {},
-            face: Face.Top,
-        };
-        this._mounted = false;
-        this._labels = {
-            [Face.Right]: UiIModelComponents.translate("cube.right"),
-            [Face.Left]: UiIModelComponents.translate("cube.left"),
-            [Face.Back]: UiIModelComponents.translate("cube.back"),
-            [Face.Front]: UiIModelComponents.translate("cube.front"),
-            [Face.Top]: UiIModelComponents.translate("cube.top"),
-            [Face.Bottom]: UiIModelComponents.translate("cube.bottom"),
-        };
-        // Synchronize with rotation coming from the Viewport
-        this._handleViewRotationChangeEvent = (args) => {
-            const { animation, dragging, endRotMatrix } = this.state;
-            if (this.props.viewport === args.viewport && animation >= 1 && !dragging) {
-                const newMatrix = this.props.viewport.view.getRotation().clone();
-                if (!endRotMatrix.isAlmostEqual(newMatrix)) {
-                    this.setState({
-                        startRotMatrix: newMatrix,
-                        endRotMatrix: newMatrix,
-                        animation: 1,
-                        face: Face.None,
-                    });
-                }
-            }
-        };
-        this._animation = () => {
-            const t = Date.now();
-            const delta = this._lastTime ? t - this._lastTime : 16;
-            this._lastTime = t;
-            if (this.state.animation !== 1) {
-                const animation = Math.min(1, this.state.animation +
-                    delta / (1000 * (this.props.animationTime || 0.4)));
-                if (this._mounted) {
-                    this.setState({ animation }, () => {
-                        this._animationFrame = setTimeout(this._animation, 16.667);
-                    });
-                }
-            }
-            else {
-                this._lastTime = undefined;
-                this._animationEnd();
-            }
-        };
-        this._animationEnd = () => {
-            ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, this.state.face, true);
-            const startRotMatrix = this.state.endRotMatrix.clone();
-            if (this._mounted) {
-                this.setState({ startRotMatrix }, () => {
-                    if (this.props.onAnimationEnd)
-                        this.props.onAnimationEnd();
-                });
-            }
-        };
-        this._handleCellHoverChange = (vect, state) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            const hoverMap = this.state.hoverMap;
-            hoverMap[`${vect.x}-${vect.y}-${vect.z}`] = state;
-            this.setState({ hoverMap });
-        };
-        this._isInteractionLocked = () => {
-            // Locked by markup
-            if (undefined !== this.props.viewport &&
-                this.props.viewport === IModelApp.toolAdmin.markupView) {
-                return true;
-            }
-            return false;
-        };
-        this._onArrowClick = (arrow) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            const { newRotation, face } = this.getArrowRotationAndFace(arrow);
-            this._animateRotation(newRotation, face);
-        };
-        this._lastClientXY = Vector2d.createZero();
-        this._handleBoxMouseDown = (event) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            event.preventDefault();
-            // only start listening after drag is confirmed. Ie. the 3D box is clicked.
-            window.addEventListener("mousemove", this._onMouseMove, false);
-            window.addEventListener("mouseup", this._onMouseUp, false);
-            this._lastClientXY = Vector2d.create(event.clientX, event.clientY);
-            this._start = this._lastClientXY;
-        };
-        this._onMouseMove = (event) => {
-            const mousePos = Vector2d.create(event.clientX, event.clientY);
-            this._processDrag(mousePos);
-        };
-        this._onMouseUp = () => {
-            if (this.state.dragging) {
-                this.setState({ dragging: false });
-                ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
-            }
-            // remove so event only triggers after this.onMouseStartDrag
-            window.removeEventListener("mousemove", this._onMouseMove);
-            window.removeEventListener("mouseup", this._onMouseUp);
-        };
-        this._handleBoxTouchStart = (event) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            if (1 !== event.targetTouches.length)
-                return;
-            window.addEventListener("touchmove", this._onTouchMove, false);
-            window.addEventListener("touchend", this._onTouchEnd, false);
-            this._lastClientXY = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            this._start = this._lastClientXY;
-        };
-        this._onTouchMove = (event) => {
-            if (1 !== event.targetTouches.length)
-                return;
-            const mousePos = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            this._processDrag(mousePos);
-        };
-        this._onTouchEnd = (event) => {
-            if (0 !== event.targetTouches.length)
-                return;
-            if (this.state.dragging) {
-                this.setState({ dragging: false });
-                ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
-            }
-            window.removeEventListener("touchmove", this._onTouchMove);
-            window.removeEventListener("touchend", this._onTouchEnd);
-        };
-        this._handleFaceCellClick = (pos, face) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            const { endRotMatrix } = this.state;
-            let rotMatrix = Matrix3d.createRigidViewAxesZTowardsEye(pos.x, pos.y, pos.z).inverse();
-            if (rotMatrix) {
-                // if isMatrixFace and user is clicking on top/bottom, the current matrix face must be top or bottom
-                if (!CubeNavigationAid._isMatrixFace(endRotMatrix) &&
-                    (face === Face.Top || face === Face.Bottom)) {
-                    const angleAxis = endRotMatrix.getAxisAndAngleOfRotation();
-                    if (angleAxis.ok) {
-                        const xAx = endRotMatrix.columnX();
-                        const a = Math.atan2(xAx.y, xAx.x);
-                        const r = (Math.round((a * 2) / Math.PI) * Math.PI) / 2; // round to quarter turn intervals
-                        const rot = Matrix3d.createRotationAroundAxisIndex(AxisIndex.Z, Angle.createRadians(r));
-                        rotMatrix = rot.multiplyMatrixMatrix(rotMatrix);
-                    }
-                }
-                this._animateRotation(rotMatrix, face);
-            }
-            window.removeEventListener("mousemove", this._onMouseMove);
-        };
-        this._animateRotation = (endRotMatrix, face) => {
-            if (this.state.endRotMatrix.isAlmostEqual(endRotMatrix))
-                return;
-            // set animation variables, let css transitions animate it.
-            this._animationFrame = setTimeout(this._animation, 16.667);
-            this.setState((prevState) => ({
-                startRotMatrix: prevState.endRotMatrix,
-                endRotMatrix,
-                animation: 0,
-                face,
-            }));
-        };
-        this._setRotation = (endRotMatrix, face) => {
-            ViewportComponentEvents.setCubeMatrix(endRotMatrix, face);
-            // set variables, with animTime at 0 to prevent animation.
-            this.setState({
-                startRotMatrix: endRotMatrix,
-                endRotMatrix,
-                animation: 1,
-                face,
-            });
-        };
-    }
+    _start = Vector2d.createZero();
+    state = {
+        dragging: false,
+        startRotMatrix: Matrix3d.createIdentity(),
+        endRotMatrix: Matrix3d.createIdentity(),
+        animation: 1,
+        hoverMap: {},
+        face: Face.Top,
+    };
+    _lastTime;
+    _animationFrame;
+    _mounted = false;
+    _labels = {
+        [Face.Right]: UiIModelComponents.translate("cube.right"),
+        [Face.Left]: UiIModelComponents.translate("cube.left"),
+        [Face.Back]: UiIModelComponents.translate("cube.back"),
+        [Face.Front]: UiIModelComponents.translate("cube.front"),
+        [Face.Top]: UiIModelComponents.translate("cube.top"),
+        [Face.Bottom]: UiIModelComponents.translate("cube.bottom"),
+    };
     componentDidMount() {
         this._mounted = true;
         ViewportComponentEvents.onViewRotationChangeEvent.addListener(this._handleViewRotationChangeEvent);
@@ -311,6 +142,60 @@ export class CubeNavigationAid extends React.Component {
         clearTimeout(this._animationFrame);
         this._mounted = false;
     }
+    // Synchronize with rotation coming from the Viewport
+    _handleViewRotationChangeEvent = (args) => {
+        const { animation, dragging, endRotMatrix } = this.state;
+        if (this.props.viewport === args.viewport && animation >= 1 && !dragging) {
+            const newMatrix = this.props.viewport.view.getRotation().clone();
+            if (!endRotMatrix.isAlmostEqual(newMatrix)) {
+                this.setState({
+                    startRotMatrix: newMatrix,
+                    endRotMatrix: newMatrix,
+                    animation: 1,
+                    face: Face.None,
+                });
+            }
+        }
+    };
+    _animation = () => {
+        const t = Date.now();
+        const delta = this._lastTime ? t - this._lastTime : 16;
+        this._lastTime = t;
+        if (this.state.animation !== 1) {
+            const animation = Math.min(1, this.state.animation +
+                delta / (1000 * (this.props.animationTime || 0.4)));
+            if (this._mounted) {
+                this.setState({ animation }, () => {
+                    this._animationFrame = setTimeout(this._animation, 16.667);
+                });
+            }
+        }
+        else {
+            this._lastTime = undefined;
+            this._animationEnd();
+        }
+    };
+    _animationEnd = () => {
+        ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, this.state.face, true);
+        const startRotMatrix = this.state.endRotMatrix.clone();
+        if (this._mounted) {
+            this.setState({ startRotMatrix }, () => {
+                if (this.props.onAnimationEnd)
+                    this.props.onAnimationEnd();
+            });
+        }
+    };
+    static _animationFn = (t) => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
+    static _isMatrixFace = (matrix) => {
+        let sum = 0;
+        for (const coff of matrix.coffs) {
+            if (Geometry.isAlmostEqualNumber(Math.abs(coff), 1))
+                sum++;
+        }
+        // Assuming matrix is a proper rotation matrix:
+        // if matrix viewing a face, there will be a total of 3 values either almost -1, or almost 1.
+        return sum === 3;
+    };
     render() {
         const { animation, startRotMatrix, endRotMatrix } = this.state;
         const visible = CubeNavigationAid._isMatrixFace(endRotMatrix) && animation === 1.0;
@@ -338,6 +223,73 @@ export class CubeNavigationAid extends React.Component {
             React.createElement(PointerButton, { "data-testid": "cube-pointer-button-left", visible: visible, pointerType: Pointer.Left, onArrowClick: this._onArrowClick, title: leftTitle }),
             React.createElement(PointerButton, { "data-testid": "cube-pointer-button-right", visible: visible, pointerType: Pointer.Right, onArrowClick: this._onArrowClick, title: rightTitle })));
     }
+    _handleCellHoverChange = (vect, state) => {
+        if (this._isInteractionLocked()) {
+            this.props.onAnimationEnd?.();
+            return;
+        }
+        const hoverMap = this.state.hoverMap;
+        hoverMap[`${vect.x}-${vect.y}-${vect.z}`] = state;
+        this.setState({ hoverMap });
+    };
+    _isInteractionLocked = () => {
+        // Locked by markup
+        if (undefined !== this.props.viewport &&
+            this.props.viewport === IModelApp.toolAdmin.markupView) {
+            return true;
+        }
+        return false;
+    };
+    static _getMatrixFace = (rotMatrix) => {
+        if (!CubeNavigationAid._isMatrixFace(rotMatrix)) {
+            return Face.None;
+        }
+        if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Top].coffs[6] &&
+            rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Top].coffs[7] &&
+            rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Top].coffs[8])
+            return Face.Top;
+        if (rotMatrix.coffs[6] ===
+            cubeNavigationFaceRotations[Face.Bottom].coffs[6] &&
+            rotMatrix.coffs[7] ===
+                cubeNavigationFaceRotations[Face.Bottom].coffs[7] &&
+            rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Bottom].coffs[8])
+            return Face.Bottom;
+        if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Left].coffs[6] &&
+            rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Left].coffs[7] &&
+            rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Left].coffs[8])
+            return Face.Left;
+        if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Right].coffs[6] &&
+            rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Right].coffs[7] &&
+            rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Right].coffs[8])
+            return Face.Right;
+        if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Back].coffs[6] &&
+            rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Back].coffs[7] &&
+            rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Back].coffs[8])
+            return Face.Back;
+        if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Front].coffs[6] &&
+            rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Front].coffs[7] &&
+            rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Front].coffs[8])
+            return Face.Front;
+        return Face.None;
+    };
+    static _interpolateRotMatrix = (start, anim, end) => {
+        if (anim === 0)
+            return start;
+        if (anim === 1 || start.isAlmostEqual(end))
+            return end;
+        const startInverse = start.transpose();
+        const diff = end.multiplyMatrixMatrix(startInverse);
+        const angleAxis = diff.getAxisAndAngleOfRotation();
+        if (angleAxis.ok) {
+            const angle = Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
+            const newDiff = Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
+            if (newDiff) {
+                const newMatrix = newDiff.multiplyMatrixMatrix(start);
+                return newMatrix;
+            }
+        }
+        return end;
+    };
     static correctSmallNumber(value, tolerance) {
         return Math.abs(value) < tolerance ? 0 : value;
     }
@@ -416,10 +368,19 @@ export class CubeNavigationAid extends React.Component {
         const face = CubeNavigationAid._getMatrixFace(newRotation);
         return { newRotation, face };
     }
+    _onArrowClick = (arrow) => {
+        if (this._isInteractionLocked()) {
+            this.props.onAnimationEnd?.();
+            return;
+        }
+        const { newRotation, face } = this.getArrowRotationAndFace(arrow);
+        this._animateRotation(newRotation, face);
+    };
     getArrowTitle(arrow) {
         const { face } = this.getArrowRotationAndFace(arrow);
         return this._labels[face];
     }
+    _lastClientXY = Vector2d.createZero();
     _processDrag(mousePos) {
         if (!this._start.isAlmostEqual(mousePos)) {
             const movement = mousePos.minus(this._lastClientXY);
@@ -437,68 +398,106 @@ export class CubeNavigationAid extends React.Component {
         }
         this._lastClientXY = mousePos;
     }
-}
-CubeNavigationAid._animationFn = (t) => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
-CubeNavigationAid._isMatrixFace = (matrix) => {
-    let sum = 0;
-    for (const coff of matrix.coffs) {
-        if (Geometry.isAlmostEqualNumber(Math.abs(coff), 1))
-            sum++;
-    }
-    // Assuming matrix is a proper rotation matrix:
-    // if matrix viewing a face, there will be a total of 3 values either almost -1, or almost 1.
-    return sum === 3;
-};
-CubeNavigationAid._getMatrixFace = (rotMatrix) => {
-    if (!CubeNavigationAid._isMatrixFace(rotMatrix)) {
-        return Face.None;
-    }
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Top].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Top].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Top].coffs[8])
-        return Face.Top;
-    if (rotMatrix.coffs[6] ===
-        cubeNavigationFaceRotations[Face.Bottom].coffs[6] &&
-        rotMatrix.coffs[7] ===
-            cubeNavigationFaceRotations[Face.Bottom].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Bottom].coffs[8])
-        return Face.Bottom;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Left].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Left].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Left].coffs[8])
-        return Face.Left;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Right].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Right].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Right].coffs[8])
-        return Face.Right;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Back].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Back].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Back].coffs[8])
-        return Face.Back;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Face.Front].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Face.Front].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Face.Front].coffs[8])
-        return Face.Front;
-    return Face.None;
-};
-CubeNavigationAid._interpolateRotMatrix = (start, anim, end) => {
-    if (anim === 0)
-        return start;
-    if (anim === 1 || start.isAlmostEqual(end))
-        return end;
-    const startInverse = start.transpose();
-    const diff = end.multiplyMatrixMatrix(startInverse);
-    const angleAxis = diff.getAxisAndAngleOfRotation();
-    if (angleAxis.ok) {
-        const angle = Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
-        const newDiff = Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
-        if (newDiff) {
-            const newMatrix = newDiff.multiplyMatrixMatrix(start);
-            return newMatrix;
+    _handleBoxMouseDown = (event) => {
+        if (this._isInteractionLocked()) {
+            this.props.onAnimationEnd?.();
+            return;
         }
-    }
-    return end;
-};
+        event.preventDefault();
+        // only start listening after drag is confirmed. Ie. the 3D box is clicked.
+        window.addEventListener("mousemove", this._onMouseMove, false);
+        window.addEventListener("mouseup", this._onMouseUp, false);
+        this._lastClientXY = Vector2d.create(event.clientX, event.clientY);
+        this._start = this._lastClientXY;
+    };
+    _onMouseMove = (event) => {
+        const mousePos = Vector2d.create(event.clientX, event.clientY);
+        this._processDrag(mousePos);
+    };
+    _onMouseUp = () => {
+        if (this.state.dragging) {
+            this.setState({ dragging: false });
+            ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
+        }
+        // remove so event only triggers after this.onMouseStartDrag
+        window.removeEventListener("mousemove", this._onMouseMove);
+        window.removeEventListener("mouseup", this._onMouseUp);
+    };
+    _handleBoxTouchStart = (event) => {
+        if (this._isInteractionLocked()) {
+            this.props.onAnimationEnd?.();
+            return;
+        }
+        if (1 !== event.targetTouches.length)
+            return;
+        window.addEventListener("touchmove", this._onTouchMove, false);
+        window.addEventListener("touchend", this._onTouchEnd, false);
+        this._lastClientXY = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+        this._start = this._lastClientXY;
+    };
+    _onTouchMove = (event) => {
+        if (1 !== event.targetTouches.length)
+            return;
+        const mousePos = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+        this._processDrag(mousePos);
+    };
+    _onTouchEnd = (event) => {
+        if (0 !== event.targetTouches.length)
+            return;
+        if (this.state.dragging) {
+            this.setState({ dragging: false });
+            ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
+        }
+        window.removeEventListener("touchmove", this._onTouchMove);
+        window.removeEventListener("touchend", this._onTouchEnd);
+    };
+    _handleFaceCellClick = (pos, face) => {
+        if (this._isInteractionLocked()) {
+            this.props.onAnimationEnd?.();
+            return;
+        }
+        const { endRotMatrix } = this.state;
+        let rotMatrix = Matrix3d.createRigidViewAxesZTowardsEye(pos.x, pos.y, pos.z).inverse();
+        if (rotMatrix) {
+            // if isMatrixFace and user is clicking on top/bottom, the current matrix face must be top or bottom
+            if (!CubeNavigationAid._isMatrixFace(endRotMatrix) &&
+                (face === Face.Top || face === Face.Bottom)) {
+                const angleAxis = endRotMatrix.getAxisAndAngleOfRotation();
+                if (angleAxis.ok) {
+                    const xAx = endRotMatrix.columnX();
+                    const a = Math.atan2(xAx.y, xAx.x);
+                    const r = (Math.round((a * 2) / Math.PI) * Math.PI) / 2; // round to quarter turn intervals
+                    const rot = Matrix3d.createRotationAroundAxisIndex(AxisIndex.Z, Angle.createRadians(r));
+                    rotMatrix = rot.multiplyMatrixMatrix(rotMatrix);
+                }
+            }
+            this._animateRotation(rotMatrix, face);
+        }
+        window.removeEventListener("mousemove", this._onMouseMove);
+    };
+    _animateRotation = (endRotMatrix, face) => {
+        if (this.state.endRotMatrix.isAlmostEqual(endRotMatrix))
+            return;
+        // set animation variables, let css transitions animate it.
+        this._animationFrame = setTimeout(this._animation, 16.667);
+        this.setState((prevState) => ({
+            startRotMatrix: prevState.endRotMatrix,
+            endRotMatrix,
+            animation: 0,
+            face,
+        }));
+    };
+    _setRotation = (endRotMatrix, face) => {
+        ViewportComponentEvents.setCubeMatrix(endRotMatrix, face);
+        // set variables, with animTime at 0 to prevent animation.
+        this.setState({
+            startRotMatrix: endRotMatrix,
+            endRotMatrix,
+            animation: 1,
+            face,
+        });
+    };
+}
 /** @internal */
 export class NavCubeFace extends React.Component {
     includeCell(vector) {
@@ -524,20 +523,20 @@ export class NavCubeFace extends React.Component {
             })));
         })));
     }
+    static faceCellToPos = (face, x, y) => {
+        const faceVect = cubeNavigationFaceLocs[face];
+        const route = cubeNavigationRoutes[face];
+        const faceX = x < 0 ? route.left : x > 0 ? route.right : Face.None;
+        const xVect = faceX !== Face.None
+            ? cubeNavigationFaceLocs[faceX]
+            : Vector3d.createZero();
+        const faceY = y < 0 ? route.up : y > 0 ? route.down : Face.None;
+        const yVect = faceY !== Face.None
+            ? cubeNavigationFaceLocs[faceY]
+            : Vector3d.createZero();
+        return faceVect.plus(xVect).plus(yVect);
+    };
 }
-NavCubeFace.faceCellToPos = (face, x, y) => {
-    const faceVect = cubeNavigationFaceLocs[face];
-    const route = cubeNavigationRoutes[face];
-    const faceX = x < 0 ? route.left : x > 0 ? route.right : Face.None;
-    const xVect = faceX !== Face.None
-        ? cubeNavigationFaceLocs[faceX]
-        : Vector3d.createZero();
-    const faceY = y < 0 ? route.up : y > 0 ? route.down : Face.None;
-    const yVect = faceY !== Face.None
-        ? cubeNavigationFaceLocs[faceY]
-        : Vector3d.createZero();
-    return faceVect.plus(xVect).plus(yVect);
-};
 class FaceRow extends React.Component {
     render() {
         const { center, children, ...props } = this.props;
@@ -547,37 +546,7 @@ class FaceRow extends React.Component {
 }
 /** @internal */
 export class FaceCell extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._handleMouseOver = () => {
-            const { vector } = this.props;
-            this.props.onFaceCellHoverChange &&
-                this.props.onFaceCellHoverChange(vector, CubeHover.Hover);
-        };
-        this._handleMouseOut = () => {
-            const { vector } = this.props;
-            this.props.onFaceCellHoverChange &&
-                this.props.onFaceCellHoverChange(vector, CubeHover.None);
-        };
-        this._handleMouseDown = (event) => {
-            const { clientX, clientY } = event;
-            this.handlePointerDown(clientX, clientY);
-        };
-        this._handleMouseUp = (event) => {
-            const { clientX, clientY } = event;
-            this.handlePointerUp(clientX, clientY);
-        };
-        this._handleTouchStart = (event) => {
-            event.preventDefault();
-            event.targetTouches.length === 1 &&
-                this.handlePointerDown(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-        };
-        this._handleTouchEnd = (event) => {
-            event.preventDefault();
-            event.changedTouches.length === 1 &&
-                this.handlePointerUp(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
-        };
-    }
+    _startMouse;
     render() {
         const { center, children, onFaceCellClick, onFaceCellHoverChange, hoverMap, face, vector, ...props } = this.props;
         const { x, y, z } = vector;
@@ -591,6 +560,34 @@ export class FaceCell extends React.Component {
             // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
             onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd, "data-testid": `nav-cube-face-cell-${face}-${n}`, className: classNames, role: "presentation", ...props }, children));
     }
+    _handleMouseOver = () => {
+        const { vector } = this.props;
+        this.props.onFaceCellHoverChange &&
+            this.props.onFaceCellHoverChange(vector, CubeHover.Hover);
+    };
+    _handleMouseOut = () => {
+        const { vector } = this.props;
+        this.props.onFaceCellHoverChange &&
+            this.props.onFaceCellHoverChange(vector, CubeHover.None);
+    };
+    _handleMouseDown = (event) => {
+        const { clientX, clientY } = event;
+        this.handlePointerDown(clientX, clientY);
+    };
+    _handleMouseUp = (event) => {
+        const { clientX, clientY } = event;
+        this.handlePointerUp(clientX, clientY);
+    };
+    _handleTouchStart = (event) => {
+        event.preventDefault();
+        event.targetTouches.length === 1 &&
+            this.handlePointerDown(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+    };
+    _handleTouchEnd = (event) => {
+        event.preventDefault();
+        event.changedTouches.length === 1 &&
+            this.handlePointerUp(event.changedTouches[0].clientX, event.changedTouches[0].clientY);
+    };
     handlePointerDown(x, y) {
         const { vector } = this.props;
         this._startMouse = Point2d.create(x, y);
@@ -631,14 +628,6 @@ const pointerClass = {
     [Pointer.Right]: "cube-right",
 };
 class PointerButton extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._handleClick = (event) => {
-            const { pointerType } = this.props;
-            event.preventDefault();
-            this.props.onArrowClick(pointerType);
-        };
-    }
     render() {
         const { visible, pointerType, onArrowClick, title, ...props } = this.props;
         const classes = classnames("cube-pointer", "icon", pointerClass[pointerType], visible && "cube-visible");
@@ -647,5 +636,10 @@ class PointerButton extends React.Component {
         React.createElement("div", { className: classes, role: "button", tabIndex: -1, title: title, ...props, onClick: this._handleClick },
             React.createElement(Icon, { iconSpec: pointerIconSpec[pointerType] })));
     }
+    _handleClick = (event) => {
+        const { pointerType } = this.props;
+        event.preventDefault();
+        this.props.onArrowClick(pointerType);
+    };
 }
 //# sourceMappingURL=CubeNavigationAid.js.map