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

figrecipe/_editor/_templates/_styles/_hitmap.py

@@ -0,0 +1,191 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Hitmap overlay CSS styles for the figure editor.
+
+This module contains CSS for:
+- Hitregion overlay and visibility modes
+- Hitregion rectangles, polylines, circles
+- Scatter groups and labels
+- Group hover highlights
+"""
+
+STYLES_HITMAP = """
+/* Hit Region Overlay */
+.hitregion-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;  /* Allow clicks on empty areas to deselect */
+    z-index: 10;  /* Above the preview image */
+}
+
+/* Always display overlay for hover detection, but control visibility via children */
+.hitregion-overlay.visible .hitregion-rect,
+.hitregion-overlay.visible .hitregion-polyline {
+    opacity: 1;
+    stroke: rgba(128, 128, 128, 0.3);  /* Slight visible stroke in visible mode */
+}
+
+.hitregion-overlay.visible .hitregion-polyline {
+    stroke: rgba(128, 128, 128, 0.2);
+    stroke-width: 6;
+}
+
+/* Hover-only mode: invisible until hovered */
+.hitregion-overlay.hover-mode .hitregion-rect,
+.hitregion-overlay.hover-mode .hitregion-polyline {
+    opacity: 0;
+}
+
+.hitregion-overlay.hover-mode .hitregion-rect:hover,
+.hitregion-overlay.hover-mode .hitregion-polyline:hover {
+    opacity: 1;
+}
+
+.hitregion-rect {
+    --element-color: #888888;  /* Default fallback */
+    fill: transparent;
+    stroke: transparent;
+    stroke-width: 2;
+    stroke-dasharray: 6, 3;
+    pointer-events: all;
+    cursor: pointer;
+    transition: fill 0.2s, stroke 0.2s, filter 0.2s, opacity 0.15s;
+}
+
+.hitregion-rect:hover {
+    fill: var(--element-color);
+    fill-opacity: 0.2;
+    stroke: var(--element-color);
+    stroke-opacity: 0.8;
+    stroke-width: 3;
+    stroke-dasharray: none;
+    filter: none;
+}
+
+/* Axes regions: disable pointer events to let clicks pass through to
+   elements inside (pie, scatter, bar, etc.). Axes selection happens via
+   the panel drag system which uses mousedown on the preview area. */
+.hitregion-rect.axes-region {
+    pointer-events: none;
+}
+
+.hitregion-polyline {
+    --element-color: #888888;  /* Default fallback */
+    fill: none !important;
+    stroke: transparent;
+    stroke-width: 8;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    pointer-events: stroke;
+    cursor: pointer;
+    transition: stroke 0.15s, opacity 0.15s;
+}
+
+.hitregion-polyline:hover {
+    fill: none !important;
+    stroke: var(--element-color);
+    stroke-width: 8;
+    stroke-opacity: 0.4;
+    filter: none;
+}
+
+/* Scatter point circles */
+.scatter-group {
+    --element-color: #888888;  /* Default fallback */
+    pointer-events: all;
+}
+
+.hitregion-circle {
+    fill: transparent;
+    stroke: transparent;
+    stroke-width: 1;
+    pointer-events: all;
+    cursor: pointer;
+    opacity: 1;  /* Explicit default */
+    transition: fill 0.15s, stroke 0.15s, opacity 0.15s;
+}
+
+.hitregion-circle:hover,
+.hitregion-circle.hovered {
+    fill: var(--element-color);
+    fill-opacity: 0.2;
+    stroke: var(--element-color);
+    stroke-opacity: 0.5;
+    stroke-width: 1;
+    filter: none;
+}
+
+/* When any circle in the group is hovered, highlight ALL circles in the group */
+.scatter-group:hover .hitregion-circle,
+.scatter-group.hovered .hitregion-circle {
+    fill: var(--element-color);
+    fill-opacity: 0.15;
+    stroke: var(--element-color);
+    stroke-opacity: 0.4;
+    stroke-width: 1;
+    filter: none;
+}
+
+/* Scatter circles visibility modes */
+.hitregion-overlay.visible .hitregion-circle,
+.hitregion-overlay.visible .scatter-group {
+    opacity: 1;
+}
+
+.hitregion-overlay.hover-mode .hitregion-circle {
+    opacity: 0;
+}
+
+.hitregion-overlay.hover-mode .scatter-group:hover .hitregion-circle,
+.hitregion-overlay.hover-mode .hitregion-circle:hover {
+    opacity: 1;
+}
+
+.hitregion-label {
+    font-size: 10px;
+    fill: var(--text-primary);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+
+.hitregion-rect:hover + .hitregion-label,
+.hitregion-group:hover .hitregion-label,
+.hitregion-group.hovered .hitregion-label,
+.scatter-group:hover ~ .hitregion-label,
+.scatter-group.hovered ~ .hitregion-label,
+.hitregion-polyline:hover + .hitregion-label {
+    opacity: 1;
+}
+
+#btn-show-hitmap.active {
+    background: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+}
+
+/* Group hover highlight - all elements in same logical group */
+.group-hovered {
+    opacity: 1 !important;
+}
+
+.group-hovered .hitregion-polyline,
+.group-hovered .hitregion-rect,
+.group-hovered .hitregion-circle {
+    stroke: var(--accent-color) !important;
+    stroke-width: 3 !important;
+    fill: var(--selection-color) !important;
+}
+
+.hitregion-group.group-hovered .hitregion-label {
+    opacity: 1 !important;
+    font-weight: bold;
+}
+"""
+
+__all__ = ["STYLES_HITMAP"]
+
+# EOF

figrecipe/_editor/_templates/_styles/_inspector.py

@@ -0,0 +1,90 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Element inspector CSS styles for the figure editor.
+
+This module contains CSS for:
+- Element inspector overlay
+- Inspector box hover states
+- Inspector labels and notifications
+"""
+
+STYLES_INSPECTOR = """
+/* ==================== ELEMENT INSPECTOR ==================== */
+.element-inspector-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 999999;
+}
+
+.element-inspector-box {
+    position: absolute;
+    border: 2px solid;
+    box-sizing: border-box;
+    pointer-events: auto;
+    cursor: pointer;
+    transition: all 0.15s;
+    background: rgba(255, 255, 255, 0.01);
+}
+
+.element-inspector-box:hover {
+    border-width: 3px;
+    background: rgba(59, 130, 246, 0.15);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 12px rgba(59, 130, 246, 0.4);
+}
+
+.element-inspector-label {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.9);
+    color: white;
+    padding: 2px 6px;
+    font-size: 10px;
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    border-radius: 3px;
+    white-space: nowrap;
+    pointer-events: auto;
+    cursor: pointer;
+    z-index: 1000000;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    line-height: 1.4;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.element-inspector-label:hover {
+    background: rgba(40, 40, 40, 0.95);
+    transform: scale(1.05);
+}
+
+.element-inspector-label .tag { color: #CE9178; }
+.element-inspector-label .id { color: #4EC9B0; font-weight: bold; }
+.element-inspector-label .class { color: #9CDCFE; }
+
+.element-inspector-notification {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+    color: white;
+    padding: 12px 20px;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 10000000;
+    animation: slideInRight 0.3s ease;
+}
+
+@keyframes slideInRight {
+    from { transform: translateX(100px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+"""
+
+__all__ = ["STYLES_INSPECTOR"]
+
+# EOF

