chore: dnd cleanup (#9899)

blocksuite/affine/components/src/drop-indicator/drop-indicator.ts

@@ -0,0 +1,47 @@
+import type { Rect } from '@blocksuite/global/utils';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+export class DropIndicator extends LitElement {
+  static override styles = css`
+    .affine-drop-indicator {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: var(--affine-primary-color);
+      transition-property: height, transform;
+      transition-duration: 100ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-delay: 0s;
+      transform-origin: 0 0;
+      pointer-events: none;
+      z-index: 2;
+    }
+  `;
+
+  override render() {
+    if (!this.rect) {
+      return null;
+    }
+
+    const { left, top, width, height } = this.rect;
+    const style = styleMap({
+      width: `${width}px`,
+      height: `${height}px`,
+      top: `${top}px`,
+      left: `${left}px`,
+    });
+
+    return html`<div class="affine-drop-indicator" style=${style}></div>`;
+  }
+
+  @property({ attribute: false })
+  accessor rect: Rect | null = null;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-drop-indicator': DropIndicator;
+  }
+}

blocksuite/affine/components/src/drop-indicator/file-drop-manager.ts

@@ -0,0 +1,297 @@
+import {
+  calcDropTarget,
+  type DropTarget,
+  getClosestBlockComponentByPoint,
+  isInsidePageEditor,
+  matchFlavours,
+} from '@blocksuite/affine-shared/utils';
+import {
+  type BlockComponent,
+  type BlockStdScope,
+  type EditorHost,
+  LifeCycleWatcher,
+} from '@blocksuite/block-std';
+import { createIdentifier } from '@blocksuite/global/di';
+import type { IVec } from '@blocksuite/global/utils';
+import { Point, throttle } from '@blocksuite/global/utils';
+import type { BlockModel, ExtensionType } from '@blocksuite/store';
+import { computed, signal } from '@preact/signals-core';
+
+import { DropIndicator } from './drop-indicator';
+
+export type DropProps = {
+  std: BlockStdScope;
+  files: File[];
+  targetModel: BlockModel | null;
+  placement: 'before' | 'after';
+  point: IVec;
+};
+
+export type FileDropOptions = {
+  flavour: string;
+  onDrop?: (props: DropProps) => boolean;
+};
+
+/**
+ * Handles resources from outside.
+ * Uses `drag over` to handle it.
+ */
+export class FileDropExtension extends LifeCycleWatcher {
+  static override readonly key = 'FileDropExtension';
+
+  indicator: DropIndicator = new DropIndicator();
+
+  dragging$ = signal(false);
+
+  point$ = signal<Point | null>(null);
+
+  private _disableIndicator = false;
+
+  closestElement$ = signal<BlockComponent | null>(null);
+
+  dropTarget$ = computed<DropTarget | null>(() => {
+    let target = null;
+    const element = this.closestElement$.value;
+    if (!element) return target;
+
+    const model = element.model;
+    const parent = this.std.store.getParent(model);
+
+    if (!matchFlavours(parent, ['affine:surface' as BlockSuite.Flavour])) {
+      const point = this.point$.value;
+      target = point && calcDropTarget(point, model, element);
+    }
+
+    return target;
+  });
+
+  getDropTargetModel(model: BlockModel | null) {
+    // Existed or In Edgeless
+    if (model || !isInsidePageEditor(this.editorHost)) return model;
+
+    const rootModel = this.doc.root;
+    if (!rootModel) return null;
+
+    let lastNote = rootModel.children[rootModel.children.length - 1];
+    if (!lastNote || !matchFlavours(lastNote, ['affine:note'])) {
+      const newNoteId = this.doc.addBlock('affine:note', {}, rootModel.id);
+      const newNote = this.doc.getBlock(newNoteId)?.model;
+      if (!newNote) return null;
+      lastNote = newNote;
+    }
+
+    const lastItem = lastNote.children[lastNote.children.length - 1];
+    if (lastItem) {
+      model = lastItem;
+    } else {
+      const newParagraphId = this.doc.addBlock(
+        'affine:paragraph',
+        {},
+        lastNote,
+        0
+      );
+      model = this.doc.getBlock(newParagraphId)?.model ?? null;
+    }
+
+    return model;
+  }
+
+  shouldIgnoreEvent = (event: DragEvent, shouldCheckFiles?: boolean) => {
+    const dataTransfer = event.dataTransfer;
+    if (!dataTransfer) return true;
+
+    const effectAllowed = dataTransfer.effectAllowed;
+    if (effectAllowed === 'none') return true;
+
+    if (!shouldCheckFiles) return false;
+
+    const droppedFiles = dataTransfer.files;
+    if (!droppedFiles || !droppedFiles.length) return true;
+
+    return false;
+  };
+
+  updatePoint = (event: DragEvent) => {
+    const { clientX, clientY } = event;
+    const oldPoint = this.point$.peek();
+
+    if (
+      oldPoint &&
+      Math.round(oldPoint.x) === Math.round(clientX) &&
+      Math.round(oldPoint.y) === Math.round(clientY)
+    )
+      return;
+
+    this.point$.value = new Point(clientX, clientY);
+  };
+
+  onDragLeave = () => {
+    this.point$.value = null;
+  };
+
+  onDragOver = (event: DragEvent) => {
+    event.preventDefault();
+
+    if (this.shouldIgnoreEvent(event)) return;
+
+    this.updatePoint(event);
+  };
+
+  onDrop = (event: DragEvent) => {
+    event.preventDefault();
+
+    if (this.shouldIgnoreEvent(event, true)) return;
+
+    this.updatePoint(event);
+  };
+
+  get doc() {
+    return this.std.store;
+  }
+
+  get editorHost(): EditorHost {
+    return this.std.host;
+  }
+
+  override unmounted(): void {
+    super.unmounted();
+    this.indicator.remove();
+  }
+
+  override mounted() {
+    super.mounted();
+    const std = this.std;
+
+    std.host.ownerDocument.body.append(this.indicator);
+
+    std.event.disposables.add(
+      this.point$.subscribe(
+        throttle(
+          value => {
+            if (!value) {
+              this.closestElement$.value = null;
+              return;
+            }
+
+            const element = getClosestBlockComponentByPoint(value);
+            if (!element) {
+              return;
+            }
+
+            if (element === this.closestElement$.value) {
+              return;
+            }
+
+            this.closestElement$.value = element;
+          },
+          144,
+          { leading: true, trailing: true }
+        )
+      )
+    );
+
+    std.event.disposables.add(
+      this.dropTarget$.subscribe(target => {
+        this.indicator.rect = this._disableIndicator
+          ? null
+          : (target?.rect ?? null);
+      })
+    );
+
+    std.event.disposables.add(
+      std.event.add('nativeDragStart', () => {
+        this.dragging$.value = true;
+      })
+    );
+    std.event.disposables.add(
+      std.event.add('nativeDragEnd', () => {
+        this.dragging$.value = false;
+      })
+    );
+    std.event.disposables.add(
+      std.dnd.monitor({
+        onDragStart: () => {
+          this._disableIndicator = true;
+        },
+        onDrop: () => {
+          this._disableIndicator = false;
+        },
+      })
+    );
+
+    std.event.disposables.add(
+      std.event.add('nativeDragOver', context => {
+        const event = context.get('dndState').raw;
+
+        if (this.dragging$.peek()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+
+        this.onDragOver(event);
+      })
+    );
+    std.event.disposables.add(
+      std.event.add('nativeDragLeave', () => {
+        this.onDragLeave();
+      })
+    );
+    std.event.disposables.add(
+      std.event.add('nativeDrop', context => {
+        const event = context.get('dndState').raw;
+        const { x, y, dataTransfer } = event;
+        const droppedFiles = dataTransfer?.files;
+
+        if (!droppedFiles || !droppedFiles.length) {
+          this.onDragLeave();
+          return;
+        }
+
+        this.onDrop(event);
+
+        const target = this.dropTarget$.peek();
+        const std = this.std;
+        const targetModel = this.getDropTargetModel(
+          target?.modelState.model ?? null
+        );
+        const placement = target?.placement === 'before' ? 'before' : 'after';
+
+        const values = std.provider
+          .getAll(FileDropConfigExtensionIdentifier)
+          .values();
+
+        for (const ext of values) {
+          if (!ext.onDrop) continue;
+
+          const options = {
+            std,
+            files: [...droppedFiles],
+            targetModel,
+            placement,
+            point: [x, y],
+          } satisfies DropProps;
+
+          if (ext.onDrop(options)) break;
+        }
+
+        this.onDragLeave();
+      })
+    );
+  }
+}
+
+const FileDropConfigExtensionIdentifier = createIdentifier<FileDropOptions>(
+  'FileDropConfigExtension'
+);
+
+export const FileDropConfigExtension = (
+  options: FileDropOptions
+): ExtensionType => {
+  const identifier = FileDropConfigExtensionIdentifier(options.flavour);
+  return {
+    setup: di => {
+      di.addImpl(identifier, () => options);
+    },
+  };
+};

blocksuite/affine/components/src/drop-indicator/index.ts

@@ -0,0 +1,13 @@
+import { DropIndicator } from './drop-indicator';
+export {
+  type DropProps,
+  FileDropConfigExtension,
+  FileDropExtension,
+  type FileDropOptions,
+} from './file-drop-manager';
+
+export { DropIndicator };
+
+export function effects() {
+  customElements.define('affine-drop-indicator', DropIndicator);
+}