Set internal properties when css is set

craftyjs · Feb 18, 2017 · 2242f6b · 2242f6b
1 parent 4c70433
commit 2242f6b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 3 deletions.
diff --git a/src/graphics/text.js b/src/graphics/text.js
@@ -20,9 +20,10 @@ var Crafty = require('../core/core.js');
  * rotate together.
  *
  * @note For DOM (but not canvas) text entities, various font settings (such as
- * text-decoration) can be set using `.css()` (see DOM component). But
- * you cannot use `.css()` to set the properties which are controlled by `.textFont()`,
- *  `.textColor()`, or `.textAlign()` -- the settings will be ignored.
+ * text-decoration) can be set using `.css()` (see DOM component). If you 
+ * use `.css()` to set the *individual* properties which are controlled by `.textFont()`,
+ *  `.textColor()`, or `.textAlign()`, the text component will set these properties internally as well.
+ * However, if you use `.css()` to set shorthand properties such as `font`, these will be ignored by the text component.
  *
  * @note If you use canvas text with glyphs that are taller than standard letters, portions of the glyphs might be cut off.
  */
@@ -74,6 +75,41 @@ Crafty.c("Text", {
 
                 context.restore();
             }
+        },
+
+        // type, weight, size, family, lineHeight, and variant.
+        // For a few hardcoded css properties, set the internal definitions
+        "SetStyle": function(propertyName) {
+            // could check for DOM component, but this event should only be fired by such an entity!
+            // Rather than triggering Invalidate on each of these, we rely on css() triggering that event 
+            switch(propertyName) {
+                case "textAlign": 
+                    this._textAlign = this._element.style.textAlign;
+                    break;
+                case "color":
+                    // Need to set individual color components, so use method
+                    this.textColor(this._element.style.color);
+                    break;
+                case "fontType":
+                    this._textFont.type = this._element.style.fontType;
+                    break;
+                case "fontWeight":
+                    this._textFont.weight = this._element.style.fontWeight;
+                    break;
+                case "fontSize":
+                    this._textFont.size = this._element.style.fontSize;
+                    break;
+                case "fontFamily":
+                    this._textFont.family = this._element.style.fontFamily;
+                    break;
+                case "fontVariant":
+                    this._textFont.variant = this._element.style.fontVariant;
+                    break;
+                case "lineHeight":
+                    this._textFont.lineHeight = this._element.style.lineHeight;
+                    break;
+            }
+
         }
     },
 

diff --git a/tests/text.js b/tests/text.js
@@ -106,6 +106,29 @@
     checkAlignment();
   });
 
+  test("Listen to style events for DOM Text", function(){
+    var e = Crafty.e("2D, DOM, Text");
+
+
+    e.text("hey how are you")
+      .textColor('#00FF00')
+      .textFont("size", "50px")
+      .textAlign("center");
+    equal(e._textColor, "rgba(0, 255, 0, 1)", "Color should be green.");
+    equal(e._textFont.size, "50px", "Size should be 50px.");
+    equal(e._textAlign, "center", "Alignment should be centered.");
+
+    e.css({
+      color: "red",
+      fontSize: "30px",
+      textAlign: "right"
+    });
+
+    equal(e._textColor, "rgba(255, 0, 0, 1)", "Color should be red.");
+    equal(e._textFont.size, "30px", "Size should be 30px.");
+    equal(e._textAlign, "right", "Alignment should be right.");
+  });
+
   test("MBR after alignment change", function() {
     var e = Crafty.e("2D, Canvas, Text");
     e.text("a");