@woosh/meep-engine 2.131.35 → 2.131.37

package/src/engine/animation/curve/editor/CurveEditorView.js

@@ -0,0 +1,337 @@
+import Vector2 from "../../../../core/geom/Vector2.js";
+import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
+import {ActionProcessor} from "../../../../core/process/undo/ActionProcessor.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import {CanvasView} from "../../../../view/elements/CanvasView.js";
+import {createKeyCoordinateLabelView} from "./createKeyCoordinateLabelView.js";
+import Signal from "../../../../core/events/signal/Signal.js";
+import KeyboardDevice from "../../../input/devices/KeyboardDevice.js";
+import {KeyframeStateManager} from "./KeyframeStateManager.js";
+import {keyframesContext} from "../actionProcessorOperations/curveActions.js";
+import {createKeyframeMarker} from "./createKeyframeMarker.js";
+import {updateMarkerPosition} from "./updateMarkerPosition.js";
+import {updateMarkerVisual} from "./updateMarkerVisual.js";
+import {createKeyframeDraggableAspect} from "./createKeyframeDraggableAspect.js";
+import {
+    handleKeyDownEvents,
+    handleKeyframeSelectedByDevice,
+    handleMouseDoubleClickEvents,
+    handleMouseDownEvents
+} from "./inputEventHandlers.js";
+import {build_tangent_editor} from "../draw/build_tangent_editor.js";
+import {buildReadOnlyDisplay} from "../draw/buildReadOnlyDisplay.js";
+import {KeyboardEvents} from "../../../input/devices/events/KeyboardEvents.js";
+import {MouseEvents} from "../../../input/devices/events/MouseEvents.js";
+import {canvas2dPlotCurveLine} from "./canvas2dPlotCurveLine.js";
+import {updateAxisRange} from "./updateAxisRange.js";
+import {determineUnitSpacing} from "./determineUnitSpacing.js";
+import {animation_curve_compute_aabb} from "../animation_curve_compute_aabb.js";
+import {displayMousePos} from "../draw/displayMousePos.js";
+import {PointerDevice} from "../../../input/devices/PointerDevice.js";
+import {createSelectionBoxTool} from "./createSelectionBoxTool.js";
+import {createPanTool} from "./createPanTool.js";
+import {OperationRouter} from "./OperationRouter.js";
+import {decodeMouseEventButtons} from "../../../input/devices/mouse/decodeMouseEventButtons.js";
+import {createCurveUploader} from "./createCurveUploader.js";
+
+
+const graphToolType = ({
+    SELECT: "select",
+    PAN: "pan",
+});
+
+export class CurveEditorView extends EmptyView{
+    /**
+     *
+     * @param {AnimationCurve} curve
+     * @param {Vector2} [size]
+     * @param {Vector2} [margin] How much space to leave empty around the plotted bounds
+     * @param {boolean} [enableEdit]
+     * @param {AABB2} [validEditableBounds]
+     * @param {ActionProcessor} [actionProcessor]
+     */
+    constructor({
+                    curve,
+                    size = new Vector2(400, 400),
+                    margin = new Vector2(46, 46),
+                    enableEdit= true,
+                    validEditableBounds = new AABB2(-Infinity,-Infinity,Infinity,Infinity),
+                    actionProcessor = new ActionProcessor({})
+                }) {
+        super({
+            css: {
+                pointerEvents: "auto",
+                outline: 'none',
+                overflow: 'hidden',
+                position: 'relative'
+            }
+        });
+        this.curve = curve;
+        this.size.copy(size);
+        this.margin = margin;
+        this.enableEdit = enableEdit;
+        this.validEditableBounds = validEditableBounds;
+        this.actionProcessor = actionProcessor;
+
+        this.gridSpacing = 32;
+        this.zoomLevel = 1;
+
+        this.build();
+    }
+
+    build() {
+        this.el.setAttribute('tabindex', '-1'); //allow programmatic focus only
+
+        // ---- Interface Setup
+        const graph = new CanvasView();
+        graph.size.copy(this.size);
+
+        const frameRegion = new AABB2();
+        const offset = 0.5;
+        //Initialize the frameRegion size
+        if (this.curve.length > 1) {
+            animation_curve_compute_aabb(frameRegion, this.curve);
+            if (frameRegion.y0 === frameRegion.y1) {
+                frameRegion.y0 -= offset
+                frameRegion.y1 += offset
+            }
+        }
+        else {
+            const key = this.curve.keys?.[0]
+            frameRegion.set(
+                key ? key.time - offset : 0,
+                key ? key.value - offset : 0,
+                key ? key.time + offset : 1,
+                key ? key.value + offset : 1
+            );
+        }
+
+        const keyCoordinateDisplay = createKeyCoordinateLabelView();
+
+        // ---- Triggers
+        const frameUpdated = new Signal();
+        const keyframeChange = new Signal();
+        const curveUploadChange = createCurveUploader(this.el);
+
+        // ---- Keyboard Startup
+        const keyboardElement = new KeyboardDevice(this.el);
+        keyboardElement.start();
+
+        // Todo maybe have const uiStateManager = new UIContext(curve, size, margin, frameRegion, validEditableBounds)
+        const keyframeStateManager = new KeyframeStateManager();
+
+        // ----
+        const actionProcessorCTX = new keyframesContext({
+            curve: this.curve,
+            removeKeyframe: removeKeyframe,
+            addKeyframe: addKeyframe,
+            keyframeViews: keyframeStateManager.keyframeViews,
+            activeKeyframe: keyframeStateManager.observedActiveKeyframe,
+            selectedKeyframes: keyframeStateManager.selectedKeyframes,
+            handleCurveUpdate: handleCurveUpdate,
+            updateGraph: updateGraph
+        });
+
+        const self = this;
+
+        function reinitCurve(newCurve) {
+            self.curve.keys.forEach(removeKeyframe);
+            self.curve.copy(newCurve)
+            self.curve.keys.forEach(addKeyframe);
+
+            handleCurveUpdate();
+        }
+
+        function handleCurveUpdate() {
+            frameUpdated.send0();
+            updateGraph();
+        }
+
+        function updateGraph() {
+
+            canvas2dPlotCurveLine({
+                curve: self.curve,
+                ctx: graph.context2d,
+                width: graph.size.x,
+                height: graph.size.y,
+                margin: self.margin,
+                range_y: [frameRegion.y0, frameRegion.y1],
+                range_x: [frameRegion.x0, frameRegion.x1],
+                spacing: self.gridSpacing
+            });
+        }
+
+        handleCurveUpdate()
+        /**
+         *
+         * @param {Keyframe} keyframe
+         */
+        function addKeyframe(keyframe) {
+
+            const vContainerMarker = new EmptyView({
+                css: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    pointerEvents: "none"
+                }
+            });
+
+            const marker = createKeyframeMarker();
+
+            const fnUpdateMarkerPosition = () => updateMarkerPosition(graph, frameRegion, self.margin, keyframe, vContainerMarker);
+
+            const fnUpdateMarkerVisual = () => updateMarkerVisual(keyframeStateManager, keyframe, vTangentEditor, marker);
+
+            if (self.enableEdit) {
+                const markerElement = marker.el;
+
+                const draggable = createKeyframeDraggableAspect({
+                    markerElement: markerElement,
+                    graph: graph,
+                    frame: frameRegion,
+                    margin: self.margin,
+                    validEditableBounds: self.validEditableBounds,
+                    curve: self.curve,
+                    fnUpdateGraph: updateGraph,
+                    keyframe: keyframe,
+                    selectedKeyframes: keyframeStateManager.selectedKeyframes,
+                    activeKeyframe: keyframeStateManager.observedActiveKeyframe,
+                    keyCoordinateDisplay: keyCoordinateDisplay,
+                    fnUpdateMarkerPosition: fnUpdateMarkerPosition,
+                    frameUpdated: frameUpdated,
+                    keyframeChange: keyframeChange,
+                    vContainer: self,
+                    actionProcessor: self.actionProcessor,
+                    actionProcessorCTX: actionProcessorCTX
+                });
+
+                draggable.getPointer().on.down.add(() => {
+                    handleKeyframeSelectedByDevice(keyboardElement, keyframe, self.actionProcessor, actionProcessorCTX, keyframeStateManager);
+                });
+
+                marker.on.linked.add(draggable.start, draggable);
+                marker.on.unlinked.add(draggable.stop, draggable);
+            }
+
+            marker.bindSignal(frameUpdated, fnUpdateMarkerPosition);
+            marker.bindSignal(keyframeStateManager.observedActiveKeyframe.onChanged, fnUpdateMarkerVisual);
+            marker.bindSignal(keyframeStateManager.selectedKeyframes.on.added, fnUpdateMarkerVisual);
+            marker.bindSignal(keyframeStateManager.selectedKeyframes.on.removed, fnUpdateMarkerVisual);
+
+            const vTangentEditor = build_tangent_editor({
+                keyframe: keyframe,
+                size: graph.size,
+                ctx: graph.context2d,
+                frame: frameRegion,
+                margin: self.margin,
+                enableTangentAlignment: keyframeStateManager.tangentAlignmentEnabled,
+                cbFnCurveUpdate: updateGraph,
+                funcTrigger: keyframeChange,
+                actionProcessor: self.actionProcessor,
+                actionProcessorCTX: actionProcessorCTX
+            });
+
+            keyframeStateManager.keyframeViews.set(keyframe, vContainerMarker);
+
+            vContainerMarker.addChild(marker);
+            self.addChild(vContainerMarker);
+        }
+
+        function removeKeyframe(keyframe) {
+            const markerView = keyframeStateManager.keyframeViews.get(keyframe);
+            self.removeChild(markerView);
+
+            keyframeStateManager.keyframeViews.delete(keyframe)
+        }
+
+        graph.on.linked.add(() => {
+            this.curve.keys.forEach(addKeyframe);
+        });
+
+        graph.on.unlinked.add(() => {
+            this.curve.keys.forEach(removeKeyframe);
+        });
+
+        if (!this.enableEdit){
+            const labelReadOnly = buildReadOnlyDisplay();
+            this.addChild(labelReadOnly);
+        }
+
+        this.el.addEventListener(KeyboardEvents.KeyDown,  (event) => {
+            handleKeyDownEvents(
+                event,
+                keyboardElement,
+                this.curve,
+                keyframeStateManager,
+                this.actionProcessor,
+                actionProcessorCTX
+            );
+        });
+
+        const graphPointer = new PointerDevice(this.el);
+            this.on.linked.add(graphPointer.start, graphPointer);
+            this.on.unlinked.add(graphPointer.stop, graphPointer);
+
+        const selectionBoxTool = new createSelectionBoxTool({
+            keyframeStateManager: keyframeStateManager,
+            graph: graph,
+            frame: frameRegion,
+            margin: this.margin,
+            fnUpdate: updateGraph,
+            actionProcessor: this.actionProcessor,
+            actionCTX: actionProcessorCTX
+        })
+        const panTool = new createPanTool({
+            graph: graph,
+            frame: frameRegion,
+            margin: this.margin,
+            fnUpdate: handleCurveUpdate,
+        })
+        const graphToolList = {
+            [graphToolType.SELECT]: selectionBoxTool,
+            [graphToolType.PAN]: panTool,
+        }
+
+        const operationRouter = new OperationRouter(graphPointer, (event) => {
+            if (decodeMouseEventButtons(event.buttons)[0] && this.enableEdit) return graphToolList[graphToolType.SELECT];
+            if (decodeMouseEventButtons(event.buttons)[1]) return graphToolList[graphToolType.PAN];
+            return null;
+        });
+
+        this.el.addEventListener(MouseEvents.Down, (e) => {
+            handleMouseDownEvents(e, graph, keyboardElement, this.actionProcessor, actionProcessorCTX, keyframeStateManager);
+        });
+
+        if (this.enableEdit) {
+            //create new keyframe at location
+            this.el.addEventListener(MouseEvents.DoubleClick, (e) => {
+                handleMouseDoubleClickEvents(e, this, graph, frameRegion, this.margin, this.curve, this.validEditableBounds, this.actionProcessor, actionProcessorCTX);
+            });
+        }
+
+        this.el.addEventListener(MouseEvents.Wheel, (e) => {
+            const zoomFactor = e.deltaY < 0 ? 1.2 : 1/1.2;
+            this.zoomLevel *= zoomFactor;
+
+            //Reminder: apply vertical flip to Y axis for graph coordinates
+            const cursorToGraphPos = new Vector2(e.x - this.margin.x, (graph.size.y - this.margin.y) - e.y);
+            const newX = updateAxisRange(graph.size.x - this.margin.x * 2, cursorToGraphPos.x, frameRegion.x0, frameRegion.x1, zoomFactor);
+            const newY = updateAxisRange(graph.size.y - this.margin.y * 2, cursorToGraphPos.y, frameRegion.y0, frameRegion.y1, zoomFactor);
+
+            frameRegion.set(newX[0], newY[0], newX[1], newY[1]);
+
+            this.gridSpacing = determineUnitSpacing(graph.size.x - this.margin.x * 2, this.zoomLevel);
+            handleCurveUpdate();
+            },
+            {passive: true});
+
+        graph.on.linked.add(handleCurveUpdate);
+        // graph.bindSignal(curveUploadChange, handleCurveUpdate);
+        graph.bindSignal(curveUploadChange, (data) => reinitCurve(data));
+
+        displayMousePos.call(this, graph, frameRegion);
+
+        this.addChild(graph);
+    }
+}

