上下文菜单

上下文菜单中包含与工作区中的某个元素相关的一系列操作。点击右键和长按时，系统会显示上下文菜单。

如果您想添加用户可以执行的新型操作，可能需要创建自定义上下文菜单选项。例如，整理工作区中的所有代码块，或下载代码块的映像。如果您认为操作不会频繁使用，则上下文菜单是放置该操作的理想位置。否则，您可能需要创建一种更容易发现的方法来访问操作。

实现新选项

如需实现新的上下文菜单选项，您需要实现 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 的方法。

您可以按 ID 取消注册，从而从上下文菜单中移除某个选项。

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

默认选项的 ID 位于 contextmenu_items.ts 中。

如需修改现有选项，您可以从注册表中获取该项，然后就地进行修改。

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