node collapsing (w/o relayouting)

1 files changed, 41 insertions, 5 deletions

diff --git a/src/index.js b/src/index.js
index 911099c..111a7f6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,11 +23,11 @@ dom.css`
 
 document.body.appendChild(
   <article>
-  	<h1 id="title">loading...</h1>
-  	<div class="graph">
-    	<canvas id="links" />
-    	<div id="nodes" />
-  	</div>
+    <h1 id="title">loading...</h1>
+    <div class="graph">
+      <canvas id="links" />
+      <div id="nodes" />
+    </div>
   </article>
 );
 
@@ -93,6 +93,7 @@ const createNotes = (graph, discussion) => {
           && onlyParent.attributedTo === data.attributedTo // posted by same user
           && onlyParent.published === data.published       // in the same second
         }
+        onHide={hideNote}
       />
     );
     nodes.appendChild(dom);
@@ -138,7 +139,42 @@ const scrollToRoot = (graph) => {
   }
 }
 
+// update collapsed nodes starting with id
+// returns list of (potentially) affected nodes
+const updateCollapsed = (graph, id, updated=[]) => {
+  updated.push(id);
+  const node = graph[id];
+
+  if (node.collapsed !== 'explicit') {
+    node.collapsed =
+      node.data.inReplyTo.length
+      && node.data.inReplyTo.every(p => graph[p.id].collapsed);
+  }
+
+  for (const child of graph[id].data.replies)
+    updateCollapsed(graph, child.id, updated);
+
+  return updated;
+};
+
 const graph = {};
+window.graph = graph;
+
 update(graph)
   .then(() => scrollToRoot(graph))
   .catch(err => console.error(err));
+
+const hideNote = (e) => {
+  const node = graph[e.currentTarget.dataset.id];
+
+  node.collapsed = node.collapsed ? false : 'explicit';
+
+  for (const id of updateCollapsed(graph, node.data.id)) {
+    graph[id].dom.style.opacity = graph[id].collapsed ? 0.2 : 1.0;
+  }
+
+  // layoutNodes(graph)
+  //   .then(() => scrollToRoot(graph))
+  //   .catch(err => console.error(err));
+};
+