@itwin/imodel-components-react 3.7.12 → 3.7.13

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

@@ -1,642 +1,642 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module NavigationAids
- */
-import "./CubeNavigationAid.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { Angle, AxisIndex, AxisOrder, Geometry, Matrix3d, Point2d, Vector2d, Vector3d } from "@itwin/core-geometry";
-import { IModelApp } from "@itwin/core-frontend";
-import { UiIModelComponents } from "../UiIModelComponents";
-import { ViewportComponentEvents } from "../viewport/ViewportComponentEvents";
-import { Cube, Face } from "./Cube";
-/** @public */
-export var CubeNavigationHitBoxX;
-(function (CubeNavigationHitBoxX) {
-    CubeNavigationHitBoxX[CubeNavigationHitBoxX["None"] = 0] = "None";
-    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Right"] = 1] = "Right";
-    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Left"] = -1] = "Left";
-})(CubeNavigationHitBoxX || (CubeNavigationHitBoxX = {}));
-/** @internal
-  * @deprecated in 2.x. Use [[CubeNavigationHitBoxX]] */
-export var HitBoxX;
-(function (HitBoxX) {
-    HitBoxX[HitBoxX["None"] = 0] = "None";
-    HitBoxX[HitBoxX["Right"] = 1] = "Right";
-    HitBoxX[HitBoxX["Left"] = -1] = "Left";
-})(HitBoxX || (HitBoxX = {}));
-/** @public */
-export var CubeNavigationHitBoxY;
-(function (CubeNavigationHitBoxY) {
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["None"] = 0] = "None";
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Back"] = 1] = "Back";
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Front"] = -1] = "Front";
-})(CubeNavigationHitBoxY || (CubeNavigationHitBoxY = {}));
-/** @internal
-  * @deprecated in 2.x. Use [[CubeNavigationHitBoxY]] */
-export var HitBoxY;
-(function (HitBoxY) {
-    HitBoxY[HitBoxY["None"] = 0] = "None";
-    HitBoxY[HitBoxY["Back"] = 1] = "Back";
-    HitBoxY[HitBoxY["Front"] = -1] = "Front";
-})(HitBoxY || (HitBoxY = {}));
-/** @public */
-export var CubeNavigationHitBoxZ;
-(function (CubeNavigationHitBoxZ) {
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["None"] = 0] = "None";
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Top"] = 1] = "Top";
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Bottom"] = -1] = "Bottom";
-})(CubeNavigationHitBoxZ || (CubeNavigationHitBoxZ = {}));
-/** @internal
-  * @deprecated in 2.x. [[CubeNavigationHitBoxZ]] */
-export var HitBoxZ;
-(function (HitBoxZ) {
-    HitBoxZ[HitBoxZ["None"] = 0] = "None";
-    HitBoxZ[HitBoxZ["Top"] = 1] = "Top";
-    HitBoxZ[HitBoxZ["Bottom"] = -1] = "Bottom";
-})(HitBoxZ || (HitBoxZ = {}));
-const cubeNavigationFaceLocs = {
-    [Face.Left]: Vector3d.create(CubeNavigationHitBoxX.Left, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
-    [Face.Right]: Vector3d.create(CubeNavigationHitBoxX.Right, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
-    [Face.Back]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Back, CubeNavigationHitBoxZ.None),
-    [Face.Front]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Front, CubeNavigationHitBoxZ.None),
-    [Face.Bottom]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Bottom),
-    [Face.Top]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Top),
-};
-const cubeNavigationFaceRotations = {
-    [Face.Left]: Matrix3d.createRowValues(0, -1, 0, 0, 0, 1, -1, 0, 0),
-    [Face.Right]: Matrix3d.createRowValues(0, 1, 0, 0, 0, 1, 1, 0, 0),
-    [Face.Back]: Matrix3d.createRowValues(-1, 0, 0, 0, 0, 1, 0, 1, 0),
-    [Face.Front]: Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0),
-    [Face.Bottom]: Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, -1),
-    [Face.Top]: Matrix3d.createRowValues(1, 0, 0, 0, 1, 0, 0, 0, 1),
-};
-// data relating Up/Down/Left/Right directions relative to every surface
-const cubeNavigationRoutes = {
-    [Face.Front]: { up: Face.Top, down: Face.Bottom, left: Face.Left, right: Face.Right },
-    [Face.Back]: { up: Face.Top, down: Face.Bottom, left: Face.Right, right: Face.Left },
-    [Face.Top]: { up: Face.Back, down: Face.Front, left: Face.Left, right: Face.Right },
-    [Face.Bottom]: { up: Face.Front, down: Face.Back, left: Face.Left, right: Face.Right },
-    [Face.Right]: { up: Face.Top, down: Face.Bottom, left: Face.Front, right: Face.Back },
-    [Face.Left]: { up: Face.Top, down: Face.Bottom, left: Face.Back, right: Face.Front },
-};
-/** The default tolerance (1.0e-6) is appropriate if very dirty viewing operations are expected. */
-const DEFAULT_TOLERANCE = 1.0e-6;
-/** @internal */
-export var CubeHover;
-(function (CubeHover) {
-    CubeHover[CubeHover["None"] = 0] = "None";
-    CubeHover[CubeHover["Hover"] = 1] = "Hover";
-    CubeHover[CubeHover["Active"] = 2] = "Active";
-})(CubeHover || (CubeHover = {}));
-/** Cube Navigation Aid Component
-  * @public
-  */
-export class CubeNavigationAid extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._start = Vector2d.createZero();
-        /** @internal */
-        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;
-            // istanbul ignore else
-            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 || /* istanbul ignore next */ 0.4)));
-                // istanbul ignore next
-                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();
-            // istanbul ignore next
-            if (this._mounted) {
-                this.setState({ startRotMatrix }, () => {
-                    // istanbul ignore else
-                    if (this.props.onAnimationEnd)
-                        this.props.onAnimationEnd();
-                });
-            }
-        };
-        this._handleCellHoverChange = (vect, state) => {
-            var _a, _b;
-            if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-                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) => {
-            var _a, _b;
-            if (this._isInteractionLocked()) {
-                // istanbul ignore next
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-                return;
-            }
-            const { newRotation, face } = this.getArrowRotationAndFace(arrow);
-            this._animateRotation(newRotation, face);
-        };
-        this._lastClientXY = Vector2d.createZero();
-        this._handleBoxMouseDown = (event) => {
-            var _a, _b;
-            if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-                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);
-        };
-        // istanbul ignore next - unable to test touch
-        this._handleBoxTouchStart = (event) => {
-            var _a, _b;
-            if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-                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;
-        };
-        // istanbul ignore next - unable to test touch
-        this._onTouchMove = (event) => {
-            if (1 !== event.targetTouches.length)
-                return;
-            const mousePos = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            this._processDrag(mousePos);
-        };
-        // istanbul ignore next - unable to test touch
-        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) => {
-            var _a, _b;
-            if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
-                return;
-            }
-            const { endRotMatrix } = this.state;
-            let rotMatrix = Matrix3d.createRigidViewAxesZTowardsEye(pos.x, pos.y, pos.z).inverse();
-            // istanbul ignore else
-            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();
-                    // istanbul ignore else
-                    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,
-            });
-        };
-    }
-    /** @internal */
-    componentDidMount() {
-        this._mounted = true;
-        ViewportComponentEvents.onViewRotationChangeEvent.addListener(this._handleViewRotationChangeEvent);
-        // set initial rotation
-        if (this.props.viewport) {
-            const newMatrix = this.props.viewport.view.getRotation().clone();
-            this.setState({ startRotMatrix: newMatrix, endRotMatrix: newMatrix, animation: 1 });
-        }
-    }
-    /** @internal */
-    componentWillUnmount() {
-        ViewportComponentEvents.onViewRotationChangeEvent.removeListener(this._handleViewRotationChangeEvent);
-        clearTimeout(this._animationFrame);
-        this._mounted = false;
-    }
-    render() {
-        const { animation, startRotMatrix, endRotMatrix } = this.state;
-        const visible = CubeNavigationAid._isMatrixFace(endRotMatrix) && animation === 1.0;
-        const rotMatrix = CubeNavigationAid._interpolateRotMatrix(startRotMatrix, animation, endRotMatrix);
-        if (rotMatrix !== startRotMatrix && rotMatrix !== endRotMatrix)
-            ViewportComponentEvents.setCubeMatrix(rotMatrix, Face.None);
-        const faces = {};
-        for (const key in this._labels) {
-            // istanbul ignore else
-            if (this._labels.hasOwnProperty(key)) {
-                const f = key;
-                const label = this._labels[f];
-                faces[f] =
-                    React.createElement(NavCubeFace, { face: f, label: label, hoverMap: this.state.hoverMap, onFaceCellClick: this._handleFaceCellClick, onFaceCellHoverChange: this._handleCellHoverChange });
-            }
-        }
-        const cubeClassNames = classnames("nav-cube", this.state.dragging && "cube-dragging");
-        const upTitle = this.getArrowTitle(Pointer.Up);
-        const downTitle = this.getArrowTitle(Pointer.Down);
-        const leftTitle = this.getArrowTitle(Pointer.Left);
-        const rightTitle = this.getArrowTitle(Pointer.Right);
-        return (React.createElement("div", { className: classnames("components-cube-container", this.props.className), style: this.props.style, "data-testid": "components-cube-navigation-aid", onMouseDown: this._handleBoxMouseDown, onTouchStart: this._handleBoxTouchStart, role: "presentation" },
-            React.createElement("div", { className: "cube-element-container" },
-                React.createElement(Cube, { className: cubeClassNames, rotMatrix: rotMatrix, faces: faces })),
-            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-up", visible: visible, pointerType: Pointer.Up, onArrowClick: this._onArrowClick, title: upTitle }),
-            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-down", visible: visible, pointerType: Pointer.Down, onArrowClick: this._onArrowClick, title: downTitle }),
-            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 })));
-    }
-    static correctSmallNumber(value, tolerance) {
-        return Math.abs(value) < tolerance ? 0 : value;
-    }
-    /**
-      * Snap coordinates of a vector to zero and to each other so that the vector prefers to be
-      * * perpendicular to a face of the unit cube.
-      * * or pass through a nearby vertex or edge of the unit cube.
-      * @param zVector existing z vector.
-      * @param tolerance tolerance to determine if a z vector component is close to zero or 1.
-      */
-    static snapVectorToCubeFeatures(zVector, tolerance) {
-        const x = CubeNavigationAid.correctSmallNumber(zVector.x, tolerance);
-        let y = CubeNavigationAid.correctSmallNumber(zVector.y, tolerance);
-        let z = CubeNavigationAid.correctSmallNumber(zVector.z, tolerance);
-        const xx = x === -0 ? Math.abs(x) : x;
-        const yy = y === -0 ? Math.abs(y) : y;
-        const zz = z === -0 ? Math.abs(z) : z;
-        // adjust any adjacent pair of near equal values to the first.
-        // istanbul ignore next
-        if (Geometry.isSameCoordinate(xx, yy, tolerance)) {
-            y = Geometry.split3WaySign(y, -xx, xx, xx);
-        }
-        if (Geometry.isSameCoordinate(yy, zz, tolerance)) {
-            z = Geometry.split3WaySign(z, -yy, yy, yy);
-        }
-        if (Geometry.isSameCoordinate(xx, zz, tolerance)) {
-            z = Geometry.split3WaySign(z, -xx, xx, xx);
-        }
-        return Vector3d.create(x, y, z);
-    }
-    /**
-     * Adjust a worldToView matrix to favor both
-     * * direct view at faces, edges, and corners of a view cube.
-     * * heads up
-     * @param worldToView candidate matrix
-     * @param tolerance tolerance for cleaning up fuzz.  The default (1.0e-6) is appropriate if very dirty viewing operations are expected.
-     * @param result optional result.
-     */
-    static snapWorldToViewMatrixToCubeFeatures(worldToView, tolerance, result, favorHeadsUpRotation) {
-        const oldZ = worldToView.rowZ();
-        const newZ = CubeNavigationAid.snapVectorToCubeFeatures(oldZ, tolerance);
-        const headsUp = !!favorHeadsUpRotation;
-        // If newZ is true up or down, it will have true 0 for x and y.
-        // special case this to take x direction from the input.
-        // This methodology results in always "righting" the face when rotation from an upside-down cube.
-        // The behavior was made opt-in in response to https://github.com/iTwin/appui/issues/259
-        // istanbul ignore next
-        if (!headsUp || (newZ.x === 0.0 && newZ.y === 0)) {
-            const perpVector = worldToView.rowX();
-            result = Matrix3d.createRigidFromColumns(newZ, perpVector, AxisOrder.ZXY, result);
-        }
-        else {
-            result = Matrix3d.createRigidViewAxesZTowardsEye(newZ.x, newZ.y, newZ.z, result);
-        }
-        // istanbul ignore else
-        if (result)
-            result.transposeInPlace();
-        return result;
-    }
-    getArrowRotationAndFace(arrow) {
-        const localRotationAxis = Vector3d.create(0, 0, 0);
-        switch (arrow) {
-            case Pointer.Up:
-                localRotationAxis.x = -1.0;
-                break;
-            case Pointer.Down:
-                localRotationAxis.x = 1.0;
-                break;
-            case Pointer.Left:
-                localRotationAxis.y = -1.0;
-                break;
-            default:
-                localRotationAxis.y = 1.0;
-                break;
-        }
-        const localRotation = Matrix3d.createRotationAroundVector(localRotationAxis, Angle.createDegrees(-90));
-        const newRotation = localRotation.multiplyMatrixMatrix(this.state.endRotMatrix);
-        CubeNavigationAid.snapWorldToViewMatrixToCubeFeatures(newRotation, DEFAULT_TOLERANCE, newRotation);
-        const face = CubeNavigationAid._getMatrixFace(newRotation);
-        return { newRotation, face };
-    }
-    getArrowTitle(arrow) {
-        const { face } = this.getArrowRotationAndFace(arrow);
-        return this._labels[face];
-    }
-    _processDrag(mousePos) {
-        // istanbul ignore else
-        if (!this._start.isAlmostEqual(mousePos)) {
-            const movement = mousePos.minus(this._lastClientXY);
-            const diff = movement.scale(0.05);
-            const yaw = Angle.createRadians(diff.x);
-            const pitch = Angle.createRadians(diff.y);
-            const matX = Matrix3d.createRotationAroundAxisIndex(AxisIndex.X, pitch);
-            const matZ = Matrix3d.createRotationAroundAxisIndex(AxisIndex.Z, yaw);
-            const mat = matX.multiplyMatrixMatrix(this.state.startRotMatrix).multiplyMatrixMatrix(matZ);
-            this._setRotation(mat, CubeNavigationAid._getMatrixFace(mat));
-            if (!this.state.dragging)
-                this.setState({ dragging: true });
-        }
-        this._lastClientXY = mousePos;
-    }
-}
-CubeNavigationAid._animationFn = (t) => t < .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;
-    }
-    // istanbul ignore else
-    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;
-    // istanbul ignore else
-    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;
-    // istanbul ignore else
-    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;
-    // istanbul ignore else
-    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;
-    // istanbul ignore else
-    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;
-    // istanbul ignore else
-    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();
-    // istanbul ignore else
-    if (angleAxis.ok) {
-        const angle = Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
-        const newDiff = Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
-        // istanbul ignore else
-        if (newDiff) {
-            const newMatrix = newDiff.multiplyMatrixMatrix(start);
-            return newMatrix;
-        }
-    }
-    // istanbul ignore next
-    return end;
-};
-/** @internal */
-export class NavCubeFace extends React.Component {
-    includeCell(vector) {
-        const { x, y, z } = vector;
-        const omittedCell = (y === 0 && x !== 0 && z !== 0) || (y !== 0 && x === 0 && z !== 0) || (y !== 0 && x !== 0 && z === 0);
-        return !omittedCell;
-    }
-    render() {
-        const { face, hoverMap, onFaceCellClick, onFaceCellHoverChange, label } = this.props;
-        return (React.createElement("div", { className: "nav-cube-face", "data-testid": "nav-cube-face" }, [-1, 0, 1].map((y) => {
-            return (React.createElement(FaceRow, { key: y, center: y === 0 }, [-1, 0, 1].map((x) => {
-                const vector = NavCubeFace.faceCellToPos(face, x, y);
-                if (this.includeCell(vector)) {
-                    // return a fully functional cell
-                    return (React.createElement(FaceCell, { key: x, onFaceCellHoverChange: onFaceCellHoverChange, onFaceCellClick: onFaceCellClick, hoverMap: hoverMap, vector: vector, face: face, center: x === 0 }, x === 0 && y === 0 &&
-                        label));
-                }
-                else {
-                    // return a placeholder cell
-                    return (React.createElement(FaceCell, { key: x, vector: vector, face: face, center: x === 0 }));
-                }
-            })));
-        })));
-    }
-}
-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;
-        const classNames = classnames("face-row", center && "cube-center");
-        return React.createElement("div", { className: classNames, ...props }, children);
-    }
-}
-/** @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);
-        };
-    }
-    render() {
-        const { center, children, onFaceCellClick, onFaceCellHoverChange, hoverMap, face, vector, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
-        const { x, y, z } = vector;
-        const n = `${x}-${y}-${z}`;
-        const hover = hoverMap && hoverMap[n] === CubeHover.Hover;
-        const active = hoverMap && hoverMap[n] === CubeHover.Active;
-        const classNames = classnames("face-cell", center && "cube-center", hover && "cube-hover", active && "cube-active");
-        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        return React.createElement("div", { onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, onMouseOver: this._handleMouseOver, onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd, "data-testid": `nav-cube-face-cell-${face}-${n}`, className: classNames, role: "presentation", ...props }, children);
-    }
-    handlePointerDown(x, y) {
-        const { vector } = this.props;
-        this._startMouse = Point2d.create(x, y);
-        this.props.onFaceCellHoverChange && this.props.onFaceCellHoverChange(vector, CubeHover.Active);
-    }
-    handlePointerUp(x, y) {
-        const { vector, face } = this.props;
-        this.props.onFaceCellHoverChange && this.props.onFaceCellHoverChange(vector, CubeHover.None);
-        const mouse = Point2d.create(x, y);
-        if (this._startMouse && this._startMouse.isAlmostEqual(mouse)) {
-            const isFace = Math.abs(vector.x) + Math.abs(vector.y) + Math.abs(vector.z) === 1;
-            this.props.onFaceCellClick && this.props.onFaceCellClick(vector, isFace ? face : Face.None);
-        }
-    }
-}
-var Pointer;
-(function (Pointer) {
-    Pointer[Pointer["None"] = 0] = "None";
-    Pointer[Pointer["Up"] = 1] = "Up";
-    Pointer[Pointer["Down"] = 2] = "Down";
-    Pointer[Pointer["Left"] = 3] = "Left";
-    Pointer[Pointer["Right"] = 4] = "Right";
-})(Pointer || (Pointer = {}));
-const pointerIconClass = {
-    [Pointer.Up]: "icon-caret-down",
-    [Pointer.Down]: "icon-caret-up",
-    [Pointer.Left]: "icon-caret-right",
-    [Pointer.Right]: "icon-caret-left",
-};
-const pointerClass = {
-    [Pointer.Up]: "cube-up",
-    [Pointer.Down]: "cube-down",
-    [Pointer.Left]: "cube-left",
-    [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; // eslint-disable-line @typescript-eslint/no-unused-vars
-        const classes = classnames("cube-pointer", "icon", pointerClass[pointerType], pointerIconClass[pointerType], visible && "cube-visible");
-        return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement("div", { className: classes, role: "button", tabIndex: -1, title: title, ...props, onClick: this._handleClick }));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./CubeNavigationAid.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Angle, AxisIndex, AxisOrder, Geometry, Matrix3d, Point2d, Vector2d, Vector3d } from "@itwin/core-geometry";
+import { IModelApp } from "@itwin/core-frontend";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { ViewportComponentEvents } from "../viewport/ViewportComponentEvents";
+import { Cube, Face } from "./Cube";
+/** @public */
+export var CubeNavigationHitBoxX;
+(function (CubeNavigationHitBoxX) {
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["None"] = 0] = "None";
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Right"] = 1] = "Right";
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Left"] = -1] = "Left";
+})(CubeNavigationHitBoxX || (CubeNavigationHitBoxX = {}));
+/** @internal
+  * @deprecated in 2.x. Use [[CubeNavigationHitBoxX]] */
+export var HitBoxX;
+(function (HitBoxX) {
+    HitBoxX[HitBoxX["None"] = 0] = "None";
+    HitBoxX[HitBoxX["Right"] = 1] = "Right";
+    HitBoxX[HitBoxX["Left"] = -1] = "Left";
+})(HitBoxX || (HitBoxX = {}));
+/** @public */
+export var CubeNavigationHitBoxY;
+(function (CubeNavigationHitBoxY) {
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["None"] = 0] = "None";
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Back"] = 1] = "Back";
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Front"] = -1] = "Front";
+})(CubeNavigationHitBoxY || (CubeNavigationHitBoxY = {}));
+/** @internal
+  * @deprecated in 2.x. Use [[CubeNavigationHitBoxY]] */
+export var HitBoxY;
+(function (HitBoxY) {
+    HitBoxY[HitBoxY["None"] = 0] = "None";
+    HitBoxY[HitBoxY["Back"] = 1] = "Back";
+    HitBoxY[HitBoxY["Front"] = -1] = "Front";
+})(HitBoxY || (HitBoxY = {}));
+/** @public */
+export var CubeNavigationHitBoxZ;
+(function (CubeNavigationHitBoxZ) {
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["None"] = 0] = "None";
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Top"] = 1] = "Top";
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Bottom"] = -1] = "Bottom";
+})(CubeNavigationHitBoxZ || (CubeNavigationHitBoxZ = {}));
+/** @internal
+  * @deprecated in 2.x. [[CubeNavigationHitBoxZ]] */
+export var HitBoxZ;
+(function (HitBoxZ) {
+    HitBoxZ[HitBoxZ["None"] = 0] = "None";
+    HitBoxZ[HitBoxZ["Top"] = 1] = "Top";
+    HitBoxZ[HitBoxZ["Bottom"] = -1] = "Bottom";
+})(HitBoxZ || (HitBoxZ = {}));
+const cubeNavigationFaceLocs = {
+    [Face.Left]: Vector3d.create(CubeNavigationHitBoxX.Left, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
+    [Face.Right]: Vector3d.create(CubeNavigationHitBoxX.Right, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
+    [Face.Back]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Back, CubeNavigationHitBoxZ.None),
+    [Face.Front]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Front, CubeNavigationHitBoxZ.None),
+    [Face.Bottom]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Bottom),
+    [Face.Top]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Top),
+};
+const cubeNavigationFaceRotations = {
+    [Face.Left]: Matrix3d.createRowValues(0, -1, 0, 0, 0, 1, -1, 0, 0),
+    [Face.Right]: Matrix3d.createRowValues(0, 1, 0, 0, 0, 1, 1, 0, 0),
+    [Face.Back]: Matrix3d.createRowValues(-1, 0, 0, 0, 0, 1, 0, 1, 0),
+    [Face.Front]: Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0),
+    [Face.Bottom]: Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, -1),
+    [Face.Top]: Matrix3d.createRowValues(1, 0, 0, 0, 1, 0, 0, 0, 1),
+};
+// data relating Up/Down/Left/Right directions relative to every surface
+const cubeNavigationRoutes = {
+    [Face.Front]: { up: Face.Top, down: Face.Bottom, left: Face.Left, right: Face.Right },
+    [Face.Back]: { up: Face.Top, down: Face.Bottom, left: Face.Right, right: Face.Left },
+    [Face.Top]: { up: Face.Back, down: Face.Front, left: Face.Left, right: Face.Right },
+    [Face.Bottom]: { up: Face.Front, down: Face.Back, left: Face.Left, right: Face.Right },
+    [Face.Right]: { up: Face.Top, down: Face.Bottom, left: Face.Front, right: Face.Back },
+    [Face.Left]: { up: Face.Top, down: Face.Bottom, left: Face.Back, right: Face.Front },
+};
+/** The default tolerance (1.0e-6) is appropriate if very dirty viewing operations are expected. */
+const DEFAULT_TOLERANCE = 1.0e-6;
+/** @internal */
+export var CubeHover;
+(function (CubeHover) {
+    CubeHover[CubeHover["None"] = 0] = "None";
+    CubeHover[CubeHover["Hover"] = 1] = "Hover";
+    CubeHover[CubeHover["Active"] = 2] = "Active";
+})(CubeHover || (CubeHover = {}));
+/** Cube Navigation Aid Component
+  * @public
+  */
+export class CubeNavigationAid extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._start = Vector2d.createZero();
+        /** @internal */
+        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;
+            // istanbul ignore else
+            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 || /* istanbul ignore next */ 0.4)));
+                // istanbul ignore next
+                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();
+            // istanbul ignore next
+            if (this._mounted) {
+                this.setState({ startRotMatrix }, () => {
+                    // istanbul ignore else
+                    if (this.props.onAnimationEnd)
+                        this.props.onAnimationEnd();
+                });
+            }
+        };
+        this._handleCellHoverChange = (vect, state) => {
+            var _a, _b;
+            if (this._isInteractionLocked()) {
+                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                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) => {
+            var _a, _b;
+            if (this._isInteractionLocked()) {
+                // istanbul ignore next
+                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                return;
+            }
+            const { newRotation, face } = this.getArrowRotationAndFace(arrow);
+            this._animateRotation(newRotation, face);
+        };
+        this._lastClientXY = Vector2d.createZero();
+        this._handleBoxMouseDown = (event) => {
+            var _a, _b;
+            if (this._isInteractionLocked()) {
+                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                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);
+        };
+        // istanbul ignore next - unable to test touch
+        this._handleBoxTouchStart = (event) => {
+            var _a, _b;
+            if (this._isInteractionLocked()) {
+                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                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;
+        };
+        // istanbul ignore next - unable to test touch
+        this._onTouchMove = (event) => {
+            if (1 !== event.targetTouches.length)
+                return;
+            const mousePos = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            this._processDrag(mousePos);
+        };
+        // istanbul ignore next - unable to test touch
+        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) => {
+            var _a, _b;
+            if (this._isInteractionLocked()) {
+                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                return;
+            }
+            const { endRotMatrix } = this.state;
+            let rotMatrix = Matrix3d.createRigidViewAxesZTowardsEye(pos.x, pos.y, pos.z).inverse();
+            // istanbul ignore else
+            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();
+                    // istanbul ignore else
+                    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,
+            });
+        };
+    }
+    /** @internal */
+    componentDidMount() {
+        this._mounted = true;
+        ViewportComponentEvents.onViewRotationChangeEvent.addListener(this._handleViewRotationChangeEvent);
+        // set initial rotation
+        if (this.props.viewport) {
+            const newMatrix = this.props.viewport.view.getRotation().clone();
+            this.setState({ startRotMatrix: newMatrix, endRotMatrix: newMatrix, animation: 1 });
+        }
+    }
+    /** @internal */
+    componentWillUnmount() {
+        ViewportComponentEvents.onViewRotationChangeEvent.removeListener(this._handleViewRotationChangeEvent);
+        clearTimeout(this._animationFrame);
+        this._mounted = false;
+    }
+    render() {
+        const { animation, startRotMatrix, endRotMatrix } = this.state;
+        const visible = CubeNavigationAid._isMatrixFace(endRotMatrix) && animation === 1.0;
+        const rotMatrix = CubeNavigationAid._interpolateRotMatrix(startRotMatrix, animation, endRotMatrix);
+        if (rotMatrix !== startRotMatrix && rotMatrix !== endRotMatrix)
+            ViewportComponentEvents.setCubeMatrix(rotMatrix, Face.None);
+        const faces = {};
+        for (const key in this._labels) {
+            // istanbul ignore else
+            if (this._labels.hasOwnProperty(key)) {
+                const f = key;
+                const label = this._labels[f];
+                faces[f] =
+                    React.createElement(NavCubeFace, { face: f, label: label, hoverMap: this.state.hoverMap, onFaceCellClick: this._handleFaceCellClick, onFaceCellHoverChange: this._handleCellHoverChange });
+            }
+        }
+        const cubeClassNames = classnames("nav-cube", this.state.dragging && "cube-dragging");
+        const upTitle = this.getArrowTitle(Pointer.Up);
+        const downTitle = this.getArrowTitle(Pointer.Down);
+        const leftTitle = this.getArrowTitle(Pointer.Left);
+        const rightTitle = this.getArrowTitle(Pointer.Right);
+        return (React.createElement("div", { className: classnames("components-cube-container", this.props.className), style: this.props.style, "data-testid": "components-cube-navigation-aid", onMouseDown: this._handleBoxMouseDown, onTouchStart: this._handleBoxTouchStart, role: "presentation" },
+            React.createElement("div", { className: "cube-element-container" },
+                React.createElement(Cube, { className: cubeClassNames, rotMatrix: rotMatrix, faces: faces })),
+            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-up", visible: visible, pointerType: Pointer.Up, onArrowClick: this._onArrowClick, title: upTitle }),
+            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-down", visible: visible, pointerType: Pointer.Down, onArrowClick: this._onArrowClick, title: downTitle }),
+            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 })));
+    }
+    static correctSmallNumber(value, tolerance) {
+        return Math.abs(value) < tolerance ? 0 : value;
+    }
+    /**
+      * Snap coordinates of a vector to zero and to each other so that the vector prefers to be
+      * * perpendicular to a face of the unit cube.
+      * * or pass through a nearby vertex or edge of the unit cube.
+      * @param zVector existing z vector.
+      * @param tolerance tolerance to determine if a z vector component is close to zero or 1.
+      */
+    static snapVectorToCubeFeatures(zVector, tolerance) {
+        const x = CubeNavigationAid.correctSmallNumber(zVector.x, tolerance);
+        let y = CubeNavigationAid.correctSmallNumber(zVector.y, tolerance);
+        let z = CubeNavigationAid.correctSmallNumber(zVector.z, tolerance);
+        const xx = x === -0 ? Math.abs(x) : x;
+        const yy = y === -0 ? Math.abs(y) : y;
+        const zz = z === -0 ? Math.abs(z) : z;
+        // adjust any adjacent pair of near equal values to the first.
+        // istanbul ignore next
+        if (Geometry.isSameCoordinate(xx, yy, tolerance)) {
+            y = Geometry.split3WaySign(y, -xx, xx, xx);
+        }
+        if (Geometry.isSameCoordinate(yy, zz, tolerance)) {
+            z = Geometry.split3WaySign(z, -yy, yy, yy);
+        }
+        if (Geometry.isSameCoordinate(xx, zz, tolerance)) {
+            z = Geometry.split3WaySign(z, -xx, xx, xx);
+        }
+        return Vector3d.create(x, y, z);
+    }
+    /**
+     * Adjust a worldToView matrix to favor both
+     * * direct view at faces, edges, and corners of a view cube.
+     * * heads up
+     * @param worldToView candidate matrix
+     * @param tolerance tolerance for cleaning up fuzz.  The default (1.0e-6) is appropriate if very dirty viewing operations are expected.
+     * @param result optional result.
+     */
+    static snapWorldToViewMatrixToCubeFeatures(worldToView, tolerance, result, favorHeadsUpRotation) {
+        const oldZ = worldToView.rowZ();
+        const newZ = CubeNavigationAid.snapVectorToCubeFeatures(oldZ, tolerance);
+        const headsUp = !!favorHeadsUpRotation;
+        // If newZ is true up or down, it will have true 0 for x and y.
+        // special case this to take x direction from the input.
+        // This methodology results in always "righting" the face when rotation from an upside-down cube.
+        // The behavior was made opt-in in response to https://github.com/iTwin/appui/issues/259
+        // istanbul ignore next
+        if (!headsUp || (newZ.x === 0.0 && newZ.y === 0)) {
+            const perpVector = worldToView.rowX();
+            result = Matrix3d.createRigidFromColumns(newZ, perpVector, AxisOrder.ZXY, result);
+        }
+        else {
+            result = Matrix3d.createRigidViewAxesZTowardsEye(newZ.x, newZ.y, newZ.z, result);
+        }
+        // istanbul ignore else
+        if (result)
+            result.transposeInPlace();
+        return result;
+    }
+    getArrowRotationAndFace(arrow) {
+        const localRotationAxis = Vector3d.create(0, 0, 0);
+        switch (arrow) {
+            case Pointer.Up:
+                localRotationAxis.x = -1.0;
+                break;
+            case Pointer.Down:
+                localRotationAxis.x = 1.0;
+                break;
+            case Pointer.Left:
+                localRotationAxis.y = -1.0;
+                break;
+            default:
+                localRotationAxis.y = 1.0;
+                break;
+        }
+        const localRotation = Matrix3d.createRotationAroundVector(localRotationAxis, Angle.createDegrees(-90));
+        const newRotation = localRotation.multiplyMatrixMatrix(this.state.endRotMatrix);
+        CubeNavigationAid.snapWorldToViewMatrixToCubeFeatures(newRotation, DEFAULT_TOLERANCE, newRotation);
+        const face = CubeNavigationAid._getMatrixFace(newRotation);
+        return { newRotation, face };
+    }
+    getArrowTitle(arrow) {
+        const { face } = this.getArrowRotationAndFace(arrow);
+        return this._labels[face];
+    }
+    _processDrag(mousePos) {
+        // istanbul ignore else
+        if (!this._start.isAlmostEqual(mousePos)) {
+            const movement = mousePos.minus(this._lastClientXY);
+            const diff = movement.scale(0.05);
+            const yaw = Angle.createRadians(diff.x);
+            const pitch = Angle.createRadians(diff.y);
+            const matX = Matrix3d.createRotationAroundAxisIndex(AxisIndex.X, pitch);
+            const matZ = Matrix3d.createRotationAroundAxisIndex(AxisIndex.Z, yaw);
+            const mat = matX.multiplyMatrixMatrix(this.state.startRotMatrix).multiplyMatrixMatrix(matZ);
+            this._setRotation(mat, CubeNavigationAid._getMatrixFace(mat));
+            if (!this.state.dragging)
+                this.setState({ dragging: true });
+        }
+        this._lastClientXY = mousePos;
+    }
+}
+CubeNavigationAid._animationFn = (t) => t < .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;
+    }
+    // istanbul ignore else
+    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;
+    // istanbul ignore else
+    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;
+    // istanbul ignore else
+    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;
+    // istanbul ignore else
+    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;
+    // istanbul ignore else
+    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;
+    // istanbul ignore else
+    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();
+    // istanbul ignore else
+    if (angleAxis.ok) {
+        const angle = Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
+        const newDiff = Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
+        // istanbul ignore else
+        if (newDiff) {
+            const newMatrix = newDiff.multiplyMatrixMatrix(start);
+            return newMatrix;
+        }
+    }
+    // istanbul ignore next
+    return end;
+};
+/** @internal */
+export class NavCubeFace extends React.Component {
+    includeCell(vector) {
+        const { x, y, z } = vector;
+        const omittedCell = (y === 0 && x !== 0 && z !== 0) || (y !== 0 && x === 0 && z !== 0) || (y !== 0 && x !== 0 && z === 0);
+        return !omittedCell;
+    }
+    render() {
+        const { face, hoverMap, onFaceCellClick, onFaceCellHoverChange, label } = this.props;
+        return (React.createElement("div", { className: "nav-cube-face", "data-testid": "nav-cube-face" }, [-1, 0, 1].map((y) => {
+            return (React.createElement(FaceRow, { key: y, center: y === 0 }, [-1, 0, 1].map((x) => {
+                const vector = NavCubeFace.faceCellToPos(face, x, y);
+                if (this.includeCell(vector)) {
+                    // return a fully functional cell
+                    return (React.createElement(FaceCell, { key: x, onFaceCellHoverChange: onFaceCellHoverChange, onFaceCellClick: onFaceCellClick, hoverMap: hoverMap, vector: vector, face: face, center: x === 0 }, x === 0 && y === 0 &&
+                        label));
+                }
+                else {
+                    // return a placeholder cell
+                    return (React.createElement(FaceCell, { key: x, vector: vector, face: face, center: x === 0 }));
+                }
+            })));
+        })));
+    }
+}
+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;
+        const classNames = classnames("face-row", center && "cube-center");
+        return React.createElement("div", { className: classNames, ...props }, children);
+    }
+}
+/** @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);
+        };
+    }
+    render() {
+        const { center, children, onFaceCellClick, onFaceCellHoverChange, hoverMap, face, vector, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const { x, y, z } = vector;
+        const n = `${x}-${y}-${z}`;
+        const hover = hoverMap && hoverMap[n] === CubeHover.Hover;
+        const active = hoverMap && hoverMap[n] === CubeHover.Active;
+        const classNames = classnames("face-cell", center && "cube-center", hover && "cube-hover", active && "cube-active");
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        return React.createElement("div", { onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, onMouseOver: this._handleMouseOver, onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd, "data-testid": `nav-cube-face-cell-${face}-${n}`, className: classNames, role: "presentation", ...props }, children);
+    }
+    handlePointerDown(x, y) {
+        const { vector } = this.props;
+        this._startMouse = Point2d.create(x, y);
+        this.props.onFaceCellHoverChange && this.props.onFaceCellHoverChange(vector, CubeHover.Active);
+    }
+    handlePointerUp(x, y) {
+        const { vector, face } = this.props;
+        this.props.onFaceCellHoverChange && this.props.onFaceCellHoverChange(vector, CubeHover.None);
+        const mouse = Point2d.create(x, y);
+        if (this._startMouse && this._startMouse.isAlmostEqual(mouse)) {
+            const isFace = Math.abs(vector.x) + Math.abs(vector.y) + Math.abs(vector.z) === 1;
+            this.props.onFaceCellClick && this.props.onFaceCellClick(vector, isFace ? face : Face.None);
+        }
+    }
+}
+var Pointer;
+(function (Pointer) {
+    Pointer[Pointer["None"] = 0] = "None";
+    Pointer[Pointer["Up"] = 1] = "Up";
+    Pointer[Pointer["Down"] = 2] = "Down";
+    Pointer[Pointer["Left"] = 3] = "Left";
+    Pointer[Pointer["Right"] = 4] = "Right";
+})(Pointer || (Pointer = {}));
+const pointerIconClass = {
+    [Pointer.Up]: "icon-caret-down",
+    [Pointer.Down]: "icon-caret-up",
+    [Pointer.Left]: "icon-caret-right",
+    [Pointer.Right]: "icon-caret-left",
+};
+const pointerClass = {
+    [Pointer.Up]: "cube-up",
+    [Pointer.Down]: "cube-down",
+    [Pointer.Left]: "cube-left",
+    [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; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const classes = classnames("cube-pointer", "icon", pointerClass[pointerType], pointerIconClass[pointerType], visible && "cube-visible");
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: classes, role: "button", tabIndex: -1, title: title, ...props, onClick: this._handleClick }));
+    }
+}
 //# sourceMappingURL=CubeNavigationAid.js.map