fix(listeners): allow dynamic update

Author: jourdain

examples/vtk/widgets_plane.py

@@ -125,21 +125,36 @@ def __init__(self, server=None):
         args, _ = self.server.cli.parse_known_args()
         self.render_window, self.widget, self.plane = create_vtk_pipeline(args.data)
 
+        # Allocation state variable for widget state
+        self.state.plane_widget = None
+
+        # Build UI
         self.html_view = None
         self.ui = self._ui()
 
-    def register_widget_listeners(self):
-        self.html_view.register_widget(self.widget)
+    @property
+    def state(self):
+        return self.server.state
 
-        # extract wasm ids
-        widget_id = self.html_view.get_wasm_id(self.widget)
-        rep_id = self.html_view.get_wasm_id(self.widget.representation)
+    @change("plane_widget")
+    def _on_widget_update(self, plane_widget, **_):
+        if plane_widget is None:
+            return
 
-        # init state vars and listener properties
-        self.server.state.plane_widget = None
-        self.html_view.listeners = (
-            "wasm_listeners",
-            {
+        # update cutting plane
+        self.plane.SetNormal(plane_widget.get("normal"))
+        self.plane.SetOrigin(plane_widget.get("origin"))
+
+        # prevent requesting geometry too often
+        self.html_view.render_throttle()
+
+    def toggle_listeners(self):
+        if self.state.wasm_listeners is not None and len(self.state.wasm_listeners):
+            self.state.wasm_listeners = {}
+        else:
+            widget_id = self.html_view.get_wasm_id(self.widget)
+            rep_id = self.html_view.get_wasm_id(self.widget.representation)
+            self.state.wasm_listeners = {
                 widget_id: {
                     "InteractionEvent": {
                         "plane_widget": {
@@ -150,32 +165,43 @@ def register_widget_listeners(self):
                         }
                     }
                 }
-            },
-        )
+            }
 
-    @change("plane_widget")
-    def _on_widget_update(self, plane_widget, **_):
-        if plane_widget is None:
-            return
-
-        # update cutting plane
-        self.plane.SetNormal(plane_widget.get("normal"))
-        self.plane.SetOrigin(plane_widget.get("origin"))
-
-        # prevent requesting geometry too often
-        self.html_view.render_throttle()
+    def one_time_update(self):
+        rep_id = self.html_view.get_wasm_id(self.widget.representation)
+        self.html_view.eval(
+            {
+                "plane_widget": {
+                    rep_id: {
+                        "Normal": "normal",
+                        "Origin": "origin",
+                    }
+                }
+            }
+        )
 
     def _ui(self):
         with DivLayout(self.server) as layout:
             client.Style("body { margin: 0; }")
+            html.Button(
+                "Toggle listeners",
+                click=self.toggle_listeners,
+                style="position: absolute; left: 1rem; top: 1rem; z-index: 10;",
+            )
+            html.Button(
+                "Update cut",
+                click=self.one_time_update,
+                style="position: absolute; right: 1rem; top: 1rem; z-index: 10;",
+            )
             with html.Div(
                 style="position: absolute; left: 0; top: 0; width: 100vw; height: 100vh;"
             ):
                 self.html_view = vtklocal.LocalView(
                     self.render_window,
                     throttle_rate=20,
+                    listeners=("wasm_listeners", {}),
                 )
-                self.register_widget_listeners()
+                self.html_view.register_widget(self.widget)
 
         return layout
 

trame_vtklocal/widgets/vtklocal.py

