From 48a59f54a92f171473678d52f2cf902b80e17a57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=A0=E6=8D=89=E4=B8=8D=E5=88=B0=E7=9A=84this?=
 <2228429150@qq.com>
Date: Sun, 28 Jan 2024 11:16:20 +0800
Subject: [PATCH] fix: update xflow components demo

---
 .../src/xflow/components/clipboard/index.tsx  | 135 +---------
 .../xflow/components/clipboard/setting.tsx    | 125 ++++++++++
 .../src/xflow/components/control/index.tsx    | 144 +----------
 .../src/xflow/components/control/setting.tsx  | 135 ++++++++++
 .../src/xflow/components/graph/index.tsx      | 212 +---------------
 .../src/xflow/components/graph/ports.ts       |  54 ++++
 .../src/xflow/components/graph/setting.tsx    | 156 ++++++++++++
 .../src/xflow/components/history/header.tsx   |  51 ++++
 .../src/xflow/components/history/index.tsx    |  61 +----
 .../src/xflow/components/minimap/header.tsx   |  54 ++++
 .../src/xflow/components/minimap/index.tsx    |  64 +----
 .../src/xflow/components/snapline/index.tsx   | 150 +----------
 .../src/xflow/components/snapline/setting.tsx | 140 +++++++++++
 .../src/xflow/components/transform/index.tsx  | 234 +-----------------
 .../xflow/components/transform/setting.tsx    | 225 +++++++++++++++++
 15 files changed, 962 insertions(+), 978 deletions(-)
 create mode 100644 sites/x6-sites/src/xflow/components/clipboard/setting.tsx
 create mode 100644 sites/x6-sites/src/xflow/components/control/setting.tsx
 create mode 100644 sites/x6-sites/src/xflow/components/graph/ports.ts
 create mode 100644 sites/x6-sites/src/xflow/components/history/header.tsx
 create mode 100644 sites/x6-sites/src/xflow/components/minimap/header.tsx
 create mode 100644 sites/x6-sites/src/xflow/components/snapline/setting.tsx
 create mode 100644 sites/x6-sites/src/xflow/components/transform/setting.tsx