figrecipe/_editor/_templates/_styles/_labels.py

@@ -0,0 +1,118 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Label and legend CSS styles for the figure editor.
+
+This module contains CSS for:
+- Axis type toggle buttons
+- Label input fields
+- Legend position and label styling
+"""
+
+STYLES_LABELS = """
+/* Axis Type Toggle */
+.axis-type-toggle {
+    display: flex;
+    gap: 0;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    overflow: hidden;
+    flex: 1;
+}
+
+.axis-type-btn {
+    flex: 1;
+    padding: 6px 12px;
+    font-size: 12px;
+    border: none;
+    background: var(--bg-primary);
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+    border-radius: 0;
+}
+
+.axis-type-btn:first-child {
+    border-right: 1px solid var(--border-color);
+}
+
+.axis-type-btn:hover {
+    background: var(--bg-secondary);
+    color: var(--text-primary);
+}
+
+.axis-type-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
+/* Label input styling */
+.label-input {
+    flex: 1;
+    padding: 6px 10px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 13px;
+}
+
+.label-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
+}
+
+/* Legend custom position */
+.legend-custom-pos {
+    margin-top: 8px;
+    padding: 8px;
+    background: var(--bg-secondary);
+    border-radius: 4px;
+}
+
+.form-hint {
+    font-size: 11px;
+    color: var(--text-secondary);
+    margin-top: 4px;
+    font-style: italic;
+}
+
+/* Legend labels editor */
+.legend-labels-container {
+    margin-top: 8px;
+}
+
+.legend-label-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 6px;
+}
+
+.legend-label-color {
+    width: 16px;
+    height: 16px;
+    border-radius: 3px;
+    border: 1px solid var(--border-color);
+    flex-shrink: 0;
+}
+
+.legend-label-input {
+    flex: 1;
+    padding: 4px 8px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 12px;
+}
+
+.legend-label-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+}
+"""
+
+__all__ = ["STYLES_LABELS"]
+
+# EOF

figrecipe/_editor/_templates/_styles/_modals.py

@@ -0,0 +1,127 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Modal and shortcuts CSS styles for the figure editor.
+
+This module contains CSS for:
+- Shortcuts button
+- Shortcuts modal layout
+- Keyboard key (kbd) styling
+"""
+
+STYLES_MODALS = """
+/* Keyboard Shortcuts Button */
+.btn-shortcuts {
+    padding: 6px 10px;
+    font-size: 16px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.btn-shortcuts:hover {
+    background: var(--bg-secondary);
+    border-color: var(--accent-color);
+}
+
+/* Shortcuts Modal */
+.shortcuts-modal-content {
+    max-width: 500px;
+    width: 90%;
+}
+
+.shortcuts-content {
+    padding: 20px;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.shortcut-section {
+    margin-bottom: 20px;
+}
+
+.shortcut-section:last-child {
+    margin-bottom: 0;
+}
+
+.shortcut-section h4 {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--accent-color);
+    margin-bottom: 12px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.shortcut-row {
+    display: flex;
+    align-items: center;
+    padding: 6px 0;
+    gap: 16px;
+}
+
+.shortcut-keys {
+    flex: 0 0 180px;
+    text-align: left;
+    white-space: nowrap;
+}
+
+.shortcut-desc {
+    flex: 1;
+    color: var(--text-secondary);
+    font-size: 13px;
+    text-align: left;
+}
+
+kbd {
+    display: inline-block;
+    padding: 3px 8px;
+    font-size: 12px;
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    color: var(--text-primary);
+    margin: 0 2px;
+}
+
+[data-theme="dark"] kbd {
+    background: var(--bg-tertiary);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+/* Debug shortcuts section */
+.debug-shortcuts {
+    border: 1px dashed #f59e0b;
+    border-radius: 6px;
+    padding: 12px;
+    background: rgba(245, 158, 11, 0.05);
+}
+
+.debug-shortcuts h4 {
+    color: #f59e0b;
+    border-bottom-color: #f59e0b;
+}
+
+.debug-badge {
+    font-size: 9px;
+    font-weight: 600;
+    background: #f59e0b;
+    color: #000;
+    padding: 2px 6px;
+    border-radius: 3px;
+    margin-left: 8px;
+    vertical-align: middle;
+}
+
+/* Shortcuts button in toolbar */
+.btn-shortcuts {
+    font-size: 16px;
+}
+"""
+
+__all__ = ["STYLES_MODALS"]
+
+# EOF