package/src/engine/animation/curve/editor/DragHandler.d.ts

@@ -0,0 +1,17 @@
+export class DragHandler {
+    /**
+     *
+     * @param {function} [dragStart=noop]
+     * @param {(position:Vector2,delta:Vector2)=>*} [drag=noop]
+     * @param {function} [dragEnd=noop]
+     */
+    constructor({ dragStart, drag, dragEnd }?: Function);
+    dragStartCallback: any;
+    dragCallback: any;
+    dragEndCallback: any;
+    active: boolean;
+    start(position: any): void;
+    drag(position: any, delta: any): void;
+    end(position: any): void;
+}
+//# sourceMappingURL=DragHandler.d.ts.map

package/src/engine/animation/curve/editor/DragHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandler.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/DragHandler.js"],"names":[],"mappings":"AAEA;IACI;;;;;OAKG;IACH,qDAMC;IALG,uBAAkC;IAClC,kBAAwB;IACxB,qBAA8B;IAE9B,gBAAmB;IAGvB,2BAGC;IAED,sCAIC;IAED,yBAKC;CACJ"}

package/src/engine/animation/curve/editor/DragHandler.js

@@ -0,0 +1,35 @@
+import {noop} from "../../../../core/function/noop.js";
+
+export class DragHandler {
+    /**
+     *
+     * @param {function} [dragStart=noop]
+     * @param {(position:Vector2,delta:Vector2)=>*} [drag=noop]
+     * @param {function} [dragEnd=noop]
+     */
+    constructor({dragStart = noop, drag = noop, dragEnd = noop}) {
+        this.dragStartCallback = dragStart;
+        this.dragCallback = drag;
+        this.dragEndCallback = dragEnd;
+
+        this.active = false;
+    }
+
+    start(position) {
+        this.active = true;
+        this.dragStartCallback(position);
+    }
+
+    drag(position, delta) {
+        if (!this.active) return;
+
+        this.dragCallback(position, delta);
+    }
+
+    end(position) {
+        if (!this.active) return;
+
+        this.active = false;
+        this.dragEndCallback(position);
+    }
+}

