blockly > WorkspaceSvg

Klasa WorkspaceSvg

Zajęcia w obszarze roboczym. Jest to obszar na ekranie z opcjonalnym koszem, paskami przewijania, dymkami i przeciąganiem.

Podpis:

export declare class WorkspaceSvg extends Workspace implements IContextMenu, IFocusableNode, IFocusableTree 

Rozszerza: Workspace

Implementuje: IContextMenu, IFocusableNode, IFocusableTree

Zespoły

Zespół Modyfikatory Opis
(konstruktor)(opcje) Tworzy nową instancję klasy WorkspaceSvg

Właściwości

Właściwość Modyfikatory Typ Opis
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null Deweloperzy mogą zdefiniować tę funkcję, aby dodać niestandardowe opcje menu do menu kontekstowego obszaru roboczego lub edytować utworzony przez obszar roboczy zestaw opcji menu.
keyboardAccessibilityMode Wartość logiczna Wartość true, jeśli tryb ułatwień dostępu za pomocą klawiatury jest włączony. W przeciwnym razie wartość false.
keyboardMoveInProgress Wartość logiczna Wartość Prawda, jeśli trwa przenoszenie („przeciąganie”) zainicjowane przez klawiaturę.
rendered Wartość logiczna Stan renderowania obszaru roboczego SVG. Zwraca wartość false w przypadku obszarów roboczych bez interfejsu i wartość true w przypadku instancji WorkspaceSvg.
skala liczba obecną skalę,
scrollbar ScrollbarPair | null Paski przewijania tego obszaru roboczego, jeśli istnieją.
scrollX liczba

Bieżące przesunięcie przewijania w poziomie w pikselach względem początku obszaru roboczego.

Warto wyobrazić sobie widok i płótno przesuwające się pod nim. Gdy obszar roboczy przesuwa się w prawo, ta wartość staje się bardziej dodatnia, a widok „widzi” lewą stronę obszaru roboczego. Gdy obszar roboczy przesuwa się w lewo, ta wartość staje się bardziej ujemna, a widok „widzi” teraz prawą stronę obszaru roboczego.

Wartość ta jest myląca, ponieważ nie zawiera przesunięcia absoluteLeft i nie może go zawierać. Dzieje się tak, ponieważ służy on do obliczania wartości viewLeft.

Wartość viewLeft jest podawana względem początku obszaru roboczego (w pikselach). Punkt początkowy obszaru roboczego znajduje się w lewym górnym rogu (przynajmniej gdy jest włączony). Jest on przesunięty z lewego górnego rogu elementu blocklyDiv, aby nie znajdował się pod przybornikiem.

Gdy obszar roboczy jest włączony, widok po lewej stronie i początek obszaru roboczego znajdują się w tym samym miejscu na osi X. Gdy obszar roboczy przesuwa się w prawo pod widokiem, wartość scrollX staje się bardziej dodatnia, a wartość viewLeft staje się bardziej ujemna w stosunku do początku obszaru roboczego (wyobraź sobie początek obszaru roboczego jako punkt na obszarze roboczym przesuwający się w prawo wraz z przesuwaniem się obszaru roboczego).

Jeśli scrollX zawierałby absoluteLeft, w pewnym sensie „przesunęłoby” to początek obszaru roboczego. Oznacza to, że viewLeft będzie reprezentować lewą krawędź elementu blocklyDiv, a nie lewą krawędź obszaru roboczego.

scrollY liczba

Bieżące pionowe przesunięcie przewijania w pikselach względem początku obszaru roboczego.

Warto wyobrazić sobie widok i płótno przesuwające się pod nim. Gdy obszar roboczy przesuwa się w dół, ta wartość staje się bardziej dodatnia, a widok „widzi” górną część obszaru roboczego. Gdy obszar roboczy przesuwa się w górę, ta wartość staje się bardziej ujemna, a widok „widzi” dolną część obszaru roboczego.

Ta wartość jest myląca, ponieważ nie zawiera i nie może zawierać przesunięcia absoluteTop. Dzieje się tak, ponieważ służy on do obliczania wartości viewTop.

Wartość viewTop jest względna w stosunku do początku obszaru roboczego (chociaż jest podawana w pikselach). Punkt początkowy obszaru roboczego znajduje się w lewym górnym rogu (przynajmniej gdy jest włączony). Jest on przesunięty z lewego górnego rogu elementu blocklyDiv, aby nie znajdował się pod przybornikiem.

Gdy obszar roboczy jest włączony, widok górny i początek obszaru roboczego znajdują się w tym samym miejscu na osi Y. Gdy obszar roboczy przesuwa się w dół, wartość scrollY staje się bardziej dodatnia, a wartość viewTop staje się bardziej ujemna w stosunku do początku obszaru roboczego (obraz w początku obszaru roboczego jako kropka na obszarze roboczym przesuwająca się w dół wraz z przesuwaniem się obszaru roboczego).

