mumuki-gobstones-blockly 0.36.0 → 0.37.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c4fe28a4dc5acc14accd6bd628d2815cd4fca7616c08c3fa38ceb2563d20bbf
-  data.tar.gz: aab4223fc681de33312f26af435249098a86669de164c855d673ca767efae47e
+  metadata.gz: 88547c393fcedd81919aec55517f88961c02ba806ba3ba4fb5aec363e4ebdc99
+  data.tar.gz: 725ad912f884ea0b4108118dbc8c32ddf4ec498f29cdad27f8d3e8ead22d3942
 SHA512:
-  metadata.gz: 18e5903a764239637a66a2d87d44f2d855491048b0851a01417822d4f028487efdd3af6e8d6db37bc54c367d0111b4b282094eaa3df8b7804306c569f3d59aef
-  data.tar.gz: c8df246a95f84a23ccbe4b54183f31a1c9bd7cafd573ff2d91e8b34eb105d00180e82aa839679befa36c4260179d82330cf0a496c329df25b1188cc2560babd1
+  metadata.gz: a2f7af4813edc25b9af1ad6f95ec9f2b2456004034d94b0ac69b61fc3ff3ab5232e2ba84c7e1e67af97c65fd08695ed6e3da88c7c0ec4e78d723e5676be8fda4
+  data.tar.gz: 01b7593d0cb27480b2af418ea7b11ddaa27e333eb8404655693ba7799dc3771efaf120973c920a59f66821f726af8b57b20f03b290188789abc02626d9f31c3d

data/app/assets/htmls/gs-element-blockly.html

@@ -4085,6 +4085,21 @@ window.initProcedsBlockly = function(customStatementType, initialize = () => {})
 </script>
   <script>/* global initProcedsBlockly */
 
