@elixpo/lixsketch 5.4.5 → 5.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.4.5",
+  "version": "5.4.7",
   "description": "Open-source SVG whiteboard engine with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",

package/src/EngineShortcuts.js

@@ -0,0 +1,254 @@
+/* eslint-disable */
+/**
+ * Engine-local keyboard shortcuts.
+ *
+ * These are the shortcuts that operate purely on engine state (tool switching,
+ * shape deletion, selection, grouping, space-to-pan, escape-deselect). They
+ * intentionally do NOT include product-level shortcuts (cloud save, modal
+ * toggles, theme switches) — those belong to the consumer app.
+ *
+ * Usage:
+ *   import { installEngineShortcuts } from '@elixpo/lixsketch';
+ *   const uninstall = installEngineShortcuts(engine);
+ *   // later:
+ *   uninstall();
+ *
+ * Hosts can pass `options.onToast(message, tone)` to surface group/ungroup
+ * confirmations, and `options.skipWhen(event)` to suppress shortcuts in
+ * specific contexts (e.g. when the host's overlay is focused).
+ */
+
+import { TOOLS } from './index.js';
+
+// Single-key tool shortcuts. Mirrors what the standalone product ships.
+export const SHORTCUT_MAP = {
+    h: TOOLS.PAN,
+    v: TOOLS.SELECT,
+    1: TOOLS.SELECT,
+    r: TOOLS.RECTANGLE,
+    2: TOOLS.RECTANGLE,
+    o: TOOLS.CIRCLE,
+    4: TOOLS.CIRCLE,
+    a: TOOLS.ARROW,
+    5: TOOLS.ARROW,
+    l: TOOLS.LINE,
+    6: TOOLS.LINE,
+    p: TOOLS.FREEHAND,
+    7: TOOLS.FREEHAND,
+    t: TOOLS.TEXT,
+    8: TOOLS.TEXT,
+    9: TOOLS.IMAGE,
+    e: TOOLS.ERASER,
+    0: TOOLS.ERASER,
+    i: TOOLS.ICON,
+    f: TOOLS.FRAME,
+    k: TOOLS.LASER,
+};
+
+function isTypingTarget(target) {
+    if (!target) return false;
+    const tag = (target.tagName || '').toLowerCase();
+    if (tag === 'input' || tag === 'textarea') return true;
+    if (target.isContentEditable) return true;
+    return false;
+}
+
+/**
+ * Install engine-local keyboard shortcuts on `document`.
+ *
+ * @param {object} engine - The SketchEngine instance (must have `setActiveTool`).
+ * @param {object} [options]
+ * @param {function} [options.onToast] - (message, { tone }) => void; called
+ *        for group/ungroup confirmations. No-op by default.
+ * @param {function} [options.skipWhen] - (event) => boolean; return true to
+ *        skip shortcut handling for an event. Use to defer to your own
+ *        editor overlays. Default skips inputs/contenteditable only.
+ * @param {function} [options.setActiveTool] - (tool) => void; override how
+ *        tool switching is dispatched. Useful when the consumer has its
+ *        own state store driving the engine — calling this keeps the UI
+ *        in sync without polling. Defaults to engine.setActiveTool.
+ * @returns {function} uninstall function
+ */
+export function installEngineShortcuts(engine, options = {}) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return () => { };
+    }
+
+    const onToast = typeof options.onToast === 'function' ? options.onToast : () => { };
+    const skipWhen = typeof options.skipWhen === 'function' ? options.skipWhen : null;
+    const customSetTool = typeof options.setActiveTool === 'function' ? options.setActiveTool : null;
+
+    function setTool(tool) {
+        if (customSetTool) { customSetTool(tool); return; }
+        if (engine?.setActiveTool) engine.setActiveTool(tool);
+    }
+
+    function getActiveTool() {
+        return engine?.activeTool || engine?.getActiveTool?.() || null;
+    }
+
+    function handleKeyDown(e) {
+        const key = (e.key || '').toLowerCase();
+
+        // Always check ctrl/cmd shortcuts first — they should fire even when
+        // selection is empty, but skip when the user is typing.
+        const isMod = e.ctrlKey || e.metaKey;
+
+        if (isTypingTarget(e.target)) return;
+        if (document.querySelector('.text-edit-overlay:not(.hidden)')) return;
+        if (skipWhen && skipWhen(e)) return;
+
+        if (isMod) {
+            if (key === 'a' && !e.shiftKey) {
+                e.preventDefault();
+                setTool(TOOLS.SELECT);
+                if (window.multiSelection && Array.isArray(window.shapes)) {
+                    window.multiSelection.clearSelection();
+                    window.shapes.forEach((shape) => window.multiSelection.addShape(shape));
+                }
+                return;
+            }
+            if (key === 'g' && !e.shiftKey) {
+                e.preventDefault();
+                try {
+                    const ms = window.multiSelection;
+                    const sel = ms?.selectedShapes;
+                    const targets = sel && sel.size > 1
+                        ? Array.from(sel)
+                        : (window.currentShape ? [window.currentShape] : []);
+                    if (targets.length > 1) {
+                        const newId = `g-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+                        for (const s of targets) s.groupId = newId;
+                        if (typeof ms?.updateControls === 'function') ms.updateControls();
+                        onToast(`Grouped ${targets.length} shapes`, { tone: 'success' });
+                    }
+                } catch (err) { console.warn('[EngineShortcuts] group failed:', err); }
+                return;
+            }
+            if (key === 'g' && e.shiftKey) {
+                e.preventDefault();
+                try {
+                    const ms = window.multiSelection;
+                    const sel = ms?.selectedShapes;
+                    const targets = sel && sel.size > 0
+                        ? Array.from(sel)
+                        : (window.currentShape ? [window.currentShape] : []);
+                    const groupIds = new Set(targets.map((s) => s.groupId).filter(Boolean));
+                    if (groupIds.size > 0 && Array.isArray(window.shapes)) {
+                        let cleared = 0;
+                        for (const s of window.shapes) {
+                            if (s.groupId && groupIds.has(s.groupId)) { s.groupId = null; cleared++; }
+                        }
+                        if (typeof ms?.updateControls === 'function') ms.updateControls();
+                        onToast(`Ungrouped ${cleared} shapes`, { tone: 'success' });
+                    }
+                } catch (err) { console.warn('[EngineShortcuts] ungroup failed:', err); }
+                return;
+            }
+            // Ctrl+D = duplicate (engine-handled elsewhere — just preventDefault to
+            // stop the browser's bookmark dialog).
+            if (key === 'd') { e.preventDefault(); return; }
+            return; // Other Ctrl combos are app-level; let the consumer handle them.
+        }
+
+        // Delete / Backspace — remove selected shapes.
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            e.preventDefault();
+
+            if (window.multiSelection?.selectedShapes?.size > 0) {
+                if (typeof window.deleteSelectedShapes === 'function') {
+                    window.deleteSelectedShapes();
+                }
+                return;
+            }
+
+            if (window.currentShape) {
+                const shape = window.currentShape;
+                const shapes = window.shapes;
+                if (shapes) {
+                    const idx = shapes.indexOf(shape);
+                    if (idx !== -1) shapes.splice(idx, 1);
+                }
+                if (typeof window.cleanupAttachments === 'function') {
+                    window.cleanupAttachments(shape);
+                }
+                if (shape.parentFrame && typeof shape.parentFrame.removeShapeFromFrame === 'function') {
+                    shape.parentFrame.removeShapeFromFrame(shape);
+                }
+                const el = shape.group || shape.element;
+                if (el && el.parentNode) el.parentNode.removeChild(el);
+                if (typeof window.pushDeleteAction === 'function') {
+                    window.pushDeleteAction(shape);
+                }
+                window.currentShape = null;
+                if (typeof window.disableAllSideBars === 'function') {
+                    window.disableAllSideBars();
+                }
+            }
+            return;
+        }
+
+        // Tool-switching shortcuts (no modifier).
+        if (!e.shiftKey && !e.altKey) {
+            const tool = SHORTCUT_MAP[key];
+            if (tool) {
+                e.preventDefault();
+                setTool(tool);
+                return;
+            }
+
+            if (e.key === 'Escape') {
+                // Engine-level deselect; consumer handles modal-close ordering.
+                window.currentShape = null;
+                if (typeof window.disableAllSideBars === 'function') {
+                    window.disableAllSideBars();
+                }
+                return;
+            }
+        }
+    }
+
+    // Space held = temporary pan. Releasing restores the previous tool.
+    let spaceHeld = false;
+    let toolBeforeSpace = null;
+
+    function handleSpaceDown(e) {
+        if (e.code !== 'Space' || spaceHeld) return;
+        if (isTypingTarget(e.target)) return;
+        if (skipWhen && skipWhen(e)) return;
+        e.preventDefault();
+        spaceHeld = true;
+        const active = getActiveTool();
+        if (active && active !== TOOLS.PAN) {
+            toolBeforeSpace = active;
+            setTool(TOOLS.PAN);
+        }
+    }
+
+    function handleKeyUp(e) {
+        if (e.code === 'Space' && spaceHeld) {
+            spaceHeld = false;
+            if (toolBeforeSpace) {
+                setTool(toolBeforeSpace);
+                toolBeforeSpace = null;
+            }
+        }
+    }
+
+    // Block browser zoom on Ctrl+wheel — engine's ZoomPan handles real zoom.
+    function handleWheel(e) {
+        if (e.ctrlKey || e.metaKey) e.preventDefault();
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('keydown', handleSpaceDown);
+    document.addEventListener('keyup', handleKeyUp);
+    document.addEventListener('wheel', handleWheel, { passive: false });
+
+    return function uninstall() {
+        document.removeEventListener('keydown', handleKeyDown);
+        document.removeEventListener('keydown', handleSpaceDown);
+        document.removeEventListener('keyup', handleKeyUp);
+        document.removeEventListener('wheel', handleWheel);
+    };
+}

package/src/core/CopyPaste.js

@@ -13,6 +13,8 @@ import { Frame } from '../shapes/Frame.js';
 import { TextShape } from '../shapes/TextShape.js';
 import { CodeShape } from '../shapes/CodeShape.js';
 import { ImageShape } from '../shapes/ImageShape.js';
+import { isAllowedImage, isAllowedImageDataUrl } from '../utils/allowedImageTypes.js';
+import { compressImage } from '../utils/imageCompressor.js';
 import { IconShape } from '../shapes/IconShape.js';
 
 // Clipboard storage
@@ -585,10 +587,27 @@ function handlePasteEvent(e) {
             const blob = item.getAsFile();
             if (!blob) return;
 
+            // Validate against the canonical allowlist — clipboard sources
+            // can include animated GIFs / HEIC / TIFF / arbitrary mime types.
+            if (!isAllowedImage(blob)) {
+                console.warn('[CopyPaste] Rejected pasted image type:', blob.type);
+                return;
+            }
+
             const reader = new FileReader();
-            reader.onload = (ev) => {
-                const dataUrl = ev.target.result;
-                placeImageFromDataUrl(dataUrl);
+            reader.onload = async (ev) => {
+                const rawDataUrl = ev.target.result;
+                const isSvg = (blob.type || '').toLowerCase() === 'image/svg+xml';
+                let placedDataUrl = rawDataUrl;
+                if (!isSvg) {
+                    try {
+                        const compressed = await compressImage(rawDataUrl);
+                        if (compressed?.dataUrl) placedDataUrl = compressed.dataUrl;
+                    } catch (err) {
+                        console.warn('[CopyPaste] Pre-placement compression failed, using raw:', err);
+                    }
+                }
+                placeImageFromDataUrl(placedDataUrl);
             };
             reader.readAsDataURL(blob);
             return; // only handle first image

package/src/index.js

@@ -49,6 +49,27 @@ export function createSketchEngine(svgElement, options = {}) {
 // the active engine's SVG. Both must be called after engine.init() completes.
 export { saveScene, loadScene } from './core/SceneSerializer.js';
 
+// Adaptive image compressor — same one the engine uses internally for
+// uploads. Exported so embedded hosts can pre-compress images before
+// shipping them across a postMessage boundary.
+export { compressImage } from './utils/imageCompressor.js';
+
+// Canonical image allowlist. The engine and any embedding host should
+// reject anything outside this set at every entry point (file picker,
+// drag-drop, paste, server boundary).
+export {
+    ALLOWED_IMAGE_MIME_TYPES,
+    ALLOWED_IMAGE_EXTENSIONS,
+    IMAGE_ACCEPT_ATTR,
+    isAllowedImage,
+    isAllowedImageDataUrl,
+} from './utils/allowedImageTypes.js';
+
+// Engine-local keyboard shortcuts (tool switching, delete, group/ungroup,
+// space-to-pan, escape-deselect). App-level shortcuts (cloud save, modal
+// toggles) are intentionally NOT included — those belong to the consumer.
+export { installEngineShortcuts, SHORTCUT_MAP } from './EngineShortcuts.js';
+
 // Tool name constants
 export const TOOLS = {
     SELECT: 'select',

package/src/tools/imageTool.js

@@ -3,6 +3,7 @@
 import { pushCreateAction, pushDeleteAction, pushTransformAction, pushFrameAttachmentAction } from '../core/UndoRedo.js';
 import { updateAttachedArrows as updateArrowsForShape, cleanupAttachments } from './arrowTool.js';
 import { compressImage } from '../utils/imageCompressor.js';
+import { isAllowedImage, IMAGE_ACCEPT_ATTR } from '../utils/allowedImageTypes.js';
 
 
 let isDraggingImage = false;
@@ -133,7 +134,7 @@ document.getElementById("importImage")?.addEventListener('click', () => {
     // Create a file input element
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = 'image/*'; // Accept all image types
+    fileInput.accept = IMAGE_ACCEPT_ATTR; // Static images only — see allowedImageTypes.js
     fileInput.style.display = 'none'; // Hide the input element
     
     // Add the input to the document temporarily
@@ -194,13 +195,16 @@ const loadHardcodedImage = (imagePath) => {
     img.src = imagePath;
 };
 
-const handleImageUpload = (file) => {
+const handleImageUpload = async (file) => {
     if (!file || !isImageToolActive) return;
 
-    // Validate file type
-    if (!file.type.startsWith('image/')) {
-        console.error('Selected file is not an image');
-        alert('Please select a valid image file.');
+    // Validate file type against the canonical allowlist (avif, jpeg, jpg,
+    // png, bmp, svg, webp). Animated GIF, HEIC, TIFF, video, audio, and
+    // arbitrary files are rejected here.
+    if (!isAllowedImage(file)) {
+        console.error('Rejected file type:', file.type, file.name);
+        alert('Unsupported file type. Allowed: AVIF, JPEG, PNG, BMP, SVG, WebP.');
+        isImageToolActive = false;
         return;
     }
 
@@ -222,26 +226,50 @@ const handleImageUpload = (file) => {
 
     console.log('Processing image file:', file.name, 'Size:', file.size, 'Type:', file.type);
 
-    const reader = new FileReader();
-    
-    // Store file size for room limit tracking
-    window.__pendingImageFileSize = file.size;
+    // Read → optionally compress → place. We compress client-side BEFORE
+    // placement so that consumers without an upload pipeline (VS Code
+    // extension, offline npm usage) still embed a compressed data URL
+    // rather than the original. SVGs are passed through unchanged because
+    // rasterizing them would destroy their vector fidelity.
+    try {
+        const rawDataUrl = await readFileAsDataUrl(file);
+        const isSvg = (file.type || '').toLowerCase() === 'image/svg+xml'
+            || (file.name || '').toLowerCase().endsWith('.svg');
+
+        let placedDataUrl = rawDataUrl;
+        let placedSize = file.size;
+        if (!isSvg) {
+            try {
+                const compressed = await compressImage(rawDataUrl);
+                if (compressed?.dataUrl) {
+                    placedDataUrl = compressed.dataUrl;
+                    placedSize = compressed.compressedSize || placedSize;
+                }
+            } catch (err) {
+                console.warn('[ImageTool] Pre-placement compression failed, using raw:', err);
+            }
+        }
 
-    reader.onload = (e) => {
-        imageToPlace = e.target.result;
+        window.__pendingImageFileSize = placedSize;
+        imageToPlace = placedDataUrl;
         isDraggingImage = true;
-        console.log('Image loaded and ready to place');
-    };
-    
-    reader.onerror = (error) => {
-        console.error('Error reading file:', error);
+        console.log('Image loaded and ready to place', { size: placedSize, isSvg });
+    } catch (err) {
+        console.error('Error reading file:', err);
         alert('Error reading the image file. Please try again.');
         isImageToolActive = false;
-    };
-    
-    reader.readAsDataURL(file);
+    }
 };
 
+function readFileAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = (err) => reject(err);
+        reader.readAsDataURL(file);
+    });
+}
+
 // Add coordinate conversion function like in other tools
 function getSVGCoordsFromMouse(e) {
     const viewBox = svg.viewBox.baseVal;
@@ -461,8 +489,11 @@ const handleMouseDownImage = async (e) => {
         currentShape.isSelected = true;
         placedShape.selectShape();
 
-        // Fire async upload pipeline (compress + upload to Cloudinary)
-        uploadImageToCloudinary(imageShape).catch(err => {
+        // Fire async upload pipeline. We dispatch via window.uploadImageToCloudinary
+        // so embedded hosts (e.g. blogs.elixpo) can swap in a postMessage-based
+        // implementation that routes uploads through the host's media API.
+        const uploader = (typeof window !== 'undefined' && window.uploadImageToCloudinary) || uploadImageToCloudinary;
+        uploader(imageShape).catch(err => {
             console.warn('[ImageTool] Upload pipeline error:', err);
         });
 
@@ -1283,7 +1314,7 @@ window.openImageFilePicker = function() {
     isImageToolActive = true;
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
-    fileInput.accept = 'image/*';
+    fileInput.accept = IMAGE_ACCEPT_ATTR;
     fileInput.style.display = 'none';
     document.body.appendChild(fileInput);
 

package/src/utils/allowedImageTypes.js

@@ -0,0 +1,53 @@
+/**
+ * Canonical allowlist for image uploads across LixSketch and any embedding
+ * host (e.g. blogs.elixpo). Anything not in this list is rejected at file
+ * pick / paste / drop time and again at the server boundary.
+ *
+ * Static raster + vector formats only. Animated GIF is intentionally excluded
+ * (animation isn't supported by the SVG renderer or the blog reader); HEIC,
+ * TIFF, video, audio, PDF, and arbitrary files are excluded by omission.
+ */
+
+export const ALLOWED_IMAGE_MIME_TYPES = Object.freeze([
+    'image/avif',
+    'image/jpeg',
+    'image/png',
+    'image/bmp',
+    'image/svg+xml',
+    'image/webp',
+]);
+
+export const ALLOWED_IMAGE_EXTENSIONS = Object.freeze([
+    '.avif',
+    '.jpeg',
+    '.jpg',
+    '.png',
+    '.bmp',
+    '.svg',
+    '.webp',
+]);
+
+/** Comma-joined value suitable for an <input accept="…"> attribute. */
+export const IMAGE_ACCEPT_ATTR = ALLOWED_IMAGE_MIME_TYPES.join(',');
+
+/**
+ * Validate a File / Blob against the allowlist by mime type, falling back
+ * to extension matching when the browser doesn't fill in `type` (some
+ * drag-drop sources, some SVGs).
+ */
+export function isAllowedImage(file) {
+    if (!file) return false;
+    const type = (file.type || '').toLowerCase();
+    if (type && ALLOWED_IMAGE_MIME_TYPES.includes(type)) return true;
+    const name = (file.name || '').toLowerCase();
+    if (!name) return false;
+    return ALLOWED_IMAGE_EXTENSIONS.some((ext) => name.endsWith(ext));
+}
+
+/** Same check but for a base64 data URL (e.g. from clipboard paste). */
+export function isAllowedImageDataUrl(dataUrl) {
+    if (typeof dataUrl !== 'string') return false;
+    const m = dataUrl.match(/^data:([^;]+);/i);
+    if (!m) return false;
+    return ALLOWED_IMAGE_MIME_TYPES.includes(m[1].toLowerCase());
+}