Folder unfold behavior change to a single-click, folding improvements and fixes

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/js/graph/index.js

@@ -1,4 +1,4 @@
-import { onModelUpdate, unfold, dropNodesm, uiState } from "../model";
+import { onModelUpdate, unfold, dropNodes, uiState } from "../model";
 import { updateSelection, selectAll, deselectAll } from "../selection";
 
 let shiftKey, ctrlKey,
@@ -250,20 +250,23 @@ export function update (g = lastGraph, reset = false) {
         .attr("class", d => `node${ d.id === 0 ? " root" : "" } ${ d.type || "unknown" }`)
         .classed("selected", (p) => p.selected)
         .call(dragger)
-        .on("dblclick", function (d) {
-            if (d.type !== "folder")
+        .on("click", function (d) {
+            if (d.type === "folder") {
+                d3.event.stopPropagation();
+                let left;
+                if (d.parent && (left = unfold(d, d.parent))) {
+                    d.fx = d.x; d.fy = d.y;
+                    if (d._clickTimeout) clearTimeout(d._clickTimeout);
+                    d._clickTimeout = setTimeout(() => {
+                        d.fx = d.fy = null;
+                        d._clickTimeout = 0;
+                    }, 1000);
+                }
+                if (left === 0) {
+                    dropNodes(d);
+                }
                 return;
-            d3.event.stopPropagation();
-            let left;
-            if (d.parent && (left = unfold(d, d.parent))) {
-                d.fx = d.x; d.fy = d.y;
-                setTimeout(() => d.fx = d.fy = null, 1000);
-            }
-            if (left === 0) {
-                dropNodes(d);
             }
-        })
-        .on("click", function (d) {
             if (d3.event.defaultPrevented) return;
             if (shiftKey) {
                 if (d.selected)
@@ -291,7 +294,7 @@ export function update (g = lastGraph, reset = false) {
             .classed("tooltip", () => true)
             .attr("dy", "-0.7em")
             .attr("style", d => `font-size:${ Math.round(d.radius / 2) }px`)
-            .text(d => `Double-click to display more`);
+            .text(d => `Click to display more`);
     });
     node = nodeEnter.merge(node);
 

src/static/js/model/index.js

@@ -181,14 +181,23 @@ export function init () {
     dataUpdated(true);
 }
 
-function resetChildrenPosition (parent, children = []) {
+function resetChildrenPosition (folder, children = []) {
     if (!children || !children.length)
         return;
-    for (let c of children) {
-        c.x = parent.x;
-        c.y = parent.y;
+    let xd = folder.x - folder.parent.x,
+        yd = folder.y - folder.parent.y,
+        angle = Math.atan2(yd, xd),
+        d = Math.sqrt(xd * xd + yd * yd),
+        spread = Math.PI / 2;
+    for (let i = 0; i < children.length; i++) {
+        let c = children[i],
+            spd = - spread / 2 + spread * i / (children.length - 1 || 0.5),
+            dx = Math.cos(angle + spd) * d,
+            dy = Math.sin(angle + spd) * d;
+        c.x = folder.parent.x + dx || 0;
+        c.y = folder.parent.y + dy || 0;
         if (c.children)
-            resetChildrenPosition(c, c.children);
+            resetChildrenPosition({ x: c.x + dx, y: c.y + dy, parent: { x: c.x, y: c.y } }, c.children);
     }
 }
 
@@ -266,7 +275,7 @@ export function unfold (folderNode, node, children = 20) {
             folderNode.id = newId;
             node.children = node.children.concat(next);
             folderNode.label = left > 0 ? `${ left } more` : `Others`;
-            resetChildrenPosition(node, next);
+            resetChildrenPosition(folderNode, next);
             dataUpdated();
             return {
                 unfolded: next.length,