@woosh/meep-engine 2.131.34 → 2.131.36

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

@@ -0,0 +1,18 @@
+import {CanvasView} from "../../../../view/elements/CanvasView.js";
+import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
+
+export class UIContext{
+
+    constructor(curve, size, margin){
+
+        this.curve = curve
+
+        this.margin = margin
+
+        this.graph = new CanvasView();
+        this.graph.size.copy(size)
+
+        this.frame = new AABB2();
+
+    }
+}

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

@@ -0,0 +1,11 @@
+/**
+ *  Modify the axis start and end value based on given scaling
+ * @param {number} axisLength
+ * @param {number} cursorToGraphPos
+ * @param {number} axisStart
+ * @param {number} axisEnd
+ * @param {number} scaling
+ * @returns {(number|*)[]}
+ */
+export function updateAxisRange(axisLength: number, cursorToGraphPos: number, axisStart: number, axisEnd: number, scaling: number): (number | any)[];
+//# sourceMappingURL=updateAxisRange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"updateAxisRange.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/updateAxisRange.js"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,4CAPW,MAAM,oBACN,MAAM,aACN,MAAM,WACN,MAAM,WACN,MAAM,GACJ,CAAC,MAAM,MAAE,CAAC,EAAE,CAaxB"}

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

@@ -0,0 +1,23 @@
+
+
+/**
+ *  Modify the axis start and end value based on given scaling
+ * @param {number} axisLength
+ * @param {number} cursorToGraphPos
+ * @param {number} axisStart
+ * @param {number} axisEnd
+ * @param {number} scaling
+ * @returns {(number|*)[]}
+ */
+export function updateAxisRange(axisLength,cursorToGraphPos, axisStart, axisEnd, scaling){
+
+    let axisRange = axisEnd - axisStart;
+    const ratioCursorToGraphX = cursorToGraphPos / axisLength;
+    const axisCentre = axisStart + (ratioCursorToGraphX * axisRange);
+
+    axisRange = (axisEnd - axisStart) / scaling;
+    axisStart = axisCentre - (ratioCursorToGraphX * axisRange);
+    axisEnd = axisCentre + (1 - ratioCursorToGraphX) * axisRange;
+
+    return [axisStart, axisEnd];
+}

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

@@ -0,0 +1,9 @@
+/**
+ *
+ * @param {Keyframe} selectedKeyframe
+ * @param {Vector2} deltaPosition
+ * @param {AnimationCurve} curve
+ */
+export function updateKeyframePosition(selectedKeyframe: Keyframe, deltaPosition: Vector2, curve: AnimationCurve): void;
+import Vector2 from "../../../../core/geom/Vector2.js";
+//# sourceMappingURL=updateKeyframePosition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"updateKeyframePosition.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/updateKeyframePosition.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,yDAJW,QAAQ,iBACR,OAAO,+BAOjB;oBAZmB,kCAAkC"}

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

@@ -0,0 +1,38 @@
+import Vector2 from "../../../../core/geom/Vector2.js";
+
+/**
+ *
+ * @param {Keyframe} selectedKeyframe
+ * @param {Vector2} deltaPosition
+ * @param {AnimationCurve} curve
+ */
+export function updateKeyframePosition(selectedKeyframe, deltaPosition, curve) {
+    selectedKeyframe.time += deltaPosition.x;
+    selectedKeyframe.value += deltaPosition.y;
+    updateKeyFrameIndexes(curve, selectedKeyframe);
+}
+
+/**
+ *
+ * @param {AnimationCurve} curve
+ * @param {Keyframe} keyframe
+ */
+function updateKeyFrameIndexes(curve, keyframe) {
+    let keyframeIndex = curve.keys.indexOf(keyframe);
+
+    if (keyframeIndex < (curve.keys.length - 1) && keyframe.time > curve.keys[keyframeIndex + 1].time) {
+        const nextIndex = keyframeIndex + 1;
+        const next = curve.keys[nextIndex];
+
+        curve.keys[nextIndex] = keyframe;
+        curve.keys[keyframeIndex] = next;
+
+    } else if (keyframeIndex > 0 && keyframe.time < curve.keys[keyframeIndex - 1].time) {
+        const prevIndex = keyframeIndex - 1;
+        const prev = curve.keys[prevIndex];
+
+        curve.keys[prevIndex] = keyframe;
+        curve.keys[keyframeIndex] = prev;
+
+    }
+}

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

