@itwin/imodel-components-react 4.1.0 → 4.2.0-dev.1

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

@@ -1,7 +1,7 @@
 /*---------------------------------------------------------------------------------------------
-* 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
  */
@@ -9,13 +9,13 @@ import "./DrawingNavigationAid.scss";
 import classnames from "classnames";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { Constant, Geometry, Matrix3d, Point2d, Point3d, Point4d, Vector3d } from "@itwin/core-geometry";
+import { Constant, Geometry, Matrix3d, Point2d, Point3d, Point4d, Vector3d, } from "@itwin/core-geometry";
 import { IModelApp, ScreenViewport } from "@itwin/core-frontend";
 import { SpecialKey } from "@itwin/appui-abstract";
 import { Icon } from "@itwin/core-react";
 import { UiIModelComponents } from "../UiIModelComponents";
 import { ViewportComponentEvents } from "../viewport/ViewportComponentEvents";
-import { SvgAdd, SvgRemove, SvgRotateLeft, SvgSortUp } from "@itwin/itwinui-icons-react";
+import { SvgAdd, SvgRemove, SvgRotateLeft, SvgSortUp, } from "@itwin/itwinui-icons-react";
 // cSpell:ignore Quaternion Quaternions unrotate
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /**
@@ -37,7 +37,12 @@ class DrawingNavigationAid extends React.Component {
         this._rootElement = React.createRef();
         this._viewContainerElement = React.createRef();
         this._viewElement = React.createRef();
-        this._rootOffset = DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 });
+        this._rootOffset = DOMRect.fromRect({
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0,
+        });
         this._mounted = false;
         this._isViewport3D = () => {
             return this.state.view !== undefined && this.state.view.is3d();
@@ -47,7 +52,8 @@ class DrawingNavigationAid 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 || 0.4)));
+                const animation = Math.min(1, this.state.animation +
+                    delta / (1000 * (this.props.animationTime || 0.4)));
                 this._updateFrustum();
                 // istanbul ignore next
                 if (this._mounted) {
@@ -71,7 +77,13 @@ class DrawingNavigationAid extends React.Component {
             const startRotation = this.state.rotation;
             // istanbul ignore next
             if (this._mounted) {
-                this.setState({ startMapOrigin, startDrawingZoom, startOrigin, startRotation, startMapExtents }, () => {
+                this.setState({
+                    startMapOrigin,
+                    startDrawingZoom,
+                    startOrigin,
+                    startRotation,
+                    startMapExtents,
+                }, () => {
                     // istanbul ignore else
                     if (this.props.onAnimationEnd)
                         this.props.onAnimationEnd();
@@ -108,11 +120,15 @@ class DrawingNavigationAid extends React.Component {
         // Synchronize with rotation coming from the Viewport
         this._handleViewRotationChangeEvent = (args) => {
             // istanbul ignore else
-            if (!this.state.isMoving && !this.state.isPanning && this.props.viewport === args.viewport) {
+            if (!this.state.isMoving &&
+                !this.state.isPanning &&
+                this.props.viewport === args.viewport) {
                 const extents = args.viewport.view.getExtents().clone();
                 const rotation = args.viewport.view.getRotation().clone();
-                const halfExtents = extents.scale(.5);
-                const offset = this.state.rotateMinimapWithView || this._isViewport3D() ? rotation.multiplyTransposeVector(halfExtents) : halfExtents;
+                const halfExtents = extents.scale(0.5);
+                const offset = this.state.rotateMinimapWithView || this._isViewport3D()
+                    ? rotation.multiplyTransposeVector(halfExtents)
+                    : halfExtents;
                 const origin = args.viewport.view.getOrigin().plus(offset);
                 const deltaZoom = (this.state.extents.x - extents.x) / this.state.extents.x;
                 let drawingZoom = this.state.drawingZoom / (1 - deltaZoom);
@@ -120,28 +136,40 @@ class DrawingNavigationAid extends React.Component {
                 let mapOrigin = this.state.mapOrigin.plus(deltaOrigin);
                 mapOrigin = mapOrigin.plus(Vector3d.createFrom(origin.minus(mapOrigin)).scale(deltaZoom));
                 if (this.state.viewId !== args.viewport.view.id) {
-                    const rect = this.state.rotateMinimapWithView || this._isViewport3D() ? extents : DrawingNavigationAid.findRotatedWindowDimensions(extents, rotation);
+                    const rect = this.state.rotateMinimapWithView || this._isViewport3D()
+                        ? extents
+                        : DrawingNavigationAid.findRotatedWindowDimensions(extents, rotation);
                     const maxRectDim = Math.max(rect.y, rect.x);
                     const maxExtentDim = Math.max(this.state.mapExtents.x, this.state.mapExtents.y);
                     drawingZoom = maxExtentDim / (3 * maxRectDim);
                     mapOrigin = origin.clone();
                     this._viewport = args.viewport;
-                    this.setState({ viewId: args.viewport.view.id, view: args.viewport.view.clone() });
+                    this.setState({
+                        viewId: args.viewport.view.id,
+                        view: args.viewport.view.clone(),
+                    });
                 }
                 // istanbul ignore next
                 if (this._mounted) {
                     this.setState({
-                        startOrigin: origin, origin, extents,
-                        startRotation: rotation, rotation,
-                        startMapOrigin: mapOrigin, mapOrigin,
-                        startDrawingZoom: drawingZoom, drawingZoom,
+                        startOrigin: origin,
+                        origin,
+                        extents,
+                        startRotation: rotation,
+                        rotation,
+                        startMapOrigin: mapOrigin,
+                        mapOrigin,
+                        startDrawingZoom: drawingZoom,
+                        drawingZoom,
                     });
                 }
             }
         };
         this._updateFrustum = (complete = false) => {
-            const halfExtents = this.state.extents.scale(.5);
-            const offset = this.state.rotateMinimapWithView || this._isViewport3D() ? this.state.rotation.multiplyTransposeVector(halfExtents) : halfExtents;
+            const halfExtents = this.state.extents.scale(0.5);
+            const offset = this.state.rotateMinimapWithView || this._isViewport3D()
+                ? this.state.rotation.multiplyTransposeVector(halfExtents)
+                : halfExtents;
             const origin = this.state.origin.minus(offset);
             ViewportComponentEvents.setDrawingViewportState(origin, this.state.rotation, complete);
         };
@@ -186,7 +214,9 @@ class DrawingNavigationAid extends React.Component {
                 // istanbul ignore else
                 if (this.state.isPanning && this.state.mode === MapMode.Opened) {
                     const vect = Vector3d.create(movement.x / this.state.drawingZoom, -movement.y / this.state.drawingZoom, 0);
-                    const offset = this.state.rotateMinimapWithView || this._isViewport3D() ? this.state.rotation.multiplyTransposeVector(vect) : vect;
+                    const offset = this.state.rotateMinimapWithView || this._isViewport3D()
+                        ? this.state.rotation.multiplyTransposeVector(vect)
+                        : vect;
                     const mapOrigin = this.state.mapOrigin.minus(offset);
                     this.setState({ startMapOrigin: mapOrigin, mapOrigin });
                 }
@@ -197,7 +227,8 @@ class DrawingNavigationAid extends React.Component {
             const mouse = Point2d.create(event.clientX, event.clientY);
             if (mouse.isAlmostEqual(this.state.mouseStart) &&
                 this.state.mode === MapMode.Closed &&
-                (event.target === this._viewContainerElement.current || event.target === this._viewElement.current)) {
+                (event.target === this._viewContainerElement.current ||
+                    event.target === this._viewElement.current)) {
                 this._openLargeMap();
             }
             else if (this.state.isMoving) {
@@ -210,7 +241,10 @@ class DrawingNavigationAid extends React.Component {
                     this.setState({ isPanning: false });
                 }
             }
-            else if ((!(event.target instanceof Node) || this._rootElement.current && !this._rootElement.current.contains(event.target)) && mouse.isAlmostEqual(this.state.mouseStart)) {
+            else if ((!(event.target instanceof Node) ||
+                (this._rootElement.current &&
+                    !this._rootElement.current.contains(event.target))) &&
+                mouse.isAlmostEqual(this.state.mouseStart)) {
                 this._closeLargeMap();
             }
             this._lastClientXY = Point2d.create(event.clientX, event.clientY);
@@ -268,8 +302,10 @@ class DrawingNavigationAid extends React.Component {
                 const mapExtents = this._getOpenedMapSize();
                 this.setState({
                     mode: MapMode.Opened,
-                    isMoving: false, isPanning: false,
-                    mapExtents, startMapExtents,
+                    isMoving: false,
+                    isPanning: false,
+                    mapExtents,
+                    startMapExtents,
                     animation: 0,
                 }, () => {
                     this._animationFrame = setTimeout(this._animation);
@@ -283,17 +319,23 @@ class DrawingNavigationAid extends React.Component {
                 const mapOrigin = this.state.origin.clone();
                 const startMapExtents = Vector3d.createFrom(this.state.mapExtents);
                 const mapExtents = this._getClosedMapSize();
-                const rect = this.state.rotateMinimapWithView || this._isViewport3D() ? this.state.extents : DrawingNavigationAid.findRotatedWindowDimensions(this.state.extents, this.state.rotation);
+                const rect = this.state.rotateMinimapWithView || this._isViewport3D()
+                    ? this.state.extents
+                    : DrawingNavigationAid.findRotatedWindowDimensions(this.state.extents, this.state.rotation);
                 const maxRectDim = Math.max(rect.y, rect.x);
                 const maxExtentDim = Math.max(mapExtents.x, mapExtents.y);
                 const drawingZoom = maxExtentDim / (3 * maxRectDim);
                 const startDrawingZoom = this.state.drawingZoom;
                 this.setState({
                     mode: MapMode.Closed,
-                    startMapOrigin, mapOrigin,
-                    startDrawingZoom, drawingZoom,
-                    isMoving: false, isPanning: false,
-                    startMapExtents, mapExtents,
+                    startMapOrigin,
+                    mapOrigin,
+                    startDrawingZoom,
+                    drawingZoom,
+                    isMoving: false,
+                    isPanning: false,
+                    startMapExtents,
+                    mapExtents,
                     panningDirection: Vector3d.createZero(),
                     animation: 0,
                 }, () => {
@@ -303,17 +345,23 @@ class DrawingNavigationAid extends React.Component {
         };
         this._getPanVector = () => {
             const is3D = this._isViewport3D();
-            const rect = this.state.rotateMinimapWithView || is3D ? this.state.extents : DrawingNavigationAid.findRotatedWindowDimensions(this.state.extents, this.state.rotation);
+            const rect = this.state.rotateMinimapWithView || is3D
+                ? this.state.extents
+                : DrawingNavigationAid.findRotatedWindowDimensions(this.state.extents, this.state.rotation);
             const mapExtents = this.state.mapExtents.scale(1 / this.state.drawingZoom);
             const maxMagnitude = 80; // maximum acceleration
             const magnitudeTravel = 30; // How far, in pixels, that magnitude increases from 0 to max acceleration
             const diff = Vector3d.createFrom(this.state.origin.minus(this.state.mapOrigin));
-            const diffVector = this.state.rotateMinimapWithView || is3D ? this.state.rotation.multiplyVector(diff) : diff;
+            const diffVector = this.state.rotateMinimapWithView || is3D
+                ? this.state.rotation.multiplyVector(diff)
+                : diff;
             // capture any values
             const magnitudeVector = Vector3d.create(Math.max(0, Math.abs(diffVector.x) - (mapExtents.x - rect.x) / 2), Math.max(0, Math.abs(diffVector.y) - (mapExtents.y - rect.y) / 2));
             if (magnitudeVector.isAlmostZero)
                 return Vector3d.createZero();
-            const magnitude = Math.min(magnitudeVector.magnitude() * this.state.drawingZoom, magnitudeTravel) / magnitudeTravel * maxMagnitude;
+            const magnitude = (Math.min(magnitudeVector.magnitude() * this.state.drawingZoom, magnitudeTravel) /
+                magnitudeTravel) *
+                maxMagnitude;
             const vect = Vector3d.createFrom(this.state.origin.minus(this.state.mapOrigin)); // vect will never be zero or magnitude would also be zero
             const norm = vect.normalize();
             return norm.scale(magnitude); // norm is only undefined when vect is zero, in which it would have returned at magnitudeVector.isAlmostZero
@@ -328,15 +376,19 @@ class DrawingNavigationAid extends React.Component {
                 const is3D = this._isViewport3D();
                 if (event.deltaY < 0) {
                     const zoom = drawingZoom * 1.1;
-                    const vect = Vector3d.create(mouseX * 0.1 / zoom, -mouseY * 0.1 / zoom, 0);
-                    const offset = this.state.rotateMinimapWithView || is3D ? this.state.rotation.multiplyTransposeVector(vect) : vect;
+                    const vect = Vector3d.create((mouseX * 0.1) / zoom, (-mouseY * 0.1) / zoom, 0);
+                    const offset = this.state.rotateMinimapWithView || is3D
+                        ? this.state.rotation.multiplyTransposeVector(vect)
+                        : vect;
                     const m = mapOrigin.plus(offset);
                     this.setState({ mapOrigin: m, drawingZoom: zoom });
                 }
                 if (event.deltaY > 0) {
                     const zoom = drawingZoom / 1.1;
-                    const vect = Vector3d.create(mouseX * 0.1 / drawingZoom, -mouseY * 0.1 / drawingZoom, 0);
-                    const offset = this.state.rotateMinimapWithView || is3D ? this.state.rotation.multiplyTransposeVector(vect) : vect;
+                    const vect = Vector3d.create((mouseX * 0.1) / drawingZoom, (-mouseY * 0.1) / drawingZoom, 0);
+                    const offset = this.state.rotateMinimapWithView || is3D
+                        ? this.state.rotation.multiplyTransposeVector(vect)
+                        : vect;
                     const m = mapOrigin.minus(offset);
                     this.setState({ mapOrigin: m, drawingZoom: zoom });
                 }
@@ -352,18 +404,32 @@ class DrawingNavigationAid extends React.Component {
         };
         this._handleUnrotate = () => {
             const startRotation = this.state.rotation;
-            const halfExtents = this.state.extents.scale(.5);
-            const offset = this.state.rotateMinimapWithView || this._isViewport3D() ? Vector3d.createZero() : this.state.rotation.multiplyTransposeVector(halfExtents).minus(halfExtents);
+            const halfExtents = this.state.extents.scale(0.5);
+            const offset = this.state.rotateMinimapWithView || this._isViewport3D()
+                ? Vector3d.createZero()
+                : this.state.rotation
+                    .multiplyTransposeVector(halfExtents)
+                    .minus(halfExtents);
             const startOrigin = this.state.origin;
             const origin = this.state.origin.plus(offset);
             const startMapOrigin = this.state.mapOrigin;
             const mapOrigin = this.state.mapOrigin.plus(offset);
-            this.setState({ animation: 0, startOrigin, origin, startMapOrigin, mapOrigin, startRotation, rotation: Matrix3d.createIdentity() }, () => {
+            this.setState({
+                animation: 0,
+                startOrigin,
+                origin,
+                startMapOrigin,
+                mapOrigin,
+                startRotation,
+                rotation: Matrix3d.createIdentity(),
+            }, () => {
                 this._animationFrame = setTimeout(this._animation, 16.667);
             });
         };
         const mode = props.initialMapMode || MapMode.Closed;
-        const mapExtents = mode === MapMode.Closed ? this._getClosedMapSize() : this._getOpenedMapSize();
+        const mapExtents = mode === MapMode.Closed
+            ? this._getClosedMapSize()
+            : this._getOpenedMapSize();
         const startMapExtents = mapExtents;
         this.state = {
             startOrigin: Point3d.createZero(),
@@ -385,7 +451,9 @@ class DrawingNavigationAid extends React.Component {
             view: props.initialView,
             isMoving: false,
             isPanning: false,
-            rotateMinimapWithView: props.initialRotateMinimapWithView !== undefined ? props.initialRotateMinimapWithView : false,
+            rotateMinimapWithView: props.initialRotateMinimapWithView !== undefined
+                ? props.initialRotateMinimapWithView
+                : false,
         };
     }
     /** @internal */
