feat: Add schematic component system with drag-and-drop functionality

BREAKING CHANGE:
- Add nanoid dependency for unique component IDs
- Create SchematicComponent for rendering components on canvas
- Implement drag-and-drop from component palette to canvas
- Add component management to schematic store
- Create symbols directory for component symbol definitions
- Enable canvas coordinate transformation for accurate drop positioning

Author: OmarAglan

package-lock.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "konva": "^9.3.20",
+    "nanoid": "^5.1.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-konva": "^19.0.6",

package.json

@@ -2,13 +2,17 @@ import React, { useState, useRef, useEffect } from 'react'
 import { Stage, Layer } from 'react-konva'
 import Konva from 'konva'
 import Grid from './Grid'
+import { useSchematicStore } from '../store/schematicStore'
+import SchematicComponent from './SchematicComponent'
 
 const Canvas: React.FC = () => {
   const [stageSize, setStageSize] = useState({ width: 800, height: 600 })
   const [stageScale, setStageScale] = useState(1)
   const [stagePosition, setStagePosition] = useState({ x: 0, y: 0 })
   const containerRef = useRef<HTMLDivElement>(null)
   const stageRef = useRef<Konva.Stage>(null)
+  const addComponent = useSchematicStore((state) => state.addComponent)
+  const components = useSchematicStore((state) => state.components)
 
   // Handle container resizing
   useEffect(() => {
@@ -77,9 +81,41 @@ const Canvas: React.FC = () => {
     }
   }
 
+  // Handle drag over to allow drops
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }
+
+  // Handle component drop from palette
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    
+    // Get the library ID from the drag data
+    const libraryId = e.dataTransfer.getData('text/plain')
+    if (!libraryId) return
+
+    // Calculate drop position relative to canvas, accounting for pan/zoom
+    const containerRect = containerRef.current?.getBoundingClientRect()
+    if (!containerRect) return
+
+    // Get mouse position relative to container
+    const dropX = e.clientX - containerRect.left
+    const dropY = e.clientY - containerRect.top
+
+    // Convert screen coordinates to canvas coordinates
+    // Account for current pan and zoom transforms
+    const canvasX = (dropX - stagePosition.x) / stageScale
+    const canvasY = (dropY - stagePosition.y) / stageScale
+
+    // Add component to store
+    addComponent(libraryId, { x: canvasX, y: canvasY })
+  }
+
   return (
     <div
       ref={containerRef}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
       style={{
         position: 'absolute',
         top: 0,
@@ -112,7 +148,10 @@ const Canvas: React.FC = () => {
             scale={stageScale}
             position={stagePosition}
           />
-          {/* Future: render components here */}
+          {/* Render all components from store */}
+          {components.map((component) => (
+            <SchematicComponent key={component.id} component={component} />
+          ))}
         </Layer>
       </Stage>
     </div>

src/components/Canvas.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { Component } from '../store/schematicStore';
+import { ResistorSymbol, OpAmpSymbol, MicrophoneSymbol } from './symbols';
+
+interface SchematicComponentProps {
+  component: Component;
+}
+
+const SchematicComponent: React.FC<SchematicComponentProps> = ({ component }) => {
+  const { libraryId, position, rotation } = component;
+
+  // Switch between different symbol components based on library ID
+  switch (libraryId) {
+    case 'RESISTOR_GENERIC':
+      return (
+        <ResistorSymbol
+          x={position.x}
+          y={position.y}
+          rotation={rotation}
+        />
+      );
+    
+    case 'OPAMP_LM386':
+      return (
+        <OpAmpSymbol
+          x={position.x}
+          y={position.y}
+          rotation={rotation}
+        />
+      );
+    
+    case 'ELECTRET_MICROPHONE':
+      return (
+        <MicrophoneSymbol
+          x={position.x}
+          y={position.y}
+          rotation={rotation}
+        />
+      );
+    
+    default:
+      // Fallback for unknown component types
+      console.warn(`Unknown component library ID: ${libraryId}`);
+      return null;
+  }
+};
+
+export default SchematicComponent;

src/components/SchematicComponent.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Group, Circle, Line } from 'react-konva';
+
+interface MicrophoneSymbolProps {
+  x: number;
+  y: number;
+  rotation: number;
+}
+
+const MicrophoneSymbol: React.FC<MicrophoneSymbolProps> = ({ x, y, rotation }) => {
+  return (
+    <Group x={x} y={y} rotation={rotation}>
+      {/* Microphone capsule (circle) */}
+      <Circle
+        x={0}
+        y={0}
+        radius={12}
+        stroke="#000000"
+        strokeWidth={2}
+        fill="none"
+      />
+      
+      {/* Inner circle to represent capsule detail */}
+      <Circle
+        x={0}
+        y={0}
+        radius={8}
+        stroke="#000000"
+        strokeWidth={1}
+        fill="none"
+      />
+      
+      {/* Positive terminal line */}
+      <Line
+        points={[0, -12, 0, -22]}
+        stroke="#000000"
+        strokeWidth={2}
+      />
+      
+      {/* Negative terminal line */}
+      <Line
+        points={[0, 12, 0, 22]}
+        stroke="#000000"
+        strokeWidth={2}
+      />
+      
+      {/* Plus symbol for positive terminal */}
+      <Line
+        points={[-3, -18, 3, -18]}
+        stroke="#000000"
+        strokeWidth={1}
+      />
+      <Line
+        points={[0, -21, 0, -15]}
+        stroke="#000000"
+        strokeWidth={1}
+      />
+      
+      {/* Minus symbol for negative terminal */}
+      <Line
+        points={[-3, 18, 3, 18]}
+        stroke="#000000"
+        strokeWidth={1}
+      />
+    </Group>
+  );
+};
+
+export default MicrophoneSymbol;

src/components/symbols/MicrophoneSymbol.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Group, Line, Text } from 'react-konva';
+
+interface OpAmpSymbolProps {
+  x: number;
+  y: number;
+  rotation: number;
+}
+
+const OpAmpSymbol: React.FC<OpAmpSymbolProps> = ({ x, y, rotation }) => {
+  return (
+    <Group x={x} y={y} rotation={rotation}>
+      {/* Triangle body of op-amp */}
+      <Line
+        points={[-20, -15, -20, 15, 20, 0, -20, -15]}
+        stroke="#000000"
+        strokeWidth={2}
+        fill="none"
+        closed={true}
+      />
+      
+      {/* Positive input line */}
+      <Line
+        points={[-30, -8, -20, -8]}
+        stroke="#000000"
+        strokeWidth={2}
+      />
+      
+      {/* Negative input line */}
+      <Line
+        points={[-30, 8, -20, 8]}
+        stroke="#000000"
+        strokeWidth={2}
+      />
+      
+      {/* Output line */}
+      <Line
+        points={[20, 0, 30, 0]}
+        stroke="#000000"
+        strokeWidth={2}
+      />
+      
+      {/* Plus symbol for positive input */}
+      <Text
+        x={-18}
+        y={-12}
+        text="+"
+        fontSize={10}
+        fill="#000000"
+        fontFamily="Arial"
+      />
+      
+      {/* Minus symbol for negative input */}
+      <Text
+        x={-18}
+        y={4}
+        text="−"
+        fontSize={10}
+        fill="#000000"
+        fontFamily="Arial"
+      />
+    </Group>
+  );
+};
+
+export default OpAmpSymbol;

src/components/symbols/OpAmpSymbol.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Group, Rect, Line } from 'react-konva';
+
+interface ResistorSymbolProps {
+  x: number;
+  y: number;
+  rotation: number;
+}
+
+const ResistorSymbol: React.FC<ResistorSymbolProps> = ({ x, y, rotation }) => {
+  return (
+    <Group x={x} y={y} rotation={rotation}>
+      {/* Left connection line */}
+      <Line
+        points={[-20, 0, -10, 0]}
+        stroke="#000000"
+        strokeWidth={2}
+      />
+      
+      {/* Resistor body (rectangle) */}
+      <Rect
+        x={-10}
+        y={-5}
+        width={20}
+        height={10}
+        stroke="#000000"
+        strokeWidth={2}
+        fill="none"
+      />
+      
+      {/* Right connection line */}
+      <Line
+        points={[10, 0, 20, 0]}
+        stroke="#000000"
+        strokeWidth={2}
+      />
+    </Group>
+  );
+};
+
+export default ResistorSymbol;

src/components/symbols/ResistorSymbol.tsx

@@ -0,0 +1,3 @@
+export { default as ResistorSymbol } from './ResistorSymbol';
+export { default as OpAmpSymbol } from './OpAmpSymbol';
+export { default as MicrophoneSymbol } from './MicrophoneSymbol';