@a-type/ui 4.1.7 → 5.0.0

package/dist/cjs/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/cjs/components/viewport/Viewport.stories.js

@@ -1,32 +0,0 @@
-// @unocss-include
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HighZoomLevel = exports.Default = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_js_1 = require("../button/Button.js");
-const Icon_js_1 = require("../icon/Icon.js");
-const Viewport_js_1 = require("./Viewport.js");
-const ViewportContext_js_1 = require("./ViewportContext.js");
-const meta = {
-    title: 'Components/Viewport',
-    component: Viewport_js_1.Viewport,
-    parameters: {
-        controls: { expanded: true },
-    },
-};
-exports.default = meta;
-const CenterButton = () => {
-    const viewport = (0, ViewportContext_js_1.useViewport)();
-    return ((0, jsx_runtime_1.jsx)(Button_js_1.Button, { emphasis: "ghost", size: "small", onClick: () => viewport.recenter(), children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "locate" }) }));
-};
-exports.Default = {
-    render(args) {
-        return ((0, jsx_runtime_1.jsxs)(Viewport_js_1.Viewport, Object.assign({ className: "h-600px w-full" }, args, { children: [(0, jsx_runtime_1.jsx)("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }), (0, jsx_runtime_1.jsx)(Viewport_js_1.Viewport.Control, { children: (0, jsx_runtime_1.jsx)(Viewport_js_1.Viewport.ZoomControls, {}) }), (0, jsx_runtime_1.jsx)(Viewport_js_1.Viewport.Control, { position: "bottom-right", children: (0, jsx_runtime_1.jsx)(CenterButton, {}) })] })));
-    },
-};
-exports.HighZoomLevel = {
-    render(args) {
-        return ((0, jsx_runtime_1.jsxs)(Viewport_js_1.Viewport, Object.assign({ className: "h-600px w-full", defaultZoom: 100, maxZoom: 1000, minZoom: 10 }, args, { children: [(0, jsx_runtime_1.jsx)("img", { src: "https://resources.biscuits.club/images/pashka.jpg", width: 10 }), (0, jsx_runtime_1.jsx)(Viewport_js_1.Viewport.Control, { children: (0, jsx_runtime_1.jsx)(Viewport_js_1.Viewport.ZoomControls, {}) }), (0, jsx_runtime_1.jsx)(Viewport_js_1.Viewport.Control, { position: "bottom-right", children: (0, jsx_runtime_1.jsx)(CenterButton, {}) })] })));
-    },
-};
-//# sourceMappingURL=Viewport.stories.js.map

package/dist/cjs/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,mDAA6C;AAC7C,6CAAuC;AACvC,+CAAyC;AACzC,6DAAmD;AAEnD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,sBAAQ;IACnB,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIpB,MAAM,YAAY,GAAG,GAAG,EAAE;IACzB,MAAM,QAAQ,GAAG,IAAA,gCAAW,GAAE,CAAC;IAE/B,OAAO,CACN,uBAAC,kBAAM,IAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,YACvE,uBAAC,cAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,GACd,CACT,CAAC;AACH,CAAC,CAAC;AAEW,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,sBAAQ,kBAAC,SAAS,EAAC,gBAAgB,IAAK,IAAI,eAC5C,gCAAK,GAAG,EAAC,mDAAmD,GAAG,EAC/D,uBAAC,sBAAQ,CAAC,OAAO,cAChB,uBAAC,sBAAQ,CAAC,YAAY,KAAG,GACP,EACnB,uBAAC,sBAAQ,CAAC,OAAO,IAAC,QAAQ,EAAC,cAAc,YACxC,uBAAC,YAAY,KAAG,GACE,KACT,CACX,CAAC;IACH,CAAC;CACD,CAAC;AAEW,QAAA,aAAa,GAAU;IACnC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,sBAAQ,kBACR,SAAS,EAAC,gBAAgB,EAC1B,WAAW,EAAE,GAAG,EAChB,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,EAAE,IACP,IAAI,eAER,gCACC,GAAG,EAAC,mDAAmD,EACvD,KAAK,EAAE,EAAE,GACR,EACF,uBAAC,sBAAQ,CAAC,OAAO,cAChB,uBAAC,sBAAQ,CAAC,YAAY,KAAG,GACP,EACnB,uBAAC,sBAAQ,CAAC,OAAO,IAAC,QAAQ,EAAC,cAAc,YACxC,uBAAC,YAAY,KAAG,GACE,KACT,CACX,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/cjs/components/viewport/ViewportContent.d.ts

@@ -1,6 +0,0 @@
-import { HTMLMotionProps } from 'motion/react';
-import { ViewportState } from './ViewportState.js';
-export interface ViewportContentProps extends Omit<HTMLMotionProps<'div'>, 'viewport'> {
-    viewport: ViewportState;
-}
-export declare function ViewportContent({ viewport, children, className, ...rest }: ViewportContentProps): import("react/jsx-runtime.js").JSX.Element;

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

@@ -1,70 +0,0 @@
-// @unocss-include
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportContent = ViewportContent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@a-type/utils");
-const clsx_1 = __importDefault(require("clsx"));
-const react_1 = require("motion/react");
-const react_2 = require("react");
-const useMergedRef_js_1 = __importDefault(require("../../hooks/useMergedRef.js"));
-const PAN_SPRING_CONFIG = {
-    mass: 0.2,
-    bounce: 0.05,
-};
-const ZOOM_SPRING_CONFIG = {
-    mass: 0.5,
-    bounce: 0.1,
-};
-function ViewportContent(_a) {
-    var { viewport, children, className } = _a, rest = __rest(_a, ["viewport", "children", "className"]);
-    const internalRef = (0, react_2.useRef)(null);
-    const centerX = (0, react_1.useSpring)(viewport.panPosition.x, PAN_SPRING_CONFIG);
-    const centerY = (0, react_1.useSpring)(viewport.panPosition.y, PAN_SPRING_CONFIG);
-    const zoom = (0, react_1.useSpring)(viewport.zoom, ZOOM_SPRING_CONFIG);
-    (0, react_2.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]);
-    (0, react_2.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]);
-    (0, react_2.useEffect)(() => viewport.subscribe('zoomSettled', (zoom) => {
-        if (internalRef.current) {
-            internalRef.current.style.setProperty('--zoom-settled', zoom.toString());
-        }
-    }), [viewport, internalRef]);
-    const finalRef = (0, useMergedRef_js_1.default)(viewport.bindContent, internalRef);
-    const transform = (0, react_1.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 ((0, jsx_runtime_1.jsx)(react_1.motion.div, Object.assign({}, rest, { className: (0, clsx_1.default)('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: utils_1.preventDefault, onDrag: utils_1.preventDefault, onDragEnd: utils_1.preventDefault, children: children })));
-}
-//# sourceMappingURL=ViewportContent.js.map

package/dist/cjs/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/cjs/components/viewport/ViewportContext.d.ts

@@ -1,3 +0,0 @@
-import { ViewportState } from './ViewportState.js';
-export declare const ViewportProvider: import("react").Provider<ViewportState | null>;
-export declare function useViewport(): ViewportState;

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

@@ -1,16 +0,0 @@
-// @unocss-include
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ViewportProvider = void 0;
-exports.useViewport = useViewport;
-const react_1 = require("react");
-const ViewportContext = (0, react_1.createContext)(null);
-exports.ViewportProvider = ViewportContext.Provider;
-function useViewport() {
-    const viewport = (0, react_1.use)(ViewportContext);
-    if (!viewport) {
-        throw new Error('useViewport must be used within a ViewportProvider');
-    }
-    return viewport;
-}
-//# sourceMappingURL=ViewportContext.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ViewportContext.js","sourceRoot":"","sources":["../../../../src/components/viewport/ViewportContext.tsx"],"names":[],"mappings":";;;AAMA,kCAMC;AAZD,iCAA2C;AAG3C,MAAM,eAAe,GAAG,IAAA,qBAAa,EAAuB,IAAI,CAAC,CAAC;AAErD,QAAA,gBAAgB,GAAG,eAAe,CAAC,QAAQ,CAAC;AACzD,SAAgB,WAAW;IACzB,MAAM,QAAQ,GAAG,IAAA,WAAG,EAAC,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/cjs/components/viewport/ViewportState.d.ts

@@ -1,243 +0,0 @@
-import { EventSubscriber } from '@a-type/utils';
-import { Box, RectLimits, Size, Vector2 } from './types.js';
-export interface PositionOrPercentage {
-    x: number | `${number}%`;
-    y: number | `${number}%`;
-}
-export interface ViewportConfig {
-    /** Supply a starting zoom value. Default 1 */
-    defaultZoom?: number;
-    /** Supply a starting center position. Default is the middle of the pan limits or 0,0 */
-    defaultCenter?: PositionOrPercentage;
-    /**
-     * There are two ways to limit pan position:
-     * "center" simply clamps the center of the screen to the provided panLimits boundary
-     * "viewport" enforces that the closest edge of the viewport must not exceed the boundary
-     * Default is "center"
-     */
-    panLimitMode?: 'center' | 'viewport';
-    panLimitBuffer?: number;
-    /**
-     * Restrict zooming to certain boundaries. Default min is 'fit', max 2.
-     * "min" has a special value, 'fit', which will ensure that at least
-     * one axis of the content fits the viewport at all times. A percentage number can be
-     * supplied instead to set a specific minimum zoom level.
-     */
-    zoomLimits?: {
-        min: number | 'fit';
-        max: number;
-    };
-    /**
-     * Start the Viewport already bound to an existing DOM element. This
-     * can be set later using bindElement. Defaults to window.
-     */
-    boundElement?: HTMLElement;
-}
-type InternalViewportConfig = Omit<ViewportConfig, 'zoomLimits' | 'boundElement' | 'defaultZoom' | 'canvas'> & {
-    defaultZoom: number;
-    zoomLimits: {
-        min: number | 'fit';
-        max: number;
-    };
-};
-/**
- * Event origins are included in change events to indicate what
- * kind of operation caused the change. This helps animation code
- * determine what kind of easing to apply to the movement -
- *  - direct movement is usually very tight or not eased at all
- *  - control movement is triggered indirectly by control interaction
- *    (like zoom buttons) and usually has tighter easing
- *  - animation movement comes from app events and may have long easing
- *    curves to help the user interpret the change since they didn't
- *    originate it
- */
-export type ViewportEventOrigin = 'direct' | 'control' | 'animation';
-export type ViewportEvents = {
-    zoomChanged(zoom: number, origin: ViewportEventOrigin): void;
-    zoomSettled(zoom: number, origin: ViewportEventOrigin): void;
-    centerChanged(center: Readonly<Vector2>, origin: ViewportEventOrigin): void;
-    centerSettled(center: Readonly<Vector2>, origin: ViewportEventOrigin): void;
-    /** Fired when the size of the bound element changes */
-    rootSizeChanged(size: Size): void;
-    /** Fired when the size of the pan limit boundaries changes */
-    panLimitsChanged(size: RectLimits | undefined): void;
-};
-/**
- * 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 declare class ViewportState extends EventSubscriber<ViewportEvents> {
-    private _center;
-    private _zoom;
-    _config: InternalViewportConfig;
-    private _boundRoot;
-    private _boundRootSize;
-    private _boundRootOffset;
-    private _boundContent;
-    private _boundContentSize;
-    private handleBoundElementResize;
-    private _boundElementResizeObserver;
-    private handleContentElementResize;
-    private _contentElementResizeObserver;
-    private zoomFitValue;
-    private _hasGesturePanned;
-    constructor({ boundElement, ...config }?: ViewportConfig);
-    private setBoundElementSize;
-    private setContentElementSize;
-    private get panLimits();
-    private updateZoomFitMin;
-    bindRoot: (element: HTMLElement | null) => void;
-    bindContent: (element: HTMLElement | null) => void;
-    /** Public getters for core values */
-    /**
-     * The zoom value of the camera - higher means things look bigger.
-     */
-    get zoom(): number;
-    get zoomMin(): number;
-    get zoomMax(): number;
-    /**
-     * The center coordinate of the camera's focus, in "world" space.
-     */
-    get panPosition(): Readonly<Vector2>;
-    get topLeft(): {
-        x: number;
-        y: number;
-    };
-    get config(): InternalViewportConfig;
-    /**
-     * The size, in pixels, of the viewport element.
-     */
-    get rootSize(): Readonly<Size>;
-    get rootOffset(): Readonly<Vector2>;
-    /**
-     * The size in world units of the visible space
-     * in the viewport
-     */
-    get size(): {
-        width: number;
-        height: number;
-    };
-    get element(): HTMLElement;
-    /** Convenience getters for internal calculation */
-    private get halfViewportWidth();
-    private get halfViewportHeight();
-    private get halfPanLimits();
-    getCanvasCenter(): Vector2;
-    dispose: () => void;
-    updateConfig: (config: Partial<ViewportConfig>) => void;
-    /**
-     * Transforms a pixel position into world coordinates. Optionally
-     * you can clamp the coordinate to the canvas bounds, if they exist.
-     */
-    viewportToWorld: (screenPoint: Vector2) => {
-        x: number;
-        y: number;
-    };
-    /**
-     * 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.
-     */
-    worldToViewport: (worldPoint: Vector2) => {
-        x: number;
-        y: number;
-    };
-    /**
-     * Converts a delta vector (a distance representation) from
-     * viewport (screen, pixel) space to world space
-     */
-    viewportDeltaToWorld: (screenDelta: Vector2) => {
-        x: number;
-        y: number;
-    };
-    /**
-     * Converts a delta vector (a distance representation) from
-     * world space to viewport (screen, pixel) space
-     */
-    worldDeltaToViewport: (worldDelta: Vector2) => {
-        x: number;
-        y: number;
-    };
-    worldSizeToViewport: (worldSize: Size) => {
-        width: number;
-        height: number;
-    };
-    /**
-     * Clamps the pan position if limits are provided.
-     * @param panPosition Proposed pan position, in world coordinates
-     */
-    private clampPanPosition;
-    /**
-     * 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
-     */
-    setZoom: (zoom: number | ((cur: number) => number), { origin, centroid, gestureComplete, }?: {
-        centroid?: Vector2;
-        origin?: ViewportEventOrigin;
-        gestureComplete?: boolean;
-    }) => void;
-    /**
-     * 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
-     */
-    private rawPan;
-    setPan: (worldPosition: Vector2, details?: {
-        origin?: ViewportEventOrigin;
-        gestureComplete?: boolean;
-    }) => void;
-    /**
-     * 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.
-     */
-    setPanRelative: (worldDelta: Vector2, details?: {
-        origin?: ViewportEventOrigin;
-        gestureComplete?: boolean;
-    }) => void;
-    /**
-     * 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.
-     */
-    move: (worldPosition: Vector2, zoom: number, info?: {
-        origin?: ViewportEventOrigin;
-        gestureComplete?: boolean;
-    }) => void;
-    recenter: (details?: {
-        origin?: ViewportEventOrigin;
-    }) => void;
-    private rawMove;
-    private reconstrainPosition;
-    /**
-     * Does the best it can to fit the provided area onscreen.
-     * Area is in world units.
-     */
-    fitOnScreen: (bounds: Box, { origin, margin, }?: {
-        origin?: ViewportEventOrigin;
-        margin?: number;
-    }) => void;
-    fitEverythingOnScreen: (options?: {
-        margin?: number;
-        origin?: ViewportEventOrigin;
-    }) => void;
-}
-export {};