71 lines
2.2 KiB
JavaScript
71 lines
2.2 KiB
JavaScript
|
function startConnection(nodeId, portType) {
|
||
|
|
state.isConnecting = true;
|
||
|
|
state.connectionStart = { nodeId, portType };
|
||
|
|
}
|
||
|
|
|
||
|
|
function endConnection(nodeId, portType) {
|
||
|
|
if (!state.isConnecting || !state.connectionStart) return;
|
||
|
|
if (state.connectionStart.nodeId === nodeId) {
|
||
|
|
state.isConnecting = false;
|
||
|
|
state.connectionStart = null;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (state.connectionStart.portType === 'input' || portType !== 'input') {
|
||
|
|
state.isConnecting = false;
|
||
|
|
state.connectionStart = null;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const connection = {
|
||
|
|
from: state.connectionStart.nodeId,
|
||
|
|
fromPort: state.connectionStart.portType,
|
||
|
|
to: nodeId,
|
||
|
|
toPort: portType
|
||
|
|
};
|
||
|
|
|
||
|
|
state.connections.push(connection);
|
||
|
|
state.isConnecting = false;
|
||
|
|
state.connectionStart = null;
|
||
|
|
updateConnections();
|
||
|
|
saveToHistory();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateConnections() {
|
||
|
|
const svg = document.getElementById('connections-svg');
|
||
|
|
let paths = '';
|
||
|
|
|
||
|
|
state.connections.forEach((conn, index) => {
|
||
|
|
const fromEl = document.getElementById(conn.from);
|
||
|
|
const toEl = document.getElementById(conn.to);
|
||
|
|
if (!fromEl || !toEl) return;
|
||
|
|
|
||
|
|
const fromPort = fromEl.querySelector(`[data-port="${conn.fromPort}"]`);
|
||
|
|
const toPort = toEl.querySelector(`[data-port="${conn.toPort}"]`);
|
||
|
|
if (!fromPort || !toPort) return;
|
||
|
|
|
||
|
|
const fromRect = fromPort.getBoundingClientRect();
|
||
|
|
const toRect = toPort.getBoundingClientRect();
|
||
|
|
const canvasRect = document.getElementById('canvas-inner').getBoundingClientRect();
|
||
|
|
|
||
|
|
const x1 = (fromRect.left + fromRect.width / 2 - canvasRect.left) / state.zoom;
|
||
|
|
const y1 = (fromRect.top + fromRect.height / 2 - canvasRect.top) / state.zoom;
|
||
|
|
const x2 = (toRect.left + toRect.width / 2 - canvasRect.left) / state.zoom;
|
||
|
|
const y2 = (toRect.top + toRect.height / 2 - canvasRect.top) / state.zoom;
|
||
|
|
|
||
|
|
const midX = (x1 + x2) / 2;
|
||
|
|
const d = `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`;
|
||
|
|
|
||
|
|
paths += `<path class="connection" d="${d}" data-index="${index}"/>`;
|
||
|
|
});
|
||
|
|
|
||
|
|
svg.innerHTML = `
|
||
|
|
<defs>
|
||
|
|
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
|
||
|
|
<polygon points="0 0, 10 3.5, 0 7" fill="var(--primary)"/>
|
||
|
|
</marker>
|
||
|
|
</defs>
|
||
|
|
${paths}
|
||
|
|
`;
|
||
|
|
}
|