refactor: remove FACTOR

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

@@ -3,14 +3,17 @@ import {StateProperty, Trait} from '@avocado/traits';
 import {compose} from '@flecks/core';
 
 const decorate = compose(
+  StateProperty('domScaleX', {
+    track: true,
+  }),
+  StateProperty('domScaleY', {
+    track: true,
+  }),
   StateProperty('parentNode', {
     track: true,
   }),
 );
 
-// TODO...
-const FACTOR = 5;
-
 export default () => class DomNode extends decorate(Trait) {
 
   #scheduledRuleApplication = true;
@@ -25,6 +28,8 @@ export default () => class DomNode extends decorate(Trait) {
 
   static defaultState() {
     return {
+      domScaleX: 1,
+      domScaleY: 1,
       parentNode: null,
     };
   }
@@ -64,6 +69,14 @@ export default () => class DomNode extends decorate(Trait) {
         this.#scheduledRuleApplication = true;
       },
 
+      domScaleXChanged: () => {
+        this.#scheduledRuleApplication = true;
+      },
+
+      domScaleYChanged: () => {
+        this.#scheduledRuleApplication = true;
+      },
+
       parentNodeChanged: (oldParentNode, newParentNode) => {
         oldParentNode?.removeChild(this.entity.node);
         newParentNode?.appendChild(this.entity.node);
@@ -79,7 +92,7 @@ export default () => class DomNode extends decorate(Trait) {
       rotation,
       visibleScale,
     } = this.entity;
-    const [x, y] = Vector.scale(position, FACTOR);
+    const [x, y] = Vector.mul(position, [this.entity.domScaleX, this.entity.domScaleY]);
     this.entity.node.style.transform = [
       `translate(${x}px, ${y}px)`,
       `rotate(${360 * (rotation / (Math.PI * 2))}deg)`,

packages/topdown/src/components/room.jsx

@@ -8,6 +8,7 @@ import {
 } from '@flecks/react';
 
 const Room = ({
+  domScale,
   left,
   room,
   top,
@@ -19,8 +20,10 @@ const Room = ({
     }
     const onEntityAdded = async (entity) => {
       if (entity.is('DomNode')) {
-        // eslint-disable-next-line no-param-reassign
+        /* eslint-disable no-param-reassign */
+        [entity.domScaleX, entity.domScaleY] = domScale;
         entity.parentNode = ref.current.querySelector('.entities');
+        /* eslint-enable no-param-reassign */
       }
     };
     Object.values(room.entities).forEach(onEntityAdded);
@@ -28,13 +31,13 @@ const Room = ({
     return () => {
       room.off('entityAdded', onEntityAdded);
     };
-  }, [ref, room]);
+  }, [domScale, ref, room]);
   useEffect(() => {
     if (!ref.current || !room) {
       return;
     }
     const entities = ref.current.querySelector('.entities');
-    entities.style.transform = `translate(${left}px, ${top}px)`;
+    entities.style.transform = `translate(${left * domScale[0]}px, ${top * domScale[1]}px)`;
   });
   return (
     <div
@@ -51,6 +54,8 @@ Room.defaultProps = {
 };
 
 Room.propTypes = {
+  // @todo Real prop type
+  domScale: PropTypes.arrayOf(PropTypes.number).isRequired,
   left: PropTypes.number.isRequired,
   room: PropTypes.shape({
     entities: PropTypes.shape({}),