@@ -398,12 +466,17 @@ class DrawingNavigationAid extends React.Component {
         const sz = startMapExtents.interpolate(a, mapExtents);
         const dz = Geometry.interpolate(startDrawingZoom, a, drawingZoom);
         const rootStyle = {
-            width: sz.x, height: sz.y,
+            width: sz.x,
+            height: sz.y,
             ...this.props.style,
         };
         const is3D = this._isViewport3D();
-        const tOr = rotateMinimapWithView || is3D ? rotation.multiplyVector(Vector3d.createFrom(or)) : Vector3d.createFrom(or);
-        const tMap = rotateMinimapWithView || is3D ? rotation.multiplyVector(Vector3d.createFrom(map)) : Vector3d.createFrom(map);
+        const tOr = rotateMinimapWithView || is3D
+            ? rotation.multiplyVector(Vector3d.createFrom(or))
+            : Vector3d.createFrom(or);
+        const tMap = rotateMinimapWithView || is3D
+            ? rotation.multiplyVector(Vector3d.createFrom(map))
+            : Vector3d.createFrom(map);
         const tPosX = (tOr.x - extents.x / 2 - tMap.x) * dz + sz.x / 2;
         const tPosY = (-tOr.y - extents.y / 2 + tMap.y) * dz + sz.y / 2;
         const viewWindowStyle = {
@@ -424,24 +497,34 @@ class DrawingNavigationAid extends React.Component {
             rootStyle.right = window.innerWidth - this._rootOffset.right;
             rootStyle.top = this._rootOffset.top;
         }
-        const halfExtents = extents.scale(.5);
-        const offset = rotateMinimapWithView || is3D ? Vector3d.createZero() : rotation.multiplyTransposeVector(halfExtents).minus(halfExtents);
+        const halfExtents = extents.scale(0.5);
+        const offset = rotateMinimapWithView || is3D
+            ? Vector3d.createZero()
+            : rotation.multiplyTransposeVector(halfExtents).minus(halfExtents);
         const unrotateLabel = UiIModelComponents.translate("drawing.unrotate");
         const e = sz.scale(1 / dz);
-        const halfMapExtents = e.scale(.5);
-        const mapOffset = rotateMinimapWithView || is3D ? rotation.multiplyTransposeVector(halfMapExtents) : halfMapExtents;
-        const viewManager = this.props.viewManagerOverride ? this.props.viewManagerOverride : /* istanbul ignore next */ IModelApp.viewManager;
-        const screenViewport = this.props.screenViewportOverride ? this.props.screenViewportOverride : /* istanbul ignore next */ ScreenViewport;
+        const halfMapExtents = e.scale(0.5);
+        const mapOffset = rotateMinimapWithView || is3D
+            ? rotation.multiplyTransposeVector(halfMapExtents)
+            : halfMapExtents;
+        const viewManager = this.props.viewManagerOverride
+            ? this.props.viewManagerOverride
+            : /* istanbul ignore next */ IModelApp.viewManager;
+        const screenViewport = this.props.screenViewportOverride
+            ? this.props.screenViewportOverride
+            : /* istanbul ignore next */ ScreenViewport;
         const nodes = (React.createElement("div", { className: classnames("components-drawing-navigation-aid", this.props.className), "data-testid": "components-drawing-navigation-aid", ref: this._rootElement, onWheel: this._handleWheel, onMouseDown: this._handleDrawingMouseDown, style: rootStyle, role: "presentation" },
             React.createElement(DrawingNavigationCanvas, { view: this.state.view, viewManagerOverride: viewManager, screenViewportOverride: screenViewport, viewId: viewId, origin: map.plus(offset).minus(mapOffset), extents: e, zoom: dz, rotation: rotateMinimapWithView || is3D ? rotation : Matrix3d.createIdentity() }),
             React.createElement("div", { className: "drawing-container", "data-testid": "drawing-container", ref: this._viewContainerElement },
                 React.createElement("div", { className: "drawing-view-window", "data-testid": "drawing-view-window", onMouseDown: this._handleWindowMouseDown, onTouchStart: this._handleWindowTouchStart, style: viewWindowStyle, ref: this._viewElement, role: "presentation" }),
-                !is3D &&
-                    React.createElement("div", { className: classnames("toggle-rotate-style", "icon", { checked: rotateMinimapWithView }), "data-testid": "toggle-rotate-style", style: mode === MapMode.Closed && !isAnimating ? { bottom: 2, left: 2 } : {}, title: UiIModelComponents.translate("drawing.rotateStyle"), onClick: this._toggleRotationMode, role: "presentation" },
-                        React.createElement(Icon, { iconSpec: React.createElement(SvgRotateLeft, null) })),
-                !rot.isIdentity &&
-                    React.createElement("div", { className: "unrotate-button", "data-testid": "drawing-unrotate-button", style: mode === MapMode.Closed && !isAnimating ? { top: 2 } : {}, onClick: this._handleUnrotate, role: "button", tabIndex: -1 }, unrotateLabel),
-                mode === MapMode.Opened && !isAnimating && React.createElement(React.Fragment, null,
+                !is3D && (React.createElement("div", { className: classnames("toggle-rotate-style", "icon", {
+                        checked: rotateMinimapWithView,
+                    }), "data-testid": "toggle-rotate-style", style: mode === MapMode.Closed && !isAnimating
+                        ? { bottom: 2, left: 2 }
+                        : {}, title: UiIModelComponents.translate("drawing.rotateStyle"), onClick: this._toggleRotationMode, role: "presentation" },
+                    React.createElement(Icon, { iconSpec: React.createElement(SvgRotateLeft, null) }))),
+                !rot.isIdentity && (React.createElement("div", { className: "unrotate-button", "data-testid": "drawing-unrotate-button", style: mode === MapMode.Closed && !isAnimating ? { top: 2 } : {}, onClick: this._handleUnrotate, role: "button", tabIndex: -1 }, unrotateLabel)),
+                mode === MapMode.Opened && !isAnimating && (React.createElement(React.Fragment, null,
                     React.createElement("div", { className: "close", "data-testid": "drawing-close-button", onClick: this._closeLargeMap, role: "button", tabIndex: -1 },
                         React.createElement("div", { className: "close-icon icon" },
                             React.createElement(Icon, { iconSpec: React.createElement(SvgSortUp, null) }))),
@@ -449,8 +532,9 @@ class DrawingNavigationAid extends React.Component {
                         React.createElement("div", { className: "zoom-button icon", "data-testid": "drawing-zoom-in-button", onClick: this._handleZoomIn, role: "button", tabIndex: -1 },
                             React.createElement(Icon, { iconSpec: React.createElement(SvgAdd, null) })),
                         React.createElement("div", { className: "zoom-button icon", "data-testid": "drawing-zoom-out-button", onClick: this._handleZoomOut, role: "button", tabIndex: -1 },
-                            React.createElement(Icon, { iconSpec: React.createElement(SvgRemove, null) })))))));
-        if (mode === MapMode.Closed && (animation === 1.0 || startMapExtents.isExactEqual(mapExtents))) {
+                            React.createElement(Icon, { iconSpec: React.createElement(SvgRemove, null) }))))))));
+        if (mode === MapMode.Closed &&
+            (animation === 1.0 || startMapExtents.isExactEqual(mapExtents))) {
             return nodes;
         }
         else {
@@ -488,7 +572,9 @@ class DrawingNavigationAid extends React.Component {
     }
     _processWindowDrag(movement) {
         const vect = Vector3d.create(movement.x / this.state.drawingZoom, -movement.y / this.state.drawingZoom, 0);
-        const offset = this.state.rotateMinimapWithView || this._isViewport3D() ? this.state.rotation.multiplyTransposeVector(vect) : vect;
+        const offset = this.state.rotateMinimapWithView || this._isViewport3D()
+            ? this.state.rotation.multiplyTransposeVector(vect)
+            : vect;
         const origin = this.state.origin.plus(offset);
         const panningDirection = this._getPanVector();
         const wasAlmostZero = this.state.panningDirection.isAlmostZero;
@@ -516,7 +602,7 @@ class DrawingNavigationAid extends React.Component {
         }
     }
 }
