@woosh/meep-engine 2.131.35 → 2.131.37

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

@@ -0,0 +1,70 @@
+/**
+ *
+ * @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 = 'red',
+                                                   spacingX = 10,
+                                                   spacingY = 10,
+                                                   offsetX = 0,
+                                                   offsetY = 0,
+                                                   valueRangeX = [0,10],
+                                                   valueRangeY = [0,10],
+                                                   thickness = 1
+                                               }) {
+    ctx.fillStyle = 'none';
+    ctx.lineWidth = thickness;
+    ctx.strokeStyle = color;
+
+    const [xMin, xMax] = valueRangeX;
+    const [yMin, yMax] = valueRangeY;
+
+    const plotWidth = width - offsetX * 2;
+    const plotHeight = height - offsetY * 2;
+
+    const xPixelPerUnit = plotWidth / (xMax - xMin);
+    const xStepPerGrid = spacingX / xPixelPerUnit; // convert pixel spacing → world spacing
+
+    const yPixelPerUnit = plotHeight / (yMax - yMin);
+    const yStepPerGrid = spacingY / yPixelPerUnit; // convert pixel spacing → world spacing
+
+    // find first visible grid line
+    const firstX = Math.ceil(xMin / xStepPerGrid) * xStepPerGrid;
+    const firstY = Math.ceil(yMin / yStepPerGrid) * yStepPerGrid;
+
+    ctx.beginPath();
+
+    ctx.moveTo(offsetX, 0);
+    ctx.lineTo(offsetX, height);
+    ctx.moveTo(0, height - offsetY);
+    ctx.lineTo(width, height - offsetY);
+
+    for (let x = firstX; x <= xMax; x += xStepPerGrid)
+    {
+        const xScreen = offsetX + (x - xMin) * xPixelPerUnit;
+        ctx.moveTo(xScreen, 0);
+        ctx.lineTo(xScreen, offsetX + plotHeight);
+    }
+
+    for (let y = firstY; y <= yMax; y += yStepPerGrid)
+    {
+        const yScreen = offsetY + (yMax - y) * yPixelPerUnit;
+        ctx.moveTo(offsetX, yScreen);
+        ctx.lineTo(width, yScreen);
+    }
+
+    ctx.stroke();
+}

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

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {AnimationCurve} curve
+ * @param {Vector2} [margin]
+ * @param {number} width
+ * @param {number} height
+ * @param {number[]} [range_y]
+ * @param {number[]} range_x
+ * @param {number} spacing
+ */
+export function canvas2dPlotCurveLine({ ctx, curve, margin, width, height, range_y, range_x, spacing }: CanvasRenderingContext2D): void;
+//# sourceMappingURL=canvas2dPlotCurveLine.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2dPlotCurveLine.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/canvas2dPlotCurveLine.js"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,wGATW,wBAAwB,QA4GlC"}

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

