dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: drag-to-draw for range and fibonacci like TradingView

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-08 12:50:25 +08:00
parent ef57872d14
commit ef57ba13c5
2 changed files with 147 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
manual_trading_hub/static/chart_draw.js
+139 -43
View File
@@ -5,6 +5,8 @@
const STORAGE_PREFIX = "hubMarketDraw:";
const HIT_PX = 8;
const FIB_LEVELS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
const DRAG_TOOLS = new Set(["trend", "rect", "range", "fib"]);
const MIN_DRAG_PX = 6;
const TOOL_LABELS = {
cursor: "光标",
@@ -37,6 +39,8 @@
let unsubRange = null;
let getCandlesFn = null;
let brushPointerId = null;
let dragActive = false;
let dragStartPx = null;
function uid() {
return "d" + Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
@@ -209,6 +213,26 @@
return selected ? "#f59e0b" : "#60a5fa";
}
function formatPrice(p) {
const n = Number(p);
if (!Number.isFinite(n)) return "—";
const a = Math.abs(n);
if (a >= 10000) return n.toFixed(2);
if (a >= 1) return n.toFixed(4);
return n.toFixed(6);
}
function isDragTool(tool) {
return DRAG_TOOLS.has(tool);
}
function cancelDraft() {
draft = null;
dragActive = false;
dragStartPx = null;
scheduleRedraw();
}
function drawLine(ctx, x1, y1, x2, y2, selected) {
if (x1 == null || y1 == null || x2 == null || y2 == null) return;
ctx.beginPath();
@@ -272,44 +296,70 @@
const bot = Math.min(p1.price, p2.price);
const x1 = timeToX(p1.time);
const x2 = timeToX(p2.time);
if (x1 == null || x2 == null) return;
const yTop = priceToY(top);
const yBot = priceToY(bot);
if (x1 == null || x2 == null || yTop == null || yBot == null) return;
const left = Math.min(x1, x2);
const right = Math.max(x1, x2);
const span = Math.max(right - left, 48);
const drawRight = left + span;
const color = strokeStyle(selected);
drawLine(ctx, left, yTop, left, yBot, selected);
drawLine(ctx, drawRight, yTop, drawRight, yBot, selected);
let lastLabelY = -9999;
FIB_LEVELS.forEach(function (lv) {
const price = bot + (top - bot) * (1 - lv);
const y = priceToY(price);
if (y == null) return;
ctx.beginPath();
ctx.strokeStyle = strokeStyle(selected);
ctx.strokeStyle = color;
ctx.lineWidth = 1;
ctx.setLineDash(lv === 0 || lv === 1 ? [] : [4, 4]);
ctx.setLineDash(lv === 0 || lv === 1 ? [] : [5, 4]);
ctx.moveTo(left, y);
ctx.lineTo(right, y);
ctx.lineTo(drawRight, y);
ctx.stroke();
if (Math.abs(y - lastLabelY) < 13) return;
lastLabelY = y;
ctx.fillStyle = "#9aa4b8";
ctx.font = "10px sans-serif";
ctx.fillText((lv * 100).toFixed(1) + "%", left + 4, y - 3);
ctx.fillText((lv * 100).toFixed(1) + "% " + formatPrice(price), drawRight + 6, y + 3);
});
ctx.setLineDash([]);
}
function drawRange(ctx, p1, p2, selected) {
const x1 = timeToX(p1.time);
const x2 = timeToX(p2.time);
const y1 = priceToY(p1.price);
const y2 = priceToY(p2.price);
const x = timeToX(p1.time) != null ? timeToX(p1.time) : timeToX(p2.time);
if (y1 == null || y2 == null || x == null) return;
if (x1 == null || x2 == null || y1 == null || y2 == null) return;
const left = Math.min(x1, x2);
const right = Math.max(x1, x2);
const top = Math.min(y1, y2);
const bot = Math.max(y1, y2);
ctx.strokeStyle = strokeStyle(selected);
ctx.fillStyle = selected ? "rgba(245,158,11,0.12)" : "rgba(96,165,250,0.1)";
const boxW = Math.max(right - left, 10);
const boxH = Math.max(bot - top, 6);
const color = strokeStyle(selected);
ctx.fillStyle = selected ? "rgba(245,158,11,0.14)" : "rgba(96,165,250,0.12)";
ctx.strokeStyle = color;
ctx.lineWidth = 1.5;
ctx.fillRect(x - 14, top, 28, bot - top);
ctx.strokeRect(x - 14, top, 28, bot - top);
drawLine(ctx, x, top, x, bot, selected);
const pct = p1.price ? (((p2.price - p1.price) / p1.price) * 100).toFixed(2) : "0";
ctx.setLineDash([]);
ctx.fillRect(left, top, boxW, boxH);
ctx.strokeRect(left, top, boxW, boxH);
const pct = p1.price ? ((p2.price - p1.price) / p1.price) * 100 : 0;
const diff = p2.price - p1.price;
const midX = left + boxW / 2;
const midY = top + boxH / 2;
ctx.fillStyle = "#e2e8f0";
ctx.font = "10px sans-serif";
ctx.fillText(pct + "%", x + 18, (top + bot) / 2);
ctx.font = "11px sans-serif";
ctx.textAlign = "center";
ctx.fillText(pct.toFixed(2) + "%", midX, midY - 5);
ctx.fillText(formatPrice(diff), midX, midY + 11);
ctx.textAlign = "left";
}
function drawText(ctx, p, text, selected) {
@@ -528,39 +578,42 @@
scheduleRedraw();
return;
}
if (activeTool === "channel") {
if (!draft || draft.type !== "channel") {
draft = { type: "channel", points: [pt] };
} else if (draft.points.length === 1) {
draft.points.push(pt);
} else if (draft.points.length === 2) {
draft.points.push(pt);
draft.offset = parallelOffset(draft.points[0], draft.points[1], draft.points[2]);
commitDrawing(draft);
}
scheduleRedraw();
return;
}
if (isDragTool(activeTool)) {
dragActive = true;
dragStartPx = { x: loc.x, y: loc.y };
draft = { type: activeTool, points: [pt, pt] };
scheduleRedraw();
return;
}
if (!draft) {
draft = { type: activeTool, points: [pt] };
if (activeTool === "text") {
const text = window.prompt("输入标注文字", "");
if (text && String(text).trim()) {
draft.text = String(text).trim();
commitDrawing(draft);
} else {
draft = null;
commitDrawing({ type: "text", points: [pt], text: String(text).trim() });
}
} else if (pointsNeeded(activeTool) === 1) {
commitDrawing(draft);
}
scheduleRedraw();
return;
}
draft.points.push(pt);
if (activeTool === "channel" && draft.points.length === 3) {
draft.offset = parallelOffset(draft.points[0], draft.points[1], draft.points[2]);
commitDrawing(draft);
return;
if (pointsNeeded(activeTool) === 1) {
commitDrawing({ type: activeTool, points: [pt] });
}
if (draft.points.length >= pointsNeeded(activeTool)) {
commitDrawing(draft);
}
scheduleRedraw();
}
function onPointerMove(ev) {
if (activeTool === "brush" && draft && draft.type === "brush") {
const loc = clientToLocal(ev);
if (activeTool === "brush" && draft && draft.type === "brush") {
const pt = xyToPoint(loc.x, loc.y);
if (!pt) return;
const last = draft.points[draft.points.length - 1];
@@ -575,26 +628,43 @@
ev.preventDefault();
return;
}
if (!draft) return;
const loc = clientToLocal(ev);
if (dragActive && draft && isDragTool(draft.type)) {
const pt = xyToPoint(loc.x, loc.y);
if (!pt) return;
if (pointsNeeded(activeTool) >= 2 && draft.points.length >= 1) {
draft.points[draft.points.length] = pt;
if (draft.points.length > pointsNeeded(activeTool)) {
draft.points.length = pointsNeeded(activeTool);
}
draft.points[1] = pt;
scheduleRedraw();
ev.preventDefault();
}
}
function onPointerUp(ev) {
const loc = clientToLocal(ev);
if (brushPointerId != null) {
try {
canvasEl.releasePointerCapture(brushPointerId);
} catch (_) {}
brushPointerId = null;
}
if (dragActive && draft && isDragTool(draft.type)) {
const dist = dragStartPx
? Math.hypot(loc.x - dragStartPx.x, loc.y - dragStartPx.y)
: 0;
dragActive = false;
dragStartPx = null;
const p1 = draft.points[0];
const p2 = draft.points[1];
if (
dist >= MIN_DRAG_PX &&
p1 &&
p2 &&
(p1.price !== p2.price || p1.time !== p2.time)
) {
commitDrawing({ type: draft.type, points: [p1, p2] });
} else {
cancelDraft();
}
return;
}
if (activeTool === "brush" && draft && draft.type === "brush" && draft.points.length > 1) {
commitDrawing(draft);
}
@@ -666,6 +736,22 @@
const ty = priceToY(pts[0].price);
return tx != null && ty != null && Math.hypot(x - tx, y - ty) <= 14;
}
case "range":
case "fib":
case "rect":
if (pts.length >= 2) {
const x1 = timeToX(pts[0].time);
const y1 = priceToY(pts[0].price);
const x2 = timeToX(pts[1].time);
const y2 = priceToY(pts[1].price);
if (x1 == null || y1 == null || x2 == null || y2 == null) return false;
const l = Math.min(x1, x2) - HIT_PX;
const r = Math.max(x1, x2) + HIT_PX;
const t = Math.min(y1, y2) - HIT_PX;
const b = Math.max(y1, y2) + HIT_PX;
return x >= l && x <= r && y >= t && y <= b;
}
return false;
default:
return false;
}
@@ -702,6 +788,8 @@
return;
}
activeTool = tool;
dragActive = false;
dragStartPx = null;
draft = null;
if (toolbarEl) {
toolbarEl.querySelectorAll("[data-tool]").forEach(function (btn) {
@@ -732,6 +820,12 @@
canvasEl.addEventListener("pointerup", onPointerUp);
canvasEl.addEventListener("pointercancel", onPointerUp);
canvasEl.addEventListener("dblclick", onDblClick);
document.addEventListener("keydown", function (ev) {
if (ev.key !== "Escape") return;
const page = document.getElementById("page-market");
if (!page || page.classList.contains("hidden")) return;
if (draft || dragActive) cancelDraft();
});
}
function attach(opts) {
@@ -763,6 +857,8 @@
viewKey = key || "";
drawings = loadDrawings();
selectedId = null;
dragActive = false;
dragStartPx = null;
draft = null;
scheduleRedraw();
}
manual_trading_hub/static/index.html
+6 -6
View File
@@ -15,7 +15,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
<noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
<link rel="stylesheet" href="/assets/app.css?v=20260608-market-draw-v2" />
<link rel="stylesheet" href="/assets/app.css?v=20260608-market-draw-v3" />
</head>
<body>
<div class="app-bg" aria-hidden="true"></div>
@@ -188,14 +188,14 @@
<button type="button" class="market-draw-btn" data-tool="brush" title="画笔">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 18l8-2 2-8 6-2-2 6-8 2z"/></svg>
</button>
<button type="button" class="market-draw-btn" data-tool="range" title="价格测距">
<button type="button" class="market-draw-btn" data-tool="range" title="价格测距（按住拖动）">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.6" d="M12 5v14M8 8h8M8 16h8"/><path fill="currentColor" d="M11 4h2v3h-2zm0 13h2v3h-2z"/></svg>
</button>
<button type="button" class="market-draw-btn market-draw-btn-text" data-tool="text" title="文字">T</button>
<button type="button" class="market-draw-btn" data-tool="fib" title="斐波那契">
<button type="button" class="market-draw-btn" data-tool="fib" title="斐波那契（按住拖动）">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.4" d="M4 6h16M4 10h16M4 14h16M4 18h16"/><circle cx="20" cy="6" r="1.2" fill="currentColor"/><circle cx="20" cy="18" r="1.2" fill="currentColor"/></svg>
</button>
<button type="button" class="market-draw-btn" data-tool="trend" title="趋势线">
<button type="button" class="market-draw-btn" data-tool="trend" title="趋势线（按住拖动）">
<svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="1.8" d="M5 18L19 6"/><circle cx="5" cy="18" r="1.5" fill="currentColor"/><circle cx="19" cy="6" r="1.5" fill="currentColor"/></svg>
</button>
<button type="button" class="market-draw-btn" data-tool="path" title="折线箭头（双击结束）">
@@ -392,8 +392,8 @@
<div id="toast"></div>
<script src="https://unpkg.com/lightweight-charts@4.2.0/dist/lightweight-charts.standalone.production.js"></script>
<script src="/assets/chart_draw.js?v=20260608-market-draw-v2"></script>
<script src="/assets/chart.js?v=20260608-market-draw-v2"></script>
<script src="/assets/chart_draw.js?v=20260608-market-draw-v3"></script>
<script src="/assets/chart.js?v=20260608-market-draw-v3"></script>
<script src="/assets/archive.js?v=20260607-hub-archive-v6"></script>
<script src="/assets/ai_review_render.js?v=2"></script>
<script src="/assets/app.js?v=20260607-hub-archive-v1"></script>