blockly > WorkspaceSvg

WorkspaceSvg class

Class for a workspace. This is an onscreen area with optional trashcan, scrollbars, bubbles, and dragging.

Signature:

export declare class WorkspaceSvg extends Workspace implements IASTNodeLocationSvg 

Extends: Workspace

Implements: IASTNodeLocationSvg

Constructors

Constructor Modifiers Description
(constructor)(options) Constructs a new instance of the WorkspaceSvg class

Properties

Property Modifiers Type Description
configureContextMenu ((menuOptions: ContextMenuOption[], e: Event) => void) | null Developers may define this function to add custom menu options to the workspace's context menu or edit the workspace-created set of menu options.
keyboardAccessibilityMode boolean True if keyboard accessibility mode is on, false otherwise.
rendered boolean The render status of an SVG workspace. Returns false for headless workspaces and true for instances of WorkspaceSvg.
scale number Current scale.
scrollbar ScrollbarPair | null This workspace's scrollbars, if they exist.
scrollX number

Current horizontal scrolling offset in pixel units, relative to the workspace origin.

It is useful to think about a view, and a canvas moving beneath that view. As the canvas moves right, this value becomes more positive, and the view is now "seeing" the left side of the canvas. As the canvas moves left, this value becomes more negative, and the view is now "seeing" the right side of the canvas.

The confusing thing about this value is that it does not, and must not include the absoluteLeft offset. This is because it is used to calculate the viewLeft value.

The viewLeft is relative to the workspace origin (although in pixel units). The workspace origin is the top-left corner of the workspace (at least when it is enabled). It is shifted from the top-left of the blocklyDiv so as not to be beneath the toolbox.

When the workspace is enabled the viewLeft and workspace origin are at the same X location. As the canvas slides towards the right beneath the view this value (scrollX) becomes more positive, and the viewLeft becomes more negative relative to the workspace origin (imagine the workspace origin as a dot on the canvas sliding to the right as the canvas moves).

So if the scrollX were to include the absoluteLeft this would in a way "unshift" the workspace origin. This means that the viewLeft would be representing the left edge of the blocklyDiv, rather than the left edge of the workspace.

scrollY number

Current vertical scrolling offset in pixel units, relative to the workspace origin.

It is useful to think about a view, and a canvas moving beneath that view. As the canvas moves down, this value becomes more positive, and the view is now "seeing" the upper part of the canvas. As the canvas moves up, this value becomes more negative, and the view is "seeing" the lower part of the canvas.

This confusing thing about this value is that it does not, and must not include the absoluteTop offset. This is because it is used to calculate the viewTop value.

The viewTop is relative to the workspace origin (although in pixel units). The workspace origin is the top-left corner of the workspace (at least when it is enabled). It is shifted from the top-left of the blocklyDiv so as not to be beneath the toolbox.

When the workspace is enabled the viewTop and workspace origin are at the same Y location. As the canvas slides towards the bottom this value (scrollY) becomes more positive, and the viewTop becomes more negative relative to the workspace origin (image in the workspace origin as a dot on the canvas sliding downwards as the canvas moves).

So if the scrollY were to include the absoluteTop this would in a way "unshift" the workspace origin. This means that the viewTop would be representing the top edge of the blocklyDiv, rather than the top edge of the workspace.

startScrollX number Horizontal scroll value when scrolling started in pixel units.
startScrollY number Vertical scroll value when scrolling started in pixel units.
svgBackground_ SVGElement
svgBlockCanvas_ SVGElement
svgBubbleCanvas_ SVGElement
svgGroup_ SVGElement
themeManager_ protected ThemeManager
trashcan Trashcan | null The workspace's trashcan (if any).
zoomControls_ ZoomControls | null

Methods

