diff --git a/pxtblocks/plugins/comments/blockComment.ts b/pxtblocks/plugins/comments/blockComment.ts index 457c40e8861..9792a02cb4d 100644 --- a/pxtblocks/plugins/comments/blockComment.ts +++ b/pxtblocks/plugins/comments/blockComment.ts @@ -36,8 +36,6 @@ export class CommentIcon extends Blockly.icons.Icon { protected xOffsetFieldName = COMMENT_OFFSET_X_FIELD_NAME; protected yOffsetFieldName = COMMENT_OFFSET_Y_FIELD_NAME; - protected bubbleClasses: string[] = []; - protected bubbleHeaderText: string = undefined; /** The bubble used to show editable text to the user. */ protected textInputBubble: TextInputBubble | null = null; @@ -321,20 +319,24 @@ export class CommentIcon extends Blockly.icons.Icon { } } + // Function to allow subclasses to override the creation of the text input bubble + protected createTextInputBubble(readOnly: boolean): TextInputBubble { + const tib = new TextInputBubble( + this.sourceBlock.workspace as Blockly.WorkspaceSvg, + this.getAnchorLocation(), + this.getBubbleOwnerRect(), + readOnly + ); + return tib; + } + /** * Shows the editable text bubble for this comment, and adds change listeners * to update the state of this icon in response to changes in the bubble. */ protected showEditableBubble() { const savedPosition = this.getSavedOffsetData(); - this.textInputBubble = new TextInputBubble( - this.sourceBlock.workspace as Blockly.WorkspaceSvg, - this.getAnchorLocation(), - this.getBubbleOwnerRect(), - false, - this.bubbleClasses, - this.bubbleHeaderText, - ); + this.textInputBubble = this.createTextInputBubble(false); this.textInputBubble.setText(this.getText()); this.textInputBubble.setSize(this.bubbleSize, true); this.textInputBubble.addTextChangeListener(() => this.onTextChange()); @@ -357,14 +359,7 @@ export class CommentIcon extends Blockly.icons.Icon { /** Shows the non editable text bubble for this comment. */ protected showNonEditableBubble() { const savedPosition = this.getSavedOffsetData(); - this.textInputBubble = new TextInputBubble( - this.sourceBlock.workspace as Blockly.WorkspaceSvg, - this.getAnchorLocation(), - this.getBubbleOwnerRect(), - true, - this.bubbleClasses, - this.bubbleHeaderText, - ); + this.textInputBubble = this.createTextInputBubble(true); this.textInputBubble.setText(this.getText()); this.textInputBubble.setSize(this.bubbleSize, true); this.textInputBubble.setCollapseHandler(() => { @@ -385,7 +380,7 @@ export class CommentIcon extends Blockly.icons.Icon { * @returns the location the bubble should be anchored to. * I.E. the middle of this icon. */ - private getAnchorLocation(): Blockly.utils.Coordinate { + protected getAnchorLocation(): Blockly.utils.Coordinate { const midIcon = SIZE / 2; return Blockly.utils.Coordinate.sum( this.workspaceLocation, @@ -397,7 +392,7 @@ export class CommentIcon extends Blockly.icons.Icon { * @returns the rect the bubble should avoid overlapping. * I.E. the block that owns this icon. */ - private getBubbleOwnerRect(): Blockly.utils.Rect { + protected getBubbleOwnerRect(): Blockly.utils.Rect { const bbox = (this.sourceBlock as Blockly.BlockSvg).getSvgRoot().getBBox(); return new Blockly.utils.Rect(bbox.y, bbox.y + bbox.height, bbox.x, bbox.x + bbox.width); } diff --git a/pxtblocks/plugins/comments/reviewCommentIcon.ts b/pxtblocks/plugins/comments/reviewCommentIcon.ts index 010fdf51f2d..022ed25ede0 100644 --- a/pxtblocks/plugins/comments/reviewCommentIcon.ts +++ b/pxtblocks/plugins/comments/reviewCommentIcon.ts @@ -3,6 +3,7 @@ import * as Blockly from "blockly"; import { CommentIcon } from "./blockComment"; import { deleteBlockDataForField, setBlockDataForField } from "../../fields"; import { getBlockDataForField } from "../../fields/field_utils"; +import { TextInputBubble } from "./textinput_bubble"; const eventUtils = Blockly.Events; @@ -37,8 +38,6 @@ export class ReviewCommentIcon extends CommentIcon { protected weight = 1; protected xOffsetFieldName = REVIEW_COMMENT_OFFSET_X_FIELD_NAME; protected yOffsetFieldName = REVIEW_COMMENT_OFFSET_Y_FIELD_NAME; - protected bubbleClasses = ["reviewCommentBubble"]; - protected bubbleHeaderText = lf("Feedback"); constructor(protected readonly sourceBlock: Blockly.Block) { super(sourceBlock); @@ -94,6 +93,19 @@ export class ReviewCommentIcon extends CommentIcon { this.textInputBubble?.setColour(colour, borderColour); } + // Function to allow subclasses to override the creation of the text input bubble + override createTextInputBubble(readOnly: boolean): TextInputBubble { + const tib = new TextInputBubble( + this.sourceBlock.workspace as Blockly.WorkspaceSvg, + this.getAnchorLocation(), + this.getBubbleOwnerRect(), + false, // Ignore readonly flag. TODO thsparks, use readOnly || pxt.shell.isReviewMode() + ["reviewCommentBubble"], + lf("Feedback"), + ); + return tib; + } + protected override showEditableBubble(): void { super.showEditableBubble();