From 54bc60aa4d676e1defa05747ec5097ce191c0d30 Mon Sep 17 00:00:00 2001 From: fundon Date: Thu, 20 Mar 2025 02:08:15 +0000 Subject: [PATCH] refactor(editor): edgeless shape toolbar config extension (#10821) --- .../components/edgeless-shape-color-picker.ts | 1 + blocksuite/affine/all/src/effects.ts | 2 + .../components/toolbar/shape/shape-menu.ts | 59 +-- .../src/edgeless/configs/toolbar/connector.ts | 7 +- .../src/edgeless/configs/toolbar/mindmap.ts | 81 ++-- .../src/edgeless/configs/toolbar/shape.ts | 393 +++++++++++++++++- .../src/edgeless/configs/toolbar/types.ts | 1 + .../src/edgeless/configs/toolbar/utils.ts | 3 +- blocksuite/affine/components/package.json | 3 +- .../components/src/color-picker/button.ts | 38 +- .../components/src/color-picker/utils.ts | 34 +- .../line-styles-panel.ts | 2 +- .../color-picker.ts | 317 ++++++++++++++ .../src/edgeless-shape-color-picker/index.ts | 10 + 14 files changed, 836 insertions(+), 115 deletions(-) create mode 100644 blocksuite/affine/all/src/components/edgeless-shape-color-picker.ts create mode 100644 blocksuite/affine/components/src/edgeless-shape-color-picker/color-picker.ts create mode 100644 blocksuite/affine/components/src/edgeless-shape-color-picker/index.ts diff --git a/blocksuite/affine/all/src/components/edgeless-shape-color-picker.ts b/blocksuite/affine/all/src/components/edgeless-shape-color-picker.ts new file mode 100644 index 0000000000..a1ecdc2778 --- /dev/null +++ b/blocksuite/affine/all/src/components/edgeless-shape-color-picker.ts @@ -0,0 +1 @@ +export * from '@blocksuite/affine-components/edgeless-shape-color-picker'; diff --git a/blocksuite/affine/all/src/effects.ts b/blocksuite/affine/all/src/effects.ts index 937b3fcd33..756f203703 100644 --- a/blocksuite/affine/all/src/effects.ts +++ b/blocksuite/affine/all/src/effects.ts @@ -27,6 +27,7 @@ import { effects as componentDatePickerEffects } from '@blocksuite/affine-compon import { effects as componentDropIndicatorEffects } from '@blocksuite/affine-components/drop-indicator'; import { effects as componentEdgelessLineStylesEffects } from '@blocksuite/affine-components/edgeless-line-styles-panel'; import { effects as componentEdgelessLineWidthEffects } from '@blocksuite/affine-components/edgeless-line-width-panel'; +import { effects as componentEdgelessShapeColorPickerEffects } from '@blocksuite/affine-components/edgeless-shape-color-picker'; import { effects as componentEmbedCardModalEffects } from '@blocksuite/affine-components/embed-card-modal'; import { FilterableListComponent } from '@blocksuite/affine-components/filterable-list'; import { effects as componentHighlightDropdownMenuEffects } from '@blocksuite/affine-components/highlight-dropdown-menu'; @@ -153,6 +154,7 @@ export function effects() { componentSizeDropdownMenuEffects(); componentEdgelessLineWidthEffects(); componentEdgelessLineStylesEffects(); + componentEdgelessShapeColorPickerEffects(); widgetScrollAnchoringEffects(); widgetFrameTitleEffects(); diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-menu.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-menu.ts index c6ce034cc4..ff57f56021 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-menu.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/shape/shape-menu.ts @@ -17,6 +17,7 @@ import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit'; import { computed, effect, type Signal, signal } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; +import { when } from 'lit/directives/when.js'; import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js'; import { ShapeComponentConfig } from './shape-menu-config.js'; @@ -125,31 +126,39 @@ export class EdgelessShapeMenu extends SignalWatcher( return html`
-
- { - this._setShapeStyle(ShapeStyle.General); - }} - > - ${StyleGeneralIcon()} - - { - this._setShapeStyle(ShapeStyle.Scribbled); - }} - > - ${StyleScribbleIcon()} - -
- + ${ + // TODO(@fundon): add a flag + when( + false, + () => html` +
+ { + this._setShapeStyle(ShapeStyle.General); + }} + > + ${StyleGeneralIcon()} + + { + this._setShapeStyle(ShapeStyle.Scribbled); + }} + > + ${StyleScribbleIcon()} + +
+ + ` + ) + }
${ShapeComponentConfig.map( ({ name, generalIcon, scribbledIcon, tooltip }) => { diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts index fff492cee3..568b6c009d 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts @@ -126,7 +126,6 @@ export const builtinConnectorToolbarConfig = { actions: [ { id: 'a.stroke-color', - tooltip: 'Stroke style', content(ctx) { const models = ctx.getSurfaceModelsByType(ConnectorElementModel); if (!models.length) return null; @@ -358,9 +357,9 @@ export const builtinConnectorToolbarConfig = { // No need to adjust element bounds if (props['textAlign']) { - ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, { - labelStyle, - }); + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, { labelStyle }); return; } diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts index 7f4ce80211..d9c7ccb09a 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts @@ -9,7 +9,10 @@ import { MindmapElementModel, MindmapStyle, } from '@blocksuite/affine-model'; -import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services'; +import type { + ToolbarContext, + ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; import { getMostCommonValue } from '@blocksuite/affine-shared/utils'; import { RadiantIcon, RightLayoutIcon, StyleIcon } from '@blocksuite/icons/lit'; @@ -55,6 +58,49 @@ const MINDMAP_LAYOUT_LIST = [ }, ] as const satisfies MenuItem[]; +export const createMindmapStyleActionMenu = ( + ctx: ToolbarContext, + models: MindmapElementModel[] +) => { + const style = getMostCommonValue(models, 'style') ?? MindmapStyle.ONE; + const onPick = (style: MindmapStyle) => { + for (const model of models) { + model.style = style; + } + ctx.settings.recordLastProps('mindmap', { style }); + }; + + return renderMenu({ + label: 'Style', + icon: StyleIcon(), + items: MINDMAP_STYLE_LIST, + currentValue: style, + onPick, + }); +}; + +export const createMindmapLayoutActionMenu = ( + ctx: ToolbarContext, + models: MindmapElementModel[] +) => { + const layoutType = + getMostCommonValue(models, 'layoutType') ?? LayoutType.BALANCE; + const onPick = (layoutType: LayoutType) => { + for (const model of models) { + model.layoutType = layoutType; + model.layout(); + } + ctx.settings.recordLastProps('mindmap', { layoutType }); + }; + + return renderMenu({ + label: 'Layout', + items: MINDMAP_LAYOUT_LIST, + currentValue: layoutType, + onPick, + }); +}; + export const builtinMindmapToolbarConfig = { actions: [ { @@ -63,21 +109,7 @@ export const builtinMindmapToolbarConfig = { const models = ctx.getSurfaceModelsByType(MindmapElementModel); if (!models.length) return null; - const style = getMostCommonValue(models, 'style') ?? MindmapStyle.ONE; - const onPick = (style: MindmapStyle) => { - for (const model of models) { - model.style = style; - } - ctx.settings.recordLastProps('mindmap', { style }); - }; - - return renderMenu({ - label: 'Style', - icon: StyleIcon(), - items: MINDMAP_STYLE_LIST, - currentValue: style, - onPick, - }); + return createMindmapStyleActionMenu(ctx, models); }, }, { @@ -86,22 +118,7 @@ export const builtinMindmapToolbarConfig = { const models = ctx.getSurfaceModelsByType(MindmapElementModel); if (!models.length) return null; - const layoutType = - getMostCommonValue(models, 'layoutType') ?? LayoutType.BALANCE; - const onPick = (layoutType: LayoutType) => { - for (const model of models) { - model.layoutType = layoutType; - model.layout(); - } - ctx.settings.recordLastProps('mindmap', { layoutType }); - }; - - return renderMenu({ - label: 'Layout', - items: MINDMAP_LAYOUT_LIST, - currentValue: layoutType, - onPick, - }); + return createMindmapLayoutActionMenu(ctx, models); }, }, ], diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts index e5530aa9b0..d1452fda2e 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts @@ -1,39 +1,388 @@ -import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services'; import { - AddTextIcon, - ShapeIcon, - StyleGeneralIcon, -} from '@blocksuite/icons/lit'; + EdgelessCRUDIdentifier, + normalizeShapeBound, +} from '@blocksuite/affine-block-surface'; +import { + packColor, + type PickColorEvent, +} from '@blocksuite/affine-components/color-picker'; +import type { LineDetailType } from '@blocksuite/affine-components/edgeless-line-styles-panel'; +import { + type Color, + DefaultTheme, + FontFamily, + getShapeName, + getShapeRadius, + getShapeType, + isTransparent, + LineWidth, + MindmapElementModel, + resolveColor, + ShapeElementModel, + type ShapeName, + ShapeStyle, + ShapeType, + StrokeStyle, +} from '@blocksuite/affine-model'; +import { + FeatureFlagService, + type ToolbarGenericAction, + type ToolbarModuleConfig, +} from '@blocksuite/affine-shared/services'; +import { getMostCommonValue } from '@blocksuite/affine-shared/utils'; +import { Bound } from '@blocksuite/global/gfx'; +import { AddTextIcon, ShapeIcon } from '@blocksuite/icons/lit'; +import { html } from 'lit'; +import isEqual from 'lodash-es/isEqual'; + +import { EdgelessRootBlockComponent, type ShapeToolOption } from '../..'; +import { ShapeComponentConfig } from '../../components/toolbar/shape/shape-menu-config'; +import { mountShapeTextEditor } from '../../utils/text'; +import { LINE_STYLE_LIST } from './consts'; +import { + createMindmapLayoutActionMenu, + createMindmapStyleActionMenu, +} from './mindmap'; +import { createTextActions } from './text-common'; +import { renderMenu } from './utils'; export const builtinShapeToolbarConfig = { actions: [ { - id: 'a.switch-type', - icon: ShapeIcon(), - tooltip: 'Switch type', - run() {}, + id: 'a.mindmap-style', + when(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + return models.some(hasGrouped); + }, + content(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + if (!models.length) return null; + + let mindmaps = models + .map(model => model.group) + .filter(model => ctx.matchModel(model, MindmapElementModel)); + if (!mindmaps.length) return null; + + // Not displayed when there is both a normal shape and a mindmap shape. + if (models.length !== mindmaps.length) return null; + + mindmaps = Array.from(new Set(mindmaps)); + + return createMindmapStyleActionMenu(ctx, mindmaps); + }, }, { - id: 'b.style', - icon: StyleGeneralIcon(), - tooltip: 'Style', - run() {}, + id: 'b.mindmap-layout', + when(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + return models.some(hasGrouped); + }, + content(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + if (!models.length) return null; + + let mindmaps = models + .map(model => model.group) + .filter(model => ctx.matchModel(model, MindmapElementModel)); + if (!mindmaps.length) return null; + + // Not displayed when there is both a normal shape and a mindmap shape. + if (models.length !== mindmaps.length) return null; + + mindmaps = Array.from(new Set(mindmaps)); + + // It's a sub node. + if (models.length === 1 && mindmaps[0].tree.element !== models[0]) + return null; + + return createMindmapLayoutActionMenu(ctx, mindmaps); + }, }, { - id: 'c.fill-color', - label: 'Fill color', - run() {}, + id: 'c.switch-type', + when(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + return models.length > 0 && models.every(model => !hasGrouped(model)); + }, + content(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + if (!models.length) return null; + + const shapeName = + getMostCommonValue( + models.map(model => ({ + shapeName: getShapeName(model.shapeType, model.radius), + })), + 'shapeName' + ) ?? ShapeType.Rect; + + const onPick = (shapeName: ShapeName) => { + const shapeType = getShapeType(shapeName); + const radius = getShapeRadius(shapeName); + + ctx.std.store.captureSync(); + + for (const model of models) { + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, { shapeType, radius }); + } + }; + + return renderMenu({ + icon: ShapeIcon(), + label: 'Switch type', + items: ShapeComponentConfig.map(item => ({ + key: item.tooltip, + value: item.name, + // TODO(@fundon): should add a feature flag to switch style + icon: item.generalIcon, + disabled: item.disabled, + })), + currentValue: shapeName, + onPick, + }); + }, }, { - id: 'd.border-style', - label: 'Border style', - run() {}, + id: 'd.style', + // TODO(@fundon): should add a feature flag + when: false, + content(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + if (!models.length) return null; + + const field = 'shapeStyle'; + const shapeStyle = + getMostCommonValue(models, field) ?? ShapeStyle.General; + const onPick = (value: boolean) => { + const shapeStyle = value ? ShapeStyle.Scribbled : ShapeStyle.General; + const fontFamily = value ? FontFamily.Kalam : FontFamily.Inter; + + for (const model of models) { + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, { shapeStyle, fontFamily }); + } + }; + + return renderMenu({ + label: 'Style', + items: LINE_STYLE_LIST, + currentValue: shapeStyle === ShapeStyle.Scribbled, + onPick, + }); + }, }, { - id: 'e.text', + id: 'e.color', + when(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + return models.length > 0 && models.every(model => !hasGrouped(model)); + }, + content(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + if (!models.length) return null; + + const enableCustomColor = ctx.std + .get(FeatureFlagService) + .getFlag('enable_color_picker'); + const theme = ctx.themeProvider.edgelessTheme; + + const firstModel = models[0]; + const originalFillColor = firstModel.fillColor; + const originalStrokeColor = firstModel.strokeColor; + + const mapped = models.map( + ({ filled, fillColor, strokeColor, strokeWidth, strokeStyle }) => ({ + fillColor: filled + ? resolveColor(fillColor, theme) + : DefaultTheme.transparent, + strokeColor: resolveColor(strokeColor, theme), + strokeWidth, + strokeStyle, + }) + ); + const fillColor = + getMostCommonValue(mapped, 'fillColor') ?? + resolveColor(DefaultTheme.shapeFillColor, theme); + const strokeColor = + getMostCommonValue(mapped, 'strokeColor') ?? + resolveColor(DefaultTheme.shapeStrokeColor, theme); + const strokeWidth = + getMostCommonValue(mapped, 'strokeWidth') ?? LineWidth.Four; + const strokeStyle = + getMostCommonValue(mapped, 'strokeStyle') ?? StrokeStyle.Solid; + + const onPickFillColor = (e: CustomEvent) => { + e.stopPropagation(); + + const d = e.detail; + + const field = 'fillColor'; + + if (d.type === 'pick') { + const value = d.detail.value; + const filled = isTransparent(value); + for (const model of models) { + const props = packColor(field, value); + // If `filled` can be set separately, this logic can be removed + if (field && !model.filled) { + const color = getTextColor(value, filled); + Object.assign(props, { filled, color }); + } + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, props); + } + return; + } + + for (const model of models) { + model[d.type === 'start' ? 'stash' : 'pop'](field); + } + }; + const onPickStrokeColor = (e: CustomEvent) => { + e.stopPropagation(); + + const d = e.detail; + + const field = 'strokeColor'; + + if (d.type === 'pick') { + const value = d.detail.value; + for (const model of models) { + const props = packColor(field, value); + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, props); + } + return; + } + + for (const model of models) { + model[d.type === 'start' ? 'stash' : 'pop'](field); + } + }; + const onPickStrokeStyle = (e: CustomEvent) => { + e.stopPropagation(); + + const { type, value } = e.detail; + + if (type === 'size') { + const strokeWidth = value; + for (const model of models) { + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, { strokeWidth }); + } + return; + } + + const strokeStyle = value; + for (const model of models) { + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, { strokeStyle }); + } + }; + + return html` + + + `; + }, + }, + { + id: 'f.text', icon: AddTextIcon(), - tooltip: 'Show add button or text menu', - run() {}, + when(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + return models.length === 1 && !hasGrouped(models[0]) && !models[0].text; + }, + run(ctx) { + const model = ctx.getCurrentModelByType(ShapeElementModel); + if (!model) return; + + const rootModel = ctx.store.root; + if (!rootModel) return; + + // TODO(@fundon): it should be simple + const edgeless = ctx.view.getBlock(rootModel.id); + if (!ctx.matchBlock(edgeless, EdgelessRootBlockComponent)) { + console.error('edgeless view is not found.'); + return; + } + + mountShapeTextEditor(model, edgeless); + }, }, + // id: `g.text` + ...createTextActions(ShapeElementModel, 'shape', (ctx, model, props) => { + // No need to adjust element bounds + if (props['textAlign']) { + ctx.std.get(EdgelessCRUDIdentifier).updateElement(model.id, props); + return; + } + + const xywh = normalizeShapeBound( + model, + Bound.fromXYWH(model.deserializedXYWH) + ).serialize(); + + ctx.std + .get(EdgelessCRUDIdentifier) + .updateElement(model.id, { ...props, xywh }); + }).map(action => ({ + ...action, + id: `g.text-${action.id}`, + when(ctx) { + const models = ctx.getSurfaceModelsByType(ShapeElementModel); + return ( + models.length > 0 && + models.every(model => !hasGrouped(model) && model.text) + ); + }, + })), ], + + when: ctx => ctx.getSurfaceModelsByType(ShapeElementModel).length > 0, } as const satisfies ToolbarModuleConfig; + +// When the shape is filled with black color, the text color should be white. +// When the shape is transparent, the text color should be set according to the theme. +// Otherwise, the text color should be black. +function getTextColor(fillColor: Color, isNotTransparent = false) { + if (isNotTransparent) { + if (isEqual(fillColor, DefaultTheme.black)) { + return DefaultTheme.white; + } else if (isEqual(fillColor, DefaultTheme.white)) { + return DefaultTheme.black; + } else if (isEqual(fillColor, DefaultTheme.pureBlack)) { + return DefaultTheme.pureWhite; + } else if (isEqual(fillColor, DefaultTheme.pureWhite)) { + return DefaultTheme.pureBlack; + } + } + + // aka `DefaultTheme.pureBlack` + return DefaultTheme.shapeTextColor; +} + +function hasGrouped(model: ShapeElementModel) { + return model.group instanceof MindmapElementModel; +} diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/types.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/types.ts index 5f419937e7..e817284374 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/types.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/types.ts @@ -4,6 +4,7 @@ export type MenuItem = { key?: string; value: T; icon?: TemplateResult; + disabled?: boolean; }; export type Menu = { diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts index 6291778fc7..662f8fa25e 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/utils.ts @@ -46,9 +46,10 @@ export function renderMenuItems( return repeat( items, item => item.value, - ({ key, value, icon }) => html` + ({ key, value, icon, disabled }) => html` { - const packed = packColorsWithColorScheme( + const packed = packColorsWith( this.theme, this.color, this.originalColor diff --git a/blocksuite/affine/components/src/color-picker/utils.ts b/blocksuite/affine/components/src/color-picker/utils.ts index 402ca53c61..9ca5294b69 100644 --- a/blocksuite/affine/components/src/color-picker/utils.ts +++ b/blocksuite/affine/components/src/color-picker/utils.ts @@ -283,7 +283,7 @@ export const packColor = (key: string, color: Color) => { * @param oldColor - The old color * @returns A color array */ -export const packColorsWithColorScheme = ( +export const packColorsWith = ( colorScheme: ColorScheme, value: string, oldColor: Color @@ -308,3 +308,35 @@ export const packColorsWithColorScheme = ( return { type, colors }; }; + +export const calcCustomButtonStyle = ( + color: string, + isCustomColor: boolean, + ele: Element +) => { + let b = 'transparent'; + let c = 'transparent'; + + if (!isCustomColor) { + return { '--b': b, '--c': c }; + } + + if (color.startsWith('---')) { + if (!color.endsWith('transparent')) { + b = 'var(--affine-background-overlay-panel-color)'; + c = keepColor( + rgbaToHex8( + preprocessColor(window.getComputedStyle(ele))({ + type: 'normal', + value: color, + }).rgba + ) + ); + } + } else { + b = 'var(--affine-background-overlay-panel-color)'; + c = keepColor(color); + } + + return { '--b': b, '--c': c }; +}; diff --git a/blocksuite/affine/components/src/edgeless-line-styles-panel/line-styles-panel.ts b/blocksuite/affine/components/src/edgeless-line-styles-panel/line-styles-panel.ts index 2480ebbf56..f46794c024 100644 --- a/blocksuite/affine/components/src/edgeless-line-styles-panel/line-styles-panel.ts +++ b/blocksuite/affine/components/src/edgeless-line-styles-panel/line-styles-panel.ts @@ -50,7 +50,7 @@ export class EdgelessLineStylesPanel extends LitElement { return html` ) => { e.stopPropagation(); diff --git a/blocksuite/affine/components/src/edgeless-shape-color-picker/color-picker.ts b/blocksuite/affine/components/src/edgeless-shape-color-picker/color-picker.ts new file mode 100644 index 0000000000..9cfaacf901 --- /dev/null +++ b/blocksuite/affine/components/src/edgeless-shape-color-picker/color-picker.ts @@ -0,0 +1,317 @@ +import { + type Color, + type ColorScheme, + DefaultTheme, + type LineWidth, + type Palette, + resolveColor, + type ShapeProps, + type StrokeStyle, +} from '@blocksuite/affine-model'; +import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; +import { + type ColorEvent, + stopPropagation, +} from '@blocksuite/affine-shared/utils'; +import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit'; +import { batch, signal } from '@preact/signals-core'; +import { css, html, LitElement } from 'lit'; +import { property, query } from 'lit/decorators.js'; +import { choose } from 'lit-html/directives/choose.js'; +import { repeat } from 'lit-html/directives/repeat.js'; +import { styleMap } from 'lit-html/directives/style-map.js'; +import { when } from 'lit-html/directives/when.js'; + +import { + calcCustomButtonStyle, + keepColor, + packColorsWith, + type PickColorEvent, + preprocessColor, + rgbaToHex8, +} from '../color-picker'; +import type { LineDetailType } from '../edgeless-line-styles-panel'; +import type { EditorMenuButton } from '../toolbar'; + +type TabType = 'normal' | 'custom'; + +type ColorType = Extract; + +type PickerType = { + label: string; + type: ColorType; + value: string; + hollowCircle: boolean; + onPick: (e: ColorEvent) => void; +}; + +export class EdgelessShapeColorPicker extends WithDisposable( + SignalWatcher(LitElement) +) { + static override styles = css` + .pickers { + display: flex; + align-self: stretch; + gap: 12px; + } + + .picker { + display: flex; + align-self: stretch; + gap: 8px; + } + + .picker-label { + color: ${unsafeCSSVarV2('text/secondary')}; + font-weight: 400; + } + `; + + tabType$ = signal('normal'); + + colorType$ = signal('fillColor'); + + readonly #pickFillColor = (e: ColorEvent) => { + e.stopPropagation(); + this.dispatchEvent( + new CustomEvent('pickFillColor', { + detail: { + type: 'pick', + detail: e.detail, + }, + bubbles: true, + composed: true, + cancelable: true, + }) + ); + }; + + readonly #pickStrokeColor = (e: ColorEvent) => { + e.stopPropagation(); + this.dispatchEvent( + new CustomEvent('pickStrokeColor', { + detail: { + type: 'pick', + detail: e.detail, + }, + bubbles: true, + composed: true, + cancelable: true, + }) + ); + }; + + readonly #pickColor = (detail: PickColorEvent) => { + const type = + this.colorType$.peek() === 'fillColor' + ? 'pickFillColor' + : 'pickStrokeColor'; + this.dispatchEvent( + new CustomEvent(type, { + detail, + bubbles: true, + composed: true, + cancelable: true, + }) + ); + }; + + readonly #pickStrokeStyle = (e: CustomEvent) => { + e.stopPropagation(); + this.dispatchEvent( + new CustomEvent('pickStrokeStyle', { + detail: e.detail, + bubbles: true, + composed: true, + cancelable: true, + }) + ); + }; + + #calcCustomButtonStyle(color: string, isCustomColor: boolean) { + return calcCustomButtonStyle(color, isCustomColor, this); + } + + #calcCustomButtonState(color: string, theme: ColorScheme) { + return !this.palettes + .map(({ value }) => resolveColor(value, theme)) + .includes(color); + } + + #switchToCustomWith(type: ColorType) { + batch(() => { + this.tabType$.value = 'custom'; + this.colorType$.value = type; + }); + } + + get fillColorWithoutAlpha() { + const { fillColor } = this.payload; + return keepColor( + fillColor.startsWith('--') + ? rgbaToHex8( + preprocessColor(window.getComputedStyle(this))({ + type: 'normal', + value: fillColor, + }).rgba + ) + : fillColor + ); + } + + override firstUpdated() { + this.disposables.addFromEvent( + this.menuButton, + 'toggle', + (e: CustomEvent) => { + const opened = e.detail; + if (!opened && this.tabType$.peek() === 'custom') { + this.tabType$.value = 'normal'; + } + } + ); + } + + override render() { + const { + tabType$: { value: tabType }, + colorType$: { value: colorType }, + palettes, + fillColorWithoutAlpha, + payload: { + fillColor, + strokeColor, + strokeWidth, + strokeStyle, + originalFillColor, + originalStrokeColor, + theme, + enableCustomColor, + }, + } = this; + + return html` + + + + `} + > +
+ ${choose(tabType, [ + [ + 'normal', + () => { + return html` + ${repeat( + [ + { + label: 'Fill color', + type: 'fillColor', + value: fillColor, + hollowCircle: false, + onPick: this.#pickFillColor, + }, + { + label: 'Border color', + type: 'strokeColor', + value: strokeColor, + hollowCircle: true, + onPick: this.#pickStrokeColor, + }, + ] satisfies PickerType[], + item => item.type, + ({ label, type, value, onPick, hollowCircle }) => html` +
${label}
+ + ${when(enableCustomColor, () => { + const isCustomColor = this.#calcCustomButtonState( + value, + theme + ); + const styleInfo = this.#calcCustomButtonStyle( + value, + isCustomColor + ); + return html` + this.#switchToCustomWith(type)} + > + `; + })} + + ` + )} +
Border style
+ + `; + }, + ], + [ + 'custom', + () => { + const isFillColor = colorType === 'fillColor'; + const packed = packColorsWith( + theme, + isFillColor ? fillColor : strokeColor, + isFillColor ? originalFillColor : originalStrokeColor + ); + const type = packed.type === 'palette' ? 'normal' : packed.type; + const modes = packed.colors.map( + preprocessColor(window.getComputedStyle(this)) + ); + + return html` + + `; + }, + ], + ])} +
+ + `; + } + + @property({ attribute: false }) + accessor payload!: { + fillColor: string; + strokeColor: string; + strokeWidth: LineWidth; + strokeStyle: StrokeStyle; + originalFillColor: Color; + originalStrokeColor: Color; + theme: ColorScheme; + enableCustomColor: boolean; + }; + + @property({ attribute: false }) + accessor palettes: Palette[] = DefaultTheme.Palettes; + + @query('editor-menu-button') + accessor menuButton!: EditorMenuButton; +} diff --git a/blocksuite/affine/components/src/edgeless-shape-color-picker/index.ts b/blocksuite/affine/components/src/edgeless-shape-color-picker/index.ts new file mode 100644 index 0000000000..6bbb4dcfde --- /dev/null +++ b/blocksuite/affine/components/src/edgeless-shape-color-picker/index.ts @@ -0,0 +1,10 @@ +import { EdgelessShapeColorPicker } from './color-picker'; + +export * from './color-picker'; + +export function effects() { + customElements.define( + 'edgeless-shape-color-picker', + EdgelessShapeColorPicker + ); +}