@itwin/imodel-components-react 5.18.0 → 5.20.0

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

@@ -30,384 +30,21 @@ export var MapMode;
  * @public
  */
 export class DrawingNavigationAid extends React.Component {
+    _rootElement = React.createRef();
+    _viewContainerElement = React.createRef();
+    _viewElement = React.createRef();
+    _rootOffset = DOMRect.fromRect({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    _viewport;
+    _animationFrame;
+    _mounted = false;
+    state;
     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 = 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;
-            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(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.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 === Key.Escape.valueOf() &&
-                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 {
-                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) {
-                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);
-        };
-        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 });
-        };
-        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;
-        };
-        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 = () => {
-            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 = 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 = 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) => {
-            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(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._animationFrame = setTimeout(this._animation, 16.667);
-            });
-        };
         const mode = props.initialMapMode || MapMode.Closed;
         const mapExtents = mode === MapMode.Closed
             ? this._getClosedMapSize()
@@ -527,6 +164,77 @@ export class DrawingNavigationAid extends React.Component {
             return ReactDOM.createPortal(nodes, drawingPortal);
         }
     }
+    _isViewport3D = () => {
+        return this.state.view !== undefined && this.state.view.is3d();
+    };
+    _lastTime;
+    static _animationFn = (t) => t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t;
+    _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();
+        }
+    };
+    _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;
+        if (this._mounted) {
+            this.setState({
+                startMapOrigin,
+                startDrawingZoom,
+                startOrigin,
+                startRotation,
+                startMapExtents,
+            }, () => {
+                if (this.props.onAnimationEnd)
+                    this.props.onAnimationEnd();
+                if (hasViewportMoved)
+                    this._updateFrustum(true);
+            });
+        }
+    };
+    _lastPanTime;
+    _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);
+        }
+    };
     componentDidMount() {
         this._mounted = true;
         ViewportComponentEvents.onViewRotationChangeEvent.addListener(this._handleViewRotationChangeEvent);
@@ -550,6 +258,74 @@ export class DrawingNavigationAid extends React.Component {
         }
         this._mounted = false;
     }
+    // Synchronize with rotation coming from the Viewport
+    _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(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,
+                });
+            }
+        }
+    };
+    _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.setDrawingViewportState(origin, this.state.rotation, complete);
+    };
+    _toggleRotationMode = () => {
+        const rotateMinimapWithView = !this.state.rotateMinimapWithView;
+        this.setState({ rotateMinimapWithView }, () => {
+            if (this._viewport)
+                this._handleViewRotationChangeEvent({ viewport: this._viewport });
+        });
+    };
+    _handleKeyUp = (event) => {
+        if (event.key === Key.Escape.valueOf() &&
+            this.state.mode === MapMode.Opened) {
+            this._closeLargeMap();
+        }
+    };
+    _lastClientXY = Point2d.createZero();
     _processWindowDrag(movement) {
         const vect = Vector3d.create(movement.x / this.state.drawingZoom, -movement.y / this.state.drawingZoom, 0);
         const offset = this.state.rotateMinimapWithView || this._isViewport3D()
@@ -580,58 +356,275 @@ export class DrawingNavigationAid extends React.Component {
             }, 0);
         }
     }
+    _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);
+    };
+    _handleDrawingMouseDown = (event) => {
+        if (this.state.mode === MapMode.Opened) {
+            event.preventDefault();
+            this.setState({ isPanning: true });
+        }
+    };
+    _handleWindowMouseDown = (event) => {
+        event.preventDefault();
+        this.setState({ isMoving: true });
+    };
+    _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 {
+            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;
+    };
+    _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) {
+            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);
+    };
+    _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 });
+    };
+    _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;
+    };
+    _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);
+    };
+    /** @internal */
+    static getDefaultClosedMapSize = () => {
+        return Vector3d.create(96, 96);
+    };
+    /** @internal */
+    static getDefaultOpenedMapSize = (paddingX = 0, paddingY = 0) => {
+        return Vector3d.create(window.innerWidth / 3 - 2 * (window.innerWidth - paddingX), window.innerHeight / 3 - 2 * paddingY);
+    };
+    _getClosedMapSize = () => {
+        if (this.props.closeSize === undefined)
+            return DrawingNavigationAid.getDefaultClosedMapSize();
+        return this.props.closeSize;
+    };
+    _getOpenedMapSize = () => {
+        if (this.props.openSize === undefined)
+            return DrawingNavigationAid.getDefaultOpenedMapSize(this._rootOffset.right, this._rootOffset.top);
+        return this.props.openSize;
+    };
+    _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 = 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);
+            });
+        }
+    };
+    _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 = 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);
+            });
+        }
+    };
+    _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
+    };
+    _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 = 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 });
+            }
+        }
+    };
+    _handleZoomIn = () => {
+        const zoom = this.state.drawingZoom * 1.4;
+        this.setState({ drawingZoom: zoom });
+    };
+    _handleZoomOut = () => {
+        const zoom = this.state.drawingZoom / 1.4;
+        this.setState({ drawingZoom: zoom });
+    };
+    _handleUnrotate = () => {
+        const startRotation = this.state.rotation;
+        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._animationFrame = setTimeout(this._animation, 16.667);
+        });
+    };
+    /** @internal */
+    static 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);
+        }
+    };
 }
-DrawingNavigationAid._animationFn = (t) => t < 0.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 = () => {
-            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);
-            }
-        };
-    }
+    _canvasElement = React.createRef();
+    _vp;
     render() {
         return (React.createElement("div", { className: "drawing-canvas", "data-testid": "drawing-canvas", ref: this._canvasElement }));
     }
@@ -657,6 +650,16 @@ export class DrawingNavigationCanvas extends React.Component {
         if (vp.viewFlags.acsTriad)
             vp.viewFlags = vp.viewFlags.with("acsTriad", false);
     }
+    _update = () => {
+        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);
+        }
+    };
     componentDidUpdate(oldProps) {
         const viewManager = this.props.viewManagerOverride
             ? this.props.viewManagerOverride