Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions packages/blockly/core/field.ts
Original file line number Diff line number Diff line change
Expand Up @@ -436,15 +436,19 @@ export abstract class Field<T = any>
/**
* Defines whether this field should take up the full block or not.
*
* Be cautious when overriding this function. It may not work as you expect /
* intend because the behavior was kind of hacked in. If you are thinking
* about overriding this function, post on the forum with your intended
* behavior to see if there's another approach.
* This is typically only done for certain kinds of fields and in certain
* renderers. You should only override this if you're sure your field will
* render correctly in zelos and other renderers that support full-block
* fields.
*
* @internal
* Blocks that contain only a single field that is a full-block-field
* have a special appearance in some renderers and their behavior is
* unique, because we pretend that the field is a whole block in some cases.
* This is hacky and you should use caution when attempting to do anything
* with this method.
*/
isFullBlockField(): boolean {
return !this.borderRect_;
return false;
}

/**
Expand Down Expand Up @@ -923,7 +927,7 @@ export abstract class Field<T = any>
const xOffset =
margin !== undefined
? margin
: !this.isFullBlockField()
: this.borderRect_
? this.getConstants()!.FIELD_BORDER_RECT_X_PADDING
: 0;
let totalWidth = xOffset * 2;
Expand All @@ -934,7 +938,7 @@ export abstract class Field<T = any>
contentWidth = dom.getTextWidth(this.textElement_);
totalWidth += contentWidth;
}
if (!this.isFullBlockField()) {
if (this.borderRect_) {
totalHeight = Math.max(totalHeight, constants!.FIELD_BORDER_RECT_HEIGHT);
}

Expand Down Expand Up @@ -1031,7 +1035,7 @@ export abstract class Field<T = any>
throw new UnattachedFieldError();
}

if (this.isFullBlockField()) {
if (!this.borderRect_) {
// Browsers are inconsistent in what they return for a bounding box.
// - Webkit / Blink: fill-box / object bounding box
// - Gecko: stroke-box
Expand All @@ -1049,7 +1053,7 @@ export abstract class Field<T = any>
xy.y -= 0.5 * scale;
}
} else {
const bBox = this.borderRect_!.getBoundingClientRect();
const bBox = this.borderRect_.getBoundingClientRect();
xy = style.getPageOffset(this.borderRect_!);
scaledWidth = bBox.width;
scaledHeight = bBox.height;
Expand Down
13 changes: 13 additions & 0 deletions packages/blockly/core/field_dropdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,19 @@ export class FieldDropdown extends Field<string> {
this.isInitialized = true;
}

/**
* This is hacky way of determining if a dropdown field is a full-block field or not.
* The constants that control the border rect are the same ones that determine how we
* render full-block dropdown fields.
*
* @returns true if this field should be treated as a full-block field
*/
override isFullBlockField(): boolean {
return (
this.shouldAddBorderRect_() && !!this.getSourceBlock()?.isSimpleReporter()
);
}

/**
* Whether or not the dropdown should add a border rect.
*
Expand Down
13 changes: 10 additions & 3 deletions packages/blockly/core/field_input.ts
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,15 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
override initView() {
const block = this.getSourceBlock();
if (!block) throw new UnattachedFieldError();
super.initView();

if (!this.isFullBlockField()) {
// full-block fields don't get the border-rect element
this.createBorderRect_();
}
this.createTextElement_();
if (this.fieldGroup_) {
dom.addClass(this.fieldGroup_, 'blocklyField');
}

if (this.isFullBlockField()) {
this.clickTarget_ = (this.sourceBlock_ as BlockSvg).getSvgRoot();
Expand Down Expand Up @@ -254,10 +262,9 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
if (!this.fieldGroup_) return;

if (!this.isFullBlockField() && this.borderRect_) {
this.borderRect_!.style.display = 'block';
this.borderRect_.style.display = 'block';
this.borderRect_.setAttribute('stroke', block.getColourTertiary());
} else {
this.borderRect_!.style.display = 'none';
// In general, do *not* let fields control the color of blocks. Having the
// field control the color is unexpected, and could have performance
// impacts.
Expand Down
Loading