@@ -0,0 +1,2 @@
+export function updateMarkerPosition(graph: any, frame: any, margin: any, keyframe: any, vContainerMarker: any): void;
+//# sourceMappingURL=updateMarkerPosition.d.ts.map

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

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

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

@@ -0,0 +1,12 @@
+import {position_curve_to_canvas} from "../draw/position_curve_to_canvas.js";
+
+export function updateMarkerPosition(graph, frame, margin, keyframe, vContainerMarker) {
+    const canvasCoordinates = position_curve_to_canvas(
+        graph.size,
+        frame,
+        margin,
+        keyframe.time,
+        keyframe.value
+    );
+    vContainerMarker.position.copy(canvasCoordinates);
+}

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

@@ -0,0 +1,9 @@
+/**
+ *
+ * @param {KeyframeStateManager} keyframeStateManager
+ * @param {Keyframe} keyframe
+ * @param {EmptyView} vTangentEditor
+ * @param {View} marker
+ */
+export function updateMarkerVisual(keyframeStateManager: KeyframeStateManager, keyframe: Keyframe, vTangentEditor: EmptyView, marker: View): void;
+//# sourceMappingURL=updateMarkerVisual.d.ts.map

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

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

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

@@ -0,0 +1,53 @@
+/**
+ *
+ * @param {KeyframeStateManager} keyframeStateManager
+ * @param {Keyframe} keyframe
+ * @param {EmptyView} vTangentEditor
+ * @param {View} marker
+ */
+export function updateMarkerVisual(keyframeStateManager, keyframe, vTangentEditor, marker) {
+    const markerView = keyframeStateManager.keyframeViews.get(keyframe);
+    const markerColour = getKeyframeMarkerColour(keyframeStateManager, keyframe);
+
+    updateTangentMarker(keyframeStateManager, keyframe, markerView, vTangentEditor)
+
+    marker.css({
+        background: markerColour
+    });
+}
+
+/**
+ * Acquire the pre-defined colour for marker(keyframe) based on the keyframe selection state
+ * @param {KeyframeStateManager} keyframeStateManager
+ * @param {Keyframe} keyframe
+ * @returns {string}
+ */
+function getKeyframeMarkerColour(keyframeStateManager, keyframe) {
+    const activeKeyframe = keyframeStateManager.observedActiveKeyframe;
+    const selectedKeyframes = keyframeStateManager.selectedKeyframes;
+
+    if (activeKeyframe.get() === keyframe) {
+        return '#FFFFFF'
+    } else if (selectedKeyframes.find(kf => kf === keyframe)) {
+        return '#B700FFFF'
+    } else {
+        return '#00ff00'
+    }
+}
+
+function updateTangentMarker(keyframeStateManager, keyframe, markerView, vTangentEditor) {
+    const activeKeyframe = keyframeStateManager.observedActiveKeyframe;
+    const selectedKeyframes = keyframeStateManager.selectedKeyframes;
+
+    if (activeKeyframe.get() === keyframe) {
+        if (!markerView.hasChild(vTangentEditor))
+            markerView.addChild(vTangentEditor);
+    } else if (selectedKeyframes.find(kf => kf === keyframe)) { //Todo remove if covered by else condition
+        if (markerView.hasChild(vTangentEditor))
+            markerView.removeChild(vTangentEditor);
+    } else {
+        if (markerView.hasChild(vTangentEditor))
+            markerView.removeChild(vTangentEditor);
+    }
+}
+

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

