Upgrade konva to latest version (#2044)

* Bump konva from 7.2.5 to 8.2.3

Bumps [konva](https://github.com/konvajs/konva) from 7.2.5 to 8.2.3.
- [Release notes](https://github.com/konvajs/konva/releases)
- [Changelog](https://github.com/konvajs/konva/blob/master/CHANGELOG.md)
- [Commits](konvajs/konva@7.2.5...8.2.3)

---
updated-dependencies:
- dependency-name: konva
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* - Removed konva-node since "merged into konva" in 8.0.0
- Changed konva import path
- Fix target type for setHoveredStyle from Node to Node | Group
- Fix imports
- Some issue with jest-canvas-mock (hustcc/jest-canvas-mock#72) so replaced it with canvas

* added missing Group type

* Upgrade konva to latest version

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Martin Henz <henz@comp.nus.edu.sg>
Co-authored-by: En Rong <53928333+chownces@users.noreply.github.com>

craco.config.js

@@ -45,7 +45,7 @@ const cracoConfig = (module.exports = {
   jest: {
     configure: jestConfig => {
       jestConfig.transformIgnorePatterns = [
-        '[/\\\\]node_modules[/\\\\](?!(@ion-phaser[/\\\\]react[/\\\\])|(array-move[/\\\\])).*\\.(js|jsx|ts|tsx)$',
+        '[/\\\\]node_modules[/\\\\](?!(@ion-phaser[/\\\\]react[/\\\\])|(array-move[/\\\\])|(konva[/\\\\.*])|(react-konva[/\\\\.*])).*\\.(js|jsx|ts|tsx)$',
         '^.+\\.module\\.(css|sass|scss)$'
       ];
       jestConfig.moduleNameMapper['ace-builds'] = '<rootDir>/node_modules/ace-builds';

package.json

@@ -45,7 +45,7 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "js-slang": "^0.5.23",
-    "konva": "^7.2.5",
+    "konva": "^8.3.1",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
     "moment": "^2.29.1",
@@ -116,14 +116,13 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
+    "canvas": "^2.8.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
     "eslint": "7",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "husky": "^7.0.4",
-    "jest-canvas-mock": "^2.3.1",
-    "konva-node": "^0.11.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "react-scripts": "^4.0.3",
@@ -144,4 +143,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx

@@ -9,9 +9,7 @@ import SideContentEnvVisualizer from '../SideContentEnvVisualizer';
  * This is to fix some weird bug with Jest and Konva
  * See https://github.com/konvajs/konva/issues/200
  */
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Konva = require('konva-node');
-Konva.isBrowser = false;
+// Konva.isBrowser = false;
 
 test('EnvVisualizer component renders correctly', () => {
   const app = <SideContentEnvVisualizer />;

src/features/envVisualizer/EnvVisualizerLayout.tsx

@@ -1,8 +1,7 @@
 import { Context } from 'js-slang';
 import { Frame } from 'js-slang/dist/types';
 import React from 'react';
-import { Rect } from 'react-konva';
-import { Layer, Stage } from 'react-konva';
+import { Layer, Rect, Stage } from 'react-konva';
 
 import { Level } from './components/Level';
 import { ArrayValue } from './components/values/ArrayValue';

src/features/envVisualizer/EnvVisualizerTypes.ts

@@ -3,7 +3,7 @@ import {
   EnvTreeNode as EnvironmentTreeNode
 } from 'js-slang/dist/createContext';
 import { Environment } from 'js-slang/dist/types';
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 
 import { ArrayUnit } from './components/ArrayUnit';
 import { Binding } from './components/Binding';

src/features/envVisualizer/EnvVisualizerUtils.ts

@@ -1,5 +1,7 @@
 import { Environment } from 'js-slang/dist/types';
-import { Node } from 'konva/types/Node';
+import { Group } from 'konva/lib/Group';
+import { Node } from 'konva/lib/Node';
+import { Shape } from 'konva/lib/Shape';
 import { cloneDeep } from 'lodash';
 
 import { Value } from './components/values/Value';
@@ -178,11 +180,12 @@ export function getBodyText(data: () => any): string {
 }
 
 /** Updates the styles of a Konva node and its children on hover, and then redraw the layer */
-export function setHoveredStyle(target: Node, hoveredAttrs: any = {}): void {
+export function setHoveredStyle(target: Node | Group, hoveredAttrs: any = {}): void {
   const container = target.getStage()?.container();
   container && (container.style.cursor = 'pointer');
 
-  const nodes = Array.from(target.children);
+  const nodes: (Group | Shape | Node)[] =
+    target instanceof Group ? Array.from(target.children || []) : [];
   nodes.push(target);
   nodes.forEach(node => {
     node.setAttrs({
@@ -202,12 +205,14 @@ export function setHoveredStyle(target: Node, hoveredAttrs: any = {}): void {
 }
 
 /** Updates the styles of a Konva node and its children on unhover, and then redraw the layer */
-export function setUnhoveredStyle(target: Node, unhoveredAttrs: any = {}): void {
+export function setUnhoveredStyle(target: Node | Group, unhoveredAttrs: any = {}): void {
   const container = target.getStage()?.container();
   container && (container.style.cursor = 'default');
 
-  const nodes = Array.from(target.children);
+  const nodes: (Group | Shape | Node)[] =
+    target instanceof Group ? Array.from(target.children || []) : [];
   nodes.push(target);
+
   nodes.forEach(node => {
     node.setAttrs({
       stroke: node.attrs.stroke ? Config.SA_WHITE.toString() : node.attrs.stroke,

src/features/envVisualizer/components/ArrayEmptyUnit.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Rect } from 'react-konva';
 

src/features/envVisualizer/components/ArrayNullUnit.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Line as KonvaLine } from 'react-konva';
 import { setHoveredStyle, setUnhoveredStyle } from 'src/features/envVisualizer/EnvVisualizerUtils';

src/features/envVisualizer/components/ArrayUnit.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 
 import { Config } from '../EnvVisualizerConfig';

src/features/envVisualizer/components/Frame.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Rect } from 'react-konva';
 

src/features/envVisualizer/components/Text.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import { Label as KonvaLabel, Tag as KonvaTag, Text as KonvaText } from 'react-konva';
 

src/features/envVisualizer/components/arrows/GenericArrow.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import { Arrow as KonvaArrow } from 'react-konva';
 
 import { Config, ShapeDefaultProps } from '../../EnvVisualizerConfig';

src/features/envVisualizer/components/shapes/RoundedRect.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Shape } from 'react-konva';
 

src/features/envVisualizer/components/values/FnValue.tsx

@@ -1,5 +1,5 @@
 import { Environment } from 'js-slang/dist/types';
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import {
   Circle,

src/features/envVisualizer/components/values/GlobalFnValue.tsx

@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import {
   Circle,

src/setupTests.ts

@@ -1,5 +1,3 @@
-import 'jest-canvas-mock';
-
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { configure } from 'enzyme';
 configure({ adapter: new Adapter() });

yarn.lock

@@ -3944,7 +3944,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz#4849f27b101fd59ddee3751598c663801032533d"
   integrity sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==
 
-canvas@^2.5.0:
+canvas@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.8.0.tgz#f99ca7f25e6e26686661ffa4fec1239bbef74461"
   integrity sha512-gLTi17X8WY9Cf5GZ2Yns8T5lfBOcGgFehDFb+JQwDqdOoBOcECS9ZWMEAqMSVcMYwXD659J8NyzjRY/2aE+C2Q==
@@ -4222,7 +4222,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -4733,11 +4733,6 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssfontparser@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
-  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
-
 cssnano-preset-default@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
@@ -7690,14 +7685,6 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-jest-canvas-mock@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.1.tgz#9535d14bc18ccf1493be36ac37dd349928387826"
-  integrity sha512-5FnSZPrX3Q2ZfsbYNE3wqKR3+XorN8qFzDzB5o0golWgt6EOX1+emBnpOc9IAQ+NXFj8Nzm3h7ZdE/9H0ylBcg==
-  dependencies:
-    cssfontparser "^1.2.1"
-    moo-color "^1.0.2"
-
 jest-changed-files@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
@@ -8384,18 +8371,10 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
-konva-node@^0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/konva-node/-/konva-node-0.11.2.tgz#d5637e90e18fd6c579e92bfc6ae5b0e7df49128e"
-  integrity sha512-puuzsIT+ykOBRWK6+M6TNyZnhqQKTiIK82GQdeTummog16WB+Fi/98vqMQGP9SIu2wp816lc04uK6TJ82HOuLQ==
-  dependencies:
-    canvas "^2.5.0"
-    konva "^7"
-
-konva@^7, konva@^7.2.5:
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/konva/-/konva-7.2.5.tgz#9b4ac3a353e6be66e3e69123bf2a0cbc61efeb26"
-  integrity sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew==
+konva@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/konva/-/konva-8.3.1.tgz#9243cbfada641fdda166446c61cbfc1b6bf00217"
+  integrity sha512-9YVM/nKWKTdGppPkhVY+E1FI+brrSmPygPO1qUSH2Dd7q0bgCX8V9DLqOp15myY7Wxmy5JDx9dWdd0fQZpikZw==
 
 language-subtag-registry@~0.3.2:
   version "0.3.21"
@@ -8977,13 +8956,6 @@ moment@^2.29.1:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-moo-color@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
-  integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
-  dependencies:
-    color-name "^1.1.4"
-
 moo@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"