refactor: move edgeless page slots to edgeless page service

packages/blocks/src/page-block/edgeless/components/toolbar/brush/brush-tool-button.ts

@@ -81,7 +81,7 @@ export class EdgelessBrushToolButton extends EdgelessToolButton<
     if (this._states.some(key => changedProperties.has(key))) {
       if (this._menu) {
         this.updateMenu();
-        this.edgeless.slots.edgelessToolUpdated.emit({
+        this.edgeless.tools.setEdgelessTool({
           type: this._type,
         });
       }

packages/blocks/src/page-block/edgeless/components/toolbar/connector/connector-tool-button.ts

@@ -76,7 +76,7 @@ export class EdgelessConnectorToolButton extends EdgelessToolButton<
     if (this._states.some(key => changedProperties.has(key))) {
       if (this._menu) {
         this.updateMenu();
-        this.edgeless.slots.edgelessToolUpdated.emit({
+        this.edgeless.tools.setEdgelessTool({
           type: this._type,
           mode: this.mode,
         });

packages/blocks/src/page-block/edgeless/components/toolbar/note/note-menu.ts

@@ -62,7 +62,7 @@ export class EdgelessNoteMenu extends WithDisposable(LitElement) {
   childFlavour!: NoteChildrenFlavour;
 
   @property({ attribute: false })
-  childType!: string;
+  childType!: string | null;
 
   @property({ attribute: false })
   tip!: string;
@@ -76,6 +76,22 @@ export class EdgelessNoteMenu extends WithDisposable(LitElement) {
     }>
   ) => void;
 
+  override firstUpdated() {
+    this.disposables.add(
+      this.edgeless.slots.edgelessToolUpdated.on(tool => {
+        if (tool.type !== 'affine:note') return;
+        this.childFlavour = tool.childFlavour;
+        this.childType = tool.childType;
+        this.tip = tool.tip;
+      })
+    );
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.disposables.dispose();
+  }
+
   override render() {
     if (this.edgeless.edgelessTool.type !== 'affine:note') return nothing;
 

packages/blocks/src/page-block/edgeless/components/toolbar/note/note-tool-button.ts

@@ -78,7 +78,7 @@ export class EdgelessNoteToolButton extends WithDisposable(LitElement) {
             Object.assign(this, { [key]: props[key] });
           }
         });
-        this.edgeless.slots.edgelessToolUpdated.emit({
+        this.edgeless.tools.setEdgelessTool({
           type: 'affine:note',
           childFlavour: this.childFlavour,
           childType: this.childType,

packages/blocks/src/page-block/edgeless/components/toolbar/shape/shape-tool-button.ts

@@ -189,7 +189,7 @@ export class EdgelessShapeToolButton extends EdgelessToolButton<
     if (this._states.some(key => changedProperties.has(key))) {
       if (this._menu) {
         this.updateMenu();
-        this.edgeless.slots.edgelessToolUpdated.emit({
+        this.edgeless.tools.setEdgelessTool({
           type: this._type,
           shapeType: this.shapeType,
         });

packages/blocks/src/page-block/edgeless/components/zoom/zoom-toolbar.ts

@@ -12,12 +12,7 @@ import {
   type EdgelessTool,
   stopPropagation,
 } from '../../../../_common/utils/index.js';
-import { clamp } from '../../../../_common/utils/math.js';
-import {
-  ZOOM_MAX,
-  ZOOM_MIN,
-  ZOOM_STEP,
-} from '../../../../surface-block/index.js';
+import { ZOOM_STEP } from '../../../../surface-block/index.js';
 import type { EdgelessPageBlockComponent } from '../../edgeless-page-block.js';
 
 export type ZoomAction = 'fit' | 'out' | 'reset' | 'in';
@@ -110,41 +105,22 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
     return this.edgeless.edgelessTool;
   }
 
+  get edgelessService() {
+    return this.edgeless.service;
+  }
+
   get zoom() {
     return this.viewport.zoom;
   }
 
   get viewport() {
-    return this.edgeless.service.viewport;
-  }
-
-  private _setZoomByStep(step: number) {
-    this.viewport.smoothZoom(clamp(this.zoom + step, ZOOM_MIN, ZOOM_MAX));
-  }
-
-  private _zoomToFit() {
-    const { centerX, centerY, zoom } = this.edgeless.getFitToScreenData();
-    this.viewport.setViewport(zoom, [centerX, centerY], true);
+    return this.edgelessService.viewport;
   }
 
   setEdgelessTool = (edgelessTool: EdgelessTool) => {
     this.edgeless.tools.setEdgelessTool(edgelessTool);
   };
 
-  setZoomByAction(action: ZoomAction) {
-    switch (action) {
-      case 'fit':
-        this._zoomToFit();
-        break;
-      case 'reset':
-        this.viewport.smoothZoom(1.0);
-        break;
-      case 'in':
-      case 'out':
-        this._setZoomByStep(ZOOM_STEP * (action === 'in' ? 1 : -1));
-    }
-  }
-
   override firstUpdated() {
     const {
       _disposables,
@@ -189,15 +165,15 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
           .tooltip=${'Fit to screen'}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top-end'}
           .arrow=${!this._isVerticalBar()}
-          @click=${() => this._zoomToFit()}
+          @click=${() => this.edgelessService.zoomToFit()}
         >
           ${ViewBarIcon}
         </edgeless-tool-icon-button>
         <edgeless-tool-icon-button
           .tooltip=${'Zoom out'}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
           .arrow=${!this._isVerticalBar()}
-          @click=${() => this._setZoomByStep(-ZOOM_STEP)}
+          @click=${() => this.edgelessService.setZoomByStep(-ZOOM_STEP)}
         >
           ${MinusIcon}
         </edgeless-tool-icon-button>
@@ -208,7 +184,7 @@ export class EdgelessZoomToolbar extends WithDisposable(LitElement) {
           .tooltip=${'Zoom in'}
           .tipPosition=${this._isVerticalBar() ? 'right' : 'top'}
           .arrow=${!this._isVerticalBar()}
-          @click=${() => this._setZoomByStep(ZOOM_STEP)}
+          @click=${() => this.edgelessService.setZoomByStep(ZOOM_STEP)}
         >
           ${PlusIcon}
         </edgeless-tool-icon-button>

packages/blocks/src/page-block/edgeless/controllers/tools/default-tool.ts

@@ -245,7 +245,8 @@ export class DefaultToolController extends EdgelessToolController<DefaultTool> {
       const viewport = this._service.viewport;
       if (viewport.zoom === 1) {
         // Fit to Screen
-        const { centerX, centerY, zoom } = this._edgeless.getFitToScreenData();
+        const { centerX, centerY, zoom } =
+          this._edgeless.service.getFitToScreenData();
         viewport.setViewport(zoom, [centerX, centerY], true);
       } else {
         // Zoom to 100% and Center

packages/blocks/src/page-block/edgeless/controllers/tools/note-tool.ts

@@ -131,7 +131,7 @@ export class NoteToolController extends EdgelessToolController<NoteTool> {
 
     if (width < NOTE_MIN_WIDTH || height < NOTE_MIN_HEIGHT) {
       //TODO: add toast to notify user
-      this._edgeless.slots.edgelessToolUpdated.emit({ type: 'default' });
+      this._edgeless.tools.setEdgelessTool({ type: 'default' });
       return;
     }
 

packages/blocks/src/page-block/edgeless/controllers/tools/pan-tool.ts

@@ -33,7 +33,7 @@ export class PanToolController extends EdgelessToolController<PanTool> {
 
   onContainerDragStart(e: PointerEventState) {
     this._lastPoint = [e.x, e.y];
-    this._edgeless.slots.edgelessToolUpdated.emit({
+    this._edgeless.tools.setEdgelessTool({
       type: 'pan',
       panning: true,
     });
@@ -56,7 +56,7 @@ export class PanToolController extends EdgelessToolController<PanTool> {
 
   onContainerDragEnd() {
     this._lastPoint = null;
-    this._edgeless.slots.edgelessToolUpdated.emit({
+    this._edgeless.tools.setEdgelessTool({
       type: 'pan',
       panning: false,
     });

packages/blocks/src/page-block/edgeless/edgeless-keyboard.ts

@@ -152,19 +152,19 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
         },
         'Mod-1': ctx => {
           ctx.get('defaultState').event.preventDefault();
-          this.pageElement.slots.zoomUpdated.emit('fit');
+          this.pageElement.service.setZoomByAction('fit');
         },
         'Mod--': ctx => {
           ctx.get('defaultState').event.preventDefault();
-          this.pageElement.slots.zoomUpdated.emit('out');
+          this.pageElement.service.setZoomByAction('out');
         },
         'Mod-0': ctx => {
           ctx.get('defaultState').event.preventDefault();
-          this.pageElement.slots.zoomUpdated.emit('reset');
+          this.pageElement.service.setZoomByAction('reset');
         },
         'Mod-=': ctx => {
           ctx.get('defaultState').event.preventDefault();
-          this.pageElement.slots.zoomUpdated.emit('in');
+          this.pageElement.service.setZoomByAction('in');
         },
         Backspace: () => {
           this._delete();