pxt-core

import * as Blockly from "blockly"; /** * The abstract pop-up bubble class. This creates a UI that looks like a speech * bubble, where it has a "tail" that points to the block, and a "head" that * displays arbitrary svg elements. */ export declare abstract class Bubble implements Blockly.IDeletable, Blockly.IBubble, Blockly.ISelectable { readonly workspace: Blockly.WorkspaceSvg; protected anchor: Blockly.utils.Coordinate; protected ownerRect?: Blockly.utils.Rect; /** The width of the border around the bubble. */ static readonly BORDER_WIDTH = 0; /** Double the width of the border around the bubble. */ static readonly DOUBLE_BORDER: number; /** The minimum size the bubble can have. */ static readonly MIN_SIZE: number; /** Distance between arrow point and anchor point. */ static readonly ANCHOR_RADIUS = 8; id: string; /** The SVG group containing all parts of the bubble. */ protected svgRoot: SVGGElement; /** The SVG path for the arrow from the anchor to the bubble. */ private tail; /** The SVG background rect for the main body of the bubble. */ private background; /** The SVG group containing the contents of the bubble. */ protected contentContainer: SVGGElement; /** * The size of the bubble (including background and contents but not tail). */ private size; /** The colour of the background of the bubble. */ private colour; /** True if the bubble has been disposed, false otherwise. */ disposed: boolean; /** The position of the top of the bubble relative to its anchor. */ private relativeTop; /** The position of the left of the bubble realtive to its anchor. */ private relativeLeft; private dragStrategy; private focusableElement; private topBar; protected deleteIcon: SVGImageElement; private collapseIcon; protected collapseHandler: () => void; private deleteHandler; private isDragDelete; /** * @param workspace The workspace this bubble belongs to. * @param anchor The anchor location of the thing this bubble is attached to. * The tail of the bubble will point to this location. * @param ownerRect An optional rect we don't want the bubble to overlap with * when automatically positioning. */ constructor(workspace: Blockly.WorkspaceSvg, anchor: Blockly.utils.Coordinate, ownerRect?: Blockly.utils.Rect, overriddenFocusableElement?: SVGElement | HTMLElement); /** Dispose of this bubble. */ dispose(): void; /** * Set the location the tail of this bubble points to. * * @param anchor The location the tail of this bubble points to. * @param relayout If true, reposition the bubble from scratch so that it is * optimally visible. If false, reposition it so it maintains the same * position relative to the anchor. */ setAnchorLocation(anchor: Blockly.utils.Coordinate, relayout?: boolean): void; /** Sets the position of this bubble relative to its anchor. */ setPositionRelativeToAnchor(left: number, top: number): void; getPositionRelativeToAnchor(): Blockly.utils.Coordinate; /** @returns the size of this bubble. */ protected getSize(): Blockly.utils.Size; /** * Sets the size of this bubble, including the border. * * @param size Sets the size of this bubble, including the border. * @param relayout If true, reposition the bubble from scratch so that it is * optimally visible. If false, reposition it so it maintains the same * position relative to the anchor. */ protected setSize(size: Blockly.utils.Size, relayout?: boolean): void; /** Returns the colour of the background and tail of this bubble. */ protected getColour(): string; /** Sets the colour of the background and tail of this bubble. */ setColour(colour: string, borderColour?: string): void; /** Passes the pointer event off to the gesture system. */ private onMouseDown; /** Positions the bubble relative to its anchor. Does not render its tail. */ protected positionRelativeToAnchor(): void; /** * Moves the bubble to the given coordinates. * * @internal */ moveTo(x: number, y: number): void; /** * Positions the bubble "optimally" so that the most of it is visible and * it does not overlap the rect (if provided). */ protected positionByRect(rect?: Blockly.utils.Rect): void; /** * Calculate the what percentage of the bubble overlaps with the visible * workspace (what percentage of the bubble is visible). * * @param relativeMin The position of the top-left corner of the bubble * relative to the anchor point. * @param viewMetrics The view metrics of the workspace the bubble will appear * in. * @returns The percentage of the bubble that is visible. */ private getOverlap; /** * Calculate what the optimal horizontal position of the top-left corner of * the bubble is (relative to the anchor point) so that the most area of the * bubble is shown. * * @param viewMetrics The view metrics of the workspace the bubble will appear * in. * @returns The optimal horizontal position of the top-left corner of the * bubble. */ private getOptimalRelativeLeft; /** * Calculate what the optimal vertical position of the top-left corner of * the bubble is (relative to the anchor point) so that the most area of the * bubble is shown. * * @param viewMetrics The view metrics of the workspace the bubble will appear * in. * @returns The optimal vertical position of the top-left corner of the * bubble. */ private getOptimalRelativeTop; /** * @returns a rect defining the bounds of the workspace's view in workspace * coordinates. */ private getWorkspaceViewRect; /** @returns the scrollbar thickness in workspace units. */ private getScrollbarThickness; /** Draws the tail of the bubble. */ private renderTail; /** * Move this bubble to the front of the visible workspace. * * @returns Whether or not the bubble has been moved. * @internal */ bringToFront(): boolean; /** @internal */ getRelativeToSurfaceXY(): Blockly.utils.Coordinate; /** @internal */ getSvgRoot(): SVGElement; /** * Move this bubble during a drag. * * @param newLoc The location to translate to, in workspace coordinates. * @internal */ moveDuringDrag(newLoc: Blockly.utils.Coordinate): void; setDragging(_start: boolean): void; /** @internal */ setDeleteStyle(wouldDelete: boolean): void; /** @internal */ isDeletable(): boolean; /** @internal */ showContextMenu(_e: Event): void; /** Returns whether this bubble is movable or not. */ isMovable(): boolean; /** Starts a drag on the bubble. */ startDrag(): void; /** Drags the bubble to the given location. */ drag(newLoc: Blockly.utils.Coordinate): void; /** Ends the drag on the bubble. */ endDrag(): void; /** Moves the bubble back to where it was at the start of a drag. */ revertDrag(): void; select(): void; unselect(): void; /** See IFocusableNode.getFocusableElement. */ getFocusableElement(): HTMLElement | SVGElement; /** See IFocusableNode.getFocusableTree. */ getFocusableTree(): Blockly.IFocusableTree; /** See IFocusableNode.onNodeFocus. */ onNodeFocus(): void; /** See IFocusableNode.onNodeBlur. */ onNodeBlur(): void; /** See IFocusableNode.canBeFocused. */ canBeFocused(): boolean; contentTop(): number; setDeleteHandler(handler: () => void): void; setCollapseHandler(handler: () => void): void; private onDeleteDown; private onCollapseDown; /** * Updates the position of the delete icon elements to reflect the new size. */ private updateDeleteIconPosition; /** * Updates the position of the foldout icon elements to reflect the new size. */ private updateFoldoutIconPosition; /** Calculates the margin that should exist around the delete icon. */ private calcDeleteMargin; /** Calculates the margin that should exist around the foldout icon. */ private calcFoldoutMargin; }