⚡ New BoxConnector constructor

Optimize BoxConnector performance by using 'willReadFrequently' when adquiring the CanvasRenderingContext2D

CHANGELOG.md

@@ -1,7 +1,8 @@
-### v2.1.12 (not yet released)
+### v2.1.12 (2022-11-26)
 #### Improvements
 - Upgraded dependencies
 - Remove unnecessary dependencies: `scriptjs`
+- Improve graphics performance setting [willReadFrequently](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently) when adquiring [CanvasRenderingContext2D](https://html.spec.whatwg.org/multipage/canvas.html#canvasrenderingcontext2d) in activities using [BoxConnector](https://github.com/projectestac/jclic.js/blob/master/src/boxes/BoxConnector.js).
 
 ### v2.1.11 (2022-08-04)
 #### Improvements

package.json

@@ -53,23 +53,23 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.6",
+    "@babel/core": "^7.20.2",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/preset-env": "^7.19.4",
-    "@xmldom/xmldom": "^0.8.4",
-    "babel-loader": "^9.0.0",
+    "@babel/preset-env": "^7.20.2",
+    "@xmldom/xmldom": "^0.8.6",
+    "babel-loader": "^9.1.0",
     "clipboard-polyfill": "^3.0.3",
-    "eslint": "^8.26.0",
+    "eslint": "^8.28.0",
     "eslint-webpack-plugin": "^3.2.0",
     "fs-extra": "^10.1.0",
     "ink-docstrap-template": "^1.3.2",
-    "jsdoc": "^3.6.11",
-    "jsdom": "^20.0.2",
+    "jsdoc": "^4.0.0",
+    "jsdom": "^20.0.3",
     "patch-package": "^6.5.0",
     "po2json": "^1.0.0-alpha",
     "terser-webpack-plugin": "^5.3.6",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
     "webpack-dev-server": "^4.11.1",
     "webpack-node-externals": "^3.0.0"
   },

src/activities/associations/SimpleAssociation.js

@@ -305,7 +305,7 @@ export class SimpleAssociationPanel extends ActivityPanel {
       this.$div.append(this.$canvas);
 
       // Create a [BoxConnector](BoxConnector.html) and attach it to the canvas context
-      this.bc = new BoxConnector(this, this.$canvas.get(-1).getContext('2d'));
+      this.bc = new BoxConnector(this, this.$canvas);
 
       // Repaint all
       this.invalidate().update();

src/activities/memory/MemoryGame.js

@@ -234,7 +234,7 @@ export class MemoryGamePanel extends ActivityPanel {
       this.$div.append(this.$canvas);
 
       // Create a [BoxConnector](BoxConnector.html) and attach it to the canvas context
-      this.bc = new BoxConnector(this, this.$canvas.get(-1).getContext('2d'));
+      this.bc = new BoxConnector(this, this.$canvas);
 
       // Repaint all
       this.invalidate().update();

src/activities/puzzles/DoublePuzzle.js

@@ -233,7 +233,7 @@ export class DoublePuzzlePanel extends ActivityPanel {
       this.$div.append(this.$canvas);
 
       // Create a [BoxConnector](BoxConnector.html) and attach it to the canvas context
-      this.bc = new BoxConnector(this, this.$canvas.get(-1).getContext('2d'));
+      this.bc = new BoxConnector(this, this.$canvas);
 
       // Repaint all
       this.invalidate().update();

src/activities/puzzles/ExchangePuzzle.js

@@ -212,7 +212,7 @@ class ExchangePuzzlePanel extends ActivityPanel {
       this.$div.append(this.$canvas);
 
       // Create a [BoxConnector](BoxConnector.html) and attach it to the canvas context
-      this.bc = new BoxConnector(this, this.$canvas.get(-1).getContext('2d'));
+      this.bc = new BoxConnector(this, this.$canvas);
 
       // Repaint all
       this.invalidate().update();

src/activities/text/OrderText.js

@@ -136,7 +136,7 @@ export class OrderTextPanel extends TextActivityBasePanel {
       this.$div.append(this.$canvas);
 
       // Create a [BoxConnector](BoxConnector.html) and attach it to the canvas context
-      this.bc = new BoxConnector(this, this.$canvas.get(-1).getContext('2d'));
+      this.bc = new BoxConnector(this, this.$canvas);
       this.bc.compositeOp = this.bc.DEFAULT_COMPOSITE_OP;
 
       // Repaint all

src/activities/textGrid/WordSearch.js

@@ -283,7 +283,7 @@ export class WordSearchPanel extends ActivityPanel {
       this.$div.append(this.$canvas);
 
       // Create a [BoxConnector](BoxConnector.html) and attach it to the canvas context
-      this.bc = new BoxConnector(this, this.$canvas.get(-1).getContext('2d'));
+      this.bc = new BoxConnector(this, this.$canvas);
 
       // Repaint all
       this.invalidate().update();

src/boxes/BoxConnector.js

@@ -47,12 +47,12 @@ export class BoxConnector {
   /**
    * BoxConnector constructor
    * @param {module:AWT.Container} parent - The Container to which this BoxConnector belongs
-   * @param {external:CanvasRenderingContext2D} ctx - The canvas rendering context where to draw
+   * @param {external:jQuery} $canvas - The HTML `canvas` element where this BoxConnector will draw.
    */
-  constructor(parent, ctx) {
+  constructor(parent, $canvas) {
     this.parent = parent;
-    this.ctx = ctx;
-    this.dim = new Dimension(ctx.canvas.width, ctx.canvas.height);
+    this.ctx = $canvas.get(-1).getContext('2d', { willReadFrequently: true });
+    this.dim = new Dimension(this.ctx.canvas.width, this.ctx.canvas.height);
     this.origin = new Point();
     this.dest = new Point();
     this.relativePos = new Point();