@woosh/meep-engine 3.14.6 → 3.16.0

package/src/view/minimap/MinimapMarkerCollection.js

@@ -1,8 +1,8 @@
-import MinimapMarker from "../../../../model/game/ecs/component/minimap/MinimapMarker.js";
+import MinimapMarker from "./MinimapMarker.js";
 import { SignalBinding } from "../../core/events/signal/SignalBinding.js";
 import Signal from "../../core/events/signal/Signal.js";
 import { EntityObserver } from "../../engine/ecs/EntityObserver.js";
-import { Transform } from "../../engine/ecs/transform/Transform.js";
+import { Transform64 } from "../../engine/ecs/transform/Transform64.js";
 
 /**
  * One marker on the map, and the two signals that decide when it has to be drawn again.
@@ -15,7 +15,7 @@ class MinimapMarkerEntry {
 
     /**
      * @param {MinimapMarker} marker
-     * @param {Transform} transform
+     * @param {Transform64} transform
      * @param {number} entity
      * @param {Signal} changed
      */
@@ -26,7 +26,7 @@ class MinimapMarkerEntry {
         this.marker = marker;
 
         /**
-         * @type {Transform}
+         * @type {Transform64}
          */
         this.transform = transform;
 
@@ -98,14 +98,14 @@ export class MinimapMarkerCollection {
         this.#dataset = dataset;
 
         this.#observer = new EntityObserver(
-            [Transform, MinimapMarker],
+            [Transform64, MinimapMarker],
             (transform, marker, entity) => this.#add(transform, marker, entity),
             (transform, marker, entity) => this.#remove(entity)
         );
     }
 
     /**
-     * @param {Transform} transform
+     * @param {Transform64} transform
      * @param {MinimapMarker} marker
      * @param {number} entity
      */

package/src/view/minimap/MinimapMarkerSerializationAdapter.d.ts

@@ -0,0 +1,19 @@
+export class MinimapMarkerSerializationAdapter extends BinaryClassSerializationAdapter<any> {
+    constructor();
+    klass: typeof MinimapMarker;
+    /**
+     *
+     * @param {BinaryBuffer} buffer
+     * @param {MinimapMarker} value
+     */
+    serialize(buffer: BinaryBuffer, value: MinimapMarker): void;
+    /**
+     *
+     * @param {BinaryBuffer} buffer
+     * @param {MinimapMarker} value
+     */
+    deserialize(buffer: BinaryBuffer, value: MinimapMarker): void;
+}
+import { BinaryClassSerializationAdapter } from "../../engine/ecs/storage/binary/BinaryClassSerializationAdapter.js";
+import MinimapMarker from "./MinimapMarker.js";
+//# sourceMappingURL=MinimapMarkerSerializationAdapter.d.ts.map

package/src/view/minimap/MinimapMarkerSerializationAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapMarkerSerializationAdapter.d.ts","sourceRoot":"","sources":["../../../../src/view/minimap/MinimapMarkerSerializationAdapter.js"],"names":[],"mappings":"AAKA;;IACI,4BAAsB;IAGtB;;;;OAIG;IACH,uCAFW,aAAa,QASvB;IAED;;;;OAIG;IACH,yCAFW,aAAa,QAcvB;CACJ;gDAvCM,oEAAoE;0BACjD,oBAAoB"}

package/src/view/minimap/MinimapMarkerSerializationAdapter.js

@@ -0,0 +1,42 @@
+import {
+    BinaryClassSerializationAdapter
+} from "../../engine/ecs/storage/binary/BinaryClassSerializationAdapter.js";
+import MinimapMarker from "./MinimapMarker.js";
+
+export class MinimapMarkerSerializationAdapter extends BinaryClassSerializationAdapter {
+    klass = MinimapMarker;
+    version = 1;
+
+    /**
+     *
+     * @param {BinaryBuffer} buffer
+     * @param {MinimapMarker} value
+     */
+    serialize(buffer, value) {
+        buffer.writeUTF8String(value.iconURL.getValue());
+
+        buffer.writeFloat32(value.size.x);
+        buffer.writeFloat32(value.size.y);
+
+        buffer.writeInt16(value.zIndex);
+    }
+
+    /**
+     *
+     * @param {BinaryBuffer} buffer
+     * @param {MinimapMarker} value
+     */
+    deserialize(buffer, value) {
+        const url = buffer.readUTF8String();
+
+        const size_x = buffer.readFloat32();
+        const size_y = buffer.readFloat32();
+
+        const z_index = buffer.readInt16();
+
+
+        value.iconURL.set(url);
+        value.size.set(size_x, size_y);
+        value.zIndex = z_index;
+    }
+}

