From 54680abba7d0a21bdab03ca655913b2169d2bd36 Mon Sep 17 00:00:00 2001
From: Ahmed Mohamed <mohamed@kuicr.kyoto-u.ac.jp>
Date: Mon, 27 Sep 2021 10:54:24 +1000
Subject: [PATCH 1/2] update d3 dependencies

---
 package.json  | 16 ++++++++--------
 src/layout.js |  7 +++----
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 173c0a9..4fe63c8 100644
--- a/package.json
+++ b/package.json
@@ -31,13 +31,13 @@
     "types/index.d.ts"
   ],
   "dependencies": {
-    "d3-array": "^2.5.0",
+    "d3-array": "3",
     "d3-cloud": "^1.2.5",
     "d3-dispatch": "^1.0.6",
     "d3-scale": "^3.2.1",
-    "d3-scale-chromatic": "^1.5.0",
-    "d3-selection": "^1.4.2",
-    "d3-transition": "^1.3.2",
+    "d3-scale-chromatic": "3",
+    "d3-selection": "3",
+    "d3-transition": "3",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
     "resize-observer-polyfill": "^1.5.1",
@@ -45,11 +45,11 @@
     "tippy.js": "^6.2.6"
   },
   "devDependencies": {
-    "@types/d3-array": "^2.0.0",
+    "@types/d3-array": "3",
     "@types/d3-cloud": "^1.2.3",
-    "@types/d3-scale": "^2.2.0",
-    "@types/d3-scale-chromatic": "^1.5.0",
-    "@types/d3-selection": "^1.4.1",
+    "@types/d3-scale": "3",
+    "@types/d3-scale-chromatic": "3",
+    "@types/d3-selection": "3",
     "@types/lodash.clonedeep": "^4.5.6",
     "@types/lodash.debounce": "^4.0.6",
     "@types/seedrandom": "^2.4.28",
diff --git a/src/layout.js b/src/layout.js
index 9bd83c8..db00538 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -2,7 +2,6 @@ import 'd3-transition';
 
 import { descending } from 'd3-array';
 import d3Cloud from 'd3-cloud';
-import { event } from 'd3-selection';
 import clonedeep from 'lodash.clonedeep';
 import seedrandom from 'seedrandom';
 import tippy from 'tippy.js';
@@ -46,12 +45,12 @@ export function render({ callbacks, options, random, selection, words }) {
     enter => {
       let text = enter
         .append('text')
-        .on('click', word => {
+        .on('click', (event, word) => {
           if (onWordClick) {
             onWordClick(word, event);
           }
         })
-        .on('mouseover', word => {
+        .on('mouseover', (event, word) => {
           if (
             enableTooltip &&
             (!tooltipInstance || tooltipInstance.isDestroyed)
@@ -72,7 +71,7 @@ export function render({ callbacks, options, random, selection, words }) {
             onWordMouseOver(word, event);
           }
         })
-        .on('mouseout', word => {
+        .on('mouseout', (event, word) => {
           if (tooltipInstance && !tooltipInstance.state.isVisible) {
             tooltipInstance.destroy();
           }

From 78cf25de0fcd422d935b06e557fc199cc127673c Mon Sep 17 00:00:00 2001
From: Ahmed Mohamed <amfy10@gmail.com>
Date: Fri, 6 Jan 2023 03:12:30 +1100
Subject: [PATCH 2/2] Add willReadFrequently option to fix chrome warnings.

---
 src/optimized-d3-cloud.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/optimized-d3-cloud.js b/src/optimized-d3-cloud.js
index 1b819b6..4dba74e 100644
--- a/src/optimized-d3-cloud.js
+++ b/src/optimized-d3-cloud.js
@@ -128,7 +128,7 @@ export default function Cloud() {
   function getContext(canvas) {
     canvas.width = canvas.height = 1;
     const ratio = Math.sqrt(
-      canvas.getContext('2d').getImageData(0, 0, 1, 1).data.length >> 2,
+      canvas.getContext('2d', { willReadFrequently: true }).getImageData(0, 0, 1, 1).data.length >> 2,
     );
     canvas.width = (cw << 5) / ratio;
     canvas.height = ch / ratio;
@@ -344,7 +344,7 @@ function cloudSprite(contextAndRatio, d, data, di) {
     d.hasText = true;
     x += w;
   }
-  const pixels = c.getImageData(0, 0, (cw << 5) / ratio, ch / ratio).data,
+  const pixels = c.getImageData(0, 0, (cw << 5) / ratio, ch / ratio,).data,
     sprite = [];
   while (--di >= 0) {
     d = data[di];