feat(edgeless): support consistent dragging behavior

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 note 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.
  */

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;
 };