Wyświetlający podgląd połączeń

Podgląd połączenia tworzy wizualny podgląd oczekującego połączenia. Wskazuje, gdzie zostanie połączony przeciągany blok, gdy zostanie upuścić.

Domyślny podgląd połączenia umieszcza znaczniki wstawiania, w których bloki będą się łączyć. Wyróżnia też połączenia i działa efekt zanikania na blokach, które zostaną zastąpione i odłączone.

Rodzaje oczekujących połączeń

Istnieją 2 rodzaje połączeń oczekujących. W jednym przypadku upuszczony blok zastępuje istniejącą blokadę, a istniejący blok zostaje odłączony. W innym przypadku upuszczona bryła jest umieszczana bez odłączania innych bloków.

Zamiennik

Zastępowanie odbywa się wtedy, gdy połączenie w przeciągniętym bloku zostanie nawiązane z połączeniem, które ma już bloka, a nie ma nigdzie do ponownego dołączenia istniejącej blokady. Po upuszczeniu przeciągniętej bryły zastąpiona bryła zostanie odłączona, a przeciągnięta – na swoje miejsce.

Domyślnie wskazujemy to, dodając efekt zanikania do zastępowanej bryły.

Wstawienie

Wstawianie reklam odbywa się w 2 przypadkach. Dzieje się tak, gdy połączenie w przeciągniętym bloku dotrze do pustego połączenia. Dzieje się tak, gdy połączenie w przeciągniętym bryle prowadzi do połączenia, które ma już bloka, ale może zostać wstawione między 2 dotychczasowe bloki, dzięki czemu istniejący blok nie zostanie rozłączony.

Domyślnie wskazujemy to, tworząc znaczniki wstawiania i wyróżniając połączenia, które mają zostać połączone.

Tworzenie niestandardowego podglądu

Jeśli do podglądu oczekujących połączeń chcesz użyć innej wizualizacji, możesz utworzyć niestandardową implementację IConnectionPreviewer.

Budowa i utylizacja

Musisz wdrożyć konstruktor i metodę utylizacji obiektu IConnectionPreviewer.

Konstruktor jest wywoływany przy każdym rozpoczęciu przeciągania bloków i przekazuje go do przeciągniętej bryły. Jeśli musisz zainicjować dowolny stan na podstawie bloku, możesz to zrobić w konstruktorze.

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

Metoda dispose jest wywoływana za każdym razem, gdy kończy się przeciąganie bloków. Jeśli potrzebujesz odwołać się do jakiegokolwiek stanu, w którym instancja IConnectionPreviewer jest usuwana, zrób to tutaj.

dispose() {
  // Dispose of and dereference any state.
}

Tworzenie podglądu

IConnectionPreviewer musi zaimplementować logikę, aby wyświetlić podgląd połączeń.

Zamiennik

Aby wyświetlić podgląd zamienników, zaimplementuj metodę previewReplacement.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

Wstawienie

Aby wyświetlić podgląd wstawień, zaimplementuj metodę previewConnection.

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

Jeśli chcesz uzyskać inny podgląd w zależności od tego, czy przeciągana bryła jest połączona z pustym źródłem danych lub czy jest wstawiana między blokami, możesz sprawdzić, czy staticConn jest obecnie połączony z innym połączeniem. Jeśli staticConn jest obecnie połączony, to draggedConn jest wstawiany między blokami.

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

Podgląd CSS

Aby wyświetlić podgląd połączeń, zastosuj do bloku kod CSS. Na przykład domyślne zanikanie można przełączyć, dodając do bloku klasę CSS blocklyReplaceable.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

Podgląd mechanizmu renderowania

Aby wyświetlić podgląd połączeń, zaimplementuj niestandardowy mechanizm renderowania ze specjalnymi punktami zaczepienia podglądu.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

Ukryj podgląd

Urządzenie IConnectionPreviewer musi mieć możliwość ukrywania podglądów. Dzieje się tak, gdy przeciągnięty blok wychodzi poza zasięg wszystkich połączeń, więc podgląd nie powinien być wyświetlany. Jest ona też wywoływana tuż przed usunięciem podglądu.

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

Rejestracja i korzystanie z nich

Na koniec po utworzeniu usługi IConnectionPreviewer musisz ją zarejestrować. Powoduje to powiązanie mechanizmu renderowania z ciągiem znaków, dzięki czemu możesz go przekazać do konfiguracji wstrzykiwania. Możesz też przekazać klasę IConnectionPreviewer (tj. konstruktor) bezpośrednio do konfiguracji wstrzykiwania.

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

Więcej informacji o rejestracji znajdziesz w artykule o wstrzymywaniu podklas.