fix: corner cases of dnd (#8978)

toeverything · Dec 14, 2024 · dab972f · dab972f
1 parent baab5a1
commit dab972f
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 59 deletions.
diff --git a/packages/affine/block-embed/src/common/embed-block-element.ts b/packages/affine/block-embed/src/common/embed-block-element.ts
@@ -84,6 +84,8 @@ export class EmbedBlockComponent<
    */
   protected _scale = 1;
 
+  blockDraggable = true;
+
   /**
    * The style of the embed card.
    * You can use this to change the height and width of the card.
@@ -108,7 +110,7 @@ export class EmbedBlockComponent<
     const selected = !!this.selected?.is('block');
     return html`
       <div
-        draggable="true"
+        draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'embed-block-container': true,
           'selected-style': selected,

diff --git a/packages/affine/block-embed/src/common/to-edgeless-embed-block.ts b/packages/affine/block-embed/src/common/to-edgeless-embed-block.ts
@@ -32,6 +32,8 @@ export function toEdgelessEmbedBlock<
 
     override [blockComponentSymbol] = true;
 
+    override blockDraggable = false;
+
     protected override embedContainerStyle: StyleInfo = {};
 
     override [GfxElementSymbol] = true;

diff --git a/packages/blocks/src/attachment-block/attachment-block.ts b/packages/blocks/src/attachment-block/attachment-block.ts
@@ -78,6 +78,8 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
     }
   );
 
+  blockDraggable = true;
+
   protected containerStyleMap = styleMap({
     position: 'relative',
     width: '100%',
@@ -227,7 +229,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
       <div
         ${this._whenHover ? ref(this._whenHover.setReference) : nothing}
         class="affine-attachment-container"
-        draggable="true"
+        draggable="${this.blockDraggable ? 'true' : 'false'}"
         style=${this.containerStyleMap}
       >
         ${embedView

diff --git a/packages/blocks/src/attachment-block/attachment-edgeless-block.ts b/packages/blocks/src/attachment-block/attachment-edgeless-block.ts
@@ -17,6 +17,8 @@ export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent(
 ) {
   protected override _whenHover: HoverController | null = null;
 
+  override blockDraggable = false;
+
   get rootService() {
     return this.std.getService('affine:page') as EdgelessRootService;
   }

diff --git a/packages/blocks/src/bookmark-block/bookmark-block.ts b/packages/blocks/src/bookmark-block/bookmark-block.ts
@@ -21,6 +21,8 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<
 > {
   private _fetchAbortController?: AbortController;
 
+  blockDraggable = true;
+
   protected containerStyleMap!: ReturnType<typeof styleMap>;
 
   open = () => {
@@ -75,7 +77,7 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<
     const selected = !!this.selected?.is('block');
     return html`
       <div
-        draggable="true"
+        draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'affine-bookmark-container': true,
           'selected-style': selected,

diff --git a/packages/blocks/src/bookmark-block/bookmark-edgeless-block.ts b/packages/blocks/src/bookmark-block/bookmark-edgeless-block.ts
@@ -10,6 +10,8 @@ import { BookmarkBlockComponent } from './bookmark-block.js';
 export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
   BookmarkBlockComponent
 ) {
+  override blockDraggable = false;
+
   override getRenderingRect() {
     const elementBound = this.model.elementBound;
     const style = this.model.style$.value;

diff --git a/packages/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts b/packages/blocks/src/root-block/widgets/drag-handle/watchers/drag-event-watcher.ts
@@ -41,20 +41,22 @@ import { surfaceRefToEmbed } from '../middleware/surface-ref-to-embed.js';
 import { containBlock, includeTextSelection } from '../utils.js';
 
 export class DragEventWatcher {
-  private _computeEdgelessBound = (width: number, height: number) => {
-    const rect = this.widget.dragPreview?.getBoundingClientRect();
-    if (!rect) return null;
-
+  private _computeEdgelessBound = (
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ) => {
     const controller = this._std.get(GfxControllerIdentifier);
     const border = 2;
     const noteScale = this.widget.noteScale.peek();
     const { viewport } = controller;
     const { left: viewportLeft, top: viewportTop } = viewport;
     const currentViewBound = new Bound(
-      rect.x - viewportLeft,
-      rect.y - viewportTop,
-      rect.width + border / noteScale,
-      rect.height + border / noteScale
+      x - viewportLeft,
+      y - viewportTop,
+      width + border / noteScale,
+      height + border / noteScale
     );
     const currentModelBound = viewport.toModelBound(currentViewBound);
     return new Bound(
@@ -304,57 +306,65 @@ export class DragEventWatcher {
     const edgelessRoot = this.widget
       .rootComponent as EdgelessRootBlockComponent;
 
-    if (snapshot) {
-      const [first] = snapshot.content;
-      if (first.flavour === 'affine:note') return;
-
-      if (snapshot.content.length === 1) {
-        const importToSurface = (
-          width: number,
-          height: number,
-          newBound: Bound
-        ) => {
-          first.props.xywh = newBound.serialize();
-          first.props.width = width;
-          first.props.height = height;
-
-          const std = this._std;
-          const job = this._job;
-          job
-            .snapshotToSlice(
-              snapshot,
-              std.doc,
-              edgelessRoot.surfaceBlockModel.id
-            )
-            .catch(console.error);
-        };
-
-        if (
-          ['affine:attachment', 'affine:bookmark'].includes(first.flavour) ||
-          first.flavour.startsWith('affine:embed-')
-        ) {
-          const style = first.props.style as EmbedCardStyle;
-          const width = EMBED_CARD_WIDTH[style];
-          const height = EMBED_CARD_HEIGHT[style];
-
-          const newBound = this._computeEdgelessBound(width, height);
-          if (!newBound) return;
-
-          importToSurface(width, height, newBound);
-          return;
-        }
+    if (!snapshot) {
+      return;
+    }
+
+    const [first] = snapshot.content;
+    if (first.flavour === 'affine:note') return;
+
+    if (snapshot.content.length === 1) {
+      const importToSurface = (
+        width: number,
+        height: number,
+        newBound: Bound
+      ) => {
+        first.props.xywh = newBound.serialize();
+        first.props.width = width;
+        first.props.height = height;
+
+        const std = this._std;
+        const job = this._job;
+        job
+          .snapshotToSlice(snapshot, std.doc, edgelessRoot.surfaceBlockModel.id)
+          .catch(console.error);
+      };
+
+      if (
+        ['affine:attachment', 'affine:bookmark'].includes(first.flavour) ||
+        first.flavour.startsWith('affine:embed-')
+      ) {
+        const style = first.props.style as EmbedCardStyle;
+        const width = EMBED_CARD_WIDTH[style];
+        const height = EMBED_CARD_HEIGHT[style];
+
+        const newBound = this._computeEdgelessBound(
+          state.raw.clientX,
+          state.raw.clientY,
+          width,
+          height
+        );
+        if (!newBound) return;
 
-        if (first.flavour === 'affine:image') {
-          const noteScale = this.widget.noteScale.peek();
-          const width = Number(first.props.width) * noteScale;
-          const height = Number(first.props.height) * noteScale;
+        importToSurface(width, height, newBound);
+        return;
+      }
 
-          const newBound = this._computeEdgelessBound(width, height);
-          if (!newBound) return;
+      if (first.flavour === 'affine:image') {
+        const noteScale = this.widget.noteScale.peek();
+        const width = Number(first.props.width) * noteScale;
+        const height = Number(first.props.height) * noteScale;
 
-          importToSurface(width, height, newBound);
-          return;
-        }
+        const newBound = this._computeEdgelessBound(
+          state.raw.clientX,
+          state.raw.clientY,
+          width,
+          height
+        );
+        if (!newBound) return;
+
+        importToSurface(width, height, newBound);
+        return;
       }
     }