try watching attributes to restart rendering if child changes position

lmorchard · May 16, 2024 · fdbe24a · fdbe24a
1 parent ab0e43d
commit fdbe24a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <sticky-notes-canvas id="notes-canvas" zoom="0.5" originX="0" originY="0">
+    <sticky-notes-canvas id="notes-canvas" zoom="0.3" originX="0" originY="0">
     </sticky-notes-canvas>
   </body>
 </html>
diff --git a/public/lib/components/StickyNotesCanvas.js b/public/lib/components/StickyNotesCanvas.js
@@ -63,9 +63,10 @@ export class StickyNotesCanvas extends DraggableMixin(BaseElement) {
       300.0, // Spring stiffness
       200.0, // Node repulsion
       0.5, // Damping
-      0.01 // minEnergyThreshold
+      0.5 // minEnergyThreshold
     );
 
+    // HACK: wedge in a handler to fire just before layout tick
     const layoutTick = this.layout.tick.bind(this.layout);
     this.layout.tick = (timestep) => {
       this.rendererBeforeTick(timestep);
@@ -81,10 +82,7 @@ export class StickyNotesCanvas extends DraggableMixin(BaseElement) {
       () => { this.rendering = true },
     );
 
-    this.mainNode = new Springy.Node("main", { mass: 100000 });
-    this.graph.addNode(this.mainNode);
-
-    this.mutationObserver.observe(this, { childList: true, subtree: true });
+    this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
 
     for (const noteEl of this.querySelectorAll("sticky-note")) {
       this.upsertGraphNode(noteEl);
@@ -172,22 +170,26 @@ export class StickyNotesCanvas extends DraggableMixin(BaseElement) {
 
   handleMutations(records) {
     for (const record of records) {
-      for (const node of record.removedNodes) {
-        if (node instanceof StickyNotesClusterLink) {
-          this.removeTopicLink(record.target, node);
-        } else if (node instanceof StickyNotesClusterTopic) {
-          this.graph.removeNode({ id: node.id });
-        } else if (node instanceof StickyNote) {
-          this.graph.removeNode({ id: node.id });
+      if (record.type == 'attributes') {
+        if (!this.rendering) this.renderer.start();
+      } else if (record.type == 'childList') {
+        for (const node of record.removedNodes) {
+          if (node instanceof StickyNotesClusterLink) {
+            this.removeTopicLink(record.target, node);
+          } else if (node instanceof StickyNotesClusterTopic) {
+            this.graph.removeNode({ id: node.id });
+          } else if (node instanceof StickyNote) {
+            this.graph.removeNode({ id: node.id });
+          }
         }
-      }
-      for (const node of record.addedNodes) {
-        if (node instanceof StickyNotesClusterLink) {
-          this.addTopicLink(record.target, node);
-        } else if (node instanceof StickyNotesClusterTopic) {
-          this.addTopic(node);
-        } else if (node instanceof StickyNote) {
-          this.upsertGraphNode(node);
+        for (const node of record.addedNodes) {
+          if (node instanceof StickyNotesClusterLink) {
+            this.addTopicLink(record.target, node);
+          } else if (node instanceof StickyNotesClusterTopic) {
+            this.addTopic(node);
+          } else if (node instanceof StickyNote) {
+            this.upsertGraphNode(node);
+          }
         }
       }
     }