@logicflow/extension 2.0.0-beta.1 → 2.0.0-beta.11

package/src/components/menu/index.ts

@@ -1,5 +1,9 @@
 import LogicFlow from '@logicflow/core'
 
+import GraphData = LogicFlow.GraphData
+import NodeData = LogicFlow.NodeData
+import EdgeData = LogicFlow.EdgeData
+
 type SetType = 'add' | 'reset'
 
 export type MenuItem = {
@@ -25,7 +29,7 @@ class Menu {
   private __container?: HTMLElement
   private __menuDOM?: HTMLElement
   private menuTypeMap?: Map<string, MenuItem[]>
-  private __currentData: any
+  private __currentData: EdgeData | NodeData | GraphData | null = null
   static pluginName = 'menu'
 
   constructor({ lf }) {
@@ -107,7 +111,7 @@ class Menu {
     this.menuTypeMap?.set(DefaultSelectionMenuKey, DefaultSelectionMenu)
   }
 
-  render(lf, container) {
+  render(lf: LogicFlow, container: HTMLElement) {
     if (lf.options.isSilentMode) return
     this.__container = container
     this.__currentData = null // 当前展示的菜单所属元素的model数据
@@ -147,7 +151,7 @@ class Menu {
       )
     }
     // 通过事件控制菜单的显示和隐藏
-    this.lf.on('node:contextmenu', ({ data, position, e }: any) => {
+    this.lf.on('node:contextmenu', ({ data, position, e }) => {
       const {
         domOverlayPosition: { x, y },
       } = position
@@ -157,14 +161,14 @@ class Menu {
       if (!model) return
       let menuList: any = []
       const typeMenus = this.menuTypeMap?.get(model.type)
-      // 如果单个节点自定义了节点，以单个节点自定义为准
+      // 1.如果单个节点自定义了菜单，以单个节点自定义为准
       if (model && model.menu && Array.isArray(model.menu)) {
         menuList = model.menu
       } else if (typeMenus) {
-        // 如果定义当前节点类型的元素
+        // 2.如果当前节点类型定义了菜单，再取该配置
         menuList = typeMenus
       } else {
-        // 最后取全局默认
+        // 3.最后取全局默认
         menuList = this.menuTypeMap?.get(DefaultNodeMenuKey)
       }
       this.__currentData = data
@@ -175,7 +179,7 @@ class Menu {
         clientY: e.clientY,
       })
     })
-    this.lf.on('edge:contextmenu', ({ data, position, e }: any) => {
+    this.lf.on('edge:contextmenu', ({ data, position, e }) => {
       const {
         domOverlayPosition: { x, y },
       } = position
@@ -183,15 +187,13 @@ class Menu {
       const model = this.lf.graphModel.getEdgeModelById(id)
       if (!model) return
       let menuList: any = []
-      const typeMenus = this.menuTypeMap?.get(model.type) ?? []
-      // 如果单个节点自定义了边
+      const typeMenus = this.menuTypeMap?.get(model.type)
+      // 菜单优先级： model.menu > typeMenus > defaultEdgeMenu，注释同上节点
       if (model && model.menu && Array.isArray(model.menu)) {
         menuList = model.menu
       } else if (typeMenus) {
-        // 如果定义当前边类型的元素
         menuList = typeMenus
       } else {
-        // 最后取全局默认
         menuList = this.menuTypeMap?.get(DefaultEdgeMenuKey) ?? []
       }
       this.__currentData = data
@@ -202,14 +204,14 @@ class Menu {
         clientY: e.clientY,
       })
     })
-    this.lf.on('blank:contextmenu', ({ position }: any) => {
+    this.lf.on('blank:contextmenu', ({ position }) => {
       const menuList = this.menuTypeMap?.get(DefaultGraphMenuKey) ?? []
       const {
         domOverlayPosition: { x, y },
       } = position
       this.showMenu(x, y, menuList)
     })
-    this.lf.on('selection:contextmenu', ({ data, position }: any) => {
+    this.lf.on('selection:contextmenu', ({ data, position }) => {
       const menuList = this.menuTypeMap?.get(DefaultSelectionMenuKey)
       const {
         domOverlayPosition: { x, y },
@@ -217,6 +219,7 @@ class Menu {
       this.__currentData = data
       this.showMenu(x, y, menuList)
     })
+
     this.lf.on('node:mousedown', () => {
       this.__menuDOM!.style.display = 'none'
     })

package/src/components/mini-map/index.ts

@@ -177,11 +177,11 @@ export class MiniMap {
    */
   private disabledPlugins = ['miniMap', 'control', 'selectionSelect']
 
-  constructor({ lf, LogicFlow, options }: LogicFlow.ExtensionProps) {
+  constructor({ lf, LogicFlow, options }: LogicFlow.IExtensionProps) {
     this.lf = lf
     this.LFCtor = LogicFlow
-    if (options && options.MiniMap) {
-      this.setOption(options.MiniMap as MiniMapOption)
+    if (options) {
+      this.setOption(options as MiniMapOption)
     }
     this.viewPortWidth = lf.graphModel.width
     this.viewPortHeight = lf.graphModel.height

package/src/components/selection-select/index.ts

@@ -11,11 +11,15 @@ export class SelectionSelect {
   private startPoint?: Position
   private endPoint?: Position
   private disabled = true
-  private isDefaultStopMoveGraph = false
+  private isDefaultStopMoveGraph:
+    | boolean
+    | 'horizontal'
+    | 'vertical'
+    | [number, number, number, number] = false
   private isWholeNode = true
   private isWholeEdge = true
 
-  constructor({ lf }: LogicFlow.ExtensionProps) {
+  constructor({ lf }: LogicFlow.IExtensionProps) {
     this.lf = lf
     // 初始化isDefaultStopMoveGraph取值
     const { stopMoveGraph } = lf.getEditConfig()
@@ -145,10 +149,10 @@ export class SelectionSelect {
       const { x: x1, y: y1 } = this.endPoint
       // 返回框选范围，左上角和右下角的坐标
       const lt: PointTuple = [Math.min(x, x1), Math.min(y, y1)]
-      const rt: PointTuple = [Math.max(x, x1), Math.max(y, y1)]
+      const rb: PointTuple = [Math.max(x, x1), Math.max(y, y1)]
       this.lf.emit('selection:selected-area', {
         topLeft: lt,
-        bottomRight: rt,
+        bottomRight: rb,
       })
       // 选区太小的情况就忽略
       if (Math.abs(x1 - x) < 10 && Math.abs(y1 - y) < 10) {
@@ -156,19 +160,23 @@ export class SelectionSelect {
       }
       const elements = this.lf.graphModel.getAreaElement(
         lt,
-        rt,
+        rb,
         this.isWholeEdge,
         this.isWholeNode,
         true,
       )
-      const { group } = this.lf.graphModel
+      const { dynamicGroup } = this.lf.graphModel
       elements.forEach((element) => {
         // 如果节点属于分组，则不不选中节点
-        if (!group || !group.getNodeGroup(element.id)) {
+        if (!dynamicGroup || !dynamicGroup.getGroupByNodeId(element.id)) {
           this.lf.selectElementById(element.id, true)
         }
       })
-      this.lf.emit('selection:selected', elements)
+      this.lf.emit('selection:selected', {
+        elements,
+        leftTopPoint: lt,
+        rightBottomPoint: rb,
+      })
     }
   }