refactor: Rastered

packages/entity/src/traits/textual.js

@@ -0,0 +1,26 @@
+import {StateProperty, Trait} from '@avocado/traits';
+import {compose} from '@latus/core';
+
+const decorate = compose(
+  StateProperty('text', {
+    track: true,
+  }),
+);
+
+export default () => class Textual extends decorate(Trait) {
+
+  static defaultState() {
+    return {
+      text: '',
+    };
+  }
+
+  static children() {
+    return {
+      text: {
+        type: 'string',
+      },
+    };
+  }
+
+};

packages/graphics/src/traits/pictured.js

@@ -39,7 +39,7 @@ export default (latus) => class Pictured extends decorate(Trait) {
 
   static dependencies() {
     return [
-      'Visible',
+      'Rastered',
     ];
   }
 

packages/graphics/src/traits/primitive.js

@@ -15,7 +15,7 @@ export default () => class Primitive extends Trait {
 
   static dependencies() {
     return [
-      'Visible',
+      'Rastered',
     ];
   }
 

packages/graphics/src/traits/raster-text.js

@@ -0,0 +1,47 @@
+import {Trait} from '@avocado/traits';
+
+import Text from '../text';
+
+export default () => class RasterText extends Trait {
+
+  #text;
+
+  static defaultParams() {
+    return {
+      textStyle: {},
+    };
+  }
+
+  static dependencies() {
+    return [
+      'Rastered',
+      'Textual',
+    ];
+  }
+
+  loadText() {
+    if (!this.entity.container) {
+      return;
+    }
+    if (!this.#text) {
+      this.#text = new Text(this.entity.text, this.params.textStyle);
+      this.#text.zIndex = 1000;
+    }
+    this.entity.container.addChild(this.#text);
+  }
+
+  listeners() {
+    return {
+
+      textChanged: () => {
+        this.loadText();
+      },
+
+      traitAdded: () => {
+        this.loadText();
+      },
+
+    };
+  }
+
+};

packages/graphics/src/traits/rastered.js

@@ -0,0 +1,120 @@
+import {Trait} from '@avocado/traits';
+
+import Container from '../container';
+
+// eslint-disable-next-line no-bitwise
+const AUTO_ZINDEX = 1 << 16;
+
+export default () => class Rastered extends Trait {
+
+  #container;
+
+  #usingAutoZIndex;
+
+  constructor() {
+    super();
+    if ('client' === process.env.SIDE) {
+      this.#container = new Container();
+    }
+  }
+
+  get container() {
+    return this.#container;
+  }
+
+  static defaultParams() {
+    return {
+      filter: undefined,
+    };
+  }
+
+  static dependencies() {
+    return [
+      'Visible',
+    ];
+  }
+
+  destroy() {
+    if (this.#container) {
+      this.#container.destroy();
+    }
+  }
+
+  listeners() {
+    return {
+
+      isVisibleChanged: () => {
+        if (!this.#container) {
+          return;
+        }
+        this.#container.visible = this.entity.isVisible;
+      },
+
+      opacityChanged: () => {
+        if (!this.#container) {
+          return;
+        }
+        this.#container.alpha = this.entity.opacity;
+      },
+
+      rotationChanged: () => {
+        if (!this.#container) {
+          return;
+        }
+        this.#container.rotation = this.entity.rotation;
+      },
+
+      traitAdded: () => {
+        this.synchronizePosition();
+      },
+
+      visibleScaleChanged: () => {
+        if (this.#container) {
+          this.#container.scale = this.entity.visibleScale;
+        }
+      },
+
+      zIndexChanged: (old, zIndex) => {
+        this.onZIndexChanged(zIndex);
+      },
+
+    };
+  }
+
+  async load(json) {
+    await super.load(json);
+    if ('client' === process.env.SIDE) {
+      const {filter} = this.params;
+      if (filter) {
+        this.#container.setFilter(filter);
+      }
+      this.#container.isVisible = this.state.isVisible;
+    }
+    this.onZIndexChanged(this.entity.zIndex);
+  }
+
+  onZIndexChanged(zIndex) {
+    if (!this.#container) {
+      return;
+    }
+    this.#usingAutoZIndex = AUTO_ZINDEX === zIndex;
+    if (!this.#usingAutoZIndex) {
+      this.#container.zIndex = zIndex;
+    }
+  }
+
+  renderTick() {
+    this.synchronizePosition();
+  }
+
+  synchronizePosition() {
+    if (!this.#container) {
+      return;
+    }
+    this.#container.position = this.entity.position;
+    if (this.#usingAutoZIndex) {
+      this.#container.zIndex = this.entity.y;
+    }
+  }
+
+};

packages/graphics/src/traits/textual.js

@@ -1,68 +0,0 @@
-import {StateProperty, Trait} from '@avocado/traits';
-import {compose} from '@latus/core';
-
-import Text from '../text';
-
-const decorate = compose(
-  StateProperty('text', {
-    track: true,
-  }),
-);
-
-export default () => class Textual extends decorate(Trait) {
-
-  #text;
-
-  static defaultState() {
-    return {
-      text: '',
-      textStyle: {},
-    };
-  }
-
-  static dependencies() {
-    return [
-      'Visible',
-    ];
-  }
-
-  static describeState() {
-    return {
-      text: {
-        type: 'string',
-        label: 'Text',
-      },
-      textStyle: {
-        type: 'object',
-        label: 'Text style',
-      },
-    };
-  }
-
-  loadText() {
-    if (!this.entity.container) {
-      return;
-    }
-    if (this.#text) {
-      this.entity.container.removeChild(this.#text);
-    }
-    this.#text = new Text(this.state.text, this.state.textStyle);
-    this.#text.zIndex = 1000;
-    this.entity.container.addChild(this.#text);
-  }
-
-  listeners() {
-    return {
-
-      textChanged: () => {
-        this.loadText();
-      },
-
-      traitAdded: () => {
-        this.loadText();
-      },
-
-    };
-  }
-
-};

packages/graphics/src/traits/visible.js

@@ -2,8 +2,6 @@ import {StateProperty, Trait} from '@avocado/traits';
 import {Rectangle, Vector} from '@avocado/math';
 import {compose} from '@latus/core';
 
-import Container from '../container';
-
 // eslint-disable-next-line no-bitwise
 const AUTO_ZINDEX = 1 << 16;
 
@@ -27,8 +25,6 @@ const decorate = compose(
 
 export default () => class Visible extends decorate(Trait) {
 
-  #container;
-
   #quadTreeAabb = [];
 
   #rawVisibleAabb = [0, 0, 0, 0];
@@ -37,13 +33,10 @@ export default () => class Visible extends decorate(Trait) {
 
   #usingAutoZIndex = true;
 
-  #visibleScale = [0, 0];
+  #visibleScale = [1, 1];
 
   constructor() {
     super();
-    if ('client' === process.env.SIDE) {
-      this.#container = new Container();
-    }
     ({
       visibleScale: this.#visibleScale,
     } = this.constructor.defaultState());
@@ -72,52 +65,7 @@ export default () => class Visible extends decorate(Trait) {
     list.quadTree.add(this.entity, expandedAabb);
   }
 
-  static behaviorTypes() {
-    return {
-      updateVisibleBoundingBox: {
-        advanced: true,
-        type: 'void',
-        label: 'Update the visible bounding box.',
-      },
-    };
-  }
-
-  get container() {
-    return this.#container;
-  }
-
-  static defaultParams() {
-    return {
-      filter: undefined,
-    };
-  }
-
-  static defaultState() {
-    return {
-      isVisible: true,
-      opacity: 1,
-      rotation: 0,
-      visibleScale: [1, 1],
-      zIndex: AUTO_ZINDEX,
-    };
-  }
-
-  static dependencies() {
-    return [
-      'Positioned',
-    ];
-  }
-
-  static describeParams() {
-    return {
-      filter: {
-        type: 'object',
-        label: 'Filter',
-      },
-    };
-  }
-
-  static describeState() {
+  static children() {
     return {
       isVisible: {
         type: 'bool',
@@ -142,10 +90,23 @@ export default () => class Visible extends decorate(Trait) {
     };
   }
 
+  static defaultState() {
+    return {
+      isVisible: true,
+      opacity: 1,
+      rotation: 0,
+      visibleScale: [1, 1],
+      zIndex: AUTO_ZINDEX,
+    };
+  }
+
+  static dependencies() {
+    return [
+      'Positioned',
+    ];
+  }
+
   destroy() {
-    if (this.#container) {
-      this.#container.destroy();
-    }
     this.removeFromQuadTree(this.entity.list);
   }
 
@@ -177,20 +138,6 @@ export default () => class Visible extends decorate(Trait) {
         this.addToQuadTree();
       },
 
-      isVisibleChanged: () => {
-        if (!this.#container) {
-          return;
-        }
-        this.#container.visible = this.entity.isVisible;
-      },
-
-      opacityChanged: () => {
-        if (!this.#container) {
-          return;
-        }
-        this.#container.alpha = this.entity.opacity;
-      },
-
       positionChanged: () => {
         this.translateVisibleAabb();
       },
@@ -199,16 +146,8 @@ export default () => class Visible extends decorate(Trait) {
         this.removeFromQuadTree(list);
       },
 
-      rotationChanged: () => {
-        if (!this.#container) {
-          return;
-        }
-        this.#container.rotation = this.entity.rotation;
-      },
-
       traitAdded: () => {
         this.updateQuadTree();
-        this.synchronizePosition();
       },
 
       updateVisibleBoundingBox: () => {
@@ -219,31 +158,12 @@ export default () => class Visible extends decorate(Trait) {
         this.updateQuadTree();
       },
 
-      visibleScaleChanged: () => {
-        this.#visibleScale = Vector.copy(this.entity.visibleScale);
-        if (this.#container) {
-          this.#container.scale = this.#visibleScale;
-        }
-      },
-
-      zIndexChanged: (old, zIndex) => {
-        this.onZIndexChanged(zIndex);
-      },
-
     };
   }
 
   async load(json) {
     await super.load(json);
-    if ('client' === process.env.SIDE) {
-      const {filter} = this.params;
-      if (filter) {
-        this.#container.setFilter(filter);
-      }
-      this.#container.isVisible = this.state.isVisible;
-    }
     this.#visibleScale = Vector.copy(this.state.visibleScale);
-    this.onZIndexChanged(this.state.zIndex);
     this.entity.emit('updateVisibleBoundingBox');
   }
 
@@ -257,16 +177,6 @@ export default () => class Visible extends decorate(Trait) {
     };
   }
 
-  onZIndexChanged(zIndex) {
-    if (!this.#container) {
-      return;
-    }
-    this.#usingAutoZIndex = AUTO_ZINDEX === zIndex;
-    if (!this.#usingAutoZIndex) {
-      this.#container.zIndex = zIndex;
-    }
-  }
-
   packets() {
     const {isVisible, opacity, rotation} = this.stateDifferences();
     if (isVisible || opacity || rotation) {
@@ -302,20 +212,6 @@ export default () => class Visible extends decorate(Trait) {
     this.#quadTreeAabb = [];
   }
 
-  renderTick() {
-    this.synchronizePosition();
-  }
-
-  synchronizePosition() {
-    if (!this.#container) {
-      return;
-    }
-    this.#container.position = this.entity.position;
-    if (this.#usingAutoZIndex) {
-      this.#container.zIndex = this.entity.y;
-    }
-  }
-
   updateQuadTree() {
     if ('client' !== process.env.SIDE) {
       if (Vector.isNull(Rectangle.size(this.entity.visibleAabb))) {

packages/timing/src/traits/animated.js

@@ -84,7 +84,7 @@ export default (latus) => class Animated extends decorate(Trait) {
 
   static dependencies() {
     return [
-      'Visible',
+      'Rastered',
     ];
   }