fix: state change to update the minimap in default and keyShape mode

src/plugins/minimap/index.ts

@@ -327,20 +327,22 @@ export default class MiniMap extends Base {
     // 差量更新 minimap 上的一个节点，对应主图的 item
     let mappedItem = itemMap[item.get('id')];
     const bbox = item.getBBox(); // 计算了节点父组矩阵的 bbox
-    if (!mappedItem) {
-      mappedItem = item.get('keyShape').clone();
-      group.add(mappedItem);
-    }
-    const shapeType = mappedItem.get('type');
+    const cKeyShape = item.get('keyShape').clone();
+    const keyShapeStyle = cKeyShape.attr();
     let attrs: any = {
       x: bbox.centerX,
-      y: bbox.centerY
+      y: bbox.centerY,
+    };
+    if (!mappedItem) {
+      mappedItem = cKeyShape;
+      group.add(mappedItem);
+    } else {
+      attrs = Object.assign(keyShapeStyle, attrs);
     }
+    const shapeType = mappedItem.get('type');
     if (shapeType === 'rect' || shapeType === 'image') {
-      attrs = {
-        x: bbox.minX,
-        y: bbox.minY
-      }
+      attrs.x = bbox.minX;
+      attrs.y = bbox.minY;
     }
     mappedItem.attr(attrs)
     if (!item.isVisible()) {
@@ -465,6 +467,7 @@ export default class MiniMap extends Base {
   public init() {
     this.initContainer();
     this.get('graph').on('afterupdateitem', this.handleUpdateCanvas);
+    this.get('graph').on('afteritemstatechange', this.handleUpdateCanvas);
     this.get('graph').on('afteradditem', this.handleUpdateCanvas);
     this.get('graph').on('afterremoveitem', this.handleUpdateCanvas);
     this.get('graph').on('afterrender', this.handleUpdateCanvas);

stories/Plugins/component/minimap.tsx

@@ -67,7 +67,7 @@ const Minimap = () => {
           height: 400,
           plugins: [ minimap ],
           modes: {
-            default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'collapse-expand']
+            default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select']
           },
           defaultNode: {
             type: 'circle',
@@ -87,6 +87,11 @@ const Minimap = () => {
               stroke: '#A3B1BF',
             },
           },
+          nodeStateStyles: {
+            selected: {
+              fill: 'red'
+            }
+          },
           layout: {
             type: 'compactBox',
             direction: 'LR',