@itwin/imodel-components-react 4.17.1 → 5.0.0-dev.2

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

@@ -1,683 +0,0 @@
-"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;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.CubeNavigationHitBoxZ = exports.CubeNavigationHitBoxY = 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 = CubeNavigationHitBoxX = {}));
-/** @public */
-var CubeNavigationHitBoxY;
-(function (CubeNavigationHitBoxY) {
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["None"] = 0] = "None";
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Back"] = 1] = "Back";
-    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Front"] = -1] = "Front";
-})(CubeNavigationHitBoxY || (exports.CubeNavigationHitBoxY = CubeNavigationHitBoxY = {}));
-/** @public */
-var CubeNavigationHitBoxZ;
-(function (CubeNavigationHitBoxZ) {
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["None"] = 0] = "None";
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Top"] = 1] = "Top";
-    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Bottom"] = -1] = "Bottom";
-})(CubeNavigationHitBoxZ || (exports.CubeNavigationHitBoxZ = CubeNavigationHitBoxZ = {}));
-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 = CubeHover = {}));
-/** Cube Navigation Aid Component
- * @public
- */
-class CubeNavigationAid extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._start = core_geometry_1.Vector2d.createZero();
-        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;
-            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 || 0.4)));
-                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();
-            if (this._mounted) {
-                this.setState({ startRotMatrix }, () => {
-                    if (this.props.onAnimationEnd)
-                        this.props.onAnimationEnd();
-                });
-            }
-        };
-        this._handleCellHoverChange = (vect, state) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            const hoverMap = this.state.hoverMap;
-            hoverMap[`${vect.x}-${vect.y}-${vect.z}`] = state;
-            this.setState({ hoverMap });
-        };
-        this._isInteractionLocked = () => {
-            // Locked by markup
-            if (undefined !== this.props.viewport &&
-                this.props.viewport === core_frontend_1.IModelApp.toolAdmin.markupView) {
-                return true;
-            }
-            return false;
-        };
-        this._onArrowClick = (arrow) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            const { newRotation, face } = this.getArrowRotationAndFace(arrow);
-            this._animateRotation(newRotation, face);
-        };
-        this._lastClientXY = core_geometry_1.Vector2d.createZero();
-        this._handleBoxMouseDown = (event) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            event.preventDefault();
-            // only start listening after drag is confirmed. Ie. the 3D box is clicked.
-            window.addEventListener("mousemove", this._onMouseMove, false);
-            window.addEventListener("mouseup", this._onMouseUp, false);
-            this._lastClientXY = 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);
-        };
-        this._handleBoxTouchStart = (event) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            if (1 !== event.targetTouches.length)
-                return;
-            window.addEventListener("touchmove", this._onTouchMove, false);
-            window.addEventListener("touchend", this._onTouchEnd, false);
-            this._lastClientXY = core_geometry_1.Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            this._start = this._lastClientXY;
-        };
-        this._onTouchMove = (event) => {
-            if (1 !== event.targetTouches.length)
-                return;
-            const mousePos = core_geometry_1.Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            this._processDrag(mousePos);
-        };
-        this._onTouchEnd = (event) => {
-            if (0 !== event.targetTouches.length)
-                return;
-            if (this.state.dragging) {
-                this.setState({ dragging: false });
-                ViewportComponentEvents_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) => {
-            if (this._isInteractionLocked()) {
-                this.props.onAnimationEnd?.();
-                return;
-            }
-            const { endRotMatrix } = this.state;
-            let rotMatrix = core_geometry_1.Matrix3d.createRigidViewAxesZTowardsEye(pos.x, pos.y, pos.z).inverse();
-            if (rotMatrix) {
-                // if isMatrixFace and user is clicking on top/bottom, the current matrix face must be top or bottom
-                if (!CubeNavigationAid._isMatrixFace(endRotMatrix) &&
-                    (face === Cube_1.Face.Top || face === Cube_1.Face.Bottom)) {
-                    const angleAxis = endRotMatrix.getAxisAndAngleOfRotation();
-                    if (angleAxis.ok) {
-                        const xAx = endRotMatrix.columnX();
-                        const a = Math.atan2(xAx.y, xAx.x);
-                        const r = (Math.round((a * 2) / Math.PI) * Math.PI) / 2; // round to quarter turn intervals
-                        const rot = 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,
-            });
-        };
-    }
-    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,
-            });
-        }
-    }
-    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) {
-            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 = 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.
-        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, 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
-        if (!headsUp || (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);
-        }
-        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, this.props.favorHeadsUpRotation);
-        const face = CubeNavigationAid._getMatrixFace(newRotation);
-        return { newRotation, face };
-    }
-    getArrowTitle(arrow) {
-        const { face } = this.getArrowRotationAndFace(arrow);
-        return this._labels[face];
-    }
-    _processDrag(mousePos) {
-        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 < 0.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;
-    }
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Cube_1.Face.Top].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Cube_1.Face.Top].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Cube_1.Face.Top].coffs[8])
-        return Cube_1.Face.Top;
-    if (rotMatrix.coffs[6] ===
-        cubeNavigationFaceRotations[Cube_1.Face.Bottom].coffs[6] &&
-        rotMatrix.coffs[7] ===
-            cubeNavigationFaceRotations[Cube_1.Face.Bottom].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Cube_1.Face.Bottom].coffs[8])
-        return Cube_1.Face.Bottom;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Cube_1.Face.Left].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Cube_1.Face.Left].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Cube_1.Face.Left].coffs[8])
-        return Cube_1.Face.Left;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Cube_1.Face.Right].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Cube_1.Face.Right].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Cube_1.Face.Right].coffs[8])
-        return Cube_1.Face.Right;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Cube_1.Face.Back].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Cube_1.Face.Back].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Cube_1.Face.Back].coffs[8])
-        return Cube_1.Face.Back;
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Cube_1.Face.Front].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Cube_1.Face.Front].coffs[7] &&
-        rotMatrix.coffs[8] === cubeNavigationFaceRotations[Cube_1.Face.Front].coffs[8])
-        return Cube_1.Face.Front;
-    return Cube_1.Face.None;
-};
-CubeNavigationAid._interpolateRotMatrix = (start, anim, end) => {
-    if (anim === 0)
-        return start;
-    if (anim === 1 || start.isAlmostEqual(end))
-        return end;
-    const startInverse = start.transpose();
-    const diff = end.multiplyMatrixMatrix(startInverse);
-    const angleAxis = diff.getAxisAndAngleOfRotation();
-    if (angleAxis.ok) {
-        const angle = core_geometry_1.Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
-        const newDiff = core_geometry_1.Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
-        if (newDiff) {
-            const newMatrix = newDiff.multiplyMatrixMatrix(start);
-            return newMatrix;
-        }
-    }
-    return end;
-};
-/** @internal */
-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 }));
-                }
-            })));
-        })));
-    }
-}
-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 &&
-                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;
-        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 = (0, classnames_1.default)("face-cell", center && "cube-center", hover && "cube-hover", active && "cube-active");
-        return (React.createElement("div", { onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, 
-            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-            onMouseOver: this._handleMouseOver, 
-            // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-            onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd, "data-testid": `nav-cube-face-cell-${face}-${n}`, className: classNames, role: "presentation", ...props }, children));
-    }
-    handlePointerDown(x, y) {
-        const { vector } = this.props;
-        this._startMouse = core_geometry_1.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 = 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 &&
-                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 = {}));
-// eslint-disable-next-line deprecation/deprecation
-const pointerIconSpec = {
-    [Pointer.Up]: React.createElement(itwinui_icons_react_1.SvgCaretDown, null),
-    [Pointer.Down]: React.createElement(itwinui_icons_react_1.SvgCaretUp, null),
-    [Pointer.Left]: React.createElement(itwinui_icons_react_1.SvgCaretRight, null),
-    [Pointer.Right]: React.createElement(itwinui_icons_react_1.SvgCaretLeft, 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;
-        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