@@ -71,7 +71,7 @@ def __init__(self, render_window, throttle_rate=10, **kwargs):
         self._attr_names += [
             ("cache_size", "cacheSize"),
             ("eager_sync", "eagerSync"),
-            "listeners",  # only processed at mount time for now
+            ("listeners", ":listeners"),
         ]
         self._event_names += [
             "updated",
@@ -94,6 +94,24 @@ def object_manager(self):
         """Return object_manager"""
         return self.api.vtk_object_manager
 
+    def eval(self, state_mapping):
+        """Evaluate WASM state extract and map it onto trame state variables
+
+        state_mapping = {
+            trame_state_name: {
+                wasm_id1: {
+                    wasm_state_prop_name: js_name_in_trame_state_name_obj1
+                    wasm_state_prop_name2: js_name2_in_trame_state_name_obj1
+                },
+                wasm_id2: {
+                    wasm_state_prop_name: js_name_in_trame_state_name_obj2
+                    wasm_state_prop_name2: js_name2_in_trame_state_name_obj2
+                },
+            }
+        }
+        """
+        self.server.js_call(self.__ref, "evalStateExtract", state_mapping)
+
     def update(self, push_camera=False):
         """Sync view by pushing updates to client"""
         self.api.update(push_camera=push_camera)

vue-components/src/components/VtkLocal.js

@@ -1,9 +1,18 @@
-import { inject, ref, unref, onMounted, onBeforeUnmount } from "vue";
+import {
+  inject,
+  ref,
+  unref,
+  onMounted,
+  onBeforeUnmount,
+  toRef,
+  watchEffect,
+} from "vue";
 import { createModule } from "../utils";
 
 function idToState(sceneManager, cid) {
-  sceneManager.updateStateFromObject(cid);
-  return sceneManager.getState(cid);
+  const wasmId = Number(cid);
+  sceneManager.updateStateFromObject(wasmId);
+  return sceneManager.getState(wasmId);
 }
 
 function createExtractCallback(trame, sceneManager, extractInfo) {
@@ -64,14 +73,16 @@ export default {
     const trame = inject("trame");
     const wasmURL = trame.state.get("__trame_vtklocal_wasm_url");
     const cameraIds = [];
-    const observerTags = [];
+    const cameraTags = [];
+    const listenersTags = [];
     const container = ref(null);
     const canvas = ref(null);
     const client = props.wsClient || trame?.client;
     const stateMTimes = {};
     const hashesMTime = {};
     const pendingArrays = {};
     const currentMTime = ref(1);
+    const listeners = toRef(props, "listeners");
     let sceneManager = null;
     let updateInProgress = 0;
     let subscription = null;
@@ -238,7 +249,6 @@ export default {
 
         // For listeners
         cameraIds.push(...serverStatus.cameras);
-        // interactorId = serverStatus.interactor;
 
         serverStatus.ignore_ids.forEach((vtkId) => {
           sceneManager.unRegisterState(vtkId);
@@ -295,31 +305,15 @@ export default {
 
       // Camera listener
       for (let i = 0; i < cameraIds.length; i++) {
-        const cid = cameraIds[i];
-        observerTags.push([
+        const cid = Number(cameraIds[i]);
+        cameraTags.push([
           cid,
           sceneManager.addObserver(cid, "ModifiedEvent", () => {
-            sceneManager.updateStateFromObject(cid);
-            const cameraState = sceneManager.getState(cid);
-            emit("camera", cameraState);
+            emit("camera", idToState(sceneManager, cid));
           }),
         ]);
       }
 
-      // Other listeners
-      for (const [cid, eventMap] of Object.entries(props.listeners || {})) {
-        for (const [eventName, extractInfo] of Object.entries(eventMap || {})) {
-          observerTags.push([
-            cid,
-            sceneManager.addObserver(
-              cid,
-              eventName,
-              createExtractCallback(trame, sceneManager, extractInfo)
-            ),
-          ]);
-        }
-      }
-
       sceneManager.startEventLoop(props.renderWindow);
       if (resizeObserver) {
         resizeObserver.observe(unref(container));
@@ -332,8 +326,12 @@ export default {
       }
 
       // Camera listeners
-      while (observerTags.length) {
-        const [cid, tag] = observerTags.pop();
+      while (cameraTags.length) {
+        const [cid, tag] = cameraTags.pop();
+        sceneManager.removeObserver(cid, tag);
+      }
+      while (listenersTags.length) {
+        const [cid, tag] = listenersTags.pop();
         sceneManager.removeObserver(cid, tag);
       }
 
@@ -345,12 +343,42 @@ export default {
       }
     });
 
+    // Dynamic props ----------------------------------------------------------
+
+    watchEffect(() => {
+      while (listenersTags.length) {
+        const [cid, tag] = listenersTags.pop();
+        sceneManager.removeObserver(cid, tag);
+      }
+
+      for (const [cid, eventMap] of Object.entries(listeners.value || {})) {
+        const wasmId = Number(cid);
+        for (const [eventName, extractInfo] of Object.entries(eventMap || {})) {
+          const fn = createExtractCallback(trame, sceneManager, extractInfo);
+          listenersTags.push([
+            wasmId,
+            sceneManager.addObserver(wasmId, eventName, fn),
+          ]);
+
+          // Push update at registration
+          fn();
+        }
+      }
+    });
+
     // Public -----------------------------------------------------------------
+
+    function evalStateExtract(definition) {
+      console.log("definition", definition);
+      createExtractCallback(trame, sceneManager, definition)();
+    }
+
     return {
       container,
       canvas,
       update,
       resetCamera,
+      evalStateExtract,
     };
   },
   template: `