feat: add layout controller (#5423)

* refactor(runtime): rename dataController in context to model

* feat(utils): add isVisible and update uitls

* refactor(layout): update layout types and register built-in layouts

* feat(utils): add deduplicate util

* refactor(utils): update inferDefaultValue to infer position

* refactor(element): add updateNodeLikePosition method to update position immediately

* feat(runtime): data controller support call methods without trace

* fix(animation): it's neccessary to reserve commonEffectTiming config

* fix(test): fix test case issue

* feat(utils): add tree data converter utils

* refactor(runtime): update element controller, add get element api, and updateByLayoutResult method

* feat(utils): add layout utils

* refactor(layout): add built-in layouts

* refactor(elements): add built-in edges

* feat(runtime): add layout controller

* test(layout): add and update test snapshot

* test: update test case

* refactor(utils): remove transformGraphDataToTreeData

* fix: fix issue occured in rebase

* refactor(layout): add built-in layout registration

* refactor(spec): support config global animation

* test(runtime): update element controller snapshots

* fix(elements): fix issue that edge lack of default control points

* refactor(runtime): support tree layout

* fix(elements): fix issue that unexpect loop edge infer

* fix(runtime): fix layout error, support global animation, optimize updateNodeLikePosition method

* test(layout): add static layout test case

* refactor(test): update dendrogram snapshot

* fix(utils): fix pickLayoutResult test case

* refactor(types): add positions type

* refactor(runtime): optimize element updateNodeLikePosition perf

* fix(test): fix test case types issue

* test(demo): update test demos

* refactor(utils): modify transformTreeDataToGraphData default getNodeData

* refactor(runtime): data controller provide getParentData API

* refactor(runtime): rename sneak to silence

* refactor(layout): add comment

* refactor(registry): use console.error instead of throw when plugin duplicated

.vscode/settings.json

@@ -1,14 +1,20 @@
 {
   "cSpell.words": [
+    "AABB",
     "afterrender",
     "afterviewportanimation",
+    "bbox",
     "beforerender",
     "beforeviewportanimation",
     "cancelviewportanimation",
+    "dendrogram",
+    "Forceatlas",
     "Fruchterman",
     "gforce",
     "graphlib",
     "GSHAPE",
-    "onframe"
+    "mindmap",
+    "onframe",
+    "ranksep"
   ]
 }

packages/g6/__tests__/dataset/algorithm-category.json

@@ -0,0 +1,52 @@
+{
+  "id": "Modeling Methods",
+  "children": [
+    {
+      "id": "Classification",
+      "children": [
+        { "id": "Logistic regression" },
+        { "id": "Linear discriminant analysis" },
+        { "id": "Rules" },
+        { "id": "Decision trees" },
+        { "id": "Naive Bayes" },
+        { "id": "K nearest neighbor" },
+        { "id": "Probabilistic neural network" },
+        { "id": "Support vector machine" }
+      ]
+    },
+    {
+      "id": "Consensus",
+      "children": [
+        {
+          "id": "Models diversity",
+          "children": [
+            { "id": "Different initializations" },
+            { "id": "Different parameter choices" },
+            { "id": "Different architectures" },
+            { "id": "Different modeling methods" },
+            { "id": "Different training sets" },
+            { "id": "Different feature sets" }
+          ]
+        },
+        {
+          "id": "Methods",
+          "children": [{ "id": "Classifier selection" }, { "id": "Classifier fusion" }]
+        },
+        {
+          "id": "Common",
+          "children": [{ "id": "Bagging" }, { "id": "Boosting" }, { "id": "AdaBoost" }]
+        }
+      ]
+    },
+    {
+      "id": "Regression",
+      "children": [
+        { "id": "Multiple linear regression" },
+        { "id": "Partial least squares" },
+        { "id": "Multi-layer feed forward neural network" },
+        { "id": "General regression neural network" },
+        { "id": "Support vector regression" }
+      ]
+    }
+  ]
+}

packages/g6/__tests__/dataset/cluster.json

@@ -0,0 +1,100 @@
+{
+  "nodes": [
+    { "id": "0", "style": { "cluster": "a" } },
+    { "id": "1", "style": { "cluster": "a" } },
+    { "id": "2", "style": { "cluster": "a" } },
+    { "id": "3", "style": { "cluster": "a" } },
+    { "id": "4", "style": { "cluster": "a" } },
+    { "id": "5", "style": { "cluster": "a" } },
+    { "id": "6", "style": { "cluster": "a" } },
+    { "id": "7", "style": { "cluster": "a" } },
+    { "id": "8", "style": { "cluster": "a" } },
+    { "id": "9", "style": { "cluster": "a" } },
+    { "id": "10", "style": { "cluster": "a" } },
+    { "id": "11", "style": { "cluster": "a" } },
+    { "id": "12", "style": { "cluster": "a" } },
+    { "id": "13", "style": { "cluster": "b" } },
+    { "id": "14", "style": { "cluster": "b" } },
+    { "id": "15", "style": { "cluster": "b" } },
+    { "id": "16", "style": { "cluster": "b" } },
+    { "id": "17", "style": { "cluster": "b" } },
+    { "id": "18", "style": { "cluster": "c" } },
+    { "id": "19", "style": { "cluster": "c" } },
+    { "id": "20", "style": { "cluster": "c" } },
+    { "id": "21", "style": { "cluster": "c" } },
+    { "id": "22", "style": { "cluster": "c" } },
+    { "id": "23", "style": { "cluster": "c" } },
+    { "id": "24", "style": { "cluster": "c" } },
+    { "id": "25", "style": { "cluster": "c" } },
+    { "id": "26", "style": { "cluster": "c" } },
+    { "id": "27", "style": { "cluster": "c" } },
+    { "id": "28", "style": { "cluster": "c" } },
+    { "id": "29", "style": { "cluster": "c" } },
+    { "id": "30", "style": { "cluster": "c" } },
+    { "id": "31", "style": { "cluster": "d" } },
+    { "id": "32", "style": { "cluster": "d" } },
+    { "id": "33", "style": { "cluster": "d" } }
+  ],
+  "edges": [
+    { "source": "0", "target": "1" },
+    { "source": "0", "target": "2" },
+    { "source": "0", "target": "3" },
+    { "source": "0", "target": "4" },
+    { "source": "0", "target": "5" },
+    { "source": "0", "target": "7" },
+    { "source": "0", "target": "8" },
+    { "source": "0", "target": "9" },
+    { "source": "0", "target": "10" },
+    { "source": "0", "target": "11" },
+    { "source": "0", "target": "13" },
+    { "source": "0", "target": "14" },
+    { "source": "0", "target": "15" },
+    { "source": "0", "target": "16" },
+    { "source": "2", "target": "3" },
+    { "source": "4", "target": "5" },
+    { "source": "4", "target": "6" },
+    { "source": "5", "target": "6" },
+    { "source": "7", "target": "13" },
+    { "source": "8", "target": "14" },
+    { "source": "9", "target": "10" },
+    { "source": "10", "target": "22" },
+    { "source": "10", "target": "14" },
+    { "source": "10", "target": "12" },
+    { "source": "10", "target": "24" },
+    { "source": "10", "target": "21" },
+    { "source": "10", "target": "20" },
+    { "source": "11", "target": "24" },
+    { "source": "11", "target": "22" },
+    { "source": "11", "target": "14" },
+    { "source": "12", "target": "13" },
+    { "source": "16", "target": "17" },
+    { "source": "16", "target": "18" },
+    { "source": "16", "target": "21" },
+    { "source": "16", "target": "22" },
+    { "source": "17", "target": "18" },
+    { "source": "17", "target": "20" },
+    { "source": "18", "target": "19" },
+    { "source": "19", "target": "20" },
+    { "source": "19", "target": "33" },
+    { "source": "19", "target": "22" },
+    { "source": "19", "target": "23" },
+    { "source": "20", "target": "21" },
+    { "source": "21", "target": "22" },
+    { "source": "22", "target": "24" },
+    { "source": "22", "target": "25" },
+    { "source": "22", "target": "26" },
+    { "source": "22", "target": "23" },
+    { "source": "22", "target": "28" },
+    { "source": "22", "target": "30" },
+    { "source": "22", "target": "31" },
+    { "source": "22", "target": "32" },
+    { "source": "22", "target": "33" },
+    { "source": "23", "target": "28" },
+    { "source": "23", "target": "27" },
+    { "source": "23", "target": "29" },
+    { "source": "23", "target": "30" },
+    { "source": "23", "target": "31" },
+    { "source": "23", "target": "33" },
+    { "source": "32", "target": "33" }
+  ]
+}

packages/g6/__tests__/dataset/dagre.json

@@ -0,0 +1,28 @@
+{
+  "nodes": [
+    { "id": "0", "data": { "label": "0" } },
+    { "id": "1", "data": { "label": "1" } },
+    { "id": "2", "data": { "label": "2" } },
+    { "id": "3", "data": { "label": "3" } },
+    { "id": "4", "data": { "label": "4" } },
+    { "id": "5", "data": { "label": "5" } },
+    { "id": "6", "data": { "label": "6" } },
+    { "id": "7", "data": { "label": "7" } },
+    { "id": "8", "data": { "label": "8" } },
+    { "id": "9", "data": { "label": "9" } }
+  ],
+  "edges": [
+    { "source": "0", "target": "1", "data": {} },
+    { "source": "0", "target": "2", "data": {} },
+    { "source": "1", "target": "4", "data": {} },
+    { "source": "0", "target": "3", "data": {} },
+    { "source": "3", "target": "4", "data": {} },
+    { "source": "4", "target": "5", "data": {} },
+    { "source": "4", "target": "6", "data": {} },
+    { "source": "5", "target": "7", "data": {} },
+    { "source": "5", "target": "8", "data": {} },
+    { "source": "8", "target": "9", "data": {} },
+    { "source": "2", "target": "9", "data": {} },
+    { "source": "3", "target": "9", "data": {} }
+  ]
+}

packages/g6/__tests__/dataset/file-system.json

@@ -0,0 +1,22 @@
+{
+  "id": "src",
+  "children": [
+    { "id": "animations" },
+    { "id": "behaviors" },
+    { "id": "elements", "children": [{ "id": "nodes" }, { "id": "edges" }, { "id": "combos" }] },
+    { "id": "layouts" },
+    {
+      "id": "runtime",
+      "children": [
+        { "id": "canvas" },
+        { "id": "data" },
+        { "id": "element" },
+        { "id": "graph" },
+        { "id": "layout" },
+        { "id": "viewport" }
+      ]
+    },
+    { "id": "spec" },
+    { "id": "themes", "children": [{ "id": "dark" }, { "id": "light" }] }
+  ]
+}

packages/g6/__tests__/dataset/radial.json

@@ -0,0 +1,98 @@
+{
+  "nodes": [
+    { "id": "0", "data": { "label": "0" } },
+    { "id": "1", "data": { "label": "1" } },
+    { "id": "2", "data": { "label": "2" } },
+    { "id": "3", "data": { "label": "3" } },
+    { "id": "4", "data": { "label": "4" } },
+    { "id": "5", "data": { "label": "5" } },
+    { "id": "6", "data": { "label": "6" } },
+    { "id": "7", "data": { "label": "7" } },
+    { "id": "8", "data": { "label": "8" } },
+    { "id": "9", "data": { "label": "9" } },
+    { "id": "10", "data": { "label": "10" } },
+    { "id": "11", "data": { "label": "11" } },
+    { "id": "12", "data": { "label": "12" } },
+    { "id": "13", "data": { "label": "13" } },
+    { "id": "14", "data": { "label": "14" } },
+    { "id": "15", "data": { "label": "15" } },
+    { "id": "16", "data": { "label": "16" } },
+    { "id": "17", "data": { "label": "17" } },
+    { "id": "18", "data": { "label": "18" } },
+    { "id": "19", "data": { "label": "19" } },
+    { "id": "20", "data": { "label": "20" } },
+    { "id": "21", "data": { "label": "21" } },
+    { "id": "22", "data": { "label": "22" } },
+    { "id": "23", "data": { "label": "23" } },
+    { "id": "24", "data": { "label": "24" } },
+    { "id": "25", "data": { "label": "25" } },
+    { "id": "26", "data": { "label": "26" } },
+    { "id": "27", "data": { "label": "27" } },
+    { "id": "28", "data": { "label": "28" } },
+    { "id": "29", "data": { "label": "29" } },
+    { "id": "30", "data": { "label": "30" } },
+    { "id": "31", "data": { "label": "31" } },
+    { "id": "32", "data": { "label": "32" } },
+    { "id": "33", "data": { "label": "33" } }
+  ],
+  "edges": [
+    { "source": "0", "target": "1" },
+    { "source": "0", "target": "2" },
+    { "source": "0", "target": "3" },
+    { "source": "0", "target": "4" },
+    { "source": "0", "target": "5" },
+    { "source": "0", "target": "7" },
+    { "source": "0", "target": "8" },
+    { "source": "0", "target": "9" },
+    { "source": "0", "target": "10" },
+    { "source": "0", "target": "11" },
+    { "source": "0", "target": "13" },
+    { "source": "0", "target": "14" },
+    { "source": "0", "target": "15" },
+    { "source": "0", "target": "16" },
+    { "source": "2", "target": "3" },
+    { "source": "4", "target": "5" },
+    { "source": "4", "target": "6" },
+    { "source": "5", "target": "6" },
+    { "source": "7", "target": "13" },
+    { "source": "8", "target": "14" },
+    { "source": "10", "target": "22" },
+    { "source": "10", "target": "14" },
+    { "source": "10", "target": "12" },
+    { "source": "10", "target": "24" },
+    { "source": "10", "target": "21" },
+    { "source": "10", "target": "20" },
+    { "source": "11", "target": "24" },
+    { "source": "11", "target": "22" },
+    { "source": "11", "target": "14" },
+    { "source": "12", "target": "13" },
+    { "source": "16", "target": "17" },
+    { "source": "16", "target": "18" },
+    { "source": "16", "target": "21" },
+    { "source": "16", "target": "22" },
+    { "source": "17", "target": "18" },
+    { "source": "17", "target": "20" },
+    { "source": "18", "target": "19" },
+    { "source": "19", "target": "20" },
+    { "source": "19", "target": "33" },
+    { "source": "19", "target": "22" },
+    { "source": "19", "target": "23" },
+    { "source": "20", "target": "21" },
+    { "source": "21", "target": "22" },
+    { "source": "22", "target": "24" },
+    { "source": "22", "target": "26" },
+    { "source": "22", "target": "23" },
+    { "source": "22", "target": "28" },
+    { "source": "22", "target": "30" },
+    { "source": "22", "target": "31" },
+    { "source": "22", "target": "32" },
+    { "source": "22", "target": "33" },
+    { "source": "23", "target": "28" },
+    { "source": "23", "target": "27" },
+    { "source": "23", "target": "29" },
+    { "source": "23", "target": "30" },
+    { "source": "23", "target": "31" },
+    { "source": "23", "target": "33" },
+    { "source": "32", "target": "33" }
+  ]
+}