package/src/engine/animation/curve/editor/KeyframeStateManager.d.ts

@@ -0,0 +1,33 @@
+export class KeyframeStateManager {
+    /**
+     * Currently focused (active) keyframe.
+     * @type {ObservedValue<Keyframe>}
+     */
+    observedActiveKeyframe: any;
+    /**
+     * Store currently selected keyframe(s)
+     * @type {List}
+     */
+    selectedKeyframes: List<any>;
+    /**
+     * Target state for keyframe selection action processor
+     * @type {List}
+     */
+    curKeyframeList: List<any>;
+    /**
+     * Snapshot of state prior to keyframe selection action processor
+     * @type {List}
+     */
+    prevKeyframeList: List<any>;
+    keyframeViews: Map<any, any>;
+    /**
+     * Boolean for tangent alignment: free (False) or match (True)
+     * @type {ObservedBoolean}
+     */
+    tangentAlignmentEnabled: ObservedBoolean;
+    NULL_KEYFRAME: Keyframe;
+}
+import List from "../../../../core/collection/list/List.js";
+import ObservedBoolean from "../../../../core/model/ObservedBoolean.js";
+import { Keyframe } from "../Keyframe.js";
+//# sourceMappingURL=KeyframeStateManager.d.ts.map

package/src/engine/animation/curve/editor/KeyframeStateManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyframeStateManager.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/KeyframeStateManager.js"],"names":[],"mappings":"AAKA;IAEQ;;;OAGG;IACH,4BAAiD;IACjD;;;OAGG;IACH,6BAA+B;IAC/B;;;OAGG;IACH,2BAA6B;IAC7B;;;OAGG;IACH,4BAA8B;IAE9B,6BAA0B;IAE1B;;;OAGG;IACH,yBAFU,eAAe,CAEuB;IAGhD,wBAA8B;CACrC;iBApCgB,0CAA0C;4BAC/B,2CAA2C;yBAHhD,gBAAgB"}

