@woosh/meep-engine 2.110.9 → 2.110.10

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

@@ -14,6 +14,7 @@ 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";
 
 /**
  *
@@ -133,6 +134,10 @@ export function build_curve_editor({
 
     const keyframe_views = new Map();
 
+    /**
+     *
+     * @param {Keyframe} keyframe
+     */
     function add_keyframe(keyframe) {
         const vContainerMarker = new EmptyView({
             css: {
@@ -202,7 +207,8 @@ export function build_curve_editor({
 
         const previous = new Vector2();
         const draggable = new DraggableAspect({
-            el: marker_el, drag(position) {
+            el: marker_el,
+            drag(position) {
                 const delta = new Vector2();
                 delta.subVectors(position, previous);
 
@@ -300,14 +306,14 @@ export function build_curve_editor({
         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);
+        const vTangentEditor = build_tangent_editor({
+            keyframe: keyframe,
+            size: graph.size,
+            ctx: graph.context2d,
+            frame,
+            margin
+        });
+        vContainerMarker.addChild(vTangentEditor);
 
         vContainerMarker.addChild(marker);
 

package/src/engine/animation/curve/view/AnimationCurveView.d.ts

@@ -0,0 +1,47 @@
+export class AnimationCurveView extends EmptyView {
+    constructor();
+    /**
+     *
+     * @param {AnimationCurve} v
+     */
+    set curve(arg: AnimationCurve);
+    auto_set_frame(): void;
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_curve_to_canvas(out: Float32Array | number[], x: number, y: number): void;
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_canvas_to_curve(out: Float32Array | number[], x: number, y: number): void;
+    update(): void;
+    draw(): void;
+    draw_grid(): void;
+    draw_key_knots(): void;
+    draw_key_knot(key: any): void;
+    /**
+     *
+     * @param {Keyframe} keyframe
+     */
+    draw_key_tangents(keyframe: Keyframe): void;
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Keyframe} keyframe
+     * @param {number} angle
+     * @param {number} handle_length in pixels
+     */
+    draw_tangent(ctx: CanvasRenderingContext2D, keyframe: Keyframe, angle: number, handle_length: number): void;
+    draw_tangents(): void;
+    draw_curve(): void;
+    #private;
+}
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { AnimationCurve } from "../AnimationCurve.js";
+//# sourceMappingURL=AnimationCurveView.d.ts.map

package/src/engine/animation/curve/view/AnimationCurveView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationCurveView.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/animation/curve/view/AnimationCurveView.js"],"names":[],"mappings":"AAeA;IAoCI,cAWC;IAtBD;;;OAGG;IACH,+BAIC;IAgBD,uBA6BC;IAoBD;;;;;OAKG;IACH,2BAJW,YAAY,GAAC,MAAM,EAAE,KACrB,MAAM,KACN,MAAM,QAWhB;IAED;;;;;OAKG;IACH,2BAJW,YAAY,GAAC,MAAM,EAAE,KACrB,MAAM,KACN,MAAM,QAQhB;IAED,eASC;IAED,aAsBC;IAED,kBAwBC;IAED,uBAQC;IAED,8BAiBC;IAGD;;;OAGG;IACH,4BAFW,QAAQ,QAelB;IAED;;;;;;OAMG;IACH,kBALW,wBAAwB,YACxB,QAAQ,SACR,MAAM,iBACN,MAAM,QA+BhB;IAED,sBASC;IAED,mBAqCC;;CAEJ;sBA/UqB,wCAAwC;+BAG/B,sBAAsB"}

package/src/engine/animation/curve/view/AnimationCurveView.js

@@ -0,0 +1,343 @@
+import { assert } from "../../../../core/assert.js";
+import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
+import { m3_cm_compose_transform } from "../../../../core/geom/mat3/m3_cm_compose_transform.js";
+import { m3_cm_invert } from "../../../../core/geom/mat3/m3_cm_invert.js";
+import { v2_length } from "../../../../core/geom/vec2/v2_length.js";
+import { v2_matrix3_cm_multiply } from "../../../../core/geom/vec2/v2_matrix3_cm_multiply.js";
+import { CanvasView } from "../../../../view/elements/CanvasView.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import { canvas2d_draw_grid } from "../../../graphics/canvas/canvas2d_draw_grid.js";
+import { animation_curve_compute_aabb } from "../animation_curve_compute_aabb.js";
+import { AnimationCurve } from "../AnimationCurve.js";
+
+const scratch_v2_a = new Float32Array(2);
+const scratch_v2_b = new Float32Array(2);
+
+export class AnimationCurveView extends EmptyView {
+
+    #curve = AnimationCurve.constant();
+    #canvas = new CanvasView();
+    #frame = new AABB2();
+    #curve_bounds = new AABB2();
+
+    /**
+     * 3x3 transform matrix
+     * Transform from curve space to canvas space
+     * @type {Float32Array}
+     */
+    #transform = new Float32Array(9);
+    /**
+     * 3x3 inverse of transform matrix
+     * @type {Float32Array}
+     */
+    #transform_inverse = new Float32Array(9);
+
+    /**
+     *
+     * @type {number}
+     */
+    #margin = 36
+
+    /**
+     *
+     * @param {AnimationCurve} v
+     */
+    set curve(v) {
+        this.#curve = v;
+
+        this.update();
+    }
+
+
+    constructor() {
+        super();
+
+        this.addChild(this.#canvas);
+
+        this.size.onChanged.add((x, y) => {
+
+            this.#canvas.size.set(x, y);
+            this.update();
+
+        });
+    }
+
+    auto_set_frame() {
+        animation_curve_compute_aabb(this.#curve_bounds, this.#curve);
+
+        this.#frame.copy(this.#curve_bounds);
+
+        if (this.#frame.height === 0) {
+            this.#frame.growHeight(0.5);
+        }
+
+        if (this.#frame.width === 0) {
+            this.#frame.growWidth(0.5);
+        }
+
+        const margin_top = this.#margin;
+        const margin_bottom = this.#margin;
+        const margin_left = this.#margin;
+        const margin_right = this.#margin;
+
+        const normalized_margin_left = (margin_left / this.size.x) * this.#frame.width;
+        const normalized_margin_right = (margin_right / this.size.x) * this.#frame.width;
+        const normalized_margin_top = (margin_top / this.size.y) * this.#frame.height;
+        const normalized_margin_bottom = (margin_bottom / this.size.y) * this.#frame.height;
+
+        this.#frame.x0 -= normalized_margin_left;
+        this.#frame.x1 += normalized_margin_right;
+        this.#frame.y0 -= normalized_margin_top;
+        this.#frame.y1 += normalized_margin_bottom;
+
+        this.#update_frame();
+    }
+
+    #update_frame() {
+
+        const frame = this.#frame;
+        const size = this.size;
+
+        const scale_x = size.x / frame.width;
+        const scale_y = -size.y / frame.height;
+
+        m3_cm_compose_transform(
+            this.#transform,
+            -frame.x0, -frame.y1,
+            scale_x, scale_y,
+            frame.x0, frame.y1, 0
+        );
+
+        m3_cm_invert(this.#transform_inverse, this.#transform);
+    }
+
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_curve_to_canvas(out, x, y) {
+
+        assert.notNaN(x, 'x');
+        assert.notNaN(y, 'y');
+
+        v2_matrix3_cm_multiply(out, 0,
+            x, y, this.#transform
+        );
+
+    }
+
+    /**
+     *
+     * @param {Float32Array|number[]} out
+     * @param {number} x
+     * @param {number} y
+     */
+    point_canvas_to_curve(out, x, y) {
+
+        v2_matrix3_cm_multiply(out, 0,
+            x, y, this.#transform_inverse
+        );
+
+    }
+
+    update() {
+        if (this.size.x <= 0 || this.size.y <= 0) {
+            // size too small
+            return;
+        }
+
+        this.auto_set_frame();
+
+        this.draw();
+    }
+
+    draw() {
+        const ctx = this.#canvas.context2d;
+
+        ctx.fillStyle = '#222222';
+        ctx.fillRect(0, 0, this.size.x, this.size.y);
+
+        this.draw_grid();
+
+
+        ctx.fillStyle = 'none';
+        ctx.strokeStyle = '#00ff00';
+        ctx.lineWidth = 1;
+
+        this.draw_curve();
+
+        ctx.fillStyle = 'none';
+        ctx.strokeStyle = '#0080ff';
+        ctx.lineWidth = 1;
+
+        this.draw_tangents();
+
+        this.draw_key_knots();
+    }
+
+    draw_grid() {
+        const ctx = this.#canvas.context2d;
+
+        const width = this.size.x;
+        const height = this.size.y;
+
+        canvas2d_draw_grid({
+            ctx,
+            width,
+            height,
+            color: '#262626',
+            spacing: 32,
+            offset_x: 0
+        });
+
+        canvas2d_draw_grid({
+            ctx,
+            width,
+            height,
+            color: '#303030',
+            spacing: 32,
+            offset_x: 16,
+            offset_y: 16
+        });
+    }
+
+    draw_key_knots() {
+        const keys = this.#curve.keys;
+        const key_count = keys.length;
+
+        for (let i = 0; i < key_count; i++) {
+            this.draw_key_knot(keys[i]);
+        }
+
+    }
+
+    draw_key_knot(key) {
+
+        const ctx = this.#canvas.context2d;
+
+        this.point_curve_to_canvas(scratch_v2_a, key.time, key.value);
+
+        const stroke_width = 1;
+        const radius = 2;
+
+        ctx.beginPath();
+        ctx.arc(scratch_v2_a[0], scratch_v2_a[1], radius + stroke_width * 0.5, 0, 2 * Math.PI, false);
+        ctx.fillStyle = 'green';
+        ctx.fill();
+        ctx.lineWidth = stroke_width;
+        ctx.strokeStyle = 'rgba(0,133,0,0.2)';
+        ctx.stroke();
+
+    }
+
+
+    /**
+     *
+     * @param {Keyframe} keyframe
+     */
+    draw_key_tangents(keyframe) {
+        const handle_length = 36;
+
+        const ctx = this.#canvas.context2d;
+
+        // incoming
+        const in_angle = -Math.atan2(keyframe.inTangent, -1);
+        this.draw_tangent(ctx, keyframe, in_angle, handle_length);
+
+        // outgoing
+        const ut_angle = Math.atan2(keyframe.outTangent, 1);
+
+        this.draw_tangent(ctx, keyframe, ut_angle, handle_length);
+    }
+
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {Keyframe} keyframe
+     * @param {number} angle
+     * @param {number} handle_length in pixels
+     */
+    draw_tangent(ctx, keyframe, angle, handle_length) {
+        ctx.beginPath();
+
+        this.point_curve_to_canvas(scratch_v2_a, keyframe.time, keyframe.value);
+
+        ctx.moveTo(scratch_v2_a[0], scratch_v2_a[1]);
+
+        this.point_curve_to_canvas(scratch_v2_b,
+            keyframe.time + Math.cos(angle),
+            keyframe.value + Math.sin(angle)
+        );
+
+        // a - b
+        scratch_v2_b[0] -= scratch_v2_a[0];
+        scratch_v2_b[1] -= scratch_v2_a[1];
+
+        // normalize to desired length
+        const norm = handle_length / v2_length(scratch_v2_b[0], scratch_v2_b[1]);
+
+        scratch_v2_b[0] *= norm;
+        scratch_v2_b[1] *= norm;
+
+        // restore offset
+        scratch_v2_b[0] += scratch_v2_a[0];
+        scratch_v2_b[1] += scratch_v2_a[1];
+
+        ctx.lineTo(scratch_v2_b[0], scratch_v2_b[1]);
+
+        ctx.stroke();
+    }
+
+    draw_tangents() {
+        const curve = this.#curve;
+        const keys = curve.keys;
+
+        for (let i = 0; i < keys.length; i++) {
+            const keyframe = keys[i];
+
+            this.draw_key_tangents(keyframe);
+        }
+    }
+
+    draw_curve() {
+
+        const ctx = this.#canvas.context2d;
+
+        ctx.beginPath();
+
+        const curve = this.#curve;
+
+        const keys = curve.keys;
+
+        if (keys.length < 2) {
+            return;
+        }
+
+        const duration = curve.duration;
+        const first_key = curve.keys[0];
+        const time_start = first_key.time;
+
+        const segments = Math.ceil(this.size.x / 4);
+
+        this.point_curve_to_canvas(scratch_v2_a, first_key.time, first_key.value);
+
+        ctx.moveTo(scratch_v2_a[0], scratch_v2_a[1]);
+
+        for (let i = 1; i < segments; i++) {
+            const t = i / (segments - 1);
+
+            const time = time_start + duration * t;
+
+            const value = curve.evaluate(time);
+
+            this.point_curve_to_canvas(scratch_v2_a, time, value);
+
+            ctx.lineTo(scratch_v2_a[0], scratch_v2_a[1]);
+        }
+
+        ctx.stroke();
+    }
+
+}

package/src/engine/animation/curve/view/prototype.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=prototype.d.ts.map

package/src/engine/animation/curve/view/prototype.d.ts.map

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

package/src/engine/animation/curve/view/prototype.js

@@ -0,0 +1,86 @@
+import { randomFloatBetween } from "../../../../core/math/random/randomFloatBetween.js";
+import { seededRandom } from "../../../../core/math/random/seededRandom.js";
+import { CSS_ABSOLUTE_POSITIONING } from "../../../../view/CSS_ABSOLUTE_POSITIONING.js";
+import { AnimationCurve } from "../AnimationCurve.js";
+import { Keyframe } from "../Keyframe.js";
+import { AnimationCurveView } from "./AnimationCurveView.js";
+
+let px = 0;
+let py = 0;
+
+function addCurve(curve) {
+
+
+    const view = new AnimationCurveView();
+    view.curve = curve;
+
+    view.css(CSS_ABSOLUTE_POSITIONING);
+
+    view.size.set(460, 288);
+
+    if (px + view.size.x > window.innerWidth) {
+        px = 0;
+        py += view.size.y;
+    }
+
+    view.position.set(px, py);
+
+    px += view.size.x;
+
+
+    document.body.appendChild(view.el);
+
+    view.css({
+        border: "1px solid rgba(255,255,255,0.2)"
+    });
+
+    view.link();
+
+}
+
+document.body.style.background = "black";
+document.body.style.overflow = "hidden";
+document.body.style.margin = "0";
+
+addCurve(AnimationCurve.constant());
+addCurve(AnimationCurve.easeInOut(0,0,1000));
+addCurve(AnimationCurve.linear());
+addCurve(AnimationCurve.from([
+    Keyframe.from(0, 0),
+    Keyframe.from(1, 1),
+    Keyframe.from(2, 0.5)
+]));
+
+
+addCurve(AnimationCurve.from([
+    Keyframe.from(-5, 7),
+    Keyframe.from(-2, -11)
+]));
+addCurve(AnimationCurve.from([
+    Keyframe.from(-1, 1),
+    Keyframe.from(1, -1)
+]));
+
+
+addCurve(AnimationCurve.from([
+    Keyframe.from(-5, 0),
+    Keyframe.from(1, 200)
+]));
+
+const random = seededRandom();
+
+const array = new Array(8).fill('');
+const keys = array.map(()=> Keyframe.from(
+    randomFloatBetween(random,-100,100),
+    randomFloatBetween(random,-100,100),
+));
+
+const curve = AnimationCurve.from(keys);
+
+for (let i = 0; i < keys.length; i++) {
+
+    curve.alignTangents(i);
+}
+curve.smoothAllTangents();
+
+addCurve(curve)

package/src/engine/ecs/dynamic_actions/rules/DynamicRuleDescription.js

@@ -99,7 +99,7 @@ export class DynamicRuleDescription {
     }
 
     fromJSON({
-                 id = UUID.v1().toString(),
+                 id = UUID.string(),
                  condition,
                  action,
                  global_cooldowns = [],

package/src/engine/ecs/guid/UUID.d.ts

@@ -1,6 +1,7 @@
 /**
- * Globally unique identifier
- * @class
+ * Universally Unique Identifier
+ * @see IETF RFC 4122
+ *
  */
 export class UUID {
     /**
@@ -9,6 +10,12 @@ export class UUID {
      */
     static v1(): UUID;
     static v4(): UUID;
+    /**
+     * Shortcut to generate string-form ID
+     * Uses v4 UUID
+     * @return {string}
+     */
+    static string(): string;
     /**
      *
      * @param {string} string
@@ -27,7 +34,7 @@ export class UUID {
     get data(): Uint8Array;
     /**
      * Generate Variant 1 UUID
-     * @see https://github.com/uuidjs/uuid/blob/8f028c4ea42ce41a9a9dc5fa634abe525b2e2066/src/v1.js#L17
+     *
      */
     v1(): void;
     /**

package/src/engine/ecs/guid/UUID.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UUID.d.ts","sourceRoot":"","sources":["../../../../../src/engine/ecs/guid/UUID.js"],"names":[],"mappings":"AAuBA;;;GAGG;AACH;IAgHI;;;OAGG;IACH,aAFY,IAAI,CAQf;IAED,kBAMC;IA0CD;;;;OAIG;IACH,qBAHW,MAAM,GACL,IAAI,CAQf;IApLD;;;OAGG;IACH,0BAKC;IAED;;;OAGG;IACH,uBAEC;IAED;;;OAGG;IACH,WAqEC;IAED;;OAEG;IACH,WAUC;IAsBD;;;;OAIG;IACH,cAFW,MAAM,QAmChB;IAeD;;;OAGG;IACH,YAFa,MAAM,CA2BlB;IAED;;;OAGG;IACH,YAFW,IAAI,QAId;IAED;;;;OAIG;IACH,cAHW,IAAI,GACF,OAAO,CAanB;IAED;;OAEG;IACH,QAFa,MAAM,CAWlB;IAED,iBAEC;IAED,uBAEC;IASL;;;OAGG;IACH,iBAFU,OAAO,CAEI;;CAZpB;;kBAIS,MAAM"}
+{"version":3,"file":"UUID.d.ts","sourceRoot":"","sources":["../../../../../src/engine/ecs/guid/UUID.js"],"names":[],"mappings":"AAwBA;;;;GAIG;AACH;IAiHI;;;OAGG;IACH,aAFY,IAAI,CAQf;IAED,kBAMC;IAED;;;;OAIG;IACH,iBAFY,MAAM,CAIjB;IA0CD;;;;OAIG;IACH,qBAHW,MAAM,GACL,IAAI,CAQf;IA9LD;;;OAGG;IACH,0BAKC;IAED;;;OAGG;IACH,uBAEC;IAED;;;OAGG;IACH,WAsEC;IAED;;OAEG;IACH,WAUC;IA+BD;;;;OAIG;IACH,cAFW,MAAM,QAmChB;IAeD;;;OAGG;IACH,YAFa,MAAM,CA2BlB;IAED;;;OAGG;IACH,YAFW,IAAI,QAId;IAED;;;;OAIG;IACH,cAHW,IAAI,GACF,OAAO,CAanB;IAED;;OAEG;IACH,QAFa,MAAM,CAWlB;IAED,iBAEC;IAED,uBAEC;IASL;;;OAGG;IACH,iBAFU,OAAO,CAEI;;CAZpB;;kBAIS,MAAM"}

package/src/engine/ecs/guid/UUID.js

@@ -9,6 +9,7 @@ import { seededRandom } from "../../../core/math/random/seededRandom.js";
 let _lastMSecs = 0;
 let _lastNSecs = 0;
 
+// seed random with current time to lower potential correlation
 const random = seededRandom(Date.now());
 
 // node and clockseq need to be initialized to random values.
@@ -22,8 +23,9 @@ _nodeId[0] |= 0x01;
 let _clockseq = ((randomUint8(random) << 8) | randomUint8(random)) & 0x3fff;
 
 /**
- * Globally unique identifier
- * @class
+ * Universally Unique Identifier
+ * @see IETF RFC 4122
+ *
  */
 export class UUID {
     #data = new Uint8Array(16);
@@ -34,7 +36,7 @@ export class UUID {
      */
     set data(bytes) {
         assert.isArrayLike(bytes, 'bytes');
-        assert.greaterThanOrEqual(bytes.length, 16, 'bytes.length >= 16');
+        assert.greaterThanOrEqual(bytes.length, 16, 'bytes.length < 16');
 
         array_copy(bytes, 0, this.#data, 0, 16);
     }
@@ -49,9 +51,10 @@ export class UUID {
 
     /**
      * Generate Variant 1 UUID
-     * @see https://github.com/uuidjs/uuid/blob/8f028c4ea42ce41a9a9dc5fa634abe525b2e2066/src/v1.js#L17
+     *
      */
     v1() {
+        // @see https://github.com/uuidjs/uuid/blob/8f028c4ea42ce41a9a9dc5fa634abe525b2e2066/src/v1.js#L17
 
         const b = this.#data;
 
@@ -83,7 +86,7 @@ export class UUID {
 
         // Per 4.2.1.2 Throw error if too many uuids are requested
         if (nsecs >= 10000) {
-            throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");
+            throw new Error(".v1(): Can't create more than 10M uuids/sec");
         }
 
         _lastMSecs = msecs;
@@ -157,6 +160,15 @@ export class UUID {
         return r;
     }
 
+    /**
+     * Shortcut to generate string-form ID
+     * Uses v4 UUID
+     * @return {string}
+     */
+    static string() {
+        return UUID.v4().toString();
+    }
+
     /***
      * String in UUID format
      * @see https://github.com/uuidjs/uuid/blob/8f028c4ea42ce41a9a9dc5fa634abe525b2e2066/src/parse.js#L3

package/src/engine/ecs/guid/UUID.spec.js

@@ -90,4 +90,11 @@ test("version bits in v4", () => {
     const uuid = UUID.v4();
 
     expect((uuid.data[6] >> 4) & 0xF).toEqual(4);
+});
+
+test("static 'string' method",()=>{
+    const s = UUID.string();
+
+    expect(typeof s).toBe("string");
+    expect(s.length).toBe(36);
 });

package/src/engine/ecs/guid/UUIDSerializationAdapter.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=UUIDSerializationAdapter.spec.d.ts.map

package/src/engine/ecs/guid/UUIDSerializationAdapter.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUIDSerializationAdapter.spec.d.ts","sourceRoot":"","sources":["../../../../../src/engine/ecs/guid/UUIDSerializationAdapter.spec.js"],"names":[],"mappings":""}

package/src/view/elements/DropDownSelectionView.js

@@ -56,7 +56,7 @@ class DropDownSelectionView extends View {
 
         const text = this.transfrom(el);
 
-        const id = UUID.v1().toString();
+        const id = UUID.string();
 
         this.mapping.set(el, id);
 

package/src/view/elements/tiles2d/Tile.d.ts

@@ -9,8 +9,8 @@ declare class TileView extends View<HTMLElement> {
      * @param {Vector2} [size]
      */
     constructor({ model, spacing, size }: Rectangle);
-    model: Rectangle;
     uuid: string;
+    model: Rectangle;
     __cellSize: Rectangle;
     __spacing: Rectangle;
     el: Element;