Release v2.3.0

.github/workflows/ci.yml

@@ -6,14 +6,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
       - run: npm i -g yarn
       - run: yarn config set checksumBehavior ignore
       - name: Cache Node.js modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: |
             ./.yarn/cache

.github/workflows/create_release.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: main
           ssh-key: ${{ secrets.PRIVATE_SSH_KEY }}

.github/workflows/release_helper.yml

@@ -20,7 +20,7 @@ jobs:
         uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: 16
       - name: Extract version
         id: extract_version
         run: node -pe "'::set-output name=version::' + require('./package.json').version"
@@ -45,7 +45,7 @@ jobs:
         uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
       - run: npm i -g yarn
       - run: yarn config set checksumBehavior ignore
       - name: Cache Node.js modules
@@ -78,7 +78,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: dev
           ssh-key: ${{ secrets.PRIVATE_SSH_KEY }}

.vscode/settings.json

@@ -19,5 +19,9 @@
   "editor.detectIndentation": false,
   "editor.tabSize": 2,
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "search.exclude": {
+    "**/.yarn": true,
+    "**/.pnp.*": true
+  }
 }

.yarnrc.yml

@@ -6,4 +6,4 @@ packageExtensions:
     dependencies:
       eslint-import-resolver-node: "*"
 
-yarnPath: .yarn/releases/yarn-3.1.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.4.cjs

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cytoscape-layers",
   "description": "Cytoscape.js plugin for rendering layers in SVG, DOM, or Canvas",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "author": {
     "name": "Samuel Gratzl",
     "email": "[email protected]",
@@ -21,10 +21,10 @@
   },
   "global": "CytoscapeLayers",
   "dependencies": {
-    "@types/cytoscape": "^3.19.0"
+    "@types/cytoscape": "^3.19.9"
   },
   "peerDependencies": {
-    "cytoscape": "^3.20.0"
+    "cytoscape": "^3.23.0"
   },
   "browserslist": [
     "Firefox ESR",
@@ -43,38 +43,38 @@
     "src/**/*.ts"
   ],
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-typescript": "^8.3.0",
-    "@types/jest": "^27.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
-    "@yarnpkg/sdks": "^2.5.0",
-    "cytoscape": "^3.20.0",
-    "eslint": "^8.1.0",
-    "eslint-config-airbnb-typescript": "^14.0.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "@rollup/plugin-babel": "^6.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-typescript": "^9.0.2",
+    "@types/jest": "^29.2.2",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "@yarnpkg/sdks": "^2.6.3",
+    "cytoscape": "^3.23.0",
+    "eslint": "^8.27.0",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "jest": "^27.3.1",
-    "prettier": "^2.4.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.10",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.3.1",
+    "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
-    "rollup-plugin-dts": "^4.0.0",
+    "rollup": "^3.2.5",
+    "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^27.0.7",
-    "tslib": "^2.3.1",
-    "typedoc": "^0.22.7",
-    "typescript": "^4.4.4"
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.4.1",
+    "typedoc": "^0.23.20",
+    "typescript": "^4.8.4"
   },
   "scripts": {
     "clean": "rimraf build node_modules \"*.tgz\" \"*.tsbuildinfo\" \"samples/*.js\" \"samples/*.map\"",
@@ -95,5 +95,11 @@
     "eslint:fix": "yarn run eslint --fix",
     "docs": "typedoc src/index.ts",
     "prepare": "yarn run build"
+  },
+  "packageManager": "[email protected]",
+  "dependenciesMeta": {
+    "[email protected]": {
+      "unplugged": true
+    }
   }
 }

samples/animatedEdge.html

@@ -11,6 +11,8 @@
     </style>
   </head>
   <body>
+    <button id="png">PNG</button>
+    <a id="url" download="file.png"></a>
     <div id="app"></div>
     <script src="https://cdn.jsdelivr.net/npm/cytoscape"></script>
     <script src="../build/index.umd.js"></script>

samples/animatedEdges.ts

@@ -42,6 +42,7 @@ namespace AnimatedEdges {
     return vSet;
   }
   const layers = CytoscapeLayers.layers(cy);
+
   const layer = layers.nodeLayer.insertBefore('canvas');
 
   function animateEdges(options: {
@@ -106,6 +107,17 @@ namespace AnimatedEdges {
       }
     );
     requestAnimationFrame(update);
+
+    document.getElementById('png')?.addEventListener('click', () => {
+      cy.png({
+        output: 'blob-promise',
+      }).then((r) => {
+        const url = URL.createObjectURL(r);
+        const a = document.getElementById('url') as HTMLAnchorElement;
+        a.href = url;
+        a.click();
+      });
+    });
   }
 
   cy.one('ready', () => {

samples/annotations.html

@@ -11,6 +11,8 @@
     </style>
   </head>
   <body>
+    <button id="png">PNG</button>
+    <a id="url" download="file.png"></a>
     <div id="app"></div>
     <script src="https://cdn.jsdelivr.net/npm/cytoscape"></script>
     <script src="../build/index.umd.js"></script>

samples/annotations.ts

@@ -60,4 +60,18 @@ namespace Annotations {
   });
 
   console.log(layers);
+
+  document.getElementById('png')?.addEventListener('click', () => {
+    layers
+      .png({
+        output: 'blob-promise',
+        ignoreUnsupportedLayerOrder: true,
+      })
+      .then((r) => {
+        const url = URL.createObjectURL(r);
+        const a = document.getElementById('url') as HTMLAnchorElement;
+        a.href = url;
+        a.click();
+      });
+  });
 }

samples/remove.html

@@ -36,18 +36,18 @@
       });
       const layers = cy.layers();
 
-      // layers.renderPerNode(layers.append('canvas'), (ctx, node, bb) => {
-      //   ctx.strokeStyle = 'red';
-      //   ctx.strokeRect(0, 0, bb.w, bb.h);
-      // });
+      layers.renderPerNode(layers.append('canvas'), (ctx, node, bb) => {
+        ctx.strokeStyle = 'red';
+        ctx.strokeRect(0, 0, bb.w, bb.h);
+      });
       layers.renderPerNode(layers.append('html'), (elem, node) => {
         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');