전략편집기 수정

2026-07-01 01:10:22 +09:00
parent e72af1a9ed
commit 5edbb4d318
6 changed files with 171 additions and 1 deletions
@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  BaseEdge,
+  EdgeLabelRenderer,
+  getSmoothStepPath,
+  type EdgeProps,
+} from '@xyflow/react';
+import type { StartCombineOp } from '../../utils/strategyStartNodes';
+
+export type StartCombineEdgeData = {
+  op?: StartCombineOp;
+  onToggle?: (op: StartCombineOp) => void;
+};
+
+/**
+ * START 노드끼리 잇는 결합 엣지 — 가운데 AND/OR 토글 배지.
+ * 클릭하면 startCombineOp 를 전환한다. (연결 자체는 START 2개 이상이면 자동 생성)
+ */
+export function StartCombineEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+}: EdgeProps) {
+  const op: StartCombineOp = (data as StartCombineEdgeData | undefined)?.op === 'OR' ? 'OR' : 'AND';
+  const onToggle = (data as StartCombineEdgeData | undefined)?.onToggle;
+
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    borderRadius: 10,
+  });
+
+  return (
+    <>
+      <BaseEdge
+        id={id}
+        path={edgePath}
+        className={`se-flow-start-combine-edge se-flow-start-combine-edge--${op.toLowerCase()}`}
+        style={{ strokeWidth: 2, strokeDasharray: '6 4', pointerEvents: 'none' }}
+      />
+      <EdgeLabelRenderer>
+        <button
+          type="button"
+          className={`se-start-combine-edge-badge se-start-combine-edge-badge--${op.toLowerCase()}`}
+          title={op === 'AND' ? 'START 간 AND (모두 충족) — 클릭하면 OR' : 'START 간 OR (하나만 충족) — 클릭하면 AND'}
+          style={{
+            position: 'absolute',
+            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+            pointerEvents: 'all',
+          }}
+          onClick={(ev) => {
+            ev.stopPropagation();
+            onToggle?.(op === 'AND' ? 'OR' : 'AND');
+          }}
+        >
+          {op}
+        </button>
+      </EdgeLabelRenderer>
+    </>
+  );
+}