switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.17.0 (#75)

Browse Source
This commit is contained in:
xcaliber
2026-02-27 16:25:39 +00:00
parent 8bb77710b9
commit c9141a6896
37 changed files with 2778 additions and 968 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
extensions/builtin/mermaid-renderer/manifest.json
View File

@@ -1,10 +1,10 @@
{
"id": "mermaid-renderer",
"name": "Mermaid Diagrams",
"version": "1.0.0",
"version": "2.0.0",
"tier": "browser",
"author": "switchboard",
"description": "Renders ```mermaid code blocks as SVG diagrams using mermaid.js",
"description": "Renders ```mermaid code blocks as interactive SVG diagrams with zoom/pan, SVG/PNG export, and source copy",
"permissions": [],
"tools": [],
"surfaces": [],

346
extensions/builtin/mermaid-renderer/script.js
View File

@@ -1,10 +1,9 @@
// ==========================================
// Mermaid Diagram Renderer — Browser Extension
// ==========================================
// Renders ```mermaid code blocks as SVG diagrams.
// Renders ```mermaid code blocks as interactive SVG diagrams.
// Features: zoom/pan viewport, SVG/PNG export, source copy.
// Loads mermaid.js dynamically on first use.
//
// Install: Admin → Extensions → paste manifest + this script.
// ==========================================
Extensions.register({
@@ -12,7 +11,6 @@ Extensions.register({
_mermaidReady: false,
_mermaidLoading: null,
_renderQueue: [],
async init(ctx) {
const self = this;
@@ -29,21 +27,39 @@ Extensions.register({
const id = 'mmd-' + Math.random().toString(36).slice(2, 9);
container.innerHTML = `
<div class="mermaid-block" data-mermaid-id="${id}">
<div class="mermaid-diagram" data-mermaid-src="${encodeURIComponent(code.trim())}">
<div class="mermaid-loading">
<span class="mermaid-spinner"></span> Rendering diagram…
<div class="mermaid-toolbar">
<span class="mermaid-title">📊 Diagram</span>
<span class="mermaid-zoom-label" data-zoom-label="${id}">100%</span>
<div class="mermaid-toolbar-btns">
<button class="mmd-btn" data-action="zoom-in" data-target="${id}" title="Zoom in">+</button>
<button class="mmd-btn" data-action="zoom-out" data-target="${id}" title="Zoom out">−</button>
<button class="mmd-btn" data-action="zoom-fit" data-target="${id}" title="Fit to view">⊡</button>
<button class="mmd-btn" data-action="zoom-reset" data-target="${id}" title="Reset zoom">1:1</button>
<span class="mmd-sep"></span>
<button class="mmd-btn" data-action="export-svg" data-target="${id}" title="Download SVG">SVG</button>
<button class="mmd-btn" data-action="export-png" data-target="${id}" title="Download PNG">PNG</button>
</div>
</div>
<div class="mermaid-viewport" data-viewport="${id}">
<div class="mermaid-diagram" data-mermaid-src="${encodeURIComponent(code.trim())}" data-diagram="${id}">
<div class="mermaid-loading">
<span class="mermaid-spinner"></span> Rendering diagram…
</div>
</div>
</div>
<details class="mermaid-source">
<summary>📊 View source</summary>
<pre><code class="language-mermaid">${self._escapeHtml(code.trim())}</code></pre>
<summary>
<span>📋 View source</span>
<button class="mmd-btn mmd-copy-src" data-action="copy-src" data-target="${id}" title="Copy source" onclick="event.stopPropagation()">Copy</button>
</summary>
<pre><code class="language-mermaid" data-source="${id}">${self._escapeHtml(code.trim())}</code></pre>
</details>
</div>
`;
}
});
// ── Post renderer: find placeholders, render with mermaid.js ──
// ── Post renderer: render diagrams + wire interactivity ──
ctx.renderers.register('mermaid-post', {
type: 'post',
priority: 10,
@@ -52,11 +68,13 @@ Extensions.register({
if (diagrams.length === 0) return;
diagrams.forEach(el => {
// Skip already-rendered diagrams
if (el.dataset.rendered) return;
el.dataset.rendered = 'pending';
self._renderDiagram(el);
});
// Wire toolbar buttons (event delegation on the container)
self._wireToolbar(container);
}
});
@@ -64,21 +82,266 @@ Extensions.register({
this._loadMermaid();
},
// ── Zoom/Pan State ──────────────────────
_getState(id) {
const vp = document.querySelector(`[data-viewport="${id}"]`);
if (!vp) return null;
if (!vp._mmdState) {
vp._mmdState = { scale: 1, panX: 0, panY: 0, dragging: false, startX: 0, startY: 0 };
}
return vp._mmdState;
},
_applyTransform(id) {
const state = this._getState(id);
if (!state) return;
const diagram = document.querySelector(`[data-diagram="${id}"]`);
if (!diagram) return;
diagram.style.transform = `translate(${state.panX}px, ${state.panY}px) scale(${state.scale})`;
const label = document.querySelector(`[data-zoom-label="${id}"]`);
if (label) label.textContent = Math.round(state.scale * 100) + '%';
},
_zoom(id, delta) {
const state = this._getState(id);
if (!state) return;
state.scale = Math.max(0.1, Math.min(5, state.scale * (1 + delta)));
this._applyTransform(id);
},
_zoomReset(id) {
const state = this._getState(id);
if (!state) return;
state.scale = 1; state.panX = 0; state.panY = 0;
this._applyTransform(id);
},
_zoomFit(id) {
const state = this._getState(id);
if (!state) return;
const vp = document.querySelector(`[data-viewport="${id}"]`);
const diagram = document.querySelector(`[data-diagram="${id}"]`);
const svg = diagram?.querySelector('svg');
if (!vp || !svg) return;
// Reset to measure natural size
state.scale = 1; state.panX = 0; state.panY = 0;
diagram.style.transform = '';
requestAnimationFrame(() => {
const vpRect = vp.getBoundingClientRect();
const svgRect = svg.getBoundingClientRect();
if (svgRect.width === 0 || svgRect.height === 0) return;
const scaleX = (vpRect.width - 32) / svgRect.width;
const scaleY = (vpRect.height - 32) / svgRect.height;
state.scale = Math.min(scaleX, scaleY, 2); // Cap at 2x
this._applyTransform(id);
});
},
// ── Toolbar Wiring ──────────────────────
_wireToolbar(container) {
const self = this;
// Skip if already wired
if (container._mmdWired) return;
container._mmdWired = true;
// Button clicks (delegation)
container.addEventListener('click', (e) => {
const btn = e.target.closest('[data-action]');
if (!btn) return;
const action = btn.dataset.action;
const id = btn.dataset.target;
if (!id) return;
switch (action) {
case 'zoom-in': self._zoom(id, 0.25); break;
case 'zoom-out': self._zoom(id, -0.2); break;
case 'zoom-reset': self._zoomReset(id); break;
case 'zoom-fit': self._zoomFit(id); break;
case 'export-svg': self._exportSVG(id); break;
case 'export-png': self._exportPNG(id); break;
case 'copy-src': self._copySource(id, btn); break;
}
});
// Wire each viewport for mouse/touch interaction
container.querySelectorAll('.mermaid-viewport').forEach(vp => {
if (vp._mmdWired) return;
vp._mmdWired = true;
const id = vp.dataset.viewport;
// Mouse wheel zoom
vp.addEventListener('wheel', (e) => {
e.preventDefault();
const delta = e.deltaY > 0 ? -0.1 : 0.1;
self._zoom(id, delta);
}, { passive: false });
// Pan: mousedown → mousemove → mouseup
vp.addEventListener('mousedown', (e) => {
if (e.button !== 0) return;
const state = self._getState(id);
if (!state) return;
state.dragging = true;
state.startX = e.clientX - state.panX;
state.startY = e.clientY - state.panY;
vp.classList.add('mmd-grabbing');
e.preventDefault();
});
vp.addEventListener('mousemove', (e) => {
const state = self._getState(id);
if (!state?.dragging) return;
state.panX = e.clientX - state.startX;
state.panY = e.clientY - state.startY;
self._applyTransform(id);
});
const endDrag = () => {
const state = self._getState(id);
if (!state) return;
state.dragging = false;
vp.classList.remove('mmd-grabbing');
};
vp.addEventListener('mouseup', endDrag);
vp.addEventListener('mouseleave', endDrag);
// Touch: single-finger pan, two-finger pinch zoom
let lastTouchDist = 0;
vp.addEventListener('touchstart', (e) => {
const state = self._getState(id);
if (!state) return;
if (e.touches.length === 1) {
state.dragging = true;
state.startX = e.touches[0].clientX - state.panX;
state.startY = e.touches[0].clientY - state.panY;
} else if (e.touches.length === 2) {
lastTouchDist = Math.hypot(
e.touches[0].clientX - e.touches[1].clientX,
e.touches[0].clientY - e.touches[1].clientY
);
}
}, { passive: true });
vp.addEventListener('touchmove', (e) => {
const state = self._getState(id);
if (!state) return;
if (e.touches.length === 1 && state.dragging) {
state.panX = e.touches[0].clientX - state.startX;
state.panY = e.touches[0].clientY - state.startY;
self._applyTransform(id);
e.preventDefault();
} else if (e.touches.length === 2) {
const dist = Math.hypot(
e.touches[0].clientX - e.touches[1].clientX,
e.touches[0].clientY - e.touches[1].clientY
);
if (lastTouchDist > 0) {
self._zoom(id, (dist - lastTouchDist) / lastTouchDist);
}
lastTouchDist = dist;
e.preventDefault();
}
}, { passive: false });
vp.addEventListener('touchend', () => {
const state = self._getState(id);
if (state) state.dragging = false;
lastTouchDist = 0;
}, { passive: true });
});
},
// ── Export ───────────────────────────────
_exportSVG(id) {
const diagram = document.querySelector(`[data-diagram="${id}"]`);
const svg = diagram?.querySelector('svg');
if (!svg) return;
const clone = svg.cloneNode(true);
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
const blob = new Blob([clone.outerHTML], { type: 'image/svg+xml' });
this._download(blob, `diagram-${id}.svg`);
},
_exportPNG(id) {
const diagram = document.querySelector(`[data-diagram="${id}"]`);
const svg = diagram?.querySelector('svg');
if (!svg) return;
const clone = svg.cloneNode(true);
clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
const svgData = new XMLSerializer().serializeToString(clone);
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const url = URL.createObjectURL(svgBlob);
const self = this;
const img = new Image();
img.onload = () => {
const scale = 2; // 2x for retina
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth * scale;
canvas.height = img.naturalHeight * scale;
const ctx = canvas.getContext('2d');
ctx.scale(scale, scale);
ctx.drawImage(img, 0, 0);
URL.revokeObjectURL(url);
canvas.toBlob((blob) => {
if (blob) self._download(blob, `diagram-${id}.png`);
}, 'image/png');
};
img.onerror = () => {
URL.revokeObjectURL(url);
console.error('[Mermaid] PNG export failed');
};
img.src = url;
},
_download(blob, filename) {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => URL.revokeObjectURL(a.href), 1000);
},
_copySource(id, btn) {
const code = document.querySelector(`[data-source="${id}"]`);
if (!code) return;
navigator.clipboard.writeText(code.textContent).then(() => {
const orig = btn.textContent;
btn.textContent = '✓';
setTimeout(() => { btn.textContent = orig; }, 1500);
});
},
// ── Diagram Rendering ───────────────────
async _renderDiagram(el) {
const code = decodeURIComponent(el.dataset.mermaidSrc);
try {
await this._loadMermaid();
const id = 'mmd-svg-' + Math.random().toString(36).slice(2, 9);
const { svg } = await mermaid.render(id, code);
const svgId = 'mmd-svg-' + Math.random().toString(36).slice(2, 9);
const { svg } = await mermaid.render(svgId, code);
el.innerHTML = svg;
el.dataset.rendered = 'true';
// Styling handled by .mermaid-diagram svg in CSS
const svgEl = el.querySelector('svg');
if (svgEl) {
svgEl.removeAttribute('height');
svgEl.style.maxWidth = 'none'; // Viewport handles sizing
}
} catch (e) {
el.innerHTML = `
@@ -90,12 +353,13 @@ Extensions.register({
}
},
// ── Mermaid Library Loading ──────────────
_loadMermaid() {
if (this._mermaidReady) return Promise.resolve();
if (this._mermaidLoading) return this._mermaidLoading;
this._mermaidLoading = new Promise((resolve, reject) => {
// Check if already loaded (e.g. by another script)
if (typeof mermaid !== 'undefined') {
this._initMermaid();
this._mermaidReady = true;
@@ -103,7 +367,6 @@ Extensions.register({
return;
}
// Try local vendor first, fall back to CDN
const base = (window.__BASE__ || '');
const localSrc = `${base}/vendor/mermaid/mermaid.min.js`;
const cdnSrc = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
@@ -116,7 +379,6 @@ Extensions.register({
resolve();
};
script.onerror = () => {
// Local failed — try CDN
console.warn('[Mermaid] Local vendor not found, trying CDN');
const cdn = document.createElement('script');
cdn.src = cdnSrc;
@@ -140,7 +402,6 @@ Extensions.register({
_initMermaid() {
if (typeof mermaid === 'undefined') return;
// Detect dark mode
const isDark = document.body.classList.contains('dark-theme') ||
window.matchMedia('(prefers-color-scheme: dark)').matches;
@@ -153,6 +414,8 @@ Extensions.register({
});
},
// ── Styles ──────────────────────────────
_injectStyles() {
if (document.getElementById('ext-style-mermaid-renderer')) return;
const style = document.createElement('style');
@@ -162,14 +425,44 @@ Extensions.register({
background: var(--bg-2); border: 1px solid var(--border);
border-radius: 8px; overflow: hidden; margin: 12px 0;
}
/* Toolbar */
.mermaid-toolbar {
display: flex; align-items: center; gap: 6px;
padding: 4px 10px; border-bottom: 1px solid var(--border);
font-size: 12px; color: var(--text-3); flex-wrap: wrap;
}
.mermaid-title { font-weight: 600; color: var(--text-2); margin-right: auto; }
.mermaid-zoom-label {
font-family: var(--mono); font-size: 11px; min-width: 36px;
text-align: center; color: var(--text-3);
}
.mermaid-toolbar-btns { display: flex; gap: 2px; align-items: center; }
.mmd-btn {
background: none; border: 1px solid var(--border); border-radius: 4px;
padding: 1px 7px; font-size: 11px; cursor: pointer;
color: var(--text-3); font-family: var(--mono); line-height: 1.6;
}
.mmd-btn:hover { color: var(--text-1); border-color: var(--text-3); background: var(--bg-3); }
.mmd-sep { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
/* Viewport: zoom/pan container */
.mermaid-viewport {
overflow: hidden; position: relative;
min-height: 80px; max-height: 600px;
cursor: grab; user-select: none;
}
.mermaid-viewport.mmd-grabbing { cursor: grabbing; }
/* Diagram: the transform target */
.mermaid-diagram {
padding: 16px; text-align: center; min-height: 60px;
max-height: 600px; overflow: auto;
}
.mermaid-diagram svg {
max-width: 100%; max-height: 560px;
height: auto; width: auto;
transform-origin: center center;
will-change: transform;
}
.mermaid-diagram svg { height: auto; }
/* Loading / Error */
.mermaid-loading {
color: var(--text-3); font-size: 13px; padding: 20px;
display: flex; align-items: center; justify-content: center; gap: 8px;
@@ -185,11 +478,16 @@ Extensions.register({
padding: 12px 16px; border-radius: 4px; font-size: 13px;
font-family: var(--mono); white-space: pre-wrap;
}
/* Source panel */
.mermaid-source { border-top: 1px solid var(--border); font-size: 12px; }
.mermaid-source summary {
padding: 6px 12px; cursor: pointer; color: var(--text-3); user-select: none;
padding: 6px 12px; cursor: pointer; color: var(--text-3);
user-select: none; display: flex; align-items: center; gap: 8px;
}
.mermaid-source summary:hover { color: var(--text-2); }
.mermaid-source summary span { flex: 1; }
.mmd-copy-src { font-size: 11px; }
.mermaid-source pre {
margin: 0; border-radius: 0; border: none;
max-height: 200px; overflow: auto;