fix(editor): can move frame by dragging title (#12661)

Close [BS-3351](https://linear.app/affine-design/issue/BS-3351/无法通过拖拽frame-title来拖拽frame)

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

- **New Features**
  - Improved rendering performance and consistency for widgets within frames.
  - Frame titles are now directly associated with individual frames and are draggable.

- **Bug Fixes**
  - Selection logic for frames has been refined to better handle locked states and title area interactions.

- **Refactor**
  - Frame title widget and related components have been simplified for clarity and maintainability.
  - Removed dynamic positioning and click toggling from frame titles for a cleaner interaction model.

- **Tests**
  - Added a test to verify that frame titles are draggable.
  - Temporarily disabled tests related to frame title stacking and selection due to ongoing changes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/widgets/frame-title/src/affine-frame-title-widget.ts

@@ -1,43 +1,21 @@
-import { FrameBlockModel, type RootBlockModel } from '@blocksuite/affine-model';
+import { type FrameBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent, WidgetViewExtension } from '@blocksuite/std';
 import { html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
-import type { AffineFrameTitle } from './frame-title.js';
-
 export const AFFINE_FRAME_TITLE_WIDGET = 'affine-frame-title-widget';
 
-export class AffineFrameTitleWidget extends WidgetComponent<RootBlockModel> {
-  private get _frames() {
-    return Object.values(this.store.blocks.value)
-      .map(({ model }) => model)
-      .filter(model => model instanceof FrameBlockModel);
-  }
-
-  getFrameTitle(frame: FrameBlockModel | string) {
-    const id = typeof frame === 'string' ? frame : frame.id;
-    const frameTitle = this.shadowRoot?.querySelector(
-      `affine-frame-title[data-id="${id}"]`
-    ) as AffineFrameTitle | null;
-    return frameTitle;
-  }
-
+export class AffineFrameTitleWidget extends WidgetComponent<FrameBlockModel> {
   override render() {
-    return repeat(
-      this._frames,
-      ({ id }) => id,
-      frame =>
-        html`<affine-frame-title
-          .model=${frame}
-          data-id=${frame.id}
-        ></affine-frame-title>`
-    );
+    return html`<affine-frame-title
+      .model=${this.model}
+      data-id=${this.model.id}
+    ></affine-frame-title>`;
   }
 }
 
 export const frameTitleWidget = WidgetViewExtension(
-  'affine:page',
+  'affine:frame',
   AFFINE_FRAME_TITLE_WIDGET,
   literal`${unsafeStatic(AFFINE_FRAME_TITLE_WIDGET)}`
 );

blocksuite/affine/widgets/frame-title/src/edgeless-frame-title-editor.ts

@@ -14,6 +14,7 @@ import {
   AFFINE_FRAME_TITLE_WIDGET,
   type AffineFrameTitleWidget,
 } from './affine-frame-title-widget';
+import type { AffineFrameTitle } from './frame-title';
 import { frameTitleStyleVars } from './styles';
 
 export class EdgelessFrameTitleEditor extends WithDisposable(
@@ -135,12 +136,13 @@ export class EdgelessFrameTitleEditor extends WithDisposable(
 
     const frameTitleWidget = this.edgeless.std.view.getWidget(
       AFFINE_FRAME_TITLE_WIDGET,
-      rootBlockId
+      this.frameModel.id
     ) as AffineFrameTitleWidget | null;
 
     if (!frameTitleWidget) return nothing;
 
-    const frameTitle = frameTitleWidget.getFrameTitle(this.frameModel);
+    const frameTitle =
+      frameTitleWidget.querySelector<AffineFrameTitle>('affine-frame-title');
 
     const colors = frameTitle?.colors ?? {
       background: cssVarV2('edgeless/frame/background/white'),

blocksuite/affine/widgets/frame-title/src/frame-title.ts

@@ -142,12 +142,10 @@ export class AffineFrameTitle extends SignalWatcher(
       }px)`,
     ];
 
-    const anchor = this.gfx.viewport.toViewCoord(bound.x, bound.y);
-
     this.style.display = '';
     this.style.setProperty('--bg-color', this.colors.background);
-    this.style.left = `${anchor[0]}px`;
-    this.style.top = `${anchor[1]}px`;
+    this.style.left = '0px';
+    this.style.top = '0px';
     this.style.display = hidden ? 'none' : 'flex';
     this.style.transform = transformOperation.join(' ');
     this.style.maxWidth = `${maxWidth}px`;
@@ -205,18 +203,6 @@ export class AffineFrameTitle extends SignalWatcher(
       })
     );
 
-    _disposables.add(
-      on(this, 'click', evt => {
-        if (evt.shiftKey) {
-          this.gfx.selection.toggle(this.model);
-        } else {
-          this.gfx.selection.set({
-            elements: [this.model.id],
-          });
-        }
-      })
-    );
-
     _disposables.add(
       on(this, 'dblclick', () => {
         const edgeless = this.std.view.getBlock(this.std.store.root?.id || '');