Merge pull request #89 from sgratzl/release/v4.2.6

Release v4.2.6
sgratzl · Oct 9, 2023 · 9c39627 · 9c39627
2 parents 19bd88e + ffdfff6
commit 9c39627
Show file tree

Hide file tree

Showing 8 changed files with 790 additions and 559 deletions.
diff --git a/.yarn/releases/yarn-3.6.3.cjs → .yarn/releases/yarn-3.6.4.cjs b/.yarn/releases/yarn-3.6.3.cjs → .yarn/releases/yarn-3.6.4.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -3,4 +3,4 @@ packageExtensions:
     dependencies:
       eslint-import-resolver-node: "*"
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chartjs-chart-graph",
   "description": "Chart.js module for charting graphs",
-  "version": "4.2.5",
+  "version": "4.2.6",
   "author": {
     "name": "Samuel Gratzl",
     "email": "sam@sgratzl.com",
@@ -54,8 +54,8 @@
     "last 2 Firefox versions"
   ],
   "dependencies": {
-    "@types/d3-force": "^3.0.5",
-    "@types/d3-hierarchy": "^3.1.3",
+    "@types/d3-force": "^3.0.6",
+    "@types/d3-hierarchy": "^3.1.4",
     "d3-dispatch": "^3.0.1",
     "d3-force": "^3.0.0",
     "d3-hierarchy": "^3.1.2",
@@ -64,23 +64,23 @@
   },
   "devDependencies": {
     "@chiogen/rollup-plugin-terser": "^7.1.3",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-typescript": "^11.1.3",
+    "@rollup/plugin-commonjs": "^25.0.5",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.3",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@types/jest": "^29.5.5",
     "@types/jest-image-snapshot": "^6.2.1",
-    "@types/node": "^20.6.2",
-    "@types/seedrandom": "^3.0.5",
-    "@typescript-eslint/eslint-plugin": "^6.7.0",
-    "@typescript-eslint/parser": "^6.7.0",
+    "@types/node": "^20.8.3",
+    "@types/seedrandom": "^3.0.6",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "@yarnpkg/sdks": "^2.7.1",
     "canvas": "^2.11.2",
     "canvas-5-polyfill": "^0.1.5",
     "chart.js": "^4.4.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "chartjs-plugin-zoom": "^2.0.1",
-    "eslint": "^8.49.0",
+    "eslint": "^8.51.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-react-app": "^7.0.1",
@@ -94,18 +94,18 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-image-snapshot": "^6.2.0",
     "prettier": "^3.0.3",
-    "rimraf": "^5.0.1",
-    "rollup": "~3.29.2",
+    "rimraf": "^5.0.5",
+    "rollup": "~4.0.2",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-dts": "^6.1.0",
     "seedrandom": "^3.0.5",
     "ts-jest": "^29.1.1",
     "tslib": "^2.6.2",
-    "typedoc": "^0.25.1",
+    "typedoc": "^0.25.2",
     "typedoc-plugin-markdown": "^4.0.0-next.16",
     "typedoc-vitepress-theme": "^1.0.0-next.3",
     "typescript": "^5.2.2",
-    "vitepress": "^1.0.0-rc.14",
+    "vitepress": "^1.0.0-rc.20",
     "vue": "^3.3.4",
     "vue-chartjs": "^5.2.0"
   },
@@ -134,5 +134,5 @@
     "docs:build": "yarn run docs:api && vitepress build docs",
     "docs:preview": "vitepress preview docs"
   },
-  "packageManager": "yarn@3.6.3"
+  "packageManager": "yarn@3.6.4"
 }
