From 79c18aa59d84410f2d003965e921cff12d8b259c Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Thu, 18 Apr 2024 10:05:05 +0800
Subject: [PATCH] feat: add HTML node, g node, react node (#5654)

* feat(elements): add html node

* fix: fix issue that unexpected invoke sequence cause exception

* refactor: adjust exports

* feat(react): create g6-extension-react

* test: update test case

* chore: update dependencies

* fix: fix cr issue

* chore: adjust jest config
---
 packages/g6-extension-3d/package.json         |   2 +-
 .../__tests__/demos/g-node.tsx                | 112 +++++++++
 .../__tests__/demos/graph.tsx                 |  24 ++
 .../__tests__/demos/index.tsx                 |   3 +
 .../__tests__/demos/react-node.tsx            | 166 +++++++++++++
 .../g6-extension-react/__tests__/index.html   |  17 ++
 .../g6-extension-react/__tests__/main.tsx     |  47 ++++
 .../__tests__/unit/default.spec.ts            |   5 +
 packages/g6-extension-react/jest.config.js    |   8 +
 packages/g6-extension-react/package.json      |  54 ++++
 packages/g6-extension-react/rollup.config.mjs |  30 +++
 .../src/elements/g/index.ts                   |   4 +
 .../src/elements/g/node.tsx                   |  36 +++
 .../src/elements/g/shapes.ts                  |   1 +
 .../g6-extension-react/src/elements/index.ts  |   2 +
 .../src/elements/react/index.ts               |   3 +
 .../src/elements/react/node.tsx               |  36 +++
 .../g6-extension-react/src/graph/graph.tsx    |  44 ++++
 .../g6-extension-react/src/graph/index.ts     |   1 +
 packages/g6-extension-react/src/index.ts      |  18 ++
 .../g6-extension-react/tsconfig.build.json    |   7 +
 packages/g6-extension-react/tsconfig.json     |  12 +
 .../g6-extension-react/tsconfig.test.json     |   7 +
 packages/g6-extension-react/vite.config.js    |  16 ++
 .../__tests__/bugs/continuous-invoke.spec.ts  |  13 +
 .../g6/__tests__/demos/element-node-html.ts   |  34 +++
 packages/g6/__tests__/demos/index.ts          |   1 +
 packages/g6/__tests__/unit/registry.spec.ts   |  10 +-
 packages/g6/jest.config.js                    |   1 +
 packages/g6/src/constants/events/animation.ts |   4 -
 packages/g6/src/elements/nodes/base-node.ts   |   4 +-
 packages/g6/src/elements/nodes/html.ts        | 230 ++++++++++++++++++
 packages/g6/src/elements/nodes/index.ts       |   2 +
 packages/g6/src/exports.ts                    |   8 +-
 packages/g6/src/registry/build-in.ts          |   6 +-
 packages/g6/src/runtime/graph.ts              |  21 +-
 packages/g6/src/runtime/index.ts              |   7 -
 37 files changed, 967 insertions(+), 29 deletions(-)
 create mode 100644 packages/g6-extension-react/__tests__/demos/g-node.tsx
 create mode 100644 packages/g6-extension-react/__tests__/demos/graph.tsx
 create mode 100644 packages/g6-extension-react/__tests__/demos/index.tsx
 create mode 100644 packages/g6-extension-react/__tests__/demos/react-node.tsx
 create mode 100644 packages/g6-extension-react/__tests__/index.html
 create mode 100644 packages/g6-extension-react/__tests__/main.tsx
 create mode 100644 packages/g6-extension-react/__tests__/unit/default.spec.ts
 create mode 100644 packages/g6-extension-react/jest.config.js
 create mode 100644 packages/g6-extension-react/package.json
 create mode 100644 packages/g6-extension-react/rollup.config.mjs
 create mode 100644 packages/g6-extension-react/src/elements/g/index.ts
 create mode 100644 packages/g6-extension-react/src/elements/g/node.tsx
 create mode 100644 packages/g6-extension-react/src/elements/g/shapes.ts
 create mode 100644 packages/g6-extension-react/src/elements/index.ts
 create mode 100644 packages/g6-extension-react/src/elements/react/index.ts
 create mode 100644 packages/g6-extension-react/src/elements/react/node.tsx
 create mode 100644 packages/g6-extension-react/src/graph/graph.tsx
 create mode 100644 packages/g6-extension-react/src/graph/index.ts
 create mode 100644 packages/g6-extension-react/src/index.ts
 create mode 100644 packages/g6-extension-react/tsconfig.build.json
 create mode 100644 packages/g6-extension-react/tsconfig.json
 create mode 100644 packages/g6-extension-react/tsconfig.test.json
 create mode 100644 packages/g6-extension-react/vite.config.js
 create mode 100644 packages/g6/__tests__/bugs/continuous-invoke.spec.ts
 create mode 100644 packages/g6/__tests__/demos/element-node-html.ts
 create mode 100644 packages/g6/src/elements/nodes/html.ts
 delete mode 100644 packages/g6/src/runtime/index.ts

diff --git a/packages/g6-extension-3d/package.json b/packages/g6-extension-3d/package.json
index d0b52319c7e..213195ce213 100644
--- a/packages/g6-extension-3d/package.json
+++ b/packages/g6-extension-3d/package.json
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@antv/g": "^5.18.25",
     "@antv/g-canvas": "^1.11.27",
-    "@antv/g6": "^5.0.0-beta.30"
+    "@antv/g6": "workspace:*"
   },
   "peerDependencies": {
     "@antv/g": "^5.18.25",
diff --git a/packages/g6-extension-react/__tests__/demos/g-node.tsx b/packages/g6-extension-react/__tests__/demos/g-node.tsx
new file mode 100644
index 00000000000..2d13d64b652
--- /dev/null
+++ b/packages/g6-extension-react/__tests__/demos/g-node.tsx
@@ -0,0 +1,112 @@
+import type { NodeData } from '@antv/g6';
+import { ExtensionCategory, register } from '@antv/g6';
+import { GNode, Group, Image, Rect, Text } from '../../src';
+import { Graph } from '../../src/graph';
+
+register(ExtensionCategory.NODE, 'g', GNode);
+
+type Datum = {
+  name: string;
+  type: 'module' | 'process';
+  status: 'success' | 'error';
+  success: number;
+  time: number;
+  failure: number;
+};
+
+const Node = ({ data, size }: { data: NodeData; size: [number, number] }) => {
+  const [width, height] = size;
+
+  const { name, type, status, success, time, failure } = data.data as Datum;
+  const color = status === 'success' ? '#30BF78' : '#F4664A';
+  const radius = 4;
+
+  const titleMap = {
+    success: 'Success',
+    time: 'Time',
+    failure: 'Failure',
+  };
+
+  const format = (cat: string, value: number) => {
+    if (cat === 'success') return `${value}%`;
+    if (cat === 'time') return `${value}min`;
+    return value.toString();
+  };
+
+  const highlight = (cat: string, value: number) => {
+    if (cat === 'success') {
+      if (value >= 90) return 'green';
+      if (value < 60) return 'red';
+      return 'gray';
+    }
+    if (cat === 'time') {
+      if (value <= 10) return 'green';
+      if (value >= 30) return 'red';
+      return 'gray';
+    }
+    if (value >= 20) return 'red';
+    if (value >= 5) return 'orange';
+    return 'gray';
+  };
+
+  return (
+    <Group>
+      <Rect width={width} height={height} stroke={color} fill={'white'} radius={radius}>
+        <Rect width={width} height={20} fill={color} radius={[radius, radius, 0, 0]}>
+          <Image
+            src={
+              type === 'module'
+                ? 'https://gw.alipayobjects.com/mdn/rms_8fd2eb/afts/img/A*0HC-SawWYUoAAAAAAAAAAABkARQnAQ'
+                : 'https://gw.alipayobjects.com/mdn/rms_8fd2eb/afts/img/A*sxK0RJ1UhNkAAAAAAAAAAABkARQnAQ'
+            }
+            x={2}
+            y={2}
+            width={16}
+            height={16}
+          />
+          <Text text={name} textBaseline="top" fill="#fff" fontSize={14} dx={20} dy={2} />
+        </Rect>
+        <Group transform="translate(5,40)">
+          {Object.entries({ success, time, failure }).map(([key, value], index) => (
+            <Group key={index} transform={`translate(${(index * width) / 3}, 0)`}>
+              <Text text={titleMap[key as keyof typeof titleMap]} fontSize={12} fill="gray" />
+              <Text text={format(key, value)} fontSize={12} dy={16} fill={highlight(key, value)} />
+            </Group>
+          ))}
+        </Group>
+      </Rect>
+    </Group>
+  );
+};
+
+export const GNodeDemo = () => {
+  return (
+    <Graph
+      options={{
+        data: {
+          nodes: [
+            {
+              id: 'node-1',
+              data: { name: 'Module', type: 'module', status: 'success', success: 90, time: 58, failure: 8 },
+              style: { x: 100, y: 100 },
+            },
+            {
+              id: 'node-2',
+              data: { name: 'Process', type: 'process', status: 'error', success: 11, time: 12, failure: 26 },
+              style: { x: 300, y: 100 },
+            },
+          ],
+          edges: [{ source: 'node-1', target: 'node-2' }],
+        },
+        node: {
+          style: {
+            type: 'g',
+            size: [180, 60], // tell G6 the size of the node
+            component: (data: NodeData) => <Node data={data} size={[180, 60]} />,
+          },
+        },
+        behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
+      }}
+    />
+  );
+};
diff --git a/packages/g6-extension-react/__tests__/demos/graph.tsx b/packages/g6-extension-react/__tests__/demos/graph.tsx
new file mode 100644
index 00000000000..7eb229bbbd3
--- /dev/null
+++ b/packages/g6-extension-react/__tests__/demos/graph.tsx
@@ -0,0 +1,24 @@
+import { Graph } from '../../src/graph';
+
+export const G6Graph = () => {
+  return (
+    <Graph
+      options={{
+        data: {
+          nodes: [
+            { id: 'node-1', style: { x: 100, y: 100, labelText: 'Hello' } },
+            { id: 'node-2', style: { x: 300, y: 100, labelText: 'World' } },
+          ],
+          edges: [{ source: 'node-1', target: 'node-2' }],
+        },
+        behaviors: ['drag-element'],
+      }}
+      onRender={() => {
+        console.log('render');
+      }}
+      onDestroy={() => {
+        console.log('destroy');
+      }}
+    />
+  );
+};
diff --git a/packages/g6-extension-react/__tests__/demos/index.tsx b/packages/g6-extension-react/__tests__/demos/index.tsx
new file mode 100644
index 00000000000..a2cef959628
--- /dev/null
+++ b/packages/g6-extension-react/__tests__/demos/index.tsx
@@ -0,0 +1,3 @@
+export * from './g-node';
+export * from './graph';
+export * from './react-node';
diff --git a/packages/g6-extension-react/__tests__/demos/react-node.tsx b/packages/g6-extension-react/__tests__/demos/react-node.tsx
new file mode 100644
index 00000000000..597f4ef84a0
--- /dev/null
+++ b/packages/g6-extension-react/__tests__/demos/react-node.tsx
@@ -0,0 +1,166 @@
+import { DatabaseFilled } from '@ant-design/icons';
+import type { Graph as G6Graph, G6Spec, NodeData } from '@antv/g6';
+import { ExtensionCategory, register } from '@antv/g6';
+import { Badge, Button, Flex, Form, Input, Layout, Select, Table, Tag, Typography } from 'antd';
+import { useRef, useState } from 'react';
+import { ReactNode } from '../../src';
+import { Graph } from '../../src/graph';
+
+const { Content, Footer } = Layout;
+const { Text } = Typography;
+
+register(ExtensionCategory.NODE, 'react', ReactNode);
+
+type Datum = {
+  name: string;
+  status: 'success' | 'error' | 'warning';
+  type: 'local' | 'remote';
+  url: string;
+};
+
+const Node = ({ data, onChange }: { data: NodeData; onChange?: (value: string) => void }) => {
+  const { status, type } = data.data as Datum;
+
+  return (
+    <Flex style={{ width: '100%', height: '100%', background: '#fff', padding: 10, borderRadius: 5 }} vertical>
+      <Flex align="center" justify="space-between">
+        <Text>
+          <DatabaseFilled />
+          Server
+          <Tag>{type}</Tag>
+        </Text>
+        <Badge status={status} />
+      </Flex>
+      <Text type="secondary">{data.id}</Text>
+      <Flex align="center">
+        <Text style={{ flexShrink: 0 }}>
+          <Text type="danger">*</Text>URL:
+        </Text>
+        <Input
+          style={{ borderRadius: 0, borderBottom: '1px solid #d9d9d9' }}
+          variant="borderless"
+          value={data.data?.url as string}
+          onChange={(event) => {
+            const url = event.target.value;
+            onChange?.(url);
+          }}
+        />
+      </Flex>
+    </Flex>
+  );
+};
+
+export const ReactNodeDemo = () => {
+  const graphRef = useRef<G6Graph | null>(null);
+
+  const [form] = Form.useForm();
+  const isValidUrl = (url: string) => {
+    return /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/.test(
+      url,
+    );
+  };
+
+  const [options, setOptions] = useState<G6Spec>({
+    data: {
+      nodes: [
+        {
+          id: 'local-server-1',
+          data: { status: 'success', type: 'local', url: 'http://localhost:3000' },
+          style: { x: 50, y: 50 },
+        },
+        {
+          id: 'remote-server-1',
+          data: { status: 'warning', type: 'remote' },
+          style: { x: 350, y: 50 },
+        },
+      ],
+    },
+    node: {
+      style: {
+        type: 'react',
+        size: [240, 100],
+        component: (data: NodeData) => (
+          <Node
+            data={data}
+            onChange={(url) => {
+              setOptions((prev) => {
+                if (!graphRef.current || graphRef.current.destroyed) return prev;
+                const nodes = graphRef.current.getNodeData();
+                const index = nodes.findIndex((node) => node.id === data.id);
+                const node = nodes[index];
+                const datum = {
+                  ...node.data,
+                  url,
+                  status: url === '' ? 'warning' : isValidUrl(url) ? 'success' : 'error',
+                } as Datum;
+                nodes[index] = { ...node, data: datum };
+                return { ...prev, data: { ...prev.data, nodes } };
+              });
+            }}
+          />
+        ),
+      },
+    },
+    behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
+  });
+
+  return (
+    <Layout style={{ width: 800, height: 400 }}>
+      <Content style={{ minHeight: 400 }}>
+        <Graph options={options} onRender={(graph) => (graphRef.current = graph)} />
+      </Content>
+      <Footer>
+        <Form form={form} initialValues={{ serverType: 'local' }}>
+          <Form.Item label="Server Type" name="serverType">
+            <Select
+              options={[
+                { label: 'Local', value: 'local' },
+                { label: 'Remote', value: 'remote' },
+              ]}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button
+              style={{ width: '100%' }}
+              type="primary"
+              onClick={() => {
+                if (!graphRef.current || graphRef.current.destroyed) return;
+                const type = form.getFieldValue('serverType');
+                const status = 'warning';
+                const length = (options.data?.nodes || []).filter((node) => node?.data?.type === type).length;
+                setOptions((prev) => ({
+                  ...prev,
+                  data: {
+                    ...prev.data,
+                    nodes: [
+                      ...graphRef.current!.getNodeData(),
+                      {
+                        id: `${type}-server-${length + 1}`,
+                        data: { type, status },
+                        style: { x: type === 'local' ? 50 : 350, y: 50 + length * 120 },
+                      },
+                    ],
+                  },
+                }));
+              }}
+            >
+              Add Node
+            </Button>
+          </Form.Item>
+        </Form>
+
+        <Table
+          columns={[
+            { title: 'Server', key: 'server', dataIndex: 'server' },
+            { title: 'URL', key: 'url', dataIndex: 'url' },
+          ]}
+          dataSource={(options.data?.nodes || []).map((node) => ({
+            key: node.id,
+            server: node.id,
+            url: (node?.data as Datum).url || 'Not Configured',
+          }))}
+        ></Table>
+      </Footer>
+    </Layout>
+  );
+};
diff --git a/packages/g6-extension-react/__tests__/index.html b/packages/g6-extension-react/__tests__/index.html
new file mode 100644
index 00000000000..669f88a2312
--- /dev/null
+++ b/packages/g6-extension-react/__tests__/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@antv/g6-extension-react</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/g6-extension-react/__tests__/main.tsx b/packages/g6-extension-react/__tests__/main.tsx
new file mode 100644
index 00000000000..5a20e7c6f41
--- /dev/null
+++ b/packages/g6-extension-react/__tests__/main.tsx
@@ -0,0 +1,47 @@
+import { Alert, Flex, Select } from 'antd';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Outlet, RouterProvider, createBrowserRouter, useMatch, useNavigate } from 'react-router-dom';
+import * as demos from './demos';
+
+const App = () => {
+  const navigate = useNavigate();
+  const match = useMatch('/*');
+
+  return (
+    <Flex vertical>
+      <Select
+        value={match?.params['*'] || Object.keys(demos)[0]}
+        options={Object.keys(demos).map((label) => ({ label, value: label }))}
+        style={{ width: 100 }}
+        onChange={(value) => navigate(value)}
+      />
+      <Outlet />
+    </Flex>
+  );
+};
+
+const NotFount = () => {
+  return <Alert message="Demo Not Found" type="error" />;
+};
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    errorElement: <NotFount />,
+    children: Object.entries(demos).map(([key, Demo]) => ({
+      path: key,
+      element: <Demo />,
+    })),
+  },
+]);
+
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);
diff --git a/packages/g6-extension-react/__tests__/unit/default.spec.ts b/packages/g6-extension-react/__tests__/unit/default.spec.ts
new file mode 100644
index 00000000000..ce13dc4d36b
--- /dev/null
+++ b/packages/g6-extension-react/__tests__/unit/default.spec.ts
@@ -0,0 +1,5 @@
+describe('default', () => {
+  it('expect', () => {
+    expect(1).toBe(1);
+  });
+});
diff --git a/packages/g6-extension-react/jest.config.js b/packages/g6-extension-react/jest.config.js
new file mode 100644
index 00000000000..619be7f1215
--- /dev/null
+++ b/packages/g6-extension-react/jest.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  transform: {
+    '^.+\\.[tj]s$': ['@swc/jest'],
+  },
+  testRegex: '(/__tests__/.*\\.(test|spec))\\.(ts|tsx|js)$',
+  collectCoverageFrom: ['src/**/*.ts'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+};
diff --git a/packages/g6-extension-react/package.json b/packages/g6-extension-react/package.json
new file mode 100644
index 00000000000..c7cb1da76e2
--- /dev/null
+++ b/packages/g6-extension-react/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@antv/g6-extension-react",
+  "version": "0.0.1",
+  "description": "Using React Component to Define Your G6 Graph Node",
+  "keywords": [
+    "antv",
+    "g6",
+    "extension",
+    "react",
+    "node"
+  ],
+  "license": "MIT",
+  "author": "Aarebecca",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "src",
+    "esm",
+    "lib",
+    "dist"
+  ],
+  "scripts": {
+    "build": "run-p build:*",
+    "build:cjs": "rimraf ./lib && tsc --module commonjs --outDir lib -p tsconfig.build.json",
+    "build:esm": "rimraf ./esm && tsc --module ESNext --outDir esm -p tsconfig.build.json",
+    "build:umd": "rimraf ./dist && rollup -c",
+    "ci": "run-s lint type-check build test",
+    "dev": "vite",
+    "lint": "eslint ./src __tests__ --quiet && prettier ./src __tests__ --check",
+    "prepublishOnly": "npm run ci",
+    "test": "jest",
+    "type-check": "tsc --noEmit -p tsconfig.test.json"
+  },
+  "dependencies": {
+    "@antv/g": "^5.18.25",
+    "@antv/react-g": "^1.10.28"
+  },
+  "devDependencies": {
+    "@ant-design/icons": "^5.3.6",
+    "@antv/g6": "workspace:*",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
+    "antd": "^5.10.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3"
+  },
+  "peerDependencies": {
+    "@antv/g6": "^5.0.0-beta.30",
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  }
+}
diff --git a/packages/g6-extension-react/rollup.config.mjs b/packages/g6-extension-react/rollup.config.mjs
new file mode 100644
index 00000000000..6c2d5ca773b
--- /dev/null
+++ b/packages/g6-extension-react/rollup.config.mjs
@@ -0,0 +1,30 @@
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+import typescript from '@rollup/plugin-typescript';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+const isBundleVis = !!process.env.BUNDLE_VIS;
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'dist/g6-extension-react.min.js',
+      name: 'g6-extension-react',
+      format: 'umd',
+      sourcemap: false,
+    },
+    plugins: [
+      nodePolyfills(),
+      resolve(),
+      commonjs(),
+      typescript({
+        tsconfig: 'tsconfig.build.json',
+      }),
+      terser(),
+      ...(isBundleVis ? [visualizer()] : []),
+    ],
+  },
+];
diff --git a/packages/g6-extension-react/src/elements/g/index.ts b/packages/g6-extension-react/src/elements/g/index.ts
new file mode 100644
index 00000000000..15cfa05722b
--- /dev/null
+++ b/packages/g6-extension-react/src/elements/g/index.ts
@@ -0,0 +1,4 @@
+export { GNode } from './node';
+export * from './shapes';
+
+export type { GNodeStyleProps } from './node';
diff --git a/packages/g6-extension-react/src/elements/g/node.tsx b/packages/g6-extension-react/src/elements/g/node.tsx
new file mode 100644
index 00000000000..d850a8c1f7f
--- /dev/null
+++ b/packages/g6-extension-react/src/elements/g/node.tsx
@@ -0,0 +1,36 @@
+import type { DisplayObjectConfig } from '@antv/g';
+import { ElementEvent, Group } from '@antv/g';
+import type { BaseNodeStyleProps } from '@antv/g6';
+import { Rect } from '@antv/g6';
+import { render } from '@antv/react-g';
+import type { FC, ReactNode } from 'react';
+
+export type GNodeStyleProps = BaseNodeStyleProps<{ component: FC }>;
+
+export class GNode extends Rect {
+  static defaultStyleProps: Partial<GNodeStyleProps> = {
+    halo: false,
+    label: false,
+    icon: false,
+  };
+
+  constructor(options: DisplayObjectConfig<GNodeStyleProps>) {
+    super({ ...options, style: { ...GNode.defaultStyleProps, ...options.style } });
+  }
+
+  protected drawKeyShape(attributes: Required<GNodeStyleProps>, container: Group): Group | undefined {
+    const { component } = attributes;
+    const [width, height] = this.getSize();
+
+    const dom = this.upsert('key', Group, { width, height }, container);
+
+    dom.isMutationObserved = true;
+    dom.addEventListener(ElementEvent.MOUNTED, () => {
+      // component 已经被回调机制自动创建为 ReactNode
+      // component has been automatically created as ReactNode by the callback mechanism
+      render(component as unknown as ReactNode, dom);
+    });
+
+    return dom;
+  }
+}
diff --git a/packages/g6-extension-react/src/elements/g/shapes.ts b/packages/g6-extension-react/src/elements/g/shapes.ts
new file mode 100644
index 00000000000..a5ef4754852
--- /dev/null
+++ b/packages/g6-extension-react/src/elements/g/shapes.ts
@@ -0,0 +1 @@
+export { Arrow, Circle, Ellipse, Group, HTML, Image, Line, Path, Polygon, Polyline, Rect, Text } from '@antv/react-g';
diff --git a/packages/g6-extension-react/src/elements/index.ts b/packages/g6-extension-react/src/elements/index.ts
new file mode 100644
index 00000000000..4676c3a27a1
--- /dev/null
+++ b/packages/g6-extension-react/src/elements/index.ts
@@ -0,0 +1,2 @@
+export * from './g';
+export * from './react';
diff --git a/packages/g6-extension-react/src/elements/react/index.ts b/packages/g6-extension-react/src/elements/react/index.ts
new file mode 100644
index 00000000000..e2cf779d827
--- /dev/null
+++ b/packages/g6-extension-react/src/elements/react/index.ts
@@ -0,0 +1,3 @@
+export { ReactNode } from './node';
+
+export type { ReactNodeStyleProps } from './node';
diff --git a/packages/g6-extension-react/src/elements/react/node.tsx b/packages/g6-extension-react/src/elements/react/node.tsx
new file mode 100644
index 00000000000..271fa61e53c
--- /dev/null
+++ b/packages/g6-extension-react/src/elements/react/node.tsx
@@ -0,0 +1,36 @@
+import type { HTMLStyleProps as GHTMLStyleProps } from '@antv/g';
+import type { BaseNodeStyleProps, HTMLStyleProps } from '@antv/g6';
+import { HTML } from '@antv/g6';
+import type { FC, ReactNode as IReactNode } from 'react';
+import type { Root } from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
+
+export type ReactNodeStyleProps = BaseNodeStyleProps<{ component: FC }>;
+
+export class ReactNode extends HTML {
+  private root!: Root;
+
+  protected getKeyStyle(attributes: Required<HTMLStyleProps>): GHTMLStyleProps {
+    return { ...super.getKeyStyle(attributes) };
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this.root = createRoot(this.getDomElement());
+    const { component } = this.attributes as unknown as ReactNodeStyleProps;
+    // component 已经被回调机制自动创建为 ReactNode
+    // component has been automatically created as ReactNode by the callback mechanism
+    this.root.render(component as unknown as IReactNode);
+  }
+
+  public attributeChangedCallback(name: any, oldValue: any, newValue: any) {
+    if (name === 'component' && oldValue !== newValue) {
+      this.root.render((this.attributes as unknown as ReactNodeStyleProps).component as unknown as IReactNode);
+    }
+  }
+
+  public onDestroy() {
+    this.root.unmount();
+    super.onDestroy();
+  }
+}
diff --git a/packages/g6-extension-react/src/graph/graph.tsx b/packages/g6-extension-react/src/graph/graph.tsx
new file mode 100644
index 00000000000..555daa1134d
--- /dev/null
+++ b/packages/g6-extension-react/src/graph/graph.tsx
@@ -0,0 +1,44 @@
+import type { G6Spec } from '@antv/g6';
+import { Graph as G6Graph } from '@antv/g6';
+import { useEffect, useRef } from 'react';
+
+export interface GraphProps {
+  options: G6Spec;
+  onRender?: (graph: G6Graph) => void;
+  onDestroy?: () => void;
+}
+
+export const Graph = (props: GraphProps) => {
+  const { options, onRender, onDestroy } = props;
+  const graphRef = useRef<G6Graph>();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const graph = new G6Graph({ container: containerRef.current! });
+    graphRef.current = graph;
+
+    return () => {
+      const graph = graphRef.current;
+      if (graph) {
+        graph.destroy();
+        onDestroy?.();
+        graphRef.current = undefined;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const graph = graphRef.current;
+
+    if (!options || !container || !graph || graph.destroyed) return;
+
+    graph.setOptions(options);
+    graph
+      .render()
+      .then(() => onRender?.(graph))
+      .catch((error) => console.debug(error));
+  }, [options]);
+
+  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+};
diff --git a/packages/g6-extension-react/src/graph/index.ts b/packages/g6-extension-react/src/graph/index.ts
new file mode 100644
index 00000000000..03e5dd4fd96
--- /dev/null
+++ b/packages/g6-extension-react/src/graph/index.ts
@@ -0,0 +1 @@
+export { Graph } from './graph';
diff --git a/packages/g6-extension-react/src/index.ts b/packages/g6-extension-react/src/index.ts
new file mode 100644
index 00000000000..9b09359d8fc
--- /dev/null
+++ b/packages/g6-extension-react/src/index.ts
@@ -0,0 +1,18 @@
+export {
+  Arrow,
+  Circle,
+  Ellipse,
+  GNode,
+  Group,
+  HTML,
+  Image,
+  Line,
+  Path,
+  Polygon,
+  Polyline,
+  ReactNode,
+  Rect,
+  Text,
+} from './elements';
+
+export type { GNodeStyleProps, ReactNodeStyleProps } from './elements';
diff --git a/packages/g6-extension-react/tsconfig.build.json b/packages/g6-extension-react/tsconfig.build.json
new file mode 100644
index 00000000000..5790ea55085
--- /dev/null
+++ b/packages/g6-extension-react/tsconfig.build.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {}
+  },
+  "include": ["src/**/*"],
+  "extends": "./tsconfig.json"
+}
diff --git a/packages/g6-extension-react/tsconfig.json b/packages/g6-extension-react/tsconfig.json
new file mode 100644
index 00000000000..c27d1186d8f
--- /dev/null
+++ b/packages/g6-extension-react/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react-jsx",
+    "outDir": "lib",
+    "paths": {
+      "@antv/g6": ["../g6/src/index.ts"]
+    }
+  },
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*", "__tests__/**/*"]
+}
diff --git a/packages/g6-extension-react/tsconfig.test.json b/packages/g6-extension-react/tsconfig.test.json
new file mode 100644
index 00000000000..74e04566a17
--- /dev/null
+++ b/packages/g6-extension-react/tsconfig.test.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {}
+  },
+  "include": ["src/**/*", "__tests__/**/*"],
+  "extends": "./tsconfig.json"
+}
diff --git a/packages/g6-extension-react/vite.config.js b/packages/g6-extension-react/vite.config.js
new file mode 100644
index 00000000000..422d3aa4638
--- /dev/null
+++ b/packages/g6-extension-react/vite.config.js
@@ -0,0 +1,16 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  root: './__tests__',
+  server: {
+    port: 8082,
+    open: '/',
+  },
+  plugins: [{ name: 'isolation' }],
+  resolve: {
+    alias: {
+      '@antv/g6': path.resolve(__dirname, '../g6/src'),
+    },
+  },
+});
diff --git a/packages/g6/__tests__/bugs/continuous-invoke.spec.ts b/packages/g6/__tests__/bugs/continuous-invoke.spec.ts
new file mode 100644
index 00000000000..7c590d25f1f
--- /dev/null
+++ b/packages/g6/__tests__/bugs/continuous-invoke.spec.ts
@@ -0,0 +1,13 @@
+import { createGraph } from '@@/utils';
+
+describe('bugs:continuous-invoke', () => {
+  it('continuous invoke', () => {
+    const graph = createGraph({});
+    const fn = jest.fn(async () => {
+      graph.destroy();
+      await graph.render();
+    });
+
+    expect(fn).rejects.toThrow('Graph has been destroyed');
+  });
+});
diff --git a/packages/g6/__tests__/demos/element-node-html.ts b/packages/g6/__tests__/demos/element-node-html.ts
new file mode 100644
index 00000000000..3baf48d0625
--- /dev/null
+++ b/packages/g6/__tests__/demos/element-node-html.ts
@@ -0,0 +1,34 @@
+import type { NodeData } from '@/src';
+import { Graph } from '@/src';
+
+export const elementNodeHTML: TestCase = async (context) => {
+  const data = {
+    nodes: [
+      { id: 'html-1', style: { x: 100, y: 100, color: 'orange' }, data: { content: 'HTML NODE 1' } },
+      { id: 'html-2', style: { x: 100, y: 200, color: 'pink' }, data: { content: 'HTML NODE 2' } },
+    ],
+    edges: [{ source: 'html-1', target: 'html-2' }],
+  };
+
+  const graph = new Graph({
+    ...context,
+    data,
+    node: {
+      style: {
+        type: 'html', // 👈🏻 Node shape type.
+        size: [240, 80],
+        innerHTML: (d: NodeData) => `
+<div style="width: 100%; height: 100%; background: ${d.style!.color}; display: flex; justify-content: center; align-items: center;">
+  <span style="color: #fff; font-size: 20px;">
+    ${d.data!.content}
+  </span>
+</div>`,
+      },
+    },
+    behaviors: ['drag-element'],
+  });
+
+  await graph.render();
+
+  return graph;
+};
diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts
index 7f017f97ce3..1e694d7135c 100644
--- a/packages/g6/__tests__/demos/index.ts
+++ b/packages/g6/__tests__/demos/index.ts
@@ -37,6 +37,7 @@ export * from './element-node-circle';
 export * from './element-node-diamond';
 export * from './element-node-ellipse';
 export * from './element-node-hexagon';
