Merge pull request #170 from festim-dev/highligh-node

Highlight node

Author: RemDelaporteMathurin

src/components/nodes/AmplifierNode.jsx

@@ -6,29 +6,38 @@ export function AmplifierNode({ data }) {
     <div
       style={{
         width: 90,
-        height: 80,
+        height: 60,
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
+        borderRadius: 8,
+        padding: 8,
         fontWeight: 'bold',
         position: 'relative',
         cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
-
-      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <polygon points="0,0 100,50 0,100" fill={data.nodeColor || "#DDE6ED"} />
-      </svg>
+      {/* Amplifier symbol */}
       <div style={{ 
-        fontSize: '12px',
-        textAlign: 'center',
-        background: 'transparent',
-        transform: 'translate(-80%, -50%)',
-        top: '50%',
-        left: '50%',
-        position: 'absolute',
+        fontSize: '16px',
+        fontWeight: 'bold',
+        marginBottom: '2px',
       }}>
-          {data.label}
+        ×{data.gain || 'K'}
       </div>
-
+      
+      {/* Optional label */}
+      {data.label && (
+        <div style={{ 
+          fontSize: '10px',
+          textAlign: 'center',
+        }}>
+          {data.label}
+        </div>
+      )}
 
       <Handle type="target" position="left" style={{ background: '#555' }} />
       <Handle type="source" position="right" style={{ background: '#555' }} />
@@ -41,29 +50,38 @@ export function AmplifierNodeReverse({ data }) {
     <div
       style={{
         width: 90,
-        height: 80,
+        height: 60,
+        background: data.nodeColor || '#DDE6ED',
         color: 'black',
+        borderRadius: 8,
+        padding: 8,
         fontWeight: 'bold',
         position: 'relative',
         cursor: 'pointer',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
-
-      <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
-          <polygon points="0,50 100,100 100,0" fill={data.nodeColor || "#DDE6ED"} />
-      </svg>
+      {/* Amplifier symbol with reverse indicator */}
       <div style={{ 
-        fontSize: '12px',
-        textAlign: 'center',
-        background: 'transparent',
-        transform: 'translate(-50%, -50%)',
-        top: '50%',
-        left: '50%',
-        position: 'absolute',
+        fontSize: '16px',
+        fontWeight: 'bold',
+        marginBottom: '2px',
       }}>
-          {data.label}
+        ×{data.gain || 'K'}
       </div>
-
+      
+      {/* Optional label */}
+      {data.label && (
+        <div style={{ 
+          fontSize: '10px',
+          textAlign: 'center',
+        }}>
+          {data.label}
+        </div>
+      )}
 
       <Handle type="target" position="right" style={{ background: '#555' }} />
       <Handle type="source" position="left" style={{ background: '#555' }} />

src/components/nodes/DefaultNode.jsx

@@ -8,7 +8,7 @@ export default function DefaultNode({ data }) {
         width: 180,
         background: data.nodeColor || '#DDE6ED',
         color: 'black',
-        borderRadius: 0,
+        borderRadius: 8,
         padding: 10,
         fontWeight: 'bold',
         position: 'relative',

src/components/nodes/IntegratorNode.jsx

@@ -12,7 +12,7 @@ export default function IntegratorNode({ data }) {
         width: 180,
         background: data.nodeColor || '#DDE6ED',
         color: 'black',
-        borderRadius: 0,
+        borderRadius: 8,
         padding: 10,
         fontWeight: 'bold',
         position: 'relative',

src/styles/App.css

@@ -14,6 +14,18 @@
   background-color: #0056b3 !important;
 }
 
+/* Node hover effects */
+.react-flow__node:hover > div {
+  border: 2px solid #78A083 !important;
+  box-shadow: 0 0 8px #78a08366;
+}
+
+/* Default border for divs */
+.react-flow__node > div {
+  border: 2px solid #ccc !important;
+}
+
+
 /* App container */
 .app {
   width: 100vw;