feat(canvas): gate debug status overlay
This commit is contained in:
@@ -80,7 +80,7 @@
|
|||||||
#clawdis-status {
|
#clawdis-status {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
display: grid;
|
display: none;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
@@ -123,6 +123,18 @@
|
|||||||
const statusEl = document.getElementById('clawdis-status');
|
const statusEl = document.getElementById('clawdis-status');
|
||||||
const titleEl = document.getElementById('clawdis-status-title');
|
const titleEl = document.getElementById('clawdis-status-title');
|
||||||
const subtitleEl = document.getElementById('clawdis-status-subtitle');
|
const subtitleEl = document.getElementById('clawdis-status-subtitle');
|
||||||
|
const debugStatusEnabledByQuery = (() => {
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const raw = params.get('debugStatus') ?? params.get('debug');
|
||||||
|
if (!raw) return false;
|
||||||
|
const normalized = String(raw).trim().toLowerCase();
|
||||||
|
return normalized === '1' || normalized === 'true' || normalized === 'yes';
|
||||||
|
} catch (_) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
let debugStatusEnabled = debugStatusEnabledByQuery;
|
||||||
|
|
||||||
function resize() {
|
function resize() {
|
||||||
const dpr = window.devicePixelRatio || 1;
|
const dpr = window.devicePixelRatio || 1;
|
||||||
@@ -136,11 +148,24 @@
|
|||||||
window.addEventListener('resize', resize);
|
window.addEventListener('resize', resize);
|
||||||
resize();
|
resize();
|
||||||
|
|
||||||
|
const setDebugStatusEnabled = (enabled) => {
|
||||||
|
debugStatusEnabled = !!enabled;
|
||||||
|
if (!statusEl) return;
|
||||||
|
if (!debugStatusEnabled) {
|
||||||
|
statusEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (statusEl && !debugStatusEnabled) {
|
||||||
|
statusEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
window.__clawdis = {
|
window.__clawdis = {
|
||||||
canvas,
|
canvas,
|
||||||
ctx,
|
ctx,
|
||||||
|
setDebugStatusEnabled,
|
||||||
setStatus: (title, subtitle) => {
|
setStatus: (title, subtitle) => {
|
||||||
if (!statusEl) return;
|
if (!statusEl || !debugStatusEnabled) return;
|
||||||
if (!title && !subtitle) {
|
if (!title && !subtitle) {
|
||||||
statusEl.style.display = 'none';
|
statusEl.style.display = 'none';
|
||||||
return;
|
return;
|
||||||
@@ -148,11 +173,14 @@
|
|||||||
statusEl.style.display = 'grid';
|
statusEl.style.display = 'grid';
|
||||||
if (titleEl && typeof title === 'string') titleEl.textContent = title;
|
if (titleEl && typeof title === 'string') titleEl.textContent = title;
|
||||||
if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle;
|
if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle;
|
||||||
// Auto-hide after 3 seconds.
|
if (!debugStatusEnabled) {
|
||||||
clearTimeout(window.__statusTimeout);
|
clearTimeout(window.__statusTimeout);
|
||||||
window.__statusTimeout = setTimeout(() => {
|
window.__statusTimeout = setTimeout(() => {
|
||||||
statusEl.style.display = 'none';
|
statusEl.style.display = 'none';
|
||||||
}, 3000);
|
}, 3000);
|
||||||
|
} else {
|
||||||
|
clearTimeout(window.__statusTimeout);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -82,7 +82,7 @@
|
|||||||
#clawdis-status {
|
#clawdis-status {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
inset: 0;
|
inset: 0;
|
||||||
display: grid;
|
display: none;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
@@ -139,6 +139,18 @@
|
|||||||
const statusEl = document.getElementById('clawdis-status');
|
const statusEl = document.getElementById('clawdis-status');
|
||||||
const titleEl = document.getElementById('clawdis-status-title');
|
const titleEl = document.getElementById('clawdis-status-title');
|
||||||
const subtitleEl = document.getElementById('clawdis-status-subtitle');
|
const subtitleEl = document.getElementById('clawdis-status-subtitle');
|
||||||
|
const debugStatusEnabledByQuery = (() => {
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const raw = params.get('debugStatus') ?? params.get('debug');
|
||||||
|
if (!raw) return false;
|
||||||
|
const normalized = String(raw).trim().toLowerCase();
|
||||||
|
return normalized === '1' || normalized === 'true' || normalized === 'yes';
|
||||||
|
} catch (_) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
let debugStatusEnabled = debugStatusEnabledByQuery;
|
||||||
|
|
||||||
function resize() {
|
function resize() {
|
||||||
const dpr = window.devicePixelRatio || 1;
|
const dpr = window.devicePixelRatio || 1;
|
||||||
@@ -152,11 +164,24 @@
|
|||||||
window.addEventListener('resize', resize);
|
window.addEventListener('resize', resize);
|
||||||
resize();
|
resize();
|
||||||
|
|
||||||
|
const setDebugStatusEnabled = (enabled) => {
|
||||||
|
debugStatusEnabled = !!enabled;
|
||||||
|
if (!statusEl) return;
|
||||||
|
if (!debugStatusEnabled) {
|
||||||
|
statusEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (statusEl && !debugStatusEnabled) {
|
||||||
|
statusEl.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
window.__clawdis = {
|
window.__clawdis = {
|
||||||
canvas,
|
canvas,
|
||||||
ctx,
|
ctx,
|
||||||
|
setDebugStatusEnabled,
|
||||||
setStatus: (title, subtitle) => {
|
setStatus: (title, subtitle) => {
|
||||||
if (!statusEl) return;
|
if (!statusEl || !debugStatusEnabled) return;
|
||||||
if (!title && !subtitle) {
|
if (!title && !subtitle) {
|
||||||
statusEl.style.display = 'none';
|
statusEl.style.display = 'none';
|
||||||
return;
|
return;
|
||||||
@@ -164,10 +189,14 @@
|
|||||||
statusEl.style.display = 'grid';
|
statusEl.style.display = 'grid';
|
||||||
if (titleEl && typeof title === 'string') titleEl.textContent = title;
|
if (titleEl && typeof title === 'string') titleEl.textContent = title;
|
||||||
if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle;
|
if (subtitleEl && typeof subtitle === 'string') subtitleEl.textContent = subtitle;
|
||||||
clearTimeout(window.__statusTimeout);
|
if (!debugStatusEnabled) {
|
||||||
window.__statusTimeout = setTimeout(() => {
|
clearTimeout(window.__statusTimeout);
|
||||||
statusEl.style.display = 'none';
|
window.__statusTimeout = setTimeout(() => {
|
||||||
}, 3000);
|
statusEl.style.display = 'none';
|
||||||
|
}, 3000);
|
||||||
|
} else {
|
||||||
|
clearTimeout(window.__statusTimeout);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in New Issue
Block a user