feat: feature-examples 中增加 SelectionSelect demo

Author: ChangeSuger

examples/feature-examples/.umirc.ts

@@ -87,6 +87,11 @@ export default defineConfig({
           name: 'Group 插件',
           component: './extensions/group',
         },
+        {
+          path: '/extension/selection-select',
+          name: 'SelectionSelect 插件',
+          component: './extensions/selection-select',
+        },
       ],
     },
   ],

examples/feature-examples/src/pages/extensions/selection-select/index.less

@@ -0,0 +1,5 @@
+.viewport {
+  position: relative;
+  height: 80vh;
+  overflow: hidden;
+}

examples/feature-examples/src/pages/extensions/selection-select/index.tsx

@@ -0,0 +1,135 @@
+import LogicFlow from '@logicflow/core'
+import { SelectionSelect } from '@logicflow/extension'
+
+import { Card, Button } from 'antd'
+import { useEffect, useRef } from 'react'
+import styles from './index.less'
+
+import '@logicflow/core/es/index.css'
+import '@logicflow/extension/es/index.css'
+
+const config: Partial<LogicFlow.Options> = {
+  isSilentMode: false,
+  stopScrollGraph: true,
+  stopZoomGraph: true,
+  style: {
+    rect: {
+      rx: 5,
+      ry: 5,
+      strokeWidth: 2,
+    },
+    circle: {
+      fill: '#f5f5f5',
+      stroke: '#666',
+    },
+    ellipse: {
+      fill: '#dae8fc',
+      stroke: '#6c8ebf',
+    },
+    polygon: {
+      fill: '#d5e8d4',
+      stroke: '#82b366',
+    },
+    diamond: {
+      fill: '#ffe6cc',
+      stroke: '#d79b00',
+    },
+    text: {
+      color: '#b85450',
+      fontSize: 12,
+    },
+  },
+}
+
+const data = {
+  nodes: [
+    {
+      id: '1',
+      type: 'rect',
+      x: 150,
+      y: 100,
+      text: '矩形',
+    },
+    {
+      id: '2',
+      type: 'circle',
+      x: 350,
+      y: 100,
+      text: '圆形',
+    },
+    {
+      id: '3',
+      type: 'ellipse',
+      x: 550,
+      y: 100,
+      text: '椭圆',
+    },
+    {
+      id: '4',
+      type: 'polygon',
+      x: 150,
+      y: 250,
+      text: '多边形',
+    },
+    {
+      id: '5',
+      type: 'diamond',
+      x: 350,
+      y: 250,
+      text: '菱形',
+    },
+    {
+      id: '6',
+      type: 'text',
+      x: 550,
+      y: 250,
+      text: '纯文本节点',
+    },
+    {
+      id: '7',
+      type: 'html',
+      x: 150,
+      y: 400,
+      text: 'html节点',
+    },
+  ],
+}
+
+export default function SelectionSelectExtension() {
+  const lfRef = useRef<LogicFlow>()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!lfRef.current) {
+      const lf = new LogicFlow({
+        ...config,
+        container: containerRef.current as HTMLElement,
+        grid: {
+          size: 20,
+        },
+        plugins: [SelectionSelect],
+      })
+
+      lf.render(data)
+      lfRef.current = lf
+    }
+  }, [])
+
+  const handleOpenSelectionSelect = () => {
+    if (lfRef.current) {
+      const lf = lfRef.current
+      const selectionSelect = lf.extension.selectionSelect as SelectionSelect
+      selectionSelect.openSelectionSelect()
+      lf.once('selection:selected', () => {
+        selectionSelect.closeSelectionSelect()
+      })
+    }
+  }
+
+  return (
+    <Card title="LogicFlow Extension - SelectionSelect">
+      <Button onClick={handleOpenSelectionSelect}>开启选区</Button>
+      <div ref={containerRef} id="graph" className={styles.viewport}></div>
+    </Card>
+  )
+}