앱 전략편집기 수정

frontend/src/utils/paletteDragSession.ts

@@ -1,13 +1,13 @@
 /**
- * Desktop(Tauri) 및 터치 기기 — HTML5 DnD 대신 pointer/touch + 전체화면 overlay 드래그
+ * Desktop(Tauri) 및 터치 — HTML5 DnD 대신 pointer/touch + overlay 드래그
+ * (useDraggablePanel 과 동일: pointerdown 1회 bindWindowDrag 로 전체 제스처 처리)
  */
 import { elementsUnderDragPoint } from './flowScreenProjection';
 import {
   bindWindowDrag,
-  clientXYFromNative,
   isPrimaryPointerButton,
 } from './pointerDrag';
-import { isDesktop } from './platform';
+import { isDesktop, isMacDesktop } from './platform';
 
 export type PaletteDragPayload = Record<string, unknown> & {
   type: string;
@@ -45,7 +45,6 @@ const DRAG_THRESHOLD_PX = 6;
 
 let activePayload: PaletteDragPayload | null = null;
 let activePointerId: number | null = null;
-let activeTouchId: number | null = null;
 let overlayController: OverlayController | null = null;
 let overlayElement: HTMLElement | null = null;
 let gestureCaptureEl: HTMLElement | null = null;
@@ -53,11 +52,8 @@ let listeners = new Set<PaletteDragListener>();
 let dropHandler: PaletteDropHandler | null = null;
 let moveRafId: number | null = null;
 let pendingMove: { x: number; y: number } | null = null;
-let unbindActiveMove: (() => void) | null = null;
-let unbindActiveEnd: (() => void) | null = null;
-let pendingPointerListeners: (() => void) | null = null;
+let unbindGesture: (() => void) | null = null;
 let lastDragClientXY: { x: number; y: number } | null = null;
-let endListenersArmed = false;
 
 function hasCoarsePointer(): boolean {
   if (typeof window === 'undefined') return false;
@@ -68,8 +64,10 @@ function hasCoarsePointer(): boolean {
   }
 }
 
-/** HTML5 DnD 대신 pointer/touch overlay 드래그 사용 */
+/** HTML5 DnD 대신 pointer/touch overlay 드래그 사용 (Windows Desktop 등) */
 export function needsPointerPaletteDrag(): boolean {
+  // macOS Tauri WKWebView — Safari 웹과 동일하게 HTML5 DnD 사용
+  if (isMacDesktop()) return false;
   return isDesktop() || hasCoarsePointer();
 }
 
@@ -123,36 +121,19 @@ function releasePointerCapture(pointerId: number | null) {
   } catch {
     /* ignore */
   }
-  try {
-    if (document.body.hasPointerCapture(pointerId)) {
-      document.body.releasePointerCapture(pointerId);
-    }
-  } catch {
-    /* ignore */
-  }
 }
 
