luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore(editor): remove redundant line styles components (#10980)

Browse Source 
* Moved `edgeless-line-styles-panel` and `edgeless-line-width-panel` into components pkg
This commit is contained in:
fundon
2025-03-20 09:48:02 +00:00
parent 42745f059d
commit 27a8afa33f
16 changed files with 37 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
View File

@@ -20,10 +20,10 @@ export class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
</editor-icon-button> </editor-icon-button>
`} `}
> >
<affine-edgeless-line-styles-panel <edgeless-line-styles-panel
.lineSize=${lineSize} .lineSize=${lineSize}
.lineStyle=${lineStyle} .lineStyle=${lineStyle}
></affine-edgeless-line-styles-panel> ></edgeless-line-styles-panel>
</editor-menu-button> </editor-menu-button>
`; `;
} }

98
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/line-styles-panel.ts
View File

@@ -1,98 +0,0 @@
import { LineWidth, StrokeStyle } from '@blocksuite/affine-model';
import { BanIcon, DashLineIcon, StraightLineIcon } from '@blocksuite/icons/lit';
import { html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { repeat } from 'lit/directives/repeat.js';
import type { LineWidthEvent } from './line-width-panel.js';
export type LineStyleEvent =
| {
type: 'size';
value: LineWidth;
}
| {
type: 'lineStyle';
value: StrokeStyle;
};
interface LineStylesPanelProps {
onClick?: (e: LineStyleEvent) => void;
selectedLineSize?: LineWidth;
selectedLineStyle?: StrokeStyle;
lineStyles?: StrokeStyle[];
}
const LINE_STYLE_LIST = [
{
name: 'Solid',
value: StrokeStyle.Solid,
icon: StraightLineIcon(),
},
{
name: 'Dash',
value: StrokeStyle.Dash,
icon: DashLineIcon(),
},
{
name: 'None',
value: StrokeStyle.None,
icon: BanIcon(),
},
];
export function LineStylesPanel({
onClick,
selectedLineStyle,
selectedLineSize = LineWidth.Two,
lineStyles = [StrokeStyle.Solid, StrokeStyle.Dash, StrokeStyle.None],
}: LineStylesPanelProps = {}) {
const lineSizePanel = html`
<edgeless-line-width-panel
?disabled=${selectedLineStyle === StrokeStyle.None}
.selectedSize=${selectedLineSize}
@select=${(e: LineWidthEvent) => {
onClick?.({
type: 'size',
value: e.detail,
});
}}
></edgeless-line-width-panel>
`;
const lineStyleButtons = repeat(
LINE_STYLE_LIST.filter(item => lineStyles.includes(item.value)),
item => item.value,
({ name, icon, value }) => {
const active = selectedLineStyle === value;
const classInfo = {
'line-style-button': true,
[`mode-${value}`]: true,
};
if (active) classInfo['active'] = true;
return html`
<edgeless-tool-icon-button
class=${classMap(classInfo)}
.active=${active}
.activeMode=${'background'}
.tooltip=${name}
.iconSize=${'24px'}
@click=${() =>
onClick?.({
type: 'lineStyle',
value,
})}
>
${icon}
</edgeless-tool-icon-button>
`;
}
);
return html`
${lineSizePanel}
<editor-toolbar-separator></editor-toolbar-separator>
${lineStyleButtons}
`;
}

239
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/line-width-panel.ts
View File

@@ -1,239 +0,0 @@
import { LINE_WIDTHS, LineWidth } from '@blocksuite/affine-model';
import { on, once } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit';
import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
import { property, query } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import clamp from 'lodash-es/clamp';
interface Config {
width: number;
itemSize: number;
itemIconSize: number;
dragHandleSize: number;
count: number;
}
export class LineWidthEvent extends CustomEvent<LineWidth> {}
export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
static override styles = css`
:host {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
--width: 140px;
--item-size: 16px;
--item-icon-size: 8px;
--drag-handle-size: 14px;
--cursor: 0;
--count: 6;
/* (16 - 14) / 2 + (cursor / (count - 1)) * (140 - 16) */
--drag-handle-center-x: calc(
(var(--item-size) - var(--drag-handle-size)) / 2 +
(var(--cursor) / (var(--count) - 1)) *
(var(--width) - var(--item-size))
);
}
:host([disabled]) {
opacity: 0.5;
pointer-events: none;
}
.line-width-panel {
width: var(--width);
height: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
cursor: default;
}
.line-width-button {
display: flex;
align-items: center;
justify-content: center;
width: var(--item-size);
height: var(--item-size);
z-index: 2;
}
.line-width-icon {
width: var(--item-icon-size);
height: var(--item-icon-size);
background-color: var(--affine-border-color);
border-radius: 50%;
}
.line-width-button[data-selected] .line-width-icon {
background-color: var(--affine-icon-color);
}
.drag-handle {
position: absolute;
width: var(--drag-handle-size);
height: var(--drag-handle-size);
border-radius: 50%;
background-color: var(--affine-icon-color);
z-index: 3;
transform: translateX(var(--drag-handle-center-x));
}
.bottom-line,
.line-width-overlay {
position: absolute;
height: 1px;
left: calc(var(--item-size) / 2);
}
.bottom-line {
width: calc(100% - var(--item-size));
background-color: var(--affine-border-color);
}
.line-width-overlay {
background-color: var(--affine-icon-color);
z-index: 1;
width: var(--drag-handle-center-x);
}
`;
private readonly _getDragHandlePosition = (e: PointerEvent) => {
return clamp(e.offsetX, 0, this.config.width);
};
private readonly _onPointerDown = (e: PointerEvent) => {
e.preventDefault();
this._onPointerMove(e);
const dispose = on(this, 'pointermove', this._onPointerMove);
this._disposables.add(once(this, 'pointerup', dispose));
this._disposables.add(once(this, 'pointerout', dispose));
};
private readonly _onPointerMove = (e: PointerEvent) => {
e.preventDefault();
const x = this._getDragHandlePosition(e);
this._updateLineWidthPanelByDragHandlePosition(x);
};
private _onSelect(lineWidth: LineWidth) {
// If the selected size is the same as the previous one, do nothing.
if (lineWidth === this.selectedSize) return;
this.dispatchEvent(
new LineWidthEvent('select', {
detail: lineWidth,
composed: true,
bubbles: true,
})
);
this.selectedSize = lineWidth;
}
private _updateLineWidthPanel(selectedSize: LineWidth) {
if (!this._lineWidthOverlay) return;
const index = this.lineWidths.findIndex(w => w === selectedSize);
if (index === -1) return;
this.style.setProperty('--cursor', `${index}`);
}
private _updateLineWidthPanelByDragHandlePosition(x: number) {
// Calculate the selected size based on the drag handle position.
// Need to select the nearest size.
const {
config: { width, itemSize, count },
lineWidths,
} = this;
const targetWidth = width - itemSize;
const halfItemSize = itemSize / 2;
const offsetX = halfItemSize + (width - itemSize * count) / (count - 1) / 2;
const selectedSize = lineWidths.findLast((_, n) => {
const cx = halfItemSize + (n / (count - 1)) * targetWidth;
return x >= cx - offsetX && x < cx + offsetX;
});
if (!selectedSize) return;
this._updateLineWidthPanel(selectedSize);
this._onSelect(selectedSize);
}
override connectedCallback() {
super.connectedCallback();
const {
style,
config: { width, itemSize, itemIconSize, dragHandleSize, count },
} = this;
style.setProperty('--width', `${width}px`);
style.setProperty('--item-size', `${itemSize}px`);
style.setProperty('--item-icon-size', `${itemIconSize}px`);
style.setProperty('--drag-handle-size', `${dragHandleSize}px`);
style.setProperty('--count', `${count}`);
}
override firstUpdated() {
this._updateLineWidthPanel(this.selectedSize);
this._disposables.addFromEvent(this, 'pointerdown', this._onPointerDown);
}
override render() {
return html`<div class="line-width-panel">
${repeat(
this.lineWidths,
w => w,
(w, n) =>
html`<div
class="line-width-button"
aria-label=${w}
data-index=${n}
?data-selected=${w <= this.selectedSize}
>
<div class="line-width-icon"></div>
</div>`
)}
<div class="drag-handle"></div>
<div class="bottom-line"></div>
<div class="line-width-overlay"></div>
${this.hasTooltip
? html`<affine-tooltip .offset=${8}>Thickness</affine-tooltip>`
: nothing}
</div>`;
}
override willUpdate(changedProperties: PropertyValues<this>) {
if (changedProperties.has('selectedSize')) {
this._updateLineWidthPanel(this.selectedSize);
}
}
@query('.line-width-overlay')
private accessor _lineWidthOverlay!: HTMLElement;
accessor config: Config = {
width: 140,
itemSize: 16,
itemIconSize: 8,
dragHandleSize: 14,
count: LINE_WIDTHS.length,
};
@property({ attribute: false, type: Boolean })
accessor disabled = false;
@property({ attribute: false })
accessor hasTooltip = true;
@property({ attribute: false })
accessor lineWidths: LineWidth[] = LINE_WIDTHS;
@property({ attribute: false })
accessor selectedSize: LineWidth = LineWidth.Two;
}

