feat: support delete node

zxch3n · Jun 13, 2022 · 9e6d923 · 9e6d923
1 parent 027d7a3
commit 9e6d923
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 25 deletions.
diff --git a/rust/crates/tidy-tree/src/lib.rs b/rust/crates/tidy-tree/src/lib.rs
@@ -97,6 +97,20 @@ impl TidyTree {
         self.map.insert(id, ptr);
     }
 
+    pub fn remove_node(&mut self, id: usize) {
+        if self.is_empty() {
+            return;
+        }
+
+        if let Some(node) = self.map.get(&id) {
+            let node = unsafe { &mut *node.as_ptr() };
+            node.pre_order_traversal(|node| {
+                self.map.remove(&node.id);
+            });
+            node.parent_mut().unwrap().remove_child(id);
+        }
+    }
+
     pub fn data(&mut self, id: &[usize], width: &[Coord], height: &[Coord], parent_id: &[usize]) {
         for (i, &id) in id.iter().enumerate() {
             let width = width[i];

diff --git a/rust/crates/tidy-tree/src/node.rs b/rust/crates/tidy-tree/src/node.rs
@@ -270,6 +270,13 @@ impl Node {
         }
     }
 
+    pub fn remove_child(&mut self, id: usize) {
+        let pos = self.children.iter().position(|node| node.id == id);
+        if let Some(index) = pos {
+            self.children.remove(index);
+        }
+    }
+
     pub fn pre_order_traversal_with_depth_mut<F>(&mut self, mut f: F)
     where
         F: FnMut(&mut Node, usize),

diff --git a/rust/crates/wasm/src/lib.rs b/rust/crates/wasm/src/lib.rs
@@ -38,6 +38,10 @@ impl Tidy {
         }
     }
 
+    pub fn remove_node(&mut self, id: usize) {
+        self.0.remove_node(id);
+    }
+
     pub fn is_empty(&self) -> bool {
         self.0.is_empty()
     }

diff --git a/src/TidyComponent.tsx b/src/TidyComponent.tsx
@@ -48,8 +48,15 @@ export const TidyComponent = ({ root, layoutType, updateTrigger }: Props) => {
     };
 
     func();
+    return () => {
+      layoutRef.current?.dispose();
+      layoutRef.current = undefined;
+    };
+  }, [root]);
+  useEffect(() => {
     return () => {
       renderRef.current?.dispose();
+      renderRef.current = undefined;
     };
   }, []);
   useEffect(() => {

diff --git a/src/renderer.ts b/src/renderer.ts
@@ -43,15 +43,28 @@ export class Renderer extends Disposable {
     this.rescale();
   }
 
+  private clear() {
+    this.render.clear();
+    if (this.group) {
+      this.render.remove(this.group);
+    }
+    this.nodeMap.clear();
+    this.rectMap.clear();
+  }
+
   private rescale() {
     if (!this.root || !this.group) {
       return;
     }
     const g = this.group;
     const gBox = g.getBoundingRect();
+    const w = this.render.getWidth();
+    const h = this.render.getHeight();
     const scale = Math.min(
-      this.render.getWidth() / (gBox.width + 20),
-      this.render.getHeight() / (gBox.height + 20),
+      Math.abs(w / -gBox.x / 2),
+      Math.abs(w / (gBox.width + gBox.x) / 2),
+      w / (gBox.width + 20),
+      h / (gBox.height + 50),
       5,
     );
     g.animateTo({ scaleX: scale, scaleY: scale });
@@ -102,8 +115,9 @@ export class Renderer extends Disposable {
       return;
     }
     const g = this.group;
-
+    const removedNodeIds = new Set<number>(this.rectMap.keys());
     visit(this.root, (node) => {
+      removedNodeIds.delete(node.id);
       if (!this.rectMap.has(node.id)) {
         this.addNode(node, g, true);
         return;
@@ -131,6 +145,20 @@ export class Renderer extends Disposable {
         });
       }
     });
+
+    for (const id of removedNodeIds) {
+      const rect = this.rectMap.get(id)!;
+      this.group.remove(rect);
+      this.rectMap.delete(id);
+      const lines = (this.lineSourceMap.get(id) ?? []).concat(
+        this.lineTargetMap.get(id) ?? [],
+      );
+      for (const line of lines) {
+        this.group.remove(line.line);
+      }
+      this.lineSourceMap.delete(id);
+      this.lineTargetMap.delete(id);
+    }
     this.rescale();
   }
 }

diff --git a/src/stories/Tidy.stories.tsx b/src/stories/Tidy.stories.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Node } from '../tidy';
 import { LayoutTypeStr, TidyComponent } from '../TidyComponent';
 import { createNode, createTree, visit } from '../utils';
