figrecipe 0.6.0__py3-none-any.whl → 0.7.4__py3-none-any.whl

figrecipe/_editor/_templates/_scripts/_view_mode.py

@@ -0,0 +1,107 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""View mode JavaScript for the figure editor.
+
+This module contains the JavaScript code for:
+- View mode management (all/selected)
+- Property filtering by element type
+- Section visibility control
+"""
+
+SCRIPTS_VIEW_MODE = """
+// ===== VIEW MODE MANAGEMENT =====
+// Note: viewMode variable is declared in _core.py
+
+// Set view mode (all or selected)
+function setViewMode(mode) {
+    viewMode = mode;
+
+    // Update toggle buttons (legacy)
+    const btnAll = document.getElementById('btn-show-all');
+    const btnSelected = document.getElementById('btn-show-selected');
+    if (btnAll) btnAll.classList.toggle('active', mode === 'all');
+    if (btnSelected) btnSelected.classList.toggle('active', mode === 'selected');
+
+    // Update controls sections class
+    const controlsSections = document.querySelector('.controls-sections');
+    controlsSections.classList.toggle('filter-mode', mode === 'selected');
+
+    // Update selection hint
+    const hint = document.getElementById('selection-hint');
+    if (mode === 'selected') {
+        if (selectedElement) {
+            hint.textContent = `Showing: ${selectedElement.type}`;
+            hint.style.color = 'var(--accent-color)';
+            // Hide all style sections - only show call properties
+            hideAllStyleSections();
+        } else {
+            hint.textContent = '';
+            hint.style.color = '';
+            // Show all when no selection in filter mode
+            showAllProperties();
+        }
+    } else {
+        hint.textContent = '';
+        showAllProperties();
+    }
+}
+
+// Hide all style sections (for Selected mode - only show call properties)
+function hideAllStyleSections() {
+    const sections = document.querySelectorAll('.section[data-element-types]');
+    sections.forEach(section => {
+        section.classList.add('section-hidden');
+        section.classList.remove('section-visible');
+    });
+}
+
+// Filter properties by element type
+function filterPropertiesByElementType(elementType) {
+    const sections = document.querySelectorAll('.section[data-element-types]');
+
+    sections.forEach(section => {
+        const types = section.getAttribute('data-element-types').split(',');
+        const isGlobal = types.includes('global');
+        const matches = isGlobal || types.includes(elementType);
+
+        section.classList.toggle('section-hidden', !matches);
+        section.classList.toggle('section-visible', matches);
+
+        // If section matches, filter individual form-rows within it
+        if (matches && !isGlobal) {
+            const formRows = section.querySelectorAll('.form-row[data-element-types]');
+            formRows.forEach(row => {
+                const rowTypes = row.getAttribute('data-element-types').split(',');
+                const rowMatches = rowTypes.includes(elementType);
+                row.classList.toggle('field-hidden', !rowMatches);
+            });
+
+            // Open matching sections
+            section.setAttribute('open', '');
+        }
+    });
+
+    // Update hint
+    const hint = document.getElementById('selection-hint');
+    hint.textContent = `Showing: ${elementType}`;
+    hint.style.color = 'var(--accent-color)';
+}
+
+// Show all properties (remove filtering)
+function showAllProperties() {
+    const sections = document.querySelectorAll('.section[data-element-types]');
+
+    sections.forEach(section => {
+        section.classList.remove('section-hidden', 'section-visible');
+
+        const formRows = section.querySelectorAll('.form-row[data-element-types]');
+        formRows.forEach(row => {
+            row.classList.remove('field-hidden');
+        });
+    });
+}
+"""
+
+__all__ = ["SCRIPTS_VIEW_MODE"]
+
+# EOF

figrecipe/_editor/_templates/_scripts/_zoom.py

@@ -0,0 +1,179 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Zoom and pan JavaScript for the figure editor."""
+
+SCRIPTS_ZOOM = """
+// ==================== ZOOM/PAN FUNCTIONS ====================
+
+function initializeZoomPan() {
+    const wrapper = document.getElementById('preview-wrapper');
+    const container = document.getElementById('zoom-container');
+
+    if (!wrapper || !container) return;
+
+    // Zoom buttons
+    document.getElementById('btn-zoom-in')?.addEventListener('click', () => setZoom(zoomLevel + ZOOM_STEP));
+    document.getElementById('btn-zoom-out')?.addEventListener('click', () => setZoom(zoomLevel - ZOOM_STEP));
+    document.getElementById('btn-zoom-reset')?.addEventListener('click', () => setZoom(1.0));
+    document.getElementById('btn-zoom-fit')?.addEventListener('click', zoomToFit);
+
+    // Mouse wheel zoom
+    wrapper.addEventListener('wheel', (e) => {
+        if (e.ctrlKey || e.metaKey) {
+            e.preventDefault();
+            const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+            setZoom(zoomLevel + delta);
+        }
+    }, { passive: false });
+
+    // Pan with middle mouse, alt+drag, or left-click on empty area when zoomed
+    wrapper.addEventListener('mousedown', (e) => {
+        // Middle mouse or Alt+drag always pans
+        if (e.button === 1 || (e.button === 0 && e.altKey)) {
+            e.preventDefault();
+            startPan(e);
+            return;
+        }
+        // Left-click when zoomed > 100% and clicking on background (not on elements)
+        if (e.button === 0 && zoomLevel > 1.0) {
+            const target = e.target;
+            // Only pan if clicking on wrapper/container background, not on canvas elements
+            if (target.id === 'preview-wrapper' || target.classList.contains('zoom-container') ||
+                target.tagName === 'svg' || target.id === 'preview-image') {
+                // Don't pan if clicking on hitmap regions (they have data attributes)
+                const hitRegion = document.elementFromPoint(e.clientX, e.clientY);
+                if (!hitRegion || !hitRegion.closest('.hit-region')) {
+                    e.preventDefault();
+                    startPan(e);
+                }
+            }
+        }
+    });
+
+    wrapper.addEventListener('mousemove', (e) => {
+        if (isPanning) {
+            doPan(e);
+        }
+    });
+
+    wrapper.addEventListener('mouseup', endPan);
+    wrapper.addEventListener('mouseleave', endPan);
+
+    // Keyboard shortcuts for zoom
+    document.addEventListener('keydown', (e) => {
+        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+        if (e.key === '+' || e.key === '=') {
+            e.preventDefault();
+            setZoom(zoomLevel + ZOOM_STEP);
+        } else if (e.key === '-' || e.key === '_') {
+            e.preventDefault();
+            setZoom(zoomLevel - ZOOM_STEP);
+        } else if (e.key === '0') {
+            e.preventDefault();
+            setZoom(1.0);
+        } else if (e.key === 'f' || e.key === 'F') {
+            e.preventDefault();
+            zoomToFit();
+        }
+    });
+
+    // Initialize fit to view
+    setTimeout(zoomToFit, 200);
+}
+
+function setZoom(newLevel) {
+    zoomLevel = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, newLevel));
+
+    const container = document.getElementById('zoom-container');
+    const wrapper = document.getElementById('preview-wrapper');
+    const img = document.getElementById('preview-image');
+
+    if (container && wrapper) {
+        container.style.transform = `scale(${zoomLevel})`;
+
+        // Update container size to enable proper scrolling
+        // Transform scale doesn't change layout size, so we set explicit dimensions
+        if (img) {
+            // Use rendered dimensions if naturalWidth not available
+            const imgWidth = img.naturalWidth || img.width || img.clientWidth;
+            const imgHeight = img.naturalHeight || img.height || img.clientHeight;
+
+            if (imgWidth && imgHeight) {
+                const scaledWidth = imgWidth * zoomLevel;
+                const scaledHeight = imgHeight * zoomLevel;
+
+                // Set container dimensions for scroll area calculation
+                container.style.width = `${imgWidth}px`;
+                container.style.height = `${imgHeight}px`;
+                container.style.minWidth = `${scaledWidth}px`;
+                container.style.minHeight = `${scaledHeight}px`;
+            }
+        }
+
+        // Update wrapper class for cursor hint
+        if (zoomLevel > 1.0) {
+            wrapper.classList.add('zoomed-in');
+        } else {
+            wrapper.classList.remove('zoomed-in');
+            // Reset scroll position when not zoomed
+            wrapper.scrollLeft = 0;
+            wrapper.scrollTop = 0;
+        }
+    }
+
+    // Update zoom level display
+    const levelDisplay = document.getElementById('zoom-level');
+    if (levelDisplay) {
+        levelDisplay.textContent = Math.round(zoomLevel * 100) + '%';
+    }
+}
+
+function zoomToFit() {
+    const wrapper = document.getElementById('preview-wrapper');
+    const img = document.getElementById('preview-image');
+
+    if (!wrapper || !img || !img.naturalWidth) return;
+
+    const wrapperRect = wrapper.getBoundingClientRect();
+    const padding = 40;
+
+    const scaleX = (wrapperRect.width - padding) / img.naturalWidth;
+    const scaleY = (wrapperRect.height - padding) / img.naturalHeight;
+
+    setZoom(Math.min(scaleX, scaleY, 1.0));
+}
+
+function startPan(e) {
+    const wrapper = document.getElementById('preview-wrapper');
+    isPanning = true;
+    panStartX = e.clientX;
+    panStartY = e.clientY;
+    scrollStartX = wrapper.scrollLeft;
+    scrollStartY = wrapper.scrollTop;
+    wrapper.classList.add('panning');
+}
+
+function doPan(e) {
+    if (!isPanning) return;
+
+    const wrapper = document.getElementById('preview-wrapper');
+    const dx = e.clientX - panStartX;
+    const dy = e.clientY - panStartY;
+
+    wrapper.scrollLeft = scrollStartX - dx;
+    wrapper.scrollTop = scrollStartY - dy;
+}
+
+function endPan() {
+    if (isPanning) {
+        const wrapper = document.getElementById('preview-wrapper');
+        wrapper.classList.remove('panning');
+        isPanning = false;
+    }
+}
+
+// ==================== END ZOOM/PAN ====================
+"""
+
+__all__ = ["SCRIPTS_ZOOM"]

