feat(extension): 独占模式支持单击取消全选 & 还原dynamic-group插件demo的代码

Author: DymoneLewis

examples/feature-examples/src/pages/extensions/dynamic-group/index.tsx

@@ -5,7 +5,6 @@ import {
   ShapeItem,
   Group,
   SelectionSelect,
-  DynamicGroup,
 } from '@logicflow/extension'
 
 import { Button, Card, Divider, Flex } from 'antd'
@@ -24,7 +23,7 @@ const config: Partial<LogicFlow.Options> = {
   keyboard: {
     enabled: true,
   },
-  plugins: [Group, Control, DndPanel, SelectionSelect, DynamicGroup],
+  plugins: [Group, Control, DndPanel, SelectionSelect],
 }
 
 const customDndConfig: ShapeItem[] = [
@@ -121,23 +120,16 @@ export default function BPMNExtension() {
           // },
           {
             id: 'group_1',
-            type: 'dynamic-group',
+            type: 'sub-process',
             x: 300,
             y: 120,
-            text: 'dynamic-group-1',
+            // children: ["rect_3"],
+            text: 'sub-process-1',
+            properties: {
+              isFolded: true,
+            },
           },
           // {
-          //   id: 'group_1',
-          //   type: 'sub-process',
-          //   x: 300,
-          //   y: 120,
-          //   // children: ["rect_3"],
-          //   text: 'sub-process-1',
-          //   properties: {
-          //     isFolded: true,
-          //   },
-          // },
-          // {
           //   id: "group_2",
           //   type: "sub-process",
           //   x: 800,
@@ -162,10 +154,7 @@ export default function BPMNExtension() {
   const rerender = () => {}
 
   return (
-    <Card
-      title="LogicFlow Extension - DynamicGroup"
-      className="control-container"
-    >
+    <Card title="LogicFlow Extension - DndPanel" className="control-container">
       <Flex wrap="wrap" gap="small">
         <Button type="primary" key="getData" onClick={getGraphData}>
           获取数据

packages/extension/src/components/selection-select/index.ts

@@ -62,6 +62,7 @@ export class SelectionSelect {
    * 清理选区状态
    */
   private cleanupSelectionState() {
+    console.log('cleanupSelectionState')
     // 清理当前的选区状态
     if (this.wrapper) {
       this.wrapper.oncontextmenu = null
@@ -72,6 +73,7 @@ export class SelectionSelect {
     }
     this.startPoint = undefined
     this.endPoint = undefined
+    this.mouseDownInfo = null
 
     // 移除事件监听
     document.removeEventListener('mousemove', this.draw)
@@ -134,9 +136,15 @@ export class SelectionSelect {
     // 禁用右键框选
     const isRightClick = e.button === 2
     if (isRightClick) return
-
     // 清理之前可能存在的选区状态
     this.cleanupSelectionState()
+    // 记录鼠标按下时的位置和时间
+    this.mouseDownInfo = {
+      x: e.clientX,
+      y: e.clientY,
+      time: Date.now(),
+    }
+    console.log('handleMouseDown', this.mouseDownInfo)
 
     // 记录原始设置并临时禁止画布移动
     this.originalStopMoveGraph = this.lf.getEditConfig().stopMoveGraph!
@@ -165,22 +173,6 @@ export class SelectionSelect {
     document.addEventListener('mouseup', this.drawOff)
   }
 
-  onToolContainerMouseUp = (e: MouseEvent) => {
-    if (this.mouseDownInfo) {
-      const { x, y, time } = this.mouseDownInfo
-      const now = Date.now()
-      // 用 mouseDown 和 mouseUp 的位置偏移及时间间隔来判断是否是点击事件
-      const isClickEvent =
-        Math.abs(e.clientX - x) < 10 &&
-        Math.abs(e.clientY - y) < 10 &&
-        now - time < 100
-      if (isClickEvent) {
-        this.lf.clearSelectElements()
-      }
-      this.mouseDownInfo = null
-    }
-  }
-
   /**
    * 设置选中的灵敏度
    * @param isWholeEdge 是否要边的起点终点都在选区范围才算选中。默认true
@@ -259,6 +251,23 @@ export class SelectionSelect {
     }
   }
   private drawOff = (e: MouseEvent) => {
+    // 处理鼠标抬起事件
+    // 首先判断是否是点击，如果是，则清空框选
+    console.log('drawOff', e, this.mouseDownInfo)
+    if (this.mouseDownInfo) {
+      const { x, y, time } = this.mouseDownInfo
+      const isClick =
+        Math.abs(e.clientX - x) < 5 &&
+        Math.abs(e.clientY - y) < 5 &&
+        Date.now() - time < 200
+      console.log('isClick', isClick)
+      if (isClick) {
+        this.lf.clearSelectElements()
+        this.cleanupSelectionState()
+        return
+      }
+    }
+
     const curStartPoint = cloneDeep(this.startPoint)
     const curEndPoint = cloneDeep(this.endPoint)
     document.removeEventListener('mousemove', this.draw)

packages/extension/src/style/raw.ts

@@ -193,6 +193,10 @@ export const content = `@import url('medium-editor/dist/css/medium-editor.min.cs
   background: #eaedf2;
   border: 1px solid #93a3b4;
 }
+.lf-mini-map .lf-graph {
+  width: 100% !important;
+  height: 100% !important;
+}
 .lf-mini-map-graph {
   position: relative;
   overflow: hidden;