Trascinabile

Un oggetto trascinabile è un oggetto visualizzato che esiste nell'area di lavoro e può essere trascinato. Implementano l'interfaccia IDraggable.

Ci sono pochissime circostanze in cui potresti voler aggiungere un nuovo elemento trascinabile in Blockly (ad es. il plug-in Multiselect o la modifica del modo in cui un oggetto esistente gestisce il trascinamento) perché non è possibile aggiungere nuovi oggetti visualizzati a Blockly. Gli unici oggetti visualizzati che possono esistere all'interno di un'area di lavoro sono blocchi, bolle e commenti dell'area di lavoro.

Responsabilità

I trascinabili hanno diverse responsabilità durante l'esecuzione dei trascinamento:

• Spostare gli elementi svg nel livello di trascinamento.
• Traduzione di elementi svg.
• Eventi movimento di attivazione.

Implementazione

Per creare un nuovo elemento trascinabile, devi implementare le interfacce IRenderedElement e IDraggable. Questo indica a Blockly che l'oggetto è visibile e può essere trascinato.

class MyDraggable extends IRenderedElement, IDraggable {}

Restituisci l'elemento SVG principale

Il metodo getRootSvg restituisce l'elemento svg principale (di solito un gruppo) che contiene tutti gli altri elementi che costituiscono la vista per l'elemento trascinabile.

getSvgRoot() {
  return this.rootSvg;
}

Spostabilità dei resi

Il metodo isMovable indica se il trascinamento è attualmente spostabile (poiché potresti voler disattivare temporaneamente il trascinamento di un oggetto). Se isMovable restituisce false, l'area di lavoro viene trascinata.

isMovable() {
  return true;
}

Posizione di ritorno

Il metodo getRelativeToSurfaceXY restituisce un elemento Coordinate che specifica la posizione dell'angolo superiore iniziale della finestra trascinabile nelle coordinate dell'area di lavoro.

Le coordinate dell'area di lavoro hanno un'origine in assoluto a sinistra e in alto dell'area di lavoro. Inoltre, non cambiano quando l'area di lavoro viene scalata o spostata.

getRelativeToSurfaceXY() {
  return this.loc;
}

Avvia trascinamento

Il metodo startDrag inizializza un elemento di trascinamento. Con questo metodo non sposta il file trascinabile. Dovresti però archiviare tutti i dati o costruire gli oggetti necessari per completare il trascinamento. Sono inclusi tutti i dati necessari per ripristinare il trascinamento se viene chiamato revertDrag.

Inoltre, gli elementi svg devono essere impostati sul livello di trascinamento dell'area di lavoro in modo che siano al di sopra di qualsiasi altro elemento.

Prende anche un evento, che puoi usare per verificare la presenza di tasti premuti. Questo consente, ad esempio, di trattare un attacco mentre ci si sposta in modo diverso rispetto a un normale trascinamento.

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

Resistenza aerodinamica

Il metodo drag sposta effettivamente l'oggetto trascinabile. newLoc si trova nelle coordinate dell'area di lavoro ed è presente anche un evento trasmesso che puoi utilizzare per verificare la presenza di tasti premuti.

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

Ripristina trascinamento

Il metodo revertDrag restituisce il file trascinabile nella posizione in cui si trovava all'inizio del trascinamento. Questo accade se, ad esempio, l'elemento trascinabile viene rilasciato su un target di trascinamento che impedisce il movimento.

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

Termina trascinamenti

Il metodo endDrag ripulisce un'operazione di trascinamento, rilasciando eventuali dati o oggetti archiviati e restituendo l'elemento trascinabile al livello originale.

endDrag viene sempre chiamato dopo revertDrag se viene chiamato 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);
}

Selezione

L'elemento che viene trascinato è determinato dall'elemento selezionato quando viene rilevato un trascinamento.

ISelectable

Per essere selezionata, un elemento trascinabile deve implementare l'interfaccia 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.
  }
}

Imposta selezione

L'elemento selezionato può essere impostato chiamando Blockly.common.setSelected(). in genere devi eseguire questa operazione in risposta a un evento pointerdown dell'utente.

  constructor() {
    this.initSvg();

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

Compatibilità

L'elemento trascinabile può implementare interfacce aggiuntive in modo da poter interagire con altri sistemi in Blockly.

Eliminabile

Puoi implementare l'interfaccia IDeleteable per consentire che il file trascinabile venga eliminato dal cestino o da altre destinazioni di eliminazione.

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

Copiabili

Puoi implementare l'interfaccia ICopyable per consentire la copia del file trascinabile e definire un IPaster per consentirne l'incollamento.

Per ulteriori informazioni su come copiare e incollare, consulta Copiare e incollare.