Parametros andando - Proceds blockly parte 1 #1

dlopezalvas · 2024-07-10T18:58:46Z

Related Program-AR/pilas-bloques-app#248

Por ahora solo andan los parámetros (crear y eliminar) pero pense en ir tirando ya un PR con esto para que no sea una cosa enorme para hacer review mas adelante.

Se puede probar en la branch proceds-blockly de pilas.

Falta:

Hay un bug que deja que tengas dos procedimientos de igual nombre, todavía no lo logre resolver, quedaron algunas funciones auxiliares en este PR que era para tratar de ver eso.
Las manitos (tanto del procedimiento como de los parámetros) no andan, todavía no logro entender del todo qué es lo que se está haciedo para que ande:(
Las demás funciones además del makeProcedureInit que se pisan al definir los procedimientos nuestros.
Que aparezcan en el toolbox los procedimienos al crearlos.

dlopezalvas · 2024-07-10T19:00:17Z

src/index.js

-/**
- * Plugin description.
- */
-export class Plugin {


Se tomo la decisión de ir por un objeto en lugar de una clase porque habían conflictos con las definiciones de this por como estaban definidas ciertas cosas.
Con @rgonzalezt habíamos intentado hacerlo andar pero fallaba, podemos darle otra vuelta si consideran necesario.

dlopezalvas · 2024-07-10T19:01:04Z

src/index.js

+    updateParams_: () => { },
+    /* customContextMenu: makeProcedureCustomMenu(),
+        domToMutation: makeProcedureDomToMutation(), */


El updateParams estaba así en https://github.com/Program-AR/proceds-blockly, las otras dos son las que faltan.

dlopezalvas · 2024-07-10T19:02:23Z

src/index.js

+export const allProcedures = (workspace) => workspace.getAllBlocks().filter(isProcedure)
+
+const getName = (procedureBlock) => procedureBlock.getFieldValue('NAME')
+
+const isProcedure = (block) => block.type === 'Procedimiento'
+
+export const allProcedureNames = (workspace) => allProcedures(workspace).map(getName)
+
+//TODO no anda
+const findLegalName = (name, block, index) => allProcedureNames(block.workspace).includes(name) ? findLegalName(name + " " + index, block, index + 1) : name


El findLegalName que viene con Blockly no está funcionando, yo asumo que puede ser porque al momento de chequear, los procedimientos tienen la definición de Procedimiento y no de procedure_defnoreturn, pero no lo sé. Intenté hacer un propio findLegalName, pero no anduvo, lo voy a revisar en el proximo PR.

dlopezalvas · 2024-07-10T19:03:42Z

src/index.js

+  var addParameterButton = new Blockly.FieldImage(
+    PLUS,
+    16,
+    16,
+    Blockly.Msg.PROCEDURES_ADD_PARAMETER,
+    () => addParameter(block, Blockly, undefined)
+  )


Este es el botón del +.

Proceds Blockly tocaba la definicion de FieldImage para solucionar algo pero como anda bien el click no lo agregué, si es necesario lo agregamos. Puede que sea algo que la nueva versión de blockly ya tenga solucionada

dlopezalvas · 2024-07-10T19:04:05Z

src/index.js

+  var input = block.appendDummyInput()
+    .appendField(title)
+    .appendField(nameField, 'NAME')
+    .appendField('', 'PARAMS')
+
+  block.appendStatementInput("STACK").setCheck(null)


Esto crea la estructura visible, agrega los fields que uno ve en el parámetro.

dlopezalvas · 2024-07-10T19:05:04Z

src/index.js

+const getAvailableName = (block, name) => {
+  const isTaken = block.arguments_.some(arg => arg === name);
+  return isTaken ? getAvailableName(block, name + "_") : name
 }


Lo cambie un poco a como estaba pero por cuestión de gusto personal jeje

dlopezalvas · 2024-07-10T19:05:39Z

src/index.js

+  const callers = Blockly.Procedures.getCallers(self.getFieldValue('NAME'), self.workspace);
+  callers.forEach(caller => {
+    caller.arguments_.push(name);
+    caller.updateShape_()
+  })


Esto teoricamente (falta probarlo) toma los bloques que son callers del procedimiento para agregarles el parámetro nuevo

dlopezalvas · 2024-07-10T19:06:42Z

src/index.js

+  const removeParameterButton = new Blockly.FieldImage(
+    MINUS,
+    16,
+    16,
+    Blockly.Msg.PROCEDURES_REMOVE_PARAMETER,
+    () => removeParameter(self, argsAmount, Blockly)
+  )


Botón para quitar un parámetro, se le da el argsAmount como identificador del parámetro (que al agregarlo siempre es el último, o sea la cantidad de argumentos), para que luego sepa cual quitar.

dlopezalvas · 2024-07-10T19:07:42Z

src/index.js

+  const nameField = new Blockly.FieldTextInput(name, function (newName) {
+    const oldName = self.arguments_[argsAmount];
+
+    if (oldName !== newName)
+      newName = getAvailableName(self, newName);
+
+    self.arguments_[argsAmount] = newName;
+
+    callers.forEach(caller => {
+      caller.arguments_ = caller.arguments_.map(argName => argName === oldName ? newName : argName)
+      caller.updateShape_()
+    })
+


Esta función se ejecuta cuando se cambia el text field de un parámetro, es decir el nombre. Si el nombre existe se le agrega un _ al final.

Cambia también el nombre en los callers del procedimiento.

dlopezalvas · 2024-07-10T19:08:12Z

src/index.js

+    TODO: this changes the argument blocks when the name of the argument changes
+        const varBlocks = self.workspace.getAllBlocks().filter(block.type === "variables_get" && block.$parent === self.id)
+        varBlocks.forEach(varBlock => {
+          var varField = varBlock.getField("VAR");
+          if (varField.getValue() === oldName) {
+            varField.setValue(newName);
+          }
+        }) */


Esto no andaba, pero como no logré generar los bloques de los parámetros tampoco se puede probar mucho.

dlopezalvas · 2024-07-10T19:08:47Z

src/index.js

+  self
+    .appendDummyInput(id)
+    .appendField(Blockly.Msg.PROCEDURES_BEFORE_PARAMS)
+    .appendField(nameField, 'ARG' + argsAmount)
+    .appendField(createCallButton)
+    .appendField(removeParameterButton);
+
+  self.moveInputBefore(id, 'STACK');


Crea la estructura de los parámetros y los mueve antes del stack (el espacio abierto donde van los bloques hijos).

dlopezalvas · 2024-07-10T19:09:47Z

src/index.js

+const removeParameter = (self, argsAmount, Blockly) => {
+  let arguments_ = self.arguments_
+  self.arguments_.forEach((_, i) => self.removeInput("INPUTARG" + i))
+  self.arguments_ = []
+  arguments_.splice(argsAmount, 1)
+
+  arguments_.forEach(arg => addParameter(self, Blockly, arg))


Esto también lo cambie un poco, como traía problemas sacar uno del medio directamente hice que se borraran todos y se agregaran nuevamente todos excepto al que se quito. La estrategia de proceds-blockly era similar pero me mareaba un poco más.

dlopezalvas · 2024-07-10T19:09:58Z

src/index.js

+const createCall = (self, Blockly) => {
+  console.log("create call")
+}
+
+const createParameterCaller = (procedureBlock, name) => {
+  console.log("create parameter call")
+}


quizá la accion de la manito (el createCall) del procedimiento (o de los parametros) pueda resolverse rapidamente con algo asi como

Blockly.serialization.blocks.append({ 'type': self.type, }, self.workspace)

aunque esto duplica el bloque, en relidad lo siguiente:

Blockly.serialization.blocks.append({ 'type': "procedures_callnoreturn", 'fields': { 'NAME' :getName(self) } }, self.workspace)

logra que genere el bloque del procedimiento a usar.

vokoscreenNG-2024-07-15_10-30-33.mp4

Hay que ver cómo sumarlo al toolbox

danielferro69

Todo esta funcional. hay un error en

 const createCallButton = new Blockly.FieldImage(
    HAND,
    16,
    16,
    Blockly.Msg.VARIABLES_SET_CREATE_GET.replace('%1', name),
    () => createParameterCaller(self, self.getVars()[argsAmount])()
  )

que la funcion getVars() no existe. Como para lograr generar los bloques de los parametros.
Vamos bien !!!

danielferro69 · 2024-07-15T13:31:35Z

src/index.js

+const createCall = (self, Blockly) => {
+  console.log("create call")
+}
+
+const createParameterCaller = (procedureBlock, name) => {
+  console.log("create parameter call")
+}


quizá la accion de la manito (el createCall) del procedimiento (o de los parametros) pueda resolverse rapidamente con algo asi como

Blockly.serialization.blocks.append({ 'type': self.type, }, self.workspace)

aunque esto duplica el bloque, en relidad lo siguiente:

Blockly.serialization.blocks.append({ 'type': "procedures_callnoreturn", 'fields': { 'NAME' :getName(self) } }, self.workspace)

logra que genere el bloque del procedimiento a usar.

vokoscreenNG-2024-07-15_10-30-33.mp4

Hay que ver cómo sumarlo al toolbox

dlopezalvas and others added 8 commits July 2, 2024 14:38

add parameter - init

6940392

make procedure init

580867e

adding parameters working

4d84d40

add parameter working (kind of)

8d69f2f

move input before stack

23942d7

remove parameter

b0b4f0b

fixing remove parameter bug

b57807a

trying legal name - not working

bbdfdd2

dlopezalvas requested review from a team and danielferro69 July 10, 2024 18:58

dlopezalvas commented Jul 10, 2024

View reviewed changes

danielferro69 approved these changes Jul 15, 2024

View reviewed changes

fixing getVars

95c9e39

dlopezalvas merged commit dc25ee4 into main Jul 17, 2024

dlopezalvas deleted the copy-proceds-blockly branch July 17, 2024 13:58

dlopezalvas mentioned this pull request Jul 17, 2024

Proceds blockly parte 2 #2

Draft

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Parametros andando - Proceds blockly parte 1 #1

Parametros andando - Proceds blockly parte 1 #1

dlopezalvas commented Jul 10, 2024 •

edited

Loading

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

dlopezalvas Jul 10, 2024

danielferro69 Jul 15, 2024

danielferro69 left a comment

danielferro69 Jul 15, 2024

Parametros andando - Proceds blockly parte 1 #1

Parametros andando - Proceds blockly parte 1 #1

Conversation

dlopezalvas commented Jul 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielferro69 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dlopezalvas commented Jul 10, 2024 •

edited

Loading