feat: Implement grid snapping and panning functionality in ObjectFlowDesigner

- Added grid snapping to object creation and dragging for better alignment. - Introduced panning support with right-click and mouse wheel events for canvas navigation. - Enhanced object properties for transformers and nodes, including detailed information display. - Updated connection properties to include cable type, cross-section, and length. - Implemented validation for overhead cable connections to ensure correct node types. - Improved rendering logic to account for scrolling and grid display. - Added CSS styles for warnings and specific node types for better UI feedback.
2025-06-26 21:51:42 +02:00
parent c2e91bca1c
commit 643a4210ea
4 changed files with 984 additions and 208 deletions
--- a/index.html
+++ b/index.html
@@ -3,13 +3,13 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Object Flow Designer</title>
+		<title>Power System Designer</title>
 		<link rel="stylesheet" href="styles.css" />
 	</head>
 	<body>
 		<div class="container">
 			<header class="header">
-				<h1>Object Flow Designer</h1>
+				<h1>Power System Designer</h1>
 				<div class="controls">
 					<button id="clearBtn" class="btn btn-danger">Clear All</button>
 					<button id="exportBtn" class="btn btn-secondary">Export Data</button>
@@ -25,24 +25,24 @@

 			<div class="main-content">
 				<div class="toolbar">
-					<h3>Objects</h3>
+					<h3>Components</h3>
 					<div class="object-palette">
 						<div class="palette-item" data-type="triangle">
 							<div class="triangle-preview"></div>
-							<span>Triangle</span>
+							<span>Transformer</span>
 							<small>One output only</small>
 						</div>
 						<div class="palette-item" data-type="square">
 							<div class="square-preview"></div>
-							<span>Square</span>
-							<small>Multiple outputs</small>
+							<span>Node</span>
+							<small>Cable Box or Pole</small>
 						</div>
 					</div>

 					<div class="connection-mode">
-						<h4>Connection Mode</h4>
+						<h4>Cable Mode</h4>
 						<button id="connectionBtn" class="btn btn-primary">
-							Connect Objects
+							Connect with Cable
 						</button>
 						<button id="selectBtn" class="btn btn-outline">Select Mode</button>
 					</div>
