@woosh/meep-engine 2.84.5 → 2.84.8

package/src/view/View.js

@@ -3,15 +3,18 @@
  * @copyright Alex Goldring 2018
  */
 
-import Vector2 from "../core/geom/Vector2.js";
-
-import AABB2 from "../core/geom/2d/aabb/AABB2.js";
+import { assert } from "../core/assert.js";
 import Signal from "../core/events/signal/Signal.js";
 import { SignalBinding } from "../core/events/signal/SignalBinding.js";
-import { assert } from "../core/assert.js";
-import Vector1 from "../core/geom/Vector1.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 Vector1 from "../core/geom/Vector1.js";
+import Vector2 from "../core/geom/Vector2.js";
+import { epsilonEquals } from "../core/math/epsilonEquals.js";
+import { FLT_EPSILON_32 } from "../core/math/FLT_EPSILON_32.js";
+import { writeCssTransformMatrix } from "./writeCssTransformMatrix.js";
 
 
 const scratch_m3_0 = new Float32Array(9);
@@ -29,26 +32,7 @@ function setElementTransform(domElement, position, scale, rotation) {
 
     m3_cm_compose_transform(m3, position.x, position.y, scale.x, scale.y, 0, 0, rotation);
 
-
-    /*
-     * CSS matrix is:
-     *      a c e
-     *      b d f
-     *      0 0 1
-     */
-
-    const a = m3[0];
-    const b = m3[3];
-    const c = m3[1];
-    const d = m3[4];
-    const e = m3[2];
-    const f = m3[5];
-
-    const transform = "matrix(" + a + ',' + b + ',' + c + ',' + d + ',' + e + ',' + f + ")";
-
-    const style = domElement.style;
-
-    style.transform = transform;
+    writeCssTransformMatrix(m3, domElement);
 }
 
 /**
@@ -88,6 +72,9 @@ const INITIAL_FLAGS = ViewFlags.Visible;
  * @class
  */
 class View {
+    #transform_written = new Float32Array(9);
+    #transform_current = new Float32Array(9);
+
     /**
      * @constructor
      */
@@ -112,31 +99,32 @@ class View {
         this.flags = INITIAL_FLAGS;
 
         /**
-         *
+         * @readonly
          * @type {Vector2}
          */
         const position = this.position = new Vector2(0, 0);
 
         /**
-         *
+         * @readonly
          * @type {Vector1}
          */
         const rotation = this.rotation = new Vector1(0);
 
         /**
-         *
+         * @readonly
          * @type {Vector2}
          */
         const scale = this.scale = new Vector2(1, 1);
 
         /**
-         *
+         * @readonly
          * @type {Vector2}
          */
         const size = this.size = new Vector2(0, 0);
 
         /**
          * Origin from which rotation and scaling is applied
+         * @readonly
          * @type {Vector2}
          */
         this.transformOrigin = new Vector2(0.5, 0.5);
@@ -274,7 +262,41 @@ class View {
      * @private
      */
     __updateTransform() {
-        setElementTransform(this.el, this.position, this.scale, this.rotation.getValue());
+        const position = this.position;
+        const scale = this.scale;
+        const rotation = this.rotation.getValue();
+
+        m3_cm_compose_transform(this.#transform_current, position.x, position.y, scale.x, scale.y, 0, 0, rotation);
+
+        this.#tryWriteTransform();
+    }
+
+    #tryWriteTransform() {
+
+        const current = this.#transform_current;
+        const written = this.#transform_written;
+
+        for (let i = 0; i < 9; i++) {
+            const a = current[i];
+            const b = written[i];
+
+            if (epsilonEquals(a, b, FLT_EPSILON_32)) {
+                // common path
+                continue;
+            }
+
+            this.#writeTransform();
+            return true;
+
+        }
+
+        return false;
+    }
+
+    #writeTransform() {
+        writeCssTransformMatrix(this.#transform_current, this.el);
+
+        this.#transform_written.set(this.#transform_current);
     }
 
     /**

package/src/view/writeCssTransformMatrix.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * @param {Float32Array} m3
+ * @param {HTMLElement} domElement
+ */
+export function writeCssTransformMatrix(m3, domElement) {
+    /*
+     * CSS matrix is:
+     *      a c e
+     *      b d f
+     *      0 0 1
+     */
+
+    const a = m3[0];
+    const b = m3[3];
+    const c = m3[1];
+    const d = m3[4];
+    const e = m3[2];
+    const f = m3[5];
+
+    const transform = "matrix(" + a + ',' + b + ',' + c + ',' + d + ',' + e + ',' + f + ")";
+
+    const style = domElement.style;
+
+    style.transform = transform;
+}