@woosh/meep-engine 2.131.34 → 2.131.36

package/src/engine/animation/curve/draw/displayMousePos.js

@@ -0,0 +1,41 @@
+import {PointerDevice} from "../../../input/devices/PointerDevice.js";
+import {position_canvas_to_curve} from "./position_canvas_to_curve.js";
+import LabelView from "../../../../view/common/LabelView.js";
+import {CSS_ABSOLUTE_POSITIONING} from "../../../../view/CSS_ABSOLUTE_POSITIONING.js";
+import {detectClosestCurveTimePoint} from "./isInjectedKeyframeInBounds.js";
+import {formatTruncDecimal} from "../editor/formatTruncDecimal.js";
+
+/**
+ * Display the mouse position in respect to the graph
+ * @param {CanvasView} graph
+ * @param {AABB2} frameRegion
+ */
+export function displayMousePos(graph, frameRegion) {
+    const myPointerGlobal = new PointerDevice(window);
+    myPointerGlobal.start();
+    myPointerGlobal.on.move.add((position, e) => {
+        const curveCord = position_canvas_to_curve(graph.size, frameRegion, this.margin, position.x, position.y)
+
+        let label = "x: --.--, y: --.--";
+        if (e.buttons === 0) {
+            const timeSplicePosition = detectClosestCurveTimePoint(this.curve, graph, frameRegion, this.margin, curveCord, position);
+            if (timeSplicePosition !== Infinity) {
+                label = `x: ${formatTruncDecimal(timeSplicePosition)}, y: ${formatTruncDecimal(this.curve.evaluate(timeSplicePosition))}`;
+            }
+        }
+
+        mouseCord.updateText(label)
+    });
+    const mouseCord = new LabelView("x: --.--, y: --.--", {
+        css: {
+            background: `rgba(0, 0, 0)`,
+            ...CSS_ABSOLUTE_POSITIONING,
+            color: 'white',
+            font: '12px Tahoma, monospaced',
+            top: '5px',
+            right: '5px',
+            left: 'auto'
+        }
+    });
+    this.addChild(mouseCord);
+}

package/src/engine/animation/curve/draw/isInjectedKeyframeInBounds.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Check if new keyframe is in valid bounds
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {AnimationCurve} curve
+ * @param {AABB2} validEditableBounds
+ * @param {Vector2} newCanvasPosition
+ * @param {Keyframe} newKeyframeContainer
+ * @returns {boolean}
+ */
+export function isInjectedKeyframeInBounds(graph: CanvasView, frame: AABB2, margin: Vector2, curve: AnimationCurve, validEditableBounds: AABB2, newCanvasPosition: Vector2, newKeyframeContainer: Keyframe): boolean;
+/**
+ *
+ * @param {AnimationCurve} curve
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {Vector2} curvePosition
+ * @param {Vector2} mousePosition
+ * @returns {number}
+ */
+export function detectClosestCurveTimePoint(curve: AnimationCurve, graph: CanvasView, frame: AABB2, margin: Vector2, curvePosition: Vector2, mousePosition: Vector2): number;
+import Vector2 from "../../../../core/geom/Vector2.js";
+import { Keyframe } from "../Keyframe.js";
+//# sourceMappingURL=isInjectedKeyframeInBounds.d.ts.map

package/src/engine/animation/curve/draw/isInjectedKeyframeInBounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isInjectedKeyframeInBounds.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/isInjectedKeyframeInBounds.js"],"names":[],"mappings":"AAQA;;;;;;;;;;GAUG;AACH,oFAPW,OAAO,wEAGP,OAAO,wBACP,QAAQ,GACN,OAAO,CAqBnB;AAED;;;;;;;;;GASG;AACH,4GALW,OAAO,iBACP,OAAO,iBACP,OAAO,GACL,MAAM,CAclB;oBAzDmB,kCAAkC;yBAJ/B,gBAAgB"}

package/src/engine/animation/curve/draw/isInjectedKeyframeInBounds.js

