mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +00:00
refactor(editor): remove unused panels (#11103)
This commit is contained in:
Saul-Mirone
@@ -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;
|
||||
}
|
||||
@@ -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';
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -11,9 +11,6 @@ import {
|
||||
NOTE_SLICER_WIDGET,
|
||||
NoteSlicer,
|
||||
} 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 {
|
||||
EDGELESS_DRAGGING_AREA_WIDGET,
|
||||
EdgelessDraggingAreaRectWidget,
|
||||
@@ -84,7 +81,6 @@ export function effects() {
|
||||
registerGfxEffects();
|
||||
registerWidgets();
|
||||
registerEdgelessToolbarComponents();
|
||||
registerEdgelessPanelComponents();
|
||||
registerEdgelessEditorComponents();
|
||||
registerMiscComponents();
|
||||
}
|
||||
@@ -148,12 +144,6 @@ function registerEdgelessToolbarComponents() {
|
||||
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() {
|
||||
customElements.define(
|
||||
'edgeless-group-title-editor',
|
||||
@@ -210,9 +200,6 @@ declare global {
|
||||
'edgeless-auto-complete-panel': EdgelessAutoCompletePanel;
|
||||
'edgeless-auto-complete': EdgelessAutoComplete;
|
||||
'note-slicer': NoteSlicer;
|
||||
'edgeless-scale-panel': EdgelessScalePanel;
|
||||
'edgeless-size-panel': EdgelessSizePanel;
|
||||
'stroke-style-panel': StrokeStylePanel;
|
||||
'edgeless-navigator-black-background': EdgelessNavigatorBlackBackgroundWidget;
|
||||
'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
|
||||
'edgeless-selected-rect': EdgelessSelectedRectWidget;
|
||||
|
||||
Reference in New Issue
Block a user