Menu kontekstowe

Menu kontekstowe zawiera listę działań, które możesz wykonać w związku z niektórymi elementami w obszarze roboczym. Menu kontekstowe jest wyświetlane po kliknięciu prawym przyciskiem myszy lub przytrzymaniu przycisku.

Jeśli chcesz dodać nowy rodzaj działania, które może wykonać użytkownik, możesz utworzyć niestandardową opcję menu kontekstowego. Na przykład uporządkowanie wszystkich brył w obszarze roboczym lub pobranie ich obrazu. Jeśli uważasz, że to działanie będzie rzadko używane, dobrze jest umieścić je w menu kontekstowym. W przeciwnym razie warto utworzyć bardziej łatwy do znalezienia sposób na dostęp do tego działania.

Wdróż nową opcję

Aby wdrożyć nową opcję menu kontekstowego, musisz wykonać instrukcje interfejsu RegistryItem.

Identyfikator

Właściwość id powinna być niepowtarzalnym ciągiem znaków wskazującym działanie opcji menu kontekstowego.

const deleteOption = {
  id: 'deleteElement',
};

Zakres

Właściwość scopeType informuje Blockly, w jakich obszarach może się pojawić opcja menu oraz jakie informacje są przekazywane do elementów displayText, preconditionFn i callback. Menu kontekstowe można dostosowywać do blokad, komentarzy w obszarze roboczym i obszarów roboczych.

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

Jeśli chcesz, aby menu kontekstowe działało na wielu zakresach, zduplikuj opcję menu kontekstowego i zdefiniuj ponownie parametr zakresu dla każdego zakresu.

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

Tekst wyświetlany

W ramach opcji menu powinna się wyświetlić użytkownikowi displayText. Wyświetlany tekst może być ciągiem tekstowym, kodem HTML lub funkcją, która zwraca ciąg znaków lub kod HTML.

const deleteOption = {
  displayText: 'Delete block',
};

Jeśli chcesz wyświetlić tłumaczenie z języka Blockly.Msg, musisz użyć funkcji. Jeśli spróbujesz przypisać wartość bezpośrednio, wiadomości mogą nie zostać wczytane, a zamiast tego otrzymasz wartość undefined.

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

Jeśli używasz funkcji, przekazywana jest też wartość Scope, która daje dostęp do elementu, z którym jest powiązane menu kontekstowe (np. bloku lub obszaru roboczego). Możesz dzięki temu dodać do wyświetlanego tekstu informacje o elemencie.

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

Waga

weight określa kolejność wyświetlania elementów menu kontekstowego. Więcej wartości dodatnich jest wyświetlanych niżej na liście niż mniej dodatnich. (Można sobie wyobrazić, że opcje o większej wadze są „cięższe” i spadają na dół).

const deleteOption = {
  weight: 10;
}

Wagi wbudowanych opcji menu kontekstowego zmieniają się w kolejności od 1 do 1.

Warunek wstępny

Oprócz scopeType możesz też użyć preconditionFn, aby ograniczyć czas i sposób wyświetlania opcji menu kontekstowego.

Powinien zwrócić jeden z zestawów ciągów: 'enabled', 'disabled' lub 'hidden'.

Wartość	Opis	Obraz
włączone	pokazuje, że opcja jest aktywna.
wyłączono	pokazuje, że opcja jest nieaktywna;
ukryta	Ukrywa opcję.

Obiekt preconditionFn przekazuje też wartość Scope, która służy do określenia stanu opcji.

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

Oddzwanianie

Właściwość callback wykonuje działanie znane z elementu menu kontekstowego. Udało się zakończyć pozytywnie Scope i PointerEvent. PointerEvent to pierwotne zdarzenie, które wywołało otwarcie menu kontekstowego, a nie to, które spowodowało wybranie danej opcji. Dzięki temu zdarzenieowi możesz się dowiedzieć, gdzie miało miejsce kliknięcie. Pozwoli Ci to np. utworzyć nową bryłę w miejscu kliknięcia.

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

Rejestracja

Aby używać opcji menu kontekstowego, musisz ją zarejestrować. Należy to zrobić raz po wczytaniu strony. Może się to zdarzyć przed wstrzyknięciem obszaru roboczego lub po nim.

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

Modyfikowanie opcji w zależności od typu bloku

Blokady mają dodatkowy sposób modyfikowania menu kontekstowych – powoduje zastąpienie właściwości customContextMenu. Ta metoda pobiera tablicę obiektów ContextMenuOption (które są sortowane z zarejestrowanych pozycji menu), a następnie modyfikuje ją na miejscu, aby określić ostateczny zestaw wyświetlanych opcji.

Więcej informacji znajdziesz w artykule o definiowaniu bloków i niestandardowych menu kontekstowych.

Obszary robocze również mają metodę configureContextMenu, która działa podobnie.

Usuwanie opcji

Możesz usunąć opcję z menu kontekstowego, wyrejestrowując ją według identyfikatora.

Blockly.ContextMenuRegistry.registry.unregister('someID');

Identyfikatory opcji domyślnych znajdziesz w contextmenu_items.ts.

Zmienianie opcji

Aby zmienić istniejącą opcję, pobierz element z rejestru, a potem wprowadź w nim zmiany.

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';