package/src/engine/animation/curve/editor/KeyframeStateManager.js

@@ -0,0 +1,39 @@
+import {Keyframe} from "../Keyframe.js";
+import ObservedValue from "../../../../core/model/ObservedValue.js";
+import List from "../../../../core/collection/list/List.js";
+import ObservedBoolean from "../../../../core/model/ObservedBoolean.js";
+
+export class KeyframeStateManager {
+
+        /**
+         * Currently focused (active) keyframe.
+         * @type {ObservedValue<Keyframe>}
+         */
+        observedActiveKeyframe = new ObservedValue(null);
+        /**
+         * Store currently selected keyframe(s)
+         * @type {List}
+         */
+        selectedKeyframes = new List();
+        /**
+         * Target state for keyframe selection action processor
+         * @type {List}
+         */
+        curKeyframeList = new List();
+        /**
+         * Snapshot of state prior to keyframe selection action processor
+         * @type {List}
+         */
+        prevKeyframeList = new List();
+
+        keyframeViews = new Map();
+
+        /**
+         * Boolean for tangent alignment: free (False) or match (True)
+         * @type {ObservedBoolean}
+         */
+        tangentAlignmentEnabled = new ObservedBoolean();
+
+        // Constants
+        NULL_KEYFRAME = new Keyframe()
+}

