Merge pull request #19 from sgratzl/release/v2.4.0

Release v2.4.0
sgratzl · Jul 6, 2023 · 96c31d6 · 96c31d6
2 parents afccf74 + 0effb76
commit 96c31d6
Show file tree

Hide file tree

Showing 11 changed files with 3,316 additions and 2,726 deletions.
diff --git a/.yarn/releases/yarn-3.3.0.cjs b/.yarn/releases/yarn-3.3.0.cjs
diff --git a/.yarn/releases/yarn-3.6.1.cjs b/.yarn/releases/yarn-3.6.1.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -6,4 +6,4 @@ packageExtensions:
     dependencies:
       eslint-import-resolver-node: "*"
 
-yarnPath: .yarn/releases/yarn-3.3.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.1.cjs
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cytoscape-layers",
   "description": "Cytoscape.js plugin for rendering layers in SVG, DOM, or Canvas",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "author": {
     "name": "Samuel Gratzl",
     "email": "[email protected]",
@@ -21,7 +21,7 @@
   },
   "global": "CytoscapeLayers",
   "dependencies": {
-    "@types/cytoscape": "^3.19.9"
+    "@types/cytoscape": "^3.19.10"
   },
   "peerDependencies": {
     "cytoscape": "^3.23.0"
@@ -44,38 +44,38 @@
     "src/**/*.ts"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/core": "^7.22.8",
+    "@babel/preset-env": "^7.22.7",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-typescript": "^10.0.1",
-    "@types/jest": "^29.2.3",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "@yarnpkg/sdks": "^2.6.3",
-    "cytoscape": "^3.23.0",
-    "eslint": "^8.28.0",
+    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-replace": "^5.0.2",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@types/jest": "^29.5.2",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.61.0",
+    "@yarnpkg/sdks": "^2.7.1",
+    "cytoscape": "^3.25.0",
+    "eslint": "^8.44.0",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.3.1",
-    "prettier": "^2.8.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^3.5.0",
-    "rollup-plugin-dts": "^5.0.0",
+    "jest": "^29.6.0",
+    "prettier": "^2.0.0",
+    "rimraf": "^5.0.1",
+    "rollup": "^3.26.2",
+    "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^29.0.3",
-    "tslib": "^2.4.1",
-    "typedoc": "^0.23.21",
-    "typescript": "^4.9.3"
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.0",
+    "typedoc": "^0.24.8",
+    "typescript": "^5.1.6"
   },
   "scripts": {
     "clean": "rimraf build node_modules \"*.tgz\" \"*.tsbuildinfo\" \"samples/*.js\" \"samples/*.map\"",
@@ -97,7 +97,7 @@
     "docs": "typedoc src/index.ts",
     "prepare": "yarn run build"
   },
-  "packageManager": "yarn@3.3.0",
+  "packageManager": "yarn@3.6.1",
   "dependenciesMeta": {
     "[email protected]": {
       "unplugged": true

diff --git a/samples/remove.html b/samples/remove.html
@@ -12,7 +12,8 @@
   </head>
   <body>
     <div id="app"></div>
-    <button id="btn">Click</button>
+    <button id="btn">Remove</button>
+    <button id="btn2">Add</button>
     <script src="https://cdn.jsdelivr.net/npm/cytoscape"></script>
     <script src="../build/index.umd.js"></script>
     <script>
@@ -44,16 +45,25 @@
         elem.textContent = node.id();
         // xx
       });
-      layers.renderPerEdge(layers.append('canvas'), (ctx, edge, path) => {
-        ctx.strokeStyle = 'red';
-        ctx.stroke(path);
-      });
+      // layers.renderPerEdge(layers.append('canvas'), (ctx, edge, path) => {
+      //   ctx.strokeStyle = 'red';
+      //   ctx.stroke(path);
+      // });
 
       document.querySelector('#btn').onclick = function () {
         console.time('del');
         cy.remove('node[id > 50]');
         console.timeEnd('del');
       };
+      document.querySelector('#btn2').onclick = function () {
+        console.time('add');
+        const newElements = [];
+        for (let i = 800; i < 900; i++) {
+          newElements.push({ data: { id: i } });
+        }
+        cy.add(newElements);
+        console.timeEnd('add');
+      };
     </script>
   </body>
 </html>
