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.
This commit is contained in:
Chop
16
index.html
16
index.html
@@ -3,13 +3,13 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<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" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<h1>Object Flow Designer</h1>
|
<h1>Power System Designer</h1>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button id="clearBtn" class="btn btn-danger">Clear All</button>
|
<button id="clearBtn" class="btn btn-danger">Clear All</button>
|
||||||
<button id="exportBtn" class="btn btn-secondary">Export Data</button>
|
<button id="exportBtn" class="btn btn-secondary">Export Data</button>
|
||||||
@@ -25,24 +25,24 @@
|
|||||||
|
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<div class="toolbar">
|
<div class="toolbar">
|
||||||
<h3>Objects</h3>
|
<h3>Components</h3>
|
||||||
<div class="object-palette">
|
<div class="object-palette">
|
||||||
<div class="palette-item" data-type="triangle">
|
<div class="palette-item" data-type="triangle">
|
||||||
<div class="triangle-preview"></div>
|
<div class="triangle-preview"></div>
|
||||||
<span>Triangle</span>
|
<span>Transformer</span>
|
||||||
<small>One output only</small>
|
<small>One output only</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="palette-item" data-type="square">
|
<div class="palette-item" data-type="square">
|
||||||
<div class="square-preview"></div>
|
<div class="square-preview"></div>
|
||||||
<span>Square</span>
|
<span>Node</span>
|
||||||
<small>Multiple outputs</small>
|
<small>Cable Box or Pole</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="connection-mode">
|
<div class="connection-mode">
|
||||||
<h4>Connection Mode</h4>
|
<h4>Cable Mode</h4>
|
||||||
<button id="connectionBtn" class="btn btn-primary">
|
<button id="connectionBtn" class="btn btn-primary">
|
||||||
Connect Objects
|
Connect with Cable
|
||||||
</button>
|
</button>
|
||||||
<button id="selectBtn" class="btn btn-outline">Select Mode</button>
|
<button id="selectBtn" class="btn btn-outline">Select Mode</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
157
readme.md
157
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.
|
||||||
|
|||||||
41
styles.css
41
styles.css
@@ -321,6 +321,47 @@ body {
|
|||||||
font-size: 0.85rem;
|
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 */
|
/* Responsive design */
|
||||||
@media (max-width: 1024px) {
|
@media (max-width: 1024px) {
|
||||||
.main-content {
|
.main-content {
|
||||||
|
|||||||
Reference in New Issue
Block a user