Method Modifiers Description
addTopBlock(block) Adds a block to the list of top blocks.
addTopBoundedElement(element) Adds a bounded element to the list of top bounded elements.
addTopComment(comment) Adds a comment to the list of top comments.
centerOnBlock(id, blockOnly) Scroll the workspace to center on the given block. If the block has other blocks stacked below it, the workspace will be centered on the stack, unless blockOnly is true.
cleanUp() Clean up the workspace by ordering all the blocks in a column.
clear() Dispose of all blocks in workspace, with an optimization to prevent resizes.
createDom(opt_backgroundClass, injectionDiv) Create the workspace DOM elements.
createVariable(name, opt_type, opt_id) Create a new variable with the given name. Update the flyout to show the new variable immediately.
deleteVariableById(id) Delete a variable by the passed in ID. Update the flyout to show immediately that the variable is deleted.
dispose() Dispose of this workspace. Unlink from all DOM elements to prevent memory leaks.
getAllBlocks(ordered) Find all blocks in workspace. Blocks are optionally sorted by position; top to bottom (with slight LTR or RTL bias).
getAudioManager() Get the audio manager for this workspace.
getBlockById(id) Find the block on this workspace with the specified ID.
getBlocksBoundingBox() Calculate the bounding box for the blocks on the workspace. Coordinate system: workspace coordinates.
getBubbleCanvas() Get the SVG element that forms the bubble surface.
getButtonCallback(key) Get the callback function associated with a given key, for clicks on buttons and labels in the flyout.
getCanvas() Get the SVG element that forms the drawing surface.
getComponentManager() Gets the component manager for this workspace.
getCursor() The cursor for this workspace.
getDragTarget(e) Returns the drag target the pointer event is over.
getFlyout(opt_own) Getter for the flyout associated with this workspace. This flyout may be owned by either the toolbox or the workspace, depending on toolbox configuration. It will be null if there is no flyout.
getGrid() Get the grid object for this workspace, or null if there is none.
getInverseScreenCTM() Getter for the inverted screen CTM.
getMarkerManager() Get the marker manager for this workspace.
getMetricsManager() Gets the metrics manager for this workspace.
getParentSvg() Get the SVG element that contains this workspace. Note: We assume this is only called after the workspace has been injected into the DOM.
getRenderer() Get the block renderer attached to this workspace.
getRootWorkspace()
getScale() Get the workspace's zoom factor. If the workspace has a parent, we call into the parent to get the workspace scale.
getSvgGroup() Returns the SVG group for the workspace.
getTheme() Get the workspace theme object.
getToolbox() Getter for the toolbox associated with this workspace, if one exists.
getToolboxCategoryCallback(key) Get the callback function associated with a given key, for populating custom toolbox categories in this workspace.
getTopBlocks(ordered) Finds the top-level blocks and returns them. Blocks are optionally sorted by position; top to bottom (with slight LTR or RTL bias).
getTopBoundedElements() Finds the top-level bounded elements and returns them.
getWidth() Returns the horizontal offset of the workspace. Intended for LTR/RTL compatibility in XML.
hideChaff(onlyClosePopups) Close tooltips, context menus, dropdown selections, etc.
hideComponents(onlyClosePopups) Hide any autohideable components (like flyout, trashcan, and any user-registered components).
highlightBlock(id, opt_state) Highlight or unhighlight a block in the workspace. Block highlighting is often used to visually mark blocks currently being executed.
isDraggable() Is this workspace draggable?
isDragging() Is the user currently dragging a block or scrolling the flyout/workspace?
isMovable()

Is this workspace movable?

This means the user can reposition the X Y coordinates of the workspace through input. This can be through scrollbars, scroll wheel, dragging, or through zooming with the scroll wheel or pinch (since the zoom is centered on the mouse position). This does not include zooming with the zoom controls since the X Y coordinates are decided programmatically.

isMovableHorizontally() Is this workspace movable horizontally?
isMovableVertically() Is this workspace movable vertically?
isVisible() Getter for isVisible
markFocused() Mark this workspace as the currently focused main workspace.
moveDrag(e) Track a drag of an object on this workspace.
newBlock(prototypeName, opt_id) Obtain a newly created block.
paste(state) Pastes the provided block or workspace comment onto the workspace. Does not check whether there is remaining capacity for the object, that should be done before calling this method.
recordDragTargets() Make a list of all the delete areas for this workspace.
refreshTheme() Refresh all blocks on the workspace after a theme update.
registerButtonCallback(key, func) Register a callback function associated with a given key, for clicks on buttons and labels in the flyout. For instance, a button specified by the XML should be matched by a call to registerButtonCallback("CREATE_VARIABLE", yourCallbackFunction).
registerToolboxCategoryCallback(key, func) Register a callback function associated with a given key, for populating custom toolbox categories in this workspace. See the variable and procedure categories as an example.
removeButtonCallback(key) Remove a callback for a click on a button in the flyout.
removeToolboxCategoryCallback(key) Remove a callback for a click on a custom category's name in the toolbox.
removeTopBlock(block) Removes a block from the list of top blocks.
removeTopBoundedElement(element) Removes a bounded element from the list of top bounded elements.
removeTopComment(comment) Removes a comment from the list of top comments.
renameVariableById(id, newName) Rename a variable by updating its name in the variable map. Update the flyout to show the renamed variable immediately.
render() Render all blocks in workspace.
resize() Resize and reposition all of the workspace chrome (toolbox, trash, scrollbars etc.) This should be called when something changes that requires recalculating dimensions and positions of the trash, zoom, toolbox, etc. (e.g. window resize).
scrollCenter() Center the workspace.
setResizeHandlerWrapper(handler) Save resize handler data so we can delete it later in dispose.
setResizesEnabled(enabled) Update whether this workspace has resizes enabled. If enabled, workspace will resize when appropriate. If disabled, workspace will not resize until re-enabled. Use to avoid resizing during a batch operation, for performance.
setScale(newScale) Set the workspace's zoom factor.
setTheme(theme) Set the workspace theme object. If no theme is passed, default to the Classic theme.
setVisible(isVisible) Toggles the visibility of the workspace. Currently only intended for main workspace.
startDrag(e, xy) Start tracking a drag of an object on this workspace.
translate(x, y) Translate this workspace to new coordinates.
updateInverseScreenCTM() Mark the inverse screen CTM as dirty.
updateToolbox(toolboxDef) Modify the block tree on the existing toolbox.
zoom(x, y, amount) Zooms the workspace in or out relative to/centered on the given (x, y) coordinate.
zoomCenter(type) Zooming the blocks centered in the center of view with zooming in or out.
zoomToFit() Zoom the blocks to fit in the workspace if possible.