feat: improve diffItems performance

packages/core/src/element/node.ts

@@ -34,7 +34,7 @@ const singleNode: ShapeOptions = {
    * @return {Array} 宽高
    */
   getSize(cfg: ModelConfig): number[] {
-    let size: number | number[] = this.mergeStyle?.size || cfg.size || this.getOptions({})!.size || Global.defaultNode.size; // Global.defaultNode.size; //  
+    let size: number | number[] = this.mergeStyle?.size || cfg.size || this.getOptions({})!.size || Global.defaultNode.size; // Global.defaultNode.size; //
 
     // size 是数组，但长度为1，则补长度为2
     if (isArray(size) && size.length === 1) {

packages/core/src/graph/graph.ts

@@ -1573,8 +1573,10 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
     const self = this;
     let item: INode;
     const itemMap: NodeMap = this.get('itemMap');
+    const itemsArray = items[`${type}s`];
+    const itemsToAdd: { type: ITEM_TYPE; model: NodeConfig | EdgeConfig }[] = [];
 
-    each(models, model => {
+    each(models, (model: NodeConfig | EdgeConfig) => {
       item = itemMap[model.id];
       if (item) {
         if (self.get('animate') && type === NODE) {
@@ -1588,10 +1590,23 @@ export default abstract class AbstractGraph extends EventEmitter implements IAbs
 
         self.updateItem(item, model, false);
       } else {
-        item = self.addItem(type, model, false) as any;
+        itemsToAdd.push({ type, model });
+      }
+
+      if (item) {
+        itemsArray.push(item);
       }
-      if (item) (items as { [key: string]: any[] })[`${type}s`].push(item);
     });
+
+    if (itemsToAdd.length) {
+      const items = self.addItems(itemsToAdd, false);
+      for (var i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item) {
+          itemsArray.push(item);
+        }
+      }
+    }
   }
 
   /**

packages/pc/src/graph/controller/layout.ts

@@ -116,7 +116,7 @@ export default class LayoutController extends AbstractLayout {
       layoutCfg.onLayoutEnd = () => {
         graph.emit('aftersublayout', { type: layoutType });
         reslove();
-      }
+      };
 
       // 若用户指定开启 gpu，且当前浏览器支持 webgl，且该算法存在 GPU 版本（目前仅支持 fruchterman 和 gForce），使用 gpu 版本的布局
       if (layoutType && this.isGPU) {
@@ -149,7 +149,7 @@ export default class LayoutController extends AbstractLayout {
       try {
         layoutMethod = new Layout[layoutType](layoutCfg);
         if (this.layoutMethods[order]) {
-          this.layoutMethods[order].destroy()
+          this.layoutMethods[order].destroy();
         }
         this.layoutMethods[order] = layoutMethod;
       } catch (e) {
@@ -189,7 +189,7 @@ export default class LayoutController extends AbstractLayout {
       layoutCfg.onLayoutEnd = () => {
         graph.emit('aftersublayout', { type: layoutType });
         reslove();
-      }
+      };
 
       if (Util.isForce(layoutType)) {
         const { onTick, animate } = layoutCfg;
@@ -340,18 +340,18 @@ export default class LayoutController extends AbstractLayout {
     });
     edges.forEach(edge => {
       const { source, target } = edge;
-      const sourcePosition = positionMap[source]
-      const targetPosition = positionMap[target]
+      const sourcePosition = positionMap[source];
+      const targetPosition = positionMap[target];
       if (!sourcePosition && targetPosition) {
         positionMap[source] = {
           x: targetPosition.x + (Math.random() - 0.5) * 80,
           y: targetPosition.y + (Math.random() - 0.5) * 80
-        }
+        };
       } else if (!targetPosition && sourcePosition) {
         positionMap[target] = {
           x: sourcePosition.x + (Math.random() - 0.5) * 80,
           y: sourcePosition.y + (Math.random() - 0.5) * 80
-        }
+        };
       }
     });
     const width = graph.get('width');
@@ -360,7 +360,7 @@ export default class LayoutController extends AbstractLayout {
       const position = positionMap[node.id] || { x: width / 2 + (Math.random() - 0.5) * 20, y: height / 2 + (Math.random() - 0.5) * 20 };
       node.x = position.x;
       node.y = position.y;
-    })
+    });
   }
 
   public initWithPreset(hasPresetCallback, noPresetCallback): Promise<void> {
@@ -629,7 +629,7 @@ export default class LayoutController extends AbstractLayout {
           });
         });
         resolve();
-      }
+      };
 
       const layoutMethod = new Layout[adjust](layoutCfg);
       layoutMethod.layout({ nodes: layoutNodes });

packages/pc/tests/unit/element/edge-label-back-spec.ts

@@ -124,17 +124,17 @@ describe('text background label', () => {
       graph.updateItem('node3', {
         x: 250,
         y: 200,
-      })
+      });
       setTimeout(() => {
         edge1bgMatrix = edge1bg.getMatrix();
         expect(edge1bgMatrix[0]).toBe(1);
         expect(edge1bgMatrix[6]).toBe(0);
         expect(edge1bgMatrix[7]).toBe(0);
         expect(edge1bg.attr('x')).toBe(258);
         expect(edge1bg.attr('y')).toBe(164);
-        done()
+        done();
       }, 30);
-    }, 100)
+    }, 100);
   });
   it('text background with autoRotate false and clearItemStates', (done) => {
     let edge = graph.getEdges()[0];
@@ -154,7 +154,7 @@ describe('text background label', () => {
       const { x: newX, y: newY } = labelBgShape.attr();
       expect(numberEqual(newX, 226, 2)).toBe(true);
       expect(numberEqual(newY, 166, 2)).toBe(true);
-      done()
+      done();
     }, 16);
   });
 });

packages/pc/tests/unit/graph/updateLayout-align-spec.ts

@@ -95,7 +95,7 @@ describe('graph', () => {
       expect(Math.abs(meanCenter.x - point.x) < 10).toBe(true);
       expect(Math.abs(meanCenter.y - point.y) < 10).toBe(true);
       done();
-    })
+    });
     graph.updateLayout(
       {
         type: 'force',