전략편집기 메뉴 추가

2026-05-24 06:20:18 +09:00
parent bbe82e510b
commit ea39f7df27
24 changed files with 4897 additions and 29 deletions
@@ -0,0 +1,53 @@
+import { BaseEdge, EdgeLabelRenderer, getSmoothStepPath, type EdgeProps } from '@xyflow/react';
+import { edgeDisconnectRef } from './strategyEditorCallbacks';
+
+export function StrategyFlowEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  selected,
+}: EdgeProps) {
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  });
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        className={`se-flow-edge${selected ? ' se-flow-edge--selected' : ''}`}
+        style={{ strokeWidth: selected ? 3 : 2 }}
+      />
+      {selected && edgeDisconnectRef.current && (
+        <EdgeLabelRenderer>
+          <button
+            type="button"
+            className="se-flow-edge-del"
+            title="연결 끊기 (전략 코드에서 제외)"
+            style={{
+              position: 'absolute',
+              transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+              pointerEvents: 'all',
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              edgeDisconnectRef.current?.(id);
+            }}
+          >
+            ×
+          </button>
+        </EdgeLabelRenderer>
+      )}
+    </>
+  );
+}