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

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

@@ -0,0 +1,621 @@
+/*---------------------------------------------------------------------------------------------
+* 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 "./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 { IModelApp, ScreenViewport } from "@itwin/core-frontend";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { ViewportComponentEvents } from "../viewport/ViewportComponentEvents";
+// cSpell:ignore Quaternion Quaternions unrotate
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/**
+ * Enum for mode that minimap is currently in
+ * @internal
+ */
+export var MapMode;
+(function (MapMode) {
+    MapMode["Opened"] = "map-opened";
+    MapMode["Closed"] = "map-closed";
+})(MapMode || (MapMode = {}));
+/**
+ * A Drawing Navigation Aid.
+ * @public
+ */
+export class DrawingNavigationAid extends React.Component {
+    constructor(props) {
+        super(props);
+        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._mounted = false;
+        this._isViewport3D = () => {
+            return this.state.view !== undefined && this.state.view.is3d();
+        };
+        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)));
+                this._updateFrustum();
+                // istanbul ignore next
+                if (this._mounted) {
+                    this.setState({ animation }, () => {
+                        this._animationFrame = setTimeout(this._animation, 16.667);
+                    });
+                }
+            }
+            else {
+                this._lastTime = undefined;
+                this._animationEnd();
+            }
+        };
+        this._animationEnd = () => {
+            const hasViewportMoved = !this.state.origin.isAlmostEqual(this.state.startOrigin) ||
+                !this.state.rotation.isAlmostEqual(this.state.startRotation);
+            const startMapOrigin = Point3d.createFrom(this.state.mapOrigin);
+            const startMapExtents = Vector3d.createFrom(this.state.mapExtents);
+            const startDrawingZoom = this.state.drawingZoom;
+            const startOrigin = this.state.origin;
+            const startRotation = this.state.rotation;
+            // istanbul ignore next
+            if (this._mounted) {
+                this.setState({ startMapOrigin, startDrawingZoom, startOrigin, startRotation, startMapExtents }, () => {
+                    // istanbul ignore else
+                    if (this.props.onAnimationEnd)
+                        this.props.onAnimationEnd();
+                    if (hasViewportMoved)
+                        this._updateFrustum(true);
+                });
+            }
+        };
+        this._panAnimation = () => {
+            const t = Date.now();
+            if (this._lastPanTime === undefined)
+                this._lastPanTime = t - 16.667;
+            const delta = t - this._lastPanTime;
+            this._lastPanTime = t;
+            // istanbul ignore else
+            if (!this.state.panningDirection.isAlmostZero && this.state.isMoving) {
+                const { panningDirection } = this.state;
+                const offset = panningDirection.scale(delta / 1000 / this.state.drawingZoom);
+                const mapOrigin = this.state.mapOrigin.plus(offset);
+                const origin = this.state.origin.plus(offset);
+                this._updateFrustum();
+                // istanbul ignore next
+                if (this._mounted) {
+                    this.setState({ mapOrigin, origin, panningDirection }, () => {
+                        this._animationFrame = setTimeout(this._panAnimation, 16.667);
+                    });
+                }
+            }
+            else {
+                this._lastPanTime = undefined;
+                this._updateFrustum(true);
+            }
+        };
+        // 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) {
+                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 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);
+                const deltaOrigin = origin.minus(this.state.origin);
+                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 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() });
+                }
+                // istanbul ignore next
+                if (this._mounted) {
+                    this.setState({
+                        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 origin = this.state.origin.minus(offset);
+            ViewportComponentEvents.setDrawingViewportState(origin, this.state.rotation, complete);
+        };
+        this._toggleRotationMode = () => {
+            const rotateMinimapWithView = !this.state.rotateMinimapWithView;
+            this.setState({ rotateMinimapWithView }, () => {
+                if (this._viewport)
+                    this._handleViewRotationChangeEvent({ viewport: this._viewport });
+            });
+        };
+        this._handleKeyUp = (event) => {
+            // istanbul ignore else
+            if (event.key === SpecialKey.Escape && this.state.mode === MapMode.Opened) {
+                this._closeLargeMap();
+            }
+        };
+        this._lastClientXY = Point2d.createZero();
+        this._handleMouseDown = (event) => {
+            // Used only to determine if mouse was moved between mousedown and mouseup
+            const mouseStart = Point2d.create(event.clientX, event.clientY);
+            this.setState({ mouseStart });
+            this._lastClientXY = Point2d.create(event.clientX, event.clientY);
+        };
+        this._handleDrawingMouseDown = (event) => {
+            if (this.state.mode === MapMode.Opened) {
+                event.preventDefault();
+                this.setState({ isPanning: true });
+            }
+        };
+        this._handleWindowMouseDown = (event) => {
+            event.preventDefault();
+            this.setState({ isMoving: true });
+        };
+        this._handleMouseDrag = (event) => {
+            const mouse = Point2d.create(event.clientX, event.clientY);
+            const movement = mouse.minus(this._lastClientXY);
+            if (this.state.isMoving) {
+                // add scaled mouse movement
+                this._processWindowDrag(movement);
+            }
+            else {
+                // 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 mapOrigin = this.state.mapOrigin.minus(offset);
+                    this.setState({ startMapOrigin: mapOrigin, mapOrigin });
+                }
+            }
+            this._lastClientXY = mouse;
+        };
+        this._handleMouseDragEnd = (event) => {
+            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)) {
+                this._openLargeMap();
+            }
+            else if (this.state.isMoving) {
+                this._processWindowEndDrag();
+            }
+            else if (this.state.isPanning) {
+                // istanbul ignore else
+                if (this.state.mode === MapMode.Opened) {
+                    event.stopPropagation();
+                    this.setState({ isPanning: false });
+                }
+            }
+            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);
+        };
+        // istanbul ignore next - unable to test touch
+        this._handleWindowTouchStart = (event) => {
+            if (1 !== event.targetTouches.length)
+                return;
+            window.addEventListener("touchmove", this._onTouchMove, false);
+            window.addEventListener("touchend", this._onTouchEnd, false);
+            const mouseStart = Point2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            this.setState({ mouseStart });
+            this._lastClientXY = mouseStart.clone();
+            this.setState({ isMoving: true });
+        };
+        // istanbul ignore next - unable to test touch
+        this._onTouchMove = (event) => {
+            if (1 !== event.targetTouches.length)
+                return;
+            const mouse = Point2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
+            const movement = mouse.minus(this._lastClientXY);
+            // add scaled mouse movement
+            this._processWindowDrag(movement);
+            this._lastClientXY = mouse;
+        };
+        // istanbul ignore next - unable to test touch
+        this._onTouchEnd = (event) => {
+            if (0 !== event.targetTouches.length)
+                return;
+            this._processWindowEndDrag();
+            if (0 !== event.changedTouches.length)
+                this._lastClientXY = Point2d.create(event.changedTouches[0].clientX, event.changedTouches[0].clientY); // Doesn't seem necessary...but _handleMouseDragEnd sets it...
+            window.removeEventListener("touchmove", this._onTouchMove);
+            window.removeEventListener("touchend", this._onTouchEnd);
+        };
+        this._getClosedMapSize = () => {
+            if (this.props.closeSize === undefined)
+                return DrawingNavigationAid.getDefaultClosedMapSize();
+            return this.props.closeSize;
+        };
+        this._getOpenedMapSize = () => {
+            if (this.props.openSize === undefined)
+                return DrawingNavigationAid.getDefaultOpenedMapSize(this._rootOffset.right, this._rootOffset.top);
+            return this.props.openSize;
+        };
+        this._openLargeMap = () => {
+            // istanbul ignore else
+            if (this.state.mode === MapMode.Closed && this.state.animation === 1.0) {
+                // istanbul ignore else
+                if (this._rootElement.current) {
+                    const rect = this._rootElement.current.getBoundingClientRect();
+                    this._rootOffset = rect;
+                }
+                const startMapExtents = Vector3d.createFrom(this.state.mapExtents);
+                const mapExtents = this._getOpenedMapSize();
+                this.setState({
+                    mode: MapMode.Opened,
+                    isMoving: false, isPanning: false,
+                    mapExtents, startMapExtents,
+                    animation: 0,
+                }, () => {
+                    this._animationFrame = setTimeout(this._animation);
+                });
+            }
+        };
+        this._closeLargeMap = () => {
+            // istanbul ignore else
+            if (this.state.mode === MapMode.Opened && this.state.animation === 1.0) {
+                const startMapOrigin = this.state.mapOrigin;
+                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 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,
+                    panningDirection: Vector3d.createZero(),
+                    animation: 0,
+                }, () => {
+                    this._animationFrame = setTimeout(this._animation, 16.667);
+                });
+            }
+        };
+        this._getPanVector = () => {
+            const is3D = this._isViewport3D();
+            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;
+            // 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 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
+        };
+        this._handleWheel = (event) => {
+            // istanbul ignore else
+            if (this.state.mode === MapMode.Opened && this.state.animation === 1) {
+                const { mapOrigin, drawingZoom } = this.state;
+                const mapSize = this._getOpenedMapSize();
+                const mouseX = event.clientX - this._rootOffset.right + mapSize.x / 2;
+                const mouseY = event.clientY - this._rootOffset.top - mapSize.y / 2;
+                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 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 m = mapOrigin.minus(offset);
+                    this.setState({ mapOrigin: m, drawingZoom: zoom });
+                }
+            }
+        };
+        this._handleZoomIn = () => {
+            const zoom = this.state.drawingZoom * 1.4;
+            this.setState({ drawingZoom: zoom });
+        };
+        this._handleZoomOut = () => {
+            const zoom = this.state.drawingZoom / 1.4;
+            this.setState({ drawingZoom: zoom });
+        };
+        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 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._animationFrame = setTimeout(this._animation, 16.667);
+            });
+        };
+        const mode = props.initialMapMode || MapMode.Closed;
+        const mapExtents = mode === MapMode.Closed ? this._getClosedMapSize() : this._getOpenedMapSize();
+        const startMapExtents = mapExtents;
+        this.state = {
+            startOrigin: Point3d.createZero(),
+            origin: Point3d.createZero(),
+            extents: Vector3d.create(1, 1, 1),
+            startRotation: Matrix3d.createIdentity(),
+            rotation: Matrix3d.createIdentity(),
+            startMapOrigin: Point3d.createZero(),
+            mapOrigin: Point3d.createZero(),
+            startMapExtents,
+            mapExtents,
+            mouseStart: Point2d.createZero(),
+            panningDirection: Vector3d.createZero(),
+            startDrawingZoom: 1.0,
+            drawingZoom: 1.0,
+            mode,
+            animation: 1.0,
+            viewId: props.initialView !== undefined ? props.initialView.id : "",
+            view: props.initialView,
+            isMoving: false,
+            isPanning: false,
+            rotateMinimapWithView: props.initialRotateMinimapWithView !== undefined ? props.initialRotateMinimapWithView : false,
+        };
+    }
+    /** @internal */
+    render() {
+        const { startOrigin, origin, extents, startRotation, rotation, startMapOrigin, mapOrigin, startMapExtents, mapExtents, startDrawingZoom, drawingZoom, animation, viewId, mode, rotateMinimapWithView, } = this.state;
+        const a = DrawingNavigationAid._animationFn(animation);
+        const rot = Matrix3d.createFromQuaternion(Point4d.interpolateQuaternions(startRotation.toQuaternion(), a, rotation.toQuaternion()));
+        const or = startOrigin.interpolate(a, origin);
+        const map = startMapOrigin.interpolate(a, mapOrigin);
+        const sz = startMapExtents.interpolate(a, mapExtents);
+        const dz = Geometry.interpolate(startDrawingZoom, a, drawingZoom);
+        const rootStyle = {
+            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 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 = {
+            transform: `translate(${tPosX}px, ${tPosY}px)`,
+            height: extents.y * dz,
+            width: extents.x * dz,
+        };
+        if (!rotateMinimapWithView && !is3D)
+            viewWindowStyle.transform =
+                "matrix3d(" +
+                    `${rot.at(0, 0)}, ${rot.at(1, 0)}, ${rot.at(2, 0)}, 0, ` +
+                    `${rot.at(0, 1)}, ${rot.at(1, 1)}, ${rot.at(2, 1)}, 0, ` +
+                    `${rot.at(0, 2)}, ${rot.at(1, 2)}, ${rot.at(2, 2)}, 0, ` +
+                    `${tPosX}, ${tPosY}, 0, 1)`;
+        const isAnimating = animation !== 1 && !startMapExtents.isExactEqual(mapExtents);
+        if (mode === MapMode.Opened || isAnimating) {
+            rootStyle.position = "fixed";
+            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 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 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", "icon-rotate-left", { 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" }),
+                !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 icon-sort-up" })),
+                    React.createElement("div", { className: "zoom" },
+                        React.createElement("div", { className: "zoom-button icon icon-add", "data-testid": "drawing-zoom-in-button", onClick: this._handleZoomIn, role: "button", tabIndex: -1 }),
+                        React.createElement("div", { className: "zoom-button icon icon-remove-2", "data-testid": "drawing-zoom-out-button", onClick: this._handleZoomOut, role: "button", tabIndex: -1 }))))));
+        if (mode === MapMode.Closed && (animation === 1.0 || startMapExtents.isExactEqual(mapExtents))) {
+            return nodes;
+        }
+        else {
+            let drawingPortal = document.querySelector("#components-drawing-portal");
+            if (!drawingPortal) {
+                drawingPortal = document.createElement("div");
+                drawingPortal.id = "components-drawing-portal";
+                document.body.appendChild(drawingPortal);
+            }
+            return ReactDOM.createPortal(nodes, drawingPortal);
+        }
+    }
+    componentDidMount() {
+        this._mounted = true;
+        ViewportComponentEvents.onViewRotationChangeEvent.addListener(this._handleViewRotationChangeEvent);
+        window.addEventListener("mousedown", this._handleMouseDown);
+        window.addEventListener("mouseup", this._handleMouseDragEnd);
+        window.addEventListener("mousemove", this._handleMouseDrag);
+        window.addEventListener("keyup", this._handleKeyUp);
+    }
+    componentWillUnmount() {
+        ViewportComponentEvents.onViewRotationChangeEvent.removeListener(this._handleViewRotationChangeEvent);
+        window.removeEventListener("mousedown", this._handleMouseDown);
+        window.removeEventListener("mouseup", this._handleMouseDragEnd);
+        window.removeEventListener("mousemove", this._handleMouseDrag);
+        window.removeEventListener("keyup", this._handleKeyUp);
+        clearTimeout(this._animationFrame);
+        if (this.props.onAnimationEnd)
+            this.props.onAnimationEnd();
+        const rt = document.getElementById("components-drawing-portal");
+        if (rt && rt.parentElement !== null && rt.children.length === 0) {
+            rt.parentElement.removeChild(rt);
+        }
+        this._mounted = false;
+    }
+    _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 origin = this.state.origin.plus(offset);
+        const panningDirection = this._getPanVector();
+        const wasAlmostZero = this.state.panningDirection.isAlmostZero;
+        this.setState({ startOrigin: origin, origin, panningDirection, isPanning: false }, () => {
+            this._updateFrustum();
+            if (wasAlmostZero && !this.state.panningDirection.isAlmostZero) {
+                this._animationFrame = setTimeout(this._panAnimation, 16.667);
+            }
+        });
+    }
+    _processWindowEndDrag() {
+        this.setState({ isMoving: false });
+        this._updateFrustum(true);
+        if (this.state.mode === MapMode.Closed) {
+            setTimeout(() => {
+                const startMapOrigin = this.state.mapOrigin;
+                const mapOrigin = this.state.origin.clone();
+                // istanbul ignore next
+                if (this._mounted) {
+                    this.setState({ startMapOrigin, mapOrigin, animation: 0 }, () => {
+                        this._animationFrame = setTimeout(this._animation, 16.667);
+                    });
+                }
+            }, 0);
+        }
+    }
+}
+DrawingNavigationAid._animationFn = (t) => t < .5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
+/** @internal */
+DrawingNavigationAid.getDefaultClosedMapSize = () => {
+    return Vector3d.create(96, 96);
+};
+/** @internal */
+DrawingNavigationAid.getDefaultOpenedMapSize = (paddingX = 0, paddingY = 0) => {
+    return Vector3d.create(window.innerWidth / 3 - 2 * (window.innerWidth - paddingX), window.innerHeight / 3 - 2 * paddingY);
+};
+/** @internal */
+DrawingNavigationAid.findRotatedWindowDimensions = (extents, rotation) => {
+    const cos = rotation.at(0, 0);
+    const sin = rotation.at(1, 0);
+    // extents.x/y should be divided in half, but we don't have to do that immediately.
+    const cosWidth = cos * extents.x;
+    const sinHeight = sin * extents.y;
+    const sinWidth = cos * extents.x;
+    const cosHeight = sin * extents.y;
+    const a = Math.atan2(sin, cos);
+    if (a % Math.PI >= 0 && a % Math.PI < Math.PI / 2) {
+        const y1 = -cosHeight - sinWidth;
+        const x2 = cosWidth + sinHeight;
+        const y3 = cosHeight + sinWidth;
+        const x4 = -cosWidth - sinHeight;
+        // Instead, divide total difference
+        return Vector3d.create(Math.abs(x2 - x4) / 2, Math.abs(y1 - y3) / 2);
+    }
+    else {
+        const x1 = -cosWidth + sinHeight;
+        const y2 = -cosHeight + sinWidth;
+        const x3 = cosWidth - sinHeight;
+        const y4 = cosHeight - sinWidth;
+        return Vector3d.create(Math.abs(x1 - x3) / 2, Math.abs(y2 - y4) / 2);
+    }
+};
+/** @internal */
+export class DrawingNavigationCanvas extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._canvasElement = React.createRef();
+        this._update = () => {
+            // istanbul ignore else
+            if (this._vp) {
+                const max = Math.max(this.props.extents.x, this.props.extents.y);
+                this._vp.view.extentLimits = { max, min: Constant.oneMillimeter };
+                this._vp.view.setOrigin(this.props.origin);
+                this._vp.view.setRotation(this.props.rotation);
+                this._vp.view.setExtents(this.props.extents);
+                this._vp.applyViewState(this._vp.view);
+            }
+        };
+    }
+    render() {
+        return (React.createElement("div", { className: "drawing-canvas", "data-testid": "drawing-canvas", ref: this._canvasElement }));
+    }
+    componentDidMount() {
+        if (this._canvasElement.current && this.props.view !== undefined) {
+            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 previousView = viewManager.selectedView;
+            this._vp = screenViewport.create(this._canvasElement.current, this.props.view);
+            this.customizeViewport(this._vp);
+            viewManager.addViewport(this._vp);
+            void viewManager.setSelectedView(previousView); // switch to original viewport
+            this._update();
+        }
+    }
+    customizeViewport(vp) {
+        /* istanbul ignore next */
+        if (vp.logo.style)
+            vp.logo.style.display = "none";
+        /* istanbul ignore next */
+        if (vp.viewFlags.acsTriad)
+            vp.viewFlags = vp.viewFlags.with("acsTriad", false);
+    }
+    componentDidUpdate(oldProps) {
+        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) {
+                    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))) {
+                    const previousView = viewManager.selectedView;
+                    this._vp = screenViewport.create(this._canvasElement.current, this.props.view.clone());
+                    this.customizeViewport(this._vp);
+                    viewManager.addViewport(this._vp);
+                    void viewManager.setSelectedView(previousView); // switch to original viewport
+                    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)) {
+                this._update();
+            }
+        }
+    }
+    componentWillUnmount() {
+        if (this._vp) {
+            const viewManager = this.props.viewManagerOverride ? this.props.viewManagerOverride : /* istanbul ignore next */ IModelApp.viewManager;
+            viewManager.dropViewport(this._vp, true);
+        }
+    }
+}
+//# sourceMappingURL=DrawingNavigationAid.js.map