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 (
+
+ setOptions((prev) => ({ ...prev, simple: value }))}
+ />
+
+ )
+}
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 (
-
- setOptions((prev) => ({ ...prev, simple: value }))}
- />
-
- )
-}
+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 (
-
-
-
- Tolerance
-
-
-
-
-
-
-
- setOptions((prev) => ({ ...prev, tolerance: value }))
- }
- />
-
-
-
-
-
- setOptions((prev) => ({ ...prev, sharp: e.target.checked }))
- }
- >
- Sharp Line
-
-
-
-
-
-
- setOptions((prev) => ({ ...prev, resizing: e.target.checked }))
- }
- >
- Snap on Resizing
-
-
-
-
-
-
- setOptions((prev) => ({
- ...prev,
- filter: e.target.checked ? ['circle'] : undefined,
- }))
- }
- >
- Add Filter(only circle)
-
-
-
-
-
- )
-}
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 (
+
+
+
+ Tolerance
+
+
+
+
+
+
+
+ setOptions((prev) => ({ ...prev, tolerance: value }))
+ }
+ />
+
+
+
+
+
+ setOptions((prev) => ({ ...prev, sharp: e.target.checked }))
+ }
+ >
+ Sharp Line
+
+
+
+
+
+
+ setOptions((prev) => ({ ...prev, resizing: e.target.checked }))
+ }
+ >
+ Snap on Resizing
+
+
+
+
+
+
+ setOptions((prev) => ({
+ ...prev,
+ filter: e.target.checked ? ['circle'] : undefined,
+ }))
+ }
+ >
+ Add Filter(only circle)
+
+
+
+
+
+ )
+}
diff --git a/sites/x6-sites/src/xflow/components/transform/index.tsx b/sites/x6-sites/src/xflow/components/transform/index.tsx
index aedffe88127..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 (
-
-
-
-
-
- setOptions((prev) => ({
- ...prev,
- resizing: { ...prev.resizing, enabled: e.target.checked },
- }))
- }
- >
- resizing
-
-
-
-
- minWidth
-
-
- setOptions((prev) => ({
- ...prev,
- resizing: { ...prev.resizing, minWidth: value },
- }))
- }
- />
-
-
-
-
-
-
-
- maxWidth
-
-
- setOptions((prev) => ({
- ...prev,
- resizing: { ...prev.resizing, maxWidth: value },
- }))
- }
- />
-
-
-
-
-
-
- minHeight
-
-
- setOptions((prev) => ({
- ...prev,
- resizing: { ...prev.resizing, minHeight: value },
- }))
- }
- />
-
-
-
-
-
-
-
- maxHeight
-
-
- setOptions((prev) => ({
- ...prev,
- resizing: { ...prev.resizing, maxHeight: value },
- }))
- }
- />
-
-
-
-
-
-
-
-
- setOptions((prev) => ({
- ...prev,
- rotating: { ...prev.rotating, enabled: e.target.checked },
- }))
- }
- >
- rotating
-
-
-
-
- grid
-
-
- setOptions((prev) => ({
- ...prev,
- rotating: { ...prev.rotating, grid: value },
- }))
- }
- />
-
-
-
-
-
-
-
- )
-}
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 (
+
+
+
+
+
+ setOptions((prev) => ({
+ ...prev,
+ resizing: { ...prev.resizing, enabled: e.target.checked },
+ }))
+ }
+ >
+ resizing
+
+
+
+
+ minWidth
+
+
+ setOptions((prev) => ({
+ ...prev,
+ resizing: { ...prev.resizing, minWidth: value },
+ }))
+ }
+ />
+
+
+
+
+
+
+
+ maxWidth
+
+
+ setOptions((prev) => ({
+ ...prev,
+ resizing: { ...prev.resizing, maxWidth: value },
+ }))
+ }
+ />
+
+
+
+
+
+
+ minHeight
+
+
+ setOptions((prev) => ({
+ ...prev,
+ resizing: { ...prev.resizing, minHeight: value },
+ }))
+ }
+ />
+
+
+
+
+
+
+
+ maxHeight
+
+
+ setOptions((prev) => ({
+ ...prev,
+ resizing: { ...prev.resizing, maxHeight: value },
+ }))
+ }
+ />
+
+
+
+
+
+
+
+
+ setOptions((prev) => ({
+ ...prev,
+ rotating: { ...prev.rotating, enabled: e.target.checked },
+ }))
+ }
+ >
+ rotating
+
+
+
+
+ grid
+
+
+ setOptions((prev) => ({
+ ...prev,
+ rotating: { ...prev.rotating, grid: value },
+ }))
+ }
+ />
+
+
+
+
+
+
+
+ )
+}
diff --git a/sites/x6-sites/src/xflow/hooks/use-graph-event/index.tsx b/sites/x6-sites/src/xflow/hooks/use-graph-event/index.tsx
index fc1924c3743..ca9396f1fe1 100644
--- a/sites/x6-sites/src/xflow/hooks/use-graph-event/index.tsx
+++ b/sites/x6-sites/src/xflow/hooks/use-graph-event/index.tsx
@@ -1,64 +1,8 @@
-import {
- XFlow,
- XFlowGraph,
- Background,
- useGraphStore,
- useGraphEvent,
-} from '@antv/xflow'
-import React, { useCallback, useEffect } from 'react'
+import { XFlow, XFlowGraph, Background } from '@antv/xflow'
+import React from 'react'
+import { InitNode } from './init-node'
import './index.less'
-const InitNode = () => {
- const addNodes = useGraphStore((state) => state.addNodes)
- const updateNode = useGraphStore((state) => state.updateNode)
-
- useGraphEvent('node:click', ({ node }) => {
- const { id } = node
- const randomColor = Math.floor(Math.random() * 16777215).toString(16)
- const fillColor = `#${randomColor}`
- updateNode(id, {
- attrs: {
- body: {
- stroke: '#8f8f8f',
- strokeWidth: 1,
- fill: fillColor,
- rx: 6,
- ry: 6,
- },
- },
- })
- })
-
- const addNodeInit = useCallback(() => {
- addNodes([
- {
- id: '3',
- shape: 'rect',
- x: 200,
- y: 200,
- width: 100,
- height: 40,
- attrs: {
- body: {
- stroke: '#8f8f8f',
- strokeWidth: 1,
- fill: '#fff',
- rx: 6,
- ry: 6,
- },
- },
- label: 'added',
- },
- ])
- }, [addNodes])
-
- useEffect(() => {
- addNodeInit()
- }, [addNodeInit])
-
- return null
-}
-
const Page = () => {
return (
diff --git a/sites/x6-sites/src/xflow/hooks/use-graph-event/init-node.tsx b/sites/x6-sites/src/xflow/hooks/use-graph-event/init-node.tsx
new file mode 100644
index 00000000000..f95cc3e72da
--- /dev/null
+++ b/sites/x6-sites/src/xflow/hooks/use-graph-event/init-node.tsx
@@ -0,0 +1,53 @@
+import { useGraphStore, useGraphEvent } from '@antv/xflow'
+import { useCallback, useEffect } from 'react'
+
+export const InitNode = () => {
+ const addNodes = useGraphStore((state) => state.addNodes)
+ const updateNode = useGraphStore((state) => state.updateNode)
+
+ useGraphEvent('node:click', ({ node }) => {
+ const { id } = node
+ const randomColor = Math.floor(Math.random() * 16777215).toString(16)
+ const fillColor = `#${randomColor}`
+ updateNode(id, {
+ attrs: {
+ body: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ fill: fillColor,
+ rx: 6,
+ ry: 6,
+ },
+ },
+ })
+ })
+
+ const addNodeInit = useCallback(() => {
+ addNodes([
+ {
+ id: '3',
+ shape: 'rect',
+ x: 200,
+ y: 200,
+ width: 100,
+ height: 40,
+ attrs: {
+ body: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ fill: '#fff',
+ rx: 6,
+ ry: 6,
+ },
+ },
+ label: 'added',
+ },
+ ])
+ }, [addNodes])
+
+ useEffect(() => {
+ addNodeInit()
+ }, [addNodeInit])
+
+ return null
+}
diff --git a/sites/x6-sites/src/xflow/hooks/use-graph-store/index.tsx b/sites/x6-sites/src/xflow/hooks/use-graph-store/index.tsx
index 9bf908b4eed..0f4fc946dc8 100644
--- a/sites/x6-sites/src/xflow/hooks/use-graph-store/index.tsx
+++ b/sites/x6-sites/src/xflow/hooks/use-graph-store/index.tsx
@@ -1,48 +1,8 @@
-import { XFlow, XFlowGraph, Background, useGraphStore } from '@antv/xflow'
+import { XFlow, XFlowGraph, Background } from '@antv/xflow'
import React from 'react'
-import { Button, Space } from 'antd'
-import './index.less'
-
-const ToolsButton = () => {
- const addNodes = useGraphStore((state) => state.addNodes)
- const removeNodes = useGraphStore((state) => state.removeNodes)
-
- const onAddNodes = () => {
- addNodes([
- {
- id: '3',
- shape: 'rect',
- x: 200,
- y: 100,
- width: 100,
- height: 40,
- attrs: {
- body: {
- stroke: '#8f8f8f',
- strokeWidth: 1,
- fill: '#fff',
- rx: 6,
- ry: 6,
- },
- },
- label: 'added',
- },
- ])
- }
+import { ToolsButton } from './tools-button'
- const onRemoveNodes = () => {
- removeNodes(['3'])
- }
-
- return (
-
-
-
-
-
-
- )
-}
+import './index.less'
const Page = () => {
return (
diff --git a/sites/x6-sites/src/xflow/hooks/use-graph-store/tools-button.tsx b/sites/x6-sites/src/xflow/hooks/use-graph-store/tools-button.tsx
new file mode 100644
index 00000000000..bcfb63c22fc
--- /dev/null
+++ b/sites/x6-sites/src/xflow/hooks/use-graph-store/tools-button.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { useGraphStore } from '@antv/xflow'
+import { Button, Space } from 'antd'
+
+import './index.less'
+
+export const ToolsButton = () => {
+ const addNodes = useGraphStore((state) => state.addNodes)
+ const removeNodes = useGraphStore((state) => state.removeNodes)
+
+ const onAddNodes = () => {
+ addNodes([
+ {
+ id: '3',
+ shape: 'rect',
+ x: 200,
+ y: 100,
+ width: 100,
+ height: 40,
+ attrs: {
+ body: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ fill: '#fff',
+ rx: 6,
+ ry: 6,
+ },
+ },
+ label: 'added',
+ },
+ ])
+ }
+
+ const onRemoveNodes = () => {
+ removeNodes(['3'])
+ }
+
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/sites/x6-sites/src/xflow/hooks/use-key-board/header.tsx b/sites/x6-sites/src/xflow/hooks/use-key-board/header.tsx
new file mode 100644
index 00000000000..12dbd677302
--- /dev/null
+++ b/sites/x6-sites/src/xflow/hooks/use-key-board/header.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useCallback } from 'react'
+import { useGraphStore, useClipboard, useKeyboard } from '@antv/xflow'
+
+export const Header = () => {
+ const { copy, paste } = useClipboard()
+
+ const addNodes = useGraphStore((state) => state.addNodes)
+ const addEdges = useGraphStore((state) => state.addEdges)
+ const nodes = useGraphStore((state) => state.nodes)
+
+ const setAddNodes = useCallback(() => {
+ addNodes([
+ {
+ id: 'source',
+ x: 32,
+ y: 32,
+ width: 100,
+ height: 40,
+ label: 'Hello',
+ attrs: {
+ body: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ fill: '#fff',
+ rx: 6,
+ ry: 6,
+ },
+ },
+ },
+ {
+ id: 'target',
+ shape: 'circle',
+ x: 160,
+ y: 180,
+ width: 60,
+ height: 60,
+ label: 'World',
+ attrs: {
+ body: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ fill: '#fff',
+ },
+ },
+ },
+ ])
+ }, [addNodes])
+
+ const setAddEdges = useCallback(() => {
+ addEdges([
+ {
+ source: 'source',
+ target: 'target',
+ attrs: {
+ line: {
+ stroke: '#8f8f8f',
+ strokeWidth: 1,
+ },
+ },
+ },
+ ])
+ }, [addEdges])
+
+ const onCopy = () => {
+ const selected = nodes.filter((node) => node.selected)
+ const ids: string[] = selected.map((node) => node.id || '')
+ copy(ids)
+ }
+
+ useKeyboard('ctrl+c', () => {
+ onCopy()
+ })
+
+ useKeyboard('ctrl+v', () => {
+ paste()
+ })
+
+ useEffect(() => {
+ setAddNodes()
+ setAddEdges()
+ }, [setAddEdges, setAddNodes])
+
+ return null
+}
diff --git a/sites/x6-sites/src/xflow/hooks/use-key-board/index.tsx b/sites/x6-sites/src/xflow/hooks/use-key-board/index.tsx
index 447cfdd55b7..939816ccd5a 100644
--- a/sites/x6-sites/src/xflow/hooks/use-key-board/index.tsx
+++ b/sites/x6-sites/src/xflow/hooks/use-key-board/index.tsx
@@ -1,13 +1,7 @@
-import {
- XFlow,
- XFlowGraph,
- Background,
- useGraphStore,
- useClipboard,
- useKeyboard,
- Clipboard,
-} from '@antv/xflow'
-import React, { useEffect, useCallback } from 'react'
+import { XFlow, XFlowGraph, Background, Clipboard } from '@antv/xflow'
+import React from 'react'
+import { Header } from './header'
+
import './index.less'
const Page = () => {
@@ -23,86 +17,4 @@ const Page = () => {
)
}
-const Header = () => {
- const { copy, paste } = useClipboard()
-
- const addNodes = useGraphStore((state) => state.addNodes)
- const addEdges = useGraphStore((state) => state.addEdges)
- const nodes = useGraphStore((state) => state.nodes)
-
- const setAddNodes = useCallback(() => {
- addNodes([
- {
- id: 'source',
- x: 32,
- y: 32,
- width: 100,
- height: 40,
- label: 'Hello',
- attrs: {
- body: {
- stroke: '#8f8f8f',
- strokeWidth: 1,
- fill: '#fff',
- rx: 6,
- ry: 6,
- },
- },
- },
- {
- id: 'target',
- shape: 'circle',
- x: 160,
- y: 180,
- width: 60,
- height: 60,
- label: 'World',
- attrs: {
- body: {
- stroke: '#8f8f8f',
- strokeWidth: 1,
- fill: '#fff',
- },
- },
- },
- ])
- }, [addNodes])
-
- const setAddEdges = useCallback(() => {
- addEdges([
- {
- source: 'source',
- target: 'target',
- attrs: {
- line: {
- stroke: '#8f8f8f',
- strokeWidth: 1,
- },
- },
- },
- ])
- }, [addEdges])
-
- const onCopy = () => {
- const selected = nodes.filter((node) => node.selected)
- const ids: string[] = selected.map((node) => node.id || '')
- copy(ids)
- }
-
- useKeyboard('ctrl+c', () => {
- onCopy()
- })
-
- useKeyboard('ctrl+v', () => {
- paste()
- })
-
- useEffect(() => {
- setAddNodes()
- setAddEdges()
- }, [setAddEdges, setAddNodes])
-
- return null
-}
-
export default Page