package/src/engine/animation/curve/editor/OperationRouter.d.ts

@@ -0,0 +1,18 @@
+/**
+ *  Decide and execute the operation based on pointer device events
+ */
+export class OperationRouter {
+    /**
+     *
+     * @param {PointerDevice} pointerDevice
+     * @param {function} resolveOperation
+     */
+    constructor(pointerDevice: PointerDevice, resolveOperation: Function);
+    pointer: PointerDevice;
+    resolveOperation: Function;
+    activeOperation: any;
+    start(position: any, event: any): void;
+    run(position: any, origin: any, last: any, event: any): void;
+    stop(position: any, event: any): void;
+}
+//# sourceMappingURL=OperationRouter.d.ts.map

package/src/engine/animation/curve/editor/OperationRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationRouter.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/OperationRouter.js"],"names":[],"mappings":"AAAA;;GAEG;AACH;IACI;;;;OAIG;IACH,sEASC;IARG,uBAA4B;IAC5B,2BAAwC;IACxC,qBAA2B;IAQ/B,uCAQC;IAED,6DAKC;IAED,sCAKC;CACJ"}

package/src/engine/animation/curve/editor/OperationRouter.js

@@ -0,0 +1,44 @@
+/**
+ *  Decide and execute the operation based on pointer device events
+ */
+export class OperationRouter {
+    /**
+     *
+     * @param {PointerDevice} pointerDevice
+     * @param {function} resolveOperation
+     */
+    constructor(pointerDevice, resolveOperation) {
+        this.pointer = pointerDevice;
+        this.resolveOperation = resolveOperation;
+        this.activeOperation = null;
+
+        this.pointer.on.down.add(this.start, this);
+        this.pointer.on.drag.add(this.run, this);
+        this.pointer.on.up.add(this.stop, this);
+        this.pointer.on.dragEnd.add(this.stop, this);
+    }
+
+    start(position, event) {
+        if (this.activeOperation) return;
+
+        const operation = this.resolveOperation(event);
+        if (!operation) return;
+
+        this.activeOperation = operation;
+        this.activeOperation.start(position, event);
+    }
+
+    run(position, origin, last, event) {
+        if (!this.activeOperation) return;
+
+        const delta = position.clone().sub(last);
+        this.activeOperation.drag(position, delta, event);
+    }
+
+    stop(position, event) {
+        if (!this.activeOperation) return;
+
+        this.activeOperation.end(position, event);
+        this.activeOperation = null;
+    }
+}

