scitex 2.4.3__py3-none-any.whl → 2.5.0__py3-none-any.whl

scitex/vis/editor/flask_editor/templates/scripts.py

@@ -0,0 +1,614 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+# File: ./src/scitex/vis/editor/flask_editor/templates/scripts.py
+"""JavaScript for the Flask editor UI."""
+
+JS_SCRIPTS = '''
+let overrides = {{ overrides|safe }};
+let traces = overrides.traces || [];
+let elementBboxes = {};
+let imgSize = {width: 0, height: 0};
+let hoveredElement = null;
+let selectedElement = null;
+
+// Hover system - client-side hit testing
+function initHoverSystem() {
+    const container = document.getElementById('preview-container');
+    const img = document.getElementById('preview-img');
+
+    img.addEventListener('mousemove', (e) => {
+        if (imgSize.width === 0 || imgSize.height === 0) return;
+
+        const rect = img.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const scaleX = imgSize.width / rect.width;
+        const scaleY = imgSize.height / rect.height;
+        const imgX = x * scaleX;
+        const imgY = y * scaleY;
+
+        const element = findElementAt(imgX, imgY);
+        if (element !== hoveredElement) {
+            hoveredElement = element;
+            updateOverlay();
+        }
+    });
+
+    img.addEventListener('mouseleave', () => {
+        hoveredElement = null;
+        updateOverlay();
+    });
+
+    img.addEventListener('click', (e) => {
+        if (hoveredElement) {
+            selectedElement = hoveredElement;
+            updateOverlay();
+            scrollToSection(selectedElement);
+        }
+    });
+
+    img.addEventListener('load', () => {
+        updateOverlay();
+    });
+}
+
+function findElementAt(x, y) {
+    const matches = [];
+    for (const [name, bbox] of Object.entries(elementBboxes)) {
+        if (!name.startsWith('trace_')) {
+            if (x >= bbox.x0 && x <= bbox.x1 && y >= bbox.y0 && y <= bbox.y1) {
+                const area = (bbox.x1 - bbox.x0) * (bbox.y1 - bbox.y0);
+                matches.push({name, area});
+            }
+        }
+    }
+    if (matches.length > 0) {
+        matches.sort((a, b) => a.area - b.area);
+        return matches[0].name;
+    }
+
+    const PROXIMITY_THRESHOLD = 15;
+    let closestTrace = null;
+    let minDistance = Infinity;
+
+    for (const [name, bbox] of Object.entries(elementBboxes)) {
+        if (name.startsWith('trace_') && bbox.points) {
+            if (x >= bbox.x0 && x <= bbox.x1 && y >= bbox.y0 && y <= bbox.y1) {
+                const dist = distanceToLine(x, y, bbox.points);
+                if (dist < minDistance) {
+                    minDistance = dist;
+                    closestTrace = name;
+                }
+            }
+        }
+    }
+
+    if (closestTrace && minDistance <= PROXIMITY_THRESHOLD) {
+        return closestTrace;
+    }
+
+    return null;
+}
+
+function distanceToLine(px, py, points) {
+    let minDist = Infinity;
+    for (let i = 0; i < points.length - 1; i++) {
+        const [x1, y1] = points[i];
+        const [x2, y2] = points[i + 1];
+        const dist = distanceToSegment(px, py, x1, y1, x2, y2);
+        if (dist < minDist) minDist = dist;
+    }
+    return minDist;
+}
+
+function distanceToSegment(px, py, x1, y1, x2, y2) {
+    const dx = x2 - x1;
+    const dy = y2 - y1;
+    const lenSq = dx * dx + dy * dy;
+
+    if (lenSq === 0) {
+        return Math.sqrt((px - x1) ** 2 + (py - y1) ** 2);
+    }
+
+    let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+
+    const projX = x1 + t * dx;
+    const projY = y1 + t * dy;
+
+    return Math.sqrt((px - projX) ** 2 + (py - projY) ** 2);
+}
+
+function drawTracePath(bbox, scaleX, scaleY, type) {
+    if (!bbox.points || bbox.points.length < 2) return '';
+
+    const points = bbox.points;
+    let pathD = `M ${points[0][0] * scaleX} ${points[0][1] * scaleY}`;
+    for (let i = 1; i < points.length; i++) {
+        pathD += ` L ${points[i][0] * scaleX} ${points[i][1] * scaleY}`;
+    }
+
+    const className = type === 'hover' ? 'hover-path' : 'selected-path';
+    const labelX = points[0][0] * scaleX;
+    const labelY = points[0][1] * scaleY - 8;
+    const labelClass = type === 'hover' ? 'hover-label' : 'selected-label';
+
+    return `<path class="${className}" d="${pathD}"/>` +
+           `<text class="${labelClass}" x="${labelX}" y="${labelY}">${bbox.label}</text>`;
+}
+
+function updateOverlay() {
+    const overlay = document.getElementById('hover-overlay');
+    const img = document.getElementById('preview-img');
+    const rect = img.getBoundingClientRect();
+
+    overlay.setAttribute('width', rect.width);
+    overlay.setAttribute('height', rect.height);
+
+    const scaleX = rect.width / imgSize.width;
+    const scaleY = rect.height / imgSize.height;
+
+    let svg = '';
+
+    if (hoveredElement && hoveredElement !== selectedElement) {
+        const bbox = elementBboxes[hoveredElement];
+        if (bbox) {
+            if (hoveredElement.startsWith('trace_') && bbox.points) {
+                svg += drawTracePath(bbox, scaleX, scaleY, 'hover');
+            } else {
+                const x = bbox.x0 * scaleX - 2;
+                const y = bbox.y0 * scaleY - 2;
+                const w = (bbox.x1 - bbox.x0) * scaleX + 4;
+                const h = (bbox.y1 - bbox.y0) * scaleY + 4;
+                svg += `<rect class="hover-rect" x="${x}" y="${y}" width="${w}" height="${h}" rx="2"/>`;
+                svg += `<text class="hover-label" x="${x}" y="${y - 4}">${bbox.label}</text>`;
+            }
+        }
+    }
+
+    if (selectedElement) {
+        const bbox = elementBboxes[selectedElement];
+        if (bbox) {
+            if (selectedElement.startsWith('trace_') && bbox.points) {
+                svg += drawTracePath(bbox, scaleX, scaleY, 'selected');
+            } else {
+                const x = bbox.x0 * scaleX - 2;
+                const y = bbox.y0 * scaleY - 2;
+                const w = (bbox.x1 - bbox.x0) * scaleX + 4;
+                const h = (bbox.y1 - bbox.y0) * scaleY + 4;
+                svg += `<rect class="selected-rect" x="${x}" y="${y}" width="${w}" height="${h}" rx="2"/>`;
+                svg += `<text class="selected-label" x="${x}" y="${y - 4}">${bbox.label}</text>`;
+            }
+        }
+    }
+
+    overlay.innerHTML = svg;
+}
+
+function expandSection(sectionId) {
+    document.querySelectorAll('.section').forEach(section => {
+        const header = section.querySelector('.section-header');
+        const content = section.querySelector('.section-content');
+        if (section.id === sectionId) {
+            header?.classList.remove('collapsed');
+            content?.classList.remove('collapsed');
+        } else if (header?.classList.contains('section-toggle')) {
+            header?.classList.add('collapsed');
+            content?.classList.add('collapsed');
+        }
+    });
+}
+
+function scrollToSection(elementName) {
+    const elementToSection = {
+        'title': 'section-labels',
+        'xlabel': 'section-labels',
+        'ylabel': 'section-labels',
+        'xaxis_ticks': 'section-ticks',
+        'yaxis_ticks': 'section-ticks',
+        'legend': 'section-legend'
+    };
+
+    const fieldMap = {
+        'title': 'title',
+        'xlabel': 'xlabel',
+        'ylabel': 'ylabel',
+        'xaxis_ticks': 'x_n_ticks',
+        'yaxis_ticks': 'y_n_ticks',
+        'legend': 'legend_visible'
+    };
+
+    if (elementName.startsWith('trace_')) {
+        expandSection('section-traces');
+        const traceIdx = elementBboxes[elementName]?.trace_idx;
+        if (traceIdx !== undefined) {
+            const traceColors = document.querySelectorAll('.trace-color');
+            if (traceColors[traceIdx]) {
+                setTimeout(() => {
+                    traceColors[traceIdx].scrollIntoView({behavior: 'smooth', block: 'center'});
+                    traceColors[traceIdx].click();
+                }, 100);
+            }
+        }
+        return;
+    }
+
+    const sectionId = elementToSection[elementName];
+    if (sectionId) {
+        expandSection(sectionId);
+    }
+
+    const fieldId = fieldMap[elementName];
+    if (fieldId) {
+        const field = document.getElementById(fieldId);
+        if (field) {
+            setTimeout(() => {
+                field.scrollIntoView({behavior: 'smooth', block: 'center'});
+                field.focus();
+            }, 100);
+        }
+    }
+}
+
+// Theme management
+function toggleTheme() {
+    const html = document.documentElement;
+    const current = html.getAttribute('data-theme');
+    const next = current === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    document.getElementById('theme-icon').innerHTML = next === 'dark' ? '&#9790;' : '&#9788;';
+    localStorage.setItem('scitex-editor-theme', next);
+}
+
+// Collapsible sections
+function toggleSection(header) {
+    header.classList.toggle('collapsed');
+    const content = header.nextElementSibling;
+    content.classList.toggle('collapsed');
+}
+
+function toggleCustomLegendPosition() {
+    const legendLoc = document.getElementById('legend_loc').value;
+    const customCoordsDiv = document.getElementById('custom-legend-coords');
+    customCoordsDiv.style.display = legendLoc === 'custom' ? 'flex' : 'none';
+}
+
+// Initialize fields
+document.addEventListener('DOMContentLoaded', () => {
+    // Load saved theme
+    const savedTheme = localStorage.getItem('scitex-editor-theme');
+    if (savedTheme) {
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        document.getElementById('theme-icon').innerHTML = savedTheme === 'dark' ? '&#9790;' : '&#9788;';
+    }
+
+    // Labels
+    if (overrides.title) document.getElementById('title').value = overrides.title;
+    if (overrides.xlabel) document.getElementById('xlabel').value = overrides.xlabel;
+    if (overrides.ylabel) document.getElementById('ylabel').value = overrides.ylabel;
+
+    // Axis limits
+    if (overrides.xlim) {
+        document.getElementById('xmin').value = overrides.xlim[0];
+        document.getElementById('xmax').value = overrides.xlim[1];
+    }
+    if (overrides.ylim) {
+        document.getElementById('ymin').value = overrides.ylim[0];
+        document.getElementById('ymax').value = overrides.ylim[1];
+    }
+
+    // Traces
+    document.getElementById('linewidth').value = overrides.linewidth || 1.0;
+    updateTracesList();
+
+    // Legend
+    document.getElementById('legend_visible').checked = overrides.legend_visible !== false;
+    document.getElementById('legend_loc').value = overrides.legend_loc || 'best';
+    document.getElementById('legend_frameon').checked = overrides.legend_frameon || false;
+    document.getElementById('legend_fontsize').value = overrides.legend_fontsize || 6;
+    document.getElementById('legend_x').value = overrides.legend_x !== undefined ? overrides.legend_x : 0.5;
+    document.getElementById('legend_y').value = overrides.legend_y !== undefined ? overrides.legend_y : 0.5;
+    toggleCustomLegendPosition();
+
+    // Ticks
+    document.getElementById('x_n_ticks').value = overrides.x_n_ticks || overrides.n_ticks || 4;
+    document.getElementById('y_n_ticks').value = overrides.y_n_ticks || overrides.n_ticks || 4;
+    document.getElementById('hide_x_ticks').checked = overrides.hide_x_ticks || false;
+    document.getElementById('hide_y_ticks').checked = overrides.hide_y_ticks || false;
+    document.getElementById('tick_fontsize').value = overrides.tick_fontsize || 7;
+    document.getElementById('tick_length').value = overrides.tick_length || 0.8;
+    document.getElementById('tick_width').value = overrides.tick_width || 0.2;
+    document.getElementById('tick_direction').value = overrides.tick_direction || 'out';
+
+    // Style
+    document.getElementById('grid').checked = overrides.grid || false;
+    document.getElementById('hide_top_spine').checked = overrides.hide_top_spine !== false;
+    document.getElementById('hide_right_spine').checked = overrides.hide_right_spine !== false;
+    document.getElementById('axis_width').value = overrides.axis_width || 0.2;
+    document.getElementById('axis_fontsize').value = overrides.axis_fontsize || 7;
+    document.getElementById('facecolor').value = overrides.facecolor || '#ffffff';
+    document.getElementById('facecolor_text').value = overrides.facecolor || '#ffffff';
+    document.getElementById('transparent').checked = overrides.transparent !== false;
+
+    // Dimensions
+    if (overrides.fig_size) {
+        document.getElementById('fig_width').value = Math.round(overrides.fig_size[0] * 100) / 100;
+        document.getElementById('fig_height').value = Math.round(overrides.fig_size[1] * 100) / 100;
+    }
+    document.getElementById('dpi').value = overrides.dpi || 300;
+
+    // Sync color inputs
+    document.getElementById('facecolor').addEventListener('input', (e) => {
+        document.getElementById('facecolor_text').value = e.target.value;
+    });
+    document.getElementById('facecolor_text').addEventListener('change', (e) => {
+        document.getElementById('facecolor').value = e.target.value;
+    });
+
+    updateAnnotationsList();
+    updatePreview();
+    initHoverSystem();
+    setAutoUpdateInterval();
+});
+
+// Traces list management
+function updateTracesList() {
+    const list = document.getElementById('traces-list');
+    if (!traces || traces.length === 0) {
+        list.innerHTML = '<div style="padding: 10px; color: var(--text-muted); font-size: 0.85em;">No traces found in metadata</div>';
+        return;
+    }
+
+    list.innerHTML = traces.map((t, i) => `
+        <div class="trace-item">
+            <input type="color" class="trace-color" value="${t.color || '#1f77b4'}"
+                   onchange="updateTraceColor(${i}, this.value)">
+            <span class="trace-label">${t.label || t.id || 'Trace ' + (i+1)}</span>
+            <div class="trace-style">
+                <select onchange="updateTraceStyle(${i}, this.value)">
+                    <option value="-" ${t.linestyle === '-' ? 'selected' : ''}>Solid</option>
+                    <option value="--" ${t.linestyle === '--' ? 'selected' : ''}>Dashed</option>
+                    <option value=":" ${t.linestyle === ':' ? 'selected' : ''}>Dotted</option>
+                    <option value="-." ${t.linestyle === '-.' ? 'selected' : ''}>Dash-dot</option>
+                </select>
+            </div>
+        </div>
+    `).join('');
+}
+
+function updateTraceColor(idx, color) {
+    if (traces[idx]) {
+        traces[idx].color = color;
+        scheduleUpdate();
+    }
+}
+
+function updateTraceStyle(idx, style) {
+    if (traces[idx]) {
+        traces[idx].linestyle = style;
+        scheduleUpdate();
+    }
+}
+
+function collectOverrides() {
+    const o = {};
+
+    // Labels
+    const title = document.getElementById('title').value;
+    const xlabel = document.getElementById('xlabel').value;
+    const ylabel = document.getElementById('ylabel').value;
+    if (title) o.title = title;
+    if (xlabel) o.xlabel = xlabel;
+    if (ylabel) o.ylabel = ylabel;
+
+    // Axis limits
+    const xmin = document.getElementById('xmin').value;
+    const xmax = document.getElementById('xmax').value;
+    if (xmin !== '' && xmax !== '') o.xlim = [parseFloat(xmin), parseFloat(xmax)];
+
+    const ymin = document.getElementById('ymin').value;
+    const ymax = document.getElementById('ymax').value;
+    if (ymin !== '' && ymax !== '') o.ylim = [parseFloat(ymin), parseFloat(ymax)];
+
+    // Traces
+    o.linewidth = parseFloat(document.getElementById('linewidth').value) || 1.0;
+    o.traces = traces;
+
+    // Legend
+    o.legend_visible = document.getElementById('legend_visible').checked;
+    o.legend_loc = document.getElementById('legend_loc').value;
+    o.legend_frameon = document.getElementById('legend_frameon').checked;
+    o.legend_fontsize = parseInt(document.getElementById('legend_fontsize').value) || 6;
+    o.legend_x = parseFloat(document.getElementById('legend_x').value) || 0.5;
+    o.legend_y = parseFloat(document.getElementById('legend_y').value) || 0.5;
+
+    // Ticks
+    o.x_n_ticks = parseInt(document.getElementById('x_n_ticks').value) || 4;
+    o.y_n_ticks = parseInt(document.getElementById('y_n_ticks').value) || 4;
+    o.hide_x_ticks = document.getElementById('hide_x_ticks').checked;
+    o.hide_y_ticks = document.getElementById('hide_y_ticks').checked;
+    o.tick_fontsize = parseInt(document.getElementById('tick_fontsize').value) || 7;
+    o.tick_length = parseFloat(document.getElementById('tick_length').value) || 0.8;
+    o.tick_width = parseFloat(document.getElementById('tick_width').value) || 0.2;
+    o.tick_direction = document.getElementById('tick_direction').value;
+
+    // Style
+    o.grid = document.getElementById('grid').checked;
+    o.hide_top_spine = document.getElementById('hide_top_spine').checked;
+    o.hide_right_spine = document.getElementById('hide_right_spine').checked;
+    o.axis_width = parseFloat(document.getElementById('axis_width').value) || 0.2;
+    o.axis_fontsize = parseInt(document.getElementById('axis_fontsize').value) || 7;
+    o.facecolor = document.getElementById('facecolor').value;
+    o.transparent = document.getElementById('transparent').checked;
+
+    // Dimensions
+    o.fig_size = [
+        parseFloat(document.getElementById('fig_width').value) || 3.15,
+        parseFloat(document.getElementById('fig_height').value) || 2.68
+    ];
+    o.dpi = parseInt(document.getElementById('dpi').value) || 300;
+
+    // Annotations
+    o.annotations = overrides.annotations || [];
+
+    return o;
+}
+
+async function updatePreview() {
+    setStatus('Updating...', false);
+    overrides = collectOverrides();
+    try {
+        const resp = await fetch('/update', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({overrides})
+        });
+        const data = await resp.json();
+        document.getElementById('preview-img').src = 'data:image/png;base64,' + data.image;
+
+        if (data.bboxes) {
+            elementBboxes = data.bboxes;
+        }
+        if (data.img_size) {
+            imgSize = data.img_size;
+        }
+
+        selectedElement = null;
+        hoveredElement = null;
+        updateOverlay();
+
+        setStatus('Preview updated', false);
+    } catch (e) {
+        setStatus('Error: ' + e.message, true);
+    }
+}
+
+async function saveManual() {
+    setStatus('Saving...', false);
+    try {
+        const resp = await fetch('/save', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'}
+        });
+        const data = await resp.json();
+        if (data.status === 'saved') {
+            setStatus('Saved: ' + data.path.split('/').pop(), false);
+        } else {
+            setStatus('Error: ' + data.message, true);
+        }
+    } catch (e) {
+        setStatus('Error: ' + e.message, true);
+    }
+}
+
+function resetOverrides() {
+    if (confirm('Reset all changes to original values?')) {
+        location.reload();
+    }
+}
+
+function addAnnotation() {
+    const text = document.getElementById('annot-text').value;
+    if (!text) return;
+    const x = parseFloat(document.getElementById('annot-x').value) || 0.5;
+    const y = parseFloat(document.getElementById('annot-y').value) || 0.5;
+    const size = parseInt(document.getElementById('annot-size').value) || 8;
+    if (!overrides.annotations) overrides.annotations = [];
+    overrides.annotations.push({type: 'text', text, x, y, fontsize: size});
+    document.getElementById('annot-text').value = '';
+    updateAnnotationsList();
+    updatePreview();
+}
+
+function removeAnnotation(idx) {
+    overrides.annotations.splice(idx, 1);
+    updateAnnotationsList();
+    updatePreview();
+}
+
+function updateAnnotationsList() {
+    const list = document.getElementById('annotations-list');
+    const annotations = overrides.annotations || [];
+    if (annotations.length === 0) {
+        list.innerHTML = '';
+        return;
+    }
+    list.innerHTML = annotations.map((a, i) =>
+        `<div class="annotation-item">
+            <span>${a.text.substring(0, 25)}${a.text.length > 25 ? '...' : ''} (${a.x.toFixed(2)}, ${a.y.toFixed(2)})</span>
+            <button onclick="removeAnnotation(${i})">Remove</button>
+        </div>`
+    ).join('');
+}
+
+function setStatus(msg, isError = false) {
+    const el = document.getElementById('status');
+    el.textContent = msg;
+    el.classList.toggle('error', isError);
+}
+
+// Debounced auto-update
+let updateTimer = null;
+const DEBOUNCE_DELAY = 500;
+
+function scheduleUpdate() {
+    if (updateTimer) clearTimeout(updateTimer);
+    updateTimer = setTimeout(() => {
+        updatePreview();
+    }, DEBOUNCE_DELAY);
+}
+
+// Auto-update on input changes
+document.querySelectorAll('input[type="text"], input[type="number"]').forEach(el => {
+    el.addEventListener('input', scheduleUpdate);
+    el.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            if (updateTimer) clearTimeout(updateTimer);
+            updatePreview();
+        }
+    });
+});
+
+document.querySelectorAll('input[type="checkbox"], select').forEach(el => {
+    el.addEventListener('change', () => {
+        if (updateTimer) clearTimeout(updateTimer);
+        updatePreview();
+    });
+});
+
+document.querySelectorAll('input[type="color"]').forEach(el => {
+    el.addEventListener('change', () => {
+        if (updateTimer) clearTimeout(updateTimer);
+        updatePreview();
+    });
+});
+
+// Ctrl+S keyboard shortcut to save
+document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        saveManual();
+    }
+});
+
+// Auto-update interval system
+let autoUpdateIntervalId = null;
+
+function setAutoUpdateInterval() {
+    if (autoUpdateIntervalId) {
+        clearInterval(autoUpdateIntervalId);
+        autoUpdateIntervalId = null;
+    }
+
+    const intervalMs = parseInt(document.getElementById('auto_update_interval').value);
+    if (intervalMs > 0) {
+        autoUpdateIntervalId = setInterval(() => {
+            updatePreview();
+        }, intervalMs);
+    }
+}
+'''
+
+
+# EOF