npm package: @rshaker/multiselect-blockly
Description: Blockly plugin supporting multiple-selection of top-level blocks
Author: Ron Shaker
Latest version: 0.4.1

# multiselect-blockly

[![Built on Blockly](https://tinyurl.com/built-on-blockly)](https://github.com/google/blockly)

A [Blockly](https://www.npmjs.com/package/blockly) plugin that allows for simultaneous selection and manipulation of multiple top-level blocks. Common operations include copy, paste, delete, duplicate, expand, collapse, inline, arrange--The usual Blockly actions, but for more than _one_ block. Block settings such as movable, editable, and deletable may also be toggled on or off using the the same set of context menu actions.

To activate multiselect mode, shift-click on a block _or_ use the rectangular selection tool (shift-click-drag on background). Selected blocks will appear grey. Clicking on the background or any unselected block will deactivate multiselect mode.

#### Shift-click

<!-- <img width="500px" src="./assets/plugin-shift-click.png"> -->
<img width="500px" src="https://raw.githubusercontent.com/rshaker/multiselect-blockly/main/assets/plugin-shift-click.png">

#### Rectangle selection

<!-- <img width="500px" src="./assets/plugin-rect-select.png"> -->
<img width="500px" src="https://raw.githubusercontent.com/rshaker/multiselect-blockly/main/assets/plugin-rect-select.png">

#### Customizable context menu

<!-- <img width="500px" src="./assets/plugin-context-menu.png"> -->
<img width="500px" src="https://raw.githubusercontent.com/rshaker/multiselect-blockly/main/assets/plugin-context-menu.png">

## Installation

### npm

```bash
npm install @rshaker/multiselect-blockly
```

### unpkg

```html
<script src="https://unpkg.com/@rshaker/multiselect-blockly/dist/multiselect.js"></script>
```

## Usage

The following examples show how to inject the plugin into a Blockly workspace.

### Using node:

```js
import * as Blockly from "blockly/core";
import { MultiselectPlugin } from "@rshaker/multiselect-blockly";

const workspace = Blockly.getMainWorkspace();
const plugin = new MultiselectPlugin({}, workspace);

plugin.init();
```

See [test/workspace/index.ts](https://github.com/rshaker/multiselect-blockly/blob/main/test/workspace/index.ts) for a complete example, the live demo is [here](https://rshaker.github.io/multiselect-blockly/test/workspace).

### Using a browser:

```html
<div id="blocklyDiv"></div>

<script src="https://unpkg.com/blockly@10.4.3/blockly.min.js"></script>
<script src="https://unpkg.com/@rshaker/multiselect-blockly/dist/multiselect.js"></script>

<script>
    function createWorkspace(blocklyDiv, options) {
        const optionsMgr = multiselect.OptionsMgr.getInstance();
        optionsMgr.setOptions({
            copyPasteToStorage: true,
            copyPasteToClipboard: true,
            hideDisabledMenuItems: false,
            enableBlockMenu: true,
            blockScope: {
                // movable: true,
            },
            enableWorkspaceMenu: true,
            workspaceScope: {
                // select: false,
            },
            multiselectScope: {
                // redo: true,
            },
        });
        const workspace = Blockly.inject(blocklyDiv, options); // hardcoded blocklyDiv
        const plugin = new multiselect.MultiselectPlugin(workspace);
        window.MultiselectPlugin = plugin;
        plugin.init();

        return workspace;
    }

    document.addEventListener("DOMContentLoaded", function () {
        const toolbox = {
            kind: "flyoutToolbox",
            contents: [
                {
                    kind: "block",
                    type: "controls_if",
                },
            ],
        };

        createWorkspace(document.getElementById("blocklyDiv"), {
            toolbox: toolbox,
        });
    });
</script>
```

See [test/browser/unpkg-plugin.html](https://github.com/rshaker/multiselect-blockly/blob/main/test/browser/unpkg-plugin.html) for a complete example, the live demo is <a href="https://rshaker.github.io/multiselect-blockly/test/browser/unpkg-plugin.html">here</a>.

## Compatibility

This plugin is currently compatible only with the most recent versions of Chrome. I hope to add testing for Edge, Safari and Firefox shortly, this package is still under active development, expect instability and bugs.

## License

MIT