+Blockly.displayMode = 'text';
+
+Blockly.displayModes = {
+  text: {
+    iconSize: 16,
+    showText: true
+  },
+  iconic: {
+    iconSize: 32,
+    showText: false
+  },
+};
+
+Blockly.currentDisplayMode = () => Blockly.displayModes[Blockly.displayMode];
+
 // Initialize proceds-blockly creating new custom functions
 initProcedsBlockly("Statement", (makeProcedureInit, makeUpdateParams, makeProcedureDomToMutation, makeProcedureCustomMenu) => {
   Blockly.Blocks['DefinicionDeFuncionDeclarativa'] = {
@@ -4200,7 +4215,7 @@ initProcedsBlockly("Statement", (makeProcedureInit, makeUpdateParams, makeProced
 });
 
 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"];
+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) => {
@@ -4221,7 +4236,8 @@ const getLocalMediaUrl = (block, name) =>
   hasLocalMedia(name)
     ? getOptions(block).localMedia + name + (getOptions(block).localMediaSuffix || "")
     : EMPTY_GIF;
-const getLocalMediaSize = (name) => hasLocalMedia(name) ? 16 : 0;
+const getLocalMediaSize = (name) =>
+  hasLocalMedia(name) ? Blockly.currentDisplayMode().iconSize : 0;
 
 /**
  * Create the svg representation of a block and render
@@ -4260,24 +4276,32 @@ const triggerRefresh = (block) => {
 
 Blockly.Blocks.Program = {
   init: function () {
+    const icon = 'program.png';
     this.jsonInit({
-      "type": "Program",
-      "message0": "%1 %2 %3",
-      "args0": [
+      type: "Program",
+      message0: "%1 %2 %3",
+      args0: [
+        Blockly.currentDisplayMode().showText
+          ? {
+              type: "field_label",
+              text: "programa",
+            }
+          : {
+              type: "field_image",
+              src: getLocalMediaUrl(this, icon),
+              width: getLocalMediaSize(icon),
+              height: getLocalMediaSize(icon),
+            },
         {
-          "type": "field_label",
-          "text": "programa"
+          type: "input_dummy",
         },
         {
-          "type": "input_dummy"
+          type: "input_statement",
+          name: "program",
+          check: ["Statement"],
         },
-        {
-          "type": "input_statement",
-          "name": "program",
-          "check": ["Statement"]
-        }
-      ]
-    })
+      ],
+    });
     this.setColour(Blockly.CUSTOM_COLORS.Program || Blockly.CUSTOM_COLORS.program);
     this.setDeletable(true);
     this.setEditable(true);
@@ -4623,10 +4647,24 @@ Blockly.Blocks.RepeticionSimple = {
     });
 
     this.setColour(Blockly.CUSTOM_COLORS.RepeticionSimple || Blockly.CUSTOM_COLORS.controlStructure);
-    this.appendValueInput('count')
-      .appendField('repetir');
-    this.appendDummyInput()
-      .appendField('veces');
+
+    if (Blockly.currentDisplayMode().showText) {
+      this.appendValueInput("count").appendField("repetir");
+      this.appendDummyInput().appendField("veces");
+    } else {
+      const icon = "repeticion-simple.png";
+      const imageField = this.appendDummyInput().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);
   }
@@ -5665,6 +5703,45 @@ Blockly.Blocks.procedures_defnoreturn.customContextMenu = function(options) {
     }
   })
 }
+
+const includeIconMutationMixin = (block) => {
+  const originalMutationToDom = block.mutationToDom;
+  block.mutationToDom = function() {
+    const container = originalMutationToDom.call(this);
+    if (this.$icon) {
+      container.setAttribute("icon", this.$icon);
+    }
+    return container;
+  }
+
+  const originalDomToMutation = block.domToMutation;
+  block.domToMutation = function(xmlElement) {
+    const icon = xmlElement.getAttribute("icon");
+    if (icon) {
+      this.$icon = icon;
+    }
+
+    return originalDomToMutation.call(this, xmlElement);
+  }
+}
+
+// Por retrocompatibilidad, agregamos el mixin que parsea el ícono a todas las formas posibles
+// de definir procedimientos y funciones.
+const allProceduresAndFunctionsTypes = [
+  "procedures_defnoreturn",
+  "procedures_defnoreturnnoparams",
+  "procedures_defreturn",
+  "procedures_defreturnsimple",
+  "procedures_defreturnsimplewithparams",
+  "DefinicionDeFuncionDeclarativa",
+  "DefinicionDeFuncionSimpleConParametrosDeclarativa",
+  "DefinicionDeFuncionSimpleDeclarativa",
+];
+
+allProceduresAndFunctionsTypes.forEach((blockName) =>
+  includeIconMutationMixin(Blockly.Blocks[blockName])
+);
+
 const oldProceduresMutationToDom = Blockly.Blocks['procedures_defnoreturn'].mutationToDom;
 Blockly.Blocks.procedures_defnoreturn.mutationToDom = function() {
   const container = oldProceduresMutationToDom.call(this);
@@ -5673,9 +5750,7 @@ Blockly.Blocks.procedures_defnoreturn.mutationToDom = function() {
 }
 const oldProceduresDomToMutation = Blockly.Blocks['procedures_defnoreturn'].domToMutation;
 Blockly.Blocks.procedures_defnoreturn.domToMutation = function(xmlElement) {
-  const isAtomic = xmlElement.getAttribute("isatomic");
-  this.$isAtomic = isAtomic === "true";
-
+  this.$isAtomic = xmlElement.getAttribute("isatomic") === "true";
   return oldProceduresDomToMutation.call(this, xmlElement);
 }
 </script>
@@ -6250,12 +6325,21 @@ var makeParameterList = function (block) {
 		.join(', ');
 };
 
+const addIconAttributeIfPresent = (block, code) =>
+  block.$icon ? `/*@ATTRIBUTE@block_icon@${block.$icon}@*/\n${code}` : code;
+
 Blockly.GobstonesLanguage.procedures_defnoreturn = function (block) {
   var name = formatCallName(block.getFieldValue('NAME'),true);
   var body = Blockly.GobstonesLanguage.statementToCode(block, 'STACK');
 
-  var code = 'procedure ' + name + '(' + makeParameterList(block) + ') {\n' + body + '}\n';
-  if (block.$isAtomic) code = "/*@ATTRIBUTE@atomic@*/" + "\n" + code;
+  const baseCode =
+`procedure ${name}(${makeParameterList(block)}) {
+${body}}\n`
+
+  var code = addIconAttributeIfPresent(block, baseCode);
+  if (block.$isAtomic) {
+    code = "/*@ATTRIBUTE@atomic@*/" + "\n" + code;
+  }
 
 	code = Blockly.GobstonesLanguage.scrub_(block, code);
 	Blockly.GobstonesLanguage.definitions_[name] = code;
@@ -6268,8 +6352,12 @@ Blockly.GobstonesLanguage.procedures_defreturn = function (block) {
 	var body = Blockly.GobstonesLanguage.statementToCode(block, 'STACK');
 	var returnValue = Blockly.GobstonesLanguage.valueToCode(block, 'RETURN');
 
-	var code = 'function ' + name + '(' + makeParameterList(block) + ') {\n' +
-		body + '  return (' + returnValue + ')\n}\n';
+  const baseCode =
+`function ${name}(${makeParameterList(block)}) {
+${body}  return (${returnValue})
+}\n`;
+
+  var code = addIconAttributeIfPresent(block, baseCode);
 
 	code = Blockly.GobstonesLanguage.scrub_(block, code);
 	Blockly.GobstonesLanguage.definitions_[name] = code;
@@ -6970,13 +7058,15 @@ Blockly.ErrorInforming.CssContent = [
             if (icon) {
               this.appendDummyInput().appendField(new Blockly.FieldImage(
                 icon,
-                16,
-                16,
+                Blockly.currentDisplayMode().iconSize,
+                Blockly.currentDisplayMode().iconSize,
                 finalName
               ));
             }
 
-            self._definePrimitiveHolesOrDropdown(this, parts, dropdownOptions);
+            if (Blockly.currentDisplayMode().showText) {
+              self._definePrimitiveHolesOrDropdown(this, parts, dropdownOptions);
+            }
 
             this.setInputsInline(true);
             this.setTooltip(definition.attributes && definition.attributes.tooltip || "");
@@ -7026,13 +7116,15 @@ Blockly.ErrorInforming.CssContent = [
             if (icon) {
               this.appendDummyInput().appendField(new Blockly.FieldImage(
                 icon,
-                16,
-                16,
+                Blockly.currentDisplayMode().iconSize,
+                Blockly.currentDisplayMode().iconSize,
                 finalName
               ));
             }
 
-            self._definePrimitiveHolesOrDropdown(this, parts, dropdownOptions);
+            if (Blockly.currentDisplayMode().showText) {
+              self._definePrimitiveHolesOrDropdown(this, parts, dropdownOptions);
+            }
 
             this.setPreviousStatement(false);
             this.setNextStatement(false);
@@ -7321,6 +7413,12 @@ Blockly.ErrorInforming.CssContent = [
       },
 
       _processCustomCategoryStyles(xml) {
+        // TODO: el querySelector no funciona si no hay categorías, y además este método no tiene sentido en ese contexto.
+        // Habría que revisarlo si más adelante se quieren soportar los separadores en ese contexto.
+        if (!this.showCategories) {
+          return;
+        }
+
         const parsedXml = Blockly.Xml.textToDom(`<xml>${xml}</xml>`);
 
         const forEachNode = (node, action) => {

data/lib/gobstones/blockly/version.rb

@@ -1,5 +1,5 @@
 module Gobstones
   module Blockly
-    VERSION = "0.36.0"
+    VERSION = "0.37.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: mumuki-gobstones-blockly
 version: !ruby/object:Gem::Version
-  version: 0.36.0
+  version: 0.37.1
 platform: ruby
 authors:
 - Rodrigo Alfonso
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-08-12 00:00:00.000000000 Z
+date: 2020-08-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -88,7 +88,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.1
+rubygems_version: 3.0.8
 signing_key: 
 specification_version: 4
 summary: Gobstones Blockly