Plugin for Selecting & Dragging & Doing Actions on Multiple Blocks #1

HollowMan6 · 2022-07-12T04:26:46Z

User behavior

When some of the selected blocks are in one block stack, for example, some top blocks and some of their children blocks are in the selection simultaneously. If applicable, the plugin only disconnects the selected most top block in that stack with its parent block. Move along with all the children's blocks of that most top block as a whole.
Blocks can be deselected by clicking on the workspace background.
Additional blocks can be able to be selected/deselected by holding SHIFT key while clicking the new/already selected block.
Clicking a new block without holding SHIFT key can clear the multiple selections and only select that block.
Holding SHIFT key to drag a rectangle area to select can reverse their selection state for the blocks touched by the rectangle.
Clicking on the button above the dustbin is equivalent to holding/releasing the SHIFT key for switching between the multiple selection mode and the normal mode. Icons are customizable.
Bumping neighbours after dragging to avoid overlapping is disabled in this plugin by default. Enable with bumpNeighbours: true.
Click on a block will bring that block to front. (In case Bumping neighbours is disabled)
In multiple selection mode, workspace dragging as well as block dragging will all be disabled. You can only drag to draw a rectangle for selection.
The Duplicate menu will duplicate the selected most top block in the block stack and all the children blocks of that most top block. The selection will be changed to all newly created duplicate blocks' most top blocks.
The Add Comment / Remove Comment will instead read as Add Comment (X) / Remove Comment (X), and will add / remove comment buttons to all the selected blocks.
The Inline Inputs / External Inputs will instead read as Inline Inputs (X) / External Inputs (X), and will convert the input format with all the selected blocks.
The Collapse Block / Expand Block will instead read as Collapse Block (X) / Expand Block (X), and will only apply to the selected most top block in the block stack.
The Disable Block / Enable Block will instead read as Disable Block (X) / Enable Block (X), and will only apply to the selected most top block in the block stack. All the children blocks of that most top block will also get disabled.
For 11-14, X means the currently applicable number of selected blocks by the user, and (X) will only be shown when X is greater than 1.
The text to show in 11-14 is determined by the state of the block that the user right-clicks, and the same status will be applied to all the blocks no matter their individual state.
Delete [X] Blocks represents the count of the selected most top block in the block stack as well as all children of those selected most top block, and delete the blocks mentioned.
The "Help" option displays just the helping information for which block the user just right-clicked.
The workspace context menu has a item to Select all Blocks in that workspace.
When you use Ctrl/Alt + A, you can select all the blocks in the current workspace. Ctrl/Alt + C to copy the selected blocks, Ctrl/Alt + X to cut the selected blocks to the clipboard, and Ctrl/Alt + V to paste all the blocks currently in the clipboard and get all the newly pasted blocks selected, these will only apply to the selected most top block in the block stack.
(MIT App Inventor-only feature) Double click to collapse/expand currently selected blocks, enable with Blockly option useDoubleClick: true.

Note: This plugin is part of the achievement by Songlin Jiang(@HollowMan6) participating the Google Summer of Code 2022 at MIT App Inventor.

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

BeksOmega

This PR is quite large, so I'm going to have to review it in stages =) This is the first pass.

So far, looks really good! Thank you so much for your hard work on this :D

src/contextmenu.js

BeksOmega

Second Pass!

src/contextmenu.js

src/dragger.js

BeksOmega · 2022-07-12T21:47:47Z

src/dragger.js

