Skip to content

Commit

Permalink
Blockly v11 (#62)
Browse files Browse the repository at this point in the history
* feat: updated multiselect plugin for blockly-v11

* removed manual highlighting

* made PR fixes and CHECKED scroll-options plugin and multiple workspaces

* fix: drag to dupe bug, click to select

* removed unnecessary gesture replacement

* removed monkey patch line in disablemultiselect

* updated comment for gesture disabling/enabling

* fix: PR changes; found new errors (that cannot be mitigated at the moment)

* fix: delete area and duplicate

* fix: got rid of monkey patch

* fix: made PR changes and added support for ws comments (waiting for undo-stack problem)

* fix: compatibility issues with keyboard navigation plugin copy/cut/paste functions

* feat: added compatibility with keyboard nav plugin and updated documentation

* removed unnecessary conditional check

* fix: updated readme for top blocks plugin

* fix: PR fixes for comment compatibility behavior

* chore: added devDependency for field color

* chore: removed unnecessary color fields plugin devDependency

* chore: updated README for cross-checking plugins

* package.json version bump

Signed-off-by: Hollow Man <[email protected]>

---------

Signed-off-by: Hollow Man <[email protected]>
Co-authored-by: Hollow Man <[email protected]>
  • Loading branch information
changminbark and HollowMan6 authored Aug 17, 2024
1 parent a26aa24 commit 17bebed
Show file tree
Hide file tree
Showing 12 changed files with 3,229 additions and 1,307 deletions.
58 changes: 47 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,15 @@ npm install @mit-app-inventor/blockly-plugin-workspace-multiselect --save

```js
import * as Blockly from 'blockly';
import {Multiselect, MultiselectBlockDragger} from '@mit-app-inventor/blockly-plugin-workspace-multiselect';
import {Multiselect} from '@mit-app-inventor/blockly-plugin-workspace-multiselect';

options = {
toolbox: toolboxCategories,
plugins: {
'blockDragger': MultiselectBlockDragger, // Required to work
},

// // For integration with other plugins that also
// // need to change the blockDragger above (such as
// // scroll-options).
// baseBlockDragger: ScrollBlockDragger
// The plugin should work with other plugins
// that require a custom block dragger, like
// the scroll-options plugin as this plugin
// was updated to not require a custom dragger.

// Double click the blocks to collapse/expand
// them (A feature from MIT App Inventor).
Expand All @@ -56,7 +53,10 @@ options = {
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
// The best support (default) is given for Shift. Provide an empty array []
// will revert to the default key.
multiSelectKeys: ['Shift', 'Control'],
// One thing to make sure is that the multiSelectKeys do not overlap with the
// keys defined for the shortcut actions as it will lead to a cascade of calls,
// which is not ideal for the browser.
multiSelectKeys: ['Shift'],

multiselectCopyPaste: {
// Enable the copy/paste accross tabs feature (true by default).
Expand Down Expand Up @@ -102,6 +102,7 @@ multiselectPlugin.init(options);

## Known issues
- [ ] Currently, we rely on DragSelect to know which block gets selected. DragSelect seems to listen to the "blocks". However, it actually works by listening to the SVG path element, which is always a rectangle with some transparent parts forming a block. For irregularly shaped blocks, if you click on the transparent area that within the SVG rectangle, it will still get selected. (a mitigation has already been introduced in v0.1.4, but a proper fix should be that Blockly implements some kind of API, so that we can know for sure where the block actually locates.)
- [ ] Currently, there is an issue related to the pointerdown event listener workaround for the setStartBlock gesture handling. The SVG root of a block that has a next block overlaps with that next block. So, when we try to remove the pointerdown event listener for the next block, it does not matter as the pointerdown event listener for the parent (higher level) block is still present. (a fix may be introduced when the Blockly team introduces proper gesture handling for setStartBlock.)

### Note on multi-field updates
When the multiFieldUpdate option is enable, the plugin will automatically update the fields of all selected blocks with the
Expand All @@ -113,12 +114,46 @@ update to update the dropdown fields. To do this, you can use the `Multiselect.w
within the function which updates the dependent field. It allows you to temporarily turn off the multi-field update within the
scope of its wrapped input function.

## Cross-tested with the following plugins:
**Original**
- [x] Scroll-options plugin
- [x] Backpack (Need to update UI in Backpack plugin side)

**Workspace-related**
- [x] Keyboard-navigation
- [x] Shadow-block-converter
- [x] Workspace-content-highlight
- [x] Disable-top-blocks
- [x] Plugin-strict-connection-checker

**Blocks-related**
- [x] Block-dynamic-connection
- [x] Block-shareable-procedures
- [x] Block-test

For more information, please check out the following [issue page](https://github.com/mit-cml/workspace-multiselect/issues/50).

### Note on keyboard navigation plugin
Currently, the keyboard navigation plugin has no compatibility issues with the multiselect plugin. It is enabled by default
in the test files. However, one thing that developers and users should note is that the regular Blockly core's copy/cut/paste shortcuts
and multiselect plugin's copy/cut/paste shortcuts are completely disabled when the keyboard navigation mode is turned on. This was assumed
to be the expected behavior of the user as it defeats the purpose of having the keyboard navigation mode turned on and the user would try to
select blocks using the cursor and copy/cut/paste with that selection. However, if a developer wants to allow for either copy/cut/paste behavior
(Blockly Core or multiselect plugin) while the keyboard navigation mode is turned on, we would have to make the following changes described in this
[issue](https://github.com/google/blockly-samples/issues/2424).

### Note on disable top blocks plugin
The disable top blocks plugin has to be initialized after the multiselect plugin. The main reason behind this is that
the multiselect plugin has its own custom context menu, which allows for the disabling of any blocks (not just top blocks).
Installing the multiselect plugin after the disable top blocks plugin overrides the disable top blocks plugin's context menu
customization. If we install the disable top blocks plugin after the multiselect plugin, everything works as intended.

## API

- `Multiselect.init`: Initialize the plugin.
- `Multiselect.dispose`: Dispose the plugin.
- `MultiselectBlockDragger`: The customized block dragger for multiple selection.
- `blockSelectionWeakMap`: The WeakMap storing set of currently selected block ids by workspace svg.
- `MultiselectDraggable`: The customized draggable object unique to each workspace that contains the blocks in the multiselection.
- `dragSelectionWeakMap`: The WeakMap storing set of currently selected block ids by workspace svg.
- `inMultipleSelectionModeWeakMap`: The WeakMap storing whether the plugin is in multiple selection mode by workspace svg.
- `Multiselect.withoutMultiFieldUpdates`: A wrapper function to ignore multi-field updates.
- `Multiselect.setMultiselectIcon`: Pass in the icon URLs/data to change the multiselect icon at runtime.
Expand All @@ -127,6 +162,7 @@ scope of its wrapped input function.
- [DragSelect](https://github.com/ThibaultJanBeyer/DragSelect): This plugin uses DragSelect to realize the "drag a rectangle to select multiple blocks" feature. The patching PR [#143](https://github.com/ThibaultJanBeyer/DragSelect/pull/143) and [#165](https://github.com/ThibaultJanBeyer/DragSelect/pull/165) made all this possible, and these PRs are included in [v2.6.0](https://github.com/ThibaultJanBeyer/DragSelect/releases/tag/v2.6.0).
- [select.svg](test/media/select.svg) & [unselect.svg](test/media/unselect.svg): Free icons downloaded at [Icons8](https://icons8.com).
- This plugin is part of the achievement by Songlin Jiang([@HollowMan6](https://github.com/HollowMan6)) participating the [Google Summer of Code 2022](https://summerofcode.withgoogle.com/programs/2022/projects/9wF06HWE) at [MIT App Inventor](https://github.com/mit-cml).
- This plugin was updated for Blockly-v11 and cross-checked with other Blockly plugins by Chang Min Bark([@changminbark](https://github.com/changminbark)) participating the [Google Summer of Code 2024](https://summerofcode.withgoogle.com/archive/2024/projects/9916Xzin) at [MIT App Inventor](https://github.com/mit-cml).
- Thanks for the sponsor from [@zakx](https://github.com/zakx) & [@laurensvalk](https://github.com/laurensvalk).

## License
Expand Down
Loading

0 comments on commit 17bebed

Please sign in to comment.