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..20c0795 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: false });
+ 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"