blockly > WorkspaceSvg

WorkspaceSvg-Klasse

Klasse für einen Arbeitsbereich. Dies ist ein Bildschirmbereich mit optionalem Papierkorb, optionalen Scrollleisten, optionalen Blasen und optionaler Drag-and-drop-Funktion.

Unterschrift:

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

Erweitert:Workspace

Implementiert: IContextMenu, IFocusableNode, IFocusableTree

Konstruktoren

Konstruktor	Modifikatoren	Beschreibung
(constructor)(options)		Erstellt eine neue Instanz der Klasse WorkspaceSvg.

Attribute

Attribut	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 Tastatur-Bedienungshilfenmodus aktiviert ist, andernfalls „false“.
keyboardMoveInProgress		boolean	„True“, wenn eine per Tastatur initiierte Bewegung („Ziehen“) ausgeführt wird.
rendered		boolean	Der Rendering-Status eines SVG-Arbeitsbereichs. Gibt false für monitorlose Arbeitsbereiche und „true“ für Instanzen von WorkspaceSvg zurück.
Skala		Zahl	Aktuelle Skalierung.
scrollbar		ScrollbarPair | null	Die Scrollbalken dieses Arbeitsbereichs, sofern vorhanden.
scrollX		Zahl	Aktueller horizontaler Scroll-Offset in Pixeln, relativ zum Ursprung des Arbeitsbereichs. Es ist hilfreich, sich eine Ansicht und einen darunter liegenden Canvas vorzustellen. Wenn sich der Arbeitsbereich nach rechts bewegt, wird dieser Wert positiver und in der Ansicht ist nun die linke Seite des Arbeitsbereichs zu sehen. Wenn sich der Arbeitsbereich nach links bewegt, wird dieser Wert negativer und die Ansicht „sieht“ jetzt die rechte Seite des Arbeitsbereichs. Das Verwirrende an diesem Wert ist, dass er den „absoluteLeft“-Offset nicht enthält und auch nicht enthalten darf. Das liegt daran, dass damit der Wert „viewLeft“ berechnet wird. viewLeft ist relativ zum Ursprung des Arbeitsbereichs (in Pixeleinheiten). Der Ursprung des Arbeitsbereichs ist die obere linke Ecke des Arbeitsbereichs (zumindest wenn er aktiviert ist). Sie ist von der oberen linken Ecke des blocklyDiv verschoben, damit sie nicht unter der Toolbox liegt. Wenn der Arbeitsbereich aktiviert ist, befinden sich „viewLeft“ und der Ursprung des Arbeitsbereichs an derselben X-Position. Wenn das Arbeitsbereich-Canvas unter der Ansicht nach rechts verschoben wird, wird dieser Wert (scrollX) positiver und viewLeft wird relativ zum Arbeitsbereich-Ursprung negativer. Stellen Sie sich den Arbeitsbereich-Ursprung als Punkt auf dem Canvas vor, der sich nach rechts verschiebt, wenn das Canvas verschoben wird. Wenn scrollX also absoluteLeft enthalten würde, würde der Ursprung des Arbeitsbereichs gewissermaßen „verschoben“. Das bedeutet, dass „viewLeft“ den linken Rand von „blocklyDiv“ und nicht den linken Rand des Arbeitsbereichs darstellt.
scrollY		Zahl	Aktueller vertikaler Scroll-Offset in Pixeln, relativ zum Ursprung des Arbeitsbereichs. Es ist hilfreich, sich eine Ansicht und einen darunter liegenden Canvas vorzustellen. Wenn der Arbeitsbereich nach unten verschoben wird, wird dieser Wert positiver und die Ansicht zeigt den oberen Teil des Arbeitsbereichs. Wenn der Canvas nach oben verschoben wird, wird dieser Wert negativer und in der Ansicht ist der untere Teil des Canvas zu sehen. Das Verwirrende an diesem Wert ist, dass er den „absoluteTop“-Versatz nicht enthält und auch nicht enthalten darf. Das liegt daran, dass er zur Berechnung des viewTop-Werts verwendet wird. „viewTop“ ist relativ zum Ursprung des Arbeitsbereichs (in Pixeleinheiten). Der Ursprung des Arbeitsbereichs ist die obere linke Ecke des Arbeitsbereichs (zumindest wenn er aktiviert ist). Sie ist von der oberen linken Ecke des blocklyDiv verschoben, damit sie nicht unter der Toolbox liegt. Wenn der Arbeitsbereich aktiviert ist, befinden sich „viewTop“ und der Ursprung des Arbeitsbereichs an derselben Y-Position. Wenn das Arbeitsbereich-Canvas nach unten gleitet, wird dieser Wert (scrollY) positiver und viewTop negativer in Bezug auf den Ursprung des Arbeitsbereichs (das Bild im Ursprung des Arbeitsbereichs als Punkt auf dem Canvas, der nach unten gleitet, wenn sich das Canvas bewegt). Wenn scrollY also absoluteTop enthalten würde, würde der Arbeitsbereichursprung in gewisser Weise „verschoben“. Das bedeutet, dass „viewTop“ die obere Kante von „blocklyDiv“ und nicht die obere Kante des Arbeitsbereichs darstellt.
startScrollX		Zahl	Horizontaler Scrollwert beim Start des Scrollens in Pixeln.
startScrollY		Zahl	Vertikaler Scrollwert beim Start des Scrollens in Pixeln.
svgBackground_		SVGElement
svgBlockCanvas_		SVGElement
svgBubbleCanvas_		SVGElement
svgGroup_		SVGElement
themeManager_	protected	ThemeManager
trashcan		Trashcan | null	Der Papierkorb des Arbeitsbereichs, sofern vorhanden.
zoomControls_		ZoomControls | null

