Kopiuj i wklej

Blockly obsługuje operacje kopiowania, wycinania i wklejania w przypadku wielu wbudowanych komponentów, takich jak bloki, komentarze w obszarze roboczym i dymki.

Domyślne działanie schowka

Podstawowy pakiet Blockly zawiera skróty klawiszowe, które umożliwiają wycinanie, kopiowanie i wklejanie bloków, komentarzy do obszaru roboczego oraz innych komponentów implementujących interfejsy ICopyable, IDraggable i IDeletable. Ma też opcję menu kontekstowego, która umożliwia duplikowanie bloku. W razie potrzeby możesz zmodyfikować lub usunąć te domyślne skróty i elementy menu.

W domyślnej implementacji schowka obiekty, które można skopiować, można wklejać tylko w obszarze roboczym, z którego zostały skopiowane, lub w obszarze roboczym docelowym, jeśli zostały skopiowane z wysuwanego menu. Oznacza to, że możesz skopiować blok z menu wysuwanego do obszaru roboczego, do którego jest ono przypisane, ale nie możesz skopiować bloku z jednego głównego obszaru roboczego do drugiego.

Kopiowanie i wklejanie treści między obszarami roboczymi i kartami

Jeśli chcesz zezwolić użytkownikom na kopiowanie bloków z jednego obszaru roboczego i wklejanie ich w innym obszarze roboczym, a nawet w obszarze roboczym w kopii aplikacji uruchomionej w innej karcie, możesz zainstalować @blockly/plugin-cross-tab-copy-pastewtyczkę.

Niestandardowe działanie schowka

Jeśli chcesz, aby działało inaczej, możesz wdrożyć niestandardowy schowek, odinstalowując skróty klawiszowe dostarczane z Blockly i instalując inne, które działają inaczej. Aby to ułatwić, możesz użyć metod w Blockly.clipboardprzestrzeni nazw do kopiowania, wklejania lub bardziej szczegółowej kontroli, np. ustawiania obszaru roboczego, z którego skopiowano obiekt.

Niestandardowe obiekty, które można skopiować

Dowolne elementy można uczynić zgodnymi z systemem kopiowania i wklejania, używając 5 interfejsów: ICopyable, IDraggable i IDeletable do reprezentowania obiektów, które można skopiować, ICopyData do reprezentowania skopiowanych obiektów oraz IPaster do reprezentowania obiektów, które mogą przekształcać dane skopiowane z powrotem w obiekty, które można skopiować. Każdy typ ICopyable musi mieć powiązany IPaster, który może wklejać te dane.

Każdy obiekt, który implementuje interfejsy ICopyable, IDraggable i IDeletable oraz ma odpowiednie interfejsy IPaster i ICopyData, będzie automatycznie współpracować z domyślnym systemem schowka.

W bardzo niewielu przypadkach warto wdrożyć niestandardowy obiekt kopiowalny lub niestandardowy wklejacz (np. wtyczkę wielokrotnego wyboru), ponieważ obiekty kopiowalne są renderowane i nie można dodawać nowych renderowanych obiektów do Blockly. Jedynymi renderowanymi obiektami, które mogą znajdować się w obszarze roboczym, są bloki, dymki i komentarze do obszaru roboczego.

Implementowanie funkcji kopiowania

Aby utworzyć obiekt, który można skopiować, musisz zaimplementować interfejsy ICopyable, IDraggable i IDeletable. Te dwa interfejsy są wymagane, aby można było manipulować wklejonym obiektem i go usuwać.

Możliwość wyboru

Interfejs ICopyable rozszerza interfejs ISelectable, co oznacza, że musisz też zaimplementować te metody i właściwości.

Możliwość zaznaczenia jest wymagana, ponieważ skróty klawiszowe sprawdzają zaznaczony obiekt, aby określić, co skopiować.

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

Można skopiować

Sam interfejs ICopyable ma tylko 1 wymaganą metodę, toCopyData, która zwraca reprezentację stanu obiektu, który można skopiować, w formacie JSON. Można jej użyć do ponownego utworzenia obiektu.

Skopiowane dane muszą też zawierać właściwość paster, która zawiera zarejestrowaną nazwę ciągu znaków powiązaną z osobą, która ma wkleić te dane. Więcej informacji o wklejaczach znajdziesz w artykule Implementowanie wklejacza.

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

ICopyable ma też opcjonalną metodę isCopyable, która zwraca informację, czy obiekt można obecnie skopiować.

Można je przeciągać i usuwać

Informacje o wdrażaniu elementów IDraggable i IDeletable znajdziesz w artykule Niestandardowe elementy, które można przeciągać.

Implementowanie wklejania

Aby utworzyć wklejarkę, musisz zaimplementować interfejs IPaster. Ma tylko jedną metodę paste, która przyjmuje dane kopii wklejanego elementu, obszar roboczy, do którego ma zostać wklejony element, oraz opcjonalne współrzędne, czyli miejsce, w którym ma zostać wklejony element.

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

Rejestracja

Po wdrożeniu wklejarki musisz ją zarejestrować, aby można było znaleźć wklejarkę powiązaną z daną kopią danych na podstawie jej właściwości paster.

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