docs: add combo demo to site (#4769)

Author: Yanyan-Wang

packages/site/.dumi/pages/v5combo.en.tsx

@@ -0,0 +1,3 @@
+import V5Combo from './v5combo.zh';
+
+export default V5Combo;

packages/site/.dumi/pages/v5combo.zh.tsx

@@ -0,0 +1,158 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const isBrowser = typeof window !== 'undefined';
+const G6 = isBrowser ? window.g6v5 : null;
+
+let graph;
+
+const V5Combo: React.FC = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [updateComboStructure, setUpdateComboStructure] = useState(false);
+  useEffect(() => {
+    graph = new G6.Graph({
+      container: ref.current,
+      width: 1000,
+      height: 1000,
+      type: 'graph',
+      node: {
+        labelShape: {
+          position: 'bottom',
+          text: {
+            fields: ['id'],
+            formatter: (model) => model.id,
+          },
+        },
+        labelBackgroundShape: {},
+        animates: {
+          update: [
+            {
+              fields: ['opacity'],
+              shapeId: 'haloShape',
+            },
+          ],
+        },
+      },
+      combo: (model) => {
+        return {
+          id: model.id,
+          data: {
+            ...model.data,
+            keyShape: {
+              padding: [10, 10, 10, 10],
+              r: 50,
+            },
+            labelShape: {
+              text: model.id,
+            },
+
+            animates: {
+              buildIn: [
+                {
+                  fields: ['opacity'],
+                  duration: 500,
+                  delay: 500 + Math.random() * 500,
+                },
+              ],
+              buildOut: [
+                {
+                  fields: ['opacity'],
+                  duration: 200,
+                },
+              ],
+              update: [
+                {
+                  fields: ['lineWidth', 'r'],
+                  shapeId: 'keyShape',
+                  duration: 800,
+                },
+                {
+                  fields: ['opacity'],
+                  shapeId: 'haloShape',
+                  duration: 500,
+                },
+              ],
+            },
+          },
+        };
+      },
+      data: {
+        nodes: [
+          { id: 'node1', data: { parentId: 'combo1', x: 250, y: 100 } },
+          { id: 'node2', data: { parentId: 'combo1', x: 350, y: 100 } },
+          { id: 'node3', data: { parentId: 'combo2', x: 100, y: 300 } },
+          { id: 'node4', data: { parentId: 'combo1', x: 350, y: 200 } },
+          { id: 'node5', data: { x: 600, y: 300} },
+        ],
+        edges: [
+          { id: 'edge1', source: 'node1', target: 'node2', data: {} },
+          { id: 'edge2', source: 'node1', target: 'node3', data: {} },
+          { id: 'edge3', source: 'node1', target: 'node4', data: {} },
+          { id: 'edge4', source: 'node2', target: 'node4', data: {} },
+          { id: 'edge5', source: 'node3', target: 'node4', data: {} },
+          { id: 'edge6', source: 'node4', target: 'node5', data: {} },
+        ],
+        combos: [
+          { id: 'combo1', data: { parentId: 'combo2' } },
+          { id: 'combo2', data: {} },
+        ],
+      },
+      modes: {
+        default: [
+          'collapse-expand-combo',
+          {
+            type: 'drag-node',
+            key: 'drag-node-behavior',
+            enableTransient: false
+          },
+          'drag-canvas',
+          'zoom-canvas',
+          {
+            type: 'click-select',
+            itemTypes: ['node', 'edge', 'combo'],
+          },
+          {
+            type: 'hover-activate',
+            itemTypes: ['node', 'edge'],
+          },
+          {
+            type: 'drag-combo',
+            key: 'drag-combo-behavior',
+            enableTransient: false
+          }
+        ],
+      },
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!graph) return;
+    debugger
+    graph.updateBehavior({
+      type: 'drag-combo',
+      key: 'drag-node-behavior',
+      updateComboStructure
+    }, 'default');
+    graph.updateBehavior({
+      type: 'drag-combo',
+      key: 'drag-combo-behavior',
+      updateComboStructure
+    }, 'default');
+  }, [updateComboStructure])
+
+  return (
+    <div ref={ref}>
+      <div style={{ display: 'inline-flex', position: 'absolute', left: '16px', top: '16px', zIndex: 1 }}>
+        <div>拖拽 combo 时：</div>
+        <select
+          className='update-combo-structure'
+          onChange={val => setUpdateComboStructure(val.target?.value === 'structure')}
+        >
+          <option value='structure'>更新结构</option>
+          <option value='size'>更新大小</option>
+        </select>
+      </div>
+    </div>
+  );
+};
+
+export default V5Combo;

packages/site/package.json

@@ -46,7 +46,7 @@
     "@antv/vis-predict-engine": "^0.1.1",
     "@microsoft/api-extractor": "^7.33.6",
     "dumi": "^2.1.9",
-    "g6v5": "npm:@antv/[email protected].7",
+    "g6v5": "npm:@antv/[email protected].9",
     "insert-css": "^2.0.0",
     "react-i18next": "^11.1.0",
     "typedoc": "^0.17.6",