app/assets/htmls/gs-element-blockly.html in mumuki-gobstones-blockly-0.37.1 vs app/assets/htmls/gs-element-blockly.html in mumuki-gobstones-blockly-0.38.0

- old
+ new

@@ -3559,16 +3559,46 @@ tooltip, helpUrl, returnMsg = Blockly.Msg.PROCEDURES_DEFRETURN_RETURN ) { return function() { + var self = this; + + if ((this.workspace.options.comments || + (this.workspace.options.parentWorkspace && + this.workspace.options.parentWorkspace.options.comments)) && + comment) { + this.setCommentText(comment); + } + this.setCommentText(null); + this.setColour(( + Blockly.CUSTOM_COLORS && ( + Blockly.CUSTOM_COLORS[this.type] || + Blockly.CUSTOM_COLORS[withReturn ? "function" : "procedure"] + )) || Blockly.Blocks.procedures.HUE); + this.setTooltip(tooltip); + this.setHelpUrl(helpUrl); + this.arguments_ = []; + this.statementConnection_ = null; + var defaultLegalName = Blockly.Procedures.findLegalName(defaultName, this); var nameField = new Blockly.FieldTextInput(defaultLegalName, Blockly.Procedures.rename); nameField.setSpellcheck(false); - var self = this; + if (Blockly.currentDisplayMode && !Blockly.currentDisplayMode().showText) { + nameField.setVisible(false); + const imageField = new Blockly.FieldImage( + Blockly.currentDisplayMode().procedureDefIcon, + Blockly.currentDisplayMode().iconSize, + Blockly.currentDisplayMode().iconSize + ); + this.appendDummyInput().appendField(nameField, 'NAME').appendField(imageField); + this.setStatements_(withStatements); + return; + } + // [!] var addParameterButton = new Blockly.FieldImage( PLUS, 16, 16, @@ -3590,28 +3620,11 @@ .appendField(returnMsg); // if (withParametersMutator) // this.setMutator(new Blockly.Mutator(['procedures_mutatorarg'])); - if ((this.workspace.options.comments || - (this.workspace.options.parentWorkspace && - this.workspace.options.parentWorkspace.options.comments)) && - comment) { - this.setCommentText(comment); - } - this.setCommentText(null); - this.setColour(( - Blockly.CUSTOM_COLORS && ( - Blockly.CUSTOM_COLORS[this.type] || - Blockly.CUSTOM_COLORS[withReturn ? "function" : "procedure"] - )) || Blockly.Blocks.procedures.HUE); - this.setTooltip(tooltip); - this.setHelpUrl(helpUrl); - this.arguments_ = []; this.setStatements_(withStatements); - this.statementConnection_ = null; - // if (!withParametersMutator) this.updateParams_(); // [!] adding create call button var createCallButton = new Blockly.FieldImage( HAND, @@ -4083,25 +4096,124 @@ } </script> <script>/* global initProcedsBlockly */ +const EMPTY_GIF = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; + Blockly.displayMode = 'text'; Blockly.displayModes = { text: { iconSize: 16, showText: true }, iconic: { iconSize: 32, - showText: false + showText: false, + procedureDefIcon: EMPTY_GIF }, }; Blockly.currentDisplayMode = () => Blockly.displayModes[Blockly.displayMode]; +Blockly.CUSTOM_COLORS = { + globalHsvSaturation: 0.45, + globalHsvValue: 0.65, + primitiveCommand: "#1d3c99", + assignation: "#051d66", + controlStructure: "#0f2b80", + literalExpression: "#1d992c", + primitiveExpression: "#1d992c", + operator: "#0f801c", + program: "#8d1bb3", + interactiveProgram: "#6e158c", + interactiveBinding: "#a11fcc", + procedure: "#935ba6", + function: "#745380", + primitiveProcedure: "#2e4fb3", + primitiveFunction: "#2eb33e", + procedure_call: "#355bcc", + function_call: "#35cc47", + variable: "#056610", + parameter: "#056610", + complete: "#ff0000", + H: { commands: 225, expressions: 127, definitions: 285 }, + S: { + assignation: 95, + variable: 95, + parameter: 95, + primitiveCommand: 81, + literalExpression: 81, + primitiveExpression: 81, + controlStructure: 88, + operator: 88, + procedure_call: 74, + function_call: 74, + primitiveProcedure: 74, + primitiveFunction: 74, + program: 85, + interactiveProgram: 85, + interactiveBinding: 85, + procedure: 45, + function: 35, + complete: 99, + }, + V: { + assignation: 40, + variable: 40, + parameter: 40, + primitiveCommand: 60, + literalExpression: 60, + primitiveExpression: 60, + controlStructure: 50, + operator: 50, + procedure_call: 80, + function_call: 80, + primitiveProcedure: 70, + primitiveFunction: 70, + program: 70, + interactiveProgram: 55, + interactiveBinding: 80, + procedure: 65, + function: 50, + complete: 99, + }, +}; + +Blockly.AVAILABLE_ICONS = [ + "bool-false.svg", + "bool-true.svg", + "clean.png", + "color-azul.svg", + "color-negro.svg", + "color-rojo.svg", + "color-verde.svg", + "direccion-este.svg", + "direccion-norte.svg", + "direccion-oeste.svg", + "direccion-sur.svg", + "hand.png", + "minus.png", + "plus.png", + "repeticion-simple.png", + "program.png", + "procedure-def.png", +]; + +const getOptions = (block) => { + const parentWorkspace = block.workspace.options.parentWorkspace; + return parentWorkspace && parentWorkspace.options || block.workspace.options +} +const hasLocalMedia = (name) => Blockly.AVAILABLE_ICONS.includes(name) +const getLocalMediaUrl = (block, name) => + hasLocalMedia(name) + ? getOptions(block).localMedia + name + (getOptions(block).localMediaSuffix || "") + : EMPTY_GIF; +const getLocalMediaSize = (name) => + hasLocalMedia(name) ? Blockly.currentDisplayMode().iconSize : 0; + // Initialize proceds-blockly creating new custom functions initProcedsBlockly("Statement", (makeProcedureInit, makeUpdateParams, makeProcedureDomToMutation, makeProcedureCustomMenu) => { Blockly.Blocks['DefinicionDeFuncionDeclarativa'] = { init: makeProcedureInit( true, true, true, @@ -4212,35 +4324,19 @@ customContextMenu: Blockly.Blocks['procedures_callreturn'].customContextMenu, defType_: 'DefinicionDeFuncionSimpleDeclarativa' }; }); -Blockly.CUSTOM_COLORS = {"globalHsvSaturation":0.45,"globalHsvValue":0.65,"primitiveCommand":"#1d3c99","assignation":"#051d66","controlStructure":"#0f2b80","literalExpression":"#1d992c","primitiveExpression":"#1d992c","operator":"#0f801c","program":"#8d1bb3","interactiveProgram":"#6e158c","interactiveBinding":"#a11fcc","procedure":"#935ba6","function":"#745380","primitiveProcedure":"#2e4fb3","primitiveFunction":"#2eb33e","procedure_call":"#355bcc","function_call":"#35cc47","variable":"#056610","parameter":"#056610","complete":"#ff0000","H":{"commands":225,"expressions":127,"definitions":285},"S":{"assignation":95,"variable":95,"parameter":95,"primitiveCommand":81,"literalExpression":81,"primitiveExpression":81,"controlStructure":88,"operator":88,"procedure_call":74,"function_call":74,"primitiveProcedure":74,"primitiveFunction":74,"program":85,"interactiveProgram":85,"interactiveBinding":85,"procedure":45,"function":35,"complete":99},"V":{"assignation":40,"variable":40,"parameter":40,"primitiveCommand":60,"literalExpression":60,"primitiveExpression":60,"controlStructure":50,"operator":50,"procedure_call":80,"function_call":80,"primitiveProcedure":70,"primitiveFunction":70,"program":70,"interactiveProgram":55,"interactiveBinding":80,"procedure":65,"function":50,"complete":99}}; -Blockly.AVAILABLE_ICONS = ["bool-false.svg","bool-true.svg","clean.png","color-azul.svg","color-negro.svg","color-rojo.svg","color-verde.svg","direccion-este.svg","direccion-norte.svg","direccion-oeste.svg","direccion-sur.svg","hand.png","minus.png","plus.png", "repeticion-simple.png", "program.png"]; -const EMPTY_GIF = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="; - const ATOMICALLY = (action) => { try { Blockly.Events.disabled_ = 1; action(); } finally { Blockly.Events.disabled_ = 0; } } -const getOptions = (block) => { - const parentWorkspace = block.workspace.options.parentWorkspace; - return parentWorkspace && parentWorkspace.options || block.workspace.options -} -const hasLocalMedia = (name) => Blockly.AVAILABLE_ICONS.includes(name) -const getLocalMediaUrl = (block, name) => - hasLocalMedia(name) - ? getOptions(block).localMedia + name + (getOptions(block).localMediaSuffix || "") - : EMPTY_GIF; -const getLocalMediaSize = (name) => - hasLocalMedia(name) ? Blockly.currentDisplayMode().iconSize : 0; - /** * Create the svg representation of a block and render * @name {!string} name of the parameter. * @this Blockly.Block */ @@ -4649,26 +4745,25 @@ this.setColour(Blockly.CUSTOM_COLORS.RepeticionSimple || Blockly.CUSTOM_COLORS.controlStructure); if (Blockly.currentDisplayMode().showText) { this.appendValueInput("count").appendField("repetir"); this.appendDummyInput().appendField("veces"); + this.setInputsInline(true); } else { const icon = "repeticion-simple.png"; - const imageField = this.appendDummyInput().appendField(new Blockly.FieldImage( + const imageField = this.appendValueInput("count").appendField(new Blockly.FieldImage( '', getLocalMediaSize(icon), getLocalMediaSize(icon) )); - this.appendValueInput("count"); // El atributo localMedia recién va a estar disponible cuando termine de cargar el toolbox, // por eso la imagen se carga en el evento y no directamente más arriba. this.onchange = () => imageField.fieldRow[0].setValue(getLocalMediaUrl(this, icon)); } this.appendStatementInput('block').setCheck(["Statement"]); - this.setInputsInline(true); } }; Blockly.Blocks.RepeticionCondicional = { init: function () { @@ -6720,10 +6815,18 @@ type: Boolean, value: false }, /* + * Cantidad máxima de bloques permitidos en el workspace. Si no se le da ningún valor, se admiten infinitos bloques. + */ + maxBlocks: { + type: Number, + value: null + }, + + /* * Si el valor es `false`, "aplana" las categorías dejando todos los bloques sueltos en el toolbox. */ showCategories: { type: Boolean, value: true @@ -7315,10 +7418,20 @@ return true; } }, /** + * Agrega un listener que se ejecutará cada vez que los bloques del workspace cambien + */ + onBlocksChanged(action) { + this.workspace.addChangeListener(() => action({ + remainingCapacity: this.workspace.remainingCapacity(), + workspace: this.workspace + })); + }, + + /** * Reinicializa el workspace, dejando solo el bloque programa */ resetWorkspace: function() { let xmlInicial = '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="Program" x="30" y="30"></block></xml>'; this.workspaceXml = xmlInicial; @@ -7489,9 +7602,10 @@ horizontalLayout: false, trashcan: true, collapse: true, css: true, readOnly: this.readOnly, + maxBlocks: this.maxBlocks, zoom: { controls: true, wheel: true } }); \ No newline at end of file