앱 수정

2026-06-15 01:16:14 +09:00
parent 16178cb475
commit b0e2efd7cb
4 changed files with 90 additions and 20 deletions
@@ -37,9 +37,14 @@ import StochPairNodeSettings from './StochPairNodeSettings';
 import PriceExtremePairNodeSettings from './PriceExtremePairNodeSettings';
 import {
  isPaletteHtmlDrag,
+  isPaletteHtmlDragActive,
  readPaletteHtmlDragData,
 } from '../../utils/paletteDragSession';

+function isPaletteDropDrag(e: React.DragEvent): boolean {
+  return isPaletteHtmlDragActive() || isPaletteHtmlDrag(e);
+}
+
 const LOGIC_COLORS: Record<string, string> = {
  AND: '#00aaff',
  OR: '#00d4ff',
@@ -130,13 +135,13 @@ function usePaletteDropHandlers(id: string, d: StrategyFlowNodeData) {
  const { screenToFlowPosition } = useReactFlow();

  const onDragEnter = useCallback((e: React.DragEvent) => {
-    if (!isPaletteHtmlDrag(e)) return;
+    if (!isPaletteDropDrag(e)) return;
    e.preventDefault();
    e.stopPropagation();
  }, []);

  const onDragOver = useCallback((e: React.DragEvent) => {
-    if (!isPaletteHtmlDrag(e)) return;
+    if (!isPaletteDropDrag(e)) return;
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
@@ -146,8 +151,10 @@ function usePaletteDropHandlers(id: string, d: StrategyFlowNodeData) {

  const onDragLeave = useCallback((e: React.DragEvent) => {
    e.stopPropagation();
+    // WebKit HTML5 drag — relatedTarget 이 null 인 spurious dragleave 무시
    const rel = e.relatedTarget as Node | null;
-    if (rel && e.currentTarget.contains(rel)) return;
+    if (!rel) return;
+    if (e.currentTarget.contains(rel)) return;
    d.onDragLeaveTarget?.(id);
  }, [d, id]);

@@ -82,6 +82,7 @@ import {
  spawnPositionNearAnchor,
  subtreeToFlatOrphans,
  type EdgeHandleBinding,
+  type StrategyFlowNodeData,
 } from '../../utils/strategyFlowLayout';
 import {
  createStartNodeId,
@@ -906,10 +907,16 @@ function StrategyEditorCanvasInner({
    const syncNodesFromLayout = () => setNodes(layoutNodes.map(n => {
      const prev = nodesRef.current.find(p => p.id === n.id);
      const savedPos = layoutSeed.positions[n.id];
+      const dragOver = (prev?.data as StrategyFlowNodeData | undefined)?.dragOver;
+      const activeSourceSide = (prev?.data as StrategyFlowNodeData | undefined)?.activeSourceSide;
      return {
        ...n,
        position: savedPos ? { x: savedPos.x, y: savedPos.y } : n.position,
        selected: prev?.selected ?? false,
+        data: {
+          ...n.data,
+          ...(dragOver ? { dragOver, activeSourceSide } : {}),
+        },
      };
    }));

@@ -933,10 +940,15 @@ function StrategyEditorCanvasInner({
        const fresh = layoutNodes.find(ln => ln.id === n.id);
        if (!fresh) return n;
        const savedPos = layoutSeed.positions[n.id];
+        const dragOver = (n.data as StrategyFlowNodeData).dragOver;
+        const activeSourceSide = (n.data as StrategyFlowNodeData).activeSourceSide;
        return {
          ...n,
          position: savedPos ? { x: savedPos.x, y: savedPos.y } : fresh.position,
-          data: fresh.data,
+          data: {
+            ...fresh.data,
+            ...(dragOver ? { dragOver, activeSourceSide } : {}),
+          },
        };
      }));
      setEdges(mergedEdges);
@@ -1226,7 +1238,10 @@ function StrategyEditorCanvasInner({
    )
  ), [root, orphans]);

-  const isPaletteDrag = (e: React.DragEvent) => isPaletteHtmlDrag(e);
+  const isPaletteDrag = useCallback(
+    (e: React.DragEvent) => isPaletteHtmlDragActive() || isPaletteHtmlDrag(e),
+    [],
+  );

  const applyPaletteDropAt = useCallback((
    data: { type: string; value: string; label: string; composite?: boolean },
@@ -1291,11 +1306,8 @@ function StrategyEditorCanvasInner({
      e.preventDefault();
      const { flowPos, anchorId } = resolveDropFromClientRef.current(e.clientX, e.clientY);
      if (anchorId) {
-        const sideKey = `${anchorId}:${Math.round(flowPos.x / 8)}:${Math.round(flowPos.y / 8)}`;
-        if (sideKey === lastPreviewKeyRef.current) return;
-        lastPreviewKeyRef.current = sideKey;
-        lastPreviewAnchorRef.current = anchorId;
        updatePreviewRef.current(anchorId, flowPos);
+        lastPreviewAnchorRef.current = anchorId;
        return;
      }
      if (lastPreviewAnchorRef.current != null) {
@@ -1311,9 +1323,11 @@ function StrategyEditorCanvasInner({
      markPaletteHtmlDragEnd();
    };
    document.addEventListener('dragover', onDocDragOver, { passive: false });
+    document.addEventListener('drag', onDocDragOver);
    document.addEventListener('dragend', onDocDragEnd);
    return () => {
      document.removeEventListener('dragover', onDocDragOver);
+      document.removeEventListener('drag', onDocDragOver);
      document.removeEventListener('dragend', onDocDragEnd);
    };
  }, []);
@@ -1368,14 +1382,13 @@ function StrategyEditorCanvasInner({
    const { flowPos, anchorId } = resolveDropFromClient(e.clientX, e.clientY);
    if (anchorId) {
      updateDropPreview(anchorId, flowPos);
-    } else {
-      clearDropPreview();
    }
-  }, [resolveDropFromClient, updateDropPreview, clearDropPreview]);
+  }, [resolveDropFromClient, updateDropPreview, isPaletteDrag]);

  const onPaneDragLeave = useCallback((e: React.DragEvent) => {
    const rel = e.relatedTarget as Element | null;
-    if (rel && e.currentTarget.contains(rel)) return;
+    if (!rel) return;
+    if (e.currentTarget.contains(rel)) return;
    clearDropPreview();
  }, [clearDropPreview]);

@@ -1,4 +1,5 @@
 import type { ReactFlowInstance } from '@xyflow/react';
+import { getLastHtmlPaletteDragClientXY, isPaletteHtmlDragActive } from './paletteDragSession';

 type FlowProjector = Pick<ReactFlowInstance, 'screenToFlowPosition' | 'getViewport'>;

@@ -89,8 +90,27 @@ export function isOverStrategyBuilder(clientX: number, clientY: number): boolean
  return false;
 }

-/** DOM hit-test — overlay 아래 react-flow 노드 탐색 */
+/** DOM hit-test — react-flow 노드 id (Safari HTML5 drag: elementsFromPoint 불가 → rect 우선) */
 export function findFlowNodeIdAtClientPoint(clientX: number, clientY: number): string | null {
+  const pad = 10;
+  const nodeEls = document.querySelectorAll<HTMLElement>('.react-flow__node');
+  for (const nodeEl of nodeEls) {
+    const rect = nodeEl.getBoundingClientRect();
+    if (
+      clientX >= rect.left - pad && clientX <= rect.right + pad
+      && clientY >= rect.top - pad && clientY <= rect.bottom + pad
+    ) {
+      const id = nodeEl.getAttribute('data-id')
+        ?? nodeEl.dataset.id
+        ?? (nodeEl.id.startsWith('react-flow__node-')
+          ? nodeEl.id.slice('react-flow__node-'.length)
+          : null)
+        ?? nodeEl.querySelector<HTMLElement>('[data-nodeid]')?.getAttribute('data-nodeid')
+        ?? null;
+      if (id) return id;
+    }
+  }
+
  for (const el of elementsUnderDragPoint(clientX, clientY)) {
    const nodeEl = el.closest('.react-flow__node') as HTMLElement | null;
    if (nodeEl) {
@@ -98,7 +118,9 @@ export function findFlowNodeIdAtClientPoint(clientX: number, clientY: number): s
        ?? nodeEl.dataset.id
        ?? (nodeEl.id.startsWith('react-flow__node-')
          ? nodeEl.id.slice('react-flow__node-'.length)
-          : null);
+          : null)
+        ?? nodeEl.querySelector<HTMLElement>('[data-nodeid]')?.getAttribute('data-nodeid')
+        ?? null;
      if (id) return id;
    }
    const handleEl = el.closest('[data-nodeid]') as HTMLElement | null;
@@ -115,6 +137,14 @@ export interface PaletteDropResolution {
  anchorId: string | null;
 }

+/** WKWebView HTML5 drag — dragover client 좌표가 0,0 으로 오는 경우 보정 */
+export function resolvePaletteDragClientPoint(clientX: number, clientY: number): { x: number; y: number } {
+  if (clientX !== 0 || clientY !== 0) return { x: clientX, y: clientY };
+  if (!isPaletteHtmlDragActive()) return { x: clientX, y: clientY };
+  const last = getLastHtmlPaletteDragClientXY();
+  return last ?? { x: clientX, y: clientY };
+}
+
 /** client 좌표 → flow 위치 + 연결 대상 노드 (DOM 우선, flow hit 보조) */
 export function resolvePaletteDropClientPoint(
  clientX: number,
@@ -128,9 +158,10 @@ export function resolvePaletteDropClientPoint(
  ) => { id: string } | null,
  isConnectTarget: (nodeId: string) => boolean,
 ): PaletteDropResolution {
-  const flowPos = projectScreenToFlowPosition(clientX, clientY, rf, containerEl);
+  const { x: px, y: py } = resolvePaletteDragClientPoint(clientX, clientY);
+  const flowPos = projectScreenToFlowPosition(px, py, rf, containerEl);

-  const domId = findFlowNodeIdAtClientPoint(clientX, clientY);
+  const domId = findFlowNodeIdAtClientPoint(px, py);
  if (domId && nodes.some(n => n.id === domId) && isConnectTarget(domId)) {
    return { flowPos, anchorId: domId };
  }
@@ -140,12 +171,13 @@ export function resolvePaletteDropClientPoint(
    const escaped = typeof CSS !== 'undefined' && CSS.escape
      ? CSS.escape(node.id)
      : node.id.replace(/"/g, '\\"');
-    const el = document.querySelector(`.react-flow__node[data-id="${escaped}"]`);
+    const el = document.querySelector(`.react-flow__node[data-id="${escaped}"]`)
+      ?? document.getElementById(`react-flow__node-${node.id}`);
    if (!el) continue;
    const rect = el.getBoundingClientRect();
    if (
-      clientX >= rect.left && clientX <= rect.right
-      && clientY >= rect.top && clientY <= rect.bottom
+      px >= rect.left && px <= rect.right
+      && py >= rect.top && py <= rect.bottom
    ) {
      return { flowPos, anchorId: node.id };
    }
@@ -55,6 +55,7 @@ let pendingMove: { x: number; y: number } | null = null;
 let unbindGesture: (() => void) | null = null;
 let lastDragClientXY: { x: number; y: number } | null = null;
 let htmlPaletteDragActive = false;
+let lastHtmlDragClientXY: { x: number; y: number } | null = null;

 function installHtmlPaletteDragGlobals() {
  if (typeof window === 'undefined') return;
@@ -64,12 +65,23 @@ function installHtmlPaletteDragGlobals() {

  window.addEventListener('dragover', (e) => {
    if (!htmlPaletteDragActive) return;
+    if (e.clientX !== 0 || e.clientY !== 0) {
+      lastHtmlDragClientXY = { x: e.clientX, y: e.clientY };
+    }
    e.preventDefault();
    if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
  }, { passive: false });

+  window.addEventListener('drag', (e) => {
+    if (!htmlPaletteDragActive) return;
+    if (e.clientX !== 0 || e.clientY !== 0) {
+      lastHtmlDragClientXY = { x: e.clientX, y: e.clientY };
+    }
+  });
+
  window.addEventListener('dragend', () => {
    htmlPaletteDragActive = false;
+    lastHtmlDragClientXY = null;
  });
 }

@@ -328,10 +340,16 @@ export function handlePaletteTouchStart(

 export function markPaletteHtmlDragStart(): void {
  htmlPaletteDragActive = true;
+  lastHtmlDragClientXY = null;
 }

 export function markPaletteHtmlDragEnd(): void {
  htmlPaletteDragActive = false;
+  lastHtmlDragClientXY = null;
+}
+
+export function getLastHtmlPaletteDragClientXY(): { x: number; y: number } | null {
+  return lastHtmlDragClientXY;
 }

 export function isPaletteHtmlDragActive(): boolean {