fix: new selection select

Author: towersxu

docs/guide/extension/component-dnd-panel.md

@@ -1,22 +1,8 @@
 # 拖拽面板
 
-## 启用
+### 自定义拖拽面板内容
 
-```ts
-import LogicFlow from '@logicflow/core';
-import { DndPanel } from '@logicflow/extension';
-import '@logicflow/extension/lib/style/index.css'
-
-LogicFlow.use(DndPanel);
-```
-
-注册`DndPanel`组件后，Logic Flow 会在画布左上方创建一个拖拽面板，如下所示
-
-<example href="/examples/#/extension/components/dnd-panel"></example>
-
-## 自定义拖拽面板内容
-
-### lf.setPatternItems
+**lf.setPatternItems(patternItems)**
 
 设置拖拽面板组件内容
 
@@ -34,8 +20,6 @@ lf.setPatternItems(patternItems: PatternItem[])
 
 ```
 
-
-
 PatternItem：
 
 | 名称 | 类型 | 必选 | 默认值 | 描述 |
@@ -48,19 +32,27 @@ PatternItem：
 |className|string|非必须|无|额外传入可以拖拽项的class, 用于自定义拖拽项的样式|
 |callback|fn|非必须|无|用户鼠标按下拖拽项后触发的回调|
 
+### 使用示例
+
 ```js
+import LogicFlow from '@logicflow/core';
+import { DndPanel, SelectionSelect } from '@logicflow/extension';
+import '@logicflow/extension/lib/style/index.css'
+
 LogicFlow.use(DndPanel);
 LogicFlow.use(SelectionSelect);
 const lf = new LogicFlow({
   container: document.querySelector('#graph') as HTMLElement
 });
