My Google Summer of Code 2022 — Google Blockly Workspace MultiSelect Plugin

Ссылка на репозиторий проекта

PR и проблемы, решенные во время GSoC 2022:

PR #1
PR #2
ПР #3
PR #4
PR #5
google/blockly-samples PR #1202
ThibaultJanBeyer/DragSelect PR #128

Мой GitHub

Список рассылки для отслеживания

Привет! Если вы предпочитаете смотреть видео, посмотрите этот эпизод с демонстрацией плагина: https://www.youtube.com/watch?v=FZyvvPZhIRs.

Для тех, кто предпочитает читать, в этой статье я познакомлю вас с моей работой над плагином для выбора, перетаскивания и выполнения действий над несколькими блоками. Проект спонсируется Google Summer of Code (GSoC) 2022, под MIT App inventor.

Содержание

Фоны
Цель
История
Реализация
Функциональные возможности
Использование
Наконец-то

Фоны

Цель

Цель проекта — обеспечить возможность одновременного выбора нескольких блоков и позволить перемещать и выполнять действия с несколькими блоками в Blockly.

Это поведение похоже на то, как вы пытаетесь управлять файлами в вашей операционной системе. Вы можете щелкнуть по файлам, удерживая клавишу управления, перетащить прямоугольник, чтобы выбрать несколько файлов. Затем перемещайте их, копируя и удаляя.

Звучит немного просто, но на самом деле, я бы сказал, что это не так. Множественное выделение может стать безумно сложной функцией, если начать думать о деталях.

История

Этот запрос на функцию оставался открытым на GitHub Issues в течение шести лет. Однако до начала моего проекта он все еще находился на стадии обсуждения и был далек от начала реализации.

Поскольку сообщество Blockly давно хочет получить эту функцию, мы основываем наш плагин на последней версии Blockly, чтобы его можно было применить в проекте каждого. App Inventor использует версию Blockly, которая намного старше, поэтому очень жаль, что мы не можем увидеть, как она работает в App Inventor сейчас. Будем надеяться, что App Inventor сможет обновить версию Blockly до последней в ближайшее время.

Реализация

Функция «перетащить прямоугольник для выбора» реализована с помощью плагина DragSelect. Я отправил PR для добавления событий указателя, чтобы он мог работать в Blockly, и скоро он будет объединен.

Кроме того, я отключил функцию перетаскивания поверхности в Blockly, которая не позволяет нам перемещать несколько блоков одновременно. Кроме того, есть данные о том, что без поверхности перетаскивания мы можем работать лучше.

Итак, как работает плагин? В целом, плагин работает как адаптер. Он поддерживает свой собственный набор множественного выбора, который хранит выбранные в данный момент блоки и следит за тем, чтобы один из выбранных блоков всегда был выбран в ядре Blockly. Когда пользователи выполняют какие-то действия, плагин также передает все действия другим блокам в нашем наборе, помимо выбранного в ядре Blockly.

Функциональные возможности

Давайте проверим, на что способен плагин!

