@itwin/imodel-components-react 4.0.0-dev.10 → 4.0.0-dev.11

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

@@ -1,635 +1,639 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FaceCell = exports.NavCubeFace = exports.CubeNavigationAid = exports.CubeHover = exports.HitBoxZ = exports.CubeNavigationHitBoxZ = exports.HitBoxY = exports.CubeNavigationHitBoxY = exports.HitBoxX = exports.CubeNavigationHitBoxX = void 0;
-require("./CubeNavigationAid.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const core_geometry_1 = require("@itwin/core-geometry");
-const core_frontend_1 = require("@itwin/core-frontend");
-const UiIModelComponents_1 = require("../UiIModelComponents");
-const ViewportComponentEvents_1 = require("../viewport/ViewportComponentEvents");
-const Cube_1 = require("./Cube");
-/** @public */
-var CubeNavigationHitBoxX;
-(function (CubeNavigationHitBoxX) {
-    CubeNavigationHitBoxX[CubeNavigationHitBoxX["None"] = 0] = "None";
-    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Right"] = 1] = "Right";
-    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Left"] = -1] = "Left";
-})(CubeNavigationHitBoxX = exports.CubeNavigationHitBoxX || (exports.CubeNavigationHitBoxX = {}));
-/** @internal
- * @deprecated Use [[CubeNavigationHitBoxX]] */
-var HitBoxX;
-(function (HitBoxX) {
-    HitBoxX[HitBoxX["None"] = 0] = "None";
-    HitBoxX[HitBoxX["Right"] = 1] = "Right";
-    HitBoxX[HitBoxX["Left"] = -1] = "Left";
-})(HitBoxX = exports.HitBoxX || (exports.HitBoxX = {}));
-/** @public */
-var CubeNavigationHitBoxY;
-(function (CubeNavigationHitBoxY) {
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["None"] = 0] = "None";
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Back"] = 1] = "Back";
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Front"] = -1] = "Front";
-})(CubeNavigationHitBoxY = exports.CubeNavigationHitBoxY || (exports.CubeNavigationHitBoxY = {}));
-/** @internal
- * @deprecated Use [[CubeNavigationHitBoxY]] */
-var HitBoxY;
-(function (HitBoxY) {
-    HitBoxY[HitBoxY["None"] = 0] = "None";
-    HitBoxY[HitBoxY["Back"] = 1] = "Back";
-    HitBoxY[HitBoxY["Front"] = -1] = "Front";
-})(HitBoxY = exports.HitBoxY || (exports.HitBoxY = {}));
-/** @public */
-var CubeNavigationHitBoxZ;
-(function (CubeNavigationHitBoxZ) {
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["None"] = 0] = "None";
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Top"] = 1] = "Top";
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Bottom"] = -1] = "Bottom";
-})(CubeNavigationHitBoxZ = exports.CubeNavigationHitBoxZ || (exports.CubeNavigationHitBoxZ = {}));
-/** @internal
- * @deprecated [[CubeNavigationHitBoxZ]] */
-var HitBoxZ;
-(function (HitBoxZ) {
-    HitBoxZ[HitBoxZ["None"] = 0] = "None";
-    HitBoxZ[HitBoxZ["Top"] = 1] = "Top";
-    HitBoxZ[HitBoxZ["Bottom"] = -1] = "Bottom";
-})(HitBoxZ = exports.HitBoxZ || (exports.HitBoxZ = {}));
-const cubeNavigationFaceLocs = {
-    [Cube_1.Face.Left]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.Left, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
-    [Cube_1.Face.Right]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.Right, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
-    [Cube_1.Face.Back]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Back, CubeNavigationHitBoxZ.None),
-    [Cube_1.Face.Front]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Front, CubeNavigationHitBoxZ.None),
-    [Cube_1.Face.Bottom]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Bottom),
-    [Cube_1.Face.Top]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Top),
-};
-const cubeNavigationFaceRotations = {
-    [Cube_1.Face.Left]: core_geometry_1.Matrix3d.createRowValues(0, -1, 0, 0, 0, 1, -1, 0, 0),
-    [Cube_1.Face.Right]: core_geometry_1.Matrix3d.createRowValues(0, 1, 0, 0, 0, 1, 1, 0, 0),
-    [Cube_1.Face.Back]: core_geometry_1.Matrix3d.createRowValues(-1, 0, 0, 0, 0, 1, 0, 1, 0),
-    [Cube_1.Face.Front]: core_geometry_1.Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0),
-    [Cube_1.Face.Bottom]: core_geometry_1.Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, -1),
-    [Cube_1.Face.Top]: core_geometry_1.Matrix3d.createRowValues(1, 0, 0, 0, 1, 0, 0, 0, 1),
-};
-// data relating Up/Down/Left/Right directions relative to every surface
-const cubeNavigationRoutes = {
-    [Cube_1.Face.Front]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Left, right: Cube_1.Face.Right },
-    [Cube_1.Face.Back]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Right, right: Cube_1.Face.Left },
-    [Cube_1.Face.Top]: { up: Cube_1.Face.Back, down: Cube_1.Face.Front, left: Cube_1.Face.Left, right: Cube_1.Face.Right },
-    [Cube_1.Face.Bottom]: { up: Cube_1.Face.Front, down: Cube_1.Face.Back, left: Cube_1.Face.Left, right: Cube_1.Face.Right },
-    [Cube_1.Face.Right]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Front, right: Cube_1.Face.Back },
-    [Cube_1.Face.Left]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Back, right: Cube_1.Face.Front },
-};
-/** The default tolerance (1.0e-6) is appropriate if very dirty viewing operations are expected. */
-const DEFAULT_TOLERANCE = 1.0e-6;
-/** @internal */
-var CubeHover;
-(function (CubeHover) {
-    CubeHover[CubeHover["None"] = 0] = "None";
-    CubeHover[CubeHover["Hover"] = 1] = "Hover";
-    CubeHover[CubeHover["Active"] = 2] = "Active";
-})(CubeHover = exports.CubeHover || (exports.CubeHover = {}));
-/** Cube Navigation Aid Component
- * @public
- */
-class CubeNavigationAid extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._start = core_geometry_1.Vector2d.createZero();
-        /** @internal */
-        this.state = {
-            dragging: false,
-            startRotMatrix: core_geometry_1.Matrix3d.createIdentity(),
-            endRotMatrix: core_geometry_1.Matrix3d.createIdentity(),
-            animation: 1,
-            hoverMap: {},
-            face: Cube_1.Face.Top,
-        };
-        this._mounted = false;
-        this._labels = {
-            [Cube_1.Face.Right]: UiIModelComponents_1.UiIModelComponents.translate("cube.right"),
-            [Cube_1.Face.Left]: UiIModelComponents_1.UiIModelComponents.translate("cube.left"),
-            [Cube_1.Face.Back]: UiIModelComponents_1.UiIModelComponents.translate("cube.back"),
-            [Cube_1.Face.Front]: UiIModelComponents_1.UiIModelComponents.translate("cube.front"),
-            [Cube_1.Face.Top]: UiIModelComponents_1.UiIModelComponents.translate("cube.top"),
-            [Cube_1.Face.Bottom]: UiIModelComponents_1.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: Cube_1.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_1.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 === core_frontend_1.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 = core_geometry_1.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 = core_geometry_1.Vector2d.create(event.clientX, event.clientY);
-            this._start = this._lastClientXY;
-        };
-        this._onMouseMove = (event) => {
-            const mousePos = core_geometry_1.Vector2d.create(event.clientX, event.clientY);
-            this._processDrag(mousePos);
-        };
-        this._onMouseUp = () => {
-            if (this.state.dragging) {
-                this.setState({ dragging: false });
-                ViewportComponentEvents_1.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 = core_geometry_1.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 = core_geometry_1.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_1.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 = core_geometry_1.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 === Cube_1.Face.Top || face === Cube_1.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 = core_geometry_1.Matrix3d.createRotationAroundAxisIndex(core_geometry_1.AxisIndex.Z, core_geometry_1.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_1.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_1.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_1.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_1.ViewportComponentEvents.setCubeMatrix(rotMatrix, Cube_1.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 = (0, classnames_1.default)("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: (0, classnames_1.default)("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_1.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 = Math.abs(x);
-        const yy = Math.abs(y);
-        const zz = Math.abs(z);
-        // adjust any adjacent pair of near equal values to the first.
-        // istanbul ignore next
-        if (core_geometry_1.Geometry.isSameCoordinate(xx, yy, tolerance)) {
-            y = core_geometry_1.Geometry.split3WaySign(y, -xx, xx, xx);
-        }
-        if (core_geometry_1.Geometry.isSameCoordinate(yy, zz, tolerance)) {
-            z = core_geometry_1.Geometry.split3WaySign(z, -yy, yy, yy);
-        }
-        if (core_geometry_1.Geometry.isSameCoordinate(xx, zz, tolerance)) {
-            z = core_geometry_1.Geometry.split3WaySign(z, -xx, xx, xx);
-        }
-        return core_geometry_1.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) {
-        const oldZ = worldToView.rowZ();
-        const newZ = CubeNavigationAid.snapVectorToCubeFeatures(oldZ, tolerance);
-        // 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.
-        // istanbul ignore next
-        if (newZ.x === 0.0 && newZ.y === 0) {
-            const perpVector = worldToView.rowX();
-            result = core_geometry_1.Matrix3d.createRigidFromColumns(newZ, perpVector, core_geometry_1.AxisOrder.ZXY, result);
-        }
-        else {
-            result = core_geometry_1.Matrix3d.createRigidViewAxesZTowardsEye(newZ.x, newZ.y, newZ.z, result);
-        }
-        // istanbul ignore else
-        if (result)
-            result.transposeInPlace();
-        return result;
-    }
-    getArrowRotationAndFace(arrow) {
-        const localRotationAxis = core_geometry_1.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 = core_geometry_1.Matrix3d.createRotationAroundVector(localRotationAxis, core_geometry_1.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 = core_geometry_1.Angle.createRadians(diff.x);
-            const pitch = core_geometry_1.Angle.createRadians(diff.y);
-            const matX = core_geometry_1.Matrix3d.createRotationAroundAxisIndex(core_geometry_1.AxisIndex.X, pitch);
-            const matZ = core_geometry_1.Matrix3d.createRotationAroundAxisIndex(core_geometry_1.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;
-    }
-}
-exports.CubeNavigationAid = CubeNavigationAid;
-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 (core_geometry_1.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 Cube_1.Face.None;
-    }
-    let matrixFace = Cube_1.Face.None;
-    for (const face in cubeNavigationFaceRotations) {
-        // istanbul ignore else
-        if (face in cubeNavigationFaceRotations) {
-            const loc = cubeNavigationFaceRotations[face];
-            if (rotMatrix.isAlmostEqual(loc)) {
-                matrixFace = face;
-                break;
-            }
-        }
-    }
-    return matrixFace;
-};
-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 = core_geometry_1.Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
-        const newDiff = core_geometry_1.Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
-        // istanbul ignore else
-        if (newDiff) {
-            const newMatrix = newDiff.multiplyMatrixMatrix(start);
-            return newMatrix;
-        }
-    }
-    // istanbul ignore next
-    return end;
-};
-/** @internal */
-class NavCubeFace extends React.Component {
-    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) => {
-                return (React.createElement(FaceCell, { key: x, onFaceCellHoverChange: onFaceCellHoverChange, onFaceCellClick: onFaceCellClick, hoverMap: hoverMap, vector: NavCubeFace.faceCellToPos(face, x, y), face: face, center: x === 0 }, x === 0 && y === 0 &&
-                    label));
-            })));
-        })));
-    }
-}
-exports.NavCubeFace = NavCubeFace;
-NavCubeFace.faceCellToPos = (face, x, y) => {
-    const faceVect = cubeNavigationFaceLocs[face];
-    const route = cubeNavigationRoutes[face];
-    const faceX = x < 0 ? route.left : x > 0 ? route.right : Cube_1.Face.None;
-    const xVect = faceX !== Cube_1.Face.None ? cubeNavigationFaceLocs[faceX] : core_geometry_1.Vector3d.createZero();
-    const faceY = y < 0 ? route.up : y > 0 ? route.down : Cube_1.Face.None;
-    const yVect = faceY !== Cube_1.Face.None ? cubeNavigationFaceLocs[faceY] : core_geometry_1.Vector3d.createZero();
-    return faceVect.plus(xVect).plus(yVect);
-};
-class FaceRow extends React.Component {
-    render() {
-        const { center, children, ...props } = this.props;
-        const classNames = (0, classnames_1.default)("face-row", center && "cube-center");
-        return React.createElement("div", { className: classNames, ...props }, children);
-    }
-}
-/** @internal */
-class FaceCell extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._handleMouseOver = () => {
-            const { vector } = this.props;
-            this.props.onFaceCellHoverChange(vector, CubeHover.Hover);
-        };
-        this._handleMouseOut = () => {
-            const { vector } = this.props;
-            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[n] === CubeHover.Hover;
-        const active = hoverMap[n] === CubeHover.Active;
-        const classNames = (0, classnames_1.default)("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 = core_geometry_1.Point2d.create(x, y);
-        this.props.onFaceCellHoverChange(vector, CubeHover.Active);
-    }
-    handlePointerUp(x, y) {
-        const { vector, face } = this.props;
-        this.props.onFaceCellHoverChange(vector, CubeHover.None);
-        const mouse = core_geometry_1.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(vector, isFace ? face : Cube_1.Face.None);
-        }
-    }
-}
-exports.FaceCell = FaceCell;
-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 = (0, classnames_1.default)("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 }));
-    }
-}
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FaceCell = exports.NavCubeFace = exports.CubeNavigationAid = exports.CubeHover = exports.HitBoxZ = exports.CubeNavigationHitBoxZ = exports.HitBoxY = exports.CubeNavigationHitBoxY = exports.HitBoxX = exports.CubeNavigationHitBoxX = void 0;
+require("./CubeNavigationAid.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const core_geometry_1 = require("@itwin/core-geometry");
+const core_frontend_1 = require("@itwin/core-frontend");
+const core_react_1 = require("@itwin/core-react");
+const UiIModelComponents_1 = require("../UiIModelComponents");
+const ViewportComponentEvents_1 = require("../viewport/ViewportComponentEvents");
+const Cube_1 = require("./Cube");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/** @public */
+var CubeNavigationHitBoxX;
+(function (CubeNavigationHitBoxX) {
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["None"] = 0] = "None";
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Right"] = 1] = "Right";
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Left"] = -1] = "Left";
+})(CubeNavigationHitBoxX = exports.CubeNavigationHitBoxX || (exports.CubeNavigationHitBoxX = {}));
+/** @internal
+ * @deprecated Use [[CubeNavigationHitBoxX]] */
+var HitBoxX;
+(function (HitBoxX) {
+    HitBoxX[HitBoxX["None"] = 0] = "None";
+    HitBoxX[HitBoxX["Right"] = 1] = "Right";
+    HitBoxX[HitBoxX["Left"] = -1] = "Left";
+})(HitBoxX = exports.HitBoxX || (exports.HitBoxX = {}));
+/** @public */
+var CubeNavigationHitBoxY;
+(function (CubeNavigationHitBoxY) {
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["None"] = 0] = "None";
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Back"] = 1] = "Back";
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Front"] = -1] = "Front";
+})(CubeNavigationHitBoxY = exports.CubeNavigationHitBoxY || (exports.CubeNavigationHitBoxY = {}));
+/** @internal
+ * @deprecated Use [[CubeNavigationHitBoxY]] */
+var HitBoxY;
+(function (HitBoxY) {
+    HitBoxY[HitBoxY["None"] = 0] = "None";
+    HitBoxY[HitBoxY["Back"] = 1] = "Back";
+    HitBoxY[HitBoxY["Front"] = -1] = "Front";
+})(HitBoxY = exports.HitBoxY || (exports.HitBoxY = {}));
+/** @public */
+var CubeNavigationHitBoxZ;
+(function (CubeNavigationHitBoxZ) {
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["None"] = 0] = "None";
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Top"] = 1] = "Top";
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Bottom"] = -1] = "Bottom";
+})(CubeNavigationHitBoxZ = exports.CubeNavigationHitBoxZ || (exports.CubeNavigationHitBoxZ = {}));
+/** @internal
+ * @deprecated [[CubeNavigationHitBoxZ]] */
+var HitBoxZ;
+(function (HitBoxZ) {
+    HitBoxZ[HitBoxZ["None"] = 0] = "None";
+    HitBoxZ[HitBoxZ["Top"] = 1] = "Top";
+    HitBoxZ[HitBoxZ["Bottom"] = -1] = "Bottom";
+})(HitBoxZ = exports.HitBoxZ || (exports.HitBoxZ = {}));
+const cubeNavigationFaceLocs = {
+    [Cube_1.Face.Left]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.Left, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
+    [Cube_1.Face.Right]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.Right, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
+    [Cube_1.Face.Back]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Back, CubeNavigationHitBoxZ.None),
+    [Cube_1.Face.Front]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Front, CubeNavigationHitBoxZ.None),
+    [Cube_1.Face.Bottom]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Bottom),
+    [Cube_1.Face.Top]: core_geometry_1.Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Top),
+};
+const cubeNavigationFaceRotations = {
+    [Cube_1.Face.Left]: core_geometry_1.Matrix3d.createRowValues(0, -1, 0, 0, 0, 1, -1, 0, 0),
+    [Cube_1.Face.Right]: core_geometry_1.Matrix3d.createRowValues(0, 1, 0, 0, 0, 1, 1, 0, 0),
+    [Cube_1.Face.Back]: core_geometry_1.Matrix3d.createRowValues(-1, 0, 0, 0, 0, 1, 0, 1, 0),
+    [Cube_1.Face.Front]: core_geometry_1.Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0),
+    [Cube_1.Face.Bottom]: core_geometry_1.Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, -1),
+    [Cube_1.Face.Top]: core_geometry_1.Matrix3d.createRowValues(1, 0, 0, 0, 1, 0, 0, 0, 1),
+};
+// data relating Up/Down/Left/Right directions relative to every surface
+const cubeNavigationRoutes = {
+    [Cube_1.Face.Front]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Left, right: Cube_1.Face.Right },
+    [Cube_1.Face.Back]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Right, right: Cube_1.Face.Left },
+    [Cube_1.Face.Top]: { up: Cube_1.Face.Back, down: Cube_1.Face.Front, left: Cube_1.Face.Left, right: Cube_1.Face.Right },
+    [Cube_1.Face.Bottom]: { up: Cube_1.Face.Front, down: Cube_1.Face.Back, left: Cube_1.Face.Left, right: Cube_1.Face.Right },
+    [Cube_1.Face.Right]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Front, right: Cube_1.Face.Back },
+    [Cube_1.Face.Left]: { up: Cube_1.Face.Top, down: Cube_1.Face.Bottom, left: Cube_1.Face.Back, right: Cube_1.Face.Front },
+};
+/** The default tolerance (1.0e-6) is appropriate if very dirty viewing operations are expected. */
+const DEFAULT_TOLERANCE = 1.0e-6;
+/** @internal */
+var CubeHover;
+(function (CubeHover) {
+    CubeHover[CubeHover["None"] = 0] = "None";
+    CubeHover[CubeHover["Hover"] = 1] = "Hover";
+    CubeHover[CubeHover["Active"] = 2] = "Active";
+})(CubeHover = exports.CubeHover || (exports.CubeHover = {}));
+/** Cube Navigation Aid Component
+ * @public
+ */
+class CubeNavigationAid extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._start = core_geometry_1.Vector2d.createZero();
+        /** @internal */
+        this.state = {
+            dragging: false,
+            startRotMatrix: core_geometry_1.Matrix3d.createIdentity(),
+            endRotMatrix: core_geometry_1.Matrix3d.createIdentity(),
+            animation: 1,
+            hoverMap: {},
+            face: Cube_1.Face.Top,
+        };
+        this._mounted = false;
+        this._labels = {
+            [Cube_1.Face.Right]: UiIModelComponents_1.UiIModelComponents.translate("cube.right"),
+            [Cube_1.Face.Left]: UiIModelComponents_1.UiIModelComponents.translate("cube.left"),
+            [Cube_1.Face.Back]: UiIModelComponents_1.UiIModelComponents.translate("cube.back"),
+            [Cube_1.Face.Front]: UiIModelComponents_1.UiIModelComponents.translate("cube.front"),
+            [Cube_1.Face.Top]: UiIModelComponents_1.UiIModelComponents.translate("cube.top"),
+            [Cube_1.Face.Bottom]: UiIModelComponents_1.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: Cube_1.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_1.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 === core_frontend_1.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 = core_geometry_1.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 = core_geometry_1.Vector2d.create(event.clientX, event.clientY);
+            this._start = this._lastClientXY;
+        };
+        this._onMouseMove = (event) => {
+            const mousePos = core_geometry_1.Vector2d.create(event.clientX, event.clientY);
+            this._processDrag(mousePos);
+        };
+        this._onMouseUp = () => {
+            if (this.state.dragging) {
+                this.setState({ dragging: false });
+                ViewportComponentEvents_1.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 = core_geometry_1.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 = core_geometry_1.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_1.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 = core_geometry_1.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 === Cube_1.Face.Top || face === Cube_1.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 = core_geometry_1.Matrix3d.createRotationAroundAxisIndex(core_geometry_1.AxisIndex.Z, core_geometry_1.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_1.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_1.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_1.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_1.ViewportComponentEvents.setCubeMatrix(rotMatrix, Cube_1.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 = (0, classnames_1.default)("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: (0, classnames_1.default)("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_1.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 = Math.abs(x);
+        const yy = Math.abs(y);
+        const zz = Math.abs(z);
+        // adjust any adjacent pair of near equal values to the first.
+        // istanbul ignore next
+        if (core_geometry_1.Geometry.isSameCoordinate(xx, yy, tolerance)) {
+            y = core_geometry_1.Geometry.split3WaySign(y, -xx, xx, xx);
+        }
+        if (core_geometry_1.Geometry.isSameCoordinate(yy, zz, tolerance)) {
+            z = core_geometry_1.Geometry.split3WaySign(z, -yy, yy, yy);
+        }
+        if (core_geometry_1.Geometry.isSameCoordinate(xx, zz, tolerance)) {
+            z = core_geometry_1.Geometry.split3WaySign(z, -xx, xx, xx);
+        }
+        return core_geometry_1.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) {
+        const oldZ = worldToView.rowZ();
+        const newZ = CubeNavigationAid.snapVectorToCubeFeatures(oldZ, tolerance);
+        // 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.
+        // istanbul ignore next
+        if (newZ.x === 0.0 && newZ.y === 0) {
+            const perpVector = worldToView.rowX();
+            result = core_geometry_1.Matrix3d.createRigidFromColumns(newZ, perpVector, core_geometry_1.AxisOrder.ZXY, result);
+        }
+        else {
+            result = core_geometry_1.Matrix3d.createRigidViewAxesZTowardsEye(newZ.x, newZ.y, newZ.z, result);
+        }
+        // istanbul ignore else
+        if (result)
+            result.transposeInPlace();
+        return result;
+    }
+    getArrowRotationAndFace(arrow) {
+        const localRotationAxis = core_geometry_1.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 = core_geometry_1.Matrix3d.createRotationAroundVector(localRotationAxis, core_geometry_1.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 = core_geometry_1.Angle.createRadians(diff.x);
+            const pitch = core_geometry_1.Angle.createRadians(diff.y);
+            const matX = core_geometry_1.Matrix3d.createRotationAroundAxisIndex(core_geometry_1.AxisIndex.X, pitch);
+            const matZ = core_geometry_1.Matrix3d.createRotationAroundAxisIndex(core_geometry_1.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;
+    }
+}
+exports.CubeNavigationAid = CubeNavigationAid;
+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 (core_geometry_1.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 Cube_1.Face.None;
+    }
+    let matrixFace = Cube_1.Face.None;
+    for (const face in cubeNavigationFaceRotations) {
+        // istanbul ignore else
+        if (face in cubeNavigationFaceRotations) {
+            const loc = cubeNavigationFaceRotations[face];
+            if (rotMatrix.isAlmostEqual(loc)) {
+                matrixFace = face;
+                break;
+            }
+        }
+    }
+    return matrixFace;
+};
+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 = core_geometry_1.Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
+        const newDiff = core_geometry_1.Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
+        // istanbul ignore else
+        if (newDiff) {
+            const newMatrix = newDiff.multiplyMatrixMatrix(start);
+            return newMatrix;
+        }
+    }
+    // istanbul ignore next
+    return end;
+};
+/** @internal */
+class NavCubeFace extends React.Component {
+    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) => {
+                return (React.createElement(FaceCell, { key: x, onFaceCellHoverChange: onFaceCellHoverChange, onFaceCellClick: onFaceCellClick, hoverMap: hoverMap, vector: NavCubeFace.faceCellToPos(face, x, y), face: face, center: x === 0 }, x === 0 && y === 0 &&
+                    label));
+            })));
+        })));
+    }
+}
+exports.NavCubeFace = NavCubeFace;
+NavCubeFace.faceCellToPos = (face, x, y) => {
+    const faceVect = cubeNavigationFaceLocs[face];
+    const route = cubeNavigationRoutes[face];
+    const faceX = x < 0 ? route.left : x > 0 ? route.right : Cube_1.Face.None;
+    const xVect = faceX !== Cube_1.Face.None ? cubeNavigationFaceLocs[faceX] : core_geometry_1.Vector3d.createZero();
+    const faceY = y < 0 ? route.up : y > 0 ? route.down : Cube_1.Face.None;
+    const yVect = faceY !== Cube_1.Face.None ? cubeNavigationFaceLocs[faceY] : core_geometry_1.Vector3d.createZero();
+    return faceVect.plus(xVect).plus(yVect);
+};
+class FaceRow extends React.Component {
+    render() {
+        const { center, children, ...props } = this.props;
+        const classNames = (0, classnames_1.default)("face-row", center && "cube-center");
+        return React.createElement("div", { className: classNames, ...props }, children);
+    }
+}
+/** @internal */
+class FaceCell extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._handleMouseOver = () => {
+            const { vector } = this.props;
+            this.props.onFaceCellHoverChange(vector, CubeHover.Hover);
+        };
+        this._handleMouseOut = () => {
+            const { vector } = this.props;
+            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[n] === CubeHover.Hover;
+        const active = hoverMap[n] === CubeHover.Active;
+        const classNames = (0, classnames_1.default)("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 = core_geometry_1.Point2d.create(x, y);
+        this.props.onFaceCellHoverChange(vector, CubeHover.Active);
+    }
+    handlePointerUp(x, y) {
+        const { vector, face } = this.props;
+        this.props.onFaceCellHoverChange(vector, CubeHover.None);
+        const mouse = core_geometry_1.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(vector, isFace ? face : Cube_1.Face.None);
+        }
+    }
+}
+exports.FaceCell = FaceCell;
+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 pointerIconSpec = {
+    [Pointer.Up]: React.createElement(itwinui_icons_react_1.SvgCaretDownSmall, null),
+    [Pointer.Down]: React.createElement(itwinui_icons_react_1.SvgCaretUpSmall, null),
+    [Pointer.Left]: React.createElement(itwinui_icons_react_1.SvgCaretRightSmall, null),
+    [Pointer.Right]: React.createElement(itwinui_icons_react_1.SvgCaretLeftSmall, null),
+};
+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 = (0, classnames_1.default)("cube-pointer", "icon", pointerClass[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 },
+            React.createElement(core_react_1.Icon, { iconSpec: pointerIconSpec[pointerType] }),
+            " "));
+    }
+}
 //# sourceMappingURL=CubeNavigationAid.js.map