전략편집기 수정1

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -33,9 +33,11 @@ import { buildSidewaysFilterNode } from '../../utils/sidewaysFilterPaletteStorag
 import {
   isPaletteHtmlDrag,
   isPaletteHtmlDragActive,
+  getLastHtmlPaletteDragClientXY,
   markPaletteHtmlDragEnd,
   needsPointerPaletteDrag,
   readPaletteHtmlDragData,
+  setHtmlPaletteDropRouter,
   setPaletteDragDropHandler,
   subscribePaletteDrag,
   type PaletteDragEvent,
@@ -1281,6 +1283,15 @@ function StrategyEditorCanvasInner({
   const clearPreviewRef = useRef(clearDropPreview);
   clearPreviewRef.current = clearDropPreview;
 
+  useLayoutEffect(() => {
+    if (needsPointerPaletteDrag()) return undefined;
+    setHtmlPaletteDropRouter((x, y, payload) => {
+      clearPreviewRef.current();
+      applyDropRef.current(payload, x, y);
+    });
+    return () => setHtmlPaletteDropRouter(null);
+  }, []);
+
   useLayoutEffect(() => {
     if (!needsPointerPaletteDrag()) return undefined;
     setPaletteDragDropHandler((ev) => {
@@ -1299,6 +1310,37 @@ function StrategyEditorCanvasInner({
   const lastPreviewAnchorRef = useRef<string | null>(null);
   const lastPreviewKeyRef = useRef<string | null>(null);
 
+  useEffect(() => {
+    if (needsPointerPaletteDrag()) return undefined;
+    let rafId = 0;
+    const tick = () => {
+      if (!isPaletteHtmlDragActive()) {
+        rafId = 0;
+        return;
+      }
+      const xy = getLastHtmlPaletteDragClientXY();
+      if (xy) {
+        const { flowPos, anchorId } = resolveDropFromClientRef.current(xy.x, xy.y);
+        if (anchorId) {
+          updatePreviewRef.current(anchorId, flowPos);
+          lastPreviewAnchorRef.current = anchorId;
+        } else if (lastPreviewAnchorRef.current != null) {
+          lastPreviewAnchorRef.current = null;
+          clearPreviewRef.current();
+        }
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    const onDragStart = () => {
+      if (!rafId) rafId = requestAnimationFrame(tick);
+    };
+    document.addEventListener('dragstart', onDragStart, true);
+    return () => {
+      document.removeEventListener('dragstart', onDragStart, true);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, []);
+
   useEffect(() => {
     if (needsPointerPaletteDrag()) return;
     const onDocDragOver = (e: DragEvent) => {