diff --git a/sites/x6-sites/src/xflow/components/clipboard/index.tsx b/sites/x6-sites/src/xflow/components/clipboard/index.tsx
index a63213ab7a3..ca7b935b706 100644
--- a/sites/x6-sites/src/xflow/components/clipboard/index.tsx
+++ b/sites/x6-sites/src/xflow/components/clipboard/index.tsx
@@ -1,13 +1,6 @@
-import {
-  XFlow,
-  XFlowGraph,
-  Background,
-  useGraphStore,
-  useClipboard,
-  Clipboard,
-} from '@antv/xflow'
-import React, { useEffect, useState, useCallback } from 'react'
-import { Card, Row, Col, Slider, Checkbox, Button, Badge } from 'antd'
+import { XFlow, XFlowGraph, Background, Clipboard } from '@antv/xflow'
+import React, { useState } from 'react'
+import { Setting } from './setting'
 import './index.less'
 
 const Page = () => {
@@ -30,125 +23,3 @@ const Page = () => {
 }
 
 export default Page
-
-const Setting = (props) => {
-  const initData = useGraphStore((state) => state.initData)
-
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          x: 32,
-          y: 32,
-          width: 100,
-          height: 40,
-          label: 'Hello',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-        },
-        {
-          id: '2',
-          shape: 'circle',
-          x: 160,
-          y: 180,
-          width: 60,
-          height: 60,
-          label: 'World',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-            },
-          },
-        },
-      ],
-      edges: [
-        {
-          source: '1',
-          target: '2',
-          attrs: {
-            line: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-            },
-          },
-        },
-      ],
-    })
-  }, [initData])
-
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-  const [offset, setOffset] = useState(30)
-  const nodes = useGraphStore((state) => state.nodes)
-  const { copy, paste } = useClipboard()
-
-  const onCopy = () => {
-    const selected = nodes.filter((node) => node.selected)
-    const ids: string[] = selected.map((node) => node.id || '')
-    copy(ids)
-  }
-
-  const onPaste = () => {
-    paste({ offset })
-  }
-
-  return (
-    <div>
-      <Card title="Card title" bordered={false}>
-        <Row align="middle">
-          <Col span={10}>Paste Offset</Col>
-          <Col span={2} offset={1}>
-            <Badge
-              overflowCount={999}
-              count={offset}
-              showZero
-              color="#faad14"
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Slider
-              min={1}
-              max={80}
-              step={1}
-              value={offset}
-              onChange={(value) => setOffset(value)}
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              checked={props.value}
-              onChange={(e) => props.setLocalStorage(e.target.checked)}
-            >
-              useLocalStorage
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={10}>
-            <Button type="primary" onClick={onCopy}>
-              Copy Cell
-            </Button>
-          </Col>
-          <Col span={10} offset={4}>
-            <Button onClick={onPaste}>Paste Cell</Button>
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  )
-}
diff --git a/sites/x6-sites/src/xflow/components/clipboard/setting.tsx b/sites/x6-sites/src/xflow/components/clipboard/setting.tsx
new file mode 100644
index 00000000000..ee0fa8c1185
--- /dev/null
+++ b/sites/x6-sites/src/xflow/components/clipboard/setting.tsx
@@ -0,0 +1,125 @@
+import { useGraphStore, useClipboard } from '@antv/xflow'
+import React, { useEffect, useState, useCallback } from 'react'
+import { Card, Row, Col, Slider, Checkbox, Button, Badge } from 'antd'
+
+export const Setting = (props) => {
+  const initData = useGraphStore((state) => state.initData)
+
+  const setInitData = useCallback(() => {
+    initData({
+      nodes: [
+        {
+          id: '1',
+          x: 32,
+          y: 32,
+          width: 100,
+          height: 40,
+          label: 'Hello',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+        },
+        {
+          id: '2',
+          shape: 'circle',
+          x: 160,
+          y: 180,
+          width: 60,
+          height: 60,
+          label: 'World',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+      ],
+      edges: [
+        {
+          source: '1',
+          target: '2',
+          attrs: {
+            line: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+            },
+          },
+        },
+      ],
+    })
+  }, [initData])
+
+  useEffect(() => {
+    setInitData()
+  }, [setInitData])
+  const [offset, setOffset] = useState(30)
+  const nodes = useGraphStore((state) => state.nodes)
+  const { copy, paste } = useClipboard()
+
+  const onCopy = () => {
+    const selected = nodes.filter((node) => node.selected)
+    const ids: string[] = selected.map((node) => node.id || '')
+    copy(ids)
+  }
+
+  const onPaste = () => {
+    paste({ offset })
+  }
+
+  return (
+    <div>
+      <Card title="Card title" bordered={false}>
+        <Row align="middle">
+          <Col span={10}>Paste Offset</Col>
+          <Col span={2} offset={1}>
+            <Badge
+              overflowCount={999}
+              count={offset}
+              showZero
+              color="#faad14"
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Slider
+              min={1}
+              max={80}
+              step={1}
+              value={offset}
+              onChange={(value) => setOffset(value)}
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              checked={props.value}
+              onChange={(e) => props.setLocalStorage(e.target.checked)}
+            >
+              useLocalStorage
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={10}>
+            <Button type="primary" onClick={onCopy}>
+              Copy Cell
+            </Button>
+          </Col>
+          <Col span={10} offset={4}>
+            <Button onClick={onPaste}>Paste Cell</Button>
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  )
+}
diff --git a/sites/x6-sites/src/xflow/components/control/index.tsx b/sites/x6-sites/src/xflow/components/control/index.tsx
index 916546bba89..8d5bb935e7d 100644
--- a/sites/x6-sites/src/xflow/components/control/index.tsx
+++ b/sites/x6-sites/src/xflow/components/control/index.tsx
@@ -1,12 +1,6 @@
-import {
-  XFlow,
-  XFlowGraph,
-  Background,
-  useGraphStore,
-  Control,
-} from '@antv/xflow'
-import React, { useEffect, useState, useCallback } from 'react'
-import { Card, Row, Col, Segmented, Select } from 'antd'
+import { XFlow, XFlowGraph, Background, Control } from '@antv/xflow'
+import React, { useState } from 'react'
+import { Setting } from './setting'
 import './index.less'
 
 const Page = () => {
@@ -47,135 +41,3 @@ const Page = () => {
 }
 
 export default Page
-
-const Setting = ({ setOptions }) => {
-  const initData = useGraphStore((state) => state.initData)
-
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          x: 32,
-          y: 32,
-          width: 100,
-          height: 40,
-          label: 'Hello',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-        },
-        {
-          id: '2',
-          shape: 'circle',
-          x: 160,
-          y: 180,
-          width: 60,
-          height: 60,
-          label: 'World',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-            },
-          },
-        },
-      ],
-      edges: [
-        {
-          source: '1',
-          target: '2',
-          attrs: {
-            line: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-            },
-          },
-        },
-      ],
-    })
-  }, [initData])
-
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-
-  const controlItems = [
-    'zoomOut',
-    'zoomTo',
-    'zoomIn',
-    'zoomToFit',
-    'zoomToOrigin',
-  ]
-  const selectOptions = controlItems.map((item) => ({
-    label: item,
-    value: item,
-  }))
-
-  return (
-    <div>
-      <Card title="Control 配置" bordered={false}>
-        <Row align="middle">
-          <Col span={20}>
-            <Segmented
-              options={[
-                {
-                  label: '水平展示',
-                  value: 'horizontal',
-                },
-                {
-                  label: '垂直展示',
-                  value: 'vertical',
-                },
-              ]}
-              block
-              onChange={(value) =>
-                setOptions((prev) => ({ ...prev, direction: value }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row align="middle">Tooltip</Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Segmented
-              options={['top', 'right', 'left', 'bottom']}
-              onChange={(value) =>
-                setOptions((prev) => ({ ...prev, placement: value }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={6}>Options </Col>
-          <Col span={14}>
-            <Select
-              mode="multiple"
-              allowClear
-              style={{ width: '100%' }}
-              defaultValue={[
-                'zoomOut',
-                'zoomTo',
-                'zoomIn',
-                'zoomToFit',
-                'zoomToOrigin',
-              ]}
-              placeholder="Please select"
-              onChange={(value) =>
-                setOptions((prev) => ({ ...prev, items: value }))
-              }
-              options={selectOptions}
-            />
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  )
-}
diff --git a/sites/x6-sites/src/xflow/components/control/setting.tsx b/sites/x6-sites/src/xflow/components/control/setting.tsx
new file mode 100644
index 00000000000..6109f365fed
--- /dev/null
+++ b/sites/x6-sites/src/xflow/components/control/setting.tsx
@@ -0,0 +1,135 @@
+import { useGraphStore } from '@antv/xflow'
+import React, { useEffect, useCallback } from 'react'
+import { Card, Row, Col, Segmented, Select } from 'antd'
+
+export const Setting = ({ setOptions }) => {
+  const initData = useGraphStore((state) => state.initData)
+
+  const setInitData = useCallback(() => {
+    initData({
+      nodes: [
+        {
+          id: '1',
+          x: 32,
+          y: 32,
+          width: 100,
+          height: 40,
+          label: 'Hello',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+        },
+        {
+          id: '2',
+          shape: 'circle',
+          x: 160,
+          y: 180,
+          width: 60,
+          height: 60,
+          label: 'World',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+      ],
+      edges: [
+        {
+          source: '1',
+          target: '2',
+          attrs: {
+            line: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+            },
+          },
+        },
+      ],
+    })
+  }, [initData])
+
+  useEffect(() => {
+    setInitData()
+  }, [setInitData])
+
+  const controlItems = [
+    'zoomOut',
+    'zoomTo',
+    'zoomIn',
+    'zoomToFit',
+    'zoomToOrigin',
+  ]
+  const selectOptions = controlItems.map((item) => ({
+    label: item,
+    value: item,
+  }))
+
+  return (
+    <div>
+      <Card title="Control 配置" bordered={false}>
+        <Row align="middle">
+          <Col span={20}>
+            <Segmented
+              options={[
+                {
+                  label: '水平展示',
+                  value: 'horizontal',
+                },
+                {
+                  label: '垂直展示',
+                  value: 'vertical',
+                },
+              ]}
+              block
+              onChange={(value) =>
+                setOptions((prev) => ({ ...prev, direction: value }))
+              }
+            />
+          </Col>
+        </Row>
+        <Row align="middle">Tooltip</Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Segmented
+              options={['top', 'right', 'left', 'bottom']}
+              onChange={(value) =>
+                setOptions((prev) => ({ ...prev, placement: value }))
+              }
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={6}>Options </Col>
+          <Col span={14}>
+            <Select
+              mode="multiple"
+              allowClear
+              style={{ width: '100%' }}
+              defaultValue={[
+                'zoomOut',
+                'zoomTo',
+                'zoomIn',
+                'zoomToFit',
+                'zoomToOrigin',
+              ]}
+              placeholder="Please select"
+              onChange={(value) =>
+                setOptions((prev) => ({ ...prev, items: value }))
+              }
+              options={selectOptions}
+            />
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  )
+}
diff --git a/sites/x6-sites/src/xflow/components/graph/index.tsx b/sites/x6-sites/src/xflow/components/graph/index.tsx
index 89e1b33e78f..06433e8dda2 100644
--- a/sites/x6-sites/src/xflow/components/graph/index.tsx
+++ b/sites/x6-sites/src/xflow/components/graph/index.tsx
@@ -1,6 +1,6 @@
-import { XFlow, XFlowGraph, Background, useGraphStore } from '@antv/xflow'
-import React, { useEffect, useState, useCallback } from 'react'
-import { Card, Row, Col, Checkbox } from 'antd'
+import { XFlow, XFlowGraph, Background } from '@antv/xflow'
+import React, { useState } from 'react'
+import { Setting } from './setting'
 import './index.less'
 
 const Page = () => {
@@ -77,209 +77,3 @@ const Page = () => {
 }
 
 export default Page
-
-const ports = {
-  groups: {
-    group1: {
-      position: 'top',
-      attrs: {
-        circle: {
-          stroke: '#D06269',
-          strokeWidth: 1,
-          r: 4,
-          magnet: true,
-        },
-      },
-    },
-    group2: {
-      position: 'right',
-      attrs: {
-        circle: {
-          stroke: '#D06269',
-          strokeWidth: 1,
-          r: 4,
-          magnet: true,
-        },
-      },
-    },
-    group3: {
-      position: 'bottom',
-      attrs: {
-        circle: {
-          stroke: '#D06269',
-          strokeWidth: 1,
-          r: 4,
-          magnet: true,
-        },
-      },
-    },
-    group4: {
-      position: 'left',
-      attrs: {
-        circle: {
-          stroke: '#D06269',
-          strokeWidth: 1,
-          r: 4,
-          magnet: true,
-        },
-      },
-    },
-  },
-  items: [
-    { id: 'group1', group: 'group1' },
-    { id: 'group2', group: 'group2' },
-    { id: 'group3', group: 'group3' },
-    { id: 'group4', group: 'group4' },
-  ],
-}
-
-const Setting = ({ setOptions }) => {
-  const initData = useGraphStore((state) => state.initData)
-
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          x: 32,
-          y: 32,
-          width: 100,
-          height: 40,
-          label: 'Hello',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-          ports: {
-            ...ports,
-          },
-        },
-        {
-          id: '2',
-          x: 160,
-          y: 180,
-          width: 60,
-          height: 60,
-          label: 'World',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-            },
-          },
-          ports: {
-            ...ports,
-          },
-        },
-        {
-          id: '3',
-          x: 300,
-          y: 180,
-          width: 100,
-          height: 40,
-          label: 'Text',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-            },
-          },
-          ports: {
-            ...ports,
-          },
-        },
-      ],
-      edges: [
-        {
-          source: {
-            cell: '1',
-            port: 'group2',
-          },
-          target: {
-            cell: '2',
-            port: 'group1',
-          },
-          attrs: {
-            line: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-            },
-          },
-        },
-      ],
-    })
-  }, [initData])
-
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-
-  return (
-    <div>
-      <Card title="XFlowGraph 配置" bordered={false}>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({ ...prev, readonly: e.target.checked }))
-              }
-            >
-              readonly
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({ ...prev, zoomable: e.target.checked }))
-              }
-            >
-              zoomable
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({ ...prev, pannable: e.target.checked }))
-              }
-            >
-              pannable
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({ ...prev, embedable: e.target.checked }))
-              }
-            >
-              embedable
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({ ...prev, restrict: e.target.checked }))
-              }
-            >
-              restrict
-            </Checkbox>
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  )
-}
diff --git a/sites/x6-sites/src/xflow/components/graph/ports.ts b/sites/x6-sites/src/xflow/components/graph/ports.ts
new file mode 100644
index 00000000000..40b86b18c65
--- /dev/null
+++ b/sites/x6-sites/src/xflow/components/graph/ports.ts
@@ -0,0 +1,54 @@
+export const ports = {
+  groups: {
+    group1: {
+      position: 'top',
+      attrs: {
+        circle: {
+          stroke: '#D06269',
+          strokeWidth: 1,
+          r: 4,
+          magnet: true,
+        },
+      },
+    },
+    group2: {
+      position: 'right',
+      attrs: {
+        circle: {
+          stroke: '#D06269',
+          strokeWidth: 1,
+          r: 4,
+          magnet: true,
+        },
+      },
+    },
+    group3: {
+      position: 'bottom',
+      attrs: {
+        circle: {
+          stroke: '#D06269',
+          strokeWidth: 1,
+          r: 4,
+          magnet: true,
+        },
+      },
+    },
+    group4: {
+      position: 'left',
+      attrs: {
+        circle: {
+          stroke: '#D06269',
+          strokeWidth: 1,
+          r: 4,
+          magnet: true,
+        },
+      },
+    },
+  },
+  items: [
+    { id: 'group1', group: 'group1' },
+    { id: 'group2', group: 'group2' },
+    { id: 'group3', group: 'group3' },
+    { id: 'group4', group: 'group4' },
+  ],
+}
diff --git a/sites/x6-sites/src/xflow/components/graph/setting.tsx b/sites/x6-sites/src/xflow/components/graph/setting.tsx
index e69de29bb2d..e068fbf36ce 100644
--- a/sites/x6-sites/src/xflow/components/graph/setting.tsx
+++ b/sites/x6-sites/src/xflow/components/graph/setting.tsx
@@ -0,0 +1,156 @@
+import { useGraphStore } from '@antv/xflow'
+import React, { useEffect, useCallback } from 'react'
+import { Card, Row, Col, Checkbox } from 'antd'
+
+import { ports } from './ports'
+
+export const Setting = ({ setOptions }) => {
+  const initData = useGraphStore((state) => state.initData)
+
+  const setInitData = useCallback(() => {
+    initData({
+      nodes: [
+        {
+          id: '1',
+          x: 32,
+          y: 32,
+          width: 100,
+          height: 40,
+          label: 'Hello',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+          ports: {
+            ...ports,
+          },
+        },
+        {
+          id: '2',
+          x: 160,
+          y: 180,
+          width: 60,
+          height: 60,
+          label: 'World',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+          ports: {
+            ...ports,
+          },
+        },
+        {
+          id: '3',
+          x: 300,
+          y: 180,
+          width: 100,
+          height: 40,
+          label: 'Text',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+          ports: {
+            ...ports,
+          },
+        },
+      ],
+      edges: [
+        {
+          source: {
+            cell: '1',
+            port: 'group2',
+          },
+          target: {
+            cell: '2',
+            port: 'group1',
+          },
+          attrs: {
+            line: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+            },
+          },
+        },
+      ],
+    })
+  }, [initData])
+
+  useEffect(() => {
+    setInitData()
+  }, [setInitData])
+
+  return (
+    <div>
+      <Card title="XFlowGraph 配置" bordered={false}>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({ ...prev, readonly: e.target.checked }))
+              }
+            >
+              readonly
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({ ...prev, zoomable: e.target.checked }))
+              }
+            >
+              zoomable
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({ ...prev, pannable: e.target.checked }))
+              }
+            >
+              pannable
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({ ...prev, embedable: e.target.checked }))
+              }
+            >
+              embedable
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({ ...prev, restrict: e.target.checked }))
+              }
+            >
+              restrict
+            </Checkbox>
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  )
+}
diff --git a/sites/x6-sites/src/xflow/components/history/header.tsx b/sites/x6-sites/src/xflow/components/history/header.tsx
new file mode 100644
index 00000000000..5087794aedc
--- /dev/null
+++ b/sites/x6-sites/src/xflow/components/history/header.tsx
@@ -0,0 +1,51 @@
+import { useGraphStore, useHistory } from '@antv/xflow'
+import React, { useEffect, useCallback } from 'react'
+import { Button, Space } from 'antd'
+
+export const HistoryButton = () => {
+  const { undo, redo, canUndo, canRedo } = useHistory()
+  const initData = useGraphStore((state) => state.initData)
+
+  const setInitData = useCallback(() => {
+    initData({
+      nodes: [
+        {
+          id: '1',
+          shape: 'rect',
+          x: 200,
+          y: 100,
+          width: 100,
+          height: 40,
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+          label: 'move',
+        },
+      ],
+      edges: [],
+    })
+  }, [initData])
+
+  useEffect(() => {
+    setInitData()
+  }, [setInitData])
+
+  return (
+    <div className="xflow-history-header">
+      <Space>
+        <Button onClick={undo} disabled={!canUndo}>
+          undo
+        </Button>
+        <Button onClick={redo} disabled={!canRedo}>
+          redo
+        </Button>
+      </Space>
+    </div>
+  )
+}
diff --git a/sites/x6-sites/src/xflow/components/history/index.tsx b/sites/x6-sites/src/xflow/components/history/index.tsx
index d481aa4a10c..4f0d4573c13 100644
--- a/sites/x6-sites/src/xflow/components/history/index.tsx
+++ b/sites/x6-sites/src/xflow/components/history/index.tsx
@@ -1,63 +1,8 @@
-import {
-  XFlow,
-  XFlowGraph,
-  Background,
-  useGraphStore,
-  useHistory,
-  History,
-} from '@antv/xflow'
-import React, { useEffect, useCallback } from 'react'
-import { Button, Space } from 'antd'
+import { XFlow, XFlowGraph, Background, History } from '@antv/xflow'
+import React from 'react'
+import { HistoryButton } from './header'
 import './index.less'
 
