Admin/elcalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement grid snapping and panning functionality in ObjectFlowDesigner

Browse Source 
- 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
2025-06-26 21:51:42 +02:00
parent c2e91bca1c
commit 643a4210ea
4 changed files with 984 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@@ -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>