p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add drawing tools to chart

Browse Source 
- Add drawing tools button to chart toolbar
- Implement trend lines, horizontal/vertical lines
- Add arrow markers (up/down)
- Add text labels
- Implement clear all functionality
- Support both desktop and mobile touch events
This commit is contained in:
DiTus
2026-03-21 09:41:58 +01:00
parent 96edde8f81
commit a34f80f841
4 changed files with 403 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@ -106,13 +106,43 @@
<div id="chart" class="w-full h-full"></div>
<!-- Overlay Controls -->
<div class="absolute bottom-4 right-4 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="priceScaleControls">
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnSettings" title="Settings">
<span class="material-symbols-outlined text-sm">settings</span>
</button>
<!-- Settings Popup -->
<div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="settingsPopup">
<div class="absolute bottom-4 right-4 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="priceScaleControls">
<!-- Drawing Tools Button -->
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnDrawingTools" title="Drawing Tools">
<span class="material-symbols-outlined text-sm">draw</span>
</button>
<!-- Drawing Tools Popup -->
<div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="drawingToolsPopup">
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('trend_line')">
<span class="material-symbols-outlined text-sm">call_split</span> Trend Line
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('horizontal_line')">
<span class="material-symbols-outlined text-sm">swap_horizontal_circle</span> Horizontal Line
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('vertical_line')">
<span class="material-symbols-outlined text-sm">swap_vert</span> Vertical Line
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('text')">
<span class="material-symbols-outlined text-sm">text_fields</span> Text Label
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('arrow_up')">
<span class="material-symbols-outlined text-sm">arrow_upward</span> Arrow Up
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('arrow_down')">
<span class="material-symbols-outlined text-sm">arrow_downward</span> Arrow Down
</div>
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.activateDrawingTool('clear')">
<span class="material-symbols-outlined text-sm">clear_all</span> Clear All
</div>
</div>
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnSettings" title="Settings">
<span class="material-symbols-outlined text-sm">settings</span>
</button>
<!-- Settings Popup -->
<div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="settingsPopup">
<!-- Reset Scale -->
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.dashboard.chart.timeScale().fitContent()">
<span class="material-symbols-outlined text-sm">refresh</span> Reset price scale