Перетаскиваемый

Перетаскиваемый объект — это визуализируемый объект, который существует в рабочей области и его можно перетаскивать. Они реализуют интерфейс IDraggable .

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

Обязанности

Перетаскиваемые объекты имеют несколько обязанностей при выполнении перетаскивания:

• Перемещение элементов SVG на слой перетаскивания .
• Перевод элементов SVG.
• События огневого хода.

Выполнение

Чтобы создать новый перетаскиваемый объект, вам необходимо реализовать интерфейсы IRenderedElement и IDraggable . Это позволяет Blockly узнать, что ваш объект виден и его можно перетаскивать.

class MyDraggable extends IRenderedElement, IDraggable {}

Вернуть корневой элемент SVG

Метод getRootSvg возвращает корневой элемент svg (обычно группу ), который содержит все остальные элементы, составляющие представление для перетаскиваемого объекта.

getSvgRoot() {
  return this.rootSvg;
}

Возвратная подвижность

Метод isMovable возвращает, является ли перетаскиваемый объект подвижным в данный момент (поскольку вы можете захотеть временно отключить перетаскивание объекта). Если isMovable возвращает false вместо этого перетаскивается рабочая область.

isMovable() {
  return true;
}

Возвратное положение

Метод getRelativeToSurfaceXY возвращает Coordinate , определяющую местоположение верхнего начального угла перетаскиваемого объекта в координатах рабочей области.

Координаты рабочей области имеют начало в абсолютном левом и абсолютном верхнем углу рабочей области. И они не меняются при масштабировании или перемещении рабочей области.

getRelativeToSurfaceXY() {
  return this.loc;
}

Начать перетаскивание

Метод startDrag инициализирует перетаскивание перетаскиваемого объекта. Этот метод не перемещает перетаскиваемый объект. Но вам следует хранить любые данные или создавать любые объекты, необходимые для завершения перетаскивания. Сюда входят любые данные, которые вам понадобятся для отмены перетаскивания, если вызывается revertDrag .

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

Он также принимает событие, которое вы можете использовать для проверки нажатых клавиш. Это позволяет вам (например) обрабатывать перетаскивание при переключении передач иначе, чем при обычном перетаскивании.

startDrag(e) {
  // Save the original location so we can revert the drag.
  this.startLoc = this.getRelativeToSurfaceXY();

  // Disable resizing the workspace for performance.
  this.workspace.setResizesEnabled(false);

  // Put the element on the drag layer.
  this.workspace.getLayerManager()?.moveToDragLayer(this);

  // Fire a drag event...

  // etc...
}

Тащить

Метод drag фактически перемещает перетаскиваемый объект. newLoc находится в координатах рабочей области, а также передается событие, которое вы можете использовать для проверки нажатых клавиш.

drag(newLoc, e) {
  this.moveTo(newLoc);
}

Отменить перетаскивание

Метод revertDrag возвращает перетаскиваемый объект в положение, в котором он находился в начале перетаскивания. Это происходит, если, например, перетаскиваемый объект падает на цель перетаскивания , которая препятствует движению.

revertDrag() {
  // Move back to the position that was stored in `startDrag`.
  this.moveTo(this.startLoc);
}

Конец тянется

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

endDrag всегда вызывается после revertDrag , если вызывается revertDrag .

endDrag() {
  // Put the element back on its original layer (in this case BLOCK).
  this.workspace
    .getLayerManager()
    ?.moveOffDragLayer(this, Blockly.layers.BLOCK);

  // Allow the workspace to start resizing again.
  this.workspace.setResizesEnabled(true);
}

Выбор

Перетаскиваемый элемент определяется элементом, выбранным при обнаружении перетаскивания.

Iвыбираемый

Чтобы быть выбранным, перетаскиваемый объект должен реализовывать интерфейс ISelectable .

class MyDraggable 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.
  }
}

Установить выбор

Выбранный элемент можно установить, вызвав Blockly.common.setSelected() . обычно вы захотите сделать это в ответ на событие pointerdown от пользователя.

  constructor() {
    this.initSvg();

    Blockly.browserEvents.conditionalBind(
      this.getSvgRoot(),
      'pointerdown',
      this,
      () => Blockly.common.setSelected(this));
  }

Совместимость

Ваш перетаскиваемый объект может реализовать дополнительные интерфейсы, чтобы он мог взаимодействовать с другими системами в Blockly.

Удаляемый

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

class MyDraggable implements IDeletable {
  isDeletable() {
    return true;
  }

  dispose() {
    // Dispose of any references to data or SVG elements.
  }

  setDeleteStyle() {
    // Visually indicate that the draggable is about to be deleted.
  }
}

Копируемый

Вы можете реализовать интерфейс ICopyable , чтобы позволить копировать перетаскиваемый объект, и определить IPaster , чтобы его можно было вставлять.

Дополнительную информацию о копировании и вставке см. в разделе Копирование и вставка .