-const HistoryButton = () => {
-  const { undo, redo, canUndo, canRedo } = useHistory()
-  const initData = useGraphStore((state) => state.initData)
-
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          shape: 'rect',
-          x: 200,
-          y: 100,
-          width: 100,
-          height: 40,
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-          label: 'move',
-        },
-      ],
-      edges: [],
-    })
-  }, [initData])
-
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-
-  return (
-    <div className="xflow-history-header">
-      <Space>
-        <Button onClick={undo} disabled={!canUndo}>
-          undo
-        </Button>
-        <Button onClick={redo} disabled={!canRedo}>
-          redo
-        </Button>
-      </Space>
-    </div>
-  )
-}
-
 const Page = () => {
   return (
     <div className="xflow-history">
diff --git a/sites/x6-sites/src/xflow/components/minimap/header.tsx b/sites/x6-sites/src/xflow/components/minimap/header.tsx
new file mode 100644
index 00000000000..aa77377cbfa
--- /dev/null
+++ b/sites/x6-sites/src/xflow/components/minimap/header.tsx
@@ -0,0 +1,54 @@
+import { useGraphStore } from '@antv/xflow'
+import React, { useEffect, useCallback } from 'react'
+import { Segmented } from 'antd'
+
+export const SegmentedHeader = ({ setOptions }) => {
+  const initData = useGraphStore((state) => state.initData)
+  const setInitData = useCallback(() => {
+    initData({
+      nodes: [
+        {
+          id: '1',
+          shape: 'rect',
+          x: 200,
+          y: 100,
+          width: 100,
+          height: 40,
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+          label: 'move',
+        },
+      ],
+      edges: [],
+    })
+  }, [initData])
+
+  useEffect(() => {
+    setInitData()
+  }, [setInitData])
+
+  return (
+    <div className="xflow-history-header">
+      <Segmented
+        options={[
+          {
+            label: '简单视图',
+            value: true,
+          },
+          {
+            label: '详细视图',
+            value: false,
+          },
+        ]}
+        onChange={(value) => setOptions((prev) => ({ ...prev, simple: value }))}
+      />
+    </div>
+  )
+}
diff --git a/sites/x6-sites/src/xflow/components/minimap/index.tsx b/sites/x6-sites/src/xflow/components/minimap/index.tsx
index 5c38b2af67c..20be617f67c 100644
--- a/sites/x6-sites/src/xflow/components/minimap/index.tsx
+++ b/sites/x6-sites/src/xflow/components/minimap/index.tsx
@@ -1,64 +1,8 @@
-import {
-  XFlow,
-  XFlowGraph,
-  Background,
-  useGraphStore,
-  Minimap,
-} from '@antv/xflow'
-import React, { useEffect, useState, useCallback } from 'react'
-import { Segmented } from 'antd'
-import './index.less'
-
-const SegmentedHeader = ({ setOptions }) => {
-  const initData = useGraphStore((state) => state.initData)
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          shape: 'rect',
-          x: 200,
-          y: 100,
-          width: 100,
-          height: 40,
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-          label: 'move',
-        },
-      ],
-      edges: [],
-    })
-  }, [initData])
+import { XFlow, XFlowGraph, Background, Minimap } from '@antv/xflow'
+import React, { useState } from 'react'
+import { SegmentedHeader } from './header'
 
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-
-  return (
-    <div className="xflow-history-header">
-      <Segmented
-        options={[
-          {
-            label: '简单视图',
-            value: true,
-          },
-          {
-            label: '详细视图',
-            value: false,
-          },
-        ]}
-        onChange={(value) => setOptions((prev) => ({ ...prev, simple: value }))}
-      />
-    </div>
-  )
-}
+import './index.less'
 
 const Page = () => {
   const [options, setOptions] = useState({
diff --git a/sites/x6-sites/src/xflow/components/snapline/index.tsx b/sites/x6-sites/src/xflow/components/snapline/index.tsx
index c08f2c3acbb..3e7f2b08a32 100644
--- a/sites/x6-sites/src/xflow/components/snapline/index.tsx
+++ b/sites/x6-sites/src/xflow/components/snapline/index.tsx
@@ -1,13 +1,6 @@
-import {
-  XFlow,
-  XFlowGraph,
-  Background,
-  Snapline,
-  useGraphStore,
-  Transform,
-} from '@antv/xflow'
-import React, { useEffect, useState, useCallback } from 'react'
-import { Card, Row, Col, Slider, Checkbox, Badge } from 'antd'
+import { XFlow, XFlowGraph, Background, Snapline, Transform } from '@antv/xflow'
+import React, { useState } from 'react'
+import { Setting } from './setting'
 import './index.less'
 
 const Page = () => {
@@ -31,140 +24,3 @@ const Page = () => {
 }
 
 export default Page
-
-const Setting = ({ setOptions, options }) => {
-  const initData = useGraphStore((state) => state.initData)
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          x: 32,
-          y: 32,
-          width: 100,
-          height: 40,
-          label: 'Hello',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-        },
-        {
-          id: '2',
-          shape: 'circle',
-          x: 160,
-          y: 180,
-          width: 60,
-          height: 60,
-          label: 'World',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-            },
-          },
-        },
-        {
-          id: '3',
-          x: 200,
-          y: 100,
-          width: 100,
-          height: 40,
-          label: 'Drag Me',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-        },
-      ],
-      edges: [
-        {
-          source: '1',
-          target: '2',
-          attrs: {
-            line: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-            },
-          },
-        },
-      ],
-    })
-  }, [initData])
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-
-  return (
-    <div>
-      <Card title="Snapline 配置" bordered={false}>
-        <Row align="middle">
-          <Col span={6}>Tolerance</Col>
-          <Col span={2} offset={1}>
-            <Badge count={options.tolerance} showZero color="#faad14" />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Slider
-              min={1}
-              max={30}
-              step={1}
-              value={options.tolerance}
-              onChange={(value) =>
-                setOptions((prev) => ({ ...prev, tolerance: value }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({ ...prev, sharp: e.target.checked }))
-              }
-            >
-              Sharp Line
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({ ...prev, resizing: e.target.checked }))
-              }
-            >
-              Snap on Resizing
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  filter: e.target.checked ? ['circle'] : undefined,
-                }))
-              }
-            >
-              Add Filter(only circle)
-            </Checkbox>
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  )
-}
diff --git a/sites/x6-sites/src/xflow/components/snapline/setting.tsx b/sites/x6-sites/src/xflow/components/snapline/setting.tsx
new file mode 100644
index 00000000000..f4d8ec27c50
--- /dev/null
+++ b/sites/x6-sites/src/xflow/components/snapline/setting.tsx
@@ -0,0 +1,140 @@
+import { useGraphStore } from '@antv/xflow'
+import React, { useEffect, useCallback } from 'react'
+import { Card, Row, Col, Slider, Checkbox, Badge } from 'antd'
+
+export const Setting = ({ setOptions, options }) => {
+  const initData = useGraphStore((state) => state.initData)
+  const setInitData = useCallback(() => {
+    initData({
+      nodes: [
+        {
+          id: '1',
+          x: 32,
+          y: 32,
+          width: 100,
+          height: 40,
+          label: 'Hello',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+        },
+        {
+          id: '2',
+          shape: 'circle',
+          x: 160,
+          y: 180,
+          width: 60,
+          height: 60,
+          label: 'World',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+        {
+          id: '3',
+          x: 200,
+          y: 100,
+          width: 100,
+          height: 40,
+          label: 'Drag Me',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+        },
+      ],
+      edges: [
+        {
+          source: '1',
+          target: '2',
+          attrs: {
+            line: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+            },
+          },
+        },
+      ],
+    })
+  }, [initData])
+  useEffect(() => {
+    setInitData()
+  }, [setInitData])
+
+  return (
+    <div>
+      <Card title="Snapline 配置" bordered={false}>
+        <Row align="middle">
+          <Col span={6}>Tolerance</Col>
+          <Col span={2} offset={1}>
+            <Badge count={options.tolerance} showZero color="#faad14" />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Slider
+              min={1}
+              max={30}
+              step={1}
+              value={options.tolerance}
+              onChange={(value) =>
+                setOptions((prev) => ({ ...prev, tolerance: value }))
+              }
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({ ...prev, sharp: e.target.checked }))
+              }
+            >
+              Sharp Line
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({ ...prev, resizing: e.target.checked }))
+              }
+            >
+              Snap on Resizing
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  filter: e.target.checked ? ['circle'] : undefined,
+                }))
+              }
+            >
+              Add Filter(only circle)
+            </Checkbox>
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  )
+}
diff --git a/sites/x6-sites/src/xflow/components/transform/index.tsx b/sites/x6-sites/src/xflow/components/transform/index.tsx
index 0c7fff8fb68..fd4e6400d03 100644
--- a/sites/x6-sites/src/xflow/components/transform/index.tsx
+++ b/sites/x6-sites/src/xflow/components/transform/index.tsx
@@ -1,12 +1,6 @@
-import {
-  XFlow,
-  XFlowGraph,
-  Background,
-  useGraphStore,
-  Transform,
-} from '@antv/xflow'
-import React, { useEffect, useState, useCallback } from 'react'
-import { Card, Row, Col, Slider, Checkbox, Badge } from 'antd'
+import { XFlow, XFlowGraph, Background, Transform } from '@antv/xflow'
+import React, { useState } from 'react'
+import { Setting } from './setting'
 import './index.less'
 
 const Page = () => {
@@ -29,225 +23,3 @@ const Page = () => {
 }
 
 export default Page
-
-const Setting = ({ setOptions, options }) => {
-  const initData = useGraphStore((state) => state.initData)
-
-  const setInitData = useCallback(() => {
-    initData({
-      nodes: [
-        {
-          id: '1',
-          x: 32,
-          y: 32,
-          width: 100,
-          height: 40,
-          label: 'Hello',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-              rx: 6,
-              ry: 6,
-            },
-          },
-        },
-        {
-          id: '2',
-          shape: 'circle',
-          x: 160,
-          y: 180,
-          width: 60,
-          height: 60,
-          label: 'World',
-          attrs: {
-            body: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-              fill: '#fff',
-            },
-          },
-        },
-      ],
-      edges: [
-        {
-          source: '1',
-          target: '2',
-          attrs: {
-            line: {
-              stroke: '#8f8f8f',
-              strokeWidth: 1,
-            },
-          },
-        },
-      ],
-    })
-  }, [initData])
-
-  useEffect(() => {
-    setInitData()
-  }, [setInitData])
-
-  return (
-    <div>
-      <Card title="Transform 配置" bordered={false}>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  resizing: { ...prev.resizing, enabled: e.target.checked },
-                }))
-              }
-            >
-              resizing
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={6}>minWidth </Col>
-          <Col span={14}>
-            <Slider
-              min={1}
-              max={100}
-              step={1}
-              value={options?.resizing?.minWidth || 1}
-              onChange={(value) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  resizing: { ...prev.resizing, minWidth: value },
-                }))
-              }
-            />
-          </Col>
-          <Col span={2}>
-            <Badge
-              overflowCount={999}
-              count={options?.resizing?.minWidth || 1}
-              showZero
-              color="#faad14"
-            />
-          </Col>
-        </Row>
-
-        <Row align="middle">
-          <Col span={6}>maxWidth </Col>
-          <Col span={14}>
-            <Slider
-              min={100}
-              max={200}
-              step={1}
-              value={options?.resizing?.maxWidth || 1}
-              onChange={(value) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  resizing: { ...prev.resizing, maxWidth: value },
-                }))
-              }
-            />
-          </Col>
-          <Col span={2}>
-            <Badge
-              overflowCount={999}
-              count={options?.resizing?.maxWidth || 100}
-              showZero
-              color="#faad14"
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={6}>minHeight </Col>
-          <Col span={14}>
-            <Slider
-              min={1}
-              max={100}
-              step={1}
-              value={options?.resizing?.minHeight || 1}
-              onChange={(value) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  resizing: { ...prev.resizing, minHeight: value },
-                }))
-              }
-            />
-          </Col>
-          <Col span={2}>
-            <Badge
-              overflowCount={999}
-              count={options?.resizing?.minHeight || 1}
-              showZero
-              color="#faad14"
-            />
-          </Col>
-        </Row>
-
-        <Row align="middle">
-          <Col span={6}>maxHeight </Col>
-          <Col span={14}>
-            <Slider
-              min={1}
-              max={100}
-              step={1}
-              value={options?.resizing?.maxHeight || 1}
-              onChange={(value) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  resizing: { ...prev.resizing, maxHeight: value },
-                }))
-              }
-            />
-          </Col>
-          <Col span={2}>
-            <Badge
-              overflowCount={999}
-              count={options?.resizing?.maxHeight || 1}
-              showZero
-              color="#faad14"
-            />
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={24}>
-            <Checkbox
-              onChange={(e) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  rotating: { ...prev.rotating, enabled: e.target.checked },
-                }))
-              }
-            >
-              rotating
-            </Checkbox>
-          </Col>
-        </Row>
-        <Row align="middle">
-          <Col span={6}>grid </Col>
-          <Col span={14}>
-            <Slider
-              min={1}
-              max={30}
-              step={1}
-              value={options?.rotating?.grid || 15}
-              onChange={(value) =>
-                setOptions((prev) => ({
-                  ...prev,
-                  rotating: { ...prev.rotating, grid: value },
-                }))
-              }
-            />
-          </Col>
-          <Col span={2}>
-            <Badge
-              overflowCount={999}
-              count={options?.rotating?.grid || 15}
-              showZero
-              color="#faad14"
-            />
-          </Col>
-        </Row>
-      </Card>
-    </div>
-  )
-}
diff --git a/sites/x6-sites/src/xflow/components/transform/setting.tsx b/sites/x6-sites/src/xflow/components/transform/setting.tsx
new file mode 100644
index 00000000000..b135bd1e7f6
--- /dev/null
+++ b/sites/x6-sites/src/xflow/components/transform/setting.tsx
@@ -0,0 +1,225 @@
+import React, { useEffect, useCallback } from 'react'
+import { useGraphStore } from '@antv/xflow'
+import { Card, Row, Col, Slider, Checkbox, Badge } from 'antd'
+
+export const Setting = ({ setOptions, options }) => {
+  const initData = useGraphStore((state) => state.initData)
+
+  const setInitData = useCallback(() => {
+    initData({
+      nodes: [
+        {
+          id: '1',
+          x: 32,
+          y: 32,
+          width: 100,
+          height: 40,
+          label: 'Hello',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+              rx: 6,
+              ry: 6,
+            },
+          },
+        },
+        {
+          id: '2',
+          shape: 'circle',
+          x: 160,
+          y: 180,
+          width: 60,
+          height: 60,
+          label: 'World',
+          attrs: {
+            body: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+              fill: '#fff',
+            },
+          },
+        },
+      ],
+      edges: [
+        {
+          source: '1',
+          target: '2',
+          attrs: {
+            line: {
+              stroke: '#8f8f8f',
+              strokeWidth: 1,
+            },
+          },
+        },
+      ],
+    })
+  }, [initData])
+
+  useEffect(() => {
+    setInitData()
+  }, [setInitData])
+
+  return (
+    <div>
+      <Card title="Transform 配置" bordered={false}>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  resizing: { ...prev.resizing, enabled: e.target.checked },
+                }))
+              }
+            >
+              resizing
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={6}>minWidth </Col>
+          <Col span={14}>
+            <Slider
+              min={1}
+              max={100}
+              step={1}
+              value={options?.resizing?.minWidth || 1}
+              onChange={(value) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  resizing: { ...prev.resizing, minWidth: value },
+                }))
+              }
+            />
+          </Col>
+          <Col span={2}>
+            <Badge
+              overflowCount={999}
+              count={options?.resizing?.minWidth || 1}
+              showZero
+              color="#faad14"
+            />
+          </Col>
+        </Row>
+
+        <Row align="middle">
+          <Col span={6}>maxWidth </Col>
+          <Col span={14}>
+            <Slider
+              min={100}
+              max={200}
+              step={1}
+              value={options?.resizing?.maxWidth || 1}
+              onChange={(value) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  resizing: { ...prev.resizing, maxWidth: value },
+                }))
+              }
+            />
+          </Col>
+          <Col span={2}>
+            <Badge
+              overflowCount={999}
+              count={options?.resizing?.maxWidth || 100}
+              showZero
+              color="#faad14"
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={6}>minHeight </Col>
+          <Col span={14}>
+            <Slider
+              min={1}
+              max={100}
+              step={1}
+              value={options?.resizing?.minHeight || 1}
+              onChange={(value) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  resizing: { ...prev.resizing, minHeight: value },
+                }))
+              }
+            />
+          </Col>
+          <Col span={2}>
+            <Badge
+              overflowCount={999}
+              count={options?.resizing?.minHeight || 1}
+              showZero
+              color="#faad14"
+            />
+          </Col>
+        </Row>
+
+        <Row align="middle">
+          <Col span={6}>maxHeight </Col>
+          <Col span={14}>
+            <Slider
+              min={1}
+              max={100}
+              step={1}
+              value={options?.resizing?.maxHeight || 1}
+              onChange={(value) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  resizing: { ...prev.resizing, maxHeight: value },
+                }))
+              }
+            />
+          </Col>
+          <Col span={2}>
+            <Badge
+              overflowCount={999}
+              count={options?.resizing?.maxHeight || 1}
+              showZero
+              color="#faad14"
+            />
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={24}>
+            <Checkbox
+              onChange={(e) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  rotating: { ...prev.rotating, enabled: e.target.checked },
+                }))
+              }
+            >
+              rotating
+            </Checkbox>
+          </Col>
+        </Row>
+        <Row align="middle">
+          <Col span={6}>grid </Col>
+          <Col span={14}>
+            <Slider
+              min={1}
+              max={30}
+              step={1}
+              value={options?.rotating?.grid || 15}
+              onChange={(value) =>
+                setOptions((prev) => ({
+                  ...prev,
+                  rotating: { ...prev.rotating, grid: value },
+                }))
+              }
+            />
+          </Col>
+          <Col span={2}>
+            <Badge
+              overflowCount={999}
+              count={options?.rotating?.grid || 15}
+              showZero
+              color="#faad14"
+            />
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  )
+}