feat:fix force layout without animate

antvis · Jul 12, 2020 · 6ab38e4 · 6ab38e4
1 parent 9c17d29
commit 6ab38e4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/packages/graphin/src/layout/basic/force.ts b/packages/graphin/src/layout/basic/force.ts
@@ -4,6 +4,7 @@ import { optimizeDrawing, optimizeDrawingByNode } from '../../perf/optimizeDrawi
 import { LayoutOptionBase, Data, Node as NodeType, ForceSimulation } from '../../types';
 
 import forceWithWorker from './forceWithWorker';
+import { isBoolean } from 'lodash';
 
 export interface ForceLayoutOptions extends ForceProps, LayoutOptionBase {
   isOptimization?: boolean;
@@ -26,6 +27,8 @@ const forceLayout = (data: Data, options: ForceLayoutOptions): Return => {
     ...others
   } = options;
 
+  let animationCfg = isBoolean(animation) ? animation : true;
+
   /** Webworker solution. Otherwise, browser UI rendering is blocked */
   if (enableWorker && data.nodes.length > 100) {
     // 100以下的节点不走webworker
@@ -36,7 +39,7 @@ const forceLayout = (data: Data, options: ForceLayoutOptions): Return => {
   const simulation = new ForceLayout({
     width,
     height,
-    animation: animation !== undefined ? animation : true,
+    animation: animationCfg,
     done: () => {
       if (isOptimization) {
         optimizeDrawing(graph, false);
@@ -49,8 +52,15 @@ const forceLayout = (data: Data, options: ForceLayoutOptions): Return => {
   // 2. Mount Data
   simulation.setData(data);
 
+  let resultData = data;
+
   // 3. Custom rendering function
   simulation.register('render', (forceData: Data) => {
+    if (!animationCfg) {
+      // 如果不需要动画
+      resultData = forceData;
+      return;
+    }
     try {
       forceData.nodes.forEach((item: NodeType) => {
         const node = graph.findById(item.id);
@@ -74,7 +84,7 @@ const forceLayout = (data: Data, options: ForceLayoutOptions): Return => {
   simulation.start();
 
   return {
-    data,
+    data: resultData,
     simulation,
   };
 };

diff --git a/packages/graphin/src/layout/force/ForceLayout.ts b/packages/graphin/src/layout/force/ForceLayout.ts
@@ -276,27 +276,17 @@ class ForceLayout {
   };
 
   slienceForce = () => {
+    console.time('force time without animate');
     const firstTickInterval = 0.22;
-    for (let i = 0; i < this.props.MaxIterations; i++) {
+    for (let i = 0; this.averageDistance > 0.5 || i < 1; i++) {
       const tickInterval = Math.max(0.02, firstTickInterval - i * 0.002);
       this.tick(tickInterval);
-      const energy = this.calTotalEnergy();
-      /** 如果需要监控信息，则提供给用户 */
-      const monitor = this.registers.get('monitor');
-      if (monitor) {
-        monitor(this.reportMointor(energy));
-      }
-      if (
-        energy <= this.props.minEnergyThreshold ||
-        i === this.props.MaxIterations - 1 // 1000000次/(1000/60) = 60000s = 1min
-      ) {
-        this.render();
-        if (this.props.done) {
-          this.props.done();
-        }
-        break;
-      }
+      this.iterations++;
     }
+    console.timeEnd('force time without animate');
+    console.log('迭代次数:', this.iterations);
+    this.render();
+    this.props.done && this.props.done();
   };
 
   /** polyfill: support webworker requestAnimationFrame */