@itwin/imodel-components-react 3.0.0-dev.77 → 3.0.0-dev.81

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

@@ -0,0 +1,573 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module NavigationAids
+ */
+import "./CubeNavigationAid.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Angle, AxisIndex, AxisOrder, Geometry, Matrix3d, Point2d, Vector2d, Vector3d } from "@itwin/core-geometry";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { ViewportComponentEvents } from "../viewport/ViewportComponentEvents";
+import { Cube, Face } from "./Cube";
+/** @public */
+export var CubeNavigationHitBoxX;
+(function (CubeNavigationHitBoxX) {
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["None"] = 0] = "None";
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Right"] = 1] = "Right";
+    CubeNavigationHitBoxX[CubeNavigationHitBoxX["Left"] = -1] = "Left";
+})(CubeNavigationHitBoxX || (CubeNavigationHitBoxX = {}));
+/** @internal
+ * @deprecated Use [[CubeNavigationHitBoxX]] */
+export var HitBoxX;
+(function (HitBoxX) {
+    HitBoxX[HitBoxX["None"] = 0] = "None";
+    HitBoxX[HitBoxX["Right"] = 1] = "Right";
+    HitBoxX[HitBoxX["Left"] = -1] = "Left";
+})(HitBoxX || (HitBoxX = {}));
+/** @public */
+export var CubeNavigationHitBoxY;
+(function (CubeNavigationHitBoxY) {
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["None"] = 0] = "None";
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Back"] = 1] = "Back";
+    CubeNavigationHitBoxY[CubeNavigationHitBoxY["Front"] = -1] = "Front";
+})(CubeNavigationHitBoxY || (CubeNavigationHitBoxY = {}));
+/** @internal
+ * @deprecated Use [[CubeNavigationHitBoxY]] */
+export var HitBoxY;
+(function (HitBoxY) {
+    HitBoxY[HitBoxY["None"] = 0] = "None";
+    HitBoxY[HitBoxY["Back"] = 1] = "Back";
+    HitBoxY[HitBoxY["Front"] = -1] = "Front";
+})(HitBoxY || (HitBoxY = {}));
+/** @public */
+export var CubeNavigationHitBoxZ;
+(function (CubeNavigationHitBoxZ) {
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["None"] = 0] = "None";
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Top"] = 1] = "Top";
+    CubeNavigationHitBoxZ[CubeNavigationHitBoxZ["Bottom"] = -1] = "Bottom";
+})(CubeNavigationHitBoxZ || (CubeNavigationHitBoxZ = {}));
+/** @internal
+ * @deprecated [[CubeNavigationHitBoxZ]] */
+export var HitBoxZ;
+(function (HitBoxZ) {
+    HitBoxZ[HitBoxZ["None"] = 0] = "None";
+    HitBoxZ[HitBoxZ["Top"] = 1] = "Top";
+    HitBoxZ[HitBoxZ["Bottom"] = -1] = "Bottom";
+})(HitBoxZ || (HitBoxZ = {}));
+const cubeNavigationFaceLocs = {
+    [Face.Left]: Vector3d.create(CubeNavigationHitBoxX.Left, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
+    [Face.Right]: Vector3d.create(CubeNavigationHitBoxX.Right, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.None),
+    [Face.Back]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Back, CubeNavigationHitBoxZ.None),
+    [Face.Front]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.Front, CubeNavigationHitBoxZ.None),
+    [Face.Bottom]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Bottom),
+    [Face.Top]: Vector3d.create(CubeNavigationHitBoxX.None, CubeNavigationHitBoxY.None, CubeNavigationHitBoxZ.Top),
+};
+const cubeNavigationFaceRotations = {
+    [Face.Left]: Matrix3d.createRowValues(0, -1, 0, 0, 0, 1, -1, 0, 0),
+    [Face.Right]: Matrix3d.createRowValues(0, 1, 0, 0, 0, 1, 1, 0, 0),
+    [Face.Back]: Matrix3d.createRowValues(-1, 0, 0, 0, 0, 1, 0, 1, 0),
+    [Face.Front]: Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0),
+    [Face.Bottom]: Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, -1),
+    [Face.Top]: Matrix3d.createRowValues(1, 0, 0, 0, 1, 0, 0, 0, 1),
+};
+// data relating Up/Down/Left/Right directions relative to every surface
+const cubeNavigationRoutes = {
+    [Face.Front]: { up: Face.Top, down: Face.Bottom, left: Face.Left, right: Face.Right },
+    [Face.Back]: { up: Face.Top, down: Face.Bottom, left: Face.Right, right: Face.Left },
+    [Face.Top]: { up: Face.Back, down: Face.Front, left: Face.Left, right: Face.Right },
+    [Face.Bottom]: { up: Face.Front, down: Face.Back, left: Face.Left, right: Face.Right },
+    [Face.Right]: { up: Face.Top, down: Face.Bottom, left: Face.Front, right: Face.Back },
+    [Face.Left]: { up: Face.Top, down: Face.Bottom, left: Face.Back, right: Face.Front },
+};
+/** The default tolerance (1.0e-6) is appropriate if very dirty viewing operations are expected. */
+const DEFAULT_TOLERANCE = 1.0e-6;
+/** @internal */
+export var CubeHover;
+(function (CubeHover) {
+    CubeHover[CubeHover["None"] = 0] = "None";
+    CubeHover[CubeHover["Hover"] = 1] = "Hover";
+    CubeHover[CubeHover["Active"] = 2] = "Active";
+})(CubeHover || (CubeHover = {}));
+/** Cube Navigation Aid Component
+ * @public
+ */
+export class CubeNavigationAid extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._start = Vector2d.createZero();
+        /** @internal */
+        this.state = {
+            dragging: false,
+            startRotMatrix: Matrix3d.createIdentity(),
+            endRotMatrix: Matrix3d.createIdentity(),
+            animation: 1,
+            hoverMap: {},
+            face: Face.Top,
+        };
+        this._mounted = false;
+        this._labels = {
+            [Face.Right]: UiIModelComponents.translate("cube.right"),
+            [Face.Left]: UiIModelComponents.translate("cube.left"),
+            [Face.Back]: UiIModelComponents.translate("cube.back"),
+            [Face.Front]: UiIModelComponents.translate("cube.front"),
+            [Face.Top]: UiIModelComponents.translate("cube.top"),
+            [Face.Bottom]: UiIModelComponents.translate("cube.bottom"),
+        };
+        // Synchronize with rotation coming from the Viewport
+        this._handleViewRotationChangeEvent = (args) => {
+            const { animation, dragging, endRotMatrix } = this.state;
+            // istanbul ignore else
+            if (this.props.viewport === args.viewport && animation >= 1 && !dragging) {
+                const newMatrix = this.props.viewport.view.getRotation().clone();
+                if (!endRotMatrix.isAlmostEqual(newMatrix)) {
+                    this.setState({ startRotMatrix: newMatrix, endRotMatrix: newMatrix, animation: 1, face: Face.None });
+                }
+            }
+        };
+        this._animation = () => {
+            const t = Date.now();
+            const delta = this._lastTime ? t - this._lastTime : 16;
+            this._lastTime = t;
+            if (this.state.animation !== 1) {
+                const animation = Math.min(1, this.state.animation + delta / (1000 * (this.props.animationTime || /* istanbul ignore next */ 0.4)));
+                // istanbul ignore next
+                if (this._mounted) {
+                    this.setState({ animation }, () => {
+                        this._animationFrame = setTimeout(this._animation, 16.667);
+                    });
+                }
+            }
+            else {
+                this._lastTime = undefined;
+                this._animationEnd();
+            }
+        };
+        this._animationEnd = () => {
+            ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, this.state.face, true);
+            const startRotMatrix = this.state.endRotMatrix.clone();
+            // istanbul ignore next
+            if (this._mounted) {
+                this.setState({ startRotMatrix }, () => {
+                    // istanbul ignore else
+                    if (this.props.onAnimationEnd)
+                        this.props.onAnimationEnd();
+                });
+            }
+        };
+        this._handleCellHoverChange = (vect, state) => {
+            const hoverMap = this.state.hoverMap;
+            hoverMap[`${vect.x}-${vect.y}-${vect.z}`] = state;
+            this.setState({ hoverMap });
+        };
+        this._onArrowClick = (arrow) => {
+            const { newRotation, face } = this.getArrowRotationAndFace(arrow);
+            this._animateRotation(newRotation, face);
+        };
+        this._lastClientXY = Vector2d.createZero();
+        this._handleBoxMouseDown = (event) => {
+            event.preventDefault();
+            // only start listening after drag is confirmed. Ie. the 3D box is clicked.
+            window.addEventListener("mousemove", this._onMouseMove, false);
+            window.addEventListener("mouseup", this._onMouseUp, false);
+            this._lastClientXY = Vector2d.create(event.clientX, event.clientY);
+            this._start = this._lastClientXY;
+        };
+        this._onMouseMove = (event) => {
+            const mousePos = Vector2d.create(event.clientX, event.clientY);
+            this._processDrag(mousePos);
+        };
+        this._onMouseUp = () => {
+            if (this.state.dragging) {
+                this.setState({ dragging: false });
+                ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
+            }
+            // remove so event only triggers after this.onMouseStartDrag
+            window.removeEventListener("mousemove", this._onMouseMove);
+            window.removeEventListener("mouseup", this._onMouseUp);
+        };
+        // istanbul ignore next - unable to test touch
+        this._handleBoxTouchStart = (event) => {
+            if (1 !== event.targetTouches.length)
+                return;
+            window.addEventListener("touchmove", this._onTouchMove, false);
+            window.addEventListener("touchend", this._onTouchEnd, false);
+            this._lastClientXY = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            this._start = this._lastClientXY;
+        };
+        // istanbul ignore next - unable to test touch
+        this._onTouchMove = (event) => {
+            if (1 !== event.targetTouches.length)
+                return;
+            const mousePos = Vector2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            this._processDrag(mousePos);
+        };
+        // istanbul ignore next - unable to test touch
+        this._onTouchEnd = (event) => {
+            if (0 !== event.targetTouches.length)
+                return;
+            if (this.state.dragging) {
+                this.setState({ dragging: false });
+                ViewportComponentEvents.setCubeMatrix(this.state.endRotMatrix, CubeNavigationAid._getMatrixFace(this.state.endRotMatrix), true);
+            }
+            window.removeEventListener("touchmove", this._onTouchMove);
+            window.removeEventListener("touchend", this._onTouchEnd);
+        };
+        this._handleFaceCellClick = (pos, face) => {
+            const { endRotMatrix } = this.state;
+            let rotMatrix = Matrix3d.createRigidViewAxesZTowardsEye(pos.x, pos.y, pos.z).inverse();
+            // istanbul ignore else
+            if (rotMatrix) {
+                // if isMatrixFace and user is clicking on top/bottom, the current matrix face must be top or bottom
+                if (!CubeNavigationAid._isMatrixFace(endRotMatrix) && (face === Face.Top || face === Face.Bottom)) {
+                    const angleAxis = endRotMatrix.getAxisAndAngleOfRotation();
+                    // istanbul ignore else
+                    if (angleAxis.ok) {
+                        const xAx = endRotMatrix.columnX();
+                        const a = Math.atan2(xAx.y, xAx.x);
+                        const r = Math.round(a * 2 / Math.PI) * Math.PI / 2; // round to quarter turn intervals
+                        const rot = Matrix3d.createRotationAroundAxisIndex(AxisIndex.Z, Angle.createRadians(r));
+                        rotMatrix = rot.multiplyMatrixMatrix(rotMatrix);
+                    }
+                }
+                this._animateRotation(rotMatrix, face);
+            }
+            window.removeEventListener("mousemove", this._onMouseMove);
+        };
+        this._animateRotation = (endRotMatrix, face) => {
+            if (this.state.endRotMatrix.isAlmostEqual(endRotMatrix))
+                return;
+            // set animation variables, let css transitions animate it.
+            this._animationFrame = setTimeout(this._animation, 16.667);
+            this.setState((prevState) => ({
+                startRotMatrix: prevState.endRotMatrix, endRotMatrix,
+                animation: 0,
+                face,
+            }));
+        };
+        this._setRotation = (endRotMatrix, face) => {
+            ViewportComponentEvents.setCubeMatrix(endRotMatrix, face);
+            // set variables, with animTime at 0 to prevent animation.
+            this.setState({
+                startRotMatrix: endRotMatrix,
+                endRotMatrix,
+                animation: 1,
+                face,
+            });
+        };
+    }
+    /** @internal */
+    componentDidMount() {
+        this._mounted = true;
+        ViewportComponentEvents.onViewRotationChangeEvent.addListener(this._handleViewRotationChangeEvent);
+        // set initial rotation
+        if (this.props.viewport) {
+            const newMatrix = this.props.viewport.view.getRotation().clone();
+            this.setState({ startRotMatrix: newMatrix, endRotMatrix: newMatrix, animation: 1 });
+        }
+    }
+    /** @internal */
+    componentWillUnmount() {
+        ViewportComponentEvents.onViewRotationChangeEvent.removeListener(this._handleViewRotationChangeEvent);
+        clearTimeout(this._animationFrame);
+        this._mounted = false;
+    }
+    render() {
+        const { animation, startRotMatrix, endRotMatrix } = this.state;
+        const visible = CubeNavigationAid._isMatrixFace(endRotMatrix) && animation === 1.0;
+        const rotMatrix = CubeNavigationAid._interpolateRotMatrix(startRotMatrix, animation, endRotMatrix);
+        if (rotMatrix !== startRotMatrix && rotMatrix !== endRotMatrix)
+            ViewportComponentEvents.setCubeMatrix(rotMatrix, Face.None);
+        const faces = {};
+        for (const key in this._labels) {
+            // istanbul ignore else
+            if (this._labels.hasOwnProperty(key)) {
+                const f = key;
+                const label = this._labels[f];
+                faces[f] =
+                    React.createElement(NavCubeFace, { face: f, label: label, hoverMap: this.state.hoverMap, onFaceCellClick: this._handleFaceCellClick, onFaceCellHoverChange: this._handleCellHoverChange });
+            }
+        }
+        const cubeClassNames = classnames("nav-cube", this.state.dragging && "cube-dragging");
+        const upTitle = this.getArrowTitle(Pointer.Up);
+        const downTitle = this.getArrowTitle(Pointer.Down);
+        const leftTitle = this.getArrowTitle(Pointer.Left);
+        const rightTitle = this.getArrowTitle(Pointer.Right);
+        return (React.createElement("div", { className: classnames("components-cube-container", this.props.className), style: this.props.style, "data-testid": "components-cube-navigation-aid", onMouseDown: this._handleBoxMouseDown, onTouchStart: this._handleBoxTouchStart, role: "presentation" },
+            React.createElement("div", { className: "cube-element-container" },
+                React.createElement(Cube, { className: cubeClassNames, rotMatrix: rotMatrix, faces: faces })),
+            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-up", visible: visible, pointerType: Pointer.Up, onArrowClick: this._onArrowClick, title: upTitle }),
+            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-down", visible: visible, pointerType: Pointer.Down, onArrowClick: this._onArrowClick, title: downTitle }),
+            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-left", visible: visible, pointerType: Pointer.Left, onArrowClick: this._onArrowClick, title: leftTitle }),
+            React.createElement(PointerButton, { "data-testid": "cube-pointer-button-right", visible: visible, pointerType: Pointer.Right, onArrowClick: this._onArrowClick, title: rightTitle })));
+    }
+    static correctSmallNumber(value, tolerance) {
+        return Math.abs(value) < tolerance ? 0 : value;
+    }
+    /**
+     * Snap coordinates of a vector to zero and to each other so that the vector prefers to be
+     * * perpendicular to a face of the unit cube.
+     * * or pass through a nearby vertex or edge of the unit cube.
+     * @param zVector existing z vector.
+     * @param tolerance tolerance to determine if a z vector component is close to zero or 1.
+     */
+    static snapVectorToCubeFeatures(zVector, tolerance) {
+        const x = CubeNavigationAid.correctSmallNumber(zVector.x, tolerance);
+        let y = CubeNavigationAid.correctSmallNumber(zVector.y, tolerance);
+        let z = CubeNavigationAid.correctSmallNumber(zVector.z, tolerance);
+        const xx = 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 (Geometry.isSameCoordinate(xx, yy, tolerance)) {
+            y = Geometry.split3WaySign(y, -xx, xx, xx);
+        }
+        if (Geometry.isSameCoordinate(yy, zz, tolerance)) {
+            z = Geometry.split3WaySign(z, -yy, yy, yy);
+        }
+        if (Geometry.isSameCoordinate(xx, zz, tolerance)) {
+            z = Geometry.split3WaySign(z, -xx, xx, xx);
+        }
+        return Vector3d.create(x, y, z);
+    }
+    /**
+     * Adjust a worldToView matrix to favor both
+     * * direct view at faces, edges, and corners of a view cube.
+     * * heads up
+     * @param worldToView candidate matrix
+     * @param tolerance tolerance for cleaning up fuzz.  The default (1.0e-6) is appropriate if very dirty viewing operations are expected.
+     * @param result optional result.
+     */
+    static snapWorldToViewMatrixToCubeFeatures(worldToView, tolerance, result) {
+        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 = Matrix3d.createRigidFromColumns(newZ, perpVector, AxisOrder.ZXY, result);
+        }
+        else {
+            result = Matrix3d.createRigidViewAxesZTowardsEye(newZ.x, newZ.y, newZ.z, result);
+        }
+        // istanbul ignore else
+        if (result)
+            result.transposeInPlace();
+        return result;
+    }
+    getArrowRotationAndFace(arrow) {
+        const localRotationAxis = Vector3d.create(0, 0, 0);
+        switch (arrow) {
+            case Pointer.Up:
+                localRotationAxis.x = -1.0;
+                break;
+            case Pointer.Down:
+                localRotationAxis.x = 1.0;
+                break;
+            case Pointer.Left:
+                localRotationAxis.y = -1.0;
+                break;
+            default:
+                localRotationAxis.y = 1.0;
+                break;
+        }
+        const localRotation = Matrix3d.createRotationAroundVector(localRotationAxis, Angle.createDegrees(-90));
+        const newRotation = localRotation.multiplyMatrixMatrix(this.state.endRotMatrix);
+        CubeNavigationAid.snapWorldToViewMatrixToCubeFeatures(newRotation, DEFAULT_TOLERANCE, newRotation);
+        const face = CubeNavigationAid._getMatrixFace(newRotation);
+        return { newRotation, face };
+    }
+    getArrowTitle(arrow) {
+        const { face } = this.getArrowRotationAndFace(arrow);
+        return this._labels[face];
+    }
+    _processDrag(mousePos) {
+        // istanbul ignore else
+        if (!this._start.isAlmostEqual(mousePos)) {
+            const movement = mousePos.minus(this._lastClientXY);
+            const diff = movement.scale(0.05);
+            const yaw = Angle.createRadians(diff.x);
+            const pitch = Angle.createRadians(diff.y);
+            const matX = Matrix3d.createRotationAroundAxisIndex(AxisIndex.X, pitch);
+            const matZ = Matrix3d.createRotationAroundAxisIndex(AxisIndex.Z, yaw);
+            const mat = matX.multiplyMatrixMatrix(this.state.startRotMatrix).multiplyMatrixMatrix(matZ);
+            this._setRotation(mat, CubeNavigationAid._getMatrixFace(mat));
+            if (!this.state.dragging)
+                this.setState({ dragging: true });
+        }
+        this._lastClientXY = mousePos;
+    }
+}
+CubeNavigationAid._animationFn = (t) => t < .5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
+CubeNavigationAid._isMatrixFace = (matrix) => {
+    let sum = 0;
+    for (const coff of matrix.coffs) {
+        if (Geometry.isAlmostEqualNumber(Math.abs(coff), 1))
+            sum++;
+    }
+    // Assuming matrix is a proper rotation matrix:
+    // if matrix viewing a face, there will be a total of 3 values either almost -1, or almost 1.
+    return sum === 3;
+};
+CubeNavigationAid._getMatrixFace = (rotMatrix) => {
+    if (!CubeNavigationAid._isMatrixFace(rotMatrix)) {
+        return Face.None;
+    }
+    let matrixFace = 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 = Angle.createRadians(angleAxis.angle.radians * CubeNavigationAid._animationFn(anim));
+        const newDiff = Matrix3d.createRotationAroundVector(angleAxis.axis, angle);
+        // istanbul ignore else
+        if (newDiff) {
+            const newMatrix = newDiff.multiplyMatrixMatrix(start);
+            return newMatrix;
+        }
+    }
+    // istanbul ignore next
+    return end;
+};
+/** @internal */
+export class NavCubeFace extends React.Component {
+    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));
+            })));
+        })));
+    }
+}
+NavCubeFace.faceCellToPos = (face, x, y) => {
+    const faceVect = cubeNavigationFaceLocs[face];
+    const route = cubeNavigationRoutes[face];
+    const faceX = x < 0 ? route.left : x > 0 ? route.right : Face.None;
+    const xVect = faceX !== Face.None ? cubeNavigationFaceLocs[faceX] : Vector3d.createZero();
+    const faceY = y < 0 ? route.up : y > 0 ? route.down : Face.None;
+    const yVect = faceY !== Face.None ? cubeNavigationFaceLocs[faceY] : Vector3d.createZero();
+    return faceVect.plus(xVect).plus(yVect);
+};
+class FaceRow extends React.Component {
+    render() {
+        const { center, children, ...props } = this.props;
+        const classNames = classnames("face-row", center && "cube-center");
+        return React.createElement("div", { className: classNames, ...props }, children);
+    }
+}
+/** @internal */
+export class FaceCell extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._handleMouseOver = () => {
+            const { vector } = this.props;
+            this.props.onFaceCellHoverChange(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 = classnames("face-cell", center && "cube-center", hover && "cube-hover", active && "cube-active");
+        // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+        return React.createElement("div", { onMouseDown: this._handleMouseDown, onMouseUp: this._handleMouseUp, onMouseOver: this._handleMouseOver, onMouseOut: this._handleMouseOut, onTouchStart: this._handleTouchStart, onTouchEnd: this._handleTouchEnd, "data-testid": `nav-cube-face-cell-${face}-${n}`, className: classNames, role: "presentation", ...props }, children);
+    }
+    handlePointerDown(x, y) {
+        const { vector } = this.props;
+        this._startMouse = Point2d.create(x, y);
+        this.props.onFaceCellHoverChange(vector, CubeHover.Active);
+    }
+    handlePointerUp(x, y) {
+        const { vector, face } = this.props;
+        this.props.onFaceCellHoverChange(vector, CubeHover.None);
+        const mouse = Point2d.create(x, y);
+        if (this._startMouse && this._startMouse.isAlmostEqual(mouse)) {
+            const isFace = Math.abs(vector.x) + Math.abs(vector.y) + Math.abs(vector.z) === 1;
+            this.props.onFaceCellClick(vector, isFace ? face : Face.None);
+        }
+    }
+}
+var Pointer;
+(function (Pointer) {
+    Pointer[Pointer["None"] = 0] = "None";
+    Pointer[Pointer["Up"] = 1] = "Up";
+    Pointer[Pointer["Down"] = 2] = "Down";
+    Pointer[Pointer["Left"] = 3] = "Left";
+    Pointer[Pointer["Right"] = 4] = "Right";
+})(Pointer || (Pointer = {}));
+const pointerIconClass = {
+    [Pointer.Up]: "icon-caret-down",
+    [Pointer.Down]: "icon-caret-up",
+    [Pointer.Left]: "icon-caret-right",
+    [Pointer.Right]: "icon-caret-left",
+};
+const pointerClass = {
+    [Pointer.Up]: "cube-up",
+    [Pointer.Down]: "cube-down",
+    [Pointer.Left]: "cube-left",
+    [Pointer.Right]: "cube-right",
+};
+class PointerButton extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._handleClick = (event) => {
+            const { pointerType } = this.props;
+            event.preventDefault();
+            this.props.onArrowClick(pointerType);
+        };
+    }
+    render() {
+        const { visible, pointerType, onArrowClick, title, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        const classes = classnames("cube-pointer", "icon", pointerClass[pointerType], pointerIconClass[pointerType], visible && "cube-visible");
+        return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+        React.createElement("div", { className: classes, role: "button", tabIndex: -1, title: title, ...props, onClick: this._handleClick }));
+    }
+}
+//# sourceMappingURL=CubeNavigationAid.js.map