From 934469cb44e1b48187f9090674e91be110a5ae5a Mon Sep 17 00:00:00 2001
From: Chen <99816898+donteatfriedrice@users.noreply.github.com>
Date: Tue, 5 Mar 2024 14:53:26 +0800
Subject: [PATCH] fix: use editorModeSwitch slot to change mode (#6380)

---
 .../frame-panel/body/frame-panel-body.ts      |  5 +---
 .../src/fragments/frame-panel/frame-panel.ts  |  6 ----
 .../frame-panel/header/frame-panel-header.ts  | 29 +++++++++++--------
 3 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/presets/src/fragments/frame-panel/body/frame-panel-body.ts b/packages/presets/src/fragments/frame-panel/body/frame-panel-body.ts
index c8f2c2a4372a..ae0a4037aa87 100644
--- a/packages/presets/src/fragments/frame-panel/body/frame-panel-body.ts
+++ b/packages/presets/src/fragments/frame-panel/body/frame-panel-body.ts
@@ -92,9 +92,6 @@ export class FramePanelBody extends WithDisposable(ShadowlessElement) {
   @property({ attribute: false })
   editorHost!: EditorHost;
 
-  @property({ attribute: false })
-  changeEditorMode!: (mode: 'page' | 'edgeless') => void;
-
   // Store the ids of the selected frames
   @state()
   private _selected: string[] = [];
@@ -255,7 +252,7 @@ export class FramePanelBody extends WithDisposable(ShadowlessElement) {
 
       const rootService = this.editorHost.spec.getService('affine:page');
       rootService.editSession.setItem('viewport', viewport);
-      this.changeEditorMode('edgeless');
+      rootService.slots.editorModeSwitch.emit('edgeless');
     } else {
       this.edgeless.service.viewport.setViewportByBound(
         bound,
diff --git a/packages/presets/src/fragments/frame-panel/frame-panel.ts b/packages/presets/src/fragments/frame-panel/frame-panel.ts
index 60c98c071c83..62b16ef99c15 100644
--- a/packages/presets/src/fragments/frame-panel/frame-panel.ts
+++ b/packages/presets/src/fragments/frame-panel/frame-panel.ts
@@ -89,10 +89,6 @@ export class FramePanel extends WithDisposable(ShadowlessElement) {
     return this.editor.querySelector('affine-edgeless-root');
   }
 
-  private _changeEditorMode = (mode: 'page' | 'edgeless') => {
-    this.editor.mode = mode;
-  };
-
   private _editorDisposables: DisposableGroup | null = null;
 
   private _clearEditorDisposables() {
@@ -143,7 +139,6 @@ export class FramePanel extends WithDisposable(ShadowlessElement) {
     return html`<div class="frame-panel-container">
       <frame-panel-header
         .edgeless=${this.edgeless}
-        .changeEditorMode=${this._changeEditorMode}
         .editorHost=${this.host}
       ></frame-panel-header>
       <frame-panel-body
@@ -151,7 +146,6 @@ export class FramePanel extends WithDisposable(ShadowlessElement) {
         .edgeless=${this.edgeless}
         .doc=${this.doc}
         .editorHost=${this.host}
-        .changeEditorMode=${this._changeEditorMode}
         .fitPadding=${this.fitPadding}
       ></frame-panel-body>
     </div>`;
diff --git a/packages/presets/src/fragments/frame-panel/header/frame-panel-header.ts b/packages/presets/src/fragments/frame-panel/header/frame-panel-header.ts
index d628f0241869..baadd754fef0 100644
--- a/packages/presets/src/fragments/frame-panel/header/frame-panel-header.ts
+++ b/packages/presets/src/fragments/frame-panel/header/frame-panel-header.ts
@@ -108,9 +108,6 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
   @property({ attribute: false })
   edgeless!: EdgelessRootBlockComponent | null;
 
-  @property({ attribute: false })
-  changeEditorMode!: (mode: 'page' | 'edgeless') => void;
-
   @state()
   private _settingPopperShow = false;
 
@@ -127,16 +124,24 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
   private _navigatorMode: NavigatorMode = 'fit';
   private _edgelessDisposables: DisposableGroup | null = null;
 
+  get rootService() {
+    return this.editorHost.spec.getService('affine:page');
+  }
+
   private _enterPresentationMode = () => {
-    if (!this.edgeless) this.changeEditorMode('edgeless');
-    this.edgeless?.updateComplete
-      .then(() => {
-        this.edgeless?.tools.setEdgelessTool({
-          type: 'frameNavigator',
-          mode: this._navigatorMode,
-        });
-      })
-      .catch(console.error);
+    if (!this.edgeless)
+      this.rootService.slots.editorModeSwitch.emit('edgeless');
+
+    setTimeout(() => {
+      this.edgeless?.updateComplete
+        .then(() => {
+          this.edgeless?.tools.setEdgelessTool({
+            type: 'frameNavigator',
+            mode: this._navigatorMode,
+          });
+        })
+        .catch(console.error);
+    }, 100);
   };
 
   private _tryLoadNavigatorStateLocalRecord() {