+    });
+    if (this.blockDraggers_.size > 1) {
+      // Restore the highlighting around connection for multiple blocks.
+      Blockly.RenderedConnection.prototype.highlight = origHighlight;


I'd like to find a way around this that doesn't involve monkey patching the prototype, but I'll have to think on it haha. @BeksOmega for later.

If we can luckily fix the bug, then that monkey patch is no longer needed.

The bug is that, when you finished connecting multiple blocks at the same time, only one of the highlighted connection path that appear during the multiple drag can get deleted and others will still remain:

So the patch here is just a work around, it disables showing the highlight in a multiple drag.

Currently I have no idea on how to fix that, may be some upstream patches will be necessary I guess.

I agree that that is an upstream bug that needs to be fixed. Will file.

Filed: google/blockly#6273

Ok, I don't see a way around these monkey patches without fixes in core. @cpcallen , will module sealing break these patches? or will they be fine and we can leave them for now?

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

HollowMan6 · 2022-07-13T07:20:00Z

Hi @BeksOmega ! Thanks so much for reviewing, I have committed all the resolved code changes for the Pass 1 & 2 in a85fc79

In addition, I just disabled bumping neighbours and fixed a Bug 92234e7

The reason for disabling bumping is that, I noticed that sometimes, for multiple selection, bumping neighbours will lead some selected blocks' surrounding highlight disappear (while still selected) after moving, and I also dislike bumping neighbours in multiple selection mode as those unpredictable movements can make the workspace really messy.

The fixed random bug is that, when you drag the selected children blocks from their unselected parent, the children blocks of the selected ones can be out of the position while still connected after the disconnection (the selected blocks' children do should remain connected, but they shouldn't be out of the position).

…n when dragging Signed-off-by: Hollow Man <[email protected]>

BeksOmega

Pass 3! And good catch on that bumping bug =) Haven't had time to investigate ways around all of the prototype assignments yet.

src/global.js

src/index.js

BeksOmega · 2022-07-13T23:01:24Z

src/index.js

+        this.justDeletedBlock_.pathObject.updateSelected(false);
+        this.justDeletedBlock_ = null;
+      }
+      // Update the selection highlight.


Why do you need to update the selection highlight in bulk if you're updating individual blocks individual blocks as they're selected/unselected?

We may still want to do this here, otherwise such as in the multiple selection shortcut copy and paste, it's not easy to keep all those selected. Maybe it can be optimized later, but currently we just keep the original as it's an easy way to avoid bugs and it seems like that it won't impact the performance.

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

BeksOmega

Pass 4!

BeksOmega · 2022-07-13T23:06:41Z

src/dragger.js

