전략편집기 수정

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -32,6 +32,8 @@ import {
 import { buildSidewaysFilterNode } from '../../utils/sidewaysFilterPaletteStorage';
 import {
   isPaletteHtmlDrag,
+  isPaletteHtmlDragActive,
+  markPaletteHtmlDragEnd,
   needsPointerPaletteDrag,
   readPaletteHtmlDragData,
   setPaletteDragDropHandler,
@@ -1282,6 +1284,40 @@ function StrategyEditorCanvasInner({
   const lastPreviewAnchorRef = useRef<string | null>(null);
   const lastPreviewKeyRef = useRef<string | null>(null);
 
+  useEffect(() => {
+    if (needsPointerPaletteDrag()) return;
+    const onDocDragOver = (e: DragEvent) => {
+      if (!isPaletteHtmlDragActive()) return;
+      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);
+        return;
+      }
+      if (lastPreviewAnchorRef.current != null) {
+        lastPreviewAnchorRef.current = null;
+        lastPreviewKeyRef.current = null;
+        clearPreviewRef.current();
+      }
+    };
+    const onDocDragEnd = () => {
+      lastPreviewAnchorRef.current = null;
+      lastPreviewKeyRef.current = null;
+      clearPreviewRef.current();
+      markPaletteHtmlDragEnd();
+    };
+    document.addEventListener('dragover', onDocDragOver, { passive: false });
+    document.addEventListener('dragend', onDocDragEnd);
+    return () => {
+      document.removeEventListener('dragover', onDocDragOver);
+      document.removeEventListener('dragend', onDocDragEnd);
+    };
+  }, []);
+
   useEffect(() => {
     if (!needsPointerPaletteDrag()) return;
     return subscribePaletteDrag((ev: PaletteDragEvent) => {
@@ -1320,6 +1356,11 @@ function StrategyEditorCanvasInner({
     });
   }, []);
 
+  const onPaneDragEnter = useCallback((e: React.DragEvent) => {
+    if (!isPaletteDrag(e)) return;
+    e.preventDefault();
+  }, [isPaletteDrag]);
+
   const onPaneDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     if (!isPaletteDrag(e)) return;
@@ -1378,6 +1419,7 @@ function StrategyEditorCanvasInner({
         isValidConnection={isValidConnection}
         onReconnect={onReconnect}
         onDrop={onPaneDrop}
+        onDragEnter={onPaneDragEnter}
         onDragOver={onPaneDragOver}
         onDragLeave={onPaneDragLeave}
         connectionMode={ConnectionMode.Loose}