ui: blockly: draft

This commit is contained in:
undefined committed 2021-07-21 00:26:27 +08:00
1 parent 9a173e0d37
commit 9a67e81b10
5 files changed
+371 -5

No files matched your search

+5 -2
View File
@@ -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>
);
+2
View File
@@ -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",
+1 -2
View File
@@ -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",