Initial commit of 001code-html Scratch frontend project.
Includes scratch-gui, scratch-vm, scratch-blocks, scratch-render, scratch-l10n, and deployment config. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
239
scratch-blocks/tests/custom_procedure_playground.html
Normal file
239
scratch-blocks/tests/custom_procedure_playground.html
Normal file
@@ -0,0 +1,239 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>Custom Procedure Playground</title>
|
||||
<script src="../blockly_uncompressed_vertical.js"></script>
|
||||
<script src="../msg/messages.js"></script>
|
||||
<script src="../blocks_vertical/vertical_extensions.js"></script>
|
||||
<script src="../blocks_common/math.js"></script>
|
||||
<script src="../blocks_common/text.js"></script>
|
||||
<script src="../blocks_common/colour.js"></script>
|
||||
<script src="../blocks_vertical/control.js"></script>
|
||||
<script src="../blocks_vertical/event.js"></script>
|
||||
<script src="../blocks_vertical/motion.js"></script>
|
||||
<script src="../blocks_vertical/looks.js"></script>
|
||||
<script src="../blocks_vertical/procedures.js"></script>
|
||||
<script src="../blocks_vertical/operators.js"></script>
|
||||
<script src="../blocks_vertical/pen.js"></script>
|
||||
<script src="../blocks_vertical/sound.js"></script>
|
||||
<script src="../blocks_vertical/sensing.js"></script>
|
||||
<script src="../blocks_vertical/data.js"></script>
|
||||
<style>
|
||||
body {
|
||||
background-color: #fff;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
font-size: 140%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td>
|
||||
<div id="secondaryDiv" style="height: 480px; width: 600px;"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="primaryDiv" style="height: 480px; width: 600px;"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td id="editor-actions">
|
||||
<button id="text_number" onclick="addTextNumber()">Add text/number input</button>
|
||||
<button id="boolean" onclick="addBoolean()">Add boolean input</button>
|
||||
<button id="label" onclick="addLabel()">Add label</button>
|
||||
<button id="cancelButton" onclick="cancel()">cancel</button>
|
||||
<button id="okButton" onclick="applyMutation()">ok</button>
|
||||
<button id="rndButton" onclick="removeRandomInput()">remove random input</button>
|
||||
<button id="addRndButton" onclick="addRandomInput()">add random input</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<xml id="mutator_blocks" style="display:none">
|
||||
<block type="procedures_declaration" x="25" y="25" deletable="false">
|
||||
<mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/>
|
||||
</block>
|
||||
</xml>
|
||||
|
||||
<xml id="main_ws_blocks" style="display:none">
|
||||
<block id="]){{Y!7N9ezN+j@Vr`8p" type="procedures_definition" x="25" y="25">
|
||||
<statement name="custom_block">
|
||||
<shadow type="procedures_prototype" id="caller_internal">
|
||||
<mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/>
|
||||
</shadow>
|
||||
</statement>
|
||||
<next>
|
||||
<block id="caller_external" type="procedures_call">
|
||||
<mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/>
|
||||
<value name="input0">
|
||||
<shadow id="V0~M:TxRk0Ua%osjGzh," type="text">
|
||||
<field name="TEXT"/></field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="input1">
|
||||
<shadow id="uPx3si(KkbL1)-XpbXoQ" type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</xml>
|
||||
|
||||
<xml id="main_ws_blocks_simpler" style="display:none">
|
||||
<block id="]){{Y!7N9ezN+j@Vr`8p" type="procedures_definition" x="25" y="25">
|
||||
<statement name="custom_block">
|
||||
<shadow type="procedures_prototype" id="caller_internal">
|
||||
<mutation proccode="say %s %n times if %b" argumentnames="["something","this many","this is true"]" argumentdefaults="["",1,false]" warp="false" argumentids="["a42", "b23", "c99"]"/>
|
||||
</shadow>
|
||||
</statement>
|
||||
<next>
|
||||
<block id="caller_external" type="procedures_call">
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</xml>
|
||||
|
||||
<xml id="main_ws_blocks_simplest" style="display:none">
|
||||
<block id="]){{Y!7N9ezN+j@Vr`8p" type="procedures_definition" x="25" y="25">
|
||||
<statement name="custom_block">
|
||||
<shadow type="procedures_prototype" id="caller_internal">
|
||||
<mutation proccode="my first function" argumentnames="[]" argumentdefaults="[]" warp="false" argumentids="[]"/>
|
||||
</shadow>
|
||||
</statement>
|
||||
<next>
|
||||
<block id="caller_external" type="procedures_call">
|
||||
<mutation proccode="my first function" argumentnames="[]" argumentdefaults="[]" warp="false" argumentids="[]"/>
|
||||
</block>
|
||||
</next>
|
||||
</block>
|
||||
</xml>
|
||||
|
||||
<xml id="mutator_blocks_simplest" style="display:none">
|
||||
<block type="procedures_declaration" x="25" y="25" deletable="false">
|
||||
<mutation proccode="my first function" argumentnames="[]" argumentdefaults="[]" warp="false" argumentids="[]"/>
|
||||
</block>
|
||||
</xml>
|
||||
|
||||
<xml id="toolbox" style="display:none">
|
||||
<category name="More" colour="#FF6680" secondaryColour="#FF4D6A" custom="PROCEDURE">
|
||||
</category>
|
||||
<category name="Values">
|
||||
<block type="operator_round">
|
||||
<value name="NUM">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM"></field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
<category name="Statements">
|
||||
<block type="control_forever"></block>
|
||||
<block type="sound_stopallsounds"></block>
|
||||
<block type="control_start_as_clone"></block>
|
||||
<block type="control_stop">
|
||||
<mutation hasnext="false"></mutation>
|
||||
<field name="STOP_OPTION">all</field>
|
||||
</block>
|
||||
</category>
|
||||
</xml>
|
||||
|
||||
<script>
|
||||
var editorActions = document.getElementById('editor-actions');
|
||||
editorActions.style.visibility = 'hidden';
|
||||
|
||||
var callback = null;
|
||||
var mutationRoot = null;
|
||||
|
||||
var declarationWorkspace = Blockly.inject('primaryDiv',
|
||||
{media: '../media/'});
|
||||
|
||||
declarationWorkspace.addChangeListener(function() {
|
||||
if (mutationRoot) {
|
||||
mutationRoot.onChangeFn();
|
||||
}
|
||||
});
|
||||
|
||||
var definitionWorkspace = Blockly.inject('secondaryDiv', {
|
||||
media: '../media/',
|
||||
toolbox: document.getElementById('toolbox'),
|
||||
zoom: {
|
||||
startScale: 0.75
|
||||
}
|
||||
});
|
||||
|
||||
Blockly.Xml.clearWorkspaceAndLoadFromXml(document.getElementById('main_ws_blocks_simplest'),
|
||||
definitionWorkspace);
|
||||
|
||||
Blockly.Procedures.externalProcedureDefCallback = function (mutation, cb) {
|
||||
editorActions.style.visibility = 'visible';
|
||||
callback = cb;
|
||||
declarationWorkspace.clear();
|
||||
mutationRoot = declarationWorkspace.newBlock('procedures_declaration');
|
||||
mutationRoot.domToMutation(mutation);
|
||||
mutationRoot.initSvg();
|
||||
mutationRoot.render(false);
|
||||
}
|
||||
|
||||
function applyMutation() {
|
||||
var mutation = mutationRoot.mutationToDom(/* opt_generateShadows */ true)
|
||||
console.log(mutation);
|
||||
callback(mutation);
|
||||
callback = null;
|
||||
mutationRoot = null;
|
||||
declarationWorkspace.clear();
|
||||
definitionWorkspace.refreshToolboxSelection_()
|
||||
editorActions.style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function addLabel() {
|
||||
mutationRoot.addLabelExternal();
|
||||
}
|
||||
|
||||
function addBoolean() {
|
||||
mutationRoot.addBooleanExternal();
|
||||
}
|
||||
|
||||
function addTextNumber() {
|
||||
mutationRoot.addStringNumberExternal();
|
||||
}
|
||||
|
||||
function removeRandomInput() {
|
||||
var rnd = Math.floor(Math.random() * mutationRoot.inputList.length);
|
||||
mutationRoot.removeInput(mutationRoot.inputList[rnd].name);
|
||||
mutationRoot.onChangeFn();
|
||||
mutationRoot.updateDisplay_();
|
||||
}
|
||||
|
||||
function addRandomInput() {
|
||||
var rnd = Math.floor(Math.random() * 3);
|
||||
switch (rnd) {
|
||||
case 0:
|
||||
addTextNumber();
|
||||
break;
|
||||
case 1:
|
||||
addLabel();
|
||||
break;
|
||||
case 2:
|
||||
addBoolean();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
callback = null;
|
||||
mutationRoot = null;
|
||||
declarationWorkspace.clear();
|
||||
definitionWorkspace.refreshToolboxSelection_()
|
||||
editorActions.style.visibility = 'hidden';
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user