mirror of
https://gitcode.com/gh_mirrors/hy/Hydro.git
synced 2026-10-17 17:36:08 +08:00
ui: blockly: draft
This commit is contained in:
1 parent
9a173e0d37
commit
9a67e81b10
5 files changed
+371
-5
No files matched your search
@@ -9,8 +9,11 @@ export const providers: Record<string, AvatarProvider> = {
|
||||
url: (url) => url,
|
||||
};
|
||||
|
||||
function avatar(src: string, size = 64) {
|
||||
const index = (src || '').indexOf(':');
|
||||
function avatar(src: string, size = 64, fallback = '') {
|
||||
src = src || fallback;
|
||||
let index = src.indexOf(':');
|
||||
if (index === -1) src = fallback;
|
||||
index = src.indexOf(':');
|
||||
if (index === -1) return providers.gravatar('', size);
|
||||
const [provider, str] = [src.substr(0, index), src.substr(index + 1, src.length)];
|
||||
if (!providers[provider] || !str) return providers.gravatar('', size);
|
||||
|
||||
@@ -22,9 +22,22 @@ const mapDispatchToProps = (dispatch) => ({
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor extends React.PureComponent {
|
||||
disposable = [];
|
||||
|
||||
blockly = false;
|
||||
|
||||
componentDidMount() {
|
||||
const value = this.props.value || '';
|
||||
const { language, theme } = this.props;
|
||||
if (this.props.language === 'blockly') {
|
||||
if (!this.blockly) {
|
||||
import('./blockly.jsx').then(({ default: Blockly }) => {
|
||||
if (!this.blockly) return;
|
||||
Blockly.inject(this.containerElement, {
|
||||
});
|
||||
});
|
||||
}
|
||||
this.blockly = true;
|
||||
return;
|
||||
}
|
||||
this.model = monaco.editor.createModel(value, language, monaco.Uri.parse('file://model'));
|
||||
if (this.containerElement) {
|
||||
/** @type {monaco.editor.IStandaloneEditorConstructionOptions} */
|
||||
@@ -49,11 +62,23 @@ export default connect(mapStateToProps, mapDispatchToProps)(class MonacoEditor e
|
||||
localStorage.setItem('scratchpad.editor.fontSize', current);
|
||||
})
|
||||
);
|
||||
window.editor = this.editor;
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.language === 'blockly') {
|
||||
if (!this.blockly) {
|
||||
this.editor.dispose();
|
||||
import('./blockly.jsx').then(({ default: Blockly, toolbox }) => {
|
||||
if (!this.blockly) return;
|
||||
Blockly.inject(this.containerElement, {
|
||||
toolbox,
|
||||
});
|
||||
});
|
||||
}
|
||||
this.blockly = true;
|
||||
return;
|
||||
}
|
||||
const {
|
||||
value, language, theme, mainSize, recordSize, pretestSize,
|
||||
} = this.props;
|
||||
|
||||
@@ -0,0 +1,337 @@
|
||||
import ReactDOMServer from 'react-dom/server';
|
||||
import * as Blockly from 'blockly/core';
|
||||
import 'blockly/blocks';
|
||||
import 'blockly/python';
|
||||
import 'blockly/javascript';
|
||||
import 'blockly/php';
|
||||
import * as zhHans from 'blockly/msg/zh-hans';
|
||||
import * as zhHant from 'blockly/msg/zh-hant';
|
||||
import * as ko from 'blockly/msg/ko';
|
||||
import * as en from 'blockly/msg/en';
|
||||
|
||||
const locales = {
|
||||
zh: zhHans,
|
||||
zh_CN: zhHans,
|
||||
zh_TW: zhHant,
|
||||
ko,
|
||||
ko_KR: ko,
|
||||
en,
|
||||
en_US: en,
|
||||
};
|
||||
|
||||
Blockly.setLocale(locales[UserContext.viewLang] || locales.en);
|
||||
|
||||
export default Blockly;
|
||||
export const toolbox = ReactDOMServer.renderToString(
|
||||
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox">
|
||||
<category name="Logic" colour="%{BKY_LOGIC_HUE}">
|
||||
<category name="If">
|
||||
<block type="controls_if"></block>
|
||||
<block type="controls_if">
|
||||
<mutation else="1"></mutation>
|
||||
</block>
|
||||
<block type="controls_if">
|
||||
<mutation elseif="1" else="1"></mutation>
|
||||
</block>
|
||||
</category>
|
||||
<category name="Boolean" colour="%{BKY_LOGIC_HUE}">
|
||||
<block type="logic_compare"></block>
|
||||
<block type="logic_operation"></block>
|
||||
<block type="logic_negate"></block>
|
||||
<block type="logic_boolean"></block>
|
||||
<block type="logic_null"></block>
|
||||
<block type="logic_ternary"></block>
|
||||
</category>
|
||||
</category>
|
||||
<category name="Loops" colour="%{BKY_LOOPS_HUE}">
|
||||
<block type="controls_repeat_ext">
|
||||
<value name="TIMES">
|
||||
<block type="math_number">
|
||||
<field name="NUM">10</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="controls_whileUntil"></block>
|
||||
<block type="controls_for">
|
||||
<field name="VAR">i</field>
|
||||
<value name="FROM">
|
||||
<block type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<block type="math_number">
|
||||
<field name="NUM">10</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="BY">
|
||||
<block type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="controls_forEach"></block>
|
||||
<block type="controls_flow_statements"></block>
|
||||
</category>
|
||||
<category name="Math" colour="%{BKY_MATH_HUE}">
|
||||
<block type="math_number">
|
||||
<field name="NUM">123</field>
|
||||
</block>
|
||||
<block type="math_arithmetic"></block>
|
||||
<block type="math_single"></block>
|
||||
<block type="math_trig"></block>
|
||||
<block type="math_constant"></block>
|
||||
<block type="math_number_property"></block>
|
||||
<block type="math_round"></block>
|
||||
<block type="math_on_list"></block>
|
||||
<block type="math_modulo"></block>
|
||||
<block type="math_constrain">
|
||||
<value name="LOW">
|
||||
<block type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="HIGH">
|
||||
<block type="math_number">
|
||||
<field name="NUM">100</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_random_int">
|
||||
<value name="FROM">
|
||||
<block type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<block type="math_number">
|
||||
<field name="NUM">100</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_random_float"></block>
|
||||
<block type="math_atan2"></block>
|
||||
</category>
|
||||
<category name="Lists" colour="%{BKY_LISTS_HUE}">
|
||||
<block type="lists_create_empty"></block>
|
||||
<block type="lists_create_with"></block>
|
||||
<block type="lists_repeat">
|
||||
<value name="NUM">
|
||||
<block type="math_number">
|
||||
<field name="NUM">5</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lists_length"></block>
|
||||
<block type="lists_isEmpty"></block>
|
||||
<block type="lists_indexOf"></block>
|
||||
<block type="lists_getIndex"></block>
|
||||
<block type="lists_setIndex"></block>
|
||||
</category>
|
||||
<sep></sep>
|
||||
<category name="Variables" custom="VARIABLE" colour="%{BKY_VARIABLES_HUE}">
|
||||
</category>
|
||||
<category name="Functions" custom="PROCEDURE" colour="%{BKY_PROCEDURES_HUE}">
|
||||
</category>
|
||||
<sep></sep>
|
||||
<category name="Library" expanded="true">
|
||||
<category name="Randomize">
|
||||
<block type="procedures_defnoreturn">
|
||||
<mutation>
|
||||
<arg name="list"></arg>
|
||||
</mutation>
|
||||
<field name="NAME">randomize</field>
|
||||
<statement name="STACK">
|
||||
<block type="controls_for" inline="true">
|
||||
<field name="VAR">x</field>
|
||||
<value name="FROM">
|
||||
<block type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<block type="lists_length" inline="false">
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</value>
|
||||
<value name="BY">
|
||||
<block type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</block>
|
||||
</value>
|
||||
<statement name="DO">
|
||||
<block type="variables_set" inline="false">
|
||||
<field name="VAR">y</field>
|
||||
<value name="VALUE">
|
||||
<block type="math_random_int" inline="true">
|
||||
<value name="FROM">
|
||||
<block type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<block type="lists_length" inline="false">
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="variables_set" inline="false">
|
||||
<field name="VAR">temp</field>
|
||||
<value name="VALUE">
|
||||
<block type="lists_getIndex" inline="true">
|
||||
<mutation statement="false" at="true"></mutation>
|
||||
<field name="MODE">GET</field>
|
||||
<field name="WHERE">FROM_START</field>
|
||||
<value name="AT">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">y</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="lists_setIndex" inline="false">
|
||||
<value name="AT">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">y</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="LIST">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<block type="lists_getIndex" inline="true">
|
||||
<mutation statement="false" at="true"></mutation>
|
||||
<field name="MODE">GET</field>
|
||||
<field name="WHERE">FROM_START</field>
|
||||
<value name="AT">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">x</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="lists_setIndex" inline="false">
|
||||
<value name="AT">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">x</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="LIST">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">temp</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</statement>
|
||||
</block>
|
||||
</statement>
|
||||
</block>
|
||||
</category>
|
||||
<category name="Jabberwocky">
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT">'Twas brillig, and the slithy toves</field>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT"> Did gyre and gimble in the wabe:</field>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT">All mimsy were the borogroves,</field>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT"> And the mome raths outgrabe.</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT">"Beware the Jabberwock, my son!</field>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT"> The jaws that bite, the claws that catch!</field>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT">Beware the Jubjub bird, and shun</field>
|
||||
</block>
|
||||
</value>
|
||||
<next>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<block type="text">
|
||||
<field name="TEXT"> The frumious Bandersnatch!"</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</category>
|
||||
</category>
|
||||
</xml>
|
||||
);
|
||||
@@ -23,6 +23,7 @@
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"@babel/register": "^7.14.5",
|
||||
"@babel/runtime-corejs3": "^7.14.7",
|
||||
"@blockly/block-extension-tooltip": "^1.0.13",
|
||||
"@blueprintjs/core": "^3.47.0",
|
||||
"@blueprintjs/icons": "^3.27.0",
|
||||
"@blueprintjs/select": "^3.16.6",
|
||||
@@ -35,6 +36,7 @@
|
||||
"babel-loader": "^8.2.2",
|
||||
"babel-plugin-lodash": "^3.3.4",
|
||||
"babel-plugin-prismjs": "^2.1.0",
|
||||
"blockly": "^6.20210701.0",
|
||||
"chalk": "^4.1.1",
|
||||
"classnames": "^2.3.1",
|
||||
"clipboard": "^2.0.8",
|
||||
|
||||
@@ -11,8 +11,7 @@
|
||||
"@hydrooj/utils": "workspace:*",
|
||||
"jsdom": "^16.6.0",
|
||||
"superagent": "^6.1.0",
|
||||
"superagent-proxy": "^2.1.0",
|
||||
"turndown": "^7.1.1"
|
||||
"superagent-proxy": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jsdom": "^16.2.13",
|
||||
|
||||
Reference in new issue
Block a user