feat: #comment added colorized ports and connections

SCRT-HQ · Oct 1, 2024 · 396285c · 396285c
1 parent 96a187a
commit 396285c
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 18 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -59,18 +59,18 @@ function AudioDeviceArrangerApp() {
 
   const [isDarkMode, setIsDarkMode] = useState(() => {
     const saved = localStorage.getItem('darkMode')
-    return saved ? JSON.parse(saved) : false
+    return saved ? JSON.parse(saved) : true
   })
 
   const [editingDevice, setEditingDevice] = useState<Device | null>(null)
   const [isAddingDevice, setIsAddingDevice] = useState(false)
 
   useEffect(() => {
     localStorage.setItem('darkMode', JSON.stringify(isDarkMode))
-    if (isDarkMode) {
-      document.documentElement.classList.add('dark')
-    } else {
+    if (!isDarkMode) {
       document.documentElement.classList.remove('dark')
+    } else {
+      document.documentElement.classList.add('dark')
     }
   }, [isDarkMode])
 
@@ -117,7 +117,7 @@ function AudioDeviceArrangerApp() {
       },
       animated: true,
       zIndex: 1010,
-      type: 'arrow',
+      type: 'smoothstep',
     }),
     [isDarkMode],
   )

diff --git a/src/components/AddDeviceForm.tsx b/src/components/AddDeviceForm.tsx
@@ -3,6 +3,7 @@
 import React, { useState } from 'react'
 import { Device, Port } from '../types/devices'
 import * as Form from '@radix-ui/react-form'
+import { colorOptions } from '../constants/colors'
 
 interface AddDeviceFormProps {
   onAddDevice: (device: Omit<Device, 'id'>) => void
@@ -33,6 +34,7 @@ const AddDeviceForm: React.FC<AddDeviceFormProps> = ({ onAddDevice }) => {
         id: `input-${Date.now()}`,
         name: `Input ${inputs.length + 1}`,
         type: 'input',
+        color: colorOptions[Math.floor(Math.random() * colorOptions.length)],
       },
     ])
   }
@@ -44,6 +46,7 @@ const AddDeviceForm: React.FC<AddDeviceFormProps> = ({ onAddDevice }) => {
         id: `output-${Date.now()}`,
         name: `Output ${outputs.length + 1}`,
         type: 'output',
+        color: colorOptions[Math.floor(Math.random() * colorOptions.length)],
       },
     ])
   }