@@ -0,0 +1,93 @@
+import {position_canvas_to_curve} from "./position_canvas_to_curve.js";
+import {Keyframe} from "../Keyframe.js";
+import {assert} from "../../../../core/assert.js";
+import {animation_curve_subdivide} from "../animation_curve_subdivide.js";
+import {animation_curve_nearest_point} from "../animation_curve_nearest_point.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+import {position_curve_to_canvas} from "./position_curve_to_canvas.js";
+
+/**
+ * Check if new keyframe is in valid bounds
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {AnimationCurve} curve
+ * @param {AABB2} validEditableBounds
+ * @param {Vector2} newCanvasPosition
+ * @param {Keyframe} newKeyframeContainer
+ * @returns {boolean}
+ */
+export function isInjectedKeyframeInBounds(graph, frame, margin, curve, validEditableBounds, newCanvasPosition, newKeyframeContainer) {
+    const curvePosition = position_canvas_to_curve(graph.size, frame, margin, newCanvasPosition.x, newCanvasPosition.y);
+    const curveTimePos = curvePosition.x;
+
+    //New keyframe is within the curve range
+    const isWithinCurveTimeBounds = curveTimePos > curve.keys[0].time && curveTimePos < curve.keys[curve.length - 1].time
+    if (isWithinCurveTimeBounds) {
+        const timeSplicePosition = detectClosestCurveTimePoint(curve, graph, frame, margin, curvePosition, newCanvasPosition);
+        if (timeSplicePosition !== Infinity) {
+            acquireInjectedKeyframePosition(curve, timeSplicePosition, newKeyframeContainer);
+            return true;
+        }
+    } else if (validEditableBounds.containsPoint(curvePosition.x, curvePosition.y)) {
+        //New keyframe is within the bounds limit
+        newKeyframeContainer.time = curvePosition.x;
+        newKeyframeContainer.value = curvePosition.y;
+        return true;
+    }
+    return false;
+}
+
+/**
+ *
+ * @param {AnimationCurve} curve
+ * @param {CanvasView} graph
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {Vector2} curvePosition
+ * @param {Vector2} mousePosition
+ * @returns {number}
+ */
+export function detectClosestCurveTimePoint(curve, graph, frame, margin, curvePosition, mousePosition) {
+    const distTolerance = 10;
+
+    const nearestTimePoint = animation_curve_nearest_point(curve, curvePosition.x, curvePosition.y)
+    const foundCurvePoint = new Vector2(nearestTimePoint, curve.evaluate(nearestTimePoint));
+    const canvasPositionOfFoundCurvePoint = position_curve_to_canvas(graph.size, frame, margin, foundCurvePoint.x, foundCurvePoint.y)
+
+    let closestPoint = Infinity;
+    if (mousePosition.distanceTo(canvasPositionOfFoundCurvePoint) <= distTolerance) {
+        closestPoint = nearestTimePoint;
+    }
+    return closestPoint;
+}
+
+/**
+ *
+ * @param {AnimationCurve} curve
+ * @param {number} timeSplicePosition
+ * @param {Keyframe} newKeyframeContainer
+ */
+function acquireInjectedKeyframePosition(curve, timeSplicePosition, newKeyframeContainer) {
+    const prevKeyframeRef = new Keyframe();
+    const nextKeyframeRef = new Keyframe();
+
+    curve.keys.forEach((kf) => {
+        if (kf.time <= timeSplicePosition && kf.time >= prevKeyframeRef.time) {
+            prevKeyframeRef.copy(kf);
+        }
+        if (kf.time >= timeSplicePosition && nextKeyframeRef.time === 0) {
+            nextKeyframeRef.copy(kf);
+        }
+    });
+
+    assert.notEqual(nextKeyframeRef.time, 0, "Invalid next keyframe value");
+    assert.notEqual(prevKeyframeRef.time, nextKeyframeRef.time, "Invalid keyframes value")
+
+    const segmentTimeDiff = nextKeyframeRef.time - prevKeyframeRef.time;
+    const segmentTimeTravel = timeSplicePosition - prevKeyframeRef.time;
+    const segmentTimeSplitRatio = segmentTimeTravel / segmentTimeDiff;
+
+    animation_curve_subdivide(newKeyframeContainer, prevKeyframeRef, nextKeyframeRef, segmentTimeSplitRatio);
+}
+

package/src/engine/animation/curve/draw/position_canvas_to_curve.d.ts

