Compare commits
10 Commits
f9eda9f18b
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 02c54cb354 | |||
| c3ca5670e3 | |||
| bde7945a1b | |||
| eccfcc4b79 | |||
| 31ac1ead5b | |||
| a3bf8624fb | |||
| df657ec621 | |||
| 5b6b134c16 | |||
| 0f1ea8976c | |||
| beda3858e9 |
222
index.html
222
index.html
@ -34,53 +34,73 @@
|
||||
}
|
||||
|
||||
/* Hide scrollbar for clean UI */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* Chart type button active state */
|
||||
.chart-type-btn.active {
|
||||
background-color: #2d3a4f;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Chart type button hover effect */
|
||||
.chart-type-btn:hover {
|
||||
background-color: #2d3a4f;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col h-screen overflow-hidden bg-[#0d1421] text-white font-['Inter']">
|
||||
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="bg-[#0f131e] fixed top-0 w-full z-[60] h-16 px-6 flex items-center justify-between border-b border-[#1b1f2b]">
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Mobile Menu Button -->
|
||||
<button id="mobileMenuBtn" class="md:hidden w-10 h-10 flex items-center justify-center text-[#8fa2b3] hover:text-white hover:bg-[#2d3a4f] rounded-md transition-colors z-50">
|
||||
<span class="material-symbols-outlined text-lg">menu</span>
|
||||
</button>
|
||||
|
||||
<header class="bg-[#0f131e] fixed top-0 w-full z-[60] h-16 px-4 flex items-center justify-between border-b border-[#1b1f2b]">
|
||||
<div class="flex items-center shrink-0">
|
||||
<!-- Search/Symbol Button -->
|
||||
<div class="hidden md:flex items-center space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
|
||||
<div class="flex items-center space-x-2 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
|
||||
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
|
||||
<span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
|
||||
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Search -->
|
||||
<div class="md:hidden flex items-center bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
|
||||
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
|
||||
<span class="font-bold text-sm text-[#dfe2f2] ml-2">BTC/USD</span>
|
||||
<span class="material-symbols-outlined text-sm text-[#8fa2b3] ml-2">chevron_right</span>
|
||||
<!-- Desktop Status (Moved inside the left-aligned group) -->
|
||||
<div class="hidden lg:flex items-center gap-2 ml-6 shrink-0 border-l border-[#2d3a4f] pl-6">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500" id="statusDot"></div>
|
||||
<span class="text-xs text-[#8fa2b3]" id="statusText">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center gap-2 mr-4">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500" id="statusDot"></div>
|
||||
<span class="text-xs text-[#8fa2b3]" id="statusText">Live</span>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-1 items-center overflow-x-auto no-scrollbar" id="timeframeContainer">
|
||||
<!-- Timeframes injected by JS -->
|
||||
<!-- Scrollable Controls Container (Right-aligned on desktop via parent justify-between) -->
|
||||
<div class="flex-1 md:flex-none flex items-center gap-2 ml-4 overflow-x-auto no-scrollbar touch-pan-x justify-end" style="-webkit-overflow-scrolling: touch;">
|
||||
<!-- Chart Type Buttons -->
|
||||
<div class="flex space-x-1 shrink-0">
|
||||
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="candlestick" title="Candlestick">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v3M7 16v3M17 3v2M17 11v4"/><rect x="5" y="8" width="4" height="8" rx="0.5"/><rect x="15" y="5" width="4" height="6" rx="0.5"/></svg>
|
||||
</button>
|
||||
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="line" title="Line">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/></svg>
|
||||
</button>
|
||||
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="bar" title="Bar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v14M7 10H5M7 15h2M17 5v14M17 7h-2M17 12h2"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Separator -->
|
||||
<div class="w-px h-8 bg-[#2d3a4f] mx-1 shrink-0"></div>
|
||||
|
||||
<!-- Timeframes Container -->
|
||||
<div class="flex space-x-1 items-center shrink-0" id="timeframeContainer">
|
||||
<!-- Timeframes injected by JS -->
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 pt-16 overflow-hidden">
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 overflow-y-auto pb-20 md:pb-0 no-scrollbar">
|
||||
<main class="flex-1 flex flex-col overflow-y-auto pb-20 md:pb-0 no-scrollbar">
|
||||
<!-- Price Statistics -->
|
||||
<section id="priceHeader" class="grid grid-cols-2 md:grid-cols-4 gap-2 px-4 py-4 border-b border-[#1e293b] bg-[#0d1421]">
|
||||
<div>
|
||||
@ -102,33 +122,42 @@
|
||||
</section>
|
||||
|
||||
<!-- Chart Container -->
|
||||
<section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper">
|
||||
<section class="relative w-full bg-[#0d1421] flex-1 min-h-[50vh]" data-purpose="chart-container" id="chartWrapper">
|
||||
<div id="chart" class="w-full h-full"></div>
|
||||
|
||||
<!-- 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>
|
||||
@ -314,23 +343,22 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Draggable Divider -->
|
||||
<div id="mainChartResizer" class="h-4 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative">
|
||||
<div class="w-10 h-0.5 bg-gray-500 rounded opacity-50 transition-all"></div>
|
||||
</div>
|
||||
|
||||
<!-- Technical Analysis Section -->
|
||||
<section class="px-4 py-6 bg-[#0d1421] min-h-[300px]" id="taPanel">
|
||||
<section class="px-4 py-4 bg-[#0d1421] shrink-0" id="taPanel">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-bold flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[#b6c4ff]">analytics</span>
|
||||
Technical Analysis
|
||||
<span id="taInterval" class="text-[10px] bg-blue-600/20 text-blue-400 px-2 py-0.5 rounded ml-2 border border-blue-600/30">1D</span>
|
||||
</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<span id="taLastUpdate" class="text-xs text-gray-600 mr-2 hidden sm:inline-block">--</span>
|
||||
<button class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-3 py-1.5 rounded text-xs font-bold hover:shadow-lg transition-all flex items-center gap-1" id="aiBtn" onclick="window.openAIAnalysis()">
|
||||
<span class="material-symbols-outlined text-sm">smart_toy</span> AI Insight
|
||||
</button>
|
||||
<button class="bg-[#1e222d] border border-[#2d3a4f] text-gray-400 px-3 py-1.5 rounded text-xs hover:text-white hover:border-gray-500 transition-colors" onclick="window.refreshTA()">
|
||||
<span class="material-symbols-outlined text-sm align-bottom">refresh</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span id="taLastUpdate" class="text-xs text-gray-600 mr-2 hidden sm:inline-block">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="taContent" class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
@ -414,7 +442,7 @@
|
||||
<span class="material-symbols-outlined text-sm">menu</span>
|
||||
</button>
|
||||
|
||||
<div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421]">
|
||||
<div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421] no-scrollbar">
|
||||
<div class="sidebar-tab-panel active h-full" id="tab-indicators">
|
||||
<div id="indicatorPanel" class="p-2">
|
||||
<!-- Indicators content injected here -->
|
||||
@ -488,6 +516,104 @@
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.hideSidebar = function() {
|
||||
const sidebar = document.getElementById('rightSidebar');
|
||||
if (sidebar && !sidebar.classList.contains('collapsed')) {
|
||||
sidebar.classList.add('collapsed');
|
||||
}
|
||||
};
|
||||
|
||||
window.hideSidebarAndClearDrawings = function() {
|
||||
window.hideSidebar();
|
||||
if (window.dashboard?.drawingManager) {
|
||||
window.dashboard.drawingManager.clearAll();
|
||||
}
|
||||
};
|
||||
|
||||
// Chart Resizer Logic
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const resizer = document.getElementById('mainChartResizer');
|
||||
const chartWrapper = document.getElementById('chartWrapper');
|
||||
|
||||
let isResizing = false;
|
||||
let lastDownY = 0;
|
||||
let savedHeight = localStorage.getItem('chart_height');
|
||||
|
||||
if (resizer && chartWrapper) {
|
||||
if (savedHeight) {
|
||||
chartWrapper.style.flex = 'none';
|
||||
chartWrapper.style.height = savedHeight + 'px';
|
||||
}
|
||||
|
||||
const startResize = (y) => {
|
||||
isResizing = true;
|
||||
lastDownY = y;
|
||||
document.body.style.cursor = 'row-resize';
|
||||
chartWrapper.style.pointerEvents = 'none';
|
||||
};
|
||||
|
||||
const doResize = (y) => {
|
||||
if (!isResizing) return;
|
||||
|
||||
const deltaY = y - lastDownY;
|
||||
lastDownY = y;
|
||||
|
||||
const newHeight = chartWrapper.offsetHeight + deltaY;
|
||||
|
||||
if (newHeight > 200 && newHeight < window.innerHeight - 150) {
|
||||
chartWrapper.style.flex = 'none';
|
||||
chartWrapper.style.height = newHeight + 'px';
|
||||
|
||||
if (window.dashboard && window.dashboard.chart) {
|
||||
const container = document.getElementById('chart');
|
||||
window.dashboard.chart.applyOptions({
|
||||
width: container.clientWidth,
|
||||
height: container.clientHeight
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const endResize = () => {
|
||||
if (isResizing) {
|
||||
isResizing = false;
|
||||
document.body.style.cursor = '';
|
||||
chartWrapper.style.pointerEvents = 'auto';
|
||||
const currentHeight = chartWrapper.style.height;
|
||||
localStorage.setItem('chart_height', currentHeight ? parseFloat(currentHeight) : 75);
|
||||
}
|
||||
};
|
||||
|
||||
resizer.addEventListener('mousedown', (e) => startResize(e.clientY));
|
||||
resizer.addEventListener('touchstart', (e) => startResize(e.touches[0].clientY), {passive: false});
|
||||
|
||||
document.addEventListener('mousemove', (e) => doResize(e.clientY));
|
||||
document.addEventListener('touchmove', (e) => doResize(e.touches[0].clientY), {passive: false});
|
||||
|
||||
document.addEventListener('mouseup', endResize);
|
||||
document.addEventListener('touchend', endResize);
|
||||
document.addEventListener('touchcancel', endResize);
|
||||
}
|
||||
});
|
||||
|
||||
// Hide sidebar when clicking on chart container (but not on drawing toolbar or sidebar itself)
|
||||
const chartWrapper = document.getElementById('chartWrapper');
|
||||
if (chartWrapper) {
|
||||
chartWrapper.addEventListener('click', function(e) {
|
||||
const sidebar = document.getElementById('rightSidebar');
|
||||
const drawingToolbar = document.getElementById('drawingToolbar');
|
||||
|
||||
if (!sidebar || sidebar.classList.contains('collapsed')) return;
|
||||
|
||||
const isDrawingToolbar = e.target.closest('#drawingToolbar');
|
||||
const isSidebar = e.target.closest('#rightSidebar');
|
||||
|
||||
if (!isDrawingToolbar && !isSidebar) {
|
||||
hideSidebar();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="./config.js"></script>
|
||||
|
||||
700
js/ui/chart.js
700
js/ui/chart.js
File diff suppressed because it is too large
Load Diff
@ -56,6 +56,19 @@ export class DrawingManager {
|
||||
italic: false,
|
||||
alignVert: 'top',
|
||||
alignHorz: 'left'
|
||||
},
|
||||
arrow: {
|
||||
color: '#2962ff',
|
||||
width: 2,
|
||||
style: 0,
|
||||
opacity: 100,
|
||||
text: '',
|
||||
textColor: '#2962ff',
|
||||
fontSize: 14,
|
||||
bold: false,
|
||||
italic: false,
|
||||
alignVert: 'top',
|
||||
alignHorz: 'left'
|
||||
}
|
||||
};
|
||||
|
||||
@ -81,7 +94,7 @@ export class DrawingManager {
|
||||
if (hit) {
|
||||
this.selectedDrawing = hit.drawing;
|
||||
// Only open panel for supported types
|
||||
if (['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line'].includes(hit.drawing.type)) {
|
||||
if (['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line', 'arrow', 'arrow_pointer'].includes(hit.drawing.type)) {
|
||||
this.toggleSettingsPanel(true);
|
||||
}
|
||||
this.update();
|
||||
@ -229,7 +242,18 @@ export class DrawingManager {
|
||||
|
||||
this.activeTool = tool;
|
||||
|
||||
if (tool === 'cursor') {
|
||||
// Update UI Button states
|
||||
document.querySelectorAll('#drawingToolbar button[data-tool]').forEach(btn => {
|
||||
if (btn.dataset.tool === tool) {
|
||||
btn.classList.add('bg-blue-600/30', 'text-blue-400');
|
||||
btn.classList.remove('text-gray-400', 'hover:bg-[#2d3a4f]');
|
||||
} else {
|
||||
btn.classList.remove('bg-blue-600/30', 'text-blue-400');
|
||||
btn.classList.add('text-gray-400', 'hover:bg-[#2d3a4f]');
|
||||
}
|
||||
});
|
||||
|
||||
if (tool === 'cursor' || !tool) {
|
||||
this.activeTool = null;
|
||||
document.body.style.cursor = 'default';
|
||||
} else if (tool === 'clear') {
|
||||
@ -237,6 +261,8 @@ export class DrawingManager {
|
||||
this.selectedDrawing = null;
|
||||
this.activeTool = null;
|
||||
this.update();
|
||||
// Instantly clear the 'clear' button state
|
||||
setTimeout(() => this.setTool(null), 100);
|
||||
} else {
|
||||
document.body.style.cursor = 'crosshair';
|
||||
this.selectedDrawing = null;
|
||||
@ -391,7 +417,14 @@ export class DrawingManager {
|
||||
color: defs.color,
|
||||
width: defs.width,
|
||||
style: defs.style,
|
||||
opacity: defs.opacity
|
||||
opacity: defs.opacity,
|
||||
text: defs.text,
|
||||
textColor: defs.textColor,
|
||||
fontSize: defs.fontSize,
|
||||
bold: defs.bold,
|
||||
italic: defs.italic,
|
||||
alignVert: defs.alignVert,
|
||||
alignHorz: defs.alignHorz
|
||||
});
|
||||
this.setTool(null);
|
||||
} else if (this.activeTool === 'vertical_line') {
|
||||
@ -402,16 +435,54 @@ export class DrawingManager {
|
||||
color: defs.color,
|
||||
width: defs.width,
|
||||
style: defs.style,
|
||||
opacity: defs.opacity
|
||||
opacity: defs.opacity,
|
||||
text: defs.text,
|
||||
textColor: defs.textColor,
|
||||
fontSize: defs.fontSize,
|
||||
bold: defs.bold,
|
||||
italic: defs.italic,
|
||||
alignVert: defs.alignVert,
|
||||
alignHorz: defs.alignHorz
|
||||
});
|
||||
this.setTool(null);
|
||||
} else if (this.activeTool === 'fib_retracement') {
|
||||
this.currentDrawing = { type: 'fib_retracement', p1, p2, color: '#fb8c00' };
|
||||
} else if (this.activeTool === 'arrow_up' || this.activeTool === 'arrow_down') {
|
||||
} else if (this.activeTool === 'arrow_pointer') {
|
||||
const defs = this.defaults.arrow;
|
||||
this.currentDrawing = {
|
||||
type: 'arrow_pointer', p1, p2,
|
||||
color: defs.color,
|
||||
width: defs.width,
|
||||
style: defs.style,
|
||||
opacity: defs.opacity,
|
||||
text: defs.text,
|
||||
textColor: defs.textColor,
|
||||
fontSize: defs.fontSize,
|
||||
bold: defs.bold,
|
||||
italic: defs.italic,
|
||||
alignVert: defs.alignVert,
|
||||
alignHorz: defs.alignHorz
|
||||
};
|
||||
} else if (this.activeTool === 'arrow_up' || this.activeTool === 'arrow_down' || this.activeTool === 'arrow_left' || this.activeTool === 'arrow_right') {
|
||||
let color = '#2962ff'; // Default blue for left/right
|
||||
if (this.activeTool === 'arrow_up') color = '#26a69a'; // Green
|
||||
if (this.activeTool === 'arrow_down') color = '#ef5350'; // Red
|
||||
|
||||
const defs = this.defaults.arrow;
|
||||
this.drawings.push({
|
||||
type: 'arrow', time: pos.time, price: pos.price,
|
||||
direction: this.activeTool === 'arrow_up' ? 'up' : 'down',
|
||||
color: this.activeTool === 'arrow_up' ? '#26a69a' : '#ef5350'
|
||||
direction: this.activeTool.replace('arrow_', ''),
|
||||
color: color,
|
||||
width: 2, // default thickness for solid arrows
|
||||
style: defs.style,
|
||||
opacity: defs.opacity,
|
||||
text: defs.text,
|
||||
textColor: defs.textColor,
|
||||
fontSize: defs.fontSize,
|
||||
bold: defs.bold,
|
||||
italic: defs.italic,
|
||||
alignVert: defs.alignVert,
|
||||
alignHorz: defs.alignHorz
|
||||
});
|
||||
this.setTool(null);
|
||||
} else if (this.activeTool === 'text') {
|
||||
@ -759,21 +830,57 @@ export class DrawingManager {
|
||||
|
||||
if (isSelected) { ctx.shadowBlur = 5; ctx.shadowColor = d.color; }
|
||||
|
||||
if (d.type === 'trend_line' || d.type === 'ray') {
|
||||
if (d.type === 'trend_line' || d.type === 'ray' || d.type === 'arrow_pointer') {
|
||||
const x1 = this.timeToX(d.p1.time);
|
||||
const y1 = series.priceToCoordinate(d.p1.price);
|
||||
const x2 = this.timeToX(d.p2.time);
|
||||
const y2 = series.priceToCoordinate(d.p2.price);
|
||||
if (x1 !== null && y1 !== null && x2 !== null && y2 !== null) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
if (d.type === 'ray') {
|
||||
|
||||
if (d.type === 'arrow_pointer') {
|
||||
const angle = Math.atan2(y2 - y1, x2 - x1);
|
||||
ctx.lineTo(x1 + Math.cos(angle) * 10000, y1 + Math.sin(angle) * 10000);
|
||||
const dist = Math.hypot(x2 - x1, y2 - y1);
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x1, y1);
|
||||
ctx.rotate(angle);
|
||||
|
||||
// Fat arrow dimensions
|
||||
const headLen = Math.min(dist * 0.5, 30 + (d.width || 2) * 5);
|
||||
const headWidth = headLen * 1.2;
|
||||
const tailStartW = (d.width || 2) * 2;
|
||||
const tailEndW = headLen * 0.5;
|
||||
const indent = headLen * 0.2; // Head indentation
|
||||
|
||||
ctx.beginPath();
|
||||
// Top edge of tail
|
||||
ctx.moveTo(0, -tailStartW/2);
|
||||
ctx.lineTo(dist - headLen + indent, -tailEndW/2);
|
||||
// Top edge of head
|
||||
ctx.lineTo(dist - headLen, -headWidth/2);
|
||||
// Tip
|
||||
ctx.lineTo(dist, 0);
|
||||
// Bottom edge of head
|
||||
ctx.lineTo(dist - headLen, headWidth/2);
|
||||
// Bottom edge of tail
|
||||
ctx.lineTo(dist - headLen + indent, tailEndW/2);
|
||||
ctx.lineTo(0, tailStartW/2);
|
||||
ctx.closePath();
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
} else {
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x1, y1);
|
||||
if (d.type === 'ray') {
|
||||
const angle = Math.atan2(y2 - y1, x2 - x1);
|
||||
ctx.lineTo(x1 + Math.cos(angle) * 10000, y1 + Math.sin(angle) * 10000);
|
||||
} else {
|
||||
ctx.lineTo(x2, y2);
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
// Render Text if present
|
||||
if (d.text) {
|
||||
@ -783,13 +890,27 @@ export class DrawingManager {
|
||||
const fontStyle = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : '');
|
||||
ctx.font = `${fontStyle}${fontSize}px Inter`;
|
||||
ctx.fillStyle = d.textColor || color;
|
||||
|
||||
let startX = x1, startY = y1, endX = x2, endY = y2;
|
||||
if (x1 > x2 || (x1 === x2 && y1 > y2)) {
|
||||
startX = x2; startY = y2; endX = x1; endY = y1;
|
||||
}
|
||||
|
||||
const angle = Math.atan2(endY - startY, endX - startX);
|
||||
const length = Math.hypot(endX - startX, endY - startY);
|
||||
|
||||
ctx.translate(startX, startY);
|
||||
ctx.rotate(angle);
|
||||
|
||||
ctx.textAlign = d.alignHorz || 'left';
|
||||
ctx.textBaseline = d.alignVert === 'middle' ? 'middle' : (d.alignVert === 'bottom' ? 'top' : 'bottom');
|
||||
|
||||
const tx = (x1 + x2) / 2;
|
||||
const ty = (y1 + y2) / 2;
|
||||
let tx = 0;
|
||||
if (d.alignHorz === 'center') tx = length / 2;
|
||||
else if (d.alignHorz === 'right') tx = length;
|
||||
|
||||
const offset = 10;
|
||||
const finalTy = d.alignVert === 'top' ? ty - offset : (d.alignVert === 'bottom' ? ty + offset : ty);
|
||||
const finalTy = d.alignVert === 'top' ? -offset : (d.alignVert === 'bottom' ? offset : 0);
|
||||
|
||||
ctx.fillText(d.text, tx, finalTy);
|
||||
ctx.restore();
|
||||
@ -797,9 +918,11 @@ export class DrawingManager {
|
||||
|
||||
if (isSelected) {
|
||||
ctx.setLineDash([]);
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.beginPath(); ctx.arc(x1, y1, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
|
||||
ctx.beginPath(); ctx.arc(x2, y2, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
|
||||
ctx.fillStyle = d.type === 'arrow_pointer' ? 'transparent' : '#ffffff';
|
||||
ctx.strokeStyle = d.type === 'arrow_pointer' ? color : d.color;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath(); ctx.arc(x1, y1, 5, 0, Math.PI * 2); if (d.type !== 'arrow_pointer') ctx.fill(); ctx.stroke();
|
||||
ctx.beginPath(); ctx.arc(x2, y2, 5, 0, Math.PI * 2); if (d.type !== 'arrow_pointer') ctx.fill(); ctx.stroke();
|
||||
}
|
||||
}
|
||||
} else if (d.type === 'rectangle') {
|
||||
@ -837,41 +960,46 @@ export class DrawingManager {
|
||||
ctx.beginPath(); ctx.arc(0, y, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
|
||||
}
|
||||
|
||||
// Store label position for hit detection (before rendering)
|
||||
let textX = scope.mediaSize.width / 2;
|
||||
let textY = y;
|
||||
// Render Text and store label position
|
||||
let labelPos = null;
|
||||
if (d.text) {
|
||||
ctx.save();
|
||||
ctx.setLineDash([]);
|
||||
const fontSize = d.fontSize || 14;
|
||||
const fontStyle = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : '');
|
||||
const font = `${fontStyle}${fontSize}px Inter`;
|
||||
ctx.font = font;
|
||||
ctx.fillStyle = d.textColor || d.color;
|
||||
|
||||
const alignHorz = d.alignHorz || 'center';
|
||||
ctx.textAlign = alignHorz;
|
||||
ctx.textBaseline = d.alignVert === 'middle' ? 'middle' : (d.alignVert === 'bottom' ? 'top' : 'bottom');
|
||||
|
||||
let textX = scope.mediaSize.width / 2;
|
||||
if (alignHorz === 'left') textX = 10;
|
||||
else if (alignHorz === 'right') textX = scope.mediaSize.width - 10;
|
||||
|
||||
const offset = 10;
|
||||
let textY = d.alignVert === 'top' ? y - offset : (d.alignVert === 'bottom' ? y + offset : y);
|
||||
|
||||
ctx.fillText(d.text, textX, textY);
|
||||
|
||||
const metrics = ctx.measureText(d.text);
|
||||
const labelWidth = metrics.width + 16;
|
||||
const labelHeight = 24;
|
||||
const defaultLabelX = scope.mediaSize.width / 2 - labelWidth / 2;
|
||||
const offset = 10;
|
||||
|
||||
let defaultLabelX = scope.mediaSize.width / 2 - labelWidth / 2;
|
||||
if (alignHorz === 'left') defaultLabelX = 10;
|
||||
else if (alignHorz === 'right') defaultLabelX = scope.mediaSize.width - labelWidth - 10;
|
||||
|
||||
const defaultLabelY = d.alignVert === 'top' ? y - 40 : (d.alignVert === 'bottom' ? y + 20 : y - 12);
|
||||
|
||||
labelPos = {
|
||||
x: defaultLabelX + (d.labelOffset?.x || 0),
|
||||
y: defaultLabelY + (d.labelOffset?.y || 0),
|
||||
width: labelWidth,
|
||||
height: labelHeight
|
||||
};
|
||||
textX = scope.mediaSize.width / 2;
|
||||
textY = d.alignVert === 'top' ? y - offset : (d.alignVert === 'bottom' ? y + offset : y);
|
||||
}
|
||||
|
||||
// Render Text if present
|
||||
if (d.text) {
|
||||
ctx.save();
|
||||
ctx.setLineDash([]);
|
||||
ctx.font = font;
|
||||
ctx.fillStyle = d.textColor || d.color;
|
||||
|
||||
ctx.textAlign = d.alignHorz || 'center';
|
||||
ctx.textBaseline = d.alignVert === 'middle' ? 'middle' : (d.alignVert === 'bottom' ? 'top' : 'bottom');
|
||||
ctx.fillText(d.text, textX, textY);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
@ -902,39 +1030,48 @@ export class DrawingManager {
|
||||
ctx.beginPath(); ctx.arc(x, 0, 5, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
|
||||
}
|
||||
|
||||
// Store label position for hit detection (before rendering)
|
||||
let textX = x;
|
||||
let textY = 0;
|
||||
// Render Text and store label position
|
||||
let labelPos = null;
|
||||
if (d.text) {
|
||||
ctx.save();
|
||||
ctx.setLineDash([]);
|
||||
const fontSize = d.fontSize || 14;
|
||||
const fontStyle = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : '');
|
||||
const font = `${fontStyle}${fontSize}px Inter`;
|
||||
ctx.font = font;
|
||||
ctx.fillStyle = d.textColor || d.color;
|
||||
|
||||
const alignHorz = d.alignHorz || 'center';
|
||||
ctx.textAlign = alignHorz;
|
||||
ctx.textBaseline = d.alignVert === 'middle' ? 'middle' : (d.alignVert === 'bottom' ? 'bottom' : 'top');
|
||||
|
||||
let textX = x;
|
||||
const offset = 10;
|
||||
|
||||
let textY = scope.mediaSize.height / 2; // Middle
|
||||
if (d.alignVert === 'top') textY = offset;
|
||||
else if (d.alignVert === 'bottom') textY = scope.mediaSize.height - offset;
|
||||
|
||||
ctx.fillText(d.text, textX, textY);
|
||||
|
||||
const metrics = ctx.measureText(d.text);
|
||||
const labelWidth = metrics.width + 16;
|
||||
const labelHeight = 24;
|
||||
const offset = 10;
|
||||
const defaultLabelY = d.alignVert === 'top' ? -50 : (d.alignVert === 'bottom' ? 20 : -12);
|
||||
|
||||
let defaultLabelY = scope.mediaSize.height / 2 - labelHeight / 2; // Middle
|
||||
if (d.alignVert === 'top') defaultLabelY = offset;
|
||||
else if (d.alignVert === 'bottom') defaultLabelY = scope.mediaSize.height - offset - labelHeight;
|
||||
|
||||
let defaultLabelX = x - labelWidth / 2;
|
||||
if (alignHorz === 'left') defaultLabelX = x - labelWidth;
|
||||
else if (alignHorz === 'right') defaultLabelX = x;
|
||||
|
||||
labelPos = {
|
||||
x: x - labelWidth / 2 + (d.labelOffset?.x || 0),
|
||||
x: defaultLabelX + (d.labelOffset?.x || 0),
|
||||
y: defaultLabelY + (d.labelOffset?.y || 0),
|
||||
width: labelWidth,
|
||||
height: labelHeight
|
||||
};
|
||||
textY = d.alignVert === 'top' ? -offset : (d.alignVert === 'bottom' ? offset : 0);
|
||||
}
|
||||
|
||||
// Render Text if present
|
||||
if (d.text) {
|
||||
ctx.save();
|
||||
ctx.setLineDash([]);
|
||||
ctx.font = font;
|
||||
ctx.fillStyle = d.textColor || d.color;
|
||||
|
||||
ctx.textAlign = d.alignHorz || 'center';
|
||||
ctx.textBaseline = d.alignVert === 'middle' ? 'middle' : (d.alignVert === 'bottom' ? 'top' : 'bottom');
|
||||
ctx.fillText(d.text, textX, textY);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
@ -975,19 +1112,89 @@ export class DrawingManager {
|
||||
const x = this.timeToX(d.time);
|
||||
const y = series.priceToCoordinate(d.price);
|
||||
if (x !== null && y !== null) {
|
||||
ctx.fillStyle = d.color; ctx.beginPath();
|
||||
const size = isSelected ? 15 : 10;
|
||||
if (d.direction === 'up') {
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x - size/2, y + size);
|
||||
ctx.lineTo(x + size/2, y + size);
|
||||
} else {
|
||||
ctx.moveTo(x, y);
|
||||
ctx.lineTo(x - size/2, y - size);
|
||||
ctx.lineTo(x + size/2, y - size);
|
||||
}
|
||||
ctx.fillStyle = d.color;
|
||||
ctx.beginPath();
|
||||
const baseSize = isSelected ? 20 : 15;
|
||||
const w = baseSize * 1.5; // width of arrow head
|
||||
const h = baseSize * 1.5; // height of arrow head
|
||||
const tailW = baseSize * 0.8; // width of tail
|
||||
const tailH = baseSize * 1.2; // length of tail
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x, y);
|
||||
|
||||
if (d.direction === 'up') ctx.rotate(0);
|
||||
else if (d.direction === 'right') ctx.rotate(Math.PI / 2);
|
||||
else if (d.direction === 'down') ctx.rotate(Math.PI);
|
||||
else if (d.direction === 'left') ctx.rotate(-Math.PI / 2);
|
||||
|
||||
// Draw a thick arrow pointing UP from the origin (x,y)
|
||||
ctx.moveTo(0, -h/2 - tailH/2); // Tip of arrow
|
||||
ctx.lineTo(w/2, h/2 - tailH/2); // Right corner of head
|
||||
ctx.lineTo(tailW/2, h/2 - tailH/2); // Inner right corner
|
||||
ctx.lineTo(tailW/2, h/2 + tailH/2); // Bottom right of tail
|
||||
ctx.lineTo(-tailW/2, h/2 + tailH/2); // Bottom left of tail
|
||||
ctx.lineTo(-tailW/2, h/2 - tailH/2); // Inner left corner
|
||||
ctx.lineTo(-w/2, h/2 - tailH/2); // Left corner of head
|
||||
ctx.closePath();
|
||||
|
||||
ctx.fill();
|
||||
if (isSelected) { ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 1; ctx.stroke(); }
|
||||
if (isSelected) { ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 2; ctx.stroke(); }
|
||||
ctx.restore();
|
||||
|
||||
// Render Text and store label position
|
||||
let labelPos = null;
|
||||
if (d.text) {
|
||||
ctx.save();
|
||||
ctx.setLineDash([]);
|
||||
const fontSize = d.fontSize || 14;
|
||||
const fontStyle = (d.bold ? 'bold ' : '') + (d.italic ? 'italic ' : '');
|
||||
const font = `${fontStyle}${fontSize}px Inter`;
|
||||
ctx.font = font;
|
||||
ctx.fillStyle = d.textColor || d.color;
|
||||
|
||||
const alignHorz = d.alignHorz || 'center';
|
||||
ctx.textAlign = alignHorz;
|
||||
ctx.textBaseline = d.alignVert === 'middle' ? 'middle' : (d.alignVert === 'bottom' ? 'bottom' : 'top');
|
||||
|
||||
let textX = x;
|
||||
let textY = y;
|
||||
|
||||
// Default offset logic for arrows if align isn't strictly overriding
|
||||
const offset = 25;
|
||||
if (d.direction === 'up') textY += offset;
|
||||
else if (d.direction === 'down') textY -= offset;
|
||||
else if (d.direction === 'left') textX += offset;
|
||||
else if (d.direction === 'right') textX -= offset;
|
||||
|
||||
ctx.fillText(d.text, textX, textY);
|
||||
|
||||
const metrics = ctx.measureText(d.text);
|
||||
const labelWidth = metrics.width + 16;
|
||||
const labelHeight = 24;
|
||||
|
||||
let defaultLabelX = textX - labelWidth / 2;
|
||||
if (alignHorz === 'left') defaultLabelX = textX - labelWidth;
|
||||
else if (alignHorz === 'right') defaultLabelX = textX;
|
||||
|
||||
let defaultLabelY = textY;
|
||||
if (d.alignVert === 'top') defaultLabelY = textY;
|
||||
else if (d.alignVert === 'bottom') defaultLabelY = textY - labelHeight;
|
||||
else defaultLabelY = textY - labelHeight / 2;
|
||||
|
||||
labelPos = {
|
||||
x: defaultLabelX + (d.labelOffset?.x || 0),
|
||||
y: defaultLabelY + (d.labelOffset?.y || 0),
|
||||
width: labelWidth,
|
||||
height: labelHeight
|
||||
};
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Store label position for hit detection
|
||||
if (labelPos) {
|
||||
d.labelPos = labelPos;
|
||||
}
|
||||
}
|
||||
} else if (d.type === 'text') {
|
||||
const x = this.timeToX(d.time);
|
||||
@ -1164,6 +1371,7 @@ export class DrawingManager {
|
||||
let startX, startY, initialX, initialY;
|
||||
|
||||
header.addEventListener('mousedown', (e) => {
|
||||
if (e.target.closest('button')) return; // Allow clicking the close button
|
||||
isDragging = true;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
@ -1197,7 +1405,7 @@ export class DrawingManager {
|
||||
|
||||
window.switchTLTab = (tab) => {
|
||||
this.activeTLTab = tab;
|
||||
const isLineWithText = this.selectedDrawing && ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line'].includes(this.selectedDrawing.type);
|
||||
const isLineWithText = this.selectedDrawing && ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line', 'arrow', 'arrow_pointer'].includes(this.selectedDrawing.type);
|
||||
|
||||
document.getElementById('tlTabStyle').className = tab === 'style' ? 'flex-1 py-2 text-center text-blue-500 border-b-2 border-blue-500 font-medium' : 'flex-1 py-2 text-center text-gray-400 hover:text-white';
|
||||
|
||||
@ -1222,11 +1430,11 @@ export class DrawingManager {
|
||||
window.setTLThickness = (width) => this.applySettings('width', width);
|
||||
window.setTLStyle = (style) => this.applySettings('style', style);
|
||||
window.toggleTLBold = () => {
|
||||
const current = this.selectedDrawing && ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line'].includes(this.selectedDrawing.type) ? this.selectedDrawing.bold : this.defaults.trend_line.bold;
|
||||
const current = this.selectedDrawing && ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line', 'arrow', 'arrow_pointer'].includes(this.selectedDrawing.type) ? this.selectedDrawing.bold : this.defaults.trend_line.bold;
|
||||
this.applySettings('bold', !current);
|
||||
};
|
||||
window.toggleTLItalic = () => {
|
||||
const current = this.selectedDrawing && ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line'].includes(this.selectedDrawing.type) ? this.selectedDrawing.italic : this.defaults.trend_line.italic;
|
||||
const current = this.selectedDrawing && ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line', 'arrow', 'arrow_pointer'].includes(this.selectedDrawing.type) ? this.selectedDrawing.italic : this.defaults.trend_line.italic;
|
||||
this.applySettings('italic', !current);
|
||||
};
|
||||
|
||||
@ -1287,6 +1495,10 @@ export class DrawingManager {
|
||||
this.applySettings('text', e.target.value);
|
||||
});
|
||||
|
||||
document.getElementById('tlTextInput').addEventListener('keydown', (e) => {
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
document.getElementById('tlAlignVert').addEventListener('change', (e) => {
|
||||
this.applySettings('alignVert', e.target.value);
|
||||
});
|
||||
@ -1344,7 +1556,7 @@ export class DrawingManager {
|
||||
btn.setAttribute('data-active', parseInt(btn.dataset.style) === settings.style);
|
||||
});
|
||||
|
||||
const isLineWithText = this.selectedDrawing && ['trend_line', 'ray', 'rectangle'].includes(this.selectedDrawing.type);
|
||||
const isLineWithText = this.selectedDrawing && ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line', 'arrow', 'arrow_pointer'].includes(this.selectedDrawing.type);
|
||||
|
||||
const textColorBtn = document.getElementById('tlTextColorBtn');
|
||||
const textPicker = document.getElementById('tlTextColorPicker');
|
||||
@ -1358,7 +1570,6 @@ export class DrawingManager {
|
||||
if (isLineWithText) {
|
||||
if (textColorBtn && textPicker) {
|
||||
textColorBtn.style.backgroundColor = settings.textColor || settings.color;
|
||||
textPicker.classList.remove('hidden');
|
||||
}
|
||||
fontInput.value = settings.fontSize || 14;
|
||||
textInput.value = settings.text || '';
|
||||
@ -1374,7 +1585,7 @@ export class DrawingManager {
|
||||
applySettings(key, value) {
|
||||
if (this.selectedDrawing) {
|
||||
if (key === 'bold' || key === 'italic' || key === 'fontSize' || key === 'text' || key === 'textColor' || key === 'alignVert' || key === 'alignHorz') {
|
||||
const isLineWithText = ['trend_line', 'ray', 'rectangle'].includes(this.selectedDrawing.type);
|
||||
const isLineWithText = ['trend_line', 'ray', 'rectangle', 'horizontal_line', 'vertical_line', 'arrow', 'arrow_pointer'].includes(this.selectedDrawing.type);
|
||||
if (!isLineWithText) return;
|
||||
this.selectedDrawing[key] = value;
|
||||
} else {
|
||||
@ -1394,6 +1605,8 @@ export class DrawingManager {
|
||||
this.defaults.horizontal_line[key] = value;
|
||||
} else if (drawingType === 'vertical_line') {
|
||||
this.defaults.vertical_line[key] = value;
|
||||
} else if (drawingType === 'arrow' || drawingType === 'arrow_pointer') {
|
||||
this.defaults.arrow[key] = value;
|
||||
} else {
|
||||
this.defaults.trend_line[key] = value;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user