[blockly] Add typed vars (#2581)

This PR **is really a game changer** for further Blockly Usage. It adds typed variables which in turn allows Blockly to generate the right code. This is what I was looking for a very long time and will also reduce many of the issues that popped up here and there. Fixes #2057. --------- Also-by: Florian Hotze <[email protected]> Signed-off-by: Stefan Höhn <[email protected]>
openhab · May 19, 2024 · 7e59922 · 7e59922
1 parent 37cfea2
commit 7e59922
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 2 deletions.
diff --git a/bundles/org.openhab.ui/web/package-lock.json b/bundles/org.openhab.ui/web/package-lock.json
diff --git a/bundles/org.openhab.ui/web/package.json b/bundles/org.openhab.ui/web/package.json
@@ -48,6 +48,7 @@
   ],
   "dependencies": {
     "@blockly/field-slider": "^6.1.4",
+    "@blockly/plugin-typed-variable-modal": "^7.0.15",
     "@blockly/plugin-workspace-search": "^8.1.2",
     "@blockly/shadow-block-converter": "^5.0.0",
     "@blockly/theme-dark": "^6.0.5",

diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-things.js b/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-things.js
@@ -20,7 +20,7 @@ export default function defineOHBlocks (f7, isGraalJs) {
       this.setInputsInline(true)
       this.setTooltip('Pick a thing from the Thing List')
       this.setHelpUrl('https://www.openhab.org/docs/configuration/blockly/rules-blockly-items-things.html#thing')
-      this.setOutput(true, null)
+      this.setOutput(true, 'oh_thing')
     }
   }
 

diff --git a/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-uom.js b/bundles/org.openhab.ui/web/src/assets/definitions/blockly/blocks-uom.js
@@ -15,7 +15,7 @@ export default function (f7, isGraalJs) {
       this.appendDummyInput()
         .appendField('Qty ')
       this.appendValueInput('value')
-        .setCheck(['String', 'oh_itemtype', 'oh_item'])
+        .setCheck(['String', 'Number', 'oh_itemtype', 'oh_item'])
       this.appendValueInput('unit')
         .setCheck('String')
       this.setColour(58)
@@ -28,12 +28,14 @@ export default function (f7, isGraalJs) {
 
   javascriptGenerator.forBlock['oh_quantity_ext'] = function (block) {
     let value = javascriptGenerator.valueToCode(block, 'value', javascriptGenerator.ORDER_NONE)
+
     const unit = javascriptGenerator.valueToCode(block, 'unit', javascriptGenerator.ORDER_NONE)
     const inputType = blockGetCheckedInputType(block, 'value')
 
     let code
     switch (inputType) {
       case 'String':
+      case 'Number':
         code = `Quantity(${value} + ${unit})`
         break
       case 'oh_itemtype':
@@ -43,6 +45,9 @@ export default function (f7, isGraalJs) {
         value = `items.getItem(${value})`
         code = `(${value}.quantityState !== null) ? ${value}.quantityState.toUnit(${unit}) : Quantity(${value}.numericState + ${unit})`
         break
+      default:
+        code = `Quantity(${value} + ${unit})`
+        break
     }
 
     if (isGraalJs) {

diff --git a/bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue b/bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue
@@ -1075,6 +1075,7 @@
 
       <sep />
 
+      <category name="Typed Variables" colour="%{BKY_VARIABLES_HUE}" custom="CREATE_TYPED_VARIABLE" />
       <category name="Variables" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE" />
       <category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE" />
       <category :name="libraryDefinitions ? 'This Library' : 'Libraries'" colour="gray" ref="libraryCategory" />
@@ -1099,6 +1100,13 @@
   border-color var(--blockly-ws-search-border-color)
   box-shadow none
   color var(--blockly-ws-search-text-color)
+.blocklyModalContainer
+  color black
+  .blocklyModalHeader
+    .blocklyModalHeaderTitle
+      width 100%
+    .blocklyModalBtnClose
+      visibility hidden
 textarea.blocklyHtmlTextAreaInput
   background #ffffff
   color #000000
@@ -1112,6 +1120,7 @@ import DarkTheme from '@blockly/theme-dark'
 import { ZoomToFitControl } from '@blockly/zoom-to-fit'
 import { shadowBlockConversionChangeListener } from '@blockly/shadow-block-converter'
 import { Multiselect, MultiselectBlockDragger } from '@mit-app-inventor/blockly-plugin-workspace-multiselect'
+import { TypedVariableModal } from '@blockly/plugin-typed-variable-modal'
 
 import Vue from 'vue'
 
@@ -1259,6 +1268,35 @@ export default {
       const workspaceSearch = new WorkspaceSearch(this.workspace)
       workspaceSearch.init()
 
+      const createFlyout = function (workspace) {
+        let xmlList = []
+        const button = document.createElement('button')
+        button.setAttribute('text', 'Create Typed Variable: Do not forget to choose the type!')
+        button.setAttribute('callbackKey', 'callbackName')
+        xmlList.push(button)
+
+        const blockList = Blockly.VariablesDynamic.flyoutCategoryBlocks(workspace)
+        xmlList = xmlList.concat(blockList)
+        return xmlList
+      }
+      this.workspace.registerToolboxCategoryCallback(
+        'CREATE_TYPED_VARIABLE',
+        createFlyout
+      )
+      const typedVarModal = new TypedVariableModal(this.workspace, 'callbackName', [
+        ['Item name', 'oh_item'],
+        ['Item object', 'oh_itemtype'],
+        ['Thing name', 'oh_thing'],
+        ['Thing object', 'oh_thingtype'],
+        ['Quantity', 'oh_quantity'],
+        ['String', 'String'],
+        ['Number', 'Number'],
+        ['Dictionary', 'Dictionary'],
+        ['Colour', 'Colour']
+      ])
+
+      typedVarModal.init()
+
       Blockly.utils.colour.setHsvSaturation(0.45) // default
       Blockly.utils.colour.setHsvValue(0.65) // a little bit more contrast for the different colors