Add support for text element markup (#218)

Author: willeastcott

examples/screen.html

@@ -28,12 +28,15 @@
                 <!-- Screen -->
                 <pc-entity name="screen">
                     <pc-screen screen-space></pc-screen>
-                    <pc-entity name="text" position="0 20 0">
+                    <pc-entity name="text" position="0 40 0">
                         <pc-element type="text" asset="arial" text="This is Arial"></pc-element>
                     </pc-entity>
-                    <pc-entity name="text2" position="0 -20 0">
+                    <pc-entity name="text2" position="0 0 0">
                         <pc-element type="text" asset="courier" text="This is Courier"></pc-element>
                     </pc-entity>
+                    <pc-entity name="text3" position="0 -40 0">
+                        <pc-element type="text" asset="arial" enable-markup text='[color="#ff0000"]Red[/color] [color="#00ff00"]Green[/color] [color="#0088ff"]Blue[/color]'></pc-element>
+                    </pc-entity>
                 </pc-entity>
             </pc-scene>
         </pc-app>

src/components/element-component.ts

@@ -21,6 +21,8 @@ class ElementComponentElement extends ComponentElement {
 
     private _color: Color = new Color(1, 1, 1, 1);
 
+    private _enableMarkup: boolean = false;
+
     private _fontSize: number = 32;
 
     private _lineHeight: number = 32;
@@ -49,6 +51,7 @@ class ElementComponentElement extends ComponentElement {
             anchor: this._anchor,
             autoWidth: this._autoWidth,
             color: this._color,
+            enableMarkup: this._enableMarkup,
             fontAsset: AssetElement.get(this._asset)!.id,
             fontSize: this._fontSize,
             lineHeight: this._lineHeight,
@@ -145,6 +148,25 @@ class ElementComponentElement extends ComponentElement {
         return this._color;
     }
 
+    /**
+     * Sets whether the element component should use markup.
+     * @param value - Whether to enable markup.
+     */
+    set enableMarkup(value: boolean) {
+        this._enableMarkup = value;
+        if (this.component) {
+            this.component.enableMarkup = value;
+        }
+    }
+
+    /**
+     * Gets whether the element component should use markup.
+     * @returns Whether markup is enabled.
+     */
+    get enableMarkup() {
+        return this._enableMarkup;
+    }
+
     /**
      * Sets the font size of the element component.
      * @param value - The font size.
@@ -285,6 +307,7 @@ class ElementComponentElement extends ComponentElement {
             'asset',
             'auto-width',
             'color',
+            'enable-markup',
             'font-size',
             'line-height',
             'pivot',
@@ -311,6 +334,9 @@ class ElementComponentElement extends ComponentElement {
             case 'color':
                 this.color = parseColor(newValue);
                 break;
+            case 'enable-markup':
+                this.enableMarkup = this.hasAttribute(name);
+                break;
             case 'font-size':
                 this.fontSize = Number(newValue);
                 break;