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 IContextMenu, IFocusableNode, IFocusableTree
Extends: Workspace
Implements: IContextMenu, IFocusableNode, IFocusableTree
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. | |
| keyboardMoveInProgress | boolean | True iff a keyboard-initiated move ("drag") is in progress. | |
| 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 |
|---|---|---|
| addClass(className) | Adds a CSS class to the workspace. | |
| 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. | |
| canBeFocused() | See IFocusableNode.canBeFocused. | |
| 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 such that none overlap. | |
| clear() | Dispose of all blocks in workspace, with an optimization to prevent resizes. | |
| copyOptionsForFlyout() | Creates a new set of options from this workspace's options with just the values that are relevant to a flyout. | |
| createDom(opt_backgroundClass, injectionDiv) | Create the workspace DOM elements. | |
| dispose() | Dispose of this workspace. Unlink from all DOM elements to prevent memory leaks. | |
| getAbsoluteScale() | Returns the absolute scale of the workspace. Workspace scaling is multiplicative; if a workspace B (e.g. a mutator editor) with scale Y is nested within a root workspace A with scale X, workspace B's effective scale is X * Y, because, as a child of A, it is already transformed by A's scaling factor, and then further transforms itself by its own scaling factor. Normally this Just Works, but for global elements (e.g. field editors) that are visually associated with a particular workspace but live at the top level of the DOM rather than being a child of their associated workspace, the absolute/effective scale may be needed to render appropriately. |
|
| 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. | |
| getCommentById(id) | Returns the workspace comment with the given ID, if any. | |
| 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. | |
| getFocusableElement() | See IFocusableNode.getFocusableElement. | |
| getFocusableTree() | See IFocusableNode.getFocusableTree. | |
| 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. | |
| getNavigator() | Returns an object responsible for coordinating movement of focus between items on this workspace in response to keyboard navigation commands. | |
| getNestedTrees() | See IFocusableTree.getNestedTrees. | |
| 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. | |
| getRestoredFocusableNode(previousNode) | See IFocusableTree.getRestoredFocusableNode. | |
| getRootFocusableNode() | See IFocusableTree.getRootFocusableNode. | |
| getRootWorkspace() | ||
| getScale() | Get the workspace's zoom factor. | |
| 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(ordered) | Finds the top-level bounded elements and returns them. | |
| getTopComments(ordered) | Returns a list of comments on this workspace. | |
| 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() | Returns true iff the user is currently engaged in a drag gesture, or if a keyboard-initated move is in progress. Dragging gestures normally entail moving a block or other item on the workspace, or scrolling the flyout/workspace. Keyboard-initated movements are implemnted using the dragging infrastructure and are intended to emulate (a subset of) drag gestures and so should typically be treated as if they were a gesture-based drag. |
|
| 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 | |
| lookUpFocusableNode(id) | See IFocusableTree.lookUpFocusableNode. | |
| 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. | |
| newComment(id) | Obtain a newly created comment. | |
| onNodeBlur() | See IFocusableNode.onNodeBlur. | |
| onNodeFocus() | See IFocusableNode.onNodeFocus. | |
| onTreeBlur(nextTree) | See IFocusableTree.onTreeBlur. | |
| onTreeFocus(_node, _previousTree) | See IFocusableTree.onTreeFocus. | |
| 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. | |
| removeClass(className) | Removes a CSS class from the workspace. | |
| 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. | |
| 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). | |
| scroll(x, y) | Scroll the workspace to a specified offset (in pixels), keeping in the workspace bounds. See comment on workspaceSvg.scrollX for more detail on the meaning of these values. | |
| scrollCenter() | Center the workspace. | |
| setIsReadOnly(readOnly) | ||
| setNavigator(newNavigator) | Sets the Navigator instance used by this 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. |