refactor(editor): edgeless brush toolbar config extension (#10796)

blocksuite/affine/blocks/block-root/src/edgeless/components/panel/line-width-panel.ts

@@ -14,21 +14,7 @@ interface Config {
   count: number;
 }
 
-export class LineWidthEvent extends Event {
+export class LineWidthEvent extends CustomEvent<LineWidth> {}
-  detail: LineWidth;
-
-  constructor(
-    type: string,
-    {
-      detail,
-      composed,
-      bubbles,
-    }: { detail: LineWidth; composed: boolean; bubbles: boolean }
-  ) {
-    super(type, { bubbles, composed });
-    this.detail = detail;
-  }
-}
 
 export class EdgelessLineWidthPanel extends WithDisposable(LitElement) {
   static override styles = css`

blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts

@@ -1,11 +1,107 @@
-import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  packColor,
+  type PickColorEvent,
+} from '@blocksuite/affine-components/color-picker';
+import {
+  BrushElementModel,
+  DefaultTheme,
+  LineWidth,
+  resolveColor,
+} from '@blocksuite/affine-model';
+import {
+  FeatureFlagService,
+  type ToolbarModuleConfig,
+} from '@blocksuite/affine-shared/services';
+import {
+  getMostCommonResolvedValue,
+  getMostCommonValue,
+} from '@blocksuite/affine-shared/utils';
+import { html } from 'lit';
+
+import type { LineWidthEvent } from '../../components/panel/line-width-panel';
 
 export const builtinBrushToolbarConfig = {
   actions: [
     {
-      id: 'a.test',
+      id: 'a.line-width',
-      label: 'Brush',
+      content(ctx) {
-      run() {},
+        const models = ctx.getSurfaceModelsByType(BrushElementModel);
+        if (!models.length) return null;
+
+        const lineWidth =
+          getMostCommonValue(models, 'lineWidth') ?? LineWidth.Four;
+        const onPick = (e: LineWidthEvent) => {
+          e.stopPropagation();
+
+          const lineWidth = e.detail;
+
+          for (const model of models) {
+            ctx.std
+              .get(EdgelessCRUDIdentifier)
+              .updateElement(model.id, { lineWidth });
+          }
+        };
+
+        return html`
+          <edgeless-line-width-panel
+            .selectedSize=${lineWidth}
+            @select=${onPick}
+          >
+          </edgeless-line-width-panel>
+        `;
+      },
+    },
+    {
+      id: 'b.color-picker',
+      content(ctx) {
+        const models = ctx.getSurfaceModelsByType(BrushElementModel);
+        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 color =
+          getMostCommonResolvedValue(models, 'color', color =>
+            resolveColor(color, theme)
+          ) ?? resolveColor(DefaultTheme.black, theme);
+        const onPick = (e: PickColorEvent) => {
+          const field = 'color';
+
+          if (e.type === 'pick') {
+            const color = e.detail.value;
+            for (const model of models) {
+              const props = packColor(field, color);
+              ctx.std
+                .get(EdgelessCRUDIdentifier)
+                .updateElement(model.id, props);
+            }
+            return;
+          }
+
+          for (const model of models) {
+            model[e.type === 'start' ? 'stash' : 'pop'](field);
+          }
+        };
+
+        return html`
+          <edgeless-color-picker-button
+            class="color"
+            .label="${'Color'}"
+            .pick=${onPick}
+            .color=${color}
+            .theme=${theme}
+            .originalColor=${firstModel.color}
+            .enableCustomColor=${enableCustomColor}
+          >
+          </edgeless-color-picker-button>
+        `;
+      },
     },
   ],
+
+  when: ctx => ctx.getSurfaceModelsByType(BrushElementModel).length > 0,
 } as const satisfies ToolbarModuleConfig;

blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts

@@ -15,6 +15,11 @@ import { builtinTextToolbarConfig } from './text';
 export const EdgelessElementToolbarExtension: ExtensionType[] = [
   createFrameToolbarConfig(FrameBlockSchema.model.flavour),
 
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:group'),
+    config: builtinGroupToolbarConfig,
+  }),
+
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:brush'),
     config: builtinBrushToolbarConfig,
@@ -25,11 +30,6 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
     config: builtinConnectorToolbarConfig,
   }),
 
-  ToolbarModuleExtension({
-    id: BlockFlavourIdentifier('affine:surface:group'),
-    config: builtinGroupToolbarConfig,
-  }),
-
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:mindmap'),
     config: builtinMindmapToolbarConfig,