@a-type/ui 5.0.22 → 6.0.0

package/dist/components/viewport/Viewport.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Viewport } from './Viewport.js';
+declare const meta: {
+    title: string;
+    component: typeof import("./Viewport.js").ViewportRoot & {
+        Control: typeof import("./Viewport.js").ViewportControlContent;
+        ZoomControls: typeof import("./ViewportZoomControls.js").ViewportZoomControls;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Viewport>;
+export declare const Default: Story;
+export declare const HighZoomLevel: Story;

package/dist/components/viewport/Viewport.stories.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { Viewport } from './Viewport.js';
+import { useViewport } from './ViewportContext.js';
+const meta = {
+    title: 'Components/Viewport',
+    component: Viewport,
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const CenterButton = () => {
+    const viewport = useViewport();
+    return (_jsx(Button, { emphasis: "ghost", size: "small", onClick: () => viewport.recenter(), children: _jsx(Icon, { name: "locate" }) }));
+};
+export const Default = {
+    render(args) {
+        return (_jsxs(Viewport, Object.assign({ style: {
+                height: 600,
+                width: '100%',
+            } }, args, { children: [_jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }), _jsx(Viewport.Control, { children: _jsx(Viewport.ZoomControls, {}) }), _jsx(Viewport.Control, { position: "bottom-right", children: _jsx(CenterButton, {}) })] })));
+    },
+};
+export const HighZoomLevel = {
+    render(args) {
+        return (_jsxs(Viewport, Object.assign({ style: {
+                height: 600,
+                width: '100%',
+            }, defaultZoom: 100, maxZoom: 1000, minZoom: 10 }, args, { children: [_jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg", width: 10 }), _jsx(Viewport.Control, { children: _jsx(Viewport.ZoomControls, {}) }), _jsx(Viewport.Control, { position: "bottom-right", children: _jsx(CenterButton, {}) })] })));
+    },
+};
+//# sourceMappingURL=Viewport.stories.js.map

package/dist/components/viewport/Viewport.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewport.stories.js","sourceRoot":"","sources":["../../../src/components/viewport/Viewport.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,YAAY,GAAG,GAAG,EAAE;IACzB,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,OAAO,CACN,KAAC,MAAM,IAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,YACvE,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACd,CACT,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,QAAQ,kBACR,KAAK,EAAE;gBACN,MAAM,EAAE,GAAG;gBACX,KAAK,EAAE,MAAM;aACb,IACG,IAAI,eAER,cAAK,GAAG,EAAC,mDAAmD,GAAG,EAC/D,KAAC,QAAQ,CAAC,OAAO,cAChB,KAAC,QAAQ,CAAC,YAAY,KAAG,GACP,EACnB,KAAC,QAAQ,CAAC,OAAO,IAAC,QAAQ,EAAC,cAAc,YACxC,KAAC,YAAY,KAAG,GACE,KACT,CACX,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IACnC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,QAAQ,kBACR,KAAK,EAAE;gBACN,MAAM,EAAE,GAAG;gBACX,KAAK,EAAE,MAAM;aACb,EACD,WAAW,EAAE,GAAG,EAChB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,EAAE,IACP,IAAI,eAER,cACC,GAAG,EAAC,mDAAmD,EACvD,KAAK,EAAE,EAAE,GACR,EACF,KAAC,QAAQ,CAAC,OAAO,cAChB,KAAC,QAAQ,CAAC,YAAY,KAAG,GACP,EACnB,KAAC,QAAQ,CAAC,OAAO,IAAC,QAAQ,EAAC,cAAc,YACxC,KAAC,YAAY,KAAG,GACE,KACT,CACX,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/viewport/ViewportContent.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { preventDefault } from '@a-type/utils';
+import clsx from 'clsx';
+import { motion, useMotionTemplate, useSpring, } from 'motion/react';
+import { useEffect, useRef } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import cls from './ViewportContent.module.css';
+const PAN_SPRING_CONFIG = {
+    mass: 0.2,
+    bounce: 0.05,
+};
+const ZOOM_SPRING_CONFIG = {
+    mass: 0.5,
+    bounce: 0.1,
+};
+export function ViewportContent(_a) {
+    var { viewport, children, className } = _a, rest = __rest(_a, ["viewport", "children", "className"]);
+    const internalRef = useRef(null);
+    const centerX = useSpring(viewport.panPosition.x, PAN_SPRING_CONFIG);
+    const centerY = useSpring(viewport.panPosition.y, PAN_SPRING_CONFIG);
+    const zoom = useSpring(viewport.zoom, ZOOM_SPRING_CONFIG);
+    useEffect(() => viewport.subscribe('centerChanged', (center, origin) => {
+        if (origin === 'direct') {
+            centerX.jump(-center.x);
+            centerY.jump(-center.y);
+        }
+        else {
+            centerX.set(-center.x);
+            centerY.set(-center.y);
+        }
+    }), [viewport, centerX, centerY]);
+    useEffect(() => viewport.subscribe('zoomChanged', (zoomValue, origin) => {
+        if (origin === 'direct') {
+            zoom.jump(zoomValue);
+        }
+        else {
+            zoom.set(zoomValue);
+        }
+        if (internalRef.current) {
+            // disabled: this is causing recalculate style :(
+            //internalRef.current.style.setProperty('--zoom', zoomValue.toString());
+        }
+    }), [viewport, zoom, internalRef]);
+    useEffect(() => viewport.subscribe('zoomSettled', (zoom) => {
+        if (internalRef.current) {
+            internalRef.current.style.setProperty('--zoom-settled', zoom.toString());
+        }
+    }), [viewport, internalRef]);
+    const finalRef = useMergedRef(viewport.bindContent, internalRef);
+    const transform = useMotionTemplate `translate3d(calc(var(--root-width,0)/2), calc(var(--root-height,0)/2), 0) translate3d(-50%, -50%, 0) scale(${zoom}) translate3d(${centerX}px, ${centerY}px, 0)`;
+    return (_jsx(motion.div, Object.assign({}, rest, { className: clsx(cls.root, className), ref: finalRef, style: { transform }, onDragStartCapture: preventDefault, onDrag: preventDefault, onDragEnd: preventDefault, children: children })));
+}
+//# sourceMappingURL=ViewportContent.js.map

package/dist/components/viewport/ViewportContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportContent.js","sourceRoot":"","sources":["../../../src/components/viewport/ViewportContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAEN,MAAM,EAEN,iBAAiB,EACjB,SAAS,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,GAAG,MAAM,8BAA8B,CAAC;AAQ/C,MAAM,iBAAiB,GAAkB;IACxC,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,IAAI;CACZ,CAAC;AACF,MAAM,kBAAkB,GAAkB;IACzC,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,GAAG;CACX,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,EAKT;QALS,EAC/B,QAAQ,EACR,QAAQ,EACR,SAAS,OAEa,EADnB,IAAI,cAJwB,qCAK/B,CADO;IAEP,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,MAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;IACrE,MAAM,OAAO,GAAG,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC;IACrE,MAAM,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;IAE1D,SAAS,CACR,GAAG,EAAE,CACJ,QAAQ,CAAC,SAAS,CAAC,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE;QACtD,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;YACzB,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACxB,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YACvB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,CAAC;IACF,CAAC,CAAC,EACH,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC,CAC5B,CAAC;IACF,SAAS,CACR,GAAG,EAAE,CACJ,QAAQ,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE;QACvD,IAAI,MAAM,KAAK,QAAQ,EAAE,CAAC;YACzB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC;QACD,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACzB,iDAAiD;YACjD,wEAAwE;QACzE,CAAC;IACF,CAAC,CAAC,EACH,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAC7B,CAAC;IAEF,SAAS,CACR,GAAG,EAAE,CACJ,QAAQ,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC,IAAI,EAAE,EAAE;QAC1C,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;YACzB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CACpC,gBAAgB,EAChB,IAAI,CAAC,QAAQ,EAAE,CACf,CAAC;QACH,CAAC;IACF,CAAC,CAAC,EACH,CAAC,QAAQ,EAAE,WAAW,CAAC,CACvB,CAAC;IAEF,MAAM,QAAQ,GAAG,YAAY,CAC5B,QAAQ,CAAC,WAAW,EACpB,WAAW,CACX,CAAC;IAEF,MAAM,SAAS,GAAG,iBAAiB,CAAA,8GAA8G,IAAI,iBAAiB,OAAO,OAAO,OAAO,QAAQ,CAAC;IAEpM,OAAO,CACN,KAAC,MAAM,CAAC,GAAG,oBACN,IAAI,IACR,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EACpC,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,EAAE,SAAS,EAAE,EACpB,kBAAkB,EAAE,cAAc,EAClC,MAAM,EAAE,cAAc,EACtB,SAAS,EAAE,cAAc,YAExB,QAAQ,IACG,CACb,CAAC;AACH,CAAC"}

package/dist/components/viewport/ViewportContent.module.css

@@ -0,0 +1,8 @@
+.root {
+	position: absolute;
+	transform-origin: center;
+	touch-action: none;
+	user-select: none;
+	overflow: visible;
+	overscroll-behavior: none;
+}

package/dist/components/viewport/ViewportContext.js

@@ -0,0 +1,11 @@
+import { createContext, use } from 'react';
+const ViewportContext = createContext(null);
+export const ViewportProvider = ViewportContext.Provider;
+export function useViewport() {
+    const viewport = use(ViewportContext);
+    if (!viewport) {
+        throw new Error('useViewport must be used within a ViewportProvider');
+    }
+    return viewport;
+}
+//# sourceMappingURL=ViewportContext.js.map

package/dist/components/viewport/ViewportContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewportContext.js","sourceRoot":"","sources":["../../../src/components/viewport/ViewportContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,eAAe,GAAG,aAAa,CAAuB,IAAI,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,gBAAgB,GAAG,eAAe,CAAC,QAAQ,CAAC;AACzD,MAAM,UAAU,WAAW;IACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,eAAe,CAAC,CAAC;IACtC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,MAAM,IAAI,KAAK,CAAC,oDAAoD,CAAC,CAAC;IACxE,CAAC;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/dist/components/viewport/ViewportState.js

@@ -0,0 +1,515 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { EventSubscriber, preventDefault } from '@a-type/utils';
+import { addVectors, clamp, clampVector, subtractVectors } from './math.js';
+const MIN_POSSIBLE_ZOOM = 0.000001;
+/**
+ * Viewport handles all the logic of managing a 2d viewport with pan & zoom which
+ * renders spatial content on a larger plane. Viewport handles the math required
+ * to determine boundaries on panning, converts screen coordinates to "world" coordinates,
+ * and holds the state for the target values of both the zoom and camera center position.
+ *
+ * Viewport does NOT do any easing of values, it just computes the target values.
+ * Easing is left up to the actual view code (in our case React). Rendering code
+ * should set up easing between target values as those values change in Viewport.
+ *
+ * To that end Viewport implements a few events which can be listened to for
+ * when the camera properties change.
+ */
+export class ViewportState extends EventSubscriber {
+    constructor(_a = {}) {
+        var { boundElement } = _a, config = __rest(_a, ["boundElement"]);
+        super();
+        this._center = { x: 0, y: 0 };
+        this._zoom = 1;
+        // initialized in a helper method, bypassing
+        // strict initialization checking...
+        this._boundRoot = null;
+        this._boundRootSize = { width: 0, height: 0 };
+        this._boundRootOffset = { x: 0, y: 0 };
+        this._boundContent = null;
+        this._boundContentSize = { width: 0, height: 0 };
+        this.handleBoundElementResize = ([entry]) => {
+            const box = entry.target.getBoundingClientRect();
+            this.setBoundElementSize(entry.contentRect, {
+                x: box.left,
+                y: box.top,
+            });
+        };
+        this._boundElementResizeObserver = new ResizeObserver(this.handleBoundElementResize);
+        this.handleContentElementResize = ([entry]) => {
+            this.setContentElementSize(entry.contentRect);
+        };
+        this._contentElementResizeObserver = new ResizeObserver(this.handleContentElementResize);
+        this.zoomFitValue = MIN_POSSIBLE_ZOOM;
+        this._hasGesturePanned = false;
+        this.setBoundElementSize = (size, offset) => {
+            this._boundRootSize = size;
+            if (offset) {
+                this._boundRootOffset = offset;
+            }
+            this.updateZoomFitMin();
+            this.reconstrainPosition();
+            this.emit('rootSizeChanged', size);
+        };
+        this.setContentElementSize = (size) => {
+            this._boundContentSize = size;
+            this.updateZoomFitMin();
+            if (this._hasGesturePanned) {
+                this.reconstrainPosition({ origin: 'control' });
+            }
+            this.emit('panLimitsChanged', this.panLimits);
+        };
+        this.updateZoomFitMin = () => {
+            // computed as the minimum zoom level where one axis of the bounds
+            // takes up the entire viewport. if pan limits are unbounded, it
+            // defaults to MIN_POSSIBLE_ZOOM
+            if (this.panLimits) {
+                this.zoomFitValue = Math.min(this._boundRootSize.width /
+                    (this.panLimits.max.x - this.panLimits.min.x), this._boundRootSize.height /
+                    (this.panLimits.max.y - this.panLimits.min.y));
+            }
+            else {
+                this.zoomFitValue = MIN_POSSIBLE_ZOOM;
+            }
+        };
+        this.bindRoot = (element) => {
+            if (this._boundRoot === element) {
+                // already bound to this element
+                return;
+            }
+            if (this._boundRoot && this._boundRoot !== element) {
+                this._boundElementResizeObserver.unobserve(this._boundRoot);
+                this._boundRoot.removeAttribute('data-viewport');
+            }
+            if (typeof window === 'undefined') {
+                // SSR context - simulate an element client rect and ignore
+                // the element size monitoring. Size is arbitrary.
+                this.setBoundElementSize({
+                    width: 2400,
+                    height: 2400,
+                });
+            }
+            else if (element) {
+                this._boundRoot = element;
+                this._boundRoot.setAttribute('data-viewport', 'true');
+                this._boundElementResizeObserver.observe(this._boundRoot);
+                const box = element.getBoundingClientRect();
+                this.setBoundElementSize({
+                    width: element.clientWidth,
+                    height: element.clientHeight,
+                }, {
+                    x: box.left,
+                    y: box.top,
+                });
+            }
+        };
+        this.bindContent = (element) => {
+            if (this._boundContent === element) {
+                // already bound to this element
+                return;
+            }
+            if (this._boundContent && this._boundContent !== element) {
+                this._contentElementResizeObserver.unobserve(this._boundContent);
+                this._boundContent.removeAttribute('data-viewport-content');
+            }
+            this._boundContent = element !== null && element !== void 0 ? element : null;
+            if (this._boundContent) {
+                this._boundContent.setAttribute('data-viewport-content', 'true');
+                this._contentElementResizeObserver.observe(this._boundContent);
+                this.setContentElementSize({
+                    width: this._boundContent.clientWidth,
+                    height: this._boundContent.clientHeight,
+                });
+                if (this._boundRoot) {
+                    requestAnimationFrame(() => {
+                        this.fitEverythingOnScreen({ origin: 'animation' });
+                    });
+                }
+            }
+        };
+        this.dispose = () => {
+            if (typeof document !== 'undefined') {
+                document.removeEventListener('gesturestart', preventDefault);
+                document.removeEventListener('gesturechange', preventDefault);
+            }
+        };
+        this.updateConfig = (config) => {
+            this._config = Object.assign(Object.assign({}, this._config), config);
+        };
+        /**
+         * Transforms a pixel position into world coordinates. Optionally
+         * you can clamp the coordinate to the canvas bounds, if they exist.
+         */
+        this.viewportToWorld = (screenPoint) => {
+            // This was a bit trial-and-error, but:
+            // 1. subtract half of the window size
+            //      Imagine the viewport was centered at 0,0 in world space (the center of the window
+            //      is exactly at the center of the room). if the user
+            //      moved an object toward the upper left corner of their screen,
+            //      that would logically be in negative world coordinate space -
+            //      however, screen coordinates are only positive from the top left corner.
+            //      this is basically the part that converts from a top-left to a center-based
+            //      positioning system.
+            // 2. scale based on inverse zoom (divide by zoom)
+            //      scaling for zoom is necessary - imagine if you are at 0.5x zoom and you move
+            //      the object 10 pixels to the left - you are actually moving 20 pixels of world
+            //      space because the world is half-size.
+            // 3. subtract the pan of the canvas
+            //      subtracting the pan value accommodates for the fact that pan moves the world
+            //      independently of the visible screen space, so we need to add that offset in.
+            //      this is done OUTSIDE of the zoom scaling because the pan coordinate is already
+            //      in world space and doesn't need to be adjusted for zoom.
+            const transformedPoint = {
+                x: (screenPoint.x - this._boundRootOffset.x - this.halfViewportWidth) /
+                    this.zoom +
+                    this.panPosition.x,
+                y: (screenPoint.y - this._boundRootOffset.y - this.halfViewportHeight) /
+                    this.zoom +
+                    this.panPosition.y,
+            };
+            return transformedPoint;
+        };
+        /**
+         * Converts a world point to a viewport (screen, pixel) point. The point
+         * will be relative to the viewport element. This is the inverse of
+         * viewportToWorld.
+         */
+        this.worldToViewport = (worldPoint) => {
+            return {
+                x: (worldPoint.x - this.panPosition.x) * this.zoom +
+                    this.halfViewportWidth +
+                    this._boundRootOffset.x,
+                y: (worldPoint.y - this.panPosition.y) * this.zoom +
+                    this.halfViewportHeight +
+                    this._boundRootOffset.y,
+            };
+        };
+        /**
+         * Converts a delta vector (a distance representation) from
+         * viewport (screen, pixel) space to world space
+         */
+        this.viewportDeltaToWorld = (screenDelta) => {
+            return {
+                x: screenDelta.x / this.zoom,
+                y: screenDelta.y / this.zoom,
+            };
+        };
+        /**
+         * Converts a delta vector (a distance representation) from
+         * world space to viewport (screen, pixel) space
+         */
+        this.worldDeltaToViewport = (worldDelta) => {
+            return {
+                x: worldDelta.x * this.zoom,
+                y: worldDelta.y * this.zoom,
+            };
+        };
+        this.worldSizeToViewport = (worldSize) => {
+            return {
+                width: worldSize.width * this.zoom,
+                height: worldSize.height * this.zoom,
+            };
+        };
+        /**
+         * Clamps the pan position if limits are provided.
+         * @param panPosition Proposed pan position, in world coordinates
+         */
+        this.clampPanPosition = (panPosition) => {
+            if (this.panLimits) {
+                if (this.config.panLimitMode === 'viewport') {
+                    const worldViewportHalfWidth = this.halfViewportWidth / this.zoom;
+                    const worldViewportHalfHeight = this.halfViewportHeight / this.zoom;
+                    const worldViewportWidth = this._boundRootSize.width / this.zoom;
+                    const worldViewportHeight = this._boundRootSize.height / this.zoom;
+                    const clampSize = {
+                        width: this.panLimits.max.x - this.panLimits.min.x,
+                        height: this.panLimits.max.y - this.panLimits.min.y,
+                    };
+                    const worldCenter = {
+                        x: this.panLimits.min.x + clampSize.width / 2,
+                        y: this.panLimits.min.y + clampSize.height / 2,
+                    };
+                    // there are different rules depending on if the viewport is visually larger
+                    // than the canvas, or vice versa. when the viewport is larger than the canvas
+                    // we still let the user move around a little bit, until the edge of the
+                    // canvas touches the far edge of the screen.
+                    let minX = this.panLimits.min.x + worldViewportHalfWidth;
+                    let maxX = this.panLimits.max.x - worldViewportHalfWidth;
+                    if (worldViewportWidth > clampSize.width) {
+                        minX = worldCenter.x - (worldViewportWidth - clampSize.width) / 2;
+                        maxX = worldCenter.x + (worldViewportWidth - clampSize.width) / 2;
+                    }
+                    let minY = this.panLimits.min.y + worldViewportHalfHeight;
+                    let maxY = this.panLimits.max.y - worldViewportHalfHeight;
+                    if (worldViewportHeight > clampSize.height) {
+                        minY = worldCenter.y - (worldViewportHeight - clampSize.height) / 2;
+                        maxY = worldCenter.y + (worldViewportHeight - clampSize.height) / 2;
+                    }
+                    return clampVector(panPosition, { x: minX, y: minY }, { x: maxX, y: maxY });
+                }
+                // simpler center-based clamping
+                return clampVector(panPosition, this.panLimits.min, this.panLimits.max);
+            }
+            return panPosition;
+        };
+        /**
+         * Adjusts the zoom of the viewport camera. Optionally you can provide a
+         * focal point (in screen coordinates) and it will keep that point at the same screen position while
+         * zooming instead of zooming straight to the center of the viewport
+         * @param zoom the new zoom factor
+         * @param centroid a screen coordinate position which should remain visually stable during the zoom
+         */
+        this.setZoom = (zoom, { origin = 'animation', centroid, gestureComplete = true, } = {}) => {
+            const value = typeof zoom === 'function' ? zoom(this._zoom) : zoom;
+            // the pan position is also updated to keep the focal point in the same screen position
+            if (centroid) {
+                // the objective is to keep the focal point at the same logical position onscreen -
+                // i.e. if your mouse is the focal point and it's hovering over an avatar, that avatar
+                // should remain under your mouse as you zoom in!
+                // start out by recording the world position of the focal point before zoom
+                const priorFocalWorldPoint = this.viewportToWorld(centroid);
+                // then apply the zoom
+                this._zoom = clamp(value, this.zoomMin, this.zoomMax);
+                // now determine the difference, in screen pixels, between the old focal point
+                // and the world point it used to be "over"
+                const priorFocalScreenPoint = this.worldToViewport(priorFocalWorldPoint);
+                const screenDifference = subtractVectors(priorFocalScreenPoint, centroid);
+                // convert that difference to world units and apply it as a relative pan
+                this.setPanRelative(this.viewportDeltaToWorld(screenDifference), {
+                    origin,
+                    gestureComplete,
+                });
+            }
+            else {
+                this._zoom = clamp(value, this.zoomMin, this.zoomMax);
+                // apply a pan with the current pan position to recalculate pan
+                // boundaries from the new zoom and enforce them
+                this.rawPan(this.panPosition, { origin, gestureComplete });
+            }
+            this.emit('zoomChanged', this.zoom, origin);
+            if (gestureComplete) {
+                this.emit('zoomSettled', this.zoom, origin);
+            }
+        };
+        /**
+         * Pans the camera across the canvas to reach a target center point.
+         * The coordinates accepted are in "world" units!
+         * To convert from screen pixels (like mouse position), use .viewportToWorld before
+         * passing in your position.
+         *
+         * @param {Vector2} worldPosition the position in world coordinates to pan to
+         */
+        this.rawPan = (worldPosition, { origin = 'animation', gestureComplete = true, } = {}) => {
+            if (isNaN(worldPosition.x) || isNaN(worldPosition.y)) {
+                console.trace('Invalid world position for pan', worldPosition);
+                return;
+            }
+            this._center = this.clampPanPosition(worldPosition);
+            this.emit('centerChanged', this.panPosition, origin);
+            if (gestureComplete) {
+                this.emit('centerSettled', this.panPosition, origin);
+            }
+            if (origin === 'direct' || origin === 'control') {
+                this._hasGesturePanned = true;
+            }
+        };
+        this.setPan = (worldPosition, details) => {
+            console.log('Setting pan to:', worldPosition);
+            // worldPosition.x += this.contentOffset.x;
+            // worldPosition.y += this.contentOffset.y;
+            this.rawPan(worldPosition, details);
+        };
+        /**
+         * Pans the camera around the canvas using displacement relative to the current
+         * center position, in "world" units. To convert a displacement from screen pixels
+         * (like mouse position delta), use .viewportDeltaToWorld.
+         *
+         * See doPan for details on parameters.
+         */
+        this.setPanRelative = (worldDelta, details) => {
+            this.rawPan(addVectors(this.panPosition, worldDelta), details);
+        };
+        /**
+         * Pans and zooms at the same time - a convenience shortcut to
+         * zoom while moving the camera to a certain point. Both values
+         * are absolute - see .setZoom and .pan for more details on behavior
+         * and parameters.
+         */
+        this.move = (worldPosition, zoom, info = {}) => {
+            this.setZoom(zoom, info);
+            this.setPan(worldPosition, info);
+        };
+        this.recenter = (details) => {
+            this.setPan(this.getCanvasCenter(), details);
+        };
+        this.rawMove = (worldPosition, zoom, info = {}) => {
+            this.setZoom(zoom, info);
+            this.rawPan(worldPosition, info);
+        };
+        this.reconstrainPosition = (info) => this.rawMove(this.panPosition, this.zoom, info);
+        /**
+         * Does the best it can to fit the provided area onscreen.
+         * Area is in world units.
+         */
+        this.fitOnScreen = (bounds, { origin = 'animation', margin = 10, } = {}) => {
+            const width = bounds.width;
+            const height = bounds.height;
+            const zoom = Math.min(this.rootSize.width / (width + margin), this.rootSize.height / (height + margin));
+            const center = {
+                x: bounds.x + width / 2,
+                y: bounds.y + height / 2,
+            };
+            this.move(center, zoom, { origin });
+        };
+        this.fitEverythingOnScreen = (options) => {
+            const panLimits = this.panLimits;
+            if (!panLimits) {
+                return;
+            }
+            return this.fitOnScreen({
+                x: panLimits.min.x,
+                y: panLimits.min.y,
+                width: panLimits.max.x - panLimits.min.x,
+                height: panLimits.max.y - panLimits.min.y,
+            }, options);
+        };
+        // intentionally not !== undefined - we ignore 0 too.
+        if (config.defaultZoom) {
+            this._zoom = config.defaultZoom;
+        }
+        this._config = Object.assign({ defaultZoom: 1, defaultCenter: { x: '50%', y: '50%' }, zoomLimits: { min: 'fit', max: 2 }, panLimitMode: 'center' }, config);
+        this._center = this.getCanvasCenter();
+        this.bindRoot(boundElement !== null && boundElement !== void 0 ? boundElement : null);
+        if (typeof document !== 'undefined') {
+            document.addEventListener('gesturestart', preventDefault);
+            document.addEventListener('gesturechange', preventDefault);
+        }
+    }
+    get panLimits() {
+        var _a, _b, _c, _d;
+        if (!this._boundContentSize) {
+            return undefined;
+        }
+        return {
+            min: {
+                x: this._boundContentSize.width / -2 -
+                    ((_a = this._config.panLimitBuffer) !== null && _a !== void 0 ? _a : 0),
+                y: this._boundContentSize.height / -2 -
+                    ((_b = this._config.panLimitBuffer) !== null && _b !== void 0 ? _b : 0),
+            },
+            max: {
+                x: this._boundContentSize.width / 2 + ((_c = this._config.panLimitBuffer) !== null && _c !== void 0 ? _c : 0),
+                y: this._boundContentSize.height / 2 +
+                    ((_d = this._config.panLimitBuffer) !== null && _d !== void 0 ? _d : 0),
+            },
+        };
+    }
+    /** Public getters for core values */
+    /**
+     * The zoom value of the camera - higher means things look bigger.
+     */
+    get zoom() {
+        return this._zoom;
+    }
+    get zoomMin() {
+        if (this.config.zoomLimits.min === 'fit') {
+            return this.zoomFitValue;
+        }
+        return this.config.zoomLimits.min;
+    }
+    get zoomMax() {
+        return this.config.zoomLimits.max;
+    }
+    /**
+     * The center coordinate of the camera's focus, in "world" space.
+     */
+    get panPosition() {
+        return this._center;
+    }
+    get topLeft() {
+        return this.viewportToWorld(this._boundRootOffset);
+    }
+    get config() {
+        return this._config;
+    }
+    /**
+     * The size, in pixels, of the viewport element.
+     */
+    get rootSize() {
+        return this._boundRootSize;
+    }
+    get rootOffset() {
+        return this._boundRootOffset;
+    }
+    /**
+     * The size in world units of the visible space
+     * in the viewport
+     */
+    get size() {
+        return {
+            width: this._boundRootSize.width / this.zoom,
+            height: this._boundRootSize.height / this.zoom,
+        };
+    }
+    get element() {
+        return this._boundRoot;
+    }
+    /** Convenience getters for internal calculation */
+    get halfViewportWidth() {
+        return this._boundRootSize.width / 2;
+    }
+    get halfViewportHeight() {
+        return this._boundRootSize.height / 2;
+    }
+    get halfPanLimits() {
+        if (!this.panLimits) {
+            return { x: 0, y: 0 };
+        }
+        return {
+            x: (this.panLimits.max.x + this.panLimits.min.x) / 2,
+            y: (this.panLimits.max.y + this.panLimits.min.y) / 2,
+        };
+    }
+    getCanvasCenter() {
+        let center = { x: 0, y: 0 };
+        if (this.config.defaultCenter) {
+            if (this.panLimits) {
+                const panLimitsWidth = this.panLimits.max.x - this.panLimits.min.x;
+                const panLimitsHeight = this.panLimits.max.y - this.panLimits.min.y;
+                if (typeof this.config.defaultCenter.x === 'number') {
+                    center.x = this.config.defaultCenter.x;
+                }
+                else {
+                    const xPercent = parseFloat(this.config.defaultCenter.x);
+                    center.x = (xPercent / 100) * panLimitsWidth + this.panLimits.min.x;
+                }
+                if (typeof this.config.defaultCenter.y === 'number') {
+                    center.y = this.config.defaultCenter.y;
+                }
+                else {
+                    const yPercent = parseFloat(this.config.defaultCenter.y);
+                    center.y = (yPercent / 100) * panLimitsHeight + this.panLimits.min.y;
+                }
+            }
+            else {
+                // should be 0,0 at this point.
+                center = this.halfPanLimits;
+            }
+        }
+        else {
+            center = this.halfPanLimits;
+        }
+        return center;
+    }
+}
+//# sourceMappingURL=ViewportState.js.map