16
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/stroke-style-panel.ts
View File

@@ -1,11 +1,10 @@
import type { LineDetailType } from '@blocksuite/affine-components/edgeless-line-styles-panel';
import { type ColorScheme, type StrokeStyle } from '@blocksuite/affine-model'; import { type ColorScheme, type StrokeStyle } from '@blocksuite/affine-model';
import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import type { ColorEvent } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit'; import { WithDisposable } from '@blocksuite/global/lit';
import { css, html, LitElement } from 'lit'; import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
import { type LineStyleEvent, LineStylesPanel } from './line-styles-panel.js';
export class StrokeStylePanel extends WithDisposable(LitElement) { export class StrokeStylePanel extends WithDisposable(LitElement) {
static override styles = css` static override styles = css`
:host { :host {
@@ -26,11 +25,12 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
override render() { override render() {
return html` return html`
<div class="line-styles"> <div class="line-styles">
${LineStylesPanel({ <edgeless-line-styles-panel
selectedLineSize: this.strokeWidth, .lineSize=${this.strokeWidth}
selectedLineStyle: this.strokeStyle, .lineStyle=${this.strokeStyle}
onClick: e => this.setStrokeStyle(e), @select=${this.setStrokeStyle}
})} >
</edgeless-line-styles-panel>
</div> </div>
<editor-toolbar-separator <editor-toolbar-separator
data-orientation="horizontal" data-orientation="horizontal"
@@ -54,7 +54,7 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
accessor setStrokeColor!: (e: ColorEvent) => void; accessor setStrokeColor!: (e: ColorEvent) => void;
@property({ attribute: false }) @property({ attribute: false })
accessor setStrokeStyle!: (e: LineStyleEvent) => void; accessor setStrokeStyle!: (e: LineDetailType) => void;
@property({ attribute: false }) @property({ attribute: false })
accessor strokeColor!: string; accessor strokeColor!: string;

5
blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts
View File

@@ -1,4 +1,4 @@
import { DefaultTheme } from '@blocksuite/affine-model'; import { DefaultTheme, type LineWidth } from '@blocksuite/affine-model';
import { import {
EditPropsStore, EditPropsStore,
FeatureFlagService, FeatureFlagService,
@@ -11,7 +11,6 @@ import { computed } from '@preact/signals-core';
import { css, html, LitElement } from 'lit'; import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
import type { LineWidthEvent } from '../../panel/line-width-panel.js';
import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
export class EdgelessBrushMenu extends EdgelessToolbarToolMixin( export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
@@ -56,7 +55,7 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
<div class="menu-content"> <div class="menu-content">
<edgeless-line-width-panel <edgeless-line-width-panel
.selectedSize=${this._props$.value.lineWidth} .selectedSize=${this._props$.value.lineWidth}
@select=${(e: LineWidthEvent) => @select=${(e: CustomEvent<LineWidth>) =>
this.onChange({ lineWidth: e.detail })} this.onChange({ lineWidth: e.detail })}
> >
</edgeless-line-width-panel> </edgeless-line-width-panel>

9
blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-menu.ts
View File

@@ -1,4 +1,8 @@
import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model'; import {
ConnectorMode,
DefaultTheme,
type LineWidth,
} from '@blocksuite/affine-model';
import { import {
EditPropsStore, EditPropsStore,
FeatureFlagService, FeatureFlagService,
@@ -16,7 +20,6 @@ import { computed } from '@preact/signals-core';
import { css, html, LitElement } from 'lit'; import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js'; import { property } from 'lit/decorators.js';
import type { LineWidthEvent } from '../../panel/line-width-panel.js';
import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
function ConnectorModeButtonGroup( function ConnectorModeButtonGroup(
@@ -124,7 +127,7 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
<div class="submenu-divider"></div> <div class="submenu-divider"></div>
<edgeless-line-width-panel <edgeless-line-width-panel
.selectedSize=${strokeWidth} .selectedSize=${strokeWidth}
@select=${(e: LineWidthEvent) => @select=${(e: CustomEvent<LineWidth>) =>
this.onChange({ strokeWidth: e.detail })} this.onChange({ strokeWidth: e.detail })}
> >
</edgeless-line-width-panel> </edgeless-line-width-panel>

4
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
View File

@@ -16,8 +16,6 @@ import {
} from '@blocksuite/affine-shared/utils'; } from '@blocksuite/affine-shared/utils';
import { html } from 'lit'; import { html } from 'lit';
import type { LineWidthEvent } from '../../components/panel/line-width-panel';
export const builtinBrushToolbarConfig = { export const builtinBrushToolbarConfig = {
actions: [ actions: [
{ {
@@ -28,7 +26,7 @@ export const builtinBrushToolbarConfig = {
const lineWidth = const lineWidth =
getMostCommonValue(models, 'lineWidth') ?? LineWidth.Four; getMostCommonValue(models, 'lineWidth') ?? LineWidth.Four;
const onPick = (e: LineWidthEvent) => { const onPick = (e: CustomEvent<LineWidth>) => {
e.stopPropagation(); e.stopPropagation();
const lineWidth = e.detail; const lineWidth = e.detail;

4
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts
View File

@@ -183,7 +183,7 @@ export const builtinConnectorToolbarConfig = {
.originalColor=${firstModel.stroke} .originalColor=${firstModel.stroke}
.enableCustomColor=${enableCustomColor} .enableCustomColor=${enableCustomColor}
> >
<affine-edgeless-line-styles-panel <edgeless-line-styles-panel
slot="other" slot="other"
style=${styleMap({ style=${styleMap({
display: 'flex', display: 'flex',
@@ -193,7 +193,7 @@ export const builtinConnectorToolbarConfig = {
@select=${onPickStrokeStyle} @select=${onPickStrokeStyle}
.lineSize=${strokeWidth} .lineSize=${strokeWidth}
.lineStyle=${strokeStyle} .lineStyle=${strokeStyle}
></affine-edgeless-line-styles-panel> ></edgeless-line-styles-panel>
<editor-toolbar-separator <editor-toolbar-separator
slot="separator" slot="separator"
data-orientation="horizontal" data-orientation="horizontal"

3
blocksuite/affine/blocks/block-root/src/effects.ts
View File

@@ -11,7 +11,6 @@ import {
} from './edgeless/components/note-slicer/index.js'; } from './edgeless/components/note-slicer/index.js';
import { EdgelessFontFamilyPanel } from './edgeless/components/panel/font-family-panel.js'; import { EdgelessFontFamilyPanel } from './edgeless/components/panel/font-family-panel.js';
import { EdgelessFontWeightAndStylePanel } from './edgeless/components/panel/font-weight-and-style-panel.js'; import { EdgelessFontWeightAndStylePanel } from './edgeless/components/panel/font-weight-and-style-panel.js';
import { EdgelessLineWidthPanel } from './edgeless/components/panel/line-width-panel.js';
import { NoteDisplayModePanel } from './edgeless/components/panel/note-display-mode-panel.js'; import { NoteDisplayModePanel } from './edgeless/components/panel/note-display-mode-panel.js';
import { EdgelessNoteShadowPanel } from './edgeless/components/panel/note-shadow-panel.js'; import { EdgelessNoteShadowPanel } from './edgeless/components/panel/note-shadow-panel.js';
import { EdgelessScalePanel } from './edgeless/components/panel/scale-panel.js'; import { EdgelessScalePanel } from './edgeless/components/panel/scale-panel.js';
@@ -213,7 +212,6 @@ function registerEdgelessToolbarComponents() {
} }
function registerEdgelessPanelComponents() { function registerEdgelessPanelComponents() {
customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
customElements.define( customElements.define(
'edgeless-font-weight-and-style-panel', 'edgeless-font-weight-and-style-panel',
EdgelessFontWeightAndStylePanel EdgelessFontWeightAndStylePanel
@@ -307,7 +305,6 @@ declare global {
'note-slicer': NoteSlicer; 'note-slicer': NoteSlicer;
'edgeless-font-family-panel': EdgelessFontFamilyPanel; 'edgeless-font-family-panel': EdgelessFontFamilyPanel;
'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel; 'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
'edgeless-line-width-panel': EdgelessLineWidthPanel;
'note-display-mode-panel': NoteDisplayModePanel; 'note-display-mode-panel': NoteDisplayModePanel;
'edgeless-note-shadow-panel': EdgelessNoteShadowPanel; 'edgeless-note-shadow-panel': EdgelessNoteShadowPanel;
'edgeless-scale-panel': EdgelessScalePanel; 'edgeless-scale-panel': EdgelessScalePanel;

5
blocksuite/affine/components/src/edgeless-line-styles-panel/index.ts
View File

@@ -3,8 +3,5 @@ import { EdgelessLineStylesPanel } from './line-styles-panel';
export * from './line-styles-panel'; export * from './line-styles-panel';
export function effects() { export function effects() {
customElements.define( customElements.define('edgeless-line-styles-panel', EdgelessLineStylesPanel);
'affine-edgeless-line-styles-panel',
EdgelessLineStylesPanel
);
} }

6
blocksuite/affine/components/src/edgeless-line-styles-panel/line-styles-panel.ts
View File

@@ -49,14 +49,14 @@ export class EdgelessLineStylesPanel extends LitElement {
const { lineSize, lineStyle, lineStyles } = this; const { lineSize, lineStyle, lineStyles } = this;
return html` return html`
<affine-edgeless-line-width-panel <edgeless-line-width-panel
?disabled="${lineStyle === StrokeStyle.None}" ?disabled="${lineStyle === StrokeStyle.None}"
.selectedSize=${lineSize} .selectedSize=${lineSize}
@select=${(e: CustomEvent<LineWidth>) => { @select=${(e: CustomEvent<LineWidth>) => {
e.stopPropagation(); e.stopPropagation();
this.select({ type: 'size', value: e.detail }); this.select({ type: 'size', value: e.detail });
}} }}
></affine-edgeless-line-width-panel> ></edgeless-line-width-panel>
<editor-toolbar-separator></editor-toolbar-separator> <editor-toolbar-separator></editor-toolbar-separator>
@@ -102,6 +102,6 @@ export class EdgelessLineStylesPanel extends LitElement {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'affine-edgeless-line-styles-panel': EdgelessLineStylesPanel; 'edgeless-line-styles-panel': EdgelessLineStylesPanel;
} }
} }

5
blocksuite/affine/components/src/edgeless-line-width-panel/index.ts
View File

@@ -3,8 +3,5 @@ import { EdgelessLineWidthPanel } from './line-width-panel';
export * from './line-width-panel'; export * from './line-width-panel';
export function effects() { export function effects() {
customElements.define( customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
'affine-edgeless-line-width-panel',
EdgelessLineWidthPanel
);
} }

2
blocksuite/affine/components/src/edgeless-line-width-panel/line-width-panel.ts
View File

@@ -239,6 +239,6 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
'affine-edgeless-line-width-panel': EdgelessLineWidthPanel; 'edgeless-line-width-panel': EdgelessLineWidthPanel;
} }
} }

4
blocksuite/affine/components/src/edgeless-shape-color-picker/color-picker.ts
View File

@@ -260,12 +260,12 @@ export class EdgelessShapeColorPicker extends WithDisposable(
` `
)} )}
<div class="picker-label">Border style</div> <div class="picker-label">Border style</div>
<affine-edgeless-line-styles-panel <edgeless-line-styles-panel
class="picker" class="picker"
.lineSize=${strokeWidth} .lineSize=${strokeWidth}
.lineStyle=${strokeStyle} .lineStyle=${strokeStyle}
@select=${this.#pickStrokeStyle} @select=${this.#pickStrokeStyle}
></affine-edgeless-line-styles-panel> ></edgeless-line-styles-panel>
`; `;
}, },
], ],

6
tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
View File

@@ -329,11 +329,7 @@ test.describe('edgeless note element toolbar', () => {
await toolbar.getByRole('button', { name: 'Border style' }).click(); await toolbar.getByRole('button', { name: 'Border style' }).click();
await toolbar.locator('.mode-solid').click(); await toolbar.locator('.mode-solid').click();
await toolbar.getByRole('button', { name: 'Border style' }).click(); await toolbar.getByRole('button', { name: 'Border style' }).click();
// TODO(@fundon): delete duplicate components await toolbar.locator('edgeless-line-width-panel').getByLabel('8').click();
await toolbar
.locator('affine-edgeless-line-width-panel')
.getByLabel('8')
.click();
expect(await getNoteEdgelessProps(page, noteId)).toEqual({ expect(await getNoteEdgelessProps(page, noteId)).toEqual({
style: { style: {

20
tests/blocksuite/e2e/utils/actions/edgeless.ts
View File

@@ -1395,13 +1395,10 @@ export async function resizeConnectorByStartCapitalHandler(
} }
export function getEdgelessLineWidthPanel(page: Page) { export function getEdgelessLineWidthPanel(page: Page) {
return ( return page
page .locator('affine-toolbar-widget editor-toolbar')
.locator('affine-toolbar-widget editor-toolbar') .locator('edgeless-line-width-panel')
// TODO(@fundon): remove ` edgeless-line-width-panel` .locator('.line-width-panel');
.locator('affine-edgeless-line-width-panel')
.locator('.line-width-panel')
);
} }
export async function changeShapeStrokeWidth(page: Page) { export async function changeShapeStrokeWidth(page: Page) {
const lineWidthPanel = getEdgelessLineWidthPanel(page); const lineWidthPanel = getEdgelessLineWidthPanel(page);
@@ -1461,12 +1458,9 @@ export function locatorConnectorStrokeWidthButton(
page: Page, page: Page,
buttonPosition: number buttonPosition: number
) { ) {
return ( return locatorComponentToolbar(page)
locatorComponentToolbar(page) .locator('edgeless-line-width-panel')
// TODO(@fundon): remove redundant components .locator(`.line-width-button:nth-child(${buttonPosition})`);
.locator('affine-edgeless-line-width-panel')
.locator(`.line-width-button:nth-child(${buttonPosition})`)
);
} }
export async function changeConnectorStrokeWidth( export async function changeConnectorStrokeWidth(
page: Page, page: Page,