From f8b3fa5328c20bfeec928977b6c16aa3c89b926a Mon Sep 17 00:00:00 2001 From: ngxingyu Date: Wed, 5 Jan 2022 21:56:46 +0800 Subject: [PATCH] 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](https://github.com/konvajs/konva/compare/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] * - 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 (https://github.com/hustcc/jest-canvas-mock/issues/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 Co-authored-by: En Rong <53928333+chownces@users.noreply.github.com> --- craco.config.js | 2 +- package.json | 7 ++-- .../__tests__/SideContentEnvVisualizer.tsx | 4 +- .../envVisualizer/EnvVisualizerLayout.tsx | 3 +- .../envVisualizer/EnvVisualizerTypes.ts | 2 +- .../envVisualizer/EnvVisualizerUtils.ts | 15 ++++--- .../components/ArrayEmptyUnit.tsx | 2 +- .../components/ArrayNullUnit.tsx | 2 +- .../envVisualizer/components/ArrayUnit.tsx | 2 +- .../envVisualizer/components/Frame.tsx | 2 +- .../envVisualizer/components/Text.tsx | 2 +- .../components/arrows/GenericArrow.tsx | 2 +- .../components/shapes/RoundedRect.tsx | 2 +- .../components/values/FnValue.tsx | 2 +- .../components/values/GlobalFnValue.tsx | 2 +- src/setupTests.ts | 2 - yarn.lock | 40 +++---------------- 17 files changed, 32 insertions(+), 61 deletions(-) diff --git a/craco.config.js b/craco.config.js index a573d832d7..54d3fccf49 100644 --- a/craco.config.js +++ b/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'] = '/node_modules/ace-builds'; diff --git a/package.json b/package.json index 5b8d264fbb..5d4be8692e 100644 --- a/package.json +++ b/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" ] } -} +} \ No newline at end of file diff --git a/src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx b/src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx index 905205e049..69f2b00591 100644 --- a/src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx +++ b/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 = ; diff --git a/src/features/envVisualizer/EnvVisualizerLayout.tsx b/src/features/envVisualizer/EnvVisualizerLayout.tsx index a18823774f..95a63140c4 100644 --- a/src/features/envVisualizer/EnvVisualizerLayout.tsx +++ b/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'; diff --git a/src/features/envVisualizer/EnvVisualizerTypes.ts b/src/features/envVisualizer/EnvVisualizerTypes.ts index 53e67000de..c822d8134e 100644 --- a/src/features/envVisualizer/EnvVisualizerTypes.ts +++ b/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'; diff --git a/src/features/envVisualizer/EnvVisualizerUtils.ts b/src/features/envVisualizer/EnvVisualizerUtils.ts index 95fc22fb74..8073e76eab 100644 --- a/src/features/envVisualizer/EnvVisualizerUtils.ts +++ b/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, diff --git a/src/features/envVisualizer/components/ArrayEmptyUnit.tsx b/src/features/envVisualizer/components/ArrayEmptyUnit.tsx index 013b5a9c51..f544fbbdcb 100644 --- a/src/features/envVisualizer/components/ArrayEmptyUnit.tsx +++ b/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'; diff --git a/src/features/envVisualizer/components/ArrayNullUnit.tsx b/src/features/envVisualizer/components/ArrayNullUnit.tsx index 6ae56a1ea0..15be247b92 100644 --- a/src/features/envVisualizer/components/ArrayNullUnit.tsx +++ b/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'; diff --git a/src/features/envVisualizer/components/ArrayUnit.tsx b/src/features/envVisualizer/components/ArrayUnit.tsx index 577b17c8f8..341b0aec01 100644 --- a/src/features/envVisualizer/components/ArrayUnit.tsx +++ b/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'; diff --git a/src/features/envVisualizer/components/Frame.tsx b/src/features/envVisualizer/components/Frame.tsx index 4ab7d4efe4..b25dbb9e66 100644 --- a/src/features/envVisualizer/components/Frame.tsx +++ b/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'; diff --git a/src/features/envVisualizer/components/Text.tsx b/src/features/envVisualizer/components/Text.tsx index 6f711583bf..01dd24b864 100644 --- a/src/features/envVisualizer/components/Text.tsx +++ b/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'; diff --git a/src/features/envVisualizer/components/arrows/GenericArrow.tsx b/src/features/envVisualizer/components/arrows/GenericArrow.tsx index f7769de24a..98bce3e5b1 100644 --- a/src/features/envVisualizer/components/arrows/GenericArrow.tsx +++ b/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'; diff --git a/src/features/envVisualizer/components/shapes/RoundedRect.tsx b/src/features/envVisualizer/components/shapes/RoundedRect.tsx index 0c4c094c60..aa79fb79e9 100644 --- a/src/features/envVisualizer/components/shapes/RoundedRect.tsx +++ b/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'; diff --git a/src/features/envVisualizer/components/values/FnValue.tsx b/src/features/envVisualizer/components/values/FnValue.tsx index 173a441cd1..53a143803e 100644 --- a/src/features/envVisualizer/components/values/FnValue.tsx +++ b/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, diff --git a/src/features/envVisualizer/components/values/GlobalFnValue.tsx b/src/features/envVisualizer/components/values/GlobalFnValue.tsx index a5e7e11311..23df2e4b82 100644 --- a/src/features/envVisualizer/components/values/GlobalFnValue.tsx +++ b/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, diff --git a/src/setupTests.ts b/src/setupTests.ts index 2a29574ce4..d42e392be3 100644 --- a/src/setupTests.ts +++ b/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() }); diff --git a/yarn.lock b/yarn.lock index 26c5c58e2f..c137f003b0 100644 --- a/yarn.lock +++ b/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"