package/src/view/minimap/dom/MinimapCameraView.d.ts

@@ -8,7 +8,7 @@ export class MinimapCameraView extends View {
      * @param {GraphicsEngine|GraphicsEngine} graphics asked for the ray the frame is traced with
      * @constructor
      */
-    constructor({ camera, transform, entity, world, worldScale, graphics }: Camera);
+    constructor({ camera, transform, entity, world, worldScale, graphics, dataset }: Camera);
     el: Element;
     /**
      *

package/src/view/minimap/dom/MinimapCameraView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MinimapCameraView.d.ts","sourceRoot":"","sources":["../../../../../src/view/minimap/dom/MinimapCameraView.js"],"names":[],"mappings":"AAUA;IACI;;;;;;;;OAQG;IACH,gFAuEC;IApEG,YAAkC;IAIlC;;;;OAIG;IACH,qBAAgD;IAIhD;;;OAGG;IACH,eAAoB;IAEpB;;;;;;;;;;;OAWG;IACH,UAFU,+BAA6B,CAEf;IACxB;;;OAGG;IACH,qBAA0B;IAE1B,eAAoB;IAEpB;;;;OAIG;IACH,gBAAoB;IAEpB;;;;OAIG;IACH,sBAA+B;IAE/B;;;OAGG;IACH,aAAsC;IAY1C;;;;;;;;;OASG;IACH,uBARW,OAAO,WACP,MAAM,WACN,MAAM,WACN,MAAM,cACN,MAAM,cACN,MAAM,cACN,MAAM,QAsChB;IAED;;;;;OAKG;IACH,YAJW,MAAM,KACN,MAAM,GACJ,OAAO,CA+BnB;IAED,iBAQC;CAgBJ;iBA1MgB,eAAe;oBACZ,+BAA+B"}
+{"version":3,"file":"MinimapCameraView.d.ts","sourceRoot":"","sources":["../../../../../src/view/minimap/dom/MinimapCameraView.js"],"names":[],"mappings":"AAYA;IACI;;;;;;;;OAQG;IACH,yFAwFC;IArFG,YAAkC;IAIlC;;;;OAIG;IACH,qBAAgD;IAIhD;;;OAGG;IACH,eAAoB;IAEpB;;;;;;;;;;;OAWG;IACH,UAFU,+BAA6B,CAEf;IACxB;;;OAGG;IACH,qBAA0B;IAE1B,eAAoB;IAEpB;;;;OAIG;IACH,gBAAoB;IAEpB;;;;OAIG;IACH,sBAA+B;IAE/B;;;OAGG;IACH,aAAsC;IA6B1C;;;;;;;;;OASG;IACH,uBARW,OAAO,WACP,MAAM,WACN,MAAM,WACN,MAAM,cACN,MAAM,cACN,MAAM,cACN,MAAM,QAsChB;IAED;;;;;OAKG;IACH,YAJW,MAAM,KACN,MAAM,GACJ,OAAO,CA+BnB;IAED,iBAQC;CAgBJ;iBA7NgB,eAAe;oBACZ,+BAA+B"}

package/src/view/minimap/dom/MinimapCameraView.js

@@ -4,6 +4,8 @@ import ObservedValue from "../../../core/model/ObservedValue.js";
 import { SurfacePoint3 } from "../../../core/geom/3d/SurfacePoint3.js";
 import SVG from "../../SVG.js";
 import { plane3_compute_ray_intersection } from "../../../core/geom/3d/plane/plane3_compute_ray_intersection.js";
+import { Transform64 } from "../../../engine/ecs/transform/Transform64.js";
+import { EventType } from "../../../engine/ecs/EventType.js";
 
 
 const rayContact = new SurfacePoint3();
@@ -18,7 +20,7 @@ export class MinimapCameraView extends View {
      * @param {GraphicsEngine|GraphicsEngine} graphics asked for the ray the frame is traced with
      * @constructor
      */
-    constructor({ camera, transform, entity, world, worldScale, graphics }) {
+    constructor({ camera, transform, entity, world, worldScale, graphics, dataset = null }) {
         super();
 
         this.el = SVG.createElement('svg');
@@ -84,10 +86,27 @@ export class MinimapCameraView extends View {
 
         this
             .bindSignal(this.camera.projectionType.onChanged, this.__update, this)
-            .bindSignal(this.transform.position.onChanged, this.__update, this)
             .bindSignal(worldScale.onChanged, this.__update, this)
-            .bindSignal(world.position.onChanged, this.__update, this)
-            .bindSignal(this.transform.rotation.onChanged, this.__update, this);
+            .bindSignal(world.position.onChanged, this.__update, this);
+
+        // The camera's own pose used to arrive as two sub-object signals. A Transform64 carries
+        // none, so it arrives from the dataset instead - one listener for the whole transform,
+        // which is coarser and exactly as useful here: the view redraws from the pose either way.
+        if (dataset !== null) {
+            const on_transform_changed = event => {
+                if (event.klass === Transform64) {
+                    this.__update();
+                }
+            };
+
+            this.on.linked.add(() => dataset.addEntityEventListener(
+                entity, EventType.ComponentChanged, on_transform_changed
+            ));
+
+            this.on.unlinked.add(() => dataset.removeEntityEventListener(
+                entity, EventType.ComponentChanged, on_transform_changed
+            ));
+        }
 
     }
 

package/src/view/minimap/dom/MinimapMarkerView.js

@@ -56,19 +56,19 @@ export class MinimapMarkerView extends View {
     __handleWorldScaleChange(x, y) {
             size.set(x * this.marker.size.x, y * this.marker.size.y);
 
-            setPosition(this.transform.position.x * x, this.transform.position.z * y);
+            setPosition(this.transform.translation_x * x, this.transform.translation_z * y);
         }
 
     __handleWorldSizeChange(x, y) {
             size.set(x * this.worldScale.x, y * this.worldScale.y);
-            setPosition(this.transform.position.x * this.worldScale.x, this.transform.position.z * this.worldScale.y)
+            setPosition(this.transform.translation_x * this.worldScale.x, this.transform.translation_z * this.worldScale.y)
         }
 
     link() {
         super.link();
 
         this.__handleWorldSizeChange(this.marker.size.x, this.marker.size.y);
-        this.__handleTransformPositionChange(this.transform.position.x, this.transform.position.y, this.transform.position.z);
+        this.__handleTransformPositionChange(this.transform.translation_x, this.transform.translation_y, this.transform.translation_z);
     }
 
     unlink() {

package/src/view/minimap/gl/MarkerGL.js

@@ -40,14 +40,14 @@ export class MarkerGL {
 
     updatePosition() {
 
-        const position = this.transform.position;
+        const position = this.transform.translation;
 
         this.particles.executeOperationWriteAttribute_Vector3(
             this.id,
             MarkerGLAttributes.AttributePosition,
-            position.x,
+            position[0],
             1,
-            position.z
+            position[2]
         );
 
         this.manager.needsRender = true;

package/src/view/util/DomLayoutFrame.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Reads the geometry of drawn elements in the layout units of one of their ancestors.
+ *
+ * `getBoundingClientRect` says where something ended up on the screen, which is not where it sits in
+ * the layout whenever a transform is applied above it — a zoomed canvas, a scaled panel. Anything
+ * writing a measurement back into a model wants the latter: the model is in layout units, and a
+ * number that moved because somebody zoomed is not a measurement of anything.
+ *
+ * The transform is recovered from the reference element itself, by comparing the box it draws at
+ * with the box it lays out at, so this knows nothing about who applied it or by how much. Scale and
+ * translation only — a rotation above the reference has no single scale factor, and a layout is not
+ * measured through one.
+ *
+ * Read once, queried many times: reading forces the browser to lay out, and the point of the
+ * separation is to do that once for a container rather than once for each thing inside it.
+ */
+export class DomLayoutFrame {
+    /**
+     * Width of the reference element's border box, in layout pixels
+     * @returns {number}
+     */
+    get width(): number;
+    /**
+     * Height of the reference element's border box, in layout pixels
+     * @returns {number}
+     */
+    get height(): number;
+    /**
+     * Take an element as the frame to measure against.
+     *
+     * @param {HTMLElement} element
+     * @returns {boolean} false when the element has nothing to measure against — it is detached
+     *          from the document, something above it is `display: none`, or it is drawn at no size
+     *          at all. Nothing can be measured against a box that does not exist, and the accessors
+     *          keep what the last successful read found rather than reporting zeroes as a
+     *          measurement.
+     */
+    read(element: HTMLElement): boolean;
+    /**
+     * Centre of an element's border box, in the frame's coordinates: layout pixels from the top-left
+     * corner of the reference element's own border box.
+     *
+     * The element does not have to be a descendant of the reference — this is a change of
+     * coordinates, not a containment test — but the scale is the reference's, so a result is only
+     * meaningful for something drawn under the same transform.
+     *
+     * @param {Vector2} result
+     * @param {HTMLElement} element
+     */
+    centerOf(result: Vector2, element: HTMLElement): void;
+    #private;
+}
+//# sourceMappingURL=DomLayoutFrame.d.ts.map

package/src/view/util/DomLayoutFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomLayoutFrame.d.ts","sourceRoot":"","sources":["../../../../src/view/util/DomLayoutFrame.js"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH;IA2BI;;;OAGG;IACH,oBAEC;IAED;;;OAGG;IACH,qBAEC;IAED;;;;;;;;;OASG;IACH,cAPW,WAAW,GACT,OAAO,CA+BnB;IAED;;;;;;;;;;OAUG;IACH,mCAFW,WAAW,QAarB;;CACJ"}

package/src/view/util/DomLayoutFrame.js

@@ -0,0 +1,122 @@
+import { assert } from "../../core/assert.js";
+
+/**
+ * Reads the geometry of drawn elements in the layout units of one of their ancestors.
+ *
+ * `getBoundingClientRect` says where something ended up on the screen, which is not where it sits in
+ * the layout whenever a transform is applied above it — a zoomed canvas, a scaled panel. Anything
+ * writing a measurement back into a model wants the latter: the model is in layout units, and a
+ * number that moved because somebody zoomed is not a measurement of anything.
+ *
+ * The transform is recovered from the reference element itself, by comparing the box it draws at
+ * with the box it lays out at, so this knows nothing about who applied it or by how much. Scale and
+ * translation only — a rotation above the reference has no single scale factor, and a layout is not
+ * measured through one.
+ *
+ * Read once, queried many times: reading forces the browser to lay out, and the point of the
+ * separation is to do that once for a container rather than once for each thing inside it.
+ */
+export class DomLayoutFrame {
+    /**
+     * Border box of the reference element on the screen, from the last successful read.
+     * @type {DOMRect|ClientRect|null}
+     */
+    #rect = null;
+
+    /**
+     * @type {number}
+     */
+    #width = 0;
+
+    /**
+     * @type {number}
+     */
+    #height = 0;
+
+    /**
+     * @type {number}
+     */
+    #scale_x = 1;
+
+    /**
+     * @type {number}
+     */
+    #scale_y = 1;
+
+    /**
+     * Width of the reference element's border box, in layout pixels
+     * @returns {number}
+     */
+    get width() {
+        return this.#width;
+    }
+
+    /**
+     * Height of the reference element's border box, in layout pixels
+     * @returns {number}
+     */
+    get height() {
+        return this.#height;
+    }
+
+    /**
+     * Take an element as the frame to measure against.
+     *
+     * @param {HTMLElement} element
+     * @returns {boolean} false when the element has nothing to measure against — it is detached
+     *          from the document, something above it is `display: none`, or it is drawn at no size
+     *          at all. Nothing can be measured against a box that does not exist, and the accessors
+     *          keep what the last successful read found rather than reporting zeroes as a
+     *          measurement.
+     */
+    read(element) {
+        const width = element.offsetWidth;
+        const height = element.offsetHeight;
+
+        if (width <= 0 || height <= 0) {
+            return false;
+        }
+
+        const rect = element.getBoundingClientRect();
+
+        if (rect.width <= 0 || rect.height <= 0) {
+            // laid out, but drawn at nothing — a `scale(0)` somewhere above. There is no scale to
+            // divide by, and dividing anyway turns every measurement into an infinity.
+            return false;
+        }
+
+        this.#rect = rect;
+
+        this.#width = width;
+        this.#height = height;
+
+        this.#scale_x = rect.width / width;
+        this.#scale_y = rect.height / height;
+
+        return true;
+    }
+
+    /**
+     * Centre of an element's border box, in the frame's coordinates: layout pixels from the top-left
+     * corner of the reference element's own border box.
+     *
+     * The element does not have to be a descendant of the reference — this is a change of
+     * coordinates, not a containment test — but the scale is the reference's, so a result is only
+     * meaningful for something drawn under the same transform.
+     *
+     * @param {Vector2} result
+     * @param {HTMLElement} element
+     */
+    centerOf(result, element) {
+        const reference = this.#rect;
+
+        assert.notNull(reference, 'reference');
+
+        const rect = element.getBoundingClientRect();
+
+        result.set(
+            (rect.left + rect.width / 2 - reference.left) / this.#scale_x,
+            (rect.top + rect.height / 2 - reference.top) / this.#scale_y
+        );
+    }
+}

package/src/core/model/node-graph/visual/layout/BoxLayoutSpec.js

@@ -1,19 +0,0 @@
-import AABB2 from "../../../../geom/2d/aabb/AABB2.js";
-
-
-export class BoxLayoutSpec {
-    bounds = new AABB2();
-
-    /**
-     *
-     * @type {ConnectionLayoutSpec[]}
-     */
-    connections = [];
-
-    /**
-     *
-     * @type {boolean}
-     */
-    locked = false;
-
-}

package/src/core/model/node-graph/visual/layout/ConnectedBoxLayouter.js

@@ -1,241 +0,0 @@
-import { QuadTreeNode } from "../../../../geom/2d/quad-tree/QuadTreeNode.js";
-import Vector2 from "../../../../geom/Vector2.js";
-import { resolveBoxOverlapUsingForce } from "../../../../graph/layout/box/resolveBoxOverlapUsingForce.js";
-import { seededRandom } from "../../../../math/random/seededRandom.js";
-
-
-export class ConnectedBoxLayouter {
-
-
-    /**
-     *
-     * @type {BoxLayoutSpec[]}
-     */
-    boxes = [];
-    /**
-     *
-     * @type {ConnectionLayoutSpec[]}
-     */
-    connections = [];
-
-
-    /**
-     *
-     * @type {QuadTreeNode<>}
-     * @private
-     */
-    __spatial_index_connections = new QuadTreeNode();
-
-
-    /**
-     * @param {BoxLayoutSpec[]} boxes
-     * @param {ConnectionLayoutSpec[]} connections
-     */
-    initialize(boxes, connections) {
-        this.boxes = boxes;
-        this.connections = connections;
-
-
-        this.__spatial_index_connections.clear();
-
-        const n = connections.length;
-        for (let i = 0; i < n; i++) {
-            const connectionLayoutSpec = connections[i];
-        }
-    }
-
-    __resolve_box_overlap(max_steps = 3) {
-
-        const forces = this.boxes.map(n => new Vector2());
-        const bound_array = this.boxes.map(b => b.bounds);
-
-        let step_count = 0;
-        let overlapMoves = -1;
-        while (step_count < max_steps && overlapMoves !== 0) {
-            step_count++;
-            overlapMoves = resolveBoxOverlapUsingForce(forces, bound_array);
-        }
-
-    }
-
-    /**
-     *
-     * @param {BoxLayoutSpec} box
-     * @returns {number}
-     * @private
-     */
-    __compute_box_cost(box) {
-
-        let result = 0;
-
-        // fitness is based on how long distances between connection points are
-        const connections = box.connections;
-
-        const n = connections.length;
-
-        for (let i = 0; i < n; i++) {
-            const connection = connections[i];
-
-            const source = connection.source;
-
-            const _x0 = source.point.x + source.box.bounds.x0;
-            const _y0 = source.point.y + source.box.bounds.y0;
-
-            const target = connection.target;
-
-            const _x1 = target.point.x + target.box.bounds.x0;
-            const _y1 = target.point.y + target.box.bounds.y0;
-
-            const dx = _x1 - _x0;
-            const dy = _y1 - _y0;
-
-            result += dx * dx + dy * dy;
-        }
-
-        return result;
-    }
-
-    __execute_swaps() {
-        let b0_cost;
-        let b1_cost;
-        let swap_count = 0;
-
-        const boxes = this.boxes;
-        const box_count = boxes.length;
-
-        for (let i = 0; i < box_count - 1; i++) {
-            const b0 = boxes[i];
-
-            if (b0.locked) {
-                continue;
-            }
-
-            b0_cost = this.__compute_box_cost(b0);
-
-            for (let j = i + 1; j < box_count; j++) {
-                const b1 = boxes[j];
-
-                if (b1.locked) {
-                    continue;
-                }
-
-                b1_cost = this.__compute_box_cost(b1);
-
-                // attempt swap
-                const temp_x = b0.bounds.x0;
-                const temp_y = b0.bounds.y0;
-
-                b0.bounds.setPosition(b1.bounds.x0, b1.bounds.y0);
-                b1.bounds.setPosition(temp_x, temp_y);
-
-                const b0_cost_after = this.__compute_box_cost(b0);
-                const b1_cost_after = this.__compute_box_cost(b0);
-
-                if (b0_cost + b1_cost <= b0_cost_after + b1_cost_after) {
-                    // failure, revert
-                    b1.bounds.setPosition(b0.bounds.x0, b0.bounds.y0);
-                    b0.bounds.setPosition(temp_x, temp_y);
-                } else {
-                    // update cost
-                    b0_cost = b0_cost_after;
-
-                    swap_count++;
-                }
-            }
-        }
-
-        return swap_count;
-    }
-
-    /**
-     *
-     * @param {ConnectionLayoutSpec} spec
-     * @param {number} strength
-     * @private
-     */
-    __pull_connection(spec, strength) {
-
-        const source = spec.source;
-
-        const _x0 = source.point.x + source.box.bounds.x0;
-        const _y0 = source.point.y + source.box.bounds.y0;
-
-        const target = spec.target;
-
-        const _x1 = target.point.x + target.box.bounds.x0;
-        const _y1 = target.point.y + target.box.bounds.y0;
-
-        const dx = _x1 - _x0;
-        const dy = _y1 - _y0;
-
-
-        const step_x = dx * strength * 0.5;
-        const step_y = dy * strength * 0.5;
-
-        source.box.bounds.move(step_x, step_y);
-        target.box.bounds.move(-step_x, -step_y);
-    }
-
-    __pull_connections(strength) {
-        const connections = this.connections;
-        const n = connections.length;
-        for (let i = 0; i < n; i++) {
-            const spec = connections[i];
-
-            this.__pull_connection(spec, strength);
-        }
-    }
-
-    __execute_many_swaps(limit) {
-        for (let i = 0; i < limit; i++) {
-            const swaps = this.__execute_swaps();
-
-            if (swaps === 0) {
-                return;
-            }
-        }
-    }
-
-    __execute_initial_placement() {
-        const random = seededRandom(0);
-
-        const boxes = this.boxes;
-        const box_count = boxes.length;
-
-        for (let i = 0; i < box_count; i++) {
-            const box = boxes[i];
-            const bounds = box.bounds;
-
-            const w = bounds.x1 - bounds.x0;
-            const h = bounds.y1 - bounds.y0;
-
-            const x0 = (random() - 0.5) * 2 * w;
-            const y0 = (random() - 0.5) * 2 * h;
-
-            bounds.set(x0, y0, x0 + w, y0 + h);
-        }
-    }
-
-    step() {
-
-        this.__execute_many_swaps(10);
-
-        this.__pull_connections(0.1);
-
-        this.__resolve_box_overlap(10);
-    }
-
-    layout() {
-        this.__execute_initial_placement();
-
-        for (let i = 0; i < 7; i++) {
-            this.__pull_connections(0.2);
-            this.__resolve_box_overlap(10);
-        }
-
-        for (let i = 0; i < 10; i++) {
-            this.step();
-        }
-
-    }
-}