feat(editor): bring back line width panel of brush in edgelss toolbar (#12514)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added the ability to select line width for pen tools, allowing users to customize brush and highlighter thickness in the toolbar menu.

- **Bug Fixes**
  - Restored and verified the functionality for adding brush elements with different sizes, ensuring accurate rendering of brush strokes based on selected size.

- **Improvements**
  - Enhanced slider component interaction by refining pointer event handling and updated slider styles for better touch interaction support.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/components/src/slider/slider.ts

@@ -92,7 +92,7 @@ export class Slider extends WithDisposable(LitElement) {
 
     const dispose = on(this, 'pointermove', this._onPointerMove);
     this._disposables.add(once(this, 'pointerup', dispose));
-    this._disposables.add(once(this, 'pointerout', dispose));
+    this._disposables.add(once(this, 'pointerleave', dispose));
   };
 
   private readonly _onPointerMove = (e: PointerEvent) => {

blocksuite/affine/components/src/slider/styles.ts

@@ -2,6 +2,11 @@ import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
 export const styles = css`
+  :host {
+    display: block;
+    touch-action: none;
+  }
+
   :host([disabled]) {
     opacity: 0.5;
     pointer-events: none;

blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts

@@ -1,5 +1,9 @@
 import { adjustColorAlpha } from '@blocksuite/affine-components/color-picker';
-import { DefaultTheme } from '@blocksuite/affine-model';
+import {
+  BRUSH_LINE_WIDTHS,
+  DefaultTheme,
+  HIGHLIGHTER_LINE_WIDTHS,
+} from '@blocksuite/affine-model';
 import {
   FeatureFlagService,
   ThemeProvider,
@@ -97,6 +101,11 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
     this.onChange({ color });
   };
 
+  private readonly _onPickLineWidth = (e: CustomEvent<number>) => {
+    e.stopPropagation();
+    this.onChange({ lineWidth: e.detail });
+  };
+
   override type = [BrushTool, HighlighterTool];
 
   override render() {
@@ -109,10 +118,13 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
         value: { brush: brushIcon, highlighter: highlighterIcon },
       },
       penInfo$: {
-        value: { type, color },
+        value: { type, color, lineWidth },
       },
     } = this;
 
+    const lineWidths =
+      type === 'brush' ? BRUSH_LINE_WIDTHS : HIGHLIGHTER_LINE_WIDTHS;
+
     return html`
       <edgeless-slide-menu>
         <div class="pens" slot="prefix">
@@ -156,6 +168,13 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
           <menu-divider .vertical=${true}></menu-divider>
         </div>
         <div class="menu-content">
+          <edgeless-line-width-panel
+            .selectedSize=${lineWidth}
+            .lineWidths=${lineWidths}
+            @select=${this._onPickLineWidth}
+          >
+          </edgeless-line-width-panel>
+          <menu-divider .vertical=${true}></menu-divider>
           <edgeless-color-panel
             class="one-way"
             @select=${this._onPickColor}
@@ -189,6 +208,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
     type: Pen;
     color: string;
     icon: TemplateResult<1>;
+    lineWidth: number;
     tip: string;
     shortcut: string;
   }>;

blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts

@@ -73,6 +73,20 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
     return this.colors$.value[pen];
   });
 
+  private readonly lineWidths$ = computed(() => {
+    const brush = this.settings.lastProps$.value.brush.lineWidth;
+    const highlighter = this.settings.lastProps$.value.highlighter.lineWidth;
+    return {
+      brush,
+      highlighter,
+    };
+  });
+
+  private readonly lineWidth$ = computed(() => {
+    const pen = this.pen$.value;
+    return this.lineWidths$.value[pen];
+  });
+
   private readonly penIconMap$ = computed(() => {
     const theme = this.themeProvider.app$.value;
     return penIconMap[theme];
@@ -85,13 +99,12 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
 
   private readonly penInfo$ = computed(() => {
     const type = this.pen$.value;
-    const icon = this.penIcon$.value;
-    const color = this.color$.value;
     return {
       ...penInfoMap[type],
-      color,
+      type: this.pen$.value,
-      icon,
+      icon: this.penIcon$.value,
-      type,
+      color: this.color$.value,
+      lineWidth: this.lineWidth$.value,
     };
   });
 

tests/blocksuite/e2e/edgeless/brush.spec.ts

@@ -120,8 +120,7 @@ test('keep same color when mouse mode switched back to brush', async ({
   await assertEdgelessColorSameWithHexColor(page, color, pickedColor);
 });
 
-// TODO(@fundon): should add it back?
+test('add brush element with different size', async ({ page }) => {
-test.skip('add brush element with different size', async ({ page }) => {
   await enterPlaygroundRoom(page);
   await initEmptyEdgelessState(page);
   await switchEditorMode(page);