package/src/engine/animation/curve/editor/canvas2dDrawWorldAxisLabels.d.ts

@@ -0,0 +1,14 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} position_x0
+ * @param {number} position_y0
+ * @param {number} position_x1
+ * @param {number} position_y1
+ * @param {number} spacing
+ * @param {number} value_0
+ * @param {number} value_1
+ * @param {number} valueStep
+ */
+export function canvas2dDrawWorldAxisLabels({ ctx, position_x0, position_y0, position_x1, position_y1, spacing, value_0, value_1, valueStep }: CanvasRenderingContext2D): void;
+//# sourceMappingURL=canvas2dDrawWorldAxisLabels.d.ts.map

package/src/engine/animation/curve/editor/canvas2dDrawWorldAxisLabels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2dDrawWorldAxisLabels.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/canvas2dDrawWorldAxisLabels.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,+IAVW,wBAAwB,QAwDlC"}

package/src/engine/animation/curve/editor/canvas2dDrawWorldAxisLabels.js

@@ -0,0 +1,63 @@
+import {canvas2d_draw_label} from "../../../graphics/canvas/canvas2d_draw_label.js";
+import {formatTruncDecimal} from "./formatTruncDecimal.js";
+import {v2_length} from "../../../../core/geom/vec2/v2_length.js";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} position_x0
+ * @param {number} position_y0
+ * @param {number} position_x1
+ * @param {number} position_y1
+ * @param {number} spacing
+ * @param {number} value_0
+ * @param {number} value_1
+ * @param {number} valueStep
+ */
+export function canvas2dDrawWorldAxisLabels({
+                                               ctx,
+                                               position_x0, position_y0,
+                                               position_x1, position_y1,
+                                               spacing = 10,
+                                               value_0, value_1,
+                                               valueStep
+                                           }) {
+
+    if (spacing <= 0) {
+        throw new Error(`Spacing must be greater than 0`);
+    }
+
+    // compute direction vector
+    const delta_x = position_x1 - position_x0;
+    const delta_y = position_y1 - position_y0;
+
+    const distance = v2_length(delta_x, delta_y);
+
+    if (distance === 0) {
+        throw new Error(`Distance must be greater than 0`);
+    }
+
+    const direction_x = delta_x / distance;
+    const direction_y = delta_y / distance;
+
+    // number of marks
+    const mark_count = Math.ceil(distance / spacing);
+
+    for (let i = 0; i <= mark_count; i++) {
+        const offset = spacing * i;
+
+        const point_x = position_x0 + direction_x * offset;
+        const point_y = position_y0 + direction_y * offset;
+
+        // compute label value based on valueStep
+        const value = value_0 + i * valueStep;
+
+        canvas2d_draw_label({
+            ctx,
+            text: formatTruncDecimal(value),
+            x: point_x,
+            y: point_y
+        });
+    }
+
+}

package/src/engine/animation/curve/editor/canvas2dDrawWorldGrid.d.ts

@@ -0,0 +1,28 @@
+/**
+ *
+ * @param ctx
+ * @param {number} width
+ * @param {number} height
+ * @param {string} [color] CSS color specification
+ * @param {number} spacingX distance between grid lines for x-axis
+ * @param {number} spacingY distance between grid lines for y-axis
+ * @param {number} offsetX
+ * @param {number} offsetY
+ * @param {number[]} valueRangeX
+ * @param {number[]} valueRangeY
+ * @param {number} thickness
+ */
+export function canvas2dDrawWorldGrid({ ctx, width, height, color, spacingX, spacingY, offsetX, offsetY, valueRangeX, valueRangeY, thickness }: {
+    ctx: any;
+    width: any;
+    height: any;
+    color?: string;
+    spacingX?: number;
+    spacingY?: number;
+    offsetX?: number;
+    offsetY?: number;
+    valueRangeX?: number[];
+    valueRangeY?: number[];
+    thickness?: number;
+}): void;
+//# sourceMappingURL=canvas2dDrawWorldGrid.d.ts.map

package/src/engine/animation/curve/editor/canvas2dDrawWorldGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2dDrawWorldGrid.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/canvas2dDrawWorldGrid.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH;;;;;;;;;;;;SAuDC"}