Skip to content

Fix control node handles & context menu #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anila-m wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Fix control node handles & context menu #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
20715d3
Remove dynamic input handles for control nodes
anila-m Oct 26, 2025
a2f14e8
Fix Output Handles of if-then-else
anila-m Oct 26, 2025
7a2915f
Update controlstructure.tsx
anila-m Oct 26, 2025
08c5ddf
Context Menu: "Add/Remove" buttons
anila-m Oct 26, 2025
3bc9c8b
Added classical inputs/outputs to repeat node
anila-m Oct 27, 2025
3b6e781
Added Submenu in context menu
anila-m Oct 27, 2025
594fb67
Fixed Typo
anila-m Oct 27, 2025
0791f4a
If-Else-Node: Fix Final Output handles
anila-m Oct 30, 2025
379f750
Context Menu for Algorithm Nodes
anila-m Oct 30, 2025
83cac41
Merge branch 'main' into fix/control-node-handles
LaviniaStiliadou Dec 14, 2025
95cd9fe
fix property panel for algorithm nodes
anila-m Dec 27, 2025
e5754d6
Experience Mode: uniform settings
anila-m Dec 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
443 changes: 408 additions & 35 deletions src/components/contextMenu.tsx
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/components/modals/configModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ export const ConfigModal = ({
className="w-4 h-4"
/>
<span className="ml-2">
{localCompactVisualization ? "True" : "False"}
{localCompactVisualization ? "On" : "Off"}
</span>
</td>
</tr>
Expand All @@ -214,7 +214,7 @@ export const ConfigModal = ({
className="w-4 h-4"
/>
<span className="ml-2">
{localCompletionGuaranteed ? "True" : "False"}
{localCompletionGuaranteed ? "Yes" : "No"}
</span>
</td>
</tr>
Expand Down
4 changes: 2 additions & 2 deletions src/components/modals/experienceLevelModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,12 +140,12 @@ export default function ExperienceModePanel({
<tbody>
<tr>
<td className="border px-3 py-2">Explorer</td>
<td className="border px-3 py-2">No</td>
<td className="border px-3 py-2">Off</td>
<td className="border px-3 py-2">Off</td>
</tr>
<tr>
<td className="border px-3 py-2">Pioneer</td>
<td className="border px-3 py-2">Yes</td>
<td className="border px-3 py-2">On</td>
<td className="border px-3 py-2">On</td>
</tr>
</tbody>
Expand Down
6 changes: 3 additions & 3 deletions src/components/nodes/algorithm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ const selector = (state: {
export const AlgorithmNode = memo((node: Node) => {
const { data, selected } = node;
console.log(selected)
console.log(data.numberInputs)
const numberInputs = data.numberInputs || 0;
const numberOutputs = data.numberOutputs || 0;
console.log(data.numberQuantumInputs)
const numberInputs = data.numberQuantumInputs || 0;
const numberOutputs = data.numberQuantumOutputs || 0;

const handleCount = Math.max(numberInputs, numberOutputs);
console.log(handleCount)
Expand Down
4 changes: 2 additions & 2 deletions src/components/nodes/classicalalgorithm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ const selector = (state: any) => ({

export const ClassicalAlgorithmNode = memo((node: Node) => {
const { data, selected } = node;
const numberInputs = data.numberInputs || 0;
const numberOutputs = data.numberOutputs || 0;
const numberInputs = data.numberClassicalInputs || 0;
const numberOutputs = data.numberClassicalOutputs || 0;

const { edges, nodes, updateNodeValue, setSelectedNode, setNewEdges, ancillaMode } = useStore(selector, shallow);
const updateNodeInternals = useUpdateNodeInternals();
Expand Down
155 changes: 122 additions & 33 deletions src/components/nodes/controlstructure.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,41 +23,54 @@ const selector = (state: {
});

export const ControlStructureNode = memo((node: Node) => {
const {data} = node
const [showingChildren, setShowingChildren] = useState(false);
const { setNodes, updateNodeValue, setSelectedNode, edges } = useStore(selector, shallow);
const updateNodeInternals = useUpdateNodeInternals();
const numberQuantumInputs = data.numberQuantumInputs || 1;
const numberClassicalInputs = data.numberClassicalInputs || 1;
const quantumHandles = Array.from({ length: numberQuantumInputs }, (_, index) => index);
const classicalHandles = Array.from({ length: numberClassicalInputs }, (_, index) => index);
const [quantumOutputHandles, setQuantumOutputHandles] = useState([0]);
const [classicalOutputHandles, setClassicalOutputHandles] = useState([0]);
const [condition, setCondition] = useState("");

const [quantumHandles, setQuantumHandles] = useState([0]);
const [quantumOutputHandles, setQuantumOutputHandles] = useState([0]);
const [condition, setCondition] = useState("");
console.log("quantumHandles", quantumHandles)
console.log("data.numberQuantumInputs", data.numberQuantumInputs)
console.log("numberQuantumInputs", numberQuantumInputs)

useEffect(() => {
const connectedQuantumInputs = quantumHandles.filter((index) =>
edges.some((edge) => edge.targetHandle === `quantumHandleInputInitialization${node.id}-${index}`)
// determine internal output handles (left side of right polygon) that are connected
const connectedQuantumOutputs = quantumHandles.filter((index) =>
edges.some((edge) => edge.targetHandle === `quantumHandleInputDynamic${node.id}-${index}`)
);

const lastIndex = quantumHandles[quantumHandles.length - 1];
const lastHandleId = `quantumHandleInputInitialization${node.id}-${lastIndex}`;
const isLastConnected = edges.some(edge => edge.targetHandle === lastHandleId);
const connectedClassicalOutputs = classicalHandles.filter((index) =>
edges.some((edge) => edge.targetHandle === `classicalHandleInputDynamic${node.id}-${index}`)
);

//const lastIndex = quantumHandles[quantumHandles.length - 1];
//const lastHandleId = `quantumHandleInputInitialization${node.id}-${lastIndex}`;
//const isLastConnected = edges.some(edge => edge.targetHandle === lastHandleId);

// Add only if not already added
if (isLastConnected && quantumHandles.length === connectedQuantumInputs.length) {
setQuantumHandles((prev) => [...prev, prev.length]);
}
// if (isLastConnected && quantumHandles.length === connectedQuantumInputs.length) {
// setQuantumHandles((prev) => [...prev, prev.length]);
// }

if (node.data.condition !== null) {
//updateNodeValue(node.id, "condition", node.data.condition);
} else {
updateNodeValue(node.id, "condition", condition);
}
setQuantumOutputHandles(connectedQuantumInputs);
setClassicalOutputHandles(connectedClassicalOutputs);
setQuantumOutputHandles(connectedQuantumOutputs);
updateNodeInternals(node.id);
}, [edges, node.id]);



const dynamicHeight = 600 + Math.max(0, quantumHandles.length - 1) * 30;
const totalHandles = Math.max(quantumHandles.length, 0);
const dynamicHeight = 600 + Math.max(0, quantumHandles.length - 1 + (classicalHandles.length - 1)) * 30;
const totalHandles = Math.max(classicalHandles.length + quantumHandles.length, classicalOutputHandles.length + quantumOutputHandles.length);
const hexagonHeight = Math.max(250, 180 + totalHandles * 30);
const hexagonTopOffset = -(hexagonHeight / 2) + 20;

Expand Down Expand Up @@ -132,6 +145,24 @@ export const ControlStructureNode = memo((node: Node) => {
</div>

{/* Handles - Left */}
<div style={{ position: "absolute", left: "-75px", overflow: "visible" }}>
{classicalHandles.map((index, i) => {
const handleId = `classicalHandleInputInitialization${node.id}-${index}`;
const isConnected = edges.some(edge => edge.targetHandle === handleId);
return (
<Handle
key={handleId}
type="target"
id={handleId}
position={Position.Left}
className={"z-10 classical-circle-port-hex-in !bg-orange-300 !border-black"}
style={{ top: `${hexagonTopOffset + 70 + i * 30}px`, overflow: "visible" }}
isConnectable={true}
isConnectableStart={false}
/>
);
})}
</div>
<div style={{ position: "absolute", left: "-75px", overflow: "visible" }}>
{quantumHandles.map((index, i) => {
const handleId = `quantumHandleInputInitialization${node.id}-${index}`;
Expand All @@ -142,15 +173,39 @@ export const ControlStructureNode = memo((node: Node) => {
type="target"
id={handleId}
position={Position.Left}
className={cn("z-10 circle-port-hex-in", isConnected ? "!bg-blue-300 !border-black" : "!bg-gray-200 !border-dashed !border-black")}
style={{ top: `${hexagonTopOffset + 100 + i * 30}px`, overflow: "visible" }}
className={"z-10 circle-port-hex-in !bg-blue-300 !border-black"}
style={{ top: `${hexagonTopOffset + 100 + classicalHandles.length * 30 + i * 30}px`, overflow: "visible" }}
isConnectable={true}
isConnectableStart={false}
/>
);
})}
</div>
{/* Output Handles - Right side of the left polygon */}
<div style={{ position: "absolute", right: "215px", overflow: "visible" }}>
{classicalHandles.map((index, i) => {
const handleInputId = `classicalHandleInputInitialization${node.id}-${index}`;
const isInputConnected = edges.some(edge => edge.targetHandle === handleInputId);
const handleId = `classicalHandleOutputInitialization${node.id}-${index}`;
const isConnected = edges.some(edge => edge.sourceHandle === handleId);
console.log(isConnected)
return isInputConnected && (
<Handle
key={handleId}
type="source"
id={handleId}
position={Position.Right}
className={"z-10 classical-circle-port-hex-out !bg-orange-300 !border-black"}
style={{
top: `${hexagonTopOffset + 70 + i * 30}px`,
overflow: "visible"
}}
isConnectable={true}
isConnectableEnd={false}
/>
);
})}
</div>
<div style={{ position: "absolute", right: "215px", overflow: "visible" }}>
{quantumHandles.map((index, i) => {
const handleInputId = `quantumHandleInputInitialization${node.id}-${index}`;
Expand All @@ -164,9 +219,9 @@ export const ControlStructureNode = memo((node: Node) => {
type="source"
id={handleId}
position={Position.Right}
className={cn("z-10 circle-port-hex-out", isConnected ? "!bg-blue-300 !border-black" : "!bg-gray-200 !border-dashed !border-black")}
className={"z-10 circle-port-hex-out !bg-blue-300 !border-black"}
style={{
top: `${hexagonTopOffset + 100 + i * 30}px`,
top: `${hexagonTopOffset + 100 + classicalHandles.length * 30 + i * 30}px`,
overflow: "visible"
}}
isConnectable={true}
Expand Down Expand Up @@ -232,6 +287,26 @@ export const ControlStructureNode = memo((node: Node) => {
</div>

{/* Handles - Left side of the right polygon */}
<div style={{ position: "absolute", left: "140px", overflow: "visible" }}>
{classicalHandles.map((index, i) => {
const handleInputId = `classicalHandleInputInitialization${node.id}-${index}`;
const isInputConnected = edges.some(edge => edge.targetHandle === handleInputId);
const handleId = `classicalHandleInputDynamic${node.id}-${index}`;
const isConnected = edges.some(edge => edge.targetHandle === handleId);
return isInputConnected && (
<Handle
key={handleId}
type="target"
id={handleId}
position={Position.Left}
className={"z-10 classical-circle-port-hex-in !bg-orange-300 !border-black"} // wrong position (x-axis)
style={{ top: `${hexagonTopOffset + 70 + i * 30}px`, overflow: "visible" }}
isConnectable={true}
isConnectableStart={false}
/>
);
})}
</div>
<div style={{ position: "absolute", left: "140px", overflow: "visible" }}>
{quantumHandles.map((index, i) => {
const handleInputId = `quantumHandleInputInitialization${node.id}-${index}`;
Expand All @@ -244,11 +319,8 @@ export const ControlStructureNode = memo((node: Node) => {
type="target"
id={handleId}
position={Position.Left}
className={cn(
"z-10 circle-port-hex-in",
isConnected ? "!bg-blue-300 !border-black" : "!bg-gray-200 !border-dashed !border-black"
)}
style={{ top: `${hexagonTopOffset + 100 + i * 30}px`, overflow: "visible" }}
className={"z-10 circle-port-hex-in !bg-blue-300 !border-black"}
style={{ top: `${hexagonTopOffset + 100 + classicalHandles.length * 30 + i * 30}px`, overflow: "visible" }}
isConnectable={true}
isConnectableStart={false}
/>
Expand All @@ -257,23 +329,40 @@ export const ControlStructureNode = memo((node: Node) => {
</div>

{/* Handles - Right side of the right polygon */}
<div style={{ position: "absolute", right: "0px", overflow: "visible" }}>
{classicalHandles.map((index, i) => {
const handleOutputId = `classicalHandleInputDynamic${node.id}-${index}`;
const isOutputConnected = edges.some(edge => edge.targetHandle === handleOutputId);
const handleId = `classicalHandleOutputDynamic${node.id}-${index}`;
//const isConnected = edges.some(edge => edge.sourceHandle === handleId);
return isOutputConnected && (
<Handle
key={handleId}
type="source"
id={handleId}
position={Position.Right}
className={"absolute z-10 classical-circle-port-hex-out !bg-orange-300 !border-black"}
style={{ top: `${hexagonTopOffset + 70 + i * 30}px`, overflow: "visible" }}
isConnectable={true}
isConnectableEnd={false}
/>
);
})}
</div>
<div style={{ position: "absolute", right: "0px", overflow: "visible" }}>
{quantumHandles.map((index, i) => {
const handleInputId = `quantumHandleInputInitialization${node.id}-${index}`;
const isInputConnected = edges.some(edge => edge.targetHandle === handleInputId);
const handleOutputId = `quantumHandleInputDynamic${node.id}-${index}`;
const isOutputConnected = edges.some(edge => edge.targetHandle === handleOutputId);
const handleId = `quantumHandleOutputDynamic${node.id}-${index}`;
const isConnected = edges.some(edge => edge.sourceHandle === handleId);
return isInputConnected && (
//const isConnected = edges.some(edge => edge.sourceHandle === handleId);
return isOutputConnected && (
<Handle
key={handleId}
type="source"
id={handleId}
position={Position.Right}
className={cn(
"z-10 circle-port-hex-out",
isConnected ? "!bg-blue-300 !border-black" : "!bg-gray-200 !border-dashed !border-black"
)}
style={{ top: `${hexagonTopOffset + 100 + i * 30}px`, overflow: "visible" }}
className={"z-10 circle-port-hex-out !bg-blue-300 !border-black"}
style={{ top: `${hexagonTopOffset + 100 + classicalHandles.length * 30 + i * 30}px`, overflow: "visible" }}
isConnectable={true}
isConnectableEnd={false}
/>
Expand Down
Loading