From c23b74ce8de06fdd6537b4b9cdcbf71ff9a95095 Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Wed, 18 Aug 2021 15:18:47 +0200 Subject: [PATCH 1/2] update blockly core and plugins closes #97 --- package-lock.json | 66 +++++++++----- package.json | 7 +- src/components/Blockly/BlocklyComponent.jsx | 99 ++++++++++++--------- src/components/Blockly/BlocklyWindow.js | 6 +- yarn.lock | 29 +++--- 5 files changed, 126 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index a145332..6709fe6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,8 +10,9 @@ "dependencies": { "@blockly/block-plus-minus": "^2.0.10", "@blockly/field-slider": "^2.1.1", - "@blockly/plugin-typed-variable-modal": "^3.1.1", - "@blockly/zoom-to-fit": "^1.0.5", + "@blockly/plugin-scroll-options": "^1.0.2", + "@blockly/plugin-typed-variable-modal": "^3.1.26", + "@blockly/zoom-to-fit": "^2.0.7", "@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/free-solid-svg-icons": "^5.14.0", "@fortawesome/react-fontawesome": "^0.1.11", @@ -22,7 +23,7 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.21.0", - "blockly": "^5.20210325.1", + "blockly": "^6.20210701.0", "file-saver": "^2.0.2", "mnemonic-id": "^3.2.7", "moment": "^2.28.0", @@ -1478,26 +1479,40 @@ "node": ">=8.17.0" } }, + "node_modules/@blockly/plugin-scroll-options": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@blockly/plugin-scroll-options/-/plugin-scroll-options-1.0.2.tgz", + "integrity": "sha512-j0ehQlHv/0EWPw8UQEplGs4jCxfo45yp6ZzxYxReMirM0/j4EXXFvgXTZoruPgRYgMl+pCwya32Z6Dkv19sURA==", + "engines": { + "node": ">=8.17.0" + }, + "peerDependencies": { + "blockly": "^6.20210701.0" + } + }, "node_modules/@blockly/plugin-typed-variable-modal": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.1.tgz", - "integrity": "sha512-+g/lQ3HrCcivBNOtgvQEvfZCPq9VeP1Zgs7J02zxAfw4f+s4aOQb+hChv7qAb5AnzEnMk0BoB5vKgQmaP6Wkuw==", + "version": "3.1.26", + "resolved": "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.26.tgz", + "integrity": "sha512-3aKdr/NkcyH93zt0etnmR+urZ3csHbhqyUBn9Q8r/w6GNm54S8s916B921YnGFUBtnWnUEzieMHRAt5KveSKug==", "dependencies": { "@blockly/plugin-modal": "^1.20200427.4" }, "engines": { "node": ">=8.17.0" + }, + "peerDependencies": { + "blockly": "3.20200625.0 - 6" } }, "node_modules/@blockly/zoom-to-fit": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-1.0.5.tgz", - "integrity": "sha512-+dm8bpJB0AkrEMQPr7nEMYKiEA8Loh7V8ZVa0s25PkxGP9BLqt9NIxUCQjshInhCr11Dlctq7C7noqK+tTVS4w==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-2.0.7.tgz", + "integrity": "sha512-ZMY6k1V97B3IwBWcbxFlpKwKtfWg2vmJuLfmdIymrJQZtswRyY303F1JOl1G1+zsCKeyW/FVo/ysrSDZTIaRCQ==", "engines": { "node": ">=8.17.0" }, "peerDependencies": { - "blockly": ">=5.20210325.0" + "blockly": "^6.20210701.0" } }, "node_modules/@cnakazawa/watch": { @@ -5878,10 +5893,9 @@ } }, "node_modules/blockly": { - "version": "5.20210325.1", - "resolved": "https://registry.npmjs.org/blockly/-/blockly-5.20210325.1.tgz", - "integrity": "sha512-qrilYPovJeDfxKDWm1YBUCPVNElh/iyC1szaHTIPZHj9C9YPpSzZOeFyyrPBbYRudzbo8kjBOWMtHnN1bLjkoQ==", - "license": "Apache-2.0", + "version": "6.20210701.0", + "resolved": "https://registry.npmjs.org/blockly/-/blockly-6.20210701.0.tgz", + "integrity": "sha512-cNrwFOAxXE5Pbs1FJAyLTlSRzpNW/C+0gPT2rGQDOJVVKcyF3vhFC1StgnxvQNsv//ueuksKWIXxDuSWh1VI4w==", "dependencies": { "jsdom": "15.2.1" } @@ -26230,18 +26244,24 @@ "resolved": "https://registry.npmjs.org/@blockly/plugin-modal/-/plugin-modal-1.20200427.4.tgz", "integrity": "sha512-eA9p+W3mtcWLJQZ23D0Le/Uw3JdxFxwJqTUYtAiRlVON4qnuDXrHQLlvxEiWctNXJZGUTh57zqbvO6ZxNRQPrA==" }, + "@blockly/plugin-scroll-options": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@blockly/plugin-scroll-options/-/plugin-scroll-options-1.0.2.tgz", + "integrity": "sha512-j0ehQlHv/0EWPw8UQEplGs4jCxfo45yp6ZzxYxReMirM0/j4EXXFvgXTZoruPgRYgMl+pCwya32Z6Dkv19sURA==", + "requires": {} + }, "@blockly/plugin-typed-variable-modal": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.1.tgz", - "integrity": "sha512-+g/lQ3HrCcivBNOtgvQEvfZCPq9VeP1Zgs7J02zxAfw4f+s4aOQb+hChv7qAb5AnzEnMk0BoB5vKgQmaP6Wkuw==", + "version": "3.1.26", + "resolved": "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.26.tgz", + "integrity": "sha512-3aKdr/NkcyH93zt0etnmR+urZ3csHbhqyUBn9Q8r/w6GNm54S8s916B921YnGFUBtnWnUEzieMHRAt5KveSKug==", "requires": { "@blockly/plugin-modal": "^1.20200427.4" } }, "@blockly/zoom-to-fit": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-1.0.5.tgz", - "integrity": "sha512-+dm8bpJB0AkrEMQPr7nEMYKiEA8Loh7V8ZVa0s25PkxGP9BLqt9NIxUCQjshInhCr11Dlctq7C7noqK+tTVS4w==", + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-2.0.7.tgz", + "integrity": "sha512-ZMY6k1V97B3IwBWcbxFlpKwKtfWg2vmJuLfmdIymrJQZtswRyY303F1JOl1G1+zsCKeyW/FVo/ysrSDZTIaRCQ==", "requires": {} }, "@cnakazawa/watch": { @@ -29654,9 +29674,9 @@ } }, "blockly": { - "version": "5.20210325.1", - "resolved": "https://registry.npmjs.org/blockly/-/blockly-5.20210325.1.tgz", - "integrity": "sha512-qrilYPovJeDfxKDWm1YBUCPVNElh/iyC1szaHTIPZHj9C9YPpSzZOeFyyrPBbYRudzbo8kjBOWMtHnN1bLjkoQ==", + "version": "6.20210701.0", + "resolved": "https://registry.npmjs.org/blockly/-/blockly-6.20210701.0.tgz", + "integrity": "sha512-cNrwFOAxXE5Pbs1FJAyLTlSRzpNW/C+0gPT2rGQDOJVVKcyF3vhFC1StgnxvQNsv//ueuksKWIXxDuSWh1VI4w==", "requires": { "jsdom": "15.2.1" }, diff --git a/package.json b/package.json index 8428926..059976d 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,9 @@ "dependencies": { "@blockly/block-plus-minus": "^2.0.10", "@blockly/field-slider": "^2.1.1", - "@blockly/plugin-typed-variable-modal": "^3.1.1", - "@blockly/zoom-to-fit": "^1.0.5", + "@blockly/plugin-scroll-options": "^1.0.2", + "@blockly/plugin-typed-variable-modal": "^3.1.26", + "@blockly/zoom-to-fit": "^2.0.7", "@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/free-solid-svg-icons": "^5.14.0", "@fortawesome/react-fontawesome": "^0.1.11", @@ -17,7 +18,7 @@ "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.21.0", - "blockly": "^5.20210325.1", + "blockly": "^6.20210701.0", "file-saver": "^2.0.2", "mnemonic-id": "^3.2.7", "moment": "^2.28.0", diff --git a/src/components/Blockly/BlocklyComponent.jsx b/src/components/Blockly/BlocklyComponent.jsx index 9e68f5a..2f8a6df 100644 --- a/src/components/Blockly/BlocklyComponent.jsx +++ b/src/components/Blockly/BlocklyComponent.jsx @@ -21,55 +21,74 @@ * @author samelh@google.com (Sam El-Husseini) */ -import React from 'react'; - -import Blockly from 'blockly/core'; -import 'blockly/blocks'; -import Toolbox from './toolbox/Toolbox'; - -import { Card } from '@material-ui/core'; +import React from "react"; +import Blockly from "blockly/core"; +import "blockly/blocks"; +import Toolbox from "./toolbox/Toolbox"; +import { Card } from "@material-ui/core"; +import { + ScrollOptions, + ScrollBlockDragger, + ScrollMetricsManager, +} from "@blockly/plugin-scroll-options"; class BlocklyComponent extends React.Component { + constructor(props) { + super(props); + this.blocklyDiv = React.createRef(); + this.toolbox = React.createRef(); + this.state = { workspace: undefined }; + } - constructor(props) { - super(props); - this.blocklyDiv = React.createRef(); - this.toolbox = React.createRef(); - this.state = { workspace: undefined }; + componentDidMount() { + const { initialXml, children, ...rest } = this.props; + this.primaryWorkspace = Blockly.inject(this.blocklyDiv.current, { + toolbox: this.toolbox.current, + plugins: { + // These are both required. + blockDragger: ScrollBlockDragger, + metricsManager: ScrollMetricsManager, + }, + ...rest, + }); + // Initialize plugin. + + this.setState({ workspace: this.primaryWorkspace }); + const plugin = new ScrollOptions(this.workspace); + plugin.init({ enableWheelScroll: true, enableEdgeScroll: true }); + if (initialXml) { + Blockly.Xml.domToWorkspace( + Blockly.Xml.textToDom(initialXml), + this.primaryWorkspace + ); } + } - componentDidMount() { - const { initialXml, children, ...rest } = this.props; - this.primaryWorkspace = Blockly.inject( - this.blocklyDiv.current, - { - toolbox: this.toolbox.current, - ...rest - }, - ); - this.setState({ workspace: this.primaryWorkspace }) + get workspace() { + return this.primaryWorkspace; + } - if (initialXml) { - Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(initialXml), this.primaryWorkspace); - } - } + setXml(xml) { + Blockly.Xml.domToWorkspace( + Blockly.Xml.textToDom(xml), + this.primaryWorkspace + ); + } - get workspace() { - return this.primaryWorkspace; - } - - setXml(xml) { - Blockly.Xml.domToWorkspace(Blockly.Xml.textToDom(xml), this.primaryWorkspace); - } - - render() { - return - - - ; - } + render() { + return ( + + + + + ); + } } export default BlocklyComponent; diff --git a/src/components/Blockly/BlocklyWindow.js b/src/components/Blockly/BlocklyWindow.js index 914d5f6..94f9d64 100644 --- a/src/components/Blockly/BlocklyWindow.js +++ b/src/components/Blockly/BlocklyWindow.js @@ -100,7 +100,7 @@ class BlocklyWindow extends Component { // https://developers.google.com/blockly/guides/configure/web/move scrollbars: true, drag: true, - wheel: false, + wheel: true, } } initialXml={ @@ -119,12 +119,12 @@ BlocklyWindow.propTypes = { onChangeWorkspace: PropTypes.func.isRequired, clearStats: PropTypes.func.isRequired, renderer: PropTypes.string.isRequired, - language: PropTypes.string.isRequired + language: PropTypes.string.isRequired, }; const mapStateToProps = (state) => ({ renderer: state.general.renderer, - language: state.general.language + language: state.general.language, }); export default connect(mapStateToProps, { onChangeWorkspace, clearStats })( diff --git a/yarn.lock b/yarn.lock index f2e22a0..77be97f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1142,17 +1142,22 @@ "resolved" "https://registry.npmjs.org/@blockly/plugin-modal/-/plugin-modal-1.20200427.4.tgz" "version" "1.20200427.4" -"@blockly/plugin-typed-variable-modal@^3.1.1": - "integrity" "sha512-+g/lQ3HrCcivBNOtgvQEvfZCPq9VeP1Zgs7J02zxAfw4f+s4aOQb+hChv7qAb5AnzEnMk0BoB5vKgQmaP6Wkuw==" - "resolved" "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.1.tgz" - "version" "3.1.1" +"@blockly/plugin-scroll-options@^1.0.2": + "integrity" "sha512-j0ehQlHv/0EWPw8UQEplGs4jCxfo45yp6ZzxYxReMirM0/j4EXXFvgXTZoruPgRYgMl+pCwya32Z6Dkv19sURA==" + "resolved" "https://registry.npmjs.org/@blockly/plugin-scroll-options/-/plugin-scroll-options-1.0.2.tgz" + "version" "1.0.2" + +"@blockly/plugin-typed-variable-modal@^3.1.26": + "integrity" "sha512-3aKdr/NkcyH93zt0etnmR+urZ3csHbhqyUBn9Q8r/w6GNm54S8s916B921YnGFUBtnWnUEzieMHRAt5KveSKug==" + "resolved" "https://registry.npmjs.org/@blockly/plugin-typed-variable-modal/-/plugin-typed-variable-modal-3.1.26.tgz" + "version" "3.1.26" dependencies: "@blockly/plugin-modal" "^1.20200427.4" -"@blockly/zoom-to-fit@^1.0.5": - "integrity" "sha512-+dm8bpJB0AkrEMQPr7nEMYKiEA8Loh7V8ZVa0s25PkxGP9BLqt9NIxUCQjshInhCr11Dlctq7C7noqK+tTVS4w==" - "resolved" "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-1.0.5.tgz" - "version" "1.0.5" +"@blockly/zoom-to-fit@^2.0.7": + "integrity" "sha512-ZMY6k1V97B3IwBWcbxFlpKwKtfWg2vmJuLfmdIymrJQZtswRyY303F1JOl1G1+zsCKeyW/FVo/ysrSDZTIaRCQ==" + "resolved" "https://registry.npmjs.org/@blockly/zoom-to-fit/-/zoom-to-fit-2.0.7.tgz" + "version" "2.0.7" "@cnakazawa/watch@^1.0.3": "integrity" "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==" @@ -3129,10 +3134,10 @@ dependencies: "file-uri-to-path" "1.0.0" -"blockly@^5.20210325.1", "blockly@>=5.20210325.0": - "integrity" "sha512-qrilYPovJeDfxKDWm1YBUCPVNElh/iyC1szaHTIPZHj9C9YPpSzZOeFyyrPBbYRudzbo8kjBOWMtHnN1bLjkoQ==" - "resolved" "https://registry.npmjs.org/blockly/-/blockly-5.20210325.1.tgz" - "version" "5.20210325.1" +"blockly@^6.20210701.0", "blockly@3.20200625.0 - 6": + "integrity" "sha512-cNrwFOAxXE5Pbs1FJAyLTlSRzpNW/C+0gPT2rGQDOJVVKcyF3vhFC1StgnxvQNsv//ueuksKWIXxDuSWh1VI4w==" + "resolved" "https://registry.npmjs.org/blockly/-/blockly-6.20210701.0.tgz" + "version" "6.20210701.0" dependencies: "jsdom" "15.2.1" From 2a9eecd76bbcd99e691add6828f0939c2790852e Mon Sep 17 00:00:00 2001 From: Mario Pesch Date: Fri, 20 Aug 2021 10:42:37 +0200 Subject: [PATCH 2/2] prevent edgeScroll --- src/components/Blockly/BlocklyComponent.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Blockly/BlocklyComponent.jsx b/src/components/Blockly/BlocklyComponent.jsx index 2f8a6df..20c0795 100644 --- a/src/components/Blockly/BlocklyComponent.jsx +++ b/src/components/Blockly/BlocklyComponent.jsx @@ -57,7 +57,7 @@ class BlocklyComponent extends React.Component { this.setState({ workspace: this.primaryWorkspace }); const plugin = new ScrollOptions(this.workspace); - plugin.init({ enableWheelScroll: true, enableEdgeScroll: true }); + plugin.init({ enableWheelScroll: true, enableEdgeScroll: false }); if (initialXml) { Blockly.Xml.domToWorkspace( Blockly.Xml.textToDom(initialXml),