@@ -0,0 +1,116 @@
+import Vector2 from "../../../../core/geom/Vector2.js";
+import {canvas2dPlotCurvePoints} from "./canvas2dPlotCurvePoints.js";
+import {canvas2dDrawWorldAxisLabels} from "./canvas2dDrawWorldAxisLabels.js";
+import {canvas2dDrawWorldGrid} from "./canvas2dDrawWorldGrid.js";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {AnimationCurve} curve
+ * @param {Vector2} [margin]
+ * @param {number} width
+ * @param {number} height
+ * @param {number[]} [range_y]
+ * @param {number[]} range_x
+ * @param {number} spacing
+ */
+export function canvas2dPlotCurveLine({
+                                            ctx,
+                                            curve,
+                                            margin = Vector2.zero,
+                                            width,
+                                            height,
+                                            range_y,
+                                            range_x,
+                                            spacing= 32
+                                        }) {
+
+    ctx.fillStyle = '#222222';
+    ctx.fillRect(0, 0, width, height);
+
+    const dataX0 = range_x[0];
+    const dataX1 = range_x[1];
+    const dataY0 = range_y[0];
+    const dataY1 = range_y[1];
+
+    canvas2dDrawWorldGrid({
+        ctx,
+        width,
+        height,
+        color: '#262626',
+        spacingX: spacing * 0.25,
+        spacingY: spacing * 0.25,
+        offsetX: margin.x,
+        offsetY: margin.y,
+        valueRangeX: range_x,
+        valueRangeY: range_y
+    })
+    canvas2dDrawWorldGrid({
+        ctx,
+        width,
+        height,
+        color: '#303030',
+        spacingX: spacing,
+        spacingY: spacing,
+        offsetX: margin.x,
+        offsetY: margin.y,
+        valueRangeX: range_x,
+        valueRangeY: range_y
+    })
+
+    const plotWidth = width - margin.x * 2;
+
+    const xPixelPerUnit = plotWidth / (dataX1 - dataX0);
+    const xStepPerGrid = spacing / xPixelPerUnit; // convert pixel spacing → world spacing
+
+    const xLabelSkip = 2; // draw every 2nd grid line
+    const xStepPerLabel = xStepPerGrid * xLabelSkip;
+
+    const xFirstLabel = Math.ceil(dataX0 / xStepPerLabel) * xStepPerLabel;
+    const xFirstLabelPixel = (xFirstLabel - dataX0) * xPixelPerUnit;
+    canvas2dDrawWorldAxisLabels({
+        ctx,
+        position_x0: margin.x + xFirstLabelPixel,
+        position_x1: width - margin.x,
+        position_y0: height - 4,
+        position_y1: height - 4,
+        spacing: spacing * xLabelSkip,  // pixels between labels
+        value_0: xFirstLabel,           // world value for first label
+        value_1: dataX1,
+        valueStep: xStepPerLabel,       // world units per label
+    });
+
+    const plotHeight = height - margin.y * 2;
+
+    const yPixelPerUnit = plotHeight / (dataY1 - dataY0);
+    const yStepPerGrid = spacing / yPixelPerUnit; // convert pixel spacing → world spacing
+
+    const yLabelSkip = 2; // draw every 2nd grid line
+    const yStepPerLabel = yStepPerGrid * yLabelSkip;
+
+    const yFirstLabel = Math.ceil(dataY0 / yStepPerLabel) * yStepPerLabel;
+    const yFirstLabelPixel = (dataY1 - yFirstLabel) * yPixelPerUnit;
+    canvas2dDrawWorldAxisLabels({
+        ctx,
+        position_x0: 4,
+        position_x1: 4,
+        position_y0: margin.y + yFirstLabelPixel,
+        position_y1: margin.y,
+        spacing: spacing * yLabelSkip,  // pixels between labels
+        value_0: yFirstLabel,           // world value for first label
+        value_1: dataY1,
+        valueStep: yStepPerLabel,       // world units per label
+    });
+
+    ctx.fillStyle = 'none';
+    ctx.strokeStyle = '#00ff00';
+    ctx.lineWidth = 1;
+    canvas2dPlotCurvePoints({
+        ctx,
+        curve,
+        dimension: new Vector2(width, height),
+        offset: new Vector2(margin.x, margin.y),
+        rangeX: range_x,
+        rangeY: range_y
+    });
+}

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

@@ -0,0 +1,11 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {AnimationCurve} curve
+ * @param {Vector2} dimension
+ * @param {Vector2} offset
+ * @param {number[]} rangeX
+ * @param {number[]} rangeY
+ */
+export function canvas2dPlotCurvePoints({ ctx, curve, dimension, offset, rangeX, rangeY }: CanvasRenderingContext2D): void;
+//# sourceMappingURL=canvas2dPlotCurvePoints.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas2dPlotCurvePoints.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/canvas2dPlotCurvePoints.js"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,2FAPW,wBAAwB,QAgElC"}

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

