opt: reduce applyStyleRules resolution

packages/entity/package.json

@@ -33,6 +33,7 @@
     "@avocado/math": "^3.0.0",
     "@avocado/resource": "^3.0.0",
     "@avocado/s13n": "^3.0.0",
+    "@avocado/timing": "^3.0.0",
     "@avocado/traits": "^3.0.0",
     "@flecks/core": "^1.4.1",
     "@flecks/socket": "^1.4.1",

packages/entity/src/traits/dom-node.js

@@ -1,4 +1,5 @@
 import {Vector} from '@avocado/math';
+import {Ticker} from '@avocado/timing';
 import {StateProperty, Trait} from '@avocado/traits';
 import {compose} from '@flecks/core';
 
@@ -16,7 +17,15 @@ const decorate = compose(
 
 export default () => class DomNode extends decorate(Trait) {
 
-  $$scheduledRuleApplication = true;
+  $$scheduledRuleApplication = false;
+
+  $$styleTicker;
+
+  constructor() {
+    super();
+    this.$$styleTicker = new Ticker(1 / 4);
+    this.$$styleTicker.on('tick', this.tickStyle, this);
+  }
 
   static defaultParams() {
     return {
@@ -45,6 +54,7 @@ export default () => class DomNode extends decorate(Trait) {
     super.destroy();
     super.parentNode?.removeChild(this.entity.node);
     super.parentNode = null;
+    this.$$styleTicker.off('tick', this.tickStyle);
   }
 
   listeners() {
@@ -81,6 +91,7 @@ export default () => class DomNode extends decorate(Trait) {
       parentNodeChanged: (oldParentNode, newParentNode) => {
         oldParentNode?.removeChild(this.entity.node);
         newParentNode?.appendChild(this.entity.node);
+        this.applyStyleRules();
       },
 
     };
@@ -99,6 +110,7 @@ export default () => class DomNode extends decorate(Trait) {
       `rotate(${360 * (rotation / (Math.PI * 2))}deg)`,
       `scale(${visibleScale[0]}, ${visibleScale[1]})`,
     ].join(' ');
+    this.entity.node.style.transition = 'transform 0.25s linear';
     this.entity.node.style.opacity = opacity;
   }
 
@@ -109,12 +121,17 @@ export default () => class DomNode extends decorate(Trait) {
       Object.entries(this.params.style).forEach(([key, value]) => {
         this.entity.node.style[key] = value;
       });
-      this.applyStyleRules();
     }
   }
 
-  tick() {
-    if ('web' === process.env.FLECKS_CORE_BUILD_TARGET && this.$$scheduledRuleApplication) {
+  tick(elapsed) {
+    if ('web' === process.env.FLECKS_CORE_BUILD_TARGET) {
+      this.$$styleTicker.tick(elapsed);
+    }
+  }
+
+  tickStyle() {
+    if (this.$$scheduledRuleApplication) {
       this.$$scheduledRuleApplication = false;
       this.applyStyleRules();
     }