refactor: add site demos

packages/react-node/src/GNode/node.tsx

@@ -25,9 +25,7 @@ export const createReactGNode = (
       shapeMap: NodeShapeMap,
     ): DisplayObject<any, any> {
       const { data } = model;
-      const {
-        size: [width, height],
-      } = data as any;
+      const { size: [width, height] = [0, 0] } = data as any;
       return this.upsertShape(
         shape,
         'keyShape',
@@ -80,6 +78,9 @@ export const createReactGNode = (
         );
         render(content, group);
       });
+      group.addEventListener('destroy', () => {
+        group.removeAllEventListeners();
+      });
 
       return {
         [groupId]: group,

packages/react-node/src/ReactNode/node.tsx

@@ -83,19 +83,24 @@ export const createReactNode = (
             { leading: true, trailing: true },
           ) as EventListener;
 
-          dom.addEventListener('pointermove', onMouseMove);
+          document.addEventListener('pointermove', onMouseMove);
 
           dom.addEventListener(
             'pointerup',
             () => {
               dom.style.userSelect = 'auto';
-              dom.removeEventListener('pointermove', onMouseMove);
+              document.removeEventListener('pointermove', onMouseMove);
             },
             { once: true },
           );
         });
       });
 
+      html.addEventListener('destroy', () => {
+        html.removeAllEventListeners();
+        html.getDomElement().remove();
+      });
+
       html.getRenderBounds = html.getBounds;
 
       ShapeCollection.set(model.id, html);

packages/site/.dumi/app.ts

@@ -0,0 +1,8 @@
+if (typeof window !== 'undefined') {
+  window.onresize = () => {
+    const { graph, container } = window as any;
+    if (!graph || graph.destroyed) return;
+    if (!container || !container.scrollWidth || !container.scrollHeight) return;
+    graph.setSize([container.scrollWidth, container.scrollHeight]);
+  };
+}

packages/site/.dumi/global.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 if (window) {
   // window.g6 = require('@antv/g6/es'); // import the source for debugging
   window.g6 = require('@antv/g6/lib'); // import the source for debugging
@@ -15,7 +17,9 @@ if (window) {
   window.GraphLayoutPredict = require('@antv/vis-predict-engine');
   window.stats = require('stats.js');
   window.g2 = require('@antv/g2');
+  window.antd = require('antd');
 
   window.React = require('react');
   window.ReactDOM = require('react-dom');
+  window.g6ReactNode = require('@antv/g6-react-node');
 }

packages/site/examples/item/customNode/demo/jsx-g-node.js

@@ -0,0 +1,55 @@
+import { Graph, extend } from '@antv/g6';
+import { createReactGNode, Rect, Text } from '@antv/g6-react-node';
+
+const Node = ({ model }) => {
+  const { data } = model;
+  const {
+    value,
+    size: [width, height],
+  } = data;
+
+  return (
+    <Rect width={width} height={height} fill="#f1f0ff">
+      <Text text={`${(value * 100).toFixed(2)}%`}></Text>
+      <Rect y={4} width={value * width} height={height - 8} fill="#6395fa" />
+    </Rect>
+  );
+};
+
+const ReactGNode = createReactGNode(Node);
+
+const ExtendGraph = extend(Graph, {
+  nodes: {
+    'react-g-node': ReactGNode,
+  },
+});
+
+const container = document.getElementById('container');
+const width = container.scrollWidth;
+const height = container.scrollHeight || 500;
+
+window.graph = new ExtendGraph({
+  container: 'container',
+  width,
+  height,
+  autoFit: 'center',
+  modes: {
+    default: [{ type: 'drag-node', enableTransient: false }],
+  },
+  data: {
+    nodes: [
+      { id: 'node1', data: { size: [100, 30], value: 0.5 } },
+      { id: 'node2', data: { size: [100, 30], value: 0.8 } },
+    ],
+    edges: [
+      {
+        source: 'node1',
+        target: 'node2',
+      },
+    ],
+  },
+  node: {
+    type: 'react-g-node',
+    otherShapes: {},
+  },
+});

packages/site/examples/item/customNode/demo/meta.json

@@ -51,6 +51,22 @@
         "en": "G2 Active Node"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GVyoQKk2WIIAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "jsx-g-node.js",
+      "title": {
+        "zh": "使用 JSX 写法创建自定义 G 节点",
+        "en": "JSX G Node"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*nFzoQ7qBLvEAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "react-node.js",
+      "title": {
+        "zh": "使用 React 写法创建自定义 G 节点",
+        "en": "React Node"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*wyOxRoAbiPYAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

packages/site/examples/item/customNode/demo/react-node.js

@@ -0,0 +1,47 @@
+import { Graph, extend } from '@antv/g6';
+import { createReactNode } from '@antv/g6-react-node';
+import { Alert } from 'antd';
+
+const Node = ({ model }) => {
+  const { data } = model;
+  const { message, nodeType } = data;
+  return <Alert message={message} type={nodeType} showIcon />;
+};
+
+const ReactNode = createReactNode(Node);
+
+const ExtendGraph = extend(Graph, {
+  nodes: {
+    'react-node': ReactNode,
+  },
+});
+
+const container = document.getElementById('container');
+const width = container.scrollWidth;
+const height = container.scrollHeight || 500;
+
+window.graph = new ExtendGraph({
+  container: 'container',
+  width,
+  height,
+  autoFit: 'center',
+  modes: {
+    default: [{ type: 'drag-node', enableTransient: false }],
+  },
+  data: {
+    nodes: [
+      { id: 'node1', data: { size: [120, 40], message: 'Success', nodeType: 'success' } },
+      { id: 'node2', data: { size: [120, 40], message: 'Warning', nodeType: 'warning' } },
+    ],
+    edges: [
+      {
+        source: 'node1',
+        target: 'node2',
+      },
+    ],
+  },
+  node: {
+    type: 'react-node',
+    otherShapes: {},
+  },
+});

packages/site/global.d.ts

@@ -16,5 +16,9 @@ declare global {
     g2: any;
     React: any;
     ReactDOM: any;
+    antd: any;
+
+    graph: any;
+    container: any;
   }
 }

packages/site/package.json

@@ -39,14 +39,15 @@
     "@antv/g2": "^5.1.5",
     "@antv/g6": "workspace:*",
     "@antv/g6-plugin-map-view": "workspace:*",
-    "@antv/g6-react-node": "^1.4.5",
+    "@antv/g6-react-node": "^2.0.0-beta.0",
     "@antv/graphlib": "^2.0.2",
     "@antv/layout-gpu": "^1.1.5",
     "@antv/layout-wasm": "^1.3.4",
     "@antv/util": "^2.0.9",
     "@antv/vis-predict-engine": "^0.1.1",
     "@faker-js/faker": "^8.0.2",
     "@microsoft/api-extractor": "^7.33.6",
+    "antd": "^5.10.2",
     "dumi": "^2.2.14",
     "fs-extra": "latest",
     "google-translate-api-x": "^10.6.7",