Vial Node (WIP)

src/App.jsx

@@ -6,7 +6,7 @@
   Background,
   useNodesState,
   useEdgesState,
   addEdge,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import './App.css';
@@ -29,6 +29,7 @@
 import { makeEdge } from './CustomEdge';
 import MultiplierNode from './MultiplierNode';
 import { Splitter2Node, Splitter3Node } from './Splitters';
+import VialNode from './VialNode';
 import BubblerNode from './BubblerNode';
 import WallNode from './WallNode';
 
@@ -53,11 +54,11 @@
   pid: DefaultNode,
   splitter2: Splitter2Node,
   splitter3: Splitter3Node,
+  vial: VialNode,
   wall: WallNode,
   bubbler: BubblerNode,
   white_noise: SourceNode,
   pink_noise: SourceNode,
-
 };
 
 // Defining initial nodes and edges. In the data section, we have label, but also parameters specific to the node.
@@ -805,7 +806,7 @@
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [selectedEdge, selectedNode, copiedNode, duplicateNode, setCopyFeedback]);
 
   return (
     <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>

src/VialNode.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Handle } from '@xyflow/react';
+import vialIcon from './vial-svgrepo-com.svg';
+
+
+export default function VialNode({ data }) {
+  return (
+    <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+    }}>
+        <img src={vialIcon} alt="Vial" width="100 px" style={{
+            // filter: 'hue-rotate(180deg)',  // Change color
+            // // or
+            filter: 'invert(1)',           // Invert colors
+        }}/>
+        <div style={{ 
+            fontSize: '12px',
+            textAlign: 'center',
+            marginBottom: '8px',
+            color: 'white',
+            fontWeight: 'bold',
+        }}>
+            {data.label}<br></br>Not implemented yet
+        </div>
+
+        <Handle type="target" position="top" style={{ background: '#555' }} />
+        <Handle type="source" position="bottom" style={{ background: '#555' }} />
+    </div>
+  );
+}