复制粘贴

复制和粘贴系统由三部分组成:ICopyable 对象,ICopyData 表示复制的对象,以及 IPaster 对象,可将数据复制回可复制对象 对象的操作。每种类型的 ICopyable 都需要一个可以粘贴的关联 IPaster 这些数据。

这些系统会通过 上下文菜单选项键盘快捷键

在极少数情况下,您可能需要实现自定义可复制对象或自定义粘贴对象(例如多选插件跨标签页复制粘贴插件),因为通常可复制对象会呈现,而您无法向 Blockly 添加新的呈现对象。工作区中唯一可以存在的渲染对象是块, 气泡和工作区评论。

实现可复制对象

如需创建可复制的对象,您需要实现 ICopyable 接口。

可选择

ICopyable 接口扩展了 ISelectable 接口, 这意味着您还需要实现这些方法和属性。

必须可选择,因为键盘快捷键会根据所选对象来确定要复制的内容。

class MyCopyable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

可复制

ICopyable 接口本身只有一个方法,即 toCopyData,它会返回可复制对象状态的 JSON 可序列化表示法,该表示法可用于重新创建可复制对象。

复制数据还必须包含 paster 属性,该属性用于存储与应粘贴此复制数据的粘贴程序关联的已注册字符串名称。对于 如需详细了解粘贴程序,请参阅实现粘贴程序

class MyCopyable implements ICopyable {
  constructor(workspace, state) {
    this.workspace = workspace;
    this.myState = state;
  }

  toCopyData() {
    return {
      // This string matches the string used to register the paster.
      paster: 'MY_PASTER',
      state: this.myState,
    };
  }
}

实现粘贴程序

如需创建粘贴程序,您需要实现 IPaster 接口。它只有一个方法 paste,用于接收要粘贴的内容的复制数据、要将内容粘贴到的 Workspace,以及一个可选的坐标(即要将内容粘贴到的位置)。

class MyPaster implements IPaster {
  paste(copyData, workspace, coordinate) {
    return new MyCopyable(workspace, copyData.state);
    // Optionally position the copyable at the passed coordinate.
    // Optionally select the copyable after it is pasted.
  }
}

注册

实现粘贴程序后,您需要将其注册,以便从其 paster 属性中找到与给定副本数据关联的粘贴程序。

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());