@@ -0,0 +1,7 @@
+/**
+ * Attaches drag & drop to an element
+ * @param {HTMLElement} el
+ * @param {(data: any) => void} data
+ */
+export function uploadViaElement(el: HTMLElement, data: (data: any) => void): void;
+//# sourceMappingURL=uploadViaElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"uploadViaElement.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/editor/uploadViaElement.js"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,qCAHW,WAAW,eACJ,GAAG,KAAK,IAAI,QA6B7B"}

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

@@ -0,0 +1,35 @@
+import {DragEvents} from "../../../input/devices/events/DragEvents.js";
+
+/**
+ * Attaches drag & drop to an element
+ * @param {HTMLElement} el
+ * @param {(data: any) => void} data
+ */
+export function uploadViaElement(el, data) {
+    if (!el) throw new Error("Element is required");
+
+    el.addEventListener(DragEvents.DragOver, (e) => {
+        // console.log("dragging over element");
+        e.preventDefault(); // prevent browser from opening file
+    });
+
+    el.addEventListener(DragEvents.Drop, (e) => {
+        e.preventDefault();
+
+        const file = e.dataTransfer.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.readAsText(file);
+        reader.onload = () => {
+            try {
+                const text = String(reader.result).replace(/^\uFEFF/, '').trim();
+                data(text);
+                // console.log("Imported data: ", text);
+
+            } catch (err) {
+                console.error("Error reading file: ", err);
+            }
+        };
+    });
+}

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

@@ -1,9 +0,0 @@
-/**
- *
- * @param {AnimationCurve} curve
- * @param {Vector2} [size]
- * @param {Vector2} [margin] How much space to leave empty around the plotted bounds
- * @returns {View}
- */
-export function build_curve_editor({ curve, size, margin }: AnimationCurve): View;
-//# sourceMappingURL=build_curve_editor.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"build_curve_editor.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/draw/build_curve_editor.js"],"names":[],"mappings":"AAiEA;;;;;;GAMG;AACH,kFAiSC"}

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

