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

feat: Add fat arrow pointer and directional arrows with color/text settings, implement active state for drawing toolbar buttons

Browse Source
This commit is contained in:
DiTus
2026-03-22 19:57:35 +01:00
parent 0f1ea8976c
commit 5b6b134c16
2 changed files with 216 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@ -107,28 +107,37 @@
<!-- Horizontal Drawing Toolbar (Top) -->
<div class="absolute top-2 left-1/2 -translate-x-1/2 flex flex-row gap-1 z-30 bg-[#1a2333]/80 backdrop-blur border border-[#2d3a4f] p-1 rounded-md shadow-xl" id="drawingToolbar">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('trend_line', event)" title="Trend Line">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="trend_line" onclick="window.activateDrawingTool('trend_line', event)" title="Trend Line">
<span class="material-symbols-outlined text-sm">call_split</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('horizontal_line', event)" title="Horizontal Line">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="horizontal_line" onclick="window.activateDrawingTool('horizontal_line', event)" title="Horizontal Line">
<span class="material-symbols-outlined text-sm">swap_horizontal_circle</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('vertical_line', event)" title="Vertical Line">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="vertical_line" onclick="window.activateDrawingTool('vertical_line', event)" title="Vertical Line">
<span class="material-symbols-outlined text-sm">swap_vert</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('rectangle', event)" title="Rectangle">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="rectangle" onclick="window.activateDrawingTool('rectangle', event)" title="Rectangle">
<span class="material-symbols-outlined text-sm">crop_square</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('text', event)" title="Text Label">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="text" onclick="window.activateDrawingTool('text', event)" title="Text Label">
<span class="material-symbols-outlined text-sm">text_fields</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_up', event)" title="Arrow Up">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="arrow_pointer" onclick="window.activateDrawingTool('arrow_pointer', event)" title="Arrow Pointer">
<span class="material-symbols-outlined text-sm">call_made</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="arrow_up" onclick="window.activateDrawingTool('arrow_up', event)" title="Arrow Up">
<span class="material-symbols-outlined text-sm">arrow_upward</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_down', event)" title="Arrow Down">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="arrow_down" onclick="window.activateDrawingTool('arrow_down', event)" title="Arrow Down">
<span class="material-symbols-outlined text-sm">arrow_downward</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('measure', event)" title="Measure">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="arrow_left" onclick="window.activateDrawingTool('arrow_left', event)" title="Arrow Left">
<span class="material-symbols-outlined text-sm">arrow_back</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="arrow_right" onclick="window.activateDrawingTool('arrow_right', event)" title="Arrow Right">
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="measure" onclick="window.activateDrawingTool('measure', event)" title="Measure">
<span class="material-symbols-outlined text-sm">straighten</span>
</button>
<div class="w-[1px] h-full bg-[#2d3a4f] mx-0.5"></div>