From f69650e1f8c459506b9a31f7d372219537000b12 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Sun, 3 Nov 2019 10:41:40 -0600
Subject: [PATCH] feat: text and textual trait

---
 packages/graphics/index.js                |  1 +
 packages/graphics/text.js                 | 17 +++++++
 packages/graphics/traits/textual.trait.js | 61 +++++++++++++++++++++++
 3 files changed, 79 insertions(+)
 create mode 100644 packages/graphics/text.js
 create mode 100644 packages/graphics/traits/textual.trait.js

diff --git a/packages/graphics/index.js b/packages/graphics/index.js
index 57a3df3..4c8f968 100644
--- a/packages/graphics/index.js
+++ b/packages/graphics/index.js
@@ -12,6 +12,7 @@ export {Renderable} from './renderable';
 export {Renderer} from './renderer';
 export {Sprite} from './sprite';
 export {Stage} from './stage';
+export {Text} from './text';
 // Pixelly!
 settings.SCALE_MODE = SCALE_MODES.NEAREST;
 // Lil pixi manegement.
diff --git a/packages/graphics/text.js b/packages/graphics/text.js
new file mode 100644
index 0000000..7bf8928
--- /dev/null
+++ b/packages/graphics/text.js
@@ -0,0 +1,17 @@
+import {Text as PIXIText} from '@pixi/text';
+
+import {Renderable} from './renderable';
+
+export class Text extends Renderable {
+
+  constructor(text, style) {
+    super();
+    this.text = new PIXIText(text, style);
+    this.anchor = [0.5, 0.5];
+  }
+
+  get internal() {
+    return this.text;
+  }
+
+}
diff --git a/packages/graphics/traits/textual.trait.js b/packages/graphics/traits/textual.trait.js
new file mode 100644
index 0000000..a4fddf4
--- /dev/null
+++ b/packages/graphics/traits/textual.trait.js
@@ -0,0 +1,61 @@
+import {compose} from '@avocado/core';
+import {StateProperty, Trait} from '@avocado/entity';
+import {Text} from '@avocado/graphics';
+
+const decorate = compose(
+  StateProperty('text', {
+    track: true,
+  }),
+)
+
+export class Textual extends decorate(Trait) {
+
+  static defaultState() {
+    return {
+      text: '',
+      textStyle: {},
+    };
+  }
+
+  static type() {
+    return 'textual';
+  }
+
+  constructor(entity, params, state) {
+    super(entity, params, state);
+    this._text = undefined;
+  }
+
+  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: (type) => {
+        if (-1 === [
+          'textual',
+          'visible',
+        ].indexOf(type)) {
+          return;
+        }
+        this.loadText();
+      },
+
+    };
+  }
+
+}