Blockly: explain the multiselect feature

openhab/openhab-webui#2419

Signed-off-by: Jimmy Tanagra <jcode@tanagra.id.au>

Author: jimtng

configuration/blockly/rules-blockly-before-using.md

@@ -87,52 +87,63 @@ See the following video on ![youtube](../images/blockly/youtube-logo-small.png)
 
 More about the topic of code generation can be viewed at ![youtube](../images/blockly/youtube-logo-small.png) [Blockly as an ECMA-Script code generator](https://youtu.be/EdllUlJ7p6k?t=1739)
 
-### Block context menu
+### Panning and Zooming
 
-It should also be mentioned that each of the blocks do have a context sensitive menu which appears upon a right click on the block itself.
+You can move around Blockly's workspace by clicking and dragging on the empty space, or by using two fingers on a touch screen or a trackpad.
 
-![blockly-context.png](../images/blockly/blockly-contextmenu.png)
+Zooming can be done using either of these methods:
 
-#### **Cross-Rule-Copy/Paste**
+- By pinching or stretching on a touch screen or a trackpad.
+- By holding <kbd>Ctrl</kbd> while dragging or moving with two fingers on the touch screen or trackpad.
+- With the on-screen controls:
+  
+  ![workspace-zoom-controls](../images/blockly/blockly-zoom.png)
 
-Sometimes you may want to copy some blocks from one rule to another.
-This is what _Cross-Rule-Copy/Paste_ is for.
-Just mark the block(s) you want to copy, click on _Cross-Rule-Copy_ and then in the destination rule open the context menu and click on _Cross-Rule-Paste_.
+### Context Menu
 
-![cross-rule-copy](../images/blockly/blockly-cross-rule-copy.png)
+A context menu is available when right-clicking on a block.
 
-Note that you cannot select several blocks at once but only one block to copy.
+![Blockly Context Menu](../images/blockly/blockly-contextmenu.png)
 
-::: tip Copy multiple blocks
+Right-clicking on an empty area in the workspace will pop up a slightly different context menu.
+In particular, `Clean up Blocks` will automatically move and arrange your blocks neatly.
 
-A way to copy multiple blocks at once is to copy a parent block, e.g. a loop block, that contains all the blocks you want to copy together.
-If you want to copy a number of connected blocks at once that do not have a parent block, there is nice trick to do that anyway: drag a function block into the workspace of the source rule, add the blocks to be copied into that function block, copy that function block and then paste it in the destination rule.
-Then in the destination rule just remove the function block that helped you to copy the inner blocks.
+### Selecting Blocks
 
-:::
+Click on a block to select it.
 
-Copy and Paste in Action:
+You can select multiple blocks by holding the <kbd>Shift</kbd> key while clicking on other blocks.
+Alternatively, hold down the <kbd>Shift</kbd> key, click on an empty area and start dragging to select the blocks within the selection rectangle.
 
-![copy-and-paste-in-action](../images/blockly/blockly-cross-rule-copy-and-paste.gif)
+Child blocks are automatically selected when their parent is selected.
+
+Once selected, the blocks can be copied, duplicated, deleted, or moved around.
+
+### Copying & Pasting
+
+Copy-pasting can be used as a quick way to duplicate a set of blocks within the same script.
+You can also copy a set of blocks into your clipboard, and paste them into another script.
+
+### Other Operations
 
 - **Duplicate**: Clones the block
 - **Add comment**: Adds a comment to the block
 - **Inline Inputs** / External inputs: Switches between horizontal or vertical alignment of inputs
 
-Inline:
-![inline-inputs](../images/blockly/blockly-inputs-inline.png)
+  Inline:
+  ![inline-inputs](../images/blockly/blockly-inputs-inline.png)
 
-External:
-![external-inputs](../images/blockly/blockly-inputs-external.png)
+  External:
+  ![external-inputs](../images/blockly/blockly-inputs-external.png)
 
 - **Collapse (expand) block**: Shrinks the block to get a better overview
 
-Normal block view:
-![expanded-block](../images/blockly/blockly-expanded.png)
+  Normal block view:
+  ![expanded-block](../images/blockly/blockly-expanded.png)
 
-Collapsed view:
+  Collapsed view:
 
-![collapsed-block](../images/blockly/blockly-collapsed.png)
+  ![collapsed-block](../images/blockly/blockly-collapsed.png)
 
 - **Disable (enable) block**: Disables the block, so no code is generated and its functionality switched off
 - **Delete**: delete the blocks (this can be reverted via Command/Ctrl-Z)
@@ -145,14 +156,6 @@ After pressing _Enter_ all found blocks that contain the search term are marked
 
 ![blockly-search](../images/blockly/blockly-search.png)
 
-### Zoom the workspace
-
-The following controls allow the workspace to be zoomed:
-
-![workspace-zoom-controls](../images/blockly/blockly-zoom.png)
-
-Pinching on a tablet or a touch bar also allows convenient zooming of the workspace.
-
 ## Use Frontail for viewing log files
 
 During development the log-block is lot very often which writes information into the log files.

configuration/images/blockly/blockly-contextmenu.png

@@ -14,23 +14,44 @@ The following is a short overview of the most important keyboard shortcuts.
 
 Mac users should use <kbd>Cmd</kbd> instead of <kbd>Ctrl</kbd> for most shortcuts.
 
+Panning & Zooming:
+
+- <kbd>Click</kbd> + <kbd>Drag</kbd>, <kbd>Scroll Wheel</kbd> (mouse), or <kbd>Two Fingers</kbd> (trackpad) to pan around.
+- <kbd>Ctrl</kbd> + <kbd>Scroll Wheel</kbd> or <kbd>Ctrl</kbd> + <kbd>Two Fingers</kbd> to zoom in and out.
+
 Selection:
 
 - Click a block to select it.
+- <kbd>Shift</kbd> + <kbd>Click</kbd> or <kbd>Shift</kbd> + <kbd>Drag</kbd>: Select multiple blocks.
+- <kbd>Ctrl</kbd> + <kbd>A</kbd>: Select all blocks.
+- Clicking on an empty area deselects everything.
 
-Deleting a block:
+Deleting Blocks:
 
-- Once selected, it can be deleted with the <kbd>Delete</kbd> key.
-- Alternatively the block can be dragged into the toolbox area to delete it.
+- <kbd>Delete</kbd>: Delete the selected blocks.
+- Alternatively, the blocks can be deleted by dragging them into the toolbox area.
 
 Copy & Paste:
 
-- <kbd>Ctrl+C</kbd>: Copy the selected block.
-- <kbd>Ctrl+X</kbd>: Cut selected block.
-- <kbd>Ctrl+V</kbd>: Paste what has been copied.
+- <kbd>Ctrl</kbd> + <kbd>C</kbd>: Copy the selected blocks.
+- <kbd>Ctrl</kbd> + <kbd>X</kbd>: Cut the selected blocks.
+- <kbd>Ctrl</kbd> + <kbd>V</kbd>: Paste what has been copied.
+- Copied blocks can be pasted into another Blockly script in a different window/tab.
+
+Search:
+
+- <kbd>Ctrl</kbd>+<kbd>F</kbd>: Search in blocks.
 
 Redo & Undo:
 
-- <kbd>Ctrl+Z</kbd>: Undo the last change.
-- <kbd>Ctrl+Y</kbd> (<kbd>Shift+Cmd+Z</kbd> on Mac): Redo the last change.
+- <kbd>Ctrl</kbd> + <kbd>Z</kbd>: Undo the last change.
+- <kbd>Ctrl</kbd> + <kbd>Y</kbd> (<kbd>Shift</kbd> + <kbd>Cmd</kbd> + <kbd>Z</kbd> on Mac): Redo the last change.
+
+Commenting:
+
+- Right click on the block and select <kbd>Add Comment</kbd>
+
+Formatting:
+
+- Right click on an empty area and select `Clean up Blocks`
 <!-- END MAINUI SIDEBAR DOC - DO NOT REMOVE -->