Перетаскиватель

Перетаскиватель — это объект контроллера, который координирует перетаскивание перетаскиваемых объектов в ответ на действия пользователя.

Существует очень мало обстоятельств, когда вам может потребоваться реализовать собственный перетаскиватель, потому что не так уж много настроек координации перетаскивания вам может понадобиться. Плагин Scroll-Options реализует собственный перетаскиватель, поскольку он хотел добавить прокрутку по краю рабочей области, которая меняет способ преобразования координат пикселей в координаты рабочей области.

Обязанности

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

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

Выполнение

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

class MyDragger implements IDragger {
  // Takes in the draggable being dragged and the workspace the drag
  // is occurring in.
  constructor(draggable, workspace);
}

Вы также можете создать подкласс встроенного Blockly.dragging.Dragger , который уже выполняет основные обязанности.

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

Метод onDragStart инициализирует перетаскивание. Он должен хранить все данные, необходимые для выполнения перетаскивания. Он также должен вызвать startDrag для перетаскиваемого объекта.

Примечание. Для каждого действия перетаскивания создается новый перетаскиватель, поэтому некоторую инициализацию (например, сохранение начального местоположения) можно альтернативно выполнить в конструкторе.

onDragStart(e) {
  this.startLoc = this.draggable.getRelativeToSurfaceXY();

  this.draggable.startDrag(e);
}

Тащить

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

Он также должен обновить все цели перетаскивания, над которыми наведен курсор.

• wouldDelete всегда следует вызывать перед вызовом других перехватчиков цели перетаскивания.
• onDragExit всегда следует вызывать для старой цели перетаскивания перед вызовом onDragEnter для новой цели перетаскивания.
• onDragOver следует вызывать после onDragEnter при первом наведении курсора на цель перетаскивания и при каждом дополнительном вызове onDrag , когда цель перетаскивания все еще нависает.

onDrag(e, totalDelta) {
  // Update the draggable location.
  const delta = this.pixelsToWorkspaceUnits(totalDelta);
  const newLoc = Coordinate.sum(this.startLoc, delta);
  this.draggable.drag(newLoc, e);

  // Call wouldDeleteDraggable.
  if (isDeletable(this.draggable)) {
    this.draggable.setDeleteStyle(
      // Checks that the drag target is an `IDeleteArea` and calls `wouldDelete`
      // on it.
      this.wouldDeleteDraggable(e, this.draggable),
    );
  }

  const newDragTarget = this.workspace.getDragTarget(e);
  if (this.dragTarget !== newDragTarget) {
    // Call `onDragExit` then `onDragEnter`.
    this.dragTarget?.onDragExit(this.draggable);
    newDragTarget?.onDragEnter(this.draggable);
  }
  // Always call `onDragOver`
  newDragTarget?.onDragOver(this.draggable);
  this.dragTarget = newDragTarget;
}

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

Метод onEndDrag завершает перетаскивание. Он должен уведомить перетаскиваемый объект о том, что перетаскивание закончилось, и любую наведенную цель перетаскивания о том, что перетаскиваемый объект был отброшен. Он также должен избавиться от перетаскиваемого объекта, если целью перетаскивания является область удаления.

• onDrop всегда следует вызывать перед другими методами.
• revertDrag следует вызывать, если цель перетаскивания предотвращает перетаскивание.
• endDrag следует вызывать после отмены перетаскивания, но перед удалением.
• dispose следует вызывать, если целью перетаскивания является область удаления.

onDragEnd(e) {
  // Call `onDrop` first.
  const dragTarget = this.workspace.getDragTarget(e);
  if (dragTarget) {
    this.dragTarget?.onDrop(this.draggable);
  }

  // Then revert the drag (if applicable).
  if (this.shouldReturnToStart(e, this.draggable)) {
    this.draggable.revertDrag();
  }

  // Then end the drag.
  this.draggable.endDrag(e);

  // Then delete the draggable (if applicable).
  if (
    isDeletable(this.draggable) &&
    this.wouldDeleteDraggable(e, this.draggable)
  ) {
    this.draggable.dispose();
  }
}

Регистрация

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

// Note that the type is BLOCK_DRAGGER even though draggers drag more than
// blocks. The name is for backwards compatibility.
Blockly.registry.register(registry.Type.BLOCK_DRAGGER, 'MY_DRAGGER', MyDragger);

Использование

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

const myWorkspace = Blockly.inject('blocklyDiv', {
  plugins: {
    // Note that we pass this to blockDragger even though draggers drag more
    // than blocks. The name is for backwards compatibility.
    blockDragger: MyDragger,
  },
});