diff --git a/samples/tree.html b/samples/tree.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <script src=" https://cdn.jsdelivr.net/npm/chart.js@~4.3.0"></script>
+    <script src="../build/index.umd.js"></script>
+  </head>
+
+  <body>
+    <div style="width: 75%">
+      <canvas id="canvas"></canvas>
+    </div>
+    <button id="destroy">Destroy</button>
+    <script>
+      const chart = new Chart(document.getElementById('canvas').getContext('2d'), {
+        type: 'forceDirectedGraph',
+        data: {
+          labels: [],
+          datasets: [
+            {
+              pointBackgroundColor: 'steelblue',
+              pointRadius: 5,
+              data: [],
+              edges: [],
+            },
+          ],
+        },
+        options: {
+          legend: {
+            display: false,
+          },
+        },
+      });
+      const destroy = document.getElementById('destroy');
+      destroy.onclick = () => {
+        chart.destroy();
+        console.log('ddd');
+      };
+    </script>
+  </body>
+</html>
diff --git a/src/controllers/DendrogramController.ts b/src/controllers/DendrogramController.ts
@@ -39,6 +39,8 @@ export class DendrogramController extends GraphController {
    */
   declare options: { tree: ITreeOptions };
 
+  private _animTimer: number = -1;
+
   /**
    * @hidden
    */
@@ -49,6 +51,14 @@ export class DendrogramController extends GraphController {
     super.updateEdgeElement(line, index, properties, mode);
   }
 
+  _destroy() {
+    if (this._animTimer >= 0) {
+      cancelAnimationFrame(this._animTimer);
+    }
+    this._animTimer = -2;
+    return super._destroy();
+  }
+
   /**
    * @hidden
    */
@@ -125,7 +135,14 @@ export class DendrogramController extends GraphController {
 
     layout(root).each((orientation[options.orientation] || orientation.horizontal) as any);
 
-    requestAnimationFrame(() => this.chart.update());
+    const chart = this.chart;
+    if (this._animTimer !== -2) {
+      this._animTimer = requestAnimationFrame(() => {
+        if (chart.canvas) {
+          chart.update();
+        }
+      });
+    }
   }
 
   static readonly id: string = 'dendrogram';

diff --git a/src/controllers/ForceDirectedGraphController.ts b/src/controllers/ForceDirectedGraphController.ts
@@ -162,18 +162,26 @@ export class ForceDirectedGraphController extends GraphController {
    */
   private readonly _simulation: Simulation<SimulationNodeDatum, undefined>;
 
+  private _animTimer: number = -1;
+
   constructor(chart: Chart, datasetIndex: number) {
     super(chart, datasetIndex);
     this._simulation = forceSimulation()
       .on('tick', () => {
-        this._copyPosition();
-        this.chart.render();
+        if (this.chart.canvas && this._animTimer !== -2) {
+          this._copyPosition();
+          this.chart.render();
+        } else {
+          this._simulation.stop();
+        }
       })
       .on('end', () => {
-        this._copyPosition();
-        this.chart.render();
-        // trigger a full update
-        this.chart.update('default');
+        if (this.chart.canvas && this._animTimer !== -2) {
+          this._copyPosition();
+          this.chart.render();
+          // trigger a full update
+          this.chart.update('default');
+        }
       });
     const sim = this.options.simulation;
 
@@ -203,6 +211,14 @@ export class ForceDirectedGraphController extends GraphController {
     this._simulation.stop();
   }
 
+  _destroy() {
+    if (this._animTimer >= 0) {
+      cancelAnimationFrame(this._animTimer);
+    }
+    this._animTimer = -2;
+    return super._destroy();
+  }
+
   /**
    * @hidden
    */
@@ -324,10 +340,15 @@ export class ForceDirectedGraphController extends GraphController {
       this._copyPosition();
       if (this.options.simulation.autoRestart) {
         this._simulation.restart();
-      } else {
-        requestAnimationFrame(() => this.chart.update());
+      } else if (this.chart.canvas != null && this._animTimer !== -2) {
+        const chart = this.chart;
+        this._animTimer = requestAnimationFrame(() => {
+          if (chart.canvas) {
+            chart.update();
+          }
+        });
       }
-    } else if (this.options.simulation.autoRestart) {
+    } else if (this.options.simulation.autoRestart && this.chart.canvas != null && this._animTimer !== -2) {
       this._simulation.alpha(1).restart();
     }
   }

diff --git a/src/controllers/GraphController.ts b/src/controllers/GraphController.ts
@@ -199,8 +199,8 @@ export class GraphController extends ScatterController {
   /**
    * @hidden
    */
-  destroy(): void {
-    (ScatterController.prototype as any).destroy.call(this);
+  _destroy(): void {
+    (ScatterController.prototype as any)._destroy.call(this);
     if (this._edges) {
       unlistenArrayEvents(this._edges, this._edgeListener);
     }