+
 lf.setPatternItems([
   {
-    text: '选区',
+    label: '选区',
     icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
     callback: () => {
-      lf.updateEditConfig({
-        stopMoveGraph: true,
+      lf.openSelectionSelect();
+      lf.once('selection:selected', () => {
+        lf.closeSelectionSelect();
       });
     }
   },
@@ -74,7 +66,7 @@ lf.setPatternItems([
     type: 'rect',
     label: '用户任务',
     icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg==',
-    cls: 'important-node'
+    className: 'important-node'
   },
   {
     type: 'rect',
@@ -89,10 +81,15 @@ lf.setPatternItems([
   },
   {
     type: 'circle',
+    text: '结束',
     label: '结束节点',
-    text: '结束'
     icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC',
   }
 ]);
 ```
 
+### 效果
+
+使用`DndPanel`组件，可以快捷的拖拽面板，如下所示
+
+<example href="/examples/#/extension/components/dnd-panel"></example>

docs/guide/extension/component-selection.md

@@ -1,29 +1,40 @@
 # 框选
 
-## 启用
-
 ```ts
 import LogicFlow from '@logicflow/core';
 import { SelectionSelect } from '@logicflow/extension';
 import '@logicflow/extension/lib/style/index.css'
 
 LogicFlow.use(SelectionSelect);
+
 ```
+### 开启
 
-## 开启
+```ts
+lf.openSelectionSelect();
+```
 
-引入组件后默认开启。
+### 关闭
 
 ```ts
-SelectionSelect.open();
+lf.closeSelectionSelect();
 ```
 
-> 使用多选组件时，需要在初始化 LogicFLow 时将编辑属性`stopMoveGraph`设置为`true`，或者使用[updateEditConfig](/api/logicFlowApi.html#updateeditconfig) API 来动态开启或关闭`stopMoveGraph`。
+<example href="/examples/#/extension/components/selection" :height="300" ></example>
+### 默认状态
 
-## 关闭
+默认是否开启框选功能，受到页面是否允许拖动画布影响。画布可以拖动与选区不能同时存在。
 
-```ts
-SelectionSelect.close();
+```js
+const lf = new LogicFlow({
+  container: document.querySelector('#app'),
+  stopMoveGraph: true,
+})
 ```
 
-<example href="/examples/#/extension/components/selection" :height="300" ></example>
+如果`stopMoveGraph`为true，也就是不允许拖动画布，那么默认则可以进行框选。
+
+如果`stopMoveGraph`不为true, 也就是允许拖动画布，那么默认则不可以进行框选。
+
+大多数情况下，我们期望允许拖动画布，当用户点击拖拽面板后才开启选区。请参考[拖拽面板插件](/guide/extension/component-dnd-panel.html)
+

examples/src/pages/extension/components/dnd-panel/index.tsx

@@ -25,8 +25,9 @@ export default function DndPanelExample() {
         label: '选区',
         icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
         callback: () => {
-          lf.updateEditConfig({
-            stopMoveGraph: true,
+          lf.openSelectionSelect();
+          lf.once('selection:selected', () => {
+            lf.closeSelectionSelect();
           });
         }
       },

examples/src/pages/extension/components/selection/index.tsx

@@ -61,9 +61,9 @@ export default function DndPanelExample() {
 
   function handleSwitch() {
     if (isOpened) {
-      SelectionSelect.close();
+      lf.closeSelectionSelect();
     } else {
-      SelectionSelect.open();
+      lf.openSelectionSelect();
     }
     setIsOpened(!isOpened);
   }

packages/core/src/LogicFlow.tsx

@@ -117,7 +117,10 @@ export default class LogicFlow {
   off(evt: string, callback: CallbackType) {
     this.eventCenter.off(evt, callback);
   }
-  emit(evt: string, arg: Record<string, string | number | object>) {
+  once(evt: string, callback: CallbackType) {
+    this.eventCenter.once(evt, callback);
+  }
+  emit(evt: string, arg: any) {
     this.eventCenter.emit(evt, arg);
   }
 

packages/extension/examples/bpmn/index.js

@@ -5,6 +5,7 @@ window.onload = function () {
     container: document.querySelector('#app'),
     edgeTextDraggable: true,
     nodeTextDraggable: true,
+    // stopMoveGraph: true,
     metaKeyMultipleSelected: true,
     grid: {
       type: 'dot',
@@ -44,13 +45,15 @@ window.onload = function () {
   //     },
   //   ]
   // })
+  // lf.closeSelectionSelect();
   lf.setPatternItems([
     {
       label: '选区',
       icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
       callback: () => {
-        lf.updateEditConfig({
-          stopMoveGraph: true,
+        lf.openSelectionSelect();
+        lf.once('selection:selected', () => {
+          lf.closeSelectionSelect();
         });
       }
     },
@@ -106,12 +109,6 @@ window.onload = function () {
   //     stopMoveGraph: true,
   //   });
   // });
-
-  lf.on('selection:selected', () => {
-    lf.updateEditConfig({
-      stopMoveGraph: false,
-    });
-  });
   // document.querySelector('#start-node-pattern').addEventListener('mousedown', () => {
   //   lf.dnd.startDrag({
   //     type: 'bpmn:startEvent',

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

@@ -1,57 +1,77 @@
-import { Extension } from '@logicflow/core';
+import LogicFlow, { Extension } from '@logicflow/core';
 
 interface SelectionSelectPlugin extends Extension {
   open: () => void;
   close: () => void;
   [x: string]: any;
 }
 
-const SelectionSelect: SelectionSelectPlugin = {
-  pluginName: 'selection-select',
-  __domContainer: null,
-  wrapper: null,
-  lf: null,
+class SelectionSelect {
+  __domContainer: HTMLElement;
+  wrapper: HTMLElement;
+  lf: LogicFlow;
   startPoint: {
-    x: 0,
-    y: 0,
-  },
+    x: number,
+    y: number,
+  };
   endPoint: {
-    x: 0,
-    y: 0,
-  },
-  __disabled: false,
-  install() {},
+    x: number,
+    y: number,
+  };
+  __disabled = false;
+  isDefalutStopMoveGraph = false;
+  static pluginName = 'selection-select';
+  constructor({ lf }) {
+    this.lf = lf;
+    lf.openSelectionSelect = () => {
+      const { stopMoveGraph } = lf.getEditConfig();
+      if (!stopMoveGraph) {
+        this.isDefalutStopMoveGraph = false;
+        lf.updateEditConfig({
+          stopMoveGraph: true,
+        });
+      }
+      this.open();
+    };
+    lf.closeSelectionSelect = () => {
+      if (!this.isDefalutStopMoveGraph) {
+        lf.updateEditConfig({
+          stopMoveGraph: false,
+        });
+      }
+      this.close();
+    };
+  }
   render(lf, domContainer) {
-    SelectionSelect.__domContainer = domContainer;
-    SelectionSelect.lf = lf;
+    this.__domContainer = domContainer;
     lf.on('blank:mousedown', ({ e }) => {
       const config = lf.getEditConfig();
       // 鼠标控制滚动移动画布的时候，不能选区。
-      if (!config.stopMoveGraph || SelectionSelect.__disabled) {
+      if (!config.stopMoveGraph || this.__disabled) {
         return;
       }
       const {
         domOverlayPosition: { x, y },
       } = lf.getPointByClient(e.clientX, e.clientY);
-      SelectionSelect.startPoint = { x, y };
-      SelectionSelect.endPoint = { x, y };
+      this.startPoint = { x, y };
+      this.endPoint = { x, y };
       const wrapper = document.createElement('div');
       wrapper.className = 'lf-selection-select';
-      wrapper.style.top = `${SelectionSelect.startPoint.y}px`;
-      wrapper.style.left = `${SelectionSelect.startPoint.x}px`;
+      wrapper.style.top = `${this.startPoint.y}px`;
+      wrapper.style.left = `${this.startPoint.x}px`;
       domContainer.appendChild(wrapper);
-      SelectionSelect.wrapper = wrapper;
-      document.addEventListener('mousemove', SelectionSelect.__draw);
-      document.addEventListener('mouseup', SelectionSelect.__drawOff);
+      this.wrapper = wrapper;
+      document.addEventListener('mousemove', this.__draw);
+      document.addEventListener('mouseup', this.__drawOff);
     });
-  },
-  __draw(ev) {
+  }
+  __draw = (ev) => {
     const {
       domOverlayPosition: { x: x1, y: y1 },
-    } = SelectionSelect.lf.getPointByClient(ev.clientX, ev.clientY);
-    SelectionSelect.endPoint = { x: x1, y: y1 };
-    const { x, y } = SelectionSelect.startPoint;
-    const { style } = SelectionSelect.wrapper;
+    } = this.lf.getPointByClient(ev.clientX, ev.clientY);
+    this.endPoint = { x: x1, y: y1 };
+    const { x, y } = this.startPoint;
+    const { style } = this.wrapper;
     let left = x;
     let top = y;
     let width = x1 - x;
@@ -68,27 +88,27 @@ const SelectionSelect: SelectionSelectPlugin = {
     style.top = `${top}px`;
     style.width = `${width}px`;
     style.height = `${height}px`;
-  },
-  __drawOff() {
-    document.removeEventListener('mousemove', SelectionSelect.__draw);
-    document.removeEventListener('mouseup', SelectionSelect.__drawOff);
-    SelectionSelect.__domContainer.removeChild(SelectionSelect.wrapper);
-    const { x, y } = SelectionSelect.startPoint;
-    const { x: x1, y: y1 } = SelectionSelect.endPoint;
+  };
+  __drawOff = () => {
+    document.removeEventListener('mousemove', this.__draw);
+    document.removeEventListener('mouseup', this.__drawOff);
+    this.__domContainer.removeChild(this.wrapper);
+    const { x, y } = this.startPoint;
+    const { x: x1, y: y1 } = this.endPoint;
     const lt = [Math.min(x, x1), Math.min(y, y1)];
     const rt = [Math.max(x, x1), Math.max(y, y1)];
-    const elements = SelectionSelect.lf.getAreaElement(lt, rt);
+    const elements = this.lf.getAreaElement(lt, rt);
     elements.forEach((element) => {
-      SelectionSelect.lf.select(element.id, true);
+      this.lf.select(element.id, true);
     });
-    SelectionSelect.lf.emit('selection:selected', elements);
-  },
+    this.lf.emit('selection:selected', elements);
+  };
   open() {
-    SelectionSelect.__disabled = false;
-  },
+    this.__disabled = false;
+  }
   close() {
-    SelectionSelect.__disabled = true;
-  },
-};
+    this.__disabled = true;
+  }
+}
 
 export { SelectionSelect };