diff --git a/core/bubbles/bubble.ts b/core/bubbles/bubble.ts index 4bea9d863b7..51b71d4ec6b 100644 --- a/core/bubbles/bubble.ts +++ b/core/bubbles/bubble.ts @@ -90,7 +90,11 @@ export abstract class Bubble implements IBubble { protected anchor: Coordinate, protected ownerRect?: Rect, ) { - this.svgRoot = dom.createSvgElement(Svg.G, {}, workspace.getBubbleCanvas()); + this.svgRoot = dom.createSvgElement( + Svg.G, + {'class': 'blocklyBubble'}, + workspace.getBubbleCanvas(), + ); const embossGroup = dom.createSvgElement( Svg.G, { @@ -100,7 +104,11 @@ export abstract class Bubble implements IBubble { }, this.svgRoot, ); - this.tail = dom.createSvgElement(Svg.PATH, {}, embossGroup); + this.tail = dom.createSvgElement( + Svg.PATH, + {'class': 'blocklyBubbleTail'}, + embossGroup, + ); this.background = dom.createSvgElement( Svg.RECT, { diff --git a/core/bubbles/textinput_bubble.ts b/core/bubbles/textinput_bubble.ts index 081f86097b6..7a8a44bdf5a 100644 --- a/core/bubbles/textinput_bubble.ts +++ b/core/bubbles/textinput_bubble.ts @@ -75,10 +75,11 @@ export class TextInputBubble extends Bubble { protected ownerRect?: Rect, ) { super(workspace, anchor, ownerRect); + dom.addClass(this.svgRoot, 'blocklyTextInputBubble'); ({inputRoot: this.inputRoot, textArea: this.textArea} = this.createEditor( this.contentContainer, )); - this.resizeGroup = this.createResizeHandle(this.svgRoot); + this.resizeGroup = this.createResizeHandle(this.svgRoot, workspace); this.setSize(this.DEFAULT_SIZE, true); } @@ -126,7 +127,7 @@ export class TextInputBubble extends Bubble { dom.HTML_NS, 'textarea', ) as HTMLTextAreaElement; - textArea.className = 'blocklyCommentTextarea'; + textArea.className = 'blocklyTextarea blocklyText'; textArea.setAttribute('dir', this.workspace.RTL ? 'RTL' : 'LTR'); body.appendChild(textArea); @@ -158,51 +159,27 @@ export class TextInputBubble extends Bubble { } /** Creates the resize handler elements and binds events to them. */ - private createResizeHandle(container: SVGGElement): SVGGElement { - const resizeGroup = dom.createSvgElement( - Svg.G, + private createResizeHandle( + container: SVGGElement, + workspace: WorkspaceSvg, + ): SVGGElement { + const resizeHandle = dom.createSvgElement( + Svg.IMAGE, { - 'class': this.workspace.RTL ? 'blocklyResizeSW' : 'blocklyResizeSE', + 'class': 'blocklyResizeHandle', + 'href': `${workspace.options.pathToMedia}resize-handle.svg`, }, container, ); - const size = 2 * Bubble.BORDER_WIDTH; - dom.createSvgElement( - Svg.POLYGON, - {'points': `0,${size} ${size},${size} ${size},0`}, - resizeGroup, - ); - dom.createSvgElement( - Svg.LINE, - { - 'class': 'blocklyResizeLine', - 'x1': size / 3, - 'y1': size - 1, - 'x2': size - 1, - 'y2': size / 3, - }, - resizeGroup, - ); - dom.createSvgElement( - Svg.LINE, - { - 'class': 'blocklyResizeLine', - 'x1': (size * 2) / 3, - 'y1': size - 1, - 'x2': size - 1, - 'y2': (size * 2) / 3, - }, - resizeGroup, - ); browserEvents.conditionalBind( - resizeGroup, + resizeHandle, 'pointerdown', this, this.onResizePointerDown, ); - return resizeGroup; + return resizeHandle; } /**