diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/scale-panel.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/scale-panel.ts deleted file mode 100644 index 71c60527d..000000000 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/scale-panel.ts +++ /dev/null @@ -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` this._onSelect(scale)} - > - ${format(scale)} - `; - } - )} - - - `; - } - - @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; -} diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/size-panel.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/size-panel.ts deleted file mode 100644 index ca323b492..000000000 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/size-panel.ts +++ /dev/null @@ -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` - this._onSelect(value)} - > - ${name ?? value} ${active ? DoneIcon() : nothing} - - `; - }; - - renderItemWithNormal = ({ name, value }: SizeItem) => { - return html` - this._onSelect(value)} - > - ${name ?? value} - - `; - }; - - private _onPopperClose() { - this.onPopperCose?.(); - } - - private _onSelect(size: number) { - this.onSelect?.(size); - } - - override render() { - return html` - ${repeat(this.sizeList, sizeItem => sizeItem.name, this.renderItem())} - - - `; - } - - 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'; -} diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/stroke-style-panel.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/stroke-style-panel.ts deleted file mode 100644 index 1c35d6c21..000000000 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/panel/stroke-style-panel.ts +++ /dev/null @@ -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` -
- - -
- - this.setStrokeColor(e)} - > - - `; - } - - @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; -} diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts index 0bd89b30d..018f3cc4a 100644 --- a/blocksuite/affine/blocks/block-root/src/effects.ts +++ b/blocksuite/affine/blocks/block-root/src/effects.ts @@ -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;