@itwin/imodel-components-react 4.1.0 → 4.2.0

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

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * 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
  */
@@ -83,12 +83,42 @@ const cubeNavigationFaceRotations = {
 };
 // 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 },
+    [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;
@@ -131,7 +161,12 @@ class CubeNavigationAid extends React.Component {
             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.setState({
+                        startRotMatrix: newMatrix,
+                        endRotMatrix: newMatrix,
+                        animation: 1,
+                        face: Cube_1.Face.None,
+                    });
                 }
             }
         };
@@ -140,7 +175,10 @@ class CubeNavigationAid extends React.Component {
             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)));
+                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 }, () => {
@@ -166,9 +204,8 @@ class CubeNavigationAid extends React.Component {
             }
         };
         this._handleCellHoverChange = (vect, state) => {
-            var _a, _b;
             if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.props.onAnimationEnd?.();
                 return;
             }
             const hoverMap = this.state.hoverMap;
@@ -177,16 +214,16 @@ class CubeNavigationAid extends React.Component {
         };
         this._isInteractionLocked = () => {
             // Locked by markup
-            if (undefined !== this.props.viewport && this.props.viewport === core_frontend_1.IModelApp.toolAdmin.markupView) {
+            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);
+                this.props.onAnimationEnd?.();
                 return;
             }
             const { newRotation, face } = this.getArrowRotationAndFace(arrow);
@@ -194,9 +231,8 @@ class CubeNavigationAid extends React.Component {
         };
         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);
+                this.props.onAnimationEnd?.();
                 return;
             }
             event.preventDefault();
@@ -221,9 +257,8 @@ class CubeNavigationAid extends React.Component {
         };
         // 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);
+                this.props.onAnimationEnd?.();
                 return;
             }
             if (1 !== event.targetTouches.length)
@@ -252,9 +287,8 @@ class CubeNavigationAid extends React.Component {
             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);
+                this.props.onAnimationEnd?.();
                 return;
             }
             const { endRotMatrix } = this.state;
@@ -262,13 +296,14 @@ class CubeNavigationAid extends React.Component {
             // 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)) {
+                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 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);
                     }
@@ -283,7 +318,8 @@ class CubeNavigationAid extends React.Component {
             // set animation variables, let css transitions animate it.
             this._animationFrame = setTimeout(this._animation, 16.667);
             this.setState((prevState) => ({
-                startRotMatrix: prevState.endRotMatrix, endRotMatrix,
+                startRotMatrix: prevState.endRotMatrix,
+                endRotMatrix,
                 animation: 0,
                 face,
             }));
@@ -306,7 +342,11 @@ class CubeNavigationAid extends React.Component {
         // set initial rotation
         if (this.props.viewport) {
             const newMatrix = this.props.viewport.view.getRotation().clone();
-            this.setState({ startRotMatrix: newMatrix, endRotMatrix: newMatrix, animation: 1 });
+            this.setState({
+                startRotMatrix: newMatrix,
+                endRotMatrix: newMatrix,
+                animation: 1,
+            });
         }
     }
     /** @internal */
@@ -327,8 +367,7 @@ class CubeNavigationAid extends React.Component {
             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 });
+                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");
@@ -438,7 +477,9 @@ class CubeNavigationAid extends React.Component {
             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);
+            const mat = matX
+                .multiplyMatrixMatrix(this.state.startRotMatrix)
+                .multiplyMatrixMatrix(matZ);
             this._setRotation(mat, CubeNavigationAid._getMatrixFace(mat));
             if (!this.state.dragging)
                 this.setState({ dragging: true });
@@ -446,7 +487,7 @@ class CubeNavigationAid extends React.Component {
         this._lastClientXY = mousePos;
     }
 }
-CubeNavigationAid._animationFn = (t) => t < .5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
+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) {
@@ -467,8 +508,10 @@ CubeNavigationAid._getMatrixFace = (rotMatrix) => {
         rotMatrix.coffs[8] === cubeNavigationFaceRotations[Cube_1.Face.Top].coffs[8])
         return Cube_1.Face.Top;
     // istanbul ignore else
-    if (rotMatrix.coffs[6] === cubeNavigationFaceRotations[Cube_1.Face.Bottom].coffs[6] &&
-        rotMatrix.coffs[7] === cubeNavigationFaceRotations[Cube_1.Face.Bottom].coffs[7] &&
+    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;
     // istanbul ignore else
@@ -519,7 +562,9 @@ exports.CubeNavigationAid = CubeNavigationAid;
 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);
+        const omittedCell = (y === 0 && x !== 0 && z !== 0) ||
+            (y !== 0 && x === 0 && z !== 0) ||
+            (y !== 0 && x !== 0 && z === 0);
         return !omittedCell;
     }
     render() {
@@ -529,8 +574,7 @@ class NavCubeFace extends React.Component {
                 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));
+                    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
@@ -544,9 +588,13 @@ 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 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();
+    const yVect = faceY !== Cube_1.Face.None
+        ? cubeNavigationFaceLocs[faceY]
+        : core_geometry_1.Vector3d.createZero();
     return faceVect.plus(xVect).plus(yVect);
 };
 exports.NavCubeFace = NavCubeFace;
@@ -554,7 +602,7 @@ 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);
+        return (React.createElement("div", { className: classNames, ...props }, children));
     }
 }
 /** @internal */
@@ -563,11 +611,13 @@ class FaceCell extends React.Component {
         super(...arguments);
         this._handleMouseOver = () => {
             const { vector } = this.props;
-            this.props.onFaceCellHoverChange && this.props.onFaceCellHoverChange(vector, CubeHover.Hover);
+            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.props.onFaceCellHoverChange &&
+                this.props.onFaceCellHoverChange(vector, CubeHover.None);
         };
         this._handleMouseDown = (event) => {
             const { clientX, clientY } = event;
@@ -579,35 +629,39 @@ class FaceCell extends React.Component {
         };
         this._handleTouchStart = (event) => {
             event.preventDefault();
-            event.targetTouches.length === 1 && this.handlePointerDown(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            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);
+            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 { 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");
-        // 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);
+        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 && this.props.onFaceCellHoverChange(vector, CubeHover.Active);
+        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);
+        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);
+            this.props.onFaceCellClick &&
+                this.props.onFaceCellClick(vector, isFace ? face : Cube_1.Face.None);
         }
     }
 }
@@ -642,7 +696,7 @@ class PointerButton extends React.Component {
         };
     }
     render() {
-        const { visible, pointerType, onArrowClick, title, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+        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