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

Narzędzie podglądu połączenia tworzy wizualny podgląd oczekującego połączenia. it wskazuje miejsce połączenia bloku przeciągania, gdy jest spadła.

Domyślny podgląd połączeń umieszcza znaczniki wstawiania w których będą się łączyć bloki. Wyróżnia również połączenia i wycisza na bloki, które zostaną zastąpione i odłączone.

Rodzaje oczekujących połączeń

Istnieją 2 rodzaje oczekujących połączeń. W jednym przypadku upuszczony blok zastąpi istniejący blok, a istniejący zostanie odłączony. W drugim wsunięta blok, nie odłączaj innych bloków.

Zamiennik

Wymiana ma miejsce, gdy połączenie na przeciągniętym bloku będzie się połączyć w połączeniu, które ma już blokadę i nie ma gdzie dla istniejącej z powrotem. Po upuszczeniu przeciągniętego bloku zostanie odłączony, a przeciągnięty blok zostanie połączony na swoim miejscu.

Domyślnie zaznaczamy to, nadając efekt zanikania do bryły, która jest zastąpiono.

Wstawienie

Wstawianie danych ma miejsce w 2 przypadkach. Zdarza się, gdy połączenie na przeciąganym blok ma połączenie z pustym połączeniem. Zdarza się, gdy na przeciągniętym bloku trafi do połączenia, które ma już ale można ją wstawić między dwoma istniejącymi bryłami, dzięki czemu urządzenie nie zostaje odłączone.

Informujemy to domyślnie, tworząc znaczniki wstawiania które będą nawiązywane.

Tworzenie niestandardowego podglądu

Jeśli chcesz wyświetlić podgląd oczekujących połączeń w inny sposób, możesz utworzyć niestandardową implementację IConnectionPreviewer.

Konstrukcja i utylizacja

Musisz wdrożyć konstruktor i metodę usuwania IConnectionPreviewer

Konstruktor jest wywoływany zawsze, gdy rozpoczyna się przeciąganie bloków, i jest przekazywany przeciągniętym blokiem. Jeśli musisz zainicjować dowolny stan na podstawie 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 blokiem. W razie potrzeby usuwania dowolnego stanu po wyczyszczeniu instancji IConnectionPreviewer, czy też należy to zrobić tutaj.

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

Tworzenie podglądu

Urządzenie IConnectionPreviewer musi zaimplementować logikę wyświetlania podglądu wizualnego połączeń.

Zamiennik

Aby wyświetlić podgląd zamienników, zaimplementuj 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 wstawienia, wdróż metodę previewConnection.

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

Jeśli chcesz, aby podgląd był inny w zależności od tego, czy przeciągnięty blok jeśli podłączysz je do pustego źródła lub wstawisz między blokami, możesz sprawdzić, czy urządzenie staticConn jest obecnie połączone z innym połączeniem. Jeśli staticConn jest obecnie połączony, oznacza to, że draggedConn jest właśnie połączony zostały wstawione między bryły.

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ądy CSS

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

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

Podglądy mechanizmów renderowania

Aby wyświetlić podgląd połączeń, zaimplementuj niestandardowy mechanizm renderowania ze specjalnymi elementami przykuwającymi podgląd.

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

Ukryj podgląd

IConnectionPreviewer musi mieć możliwość ukrywania podglądów. Tak gdy przeciągnięty blok wychodzi poza zasięg wszystkich połączeń, więc podgląd powinno być widoczne. Jest również wywoływana tuż przed usunięciem podglądu.

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

Rejestracja i korzystanie

Na koniec, po utworzeniu IConnectionPreviewer możesz musisz go zarejestrować. Powiąże to mechanizm renderowania z ciągiem, dzięki czemu będzie można przekazać go do konfiguracji wstrzykiwania. Możesz też przekazać klasa IConnectionPreviewer (tj. konstruktor) bezpośrednio do wstrzykiwanego elementu konfiguracji.

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 na temat rejestracji można znaleźć na stronie Wstrzykiwanie podklas.