fix(TextActor): add support for property change

fixes #3445

Author: daker

Sources/Rendering/Core/TextActor/example/index.js

@@ -37,6 +37,16 @@ const params = {
   text: 'Hello World!',
   x: window.innerWidth / 4,
   y: window.innerHeight / 4,
+  color: [0, 0, 0],
+  fontFamily: 'Arial',
+  fontSize: actor.getProperty().getResolution(),
+};
+
+const fonts = {
+  Arial: 'Arial',
+  Verdana: 'Verdana',
+  Tahoma: 'Tahoma',
+  Times: 'Times New Roman',
 };
 
 gui
@@ -46,6 +56,27 @@ gui
     actor.setInput(value);
     renderWindow.render();
   });
+gui
+  .add(params, 'fontFamily', fonts)
+  .name('Font')
+  .onChange((value) => {
+    actor.getProperty().setFontFamily(value);
+    renderWindow.render();
+  });
+gui
+  .add(params, 'fontSize', 50, 400, 1)
+  .name('Font Size')
+  .onChange((value) => {
+    actor.getProperty().setResolution(value);
+    renderWindow.render();
+  });
+gui
+  .addColor(params, 'color')
+  .name('Font Color')
+  .onChange((value) => {
+    actor.getProperty().setFontColor(value[0], value[1], value[2]);
+    renderWindow.render();
+  });
 gui
   .add(params, 'x')
   .name('X Position')

Sources/Rendering/Core/TextActor/index.js

@@ -14,6 +14,10 @@ function vtkTextActor(publicAPI, model) {
   // Set our className
   model.classHierarchy.push('vtkTextActor');
 
+  const superDelete = publicAPI.delete;
+  const superGetProperty = publicAPI.getProperty;
+  const superSetProperty = publicAPI.setProperty;
+
   publicAPI.makeProperty = vtkTextProperty.newInstance;
 
   const texture = vtkTexture.newInstance({
@@ -38,7 +42,7 @@ function vtkTextActor(publicAPI, model) {
     const backgroundColor = publicAPI.getProperty().getBackgroundColor();
 
     const dpr = Math.max(window.devicePixelRatio || 1, 1);
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
 
     // Set the text properties to measure
     const textSize = fontSizeScale(resolution) * dpr;
@@ -110,21 +114,66 @@ function vtkTextActor(publicAPI, model) {
     return ImageHelper.canvasToImageData(canvas);
   }
 
+  function updateTexture() {
+    const image = createImageData(model.input);
+    texture.setInputData(image, 0);
+  }
+
+  function bindProperty(property) {
+    if (model.propertySubscription) {
+      model.propertySubscription.unsubscribe();
+      model.propertySubscription = null;
+    }
+
+    if (property) {
+      model.propertySubscription = property.onModified(() => {
+        if (model.input !== undefined) {
+          updateTexture();
+        }
+      });
+    }
+  }
+
   mapper.setInputConnection(plane.getOutputPort());
 
   publicAPI.setMapper(mapper);
   publicAPI.addTexture(texture);
 
-  model._onInputChanged = (_publicAPI, _model, value) => {
-    const image = createImageData(value);
-    texture.setInputData(image, 0);
+  publicAPI.getProperty = () => {
+    const property = superGetProperty();
+    if (model.property !== property || !model.propertySubscription) {
+      bindProperty(property);
+    }
+    return property;
+  };
+
+  publicAPI.setProperty = (property) => {
+    const changed = superSetProperty(property);
+    bindProperty(property);
+    if (model.input !== undefined) {
+      updateTexture();
+    }
+    return changed;
+  };
+
+  publicAPI.delete = () => {
+    if (model.propertySubscription) {
+      model.propertySubscription.unsubscribe();
+      model.propertySubscription = null;
+    }
+    superDelete();
+  };
+
+  model._onInputChanged = () => {
+    updateTexture();
   };
 }
 
 // Default property values
 const DEFAULT_VALUES = {
   mapper: null,
   property: null,
+  propertySubscription: null,
 };
 
 export function extend(publicAPI, model, initialValues = {}) {