blockly > WorkspaceSvg

WorkspaceSvg-Kurs

Klasse für einen Arbeitsbereich. Dies ist ein Bildschirmbereich mit optionalem Papierkorb, Bildlaufleisten, Infofeldern und Ziehpunkten.

Unterschrift:

export declare class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg 

Erweitert: Workspace

Implementierungen: IASTNodeLocationSvg

Konstruktoren

Konstruktor Modifikatoren Beschreibung
(Konstruktor)(Optionen) Erstellt eine neue Instanz der WorkspaceSvg-Klasse

Attribute

Property Modifikatoren Typ Beschreibung
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null Entwickler können diese Funktion definieren, um dem Kontextmenü des Arbeitsbereichs benutzerdefinierte Menüoptionen hinzuzufügen oder die vom Arbeitsbereich erstellten Menüoptionen zu bearbeiten.
keyboardAccessibilityMode boolean „True“, wenn der Tastatureingabemodus aktiviert ist, andernfalls „false“.
gerendert boolean Der Renderingstatus eines SVG-Arbeitsbereichs. Gibt false für monitorlose Arbeitsbereiche und „true“ für Instanzen von WorkspaceSvg zurück.
Skalieren Zahl Aktuelle Skala.
Bildlaufleiste ScrollbarPair | null Die Bildlaufleisten dieses Arbeitsbereichs, falls vorhanden.
scrollX Zahl

Aktueller horizontaler Scrollversatz in Pixeleinheiten, bezogen auf den Ursprung des Arbeitsbereichs.

Stellen Sie sich eine Ansicht und ein Canvas unter diese Ansicht vor. Je mehr der Canvas nach rechts bewegt, desto positiver wird der Wert und die Ansicht "sieht" nun die linke Seite des Canvas. Wird der Canvas nach links verschoben, wird dieser Wert negativ und die Ansicht "sieht" jetzt die rechte Seite des Canvas.

Das Verwirrende an diesem Wert ist, dass er nicht den Offset „absolutLeft“ enthält und diesen nicht enthalten darf. Das liegt daran, dass er zum Berechnen des Werts von viewLeft verwendet wird.

Der Wert für „viewLeft“ bezieht sich auf den Ursprung des Arbeitsbereichs (in Pixeleinheiten). Der Ursprung des Arbeitsbereichs ist die linke obere Ecke des Arbeitsbereichs, zumindest wenn er aktiviert ist. Es wird von der linken oberen Ecke von blocklyDiv verschoben, damit es sich nicht unterhalb der Toolbox befindet.

Wenn der Arbeitsbereich aktiviert ist, befinden sich der Ursprung „viewLeft“ und „Arbeitsbereich“ am selben Ort X. Wenn sich das Canvas unter der Ansicht nach rechts bewegt, wird dieser Wert (scrollX) positiver und der Wert von viewLeft im Vergleich zum Ursprung des Arbeitsbereichs stärker negativ (Stellen Sie sich den Anfang des Arbeitsbereichs als einen Punkt vor, der sich auf dem Canvas nach rechts bewegt).

Wenn also das scrollX-Element absoluteLeft einschließen würde, würde dies den Ursprung des Arbeitsbereichs quasi „aufheben“. Das bedeutet, dass „viewLeft“ den linken Rand von „blocklyDiv“ darstellen würde und nicht den linken Rand des Arbeitsbereichs.

scrollY Zahl

Aktueller vertikaler Scroll-Offset in Pixeleinheiten, bezogen auf den Ursprung des Arbeitsbereichs.

Stellen Sie sich eine Ansicht und ein Canvas unter diese Ansicht vor. Je weiter der Canvas nach unten bewegt wird, desto positiver wird der Wert und die Ansicht "sieht" den oberen Teil des Canvas. Wenn sich der Canvas nach oben bewegt, wird dieser Wert negativ und die Ansicht „sieht“ den unteren Teil des Canvas.

Das Verwirrende an diesem Wert ist, dass er nicht den Offset „absolut“ enthält und diesen nicht enthalten darf. Das liegt daran, dass sie zur Berechnung des Werts von viewTop verwendet wird.

„viewTop“ bezieht sich auf den Ursprung des Arbeitsbereichs (in Pixeleinheiten). Der Ursprung des Arbeitsbereichs ist die linke obere Ecke des Arbeitsbereichs, zumindest wenn er aktiviert ist. Es wird von der linken oberen Ecke von blocklyDiv verschoben, damit es sich nicht unterhalb der Toolbox befindet.

