@logicflow/extension 2.0.0-beta.0 → 2.0.0-beta.10

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()