Methoden

Methode	Modifikatoren	Beschreibung
addClass(className)		Fügt dem Arbeitsbereich eine CSS-Klasse hinzu.
addTopBlock(block)		Fügt der Liste der Top-Blöcke einen Block hinzu.
addTopBoundedElement(element)		Fügt der Liste der wichtigsten Elemente mit Grenzen ein Element mit Grenzen hinzu.
addTopComment(comment)		Fügt der Liste der Top-Kommentare einen Kommentar hinzu.
canBeFocused()		Siehe IFocusableNode.canBeFocused.
centerOnBlock(id, blockOnly)		Scrollen Sie im Arbeitsbereich, um den angegebenen Block zu zentrieren. Wenn unter dem Block andere Blöcke gestapelt sind, wird der Arbeitsbereich auf den Stapel zentriert, sofern „blockOnly“ nicht „true“ ist.
cleanUp()		Räumen Sie den Arbeitsbereich auf, indem Sie alle Blöcke in einer Spalte so anordnen, dass sie sich nicht überschneiden.
clear()		Alle Blöcke im Arbeitsbereich werden entfernt. Die Funktion ist so optimiert, dass keine Größenänderungen erfolgen.
copyOptionsForFlyout()		Erstellt eine neue Gruppe von Optionen aus den Optionen dieses Arbeitsbereichs mit nur den Werten, die für ein Flyout relevant sind.
createDom(opt_backgroundClass, injectionDiv)		DOM-Elemente für den Arbeitsbereich erstellen
dispose()		Diesen Arbeitsbereich löschen. Verknüpfung mit allen DOM-Elementen aufheben, um Speicherlecks zu vermeiden
getAbsoluteScale()		Gibt den absoluten Maßstab des Arbeitsbereichs zurück. Die Skalierung von Arbeitsbereichen ist multiplikativ. Wenn ein Arbeitsbereich B (z. B. ein Mutator-Editor) mit der Skalierung Y in einem Stamm-Arbeitsbereich A mit der Skalierung X verschachtelt ist, beträgt die effektive Skalierung von Arbeitsbereich B X * Y, da er als untergeordnetes Element von A bereits durch den Skalierungsfaktor von A transformiert wird und sich dann durch seinen eigenen Skalierungsfaktor weiter transformiert. Normalerweise funktioniert das automatisch. Bei globalen Elementen (z. B. Feld-Editoren), die visuell mit einem bestimmten Arbeitsbereich verknüpft sind, sich aber auf der obersten Ebene des DOM befinden und nicht untergeordnete Elemente des zugehörigen Arbeitsbereichs sind, ist möglicherweise die absolute/effektive Skalierung erforderlich, damit sie richtig gerendert werden.
getAllBlocks(ordered)		Alle Blöcke im Arbeitsbereich suchen. Blöcke werden optional nach Position sortiert, von oben nach unten (mit leichter LTR- oder RTL-Ausrichtung).
getAudioManager()		Rufen Sie den Audio-Manager für diesen Arbeitsbereich ab.
getBlockById(id)		Sucht den Block in diesem Arbeitsbereich mit der angegebenen ID.
getBlocksBoundingBox()		Berechnen Sie den Begrenzungsrahmen für die Blöcke im Arbeitsbereich. Koordinatensystem: Arbeitsbereichskoordinaten.
getBubbleCanvas()		Ruft das SVG-Element ab, das die Blasenoberfläche bildet.
getButtonCallback(key)		Ruft die Callback-Funktion ab, die einem bestimmten Schlüssel für Klicks auf Schaltflächen und Labels im Flyout zugeordnet ist.
getCanvas()		Das SVG-Element abrufen, das die Zeichenfläche bildet.
getCommentById(id)		Gibt den Workspace-Kommentar mit der angegebenen ID zurück, sofern vorhanden.
getComponentManager()		Gibt den Komponentenmanager für diesen Arbeitsbereich zurück.
getCursor()		Der Cursor für diesen Arbeitsbereich.
getDragTarget(e)		Gibt das Drag-Ziel zurück, über dem sich das Zeigerereignis befindet.
getFlyout(opt_own)		Getter für das Flyout, das diesem Arbeitsbereich zugeordnet ist. Dieses Flyout kann je nach Konfiguration der Toolbox entweder der Toolbox oder dem Arbeitsbereich gehören. Wenn kein Flyout vorhanden ist, ist der Wert „null“.
getFocusableElement()		Siehe IFocusableNode.getFocusableElement.
getFocusableTree()		Weitere Informationen finden Sie unter IFocusableNode.getFocusableTree.
getGrid()		Gibt das Grid-Objekt für diesen Arbeitsbereich zurück oder „null“, wenn keines vorhanden ist.
getInverseScreenCTM()		Getter für das invertierte CTM des Displays.
getMarkerManager()		Rufen Sie den Markierungsmanager für diesen Arbeitsbereich ab.
getMetricsManager()		Ruft den Messwerte-Manager für diesen Arbeitsbereich ab.
getNavigator()		Gibt ein Objekt zurück, das für die Koordination der Fokusbewegung zwischen Elementen in diesem Arbeitsbereich als Reaktion auf Tastaturnavigationsbefehle zuständig ist.
getNestedTrees()		Weitere Informationen finden Sie unter IFocusableTree.getNestedTrees.
getParentSvg()		Ruft das SVG-Element ab, das diesen Arbeitsbereich enthält. Hinweis: Wir gehen davon aus, dass diese Funktion erst aufgerufen wird, nachdem der Arbeitsbereich in das DOM eingefügt wurde.
getRenderer()		Gibt den Block-Renderer zurück, der an diesen Arbeitsbereich angehängt ist.
getRestoredFocusableNode(previousNode)		Siehe IFocusableTree.getRestoredFocusableNode.
getRootFocusableNode()		Weitere Informationen finden Sie unter IFocusableTree.getRootFocusableNode.
getRootWorkspace()
getScale()		Ruft den Zoomfaktor des Arbeitsbereichs ab.
getSvgGroup()		Gibt die SVG-Gruppe für den Arbeitsbereich zurück.
getTheme()		Rufen Sie das Arbeitsbereich-Designobjekt ab.
getToolbox()		Getter für die mit diesem Arbeitsbereich verknüpfte Toolbox, falls vorhanden.
getToolboxCategoryCallback(key)		Ruft die Callback-Funktion ab, die einem bestimmten Schlüssel zugeordnet ist, um benutzerdefinierte Toolbox-Kategorien in diesem Arbeitsbereich zu erstellen.
getTopBlocks(ordered)		Sucht die Blöcke der obersten Ebene und gibt sie zurück. Blöcke werden optional nach Position sortiert, von oben nach unten (mit leichter LTR- oder RTL-Ausrichtung).
getTopBoundedElements(ordered)		Sucht die gebundenen Elemente der obersten Ebene und gibt sie zurück.
getTopComments(ordered)		Gibt eine Liste der Kommentare zu diesem Arbeitsbereich zurück.
getWidth()		Gibt den horizontalen Versatz des Arbeitsbereichs zurück. Für die LTR-/RTL-Kompatibilität in XML vorgesehen.
hideChaff(onlyClosePopups)		Schließen Sie Tooltips, Kontextmenüs, Drop-down-Auswahlen usw.
hideComponents(onlyClosePopups)		Alle automatisch ausblendbaren Komponenten wie Flyout, Papierkorb und alle vom Nutzer registrierten Komponenten ausblenden.
highlightBlock(id, opt_state)		Markieren oder heben Sie die Markierung eines Blocks im Arbeitsbereich auf. Die Blockhervorhebung wird häufig verwendet, um aktuell ausgeführte Blöcke visuell zu kennzeichnen.
isDraggable()		Kann dieser Arbeitsbereich verschoben werden?
isDragging()		Gibt „true“ zurück, wenn der Nutzer gerade eine Drag-Geste ausführt oder eine per Tastatur initiierte Bewegung läuft. Bei Ziehgesten wird normalerweise ein Block oder ein anderes Element im Arbeitsbereich verschoben oder das Flyout bzw. der Arbeitsbereich gescrollt. Tastaturbasierte Bewegungen werden mithilfe der Drag-Infrastruktur implementiert und sollen (eine Teilmenge von) Drag-Gesten emulieren. Sie sollten daher in der Regel so behandelt werden, als wären sie ein gestenbasiertes Ziehen.
isMovable()		Ist dieser Arbeitsbereich mobil? Das bedeutet, dass der Nutzer die X‑ und Y‑Koordinaten des Arbeitsbereichs durch Eingabe neu positionieren kann. Das kann über Scrollleisten, das Mausrad, Ziehen oder Zoomen mit dem Mausrad oder durch Auf- und Zuziehen erfolgen, da das Zoomen auf die Mausposition zentriert ist. Das Zoomen mit den Zoomsteuerelementen ist nicht enthalten, da die X- und Y-Koordinaten programmatisch festgelegt werden.
isMovableHorizontally()		Kann dieser Arbeitsbereich horizontal verschoben werden?
isMovableVertically()		Kann dieser Arbeitsbereich vertikal verschoben werden?
isVisible()		Getter für isVisible
lookUpFocusableNode(id)		Siehe IFocusableTree.lookUpFocusableNode.
markFocused()		Diesen Arbeitsbereich als aktuell fokussierten Hauptarbeitsbereich markieren.
moveDrag(e)		Verfolgt das Ziehen eines Objekts in diesem Arbeitsbereich.
newBlock(prototypeName, opt_id)		Ein neu erstelltes Blockobjekt abrufen.
newComment(id)		Einen neu erstellten Kommentar abrufen.
onNodeBlur()		Weitere Informationen finden Sie unter IFocusableNode.onNodeBlur.
onNodeFocus()		Weitere Informationen finden Sie unter IFocusableNode.onNodeFocus.
onTreeBlur(nextTree)		Weitere Informationen finden Sie unter IFocusableTree.onTreeBlur.
onTreeFocus(_node, _previousTree)		Siehe IFocusableTree.onTreeFocus.
recordDragTargets()		Erstellen Sie eine Liste aller Löschbereiche für diesen Arbeitsbereich.
refreshTheme()		Aktualisieren Sie nach einer Designaktualisierung alle Blöcke im Arbeitsbereich.
registerButtonCallback(key, func)		Registrieren Sie eine Callback-Funktion, die einem bestimmten Schlüssel zugeordnet ist, für Klicks auf Schaltflächen und Labels im Flyout. Eine Schaltfläche, die durch den XML-Code angegeben wird, sollte beispielsweise mit einem Aufruf von registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction) übereinstimmen.
registerToolboxCategoryCallback(key, func)		Registrieren Sie eine Callback-Funktion, die einem bestimmten Schlüssel zugeordnet ist, um benutzerdefinierte Toolbox-Kategorien in diesem Arbeitsbereich zu erstellen. Sehen Sie sich die Variablen- und Verfahrenskategorien als Beispiel an.
removeButtonCallback(key)		Entfernt einen Callback für einen Klick auf eine Schaltfläche im Flyout.
removeClass(className)		Entfernt eine CSS-Klasse aus dem Arbeitsbereich.
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 Top-Blöcke.
removeTopBoundedElement(element)		Entfernt ein gebundenes Element aus der Liste der gebundenen Top-Elemente.
removeTopComment(comment)		Entfernt einen Kommentar aus der Liste der Top-Kommentare.
render()		Alle Blöcke im Arbeitsbereich rendern.
resize()		Größe und Position aller Chrome-Elemente des Arbeitsbereichs (z. B. Symbolleiste, Papierkorb, Scrollleisten) anpassen Diese Funktion sollte aufgerufen werden, wenn sich etwas ändert, das eine Neuberechnung der Abmessungen und Positionen von Papierkorb, Zoom, Symbolleiste usw. erfordert (z.B. wenn die Fenstergröße geändert wird).
scroll(x, y)		Scrollt den Arbeitsbereich zu einem bestimmten Offset (in Pixel), wobei die Grenzen des Arbeitsbereichs eingehalten werden. Weitere Informationen zur Bedeutung dieser Werte finden Sie im Kommentar zu workspaceSvg.scrollX.
scrollCenter()		Arbeitsbereich zentrieren
setIsReadOnly(readOnly)
setNavigator(newNavigator)		Legt die Navigator-Instanz fest, die von diesem Arbeitsbereich verwendet wird.
setResizeHandlerWrapper(handler)		Speichern Sie die Daten des Größenänderungs-Handlers, damit wir sie später in „dispose“ löschen können.
setResizesEnabled(enabled)		Aktualisieren Sie, ob für diesen Arbeitsbereich die Größenänderung aktiviert ist. Wenn diese Option aktiviert ist, wird die Größe des Arbeitsbereichs bei Bedarf angepasst. Wenn diese Option deaktiviert ist, wird die Größe des Arbeitsbereichs erst wieder angepasst, wenn sie wieder aktiviert wird. Wird verwendet, um das Ändern der Größe während eines Batchvorgangs aus Leistungsgründen zu vermeiden.
setScale(newScale)		Legen Sie den Zoomfaktor des Arbeitsbereichs fest.
setTheme(theme)		Legen Sie das Arbeitsbereich-Themaobjekt fest. Wenn kein Design übergeben wird, wird standardmäßig das Design Classic verwendet.
setVisible(isVisible)		Schaltet die Sichtbarkeit des Arbeitsbereichs um. Derzeit nur für den Hauptarbeitsbereich vorgesehen.
startDrag(e, xy)		Beginnt mit der Erfassung des Ziehens eines Objekts in diesem Arbeitsbereich.
translate(x, y)		Diesen Arbeitsbereich in neue Koordinaten übersetzen.
updateInverseScreenCTM()		Markieren Sie das inverse CTM für den Bildschirm als „dirty“.
updateToolbox(toolboxDef)		Ändern Sie die Blockstruktur in der vorhandenen Toolbox.
zoom(x, y, amount)		Zoomt den Arbeitsbereich relativ zu/zentriert auf die angegebene (x, y)-Koordinate hinein oder heraus.
zoomCenter(type)		Die Blöcke werden beim Heran- oder Herauszoomen in der Mitte der Ansicht zentriert.
zoomToFit()		Zoomen Sie die Blöcke nach Möglichkeit so, dass sie in den Arbeitsbereich passen.