@@ -0,0 +1,12 @@
+/**
+ *
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {number} x
+ * @param {number} y
+ * @return {Vector2}
+ */
+export function position_canvas_to_curve(size: Vector2, frame: AABB2, margin: Vector2, x: number, y: number): Vector2;
+import Vector2 from "../../../../core/geom/Vector2.js";
+//# sourceMappingURL=position_canvas_to_curve.d.ts.map

package/src/engine/animation/curve/draw/position_canvas_to_curve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position_canvas_to_curve.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/position_canvas_to_curve.js"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,+CAPW,OAAO,wBAEP,OAAO,KACP,MAAM,KACN,MAAM,GACL,OAAO,CAclB;oBAvBmB,kCAAkC"}

package/src/engine/animation/curve/draw/position_canvas_to_curve.js

@@ -0,0 +1,24 @@
+import Vector2 from "../../../../core/geom/Vector2.js";
+
+/**
+ *
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {number} x
+ * @param {number} y
+ * @return {Vector2}
+ */
+export function position_canvas_to_curve(size, frame, margin, x, y) {
+
+    const width = size.x;
+    const height = size.y;
+
+    const u = (x - margin.x) / (width - margin.x * 2);
+    const v = 1 - (y - margin.y) / (height - margin.y * 2);
+
+    return new Vector2(
+        u * frame.getWidth() + frame.x0,
+        v * frame.getHeight() + frame.y0
+    );
+}

package/src/engine/animation/curve/draw/position_curve_to_canvas.d.ts

@@ -0,0 +1,12 @@
+/**
+ *
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {number} x
+ * @param {number} y
+ * @return {Vector2}
+ */
+export function position_curve_to_canvas(size: Vector2, frame: AABB2, margin: Vector2, x: number, y: number): Vector2;
+import Vector2 from "../../../../core/geom/Vector2.js";
+//# sourceMappingURL=position_curve_to_canvas.d.ts.map

package/src/engine/animation/curve/draw/position_curve_to_canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position_curve_to_canvas.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/position_curve_to_canvas.js"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,+CAPW,OAAO,wBAEP,OAAO,KACP,MAAM,KACN,MAAM,GACL,OAAO,CAelB;oBAxBmB,kCAAkC"}

package/src/engine/animation/curve/draw/position_curve_to_canvas.js

@@ -0,0 +1,25 @@
+import Vector2 from "../../../../core/geom/Vector2.js";
+
+/**
+ *
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ * @param {number} x
+ * @param {number} y
+ * @return {Vector2}
+ */
+export function position_curve_to_canvas(size, frame, margin, x, y) {
+    const width = size.x;
+    const height = size.y;
+
+    const curve_width = frame.getWidth();
+    const curve_width_multiplier = curve_width > 0 ? 1 / curve_width : 0;
+    const u = (x - frame.x0) * curve_width_multiplier;
+
+    const curve_height = frame.getHeight();
+    const curve_height_multiplier = curve_height > 0 ? 1 / curve_height : 0;
+    const v = 1 - (y - frame.y0) * curve_height_multiplier;
+
+    return new Vector2(margin.x + (u * (width - margin.x * 2)), margin.y + v * (height - margin.y * 2));
+}

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

@@ -0,0 +1,22 @@
+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, margin, enableEdit, validEditableBounds, actionProcessor }: AnimationCurve);
+    curve: AnimationCurve;
+    margin: AnimationCurve;
+    enableEdit: AnimationCurve;
+    validEditableBounds: AnimationCurve;
+    actionProcessor: AnimationCurve;
+    gridSpacing: number;
+    zoomLevel: number;
+    build(): void;
+}
+import EmptyView from "../../../../view/elements/EmptyView.js";
+//# sourceMappingURL=CurveEditorView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurveEditorView.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/CurveEditorView.js"],"names":[],"mappings":"AA0CA;IACI;;;;;;;;OAQG;IACH,uGA2BC;IAXG,sBAAkB;IAElB,uBAAoB;IACpB,2BAA4B;IAC5B,oCAA8C;IAC9C,gCAAsC;IAEtC,oBAAqB;IACrB,kBAAkB;IAKtB,cA8PC;CACJ;sBA7UqB,wCAAwC"}

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);
+    }
+}