Контекстные меню

Контекстное меню содержит список действий, которые вы можете выполнить в отношении определенного элемента рабочей области. Контекстное меню отображается при щелчке правой кнопкой мыши и длительном нажатии.

Возможно, вы захотите создать настраиваемую опцию контекстного меню, если хотите добавить новый тип действий, которые может выполнять пользователь. Например, упорядочив все блоки в рабочей области или загрузив изображения блоков. Если вы считаете, что действие будет использоваться нечасто, контекстное меню — отличное место для его размещения. В противном случае вам может потребоваться создать более доступный для обнаружения способ доступа к действию.

Реализуйте новый вариант

Чтобы реализовать новую опцию контекстного меню, вам необходимо выполнить интерфейс RegistryItem .

ИДЕНТИФИКАТОР

Свойство id должно быть уникальной строкой, указывающей, что делает ваш пункт контекстного меню.

const deleteOption = {
  id: 'deleteElement',
};

Объем

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

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

Если вы хотите, чтобы ваше контекстное меню работало в нескольких областях, вам следует продублировать параметр контекстного меню и переопределить параметр области для каждой области.

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

Отображать текст

displayText — это то, что должно отображаться пользователю как часть пункта меню. Отображаемый текст может быть строкой или HTML или функцией, возвращающей строку или HTML.

const deleteOption = {
  displayText: 'Delete block',
};

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

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

Если вы используете функцию, ей также передается значение Scope , которое дает вам доступ к элементу, с которым связано контекстное меню (например, к блоку или рабочей области). Вы можете использовать это, чтобы добавить информацию об элементе в отображаемый текст.

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

Масса

weight определяет порядок отображения пунктов контекстного меню. Более положительные значения отображаются в списке ниже, чем менее положительные значения. (Вы можете себе представить, что варианты с более высоким весом «тяжелее», поэтому они опускаются на дно.)

const deleteOption = {
  weight: 10;
}

Веса для встроенных опций контекстного меню идут в порядке возрастания, начиная с 1 и увеличиваясь на 1.

Предварительное условие

В дополнение scopeType вы можете использовать preconditionFn , чтобы ограничить, когда и как должен отображаться параметр контекстного меню.

Он должен возвращать одну из набора строк: 'enabled' , 'disabled' или 'hidden' .

Ценить	Описание	Изображение
включено	Показывает, что опция активна.
неполноценный	Показывает, что опция не активна.
скрытый	Скрывает опцию.

preconditionFn также передается Scope , которую вы можете использовать для определения состояния вашего параметра.

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

Перезвонить

Свойство callback выполняет действие пункта контекстного меню. Ему передаются Scope и PointerEvent . PointerEvent — это исходное событие, которое инициировало открытие контекстного меню, а не то, которое выбрало опцию. Вы можете использовать это событие, чтобы выяснить, где произошел щелчок. Это позволяет, например, создать новый блок в месте щелчка.

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

Постановка на учет

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

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

Изменить параметры для каждого типа блока

У блоков есть дополнительный способ изменения контекстных меню: перезаписать их свойство customContextMenu . Этот метод принимает массив объектов ContextMenuOption (которые сопоставлены с зарегистрированными пунктами меню), а затем изменяет этот массив на месте, чтобы определить окончательный набор отображаемых параметров.

Дополнительную информацию см. в разделе «Определение блоков и пользовательских контекстных меню» .

В рабочих областях также есть метод configureContextMenu , который работает аналогичным образом.

Удалить опцию

Вы можете удалить опцию из контекстного меню, отменив ее регистрацию по идентификатору.

Blockly.ContextMenuRegistry.registry.unregister('someID');

Идентификаторы параметров по умолчанию находятся в contextmenu_items.ts .

Изменить параметр

Вы можете изменить существующий параметр, получив элемент из реестра, а затем изменив его на месте.

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';