-DrawingNavigationAid._animationFn = (t) => t < .5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
+DrawingNavigationAid._animationFn = (t) => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
 /** @internal */
 DrawingNavigationAid.getDefaultClosedMapSize = () => {
     return Vector3d.create(96, 96);
@@ -574,9 +660,13 @@ export class DrawingNavigationCanvas extends React.Component {
     }
     componentDidMount() {
         if (this._canvasElement.current && this.props.view !== undefined) {
-            const viewManager = this.props.viewManagerOverride ? this.props.viewManagerOverride : /* istanbul ignore next */ IModelApp.viewManager;
+            const viewManager = this.props.viewManagerOverride
+                ? this.props.viewManagerOverride
+                : /* istanbul ignore next */ IModelApp.viewManager;
             /* istanbul ignore next */
-            const screenViewport = this.props.screenViewportOverride ? this.props.screenViewportOverride : /* istanbul ignore next */ ScreenViewport;
+            const screenViewport = this.props.screenViewportOverride
+                ? this.props.screenViewportOverride
+                : /* istanbul ignore next */ ScreenViewport;
             const previousView = viewManager.selectedView;
             this._vp = screenViewport.create(this._canvasElement.current, this.props.view);
             this.customizeViewport(this._vp);
@@ -594,17 +684,27 @@ export class DrawingNavigationCanvas extends React.Component {
             vp.viewFlags = vp.viewFlags.with("acsTriad", false);
     }
     componentDidUpdate(oldProps) {
-        const viewManager = this.props.viewManagerOverride ? this.props.viewManagerOverride : /* istanbul ignore next */ IModelApp.viewManager;
+        const viewManager = this.props.viewManagerOverride
+            ? this.props.viewManagerOverride
+            : /* istanbul ignore next */ IModelApp.viewManager;
         if (this.props.view !== undefined) {
             if (oldProps.view !== this.props.view) {
-                const screenViewport = this.props.screenViewportOverride ? this.props.screenViewportOverride : /* istanbul ignore next */ ScreenViewport;
-                if (oldProps !== undefined && oldProps.viewId !== "" && oldProps.viewId !== this.props.viewId && this._vp) {
+                const screenViewport = this.props.screenViewportOverride
+                    ? this.props.screenViewportOverride
+                    : /* istanbul ignore next */ ScreenViewport;
+                if (oldProps !== undefined &&
+                    oldProps.viewId !== "" &&
+                    oldProps.viewId !== this.props.viewId &&
+                    this._vp) {
                     viewManager.dropViewport(this._vp, true);
                 }
                 // istanbul ignore else
                 if (this._canvasElement.current &&
                     (this.props.canvasSizeOverride ||
-                        ( /* istanbul ignore next */this._canvasElement.current.clientWidth !== 0 && /* istanbul ignore next */ this._canvasElement.current.clientHeight !== 0))) {
+                        /* istanbul ignore next */ (this._canvasElement.current
+                            .clientWidth !== 0 &&
+                            /* istanbul ignore next */ this._canvasElement.current
+                                .clientHeight !== 0))) {
                     const previousView = viewManager.selectedView;
                     this._vp = screenViewport.create(this._canvasElement.current, this.props.view.clone());
                     this.customizeViewport(this._vp);
@@ -613,14 +713,19 @@ export class DrawingNavigationCanvas extends React.Component {
                     this._update();
                 }
             }
-            else if (!this.props.origin.isExactEqual(oldProps.origin) || !this.props.extents.isExactEqual(oldProps.extents) || this.props.zoom !== oldProps.zoom || !this.props.rotation.isExactEqual(oldProps.rotation)) {
+            else if (!this.props.origin.isExactEqual(oldProps.origin) ||
+                !this.props.extents.isExactEqual(oldProps.extents) ||
+                this.props.zoom !== oldProps.zoom ||
+                !this.props.rotation.isExactEqual(oldProps.rotation)) {
                 this._update();
             }
         }
     }
     componentWillUnmount() {
         if (this._vp) {
-            const viewManager = this.props.viewManagerOverride ? this.props.viewManagerOverride : /* istanbul ignore next */ IModelApp.viewManager;
+            const viewManager = this.props.viewManagerOverride
+                ? this.props.viewManagerOverride
+                : /* istanbul ignore next */ IModelApp.viewManager;
             viewManager.dropViewport(this._vp, true);
         }
     }