Wenn der Arbeitsbereich aktiviert ist, befinden sich der Ursprung „viewTop“ und der Ursprung des Arbeitsbereichs am selben Y-Standort. Wenn sich der Canvas nach unten bewegt, wird dieser Wert (scrollY) positiver. Der Wert „viewTop“ wird relativ zum Ursprung des Arbeitsbereichs stärker negativ (das Bild im Arbeitsbereich als Punkt, der sich auf dem Canvas nach unten bewegt, wenn sich der Canvas bewegt.)

Wenn also scrollY also absoluteTop enthält, würde dies den Ursprung des Arbeitsbereichs quasi wieder aufheben. Das bedeutet, dass „viewTop“ den oberen Rand von „blocklyDiv“ darstellt, und nicht den oberen Rand des Arbeitsbereichs.

startScrollX Zahl Horizontaler Scrollwert zu Beginn des Scrollens in Pixeleinheiten.
startScrollY Zahl Vertikaler Scrollwert beim Beginn des Scrollens in Pixeleinheiten.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
Papierkorb Papierkorb | null Papierkorb des Arbeitsbereichs (falls vorhanden).
zoomControls_ ZoomControls | null

Methoden

Methode Modifikatoren Beschreibung
addTopBlock(block) Fügt der Liste der obersten Blöcke einen Block hinzu.
addTopBoundedElement(element) Fügt der Liste der begrenzten Elemente am oberen Rand ein begrenztes Element hinzu.
addTopComment(comment) Damit wird der Liste der Top-Kommentare ein Kommentar hinzugefügt.
centerOnBlock(id, blockOnly) Scrollen Sie durch den Arbeitsbereich, um den jeweiligen Block zu zentrieren. Wenn unter dem Block weitere Blöcke gestapelt sind, wird der Arbeitsbereich auf dem Stapel zentriert, sofern „blockOnly“ nicht „true“ ist.
cleanUp() Bereinigen Sie den Arbeitsbereich, indem Sie alle Blöcke in einer Spalte sortieren.
clear() Entsorgen Sie alle Blöcke im Arbeitsbereich mit einer Optimierung, um Größenänderungen zu verhindern.
createDom(opt_backgroundClass, InjectionDiv) Erstellen Sie die DOM-Elemente des Arbeitsbereichs.
createVariable(name, opt_type, opt_id) Erstellen Sie eine neue Variable mit dem angegebenen Namen. Aktualisieren Sie das Flyout-Element so, dass die neue Variable sofort angezeigt wird.
deleteVariableById(id) Löscht eine Variable anhand der übergebenen ID. Aktualisieren Sie das Flyout-Fenster, um sofort anzuzeigen, dass die Variable gelöscht wurde.
dispose() Diesen Arbeitsbereich entsorgen. Heben Sie die Verknüpfung mit allen DOM-Elementen auf, um Speicherlecks zu vermeiden.
getAllBlocks(ordered) Alle Blöcke im Arbeitsbereich finden. Die Blöcke werden optional nach Position und von oben nach unten sortiert (geringe LTR- oder RTL-Verzerrung).
getAudioManager() Rufen Sie den Audio-Manager für diesen Arbeitsbereich ab.
getBlockById(id). Suchen Sie den Block in diesem Arbeitsbereich mit der angegebenen ID.
getBlocksBoundingBox() Berechnen Sie den Begrenzungsrahmen für die Blöcke im Arbeitsbereich. Koordinatensystem: Koordinaten des Arbeitsbereichs.
getBubbleCanvas() Rufen Sie das SVG-Element ab, mit dem die Blasenoberfläche dargestellt wird.
getButtonCallback(key) Ruft die mit einem bestimmten Schlüssel verknüpfte Callback-Funktion für Klicks auf Schaltflächen und Labels im Flyout-Element ab.
getCanvas() Rufen Sie das SVG-Element ab, das die Zeichenfläche bildet.
getComponentManager() Ruft den Komponentenmanager für diesen Arbeitsbereich ab
getCursor() Der Cursor für diesen Arbeitsbereich.
getDragTarget(e) Gibt das Ziehziel zurück, über das das Zeigerereignis liegt.
getFlyout(opt_own) Getter für das Flyout, der mit diesem Arbeitsbereich verknüpft ist. Dieses Flyout-Element kann je nach Toolbox-Konfiguration entweder der Toolbox oder dem Arbeitsbereich gehören. Er ist null, wenn es kein Flyout gibt.
getGrid() Ruft das Rasterobjekt für diesen Arbeitsbereich ab oder null, wenn kein Objekt vorhanden ist.
getInverseScreenCTM() Getter für die CTM für den umgekehrten Bildschirm.
getMarkerManager() Rufen Sie den Markierungs-Manager für diesen Arbeitsbereich ab.
getMetricsManager() Ruft den Messwertmanager für diesen Arbeitsbereich ab.
getParentSvg(). Rufen Sie das SVG-Element ab, das diesen Arbeitsbereich enthält. Hinweis: Wir gehen davon aus, dass dies erst aufgerufen wird, nachdem der Arbeitsbereich in das DOM eingeschleust wurde.
getRenderer() Hiermit wird der Block-Renderer abgerufen, der an diesen Arbeitsbereich angehängt ist.
getRootWorkspace()
getScale() Rufen Sie den Zoomfaktor des Arbeitsbereichs ab. Wenn der Arbeitsbereich ein übergeordnetes Element hat, rufen wir das übergeordnete Element auf, um die Größe des Arbeitsbereichs zu erhalten.
getSvgGroup() Gibt die SVG-Gruppe für den Arbeitsbereich zurück.
getTheme() Rufen Sie das Arbeitsbereichsdesign-Objekt ab.
getToolbox() Getter für die Toolbox, die mit diesem Arbeitsbereich verknüpft ist, falls vorhanden.
getToolboxCategoryCallback(key) Ruft die Callback-Funktion ab, die mit einem bestimmten Schlüssel verknüpft ist, um benutzerdefinierte Toolbox-Kategorien in diesem Arbeitsbereich zu füllen.
getTopBlocks(ordered) Findet die Blöcke der obersten Ebene und gibt sie zurück. Die Blöcke werden optional nach Position und von oben nach unten sortiert (geringe LTR- oder RTL-Verzerrung).
getTopBoundedElements() Findet die begrenzten Elemente der obersten Ebene und gibt sie zurück.
getWidth() Gibt den horizontalen Versatz des Arbeitsbereichs zurück. Vorgesehen für die LTR-/RTL-Kompatibilität in XML.
hideChaff(onlyClosePopups) Kurzinfos, Kontextmenüs, Drop-down-Menüs usw. schließen
hideComponents(onlyClosePopups) Blenden Sie alle automatisch ausblendbaren Komponenten wie Flyout, Papierkorb und nutzerregistrierte Komponenten aus.
highlightBlock(id, opt_state) Markieren Sie einen Block im Arbeitsbereich oder heben Sie die Hervorhebung auf. Die Blockhervorhebung wird häufig verwendet, um Blöcke, die gerade ausgeführt werden, visuell zu markieren.
isDraggable() Kann dieser Arbeitsbereich gezogen werden?
isDragging() Ziehen Sie gerade einen Block oder scrollen Sie im Flyout-Menü bzw. im Arbeitsbereich?
isMovable()

