@peter.prib/renderengine 0.2.4 → 0.2.5

package/src/charting/Palette.js

@@ -1,119 +1,119 @@
-import { render } from '../workspace/dom.js';
-import { CreateTemplateCommand } from './DiagramEditorCommands.js';
-
-/**
- * Palette — category picker plus a grid of draggable shapes.
- *
- * Previews are drawn by the templates themselves (Template#renderPreview), so a
- * palette tile always matches what lands on the canvas.
- */
-export class Palette {
-    /**
-     * @param {Object} options
-     * @param {HTMLElement} options.container - Element the palette renders into (contents replaced)
-     * @param {TemplateCatalog} options.catalog - Shapes offered in the current category
-     * @param {DiagramEditor} options.editor - Editor receiving drops
-     * @param {Array<{group: string, types: Array<{key: string, name: string, description?: string}>}>} [options.categories]
-     *        Grouped categories for the picker; omit to hide the picker
-     * @param {string} [options.category] - Selected category key
-     * @param {(key: string) => void} [options.onCategoryChange]
-     */
-    constructor(options = {}) {
-        this.container = options.container;
-        this.catalog = options.catalog;
-        this.editor = options.editor;
-        this.categories = options.categories ?? [];
-        this.category = options.category ?? null;
-        this.onCategoryChange = options.onCategoryChange ?? (() => {});
-    }
-
-    render() {
-        if (!this.container) return;
-        const doc = this.container.ownerDocument;
-        render(this.container, [
-            this.categories.length ? this._pickerSpec() : '',
-            {
-                style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '6px', overflowY: 'auto', flex: '1 1 auto', alignContent: 'start' },
-                children: this.catalog.getAll().map(entry => this._tileSpec(entry, doc)),
-            },
-        ], doc);
-        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', gap: '8px', minHeight: '0' });
-    }
-
-    _pickerSpec() {
-        const selected = this.categories.flatMap(g => g.types).find(t => t.key === this.category);
-        return {
-            tag: 'select',
-            attrs: { 'aria-label': 'Diagram type', title: selected?.description },
-            style: { width: '100%', padding: '6px', fontSize: '12px', flex: '0 0 auto' },
-            on: { change: (e) => this.onCategoryChange(e.target.value) },
-            children: this.categories.map(({ group, types }) => ({
-                tag: 'optgroup',
-                attrs: { label: group },
-                children: types.map(t => ({
-                    tag: 'option',
-                    attrs: { value: t.key, selected: t.key === this.category, title: t.description },
-                    text: t.name,
-                })),
-            })),
-        };
-    }
-
-    _tileSpec(entry, doc) {
-        return {
-            attrs: { draggable: 'true', title: `Drag to add ${entry.name}` },
-            style: {
-                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px',
-                padding: '6px 4px', background: '#fff', border: '1px solid #ddd', borderRadius: '4px',
-                cursor: 'grab', userSelect: 'none',
-            },
-            on: { dragstart: (e) => this._startDrag(e, entry) },
-            children: [
-                entry.factory('__preview', 0, 0).renderPreview(40, doc),
-                {
-                    text: entry.name,
-                    style: { fontSize: '11px', color: '#333', textAlign: 'center', lineHeight: '1.2', overflowWrap: 'anywhere' },
-                },
-            ],
-        };
-    }
-
-    _startDrag(e, entry) {
-        if (!e.dataTransfer) return;
-        e.dataTransfer.effectAllowed = 'copy';
-        e.dataTransfer.setData('templateType', entry.type);
-    }
-
-    /**
-     * Create the dragged shape at a drop point given in SVG viewBox coordinates,
-     * snapping to the grid when it is shown.
-     */
-    handleDrop(e, x, y) {
-        const templateType = e.dataTransfer.getData('templateType');
-        if (!templateType) return false;
-
-        let snapX = x, snapY = y;
-        if (this.editor.showGrid && this.editor.gridSize) {
-            const gridSize = this.editor.gridSize;
-            snapX = Math.round(x / gridSize) * gridSize;
-            snapY = Math.round(y / gridSize) * gridSize;
-        }
-
-        const template = this.catalog.create(templateType, this._generateId(templateType), snapX, snapY);
-        if (!template) return false;
-
-        if (this.editor.history) {
-            this.editor.history.execute(new CreateTemplateCommand(this.editor, template));
-        } else {
-            this.editor.addTemplate(template);
-        }
-        this.editor.render();
-        return true;
-    }
-
-    _generateId(templateType) {
-        let counter = 1;
-        while (this.editor.getTemplate(`${templateType}_${counter}`)) counter++;
-        return `${templateType}_${counter}`;
-    }
-}
+import { render } from '../workspace/dom.js';
+import { CreateTemplateCommand } from './DiagramEditorCommands.js';
+
+/**
+ * Palette — category picker plus a grid of draggable shapes.
+ *
+ * Previews are drawn by the templates themselves (Template#renderPreview), so a
+ * palette tile always matches what lands on the canvas.
+ */
+export class Palette {
+    /**
+     * @param {Object} options
+     * @param {HTMLElement} options.container - Element the palette renders into (contents replaced)
+     * @param {TemplateCatalog} options.catalog - Shapes offered in the current category
+     * @param {DiagramEditor} options.editor - Editor receiving drops
+     * @param {Array<{group: string, types: Array<{key: string, name: string, description?: string}>}>} [options.categories]
+     *        Grouped categories for the picker; omit to hide the picker
+     * @param {string} [options.category] - Selected category key
+     * @param {(key: string) => void} [options.onCategoryChange]
+     */
+    constructor(options = {}) {
+        this.container = options.container;
+        this.catalog = options.catalog;
+        this.editor = options.editor;
+        this.categories = options.categories ?? [];
+        this.category = options.category ?? null;
+        this.onCategoryChange = options.onCategoryChange ?? (() => {});
+    }
+
+    render() {
+        if (!this.container) return;
+        const doc = this.container.ownerDocument;
+        render(this.container, [
+            this.categories.length ? this._pickerSpec() : '',
+            {
+                style: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '6px', overflowY: 'auto', flex: '1 1 auto', alignContent: 'start' },
+                children: this.catalog.getAll().map(entry => this._tileSpec(entry, doc)),
+            },
+        ], doc);
+        Object.assign(this.container.style, { display: 'flex', flexDirection: 'column', gap: '8px', minHeight: '0' });
+    }
+
+    _pickerSpec() {
+        const selected = this.categories.flatMap(g => g.types).find(t => t.key === this.category);
+        return {
+            tag: 'select',
+            attrs: { 'aria-label': 'Diagram type', title: selected?.description },
+            style: { width: '100%', padding: '6px', fontSize: '12px', flex: '0 0 auto' },
+            on: { change: (e) => this.onCategoryChange(e.target.value) },
+            children: this.categories.map(({ group, types }) => ({
+                tag: 'optgroup',
+                attrs: { label: group },
+                children: types.map(t => ({
+                    tag: 'option',
+                    attrs: { value: t.key, selected: t.key === this.category, title: t.description },
+                    text: t.name,
+                })),
+            })),
+        };
+    }
+
+    _tileSpec(entry, doc) {
+        return {
+            attrs: { draggable: 'true', title: entry.description ? `${entry.name}: ${entry.description}\nDrag to add` : `Drag to add ${entry.name}` },
+            style: {
+                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px',
+                padding: '6px 4px', background: '#fff', border: '1px solid #ddd', borderRadius: '4px',
+                cursor: 'grab', userSelect: 'none',
+            },
+            on: { dragstart: (e) => this._startDrag(e, entry) },
+            children: [
+                entry.factory('__preview', 0, 0).renderPreview(40, doc),
+                {
+                    text: entry.name,
+                    style: { fontSize: '11px', color: '#333', textAlign: 'center', lineHeight: '1.2', overflowWrap: 'anywhere' },
+                },
+            ],
+        };
+    }
+
+    _startDrag(e, entry) {
+        if (!e.dataTransfer) return;
+        e.dataTransfer.effectAllowed = 'copy';
+        e.dataTransfer.setData('templateType', entry.type);
+    }
+
+    /**
+     * Create the dragged shape at a drop point given in SVG viewBox coordinates,
+     * snapping to the grid when it is shown.
+     */
+    handleDrop(e, x, y) {
+        const templateType = e.dataTransfer.getData('templateType');
+        if (!templateType) return false;
+
+        let snapX = x, snapY = y;
+        if (this.editor.showGrid && this.editor.gridSize) {
+            const gridSize = this.editor.gridSize;
+            snapX = Math.round(x / gridSize) * gridSize;
+            snapY = Math.round(y / gridSize) * gridSize;
+        }
+
+        const template = this.catalog.create(templateType, this._generateId(templateType), snapX, snapY);
+        if (!template) return false;
+
+        if (this.editor.history) {
+            this.editor.history.execute(new CreateTemplateCommand(this.editor, template));
+        } else {
+            this.editor.addTemplate(template);
+        }
+        this.editor.render();
+        return true;
+    }
+
+    _generateId(templateType) {
+        let counter = 1;
+        while (this.editor.getTemplate(`${templateType}_${counter}`)) counter++;
+        return `${templateType}_${counter}`;
+    }
+}