Дополнительные блоки можно выбрать, удерживая клавишу SHIFT при нажатии на новый блок. Вы также можете отменить выбор блока, щелкнув по уже выбранному блоку.
Нажатие на кнопку над мусорной корзиной эквивалентно удержанию и отпусканию клавиши SHIFT для переключения между режимом множественного выделения и обычным режимом.
Мы можем очистить выделение, щелкнув на фоне рабочей области.
Щелчок на новом блоке без удержания клавиши SHIFT может очистить множественное выделение и изменить выделение только на этот блок.
Удерживая клавишу SHIFT для перетаскивания прямоугольной области для выделения, можно изменить состояние выделения для блоков, которых касается прямоугольник.
В режиме множественного выбора перетаскивание рабочей области и перетаскивание блоков будет отключено. Можно только перетаскивать, чтобы нарисовать прямоугольник для выбора.
Когда некоторые из выбранных блоков находятся в одном блочном стеке, например, некоторые верхние блоки и некоторые их дочерние блоки находятся в выделении одновременно. Если это применимо, плагин отсоединяет только выбранный самый верхний блок в этом стеке с его родительским блоком. Переместите вместе со всеми дочерними блоками этого самого верхнего блока как единое целое.
Вы также можете перетащить все блоки в корзину.
Когда вы редактируете поля при выборе нескольких блоков, мы автоматически применим это ко всем блокам с тем же типом.
Также существует функция MIT App Inventor-only, которая была перенесена в этот плагин: вы можете дважды щелкнуть, чтобы свернуть или развернуть выбранные блоки.
Для контекстного меню, Duplicate будет дублировать выбранный самый верхний блок в стеке блоков и все дочерние блоки этого самого верхнего блока. Выбор будет изменен на все вновь созданные дубликаты самых верхних блоков. Для всех остальных элементов действия будут определяться состоянием блока, на котором пользователь щелкнул правой кнопкой мыши, и одно и то же действие будет применено ко всем блокам, независимо от их индивидуального состояния. Мы добавим текущее количество выбранных пользователем блоков, изменяющих состояние, и это количество будет показано только в том случае, если оно больше 1.
Опция Add Comment / Remove Comment добавит/удалит кнопки комментариев ко всем выбранным блокам.
Опция Inline Inputs / External Inputs преобразует формат ввода со всеми выбранными блоками.
Опция Collapse Block / Expand Block будет применяться только к выбранному самому верхнему блоку в стеке блоков.
Опция Disable Block / Enable Block будет применяться только к выбранному самому верхнему блоку в стеке блоков. Все дочерние блоки этого самого верхнего блока также будут отключены.
Число в Delete [X] Blocks — это количество выбранных самых верхних блоков в стеке блоков, а также всех дочерних блоков этого выбранного самого верхнего блока. Щелчок на этой опции приведет к удалению указанных блоков.
Опция Help отображает только справочную информацию о блоке, на котором пользователь только что щелкнул правой кнопкой мыши.
Мы добавляем Выделить все блоки в контекстное меню рабочей области.
Для клавиш быстрого доступа эти действия будут применяться только к выбранному самому верхнему блоку в стеке блоков. при нажатии Ctrl A можно выбрать все блоки в текущей рабочей области. Ctrl C для копирования выделенных блоков, Ctrl X для вырезания выделенных блоков в буфер обмена, и Ctrl V для вставки всех блоков, находящихся в буфере обмена, и выделения всех вновь вставленных блоков.
Перетаскивание соседей после перетаскивания во избежание перекрытия отключено в этом плагине по умолчанию, так как я нахожу это неудобным иногда для множественных выделений.
Щелчок по блоку выведет этот блок на передний план в случае, если отключена функция Bumping neighbours.

Использование

Если вы хотите интегрировать плагин в свой проект, вы можете добавить зависимость в ваш package.json. В исходном коде передайте плагину рабочее пространство, инициализируйте плагин, и готово! Вы можете отключить двойной щелчок по блокам, чтобы свернуть или развернуть их, и включить сталкивание соседей после перетаскивания, чтобы избежать перекрытия. Для элементов управления мультивыбором вы также можете скрыть иконку и настроить иконки каждого состояния. Более подробную информацию можно найти в README.

Вы также можете интегрировать этот плагин с другими, например, с опциями прокрутки, которые включают прокрутку по краю и прокрутку колесом для Blockly. Единственное, на что вам нужно обратить внимание, чтобы плагин опций прокрутки работал, это присвоить оригинальное значение blockDragger, необходимое для опций прокрутки, значению baseBlockDragger в нашем плагине. Во время работы над проектом я также отправил PR для исправления ошибки, из-за которой опции прокрутки не могут работать без поверхности перетаскивания, и он уже был объединен.

Наконец-то

Вот и все для этой статьи в блоге. Прежде чем он закончится, я хотел бы сказать спасибо моим наставникам, Эвану Паттону и Ли Ли, а также команде MIT App Inventor Team за то, что они направляли меня на протяжении всего проекта. Они действительно поддерживали меня. Также отдельное спасибо Беке Вестберг. Она посвятила много времени, давая советы и помогая просматривать код. Без нее мы не смогли бы создать этот плагин! Наконец, спасибо, что прочитали эту статью! Если у вас есть вопросы, пожалуйста, пишите в комментариях, и я обязательно отвечу. Будьте здоровы!