Jeśli scrollY zawierałby absoluteTop, w pewnym sensie „przesunęłoby” to początek obszaru roboczego. Oznacza to, że viewTop będzie reprezentować górną krawędź elementu blocklyDiv, a nie górną krawędź obszaru roboczego.

startScrollX liczba Wartość przewijania w poziomie w momencie rozpoczęcia przewijania w pikselach.
startScrollY liczba Wartość przewijania w pionie w momencie rozpoczęcia przewijania w pikselach.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
trashcan Kosz na śmieci | null kosz obszaru roboczego (jeśli istnieje);
zoomControls_ ZoomControls | null

Metody

Metoda Modyfikatory Opis
addClass(className) Dodaje klasę CSS do obszaru roboczego.
addTopBlock(block) Dodaje blok do listy najpopularniejszych bloków.
addTopBoundedElement(element) Dodaje element ograniczony do listy elementów ograniczonych najwyższego poziomu.
addTopComment(comment) Dodaje komentarz do listy najpopularniejszych komentarzy.
canBeFocused() Zobacz IFocusableNode.canBeFocused.
centerOnBlock(id, blockOnly) Przewiń obszar roboczy, aby wyśrodkować dany blok. Jeśli pod blokiem znajdują się inne bloki, obszar roboczy zostanie wyśrodkowany na stosie, chyba że wartość parametru blockOnly to prawda.
cleanUp() Wyczyść obszar roboczy, układając wszystkie bloki w kolumnie tak, aby się nie nakładały.
clear() Usuwa wszystkie bloki z obszaru roboczego, optymalizując działanie, aby zapobiec zmianie rozmiaru.
copyOptionsForFlyout() Tworzy nowy zestaw opcji na podstawie opcji tego obszaru roboczego, ale tylko z wartościami, które są istotne w przypadku wysuwanego menu.
createDom(opt_backgroundClass, injectionDiv) Utwórz elementy DOM obszaru roboczego.
dispose() Usuń ten obszar roboczy. Odłącz od wszystkich elementów DOM, aby zapobiec wyciekom pamięci.
getAbsoluteScale()

Zwraca bezwzględną skalę obszaru roboczego.

Skalowanie obszaru roboczego jest multiplikatywne.Jeśli obszar roboczy B (np. edytor mutatora) o skali Y jest zagnieżdżony w głównym obszarze roboczym A o skali X, efektywna skala obszaru roboczego B wynosi X * Y, ponieważ jako element podrzędny obszaru A jest już przekształcony przez współczynnik skalowania obszaru A, a następnie przekształca się dalej przez własny współczynnik skalowania. Zwykle to działa, ale w przypadku elementów globalnych (np. edytorów pól), które są wizualnie powiązane z określonym obszarem roboczym, ale znajdują się na najwyższym poziomie DOM, a nie są elementami podrzędnymi powiązanego obszaru roboczego, do prawidłowego renderowania może być potrzebna skala bezwzględna lub efektywna.

