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

BIN
indicator_panel issue.PNG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

339
js/ui/chart.js
View File

@ -169,6 +169,7 @@ constructor() {
this.avgPriceSeries = null;
this.dailyMAData = new Map(); // timestamp -> { ma44, ma125, price }
this.currentMouseTime = null;
this.drawingItems = []; // Store drawing items for management
// Throttled versions of heavy functions
this.throttledOnVisibleRangeChange = throttle(this.onVisibleRangeChange.bind(this), 150);
@ -522,6 +523,9 @@ constructor() {
}
}
// Drawing Tools
this.initDrawingTools();
// Initialize state from storage
this.scaleState = {
autoScale: localStorage.getItem('winterfail_scale_auto') !== 'false',
@ -579,6 +583,341 @@ constructor() {
});
}
initDrawingTools() {
const btnDrawingTools = document.getElementById('btnDrawingTools');
const drawingToolsPopup = document.getElementById('drawingToolsPopup');
if (btnDrawingTools && drawingToolsPopup) {
btnDrawingTools.addEventListener('click', (e) => {
e.stopPropagation();
drawingToolsPopup.classList.toggle('hidden');
});
document.addEventListener('click', closeDrawingToolsPopup);
document.addEventListener('touchstart', closeDrawingToolsPopup, { passive: true });
function closeDrawingToolsPopup(e) {
const isInside = drawingToolsPopup.contains(e.target) || e.target === btnDrawingTools;
const isDrawingButton = e.target.closest('#btnDrawingTools');
if (!isInside && !isDrawingButton) {
drawingToolsPopup.classList.add('hidden');
}
}
}
let isDrawing = false;
let drawMode = null;
let startPoint = null;
let drawLine = null;
let drawArrow = null;
let drawText = null;
window.activateDrawingTool = (tool) => {
if (tool === 'clear') {
this.clearDrawingTools();
return;
}
drawMode = tool;
isDrawing = true;
const chart = this.chart;
const container = chart.container();
const onMouseDown = (e) => {
e.preventDefault();
const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
if (drawMode === 'trend_line' || drawMode === 'horizontal_line' || drawMode === 'vertical_line') {
this.createLine(x, y);
} else if (drawMode === 'arrow_up' || drawMode === 'arrow_down') {
this.createArrow(drawMode === 'arrow_up' ? 'arrowUp' : 'arrowDown', x, y);
} else if (drawMode === 'text') {
this.createText(x, y);
}
};
const onTouchStart = (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = container.getBoundingClientRect();
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
if (drawMode === 'trend_line' || drawMode === 'horizontal_line' || drawMode === 'vertical_line') {
this.createLine(x, y);
} else if (drawMode === 'arrow_up' || drawMode === 'arrow_down') {
this.createArrow(drawMode === 'arrow_up' ? 'arrowUp' : 'arrowDown', x, y);
} else if (drawMode === 'text') {
this.createText(x, y);
}
};
container.addEventListener('mousedown', onMouseDown);
container.addEventListener('touchstart', onTouchStart);
const closeDrawing = () => {
container.removeEventListener('mousedown', onMouseDown);
container.removeEventListener('touchstart', onTouchStart);
document.removeEventListener('click', closeDrawing);
document.removeEventListener('touchstart', closeDrawing);
};
document.addEventListener('click', closeDrawing);
document.addEventListener('touchstart', closeDrawing);
drawingToolsPopup.classList.add('hidden');
};
}
createLine(x, y) {
const chart = this.chart;
const candleSeries = this.candleSeries;
let lineData = {
time: [],
value: []
};
const line = chart.addLineSeries({
color: '#2962ff',
lineWidth: 2,
lineStyle: LightweightCharts.LineStyle.Solid,
crosshairMarkerVisible: true,
crosshairMarkerRadius: 4,
baseIndex: 0,
});
let points = [];
const container = chart.container();
let startTime = null;
let startPrice = null;
const onMouseDown = (e) => {
e.preventDefault();
const rect = container.getBoundingClientRect();
const clientX = e.clientX;
const clientY = e.clientY;
const timeCoord = chart.timeScale().coordinateToTime(x);
const price = chart.priceScale().coordinateToPrice(y);
if (startTime === null) {
startTime = timeCoord;
startPrice = price;
line.setData([{
time: startTime,
value: startPrice
}]);
} else {
line.setData([
{ time: startTime, value: startPrice },
{ time: timeCoord, value: price }
]);
startTime = null;
startPrice = null;
}
};
const onTouchStart = (e) => {
e.preventDefault();
const touch = e.touches[0];
const rect = container.getBoundingClientRect();
const clientX = touch.clientX;
const clientY = touch.clientY;
const timeCoord = chart.timeScale().coordinateToTime(x);
const price = chart.priceScale().coordinateToPrice(y);
if (startTime === null) {
startTime = timeCoord;
startPrice = price;
line.setData([{
time: startTime,
value: startPrice
}]);
} else {
line.setData([
{ time: startTime, value: startPrice },
{ time: timeCoord, value: price }
]);
startTime = null;
startPrice = null;
}
};
container.addEventListener('mousedown', onMouseDown);
container.addEventListener('touchstart', onTouchStart);
const cleanup = () => {
container.removeEventListener('mousedown', onMouseDown);
container.removeEventListener('touchstart', onTouchStart);
};
document.addEventListener('click', cleanup);
document.addEventListener('touchstart', cleanup);
}
createArrow(arrowType, x, y) {
const chart = this.chart;
const container = chart.container();
const markerPrimitive = new SeriesMarkersPrimitive();
this.candleSeries.attachPrimitive(markerPrimitive);
const rect = container.getBoundingClientRect();
const time = chart.timeScale().coordinateToTime(x);
const price = chart.priceScale().coordinateToPrice(y);
const marker = {
time: time,
position: arrowType === 'arrowUp' ? 'belowBar' : 'aboveBar',
color: arrowType === 'arrowUp' ? '#26a69a' : '#ef5350',
shape: arrowType === 'arrowUp' ? 'arrowUp' : 'arrowDown',
text: ''
};
markerPrimitive.setMarkers([marker]);
let isDragging = false;
let startX = 0;
let startY = 0;
let startTime = time;
let startPrice = price;
const onMouseDown = (e) => {
e.preventDefault();
isDragging = true;
startX = e.clientX;
startY = e.clientY;
};
const onMouseMove = (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
const rect = container.getBoundingClientRect();
const timeCoord = chart.timeScale().coordinateToTime(x + dx);
const newPrice = chart.priceScale().coordinateToPrice(y + dy);
const newMarker = {
time: timeCoord,
position: arrowType === 'arrowUp' ? 'belowBar' : 'aboveBar',
color: arrowType === 'arrowUp' ? '#26a69a' : '#ef5350',
shape: arrowType === 'arrowUp' ? 'arrowUp' : 'arrowDown',
text: ''
};
markerPrimitive.setMarkers([newMarker]);
};
const onMouseUp = () => {
isDragging = false;
};
container.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
const cleanup = () => {
container.removeEventListener('mousedown', onMouseDown);
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('click', cleanup);
document.removeEventListener('touchstart', cleanup);
};
document.addEventListener('click', cleanup);
document.addEventListener('touchstart', cleanup);
}
createText(x, y) {
const chart = this.chart;
const container = chart.container();
const text = prompt('Enter text label:', '');
if (!text) return;
const rect = container.getBoundingClientRect();
const time = chart.timeScale().coordinateToTime(x);
const price = chart.priceScale().coordinateToPrice(y);
const label = chart.addLabel({
text: text,
color: '#ffffff',
fontSize: 11,
fontFamily: 'Inter',
fontWeight: 'bold',
crosshairMarkerVisible: false,
time: time,
price: price
});
let isDragging = false;
let startX = 0;
let startY = 0;
let startTime = time;
let startPrice = price;
const onMouseDown = (e) => {
e.preventDefault();
isDragging = true;
startX = e.clientX;
startY = e.clientY;
};
const onMouseMove = (e) => {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
const newTime = chart.timeScale().coordinateToTime(x + dx);
const newPrice = chart.priceScale().coordinateToPrice(y + dy);
label.applyOptions({
time: newTime,
price: newPrice
});
};
const onMouseUp = () => {
isDragging = false;
};
container.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
const cleanup = () => {
container.removeEventListener('mousedown', onMouseDown);
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('click', cleanup);
document.removeEventListener('touchstart', cleanup);
};
document.addEventListener('click', cleanup);
document.addEventListener('touchstart', cleanup);
}
clearDrawingTools() {
const allSeries = this.chart.series();
allSeries.forEach(series => {
if (series.type !== 'Candlestick' && series.type !== 'Line' && series.type !== 'Area') {
this.chart.removeSeries(series);
}
});
}
initNavigationControls() {
const chartWrapper = document.getElementById('chartWrapper');
const navLeft = document.getElementById('navLeft');

27
test.json Normal file
View File

@ -0,0 +1,27 @@
{
"$schema": "https://opencode.ai/theme.json",
"theme": {
"background": "#09141B",
"text": "#DEB88D",
"textMuted": "#17384C",
"border": "#17384C",
"borderActive": "#1BBCDD",
"primary": "#FCA02F",
"secondary": "#027C9B",
"accent": "#68D4F1",
"error": "#D15123",
"warning": "#FDD39F",
"success": "#50A3B5",
"info": "#1E4950",
"backgroundPanel": "#17384C",
"backgroundElement": "#1E4950",
"diffAdded": "#628D98",
"diffRemoved": "#D48678",
"diffContext": "#17384C",
"diffHunkHeader": "#434B53",
"diffHighlightAdded": "#1BBCDD",
"diffHighlightRemoved": "#D48678",
"diffAddedBg": "#09141B",
"diffRemovedBg": "#09141B"
}
}