CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-10 02:17:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove underscores from private properties and methods for flyout (#6960)

Browse Source 
* chore: remove underscores in flyout files

* chore: remove underscores in flyout_button
This commit is contained in:
Rachel Fenichel
2023-04-07 15:40:56 -07:00
committed by GitHub
parent 8378eddd17
commit 48bdeb3bdb
5 changed files with 144 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
core/flyout_base.ts
View File

@@ -137,33 +137,36 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* Function that will be registered as a change listener on the workspace
* to reflow when blocks in the flyout workspace change.
*/
private reflowWrapper_: Function|null = null;
private reflowWrapper: Function|null = null;
/**
* Function that disables blocks in the flyout based on max block counts
* allowed in the target workspace. Registered as a change listener on the
* target workspace.
*/
private filterWrapper_: Function|null = null;
private filterWrapper: Function|null = null;
/**
* List of background mats that lurk behind each block to catch clicks
* landing in the blocks' lakes and bays.
*/
private mats_: SVGElement[] = [];
private mats: SVGElement[] = [];
/**
* List of visible buttons.
*/
protected buttons_: FlyoutButton[] = [];
/**
* List of event listeners.
*/
private listeners_: browserEvents.Data[] = [];
private listeners: browserEvents.Data[] = [];
/**
* List of blocks that should always be disabled.
*/
private permanentlyDisabled_: Block[] = [];
private permanentlyDisabled: Block[] = [];
protected readonly tabWidth_: number;
/**
@@ -172,10 +175,12 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @internal
*/
targetWorkspace!: WorkspaceSvg;
/**
* A list of blocks that can be reused.
*/
private recycledBlocks_: BlockSvg[] = [];
private recycledBlocks: BlockSvg[] = [];
/**
* Does the flyout automatically close when a block is created?
*/
@@ -189,7 +194,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
/**
* Whether the workspace containing this flyout is visible.
*/
private containerVisible_ = true;
private containerVisible = true;
protected rectMap_: WeakMap<BlockSvg, SVGElement>;
/**
@@ -361,14 +366,14 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
this.boundEvents.push(browserEvents.conditionalBind(
(this.svgGroup_ as SVGGElement), 'wheel', this, this.wheel_));
if (!this.autoClose) {
this.filterWrapper_ = this.filterForCapacity_.bind(this);
this.targetWorkspace.addChangeListener(this.filterWrapper_);
this.filterWrapper = this.filterForCapacity.bind(this);
this.targetWorkspace.addChangeListener(this.filterWrapper);
}
// Dragging the flyout up and down.
this.boundEvents.push(browserEvents.conditionalBind(
(this.svgBackground_ as SVGPathElement), 'pointerdown', this,
this.onMouseDown_));
this.onMouseDown));
// A flyout connected to a workspace doesn't have its own current gesture.
this.workspace_.getGesture =
@@ -402,9 +407,8 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
browserEvents.unbind(event);
}
this.boundEvents.length = 0;
if (this.filterWrapper_) {
this.targetWorkspace.removeChangeListener(this.filterWrapper_);
this.filterWrapper_ = null;
if (this.filterWrapper) {
this.targetWorkspace.removeChangeListener(this.filterWrapper);
}
if (this.workspace_) {
this.workspace_.getThemeManager().unsubscribe(this.svgBackground_!);
@@ -412,9 +416,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
}
if (this.svgGroup_) {
dom.removeNode(this.svgGroup_);
this.svgGroup_ = null;
}
this.svgBackground_ = null;
}
/**
@@ -480,7 +482,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
// auto-close flyouts need to have their drag target updated.
this.workspace_.recordDragTargets();
}
this.updateDisplay_();
this.updateDisplay();
}
}
@@ -490,10 +492,10 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @param visible Whether the container is visible.
*/
setContainerVisible(visible: boolean) {
const visibilityChanged = visible !== this.containerVisible_;
this.containerVisible_ = visible;
const visibilityChanged = visible !== this.containerVisible;
this.containerVisible = visible;
if (visibilityChanged) {
this.updateDisplay_();
this.updateDisplay();
}
}
@@ -501,9 +503,9 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* Update the display property of the flyout based whether it thinks it should
* be visible and whether its containing workspace is visible.
*/
private updateDisplay_() {
private updateDisplay() {
let show = true;
if (!this.containerVisible_) {
if (!this.containerVisible) {
show = false;
} else {
show = this.isVisible();
@@ -562,13 +564,13 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
}
this.setVisible(false);
// Delete all the event listeners.
for (const listen of this.listeners_) {
for (const listen of this.listeners) {
browserEvents.unbind(listen);
}
this.listeners_.length = 0;
if (this.reflowWrapper_) {
this.workspace_.removeChangeListener(this.reflowWrapper_);
this.reflowWrapper_ = null;
this.listeners.length = 0;
if (this.reflowWrapper) {
this.workspace_.removeChangeListener(this.reflowWrapper);
this.reflowWrapper = null;
}
// Do NOT delete the blocks here. Wait until Flyout.show.
// https://neil.fraser.name/news/2014/08/09/
@@ -584,17 +586,17 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
show(flyoutDef: toolbox.FlyoutDefinition|string) {
this.workspace_.setResizesEnabled(false);
this.hide();
this.clearOldBlocks_();
this.clearOldBlocks();
// Handle dynamic categories, represented by a name instead of a list.
if (typeof flyoutDef === 'string') {
flyoutDef = this.getDynamicCategoryContents_(flyoutDef);
flyoutDef = this.getDynamicCategoryContents(flyoutDef);
}
this.setVisible(true);
// Parse the Array, Node or NodeList into a a list of flyout items.
const parsedContent = toolbox.convertFlyoutDefToJsonArray(flyoutDef);
const flyoutInfo = this.createFlyoutInfo_(parsedContent);
const flyoutInfo = this.createFlyoutInfo(parsedContent);
this.layout_(flyoutInfo.contents, flyoutInfo.gaps);
@@ -606,14 +608,14 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
this.workspace_.setResizesEnabled(true);
this.reflow();
this.filterForCapacity_();
this.filterForCapacity();
// Correctly position the flyout's scrollbar when it opens.
this.position();
this.reflowWrapper_ = this.reflow.bind(this);
this.workspace_.addChangeListener(this.reflowWrapper_);
this.emptyRecycledBlocks_();
this.reflowWrapper = this.reflow.bind(this);
this.workspace_.addChangeListener(this.reflowWrapper);
this.emptyRecycledBlocks();
}
/**
@@ -624,21 +626,21 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* of objects to show in the flyout.
* @returns The list of contents and gaps needed to lay out the flyout.
*/
private createFlyoutInfo_(parsedContent: toolbox.FlyoutItemInfoArray):
private createFlyoutInfo(parsedContent: toolbox.FlyoutItemInfoArray):
{contents: FlyoutItem[], gaps: number[]} {
const contents: FlyoutItem[] = [];
const gaps: number[] = [];
this.permanentlyDisabled_.length = 0;
this.permanentlyDisabled.length = 0;
const defaultGap = this.horizontalLayout ? this.GAP_X : this.GAP_Y;
for (const info of parsedContent) {
if ('custom' in info) {
const customInfo = (info as toolbox.DynamicCategoryInfo);
const categoryName = customInfo['custom'];
const flyoutDef = this.getDynamicCategoryContents_(categoryName);
const flyoutDef = this.getDynamicCategoryContents(categoryName);
const parsedDynamicContent =
toolbox.convertFlyoutDefToJsonArray(flyoutDef);
const {contents: dynamicContents, gaps: dynamicGaps} =
this.createFlyoutInfo_(parsedDynamicContent);
this.createFlyoutInfo(parsedDynamicContent);
contents.push(...dynamicContents);
gaps.push(...dynamicGaps);
}
@@ -646,27 +648,27 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
switch (info['kind'].toUpperCase()) {
case 'BLOCK': {
const blockInfo = (info as toolbox.BlockInfo);
const block = this.createFlyoutBlock_(blockInfo);
const block = this.createFlyoutBlock(blockInfo);
contents.push({type: FlyoutItemType.BLOCK, block: block});
this.addBlockGap_(blockInfo, gaps, defaultGap);
this.addBlockGap(blockInfo, gaps, defaultGap);
break;
}
case 'SEP': {
const sepInfo = (info as toolbox.SeparatorInfo);
this.addSeparatorGap_(sepInfo, gaps, defaultGap);
this.addSeparatorGap(sepInfo, gaps, defaultGap);
break;
}
case 'LABEL': {
const labelInfo = (info as toolbox.LabelInfo);
// A label is a button with different styling.
const label = this.createButton_(labelInfo, /** isLabel */ true);
const label = this.createButton(labelInfo, /** isLabel */ true);
contents.push({type: FlyoutItemType.BUTTON, button: label});
gaps.push(defaultGap);
break;
}
case 'BUTTON': {
const buttonInfo = (info as toolbox.ButtonInfo);
const button = this.createButton_(buttonInfo, /** isLabel */ false);
const button = this.createButton(buttonInfo, /** isLabel */ false);
contents.push({type: FlyoutItemType.BUTTON, button: button});
gaps.push(defaultGap);
break;
@@ -684,7 +686,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @returns The definition of the
* flyout in one of its many forms.
*/
private getDynamicCategoryContents_(categoryName: string):
private getDynamicCategoryContents(categoryName: string):
toolbox.FlyoutDefinition {
// Look up the correct category generation function and call that to get a
// valid XML list.
@@ -707,7 +709,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @returns The object used to display the button in the
* flyout.
*/
private createButton_(btnInfo: toolbox.ButtonOrLabelInfo, isLabel: boolean):
private createButton(btnInfo: toolbox.ButtonOrLabelInfo, isLabel: boolean):
FlyoutButton {
const curButton = new FlyoutButton(
this.workspace_, (this.targetWorkspace as WorkspaceSvg), btnInfo,
@@ -722,18 +724,18 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @param blockInfo The info of the block.
* @returns The block created from the blockInfo.
*/
private createFlyoutBlock_(blockInfo: toolbox.BlockInfo): BlockSvg {
private createFlyoutBlock(blockInfo: toolbox.BlockInfo): BlockSvg {
let block;
if (blockInfo['blockxml']) {
const xml = (typeof blockInfo['blockxml'] === 'string' ?
utilsXml.textToDom(blockInfo['blockxml']) :
blockInfo['blockxml']) as Element;
block = this.getRecycledBlock_(xml.getAttribute('type')!);
block = this.getRecycledBlock(xml.getAttribute('type')!);
if (!block) {
block = Xml.domToBlock(xml, this.workspace_);
}
} else {
block = this.getRecycledBlock_(blockInfo['type']!);
block = this.getRecycledBlock(blockInfo['type']!);
if (!block) {
if (blockInfo['enabled'] === undefined) {
blockInfo['enabled'] = blockInfo['disabled'] !== 'true' &&
@@ -746,7 +748,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
if (!block.isEnabled()) {
// Record blocks that were initially disabled.
// Do not enable these blocks as a result of capacity filtering.
this.permanentlyDisabled_.push(block);
this.permanentlyDisabled.push(block);
}
return (block as BlockSvg);
}
@@ -759,15 +761,15 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @returns The recycled block, or undefined if
* one could not be recycled.
*/
private getRecycledBlock_(blockType: string): BlockSvg|undefined {
private getRecycledBlock(blockType: string): BlockSvg|undefined {
let index = -1;
for (let i = 0; i < this.recycledBlocks_.length; i++) {
if (this.recycledBlocks_[i].type === blockType) {
for (let i = 0; i < this.recycledBlocks.length; i++) {
if (this.recycledBlocks[i].type === blockType) {
index = i;
break;
}
}
return index === -1 ? undefined : this.recycledBlocks_.splice(index, 1)[0];
return index === -1 ? undefined : this.recycledBlocks.splice(index, 1)[0];
}
/**
@@ -778,7 +780,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @param defaultGap The default gap between one element and the
* next.
*/
private addBlockGap_(
private addBlockGap(
blockInfo: toolbox.BlockInfo, gaps: number[], defaultGap: number) {
let gap;
if (blockInfo['gap']) {
@@ -801,7 +803,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @param defaultGap The default gap between the button and next
* element.
*/
private addSeparatorGap_(
private addSeparatorGap(
sepInfo: toolbox.SeparatorInfo, gaps: number[], defaultGap: number) {
// Change the gap between two toolbox elements.
// <sep gap="36"></sep>
@@ -819,25 +821,25 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
/**
* Delete blocks, mats and buttons from a previous showing of the flyout.
*/
private clearOldBlocks_() {
private clearOldBlocks() {
// Delete any blocks from a previous showing.
const oldBlocks = this.workspace_.getTopBlocks(false);
for (let i = 0, block; block = oldBlocks[i]; i++) {
if (this.blockIsRecyclable_(block)) {
this.recycleBlock_(block);
this.recycleBlock(block);
} else {
block.dispose(false, false);
}
}
// Delete any mats from a previous showing.
for (let j = 0; j < this.mats_.length; j++) {
const rect = this.mats_[j];
for (let j = 0; j < this.mats.length; j++) {
const rect = this.mats[j];
if (rect) {
Tooltip.unbindMouseEvents(rect);
dom.removeNode(rect);
}
}
this.mats_.length = 0;
this.mats.length = 0;
// Delete any buttons from a previous showing.
for (let i = 0, button; button = this.buttons_[i]; i++) {
button.dispose();
@@ -851,11 +853,11 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
/**
* Empties all of the recycled blocks, properly disposing of them.
*/
private emptyRecycledBlocks_() {
for (let i = 0; i < this.recycledBlocks_.length; i++) {
this.recycledBlocks_[i].dispose();
private emptyRecycledBlocks() {
for (let i = 0; i < this.recycledBlocks.length; i++) {
this.recycledBlocks[i].dispose();
}
this.recycledBlocks_ = [];
this.recycledBlocks = [];
}
/**
@@ -876,10 +878,10 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
*
* @param block The block to recycle.
*/
private recycleBlock_(block: BlockSvg) {
private recycleBlock(block: BlockSvg) {
const xy = block.getRelativeToSurfaceXY();
block.moveBy(-xy.x, -xy.y);
this.recycledBlocks_.push(block);
this.recycledBlocks.push(block);
}
/**
@@ -892,17 +894,17 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
*/
protected addBlockListeners_(
root: SVGElement, block: BlockSvg, rect: SVGElement) {
this.listeners_.push(browserEvents.conditionalBind(
root, 'pointerdown', null, this.blockMouseDown_(block)));
this.listeners_.push(browserEvents.conditionalBind(
rect, 'pointerdown', null, this.blockMouseDown_(block)));
this.listeners_.push(
this.listeners.push(browserEvents.conditionalBind(
root, 'pointerdown', null, this.blockMouseDown(block)));
this.listeners.push(browserEvents.conditionalBind(
rect, 'pointerdown', null, this.blockMouseDown(block)));
this.listeners.push(
browserEvents.bind(root, 'pointerenter', block, block.addSelect));
this.listeners_.push(
this.listeners.push(
browserEvents.bind(root, 'pointerleave', block, block.removeSelect));
this.listeners_.push(
this.listeners.push(
browserEvents.bind(rect, 'pointerenter', block, block.addSelect));
this.listeners_.push(
this.listeners.push(
browserEvents.bind(rect, 'pointerleave', block, block.removeSelect));
}
@@ -912,7 +914,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @param block The flyout block to copy.
* @returns Function to call when block is clicked.
*/
private blockMouseDown_(block: BlockSvg): Function {
private blockMouseDown(block: BlockSvg): Function {
return (e: PointerEvent) => {
const gesture = this.targetWorkspace.getGesture(e);
if (gesture) {
@@ -927,7 +929,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
*
* @param e Pointer down event.
*/
private onMouseDown_(e: PointerEvent) {
private onMouseDown(e: PointerEvent) {
const gesture = this.targetWorkspace.getGesture(e);
if (gesture) {
gesture.handleFlyoutStart(e, this);
@@ -961,7 +963,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
const variablesBeforeCreation = this.targetWorkspace.getAllVariables();
this.targetWorkspace.setResizesEnabled(false);
try {
newBlock = this.placeNewBlock_(originalBlock);
newBlock = this.placeNewBlock(originalBlock);
} finally {
eventUtils.enable();
}
@@ -988,7 +990,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
if (this.autoClose) {
this.hide();
} else {
this.filterForCapacity_();
this.filterForCapacity();
}
return newBlock;
}
@@ -1007,8 +1009,8 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
button.show();
// Clicking on a flyout button or label is a lot like clicking on the
// flyout background.
this.listeners_.push(browserEvents.conditionalBind(
buttonSvg, 'pointerdown', this, this.onMouseDown_));
this.listeners.push(browserEvents.conditionalBind(
buttonSvg, 'pointerdown', this, this.onMouseDown));
this.buttons_.push(button);
}
@@ -1044,7 +1046,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
this.workspace_.getCanvas().insertBefore(rect, block.getSvgRoot());
this.rectMap_.set(block, rect);
this.mats_[index] = rect;
this.mats[index] = rect;
return rect;
}
@@ -1072,10 +1074,10 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* on the workspace, an "a + b" block that has two shadow blocks would be
* disabled.
*/
private filterForCapacity_() {
private filterForCapacity() {
const blocks = this.workspace_.getTopBlocks(false);
for (let i = 0, block; block = blocks[i]; i++) {
if (this.permanentlyDisabled_.indexOf(block) === -1) {
if (this.permanentlyDisabled.indexOf(block) === -1) {
const enable = this.targetWorkspace.isCapacityAvailable(
common.getBlockTypeCounts(block));
while (block) {
@@ -1090,12 +1092,12 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* Reflow blocks and their mats.
*/
reflow() {
if (this.reflowWrapper_) {
this.workspace_.removeChangeListener(this.reflowWrapper_);
if (this.reflowWrapper) {
this.workspace_.removeChangeListener(this.reflowWrapper);
}
this.reflowInternal_();
if (this.reflowWrapper_) {
this.workspace_.addChangeListener(this.reflowWrapper_);
if (this.reflowWrapper) {
this.workspace_.addChangeListener(this.reflowWrapper);
}
}
@@ -1115,7 +1117,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @param oldBlock The flyout block to copy.
* @returns The new block in the main workspace.
*/
private placeNewBlock_(oldBlock: BlockSvg): BlockSvg {
private placeNewBlock(oldBlock: BlockSvg): BlockSvg {
const targetWorkspace = this.targetWorkspace;
const svgRootOld = oldBlock.getSvgRoot();
if (!svgRootOld) {
@@ -1128,7 +1130,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
targetWorkspace.setResizesEnabled(false);
const block = (blocks.append(json, targetWorkspace) as BlockSvg);
this.positionNewBlock_(oldBlock, block);
this.positionNewBlock(oldBlock, block);
return block;
}
@@ -1139,7 +1141,7 @@ export abstract class Flyout extends DeleteArea implements IFlyout {
* @param oldBlock The flyout block being copied.
* @param block The block to posiiton.
*/
private positionNewBlock_(oldBlock: BlockSvg, block: BlockSvg) {
private positionNewBlock(oldBlock: BlockSvg, block: BlockSvg) {
const targetWorkspace = this.targetWorkspace;
// The offset in pixels between the main workspace's origin and the upper

96
core/flyout_button.ts
View File

@@ -36,13 +36,13 @@ export class FlyoutButton {
/** The radius of the flyout button's borders. */
static BORDER_RADIUS = 4;
private readonly text_: string;
private readonly position_: Coordinate;
private readonly callbackKey_: string;
private readonly cssClass_: string|null;
private readonly text: string;
private readonly position: Coordinate;
private readonly callbackKey: string;
private readonly cssClass: string|null;
/** Mouse up event data. */
private onMouseUpWrapper_: browserEvents.Data|null = null;
private onMouseUpWrapper: browserEvents.Data|null = null;
info: toolbox.ButtonOrLabelInfo;
/** The width of the button's rect. */
@@ -52,10 +52,10 @@ export class FlyoutButton {
height = 0;
/** The root SVG group for the button or label. */
private svgGroup_: SVGGElement|null = null;
private svgGroup: SVGGElement|null = null;
/** The SVG element with the text of the label or button. */
private svgText_: SVGTextElement|null = null;
private svgText: SVGTextElement|null = null;
/**
* @param workspace The workspace in which to place this button.
@@ -68,19 +68,19 @@ export class FlyoutButton {
private readonly workspace: WorkspaceSvg,
private readonly targetWorkspace: WorkspaceSvg,
json: toolbox.ButtonOrLabelInfo, private readonly isLabel_: boolean) {
this.text_ = json['text'];
this.text = json['text'];
this.position_ = new Coordinate(0, 0);
this.position = new Coordinate(0, 0);
/** The key to the function called when this button is clicked. */
this.callbackKey_ =
this.callbackKey =
(json as
AnyDuringMigration)['callbackKey'] || /* Check the lower case version
too to satisfy IE */
(json as AnyDuringMigration)['callbackkey'];
/** If specified, a CSS class to add to this button. */
this.cssClass_ = (json as AnyDuringMigration)['web-class'] || null;
this.cssClass = (json as AnyDuringMigration)['web-class'] || null;
/** The JSON specifying the label / button. */
this.info = json;
@@ -93,11 +93,11 @@ export class FlyoutButton {
*/
createDom(): SVGElement {
let cssClass = this.isLabel_ ? 'blocklyFlyoutLabel' : 'blocklyFlyoutButton';
if (this.cssClass_) {
cssClass += ' ' + this.cssClass_;
if (this.cssClass) {
cssClass += ' ' + this.cssClass;
}
this.svgGroup_ = dom.createSvgElement(
this.svgGroup = dom.createSvgElement(
Svg.G, {'class': cssClass}, this.workspace.getCanvas());
let shadow;
@@ -111,7 +111,7 @@ export class FlyoutButton {
'x': 1,
'y': 1,
},
this.svgGroup_!);
this.svgGroup!);
}
// Background rectangle.
const rect = dom.createSvgElement(
@@ -121,7 +121,7 @@ export class FlyoutButton {
'rx': FlyoutButton.BORDER_RADIUS,
'ry': FlyoutButton.BORDER_RADIUS,
},
this.svgGroup_!);
this.svgGroup!);
const svgText = dom.createSvgElement(
Svg.TEXT, {
@@ -130,17 +130,17 @@ export class FlyoutButton {
'y': 0,
'text-anchor': 'middle',
},
this.svgGroup_!);
let text = parsing.replaceMessageReferences(this.text_);
this.svgGroup!);
let text = parsing.replaceMessageReferences(this.text);
if (this.workspace.RTL) {
// Force text to be RTL by adding an RLM.
text += '\u200F';
}
svgText.textContent = text;
if (this.isLabel_) {
this.svgText_ = svgText;
this.svgText = svgText;
this.workspace.getThemeManager().subscribe(
this.svgText_, 'flyoutForegroundColour', 'fill');
this.svgText, 'flyoutForegroundColour', 'fill');
}
const fontSize = style.getComputedStyle(svgText, 'fontSize');
@@ -167,27 +167,26 @@ export class FlyoutButton {
String(
this.height / 2 - fontMetrics.height / 2 + fontMetrics.baseline));
this.updateTransform_();
this.updateTransform();
// AnyDuringMigration because: Argument of type 'SVGGElement | null' is not
// assignable to parameter of type 'EventTarget'.
this.onMouseUpWrapper_ = browserEvents.conditionalBind(
this.svgGroup_ as AnyDuringMigration, 'pointerup', this,
this.onMouseUp_);
return this.svgGroup_!;
this.onMouseUpWrapper = browserEvents.conditionalBind(
this.svgGroup as AnyDuringMigration, 'pointerup', this, this.onMouseUp);
return this.svgGroup!;
}
/** Correctly position the flyout button and make it visible. */
show() {
this.updateTransform_();
this.svgGroup_!.setAttribute('display', 'block');
this.updateTransform();
this.svgGroup!.setAttribute('display', 'block');
}
/** Update SVG attributes to match internal state. */
private updateTransform_() {
this.svgGroup_!.setAttribute(
private updateTransform() {
this.svgGroup!.setAttribute(
'transform',
'translate(' + this.position_.x + ',' + this.position_.y + ')');
'translate(' + this.position.x + ',' + this.position.y + ')');
}
/**
@@ -197,9 +196,9 @@ export class FlyoutButton {
* @param y The new y coordinate.
*/
moveTo(x: number, y: number) {
this.position_.x = x;
this.position_.y = y;
this.updateTransform_();
this.position.x = x;
this.position.y = y;
this.updateTransform();
}
/** @returns Whether or not the button is a label. */
@@ -214,12 +213,12 @@ export class FlyoutButton {
* @internal
*/
getPosition(): Coordinate {
return this.position_;
return this.position;
}
/** @returns Text of the button. */
getButtonText(): string {
return this.text_;
return this.text;
}
/**
@@ -233,14 +232,14 @@ export class FlyoutButton {
/** Dispose of this button. */
dispose() {
if (this.onMouseUpWrapper_) {
browserEvents.unbind(this.onMouseUpWrapper_);
if (this.onMouseUpWrapper) {
browserEvents.unbind(this.onMouseUpWrapper);
}
if (this.svgGroup_) {
dom.removeNode(this.svgGroup_);
if (this.svgGroup) {
dom.removeNode(this.svgGroup);
}
if (this.svgText_) {
this.workspace.getThemeManager().unsubscribe(this.svgText_);
if (this.svgText) {
this.workspace.getThemeManager().unsubscribe(this.svgText);
}
}
@@ -249,23 +248,22 @@ export class FlyoutButton {
*
* @param e Pointer up event.
*/
private onMouseUp_(e: PointerEvent) {
private onMouseUp(e: PointerEvent) {
const gesture = this.targetWorkspace.getGesture(e);
if (gesture) {
gesture.cancel();
}
if (this.isLabel_ && this.callbackKey_) {
if (this.isLabel_ && this.callbackKey) {
console.warn(
'Labels should not have callbacks. Label text: ' + this.text_);
'Labels should not have callbacks. Label text: ' + this.text);
} else if (
!this.isLabel_ &&
!(this.callbackKey_ &&
this.targetWorkspace.getButtonCallback(this.callbackKey_))) {
console.warn('Buttons should have callbacks. Button text: ' + this.text_);
!(this.callbackKey &&
this.targetWorkspace.getButtonCallback(this.callbackKey))) {
console.warn('Buttons should have callbacks. Button text: ' + this.text);
} else if (!this.isLabel_) {
const callback =
this.targetWorkspace.getButtonCallback(this.callbackKey_);
const callback = this.targetWorkspace.getButtonCallback(this.callbackKey);
if (callback) {
callback(this);
}

4
core/flyout_horizontal.ts
View File

@@ -134,7 +134,7 @@ export class HorizontalFlyout extends Flyout {
const edgeWidth = targetWorkspaceViewMetrics.width - 2 * this.CORNER_RADIUS;
const edgeHeight = this.height_ - this.CORNER_RADIUS;
this.setBackgroundPath_(edgeWidth, edgeHeight);
this.setBackgroundPath(edgeWidth, edgeHeight);
const x = this.getX();
const y = this.getY();
@@ -148,7 +148,7 @@ export class HorizontalFlyout extends Flyout {
* @param width The width of the flyout, not including the rounded corners.
* @param height The height of the flyout, not including rounded corners.
*/
private setBackgroundPath_(width: number, height: number) {
private setBackgroundPath(width: number, height: number) {
const atTop = this.toolboxPosition_ === toolbox.Position.TOP;
// Start at top left.
const path: (string|number)[] = ['M 0,' + (atTop ? 0 : this.CORNER_RADIUS)];

4
core/flyout_vertical.ts
View File

@@ -133,7 +133,7 @@ export class VerticalFlyout extends Flyout {
const edgeWidth = this.width_ - this.CORNER_RADIUS;
const edgeHeight =
targetWorkspaceViewMetrics.height - 2 * this.CORNER_RADIUS;
this.setBackgroundPath_(edgeWidth, edgeHeight);
this.setBackgroundPath(edgeWidth, edgeHeight);
const x = this.getX();
const y = this.getY();
@@ -147,7 +147,7 @@ export class VerticalFlyout extends Flyout {
* @param width The width of the flyout, not including the rounded corners.
* @param height The height of the flyout, not including rounded corners.
*/
private setBackgroundPath_(width: number, height: number) {
private setBackgroundPath(width: number, height: number) {
const atRight = this.toolboxPosition_ === toolbox.Position.RIGHT;
const totalWidth = width + this.CORNER_RADIUS;

4
tests/mocha/flyout_test.js
View File

@@ -241,10 +241,10 @@ suite('Flyout', function() {
});
});
suite('createFlyoutInfo_', function() {
suite('createFlyoutInfo', function() {
setup(function() {
this.flyout = this.workspace.getFlyout();
this.createFlyoutSpy = sinon.spy(this.flyout, 'createFlyoutInfo_');
this.createFlyoutSpy = sinon.spy(this.flyout, 'createFlyoutInfo');
});
function checkFlyoutInfo(flyoutSpy) {