[blockly] Add renderer switching (#2315)

This adds a little button on the bottom of blockly workspace to allow switching the renderer on the fly. The choice is saved in `localStorage`. --------- Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>
openhab · Feb 25, 2024 · 3b694d2 · 3b694d2
1 parent 8b2e548
commit 3b694d2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/app.vue b/bundles/org.openhab.ui/web/src/components/app.vue
@@ -600,6 +600,7 @@ export default {
         this.visibleBreakpointDisabled = true
         this.$nextTick(() => this.$f7.panel.get('left').disableVisibleBreakpoint())
       }
+      this.themeOptions.blocklyRenderer = localStorage.getItem('openhab.ui:blockly.renderer')
     },
     toggleDeveloperDock () {
       if (!this.$store.getters.isAdmin) return

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
@@ -1127,6 +1127,7 @@ export default {
   },
   mounted () {
     this.load()
+    this.$emit('mounted')
   },
   methods: {
     load () {
@@ -1201,7 +1202,8 @@ export default {
             pinch: true
           },
         trashcan: false,
-        showLabels: false
+        showLabels: false,
+        renderer: this.getCurrentRenderer()
       })
       this.workspace.addChangeListener(shadowBlockConversionChangeListener)
       const workspaceSearch = new WorkspaceSearch(this.workspace)
@@ -1268,6 +1270,27 @@ export default {
     getCode () {
       return javascriptGenerator.workspaceToCode(this.workspace)
     },
+    getRenderers () {
+      const excludedRenderers = ['minimalist']
+      const renderers = Object.keys(Blockly.registry.getAllItems('renderer'))
+        .filter(r => !excludedRenderers.includes(r))
+        .sort()
+      return renderers
+    },
+    getCurrentRenderer () {
+      return this.$f7.data.themeOptions.blocklyRenderer
+    },
+    changeRenderer (newRenderer) {
+      this.$f7.data.themeOptions.blocklyRenderer = newRenderer
+      localStorage.setItem('openhab.ui:blockly.renderer', newRenderer)
+
+      const dom = Blockly.Xml.workspaceToDom(this.workspace)
+      this.workspace.dispose()
+      this.initBlockly(this.blockLibraries)
+      this.workspace.clear()
+      Blockly.Xml.domToWorkspace(dom, this.workspace)
+      this.workspace.refreshToolboxSelection()
+    },
     onChange (event) {
       if (event.type === Blockly.Events.FINISHED_LOADING) {
         this.loading = false

diff --git a/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue b/bundles/org.openhab.ui/web/src/pages/settings/rules/script/script-edit.vue
@@ -30,6 +30,11 @@
                    :tooltip="rule.status.description" />
         </span>
         <span class="display-flex flex-direction-row align-items-center">
+          <f7-button v-if="isBlockly && !blocklyCodePreview" outline small class="no-ripple" style="margin-right: 5px; padding: 3px" :tooltip="'Block style'">
+            <select @change="setBlocklyRenderer($event)" style="text-align-last: center">
+              <option v-for="renderer in blocklyRenderers" :key="renderer" :selected="renderer === blocklyRenderer">{{ renderer }}</option>
+            </select>
+          </f7-button>
           <f7-button v-if="!createMode && isBlockly && !blocklyCodePreview" outline small :active="blocklyShowLabels" icon-f7="square_on_circle" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" style="margin-right: 5px" @click="toggleBlocklyItemLabelId" tooltip="Toggle to show either Item labels or IDs" />
           <f7-segmented v-if="!createMode && isBlockly" class="margin-right">
             <f7-button outline small :active="!blocklyCodePreview" icon-f7="ticket" :icon-size="($theme.aurora) ? 20 : 22" class="no-ripple" @click="blocklyCodePreview = false" tooltip="Show blocks" />
@@ -42,7 +47,7 @@
       <f7-icon v-if="!createMode && (!isBlockly && !editable) || (blocklyCodePreview && isBlockly)" f7="lock" class="float-right margin" style="opacity:0.5; z-index: 4000; user-select: none;" size="50" color="gray"
                :tooltip="(isBlockly) ? 'Cannot edit the code generated by Blockly' : 'This rule is not editable because it has been provisioned from a file'" />
       <editor v-if="!createMode && (!isBlockly || blocklyCodePreview)" class="rule-script-editor" :mode="mode" :value="script" @input="onEditorInput" :read-only="isBlockly || !editable" :tern-autocompletion-hook="true" />
-      <blockly-editor ref="blocklyEditor" v-else-if="!createMode && isBlockly" :blocks="currentModule.configuration.blockSource" :isGraalJs="mode === GRAALJS_MIME_TYPE" @change="scriptDirty = true" />
+      <blockly-editor ref="blocklyEditor" v-else-if="!createMode && isBlockly" :blocks="currentModule.configuration.blockSource" :isGraalJs="mode === GRAALJS_MIME_TYPE" @change="scriptDirty = true" @mounted="onBlocklyMounted" />
       <script-general-settings v-else-if="createMode" :createMode="true" :rule="rule" />
       <f7-block class="block-narrow" v-if="createMode">
         <f7-col>
@@ -166,7 +171,9 @@ export default {
       keyHandler: null,
       detailsOpened: false,
       blocklyCodePreview: false,
-      blocklyShowLabels: false
+      blocklyShowLabels: false,
+      blocklyRenderer: 'default',
+      blocklyRenderers: []
     }
   },
   computed: {
@@ -530,6 +537,14 @@ export default {
         }
       )
     },
+    onBlocklyMounted () {
+      this.blocklyRenderer = this.$refs.blocklyEditor.getCurrentRenderer()
+      this.blocklyRenderers = this.$refs.blocklyEditor.getRenderers()
+    },
+    setBlocklyRenderer (event) {
+      this.blocklyRenderer = event.target.value
+      this.$refs.blocklyEditor.changeRenderer(this.blocklyRenderer)
+    },
     toggleBlocklyItemLabelId () {
       this.blocklyShowLabels = !this.blocklyShowLabels
       this.$refs.blocklyEditor.showHideLabels(this.blocklyShowLabels)