@@ -0,0 +1,69 @@
+import {Vector2} from "three";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {AnimationCurve} curve
+ * @param {Vector2} dimension
+ * @param {Vector2} offset
+ * @param {number[]} rangeX
+ * @param {number[]} rangeY
+ */
+export function canvas2dPlotCurvePoints({
+                                            ctx,
+                                            curve,
+                                            dimension,
+                                            offset,
+                                            rangeX= [0, 1],
+                                            rangeY= [0, 1]
+                                        }) {
+    const keyframes = curve.keys;
+    // No data
+    if (keyframes.length === 0)
+        return;
+
+    const [minX, maxX] = rangeX;
+    const [minY, maxY] = rangeY;
+
+    const firstKeyTime = keyframes[0].time;
+    const lastKeyTime = keyframes[keyframes.length - 1].time;
+
+    const axisSize = new Vector2(
+        dimension.x - offset.x * 2,
+        dimension.y - offset.y * 2
+    );
+
+    const timeRange = maxX - minX
+    const valueRange = maxY - minY
+
+    const inverseTimeRange = timeRange !== 0 ? 1 / timeRange : 0;
+    const inverseValueRange = valueRange !== 0 ? 1 / valueRange : 0;
+
+    const pixelCountX = Math.max(axisSize.x - 1 , 1);
+    const timeStep = timeRange * (1 / pixelCountX)
+
+    ctx.beginPath();
+    let started = false
+    const offScreenMargin = 50
+    for (let i = 0; i < dimension.x; i++) {
+        const t = minX + (i * timeStep) - (offset.x * timeStep);
+        if (t < firstKeyTime || t > lastKeyTime)
+            continue;
+
+        const value = curve.evaluate(t);
+
+        const normY = (value - minY) * inverseValueRange
+        const normX = (t - minX) * inverseTimeRange
+
+        const y = (1 - normY) * axisSize.y + offset.y
+        const x = normX * axisSize.x + offset.x
+
+        if (x >= -offScreenMargin && !started) {
+            ctx.moveTo(x, y);
+            started = true
+        }
+        else
+            ctx.lineTo(x,y);
+    }
+    ctx.stroke()
+}

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

@@ -0,0 +1,8 @@
+/**
+ * Create upload to get curve data and trigger a signal
+ * @param {HTMLElement} el
+ * @returns {Signal}
+ */
+export function createCurveUploader(el: HTMLElement): Signal;
+import Signal from "../../../../core/events/signal/Signal.js";
+//# sourceMappingURL=createCurveUploader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCurveUploader.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/createCurveUploader.js"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wCAHW,WAAW,GACT,MAAM,CAiBlB;mBAxBkB,0CAA0C"}

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

@@ -0,0 +1,25 @@
+import Signal from "../../../../core/events/signal/Signal.js";
+import {uploadViaElement} from "./uploadViaElement.js";
+import {AnimationCurve} from "../AnimationCurve.js";
+
+/**
+ * Create upload to get curve data and trigger a signal
+ * @param {HTMLElement} el
+ * @returns {Signal}
+ */
+export function createCurveUploader(el) {
+    const onCurveChange = new Signal();
+
+    let curve = new AnimationCurve();
+    uploadViaElement(el, (text) => {
+        try {
+            const importedCurve = JSON.parse(text);
+            curve.fromJSON(importedCurve);
+            onCurveChange.send1(curve);
+        } catch (err) {
+            console.error("Invalid JSON curve file:", err);
+        }
+    });
+
+    return onCurveChange;
+}

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

@@ -0,0 +1,3 @@
+export function createKeyCoordinateLabelView(): LabelView;
+import LabelView from "../../../../view/common/LabelView.js";
+//# sourceMappingURL=createKeyCoordinateLabelView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createKeyCoordinateLabelView.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/createKeyCoordinateLabelView.js"],"names":[],"mappings":"AAGA,0DAWC;sBAdqB,sCAAsC"}

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