Ist dieser Arbeitsbereich verschiebbar?

Das bedeutet, dass der Nutzer die x-y-Koordinaten des Arbeitsbereichs über die Eingabe neu positionieren kann. Dies kann über Bildlaufleisten, Scrollrad, Ziehen oder Zoomen mit dem Scrollrad erfolgen, da der Zoom auf die Mausposition zentriert wird. Das Zoomen mit den Zoomsteuerelementen ist dabei nicht enthalten, da die x-y-Koordinaten programmatisch festgelegt werden.

isMovableHorizontally() Ist dieser Arbeitsbereich horizontal verschiebbar?
isMovableVertically() Ist dieser Arbeitsbereich vertikal verschiebbar?
isVisible() Getter für isSichtbar
markFocused() Diesen Arbeitsbereich als aktuellen Hauptarbeitsbereich markieren.
moveDrag(e) Ziehen eines Objekts in diesem Arbeitsbereich erfassen.
newBlock(prototypeName, opt_id) Ruft einen neu erstellten Block ab
paste(state) Fügt den angegebenen Block oder Kommentar zum Arbeitsbereich in den Arbeitsbereich ein. Überprüft nicht, ob noch Kapazität für das Objekt vorhanden ist. Dies sollte vor dem Aufruf dieser Methode erfolgen.
recordDragTargets() Erstellen Sie eine Liste aller Löschbereiche für diesen Arbeitsbereich.
refreshTheme() Alle Blöcke im Arbeitsbereich nach einer Aktualisierung des Designs aktualisieren.
registerButtonCallback(key, func) Registriert eine Callback-Funktion, die einem bestimmten Schlüssel zugeordnet ist, für Klicks auf Schaltflächen und Labels im Flyout. Beispielsweise sollte eine durch die XML-Datei angegebene Schaltfläche mit einem Aufruf von recordButtonCallback("CREATE_VARIABLE", yourCallbackFunction) abgeglichen werden.
registerToolboxCategoryCallback(key, func) Registriert eine Callback-Funktion, die mit einem bestimmten Schlüssel verknüpft ist, um benutzerdefinierte Toolbox-Kategorien in diesem Arbeitsbereich zu füllen. Sehen Sie sich als Beispiel die Kategorien „Variablen“ und „Prozedur“ an.
removeButtonCallback(key) Entfernen Sie einen Callback für einen Klick auf eine Schaltfläche im Flyout.
removeToolboxCategoryCallback(key) Entfernen Sie einen Callback für einen Klick auf den Namen einer benutzerdefinierten Kategorie in der Toolbox.
removeTopBlock(block) Entfernt einen Block aus der Liste der obersten Blöcke.
removeTopBoundedElement(element) Entfernt ein begrenztes Element aus der Liste der begrenzten Elemente am oberen Rand.
removeTopComment(comment) Entfernt einen Kommentar aus der Liste der Top-Kommentare.
renameVariableById(id, newName) Benennen Sie eine Variable um, indem Sie ihren Namen in der Variablenzuordnung aktualisieren. Aktualisieren Sie das Flyout, um die umbenannte Variable sofort anzuzeigen.
render() Alle Blöcke im Arbeitsbereich werden gerendert.
resize() Größe des gesamten Chrome-Arbeitsbereichs (Toolbox, Papierkorb, Bildlaufleisten usw.) anpassen und neu positionieren Dieser sollte aufgerufen werden, wenn sich etwas ändert und die Größe und Position des Papierkorbs, des Zooms, der Toolbox usw. neu berechnet werden muss (z.B. die Größe des Fensters).
scrollCenter() Zentrieren Sie den Arbeitsbereich.
setResizeHandlerWrapper(handler) Daten des Handlers zur Größenanpassung speichern, damit wir sie später löschen können.
setResizesEnabled(enabled) Aktualisieren Sie, ob für diesen Arbeitsbereich Größenanpassungen aktiviert sind. Wenn diese Option aktiviert ist, wird die Größe des Arbeitsbereichs bei Bedarf angepasst. Wenn diese Option deaktiviert ist, ändert sich die Größe des Arbeitsbereichs erst, wenn Sie ihn wieder aktivieren. Verwenden Sie diese Option, um eine Größenanpassung während eines Batchvorgangs zu vermeiden und so die Leistung zu steigern.
setScale(newScale) Legt den Zoomfaktor des Arbeitsbereichs fest.
setTheme(theme) Legen Sie das Designobjekt für den Arbeitsbereich fest. Wenn kein Design übergeben wird, wird standardmäßig das Design Classic verwendet.
setVisible(isVisible) Schaltet die Sichtbarkeit des Arbeitsbereichs ein oder aus. Derzeit nur für den Hauptarbeitsbereich vorgesehen.
startDrag(e, xy) Ziehen Sie das Ziehen eines Objekts in diesem Arbeitsbereich nach.
translate(x; y) Diesen Arbeitsbereich in neue Koordinaten übersetzen.
updateInverseScreenCTM(). Umgekehrte Display-CTM als „schmutzig“ kennzeichnen.
updateToolbox(toolboxDef) Blockstruktur der vorhandenen Toolbox bearbeiten
zoom(x, y, Betrag) Zoomt den Arbeitsbereich relativ zur/zentrierten Koordinate (x, y) heran oder heraus.
zoomCenter(type) Zoomen der Blöcke in der Mitte der Ansicht durch Heran- oder Herauszoomen
zoomToFit() Zoomen Sie die Blöcke nach Möglichkeit so, dass sie in den Arbeitsbereich passen.