+export * from './element-node-html';
 export * from './element-node-image';
 export * from './element-node-rect';
 export * from './element-node-star';
diff --git a/packages/g6/__tests__/unit/registry.spec.ts b/packages/g6/__tests__/unit/registry.spec.ts
index e43333a1db7..739c20f3c6e 100644
--- a/packages/g6/__tests__/unit/registry.spec.ts
+++ b/packages/g6/__tests__/unit/registry.spec.ts
@@ -1,4 +1,3 @@
-import { getExtension, getExtensions, register } from '@/src';
 import {
   Circle,
   CircleCombo,
@@ -7,16 +6,20 @@ import {
   CubicVertical,
   Diamond,
   Ellipse,
+  HTML,
   Hexagon,
   Image,
   Line,
   Polyline,
   Quadratic,
   Rect,
+  RectCombo,
   Star,
   Triangle,
-} from '@/src/elements';
-import { RectCombo } from '@/src/elements/combos/rect';
+  getExtension,
+  getExtensions,
+  register,
+} from '@/src';
 import { dark, light } from '@/src/themes';
 import { pick } from '@antv/util';
 
@@ -31,6 +34,7 @@ describe('registry', () => {
       triangle: Triangle,
       diamond: Diamond,
       hexagon: Hexagon,
+      html: HTML,
     });
     expect(getExtensions('edge')).toEqual({
       cubic: Cubic,
diff --git a/packages/g6/jest.config.js b/packages/g6/jest.config.js
index 53c4a73c3af..7b4483f7113 100644
--- a/packages/g6/jest.config.js
+++ b/packages/g6/jest.config.js
@@ -11,6 +11,7 @@ module.exports = {
     '^.+\\.svg$': ['<rootDir>/__tests__/utils/svg-transformer.js'],
   },
   collectCoverageFrom: ['src/**/*.ts'],
+  coveragePathIgnorePatterns: ['<rootDir>/src/elements/nodes/html.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   collectCoverage: false,
   testRegex: '(/__tests__/.*\\.(test|spec))\\.(ts|tsx|js)$',
diff --git a/packages/g6/src/constants/events/animation.ts b/packages/g6/src/constants/events/animation.ts
index 4c0c01cfc87..f50f59d848e 100644
--- a/packages/g6/src/constants/events/animation.ts
+++ b/packages/g6/src/constants/events/animation.ts
@@ -1,8 +1,4 @@
 export enum AnimationType {
   DRAW = 'draw',
   TRANSFORM = 'transform',
-  // LAYOUT = 'layout', // 布局没有统一的动画对象，因此不抛出动画事件 | There is no unified animation object for layout, so no animation event is thrown
-  ELEMENT_VISIBILITY_CHANGE = 'elementvisibilitychange',
-  ELEMENT_STATE_CHANGE = 'elementstatechange',
-  ELEMENT_TRANSLATE = 'elementtranslate',
 }
diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts
index c11506e5c08..4e8e8d05ba6 100644
--- a/packages/g6/src/elements/nodes/base-node.ts
+++ b/packages/g6/src/elements/nodes/base-node.ts
@@ -310,8 +310,8 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
    * Get the key shape for the node.
    * @returns Key shape.
    */
-  public getKey(): DisplayObject {
-    return this.shapeMap.key;
+  public getKey<T extends DisplayObject>(): T {
+    return this.shapeMap.key as T;
   }
 
   /**
diff --git a/packages/g6/src/elements/nodes/html.ts b/packages/g6/src/elements/nodes/html.ts
new file mode 100644
index 00000000000..a03cf19ff67
--- /dev/null
+++ b/packages/g6/src/elements/nodes/html.ts
@@ -0,0 +1,230 @@
+import type {
+  DisplayObjectConfig,
+  FederatedMouseEvent,
+  HTMLStyleProps as GHTMLStyleProps,
+  Group,
+  ICanvas,
+  IEventTarget,
+} from '@antv/g';
+import { FederatedPointerEvent, HTML as GHTML } from '@antv/g';
+import { isNil, isUndefined, pick } from '@antv/util';
+import { NodeEvent } from '../../constants';
+import type { BaseNodeStyleProps } from './base-node';
+import { BaseNode } from './base-node';
+
+export type HTMLStyleProps = BaseNodeStyleProps<{
+  innerHTML: string | HTMLElement;
+}>;
+
+/**
+ * @see https://github.com/antvis/G/blob/next/packages/g-lite/src/plugins/EventPlugin.ts
+ */
+export class HTML extends BaseNode<HTMLStyleProps> {
+  static defaultStyleProps: Partial<HTMLStyleProps> = {
+    size: [160, 80],
+    halo: false,
+    icon: false,
+    label: false,
+    pointerEvents: 'auto',
+  };
+
+  constructor(options: DisplayObjectConfig<HTMLStyleProps>) {
+    super({ ...options, style: Object.assign({}, HTML.defaultStyleProps, options.style) });
+  }
+
+  private rootPointerEvent = new FederatedPointerEvent(null);
+
+  private get eventService() {
+    return this.attributes.context!.canvas.context.eventService;
+  }
+
+  private get events() {
+    return [
+      NodeEvent.CLICK,
+      NodeEvent.POINTER_DOWN,
+      NodeEvent.POINTER_MOVE,
+      NodeEvent.POINTER_UP,
+      NodeEvent.POINTER_OVER,
+      NodeEvent.POINTER_LEAVE,
+    ];
+  }
+
+  protected getDomElement() {
+    return this.getKey<GHTML>().getDomElement();
+  }
+
+  protected getKeyStyle(attributes: Required<HTMLStyleProps>): GHTMLStyleProps {
+    const style = pick(attributes, ['innerHTML', 'pointerEvents', 'cursor']) as unknown as HTMLStyleProps;
+    const [width, height] = this.getSize(attributes);
+    return { ...style, width, height };
+  }
+
+  protected drawKeyShape(attributes: Required<HTMLStyleProps>, container: Group) {
+    return this.upsert('key', GHTML, this.getKeyStyle(attributes), container);
+  }
+
+  public connectedCallback() {
+    const element = this.getDomElement();
+    this.events.forEach((eventName) => {
+      // @ts-expect-error assert event is PointerEvent
+      element.addEventListener(eventName, this.forwardEvents);
+    });
+  }
+
+  public attributeChangedCallback(name: any, oldValue: any, newValue: any) {
+    if (name === 'zIndex' && oldValue !== newValue) {
+      this.getDomElement().style.zIndex = newValue;
+    }
+  }
+
+  public onDestroy() {
+    const element = this.getDomElement();
+    this.events.forEach((eventName) => {
+      // @ts-expect-error assert event is PointerEvent
+      element.removeEventListener(eventName, this.forwardEvents);
+    });
+  }
+
+  private forwardEvents = (nativeEvent: PointerEvent) => {
+    const canvas = this.attributes.context!.canvas.main;
+    const iCanvas = canvas.context.renderingContext.root!.ownerDocument!.defaultView!;
+
+    const normalizedEvents = this.normalizeToPointerEvent(nativeEvent, iCanvas);
+
+    normalizedEvents.forEach((normalizedEvent) => {
+      const event = this.bootstrapEvent(this.rootPointerEvent, normalizedEvent, iCanvas, nativeEvent);
+      canvas.context.eventService.mapEvent(event);
+    });
+  };
+
+  private normalizeToPointerEvent(event: PointerEvent, canvas: ICanvas): PointerEvent[] {
+    const normalizedEvents = [];
+    if (canvas.isTouchEvent(event)) {
+      for (let i = 0; i < event.changedTouches.length; i++) {
+        const touch = event.changedTouches[i] as any;
+
+        // use changedTouches instead of touches since touchend has no touches
+        // @see https://stackoverflow.com/a/10079076
+        if (isUndefined(touch.button)) touch.button = 0;
+        if (isUndefined(touch.buttons)) touch.buttons = 1;
+        if (isUndefined(touch.isPrimary)) {
+          touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart';
+        }
+        if (isUndefined(touch.width)) touch.width = touch.radiusX || 1;
+        if (isUndefined(touch.height)) touch.height = touch.radiusY || 1;
+        if (isUndefined(touch.tiltX)) touch.tiltX = 0;
+        if (isUndefined(touch.tiltY)) touch.tiltY = 0;
+        if (isUndefined(touch.pointerType)) touch.pointerType = 'touch';
+        // @see https://developer.mozilla.org/zh-CN/docs/Web/API/Touch/identifier
+        if (isUndefined(touch.pointerId)) touch.pointerId = touch.identifier || 0;
+        if (isUndefined(touch.pressure)) touch.pressure = touch.force || 0.5;
+        if (isUndefined(touch.twist)) touch.twist = 0;
+        if (isUndefined(touch.tangentialPressure)) touch.tangentialPressure = 0;
+        touch.isNormalized = true;
+        touch.type = event.type;
+
+        normalizedEvents.push(touch);
+      }
+    } else if (canvas.isMouseEvent(event)) {
+      const tempEvent = event as any;
+      if (isUndefined(tempEvent.isPrimary)) tempEvent.isPrimary = true;
+      if (isUndefined(tempEvent.width)) tempEvent.width = 1;
+      if (isUndefined(tempEvent.height)) tempEvent.height = 1;
+      if (isUndefined(tempEvent.tiltX)) tempEvent.tiltX = 0;
+      if (isUndefined(tempEvent.tiltY)) tempEvent.tiltY = 0;
+      if (isUndefined(tempEvent.pointerType)) tempEvent.pointerType = 'mouse';
+      if (isUndefined(tempEvent.pointerId)) tempEvent.pointerId = 1;
+      if (isUndefined(tempEvent.pressure)) tempEvent.pressure = 0.5;
+      if (isUndefined(tempEvent.twist)) tempEvent.twist = 0;
+      if (isUndefined(tempEvent.tangentialPressure)) tempEvent.tangentialPressure = 0;
+      tempEvent.isNormalized = true;
+
+      normalizedEvents.push(tempEvent);
+    } else {
+      normalizedEvents.push(event);
+    }
+
+    return normalizedEvents as PointerEvent[];
+  }
+
+  private transferMouseData(event: FederatedMouseEvent, nativeEvent: MouseEvent): void {
+    event.isTrusted = nativeEvent.isTrusted;
+    event.srcElement = nativeEvent.srcElement as IEventTarget;
+    event.timeStamp = performance.now();
+    event.type = nativeEvent.type;
+
+    event.altKey = nativeEvent.altKey;
+    event.metaKey = nativeEvent.metaKey;
+    event.shiftKey = nativeEvent.shiftKey;
+    event.ctrlKey = nativeEvent.ctrlKey;
+    event.button = nativeEvent.button;
+    event.buttons = nativeEvent.buttons;
+    event.client.x = nativeEvent.clientX;
+    event.client.y = nativeEvent.clientY;
+    event.movement.x = nativeEvent.movementX;
+    event.movement.y = nativeEvent.movementY;
+    event.page.x = nativeEvent.pageX;
+    event.page.y = nativeEvent.pageY;
+    event.screen.x = nativeEvent.screenX;
+    event.screen.y = nativeEvent.screenY;
+    event.relatedTarget = null;
+  }
+
+  private bootstrapEvent(
+    event: FederatedPointerEvent,
+    normalizedEvent: PointerEvent,
+    view: ICanvas,
+    nativeEvent: PointerEvent | MouseEvent | TouchEvent,
+  ): FederatedPointerEvent {
+    event.view = view;
+    // @ts-ignore
+    event.originalEvent = null;
+    event.nativeEvent = nativeEvent;
+
+    event.pointerId = normalizedEvent.pointerId;
+    event.width = normalizedEvent.width;
+    event.height = normalizedEvent.height;
+    event.isPrimary = normalizedEvent.isPrimary;
+    event.pointerType = normalizedEvent.pointerType;
+    event.pressure = normalizedEvent.pressure;
+    event.tangentialPressure = normalizedEvent.tangentialPressure;
+    event.tiltX = normalizedEvent.tiltX;
+    event.tiltY = normalizedEvent.tiltY;
+    event.twist = normalizedEvent.twist;
+    this.transferMouseData(event, normalizedEvent);
+
+    const { x, y } = this.getViewportXY(normalizedEvent);
+    event.viewport.x = x;
+    event.viewport.y = y;
+    const { x: canvasX, y: canvasY } = this.attributes.context!.canvas.viewport2Canvas(event.viewport);
+    event.canvas.x = canvasX;
+    event.canvas.y = canvasY;
+    event.global.copyFrom(event.canvas);
+    event.offset.copyFrom(event.canvas);
+
+    event.isTrusted = nativeEvent.isTrusted;
+    if (event.type === 'pointerleave') {
+      event.type = 'pointerout';
+    }
+    return event;
+  }
+
+  private getViewportXY(nativeEvent: PointerEvent | WheelEvent) {
+    let x: number;
+    let y: number;
+    const { offsetX, offsetY, clientX, clientY } = nativeEvent;
+    if (
+      this.attributes.context?.canvas.main.context.config.supportsCSSTransform &&
+      !isNil(offsetX) &&
+      !isNil(offsetY)
+    ) {
+      x = offsetX;
+      y = offsetY;
+    } else {
+      const point = this.eventService.client2Viewport({ x: clientX, y: clientY });
+      x = point.x;
+      y = point.y;
+    }
+    return { x, y };
+  }
+}
diff --git a/packages/g6/src/elements/nodes/index.ts b/packages/g6/src/elements/nodes/index.ts
index 5fb71ff660a..bd3719e7d1b 100644
--- a/packages/g6/src/elements/nodes/index.ts
+++ b/packages/g6/src/elements/nodes/index.ts
@@ -3,6 +3,7 @@ export { Circle } from './circle';
 export { Diamond } from './diamond';
 export { Ellipse } from './ellipse';
 export { Hexagon } from './hexagon';
+export { HTML } from './html';
 export { Image } from './image';
 export { Rect } from './rect';
 export { Star } from './star';
@@ -13,6 +14,7 @@ export type { CircleStyleProps } from './circle';
 export type { DiamondStyleProps } from './diamond';
 export type { EllipseStyleProps } from './ellipse';
 export type { HexagonStyleProps } from './hexagon';
+export type { HTMLStyleProps } from './html';
 export type { ImageStyleProps } from './image';
 export type { RectStyleProps } from './rect';
 export type { StarStyleProps } from './star';
diff --git a/packages/g6/src/exports.ts b/packages/g6/src/exports.ts
index 0c493c64bd4..0fe80dc2be5 100644
--- a/packages/g6/src/exports.ts
+++ b/packages/g6/src/exports.ts
@@ -16,13 +16,14 @@ export {
 } from './constants';
 export { BaseCombo, CircleCombo, RectCombo } from './elements/combos';
 export { BaseEdge, Cubic, CubicHorizontal, CubicVertical, Line, Polyline, Quadratic } from './elements/edges';
-export { BaseNode, Circle, Diamond, Ellipse, Hexagon, Image, Rect, Star, Triangle } from './elements/nodes';
+export { BaseNode, Circle, Diamond, Ellipse, HTML, Hexagon, Image, Rect, Star, Triangle } from './elements/nodes';
 export { BaseShape } from './elements/shapes';
 export { BasePlugin, CameraSetting, History } from './plugins';
 export { getExtension, getExtensions, register } from './registry';
 export { Graph } from './runtime/graph';
 export { BaseTransform } from './transforms';
 export { Shortcut } from './utils/shortcut';
+export { parseSize } from './utils/size';
 
 export type { BaseBehaviorOptions, DragCanvasOptions, ZoomCanvasOptions } from './behaviors';
 export type { BaseComboStyleProps, CircleComboStyleProps, RectComboStyleProps } from './elements/combos';
@@ -40,6 +41,7 @@ export type {
   CircleStyleProps,
   DiamondStyleProps,
   EllipseStyleProps,
+  HTMLStyleProps,
   HexagonStyleProps,
   ImageStyleProps,
   RectStyleProps,
@@ -67,6 +69,9 @@ export type {
 } from './spec';
 export type { BaseTransformOptions } from './transforms';
 export type {
+  Combo,
+  Edge,
+  Element,
   IAnimateEvent,
   IDragEvent,
   IElementLifeCycleEvent,
@@ -76,6 +81,7 @@ export type {
   IPointerEvent,
   IViewportEvent,
   IWheelEvent,
+  Node,
   Point,
   Vector2,
   Vector3,
diff --git a/packages/g6/src/registry/build-in.ts b/packages/g6/src/registry/build-in.ts
index 9a534137ef1..f60e98d5b2f 100644
--- a/packages/g6/src/registry/build-in.ts
+++ b/packages/g6/src/registry/build-in.ts
@@ -20,6 +20,7 @@ import {
   CubicVertical,
   Diamond,
   Ellipse,
+  HTML,
   Hexagon,
   Image,
   Line,
@@ -113,13 +114,14 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
   },
   node: {
     circle: Circle,
+    diamond: Diamond,
     ellipse: Ellipse,
+    hexagon: Hexagon,
+    html: HTML,
     image: Image,
     rect: Rect,
     star: Star,
     triangle: Triangle,
-    diamond: Diamond,
-    hexagon: Hexagon,
   },
   palette: {
     spectral,
diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts
index 5e68c2cdfd6..978f6de4f06 100644
--- a/packages/g6/src/runtime/graph.ts
+++ b/packages/g6/src/runtime/graph.ts
@@ -1,7 +1,7 @@
 import EventEmitter from '@antv/event-emitter';
 import type { AABB, BaseStyleProps } from '@antv/g';
 import type { ID } from '@antv/graphlib';
-import { debounce, isEqual, isFunction, isNumber, isObject, isString, omit } from '@antv/util';
+import { debounce, isArray, isEqual, isFunction, isNumber, isObject, isString, omit } from '@antv/util';
 import { COMBO_KEY, GraphEvent } from '../constants';
 import type { Plugin } from '../plugins/types';
 import { getExtension } from '../registry';
@@ -65,8 +65,6 @@ export class Graph extends EventEmitter {
 
   static defaultOptions: G6Spec = {
     autoResize: false,
-    width: 800,
-    height: 600,
     theme: 'light',
     rotation: 0,
     zoom: 1,
@@ -146,7 +144,7 @@ export class Graph extends EventEmitter {
 
     if (zoomRange) this.options.zoomRange = zoomRange;
     if (isNumber(zoom)) this.options.zoom = zoom;
-    if (isNumber(padding)) this.options.padding = padding;
+    if (isNumber(padding) || isArray(padding)) this.options.padding = padding;
   }
 
   public setBackground(background: G6Spec['background']): void {
@@ -486,13 +484,14 @@ export class Graph extends EventEmitter {
       await container.init();
     } else {
       const $container = isString(container) ? document.getElementById(container!) : container;
+      const containerSize = sizeOf($container!);
 
       this.emit(GraphEvent.BEFORE_CANVAS_INIT, { container: $container, width, height });
 
       const canvas = new Canvas({
         container: $container!,
-        width,
-        height,
+        width: width ?? containerSize[0],
+        height: height ?? containerSize[1],
         renderer,
       });
 
@@ -502,7 +501,7 @@ export class Graph extends EventEmitter {
     }
   }
 
-  private createRuntime() {
+  private initRuntime() {
     this.context.options = this.options;
     if (!this.context.batch) this.context.batch = new BatchController(this.context);
     if (!this.context.plugin) this.context.plugin = new PluginController(this.context);
@@ -514,10 +513,14 @@ export class Graph extends EventEmitter {
   }
 
   private async prepare(): Promise<void> {
+    // 等待同步任务执行完成，避免 render 后立即调用 destroy 导致的问题
+    // Wait for synchronous tasks to complete, to avoid problems caused by calling destroy immediately after render
+    await Promise.resolve();
+
     if (this.destroyed) throw new Error('Graph has been destroyed');
 
     await this.initCanvas();
-    this.createRuntime();
+    this.initRuntime();
   }
 
   /**
@@ -530,8 +533,8 @@ export class Graph extends EventEmitter {
    * <en/> This process will execute data update, element rendering, and layout execution
    */
   public async render(): Promise<void> {
-    emit(this, new GraphLifeCycleEvent(GraphEvent.BEFORE_RENDER));
     await this.prepare();
+    emit(this, new GraphLifeCycleEvent(GraphEvent.BEFORE_RENDER));
     await Promise.all([this.context.element?.draw(), this.context.layout?.layout()]);
     await this.autoFit();
     emit(this, new GraphLifeCycleEvent(GraphEvent.AFTER_RENDER));
diff --git a/packages/g6/src/runtime/index.ts b/packages/g6/src/runtime/index.ts
deleted file mode 100644
index 82aecb99e5f..00000000000
--- a/packages/g6/src/runtime/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * <zh/> 运行时，包括数据处理、布局、渲染等
- *
- * <en/> Runtime, including data processing, layout, rendering, etc.
- */
-
-export {};