From 597b6319189a61a48f2474805738bbbfcbeeed52 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Tue, 31 Dec 2024 07:23:37 +0000 Subject: [PATCH] refactor(editor): extract color picker component (#9456) --- blocksuite/affine/components/package.json | 1 + .../components/src}/color-picker/button.ts | 4 ++-- .../src}/color-picker/color-picker.ts | 0 .../components/src}/color-picker/consts.ts | 0 .../src}/color-picker/custom-button.ts | 0 .../components/src/color-picker/index.ts | 20 +++++++++++++++++++ .../components/src}/color-picker/styles.ts | 0 .../components/src}/color-picker/types.ts | 0 .../components/src}/color-picker/utils.ts | 0 blocksuite/affine/shared/src/utils/event.ts | 17 ++++++++++++++++ blocksuite/blocks/src/effects.ts | 14 ++----------- .../edgeless/components/color-picker/index.ts | 3 --- .../edgeless/components/panel/color-panel.ts | 17 +--------------- .../components/panel/stroke-style-panel.ts | 2 +- .../components/toolbar/brush/brush-menu.ts | 2 +- .../toolbar/connector/connector-menu.ts | 2 +- .../components/toolbar/shape/shape-menu.ts | 2 +- .../components/toolbar/text/text-menu.ts | 2 +- .../element-toolbar/change-brush-button.ts | 16 ++++++++------- .../change-connector-button.ts | 16 ++++++++------- .../element-toolbar/change-frame-button.ts | 16 ++++++++------- .../element-toolbar/change-note-button.ts | 16 +++++++-------- .../element-toolbar/change-shape-button.ts | 16 ++++++++------- .../element-toolbar/change-text-menu.ts | 18 ++++++++--------- .../widgets/frame-title/frame-title.ts | 2 +- .../edgeless/color-picker.spec.ts | 2 +- blocksuite/tests-legacy/package.json | 1 + tools/utils/src/workspace.gen.ts | 1 + yarn.lock | 1 + 29 files changed, 106 insertions(+), 85 deletions(-) rename blocksuite/{blocks/src/root-block/edgeless/components => affine/components/src}/color-picker/button.ts (97%) rename blocksuite/{blocks/src/root-block/edgeless/components => affine/components/src}/color-picker/color-picker.ts (100%) rename blocksuite/{blocks/src/root-block/edgeless/components => affine/components/src}/color-picker/consts.ts (100%) rename blocksuite/{blocks/src/root-block/edgeless/components => affine/components/src}/color-picker/custom-button.ts (100%) create mode 100644 blocksuite/affine/components/src/color-picker/index.ts rename blocksuite/{blocks/src/root-block/edgeless/components => affine/components/src}/color-picker/styles.ts (100%) rename blocksuite/{blocks/src/root-block/edgeless/components => affine/components/src}/color-picker/types.ts (100%) rename blocksuite/{blocks/src/root-block/edgeless/components => affine/components/src}/color-picker/utils.ts (100%) delete mode 100644 blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts diff --git a/blocksuite/affine/components/package.json b/blocksuite/affine/components/package.json index adf2d7c9d3..d5ba4c9cb8 100644 --- a/blocksuite/affine/components/package.json +++ b/blocksuite/affine/components/package.json @@ -36,6 +36,7 @@ "exports": { ".": "./src/index.ts", "./ai-item": "./src/ai-item/index.ts", + "./color-picker": "./src/color-picker/index.ts", "./icons": "./src/icons/index.ts", "./peek": "./src/peek/index.ts", "./portal": "./src/portal/index.ts", diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts b/blocksuite/affine/components/src/color-picker/button.ts similarity index 97% rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts rename to blocksuite/affine/components/src/color-picker/button.ts index e71578d5d6..f324d1d1c1 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/button.ts +++ b/blocksuite/affine/components/src/color-picker/button.ts @@ -1,6 +1,6 @@ -import type { EditorMenuButton } from '@blocksuite/affine-components/toolbar'; import type { ColorScheme, Palette } from '@blocksuite/affine-model'; import { resolveColor } from '@blocksuite/affine-model'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/utils'; import { html, LitElement } from 'lit'; import { property, query, state } from 'lit/decorators.js'; @@ -8,7 +8,7 @@ import { choose } from 'lit/directives/choose.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { styleMap } from 'lit/directives/style-map.js'; -import type { ColorEvent } from '../panel/color-panel.js'; +import type { EditorMenuButton } from '../toolbar/menu-button.js'; import type { ModeType, PickColorEvent, PickColorType } from './types.js'; import { keepColor, preprocessColor, rgbaToHex8 } from './utils.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts b/blocksuite/affine/components/src/color-picker/color-picker.ts similarity index 100% rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/color-picker.ts rename to blocksuite/affine/components/src/color-picker/color-picker.ts diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts b/blocksuite/affine/components/src/color-picker/consts.ts similarity index 100% rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/consts.ts rename to blocksuite/affine/components/src/color-picker/consts.ts diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts b/blocksuite/affine/components/src/color-picker/custom-button.ts similarity index 100% rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/custom-button.ts rename to blocksuite/affine/components/src/color-picker/custom-button.ts diff --git a/blocksuite/affine/components/src/color-picker/index.ts b/blocksuite/affine/components/src/color-picker/index.ts new file mode 100644 index 0000000000..b22f3b4da5 --- /dev/null +++ b/blocksuite/affine/components/src/color-picker/index.ts @@ -0,0 +1,20 @@ +import { EdgelessColorPickerButton } from './button.js'; +import { EdgelessColorPicker } from './color-picker.js'; +import { EdgelessColorCustomButton } from './custom-button.js'; + +export * from './button.js'; +export * from './color-picker.js'; +export * from './types.js'; +export * from './utils.js'; + +export function effects() { + customElements.define('edgeless-color-picker', EdgelessColorPicker); + customElements.define( + 'edgeless-color-picker-button', + EdgelessColorPickerButton + ); + customElements.define( + 'edgeless-color-custom-button', + EdgelessColorCustomButton + ); +} diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/styles.ts b/blocksuite/affine/components/src/color-picker/styles.ts similarity index 100% rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/styles.ts rename to blocksuite/affine/components/src/color-picker/styles.ts diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts b/blocksuite/affine/components/src/color-picker/types.ts similarity index 100% rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/types.ts rename to blocksuite/affine/components/src/color-picker/types.ts diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts b/blocksuite/affine/components/src/color-picker/utils.ts similarity index 100% rename from blocksuite/blocks/src/root-block/edgeless/components/color-picker/utils.ts rename to blocksuite/affine/components/src/color-picker/utils.ts diff --git a/blocksuite/affine/shared/src/utils/event.ts b/blocksuite/affine/shared/src/utils/event.ts index 56edcce8ea..daa5a6e395 100644 --- a/blocksuite/affine/shared/src/utils/event.ts +++ b/blocksuite/affine/shared/src/utils/event.ts @@ -1,3 +1,4 @@ +import type { Palette } from '@blocksuite/affine-model'; import { IS_IOS, IS_MAC } from '@blocksuite/global/env'; export function isTouchPadPinchEvent(e: WheelEvent) { @@ -347,3 +348,19 @@ export const createKeydownObserver = ({ // Fix composition input target.addEventListener('compositionend', () => onInput?.(true), { signal }); }; + +export class ColorEvent extends Event { + detail: Palette; + + constructor( + type: string, + { + detail, + composed, + bubbles, + }: { detail: Palette; composed: boolean; bubbles: boolean } + ) { + super(type, { bubbles, composed }); + this.detail = detail; + } +} diff --git a/blocksuite/blocks/src/effects.ts b/blocksuite/blocks/src/effects.ts index 762d14a189..07c6cf021c 100644 --- a/blocksuite/blocks/src/effects.ts +++ b/blocksuite/blocks/src/effects.ts @@ -18,6 +18,7 @@ import { effects as componentAiItemEffects } from '@blocksuite/affine-components import { BlockSelection } from '@blocksuite/affine-components/block-selection'; import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width'; import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption'; +import { effects as componentColorPickerEffects } from '@blocksuite/affine-components/color-picker'; import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu'; import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker'; import { effects as componentDragIndicatorEffects } from '@blocksuite/affine-components/drag-indicator'; @@ -43,9 +44,6 @@ import { EdgelessAutoCompletePanel } from './root-block/edgeless/components/auto import { EdgelessAutoComplete } from './root-block/edgeless/components/auto-complete/edgeless-auto-complete.js'; import { EdgelessToolIconButton } from './root-block/edgeless/components/buttons/tool-icon-button.js'; import { EdgelessToolbarButton } from './root-block/edgeless/components/buttons/toolbar-button.js'; -import { EdgelessColorPickerButton } from './root-block/edgeless/components/color-picker/button.js'; -import { EdgelessColorPicker } from './root-block/edgeless/components/color-picker/color-picker.js'; -import { EdgelessColorCustomButton } from './root-block/edgeless/components/color-picker/custom-button.js'; import { EdgelessConnectorHandle } from './root-block/edgeless/components/connector/connector-handle.js'; import { NOTE_SLICER_WIDGET, @@ -221,6 +219,7 @@ export function effects() { componentDragIndicatorEffects(); componentToggleButtonEffects(); componentAiItemEffects(); + componentColorPickerEffects(); widgetScrollAnchoringEffects(); widgetMobileToolbarEffects(); @@ -241,10 +240,6 @@ export function effects() { 'edgeless-copilot-toolbar-entry', EdgelessCopilotToolbarEntry ); - customElements.define( - 'edgeless-color-custom-button', - EdgelessColorCustomButton - ); customElements.define('edgeless-connector-handle', EdgelessConnectorHandle); customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar); customElements.define( @@ -331,13 +326,8 @@ export function effects() { EdgelessNavigatorSettingButton ); customElements.define('edgeless-present-button', EdgelessPresentButton); - customElements.define('edgeless-color-picker', EdgelessColorPicker); customElements.define('overlay-scrollbar', OverlayScrollbar); customElements.define('affine-template-loading', AffineTemplateLoading); - customElements.define( - 'edgeless-color-picker-button', - EdgelessColorPickerButton - ); customElements.define('edgeless-auto-complete', EdgelessAutoComplete); customElements.define( 'edgeless-font-weight-and-style-panel', diff --git a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts b/blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts deleted file mode 100644 index cedd0c7974..0000000000 --- a/blocksuite/blocks/src/root-block/edgeless/components/color-picker/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './button.js'; -export * from './color-picker.js'; -export * from './types.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts index 3f76a3f93a..198449d8ac 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/color-panel.ts @@ -1,6 +1,7 @@ import type { Color, ColorScheme, Palette } from '@blocksuite/affine-model'; import { isTransparent, resolveColor } from '@blocksuite/affine-model'; import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; +import { ColorEvent } from '@blocksuite/affine-shared/utils'; import { css, html, LitElement, nothing, svg, type TemplateResult } from 'lit'; import { property } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -8,22 +9,6 @@ import { ifDefined } from 'lit/directives/if-defined.js'; import { repeat } from 'lit/directives/repeat.js'; import isEqual from 'lodash.isequal'; -export class ColorEvent extends Event { - detail: Palette; - - constructor( - type: string, - { - detail, - composed, - bubbles, - }: { detail: Palette; composed: boolean; bubbles: boolean } - ) { - super(type, { bubbles, composed }); - this.detail = detail; - } -} - function TransparentIcon(hollowCircle = false) { const CircleIcon: TemplateResult | typeof nothing = hollowCircle ? svg`` diff --git a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts index 5fb4fa543c..23362f35fe 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/panel/stroke-style-panel.ts @@ -3,11 +3,11 @@ import { DefaultTheme, type StrokeStyle, } from '@blocksuite/affine-model'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; -import type { ColorEvent } from './color-panel.js'; import { type LineStyleEvent, LineStylesPanel } from './line-styles-panel.js'; export class StrokeStylePanel extends WithDisposable(LitElement) { diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts index 5441c110c6..0ab04a116b 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts @@ -3,13 +3,13 @@ import { EditPropsStore, ThemeProvider, } from '@blocksuite/affine-shared/services'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { SignalWatcher } from '@blocksuite/global/utils'; import { computed } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; -import type { ColorEvent } from '../../panel/color-panel.js'; import type { LineWidthEvent } from '../../panel/line-width-panel.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts index ce4e05c5f9..c01bbdb572 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts @@ -8,13 +8,13 @@ import { EditPropsStore, ThemeProvider, } from '@blocksuite/affine-shared/services'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { SignalWatcher } from '@blocksuite/global/utils'; import { computed } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; -import type { ColorEvent } from '../../panel/color-panel.js'; import type { LineWidthEvent } from '../../panel/line-width-panel.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts index 3d3a892634..93d6df368e 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts @@ -14,13 +14,13 @@ import { EditPropsStore, ThemeProvider, } from '@blocksuite/affine-shared/services'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils'; import { computed, effect, type Signal, signal } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js'; -import type { ColorEvent } from '../../panel/color-panel.js'; import { ShapeComponentConfig } from './shape-menu-config.js'; export class EdgelessShapeMenu extends SignalWatcher( diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts index cac9589dc8..f18ede9188 100644 --- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts +++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/text/text-menu.ts @@ -1,11 +1,11 @@ import { DefaultTheme } from '@blocksuite/affine-model'; import { ThemeProvider } from '@blocksuite/affine-shared/services'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { computed } from '@preact/signals-core'; import { css, html, LitElement, nothing } from 'lit'; import { property } from 'lit/decorators.js'; -import type { ColorEvent } from '../../panel/color-panel.js'; import { EdgelessToolbarToolMixin } from '../mixins/tool.mixin.js'; export class EdgelessTextMenu extends EdgelessToolbarToolMixin(LitElement) { diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts index ea7308f76e..261ec8f3a5 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts @@ -1,4 +1,12 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; +import type { + EdgelessColorPickerButton, + PickColorEvent, +} from '@blocksuite/affine-components/color-picker'; +import { + packColor, + packColorsWithColorScheme, +} from '@blocksuite/affine-components/color-picker'; import type { BrushElementModel, BrushProps, @@ -9,18 +17,12 @@ import { LineWidth, resolveColor, } from '@blocksuite/affine-model'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils'; import { html, LitElement, nothing } from 'lit'; import { property, query } from 'lit/decorators.js'; import { when } from 'lit/directives/when.js'; -import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; -import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js'; -import { - packColor, - packColorsWithColorScheme, -} from '../../edgeless/components/color-picker/utils.js'; -import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import type { LineWidthEvent } from '../../edgeless/components/panel/line-width-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts index 1e580f9021..ea9c4a138f 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts @@ -1,4 +1,12 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; +import type { + EdgelessColorPickerButton, + PickColorEvent, +} from '@blocksuite/affine-components/color-picker'; +import { + packColor, + packColorsWithColorScheme, +} from '@blocksuite/affine-components/color-picker'; import { AddTextIcon, ConnectorCWithArrowIcon, @@ -34,6 +42,7 @@ import { resolveColor, StrokeStyle, } from '@blocksuite/affine-model'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils'; import { html, LitElement, nothing, type TemplateResult } from 'lit'; import { property, query } from 'lit/decorators.js'; @@ -43,13 +52,6 @@ import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import { when } from 'lit/directives/when.js'; -import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; -import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js'; -import { - packColor, - packColorsWithColorScheme, -} from '../../edgeless/components/color-picker/utils.js'; -import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import { type LineStyleEvent, LineStylesPanel, diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts index e8560f0dd7..ac846721d9 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts @@ -1,4 +1,12 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; +import type { + EdgelessColorPickerButton, + PickColorEvent, +} from '@blocksuite/affine-components/color-picker'; +import { + packColor, + packColorsWithColorScheme, +} from '@blocksuite/affine-components/color-picker'; import { NoteIcon, RenameIcon, @@ -14,6 +22,7 @@ import { NoteDisplayMode, resolveColor, } from '@blocksuite/affine-model'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { matchFlavours } from '@blocksuite/affine-shared/utils'; import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx'; import { @@ -28,13 +37,6 @@ import { property, query } from 'lit/decorators.js'; import { join } from 'lit/directives/join.js'; import { when } from 'lit/directives/when.js'; -import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; -import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js'; -import { - packColor, - packColorsWithColorScheme, -} from '../../edgeless/components/color-picker/utils.js'; -import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; import type { EdgelessFrameManager } from '../../edgeless/frame-manager.js'; import { mountFrameTitleEditor } from '../../edgeless/utils/text.js'; diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts index 9a2b77aed6..5a9468e0c3 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts @@ -1,4 +1,12 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; +import type { + EdgelessColorPickerButton, + PickColorEvent, +} from '@blocksuite/affine-components/color-picker'; +import { + packColor, + packColorsWithColorScheme, +} from '@blocksuite/affine-components/color-picker'; import { ExpandIcon, LineStyleIcon, @@ -35,14 +43,6 @@ import { join } from 'lit/directives/join.js'; import { createRef, type Ref, ref } from 'lit/directives/ref.js'; import { when } from 'lit/directives/when.js'; -import type { - EdgelessColorPickerButton, - PickColorEvent, -} from '../../edgeless/components/color-picker/index.js'; -import { - packColor, - packColorsWithColorScheme, -} from '../../edgeless/components/color-picker/utils.js'; import { type LineStyleEvent, LineStylesPanel, diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts index 129e5ea5fe..bd3e2b6ad4 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts @@ -1,4 +1,12 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; +import type { + EdgelessColorPickerButton, + PickColorEvent, +} from '@blocksuite/affine-components/color-picker'; +import { + packColor, + packColorsWithColorScheme, +} from '@blocksuite/affine-components/color-picker'; import { AddTextIcon, ChangeShapeIcon, @@ -26,6 +34,7 @@ import { ShapeStyle, StrokeStyle, } from '@blocksuite/affine-model'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils'; import { css, html, LitElement, nothing, type TemplateResult } from 'lit'; import { property, query } from 'lit/decorators.js'; @@ -36,13 +45,6 @@ import { styleMap } from 'lit/directives/style-map.js'; import { when } from 'lit/directives/when.js'; import isEqual from 'lodash.isequal'; -import type { EdgelessColorPickerButton } from '../../edgeless/components/color-picker/button.js'; -import type { PickColorEvent } from '../../edgeless/components/color-picker/types.js'; -import { - packColor, - packColorsWithColorScheme, -} from '../../edgeless/components/color-picker/utils.js'; -import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import { type LineStyleEvent, LineStylesPanel, diff --git a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts index ff8e2de202..d78a9ccffa 100644 --- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts +++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts @@ -4,6 +4,14 @@ import { normalizeShapeBound, TextUtils, } from '@blocksuite/affine-block-surface'; +import type { + EdgelessColorPickerButton, + PickColorEvent, +} from '@blocksuite/affine-components/color-picker'; +import { + packColor, + packColorsWithColorScheme, +} from '@blocksuite/affine-components/color-picker'; import { SmallArrowDownIcon, TextAlignCenterIcon, @@ -25,6 +33,7 @@ import { TextElementModel, type TextStyleProps, } from '@blocksuite/affine-model'; +import type { ColorEvent } from '@blocksuite/affine-shared/utils'; import { Bound, countBy, @@ -37,15 +46,6 @@ import { choose } from 'lit/directives/choose.js'; import { join } from 'lit/directives/join.js'; import { when } from 'lit/directives/when.js'; -import type { - EdgelessColorPickerButton, - PickColorEvent, -} from '../../edgeless/components/color-picker/index.js'; -import { - packColor, - packColorsWithColorScheme, -} from '../../edgeless/components/color-picker/utils.js'; -import type { ColorEvent } from '../../edgeless/components/panel/color-panel.js'; import type { EdgelessRootBlockComponent } from '../../edgeless/edgeless-root-block.js'; const FONT_SIZE_LIST = [ diff --git a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts index 7e4f587090..cbb5abe474 100644 --- a/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts +++ b/blocksuite/blocks/src/root-block/widgets/frame-title/frame-title.ts @@ -1,3 +1,4 @@ +import { parseStringToRgba } from '@blocksuite/affine-components/color-picker'; import { ColorScheme, FrameBlockModel, @@ -22,7 +23,6 @@ import { themeToVar } from '@toeverything/theme/v2'; import { LitElement } from 'lit'; import { property, state } from 'lit/decorators.js'; -import { parseStringToRgba } from '../../edgeless/components/color-picker/utils.js'; import type { EdgelessRootService } from '../../edgeless/index.js'; import { frameTitleStyle, frameTitleStyleVars } from './styles.js'; diff --git a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts index 6f9f2a53fc..ed7676b2f3 100644 --- a/blocksuite/tests-legacy/edgeless/color-picker.spec.ts +++ b/blocksuite/tests-legacy/edgeless/color-picker.spec.ts @@ -1,4 +1,4 @@ -import { parseStringToRgba } from '@blocks/root-block/edgeless/components/color-picker/utils.js'; +import { parseStringToRgba } from '@blocksuite/affine-components/color-picker'; import { expect, type Locator, type Page } from '@playwright/test'; import { dragBetweenCoords } from 'utils/actions/drag.js'; import { diff --git a/blocksuite/tests-legacy/package.json b/blocksuite/tests-legacy/package.json index 4e5497f44d..d282b92f31 100644 --- a/blocksuite/tests-legacy/package.json +++ b/blocksuite/tests-legacy/package.json @@ -7,6 +7,7 @@ "test": "yarn playwright test" }, "dependencies": { + "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/block-std": "workspace:*", "@blocksuite/global": "workspace:*", diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index fda973a239..7ae3874b72 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -415,6 +415,7 @@ export const PackageList = [ location: 'blocksuite/tests-legacy', name: '@blocksuite/legacy-e2e', workspaceDependencies: [ + 'blocksuite/affine/components', 'blocksuite/affine/model', 'blocksuite/framework/block-std', 'blocksuite/framework/global', diff --git a/yarn.lock b/yarn.lock index 06613da38f..4a7684e9a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3953,6 +3953,7 @@ __metadata: version: 0.0.0-use.local resolution: "@blocksuite/legacy-e2e@workspace:blocksuite/tests-legacy" dependencies: + "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/block-std": "workspace:*" "@blocksuite/global": "workspace:*"