@@ -0,0 +1,15 @@
+import LabelView from "../../../../view/common/LabelView.js";
+import {CSS_ABSOLUTE_POSITIONING} from "../../../../view/CSS_ABSOLUTE_POSITIONING.js";
+
+export function createKeyCoordinateLabelView() {
+    return new LabelView("", {
+        css: {
+            ...CSS_ABSOLUTE_POSITIONING,
+            zIndex: 1000,
+            background: `rgba(0, 0, 0, 0.4)`,
+            padding: '4px 6px',
+            color: 'white',
+            font: '12px Tahoma, monospaced'
+        }
+    });
+}

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

@@ -0,0 +1,24 @@
+/**
+ *
+ * @param {element} markerElement
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {AABB2} validEditableBounds
+ * @param {AnimationCurve} curve
+ * @param {function} fnUpdateGraph
+ * @param {Keyframe} keyframe
+ * @param {List} selectedKeyframes
+ * @param {ObservedValue} activeKeyframe
+ * @param {LabelView} keyCoordinateDisplay
+ * @param {function} fnUpdateMarkerPosition
+ * @param {Signal} frameUpdated
+ * @param {Signal} keyframeChange
+ * @param {EmptyView} vContainer
+ * @param {ActionProcessor} actionProcessor
+ * @param {keyframesContext} actionProcessorCTX
+ * @returns {DraggableAspect}
+ */
+export function createKeyframeDraggableAspect({ markerElement, graph, frame, margin, validEditableBounds, curve, fnUpdateGraph, keyframe, selectedKeyframes, activeKeyframe, keyCoordinateDisplay, fnUpdateMarkerPosition, frameUpdated, keyframeChange, vContainer, actionProcessor, actionProcessorCTX }: element): DraggableAspect;
+import { DraggableAspect } from "../../../ui/DraggableAspect.js";
+//# sourceMappingURL=createKeyframeDraggableAspect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createKeyframeDraggableAspect.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/createKeyframeDraggableAspect.js"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,sTAFa,eAAe,CA0F3B;gCApH6B,gCAAgC"}

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