--- a/readme.md
+++ b/readme.md
@@ -0,0 +1,157 @@
+# Power System Designer
+
+A web-based graphical interface for designing electrical power distribution systems. This application allows you to create and connect electrical components including transformers, cable boxes, poles, and various types of power cables.
+
+## Components
+
+### 🔺 Transformer
+
+- **Purpose**: Steps down voltage from high to low voltage
+- **Data Fields**:
+  - Number: Unique identifier
+  - Name: Custom name for the transformer
+  - Upper Voltage (V): Input voltage level
+  - Bottom Voltage (V): Output voltage level
+  - Power (kVA): Power rating in kilovolt-amperes
+  - Description: Additional notes
+- **Constraints**: Only one transformer allowed per design, can have only one output connection
+
+### ⬛ Nodes (Cable Boxes, Poles, and End Connections)
+
+- **Cable Box Types**: Hand-input description field for custom box types
+- **Pole Types**: Hand-input description field for custom pole types
+- **End Connection Types**: Terminal connections for overhead lines
+- **Data Fields**:
+  - Number: Unique identifier
+  - Name: Custom name
+  - Node Type: Cable box, pole, or end connection
+  - Type Description: Hand-input field for specific subtype
+  - Power Rating (kW): Power capacity for boxes and end connections (not applicable to poles)
+  - Description: Additional notes
+- **Constraints**:
+  - Cable boxes and poles: One input, multiple outputs
+  - End connections: Multiple inputs, no outputs (terminal points)
+
+### 🔌 Power Cables
+
+Four types of power cables are supported:
+
+#### Ground Cables
+
+- **YAKY**: Underground power cable
+- **NA2XY-J**: Underground power cable with improved insulation
+
+#### Overhead Cables
+
+- **AL**: Aluminum overhead conductor
+- **AsXSn**: Aluminum conductor with steel reinforcement
+
+**Data Fields**:
+
+- Label: Display name for the cable
+- Cable Type: One of the four types above
+- Cross Section (mm²): Cable conductor cross-sectional area
+- Length (m): Cable length in meters
+- Description: Additional specifications
+
+**Constraints**:
+
+- Overhead cables (AL, AsXSn) can only connect to poles or end connections
+- Ground cables (YAKY, NA2XY-J) can connect to any nodes
+- All cables enforce electrical flow direction (no reverse connections)
+- End connections are terminal points (no outgoing connections allowed)
+
+## Features
+
+### Visual Design Interface
+
+- **Drag & Drop**: Place components by clicking on palette items
+- **Grid Snapping**: All components automatically snap to a 20px grid for precise alignment
+- **Connection Mode**: Click "Connect with Cable" then click two components to connect them
+- **Selection Mode**: Click components or cables to select and edit properties
+- **Visual Differentiation**:
+  - Transformers appear as green triangles
+  - Poles appear as dark gray squares with ⬆ symbol
+  - Cable boxes appear as blue squares with ⬛ symbol
+  - End connections appear as red squares with ⬤ symbol
+  - Power ratings displayed below boxes and end connections
+  - Custom type descriptions shown below each node
+- **Enhanced Grid**: Major grid lines every 80px, minor grid lines every 20px for better visual guidance
+
+### Smart Validation
+
+- **Component Limits**: Only one transformer per design
+- **Connection Rules**: Overhead cables automatically validate pole/end connection requirements
+- **Flow Direction**: Prevents invalid electrical connections
+- **Duplicate Prevention**: No duplicate connections between same components
+- **End Connection Rules**: Terminal points cannot have outgoing connections
+
+### Data Management
+
+- **Properties Panel**: Edit all component and cable specifications
+- **Export/Import**: Save and load complete designs as JSON files
+- **Real-time Updates**: Changes immediately reflected in visual design
+
+## Usage Instructions
+
+1. **Adding Components**:
+
+   - Click on "Transformer" or "Node" in the Components panel
+   - Components automatically snap to the grid for precise alignment
+   - For nodes, select type (Cable Box, Pole, or End Connection) in properties
+   - Enter custom type descriptions and power ratings as needed
+   - Components will appear on the canvas and can be moved by dragging (with grid snapping)
+
+2. **Connecting Components**:
+
+   - Click "Connect with Cable" button
+   - Click on the source component (transformer or node)
+   - Click on the destination component to create a cable connection
+   - Switch back to "Select Mode" to edit properties
+
+3. **Editing Properties**:
+
+   - Click on any component or cable in Select Mode
+   - Use the Properties panel on the right to edit specifications
+   - Changes are saved automatically
+
+4. **Validating Design**:
+
+   - Overhead cables will show warnings if not connected to poles or end connections
+   - End connections automatically prevent outgoing connections
+   - Invalid connections are prevented with error messages
+   - Visual indicators show connection status and power ratings
+
+5. **Saving/Loading**:
+   - Use "Export Data" to save your design as a JSON file
+   - Use "Import Data" to load a previously saved design
+   - "Clear All" removes all components and connections
+
+## Technical Specifications
+
+- **Built with**: HTML5 Canvas, CSS3, Vanilla JavaScript
+- **File Format**: JSON for data persistence
+- **Browser Support**: Modern browsers with Canvas support
+- **Responsive**: Adapts to different screen sizes
+
+## File Structure
+
+```
+web/
+├── index.html          # Main application interface
+├── styles.css          # CSS styling and layout
+├── script.js           # Core application logic
+└── README.md          # This documentation
+```
+
+## Power System Rules Enforced
+
+1. **Electrical Flow**: Power flows from transformer to nodes only
+2. **Voltage Levels**: Transformer steps down from high to low voltage
+3. **Cable Types**: Different cables for underground vs overhead installation
+4. **Infrastructure**: Overhead cables require pole infrastructure or end connections
+5. **Connection Limits**: Realistic electrical connection constraints
+6. **Safety Standards**: Prevents invalid electrical configurations
+7. **Power Management**: Track power ratings for distribution points and end connections
+
+This application is designed for educational purposes and basic power system planning. For actual electrical installations, consult qualified electrical engineers and follow local electrical codes.
--- a/script.js
+++ b/script.js
--- a/styles.css
+++ b/styles.css
@@ -321,6 +321,47 @@ body {
 	font-size: 0.85rem;
 }

+/* Warning styling for overhead cable validation */
+.warning {
+	color: #d69e2e;
+	background-color: #fef5e7;
+	border: 1px solid #f6e05e;
+	border-radius: 4px;
+	padding: 0.5rem;
+	margin: 0.5rem 0;
+	font-size: 0.85rem;
+}
+
+.warning strong {
+	color: #c05621;
+}
+
+.pole-node {
+	background: #4a5568 !important;
+	border-color: #2d3748 !important;
+}
+
+.cable-box-node {
+	background: #4299e1 !important;
+	border-color: #2c5282 !important;
+}
+
+/* Power system specific styling */
+.transformer-preview {
+	width: 0;
+	height: 0;
+	border-left: 15px solid transparent;
+	border-right: 15px solid transparent;
+	border-bottom: 25px solid #48bb78;
+}
+
+.node-preview {
+	width: 30px;
+	height: 30px;
+	background: linear-gradient(45deg, #4299e1 50%, #4a5568 50%);
+	border-radius: 4px;
+}
+
 /* Responsive design */
@media (max-width: 1024px) {
 	.main-content {