+ {/* Draggable items */}
+ Drag the nodes below onto the canvas to create your flowchart
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reset Conditions & Flowchart
+
+
+
+
+
+ {
+ const newEdge = addEdge(params, edges);
+ if (Array.isArray(newEdge)) {
+ setEdges((prevEdges) => [...prevEdges, ...newEdge]);
+ } else {
+ setEdges((prevEdges) => [...prevEdges, newEdge]);
+ }
+ }}
+ >
+
+
+
+
+
+ Flowchart data (JSON)
+ {JSON.stringify({ nodes, edges }, null, 2)}
+
+
+ Feedback
+ {JSON.stringify(feedback, null, 2)}
+ Loop data
+ {JSON.stringify(loopData, null, 2)}
+
+
+
+ );
+};
+
+export default FlowchartDesigner;
diff --git a/sabago/flowchart-designer/imports/ui/DraggableItem.tsx b/sabago/flowchart-designer/imports/ui/DraggableItem.tsx
new file mode 100644
index 00000000..3ed60b73
--- /dev/null
+++ b/sabago/flowchart-designer/imports/ui/DraggableItem.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { FlowchartElement as Element } from './styles';
+
+const DraggableItem = ({ type, isEnabled }: { type: string; isEnabled: boolean }) => {
+ let displayLabel = type;
+ switch (type) {
+ case 'START_DOPING':
+ displayLabel = 'Doping Type?';
+ break;
+ case 'P-TYPE_DOPING':
+ displayLabel = 'Apply (Boron) p-type Doping';
+ break;
+ case 'N-TYPE_DOPING':
+ displayLabel = 'Apply (Phosphorus) n-type Doping';
+ break;
+ case 'INCREMENT':
+ displayLabel = '+10 Doping';
+ break;
+ case 'DECREMENT':
+ displayLabel = '-10 Doping';
+ break;
+ case 'DOUBLE_BATCH':
+ displayLabel = 'Double Si Batch Size';
+ break;
+ case 'HALVE_BATCH':
+ displayLabel = 'Halve Si Batch Size';
+ break;
+ case 'MAINTAIN_BATCH':
+ displayLabel = 'Maintain Batch Size';
+ break;
+ case 'CALCULATE-CONDUCTIVITY':
+ displayLabel = 'Calc Si Conductivity';
+ break;
+ case 'CHECK-CONDUCTIVITY':
+ displayLabel = 'Check conductivity';
+ break;
+ case 'BATCH-CONDITION':
+ displayLabel = 'Double or half the batch size?';
+ break;
+ case 'DONE':
+ displayLabel = 'Ready for post processing';
+ break;
+ default:
+ break;
+ }
+
+ return (
+