migrate to cytoscape-layers

upsetjs · Jul 11, 2020 · 1986d85 · 1986d85
1 parent 2fd86ca
commit 1986d85
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -36,7 +36,8 @@
     "last 2 Firefox versions"
   ],
   "dependencies": {
-    "@types/cytoscape": "^3.14.7"
+    "@types/cytoscape": "^3.14.7",
+    "cytoscape-layers": "^1.0.0"
   },
   "peerDependencies": {
     "cytoscape": "^3.15.2"

diff --git a/samples/bubbleclusters.html b/samples/bubbleclusters.html
@@ -19,6 +19,7 @@
     <div id="app"></div>
     <script src="https://cdn.jsdelivr.net/npm/cytoscape"></script>
     <script src="https://cdn.jsdelivr.net/npm/lodash"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cytoscape-layers"></script>
     <script src="../dist/cytoscapebubblesets.umd.development.js"></script>
     <script>
       function dist(a, b) {

diff --git a/samples/default.html b/samples/default.html
@@ -16,6 +16,7 @@
     <script src="https://cdn.jsdelivr.net/npm/layout-base"></script>
     <script src="https://cdn.jsdelivr.net/npm/avsdf-base"></script>
     <script src="https://cdn.jsdelivr.net/npm/cytoscape-avsdf"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cytoscape-layers"></script>
     <script src="../dist/cytoscapebubblesets.umd.development.js"></script>
     <script>
       const cy = cytoscape({

diff --git a/samples/default_esm.html b/samples/default_esm.html
@@ -17,6 +17,7 @@
       {
         "imports": {
           "cytoscape": "https://cdn.jsdelivr.net/npm/cytoscape@3.15.0/dist/cytoscape.esm.min.js",
+          "cytoscape-layers": "https://cdn.jsdelivr.net/npm/cytoscape-layers",
           "cytoscape-bubblesets": "../dist/cytoscapebubblesets.esm.js"
         }
       }

diff --git a/samples/euler.html b/samples/euler.html
@@ -15,6 +15,7 @@
   <body>
     <div id="app"></div>
     <script src="https://cdn.jsdelivr.net/npm/cytoscape"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cytoscape-layers"></script>
     <script src="https://cdn.jsdelivr.net/npm/cytoscape-euler"></script>
     <script src="../dist/cytoscapebubblesets.umd.development.js"></script>
     <script>

diff --git a/src/BubbleSetPath.ts b/src/BubbleSetPath.ts
@@ -319,18 +319,16 @@ export default class BubbleSetPath {
     this.node.setAttribute('d', path.sample(8).simplify(0).bSplines().simplify(0).toString(2));
   };
 
-  private get elements() {
-    return this.nodes.copy().merge(this.edges).merge(this.avoidNodes);
-  }
-
   remove() {
-    const elems = this.elements;
-    elems.off('move position', undefined, this.#throttledUpdate);
-    elems.off('add', undefined, this.#adder);
-    elems.off('remove', undefined, this.#remover);
-    elems.forEach((d) => {
-      d.scratch(SCRATCH_KEY, {});
-    });
+    for (const set of [this.nodes, this.edges, this.avoidNodes]) {
+      set.off('move position', undefined, this.#throttledUpdate);
+      set.off('add', undefined, this.#adder);
+      set.off('remove', undefined, this.#remover);
+      set.forEach((d: cy.NodeSingular | cy.EdgeSingular) => {
+        d.scratch(SCRATCH_KEY, {});
+      });
+    }
+
     this.node.remove();
     return this.#adapter.remove(this);
   }

diff --git a/src/BubbleSetsPlugin.ts b/src/BubbleSetsPlugin.ts
@@ -1,14 +1,15 @@
 import cy from 'cytoscape';
 import BubbleSetPath, { IBubbleSetPathOptions } from './BubbleSetPath';
+import { layers, ISVGLayer } from 'cytoscape-layers';
 
 export interface IBubbleSetsPluginOptions extends IBubbleSetPathOptions {
-  zIndex?: number;
+  layer?: ISVGLayer;
 }
 
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
 export default class BubbleSetsPlugin {
-  readonly svg: SVGSVGElement;
+  readonly layer: ISVGLayer;
   readonly #layers: BubbleSetPath[] = [];
   readonly #adapter = {
     remove: (path: BubbleSetPath) => {
@@ -26,37 +27,14 @@ export default class BubbleSetsPlugin {
   constructor(cy: cy.Core, options: IBubbleSetsPluginOptions = {}) {
     this.#cy = cy;
     this.#options = options;
-    const container = cy.container();
-
-    const svg = (this.svg = (container?.ownerDocument ?? document).createElementNS(SVG_NAMESPACE, 'svg'));
-    if (container) {
-      container.insertAdjacentElement('afterbegin', svg);
-    }
-    svg.style.zIndex = (options.zIndex ?? 0).toString();
-    svg.style.position = 'absolute';
-    svg.style.left = '0';
-    svg.style.top = '0';
-    svg.style.userSelect = 'none';
-    svg.style.outlineStyle = 'none';
-
-    svg.appendChild(svg.ownerDocument.createElementNS(SVG_NAMESPACE, 'g'));
-    cy.on('viewport', this.zoomed);
-    cy.on('resize', this.resize);
-    this.resize();
+    this.layer = options.layer ?? layers.call(cy).nodeLayer.insertBefore('svg');
   }
 
-  private readonly resize = () => {
-    this.svg.style.width = `${this.#cy.width()}px`;
-    this.svg.style.height = `${this.#cy.height()}px`;
-  };
-
   destroy() {
     for (const path of this.#layers) {
       path.remove();
     }
-    this.#cy.off('viewport', undefined, this.zoomed);
-    this.#cy.off('resize', undefined, this.resize);
-    this.svg.remove();
+    this.layer.remove();
   }
 
   addPath(
@@ -65,8 +43,8 @@ export default class BubbleSetsPlugin {
     avoidNodes: cy.NodeCollection | null = this.#cy.collection(),
     options: IBubbleSetPathOptions = {}
   ) {
-    const node = this.svg.ownerDocument.createElementNS(SVG_NAMESPACE, 'path');
-    this.svg.firstElementChild!.appendChild(node);
+    const node = this.layer.node.ownerDocument.createElementNS(SVG_NAMESPACE, 'path');
+    this.layer.node.appendChild(node);
     const path = new BubbleSetPath(
       this.#adapter,
       node,
@@ -76,9 +54,6 @@ export default class BubbleSetsPlugin {
       Object.assign({}, this.#options, options)
     );
     this.#layers.push(path);
-    if (this.#layers.length === 1) {
-      this.zoomed();
-    }
     path.update();
     return path;
   }
@@ -95,15 +70,7 @@ export default class BubbleSetsPlugin {
     return path.remove();
   }
 
-  private readonly zoomed = () => {
-    const pan = this.#cy.pan();
-    const zoom = this.#cy.zoom();
-    const g = this.svg.firstElementChild! as SVGGElement;
-    g.setAttribute('transform', `translate(${pan.x},${pan.y})scale(${zoom})`);
-  };
-
   update() {
-    this.zoomed();
     this.#layers.forEach((p) => p.update());
   }
 }

diff --git a/tsdx.config.js b/tsdx.config.js
@@ -12,6 +12,7 @@ module.exports = {
     // }
 
     config.output.globals['cytoscape'] = 'cytoscape';
+    config.output.globals['cytoscape-layers'] = 'CytoscapeLayers';
     const base = config.external;
     const external = Object.keys(pkg.dependencies || {}).concat(Object.keys(pkg.peerDependencies || {}));
     config.external = (v) => (base(v) ? external.includes(v) : false);

diff --git a/yarn.lock b/yarn.lock
@@ -3065,7 +3065,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bubblesets-js@npm:^2.1.0":
+"bubblesets-js@npm:^2.2.0":
   version: 2.2.0
   resolution: "bubblesets-js@npm:2.2.0"
   checksum: d132d8f6d5cd03f09d7550069e4fd0af593ca0dd51a67cac3696455345773f80ed414a5968da6e2caca13f93117be9c29385910bba6db1184c63c95b46d195fd
@@ -3625,6 +3625,7 @@ __metadata:
     "@yarnpkg/pnpify": ^2.1.0
     bubblesets-js: ^2.2.0
     cytoscape: ^3.15.0
+    cytoscape-layers: ^1.0.0
     eslint: ^7.4.0
     eslint-config-prettier: ^6.11.0
     eslint-config-react-app: ^5.2.1
@@ -3651,6 +3652,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"cytoscape-layers@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "cytoscape-layers@npm:1.0.0"
+  dependencies:
+    "@types/cytoscape": ^3.14.7
+  peerDependencies:
+    cytoscape: ^3.15.2
+  checksum: 47ad2fc00ac018def958e0acedb687cd34871d1573fad97941503f601b1b3698259302c96771972661322c2b54621f73a6373f71e766e1e353fec68851dc4081
+  languageName: node
+  linkType: hard
+
 "cytoscape@npm:^3.15.0":
   version: 3.15.2
   resolution: "cytoscape@npm:3.15.2"