Kopieren/Einfügen

Das Kopieren-und-Einfügen-System besteht aus drei Elementen: ICopyable-Objekten, ICopyData für kopierte Objekte und IPaster-Objekten, mit denen kopierte Daten wieder in kopierbare Objekte umgewandelt werden können. Jedem ICopyable-Typ muss ein IPaster zugeordnet sein, in das diese Daten eingefügt werden können.

Diese Systeme werden dem Nutzer über Kontextmenüoptionen und Tastenkombinationen angezeigt.

In nur wenigen Fällen empfiehlt es sich, einen benutzerdefinierten kopierbaren oder benutzerdefinierten Paster zu implementieren (z.B. das Mehrfachauswahl-Plug-in oder das Kreuztabellen-Plug-in zum Kopieren und Einfügen), da normalerweise kopierbare Objekte gerendert werden und Sie Blockly keine neuen gerenderten Objekte hinzufügen können. Die einzigen gerenderten Objekte, die in einem Arbeitsbereich vorhanden sein können, sind Blöcke, Bubbles und Arbeitsbereichskommentare.

Implementieren Sie ein kopierbares

Wenn Sie ein kopierbares Objekt erstellen möchten, müssen Sie die ICopyable-Schnittstelle implementieren.

Auswählbar

Die Schnittstelle ICopyable erweitert die Schnittstelle ISelectable. Sie müssen also auch diese Methoden und Properties implementieren.

Das ist erforderlich, da Tastenkombinationen anhand des ausgewählten Objekts ermitteln, was kopiert werden soll.

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

Kopierbar

Die ICopyable-Schnittstelle selbst hat nur eine Methode, toCopyData, die eine JSON-serialisierbare Darstellung des Zustands des kopierbaren Objekts zurückgibt, mit der das kopierbare Objekt neu erstellt werden kann.

Die Kopierdaten müssen außerdem eine paster-Property enthalten, die den registrierten Stringnamen enthält, der mit dem Einfügevorgang verknüpft ist, mit dem diese Kopierdaten eingefügt werden sollen. Weitere Informationen zu Stickers finden Sie unter Sticker implementieren.

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

Sticker einbinden

Wenn Sie einen Sticker erstellen möchten, müssen Sie die IPaster-Benutzeroberfläche implementieren. Es gibt nur eine Methode paste, die die kopierten Daten des einzufügenden Elements, den Arbeitsbereich, in den es eingefügt werden soll, und eine optionale Koordinate annimmt, also den Ort, an dem das Element eingefügt werden soll.

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

Anmeldung

Nachdem Sie einen Cursor eingefügt haben, müssen Sie ihn registrieren, damit Sie den Cursor finden können, der mit bestimmten Kopierdaten aus der zugehörigen paster-Property verknüpft ist.

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());