figrecipe/_editor/_templates/_styles/__init__.py

@@ -0,0 +1,69 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""CSS styles for the figure editor.
+
+This package contains modular CSS styles organized by component:
+- base: CSS variables, reset, container
+- preview: Preview panel, branding, zoom controls
+- hitmap: Hitregion overlay shapes
+- selection: Selection overlay shapes
+- dynamic_props: Dynamic call properties panel
+- controls: Controls panel, tabs, sections
+- forms: Form elements and inputs
+- buttons: Button styles, download dropdown
+- color_input: Color picker components
+- labels: Axis type toggle, label inputs, legend
+- overlays: Ruler, grid, column overlays
+- modals: Shortcuts modal, kbd styling
+- inspector: Element inspector overlay
+"""
+
+from ._base import STYLES_BASE
+from ._buttons import STYLES_BUTTONS
+from ._color_input import STYLES_COLOR_INPUT
+from ._controls import STYLES_CONTROLS
+from ._dynamic_props import STYLES_DYNAMIC_PROPS
+from ._forms import STYLES_FORMS
+from ._hitmap import STYLES_HITMAP
+from ._inspector import STYLES_INSPECTOR
+from ._labels import STYLES_LABELS
+from ._modals import STYLES_MODALS
+from ._overlays import STYLES_OVERLAYS
+from ._preview import STYLES_PREVIEW
+from ._selection import STYLES_SELECTION
+
+# Combined STYLES constant for backward compatibility
+STYLES = (
+    STYLES_BASE
+    + STYLES_PREVIEW
+    + STYLES_HITMAP
+    + STYLES_SELECTION
+    + STYLES_DYNAMIC_PROPS
+    + STYLES_CONTROLS
+    + STYLES_FORMS
+    + STYLES_BUTTONS
+    + STYLES_COLOR_INPUT
+    + STYLES_LABELS
+    + STYLES_OVERLAYS
+    + STYLES_MODALS
+    + STYLES_INSPECTOR
+)
+
+__all__ = [
+    "STYLES",
+    "STYLES_BASE",
+    "STYLES_PREVIEW",
+    "STYLES_HITMAP",
+    "STYLES_SELECTION",
+    "STYLES_DYNAMIC_PROPS",
+    "STYLES_CONTROLS",
+    "STYLES_FORMS",
+    "STYLES_BUTTONS",
+    "STYLES_COLOR_INPUT",
+    "STYLES_LABELS",
+    "STYLES_OVERLAYS",
+    "STYLES_MODALS",
+    "STYLES_INSPECTOR",
+]
+
+# EOF

figrecipe/_editor/_templates/_styles/_base.py

@@ -0,0 +1,64 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Base CSS styles for the figure editor.
+
+This module contains CSS for:
+- CSS variables (light and dark theme)
+- Reset and base styles
+- Main container layout
+"""
+
+STYLES_BASE = """
+/* CSS Variables for theming */
+:root {
+    --bg-primary: #ffffff;
+    --bg-secondary: #f5f5f5;
+    --bg-tertiary: #e8e8e8;
+    --text-primary: #1a1a1a;
+    --text-secondary: #666666;
+    --border-color: #d0d0d0;
+    --accent-color: #2563eb;
+    --accent-hover: #1d4ed8;
+    --success-color: #10b981;
+    --error-color: #ef4444;
+    --selection-color: rgba(37, 99, 235, 0.3);
+}
+
+[data-theme="dark"] {
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #252525;
+    --bg-tertiary: #333333;
+    --text-primary: #e8e8e8;
+    --text-secondary: #a0a0a0;
+    --border-color: #404040;
+    --accent-color: #3b82f6;
+    --accent-hover: #60a5fa;
+    --selection-color: rgba(59, 130, 246, 0.3);
+}
+
+/* Reset and base */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-size: 14px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Main container */
+.editor-container {
+    display: flex;
+    height: 100vh;
+}
+"""
+
+__all__ = ["STYLES_BASE"]
+
+# EOF

