@a-type/ui 5.0.21 → 6.0.0

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

@@ -1,18 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-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/esm/components/viewport/Viewport.stories.js

@@ -1,29 +0,0 @@
-// @unocss-include
-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({ className: "h-600px w-full" }, 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({ className: "h-600px w-full", 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/esm/components/viewport/Viewport.stories.js.map

@@ -1 +0,0 @@
-{"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,kBAAC,SAAS,EAAC,gBAAgB,IAAK,IAAI,eAC5C,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,SAAS,EAAC,gBAAgB,EAC1B,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/esm/components/viewport/ViewportContent.js

@@ -1,64 +0,0 @@
-// @unocss-include
-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';
-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('layer-components:absolute layer-components:transform-origin-center layer-components:touch-none layer-components:select-none layer-components:overflow-visible layer-components:overscroll-none', className), ref: finalRef, style: { transform }, onDragStartCapture: preventDefault, onDrag: preventDefault, onDragEnd: preventDefault, children: children })));
-}
-//# sourceMappingURL=ViewportContent.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ViewportContent.js","sourceRoot":"","sources":["../../../../src/components/viewport/ViewportContent.tsx"],"names":[],"mappings":"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"}

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

@@ -1,12 +0,0 @@
-// @unocss-include
-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/esm/components/viewport/ViewportContext.js.map

@@ -1 +0,0 @@
-{"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/esm/components/viewport/ViewportState.js

@@ -1,516 +0,0 @@
-// @unocss-include
-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