@oml/markdown 0.10.0 → 0.12.0

package/src/renderers/chart-renderer.ts

@@ -76,7 +76,15 @@ export class ChartMarkdownBlockRenderer extends QueryMarkdownBlockRenderer {
         const canvasEl = document.createElement('canvas');
         chartRoot.appendChild(canvasEl);
 
-        initializeChartWhenReady(chartRoot, canvasEl, payload.columns, payload.rows, parsed, container);
+        initializeChartWhenReady(
+            chartRoot,
+            canvasEl,
+            payload.columns,
+            payload.rows,
+            parsed,
+            container,
+            (content) => this.requestTextFileDownload(content, 'chart', 'csv')
+        );
 
         return container;
     }
@@ -91,6 +99,7 @@ function initializeChartWhenReady(
     rows: string[][],
     parsed: ParsedChartOptions,
     messageContainer: HTMLElement,
+    downloadCsv: (content: string) => void,
 ): void {
     const maxAttempts = 20;
     let attempts = 0;
@@ -100,7 +109,7 @@ function initializeChartWhenReady(
             if (attempts < maxAttempts) requestAnimationFrame(tryInit);
             return;
         }
-        void doChartInit(chartRoot, canvasEl, columns, rows, parsed).catch((err) => {
+        void doChartInit(chartRoot, canvasEl, columns, rows, parsed, downloadCsv).catch((err) => {
             const detail = err instanceof Error ? err.message : String(err);
             const msg = document.createElement('div');
             msg.className = 'oml-md-result-message';
@@ -117,6 +126,7 @@ async function doChartInit(
     columns: string[],
     rows: string[][],
     parsed: ParsedChartOptions,
+    downloadCsv: (content: string) => void,
 ): Promise<void> {
     const ChartCtor = await loadChartJs();
     let chart: any = null;
@@ -131,6 +141,7 @@ async function doChartInit(
     };
 
     buildAndRender();
+    installChartToolbar(chartRoot, columns, rows, downloadCsv);
 
     // Resize the canvas whenever the host element resizes.
     const resizeObserver = new ResizeObserver(() => {
@@ -215,6 +226,86 @@ async function doChartInit(
     resizeHandle.addEventListener('pointercancel', onResizePointerEnd);
 }
 
+function installChartToolbar(
+    chartRoot: HTMLElement,
+    columns: string[],
+    rows: string[][],
+    downloadCsv: (content: string) => void
+): void {
+    if (chartRoot.querySelector('.graph-corner-toolbar')) {
+        return;
+    }
+
+    const hotspot = document.createElement('div');
+    hotspot.className = 'graph-corner-hotspot';
+    chartRoot.appendChild(hotspot);
+
+    const toolbar = document.createElement('div');
+    toolbar.className = 'graph-corner-toolbar';
+    const downloadButton = createDownloadButton();
+    downloadButton.addEventListener('click', () => {
+        downloadCsv(toCsv(columns, rows));
+    });
+    toolbar.appendChild(downloadButton);
+    chartRoot.appendChild(toolbar);
+
+    let hideTimer = 0;
+    const showToolbar = () => {
+        if (hideTimer) {
+            window.clearTimeout(hideTimer);
+            hideTimer = 0;
+        }
+        chartRoot.classList.add('graph-toolbar-visible');
+    };
+    const scheduleHideToolbar = () => {
+        hideTimer = window.setTimeout(() => {
+            chartRoot.classList.remove('graph-toolbar-visible');
+            hideTimer = 0;
+        }, 120);
+    };
+
+    hotspot.addEventListener('mouseenter', showToolbar);
+    toolbar.addEventListener('mouseenter', showToolbar);
+    hotspot.addEventListener('mouseleave', scheduleHideToolbar);
+    toolbar.addEventListener('mouseleave', scheduleHideToolbar);
+
+    const swallowPointer = (event: Event) => {
+        event.stopPropagation();
+    };
+    toolbar.addEventListener('pointerdown', swallowPointer, true);
+    toolbar.addEventListener('mousedown', swallowPointer, true);
+    downloadButton.addEventListener('pointerdown', swallowPointer, true);
+    downloadButton.addEventListener('mousedown', swallowPointer, true);
+}
+
+function createDownloadButton(): HTMLButtonElement {
+    const downloadButton = document.createElement('button');
+    downloadButton.className = 'tree-download-btn';
+    downloadButton.title = 'Download CSV';
+    downloadButton.setAttribute('aria-label', 'Download CSV');
+    const iconSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    iconSvg.setAttribute('viewBox', '0 0 24 24');
+    iconSvg.setAttribute('width', '20');
+    iconSvg.setAttribute('height', '20');
+    iconSvg.setAttribute('aria-hidden', 'true');
+    iconSvg.setAttribute('focusable', 'false');
+    iconSvg.style.fill = 'currentColor';
+    const iconPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    iconPath.setAttribute('d', 'M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z');
+    iconSvg.appendChild(iconPath);
+    downloadButton.appendChild(iconSvg);
+    return downloadButton;
+}
+
+function toCsv(columns: string[], rows: string[][]): string {
+    const escape = (value: string): string => `"${String(value ?? '').replace(/"/g, '""')}"`;
+    const lines = [columns.map(escape).join(',')];
+    for (const row of rows) {
+        lines.push(columns.map((_, index) => escape(row[index] ?? '')).join(','));
+    }
+    return lines.join('\n');
+}
+
 // --- Chart.js loader ---
 
 async function loadChartJs(): Promise<new (canvas: HTMLCanvasElement, config: unknown) => any> {