@itwin/imodel-components-react 4.17.6 → 5.0.0-dev.3

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

@@ -1,736 +0,0 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module NavigationAids
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawingNavigationCanvas = exports.DrawingNavigationAid = exports.MapMode = void 0;
-require("./DrawingNavigationAid.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const ReactDOM = __importStar(require("react-dom"));
-const ts_key_enum_1 = require("ts-key-enum");
-const core_geometry_1 = require("@itwin/core-geometry");
-const core_frontend_1 = require("@itwin/core-frontend");
-const core_react_1 = require("@itwin/core-react");
-const UiIModelComponents_1 = require("../UiIModelComponents");
-const ViewportComponentEvents_1 = require("../viewport/ViewportComponentEvents");
-const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
-// cSpell:ignore Quaternion Quaternions unrotate
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/**
- * Enum for mode that minimap is currently in
- * @internal
- */
-var MapMode;
-(function (MapMode) {
-    MapMode["Opened"] = "map-opened";
-    MapMode["Closed"] = "map-closed";
-})(MapMode || (exports.MapMode = MapMode = {}));
-/** A Drawing Navigation Aid.
- * @public
- */
-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();
-                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 = core_geometry_1.Point3d.createFrom(this.state.mapOrigin);
-            const startMapExtents = core_geometry_1.Vector3d.createFrom(this.state.mapExtents);
-            const startDrawingZoom = this.state.drawingZoom;
-            const startOrigin = this.state.origin;
-            const startRotation = this.state.rotation;
-            if (this._mounted) {
-                this.setState({
-                    startMapOrigin,
-                    startDrawingZoom,
-                    startOrigin,
-                    startRotation,
-                    startMapExtents,
-                }, () => {
-                    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;
-            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();
-                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) => {
-            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(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);
-                const deltaOrigin = origin.minus(this.state.origin);
-                let mapOrigin = this.state.mapOrigin.plus(deltaOrigin);
-                mapOrigin = mapOrigin.plus(core_geometry_1.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(),
-                    });
-                }
-                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(0.5);
-            const offset = this.state.rotateMinimapWithView || this._isViewport3D()
-                ? this.state.rotation.multiplyTransposeVector(halfExtents)
-                : halfExtents;
-            const origin = this.state.origin.minus(offset);
-            ViewportComponentEvents_1.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) => {
-            if (event.key === ts_key_enum_1.Key.Escape.valueOf() &&
-                this.state.mode === MapMode.Opened) {
-                this._closeLargeMap();
-            }
-        };
-        this._lastClientXY = core_geometry_1.Point2d.createZero();
-        this._handleMouseDown = (event) => {
-            // Used only to determine if mouse was moved between mousedown and mouseup
-            const mouseStart = core_geometry_1.Point2d.create(event.clientX, event.clientY);
-            this.setState({ mouseStart });
-            this._lastClientXY = core_geometry_1.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 = core_geometry_1.Point2d.create(event.clientX, event.clientY);
-            const movement = mouse.minus(this._lastClientXY);
-            if (this.state.isMoving) {
-                // add scaled mouse movement
-                this._processWindowDrag(movement);
-            }
-            else {
-                if (this.state.isPanning && this.state.mode === MapMode.Opened) {
-                    const vect = core_geometry_1.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 = core_geometry_1.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) {
-                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 = core_geometry_1.Point2d.create(event.clientX, event.clientY);
-        };
-        this._handleWindowTouchStart = (event) => {
-            if (1 !== event.targetTouches.length)
-                return;
-            window.addEventListener("touchmove", this._onTouchMove, false);
-            window.addEventListener("touchend", this._onTouchEnd, false);
-            const mouseStart = core_geometry_1.Point2d.create(event.targetTouches[0].clientX, event.targetTouches[0].clientY);
-            this.setState({ mouseStart });
-            this._lastClientXY = mouseStart.clone();
-            this.setState({ isMoving: true });
-        };
-        this._onTouchMove = (event) => {
-            if (1 !== event.targetTouches.length)
-                return;
-            const mouse = core_geometry_1.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;
-        };
-        this._onTouchEnd = (event) => {
-            if (0 !== event.targetTouches.length)
-                return;
-            this._processWindowEndDrag();
-            if (0 !== event.changedTouches.length)
-                this._lastClientXY = core_geometry_1.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 = () => {
-            if (this.state.mode === MapMode.Closed && this.state.animation === 1.0) {
-                if (this._rootElement.current) {
-                    const rect = this._rootElement.current.getBoundingClientRect();
-                    this._rootOffset = rect;
-                }
-                const startMapExtents = core_geometry_1.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 = () => {
-            if (this.state.mode === MapMode.Opened && this.state.animation === 1.0) {
-                const startMapOrigin = this.state.mapOrigin;
-                const mapOrigin = this.state.origin.clone();
-                const startMapExtents = core_geometry_1.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: core_geometry_1.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 = core_geometry_1.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 = core_geometry_1.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 core_geometry_1.Vector3d.createZero();
-            const magnitude = (Math.min(magnitudeVector.magnitude() * this.state.drawingZoom, magnitudeTravel) /
-                magnitudeTravel) *
-                maxMagnitude;
-            const vect = core_geometry_1.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) => {
-            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 = core_geometry_1.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 = core_geometry_1.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(0.5);
-            const offset = this.state.rotateMinimapWithView || this._isViewport3D()
-                ? core_geometry_1.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: core_geometry_1.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: core_geometry_1.Point3d.createZero(),
-            origin: core_geometry_1.Point3d.createZero(),
-            extents: core_geometry_1.Vector3d.create(1, 1, 1),
-            startRotation: core_geometry_1.Matrix3d.createIdentity(),
-            rotation: core_geometry_1.Matrix3d.createIdentity(),
-            startMapOrigin: core_geometry_1.Point3d.createZero(),
-            mapOrigin: core_geometry_1.Point3d.createZero(),
-            startMapExtents,
-            mapExtents,
-            mouseStart: core_geometry_1.Point2d.createZero(),
-            panningDirection: core_geometry_1.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,
-        };
-    }
-    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 = core_geometry_1.Matrix3d.createFromQuaternion(core_geometry_1.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 = core_geometry_1.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(core_geometry_1.Vector3d.createFrom(or))
-            : core_geometry_1.Vector3d.createFrom(or);
-        const tMap = rotateMinimapWithView || is3D
-            ? rotation.multiplyVector(core_geometry_1.Vector3d.createFrom(map))
-            : core_geometry_1.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(0.5);
-        const offset = rotateMinimapWithView || is3D
-            ? core_geometry_1.Vector3d.createZero()
-            : rotation.multiplyTransposeVector(halfExtents).minus(halfExtents);
-        const e = sz.scale(1 / dz);
-        const halfMapExtents = e.scale(0.5);
-        const mapOffset = rotateMinimapWithView || is3D
-            ? rotation.multiplyTransposeVector(halfMapExtents)
-            : halfMapExtents;
-        const viewManager = this.props.viewManagerOverride
-            ? this.props.viewManagerOverride
-            : core_frontend_1.IModelApp.viewManager;
-        const screenViewport = this.props.screenViewportOverride
-            ? this.props.screenViewportOverride
-            : core_frontend_1.ScreenViewport;
-        const nodes = (React.createElement("div", { className: (0, classnames_1.default)("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 : core_geometry_1.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: (0, classnames_1.default)("toggle-rotate-style", "icon", {
-                        checked: rotateMinimapWithView,
-                    }), "data-testid": "toggle-rotate-style", style: mode === MapMode.Closed && !isAnimating
-                        ? { bottom: 2, left: 2 }
-                        : {}, title: UiIModelComponents_1.UiIModelComponents.translate("drawing.rotateStyle"), onClick: this._toggleRotationMode, role: "presentation" },
-                    React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.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 }, UiIModelComponents_1.UiIModelComponents.translate("drawing.unrotate"))),
-                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(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgSortUp, null) }))),
-                    React.createElement("div", { className: "zoom" },
-                        React.createElement("div", { className: "zoom-button icon", "data-testid": "drawing-zoom-in-button", onClick: this._handleZoomIn, role: "button", tabIndex: -1 },
-                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgAdd, null) })),
-                        React.createElement("div", { className: "zoom-button icon", "data-testid": "drawing-zoom-out-button", onClick: this._handleZoomOut, role: "button", tabIndex: -1 },
-                            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgRemove, null) }))))))));
-        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_1.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_1.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 = core_geometry_1.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();
-                if (this._mounted) {
-                    this.setState({ startMapOrigin, mapOrigin, animation: 0 }, () => {
-                        this._animationFrame = setTimeout(this._animation, 16.667);
-                    });
-                }
-            }, 0);
-        }
-    }
-}
-exports.DrawingNavigationAid = DrawingNavigationAid;
-DrawingNavigationAid._animationFn = (t) => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
-/** @internal */
-DrawingNavigationAid.getDefaultClosedMapSize = () => {
-    return core_geometry_1.Vector3d.create(96, 96);
-};
-/** @internal */
-DrawingNavigationAid.getDefaultOpenedMapSize = (paddingX = 0, paddingY = 0) => {
-    return core_geometry_1.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 core_geometry_1.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 core_geometry_1.Vector3d.create(Math.abs(x1 - x3) / 2, Math.abs(y2 - y4) / 2);
-    }
-};
-/** @internal */
-class DrawingNavigationCanvas extends React.Component {
-    constructor() {
-        super(...arguments);
-        this._canvasElement = React.createRef();
-        this._update = () => {
-            if (this._vp) {
-                const max = Math.max(this.props.extents.x, this.props.extents.y);
-                this._vp.view.extentLimits = { max, min: core_geometry_1.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
-                : core_frontend_1.IModelApp.viewManager;
-            const screenViewport = this.props.screenViewportOverride
-                ? this.props.screenViewportOverride
-                : core_frontend_1.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) {
-        if (vp.logo.style)
-            vp.logo.style.display = "none";
-        if (vp.viewFlags.acsTriad)
-            vp.viewFlags = vp.viewFlags.with("acsTriad", false);
-    }
-    componentDidUpdate(oldProps) {
-        const viewManager = this.props.viewManagerOverride
-            ? this.props.viewManagerOverride
-            : core_frontend_1.IModelApp.viewManager;
-        if (this.props.view !== undefined) {
-            if (oldProps.view !== this.props.view) {
-                const screenViewport = this.props.screenViewportOverride
-                    ? this.props.screenViewportOverride
-                    : core_frontend_1.ScreenViewport;
-                if (oldProps !== undefined &&
-                    oldProps.viewId !== "" &&
-                    oldProps.viewId !== this.props.viewId &&
-                    this._vp) {
-                    viewManager.dropViewport(this._vp, true);
-                }
-                if (this._canvasElement.current &&
-                    (this.props.canvasSizeOverride ||
-                        (this._canvasElement.current.clientWidth !== 0 &&
-                            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
-                : core_frontend_1.IModelApp.viewManager;
-            viewManager.dropViewport(this._vp, true);
-        }
-    }
-}
-exports.DrawingNavigationCanvas = DrawingNavigationCanvas;
-//# sourceMappingURL=DrawingNavigationAid.js.map