643a4210ea
- 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.
68 lines
1.8 KiB
HTML
68 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Power System Designer</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<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>
|
|
<button id="importBtn" class="btn btn-secondary">Import Data</button>
|
|
<input
|
|
type="file"
|
|
id="fileInput"
|
|
accept=".json"
|
|
style="display: none"
|
|
/>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="main-content">
|
|
<div class="toolbar">
|
|
<h3>Components</h3>
|
|
<div class="object-palette">
|
|
<div class="palette-item" data-type="triangle">
|
|
<div class="triangle-preview"></div>
|
|
<span>Transformer</span>
|
|
<small>One output only</small>
|
|
</div>
|
|
<div class="palette-item" data-type="square">
|
|
<div class="square-preview"></div>
|
|
<span>Node</span>
|
|
<small>Cable Box or Pole</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="connection-mode">
|
|
<h4>Cable Mode</h4>
|
|
<button id="connectionBtn" class="btn btn-primary">
|
|
Connect with Cable
|
|
</button>
|
|
<button id="selectBtn" class="btn btn-outline">Select Mode</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="canvas-container">
|
|
<canvas id="canvas" width="1200" height="800"></canvas>
|
|
<div id="tooltip" class="tooltip"></div>
|
|
</div>
|
|
|
|
<div class="properties-panel">
|
|
<h3>Properties</h3>
|
|
<div id="objectProperties">
|
|
<p class="no-selection">No object selected</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|