-function clearPendingPointerListeners() {
-  pendingPointerListeners?.();
-  pendingPointerListeners = null;
-}
-
-function unbindActiveDragListeners() {
-  unbindActiveMove?.();
-  unbindActiveMove = null;
-  unbindActiveEnd?.();
-  unbindActiveEnd = null;
-  endListenersArmed = false;
+function unbindGestureListeners() {
+  unbindGesture?.();
+  unbindGesture = null;
 }
 
 function cleanupDrag() {
   const pointerId = activePointerId;
-  unbindActiveDragListeners();
-  clearPendingPointerListeners();
+  unbindGestureListeners();
   releasePointerCapture(pointerId);
   activePayload = null;
   activePointerId = null;
-  activeTouchId = null;
   pendingMove = null;
   lastDragClientXY = null;
   if (moveRafId != null) {
@@ -179,6 +160,20 @@ function finishDrag(phase: 'end' | 'cancel', xy: { x: number; y: number }) {
   cleanupDrag();
 }
 
+function mountDragOverlay(
+  payload: PaletteDragPayload,
+  xy: { x: number; y: number },
+  pointerId: number,
+) {
+  activePayload = payload;
+  activePointerId = pointerId;
+  lastDragClientXY = { x: xy.x, y: xy.y };
+  document.body.classList.add('se-palette-drag-active');
+  overlayController?.mount({ payload, pointerId, x: xy.x, y: xy.y });
+  emit({ phase: 'start', x: xy.x, y: xy.y, payload });
+  notifyPaletteDragMove(xy.x, xy.y);
+}
+
 export function notifyPaletteDragMove(clientX: number, clientY: number) {
   if (!activePayload) return;
   lastDragClientXY = { x: clientX, y: clientY };
@@ -194,12 +189,12 @@ export function notifyPaletteDragMove(clientX: number, clientY: number) {
 }
 
 export function notifyPaletteDragEnd(clientX: number, clientY: number) {
-  if (!endListenersArmed) return;
+  if (!activePayload) return;
   finishDrag('end', { x: clientX, y: clientY });
 }
 
 export function notifyPaletteDragCancel(clientX: number, clientY: number) {
-  if (!endListenersArmed) return;
+  if (!activePayload) return;
   finishDrag('cancel', { x: clientX, y: clientY });
 }
 
@@ -209,114 +204,15 @@ export function completePaletteDragAt(clientX: number, clientY: number): boolean
   return true;
 }
 
-function eventMatchesActiveInput(ev: Event): boolean {
-  if (!activePayload || activePointerId == null) return false;
-  if (ev instanceof PointerEvent) return ev.pointerId === activePointerId;
-  if (ev instanceof TouchEvent) {
-    if (activeTouchId != null) {
-      const touches = ev.touches.length > 0 ? ev.touches : ev.changedTouches;
-      return Array.from(touches).some(t => t.identifier === activeTouchId);
-    }
-    return ev.touches.length <= 1;
-  }
-  return true;
-}
-
-function bindActiveDragMoveListeners(pointerId: number) {
-  unbindActiveMove?.();
-
-  unbindActiveMove = bindWindowDrag(
-    (xy, ev) => {
-      if (!activePayload || activePointerId !== pointerId) return;
-      if (!eventMatchesActiveInput(ev)) return;
-      notifyPaletteDragMove(xy.x, xy.y);
-    },
-    () => { /* end 는 별도 등록 */ },
-    { preventTouchScroll: true, useCapture: true },
-  );
-}
-
-function bindActiveDragEndListeners(pointerId: number) {
-  unbindActiveEnd?.();
-
-  const onEnd = (ev: Event) => {
-    if (!endListenersArmed) return;
-    if (!activePayload || activePointerId !== pointerId) return;
-    if (!eventMatchesActiveInput(ev)) return;
-    const xy = clientXYFromNative(ev) ?? lastDragClientXY;
-    if (!xy) return;
-    finishDrag('end', xy);
-  };
-
-  window.addEventListener('pointerup', onEnd, true);
-  window.addEventListener('mouseup', onEnd, true);
-  window.addEventListener('touchend', onEnd, true);
-
-  unbindActiveEnd = () => {
-    window.removeEventListener('pointerup', onEnd, true);
-    window.removeEventListener('mouseup', onEnd, true);
-    window.removeEventListener('touchend', onEnd, true);
-  };
-}
-
-function captureOnOverlay(pointerId: number) {
-  try {
-    overlayElement?.setPointerCapture(pointerId);
-  } catch {
-    /* ignore */
-  }
-  try {
-    if (!overlayElement?.hasPointerCapture(pointerId)) {
-      document.body.setPointerCapture(pointerId);
-    }
-  } catch {
-    /* ignore */
-  }
-}
-
-function armDragEndListeners(pointerId: number) {
-  endListenersArmed = true;
-  bindActiveDragEndListeners(pointerId);
-}
-
-function beginDrag(
-  payload: PaletteDragPayload,
-  xy: { x: number; y: number },
-  pointerId: number,
-  touchId: number | null = null,
-) {
-  if (activePayload) {
-    cleanupDrag();
-  }
-
-  activePayload = payload;
-  activePointerId = pointerId;
-  activeTouchId = touchId;
-  lastDragClientXY = { x: xy.x, y: xy.y };
-  endListenersArmed = false;
-  document.body.classList.add('se-palette-drag-active');
-
-  bindActiveDragMoveListeners(pointerId);
-  overlayController?.mount({ payload, pointerId, x: xy.x, y: xy.y });
-
-  emit({ phase: 'start', x: xy.x, y: xy.y, payload });
-  notifyPaletteDragMove(xy.x, xy.y);
-
-  requestAnimationFrame(() => {
-    if (activePointerId !== pointerId) return;
-    captureOnOverlay(pointerId);
-    requestAnimationFrame(() => {
-      if (activePointerId !== pointerId) return;
-      armDragEndListeners(pointerId);
-    });
-  });
-}
-
 export function bindPaletteDragOverlayElement(el: HTMLElement | null) {
   overlayElement = el;
   overlayController?.bindElement(el);
   if (el && activePointerId != null) {
-    captureOnOverlay(activePointerId);
+    try {
+      el.setPointerCapture(activePointerId);
+    } catch {
+      /* window gesture listener 가 move/end 처리 */
+    }
   }
 }
 
@@ -324,36 +220,35 @@ function startPaletteDragGesture(
   startX: number,
   startY: number,
   pointerId: number,
-  touchId: number | null,
   payload: PaletteDragPayload,
 ): void {
   if (activePayload) {
     cleanupDrag();
   }
+  unbindGestureListeners();
 
-  clearPendingPointerListeners();
+  let dragging = false;
 
-  let dragStarted = false;
-
-  const unbind = bindWindowDrag(
-    (xy, ev) => {
-      if (dragStarted) return;
-      const dx = xy.x - startX;
-      const dy = xy.y - startY;
-      if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
-      dragStarted = true;
-      clearPendingPointerListeners();
-      if (ev.cancelable) ev.preventDefault();
-      beginDrag(payload, xy, pointerId, touchId);
+  unbindGesture = bindWindowDrag(
+    (xy) => {
+      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);
     },
-    () => {
-      if (dragStarted) return;
-      clearPendingPointerListeners();
+    (xy) => {
+      unbindGestureListeners();
+      if (dragging && activePayload) {
+        finishDrag('end', xy);
+      }
     },
     { preventTouchScroll: true },
   );
-
-  pendingPointerListeners = unbind;
 }
 
 export function handlePalettePointerDown(
@@ -366,25 +261,36 @@ export function handlePalettePointerDown(
   if ((e.target as HTMLElement).closest('input, textarea, select, button')) return;
 
   e.preventDefault();
+  e.stopPropagation();
 
   const sourceEl = e.currentTarget as HTMLElement;
   try {
     sourceEl.setPointerCapture(e.pointerId);
     gestureCaptureEl = sourceEl;
   } catch {
-    /* overlay/body capture later */
+    /* bindWindowDrag 가 move/end 처리 */
   }
 
-  startPaletteDragGesture(
-    e.clientX,
-    e.clientY,
-    e.pointerId,
-    null,
-    payload,
-  );
+  startPaletteDragGesture(e.clientX, e.clientY, e.pointerId, payload);
 }
 
-/** PointerEvent 미지원 환경 — touchstart 전용 진입 */
+/** macOS WebView 등 — pointer 대신 mouse 이벤트만 오는 경우 */
+export function handlePaletteMouseDown(
+  e: React.MouseEvent,
+  payload: PaletteDragPayload,
+  _label: string,
+): void {
+  if (!needsPointerPaletteDrag()) return;
+  if (e.button !== 0) return;
+  if ((e.target as HTMLElement).closest('input, textarea, select, button')) return;
+  if (typeof window !== 'undefined' && 'PointerEvent' in window) return;
+
+  e.preventDefault();
+  e.stopPropagation();
+  startPaletteDragGesture(e.clientX, e.clientY, 1, payload);
+}
+
+/** PointerEvent 미지원 — touchstart 전용 */
 export function handlePaletteTouchStart(
   e: React.TouchEvent,
   payload: PaletteDragPayload,
@@ -396,15 +302,8 @@ export function handlePaletteTouchStart(
   if ((e.target as HTMLElement).closest('input, textarea, select, button')) return;
 
   e.preventDefault();
-
   const touch = e.touches[0];
-  startPaletteDragGesture(
-    touch.clientX,
-    touch.clientY,
-    touch.identifier,
-    touch.identifier,
-    payload,
-  );
+  startPaletteDragGesture(touch.clientX, touch.clientY, touch.identifier, payload);
 }
 
 export function writePaletteHtmlDragData(e: React.DragEvent, payload: PaletteDragPayload): void {