actually visually collapse nodes

1 files changed, 28 insertions, 28 deletions

diff --git a/src/index.js b/src/index.js
index 111a7f6..6a20a0c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as jsonld from 'jsonld';
 import * as dom from './dom';
-import * as layout from './layout';
+import Layout from './layout';
 import { Note } from './ui';
 
 window.jsonld = jsonld;
@@ -62,6 +62,7 @@ const loadData = async () => {
     {
       '@context': context,
       type: 'Document',
+      first: { '@embed': '@never' },
       items: {
         context: { '@embed': '@never' },
         replies: { '@embed': '@never' },
@@ -103,12 +104,12 @@ const createNotes = (graph, discussion) => {
 };
 
 const layoutNodes = async (graph) => {
-  let state = layout.init();
+  const layout = new Layout();
 
   for (const node of Object.values(graph))
-    state = layout.addNode(state, node);
+    layout.addNode(graph, node);
 
-  await layout.render(state, canvas,
+  await layout.render(canvas,
     (id, x, y) => {
       const dom = graph[id].dom;
       dom.style.left = `${x - dom.offsetWidth/2}px`;
@@ -128,22 +129,15 @@ const update = async (graph) => {
 
   createNotes(graph, discussion);
   await layoutNodes(graph);
-};
 
-const scrollToRoot = (graph) => {
-  for (const node of Object.values(graph)) {
-    if (node.data.inReplyTo.length === 0) {
-      node.dom.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-      return;
-    }
-  }
-}
+  const root = graph[discussion.first];
+  root.dom.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+};
 
 // update collapsed nodes starting with id
 // returns list of (potentially) affected nodes
-const updateCollapsed = (graph, id, updated=[]) => {
-  updated.push(id);
-  const node = graph[id];
+const updateCollapsed = (graph, node, updated=[]) => {
+  updated.push(node.data.id);
 
   if (node.collapsed !== 'explicit') {
     node.collapsed =
@@ -151,8 +145,8 @@ const updateCollapsed = (graph, id, updated=[]) => {
       && node.data.inReplyTo.every(p => graph[p.id].collapsed);
   }
 
-  for (const child of graph[id].data.replies)
-    updateCollapsed(graph, child.id, updated);
+  for (const child of node.data.replies)
+    updateCollapsed(graph, graph[child.id], updated);
 
   return updated;
 };
@@ -161,20 +155,26 @@ 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;
+  const clicked = graph[e.currentTarget.dataset.id];
+  clicked.collapsed = clicked.collapsed ? false : 'explicit';
+
+  for (const id of updateCollapsed(graph, clicked)) {
+    const node = graph[id];
+
+		if (node.collapsed) {
+      const noParents = node.data.inReplyTo.every(p => graph[p.id].collapsed);
+      const noChildren = node.data.replies.every(c => graph[c.id].collapsed);
+    	node.dom.className = noParents && noChildren ? 'hidden' : 'collapsed';
+		} else {
+    	node.dom.className = '';
+		}
   }
 
-  // layoutNodes(graph)
-  //   .then(() => scrollToRoot(graph))
-  //   .catch(err => console.error(err));
+  layoutNodes(graph)
+  	.then(() => clicked.dom.scrollIntoView({ block: 'nearest', inline: 'nearest' }))
+    .catch(err => console.error(err));
 };