feat: primitive trait

packages/graphics/traits/primitive.trait.js

@@ -0,0 +1,71 @@
+import {compose} from '@avocado/core';
+import {StateProperty, Trait} from '@avocado/entity';
+import {Color, Primitives} from '@avocado/graphics';
+
+const decorate = compose(
+)
+
+export class Primitive extends decorate(Trait) {
+
+  static defaultParams() {
+    return {
+      primitives: [],
+    };
+  }
+
+  static type() {
+    return 'primitive';
+  }
+
+  constructor(entity, params, state) {
+    super(entity, params, state);
+    this._primitives = undefined;
+  }
+
+  drawPrimitives() {
+    if (!this.entity.container) {
+      return;
+    }
+    if (this._primitives) {
+      this.entity.container.removeChild(this._primitives);
+    }
+    this._primitives = new Primitives();
+    for (let i = 0; i < this.params.primitives.length; i++) {
+      const primitive = this.params.primitives[i];
+      if ('circle' === primitive.type) {
+        const line = {
+          rgba: [255, 0, 255, 1],
+          thickness: 1,
+          ...primitive.line,
+        };
+        const fill = primitive.fill ? primitive.fill : {
+          rgba: [0, 0, 0, 0]
+        };
+        this._primitives.drawCircle(
+          primitive.position || [0, 0],
+          primitive.radius,
+          Primitives.lineStyle(new Color(...line.rgba), 1),
+          Primitives.fillStyle(new Color(...fill.rgba)),
+        );
+      }
+    }
+    this.entity.container.addChild(this._primitives);
+  }
+
+  listeners() {
+    return {
+
+      traitAdded: (type) => {
+        if (-1 === [
+          'primitive',
+          'visible',
+        ].indexOf(type)) {
+          return;
+        }
+        this.drawPrimitives();
+      },
+
+    };
+  }
+
+}