Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 12:28:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): remove unused panels (#11103)

Browse Source
This commit is contained in:
Saul-Mirone
2025-03-24 03:14:23 +00:00
parent 5525c2bc8d
commit dfd633b8b0
4 changed files with 0 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/scale-panel.ts
View File

@@ -1,132 +0,0 @@
import { stopPropagation } from '@blocksuite/affine-shared/utils';
import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import clamp from 'lodash-es/clamp';
const MIN_SCALE = 0;
const MAX_SCALE = 400;
const SCALE_LIST = [50, 100, 200] as const;
function format(scale: number) {
return `${scale}%`;
}
// TODO(@fundon): remove it after refacting is completed
export class EdgelessScalePanel extends LitElement {
static override styles = css`
:host {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 68px;
}
edgeless-tool-icon-button {
align-self: stretch;
}
.scale-input {
display: flex;
align-self: stretch;
border: 0.5px solid var(--affine-border-color);
border-radius: 8px;
padding: 4px 8px;
box-sizing: border-box;
}
.scale-input::placeholder {
color: var(--affine-placeholder-color);
}
.scale-input:focus {
outline-color: var(--affine-primary-color);
outline-width: 0.5px;
}
`;
private readonly _onKeydown = (e: KeyboardEvent) => {
e.stopPropagation();
if (e.key === 'Enter' && !e.isComposing) {
e.preventDefault();
const input = e.target as HTMLInputElement;
const scale = parseInt(input.value.trim());
// Handle edge case where user enters a non-number
if (isNaN(scale)) {
input.value = '';
return;
}
// Handle edge case when user enters a number that is out of range
this._onSelect(clamp(scale, this.minScale, this.maxScale));
input.value = '';
this._onPopperClose();
}
};
private _onPopperClose() {
this.onPopperCose?.();
}
private _onSelect(scale: number) {
this.onSelect?.(scale / 100);
}
override render() {
return html`
${repeat(
this.scaleList,
scale => scale,
scale => {
const classes = `scale-${scale}`;
return html`<edgeless-tool-icon-button
class=${classes}
.iconContainerPadding=${[4, 8]}
.activeMode=${'background'}
.active=${this.scale === scale}
@click=${() => this._onSelect(scale)}
>
${format(scale)}
</edgeless-tool-icon-button>`;
}
)}
<input
class="scale-input"
type="text"
inputmode="numeric"
pattern="[0-9]*"
min="0"
placeholder=${format(Math.trunc(this.scale))}
@keydown=${this._onKeydown}
@input=${stopPropagation}
@click=${stopPropagation}
@pointerdown=${stopPropagation}
@cut=${stopPropagation}
@copy=${stopPropagation}
@paste=${stopPropagation}
/>
`;
}
@property({ attribute: false })
accessor maxScale: number = MAX_SCALE;
@property({ attribute: false })
accessor minScale: number = MIN_SCALE;
@property({ attribute: false })
accessor onPopperCose: (() => void) | undefined = undefined;
@property({ attribute: false })
accessor onSelect: ((size: number) => void) | undefined = undefined;
@property({ attribute: false })
accessor scale!: number;
@property({ attribute: false })
accessor scaleList: readonly number[] = SCALE_LIST;
}

162
blocksuite/affine/blocks/block-root/src/edgeless/components/panel/size-panel.ts
View File

@@ -1,162 +0,0 @@
import { stopPropagation } from '@blocksuite/affine-shared/utils';
import { DoneIcon } from '@blocksuite/icons/lit';
import { css, html, LitElement, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import clamp from 'lodash-es/clamp';
const MIN_SIZE = 1;
const MAX_SIZE = 200;
type SizeItem = {
name?: string;
value: number;
};
export class EdgelessSizePanel extends LitElement {
static override styles = css`
:host {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
width: 68px;
}
edgeless-tool-icon-button {
align-self: stretch;
}
.size-input {
display: flex;
align-self: stretch;
width: 100%;
border: 0.5px solid var(--affine-border-color);
border-radius: 8px;
padding: 4px 8px;
box-sizing: border-box;
}
.size-input::placeholder {
color: var(--affine-placeholder-color);
}
.size-input:focus {
outline-color: var(--affine-primary-color);
outline-width: 0.5px;
}
:host([data-type='check']) {
gap: 0;
}
:host([data-type='check']) .size-input {
margin-top: 4px;
}
`;
private readonly _onKeydown = (e: KeyboardEvent) => {
e.stopPropagation();
if (e.key === 'Enter' && !e.isComposing) {
e.preventDefault();
const input = e.target as HTMLInputElement;
const size = parseInt(input.value.trim());
// Handle edge case where user enters a non-number
if (isNaN(size)) {
input.value = '';
return;
}
// Handle edge case when user enters a number that is out of range
this._onSelect(clamp(size, this.minSize, this.maxSize));
input.value = '';
this._onPopperClose();
}
};
renderItemWithCheck = ({ name, value }: SizeItem) => {
const active = this.size === value;
return html`
<edgeless-tool-icon-button
.iconContainerPadding=${[4, 8]}
.justify=${'space-between'}
.active=${active}
.iconSize=${'20px'}
@click=${() => this._onSelect(value)}
>
${name ?? value} ${active ? DoneIcon() : nothing}
</edgeless-tool-icon-button>
`;
};
renderItemWithNormal = ({ name, value }: SizeItem) => {
return html`
<edgeless-tool-icon-button
.iconContainerPadding=${[4, 8]}
.active=${this.size === value}
.activeMode=${'background'}
@click=${() => this._onSelect(value)}
>
${name ?? value}
</edgeless-tool-icon-button>
`;
};
private _onPopperClose() {
this.onPopperCose?.();
}
private _onSelect(size: number) {
this.onSelect?.(size);
}
override render() {
return html`
${repeat(this.sizeList, sizeItem => sizeItem.name, this.renderItem())}
<input
class="size-input"
type="text"
inputmode="numeric"
pattern="[0-9]*"
min="0"
placeholder=${Math.trunc(this.size)}
@keydown=${this._onKeydown}
@input=${stopPropagation}
@click=${stopPropagation}
@pointerdown=${stopPropagation}
@cut=${stopPropagation}
@copy=${stopPropagation}
@paste=${stopPropagation}
/>
`;
}
renderItem() {
return this.type === 'normal'
? this.renderItemWithNormal
: this.renderItemWithCheck;
}
@property({ attribute: false })
accessor maxSize: number = MAX_SIZE;
@property({ attribute: false })
accessor minSize: number = MIN_SIZE;
@property({ attribute: false })
accessor onPopperCose: (() => void) | undefined = undefined;
@property({ attribute: false })
accessor onSelect: ((size: number) => void) | undefined = undefined;
@property({ attribute: false })
accessor size!: number;
@property({ attribute: false })
accessor sizeList!: SizeItem[];
@property({ attribute: 'data-type' })
accessor type: 'normal' | 'check' = 'normal';
}

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

@@ -1,70 +0,0 @@
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';
export class StrokeStylePanel extends WithDisposable(LitElement) {
static override styles = css`
:host {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.line-styles {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
`;
override render() {
return html`
<div class="line-styles">
<edgeless-line-styles-panel
.lineSize=${this.strokeWidth}
.lineStyle=${this.strokeStyle}
@select=${this.setStrokeStyle}
>
</edgeless-line-styles-panel>
</div>
<editor-toolbar-separator
data-orientation="horizontal"
></editor-toolbar-separator>
<edgeless-color-panel
role="listbox"
aria-label="Border colors"
.value=${this.strokeColor}
.theme=${this.theme}
.hollowCircle=${this.hollowCircle}
@select=${(e: ColorEvent) => this.setStrokeColor(e)}
>
</edgeless-color-panel>
`;
}
@property({ attribute: false })
accessor hollowCircle: boolean | undefined = undefined;
@property({ attribute: false })
accessor setStrokeColor!: (e: ColorEvent) => void;
@property({ attribute: false })
accessor setStrokeStyle!: (e: LineDetailType) => void;
@property({ attribute: false })
accessor strokeColor!: string;
@property({ attribute: false })
accessor strokeStyle!: StrokeStyle;
@property({ attribute: false })
accessor strokeWidth!: number;
@property({ attribute: false })
accessor theme!: ColorScheme;
}

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

@@ -11,9 +11,6 @@ import {
NOTE_SLICER_WIDGET, NOTE_SLICER_WIDGET,
NoteSlicer, NoteSlicer,
} from './edgeless/components/note-slicer/index.js'; } from './edgeless/components/note-slicer/index.js';
import { EdgelessScalePanel } from './edgeless/components/panel/scale-panel.js';
import { EdgelessSizePanel } from './edgeless/components/panel/size-panel.js';
import { StrokeStylePanel } from './edgeless/components/panel/stroke-style-panel.js';
import { import {
EDGELESS_DRAGGING_AREA_WIDGET, EDGELESS_DRAGGING_AREA_WIDGET,
EdgelessDraggingAreaRectWidget, EdgelessDraggingAreaRectWidget,
@@ -84,7 +81,6 @@ export function effects() {
registerGfxEffects(); registerGfxEffects();
registerWidgets(); registerWidgets();
registerEdgelessToolbarComponents(); registerEdgelessToolbarComponents();
registerEdgelessPanelComponents();
registerEdgelessEditorComponents(); registerEdgelessEditorComponents();
registerMiscComponents(); registerMiscComponents();
} }
@@ -148,12 +144,6 @@ function registerEdgelessToolbarComponents() {
customElements.define('toolbar-arrow-up-icon', ToolbarArrowUpIcon); customElements.define('toolbar-arrow-up-icon', ToolbarArrowUpIcon);
} }
function registerEdgelessPanelComponents() {
customElements.define('edgeless-size-panel', EdgelessSizePanel);
customElements.define('edgeless-scale-panel', EdgelessScalePanel);
customElements.define('stroke-style-panel', StrokeStylePanel);
}
function registerEdgelessEditorComponents() { function registerEdgelessEditorComponents() {
customElements.define( customElements.define(
'edgeless-group-title-editor', 'edgeless-group-title-editor',
@@ -210,9 +200,6 @@ declare global {
'edgeless-auto-complete-panel': EdgelessAutoCompletePanel; 'edgeless-auto-complete-panel': EdgelessAutoCompletePanel;
'edgeless-auto-complete': EdgelessAutoComplete; 'edgeless-auto-complete': EdgelessAutoComplete;
'note-slicer': NoteSlicer; 'note-slicer': NoteSlicer;
'edgeless-scale-panel': EdgelessScalePanel;
'edgeless-size-panel': EdgelessSizePanel;
'stroke-style-panel': StrokeStylePanel;
'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget; 'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget; 'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
'edgeless-selected-rect': EdgelessSelectedRectWidget; 'edgeless-selected-rect': EdgelessSelectedRectWidget;