From d9924569ce466b84d1123b63c80b05b622026f70 Mon Sep 17 00:00:00 2001 From: Fangdun Tsai Date: Mon, 11 Mar 2024 16:45:10 +0800 Subject: [PATCH] chore: make key naming simpler in LineWidth Enum (#6450) --- packages/blocks/src/_common/types.ts | 18 +++++++------- .../component-toolbar/change-brush-button.ts | 4 ++-- .../change-connector-button.ts | 4 ++-- .../component-toolbar/change-shape-button.ts | 4 ++-- .../components/panel/line-width-panel.ts | 24 +++++++++---------- .../toolbar/brush/brush-tool-button.ts | 2 +- .../connector/connector-tool-button.ts | 2 +- .../src/root-block/edgeless/utils/consts.ts | 2 +- .../surface-block/managers/edit-session.ts | 6 ++--- 9 files changed, 32 insertions(+), 34 deletions(-) diff --git a/packages/blocks/src/_common/types.ts b/packages/blocks/src/_common/types.ts index ad4f71299006..fc48a5ae2ea2 100644 --- a/packages/blocks/src/_common/types.ts +++ b/packages/blocks/src/_common/types.ts @@ -163,16 +163,14 @@ export type ShapeTool = { }; export enum LineWidth { - LINE_WIDTH_TWO = 2, - LINE_WIDTH_FOUR = 4, - LINE_WIDTH_SIX = 6, - LINE_WIDTH_EIGHT = 8, - LINE_WIDTH_TEN = 10, - LINE_WIDTH_TWELVE = 12, - // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values - Thin = 4, - // eslint-disable-next-line @typescript-eslint/no-duplicate-enum-values - Thick = 10, + Two = 2, + // Thin + Four = 4, + Six = 6, + Eight = 8, + // Thick + Ten = 10, + Twelve = 12, } export type TextTool = { diff --git a/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-brush-button.ts b/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-brush-button.ts index a1164f698a95..90632dfe26e5 100644 --- a/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-brush-button.ts +++ b/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-brush-button.ts @@ -35,7 +35,7 @@ function getMostCommonSize(elements: BrushElementModel[]): LineWidth { (ele: BrushElementModel) => ele.lineWidth ); const max = maxBy(Object.entries(shapeTypes), ([_k, count]) => count); - return max ? (Number(max[0]) as LineWidth) : LineWidth.LINE_WIDTH_FOUR; + return max ? (Number(max[0]) as LineWidth) : LineWidth.Four; } @customElement('edgeless-change-brush-button') @@ -108,7 +108,7 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) { private _selectedColor: string | null = null; @state() - private _selectedSize: LineWidth | null = LineWidth.LINE_WIDTH_FOUR; + private _selectedSize: LineWidth | null = LineWidth.Four; @query('.color-panel-container') private _colorPanel!: EdgelessColorPanel; diff --git a/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-connector-button.ts b/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-connector-button.ts index aaed0f632710..2e223826ca25 100644 --- a/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-connector-button.ts +++ b/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-connector-button.ts @@ -71,7 +71,7 @@ function getMostCommonLineWidth(elements: ConnectorElementModel[]): LineWidth { return ele.strokeWidth; }); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); - return max ? (Number(max[0]) as LineWidth) : LineWidth.LINE_WIDTH_FOUR; + return max ? (Number(max[0]) as LineWidth) : LineWidth.Four; } export function getMostCommonLineStyle( @@ -284,7 +284,7 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) { const selectedColor = getMostCommonColor(this.elements); const selectedMode = getMostCommonMode(this.elements); const selectedLineSize = - getMostCommonLineWidth(this.elements) ?? LineWidth.LINE_WIDTH_FOUR; + getMostCommonLineWidth(this.elements) ?? LineWidth.Four; const selectedRough = getMostCommonRough(this.elements); const selectedLineStyle = getMostCommonLineStyle(this.elements); const selectedStartPointStyle = diff --git a/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-shape-button.ts b/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-shape-button.ts index 1b02ffac7090..79aa427aca62 100644 --- a/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-shape-button.ts +++ b/packages/blocks/src/root-block/edgeless/components/component-toolbar/change-shape-button.ts @@ -89,7 +89,7 @@ function getMostCommonLineSize(elements: ShapeElementModel[]): LineWidth { return ele.strokeWidth; }); const max = maxBy(Object.entries(sizes), ([_k, count]) => count); - return max ? (Number(max[0]) as LineWidth) : LineWidth.LINE_WIDTH_FOUR; + return max ? (Number(max[0]) as LineWidth) : LineWidth.Four; } function getMostCommonLineStyle( @@ -436,7 +436,7 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) { const selectedStrokeColor = getMostCommonStrokeColor(this.elements) ?? STROKE_COLORS[0]; const selectedLineSize = - getMostCommonLineSize(this.elements) ?? LineWidth.LINE_WIDTH_FOUR; + getMostCommonLineSize(this.elements) ?? LineWidth.Four; const selectedLineStyle = getMostCommonLineStyle(this.elements) ?? 'solid'; const selectedShapeStyle = getMostCommonShapeStyle(this.elements) ?? ShapeStyle.Scribbled; diff --git a/packages/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts b/packages/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts index f12955bf02f0..8fac40ca66c7 100644 --- a/packages/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts +++ b/packages/blocks/src/root-block/edgeless/components/panel/line-width-panel.ts @@ -106,7 +106,7 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) { `; @property({ attribute: false }) - selectedSize: LineWidth = LineWidth.LINE_WIDTH_TWO; + selectedSize: LineWidth = LineWidth.Two; @property({ attribute: false }) hasTooltip = true; @@ -136,22 +136,22 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) { let width = 0; let dragHandleOffsetX = 0; switch (selectedSize) { - case LineWidth.LINE_WIDTH_TWO: + case LineWidth.Two: width = 0; break; - case LineWidth.LINE_WIDTH_FOUR: + case LineWidth.Four: width = 16; dragHandleOffsetX = 1; break; - case LineWidth.LINE_WIDTH_SIX: + case LineWidth.Six: width = 32; dragHandleOffsetX = 2; break; - case LineWidth.LINE_WIDTH_EIGHT: + case LineWidth.Eight: width = 48; dragHandleOffsetX = 3; break; - case LineWidth.LINE_WIDTH_TEN: + case LineWidth.Ten: width = 64; dragHandleOffsetX = 4; break; @@ -224,17 +224,17 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) { // Need to select the nearest size. let selectedSize = this.selectedSize; if (dragHandlerPosition <= 12) { - selectedSize = LineWidth.LINE_WIDTH_TWO; + selectedSize = LineWidth.Two; } else if (dragHandlerPosition > 12 && dragHandlerPosition <= 26) { - selectedSize = LineWidth.LINE_WIDTH_FOUR; + selectedSize = LineWidth.Four; } else if (dragHandlerPosition > 26 && dragHandlerPosition <= 40) { - selectedSize = LineWidth.LINE_WIDTH_SIX; + selectedSize = LineWidth.Six; } else if (dragHandlerPosition > 40 && dragHandlerPosition <= 54) { - selectedSize = LineWidth.LINE_WIDTH_EIGHT; + selectedSize = LineWidth.Eight; } else if (dragHandlerPosition > 54 && dragHandlerPosition <= 68) { - selectedSize = LineWidth.LINE_WIDTH_TEN; + selectedSize = LineWidth.Ten; } else { - selectedSize = LineWidth.LINE_WIDTH_TWELVE; + selectedSize = LineWidth.Twelve; } this._updateLineWidthPanel(selectedSize); this._onSelect(selectedSize); diff --git a/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts index 6c98eea355a9..2dceb3f33b41 100644 --- a/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts +++ b/packages/blocks/src/root-block/edgeless/components/toolbar/brush/brush-tool-button.ts @@ -53,7 +53,7 @@ export class EdgelessBrushToolButton extends EdgelessToolButton< color: string = DEFAULT_BRUSH_COLOR; @state() - lineWidth = LineWidth.LINE_WIDTH_FOUR; + lineWidth = LineWidth.Four; protected override _type = 'brush' as const; protected override readonly _states = ['color', 'lineWidth'] as const; diff --git a/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts index 1ad223cc19c4..978647eaf2bb 100644 --- a/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts +++ b/packages/blocks/src/root-block/edgeless/components/toolbar/connector/connector-tool-button.ts @@ -46,7 +46,7 @@ export class EdgelessConnectorToolButton extends EdgelessToolButton< stroke = GET_DEFAULT_LINE_COLOR(); @state() - strokeWidth = LineWidth.LINE_WIDTH_TWO; + strokeWidth = LineWidth.Two; protected override _type = 'connector' as const; protected override readonly _states = [ diff --git a/packages/blocks/src/root-block/edgeless/utils/consts.ts b/packages/blocks/src/root-block/edgeless/utils/consts.ts index 908d3160d3e1..86fe1e3b5df3 100644 --- a/packages/blocks/src/root-block/edgeless/utils/consts.ts +++ b/packages/blocks/src/root-block/edgeless/utils/consts.ts @@ -32,7 +32,7 @@ export const SHAPE_OVERLAY_OPTIONS = { strokeStyle: StrokeStyle.Solid, strokeLineDash: [] as number[], stroke: 'black', - strokeWidth: LineWidth.LINE_WIDTH_TWO, + strokeWidth: LineWidth.Two, fill: 'transparent', }; diff --git a/packages/blocks/src/surface-block/managers/edit-session.ts b/packages/blocks/src/surface-block/managers/edit-session.ts index e00639bec630..98c9f9a73664 100644 --- a/packages/blocks/src/surface-block/managers/edit-session.ts +++ b/packages/blocks/src/surface-block/managers/edit-session.ts @@ -148,12 +148,12 @@ export class EditSessionStorage { rearEndpointStyle: DEFAULT_REAR_END_POINT_STYLE, stroke: GET_DEFAULT_LINE_COLOR(), strokeStyle: StrokeStyle.Solid, - strokeWidth: LineWidth.LINE_WIDTH_TWO, + strokeWidth: LineWidth.Two, rough: false, }, brush: { color: GET_DEFAULT_LINE_COLOR(), - lineWidth: LineWidth.Thin, + lineWidth: LineWidth.Four, }, shape: { color: DEFAULT_SHAPE_TEXT_COLOR, @@ -161,7 +161,7 @@ export class EditSessionStorage { fillColor: DEFAULT_SHAPE_FILL_COLOR, strokeColor: DEFAULT_SHAPE_STROKE_COLOR, strokeStyle: StrokeStyle.Solid, - strokeWidth: LineWidth.LINE_WIDTH_TWO, + strokeWidth: LineWidth.Two, shapeStyle: ShapeStyle.General, filled: true, radius: 0,