diff --git a/src/components/CustomConnectionLine.tsx b/src/components/CustomConnectionLine.tsx
@@ -25,7 +25,7 @@ const CustomConnectionLine: React.FC<ConnectionLineComponentProps> = ({
     <path
       fill="none"
       stroke={connectionLineStyle?.stroke || '#999'}
-      strokeWidth={connectionLineStyle?.strokeWidth || 2}
+      strokeWidth={connectionLineStyle?.strokeWidth || 1}
       className="animated"
       d={edgePath}
     />

diff --git a/src/components/CustomEdge.tsx b/src/components/CustomEdge.tsx
@@ -1,9 +1,24 @@
 // src/components/CustomEdge.tsx
 
 import React from 'react'
-import { getBezierPath, EdgeProps } from '@xyflow/react'
+import { getSmoothStepPath, EdgeProps } from '@xyflow/react'
 
-const CustomEdge: React.FC<EdgeProps> = ({
+interface HandleElement {
+  id: string
+  position: string
+}
+
+interface CustomEdgeData {
+  sourceHandle?: HandleElement & { style?: React.CSSProperties }
+  targetHandle?: HandleElement & { style?: React.CSSProperties }
+  onDelete?: (id: string) => void
+}
+
+type CustomEdgeProps = EdgeProps & {
+  data?: CustomEdgeData
+}
+
+const CustomEdge: React.FC<CustomEdgeProps> = ({
   id,
   sourceX,
   sourceY,
@@ -13,8 +28,10 @@ const CustomEdge: React.FC<EdgeProps> = ({
   targetPosition,
   style = {},
   data,
+  // sourceHandle,
+  // targetHandle,
 }) => {
-  const [edgePath] = getBezierPath({
+  const [edgePath] = getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,
@@ -23,11 +40,16 @@ const CustomEdge: React.FC<EdgeProps> = ({
     targetPosition,
   })
 
+  const color =
+    data?.sourceHandle?.style?.background ||
+    data?.targetHandle?.style?.background ||
+    '#999'
+
   return (
     <>
       <path
         id={id}
-        style={{ ...style, zIndex: 1000 }}
+        style={{ ...style, stroke: String(color), zIndex: 1000 }}
         className="react-flow__edge-path"
         d={edgePath}
       />

diff --git a/src/components/CustomNode.tsx b/src/components/CustomNode.tsx
@@ -11,10 +11,7 @@ interface CustomNodeData extends Device {
 
 const CustomNode: React.FC<{ data: CustomNodeData }> = ({ data }) => {
   return (
-    <div
-      className="px-4 py-2 shadow-md rounded-md bg-white dark:bg-gray-800 border-2 border-stone-400 dark:border-gray-600"
-      style={{ zIndex: 0 }}
-    >
+    <div className="px-4 py-2 shadow-md rounded-md bg-white dark:bg-gray-800 border-2 border-stone-400 dark:border-gray-600">
       <div className="flex">
         <div className="rounded-full w-12 h-12 flex justify-center items-center bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
           {data.type.charAt(0).toUpperCase()}
@@ -37,9 +34,16 @@ const CustomNode: React.FC<{ data: CustomNodeData }> = ({ data }) => {
               type="target"
               position={Position.Left}
               id={input.id}
-              style={{ left: -8, top: `${(index + 1) * 24}px` }}
+              style={{
+                left: -8,
+                top: `${(index + 1) * 24}px`,
+                background: input.color,
+              }}
             />
-            <span className="text-xs text-gray-600 dark:text-gray-400 ml-2">
+            <span
+              className="text-xs text-gray-600 dark:text-gray-400 ml-2"
+              style={{ color: input.color }}
+            >
               {input.name}
             </span>
           </div>
@@ -52,14 +56,21 @@ const CustomNode: React.FC<{ data: CustomNodeData }> = ({ data }) => {
         </div>
         {data.outputs.map((output: Port, index: number) => (
           <div key={output.id} className="flex items-center justify-end">
-            <span className="text-xs text-gray-600 dark:text-gray-400 mr-2">
+            <span
+              className="text-xs text-gray-600 dark:text-gray-400 mr-2"
+              style={{ color: output.color }}
+            >
               {output.name}
             </span>
             <Handle
               type="source"
               position={Position.Right}
               id={output.id}
-              style={{ right: -8, top: `${(index + 1) * 24}px` }}
+              style={{
+                right: -8,
+                top: `${(index + 1) * 24}px`,
+                background: output.color,
+              }}
             />
           </div>
         ))}

diff --git a/src/components/EditDeviceForm.tsx b/src/components/EditDeviceForm.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState } from 'react'
 import { Device, Port } from '../types/devices'
+import { colorOptions } from '../constants/colors'
 
 interface EditDeviceFormProps {
   device: Device
@@ -27,6 +28,7 @@ const EditDeviceForm: React.FC<EditDeviceFormProps> = ({
         id: `input-${Date.now()}`,
         name: `Input ${inputs.length + 1}`,
         type: 'input',
+        color: colorOptions[Math.floor(Math.random() * colorOptions.length)],
       },
     ])
   }
@@ -38,6 +40,7 @@ const EditDeviceForm: React.FC<EditDeviceFormProps> = ({
         id: `output-${Date.now()}`,
         name: `Output ${outputs.length + 1}`,
         type: 'output',
+        color: colorOptions[Math.floor(Math.random() * colorOptions.length)],
       },
     ])
   }

diff --git a/src/constants/colors.ts b/src/constants/colors.ts
@@ -0,0 +1,12 @@
+export const colorOptions = [
+  '#FF6B6B',
+  '#4ECDC4',
+  '#45B7D1',
+  '#FFA07A',
+  '#98D8C8',
+  '#F06292',
+  '#BA68C8',
+  '#FFD54F',
+  '#4DB6AC',
+  '#7986CB',
+]
diff --git a/src/types/devices.ts b/src/types/devices.ts
@@ -4,6 +4,7 @@ export interface Port {
   id: string
   name: string
   type: 'input' | 'output'
+  color: string
 }
 
 export interface Device {