figrecipe/_editor/_templates/_styles/_buttons.py

@@ -0,0 +1,206 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Button CSS styles for the figure editor.
+
+This module contains CSS for:
+- Base button styles
+- Primary, secondary, warning buttons
+- Theme toggle and style info
+- Download dropdown
+"""
+
+STYLES_BUTTONS = """
+/* Buttons */
+button {
+    padding: 8px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+button:hover {
+    background: var(--bg-secondary);
+}
+
+.btn-primary {
+    background: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+.btn-secondary {
+    background: var(--bg-secondary);
+}
+
+.btn-warning {
+    background: #f59e0b;
+    border-color: #f59e0b;
+    color: white;
+}
+
+.btn-warning:hover {
+    background: #d97706;
+    border-color: #d97706;
+}
+
+.style-info {
+    padding: 8px 16px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border-color);
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.style-label {
+    color: var(--text-secondary);
+}
+
+.style-name {
+    color: var(--accent-color);
+    font-weight: 600;
+    font-family: monospace;
+}
+
+.theme-selector {
+    padding: 4px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--accent-color);
+    font-weight: 600;
+    font-family: monospace;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.theme-selector:hover {
+    border-color: var(--accent-color);
+}
+
+.theme-selector:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+
+.theme-actions {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+}
+
+.btn-small {
+    padding: 4px 8px;
+    font-size: 11px;
+    border-radius: 3px;
+}
+
+/* Split dropdown for download button */
+.download-dropdown {
+    position: relative;
+    display: flex;
+}
+
+.download-main {
+    border-radius: 4px 0 0 4px;
+    padding: 8px 16px;
+    font-weight: 500;
+}
+
+.download-toggle {
+    border-radius: 0 4px 4px 0;
+    padding: 8px 8px;
+    border-left: 1px solid rgba(255, 255, 255, 0.2);
+    font-size: 10px;
+}
+
+.download-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    margin-top: 4px;
+    overflow: hidden;
+}
+
+.download-menu.open {
+    display: block;
+}
+
+.download-option {
+    display: block;
+    width: 100%;
+    padding: 10px 16px;
+    text-align: left;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 13px;
+    border-radius: 0;
+}
+
+.download-option:hover {
+    background: var(--bg-secondary);
+}
+
+.download-option.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+.download-option.active:hover {
+    background: var(--accent-hover);
+}
+
+/* Legacy download buttons (kept for compatibility) */
+.download-buttons {
+    display: flex;
+    gap: 8px;
+}
+
+.download-buttons button {
+    flex: 1;
+}
+
+/* Theme toggle */
+.theme-toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.theme-toggle input {
+    width: 18px;
+    height: 18px;
+}
+
+/* Loading state */
+.loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+"""
+
+__all__ = ["STYLES_BUTTONS"]
+
+# EOF