getAllBlocks(ordered) Znajdź wszystkie bloki w obszarze roboczym. Bloki są opcjonalnie sortowane według pozycji od góry do dołu (z niewielkim odchyleniem w kierunku od lewej do prawej lub od prawej do lewej).
getAudioManager() Pobierz menedżera dźwięku dla tego obszaru roboczego.
getBlockById(id) Znajduje blok w tym obszarze roboczym o określonym identyfikatorze.
getBlocksBoundingBox() Oblicz ramkę ograniczającą dla bloków w obszarze roboczym. Układ współrzędnych: współrzędne obszaru roboczego.
getBubbleCanvas() Pobierz element SVG, który tworzy powierzchnię dymka.
getButtonCallback(key) Pobierz funkcję wywołania zwrotnego powiązaną z danym kluczem w przypadku kliknięć przycisków i etykiet w wyskakującym okienku.
getCanvas() Pobierz element SVG, który tworzy powierzchnię rysowania.
getCommentById(id) Zwraca komentarz do obszaru roboczego o podanym identyfikatorze, jeśli taki istnieje.
getComponentManager() Pobiera menedżera komponentów dla tego obszaru roboczego.
getCursor() Kursor tego obszaru roboczego.
getDragTarget(e) Zwraca element docelowy przeciągania, nad którym znajduje się zdarzenie wskaźnika.
getFlyout(opt_own) Funkcja pobierająca wysuwane menu powiązane z tym obszarem roboczym. W zależności od konfiguracji przybornika wysuwane menu może należeć do przybornika lub obszaru roboczego. Jeśli nie ma wysuwanego menu, wartość będzie wynosić null.
getFocusableElement() Zobacz IFocusableNode.getFocusableElement.
getFocusableTree() Zobacz IFocusableNode.getFocusableTree.
getGrid() Pobierz obiekt siatki dla tego obszaru roboczego lub wartość null, jeśli nie ma takiego obiektu.
getInverseScreenCTM() Getter dla odwróconego ekranu CTM.
getMarkerManager() Pobierz menedżera markerów dla tego obszaru roboczego.
getMetricsManager() Pobiera menedżera danych dla tego obszaru roboczego.
getNavigator() Zwraca obiekt odpowiedzialny za koordynowanie przenoszenia zaznaczenia między elementami tego obszaru roboczego w odpowiedzi na polecenia nawigacji za pomocą klawiatury.
getNestedTrees() Zobacz IFocusableTree.getNestedTrees.
getParentSvg() Pobierz element SVG, który zawiera ten obszar roboczy. Uwaga: zakładamy, że ta funkcja jest wywoływana tylko po wstawieniu obszaru roboczego do modelu DOM.
getRenderer() Pobierz moduł renderowania bloków dołączony do tego obszaru roboczego.
getRestoredFocusableNode(previousNode) Zobacz IFocusableTree.getRestoredFocusableNode.
getRootFocusableNode() Zobacz IFocusableTree.getRootFocusableNode.
getRootWorkspace()
getScale() Pobierz współczynnik powiększenia obszaru roboczego.
getSvgGroup() Zwraca grupę SVG dla obszaru roboczego.
getTheme() Pobierz obiekt motywu obszaru roboczego.
getToolbox() Funkcja pobierająca zestaw narzędzi powiązany z tym obszarem roboczym, jeśli taki istnieje.
getToolboxCategoryCallback(key) Pobierz funkcję wywołania zwrotnego powiązaną z danym kluczem, aby wypełnić niestandardowe kategorie przybornika w tym obszarze roboczym.
getTopBlocks(ordered) Znajduje bloki najwyższego poziomu i je zwraca. Bloki są opcjonalnie sortowane według pozycji od góry do dołu (z niewielkim odchyleniem w kierunku od lewej do prawej lub od prawej do lewej).
getTopBoundedElements(ordered) Znajduje i zwraca elementy ograniczone najwyższego poziomu.
getTopComments(ordered) Zwraca listę komentarzy w tym obszarze roboczym.
getWidth() Zwraca poziome przesunięcie obszaru roboczego. Przeznaczony do zapewnienia zgodności z kierunkiem pisma od lewej do prawej i od prawej do lewej w XML.
hideChaff(onlyClosePopups) Zamykanie etykietek, menu kontekstowych, menu wyboru itp.
hideComponents(onlyClosePopups) Ukryj wszystkie komponenty, które można automatycznie ukryć (np. wysuwane menu, kosz i wszystkie komponenty zarejestrowane przez użytkownika).
highlightBlock(id, opt_state) Zaznacz lub odznacz blok w obszarze roboczym. Blokowe wyróżnianie jest często używane do wizualnego oznaczania bloków, które są obecnie wykonywane.
isDraggable() Czy ten obszar roboczy można przeciągać?
isDragging()

Zwraca wartość „prawda”, jeśli użytkownik wykonuje obecnie gest przeciągania lub jeśli trwa ruch zainicjowany przez klawiaturę.

Gest przeciągania zwykle polega na przesuwaniu bloku lub innego elementu w obszarze roboczym albo na przewijaniu wysuwanego menu lub obszaru roboczego.

Ruchy inicjowane przez klawiaturę są implementowane przy użyciu infrastruktury przeciągania i mają na celu emulowanie (podzbioru) gestów przeciągania, dlatego zwykle należy je traktować tak, jakby były przeciąganiem opartym na gestach.

isMovable()

Czy ten obszar roboczy można przenieść?

Oznacza to, że użytkownik może zmieniać współrzędne X i Y obszaru roboczego za pomocą danych wejściowych. Możesz to zrobić za pomocą pasków przewijania, kółka przewijania, przeciągania lub powiększania za pomocą kółka przewijania lub gestu uszczypnięcia (ponieważ powiększenie jest wyśrodkowane względem pozycji myszy). Nie obejmuje to powiększania za pomocą elementów sterujących powiększeniem, ponieważ współrzędne X i Y są określane programowo.

