@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/HintPanel.js

@@ -0,0 +1,86 @@
+import { el } from '../workspace/dom.js';
+
+/**
+ * HintPanel — a small panel in a drawing's corner that shows a hint: a title
+ * and plain text (Archi's Hints view for canvases, ArchiHint). It folds to its
+ * header, and keeps its place over the drawing however often the drawing is
+ * redrawn (mount() puts it back). Text only: nothing is inserted as HTML.
+ */
+export class HintPanel {
+    /**
+     * @param {Object} [options]
+     * @param {Document} [options.document]
+     * @param {string} [options.heading] - The panel's own name
+     */
+    constructor({ document: doc = globalThis.document, heading = 'Hints' } = {}) {
+        this.document = doc;
+        this.heading = heading;
+        this.folded = false;
+        this.hint = null;
+        this.element = null;
+        this._title = null;
+        this._text = null;
+        this._toggle = null;
+    }
+
+    /** Put the panel in `container` (if it is not there already). */
+    mount(container) {
+        if (!container) return this;
+        if (!this.element) this._build();
+        if (this.element.parentNode !== container) container.appendChild(this.element);
+        return this;
+    }
+
+    /**
+     * Show a hint, or hide the panel (null).
+     * @param {{title?: string, text?: string}|null} hint
+     */
+    show(hint) {
+        this.hint = hint;
+        if (!this.element) this._build();
+        this.element.style.display = hint ? 'flex' : 'none';
+        if (!hint) return this;
+        this._title.textContent = hint.title || '';
+        this._text.textContent = hint.text || '';
+        this._title.style.display = hint.title ? 'block' : 'none';
+        return this;
+    }
+
+    /** Fold the panel to its header, or open it. */
+    setFolded(folded) {
+        this.folded = !!folded;
+        if (!this.element) return;
+        this._body.style.display = this.folded ? 'none' : 'block';
+        this._toggle.textContent = this.folded ? '▸' : '▾';
+    }
+
+    /** @private */
+    _build() {
+        this.element = el({
+            attrs: { class: 'hint-panel', role: 'complementary', 'aria-label': this.heading },
+            style: {
+                position: 'absolute', top: '40px', right: '12px', width: '260px', maxHeight: '45%', zIndex: '5',
+                display: 'none', flexDirection: 'column', background: '#fffdf2', border: '1px solid #d8c97a',
+                borderRadius: '4px', boxShadow: '0 2px 8px rgba(0,0,0,0.15)', fontFamily: 'sans-serif', fontSize: '12px', color: '#333',
+            },
+            children: [
+                {
+                    style: { display: 'flex', alignItems: 'center', gap: '6px', padding: '4px 8px', borderBottom: '1px solid #eee3b0', cursor: 'pointer', fontWeight: 'bold' },
+                    on: { click: () => this.setFolded(!this.folded) },
+                    children: [
+                        { tag: 'span', text: '▾', ref: (n) => { this._toggle = n; } },
+                        { tag: 'span', text: `💡 ${this.heading}` },
+                    ],
+                },
+                {
+                    style: { padding: '6px 8px', overflowY: 'auto' },
+                    ref: (n) => { this._body = n; },
+                    children: [
+                        { style: { fontWeight: 'bold', marginBottom: '4px' }, ref: (n) => { this._title = n; } },
+                        { style: { whiteSpace: 'pre-wrap', lineHeight: '1.4' }, ref: (n) => { this._text = n; } },
+                    ],
+                },
+            ],
+        }, this.document);
+    }
+}

package/src/charting/ImageSelector.js

