@woosh/meep-engine 2.36.0 → 2.36.1

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

@@ -0,0 +1,316 @@
+import Vector2 from "../../../../core/geom/Vector2.d.ts";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import AABB2 from "../../../../core/geom/AABB2.d.ts";
+import Signal from "../../../../core/events/signal/Signal.d.ts";
+import ObservedValue from "../../../../core/model/ObservedValue.js";
+import { animation_curve_to_float_array } from "../compression/animation_curve_to_float_array.js";
+import { plot_data } from "./plot_data.js";
+import { DraggableAspect } from "../../../ui/DraggableAspect.js";
+import { min2 } from "../../../../core/math/min2.js";
+import { max2 } from "../../../../core/math/max2.js";
+
+/**
+ *
+ * @param {AABB2} out
+ * @param {AnimationCurve} curve
+ */
+function compute_curve_aabb(out, curve) {
+    let x0 = Number.POSITIVE_INFINITY;
+    let x1 = Number.NEGATIVE_INFINITY;
+    let y0 = Number.POSITIVE_INFINITY;
+    let y1 = Number.NEGATIVE_INFINITY;
+
+    for (let i = 0; i < curve.keys.length; i++) {
+        const keyframe = curve.keys[i];
+
+        x0 = min2(x0, keyframe.time)
+        x1 = max2(x1, keyframe.time)
+
+        y0 = min2(y0, keyframe.value);
+        y1 = max2(y1, keyframe.value);
+    }
+
+    out.set(x0, y0, x1, y1);
+}
+
+/**
+ *
+ * @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]
+ * @returns {View}
+ */
+export function build_curve_editor({
+                                       curve,
+                                       size = new Vector2(600, 200),
+                                       margin = new Vector2(8, 36)
+                                   }) {
+
+    const vContainer = new EmptyView();
+
+    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);
+
+
+    function handle_curve_update() {
+        compute_curve_aabb(frame, curve);
+
+        frame_updated.send0();
+
+        update_graph();
+    }
+
+
+    function update_graph() {
+        const width = graph.size.x;
+        const data = new Float32Array(width);
+
+        animation_curve_to_float_array(data, curve, 0, data.length);
+
+        plot_data({
+            data,
+            ctx: graph.context2d,
+            width: width,
+            height: graph.size.y,
+            margin: margin,
+            range_y: [frame.y0, frame.y1]
+        });
+    }
+
+    const keyframe_views = new Map();
+
+    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;
+
+                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.smoothTangents(keyframe_index, 1);
+
+                if (keyframe_index > 0) {
+                    curve.smoothTangents(keyframe_index - 1, 1);
+                }
+                if (keyframe_index < curve.keys.length - 1) {
+                    curve.smoothTangents(keyframe_index + 1, 1);
+                }
+
+                updatePosition();
+                update_graph();
+
+                previous.copy(position);
+            },
+            dragStart(position) {
+                previous.copy(position);
+
+                active_keyframe.set(keyframe);
+            },
+            dragEnd() {
+                handle_curve_update();
+            }
+        });
+
+        draggable.getPointer().on.tap.add(() => {
+            active_keyframe.set(keyframe);
+        });
+
+        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);
+    });
+
+
+    graph.on.linked.add(handle_curve_update);
+
+    vContainer.addChild(graph);
+
+    return vContainer;
+}

package/engine/animation/curve/draw/build_plot_entity_from_array.js

@@ -0,0 +1,47 @@
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import { plot_data } from "./plot_data.js";
+import { draw_label } from "./draw_label.js";
+import EntityBuilder from "../../../ecs/EntityBuilder.js";
+import ViewportPosition from "../../../ecs/gui/position/ViewportPosition.js";
+import GUIElement from "../../../ecs/gui/GUIElement.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+
+/**
+ *
+ * @param {number[]} data
+ * @param {number} x
+ * @param {number} y
+ * @param {number} [width]
+ * @param {number} [height]
+ * @param {Vector2} [margin]
+ * @param {string} [label]
+ * @return {EntityBuilder}
+ */
+export function build_plot_entity_from_array({
+                                                 data,
+                                                 x, y,
+                                                 width = 600,
+                                                 height = 200,
+                                                 margin = new Vector2(10,10),
+                                                 label = ''
+                                             }) {
+
+    const canvasView = new CanvasView();
+    canvasView.size.set(width, height);
+    const ctx = canvasView.context2d;
+
+    plot_data({ ctx, data, width, height, margin });
+
+    const text = `${data.length}`;
+    draw_label(ctx, text, margin.x, height - (20));
+
+    if (typeof label === "string" && label.length > 0) {
+        draw_label(ctx, label, 0, 0)
+    }
+
+    return new EntityBuilder()
+        .add(ViewportPosition.fromJSON({
+            offset: { x, y }
+        }))
+        .add(GUIElement.fromView(canvasView));
+}