@@ -21,32 +27,35 @@ export default {
 interface Props {
   layoutType: LayoutTypeStr;
 }
-
-const root = createTree(200) as Node;
 /**
  * Primary UI component for user interaction
  */
-export const TidyLayout = ({ layoutType, ...props }: Props) => {
+export const TidyLayout = ({
+  layoutType,
+  num,
+  ...props
+}: Props & { num: number }) => {
   const [updateTrigger, setUpdate] = useState(0);
-  const addNode = useCallback(() => {
-    let nodes: [Node, number][] = [];
-    visit(root, (node, depth) => {
-      if (node.children.length < 4) {
-        nodes.push([node, depth]);
-      }
-    });
-
-    nodes.sort((a, b) => -a[1] + b[1]);
-    if (nodes.length > 20) {
-      const depth = nodes[20][1];
-      nodes = nodes.filter(([_, d]) => d >= depth);
+  const [root, setRoot] = useState(() => {
+    return createTree(1);
+  });
+  const prevNum = useRef(0);
+  useLayoutEffect(() => {
+    if (prevNum.current == 0) {
+      setRoot(createTree(num));
+    } else if (num < prevNum.current) {
+      deleteRandomNode(root, prevNum.current - num);
+    } else if (num > prevNum.current) {
+      insertRandomNode(root, num - prevNum.current);
     }
-    const node = nodes[(Math.random() * nodes.length) | 0][0];
-    const child = createNode();
-    child.parentId = node.id;
-    node.children.push(child);
+
     setUpdate((updateTrigger) => updateTrigger + 1);
-  }, []);
+    prevNum.current = num;
+  }, [num]);
+  const addNode = useCallback(() => {
+    insertRandomNode(root, 1);
+    setUpdate((updateTrigger) => updateTrigger + 1);
+  }, [root]);
 
   return (
     <div onClick={addNode}>
@@ -59,6 +68,13 @@ export const TidyLayout = ({ layoutType, ...props }: Props) => {
   );
 };
 
+TidyLayout.argTypes = {
+  num: {
+    control: { type: 'range', min: 0, max: 400 },
+    defaultValue: 200,
+  },
+};
+
 export const Example0 = () => {
   return (
     <TidyComponent
@@ -93,6 +109,43 @@ export const Example0 = () => {
   );
 };
 
+function deleteRandomNode(root: Node, num: number) {
+  while (num > 0) {
+    visit(root, (node, depth) => {
+      for (let i = 0; i < node.children.length; i++) {
+        if (node.children[i].children.length === 0) {
+          node.children.splice(i, 1);
+          num--;
+          if (num === 0) {
+            break;
+          }
+        }
+      }
+    });
+  }
+}
+
+function insertRandomNode(root: Node, num: number = 1) {
+  let nodes: [Node, number][] = [];
+  visit(root, (node, depth) => {
+    if (node.children.length < 4) {
+      nodes.push([node, depth]);
+    }
+  });
+
+  nodes.sort((a, b) => -a[1] + b[1]);
+  if (nodes.length > 20) {
+    const depth = nodes[20][1];
+    nodes = nodes.filter(([_, d]) => d >= depth);
+  }
+  for (let i = 0; i < num; i++) {
+    const node = nodes[(Math.random() * nodes.length) | 0][0];
+    const child = createNode();
+    child.parentId = node.id;
+    node.children.push(child);
+  }
+}
+
 function node(width: number, height: number, children: Node[] = []): Node {
   return {
     x: 0,

diff --git a/src/tidy.ts b/src/tidy.ts
@@ -65,6 +65,8 @@ export class TidyLayout extends Disposable {
       this.tidy = TidyWasm.with_basic_layout();
     } else if (type === LayoutType.Tidy) {
       this.tidy = TidyWasm.with_tidy_layout();
+    } else if (type === LayoutType.LayeredTidy) {
+      this.tidy = TidyWasm.with_layered_tidy();
     } else {
       throw new Error('not implemented');
     }
@@ -81,7 +83,9 @@ export class TidyLayout extends Disposable {
 
   layout(updated = false) {
     if (updated) {
+      const removedNodeId = new Set(this.idToNode.keys());
       visit(this.root!, (node) => {
+        removedNodeId.delete(node.id);
         if (this.idToNode.has(node.id)) {
           return;
         }
@@ -94,6 +98,11 @@ export class TidyLayout extends Disposable {
           node.parentId ?? NULL_ID(),
         );
       });
+
+      for (const nodeId of removedNodeId) {
+        this.tidy.remove_node(nodeId);
+        this.idToNode.delete(nodeId);
+      }
     }
 
     this.tidy.layout();

diff --git a/src/utils.ts b/src/utils.ts
@@ -29,7 +29,7 @@ export function createNode(): Node {
 export function createTree(num: number): Node {
   const root = createNode();
   let arr = [root];
-  const MAX_CHOSEN_SIZE = 1000;
+  const MAX_CHOSEN_SIZE = 30;
   for (let i = 0; i < num; i++) {
     let parentIndex = 0;
     if (arr.length < MAX_CHOSEN_SIZE) {