refactor(editor): extract color picker component

toeverything · Dec 31, 2024 · 49112e7 · 49112e7
1 parent 1e34ec8
commit 49112e7
Show file tree

Hide file tree

Showing 29 changed files with 106 additions and 85 deletions.
diff --git 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/...dgeless/components/color-picker/button.ts → ...ine/components/src/color-picker/button.ts b/...dgeless/components/color-picker/button.ts → ...ine/components/src/color-picker/button.ts
@@ -1,14 +1,14 @@
-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';
 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/...s/components/color-picker/color-picker.ts → ...mponents/src/color-picker/color-picker.ts b/...s/components/color-picker/color-picker.ts → ...mponents/src/color-picker/color-picker.ts
diff --git a/...dgeless/components/color-picker/consts.ts → ...ine/components/src/color-picker/consts.ts b/...dgeless/components/color-picker/consts.ts → ...ine/components/src/color-picker/consts.ts
diff --git a/.../components/color-picker/custom-button.ts → ...ponents/src/color-picker/custom-button.ts b/.../components/color-picker/custom-button.ts → ...ponents/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
@@ -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/...dgeless/components/color-picker/styles.ts → ...ine/components/src/color-picker/styles.ts b/...dgeless/components/color-picker/styles.ts → ...ine/components/src/color-picker/styles.ts
diff --git a/...edgeless/components/color-picker/types.ts → ...fine/components/src/color-picker/types.ts b/...edgeless/components/color-picker/types.ts → ...fine/components/src/color-picker/types.ts
diff --git a/...edgeless/components/color-picker/utils.ts → ...fine/components/src/color-picker/utils.ts b/...edgeless/components/color-picker/utils.ts → ...fine/components/src/color-picker/utils.ts
diff --git 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
@@ -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
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
@@ -1,29 +1,14 @@
 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';
 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`<circle cx="10" cy="10" r="8" fill="white" />`

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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,