diff --git a/src/elements/common.ts b/src/elements/common.ts
@@ -10,9 +10,12 @@ export interface IElementLayerOptions {
   queryEachTime: boolean;
   /**
    * automatically update the layer upon a certain event
+   * render ... upon render
+   * none ... only when add/remove
+   * position or custom ... extra events to listen to
    * @default auto = render in case of a queryEachTime else position
    */
-  updateOn: 'render' | 'position' | 'none';
+  updateOn: 'render' | 'position' | 'none' | string;
 
   /**
    * whether to check that the element is actually visible

diff --git a/src/elements/edges.ts b/src/elements/edges.ts
@@ -30,27 +30,55 @@ export function renderPerEdge(
     defaultElementLayerOptions(options),
     options
   );
-  const edges = o.queryEachTime ? layer.cy.collection() : layer.cy.edges(o.selector);
-  if (!o.queryEachTime) {
-    o.initCollection(edges);
-  }
+  let edges = layer.cy.collection() as cy.EdgeCollection;
+  let updateOnRenderOnceEnabled = false;
+  const revaluateAndUpdateOnce = () => {
+    if (updateOnRenderOnceEnabled) {
+      return;
+    }
+    updateOnRenderOnceEnabled = true;
+    layer.cy.one('render', () => {
+      updateOnRenderOnceEnabled = false;
+      edges = reevaluateCollection(edges);
+      layer.update();
+    });
+  };
+
+  const reevaluateCollection = (current: cy.EdgeCollection) => {
+    // clean up old
+    if (o.updateOn !== 'none' && o.updateOn !== 'render') {
+      current.off(o.updateOn, undefined, layer.updateOnRenderOnce);
+      current.sources().off(o.updateOn, undefined, layer.updateOnRenderOnce);
+      current.targets().off(o.updateOn, undefined, layer.updateOnRenderOnce);
+    }
+
+    // init new
+    const newEdges = layer.cy.edges(o.selector);
+    o.initCollection(newEdges);
+    if (o.updateOn !== 'none' && o.updateOn !== 'render') {
+      newEdges.on(o.updateOn, layer.updateOnRenderOnce);
+      newEdges.sources().on(o.updateOn, layer.updateOnRenderOnce);
+      newEdges.targets().on(o.updateOn, layer.updateOnRenderOnce);
+    }
+    layer.updateOnRenderOnce();
+    return newEdges;
+  };
 
   if (o.updateOn === 'render') {
     layer.updateOnRender = true;
-  } else if (o.updateOn === 'position') {
-    edges.on('position add remove', layer.updateOnRenderOnce);
-    edges.sources().on('position', layer.updateOnRenderOnce);
-    edges.targets().on('position', layer.updateOnRenderOnce);
   } else {
-    edges.on('add remove', layer.updateOnRenderOnce);
+    edges = reevaluateCollection(edges);
+    layer.cy.on('add remove', o.selector, revaluateAndUpdateOnce);
   }
 
   const renderer = (ctx: CanvasRenderingContext2D) => {
-    const currentEdges = o.queryEachTime ? layer.cy.edges(o.selector) : edges;
     if (o.queryEachTime) {
-      o.initCollection(currentEdges);
+      edges = reevaluateCollection(edges);
     }
-    currentEdges.forEach((edge) => {
+    edges.forEach((edge) => {
+      if (edge.removed()) {
+        return;
+      }
       const impl = (edge as any)._private.rscratch as {
         pathCache: Path2D;
         startX?: number;
@@ -81,9 +109,12 @@ export function renderPerEdge(
     layer,
     edges,
     remove: () => {
-      edges.off('position add remove', undefined, layer.updateOnRenderOnce);
-      edges.sources().off('position', undefined, layer.updateOnRenderOnce);
-      edges.targets().off('position', undefined, layer.updateOnRenderOnce);
+      if (o.updateOn !== 'none' && o.updateOn !== 'render') {
+        edges.off(o.updateOn, undefined, layer.updateOnRenderOnce);
+        edges.sources().off(o.updateOn, undefined, layer.updateOnRenderOnce);
+        edges.targets().off(o.updateOn, undefined, layer.updateOnRenderOnce);
+      }
+      layer.cy.off('add remove', o.selector, revaluateAndUpdateOnce);
       r.remove();
     },
   };

diff --git a/src/elements/nodes.ts b/src/elements/nodes.ts
@@ -87,23 +87,52 @@ export function renderPerNode(
     defaultElementLayerOptions(options),
     options
   );
-  const nodes = o.queryEachTime ? layer.cy.collection() : layer.cy.nodes(o.selector);
-  if (!o.queryEachTime) {
-    o.initCollection(nodes);
-  }
+
+  let nodes = layer.cy.collection() as cy.NodeCollection;
+  let updateOnRenderOnceEnabled = false;
+  const revaluateAndUpdateOnce = () => {
+    if (updateOnRenderOnceEnabled) {
+      return;
+    }
+    updateOnRenderOnceEnabled = true;
+    layer.cy.one('render', () => {
+      updateOnRenderOnceEnabled = false;
+      nodes = reevaluateCollection(nodes);
+      layer.update();
+    });
+  };
+
+  const reevaluateCollection = (current: cy.NodeCollection) => {
+    // clean up old
+    if (o.updateOn !== 'none' && o.updateOn !== 'render') {
+      current.off(o.updateOn, undefined, layer.updateOnRenderOnce);
+    }
+
+    // init new
+    const newNodes = layer.cy.nodes(o.selector);
+    o.initCollection(newNodes);
+    if (o.updateOn !== 'none' && o.updateOn !== 'render') {
+      newNodes.on(o.updateOn, layer.updateOnRenderOnce);
+    }
+    layer.updateOnRenderOnce();
+    return newNodes;
+  };
+
   if (o.updateOn === 'render') {
     layer.updateOnRender = true;
-  } else if (o.updateOn === 'position') {
-    nodes.on('position add remove', layer.updateOnRenderOnce);
   } else {
-    nodes.on('add remove', layer.updateOnRenderOnce);
+    nodes = reevaluateCollection(nodes);
+    layer.cy.on('add remove', o.selector, revaluateAndUpdateOnce);
   }
 
   const wrapResult = (v: ICallbackRemover): IRenderPerNodeResult => ({
     layer,
     nodes,
     remove: () => {
-      nodes.off('position add remove', undefined, layer.updateOnRenderOnce);
+      if (o.updateOn !== 'none' && o.updateOn !== 'render') {
+        nodes.off(o.updateOn, undefined, layer.updateOnRenderOnce);
+      }
+      layer.cy.off('add remove', o.selector, revaluateAndUpdateOnce);
       v.remove();
     },
   });
@@ -112,11 +141,13 @@ export function renderPerNode(
     const oCanvas = o as INodeCanvasLayerOption;
     const renderer = (ctx: CanvasRenderingContext2D) => {
       const t = ctx.getTransform();
-      const currentNodes = oCanvas.queryEachTime ? layer.cy.nodes(oCanvas.selector) : nodes;
       if (o.queryEachTime) {
-        o.initCollection(currentNodes);
+        nodes = reevaluateCollection(nodes);
       }
-      currentNodes.forEach((node) => {
+      nodes.forEach((node) => {
+        if (node.removed()) {
+          return;
+        }
         const bb = node.boundingBox(o.boundingBox);
         if (oCanvas.checkBounds && !layer.inVisibleBounds(bb)) {
           return;
@@ -169,11 +200,10 @@ export function renderPerNode(
       },
     };
     const renderer = (root: HTMLElement) => {
-      const currentNodes = oDOM.queryEachTime ? layer.cy.nodes(oDOM.selector) : nodes;
       if (o.queryEachTime) {
-        o.initCollection(currentNodes);
+        nodes = reevaluateCollection(nodes);
       }
-      matchNodes(root, currentNodes, matchOptions);
+      matchNodes(root, nodes, matchOptions);
     };
     return wrapResult(registerCallback(layer, renderer));
   }
@@ -199,11 +229,10 @@ export function renderPerNode(
     },
   };
   const renderer = (root: SVGElement) => {
-    const currentNodes = oDOM.queryEachTime ? layer.cy.nodes(oDOM.selector) : nodes;
     if (o.queryEachTime) {
-      o.initCollection(currentNodes);
+      nodes = reevaluateCollection(nodes);
     }
-    matchNodes(root, currentNodes, matchOptions);
+    matchNodes(root, nodes, matchOptions);
   };
   return wrapResult(registerCallback(layer, renderer));
 }
diff --git a/src/elements/utils.ts b/src/elements/utils.ts
@@ -16,6 +16,9 @@ export function matchNodes<T extends HTMLElement | SVGElement>(
   const arr = Array.from(root.children) as T[];
   if (!options.uniqueElements) {
     nodes.forEach((node) => {
+      if (node.removed()) {
+        return;
+      }
       const bb = options.bb(node);
       if (!options.isVisible(bb)) {
         return;
@@ -38,6 +41,9 @@ export function matchNodes<T extends HTMLElement | SVGElement>(
 
   let i = -1;
   nodes.forEach((node) => {
+    if (node.removed()) {
+      return;
+    }
     const bb = options.bb(node);
     if (!options.isVisible(bb)) {
       return;

diff --git a/tsconfig.json b/tsconfig.json
@@ -8,7 +8,7 @@
     "sourceMap": true,
     "strict": true,
     "removeComments": true,
-    "importsNotUsedAsValues": "error",
+    "verbatimModuleSyntax": false,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,
     "strictBindCallApply": true,