chore: use prettier instead of clang-format (#7014)

* chore: add and configure prettier

* chore: remove clang-format

* chore: remove clang-format config

* chore: lint additional ts files

* chore: fix lint errors in blocks

* chore: add prettier-ignore where needed

* chore: ignore js blocks when formatting

* chore: fix playground html syntax

* chore: fix yaml spacing from merge

* chore: convert text blocks to use arrow functions

* chore: format everything with prettier

* chore: fix lint unused imports in blocks
This commit is contained in:
Maribeth Bottorff
2023-05-10 16:01:39 -07:00
committed by GitHub
parent af991f5e1b
commit 88ff901a72
425 changed files with 29170 additions and 21169 deletions

View File

@@ -21,7 +21,6 @@ import {Svg} from './utils/svg.js';
import * as svgMath from './utils/svg_math.js';
import type {WorkspaceSvg} from './workspace_svg.js';
/**
* A note on units: most of the numbers that are in CSS pixels are scaled if the
* scrollbar is in a mutator.
@@ -57,7 +56,7 @@ export class Scrollbar {
private readonly margin: number;
/** Previously recorded metrics from the workspace. */
private oldHostMetrics: Metrics|null = null;
private oldHostMetrics: Metrics | null = null;
/**
* The ratio of handle position offset to workspace content displacement.
@@ -144,10 +143,10 @@ export class Scrollbar {
onMouseDownHandleWrapper_: browserEvents.Data;
/** Handler for mouse move events during scrollbar drags. */
onMouseUpWrapper_: browserEvents.Data|null = null;
onMouseUpWrapper_: browserEvents.Data | null = null;
/** Handler for mouse up events to end scrollbar drags. */
onMouseMoveWrapper_: browserEvents.Data|null = null;
onMouseMoveWrapper_: browserEvents.Data | null = null;
/**
* @param workspace Workspace to bind the scrollbar to.
@@ -157,15 +156,21 @@ export class Scrollbar {
* @param opt_margin The margin to apply to this scrollbar.
*/
constructor(
private workspace: WorkspaceSvg, private readonly horizontal: boolean,
opt_pair?: boolean, opt_class?: string, opt_margin?: number) {
private workspace: WorkspaceSvg,
private readonly horizontal: boolean,
opt_pair?: boolean,
opt_class?: string,
opt_margin?: number
) {
this.pair = opt_pair || false;
this.margin = opt_margin !== undefined ? opt_margin :
Scrollbar.DEFAULT_SCROLLBAR_MARGIN;
this.margin =
opt_margin !== undefined
? opt_margin
: Scrollbar.DEFAULT_SCROLLBAR_MARGIN;
let className =
'blocklyScrollbar' + (this.horizontal ? 'Horizontal' : 'Vertical');
'blocklyScrollbar' + (this.horizontal ? 'Horizontal' : 'Vertical');
if (opt_class) {
className += ' ' + opt_class;
}
@@ -183,17 +188,24 @@ export class Scrollbar {
const group = dom.createSvgElement(Svg.G, {}, this.outerSvg);
this.svgBackground = dom.createSvgElement(
Svg.RECT, {'class': 'blocklyScrollbarBackground'}, group);
Svg.RECT,
{'class': 'blocklyScrollbarBackground'},
group
);
const radius = Math.floor((Scrollbar.scrollbarThickness - 5) / 2);
this.svgHandle = dom.createSvgElement(
Svg.RECT,
{'class': 'blocklyScrollbarHandle', 'rx': radius, 'ry': radius}, group);
Svg.RECT,
{'class': 'blocklyScrollbarHandle', 'rx': radius, 'ry': radius},
group
);
this.workspace.getThemeManager().subscribe(
this.svgHandle, 'scrollbarColour', 'fill');
this.workspace.getThemeManager().subscribe(
this.svgHandle, 'scrollbarOpacity', 'fill-opacity');
this.workspace
.getThemeManager()
.subscribe(this.svgHandle, 'scrollbarColour', 'fill');
this.workspace
.getThemeManager()
.subscribe(this.svgHandle, 'scrollbarOpacity', 'fill-opacity');
// Add everything to the DOM.
dom.insertAfter(this.outerSvg, this.workspace.getParentSvg());
@@ -209,9 +221,17 @@ export class Scrollbar {
}
this.onMouseDownBarWrapper_ = browserEvents.conditionalBind(
this.svgBackground, 'pointerdown', this, this.onMouseDownBar);
this.svgBackground,
'pointerdown',
this,
this.onMouseDownBar
);
this.onMouseDownHandleWrapper_ = browserEvents.conditionalBind(
this.svgHandle, 'pointerdown', this, this.onMouseDownHandle);
this.svgHandle,
'pointerdown',
this,
this.onMouseDownHandle
);
}
/**
@@ -272,7 +292,9 @@ export class Scrollbar {
private setHandleLength(newLength: number) {
this.handleLength = newLength;
this.svgHandle.setAttribute(
this.lengthAttribute_, String(this.handleLength));
this.lengthAttribute_,
String(this.handleLength)
);
}
/**
@@ -303,7 +325,9 @@ export class Scrollbar {
setHandlePosition(newPosition: number) {
this.handlePosition = newPosition;
this.svgHandle.setAttribute(
this.positionAttribute_, String(this.handlePosition));
this.positionAttribute_,
String(this.handlePosition)
);
}
/**
@@ -315,9 +339,13 @@ export class Scrollbar {
private setScrollbarLength(newSize: number) {
this.scrollbarLength = newSize;
this.outerSvg.setAttribute(
this.lengthAttribute_, String(this.scrollbarLength));
this.lengthAttribute_,
String(this.scrollbarLength)
);
this.svgBackground.setAttribute(
this.lengthAttribute_, String(this.scrollbarLength));
this.lengthAttribute_,
String(this.scrollbarLength)
);
}
/**
@@ -356,8 +384,10 @@ export class Scrollbar {
}
}
if (this.oldHostMetrics &&
Scrollbar.metricsAreEquivalent(hostMetrics, this.oldHostMetrics)) {
if (
this.oldHostMetrics &&
Scrollbar.metricsAreEquivalent(hostMetrics, this.oldHostMetrics)
) {
return;
}
@@ -385,10 +415,12 @@ export class Scrollbar {
if (!this.oldHostMetrics) {
return true;
}
return this.oldHostMetrics.viewWidth !== hostMetrics.viewWidth ||
this.oldHostMetrics.viewHeight !== hostMetrics.viewHeight ||
this.oldHostMetrics.absoluteLeft !== hostMetrics.absoluteLeft ||
this.oldHostMetrics.absoluteTop !== hostMetrics.absoluteTop;
return (
this.oldHostMetrics.viewWidth !== hostMetrics.viewWidth ||
this.oldHostMetrics.viewHeight !== hostMetrics.viewHeight ||
this.oldHostMetrics.absoluteLeft !== hostMetrics.absoluteLeft ||
this.oldHostMetrics.absoluteTop !== hostMetrics.absoluteTop
);
}
/**
@@ -428,8 +460,11 @@ export class Scrollbar {
// Horizontal toolbar should always be just above the bottom of the
// workspace.
const yCoordinate = hostMetrics.absoluteTop + hostMetrics.viewHeight -
Scrollbar.scrollbarThickness - this.margin;
const yCoordinate =
hostMetrics.absoluteTop +
hostMetrics.viewHeight -
Scrollbar.scrollbarThickness -
this.margin;
this.setPosition(xCoordinate, yCoordinate);
// If the view has been resized, a content resize will also be necessary.
@@ -464,7 +499,7 @@ export class Scrollbar {
// Resize the handle.
let handleLength =
this.scrollbarLength * hostMetrics.viewWidth / hostMetrics.scrollWidth;
(this.scrollbarLength * hostMetrics.viewWidth) / hostMetrics.scrollWidth;
handleLength = this.constrainHandleLength(handleLength);
this.setHandleLength(handleLength);
@@ -521,10 +556,12 @@ export class Scrollbar {
}
this.setScrollbarLength(Math.max(0, viewSize));
const xCoordinate = this.workspace.RTL ?
hostMetrics.absoluteLeft + this.margin :
hostMetrics.absoluteLeft + hostMetrics.viewWidth -
Scrollbar.scrollbarThickness - this.margin;
const xCoordinate = this.workspace.RTL
? hostMetrics.absoluteLeft + this.margin
: hostMetrics.absoluteLeft +
hostMetrics.viewWidth -
Scrollbar.scrollbarThickness -
this.margin;
const yCoordinate = hostMetrics.absoluteTop + this.margin;
this.setPosition(xCoordinate, yCoordinate);
@@ -560,8 +597,9 @@ export class Scrollbar {
}
// Resize the handle.
let handleLength = this.scrollbarLength * hostMetrics.viewHeight /
hostMetrics.scrollHeight;
let handleLength =
(this.scrollbarLength * hostMetrics.viewHeight) /
hostMetrics.scrollHeight;
handleLength = this.constrainHandleLength(handleLength);
this.setHandleLength(handleLength);
@@ -663,7 +701,7 @@ export class Scrollbar {
*/
private onMouseDownBar(e: MouseEvent) {
this.workspace.markFocused();
Touch.clearTouchIdentifier(); // This is really a click.
Touch.clearTouchIdentifier(); // This is really a click.
this.cleanUp();
if (browserEvents.isRightButton(e)) {
// Right-click.
@@ -672,7 +710,10 @@ export class Scrollbar {
return;
}
const mouseXY = browserEvents.mouseToSvg(
e, this.workspace.getParentSvg(), this.workspace.getInverseScreenCTM());
e,
this.workspace.getParentSvg(),
this.workspace.getInverseScreenCTM()
);
const mouseLocation = this.horizontal ? mouseXY.x : mouseXY.y;
const handleXY = svgMath.getInjectionDivXY(this.svgHandle);
@@ -721,9 +762,17 @@ export class Scrollbar {
// Record the current mouse position.
this.startDragMouse = this.horizontal ? e.clientX : e.clientY;
this.onMouseUpWrapper_ = browserEvents.conditionalBind(
document, 'pointerup', this, this.onMouseUpHandle);
document,
'pointerup',
this,
this.onMouseUpHandle
);
this.onMouseMoveWrapper_ = browserEvents.conditionalBind(
document, 'pointermove', this, this.onMouseMoveHandle);
document,
'pointermove',
this,
this.onMouseMoveHandle
);
e.stopPropagation();
e.preventDefault();
}
@@ -827,17 +876,21 @@ export class Scrollbar {
* workspace.
* @returns Whether the two sets of metrics are equivalent.
*/
private static metricsAreEquivalent(first: Metrics, second: Metrics):
boolean {
return first.viewWidth === second.viewWidth &&
first.viewHeight === second.viewHeight &&
first.viewLeft === second.viewLeft &&
first.viewTop === second.viewTop &&
first.absoluteTop === second.absoluteTop &&
first.absoluteLeft === second.absoluteLeft &&
first.scrollWidth === second.scrollWidth &&
first.scrollHeight === second.scrollHeight &&
first.scrollLeft === second.scrollLeft &&
first.scrollTop === second.scrollTop;
private static metricsAreEquivalent(
first: Metrics,
second: Metrics
): boolean {
return (
first.viewWidth === second.viewWidth &&
first.viewHeight === second.viewHeight &&
first.viewLeft === second.viewLeft &&
first.viewTop === second.viewTop &&
first.absoluteTop === second.absoluteTop &&
first.absoluteLeft === second.absoluteLeft &&
first.scrollWidth === second.scrollWidth &&
first.scrollHeight === second.scrollHeight &&
first.scrollLeft === second.scrollLeft &&
first.scrollTop === second.scrollTop
);
}
}