@@ -0,0 +1,148 @@
+/**
+ * ImageSelector — generic reusable image input component.
+ * Supports both URL input and file upload (converted to data URI).
+ * Shows preview thumbnail.
+ *
+ * Usage:
+ *   const selector = new ImageSelector({ doc: document });
+ *   const container = selector.build({ currentImage: imageUrlOrDataUri });
+ *   parentEl.appendChild(container);
+ *   const selectedImage = selector.value; // URL or data URI
+ */
+
+export class ImageSelector {
+    constructor({ doc = document } = {}) {
+        this.doc = doc;
+        this._urlInput = null;
+        this._fileInput = null;
+        this._preview = null;
+        this.value = null;
+    }
+
+    /**
+     * Build the selector DOM.
+     * @param {Object} options
+     * @param {string} options.currentImage - initial image URL or data URI
+     * @returns {HTMLElement} container
+     */
+    build({ currentImage = null } = {}) {
+        this.value = currentImage;
+
+        const container = this.doc.createElement('div');
+        container.style.cssText = `
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background: #fafafa;
+        `;
+
+        // Preview section
+        const previewSection = this.doc.createElement('div');
+        previewSection.style.cssText = 'text-align: center;';
+        const previewLabel = this.doc.createElement('label');
+        previewLabel.textContent = 'Preview:';
+        previewLabel.style.cssText = 'font-size: 11px; color: #666;';
+        previewSection.appendChild(previewLabel);
+
+        this._preview = this.doc.createElement('img');
+        this._preview.style.cssText = `
+            max-width: 100%;
+            max-height: 120px;
+            margin-top: 4px;
+            border-radius: 3px;
+            border: 1px solid #ccc;
+            display: none;
+        `;
+        previewSection.appendChild(this._preview);
+
+        if (currentImage) {
+            this._preview.src = currentImage;
+            this._preview.style.display = 'block';
+            this._preview.onerror = () => {
+                this._preview.style.display = 'none';
+            };
+        }
+
+        container.appendChild(previewSection);
+
+        // URL input section
+        const urlSection = this.doc.createElement('div');
+        urlSection.style.cssText = 'display: flex; gap: 4px;';
+        const urlLabel = this.doc.createElement('label');
+        urlLabel.textContent = 'URL:';
+        urlLabel.style.cssText = 'flex: 0 0 30px; font-size: 12px;';
+        this._urlInput = this.doc.createElement('input');
+        this._urlInput.type = 'text';
+        this._urlInput.placeholder = 'https://...';
+        this._urlInput.value = (currentImage && !currentImage.startsWith('data:')) ? currentImage : '';
+        this._urlInput.style.cssText = 'flex: 1; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px;';
+        this._urlInput.addEventListener('change', () => this._onUrlChange());
+        urlSection.appendChild(urlLabel);
+        urlSection.appendChild(this._urlInput);
+        container.appendChild(urlSection);
+
+        // File upload section
+        const fileSection = this.doc.createElement('div');
+        fileSection.style.cssText = 'display: flex; gap: 4px;';
+        const fileLabel = this.doc.createElement('label');
+        fileLabel.textContent = 'Upload:';
+        fileLabel.style.cssText = 'flex: 0 0 30px; font-size: 12px;';
+        this._fileInput = this.doc.createElement('input');
+        this._fileInput.type = 'file';
+        this._fileInput.accept = 'image/*';
+        this._fileInput.style.cssText = 'flex: 1; padding: 4px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 12px;';
+        this._fileInput.addEventListener('change', () => this._onFileChange());
+        fileSection.appendChild(fileLabel);
+        fileSection.appendChild(this._fileInput);
+        container.appendChild(fileSection);
+
+        // Clear button
+        const clearBtn = this.doc.createElement('button');
+        clearBtn.type = 'button';
+        clearBtn.textContent = 'Clear Image';
+        clearBtn.style.cssText = 'padding: 4px 8px; font-size: 12px; cursor: pointer;';
+        clearBtn.addEventListener('click', () => this._clearImage());
+        container.appendChild(clearBtn);
+
+        return container;
+    }
+
+    _onUrlChange() {
+        const url = this._urlInput.value.trim();
+        if (url) {
+            this.value = url;
+            this._preview.src = url;
+            this._preview.style.display = 'block';
+            this._preview.onerror = () => {
+                this._preview.style.display = 'none';
+            };
+            this._fileInput.value = '';
+        } else {
+            this._clearImage();
+        }
+    }
+
+    _onFileChange() {
+        const file = this._fileInput.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.value = e.target.result; // data URI
+                this._preview.src = this.value;
+                this._preview.style.display = 'block';
+                this._urlInput.value = '';
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+
+    _clearImage() {
+        this.value = null;
+        this._urlInput.value = '';
+        this._fileInput.value = '';
+        this._preview.style.display = 'none';
+    }
+}