package/engine/animation/curve/draw/build_tangent_editor.js

@@ -0,0 +1,115 @@
+import EmptyView from "../../../../view/elements/EmptyView.js";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Keyframe} keyframe
+ * @param {Vector2} size
+ * @param {AABB2} frame
+ * @param {Vector2} margin
+ */
+export function build_tangent_editor({
+                                  ctx,
+                                  keyframe,
+                                  size,
+                                  frame,
+                                  margin
+                              }) {
+
+    const scale = 36;
+
+
+    function build_handle() {
+
+        const marker_size = 4;
+        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"
+            }
+        });
+
+        // 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`
+            }
+        }))
+
+        return marker;
+    }
+
+    function build_tangent() {
+        const view = new EmptyView({
+            css: {
+                position: "absolute",
+                left: "0",
+                top: "0",
+                background: 'red'
+            }
+        });
+        view.position.set(-0.5, -0.5);
+        view.transformOrigin.set(0, 0.5);
+
+        return view;
+    }
+
+
+    const handle_in = build_handle();
+    const handle_out = build_handle();
+
+    const tangent_in = build_tangent();
+
+    const tangent_out = build_tangent();
+
+
+    function update_positions() {
+        tangent_in.size.set(scale, 1);
+        const angle_in = Math.PI - Math.atan2(keyframe.inTangent, 1);
+        tangent_in.rotation.set(angle_in);
+
+        tangent_out.size.set(scale, 1);
+        const angle_out = -Math.atan2(keyframe.outTangent, 1);
+        tangent_out.rotation.set(angle_out);
+
+        handle_in.position.set(
+            Math.cos(angle_in) * scale, Math.sin(angle_in) * scale
+        );
+
+        handle_out.position.set(
+            Math.cos(angle_out) * scale, Math.sin(angle_out) * scale
+        );
+    }
+
+    const vContainer = new EmptyView({
+        css: {
+            position: 'absolute',
+            left: 0,
+            top: 0
+        }
+    });
+
+    vContainer.addChild(handle_in);
+    vContainer.addChild(handle_out);
+
+    vContainer.addChild(tangent_in);
+    vContainer.addChild(tangent_out);
+
+    vContainer.on.linked.add(update_positions);
+
+    return vContainer;
+}

package/engine/animation/curve/draw/draw_grid.js

@@ -0,0 +1,27 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} width
+ * @param {number} height
+ * @param {string} color
+ * @param {number} spacing
+ * @param {number} [offset_x]
+ * @param {number} [offset_y]
+ */
+export function draw_grid({ ctx, width, height, color = 'red', spacing = 10, offset_x = 0, offset_y = 0 }) {
+    ctx.fillStyle = 'none';
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+
+
+    ctx.beginPath();
+    for (let x = offset_x; x < width; x += spacing) {
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+    }
+    for (let y = offset_y; y < width; y += spacing) {
+        ctx.moveTo(0, y);
+        ctx.lineTo(width, y);
+    }
+    ctx.stroke();
+}

package/engine/animation/curve/draw/draw_label.js

@@ -0,0 +1,17 @@
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {string} text
+ * @param {number} x
+ * @param {number} y
+ */
+export function draw_label(ctx, text, x, y) {
+
+    ctx.fillStyle = 'white';
+    ctx.font = '10px Tahoma';
+
+    ctx.strokeStyle = `rgba(0, 0, 0, 0.5)`;
+    ctx.lineWidth = 2;
+    ctx.strokeText(text, x, y);
+    ctx.fillText(text, x, y);
+}

package/engine/animation/curve/draw/plot_array.js

