refactor(editor): render presentation toolbar on demand

toeverything · Dec 31, 2024 · d1fb81f · d1fb81f
1 parent 79e0064
commit d1fb81f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 15 deletions.
diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
@@ -657,17 +657,18 @@ export class EdgelessToolbarWidget extends WidgetComponent<
               @mousedown=${stopPropagation}
               @pointerdown=${stopPropagation}
             >
-              <presentation-toolbar
-                .visible=${this.isPresentMode}
-                .edgeless=${this.block}
-                .settingMenuShow=${this.presentSettingMenuShow}
-                .frameMenuShow=${this.presentFrameMenuShow}
-                .setSettingMenuShow=${(show: boolean) =>
-                  (this.presentSettingMenuShow = show)}
-                .setFrameMenuShow=${(show: boolean) =>
-                  (this.presentFrameMenuShow = show)}
-                .containerWidth=${this.containerWidth}
-              ></presentation-toolbar>
+              ${this.isPresentMode
+                ? html`<presentation-toolbar
+                    .edgeless=${this.block}
+                    .settingMenuShow=${this.presentSettingMenuShow}
+                    .frameMenuShow=${this.presentFrameMenuShow}
+                    .setSettingMenuShow=${(show: boolean) =>
+                      (this.presentSettingMenuShow = show)}
+                    .setFrameMenuShow=${(show: boolean) =>
+                      (this.presentFrameMenuShow = show)}
+                    .containerWidth=${this.containerWidth}
+                  ></presentation-toolbar>`
+                : nothing}
               ${this.isPresentMode ? nothing : this._renderContent()}
             </div>
           </smooth-corner>

diff --git a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/presentation-toolbar.ts
@@ -322,7 +322,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
     return html`
       <style>
         :host {
-          display: ${this.visible ? 'flex' : 'none'};
+          display: flex;
         }
       </style>
       <edgeless-tool-icon-button
@@ -442,9 +442,6 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
 
   @property({ type: Boolean })
   accessor settingMenuShow = false;
-
-  @property({ attribute: true, type: Boolean })
-  accessor visible = true;
 }
 
 declare global {