docs: add drag subtree demo. docs: add dagre align upper demo.

examples/interaction/combo/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Node Combo
-order: 3
+order: 4
 ---
 
 New feature of V3.5. There are 2 kinds of built-in combos in G6, which can be extended by configurations([docs](/en/docs/manual/middle/elements/combos/defaultCombo)) and custom mechanism ([docs](/en/docs/manual/advanced/custom-combo), [demo](/en/examples/item/customCombo)). The following two examples allow users to drag the combo or node to change the hierarchy, and double click to collapse/expand a combo.

examples/interaction/combo/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 节点分组 Combo
-order: 3
+order: 4
 ---
 
 自 V3.5 起支全新节点分组机制 Combo。内置了 2 种不同类型的 Combo，支持通过配置（[文档](/zh/docs/manual/middle/elements/combos/defaultCombo)）进行扩展，支持自定义（[文档](/zh/docs/manual/advanced/custom-combo)，[Demo](/zh/examples/item/customCombo)）。下面两个例子允许节点和 Combo 的拖拽改变从属关系，双击收缩/展开 Combo。

examples/interaction/label/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Label and Background Updating
-order: 2
+order: 3
 ---
 
 Update the label or background of items with interaction.

examples/interaction/label/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 改变标签或背景
-order: 2
+order: 3
 ---
 
 交互过程中动态改变节点或边上的文本。

examples/interaction/loadData/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Onload Data to TreeGraph
-order: 1
+order: 2
 ---
 
 Click the nodes on the tree graph to onload multiple data.

examples/interaction/loadData/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 动态加载树图数据
-order: 1
+order: 2
 ---
 
 点击树图中的节点，动态加载数据。

examples/interaction/moveSubtree/demo/dragSubtree.js

@@ -0,0 +1,138 @@
+import G6 from '@antv/g6';
+
+const container = document.getElementById('container');
+const descriptionDiv = document.createElement('div');
+descriptionDiv.innerHTML = 'Move a subtree to a new parent by dragging the root node of the subtree.';
+container.appendChild(descriptionDiv);
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+  .then(res => res.json())
+  .then(data => {
+    const width = document.getElementById('container').scrollWidth;
+    const height = document.getElementById('container').scrollHeight || 500;
+    const graph = new G6.TreeGraph({
+      container: 'container',
+      width,
+      height,
+      modes: {
+        default: [
+          'drag-canvas',
+          'zoom-canvas',
+          {
+            type: 'drag-node',
+            enableDelegate: true
+          }
+        ],
+      },
+      defaultNode: {
+        size: [26, 26],
+        anchorPoints: [
+          [0, 0.5],
+          [1, 0.5],
+        ],
+        style: {
+          fill: '#C6E5FF',
+          stroke: '#5B8FF9',
+        },
+      },
+      defaultEdge: {
+        type: 'cubic-horizontal',
+        style: {
+          stroke: '#A3B1BF',
+        },
+      },
+      nodeStateStyles: {
+        closest: {
+          fill: '#f00'
+        }
+      },
+      layout: {
+        type: 'compactBox',
+        direction: 'LR',
+        getId: function getId(d) {
+          return d.id;
+        },
+        getHeight: function getHeight() {
+          return 16;
+        },
+        getWidth: function getWidth() {
+          return 16;
+        },
+        getVGap: function getVGap() {
+          return 10;
+        },
+        getHGap: function getHGap() {
+          return 100;
+        },
+      },
+    });
+
+    graph.node(function (node) {
+      return {
+        label: node.id,
+        labelCfg: {
+          offset: 10,
+          position: node.children && node.children.length > 0 ? 'left' : 'right',
+        },
+      };
+    });
+
+    graph.data(data);
+    graph.render();
+    graph.fitView();
+
+
+    let minDisNode;
+    graph.on('node:dragstart', e => {
+      minDisNode = undefined;
+    });
+    graph.on('node:drag', e => {
+      minDisNode = undefined;
+      const item = e.item;
+      const model = item.getModel();
+      const nodes = graph.getNodes();
+      let minDis = Infinity;
+      nodes.forEach(inode => {
+        graph.setItemState(inode, 'closest', false);
+        const node = inode.getModel();
+        if (node.id === model.id) return;
+        const dis = (node.x - e.x) * (node.x - e.x) + (node.y - e.y) * (node.y - e.y);
+        if (dis < minDis) {
+          minDis = dis;
+          minDisNode = inode;
+        }
+      });
+      if (minDis < 2000) graph.setItemState(minDisNode, 'closest', true);
+      else minDisNode = undefined;
+    });
+
+    graph.on('node:dragend', e => {
+      if (!minDisNode) {
+        descriptionDiv.innerHTML = 'Failed. No node close to the dragged node.'
+        return;
+      }
+      const item = e.item;
+      const id = item.getID();
+      const data = graph.findDataById(id);
+      // if the minDisNode is a descent of the dragged node, return
+      let isDescent = false;
+      const minDisNodeId = minDisNode.getID();
+      G6.Util.traverseTree(data, d => {
+        if (d.id === minDisNodeId) isDescent = true;
+      });
+      if (isDescent) {
+
+        descriptionDiv.innerHTML = 'Failed. The target node is a descendant of the dragged node.'
+        return;
+      }
+
+      const removed = graph.removeChild(id);
+      setTimeout(() => {
+        const newParentData = graph.findDataById(minDisNodeId);
+        if (newParentData.children) newParentData.children.push(data)
+        else newParentData.children = [data];
+        graph.layout();
+        descriptionDiv.innerHTML = 'Success.'
+      }, 600);
+    });
+  });