+    });
+    if (this.blockDraggers_.size > 1) {
+      // Restore the highlighting around connection for multiple blocks.
+      Blockly.RenderedConnection.prototype.highlight = origHighlight;


I agree that that is an upstream bug that needs to be fixed. Will file.

src/patch.js

src/shortcut.js

src/switch.js

src/index.js

ewpatton · 2022-07-15T01:36:11Z

We should verify this. App Inventor uses a different rendering algorithm than base Blockly. We haven't tested whether the new render pipeline performs similarly without the optimizations we've added.

…

Sent from my iPhone

On Jul 14, 2022, at 20:12, Hollow Man ***@***.***> wrote: @HollowMan6 commented on this pull request. In src/patch.js: > +}; + +/** + * Fix when you drag the selected children blocks from their unselected parent + * the children blocks of the selected ones can be out of the position while + * still connected (do should remain connected). + * @OverRide + */ +Blockly.BlockDragger.prototype.updateBlockAfterMove_ = (function(func) { + if (func.isWrapped) { + return func; + } else { + const wrappedFunc = function(delta) { + func.call(this, delta); + this.draggingBlock_.render(); + this.draggingBlock_.getDescendants(false).forEach(function(block) { Okay, didn't aware that each time you render a block it rerenders all of that block's parents as well. So will check if the blocks have children, only re-render when they don't. Also will add this to the comment. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.

HollowMan6 · 2022-07-15T02:08:09Z

@ewpatton

We should verify this. App Inventor uses a different rendering algorithm than base Blockly. We haven't tested whether the new render pipeline performs similarly without the optimizations we've added.

Okay, then will add a TODO to verify that in App Inventor when ready.

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

BeksOmega · 2022-07-15T16:18:36Z

General JavaScript style note: Usually if a file only contains a single class, the name of the class and the name of the file are the same.

E.g. if a file exports a single class FooBar the file will be named foo_bar.js.

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

HollowMan6 · 2022-07-16T02:43:02Z

General JavaScript style note: Usually if a file only contains a single class, the name of the class and the name of the file are the same.

E.g. if a file exports a single class FooBar the file will be named foo_bar.js.

Okay, just reorganized the code accordingly.

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

BeksOmega

Ok, I think with this I've been about as helpful as I can be =)

The monkey patches included will definitely require maintenance (the core team does not guarantee they will continue to work). But aside from that, I think this is about as stable as one can make it.

@ewpatton you might want to have someone on your team take a look as well before merging.

lib/ds.min.js

src/multiselect.js

src/multiselect_controls.js

src/multiselect.js

src/multiselect_block_dragger.js

README.md

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

HollowMan6 · 2022-07-19T02:09:15Z

Ok, I think with this I've been about as helpful as I can be =)

The monkey patches included will definitely require maintenance (the core team does not guarantee they will continue to work). But aside from that, I think this is about as stable as one can make it.

Thanks so much for helping me review my code all the way around!

BeksOmega · 2022-07-19T13:48:52Z

Ok, I think with this I've been about as helpful as I can be =)
The monkey patches included will definitely require maintenance (the core team does not guarantee they will continue to work). But aside from that, I think this is about as stable as one can make it.

Thanks so much for helping me review my code all the way around!

Absolutely! Reviewing PRs is one of my favorite things =) I can't wait to see this go up on NPM!

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

test/index.js

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

ewpatton

This is looking pretty good @HollowMan6. I've left some comments for you to think about.

package.json

README.md

src/global.js

src/multiselect_patch.js

src/multiselect_contextmenu.js

src/multiselect_controls.js

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

ewpatton

@HollowMan6 I think this is good for a first pass. We're going to merge this and deploy this first version to npm so people can start trying it out. @ellelili2025 will coordinate next steps for integration into the latest version of App Inventor with Blockly 8.

HollowMan6 added 7 commits June 20, 2022 22:44

Dragger for Multi Select

9811503

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

Add icon for switching multi-select mode

bc2b23f

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

Fix to undo together for multiple dragging

d44848c

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

Bugs fix

225010a

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

Disabled the highlighting around connection for multiple blocks

b10d692

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

Context menu for multiselect

6a6a168

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

Add shortcut support. Double click to expand/collapse (MIT App inventor)

b6fa087

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

HollowMan6 mentioned this pull request Jul 12, 2022

Shift-drag to select multiple blocks and allow moving multiple block group google/blockly-samples#267

Closed

BeksOmega suggested changes Jul 12, 2022

View reviewed changes

Patches for Change Request Pass 1 & 2

a85fc79

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

Disable bumping neighbours and fix children blocks out of the positio…

92234e7

…n when dragging Signed-off-by: Hollow Man <[email protected]>

BeksOmega reviewed Jul 13, 2022

View reviewed changes

Patches for Change Request Pass 3

03ae57f

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

BeksOmega reviewed Jul 14, 2022

View reviewed changes

HollowMan6 added 2 commits July 15, 2022 12:07

Patches for Change Request Pass 4

4503f71

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

Fix bug (connect among selected blocks when dragging)

d5390d7

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

BeksOmega mentioned this pull request Jul 15, 2022

Connection highlights not disposed when using multiselect google/blockly#6273

Open

Reorganize the code

f2584f4

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

Remove unnecessary check

f9324d1

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

BeksOmega reviewed Jul 18, 2022

View reviewed changes

Patches for Change Request Pass 5

afc9b43

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

HollowMan6 mentioned this pull request Jul 22, 2022

fix: scroll-options when drag surface is disabled google/blockly-samples#1202

Merged

Make it suitable to integrate with scroll-options

6a34589

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

HollowMan6 commented Jul 22, 2022

View reviewed changes

test/index.js Outdated Show resolved Hide resolved

HollowMan6 added 4 commits July 22, 2022 13:27

Further make it suitable to integrate with wheel scroll

3bc4cbe

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

Fix typos and update

f34b226

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

Final check before beta release

98c0676

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

Add user behavior into README

10c25e8

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

ewpatton requested changes Jul 26, 2022

View reviewed changes

HollowMan6 added 6 commits July 26, 2022 18:20

Patches for change requests

5f21612

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

Revert to old ds.min.js

9aa17a1

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

Convert all Global data into WeakMap for multiple workspace

47c44ff

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

bug fix

d47edd7

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

fix indent

f37c2a1

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

Upgrade to latest DragSelect

0913755

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

HollowMan6 requested a review from ewpatton July 28, 2022 01:34

ewpatton approved these changes Jul 28, 2022

View reviewed changes

ewpatton merged commit 6452c91 into mit-cml:main Jul 28, 2022

HollowMan6 mentioned this pull request Jun 28, 2024

Problem with multi-select mode using rectangle drag to select #63

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plugin for Selecting & Dragging & Doing Actions on Multiple Blocks #1

Plugin for Selecting & Dragging & Doing Actions on Multiple Blocks #1

HollowMan6 commented Jul 12, 2022 •

edited

Loading

BeksOmega left a comment

BeksOmega left a comment

BeksOmega Jul 12, 2022

HollowMan6 Jul 13, 2022

BeksOmega Jul 13, 2022

BeksOmega Jul 15, 2022

BeksOmega Jul 15, 2022

HollowMan6 commented Jul 13, 2022 •

edited

Loading

BeksOmega left a comment

BeksOmega Jul 13, 2022

HollowMan6 Jul 15, 2022 •

edited

Loading

BeksOmega left a comment

BeksOmega Jul 13, 2022

ewpatton commented Jul 15, 2022 via email

HollowMan6 commented Jul 15, 2022

BeksOmega commented Jul 15, 2022

HollowMan6 commented Jul 16, 2022

BeksOmega left a comment

HollowMan6 commented Jul 19, 2022

BeksOmega commented Jul 19, 2022

ewpatton left a comment

ewpatton left a comment

Plugin for Selecting & Dragging & Doing Actions on Multiple Blocks #1

Plugin for Selecting & Dragging & Doing Actions on Multiple Blocks #1

Conversation

HollowMan6 commented Jul 12, 2022 • edited Loading

User behavior

BeksOmega left a comment

Choose a reason for hiding this comment

BeksOmega left a comment

Choose a reason for hiding this comment

BeksOmega Jul 12, 2022

Choose a reason for hiding this comment

HollowMan6 Jul 13, 2022

Choose a reason for hiding this comment

BeksOmega Jul 13, 2022

Choose a reason for hiding this comment

BeksOmega Jul 15, 2022

Choose a reason for hiding this comment

BeksOmega Jul 15, 2022

Choose a reason for hiding this comment

HollowMan6 commented Jul 13, 2022 • edited Loading

BeksOmega left a comment

Choose a reason for hiding this comment

BeksOmega Jul 13, 2022

Choose a reason for hiding this comment

HollowMan6 Jul 15, 2022 • edited Loading

Choose a reason for hiding this comment

BeksOmega left a comment

Choose a reason for hiding this comment

BeksOmega Jul 13, 2022

Choose a reason for hiding this comment

ewpatton commented Jul 15, 2022 via email

HollowMan6 commented Jul 15, 2022

BeksOmega commented Jul 15, 2022

HollowMan6 commented Jul 16, 2022

BeksOmega left a comment

Choose a reason for hiding this comment

HollowMan6 commented Jul 19, 2022

BeksOmega commented Jul 19, 2022

ewpatton left a comment

Choose a reason for hiding this comment

ewpatton left a comment

Choose a reason for hiding this comment

HollowMan6 commented Jul 12, 2022 •

edited

Loading

HollowMan6 commented Jul 13, 2022 •

edited

Loading

HollowMan6 Jul 15, 2022 •

edited

Loading