复制粘贴

复制粘贴系统由三个对象构建而成: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 方法,用于接收所粘贴内容的复制数据、要将内容粘贴到的工作区,以及一个可选的坐标,即粘贴内容的位置。

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());