전략편집기 수정

frontend/src/utils/paletteDragSession.ts

@@ -7,7 +7,7 @@ import {
   bindWindowDrag,
   isPrimaryPointerButton,
 } from './pointerDrag';
-import { isDesktop } from './platform';
+import { isDesktop, isMacDesktop } from './platform';
 
 export type PaletteDragPayload = Record<string, unknown> & {
   type: string;
@@ -54,6 +54,7 @@ let moveRafId: number | null = null;
 let pendingMove: { x: number; y: number } | null = null;
 let unbindGesture: (() => void) | null = null;
 let lastDragClientXY: { x: number; y: number } | null = null;
+let htmlDragMouseTrackUnbind: (() => void) | null = null;
 let htmlPaletteDragActive = false;
 let lastHtmlDragClientXY: { x: number; y: number } | null = null;
 
@@ -80,6 +81,7 @@ function installHtmlPaletteDragGlobals() {
   });
 
   window.addEventListener('dragend', () => {
+    stopHtmlDragMouseTracking();
     htmlPaletteDragActive = false;
     lastHtmlDragClientXY = null;
   });
@@ -96,8 +98,9 @@ function hasCoarsePointer(): boolean {
   }
 }
 
-/** HTML5 DnD 대신 pointer/touch overlay 드래그 (Tauri Desktop 전체 — macOS WKWebView HTML5 DnD 불안정) */
+/** HTML5 DnD 대신 pointer overlay (Windows Desktop 등). macOS WKWebView는 HTML5 + mousemove preview */
 export function needsPointerPaletteDrag(): boolean {
+  if (isMacDesktop()) return false;
   return isDesktop() || hasCoarsePointer();
 }
 
@@ -277,8 +280,46 @@ function startPaletteDragGesture(
         finishDrag('end', xy);
       }
     },
-    { preventTouchScroll: true, useCapture: isDesktop() },
+    { preventTouchScroll: true },
   );
+
+  if (gestureCaptureEl) {
+    const el = gestureCaptureEl;
+    const pid = pointerId;
+    const onElMove = (ev: PointerEvent) => {
+      if (ev.pointerId !== pid) return;
+      const xy = { x: ev.clientX, y: ev.clientY };
+      if (!dragging) {
+        const dx = xy.x - startX;
+        const dy = xy.y - startY;
+        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
+        dragging = true;
+        mountDragOverlay(payload, xy, pointerId);
+        return;
+      }
+      notifyPaletteDragMove(xy.x, xy.y);
+    };
+    const onElEnd = (ev: PointerEvent) => {
+      if (ev.pointerId !== pid) return;
+      el.removeEventListener('pointermove', onElMove);
+      el.removeEventListener('pointerup', onElEnd);
+      el.removeEventListener('pointercancel', onElEnd);
+      unbindGestureListeners();
+      if (dragging && activePayload) {
+        finishDrag('end', { x: ev.clientX, y: ev.clientY });
+      }
+    };
+    el.addEventListener('pointermove', onElMove);
+    el.addEventListener('pointerup', onElEnd);
+    el.addEventListener('pointercancel', onElEnd);
+    const windowUnbind = unbindGesture;
+    unbindGesture = () => {
+      el.removeEventListener('pointermove', onElMove);
+      el.removeEventListener('pointerup', onElEnd);
+      el.removeEventListener('pointercancel', onElEnd);
+      windowUnbind?.();
+    };
+  }
 }
 
 export function handlePalettePointerDown(
@@ -336,12 +377,45 @@ export function handlePaletteTouchStart(
   startPaletteDragGesture(touch.clientX, touch.clientY, touch.identifier, payload);
 }
 
+function stopHtmlDragMouseTracking(): void {
+  htmlDragMouseTrackUnbind?.();
+  htmlDragMouseTrackUnbind = null;
+}
+
+/** HTML5 drag 중 mousemove 로 preview 좌표 추적 (macOS WKWebView — dragover 좌표/hit-test 불안정) */
+export function startHtmlDragMouseTracking(
+  clientX: number,
+  clientY: number,
+  payload: PaletteDragPayload,
+): void {
+  stopHtmlDragMouseTracking();
+  if (clientX !== 0 || clientY !== 0) {
+    lastHtmlDragClientXY = { x: clientX, y: clientY };
+  }
+  htmlDragMouseTrackUnbind = bindWindowDrag(
+    (xy) => {
+      lastHtmlDragClientXY = xy;
+      emit({ phase: 'move', x: xy.x, y: xy.y, payload });
+    },
+    () => {
+      /* native HTML5 drag 중 mouseup 은 dragend 전에 올 수 있음 — dragend 에서 정리 */
+    },
+    { preventTouchScroll: false },
+  );
+}
+
+export function endHtmlDragMouseTracking(): void {
+  stopHtmlDragMouseTracking();
+  markPaletteHtmlDragEnd();
+}
+
 export function markPaletteHtmlDragStart(): void {
   htmlPaletteDragActive = true;
   lastHtmlDragClientXY = null;
 }
 
 export function markPaletteHtmlDragEnd(): void {
+  stopHtmlDragMouseTracking();
   htmlPaletteDragActive = false;
   lastHtmlDragClientXY = null;
 }