694 lines
25 KiB
JavaScript
694 lines
25 KiB
JavaScript
// meters/stopwatch.js — Stoppuhr als Slot-Meter (Start/Stop, Reset, Auto)
|
|
// Auto: startet bei Signal > -70 dBFS und stoppt, wenn >=1s lang <= -70 dBFS.
|
|
|
|
import { CONFIG } from '../core/config.js';
|
|
import { HEADER_BG, MID_COLOR } from '../core/theme.js';
|
|
|
|
export const id = 'stopwatch';
|
|
export const disableCache = true;
|
|
|
|
const AUTO_STOP_AFTER_MS = 1000;
|
|
|
|
function isExternalClient() {
|
|
const host = String(globalThis?.location?.hostname || '').trim().toLowerCase();
|
|
return !!host && host !== 'localhost' && host !== '127.0.0.1' && host !== '::1' && host !== '[::1]';
|
|
}
|
|
|
|
function getSilenceDb() {
|
|
const raw = Number(CONFIG?.STOPWATCH_AUTO_THRESHOLD_DBFS);
|
|
return Math.max(-120, Math.min(20, Number.isFinite(raw) ? raw : -70));
|
|
}
|
|
|
|
export function initShared() {
|
|
const now = performance.now();
|
|
return {
|
|
auto: false,
|
|
entries: [], // { elapsedMs, startTs, running }
|
|
scrollOffset: 0, // 0 = neueste; größer = weiter zurück
|
|
_dragScroll: null, // { startY, startOffset }
|
|
_lastNow: now,
|
|
_silenceStartTs: null,
|
|
_lastLevelDb: -120,
|
|
_buttonRects: null,
|
|
_deleteVisible: false,
|
|
_deleteRects: [],
|
|
_scrollInfo: null,
|
|
};
|
|
}
|
|
|
|
export function update(packet, shared) {
|
|
const now = performance.now();
|
|
shared._lastNow = now;
|
|
|
|
const rmsL = Number.isFinite(packet?.rmsL) ? packet.rmsL : -Infinity;
|
|
const rmsR = Number.isFinite(packet?.rmsR) ? packet.rmsR : -Infinity;
|
|
const levelDb = Number.isFinite(rmsL) || Number.isFinite(rmsR) ? Math.max(rmsL, rmsR) : -Infinity;
|
|
shared._lastLevelDb = Number.isFinite(levelDb) ? levelDb : -120;
|
|
|
|
if (!shared.auto) return;
|
|
|
|
const silenceDb = getSilenceDb();
|
|
const hasSignal = Number.isFinite(levelDb) && levelDb > silenceDb;
|
|
if (hasSignal) {
|
|
shared._silenceStartTs = null;
|
|
if (!isRunning(shared)) startNew(shared, now);
|
|
return;
|
|
}
|
|
|
|
if (shared._silenceStartTs === null) shared._silenceStartTs = now;
|
|
if (isRunning(shared) && (now - shared._silenceStartTs) >= AUTO_STOP_AFTER_MS) {
|
|
stop(shared, now);
|
|
}
|
|
}
|
|
|
|
function stop(shared, now) {
|
|
const entry = getActiveEntry(shared);
|
|
if (!entry || !entry.running) return;
|
|
const startTs = Number.isFinite(entry.startTs) ? entry.startTs : now;
|
|
entry.elapsedMs = (entry.elapsedMs || 0) + Math.max(0, now - startTs);
|
|
entry.running = false;
|
|
entry.startTs = 0;
|
|
}
|
|
|
|
function startNew(shared, now) {
|
|
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
|
shared.entries = entries;
|
|
if (isRunning(shared)) return;
|
|
// Neueste Einträge immer sichtbar halten: Liste "scrollt" automatisch nach oben.
|
|
shared.scrollOffset = 0;
|
|
entries.push({ elapsedMs: 0, startTs: now, running: true });
|
|
if (entries.length > 50) entries.shift();
|
|
shared._silenceStartTs = null;
|
|
}
|
|
|
|
function reset(shared, now) {
|
|
shared.entries = [];
|
|
shared.scrollOffset = 0;
|
|
shared._dragScroll = null;
|
|
shared._deleteRects = [];
|
|
shared._silenceStartTs = null;
|
|
}
|
|
|
|
function formatTime(ms) {
|
|
const clamped = Math.max(0, ms | 0);
|
|
const totalSeconds = Math.floor(clamped / 1000);
|
|
const hours = Math.floor(totalSeconds / 3600);
|
|
const minutes = Math.floor((totalSeconds % 3600) / 60);
|
|
const seconds = totalSeconds % 60;
|
|
const tenths = Math.floor((clamped % 1000) / 100);
|
|
|
|
const pad2 = (n) => String(n).padStart(2, '0');
|
|
if (hours > 0) return `${hours}:${pad2(minutes)}:${pad2(seconds)}`;
|
|
return `${pad2(minutes)}:${pad2(seconds)}.${tenths}`;
|
|
}
|
|
|
|
// Orientiert am Layout-Ansatz der anderen Meter (z.B. PPM DIN):
|
|
// innerhalb eines festen innerPad wird "extra/2" genutzt, sodass bei ungerader Restbreite
|
|
// eine stabile .5-Zentrierung entsteht (wirkt über Browser/Displays konsistenter).
|
|
function computeContentRect(rect, padX = 8) {
|
|
const innerPad = padX;
|
|
const avail = Math.max(1, rect.w - innerPad * 2);
|
|
const w = (avail > 2) ? (avail - 1) : avail; // erzwingt i.d.R. extra=1 → +0.5 Zentrierung
|
|
const extra = Math.max(0, avail - w);
|
|
const x = rect.x + innerPad + extra / 2;
|
|
return { x, w, cx: x + w / 2 };
|
|
}
|
|
|
|
function fitFontSizeToWidth(g, texts, maxWidth, {
|
|
min = 10,
|
|
max = 96,
|
|
family = 'ui-monospace, monospace',
|
|
weight = 'bold',
|
|
} = {}) {
|
|
const safeTexts = (Array.isArray(texts) ? texts : []).filter((t) => typeof t === 'string' && t.length);
|
|
const samples = safeTexts.length ? safeTexts : ['00:00.0'];
|
|
const width = Math.max(1, maxWidth);
|
|
|
|
let lo = Math.max(1, min | 0);
|
|
let hi = Math.max(lo, max | 0);
|
|
let best = lo;
|
|
|
|
while (lo <= hi) {
|
|
const mid = (lo + hi) >> 1;
|
|
g.font = `${weight} ${mid}px ${family}`;
|
|
let widest = 0;
|
|
for (const t of samples) widest = Math.max(widest, g.measureText(t).width);
|
|
if (widest <= width) {
|
|
best = mid;
|
|
lo = mid + 1;
|
|
} else {
|
|
hi = mid - 1;
|
|
}
|
|
}
|
|
return best;
|
|
}
|
|
|
|
function sevenSegCharRatio(ch) {
|
|
if (ch >= '0' && ch <= '9') return 0.64;
|
|
if (ch === ':') return 0.26;
|
|
if (ch === '.') return 0.24;
|
|
if (ch === '-') return 0.45;
|
|
return 0.5;
|
|
}
|
|
|
|
function sevenSegTotalRatio(text, gapRatio = 0.14) {
|
|
const s = String(text ?? '');
|
|
if (!s.length) return 1;
|
|
let sum = 0;
|
|
for (let i = 0; i < s.length; i++) sum += sevenSegCharRatio(s[i]);
|
|
sum += gapRatio * (s.length - 1);
|
|
return Math.max(1e-6, sum);
|
|
}
|
|
|
|
function drawSevenSegString(g, text, xCenter, yTop, maxWidth, height, color, {
|
|
gapRatio = 0.14,
|
|
dimAlpha = 0.25,
|
|
} = {}) {
|
|
const s = String(text ?? '');
|
|
const h = Math.max(6, height);
|
|
const ratio = sevenSegTotalRatio(s, gapRatio);
|
|
const wTotal = Math.min(maxWidth, ratio * h);
|
|
const scale = wTotal / (ratio * h);
|
|
const hUsed = h * scale;
|
|
const gap = gapRatio * hUsed;
|
|
const x0 = xCenter - wTotal / 2;
|
|
|
|
let x = x0;
|
|
for (let i = 0; i < s.length; i++) {
|
|
const ch = s[i];
|
|
const cw = sevenSegCharRatio(ch) * hUsed;
|
|
if (ch >= '0' && ch <= '9') {
|
|
drawSevenSegDigit(g, ch, x, yTop, cw, hUsed, color);
|
|
} else if (ch === ':') {
|
|
drawSevenSegColon(g, x, yTop, cw, hUsed, color);
|
|
} else if (ch === '.') {
|
|
drawSevenSegDot(g, x, yTop, cw, hUsed, color);
|
|
} else if (ch === '-') {
|
|
drawSevenSegMinus(g, x, yTop, cw, hUsed, color);
|
|
} else {
|
|
g.save();
|
|
g.globalAlpha = dimAlpha;
|
|
drawSevenSegMinus(g, x, yTop, cw, hUsed, color);
|
|
g.restore();
|
|
}
|
|
x += cw + gap;
|
|
}
|
|
return { width: wTotal, height: hUsed };
|
|
}
|
|
|
|
function drawSevenSegDigit(g, ch, x, y, w, h, color) {
|
|
const digit = Number(ch);
|
|
const on = SEGMENTS_BY_DIGIT[digit] || SEGMENTS_BY_DIGIT[0];
|
|
const t = Math.max(2, Math.round(h * 0.14));
|
|
const r = Math.max(1, Math.round(t * 0.35));
|
|
const pad = Math.max(1, Math.round(t * 0.45));
|
|
|
|
const halfH = h / 2;
|
|
const vSegH = Math.max(2, Math.floor(halfH - pad - t / 2));
|
|
|
|
const seg = {
|
|
A: { x: x + pad, y: y, w: Math.max(2, w - 2 * pad), h: t },
|
|
D: { x: x + pad, y: y + h - t, w: Math.max(2, w - 2 * pad), h: t },
|
|
G: { x: x + pad, y: y + halfH - t / 2, w: Math.max(2, w - 2 * pad), h: t },
|
|
F: { x: x, y: y + pad, w: t, h: vSegH },
|
|
B: { x: x + w - t, y: y + pad, w: t, h: vSegH },
|
|
E: { x: x, y: y + halfH + t / 2, w: t, h: vSegH },
|
|
C: { x: x + w - t, y: y + halfH + t / 2, w: t, h: vSegH },
|
|
};
|
|
|
|
g.save();
|
|
g.fillStyle = color;
|
|
for (const key of Object.keys(seg)) {
|
|
const s = seg[key];
|
|
const alpha = on.has(key) ? 1 : 0.12;
|
|
g.globalAlpha = alpha;
|
|
g.beginPath();
|
|
roundedRect(g, s.x, s.y, s.w, s.h, r);
|
|
g.fill();
|
|
}
|
|
g.restore();
|
|
}
|
|
|
|
function drawSevenSegColon(g, x, y, w, h, color) {
|
|
const r = Math.max(2, Math.round(h * 0.06));
|
|
const cx = x + w / 2;
|
|
const y1 = y + h * 0.33;
|
|
const y2 = y + h * 0.67;
|
|
g.save();
|
|
g.fillStyle = color;
|
|
g.globalAlpha = 0.95;
|
|
g.beginPath(); g.arc(cx, y1, r, 0, Math.PI * 2); g.fill();
|
|
g.beginPath(); g.arc(cx, y2, r, 0, Math.PI * 2); g.fill();
|
|
g.restore();
|
|
}
|
|
|
|
function drawSevenSegDot(g, x, y, w, h, color) {
|
|
const r = Math.max(2, Math.round(h * 0.06));
|
|
const cx = x + w / 2;
|
|
const cy = y + h * 0.82;
|
|
g.save();
|
|
g.fillStyle = color;
|
|
g.globalAlpha = 0.95;
|
|
g.beginPath(); g.arc(cx, cy, r, 0, Math.PI * 2); g.fill();
|
|
g.restore();
|
|
}
|
|
|
|
function drawSevenSegMinus(g, x, y, w, h, color) {
|
|
const t = Math.max(2, Math.round(h * 0.14));
|
|
const r = Math.max(1, Math.round(t * 0.35));
|
|
const pad = Math.max(1, Math.round(t * 0.45));
|
|
const seg = { x: x + pad, y: y + h / 2 - t / 2, w: Math.max(2, w - 2 * pad), h: t };
|
|
g.save();
|
|
g.fillStyle = color;
|
|
g.globalAlpha = 0.95;
|
|
g.beginPath();
|
|
roundedRect(g, seg.x, seg.y, seg.w, seg.h, r);
|
|
g.fill();
|
|
g.restore();
|
|
}
|
|
|
|
const SEGMENTS_BY_DIGIT = [
|
|
new Set(['A','B','C','D','E','F']),
|
|
new Set(['B','C']),
|
|
new Set(['A','B','G','E','D']),
|
|
new Set(['A','B','G','C','D']),
|
|
new Set(['F','G','B','C']),
|
|
new Set(['A','F','G','C','D']),
|
|
new Set(['A','F','G','E','C','D']),
|
|
new Set(['A','B','C']),
|
|
new Set(['A','B','C','D','E','F','G']),
|
|
new Set(['A','B','C','D','F','G']),
|
|
];
|
|
|
|
function computeButtons(rect) {
|
|
const padX = 8;
|
|
const padY = 0;
|
|
const external = isExternalClient();
|
|
let gap = external ? 6 : 8;
|
|
let btnH = external ? 32 : 39;
|
|
const content = computeContentRect(rect, padX);
|
|
const btnW = Math.max(60, content.w);
|
|
const availableH = Math.max(84, rect.h - 18);
|
|
const wantedH = btnH * 3 + gap * 2;
|
|
if (wantedH > availableH) {
|
|
const scale = availableH / wantedH;
|
|
btnH = Math.max(external ? 18 : 24, Math.floor(btnH * scale));
|
|
gap = Math.max(external ? 2 : 3, Math.floor(gap * scale));
|
|
}
|
|
const x = content.x;
|
|
const totalH = btnH * 3 + gap * 2;
|
|
const yBottom = rect.y + rect.h - padY;
|
|
const y0 = yBottom - totalH;
|
|
const r1 = { x, y: y0, w: btnW, h: btnH };
|
|
const deleteToggleW = Math.max(btnH, Math.min(Math.floor(btnW * 0.28), external ? 42 : 52));
|
|
const resetW = Math.max(1, btnW - gap - deleteToggleW);
|
|
const r2 = { x, y: y0 + btnH + gap, w: resetW, h: btnH };
|
|
const rDelete = { x: x + resetW + gap, y: r2.y, w: deleteToggleW, h: btnH };
|
|
const r3 = { x, y: y0 + (btnH + gap) * 2, w: btnW, h: btnH };
|
|
return { startStop: r1, reset: r2, deleteToggle: rDelete, auto: r3, yTop: y0 };
|
|
}
|
|
|
|
function pointInRect(x, y, r) {
|
|
return x >= r.x && x <= (r.x + r.w) && y >= r.y && y <= (r.y + r.h);
|
|
}
|
|
|
|
function getActiveEntry(shared) {
|
|
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
|
if (!entries.length) return null;
|
|
return entries[entries.length - 1] || null;
|
|
}
|
|
|
|
function isRunning(shared) {
|
|
const entry = getActiveEntry(shared);
|
|
return !!entry?.running;
|
|
}
|
|
|
|
function elapsedForEntry(entry, now) {
|
|
const base = Number.isFinite(entry?.elapsedMs) ? entry.elapsedMs : 0;
|
|
if (!entry?.running) return base;
|
|
const startTs = Number.isFinite(entry?.startTs) ? entry.startTs : now;
|
|
return base + Math.max(0, now - startTs);
|
|
}
|
|
|
|
function sumAllEntriesMs(entries, now) {
|
|
const list = Array.isArray(entries) ? entries : [];
|
|
let sum = 0;
|
|
for (const entry of list) sum += elapsedForEntry(entry, now);
|
|
return sum;
|
|
}
|
|
|
|
function deleteEntry(shared, index) {
|
|
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
|
if (index < 0 || index >= entries.length) return false;
|
|
const removed = entries.splice(index, 1)[0];
|
|
if (removed?.running) shared._silenceStartTs = null;
|
|
shared.scrollOffset = Math.max(0, shared.scrollOffset || 0);
|
|
shared._dragScroll = null;
|
|
return true;
|
|
}
|
|
|
|
export function pointer(evt, rect, _CONFIG, shared) {
|
|
if (!evt) return false;
|
|
const x = Number(evt.x);
|
|
const y = Number(evt.y);
|
|
if (!Number.isFinite(x) || !Number.isFinite(y)) return false;
|
|
|
|
const now = shared._lastNow || performance.now();
|
|
const btns = shared._buttonRects || computeButtons(rect);
|
|
const scroll = shared._scrollInfo;
|
|
|
|
if (evt.type === 'pointerdown') {
|
|
if (shared._deleteVisible) {
|
|
const deleteRects = Array.isArray(shared._deleteRects) ? shared._deleteRects : [];
|
|
for (const hit of deleteRects) {
|
|
if (hit?.rect && pointInRect(x, y, hit.rect)) {
|
|
return deleteEntry(shared, hit.index);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (evt.type === 'wheel') {
|
|
if (!scroll || !scroll.scrollable || !pointInRect(x, y, scroll.listRect)) return false;
|
|
const dy = Number(evt.deltaY);
|
|
if (!Number.isFinite(dy) || dy === 0) return false;
|
|
const sign = Math.sign(dy);
|
|
const step = Math.max(1, Math.round(Math.abs(dy) / 100));
|
|
// "Natural": scroll down => Richtung neueste (Offset ↓), scroll up => Richtung ältere (Offset ↑)
|
|
shared.scrollOffset = clampInt((shared.scrollOffset || 0) - sign * step, 0, scroll.maxOffset);
|
|
return true;
|
|
}
|
|
|
|
if (evt.type === 'pointerdown' && pointInRect(x, y, btns.startStop)) {
|
|
// Manuelles Bedienen schaltet Auto aus, damit die Uhr nicht sofort wieder "zurückspringt".
|
|
shared.auto = false;
|
|
if (isRunning(shared)) stop(shared, now);
|
|
else startNew(shared, now);
|
|
return true;
|
|
}
|
|
if (evt.type === 'pointerdown' && pointInRect(x, y, btns.reset)) {
|
|
reset(shared, now);
|
|
return true;
|
|
}
|
|
if (evt.type === 'pointerdown' && btns.deleteToggle && pointInRect(x, y, btns.deleteToggle)) {
|
|
shared._deleteVisible = !shared._deleteVisible;
|
|
shared._deleteRects = [];
|
|
return true;
|
|
}
|
|
if (evt.type === 'pointerdown' && pointInRect(x, y, btns.auto)) {
|
|
shared.auto = !shared.auto;
|
|
shared._silenceStartTs = null;
|
|
if (shared.auto) {
|
|
const levelDb = Number.isFinite(shared._lastLevelDb) ? shared._lastLevelDb : -120;
|
|
if (levelDb > getSilenceDb()) startNew(shared, now);
|
|
}
|
|
return true;
|
|
}
|
|
|
|
if (!scroll || !scroll.scrollable) return false;
|
|
|
|
if (evt.type === 'pointerdown') {
|
|
if (pointInRect(x, y, scroll.listRect)) {
|
|
shared._dragScroll = { startY: y, startOffset: shared.scrollOffset || 0 };
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
if (evt.type === 'pointermove') {
|
|
if (!shared._dragScroll) return false;
|
|
const dy = y - shared._dragScroll.startY;
|
|
const stepPx = Math.max(6, Number(scroll.lineStepPx) || 24);
|
|
const deltaLines = Math.round(dy / stepPx);
|
|
// "Natural": Finger nach unten => ältere Einträge (Offset ↑), Finger nach oben => neuere (Offset ↓)
|
|
shared.scrollOffset = clampInt((shared._dragScroll.startOffset || 0) + deltaLines, 0, scroll.maxOffset);
|
|
return true;
|
|
}
|
|
|
|
if (evt.type === 'pointerup' || evt.type === 'pointercancel') {
|
|
if (!shared._dragScroll) return false;
|
|
shared._dragScroll = null;
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
export function draw(g, rect, _CONFIG, shared) {
|
|
g.save();
|
|
try {
|
|
const now = performance.now();
|
|
const entries = Array.isArray(shared.entries) ? shared.entries : [];
|
|
const style = (_CONFIG?.STOPWATCH_DISPLAY_STYLE === 'seven') ? 'seven' : 'mono';
|
|
const external = isExternalClient();
|
|
const padX = 8;
|
|
const content = computeContentRect(rect, padX);
|
|
|
|
// Header-Hintergrund säubern (wie andere Meter)
|
|
g.save();
|
|
g.fillStyle = HEADER_BG;
|
|
g.fillRect(rect.x, rect.y - 24, rect.w, 26);
|
|
g.restore();
|
|
|
|
// Titel / Status
|
|
g.save();
|
|
g.textAlign = 'center';
|
|
g.fillStyle = CONFIG.HEADER_TEXT_COLOR || MID_COLOR;
|
|
g.font = 'bold 12px ui-monospace, monospace';
|
|
const status = shared.auto ? 'AUTO' : (isRunning(shared) ? 'RUN' : 'STOP');
|
|
g.fillText(`Stoppuhr (${status})`, content.cx, rect.y - 12);
|
|
g.restore();
|
|
|
|
// Zeit-Anzeige (oben) + Historie darunter (jede Start-Aktion erzeugt eine neue Zeile)
|
|
const btns = computeButtons(rect);
|
|
shared._buttonRects = btns;
|
|
const contentTop = rect.y + 10;
|
|
const contentBottom = btns.yTop - 4;
|
|
const contentH = Math.max(0, contentBottom - contentTop);
|
|
|
|
const timeW = content.w;
|
|
const listRect = { x: content.x, y: contentTop, w: timeW, h: contentH };
|
|
const deleteBtnW = Math.max(external ? 18 : 22, Math.min(external ? 24 : 28, Math.floor(content.w * 0.16)));
|
|
const deleteGap = Math.max(external ? 4 : 6, Math.round(deleteBtnW * 0.28));
|
|
const canDeleteRows = content.w >= (external ? 88 : 112);
|
|
const showDeleteRows = !!shared._deleteVisible && canDeleteRows;
|
|
const rowTimeW = showDeleteRows ? Math.max(1, content.w - deleteBtnW - deleteGap) : content.w;
|
|
const rowTimeCx = showDeleteRows ? content.x + rowTimeW / 2 : content.cx;
|
|
const deleteX = content.x + content.w - deleteBtnW;
|
|
const deleteRects = [];
|
|
|
|
const drawDeleteBtn = (r, active = false) => {
|
|
g.save();
|
|
g.fillStyle = active ? 'rgba(255,59,59,0.18)' : 'rgba(255,59,59,0.1)';
|
|
g.strokeStyle = active ? '#ff3b3b' : 'rgba(255,120,120,0.65)';
|
|
g.lineWidth = 1.2;
|
|
g.beginPath();
|
|
roundedRect(g, r.x, r.y, r.w, r.h, 5);
|
|
g.fill();
|
|
g.stroke();
|
|
g.fillStyle = '#ffd6d6';
|
|
const labelSize = Math.max(9, Math.min(13, Math.floor(r.h * 0.56)));
|
|
g.font = `bold ${labelSize}px ui-monospace, monospace`;
|
|
g.textAlign = 'center';
|
|
g.textBaseline = 'middle';
|
|
g.fillText('X', r.x + r.w / 2, r.y + r.h / 2 + 0.5);
|
|
g.restore();
|
|
};
|
|
|
|
if (style === 'seven') {
|
|
const lineGap = 8;
|
|
const totalText = formatTime(sumAllEntriesMs(entries, now));
|
|
const entrySizingTexts = entries.length
|
|
? entries.map((e) => formatTime(elapsedForEntry(e, now)))
|
|
: [formatTime(0)];
|
|
const entryRatioMax = Math.max(...entrySizingTexts.map((t) => sevenSegTotalRatio(t)));
|
|
const totalRatio = sevenSegTotalRatio(totalText);
|
|
|
|
// Einzelzeiten und Summe getrennt skalieren: nur die Zeilen reservieren Platz für die X-Buttons.
|
|
let segH = Math.floor(rowTimeW / Math.max(1e-6, entryRatioMax));
|
|
let totalSegH = Math.floor(timeW / Math.max(1e-6, totalRatio));
|
|
segH = Math.max(external ? 10 : 12, Math.min(external ? 108 : 140, segH));
|
|
totalSegH = Math.max(external ? 10 : 12, Math.min(external ? 108 : 140, totalSegH));
|
|
// Höhe begrenzen: mindestens 1 Eintrag + Summenzeile muss passen.
|
|
while (segH > (external ? 10 : 12) || totalSegH > (external ? 10 : 12)) {
|
|
const refH = Math.max(segH, totalSegH);
|
|
const topPad = Math.max(external ? 6 : 10, Math.round(refH * (external ? 0.18 : 0.28)));
|
|
const bottomPad = Math.max(external ? 5 : 8, Math.round(refH * (external ? 0.12 : 0.18)));
|
|
const needed = segH + totalSegH + lineGap + topPad + bottomPad;
|
|
if (needed <= contentH) break;
|
|
if (totalSegH > segH) totalSegH -= 1;
|
|
else segH -= 1;
|
|
}
|
|
const refH = Math.max(segH, totalSegH);
|
|
const topPad = Math.max(external ? 6 : 10, Math.round(refH * (external ? 0.18 : 0.28)));
|
|
const bottomPad = Math.max(external ? 5 : 8, Math.round(refH * (external ? 0.12 : 0.18)));
|
|
const stepY = segH + (external ? 5 : lineGap);
|
|
|
|
const totalY = Math.floor(contentBottom - bottomPad - totalSegH);
|
|
const ySep = Math.round(totalY - topPad) + 0.5;
|
|
|
|
const entryAreaH = Math.max(0, ySep - contentTop);
|
|
const maxEntryByHeight = Math.max(1, Math.floor((entryAreaH + lineGap) / Math.max(1, stepY)));
|
|
const displayEntryLines = maxEntryByHeight;
|
|
|
|
const maxOffset = Math.max(0, entries.length - displayEntryLines);
|
|
shared.scrollOffset = clampInt(shared.scrollOffset || 0, 0, maxOffset);
|
|
const start = Math.max(0, entries.length - displayEntryLines - (shared.scrollOffset || 0));
|
|
const visible = entries.length ? entries.slice(start, start + displayEntryLines) : [];
|
|
|
|
for (let i = 0; i < visible.length; i++) {
|
|
const entry = visible[i];
|
|
const running = !!entry?.running;
|
|
const y = contentTop + i * stepY;
|
|
const col = running ? '#00e7ff' : 'rgba(255,255,255,0.9)';
|
|
drawSevenSegString(g, formatTime(elapsedForEntry(entry, now)), rowTimeCx, y, rowTimeW, segH, col);
|
|
if (showDeleteRows) {
|
|
const r = { x: deleteX, y: y + Math.max(0, (segH - deleteBtnW) / 2), w: deleteBtnW, h: Math.min(deleteBtnW, segH) };
|
|
deleteRects.push({ index: start + i, rect: r });
|
|
drawDeleteBtn(r, running);
|
|
}
|
|
}
|
|
|
|
// Trennlinie über der Summenzeile (10. Zeile bleibt unten fix)
|
|
g.save();
|
|
g.strokeStyle = 'rgba(0,231,255,0.55)';
|
|
g.setLineDash([6, 5]);
|
|
g.beginPath();
|
|
g.moveTo(content.x, ySep);
|
|
g.lineTo(content.x + timeW, ySep);
|
|
g.stroke();
|
|
g.setLineDash([]);
|
|
g.restore();
|
|
|
|
drawSevenSegString(g, totalText, content.cx, totalY, timeW, totalSegH, '#34d399');
|
|
|
|
const scrollable = maxOffset > 0;
|
|
const entryRect = { x: content.x, y: contentTop, w: timeW, h: entryAreaH };
|
|
shared._scrollInfo = { scrollable, maxLines: displayEntryLines, maxOffset, listRect: entryRect, lineStepPx: stepY };
|
|
} else {
|
|
const totalText = formatTime(sumAllEntriesMs(entries, now));
|
|
const sampleEntries = entries;
|
|
const sampleTexts = sampleEntries.length ? sampleEntries.map((e) => formatTime(elapsedForEntry(e, now))) : [formatTime(0)];
|
|
let fontSize = fitFontSizeToWidth(g, sampleTexts, rowTimeW, { min: external ? 12 : 14, max: external ? 108 : 140 });
|
|
let totalFontSize = fitFontSizeToWidth(g, [totalText], timeW, { min: external ? 12 : 14, max: external ? 108 : 140 });
|
|
fontSize = Math.max(external ? 12 : 14, Math.min(external ? 108 : 140, fontSize));
|
|
totalFontSize = Math.max(external ? 12 : 14, Math.min(external ? 108 : 140, totalFontSize));
|
|
// Höhe begrenzen: mindestens 1 Eintrag + Summenzeile muss passen
|
|
while (fontSize > (external ? 12 : 14) || totalFontSize > (external ? 12 : 14)) {
|
|
const refSize = Math.max(fontSize, totalFontSize);
|
|
const lineGap = Math.max(external ? 2 : 4, Math.round(refSize * (external ? 0.12 : 0.18)));
|
|
const topPad = Math.max(external ? 6 : 10, Math.round(refSize * (external ? 0.18 : 0.28)));
|
|
const bottomPad = Math.max(external ? 5 : 8, Math.round(refSize * (external ? 0.12 : 0.18)));
|
|
const needed = fontSize + totalFontSize + lineGap + topPad + bottomPad;
|
|
if (needed <= contentH) break;
|
|
if (totalFontSize > fontSize) totalFontSize -= 1;
|
|
else fontSize -= 1;
|
|
}
|
|
const refSize = Math.max(fontSize, totalFontSize);
|
|
const lineGap = Math.max(external ? 2 : 4, Math.round(refSize * (external ? 0.12 : 0.18)));
|
|
const topPad = Math.max(external ? 6 : 10, Math.round(refSize * (external ? 0.18 : 0.28)));
|
|
const bottomPad = Math.max(external ? 5 : 8, Math.round(refSize * (external ? 0.12 : 0.18)));
|
|
const stepY = fontSize + lineGap;
|
|
|
|
const totalY = Math.floor(contentBottom - bottomPad - totalFontSize);
|
|
const ySep = Math.round(totalY - topPad) + 0.5;
|
|
const entryAreaH = Math.max(0, ySep - contentTop);
|
|
const maxEntryByHeight = Math.max(1, Math.floor((entryAreaH + lineGap) / Math.max(1, stepY)));
|
|
const displayEntryLines = maxEntryByHeight;
|
|
|
|
const maxOffset = Math.max(0, entries.length - displayEntryLines);
|
|
shared.scrollOffset = clampInt(shared.scrollOffset || 0, 0, maxOffset);
|
|
const start = Math.max(0, entries.length - displayEntryLines - (shared.scrollOffset || 0));
|
|
const visible = entries.slice(start, start + displayEntryLines);
|
|
|
|
g.save();
|
|
g.textAlign = 'center';
|
|
g.textBaseline = 'top';
|
|
g.font = `bold ${fontSize}px ui-monospace, monospace`;
|
|
for (let i = 0; i < visible.length; i++) {
|
|
const entry = visible[i];
|
|
const running = !!entry?.running;
|
|
const y = contentTop + i * stepY;
|
|
const ms = elapsedForEntry(entry, now);
|
|
g.fillStyle = running ? '#00e7ff' : 'rgba(255,255,255,0.9)';
|
|
g.fillText(formatTime(ms), rowTimeCx, y);
|
|
if (showDeleteRows) {
|
|
const btnH = Math.max(16, Math.min(deleteBtnW, fontSize));
|
|
const r = { x: deleteX, y: y + Math.max(0, (fontSize - btnH) / 2), w: deleteBtnW, h: btnH };
|
|
deleteRects.push({ index: start + i, rect: r });
|
|
drawDeleteBtn(r, running);
|
|
}
|
|
}
|
|
|
|
g.save();
|
|
g.strokeStyle = 'rgba(0,231,255,0.55)';
|
|
g.setLineDash([6, 5]);
|
|
g.beginPath();
|
|
g.moveTo(content.x, ySep);
|
|
g.lineTo(content.x + timeW, ySep);
|
|
g.stroke();
|
|
g.setLineDash([]);
|
|
g.restore();
|
|
|
|
g.fillStyle = '#34d399';
|
|
g.font = `bold ${totalFontSize}px ui-monospace, monospace`;
|
|
g.fillText(totalText, content.cx, totalY);
|
|
g.textBaseline = 'alphabetic';
|
|
g.restore();
|
|
|
|
const scrollable = maxOffset > 0;
|
|
const entryRect = { x: content.x, y: contentTop, w: timeW, h: entryAreaH };
|
|
shared._scrollInfo = { scrollable, maxLines: displayEntryLines, maxOffset, listRect: entryRect, lineStepPx: stepY };
|
|
}
|
|
shared._deleteRects = deleteRects;
|
|
|
|
// Buttons
|
|
const drawBtn = (r, label, active = false, warn = false, { blink = false } = {}) => {
|
|
g.save();
|
|
if (active && blink) {
|
|
const phase = (now % 800) / 800; // 0..1
|
|
const pulse = 0.08 + 0.22 * (0.5 + 0.5 * Math.sin(phase * Math.PI * 2));
|
|
g.fillStyle = `rgba(0,231,255,${pulse.toFixed(3)})`;
|
|
} else {
|
|
g.fillStyle = active ? 'rgba(0,231,255,0.18)' : 'rgba(180,200,220,0.08)';
|
|
}
|
|
g.strokeStyle = warn ? '#ff3b3b' : (active ? '#00e7ff' : 'rgba(0,231,255,0.55)');
|
|
g.lineWidth = 1.5;
|
|
g.beginPath();
|
|
const rad = 6;
|
|
roundedRect(g, r.x, r.y, r.w, r.h, rad);
|
|
g.fill();
|
|
g.stroke();
|
|
g.fillStyle = warn ? '#ffdddd' : '#e7f6ff';
|
|
const labelSize = Math.max(external ? 8 : 10, Math.min(external ? 11 : 12, Math.floor(r.h * (external ? 0.32 : 0.34))));
|
|
g.font = `bold ${labelSize}px ui-monospace, monospace`;
|
|
g.textAlign = 'center';
|
|
g.fillText(label, r.x + r.w / 2, r.y + r.h / 2 + Math.max(3, Math.round(labelSize * 0.32)));
|
|
g.restore();
|
|
};
|
|
|
|
drawBtn(btns.startStop, isRunning(shared) ? 'Stop' : 'Start', isRunning(shared));
|
|
drawBtn(btns.reset, 'Reset', false, true);
|
|
drawBtn(btns.deleteToggle, 'X', !!shared._deleteVisible, true);
|
|
drawBtn(btns.auto, 'Auto', shared.auto, false, { blink: true });
|
|
} finally {
|
|
g.restore();
|
|
}
|
|
}
|
|
|
|
function roundedRect(g, x, y, w, h, r) {
|
|
const rr = Math.max(0, Math.min(r, Math.min(w, h) / 2));
|
|
g.moveTo(x + rr, y);
|
|
g.arcTo(x + w, y, x + w, y + h, rr);
|
|
g.arcTo(x + w, y + h, x, y + h, rr);
|
|
g.arcTo(x, y + h, x, y, rr);
|
|
g.arcTo(x, y, x + w, y, rr);
|
|
g.closePath();
|
|
}
|
|
|
|
function clampInt(v, lo, hi) {
|
|
const n = Math.round(Number(v));
|
|
if (!Number.isFinite(n)) return lo;
|
|
return Math.max(lo, Math.min(hi, n));
|
|
}
|