Draggable

Un objet déplaçable est un objet de rendu qui existe dans l'espace de travail et qui peut être glissé-déplacé. Il implémente l'interface IDraggable.

Dans de très rares cas, vous pouvez ajouter un élément déplaçable à Blockly (par exemple, le plug-in multi-sélection ou modifier la façon dont un objet existant gère les déplacements), car vous ne pouvez pas ajouter de nouveaux objets affichés à Blockly. Les seuls objets affichés pouvant exister dans un espace de travail sont les blocs, les bulles et les commentaires.

Responsabilités

Les glisser-déposer ont plusieurs responsabilités lors de l'exécution de glisser-déposer:

• Déplacement des éléments SVG dans la couche faire glisser.
• Traduction des éléments SVG
• Déclenchement d'événements de mouvement.

Implémentation

Pour créer un élément déplaçable, vous devez implémenter les interfaces IRenderedElement et IDraggable. Cela permet à Blockly de savoir que votre objet est visible et peut être déplacé.

class MyDraggable extends IRenderedElement, IDraggable {}

Renvoyer l'élément SVG racine

La méthode getRootSvg renvoie l'élément SVG racine (généralement un groupe) qui contient tous les autres éléments constituant la vue de l'élément déplaçable.

getSvgRoot() {
  return this.rootSvg;
}

Déménagement des retours

La méthode isMovable indique si l'élément déplaçable est actuellement déplaçable (car vous pouvez désactiver temporairement le déplacement d'un objet). Si isMovable renvoie false, l'espace de travail est déplacé à la place.

isMovable() {
  return true;
}

Position de retour

La méthode getRelativeToSurfaceXY renvoie un Coordinate spécifiant l'emplacement du coin de début supérieur de l'élément déplaçable dans les coordonnées de l'espace de travail.

Les coordonnées de l'espace de travail ont une origine située tout à gauche et tout en haut de l'espace de travail. De plus, elles ne changent pas lorsque l'espace de travail est mis à l'échelle ou déplacé.

getRelativeToSurfaceXY() {
  return this.loc;
}

Commencer à faire glisser

La méthode startDrag initialise un déplacement sur l'élément déplaçable. Cette méthode ne déplace pas l'élément déplaçable. Toutefois, vous devez stocker toutes les données ou construire les objets dont vous avez besoin pour effectuer le déplacement. Cela inclut toutes les données dont vous auriez besoin pour annuler le déplacement si revertDrag est appelé.

Les éléments SVG doivent également se trouver sur la couche de déplacement de l'espace de travail afin qu'ils existent au-dessus de tous les autres éléments.

Il prend également en compte un événement, que vous pouvez utiliser pour vérifier si vous avez appuyé sur certaines touches. Cela vous permet (par exemple) de traiter un déplacement tout en effectuant un décalage différemment d'un déplacement normal.

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

Traînée

En fait, la méthode drag déplace l'objet déplaçable. Le newLoc est indiqué dans les coordonnées de l'espace de travail, et un événement est également transmis que vous pouvez utiliser pour vérifier si des touches sont activées.

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

Annuler les déplacements

La méthode revertDrag replace l'élément déplaçable à sa position au début du déplacement. Cela se produit, par exemple, si l'élément déplaçable est déposé sur une cible de déplacement qui empêche le mouvement.

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

Terminer le déplacement

La méthode endDrag nettoie un déplacement, libère les données ou les objets stockés, puis replace l'élément déplaçable vers son calque d'origine.

endDrag est toujours appelé après revertDrag si revertDrag est appelé.

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

Sélection

L'élément qui est glissé est déterminé par l'élément sélectionné lorsqu'un déplacement est détecté.

ISelectable

Pour être sélectionné, un élément déplaçable doit implémenter l'interface 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.
  }
}

Définir la sélection

L'élément sélectionné peut être défini en appelant Blockly.common.setSelected(). en règle générale, cette opération est nécessaire en réponse à un événement pointerdown de l'utilisateur.

  constructor() {
    this.initSvg();

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

Compatibilité

Votre élément déplaçable peut implémenter des interfaces supplémentaires afin de pouvoir interagir avec d'autres systèmes dans Blockly.

Éléments pouvant être supprimés

Vous pouvez implémenter l'interface IDeleteable pour permettre la suppression de l'élément déplaçable par la corbeille ou d'autres cibles de suppression.

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

Copie possible

Vous pouvez implémenter l'interface ICopyable pour copier l'élément déplaçable et définir un IPaster pour qu'il puisse être collé.

Pour en savoir plus sur le copier-coller, consultez Copier-coller.