Ensure label component is updated when its text content is changed

claudijo · Mar 29, 2022 · bacfe3c · bacfe3c
1 parent eff3667
commit bacfe3c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/dist/index.cjs.js b/dist/index.cjs.js
@@ -1840,6 +1840,14 @@ var CanvasLabel = /*#__PURE__*/function (_AbstractShape) {
   }
 
   _createClass(CanvasLabel, [{
+    key: "textContent",
+    get: function get() {
+      return this.getTextualAttribute('textContent', '');
+    },
+    set: function set(value) {
+      this.setAttribute('textContent', value);
+    }
+  }, {
     key: "fontSize",
     get: function get() {
       return this.getNumericAttribute('fontSize', 10);
@@ -2006,7 +2014,7 @@ var CanvasLabel = /*#__PURE__*/function (_AbstractShape) {
   }], [{
     key: "observedAttributes",
     get: function get() {
-      return [].concat(_toConsumableArray(AbstractShape.observedAttributes), ['color', 'fontsize', 'fontfamily', 'fontstyle', 'fontweight', 'baseline', 'align', 'maxwidth']);
+      return [].concat(_toConsumableArray(AbstractShape.observedAttributes), ['color', 'fontsize', 'fontfamily', 'fontstyle', 'fontweight', 'baseline', 'align', 'maxwidth', 'textcontent']);
     }
   }]);
 

diff --git a/dist/index.esm.js b/dist/index.esm.js
@@ -1832,6 +1832,14 @@ var CanvasLabel = /*#__PURE__*/function (_AbstractShape) {
   }
 
   _createClass(CanvasLabel, [{
+    key: "textContent",
+    get: function get() {
+      return this.getTextualAttribute('textContent', '');
+    },
+    set: function set(value) {
+      this.setAttribute('textContent', value);
+    }
+  }, {
     key: "fontSize",
     get: function get() {
       return this.getNumericAttribute('fontSize', 10);
@@ -1998,7 +2006,7 @@ var CanvasLabel = /*#__PURE__*/function (_AbstractShape) {
   }], [{
     key: "observedAttributes",
     get: function get() {
-      return [].concat(_toConsumableArray(AbstractShape.observedAttributes), ['color', 'fontsize', 'fontfamily', 'fontstyle', 'fontweight', 'baseline', 'align', 'maxwidth']);
+      return [].concat(_toConsumableArray(AbstractShape.observedAttributes), ['color', 'fontsize', 'fontfamily', 'fontstyle', 'fontweight', 'baseline', 'align', 'maxwidth', 'textcontent']);
     }
   }]);
 

diff --git a/lib/shapes/label.js b/lib/shapes/label.js
@@ -18,9 +18,18 @@ export class CanvasLabel extends AbstractShape {
       'baseline',
       'align',
       'maxwidth',
+      'textcontent',
     ];
   }
 
+  get textContent() {
+    return this.getTextualAttribute('textContent', '');
+  }
+
+  set textContent(value) {
+    this.setAttribute('textContent', value);
+  }
+
   get fontSize() {
     return this.getNumericAttribute('fontSize', 10);
   }