package/src/charting/TemplateCatalog.js

@@ -1,59 +1,61 @@
-/**
- * TemplateCatalog — registry of template types that can be added to a diagram.
- * Each entry describes a template type and how to create instances.
- */
-export class TemplateCatalog {
-    constructor() {
-        this.entries = new Map();  // type -> { name, icon, factory, properties }
-    }
-
-    /**
-     * Register a template type.
-     * @param {string} type - Unique type identifier
-     * @param {Object} spec - Template specification
-     * @param {string} spec.name - Display name
-     * @param {string} spec.icon - Icon/emoji (e.g., "📦")
-     * @param {Function} spec.factory - Factory function: (id, x, y) => Template instance
-     * @param {Object} spec.properties - Default properties for this type
-     */
-    register(type, spec) {
-        if (!spec.factory) {
-            throw new Error(`TemplateCatalog.register: factory required for type '${type}'`);
-        }
-        this.entries.set(type, {
-            type,
-            name: spec.name || type,
-            icon: spec.icon || '■',
-            factory: spec.factory,
-            properties: spec.properties || {},
-        });
-    }
-
-    /**
-     * Get a template type entry.
-     */
-    get(type) {
-        return this.entries.get(type);
-    }
-
-    /**
-     * Get all entries.
-     */
-    getAll() {
-        return Array.from(this.entries.values());
-    }
-
-    /**
-     * Create a template instance of given type.
-     * @param {string} type
-     * @param {string} id - Instance id
-     * @param {number} x - X position
-     * @param {number} y - Y position
-     * @returns {Template|null}
-     */
-    create(type, id, x, y) {
-        const entry = this.get(type);
-        if (!entry) return null;
-        return entry.factory(id, x, y);
-    }
-}
+/**
+ * TemplateCatalog — registry of template types that can be added to a diagram.
+ * Each entry describes a template type and how to create instances.
+ */
+export class TemplateCatalog {
+    constructor() {
+        this.entries = new Map();  // type -> { name, icon, factory, properties }
+    }
+
+    /**
+     * Register a template type.
+     * @param {string} type - Unique type identifier
+     * @param {Object} spec - Template specification
+     * @param {string} spec.name - Display name
+     * @param {string} spec.icon - Icon/emoji (e.g., "📦")
+     * @param {Function} spec.factory - Factory function: (id, x, y) => Template instance
+     * @param {Object} spec.properties - Default properties for this type
+     * @param {string} [spec.description] - What it is (the palette shows it on hover)
+     */
+    register(type, spec) {
+        if (!spec.factory) {
+            throw new Error(`TemplateCatalog.register: factory required for type '${type}'`);
+        }
+        this.entries.set(type, {
+            type,
+            name: spec.name || type,
+            icon: spec.icon || '■',
+            factory: spec.factory,
+            properties: spec.properties || {},
+            ...(spec.description && { description: spec.description }),
+        });
+    }
+
+    /**
+     * Get a template type entry.
+     */
+    get(type) {
+        return this.entries.get(type);
+    }
+
+    /**
+     * Get all entries.
+     */
+    getAll() {
+        return Array.from(this.entries.values());
+    }
+
+    /**
+     * Create a template instance of given type.
+     * @param {string} type
+     * @param {string} id - Instance id
+     * @param {number} x - X position
+     * @param {number} y - Y position
+     * @returns {Template|null}
+     */
+    create(type, id, x, y) {
+        const entry = this.get(type);
+        if (!entry) return null;
+        return entry.factory(id, x, y);
+    }
+}