@@ -0,0 +1,76 @@
+import { min2 } from "../../../../core/math/min2.js";
+import { max2 } from "../../../../core/math/max2.js";
+
+/**
+ *
+ * @param {number[]} data
+ * @return {number[]}
+ */
+export function array_compute_min_max(data) {
+    const point_count = data.length;
+
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    for (let i = 0; i < point_count; i++) {
+        min = min2(data[i], min);
+        max = max2(data[i], max);
+    }
+
+    return [min, max];
+}
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number} width
+ * @param {number} height
+ * @param {number} x_offset
+ * @param {number} y_offset
+ * @param {number[]} data
+ * @param {number[]} data_range_y
+ */
+export function plot_array(
+    ctx,
+    width,
+    height,
+    x_offset,
+    y_offset,
+    data,
+    data_range_y
+) {
+    const point_count = data.length;
+
+    if (data_range_y === undefined) {
+        data_range_y = array_compute_min_max(data)
+    }
+
+    const [min, max] = data_range_y;
+
+    const value_span = max - min;
+    const normalization_multiplier = value_span !== 0 ? 1 / value_span : 0;
+
+    ctx.beginPath();
+    if (point_count === 1) {
+        ctx.moveTo(x_offset, height + y_offset);
+        ctx.lineTo(x_offset + width, height + y_offset);
+    } else {
+
+        for (let i = 0; i < point_count; i++) {
+            const value = data[i];
+            const value_normalized = (value - min) * normalization_multiplier;
+
+            const v = 1 - value_normalized;
+            const u = i / (point_count - 1);
+
+            const x = u * width + x_offset;
+            const y = v * height + y_offset;
+
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            } else {
+                ctx.lineTo(x, y);
+            }
+        }
+    }
+    ctx.stroke();
+}

package/engine/animation/curve/draw/plot_data.js

@@ -0,0 +1,49 @@
+import { draw_grid } from "./draw_grid.js";
+import { plot_array } from "./plot_array.js";
+import Vector2 from "../../../../core/geom/Vector2.js";
+
+/**
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number[]|Float32Array} data
+ * @param {Vector2} [margin]
+ * @param {number} width
+ * @param {number} height
+ * @param {number[]} [range_y]
+ */
+export function plot_data({
+                              ctx,
+                              data,
+                              margin = Vector2.zero,
+                              width,
+                              height,
+                              range_y
+                          }) {
+
+    ctx.fillStyle = '#222222';
+    ctx.fillRect(0, 0, width, height);
+
+    draw_grid({
+        ctx,
+        width,
+        height,
+        color: '#262626',
+        spacing: 32
+    });
+
+    draw_grid({
+        ctx,
+        width,
+        height,
+        color: '#303030',
+        spacing: 32,
+        offset_x: 16,
+        offset_y: 16
+    });
+
+    ctx.fillStyle = 'none';
+    ctx.strokeStyle = '#00ff00';
+    ctx.lineWidth = 1;
+    plot_array(ctx, width - margin.x * 2, height - margin.y * 2, margin.x, margin.y, data, range_y);
+
+}

package/engine/ecs/parent/EntityNode.d.ts

@@ -5,15 +5,19 @@ import {Transform} from "../transform/Transform";
 export class EntityNode {
     constructor(entity?: EntityBuilder)
 
-    parent: EntityNode | null
-    entity: EntityBuilder
+    readonly parent: EntityNode | null
+    readonly entity: EntityBuilder
 
-    transform: Transform
+    readonly transform: Transform
+
+    readonly children: Readonly<EntityNode[]>
 
     addChild(node: EntityNode): boolean
 
     removeChild(node: EntityNode): boolean
 
+    traverseChildren(visitor: (EntityNode) => void, thisArg?: any): void
+
     build(ecd: EntityComponentDataset): void
 
     destroy(): void

package/engine/ecs/parent/EntityNode.js

@@ -41,6 +41,23 @@ export class EntityNode {
         this.__transform = new Transform();
     }
 
+    /**
+     *
+     * @param {(EntityNode) => *} visitor
+     * @param {*} [context]
+     */
+    traverseChildren(visitor, context) {
+        this.__children.forEach(visitor, context);
+    }
+
+    /**
+     *
+     * @return {Readonly<EntityNode[]>}
+     */
+    get children() {
+        return this.__children;
+    }
+
     /**
      *
      * @private
@@ -162,6 +179,10 @@ export class EntityNode {
         }
     }
 
+    /**
+     *
+     * @return {EntityBuilder}
+     */
     get entity() {
         return this.__entity;
     }