@@ -0,0 +1,142 @@
+import {AnimationCurve} from "../AnimationCurve.js";
+import {DraggableAspect} from "../../../ui/DraggableAspect.js";
+import {position_canvas_to_curve} from "../draw/position_canvas_to_curve.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+import {updateKeyframePosition} from "./updateKeyframePosition.js";
+import {number_pretty_print} from "../../../../core/primitives/numbers/number_pretty_print.js";
+import {applyActionMove} from "../actionProcessorOperations/applyActionChange.js";
+
+/**
+ *
+ * @param {element} markerElement
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {AABB2} validEditableBounds
+ * @param {AnimationCurve} curve
+ * @param {function} fnUpdateGraph
+ * @param {Keyframe} keyframe
+ * @param {List} selectedKeyframes
+ * @param {ObservedValue} activeKeyframe
+ * @param {LabelView} keyCoordinateDisplay
+ * @param {function} fnUpdateMarkerPosition
+ * @param {Signal} frameUpdated
+ * @param {Signal} keyframeChange
+ * @param {EmptyView} vContainer
+ * @param {ActionProcessor} actionProcessor
+ * @param {keyframesContext} actionProcessorCTX
+ * @returns {DraggableAspect}
+ */
+export function createKeyframeDraggableAspect({
+                                                  markerElement,
+                                                  graph,
+                                                  frame,
+                                                  margin,
+                                                  validEditableBounds,
+                                                  curve,
+                                                  fnUpdateGraph, keyframe,
+                                                  selectedKeyframes,
+                                                  activeKeyframe,
+                                                  keyCoordinateDisplay,
+                                                  fnUpdateMarkerPosition,
+                                                  frameUpdated,
+                                                  keyframeChange,
+                                                  vContainer,
+                                                  actionProcessor,
+                                                  actionProcessorCTX
+                                                }) {
+    const curveSet = {
+        curveStartIndices: new AnimationCurve(),
+        curveStartValues: new AnimationCurve(),
+        curveEndIndices: new AnimationCurve(),
+        curveEndValue: new AnimationCurve(),
+    }
+
+    return new DraggableAspect({
+        el: markerElement,
+        drag(position) {
+            const moveKeyframeToCoord = position_canvas_to_curve(
+                graph.size,
+                frame,
+                margin,
+                position.x,
+                position.y
+            );
+
+            if (isMovingOutOfBounds(moveKeyframeToCoord, keyframe, validEditableBounds, selectedKeyframes)) {
+                const deltaPosition = new Vector2(
+                    moveKeyframeToCoord.x - keyframe.time,
+                    moveKeyframeToCoord.y - keyframe.value
+                )
+
+                selectedKeyframes.forEach((selKf) => {
+                    if (activeKeyframe.get() !== selKf) {
+                        updateKeyframePosition(selKf, deltaPosition, curve);
+                    }
+                });
+
+                updateKeyframePosition(keyframe, deltaPosition, curve);
+            }
+
+            keyCoordinateDisplay.updateText(`${number_pretty_print(moveKeyframeToCoord.x)}, ${number_pretty_print(moveKeyframeToCoord.y)}`);
+            keyCoordinateDisplay.position.set(
+                position.x,
+                position.y - 24
+            );
+
+            fnUpdateMarkerPosition();
+            frameUpdated.send0();
+            fnUpdateGraph();
+
+            keyframeChange.send0();
+        },
+        dragStart() {
+            activeKeyframe.set(keyframe);
+
+            curveSet.curveStartIndices.clear()
+            curveSet.curveStartIndices.addMany(curve.keys)
+            curveSet.curveStartValues.copy(curve); //deep copy
+
+            vContainer.addChild(keyCoordinateDisplay);
+        },
+        dragEnd() {
+            curveSet.curveEndIndices.clear()
+            curveSet.curveEndIndices.addMany(curve.keys)
+            curveSet.curveEndValue.copy(curve); //deep copy
+
+            vContainer.removeChild(keyCoordinateDisplay);
+
+            //Reset back before action processor
+            for (let i = 0; i < curve.length; i++) {
+                curve.keys[i] = curveSet.curveStartIndices.keys[i];
+                curve.keys[i].copy(curveSet.curveStartValues.keys[i]);
+            }
+            applyActionMove('move keyframe(s)', curveSet, actionProcessor, actionProcessorCTX);
+
+        }
+    });
+}
+
+/**
+ * Check if new keyframe position is in the valid bounds
+ * @param {Vector2} newCoord
+ * @param {Keyframe} keyframe
+ * @param {AABB2} validBounds
+ * @param {List} selectedKeyframes
+ * @returns {boolean}
+ */
+function isMovingOutOfBounds(newCoord, keyframe, validBounds, selectedKeyframes) {
+    const transitionVector = newCoord.clone()._sub(keyframe.time, keyframe.value);
+
+    const isSelectionOutOfBound = (kf) => {
+        const adjustedCord = transitionVector.clone()._add(kf.time, kf.value);
+        return (!validBounds.containsPoint(adjustedCord.x, adjustedCord.y))
+    };
+
+    if (!validBounds.containsPoint(newCoord.x, newCoord.y)
+        || selectedKeyframes.some(isSelectionOutOfBound)) {
+        return false;
+    }
+    //all checks passed
+    return true;
+}

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

@@ -0,0 +1,2 @@
+export function createKeyframeMarker(): void;
+//# sourceMappingURL=createKeyframeMarker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createKeyframeMarker.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/createKeyframeMarker.js"],"names":[],"mappings":"AAEA,6CAQC"}

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

