feat: moveTo with animate, closes: #2252;

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - fix: uncombo with id, closes: #2924;
 - fix: image node with state changing, closes: #2923;
+- feat: moveTo with animate, closes: #2252;
 
 #### 4.3.2
 

packages/core/src/element/shapeBase.ts

@@ -431,7 +431,7 @@ export const shapeBase: ShapeOptions = {
         if (isPlainObject(style) && !ARROWS.includes(p)) {
           const subShape = group.find((element) => element.get('name') === p);
           if (subShape) {
-            const subShapeStyles = clone(subShape.attr());
+            const subShapeStyles = cloneBesidesImg(subShape.attr());
             each(style, (v, key) => {
               if (p === keyShapeName && keyShapeStyles[key] && !keptAttrs[key]) {
                 delete keyShapeStyles[key];

packages/core/src/graph/graph.ts

@@ -574,9 +574,17 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
    * @param {number} x 水平坐标
    * @param {number} y 垂直坐标
    */
-  public moveTo(x: number, y: number): void {
+  public moveTo(x: number, y: number, animate?: boolean, animateCfg?: GraphAnimateConfig): void {
     const group: IGroup = this.get('group');
-    move(group, { x, y });
+    move(
+      group,
+      { x, y },
+      animate,
+      animateCfg || {
+        duration: 500,
+        easing: 'easeCubic',
+      }
+    );
     this.emit('viewportchange', { action: 'move', matrix: group.getMatrix() });
   }
 

packages/core/src/interface/graph.ts

@@ -452,7 +452,7 @@ export interface IAbstractGraph extends EventEmitter {
    * @param {number} x 水平坐标
    * @param {number} y 垂直坐标
    */
-  moveTo: (x: number, y: number) => void;
+  moveTo: (x: number, y: number, animate?: boolean, animateCfg?: GraphAnimateConfig) => void;
 
   /**
    * 根据对应规则查找单个元素

packages/core/src/util/math.ts

@@ -12,6 +12,7 @@ import {
   IBBox,
   Item,
   IPoint,
+  GraphAnimateConfig
 } from '../types';
 
 const transform = ext.transform;
@@ -356,7 +357,7 @@ export const translate = (group: IGroup, vec: Point) => {
  * @param group Group 实例
  * @param point 移动到的坐标点
  */
-export const move = (group: IGroup, point: Point) => {
+export const move = (group: IGroup, point: Point, animate?: boolean, animateCfg?: GraphAnimateConfig = {}) => {
   let matrix: Matrix = group.getMatrix();
   if (!matrix) {
     matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
@@ -365,8 +366,25 @@ export const move = (group: IGroup, point: Point) => {
   const vx = point.x - bbox.minX;
   const vy = point.y - bbox.minY;
 
-  const movedMatrix = transform(matrix, [['t', vx, vy]]);
-  group.setMatrix(movedMatrix);
+  if (animate) {
+    const dx = vx * matrix[0];
+    const dy = vy * matrix[4];
+    let lastX = 0;
+    let lastY = 0;
+    let newX = 0;
+    let newY = 0;
+    group.animate((ratio) => {
+      newX = dx * ratio;
+      newY = dy * ratio;
+      matrix = transform(matrix, [['t', newX - lastX, newY - lastY]]);
+      lastX = newX;
+      lastY = newY;
+      return { matrix };
+    }, animateCfg);
+  } else {
+    const movedMatrix = transform(matrix, [['t', vx, vy]]);
+    group.setMatrix(movedMatrix);
+  }
 };
 
 /**

packages/core/tests/unit/state/image-state-spec.ts

@@ -51,13 +51,7 @@ describe('graph node states', () => {
         options: {
           stateStyles: {
             highlight: {
-              lineWidth: 0,
-              'text-shape': {
-                fontWeight: 700,
-              },
-            },
-            dark: {
-              'image-shape':{
+              'image-shape': {
                 opacity: 0.2,
               }
             },
@@ -122,9 +116,15 @@ describe('graph node states', () => {
     graph.render();
 
     const node = graph.getNodes()[0];
-    graph.setItemState(node, 'dark', true)
+    graph.setItemState(node, 'highlight', true)
     expect(node.getContainer().find(e => e.get('name') === 'image-shape').attr('opacity')).toBe(0.2);
-    graph.destroy();
+    
+    setTimeout(() => {
+      graph.setItemState(node, 'highlight', false)
+      console.log(node)
+    }, 500)
+
+    // graph.destroy();
     done();
   })
 });

packages/plugin/src/minimap/index.ts

@@ -635,11 +635,10 @@ export default class MiniMap extends Base {
     // 该 bbox 是准确的，不计算 matrix 的包围盒
     const bbox = group.getCanvasBBox();
 
-    // 主图的 bbox
-    const graphBBox = graph.get('canvas').getBBox();
-
-    let width = graphBBox.width;
-    let height = graphBBox.height;
+    var graphBBox = graph.get('canvas').getCanvasBBox(); // 主图的 bbox
+    const graphZoom = graph.getZoom() || 1;
+    var width = graphBBox.width / graphZoom;
+    var height = graphBBox.height / graphZoom;
 
     if (Number.isFinite(bbox.width)) {
       // 刷新后bbox可能会变，需要重置画布矩阵以缩放到合适的大小