Скопируйте и вставьте

Blockly поддерживает операции копирования, вырезания и вставки для ряда встроенных компонентов, таких как блоки, комментарии рабочей области и всплывающие подсказки.

Поведение буфера обмена по умолчанию

В ядре Blockly предусмотрены сочетания клавиш для вырезания, копирования и вставки блоков, комментариев к рабочей области и любых других компонентов, реализующих интерфейсы ICopyable , IDraggable и IDeletable . Кроме того, в нём есть контекстное меню для копирования блока. При необходимости вы можете изменить или удалить эти сочетания клавиш и пункты меню по умолчанию.

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

Копировать и вставлять между рабочими пространствами и вкладками

Если вы хотите разрешить пользователям копировать блоки из одного рабочего пространства и вставлять их в другое рабочее пространство или даже в рабочее пространство в копии вашего приложения, работающего на другой вкладке, вы можете установить плагин @blockly/plugin-cross-tab-copy-paste .

Пользовательское поведение буфера обмена

Если вам требуется другое поведение, вы можете реализовать собственный буфер обмена, удалив сочетания клавиш, входящие в состав Blockly, и установив другие, работающие иначе. Для этого можно использовать методы из пространства имён Blockly.clipboard для копирования, вставки или более точного управления, например, для указания рабочей области, из которой был скопирован объект.

Пользовательские копируемые объекты

Произвольные элементы можно сделать совместимыми с системой копирования/вставки, используя пять интерфейсов: ICopyable , IDraggable и IDeletable для представления объектов, которые можно копировать, ICopyData для представления скопированных объектов и IPaster для представления объектов, которые могут преобразовать скопированные данные обратно в копируемые. Для каждого типа ICopyable требуется связанный с ним IPaster для вставки этих данных.

Любой объект, реализующий ICopyable , IDraggable и IDeletable и имеющий соответствующие IPaster и ICopyData будет автоматически работать с системой буфера обмена по умолчанию.

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

Реализовать копируемый

Для создания копируемого объекта необходимо реализовать интерфейсы ICopyable , IDraggable и IDeletable . Последние два интерфейса необходимы для того, чтобы вставленный объект можно было изменять и удалять.

Выбираемый

Интерфейс 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,
    };
  }
}

У ICopyable также есть необязательный метод isCopyable , который возвращает, можно ли в данный момент копировать объект.

Перетаскиваемый и удаляемый

Информацию о реализации IDraggable и IDeletable см. в разделе Пользовательские перетаскиваемые элементы .

Реализовать пастер

Для создания вставки необходимо реализовать интерфейс 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());