isMovableHorizontally() Czy ten obszar roboczy można przesuwać w poziomie?
isMovableVertically() Czy ten obszar roboczy można przesuwać w pionie?
isVisible() Getter dla isVisible
lookUpFocusableNode(id) Zobacz IFocusableTree.lookUpFocusableNode.
markFocused() Oznacz ten obszar roboczy jako główny obszar roboczy, na którym obecnie się skupiasz.
moveDrag(e) Śledź przeciąganie obiektu w tym obszarze roboczym.
newBlock(prototypeName, opt_id) Uzyskiwanie nowo utworzonego bloku.
newComment(id) Uzyskaj nowo utworzony komentarz.
onNodeBlur() Zobacz IFocusableNode.onNodeBlur.
onNodeFocus() Zobacz IFocusableNode.onNodeFocus.
onTreeBlur(nextTree) Zobacz IFocusableTree.onTreeBlur.
onTreeFocus(_node, _previousTree) Zobacz IFocusableTree.onTreeFocus.
recordDragTargets() Utwórz listę wszystkich obszarów usuwania w tym obszarze roboczym.
refreshTheme() Odśwież wszystkie bloki w obszarze roboczym po aktualizacji motywu.
registerButtonCallback(key, func) Zarejestruj funkcję wywołania zwrotnego powiązaną z danym kluczem w przypadku kliknięć przycisków i etykiet w wyskakującym okienku. Na przykład przycisk określony w kodzie XML powinien być dopasowany przez wywołanie funkcji registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
registerToolboxCategoryCallback(key, func) Zarejestruj funkcję wywołania zwrotnego powiązaną z danym kluczem, aby wypełnić niestandardowe kategorie przybornika w tym obszarze roboczym. Zobacz na przykład kategorie zmiennych i procedur.
removeButtonCallback(key) Usuwanie wywołania zwrotnego w przypadku kliknięcia przycisku w wyskakującym okienku.
removeClass(className) Usuwa klasę CSS z obszaru roboczego.
removeToolboxCategoryCallback(key) Usuń wywołanie zwrotne dla kliknięcia nazwy kategorii niestandardowej w przyborniku.
removeTopBlock(block) Usuwa blok z listy najpopularniejszych bloków.
removeTopBoundedElement(element) Usuwa element ograniczony z listy najważniejszych elementów ograniczonych.
removeTopComment(comment) Usuwa komentarz z listy najpopularniejszych komentarzy.
render() Wyświetl wszystkie bloki w obszarze roboczym.
resize() Zmień rozmiar i pozycję wszystkich elementów interfejsu obszaru roboczego (przybornika, kosza, pasków przewijania itp.). Tę funkcję należy wywoływać, gdy coś się zmieni i wymaga ponownego obliczenia wymiarów i położenia kosza, powiększenia, przybornika itp. (np. zmiana rozmiaru okna).
scroll(x, y) Przewiń obszar roboczy do określonego przesunięcia (w pikselach), zachowując granice obszaru roboczego. Więcej informacji o znaczeniu tych wartości znajdziesz w komentarzu do workspaceSvg.scrollX.
scrollCenter() Wyśrodkuj obszar roboczy.
setIsReadOnly(readOnly)
setNavigator(newNavigator) Ustawia instancję Navigatora używaną przez ten obszar roboczy.
setResizeHandlerWrapper(handler) Zapisz dane uchwytu zmiany rozmiaru, aby można je było później usunąć w metodzie dispose.
setResizesEnabled(enabled) Aktualizowanie informacji o tym, czy w tym obszarze roboczym włączono zmianę rozmiaru. Jeśli ta opcja jest włączona, rozmiar obszaru roboczego będzie się zmieniać w razie potrzeby. Jeśli ta opcja jest wyłączona, rozmiar obszaru roboczego nie zmieni się, dopóki nie zostanie ponownie włączona. Użyj tej opcji, aby uniknąć zmiany rozmiaru podczas operacji wsadowej i zwiększyć wydajność.
setScale(newScale) Ustaw współczynnik powiększenia obszaru roboczego.
setTheme(theme) Ustaw obiekt motywu obszaru roboczego. Jeśli nie zostanie przekazany żaden motyw, zostanie użyty motyw domyślny Classic.
setVisible(isVisible) Przełącza widoczność obszaru roboczego. Obecnie jest przeznaczona tylko dla głównego obszaru roboczego.
startDrag(e, xy) Rozpocznij śledzenie przeciągania obiektu w tym obszarze roboczym.
translate(x, y) Przetłumacz ten obszar roboczy na nowe współrzędne.
updateInverseScreenCTM() Oznacz odwrotną macierz CTM ekranu jako nieprawidłową.
updateToolbox(toolboxDef) Zmodyfikuj drzewo bloków w dotychczasowym przyborniku.
zoom(x, y, amount) Powiększa lub pomniejsza obszar roboczy względem podanych współrzędnych (x, y) lub wyśrodkowuje go na tych współrzędnych.
zoomCenter(type) Powiększanie bloków wyśrodkowanych na środku widoku.
zoomToFit() W razie potrzeby powiększ bloki, aby zmieściły się w obszarze roboczym.