@elixpo/lixsketch 5.4.6 → 5.5.0

package/src/tools/textTool.js

@@ -11,6 +11,8 @@ import {
     updateSelectedElement
 } from '../core/UndoRedo.js';
 import { cleanupAttachments, updateAttachedArrows } from './arrowTool.js';
+
+function getThemeStroke() { if (typeof document === "undefined") return "#fff"; return document.body && document.body.classList.contains("theme-dark") ? "#fff" : "#1a1a2e"; }
 import {
     addCodeBlock,
     wrapCodeElement,
@@ -27,7 +29,7 @@ import {
 
 let textSize = "30px";
 let textFont = "lixFont";
-let textColor = "#fff";
+let textColor = null;
 let textAlign = "left";
 
 let textColorOptions = document.querySelectorAll(".textColorSpan");
@@ -118,20 +120,27 @@ function addText(event) {
 
     textElement.setAttribute("x", 0);
     textElement.setAttribute("y", 0);
-    textElement.setAttribute("fill", textColor);
+    textElement.setAttribute("fill", textColor ?? getThemeStroke());
     textElement.setAttribute("font-size", textSize);
     textElement.setAttribute("font-family", textFont);
     textElement.setAttribute("text-anchor", textAlignElement);
     textElement.setAttribute("cursor", "default");
     textElement.setAttribute("white-space", "pre");
     textElement.setAttribute("dominant-baseline", "hanging");
+    // Issue #34 bug #5b: SVG <text> only fires pointer events on the
+    // painted glyphs by default — so a click between letters or in the
+    // padding around the text never bubbles to the <g> and the selection
+    // tool can't pick the shape up. `bounding-box` extends the hit area
+    // to the entire bounding box (SVG 2; supported in Chromium/WebKit/
+    // Firefox), which is what every other shape tool relies on.
+    textElement.setAttribute("pointer-events", "bounding-box");
     textElement.textContent = "";
 
     gElement.setAttribute("data-x", x);
     gElement.setAttribute("data-y", y);
     textElement.setAttribute("data-initial-size", textSize);
     textElement.setAttribute("data-initial-font", textFont);
-    textElement.setAttribute("data-initial-color", textColor);
+    textElement.setAttribute("data-initial-color", textColor ?? getThemeStroke());
     textElement.setAttribute("data-initial-align", textAlign);
     textElement.setAttribute("data-type", "text");
     gElement.appendChild(textElement);
@@ -247,7 +256,12 @@ function makeTextEditable(textElement, groupElement) {
     input.style.lineHeight = "1.2em";
     input.style.textAlign = currentAnchor === "middle" ? "center" : currentAnchor === "end" ? "right" : "left";
     input.style.backgroundColor = "transparent";
-    input.style.border = "none";
+    // Issue #34 bug #5a: dashed creation outline that grows with the
+    // text — same visual cue the frame tool uses while drawing. Inset
+    // padding-box border so the dashes follow the textarea size as the
+    // user types instead of clipping behind the glyphs.
+    input.style.border = "1px dashed rgba(255,255,255,0.55)";
+    input.style.borderRadius = "3px";
     input.style.outline = "none";
     document.body.appendChild(input);
 
@@ -1001,11 +1015,14 @@ const handleMouseUp = (event) => {
                 rotation: extractRotationFromTransform(selectedElement) || 0,
                 parentFrame: draggedShapeInitialFrameText
             };
+            // Issue #34 bug #2: hoveredFrameText is the actual destination
+            // tracked during drag — textShape.parentFrame is still the OLD
+            // frame at this point.
             const newPosWithFrame = {
                 x: finalTranslateX,
                 y: finalTranslateY,
                 rotation: extractRotationFromTransform(selectedElement) || 0,
-                parentFrame: textShape ? textShape.parentFrame : null
+                parentFrame: hoveredFrameText || null,
             };
 
             const stateChanged = initialX !== finalTranslateX || initialY !== finalTranslateY;
@@ -1837,4 +1854,4 @@ window.__setCodeLanguage = function(lang) {
     }
 };
 
-export { handleTextMouseDown, handleTextMouseMove, handleTextMouseUp, updateCodeToggleForShape, deselectElement as deselectTextElement, enterEditMode };
+export { handleTextMouseDown, handleTextMouseMove, handleTextMouseUp, updateCodeToggleForShape, deselectElement as deselectTextElement, enterEditMode };

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());
+}