fix(TextActor): add support for property change

fixes #3445

Author: daker

Sources/Rendering/Core/Actor2D/index.js

@@ -45,13 +45,15 @@ function vtkActor2D(publicAPI, model) {
 
   publicAPI.makeProperty = vtkProperty2D.newInstance;
 
-  publicAPI.getProperty = () => {
+  publicAPI.ensureProperty = () => {
     if (model.property === null) {
-      model.property = publicAPI.makeProperty();
+      publicAPI.setProperty(publicAPI.makeProperty());
     }
     return model.property;
   };
 
+  publicAPI.getProperty = () => publicAPI.ensureProperty();
+
   //----------------------------------------------------------------------------
   // Set the Prop2D's position in display coordinates.
   publicAPI.setDisplayPosition = (XPos, YPos) => {

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,8 @@ function vtkTextActor(publicAPI, model) {
   // Set our className
   model.classHierarchy.push('vtkTextActor');
 
+  const superClass = { ...publicAPI };
+
   publicAPI.makeProperty = vtkTextProperty.newInstance;
 
   const texture = vtkTexture.newInstance({
@@ -38,7 +40,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 +112,39 @@ function vtkTextActor(publicAPI, model) {
     return ImageHelper.canvasToImageData(canvas);
   }
 
+  function updateTexture() {
+    const image = createImageData(model.input);
+    texture.setInputData(image, 0);
+    model.textureBuildTime.modified();
+  }
+
+  function updateTextureIfNeeded() {
+    if (model.input === undefined) {
+      return;
+    }
+
+    if (
+      model.textureBuildTime.getMTime() < model.mtime ||
+      model.textureBuildTime.getMTime() < publicAPI.getProperty().getMTime()
+    ) {
+      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.getTextures = () => {
+    updateTextureIfNeeded();
+    return superClass.getTextures();
   };
 }
 
 // Default property values
 const DEFAULT_VALUES = {
-  mapper: null,
-  property: null,
+  textureBuildTime: null,
 };
 
 export function extend(publicAPI, model, initialValues = {}) {
@@ -135,6 +155,8 @@ export function extend(publicAPI, model, initialValues = {}) {
 
   // Build VTK API
   macro.setGet(publicAPI, model, ['input']);
+  model.textureBuildTime = {};
+  macro.obj(model.textureBuildTime, { mtime: 0 });
 
   // Object methods
   vtkTextActor(publicAPI, model);