figrecipe/_editor/_templates/_styles/_overlays.py

@@ -0,0 +1,130 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""Ruler, grid, and column overlay CSS styles for the figure editor.
+
+This module contains CSS for:
+- Ruler overlay with measurements
+- Grid overlay (1mm and 5mm lines)
+- Column guide overlay
+"""
+
+STYLES_OVERLAYS = """
+/* Ruler & Grid toggle button */
+.btn-ruler {
+    padding: 6px 12px;
+    font-size: 13px;
+}
+
+.btn-ruler.active {
+    background: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+}
+
+/* Ruler, Grid, Column overlays */
+.ruler-overlay,
+.grid-overlay,
+.column-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 15;  /* Above hitregion-overlay (z-index: 10) */
+    display: none;
+}
+
+.ruler-overlay.visible,
+.grid-overlay.visible,
+.column-overlay.visible {
+    display: block;
+}
+
+/* Ruler styles */
+.ruler-line {
+    stroke: #ff6600;
+    stroke-width: 1;
+}
+
+.ruler-line-major {
+    stroke: #ff6600;
+    stroke-width: 1.5;
+}
+
+.ruler-text {
+    fill: #ff6600;
+    font-size: 10px;
+    font-family: monospace;
+}
+
+.ruler-bg {
+    fill: rgba(255, 255, 255, 0.85);
+}
+
+[data-theme="dark"] .ruler-bg {
+    fill: rgba(30, 30, 30, 0.85);
+}
+
+[data-theme="dark"] .ruler-line,
+[data-theme="dark"] .ruler-line-major {
+    stroke: #ff9944;
+}
+
+[data-theme="dark"] .ruler-text {
+    fill: #ff9944;
+}
+
+/* Grid styles */
+.grid-line-1mm {
+    stroke: rgba(100, 100, 255, 0.2);
+    stroke-width: 0.5;
+}
+
+.grid-line-5mm {
+    stroke: rgba(100, 100, 255, 0.5);
+    stroke-width: 1;
+}
+
+[data-theme="dark"] .grid-line-1mm {
+    stroke: rgba(150, 150, 255, 0.2);
+}
+
+[data-theme="dark"] .grid-line-5mm {
+    stroke: rgba(150, 150, 255, 0.5);
+}
+
+/* Column guide styles */
+.column-line {
+    stroke: #2e8b57;
+    stroke-width: 2;
+    stroke-dasharray: 8, 4;
+}
+
+.column-text {
+    fill: #2e8b57;
+    font-size: 12px;
+    font-family: monospace;
+    font-weight: bold;
+}
+
+.column-bg {
+    fill: rgba(255, 255, 255, 0.8);
+}
+
+[data-theme="dark"] .column-line {
+    stroke: #66c68a;
+}
+
+[data-theme="dark"] .column-text {
+    fill: #66c68a;
+}
+
+[data-theme="dark"] .column-bg {
+    fill: rgba(30, 30, 30, 0.8);
+}
+"""
+
+__all__ = ["STYLES_OVERLAYS"]
+
+# EOF