Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blockly v11 #62

Merged
merged 20 commits into from
Aug 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
cb5187a
feat: updated multiselect plugin for blockly-v11
changminbark Jul 6, 2024
7ac344b
removed manual highlighting
changminbark Jul 10, 2024
699e359
made PR fixes and CHECKED scroll-options plugin and multiple workspaces
changminbark Jul 11, 2024
322a189
fix: drag to dupe bug, click to select
changminbark Jul 12, 2024
0aa24f7
removed unnecessary gesture replacement
changminbark Jul 12, 2024
2095a4d
removed monkey patch line in disablemultiselect
changminbark Jul 12, 2024
9205563
updated comment for gesture disabling/enabling
changminbark Jul 12, 2024
69f6747
fix: PR changes; found new errors (that cannot be mitigated at the mo…
changminbark Jul 13, 2024
dfc670b
fix: delete area and duplicate
changminbark Jul 14, 2024
446935c
fix: got rid of monkey patch
changminbark Jul 16, 2024
21c188f
fix: made PR changes and added support for ws comments (waiting for u…
changminbark Jul 23, 2024
7658200
fix: compatibility issues with keyboard navigation plugin copy/cut/pa…
changminbark Jul 25, 2024
5ac0250
feat: added compatibility with keyboard nav plugin and updated docume…
changminbark Jul 26, 2024
c4b6c9d
removed unnecessary conditional check
changminbark Jul 26, 2024
b80b9b1
fix: updated readme for top blocks plugin
changminbark Aug 3, 2024
2fd69c1
fix: PR fixes for comment compatibility behavior
changminbark Aug 5, 2024
fa02da3
chore: added devDependency for field color
changminbark Aug 6, 2024
87763b7
chore: removed unnecessary color fields plugin devDependency
changminbark Aug 6, 2024
2601a66
chore: updated README for cross-checking plugins
changminbark Aug 12, 2024
5c382b5
package.json version bump
HollowMan6 Aug 17, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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