@bendyline/squisq-editor-react 1.5.3 → 1.6.0

package/src/imageEditor/CanvasSurface.tsx

@@ -7,13 +7,16 @@
  * selection / drag / resize gestures (select tool) or as a crop-rect
  * gesture (crop tool).
  *
- * Layer rendering uses small purpose-built renderers in `./layers/`,
- * not the heavier `@bendyline/squisq-react` layer components — the
- * editor doesn't need media-context lookup, animation, or
- * blockTime-driven reflow.
+ * Layer rendering uses small purpose-built renderers in `./layers/` for
+ * image / text / shape, which don't need media-context lookup, animation,
+ * or blockTime-driven reflow. `path` layers (the full drawing-shape
+ * vocabulary) reuse the shared `@bendyline/squisq-react` `PathLayer` so the
+ * image editor draws named shapes with exactly the same code as drawings —
+ * the canvas is the viewport and `blockTime` is 0 (no animation).
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { PathLayer } from '@bendyline/squisq-react';
 import type { ImageEditDoc, ImageEditLayer } from '@bendyline/squisq/schemas';
 import type { CanvasRect, ImageEditorAction, ImageEditorTool } from './state.js';
 import { EditorImageLayer } from './layers/EditorImageLayer.js';
@@ -29,10 +32,31 @@ export interface CanvasSurfaceProps {
   dispatch: (action: ImageEditorAction) => void;
   /** When the text tool drops a new layer at a given canvas point. */
   onCreateTextAt?: (x: number, y: number) => void;
-  /** When the shape tool drops a new layer at a given canvas point. */
+  /** When the shape tool drops a new layer at a given canvas point (click placement). */
   onCreateShapeAt?: (x: number, y: number) => void;
+  /**
+   * When the shape tool finishes a drag gesture (drag-to-draw placement).
+   * Only called when `shapeDragDraw` is true and the drag exceeds the minimum distance.
+   */
+  onCreateShapeFromPoints?: (x1: number, y1: number, x2: number, y2: number) => void;
+  /**
+   * When true the shape tool uses drag-to-draw instead of click-to-place.
+   * Set by the host when the active shape kind is line-based (line, arrow, etc.).
+   */
+  shapeDragDraw?: boolean;
   /** Background fill behind the canvas (the editor "paper"). */
   workspaceBackground?: string;
+  /** Current zoom level (1 = 100% = 1:1 pixels). */
+  zoom?: number;
+  /** Called when a zoom-rect drag or other gesture wants to change zoom. */
+  onSetZoom?: (zoom: number) => void;
+  /** Ref forwarded to the outer scrollable surface div so the host can read its size and scroll position. */
+  surfaceRef?: React.RefObject<HTMLDivElement>;
+  /**
+   * When set, immediately enters inline text editing for this layer ID.
+   * Used by the host to trigger editing after creating a new text layer.
+   */
+  requestEditLayerId?: string | null;
 }
 
 interface DragState {
@@ -50,6 +74,13 @@ interface CropDragState {
   currentY: number;
 }
 
+interface ShapeLineDragState {
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+}
+
 export function CanvasSurface({
   doc,
   selectedLayerId,
@@ -58,12 +89,24 @@ export function CanvasSurface({
   dispatch,
   onCreateTextAt,
   onCreateShapeAt,
+  onCreateShapeFromPoints,
+  shapeDragDraw,
   workspaceBackground,
+  zoom = 1,
+  onSetZoom,
+  surfaceRef,
+  requestEditLayerId,
 }: CanvasSurfaceProps) {
   const svgRef = useRef<SVGSVGElement | null>(null);
   const dragRef = useRef<DragState | null>(null);
   const [, forceRender] = useState(0);
   const [cropDrag, setCropDrag] = useState<CropDragState | null>(null);
+  const [shapeLineDrag, setShapeLineDrag] = useState<ShapeLineDragState | null>(null);
+  const internalWrapRef = useRef<HTMLDivElement | null>(null);
+  const pendingScrollRef = useRef<{ left: number; top: number } | null>(null);
+  const [zoomDrag, setZoomDrag] = useState<CropDragState | null>(null); // reuse CropDragState shape
+  const [editingLayerId, setEditingLayerId] = useState<string | null>(null);
+  const editTextareaRef = useRef<HTMLTextAreaElement>(null);
 
   /** Convert client-space coordinates to canvas coordinates. */
   const toCanvas = useCallback(
@@ -78,6 +121,45 @@ export function CanvasSurface({
     [doc.canvas.width, doc.canvas.height],
   );
 
+  // After zoom changes, apply any pending scroll (set by zoom-rect commit).
+  useLayoutEffect(() => {
+    const pending = pendingScrollRef.current;
+    if (pending && internalWrapRef.current) {
+      pendingScrollRef.current = null;
+      internalWrapRef.current.scrollLeft = pending.left;
+      internalWrapRef.current.scrollTop = pending.top;
+    }
+  }, [zoom]);
+
+  // Helper: assign both internal and external ref
+  const setWrapRefCallback = useCallback(
+    (el: HTMLDivElement | null) => {
+      internalWrapRef.current = el;
+      if (surfaceRef) {
+        (surfaceRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      }
+    },
+    [surfaceRef],
+  );
+
+  // Enter editing when the host requests it (e.g. after creating a new text layer).
+  useEffect(() => {
+    if (requestEditLayerId) setEditingLayerId(requestEditLayerId);
+  }, [requestEditLayerId]);
+
+  // Exit editing when a different layer is selected externally.
+  useEffect(() => {
+    if (editingLayerId && selectedLayerId !== editingLayerId) setEditingLayerId(null);
+  }, [selectedLayerId, editingLayerId]);
+
+  // Auto-focus the inline textarea whenever we enter editing mode.
+  useLayoutEffect(() => {
+    if (editingLayerId && editTextareaRef.current) {
+      editTextareaRef.current.focus();
+      editTextareaRef.current.select();
+    }
+  }, [editingLayerId]);
+
   // ── Pointer handlers ───────────────────────────────────────────────────
   const onPointerDownLayer = useCallback(
     (e: React.PointerEvent<SVGGElement>, layer: ImageEditLayer) => {
@@ -124,6 +206,13 @@ export function CanvasSurface({
       const pt = toCanvas(e.clientX, e.clientY);
       if (tool === 'select') {
         dispatch({ type: 'select', layerId: null });
+        setEditingLayerId(null);
+        return;
+      }
+      if (tool === 'zoom-rect') {
+        e.preventDefault();
+        setZoomDrag({ startCanvasX: pt.x, startCanvasY: pt.y, currentX: pt.x, currentY: pt.y });
+        (e.target as Element).setPointerCapture?.(e.pointerId);
         return;
       }
       if (tool === 'crop') {
@@ -137,10 +226,16 @@ export function CanvasSurface({
         return;
       }
       if (tool === 'shape') {
-        onCreateShapeAt?.(pt.x, pt.y);
+        if (shapeDragDraw) {
+          e.preventDefault();
+          setShapeLineDrag({ startX: pt.x, startY: pt.y, currentX: pt.x, currentY: pt.y });
+          (e.target as Element).setPointerCapture?.(e.pointerId);
+        } else {
+          onCreateShapeAt?.(pt.x, pt.y);
+        }
       }
     },
-    [tool, dispatch, toCanvas, onCreateTextAt, onCreateShapeAt],
+    [tool, dispatch, toCanvas, onCreateTextAt, onCreateShapeAt, shapeDragDraw],
   );
 
   useEffect(() => {
@@ -165,6 +260,16 @@ export function CanvasSurface({
         });
         return;
       }
+      if (shapeLineDrag) {
+        const pt = toCanvas(e.clientX, e.clientY);
+        setShapeLineDrag((prev) => (prev ? { ...prev, currentX: pt.x, currentY: pt.y } : prev));
+        return;
+      }
+      if (zoomDrag) {
+        const pt = toCanvas(e.clientX, e.clientY);
+        setZoomDrag((prev) => (prev ? { ...prev, currentX: pt.x, currentY: pt.y } : prev));
+        return;
+      }
       if (cropDrag) {
         const pt = toCanvas(e.clientX, e.clientY);
         setCropDrag((prev) => (prev ? { ...prev, currentX: pt.x, currentY: pt.y } : prev));
@@ -175,6 +280,46 @@ export function CanvasSurface({
         dragRef.current = null;
         forceRender((n) => n + 1);
       }
+      if (shapeLineDrag) {
+        const dist = Math.hypot(
+          shapeLineDrag.currentX - shapeLineDrag.startX,
+          shapeLineDrag.currentY - shapeLineDrag.startY,
+        );
+        if (dist >= 4 && onCreateShapeFromPoints) {
+          onCreateShapeFromPoints(
+            shapeLineDrag.startX,
+            shapeLineDrag.startY,
+            shapeLineDrag.currentX,
+            shapeLineDrag.currentY,
+          );
+        } else {
+          // Too short to be a drag — fall back to fixed-size placement.
+          onCreateShapeAt?.(shapeLineDrag.startX, shapeLineDrag.startY);
+        }
+        setShapeLineDrag(null);
+      }
+      if (zoomDrag) {
+        const rectW = Math.abs(zoomDrag.currentX - zoomDrag.startCanvasX);
+        const rectH = Math.abs(zoomDrag.currentY - zoomDrag.startCanvasY);
+        if (rectW >= 10 && rectH >= 10 && onSetZoom && internalWrapRef.current) {
+          const wrap = internalWrapRef.current;
+          const viewportW = wrap.clientWidth - 32;
+          const viewportH = wrap.clientHeight - 32;
+          const newZoom = Math.max(
+            0.0625,
+            Math.min(16, Math.min(viewportW / rectW, viewportH / rectH)),
+          );
+          const cx = Math.min(zoomDrag.startCanvasX, zoomDrag.currentX) + rectW / 2;
+          const cy = Math.min(zoomDrag.startCanvasY, zoomDrag.currentY) + rectH / 2;
+          pendingScrollRef.current = {
+            left: cx * newZoom - wrap.clientWidth / 2 + 16,
+            top: cy * newZoom - wrap.clientHeight / 2 + 16,
+          };
+          onSetZoom(newZoom);
+          dispatch({ type: 'set-tool', tool: 'select' });
+        }
+        setZoomDrag(null);
+      }
       if (cropDrag) {
         const rect = normalizeCropRect(cropDrag);
         if (rect.width >= 8 && rect.height >= 8) {
@@ -190,7 +335,16 @@ export function CanvasSurface({
       window.removeEventListener('pointermove', onMove);
       window.removeEventListener('pointerup', onUp);
     };
-  }, [toCanvas, dispatch, cropDrag]);
+  }, [
+    toCanvas,
+    dispatch,
+    cropDrag,
+    shapeLineDrag,
+    zoomDrag,
+    onSetZoom,
+    onCreateShapeFromPoints,
+    onCreateShapeAt,
+  ]);
 
   // ── Render ─────────────────────────────────────────────────────────────
   const selectedLayer = selectedLayerId
@@ -202,95 +356,236 @@ export function CanvasSurface({
       ? measureTextLayerBox(selectedLayer, selectedBox!)
       : selectedBox;
 
+  // Expand the selection box outward so the dashed outline clears the layer's own stroke.
+  // Padding = half-stroke (so the outline sits just past the stroke edge) + a proportional
+  // visual buffer that stays consistent in screen-space across different canvas sizes.
+  const paddedSelectionBox = (() => {
+    if (!selectionBox || !selectedLayer) return null;
+    const sw =
+      selectedLayer.type === 'shape' || selectedLayer.type === 'path'
+        ? (((selectedLayer.content as Record<string, unknown>)['strokeWidth'] as
+            | number
+            | undefined) ?? 0)
+        : 0;
+    const strokeHalf = sw / 2;
+    const proportional = Math.max(doc.canvas.width, doc.canvas.height) * 0.007;
+    const p = Math.ceil(strokeHalf + proportional);
+    return {
+      x: selectionBox.x - p,
+      y: selectionBox.y - p,
+      width: selectionBox.width + p * 2,
+      height: selectionBox.height + p * 2,
+    };
+  })();
+
   return (
     <div
+      ref={setWrapRefCallback}
       className="squisq-image-editor-surface"
       style={{ background: workspaceBackground ?? '#1f1f24' }}
     >
-      <svg
-        ref={svgRef}
-        viewBox={`0 0 ${doc.canvas.width} ${doc.canvas.height}`}
-        preserveAspectRatio="xMidYMid meet"
-        className={`squisq-image-editor-canvas squisq-image-editor-canvas--tool-${tool}`}
-        onPointerDown={onPointerDownEmpty}
-      >
-        {/* Canvas background */}
-        <rect
-          x={0}
-          y={0}
-          width={doc.canvas.width}
-          height={doc.canvas.height}
-          fill={
-            doc.canvas.background && doc.canvas.background !== 'transparent'
-              ? doc.canvas.background
-              : 'url(#squisq-image-editor-checker)'
-          }
-        />
-        <defs>
-          <pattern
-            id="squisq-image-editor-checker"
-            width="16"
-            height="16"
-            patternUnits="userSpaceOnUse"
-          >
-            <rect width="16" height="16" fill="#f0f0f0" />
-            <rect width="8" height="8" fill="#d0d0d0" />
-            <rect x="8" y="8" width="8" height="8" fill="#d0d0d0" />
-          </pattern>
-        </defs>
-
-        {/* Layers, back-to-front */}
-        {doc.layers.map((layer) => {
-          if (layer.visible === false) return null;
-          const onPointerDown = (e: React.PointerEvent<SVGGElement>) =>
-            onPointerDownLayer(e, layer);
-          const opacity = layer.opacity ?? 1;
-          return (
-            <g
-              key={layer.id}
-              data-layer-id={layer.id}
-              opacity={opacity}
-              style={{ cursor: tool === 'select' && !layer.locked ? 'move' : undefined }}
-              onPointerDown={onPointerDown}
+      <div className="squisq-image-editor-canvas-wrap">
+        <svg
+          ref={svgRef}
+          viewBox={`0 0 ${doc.canvas.width} ${doc.canvas.height}`}
+          width={Math.round(doc.canvas.width * zoom)}
+          height={Math.round(doc.canvas.height * zoom)}
+          className={`squisq-image-editor-canvas squisq-image-editor-canvas--tool-${tool}`}
+          onPointerDown={onPointerDownEmpty}
+        >
+          {/* Canvas background */}
+          <rect
+            x={0}
+            y={0}
+            width={doc.canvas.width}
+            height={doc.canvas.height}
+            fill={
+              doc.canvas.background && doc.canvas.background !== 'transparent'
+                ? doc.canvas.background
+                : 'url(#squisq-image-editor-checker)'
+            }
+          />
+          <defs>
+            <pattern
+              id="squisq-image-editor-checker"
+              width="16"
+              height="16"
+              patternUnits="userSpaceOnUse"
             >
-              {layer.type === 'image' && (
-                <EditorImageLayer
-                  layer={layer}
-                  canvas={doc.canvas}
-                  resolveAssetUrl={resolveAssetUrl}
-                />
-              )}
-              {layer.type === 'text' && <EditorTextLayer layer={layer} canvas={doc.canvas} />}
-              {layer.type === 'shape' && <EditorShapeLayer layer={layer} canvas={doc.canvas} />}
-            </g>
-          );
-        })}
-
-        {/* Selection handles */}
-        {selectedLayer && selectionBox && tool === 'select' && !selectedLayer.locked && (
-          <SelectionHandles box={selectionBox} onHandlePointerDown={onPointerDownHandle} />
-        )}
+              <rect width="16" height="16" fill="#f0f0f0" />
+              <rect width="8" height="8" fill="#d0d0d0" />
+              <rect x="8" y="8" width="8" height="8" fill="#d0d0d0" />
+            </pattern>
+          </defs>
 
-        {/* Crop rectangle preview */}
-        {cropDrag &&
-          (() => {
-            const r = normalizeCropRect(cropDrag);
+          {/* Layers, back-to-front */}
+          {doc.layers.map((layer) => {
+            if (layer.visible === false) return null;
+            const onPointerDown = (e: React.PointerEvent<SVGGElement>) =>
+              onPointerDownLayer(e, layer);
+            const onDoubleClick =
+              layer.type === 'text'
+                ? (e: React.MouseEvent<SVGGElement>) => {
+                    e.stopPropagation();
+                    dispatch({ type: 'select', layerId: layer.id });
+                    setEditingLayerId(layer.id);
+                  }
+                : undefined;
+            const opacity = layer.opacity ?? 1;
+            const isEditing = editingLayerId === layer.id;
             return (
-              <g pointerEvents="none">
-                <rect
-                  x={r.x}
-                  y={r.y}
-                  width={r.width}
-                  height={r.height}
-                  fill="rgba(255,255,255,0.05)"
-                  stroke="#39f"
-                  strokeWidth={2}
-                  strokeDasharray="6 4"
-                />
+              <g
+                key={layer.id}
+                data-layer-id={layer.id}
+                opacity={opacity}
+                visibility={isEditing ? 'hidden' : undefined}
+                pointerEvents={isEditing ? 'none' : undefined}
+                style={{ cursor: tool === 'select' && !layer.locked ? 'move' : undefined }}
+                onPointerDown={isEditing ? undefined : onPointerDown}
+                onDoubleClick={onDoubleClick}
+              >
+                {layer.type === 'image' && (
+                  <EditorImageLayer
+                    layer={layer}
+                    canvas={doc.canvas}
+                    resolveAssetUrl={resolveAssetUrl}
+                  />
+                )}
+                {layer.type === 'text' && <EditorTextLayer layer={layer} canvas={doc.canvas} />}
+                {layer.type === 'shape' && <EditorShapeLayer layer={layer} canvas={doc.canvas} />}
+                {layer.type === 'path' && (
+                  <PathLayer layer={layer} viewport={doc.canvas} blockTime={0} />
+                )}
               </g>
             );
-          })()}
-      </svg>
+          })}
+
+          {/* Selection handles */}
+          {selectedLayer && paddedSelectionBox && tool === 'select' && !selectedLayer.locked && (
+            <SelectionHandles box={paddedSelectionBox} onHandlePointerDown={onPointerDownHandle} />
+          )}
+
+          {/* Inline text editor — foreignObject overlays the hidden text layer */}
+          {editingLayerId &&
+            (() => {
+              const editLayer = doc.layers.find((l) => l.id === editingLayerId);
+              if (!editLayer || editLayer.type !== 'text') return null;
+              const pos = layerBox(editLayer, doc);
+              const s = (editLayer as ImageEditLayer & { type: 'text' }).content;
+              // Give generous height so text can grow without being clipped.
+              const foHeight = Math.max(pos.height * 4, 200);
+              return (
+                <foreignObject
+                  key={`inline-edit-${editingLayerId}`}
+                  x={pos.x}
+                  y={pos.y}
+                  width={pos.width}
+                  height={foHeight}
+                  style={{ overflow: 'visible' }}
+                >
+                  <textarea
+                    ref={editTextareaRef}
+                    value={s.text}
+                    onChange={(e) => {
+                      dispatch({
+                        type: 'update-layer',
+                        layerId: editingLayerId,
+                        patch: {
+                          content: { ...s, text: e.target.value },
+                        } as Partial<ImageEditLayer>,
+                      });
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Escape') {
+                        e.preventDefault();
+                        setEditingLayerId(null);
+                      }
+                    }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onClick={(e) => e.stopPropagation()}
+                    style={{
+                      display: 'block',
+                      width: '100%',
+                      padding: 0,
+                      margin: 0,
+                      border: 'none',
+                      outline: '2px dashed rgba(59,130,246,0.8)',
+                      outlineOffset: '2px',
+                      resize: 'none',
+                      background: 'transparent',
+                      fontFamily: s.style.fontFamily ?? 'sans-serif',
+                      // font-size in CSS pixels must be scaled by zoom because foreignObject
+                      // content renders in screen pixels, not SVG user-space pixels.
+                      fontSize: `${s.style.fontSize * zoom}px`,
+                      fontWeight: s.style.fontWeight ?? 'normal',
+                      color: s.style.color,
+                      textAlign: (s.style.textAlign ?? 'left') as 'left' | 'center' | 'right',
+                      lineHeight: s.style.lineHeight ?? 1.4,
+                      caretColor: s.style.color,
+                      overflow: 'hidden',
+                      boxSizing: 'border-box',
+                    }}
+                  />
+                </foreignObject>
+              );
+            })()}
+
+          {/* Shape drag-to-draw preview */}
+          {shapeLineDrag && (
+            <line
+              x1={shapeLineDrag.startX}
+              y1={shapeLineDrag.startY}
+              x2={shapeLineDrag.currentX}
+              y2={shapeLineDrag.currentY}
+              stroke="#39f"
+              strokeWidth={2}
+              strokeDasharray="6 4"
+              pointerEvents="none"
+            />
+          )}
+
+          {/* Zoom-rect drag preview */}
+          {zoomDrag &&
+            (() => {
+              const r = normalizeCropRect(zoomDrag);
+              return (
+                <g pointerEvents="none">
+                  <rect
+                    x={r.x}
+                    y={r.y}
+                    width={r.width}
+                    height={r.height}
+                    fill="rgba(255,200,0,0.08)"
+                    stroke="#f90"
+                    strokeWidth={2}
+                    strokeDasharray="6 4"
+                    vectorEffect="non-scaling-stroke"
+                  />
+                </g>
+              );
+            })()}
+
+          {/* Crop rectangle preview */}
+          {cropDrag &&
+            (() => {
+              const r = normalizeCropRect(cropDrag);
+              return (
+                <g pointerEvents="none">
+                  <rect
+                    x={r.x}
+                    y={r.y}
+                    width={r.width}
+                    height={r.height}
+                    fill="rgba(255,255,255,0.05)"
+                    stroke="#39f"
+                    strokeWidth={2}
+                    strokeDasharray="6 4"
+                  />
+                </g>
+              );
+            })()}
+        </svg>
+      </div>
     </div>
   );
 }

package/src/imageEditor/PropertiesPanel.tsx

@@ -24,7 +24,7 @@ export function PropertiesPanel({ doc, selectedLayerId, dispatch }: PropertiesPa
       <div className="squisq-image-editor-panel-header">Properties</div>
       <CanvasSection doc={doc} dispatch={dispatch} />
       {selected ? (
-        <LayerSection layer={selected} dispatch={dispatch} />
+        <LayerSection key={selected.id} layer={selected} dispatch={dispatch} />
       ) : (
         <div className="squisq-image-editor-properties-empty">No layer selected</div>
       )}
@@ -105,6 +105,7 @@ function LayerSection({
       {layer.type === 'image' && <ImageFields layer={layer} update={update} />}
       {layer.type === 'text' && <TextFields layer={layer} update={update} />}
       {layer.type === 'shape' && <ShapeFields layer={layer} update={update} />}
+      {layer.type === 'path' && <PathFields layer={layer} update={update} />}
     </>
   );
 }
@@ -273,6 +274,51 @@ function ShapeFields({
   );
 }
 
+function PathFields({
+  layer,
+  update,
+}: {
+  layer: ImageEditLayer & { type: 'path' };
+  update: (patch: Partial<ImageEditLayer>) => void;
+}) {
+  const c = layer.content;
+  const setContent = (patch: Partial<typeof c>) =>
+    update({ content: { ...c, ...patch } } as Partial<ImageEditLayer>);
+  // Named shapes (shapeKind) carry their geometry; plain paths/arrows don't.
+  const kindLabel = c.shapeKind
+    ? c.shapeKind.replace(/-/g, ' ')
+    : c.endMarker || c.startMarker
+      ? 'arrow'
+      : 'path';
+  return (
+    <fieldset className="squisq-image-editor-fieldset">
+      <legend>Shape</legend>
+      <div className="squisq-image-editor-field">
+        <span>Kind</span>
+        <span className="squisq-image-editor-readonly-value">{kindLabel}</span>
+      </div>
+      <ColorField
+        label="Fill"
+        value={c.fill ?? 'none'}
+        allowTransparent
+        onChange={(fill) => setContent({ fill })}
+      />
+      <ColorField
+        label="Stroke"
+        value={c.stroke ?? '#000000'}
+        allowTransparent
+        onChange={(stroke) => setContent({ stroke })}
+      />
+      <NumberField
+        label="Stroke width"
+        value={c.strokeWidth ?? 0}
+        min={0}
+        onChange={(strokeWidth) => setContent({ strokeWidth })}
+      />
+    </fieldset>
+  );
+}
+
 // ============================================
 // Field primitives
 // ============================================