Macbook
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
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>
|
||
)}
|
||
</>
|
||
);
|
||
}
|