feat(edgeless): support consistent dragging behavior

toeverything · Dec 9, 2023 · d0ce586 · d0ce586
1 parent 82627a4
commit d0ce586
Show file tree

Hide file tree

Showing 18 changed files with 674 additions and 285 deletions.
diff --git a/packages/blocks/src/_common/utils/query.ts b/packages/blocks/src/_common/utils/query.ts
@@ -425,6 +425,10 @@ function isEdgelessChildNote({ classList }: Element) {
   return classList.contains('edgeless-block-portal-note');
 }
 
+function isEdgelessChildImage({ classList }: Element) {
+  return classList.contains('edgeless-block-portal-image');
+}
+
 /**
  * Returns the closest block element by a point in the rect.
  *
@@ -717,6 +721,16 @@ export function getHoveringNote(point: Point) {
   );
 }
 
+/**
+ * Get hovering top level image with given a point in edgeless mode.
+ */
+export function getHoveringImage(point: Point) {
+  return (
+    document.elementsFromPoint(point.x, point.y).find(isEdgelessChildImage) ||
+    null
+  );
+}
+
 /**
  * Gets the table of the database.
  */

diff --git a/packages/blocks/src/_common/widgets/drag-handle/config.ts b/packages/blocks/src/_common/widgets/drag-handle/config.ts
@@ -4,16 +4,19 @@ import type { BlockElement } from '@blocksuite/lit';
 
 import type { Rect } from '../../../_common/utils/index.js';
 
-export const DEFAULT_DRAG_HANDLE_CONTAINER_HEIGHT = 24;
-export const DRAG_HANDLE_OFFSET_LEFT = 2;
-export const LIST_DRAG_HANDLE_OFFSET_LEFT = 18;
+export const DRAG_HANDLE_CONTAINER_HEIGHT = 24;
+export const DRAG_HANDLE_CONTAINER_WIDTH = 16;
+export const DRAG_HANDLE_CONTAINER_OFFSET_LEFT = 2;
+export const DRAG_HANDLE_CONTAINER_OFFSET_LEFT_LIST = 18;
+
 export const DRAG_HANDLE_GRABBER_HEIGHT = 12;
 export const DRAG_HANDLE_GRABBER_WIDTH = 4;
+export const DRAG_HANDLE_GRABBER_WIDTH_HOVERED = 2;
 export const DRAG_HANDLE_GRABBER_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_GRABBER_MARGIN = 4;
+
 export const NOTE_CONTAINER_PADDING = 24;
 export const DRAG_HOVER_RECT_PADDING = 4;
-export const HOVER_DRAG_HANDLE_GRABBER_WIDTH = 2;
 
 export const BLOCK_CHILDREN_CONTAINER_PADDING_LEFT = 26;
 
@@ -39,7 +42,15 @@ export type DragHandleOption = {
   ) => boolean;
   onDragEnd?: (
     state: PointerEventState,
-    draggingElements: BlockElement[]
+    {
+      draggingElements,
+      dropBlockId,
+      dropType,
+    }: {
+      draggingElements: BlockElement[];
+      dropBlockId: string;
+      dropType: DropType | null;
+    }
   ) => boolean;
 };