fix(sidebar): improve pinned item drag ordering

apps/desktop/src/composables/useDragSort.ts

@@ -12,7 +12,26 @@ interface DragState {
   startY: number;
 }
 
+export interface DragSortStartOptions {
+  autoScroll?: boolean;
+  scrollContainer?: HTMLElement | null;
+  onEnd?: () => void;
+}
+
+export interface DragSortAutoScrollInput {
+  pointerX: number;
+  pointerY: number;
+  rect: Pick<DOMRect, "left" | "right" | "top" | "bottom">;
+  scrollTop: number;
+  clientHeight: number;
+  scrollHeight: number;
+}
+
 const DRAG_THRESHOLD = 5;
+export const DRAG_SORT_AUTO_SCROLL_EDGE_SIZE = 40;
+const DRAG_SORT_AUTO_SCROLL_HORIZONTAL_TOLERANCE = 32;
+const DRAG_SORT_AUTO_SCROLL_MIN_SPEED = 4;
+const DRAG_SORT_AUTO_SCROLL_MAX_SPEED = 20;
 
 const state = reactive<DragState>({
   active: false,
@@ -30,9 +49,42 @@ let pending: {
   x: number;
   y: number;
   sourceEl: HTMLElement | null;
+  autoScroll: boolean;
+  scrollContainer: HTMLElement | null;
+  onEnd: (() => void) | null;
 } | null = null;
 let onDropCallback: ((draggedId: string, targetId: string, position: DropPosition) => void) | null = null;
+let onDragEndCallback: (() => void) | null = null;
 let ghostEl: HTMLElement | null = null;
+let autoScrollContainer: HTMLElement | null = null;
+let autoScrollFrame = 0;
+let pointerX = 0;
+let pointerY = 0;
+const dropTargetRefreshEvents = new WeakSet<MouseEvent>();
+
+export function dragSortAutoScrollDelta({ pointerX, pointerY, rect, scrollTop, clientHeight, scrollHeight }: DragSortAutoScrollInput): number {
+  if (pointerX < rect.left - DRAG_SORT_AUTO_SCROLL_HORIZONTAL_TOLERANCE || pointerX > rect.right + DRAG_SORT_AUTO_SCROLL_HORIZONTAL_TOLERANCE) return 0;
+
+  const maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+  let direction = 0;
+  let edgeDistance = 0;
+
+  if (pointerY < rect.top + DRAG_SORT_AUTO_SCROLL_EDGE_SIZE) {
+    direction = -1;
+    edgeDistance = Math.max(0, pointerY - rect.top);
+  } else if (pointerY > rect.bottom - DRAG_SORT_AUTO_SCROLL_EDGE_SIZE) {
+    direction = 1;
+    edgeDistance = Math.max(0, rect.bottom - pointerY);
+  } else {
+    return 0;
+  }
+
+  if ((direction < 0 && scrollTop <= 0) || (direction > 0 && scrollTop >= maxScrollTop)) return 0;
+
+  const intensity = Math.min(1, Math.max(0, (DRAG_SORT_AUTO_SCROLL_EDGE_SIZE - edgeDistance) / DRAG_SORT_AUTO_SCROLL_EDGE_SIZE));
+  const speed = Math.round(DRAG_SORT_AUTO_SCROLL_MIN_SPEED + (DRAG_SORT_AUTO_SCROLL_MAX_SPEED - DRAG_SORT_AUTO_SCROLL_MIN_SPEED) * intensity);
+  return direction * speed;
+}
 
 function createGhost(sourceEl: HTMLElement, x: number, y: number) {
   const ghost = document.createElement("div");
@@ -75,9 +127,97 @@ function removeGhost() {
   }
 }
 
+function cancelAutoScroll() {
+  if (autoScrollFrame) {
+    window.cancelAnimationFrame(autoScrollFrame);
+    autoScrollFrame = 0;
+  }
+}
+
+function refreshDropTargetAtPointer(container: HTMLElement) {
+  state.targetId = null;
+  state.dropPosition = null;
+  if (typeof document.elementFromPoint !== "function") return;
+  const rect = container.getBoundingClientRect();
+  const targetX = Math.min(Math.max(pointerX, rect.left + 1), rect.right - 1);
+  const targetY = Math.min(Math.max(pointerY, rect.top + 1), rect.bottom - 1);
+  const target = document.elementFromPoint(targetX, targetY);
+  if (!target) return;
+  const event = new MouseEvent("mousemove", {
+    bubbles: true,
+    clientX: pointerX,
+    clientY: targetY,
+    buttons: 1,
+  });
+  dropTargetRefreshEvents.add(event);
+  target.dispatchEvent(event);
+}
+
+function autoScrollStep() {
+  autoScrollFrame = 0;
+  const container = autoScrollContainer;
+  if (!state.active || !container) return;
+
+  const delta = dragSortAutoScrollDelta({
+    pointerX,
+    pointerY,
+    rect: container.getBoundingClientRect(),
+    scrollTop: container.scrollTop,
+    clientHeight: container.clientHeight,
+    scrollHeight: container.scrollHeight,
+  });
+  if (!delta) return;
+
+  const maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
+  const previousScrollTop = container.scrollTop;
+  container.scrollTop = Math.min(maxScrollTop, Math.max(0, previousScrollTop + delta));
+  if (container.scrollTop !== previousScrollTop) refreshDropTargetAtPointer(container);
+
+  scheduleAutoScroll();
+}
+
+function scheduleAutoScroll() {
+  if (autoScrollFrame || !autoScrollContainer || !state.active) return;
+  const delta = dragSortAutoScrollDelta({
+    pointerX,
+    pointerY,
+    rect: autoScrollContainer.getBoundingClientRect(),
+    scrollTop: autoScrollContainer.scrollTop,
+    clientHeight: autoScrollContainer.clientHeight,
+    scrollHeight: autoScrollContainer.scrollHeight,
+  });
+  if (!delta) return;
+  autoScrollFrame = window.requestAnimationFrame(autoScrollStep);
+}
+
+function updateAutoScroll() {
+  const container = autoScrollContainer;
+  if (!container || !state.active) {
+    cancelAutoScroll();
+    return;
+  }
+  const delta = dragSortAutoScrollDelta({
+    pointerX,
+    pointerY,
+    rect: container.getBoundingClientRect(),
+    scrollTop: container.scrollTop,
+    clientHeight: container.clientHeight,
+    scrollHeight: container.scrollHeight,
+  });
+  if (!delta) {
+    cancelAutoScroll();
+    return;
+  }
+  scheduleAutoScroll();
+}
+
 function onMouseMove(event: MouseEvent) {
+  if (dropTargetRefreshEvents.has(event)) return;
   if (!pending && !state.active) return;
 
+  pointerX = event.clientX;
+  pointerY = event.clientY;
+
   if (pending && !state.active) {
     const dx = event.clientX - pending.x;
     const dy = event.clientY - pending.y;
@@ -90,6 +230,8 @@ function onMouseMove(event: MouseEvent) {
     if (pending.sourceEl) {
       ghostEl = createGhost(pending.sourceEl, event.clientX, event.clientY);
     }
+    autoScrollContainer = pending.autoScroll ? (pending.scrollContainer ?? pending.sourceEl?.closest<HTMLElement>(".connection-tree-scroller") ?? null) : null;
+    onDragEndCallback = pending.onEnd;
     pending = null;
     document.body.style.cursor = "grabbing";
     document.body.style.userSelect = "none";
@@ -97,6 +239,7 @@ function onMouseMove(event: MouseEvent) {
 
   if (state.active) {
     moveGhost(event.clientX, event.clientY);
+    updateAutoScroll();
   }
 }
 
@@ -108,6 +251,7 @@ function onMouseUp() {
 }
 
 function reset() {
+  const endCallback = onDragEndCallback ?? pending?.onEnd ?? null;
   state.active = false;
   state.draggedId = null;
   state.draggedType = null;
@@ -116,9 +260,15 @@ function reset() {
   state.startX = 0;
   state.startY = 0;
   pending = null;
+  onDragEndCallback = null;
+  autoScrollContainer = null;
+  pointerX = 0;
+  pointerY = 0;
+  cancelAutoScroll();
   removeGhost();
   document.body.style.cursor = "";
   document.body.style.userSelect = "";
+  endCallback?.();
 }
 
 let listenersAttached = false;
@@ -134,10 +284,19 @@ export function useDragSort(onDrop: (draggedId: string, targetId: string, positi
   ensureListeners();
   onDropCallback = onDrop;
 
-  function startDrag(event: MouseEvent, nodeId: string, nodeType: string) {
+  function startDrag(event: MouseEvent, nodeId: string, nodeType: string, options: DragSortStartOptions = {}) {
     if (event.button !== 0) return;
     const el = (event.currentTarget as HTMLElement) || null;
-    pending = { id: nodeId, type: nodeType, x: event.clientX, y: event.clientY, sourceEl: el };
+    pending = {
+      id: nodeId,
+      type: nodeType,
+      x: event.clientX,
+      y: event.clientY,
+      sourceEl: el,
+      autoScroll: options.autoScroll === true,
+      scrollContainer: options.scrollContainer ?? null,
+      onEnd: options.onEnd ?? null,
+    };
   }
 
   function updateTarget(event: MouseEvent, nodeId: string, nodeType: string) {