examples/interaction/moveSubtree/demo/meta.json

@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "dragSubtree.js",
+      "title": {
+        "zh": "拖拽子树改变结构",
+        "en": "Move Subtree to New Parent"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EU_yRa8hMJUAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}

examples/interaction/moveSubtree/index.en.md

@@ -0,0 +1,10 @@
+---
+title: Move Subtree to New Parent
+order: 1
+---
+
+Move a subtree to a new parent by dragging the root node of the subtree.
+
+## Usage
+
+Drag the root node of the subtree to get closed to a new parent which is not a descendant node of the dragged node, drop the node to finish.

examples/interaction/moveSubtree/index.zh.md

@@ -0,0 +1,10 @@
+---
+title: 拖拽子树改变结构
+order: 1
+---
+
+拖拽子树改变结构。
+
+## 使用指南
+
+通过拖拽子树的跟节点，靠近新的父节点后放下，可将该子树从原来位置删除，追加到新父节点下，从而改变树的结构。若新父节点是被拖拽子树中的一个节点，则拖拽改变结构将不会生效。

examples/interaction/nodeGroup/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Node Group
-order: 4
+order: 5
 ---
 
 G6 supports node group. We recommend to use the new mechanism [Combo](/en/examples/interaction/combo).

examples/interaction/nodeGroup/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 节点分组 Group
-order: 4
+order: 5
 ---
 
 G6 支持节点分组。建议使用新的分组机制 [Combo](/zh/examples/interaction/combo).

examples/interaction/partialResponse/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Region Response
-order: 6
+order: 7
 ---
 
 Region response on a node or edge.

examples/interaction/partialResponse/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 响应区域事件
-order: 6
+order: 7
 ---
 
 区域响应。

examples/interaction/position/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Click to Focus a Node
-order: 5
+order: 6
 ---
 
 Move the graph by interaction.

examples/interaction/position/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 聚焦一个节点
-order: 5
+order: 6
 ---
 
 通过交互改变节点的位置。

examples/interaction/setMode/index.en.md

@@ -1,6 +1,6 @@
 ---
 title: Change Mode to Add items
-order: 7
+order: 8
 ---
 
 You can change to different modes with the selector on the left top. Dragging node, adding node, adding edge are enabled in different modes. This mechanism help developers to avoid the conflict of same events in different behaviors.

examples/interaction/setMode/index.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 切换模式增加点和边
-order: 7
+order: 8
 ---
 
 使用左上角的下拉框切换交互模式，在不同模式下拖动节点、增加节点、增加边，从而避免交互事件的冲突。

examples/net/dagreFlow/demo/lrDagreUL.js

@@ -0,0 +1,137 @@
+import G6 from '@antv/g6';
+const data = {
+    nodes: [
+        {
+            id: '0',
+            label: '0',
+        },
+        {
+            id: '1',
+            label: '1',
+        },
+        {
+            id: '2',
+            label: '2',
+        },
+        {
+            id: '3',
+            label: '3',
+        },
+        {
+            id: '4',
+            label: '4',
+        },
+        {
+            id: '5',
+            label: '5',
+        },
+        {
+            id: '6',
+            label: '6',
+        },
+        {
+            id: '7',
+            label: '7',
+        },
+        {
+            id: '8',
+            label: '8',
+        },
+        {
+            id: '9',
+            label: '9',
+        },
+    ],
+    edges: [
+        {
+            source: '0',
+            target: '1',
+        },
+        {
+            source: '0',
+            target: '2',
+        },
+        {
+            source: '1',
+            target: '4',
+        },
+        {
+            source: '0',
+            target: '3',
+        },
+        {
+            source: '3',
+            target: '4',
+        },
+        {
+            source: '4',
+            target: '5',
+        },
+        {
+            source: '4',
+            target: '6',
+        },
+        {
+            source: '5',
+            target: '7',
+        },
+        {
+            source: '5',
+            target: '8',
+        },
+        {
+            source: '8',
+            target: '9',
+        },
+        {
+            source: '2',
+            target: '9',
+        },
+        {
+            source: '3',
+            target: '9',
+        },
+    ],
+};
+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
+const graph = new G6.Graph({
+    container: 'container',
+    width,
+    height,
+    fitView: true,
+    modes: {
+        default: ['drag-canvas', 'drag-node'],
+    },
+    layout: {
+        type: 'dagre',
+        rankdir: 'LR',
+        align: 'UL',
+        controlPoints: true,
+        nodesepFunc: () => 1,
+        ranksepFunc: () => 1,
+    },
+    defaultNode: {
+        size: [30, 20],
+        type: 'rect',
+        style: {
+            lineWidth: 2,
+            stroke: '#5B8FF9',
+            fill: '#C6E5FF',
+        },
+    },
+    defaultEdge: {
+        type: 'polyline',
+        size: 1,
+        color: '#e2e2e2',
+        style: {
+            endArrow: {
+                path: 'M 0,0 L 8,4 L 8,-4 Z',
+                fill: '#e2e2e2'
+            },
+            radius: 20
+        },
+    },
+});
+graph.data(data);
+graph.render();

examples/net/dagreFlow/demo/meta.json

@@ -12,6 +12,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2uMmRo5wYPUAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "lrDagreUL.js",
+      "title": {
+        "zh": "自左向右的 Dagre 上对齐",
+        "en": "Dagre from Left to Right"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*LJpmR4G7J3YAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "lrDagre.js",
       "title": {
@@ -29,4 +37,4 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VkwOTL2UyN0AAAAAAAAAAABkARQnAQ"
     }
   ]
-}
+}