[blockly] Add multi-select feature

bundles/org.openhab.ui/web/package.json

@@ -63,11 +63,11 @@
   ],
   "dependencies": {
     "@blockly/field-slider": "^6.1.4",
-    "@blockly/plugin-cross-tab-copy-paste": "^5.0.5",
     "@blockly/plugin-workspace-search": "^8.1.2",
     "@blockly/shadow-block-converter": "^5.0.0",
     "@blockly/theme-dark": "^6.0.5",
     "@blockly/zoom-to-fit": "^5.0.11",
+    "@mit-app-inventor/blockly-plugin-workspace-multiselect": "^0.1.12",
     "@jsep-plugin/arrow": "^1.0.5",
     "@jsep-plugin/object": "^1.2.1",
     "@jsep-plugin/regex": "^1.0.3",

bundles/org.openhab.ui/web/src/components/config/controls/blockly-editor.vue

@@ -1077,9 +1077,9 @@ import Blockly from 'blockly'
 import { WorkspaceSearch } from '@blockly/plugin-workspace-search'
 import { javascriptGenerator } from 'blockly/javascript.js'
 import DarkTheme from '@blockly/theme-dark'
-import { CrossTabCopyPaste } from '@blockly/plugin-cross-tab-copy-paste'
 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 Vue from 'vue'
 
@@ -1187,24 +1187,42 @@ export default {
       }, this.isGraalJs)
       this.addLibraryToToolbox(libraryDefinitions || [])
 
-      this.workspace = Blockly.inject(this.$refs.blocklyEditor, {
+      const options = {
         toolbox: this.$refs.toolbox,
+        plugins: {
+          'blockDragger': MultiselectBlockDragger
+        },
         horizontalLayout: !this.$device.desktop,
         theme: this.$f7.data.themeOptions.dark === 'dark' ? DarkTheme : undefined,
-        zoom:
-          {
-            controls: true,
-            wheel: true,
-            startScale: 1.0,
-            maxScale: 3,
-            minScale: 0.3,
-            scaleSpeed: 1.2,
-            pinch: true
-          },
+        zoom: {
+          controls: true,
+          wheel: true,
+          startScale: 1.0,
+          maxScale: 3,
+          minScale: 0.3,
+          scaleSpeed: 1.2,
+          pinch: true
+        },
+        move: {
+          drag: true,
+          wheel: true
+        },
         trashcan: false,
         showLabels: false,
+
+        // Multi-select-options
+        multiselectCopyPaste: {
+          crossTab: true,
+          menu: true
+        },
+        multiselectIcon: {
+          hideIcon: true // hide it because it doesn't work in v0.1.11
+        },
+        multiFieldUpdate: true,
+
         renderer: this.getCurrentRenderer()
-      })
+      }
+      this.workspace = Blockly.inject(this.$refs.blocklyEditor, options)
       this.workspace.addChangeListener(shadowBlockConversionChangeListener)
       const workspaceSearch = new WorkspaceSearch(this.workspace)
       workspaceSearch.init()
@@ -1215,19 +1233,8 @@ export default {
       const zoomToFit = new ZoomToFitControl(this.workspace)
       zoomToFit.init()
 
-      if (!Blockly.ContextMenuRegistry.registry.getItem('blockCopyToStorage')) {
-        const copyAndPasteOptions = {
-          contextMenu: true,
-          shortcut: true
-        }
-        const copyAndPastePlugin = new CrossTabCopyPaste()
-        copyAndPastePlugin.init(copyAndPasteOptions, () => {
-          console.log('There has been a block type error during copying and pasting')
-        })
-
-        Blockly.Msg['CROSS_TAB_COPY'] = 'Cross-Rule-Copy'
-        Blockly.Msg['CROSS_TAB_PASTE'] = 'Cross-Rule-Paste'
-      }
+      const multiselectPlugin = new Multiselect(this.workspace)
+      multiselectPlugin.init(options)
 
       this.registerLibraryCallbacks(libraryDefinitions)
       const xml = Blockly.utils.xml.textToDom(this.blocks)