@@ -1,362 +0,0 @@
-import Signal from "../../../../core/events/signal/Signal.js";
-import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
-import Vector2 from "../../../../core/geom/Vector2.js";
-import ObservedValue from "../../../../core/model/ObservedValue.js";
-import { number_pretty_print } from "../../../../core/primitives/numbers/number_pretty_print.js";
-import LabelView from "../../../../view/common/LabelView.js";
-import { CSS_ABSOLUTE_POSITIONING } from "../../../../view/CSS_ABSOLUTE_POSITIONING.js";
-import { CanvasView } from "../../../../view/elements/CanvasView.js";
-import EmptyView from "../../../../view/elements/EmptyView.js";
-import { canvas2d_plot_data_line } from "../../../graphics/canvas/canvas2d_plot_data_line.js";
-import { MouseEvents } from "../../../input/devices/events/MouseEvents.js";
-import { readPositionFromMouseEvent } from "../../../input/devices/PointerDevice.js";
-import { DraggableAspect } from "../../../ui/DraggableAspect.js";
-import { animation_curve_compute_aabb } from "../animation_curve_compute_aabb.js";
-import { sample_animation_curve_to_float_array } from "../compression/sample_animation_curve_to_float_array.js";
-import { Keyframe } from "../Keyframe.js";
-import { build_tangent_editor } from "./build_tangent_editor.js";
-
-/**
- *
- * @param {Vector2} size
- * @param {AABB2} frame
- * @param {Vector2} margin
- * @param {number} x
- * @param {number} y
- * @return {Vector2}
- */
-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));
-}
-
-/**
- *
- * @param {Vector2} size
- * @param {AABB2} frame
- * @param {Vector2} margin
- * @param {number} x
- * @param {number} y
- * @return {Vector2}
- */
-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
-    );
-}
-
-/**
- *
- * @param {AnimationCurve} curve
- * @param {Vector2} [size]
- * @param {Vector2} [margin] How much space to leave empty around the plotted bounds
- * @returns {View}
- */
-export function build_curve_editor({
-                                       curve,
-                                       size = new Vector2(300, 300),
-                                       margin = new Vector2(36, 36)
-                                   }) {
-
-    const vContainer = new EmptyView({
-        css: {
-            pointerEvents: "auto"
-        }
-    });
-
-    const graph = new CanvasView();
-    graph.size.copy(size);
-
-    const frame = new AABB2();
-
-    const frame_updated = new Signal();
-
-    /**
-     *
-     * @type {ObservedValue<Keyframe>}
-     */
-    const active_keyframe = new ObservedValue(null);
-
-    const vCoordinate = new LabelView("", {
-        css: {
-            ...CSS_ABSOLUTE_POSITIONING,
-            zIndex: 1000,
-            background: `rgba(0, 0, 0, 0.4)`,
-            padding: '4px 6px',
-            color: 'white',
-            font: '12px Tahoma, monospaced'
-        }
-    });
-
-    function handle_curve_update() {
-        animation_curve_compute_aabb(frame, curve);
-
-        frame_updated.send0();
-
-        update_graph();
-    }
-
-
-    function update_graph() {
-        const width = graph.size.x;
-        const data = new Float32Array(width);
-
-        sample_animation_curve_to_float_array(data, 0, curve, data.length);
-
-        canvas2d_plot_data_line({
-            data,
-            ctx: graph.context2d,
-            width: width,
-            height: graph.size.y,
-            margin: margin,
-            range_y: [frame.y0, frame.y1],
-            range_x: [frame.x0, frame.x1],
-        });
-    }
-
-    const keyframe_views = new Map();
-
-    /**
-     *
-     * @param {Keyframe} keyframe
-     */
-    function add_keyframe(keyframe) {
-        const vContainerMarker = new EmptyView({
-            css: {
-                position: "absolute",
-                top: 0,
-                left: 0,
-                pointerEvents: "none"
-            }
-        });
-
-        const marker_size = 8;
-        const marker = new EmptyView({
-            css: {
-                width: `${marker_size}px`,
-                height: `${marker_size}px`,
-                background: "#00ff00",
-                border: "none",
-                position: "absolute",
-                top: `-${marker_size / 2}px`,
-                left: `-${marker_size / 2}px`,
-                pointerEvents: "auto",
-                borderRadius: `${marker_size}px`
-            }
-        });
-
-        // add extra element for mouse event capture to make it easier to click on the marker
-        const marker_hit_pad_size = 24;
-        marker.addChild(new EmptyView({
-            css: {
-                opacity: 0,
-                width: `${marker_hit_pad_size}px`,
-                height: `${marker_hit_pad_size}px`,
-                borderRadius: `${marker_hit_pad_size}px`,
-                // background: 'rgba(255,0,0,0.2)',
-                position: "absolute",
-                top: `-${(marker_hit_pad_size - marker_size) / 2}px`,
-                left: `-${(marker_hit_pad_size - marker_size) / 2}px`
-            }
-        }))
-
-        function updatePosition() {
-            const canvas_coordinates = position_curve_to_canvas(
-                graph.size,
-                frame,
-                margin,
-                keyframe.time,
-                keyframe.value
-            );
-            vContainerMarker.position.copy(canvas_coordinates);
-        }
-
-        function updateActiveState() {
-            if (active_keyframe.get() === keyframe) {
-                marker.css({
-                    background: '#FFFFFF'
-                });
-            } else {
-                marker.css({
-                    background: '#00ff00'
-                });
-            }
-        }
-
-        updatePosition();
-
-        const marker_el = marker.el;
-
-        const previous = new Vector2();
-        const draggable = new DraggableAspect({
-            el: marker_el,
-            drag(position) {
-                const delta = new Vector2();
-                delta.subVectors(position, previous);
-
-                const keyframe_coord = position_canvas_to_curve(
-                    graph.size,
-                    frame,
-                    margin,
-                    position.x,
-                    position.y
-                );
-
-                // console.log(keyframe_coord);
-
-                keyframe.time = keyframe_coord.x;
-                keyframe.value = keyframe_coord.y;
-
-                vCoordinate.updateText(`${number_pretty_print(keyframe_coord.x)}, ${number_pretty_print(keyframe_coord.y)}`);
-                vCoordinate.position.set(
-                    position.x,
-                    position.y - 24
-                );
-
-                let keyframe_index = curve.keys.indexOf(keyframe);
-
-                if (keyframe_index < (curve.keys.length - 1) && keyframe.time > curve.keys[keyframe_index + 1].time) {
-                    const next_index = keyframe_index + 1;
-                    const next = curve.keys[next_index];
-
-                    curve.keys[next_index] = keyframe;
-                    curve.keys[keyframe_index] = next;
-
-                    keyframe_index = next_index;
-                } else if (keyframe_index > 0 && keyframe.time < curve.keys[keyframe_index - 1].time) {
-                    const prev_index = keyframe_index - 1;
-                    const prev = curve.keys[prev_index];
-
-                    curve.keys[prev_index] = keyframe;
-                    curve.keys[keyframe_index] = prev;
-
-                    keyframe_index = prev_index;
-                }
-
-                curve.alignTangents(keyframe_index);
-                curve.smoothTangents(keyframe_index, 1);
-
-                if (keyframe_index > 0) {
-                    curve.alignTangents(keyframe_index - 1);
-                    curve.smoothTangents(keyframe_index - 1, 1);
-                }
-                if (keyframe_index < curve.keys.length - 1) {
-                    curve.alignTangents(keyframe_index + 1);
-                    curve.smoothTangents(keyframe_index + 1, 1);
-                }
-
-                updatePosition();
-                update_graph();
-
-                previous.copy(position);
-            },
-            dragStart(position) {
-                previous.copy(position);
-
-                active_keyframe.set(keyframe);
-
-                vContainer.addChild(vCoordinate);
-            },
-            dragEnd() {
-                handle_curve_update();
-
-                vContainer.removeChild(vCoordinate);
-            }
-        });
-
-        draggable.getPointer().on.tap.add(
-            /**
-             *
-             * @param position
-             * @param {MouseEvent} event
-             */
-            (position, event) => {
-                // make active
-                active_keyframe.set(keyframe);
-
-                if (event.ctrlKey) {
-                    // remove
-                    curve.remove(keyframe);
-                    remove_keyframe(keyframe);
-                    update_graph();
-                }
-            });
-
-        marker.on.linked.add(draggable.start, draggable);
-        marker.on.unlinked.add(draggable.stop, draggable);
-
-        marker.bindSignal(frame_updated, updatePosition);
-        marker.bindSignal(active_keyframe.onChanged, updateActiveState);
-
-        const vTangentEditor = build_tangent_editor({
-            keyframe: keyframe,
-            size: graph.size,
-            ctx: graph.context2d,
-            frame,
-            margin
-        });
-        vContainerMarker.addChild(vTangentEditor);
-
-        vContainerMarker.addChild(marker);
-
-        keyframe_views.set(keyframe, vContainerMarker);
-
-        vContainer.addChild(vContainerMarker);
-    }
-
-    function remove_keyframe(keyframe) {
-        const marker_view = keyframe_views.get(keyframe);
-
-        vContainer.removeChild(marker_view);
-    }
-
-    graph.on.linked.add(() => {
-        curve.keys.forEach(add_keyframe);
-    });
-
-    graph.on.unlinked.add(() => {
-        curve.keys.forEach(remove_keyframe);
-    });
-
-    vContainer.el.addEventListener(MouseEvents.DoubleClick, (e) => {
-
-        const mouse_position = new Vector2();
-
-        readPositionFromMouseEvent(mouse_position, e, vContainer.el);
-
-        const curve_position = position_canvas_to_curve(graph.size, frame, margin, mouse_position.x, mouse_position.y);
-
-        const key = Keyframe.from(curve_position.x, curve_position.y);
-        const key_index = curve.add(key);
-
-        curve.alignTangents(key_index);
-        curve.smoothTangents(key_index, 1);
-
-        add_keyframe(key);
-        update_graph();
-    });
-
-    graph.on.linked.add(handle_curve_update);
-
-    vContainer.addChild(graph);
-
-    return vContainer;
-}