fix: add toolbarLocked slot

toeverything · Apr 23, 2024 · 82eb599 · 82eb599
1 parent 3bf12a2
commit 82eb599
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 28 deletions.
diff --git a/packages/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts b/packages/blocks/src/root-block/edgeless/components/toolbar/edgeless-toolbar.ts
@@ -41,7 +41,6 @@ import { stopPropagation } from '../../../../_common/utils/event.js';
 import { getImageFilesFromLocal } from '../../../../_common/utils/filesys.js';
 import type { FrameBlockModel } from '../../../../index.js';
 import { Bound, clamp } from '../../../../surface-block/index.js';
-import { CopilotSelectionController } from '../../controllers/tools/copilot-tool.js';
 import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js';
 import { isFrameBlock } from '../../utils/query.js';
 import { launchIntoFullscreen } from '../utils.js';
@@ -59,6 +58,10 @@ export class EdgelessToolbar extends WithDisposable(LitElement) {
       bottom: 28px;
     }
 
+    :host([disabled]) {
+      pointer-events: none;
+    }
+
     .edgeless-toolbar-container-placeholder {
       position: absolute;
       width: 463px;
@@ -304,7 +307,7 @@ export class EdgelessToolbar extends WithDisposable(LitElement) {
       })
     );
     _disposables.add(
-      this.edgeless.slots.navigatorSettingUpdated.on(
+      edgeless.slots.navigatorSettingUpdated.on(
         ({ hideToolbar, fillScreen }) => {
           if (hideToolbar !== undefined && hideToolbar !== this._hideToolbar) {
             this._hideToolbar = hideToolbar;
@@ -316,6 +319,12 @@ export class EdgelessToolbar extends WithDisposable(LitElement) {
         }
       )
     );
+    // The toolbar should be disabled while edgeless AI is in progress.
+    _disposables.add(
+      edgeless.slots.toolbarLocked.on(disabled => {
+        this.toggleAttribute('disabled', disabled);
+      })
+    );
 
     this._tryLoadNavigatorStateLocalRecord();
   }
@@ -349,16 +358,6 @@ export class EdgelessToolbar extends WithDisposable(LitElement) {
     }
   }
 
-  // The toolbar should be disabled while edgeless AI is in progress.
-  private _shouldBeDisabled() {
-    return (
-      this.edgelessTool.type === 'copilot' &&
-      this.edgeless.tools.currentController instanceof
-        CopilotSelectionController &&
-      this.edgeless.tools.currentController.processing
-    );
-  }
-
   protected override updated(changedProperties: PropertyValues) {
     const { type } = this.edgelessTool;
     if (
@@ -596,7 +595,6 @@ export class EdgelessToolbar extends WithDisposable(LitElement) {
       <style>
         .edgeless-toolbar-container {
           top: ${this._canHideToolbar() ? '100px' : '0px'};
-          pointer-events: ${this._shouldBeDisabled() ? 'none' : 'auto'};
         }
       </style>
       ${this.edgeless.edgelessTool.type === 'frameNavigator' &&

diff --git a/packages/blocks/src/root-block/edgeless/controllers/tools/copilot-tool.ts b/packages/blocks/src/root-block/edgeless/controllers/tools/copilot-tool.ts
@@ -45,9 +45,10 @@ export class CopilotSelectionController extends EdgelessToolController<CopilotSe
 
   // AI processing
   get processing() {
-    const aiPanel = this._edgeless.widgetElements[
-      AFFINE_AI_PANEL_WIDGET
-    ] as AffineAIPanelWidget;
+    const aiPanel = this._edgeless.host.view.getWidget(
+      AFFINE_AI_PANEL_WIDGET,
+      this._edgeless.doc.root!.id
+    ) as AffineAIPanelWidget;
     return aiPanel && aiPanel.state !== 'hidden';
   }
 

diff --git a/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts b/packages/blocks/src/root-block/edgeless/edgeless-root-service.ts
@@ -83,6 +83,8 @@ export class EdgelessRootService extends RootService {
     }>(),
     tagClicked: new Slot<{ tagId: string }>(),
     editorModeSwitch: new Slot<'edgeless' | 'page'>(),
+
+    toolbarLocked: new Slot<boolean>(),
   };
 
   private _surface!: SurfaceBlockModel;

diff --git a/packages/blocks/src/root-block/edgeless/services/tools-manager.ts b/packages/blocks/src/root-block/edgeless/services/tools-manager.ts
@@ -447,9 +447,9 @@ export class EdgelessToolsManager {
         (isCopilotType && isLastTypeDefault) ||
         // (isDefaultType && isLastTypeCopilot) ||
         (isCopilotType && isLastTypeCopilot)
-      )
+      ) {
         state = this.selection.selections; // selection should remain same when switching between default and lasso tool
-      else if (
+      } else if (
         ((isDefaultType && !isLastTypeLasso) || isLassoType) &&
         ((isDefaultType && !isLastTypeCopilot) || isCopilotType) &&
         isEmptyState &&

diff --git a/packages/blocks/src/root-block/widgets/ai-panel/ai-panel.ts b/packages/blocks/src/root-block/widgets/ai-panel/ai-panel.ts
@@ -43,6 +43,7 @@ export interface AffineAIPanelWidgetConfig {
 
   finishStateConfig: AIPanelAnswerConfig;
   errorStateConfig: AIPanelErrorConfig;
+  hideCallback?: () => void;
   discardCallback?: () => void;
 
   positionConfig?: Partial<ComputePositionConfig>;
@@ -155,6 +156,7 @@ export class AffineAIPanelWidget extends WidgetElement {
     this._inputText = null;
     this._answer = null;
     this._stopAutoUpdate = undefined;
+    this.config?.hideCallback?.();
   };
 
   discard = (callback: () => void = this._discardCallback) => {

diff --git a/packages/blocks/src/root-block/widgets/edgeless-copilot/index.ts b/packages/blocks/src/root-block/widgets/edgeless-copilot/index.ts
@@ -92,6 +92,10 @@ export class EdgelessCopilotWidget extends WidgetElement<
     this._clickOutsideOff = null;
   }
 
+  lockToolbar(disabled: boolean) {
+    this.edgeless.slots.toolbarLocked.emit(disabled);
+  }
+
   private _updateSelection(rect: DOMRect) {
     this._selectionModelRect = rect;
 

diff --git a/packages/presets/src/ai/actions/edgeless-handler.ts b/packages/presets/src/ai/actions/edgeless-handler.ts
@@ -212,6 +212,7 @@ export function actionToHandler<T extends keyof BlockSuitePresets.AIActions>(
     };
 
     edgelessCopilot.hideCopilotPanel();
+    edgelessCopilot.lockToolbar(true);
 
     assertExists(aiPanel.config);
 
@@ -224,11 +225,19 @@ export function actionToHandler<T extends keyof BlockSuitePresets.AIActions>(
     aiPanel.config.answerRenderer = actionToRenderer(id, host, ctx);
     aiPanel.config.finishStateConfig = actionToResponse(id, host, ctx);
     aiPanel.config.discardCallback = () => {
-      edgelessCopilot.visible = false;
-      edgelessCopilot.edgeless.service.tool.switchToDefaultMode({
-        elements: [],
-        editing: false,
-      });
+      aiPanel.hide();
+      // @TODO: remove `async` wrapper when removing selected-rect
+      (async () => {
+        await aiPanel.updateComplete;
+        edgelessCopilot.visible = false;
+        edgelessCopilot.edgeless.service.tool.switchToDefaultMode({
+          elements: [],
+          editing: false,
+        });
+      })().catch(console.error);
+    };
+    aiPanel.config.hideCallback = () => {
+      edgelessCopilot.lockToolbar(false);
     };
 
     if (edgelessCopilot.visible) {

diff --git a/packages/presets/src/ai/actions/edgeless-response.ts b/packages/presets/src/ai/actions/edgeless-response.ts
@@ -95,11 +95,15 @@ export function discard(
     handler: () => {
       const callback = () => {
         panel.hide();
-        copilot.visible = false;
-        copilot.edgeless.service.tool.switchToDefaultMode({
-          elements: [],
-          editing: false,
-        });
+        // @TODO: remove `async` wrapper when removing selected-rect
+        (async () => {
+          await panel.updateComplete;
+          copilot.edgeless.service.tool.switchToDefaultMode({
+            elements: [],
+            editing: false,
+          });
+          copilot.visible = false;
+        })().catch(console.error);
       };
       panel.discard(callback);
     },