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

feat: Refactor toolbar and icon interactions in ObjectFlowDesigner

Browse Source
This commit is contained in:
Chop
2025-06-26 22:42:38 +02:00
parent 643a4210ea
commit a45e8cf262
3 changed files with 700 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
index.html
View File

@@ -25,32 +25,67 @@
<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 class="toolbar-section">
<div class="toolbar-label">Objects</div>
<div class="icon-toolbar">
<button class="icon-btn" data-type="triangle" title="Transformer">
<div class="icon-triangle"></div>
</button>
<button class="icon-btn" data-type="box" title="Cable Box">
<div class="icon-box"></div>
</button>
<button class="icon-btn" data-type="pole" title="Pole">
<div class="icon-pole"></div>
</button>
<button class="icon-btn" data-type="end" title="End Connection">
<div class="icon-end"></div>
</button>
</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 class="toolbar-section">
<div class="toolbar-label">Cables</div>
<div class="icon-toolbar">
<button
class="icon-btn"
data-type="underground"
title="Underground Cable"
>
<div class="icon-underground"></div>
</button>
<button
class="icon-btn"
data-type="overhead"
title="Overhead Cable"
>
<div class="icon-overhead"></div>
</button>
</div>
</div>
<div class="toolbar-section">
<div class="toolbar-label">Tools</div>
<div class="icon-toolbar">
<button
id="selectBtn"
class="icon-btn tool-btn active"
title="Select Mode"
>
<div class="icon-select"></div>
</button>
<button
id="deleteBtn"
class="icon-btn tool-btn"
title="Delete Mode"
>
<div class="icon-delete"></div>
</button>
</div>
</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">
@@ -62,6 +97,9 @@
</div>
</div>
<!-- Tooltip moved outside containers to avoid overflow issues -->
<div id="tooltip" class="tooltip"></div>
<script src="script.js"></script>
</body>
</html>