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

使用ResizeObserver监听GraphModel中的rootEl大小变化，并新增抛出“graph:resize”事件，MiniMap监听“graph:resize”实现跟随缩放

Closes didi#1957

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/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