Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-13 16:16:46 +08:00
Code Issues 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
blocksuite/affine/blocks/block-note/src/components/edgeless-note-border-dropdown-menu.ts
+2 -2
View File
@@ -20,10 +20,10 @@ export class EdgelessNoteBorderDropdownMenu extends ShadowlessElement {
</editor-icon-button>
`}
>
<affine-edgeless-line-styles-panel
<edgeless-line-styles-panel
.lineSize=${lineSize}
.lineStyle=${lineStyle}
></affine-edgeless-line-styles-panel>
></edgeless-line-styles-panel>
</editor-menu-button>
`;
}
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/line-styles-panel.ts
-98
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}
`;
}
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/line-width-panel.ts
-239
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;
}
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/stroke-style-panel.ts
+8 -8
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 { ColorEvent } from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { type LineStyleEvent, LineStylesPanel } from './line-styles-panel.js';
export class StrokeStylePanel extends WithDisposable(LitElement) {
static override styles = css`
:host {
@@ -26,11 +25,12 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
override render() {
return html`
<div class="line-styles">
${LineStylesPanel({
selectedLineSize: this.strokeWidth,
selectedLineStyle: this.strokeStyle,
onClick: e => this.setStrokeStyle(e),
})}
<edgeless-line-styles-panel
.lineSize=${this.strokeWidth}
.lineStyle=${this.strokeStyle}
@select=${this.setStrokeStyle}
>
</edgeless-line-styles-panel>
</div>
<editor-toolbar-separator
data-orientation="horizontal"
@@ -54,7 +54,7 @@ export class StrokeStylePanel extends WithDisposable(LitElement) {
accessor setStrokeColor!: (e: ColorEvent) => void;
@property({ attribute: false })
accessor setStrokeStyle!: (e: LineStyleEvent) => void;
accessor setStrokeStyle!: (e: LineDetailType) => void;
@property({ attribute: false })
accessor strokeColor!: string;
blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/brush/brush-menu.ts
+2 -3
View File
@@ -1,4 +1,4 @@
import { DefaultTheme } from '@blocksuite/affine-model';
import { DefaultTheme, type LineWidth } from '@blocksuite/affine-model';
import {
EditPropsStore,
FeatureFlagService,
@@ -11,7 +11,6 @@ import { computed } from '@preact/signals-core';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import type { LineWidthEvent } from '../../panel/line-width-panel.js';
import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
@@ -56,7 +55,7 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
<div class="menu-content">
<edgeless-line-width-panel
.selectedSize=${this._props$.value.lineWidth}
@select=${(e: LineWidthEvent) =>
@select=${(e: CustomEvent<LineWidth>) =>
this.onChange({ lineWidth: e.detail })}
>
</edgeless-line-width-panel>
blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/connector/connector-menu.ts
+6 -3
View File
@@ -1,4 +1,8 @@
import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model';
import {
ConnectorMode,
DefaultTheme,
type LineWidth,
} from '@blocksuite/affine-model';
import {
EditPropsStore,
FeatureFlagService,
@@ -16,7 +20,6 @@ import { computed } from '@preact/signals-core';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import type { LineWidthEvent } from '../../panel/line-width-panel.js';
import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js';
function ConnectorModeButtonGroup(
@@ -124,7 +127,7 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
<div class="submenu-divider"></div>
<edgeless-line-width-panel
.selectedSize=${strokeWidth}
@select=${(e: LineWidthEvent) =>
@select=${(e: CustomEvent<LineWidth>) =>
this.onChange({ strokeWidth: e.detail })}
>
</edgeless-line-width-panel>
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
+1 -3
View File
@@ -16,8 +16,6 @@ import {
} from '@blocksuite/affine-shared/utils';
import { html } from 'lit';
import type { LineWidthEvent } from '../../components/panel/line-width-panel';
export const builtinBrushToolbarConfig = {
actions: [
{
@@ -28,7 +26,7 @@ export const builtinBrushToolbarConfig = {
const lineWidth =
getMostCommonValue(models, 'lineWidth') ?? LineWidth.Four;
const onPick = (e: LineWidthEvent) => {
const onPick = (e: CustomEvent<LineWidth>) => {
e.stopPropagation();
const lineWidth = e.detail;
blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts
+2 -2
View File
@@ -183,7 +183,7 @@ export const builtinConnectorToolbarConfig = {
.originalColor=${firstModel.stroke}
.enableCustomColor=${enableCustomColor}
>
<affine-edgeless-line-styles-panel
<edgeless-line-styles-panel
slot="other"
style=${styleMap({
display: 'flex',
@@ -193,7 +193,7 @@ export const builtinConnectorToolbarConfig = {
@select=${onPickStrokeStyle}
.lineSize=${strokeWidth}
.lineStyle=${strokeStyle}
></affine-edgeless-line-styles-panel>
></edgeless-line-styles-panel>
<editor-toolbar-separator
slot="separator"
data-orientation="horizontal"
blocksuite/affine/blocks/block-root/src/effects.ts
-3
View File
@@ -11,7 +11,6 @@ import {
} from './edgeless/components/note-slicer/index.js';
import { EdgelessFontFamilyPanel } from './edgeless/components/panel/font-family-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 { EdgelessNoteShadowPanel } from './edgeless/components/panel/note-shadow-panel.js';
import { EdgelessScalePanel } from './edgeless/components/panel/scale-panel.js';
@@ -213,7 +212,6 @@ function registerEdgelessToolbarComponents() {
}
function registerEdgelessPanelComponents() {
customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
customElements.define(
'edgeless-font-weight-and-style-panel',
EdgelessFontWeightAndStylePanel
@@ -307,7 +305,6 @@ declare global {
'note-slicer': NoteSlicer;
'edgeless-font-family-panel': EdgelessFontFamilyPanel;
'edgeless-font-weight-and-style-panel': EdgelessFontWeightAndStylePanel;
'edgeless-line-width-panel': EdgelessLineWidthPanel;
'note-display-mode-panel': NoteDisplayModePanel;
'edgeless-note-shadow-panel': EdgelessNoteShadowPanel;
'edgeless-scale-panel': EdgelessScalePanel;
blocksuite/affine/components/src/edgeless-line-styles-panel/index.ts
+1 -4
View File
@@ -3,8 +3,5 @@ import { EdgelessLineStylesPanel } from './line-styles-panel';
export * from './line-styles-panel';
export function effects() {
customElements.define(
'affine-edgeless-line-styles-panel',
EdgelessLineStylesPanel
);
customElements.define('edgeless-line-styles-panel', EdgelessLineStylesPanel);
}
blocksuite/affine/components/src/edgeless-line-styles-panel/line-styles-panel.ts
+3 -3
View File
@@ -49,14 +49,14 @@ export class EdgelessLineStylesPanel extends LitElement {
const { lineSize, lineStyle, lineStyles } = this;
return html`
<affine-edgeless-line-width-panel
<edgeless-line-width-panel
?disabled="${lineStyle === StrokeStyle.None}"
.selectedSize=${lineSize}
@select=${(e: CustomEvent<LineWidth>) => {
e.stopPropagation();
this.select({ type: 'size', value: e.detail });
}}
></affine-edgeless-line-width-panel>
></edgeless-line-width-panel>
<editor-toolbar-separator></editor-toolbar-separator>
@@ -102,6 +102,6 @@ export class EdgelessLineStylesPanel extends LitElement {
declare global {
interface HTMLElementTagNameMap {
'affine-edgeless-line-styles-panel': EdgelessLineStylesPanel;
'edgeless-line-styles-panel': EdgelessLineStylesPanel;
}
}
blocksuite/affine/components/src/edgeless-line-width-panel/index.ts
+1 -4
View File
@@ -3,8 +3,5 @@ import { EdgelessLineWidthPanel } from './line-width-panel';
export * from './line-width-panel';
export function effects() {
customElements.define(
'affine-edgeless-line-width-panel',
EdgelessLineWidthPanel
);
customElements.define('edgeless-line-width-panel', EdgelessLineWidthPanel);
}
blocksuite/affine/components/src/edgeless-line-width-panel/line-width-panel.ts
+1 -1
View File
@@ -239,6 +239,6 @@ export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
declare global {
interface HTMLElementTagNameMap {
'affine-edgeless-line-width-panel': EdgelessLineWidthPanel;
'edgeless-line-width-panel': EdgelessLineWidthPanel;
}
}
blocksuite/affine/components/src/edgeless-shape-color-picker/color-picker.ts
+2 -2
View File
@@ -260,12 +260,12 @@ export class EdgelessShapeColorPicker extends WithDisposable(
`
)}
<div class="picker-label">Border style</div>
<affine-edgeless-line-styles-panel
<edgeless-line-styles-panel
class="picker"
.lineSize=${strokeWidth}
.lineStyle=${strokeStyle}
@select=${this.#pickStrokeStyle}
></affine-edgeless-line-styles-panel>
></edgeless-line-styles-panel>
`;
},
],
tests/affine-local/e2e/blocksuite/edgeless/note.spec.ts
+1 -5
View File
@@ -329,11 +329,7 @@ test.describe('edgeless note element toolbar', () => {
await toolbar.getByRole('button', { name: 'Border style' }).click();
await toolbar.locator('.mode-solid').click();
await toolbar.getByRole('button', { name: 'Border style' }).click();
// TODO(@fundon): delete duplicate components
await toolbar
.locator('affine-edgeless-line-width-panel')
.getByLabel('8')
.click();
await toolbar.locator('edgeless-line-width-panel').getByLabel('8').click();
expect(await getNoteEdgelessProps(page, noteId)).toEqual({
style: {
tests/blocksuite/e2e/utils/actions/edgeless.ts
+7 -13
View File
@@ -1395,13 +1395,10 @@ export async function resizeConnectorByStartCapitalHandler(
}
export function getEdgelessLineWidthPanel(page: Page) {
return (
page
.locator('affine-toolbar-widget editor-toolbar')
// TODO(@fundon): remove ` edgeless-line-width-panel`
.locator('affine-edgeless-line-width-panel')
.locator('.line-width-panel')
);
return page
.locator('affine-toolbar-widget editor-toolbar')
.locator('edgeless-line-width-panel')
.locator('.line-width-panel');
}
export async function changeShapeStrokeWidth(page: Page) {
const lineWidthPanel = getEdgelessLineWidthPanel(page);
@@ -1461,12 +1458,9 @@ export function locatorConnectorStrokeWidthButton(
page: Page,
buttonPosition: number
) {
return (
locatorComponentToolbar(page)
// TODO(@fundon): remove redundant components
.locator('affine-edgeless-line-width-panel')
.locator(`.line-width-button:nth-child(${buttonPosition})`)
);
return locatorComponentToolbar(page)
.locator('edgeless-line-width-panel')
.locator(`.line-width-button:nth-child(${buttonPosition})`);
}
export async function changeConnectorStrokeWidth(
page: Page,