전략편집기 수정

frontend/src/components/strategyEditor/PaletteChip.tsx

@@ -3,9 +3,11 @@ import {
   handlePaletteMouseDown,
   handlePalettePointerDown,
   handlePaletteTouchStart,
+  endHtmlDragMouseTracking,
   markPaletteHtmlDragEnd,
   needsPointerPaletteDrag,
   shouldSuppressPaletteClick,
+  startHtmlDragMouseTracking,
   writePaletteHtmlDragData,
   type PaletteDragPayload,
 } from '../../utils/paletteDragSession';
@@ -55,11 +57,13 @@ export default function PaletteChip({
       e.preventDefault();
       return;
     }
-    writePaletteHtmlDragData(e, buildPayload());
+    const payload = buildPayload();
+    writePaletteHtmlDragData(e, payload);
+    startHtmlDragMouseTracking(e.clientX, e.clientY, payload);
   };
 
   const onDragEnd = () => {
-    markPaletteHtmlDragEnd();
+    endHtmlDragMouseTracking();
   };
 
   const onPointerDown = (e: React.PointerEvent) => {

frontend/src/components/strategyEditor/SidewaysFilterPaletteTab.tsx

@@ -4,8 +4,9 @@ import type { DefType } from '../../utils/strategyEditorShared';
 import {
   handlePalettePointerDown,
   handlePaletteTouchStart,
-  markPaletteHtmlDragEnd,
+  endHtmlDragMouseTracking,
   needsPointerPaletteDrag,
+  startHtmlDragMouseTracking,
   writePaletteHtmlDragData,
   type PaletteDragPayload,
 } from '../../utils/paletteDragSession';
@@ -88,11 +89,12 @@ function SidewaysFilterChip({
       label: item.label,
     };
     writePaletteHtmlDragData(e, payload as PaletteDragPayload);
+    startHtmlDragMouseTracking(e.clientX, e.clientY, payload as PaletteDragPayload);
   };
 
   const onDragEnd = () => {
     hideHint();
-    markPaletteHtmlDragEnd();
+    endHtmlDragMouseTracking();
   };
 
   const onPointerDown = (e: React.PointerEvent) => {

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -1308,32 +1308,26 @@ function StrategyEditorCanvasInner({
       if (anchorId) {
         updatePreviewRef.current(anchorId, flowPos);
         lastPreviewAnchorRef.current = anchorId;
-        return;
-      }
-      if (lastPreviewAnchorRef.current != null) {
-        lastPreviewAnchorRef.current = null;
-        lastPreviewKeyRef.current = null;
-        clearPreviewRef.current();
       }
     };
+    document.addEventListener('dragover', onDocDragOver, { passive: false });
+    return () => document.removeEventListener('dragover', onDocDragOver);
+  }, []);
+
+  useEffect(() => {
     const onDocDragEnd = () => {
       lastPreviewAnchorRef.current = null;
       lastPreviewKeyRef.current = null;
       clearPreviewRef.current();
       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);
     };
   }, []);
 
   useEffect(() => {
-    if (!needsPointerPaletteDrag()) return;
     return subscribePaletteDrag((ev: PaletteDragEvent) => {
       if (ev.phase === 'move') {
         const { flowPos, anchorId } = resolveDropFromClientRef.current(ev.x, ev.y);

frontend/src/components/strategyEditor/StrategyListEditor.tsx

@@ -493,7 +493,6 @@ export default function StrategyListEditor({
   }, []);
 
   useEffect(() => {
-    if (!needsPointerPaletteDrag()) return;
     return subscribePaletteDrag(ev => {
       if (ev.phase === 'move') {
         if (!isOverListEditor(ev.x, ev.y)) {