feat(GraphModel, MiniMap): 新增MiniMap组件跟随的当前容器一起缩放

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

@@ -41,6 +41,7 @@ const config: Partial<LogicFlow.Options> = {
   },
   multipleSelectKey: 'shift',
   disabledTools: ['multipleSelect'],
+  allowResize: true,
 }
 
 const data = {
@@ -83,8 +84,8 @@ const data = {
     {
       id: '6',
       type: 'node-selection',
-      x: 700,
-      y: 350,
+      x: 0,
+      y: 0,
       properties: {
         node_selection_ids: ['2', '3'],
         labelText: '方案1',

packages/core/src/LogicFlow.tsx

@@ -1369,6 +1369,11 @@ export class LogicFlow {
       this.components.push(extensionIns.render.bind(extensionIns))
     this.extension[pluginName] = extensionIns
   }
+
+  /** 销毁当前实例 */
+  destroy() {
+    this.graphModel.destroy()
+  }
 }
 
 // Option

packages/core/src/event/eventArgs.ts

@@ -414,6 +414,16 @@ interface CommonEventArgs {
      */
     data: GraphData
   }
+  /**
+   * 画布容器大小发生变化触发，为了性能考虑对事件做了防抖处理，间隔为16ms
+   */
+  'graph:resize': {
+    /**
+     * 更新后的画布数据
+     */
+    target: HTMLElement
+    contentRect: DOMRectReadOnly
+  }
 }
 
 type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> =

packages/core/src/event/eventEmitter.ts

@@ -21,6 +21,32 @@ export type EventCallback<T extends string = string> = (
 
 const WILDCARD = '*'
 
+interface OnMethod {
+  <T extends keyof EventArgs>(
+    evt: T,
+    callback: EventCallback<T>,
+    once?: boolean,
+  ): ClearMethod
+  <T extends string>(
+    evt: T,
+    callback: EventCallback<T>,
+    once?: boolean,
+  ): ClearMethod
+  (evt: string, callback: EventCallback, once?: boolean): ClearMethod
+}
+
+interface OnceMethod {
+  <T extends keyof EventArgs>(evt: T, callback: EventCallback<T>): ClearMethod
+  <T extends string>(evt: T, callback: EventCallback<T>): ClearMethod
+  (evt: string, callback: EventCallback): ClearMethod
+}
+
+interface ClearMethod {
+  (): void
+  on: OnMethod
+  once: OnceMethod
+}
+
 /* event-emitter */
 export default class EventEmitter {
   private _events: EventsType = {}
@@ -31,13 +57,11 @@ export default class EventEmitter {
    * @param callback 回调函数
    * @param once 是否只监听一次
    */
-  on<T extends keyof EventArgs>(
-    evt: T,
-    callback: EventCallback<T>,
+  on: OnMethod = (
+    evt: string,
+    callback: EventCallback,
     once?: boolean,
-  ): void
-  on<T extends string>(evt: T, callback: EventCallback<T>, once?: boolean): void
-  on(evt: string, callback: EventCallback, once?: boolean) {
+  ): ClearMethod => {
     evt?.split(',').forEach((evKey) => {
       evKey = evKey.trim()
       if (!this._events[evKey]) {
@@ -48,23 +72,30 @@ export default class EventEmitter {
         once: !!once,
       })
     })
+
+    return createClearMethod(this, () => {
+      if (evt) {
+        this.off(evt, callback)
+      }
+    })
   }
 
   /**
    * 监听一个事件一次
    * @param evt 事件名称
    * @param callback 回调函数
    */
-  once<T extends keyof EventArgs>(
-    evt: T,
-    callback: (args: EventArgs[T]) => void,
-  ): void
-  once<T extends string>(evt: T, callback: EventCallback<T>): void
-  once(evt: string, callback: EventCallback) {
+  once: OnceMethod = (evt: string, callback: EventCallback): ClearMethod => {
     evt?.split(',').forEach((evKey) => {
       evKey = evKey.trim()
       this.on(evKey, callback, true)
     })
+
+    return createClearMethod(this, () => {
+      if (evt) {
+        this.off(evt, callback)
+      }
+    })
   }
 
   /**
@@ -149,4 +180,29 @@ export default class EventEmitter {
   }
 }
 
+const createClearMethod = (
+  ctx: EventEmitter,
+  clear: () => void,
+): ClearMethod => {
+  const preClear = clear as ClearMethod
+
+  preClear.on = (evt: string, callback: EventCallback, once?: boolean) => {
+    const clear = ctx.on(evt, callback, once)
+    return createClearMethod(ctx, () => {
+      preClear()
+      clear()
+    })
+  }
+
+  preClear.once = (evt: string, callback: EventCallback) => {
+    const clear = ctx.once(evt, callback)
+    return createClearMethod(ctx, () => {
+      preClear()
+      clear()
+    })
+  }
+
+  return preClear
+}
+
 export { EventEmitter, EventArgs }

packages/core/src/model/GraphModel.ts

@@ -1,4 +1,4 @@
-import { find, forEach, map, merge, isBoolean } from 'lodash-es'
+import { find, forEach, map, merge, isBoolean, debounce } from 'lodash-es'
 import { action, computed, observable } from 'mobx'
 import {
   BaseEdgeModel,
@@ -127,6 +127,8 @@ export class GraphModel {
   // 用户自定义属性
   [propName: string]: any
 
+  private waitCleanEffects: (() => void)[] = []
+
   constructor(options: LFOptions.Common) {
     const {
       container,
@@ -153,6 +155,27 @@ export class GraphModel {
     this.width = options.width || this.rootEl.getBoundingClientRect().width
     this.height = options.height || this.rootEl.getBoundingClientRect().height
 
+    const resizeObserver = new ResizeObserver(
+      debounce(
+        ((entries) => {
+          for (const entry of entries) {
+            if (entry.target === this.rootEl) {
+              this.resize()
+              this.eventCenter.emit('graph:resize', {
+                target: this.rootEl,
+                contentRect: entry.contentRect,
+              })
+            }
+          }
+        }) as ResizeObserverCallback,
+        16,
+      ),
+    )
+    resizeObserver.observe(this.rootEl)
+    this.waitCleanEffects.push(() => {
+      resizeObserver.disconnect()
+    })
+
     this.eventCenter = new EventEmitter()
     this.editConfigModel = new EditConfigModel(options)
     this.transformModel = new TransformModel(this.eventCenter, options)
@@ -1589,6 +1612,18 @@ export class GraphModel {
   @action setPartial(partial: boolean): void {
     this.partial = partial
   }
+
+  /** 销毁当前实例 */
+  destroy() {
+    try {
+      this.waitCleanEffects.forEach((fn) => {
+        fn()
+      })
+    } catch (err) {
+      console.warn('error on destroy GraphModel', err)
+    }
+    this.waitCleanEffects.length = 0
+  }
 }
 
 export namespace GraphModel {

packages/extension/src/components/mini-map/index.ts

@@ -195,6 +195,14 @@ export class MiniMap {
     this.elementAreaBounds = boundsInit
     this.viewPortBounds = boundsInit
     this.initMiniMap()
+    lf.graphModel.eventCenter.on('graph:resize', this.onGraphResize)
+  }
+
+  onGraphResize = () => {
+    this.updateViewPortBounds()
+    if (this.isShow) {
+      this.updateViewPort()
+    }
   }
 
   render = (_: LogicFlow, container: HTMLElement) => {
@@ -661,6 +669,9 @@ export class MiniMap {
       },
     })
   }
+  destroy() {
+    this.lf.graphModel.eventCenter.off('graph:resize', this.onGraphResize)
+  }
 }
 
 export default MiniMap