@@ -0,0 +1,42 @@
+import EmptyView from "../../../../view/elements/EmptyView.js";
+
+export function createKeyframeMarker(){
+    const markerSize = 8;
+    const markerHitPadSize = 24;
+
+    const markerView = createKeyframeMarkerView(markerSize)
+    const markerHitboxView = createKeyframeMarkerHitboxView(markerHitPadSize, markerSize)
+
+    return markerView.addChild(markerHitboxView)
+}
+
+function createKeyframeMarkerView(markerSize) {
+    return new EmptyView({
+        css: {
+            width: `${markerSize}px`,
+            height: `${markerSize}px`,
+            background: "#00ff00",
+            border: "none",
+            position: "absolute",
+            top: `-${markerSize / 2}px`,
+            left: `-${markerSize / 2}px`,
+            pointerEvents: "auto",
+            borderRadius: `${markerSize}px`
+        }
+    });
+}
+
+function createKeyframeMarkerHitboxView(markerHitPadSize, markerSize) {
+    return new EmptyView({
+        css: {
+            opacity: 100,
+            width: `${markerHitPadSize}px`,
+            height: `${markerHitPadSize}px`,
+            borderRadius: `${markerHitPadSize}px`,
+            // background: 'rgba(255,0,0,0.2)',
+            position: "absolute",
+            top: `-${(markerHitPadSize - markerSize) / 2}px`,
+            left: `-${(markerHitPadSize - markerSize) / 2}px`
+        }
+    });
+}

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

@@ -0,0 +1,11 @@
+/**
+ *
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {function} fnUpdate
+ * @returns {DragHandler}
+ */
+export function createPanTool({ graph, frame, margin, fnUpdate, }: CanvasView): DragHandler;
+import { DragHandler } from "./DragHandler.js";
+//# sourceMappingURL=createPanTool.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createPanTool.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/createPanTool.js"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,gFAFa,WAAW,CA6BvB;4BAtCyB,kBAAkB"}

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

@@ -0,0 +1,41 @@
+import Vector2 from "../../../../core/geom/Vector2.js";
+import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
+import {DragHandler} from "./DragHandler.js";
+import {position_canvas_to_curve} from "../draw/position_canvas_to_curve.js";
+
+/**
+ *
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {function} fnUpdate
+ * @returns {DragHandler}
+ */
+export function createPanTool({
+                                                      graph,
+                                                      frame,
+                                                      margin,
+                                                      fnUpdate,
+                                                  }) {
+
+    return new DragHandler({
+        dragStart(position) {
+            // console.log("start pan");
+        },
+        drag(position,delta) {
+            // console.log("panning");
+            const newPosition = position.clone();
+            const lastPosition = position.clone().add(delta);
+
+            const newCord = position_canvas_to_curve(graph.size, frame, margin, newPosition.x, newPosition.y);
+            const lastCord = position_canvas_to_curve(graph.size, frame, margin, lastPosition.x, lastPosition.y);
+            const deltaCord = newCord.clone().sub(lastCord);
+
+            frame.move(deltaCord.x,deltaCord.y);
+            fnUpdate();
+        },
+        dragEnd() {
+            // console.log("end pan");
+        }
+    });
+}

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

@@ -0,0 +1,14 @@
+/**
+ *
+ * @param {KeyframeStateManager} keyframeStateManager
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {function} fnUpdate
+ * @param {ActionProcessor} actionProcessor
+ * @param {keyframesContext} actionCTX
+ * @returns {DragHandler}
+ */
+export function createSelectionBoxTool({ keyframeStateManager, graph, frame, margin, fnUpdate, actionProcessor, actionCTX }: KeyframeStateManager): DragHandler;
+import { DragHandler } from "./DragHandler.js";
+//# sourceMappingURL=createSelectionBoxTool.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createSelectionBoxTool.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/createSelectionBoxTool.js"],"names":[],"mappings":"AAMA;;;;;;;;;;GAUG;AACH,oJAFa,WAAW,CA6EvB;4BAxFyB,kBAAkB"}