Set max/min values of buttons width/height and validate it

Author: Jonas Trampe

webserver/static/js/custom_blocks_events.js

@@ -82,29 +82,43 @@ Blockly.Blocks.event_button_object = {
     init: function () {
         this.appendDummyInput()
             .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON']);
-        this.appendValueInput('X')
-            .setCheck('Number')
-            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_X']);
-        this.appendValueInput('Y')
-            .setCheck('Number')
-            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_Y']);
-        this.appendValueInput('Width')
-            .setCheck('Number')
-            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_WIDTH']);
-        this.appendValueInput('Height')
-            .setCheck('Number')
-            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_HEIGHT']);
-        this.setInputsInline(true);
+        this.appendDummyInput('Values')
+            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_X'])
+            .appendField(new Blockly.FieldNumber(0, 0, 9, 1), 'X')
+            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_Y'])
+            .appendField(new Blockly.FieldNumber(0, 0, 9, 1), 'Y')
+            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_WIDTH'])
+            .appendField(new Blockly.FieldNumber(1, 1, 10, 1), 'Width')
+            .appendField(Blockly.Msg['HUCON_EVENTS_BUTTON_HEIGHT'])
+            .appendField(new Blockly.FieldNumber(1, 1, 10 ,1), 'Height');
+        // this.setInputsInline(true);
         this.appendStatementInput('function')
             .setCheck(null)
             .appendField(new Blockly.FieldTextInput(Blockly.Msg['HUCON_EVENTS_FUNC']), 'EventName');
         this.setColour(Blockly.Msg['HUCON_EVENTS_HUE']);
 
         var thisBlock = this;
-        this.setTooltip(function() {
+        this.setTooltip(function () {
             return Blockly.Msg['HUCON_EVENTS_BUTTON_TOOLTIP_1'] + thisBlock.getFieldValue('EventName') + Blockly.Msg['HUCON_EVENTS_BUTTON_TOOLTIP_2'];
         });
-    }
+
+        this.setOnChange(function (changeEvent) {
+            if (changeEvent.type === Blockly.Events.BLOCK_CHANGE) {
+                let values = this.getInput('Values')
+
+                let x = values.fieldRow.find(({name}) => name === 'X').getValue()
+                let y = values.fieldRow.find(({name}) => name === 'Y').getValue()
+                let width  = values.fieldRow.find(({name}) => name === 'Width').getValue()
+                let height = values.fieldRow.find(({name}) => name === 'Height').getValue()
+
+                if ((x + width) > 10)
+                    values.fieldRow.find(({name}) => name === 'Width').setValue(10 - x);
+
+                if ((y + height) > 10)
+                    values.fieldRow.find(({name}) => name === 'Height').setValue(10 - y);
+            }
+            });
+    },
 };
 Blockly.Python.event_button_object = function(block) {
     // Catch all global variables.