데스크탑 앱 수정

frontend/src/components/strategyEditor/StrategyEditorCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   ReactFlow,
   Background,
@@ -32,8 +32,11 @@ import {
 import { buildSidewaysFilterNode } from '../../utils/sidewaysFilterPaletteStorage';
 import {
   isPaletteHtmlDrag,
+  completePaletteDragAt,
+  getActivePaletteDrag,
   needsPointerPaletteDrag,
   readPaletteHtmlDragData,
+  setPaletteDragDropHandler,
   subscribePaletteDrag,
   type PaletteDragEvent,
 } from '../../utils/paletteDragSession';
@@ -1262,6 +1265,18 @@ function StrategyEditorCanvasInner({
   applyDropRef.current = applyPaletteDropAt;
   const clearPreviewRef = useRef(clearDropPreview);
   clearPreviewRef.current = clearDropPreview;
+
+  useLayoutEffect(() => {
+    if (!needsPointerPaletteDrag()) return undefined;
+    setPaletteDragDropHandler((ev) => {
+      if (ev.phase === 'end') {
+        clearPreviewRef.current();
+        applyDropRef.current(ev.payload, ev.x, ev.y);
+      }
+    });
+    return () => setPaletteDragDropHandler(null);
+  }, []);
+
   const updatePreviewRef = useRef(updateDropPreview);
   updatePreviewRef.current = updateDropPreview;
   const resolveDropFromClientRef = useRef(resolveDropFromClient);
@@ -1283,11 +1298,6 @@ function StrategyEditorCanvasInner({
         }
         return;
       }
-      if (ev.phase === 'end') {
-        clearPreviewRef.current();
-        applyDropRef.current(ev.payload, ev.x, ev.y);
-        return;
-      }
       if (ev.phase === 'cancel') {
         clearPreviewRef.current();
       }
@@ -1332,11 +1342,21 @@ function StrategyEditorCanvasInner({
     }
   }, [selectedNodeId, handleDelete, deleteSelectedNodes, handleDisconnectEdge]);
 
+  const handleCanvasPointerUp = useCallback((e: React.PointerEvent) => {
+    if (!needsPointerPaletteDrag()) return;
+    if (e.button !== 0) return;
+    if (!getActivePaletteDrag()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    completePaletteDragAt(e.clientX, e.clientY);
+  }, []);
+
   return (
     <div
       ref={canvasWrapRef}
       className={`se-canvas-wrap se-canvas-wrap--${signalTab} se-canvas-wrap--${interactionMode}`}
       onKeyDown={onKeyDown}
+      onPointerUpCapture={handleCanvasPointerUp}
       tabIndex={0}
     >
       <ReactFlow