@bendyline/squisq-editor-react 1.5.2 → 1.6.0

package/src/imageEditor/Toolbar.tsx

@@ -8,10 +8,13 @@ import { useRef, useState, useEffect } from 'react';
 import type { ImageEditDoc } from '@bendyline/squisq/schemas';
 import type { ImageEditorAction, ImageEditorTool } from './state.js';
 import { CropIcon, CursorIcon, PlusIcon, ShapeIcon, TextIcon } from './icons.js';
+import { ShapePalette } from '../scene/ShapePalette.js';
 
 export interface ToolbarProps {
   doc: ImageEditDoc;
   tool: ImageEditorTool;
+  /** The currently armed shape palette kind. Used to highlight active redline shortcuts. */
+  shapeKind?: string;
   dispatch: (a: ImageEditorAction) => void;
   /** Upload an image asset and return its sidecar-relative path. */
   uploadAsset: (file: Blob, suggestedName?: string) => Promise<string>;
@@ -29,8 +32,98 @@ export interface ToolbarProps {
    * mount the version-history dropdown when versioning is enabled.
    */
   extraTools?: React.ReactNode;
+  /** Current zoom level (1 = 100%). */
+  zoom?: number;
+  onZoomIn?: () => void;
+  onZoomOut?: () => void;
+  onZoomSet?: (zoom: number) => void;
+  onZoomFit?: () => void;
+  onZoom1to1?: () => void;
 }
 
+function RedlineArrowIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+      <line
+        x1="3"
+        y1="12"
+        x2="12"
+        y2="3"
+        stroke="#cc0000"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+      <polyline
+        points="7,3 12,3 12,8"
+        stroke="#cc0000"
+        strokeWidth="1.8"
+        strokeLinejoin="round"
+        strokeLinecap="round"
+        fill="none"
+      />
+    </svg>
+  );
+}
+
+function RedlineRectIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+      <rect x="1.5" y="3" width="12" height="9" stroke="#cc0000" strokeWidth="1.8" rx="0.5" />
+    </svg>
+  );
+}
+
+function RedlineTextIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" aria-hidden="true">
+      <text x="1.5" y="13" fill="#cc0000" fontSize="13" fontFamily="sans-serif" fontWeight="bold">
+        A
+      </text>
+    </svg>
+  );
+}
+
+function ZoomRectIcon() {
+  return (
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+      <circle cx="6" cy="6" r="4.5" stroke="currentColor" strokeWidth="1.5" />
+      <line
+        x1="9.5"
+        y1="9.5"
+        x2="13.5"
+        y2="13.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <line
+        x1="4"
+        y1="6"
+        x2="8"
+        y2="6"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+      <line
+        x1="6"
+        y1="4"
+        x2="6"
+        y2="8"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+const REDLINE_TOOLS: Array<{ kind: string; icon: React.ReactNode; title: string }> = [
+  { kind: 'redline-arrow', icon: <RedlineArrowIcon />, title: 'Redline arrow' },
+  { kind: 'redline-rect', icon: <RedlineRectIcon />, title: 'Redline rectangle' },
+  { kind: 'redline-text', icon: <RedlineTextIcon />, title: 'Redline text' },
+];
+
 const TOOLS: Array<{
   id: ImageEditorTool;
   icon: React.ReactNode;
@@ -40,11 +133,13 @@ const TOOLS: Array<{
   { id: 'text', icon: <TextIcon />, title: 'Add text (T)' },
   { id: 'shape', icon: <ShapeIcon />, title: 'Add shape (S)' },
   { id: 'crop', icon: <CropIcon />, title: 'Crop (C)' },
+  { id: 'zoom-rect', icon: <ZoomRectIcon />, title: 'Zoom to rectangle (Z)' },
 ];
 
 export function Toolbar({
   doc,
   tool,
+  shapeKind,
   dispatch,
   uploadAsset,
   onExport,
@@ -52,8 +147,15 @@ export function Toolbar({
   saveLabel = 'Save',
   saveTitle = 'Save state.json',
   extraTools,
+  zoom,
+  onZoomIn,
+  onZoomOut,
+  onZoomSet,
+  onZoomFit,
+  onZoom1to1,
 }: ToolbarProps) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [shapePaletteOpen, setShapePaletteOpen] = useState(false);
 
   const onFilePicked = async (file: File) => {
     try {
@@ -87,22 +189,79 @@ export function Toolbar({
   return (
     <div className="squisq-image-editor-toolbar" data-testid="image-editor-toolbar">
       <div className="squisq-image-editor-tool-group" role="radiogroup" aria-label="Tools">
-        {TOOLS.map((t) => (
-          <button
-            key={t.id}
-            type="button"
-            role="radio"
-            aria-checked={tool === t.id}
-            className={['squisq-image-editor-tool-button', tool === t.id ? 'is-active' : '']
-              .filter(Boolean)
-              .join(' ')}
-            onClick={() => dispatch({ type: 'set-tool', tool: t.id })}
-            title={t.title}
-            aria-label={t.title}
-          >
-            {t.icon}
-          </button>
-        ))}
+        {TOOLS.map((t) => {
+          const button = (
+            <button
+              key={t.id}
+              type="button"
+              role="radio"
+              aria-checked={tool === t.id}
+              className={['squisq-image-editor-tool-button', tool === t.id ? 'is-active' : '']
+                .filter(Boolean)
+                .join(' ')}
+              onClick={() => {
+                if (t.id === 'shape') {
+                  // The Shape tool owns a palette popover: clicking it both
+                  // arms the shape tool and toggles the palette so the user
+                  // can choose which shape to drop next.
+                  dispatch({ type: 'set-tool', tool: 'shape' });
+                  setShapePaletteOpen((o) => !o);
+                  return;
+                }
+                setShapePaletteOpen(false);
+                dispatch({ type: 'set-tool', tool: t.id });
+              }}
+              title={t.title}
+              aria-label={t.title}
+              aria-haspopup={t.id === 'shape' ? 'dialog' : undefined}
+              aria-expanded={t.id === 'shape' ? shapePaletteOpen : undefined}
+            >
+              {t.icon}
+            </button>
+          );
+          if (t.id !== 'shape') return button;
+          return (
+            <span key={t.id} className="squisq-image-editor-shape-trigger">
+              {button}
+              {shapePaletteOpen && (
+                <ShapePalette
+                  ignoreOutsideSelector=".squisq-image-editor-toolbar"
+                  onPick={(kind) => {
+                    dispatch({ type: 'set-shape-kind', kind });
+                    dispatch({ type: 'set-tool', tool: 'shape' });
+                    setShapePaletteOpen(false);
+                  }}
+                  onClose={() => setShapePaletteOpen(false)}
+                />
+              )}
+            </span>
+          );
+        })}
+      </div>
+
+      <div className="squisq-image-editor-tool-group" role="group" aria-label="Redline shortcuts">
+        {REDLINE_TOOLS.map((rt) => {
+          const active = tool === 'shape' && shapeKind === rt.kind;
+          return (
+            <button
+              key={rt.kind}
+              type="button"
+              className={['squisq-image-editor-tool-button', active ? 'is-active' : '']
+                .filter(Boolean)
+                .join(' ')}
+              onClick={() => {
+                dispatch({ type: 'set-shape-kind', kind: rt.kind });
+                dispatch({ type: 'set-tool', tool: 'shape' });
+                setShapePaletteOpen(false);
+              }}
+              title={rt.title}
+              aria-label={rt.title}
+              aria-pressed={active}
+            >
+              {rt.icon}
+            </button>
+          );
+        })}
       </div>
 
       <div className="squisq-image-editor-tool-group">
@@ -129,6 +288,60 @@ export function Toolbar({
         />
       </div>
 
+      {(onZoomIn || onZoomOut) && (
+        <div className="squisq-image-editor-tool-group squisq-image-editor-tool-group--zoom">
+          <button
+            type="button"
+            className="squisq-image-editor-tool-button"
+            onClick={onZoomOut}
+            title="Zoom out"
+            aria-label="Zoom out"
+          >
+            −
+          </button>
+          <input
+            type="number"
+            className="squisq-image-editor-zoom-input"
+            value={Math.round((zoom ?? 1) * 100)}
+            min={6}
+            max={1600}
+            step={1}
+            onChange={(e) => {
+              const v = parseInt(e.target.value, 10);
+              if (!isNaN(v) && v > 0) onZoomSet?.(v / 100);
+            }}
+            aria-label="Zoom percentage"
+            title="Zoom %"
+          />
+          <span className="squisq-image-editor-zoom-label">%</span>
+          <button
+            type="button"
+            className="squisq-image-editor-tool-button"
+            onClick={onZoomIn}
+            title="Zoom in"
+            aria-label="Zoom in"
+          >
+            +
+          </button>
+          <button
+            type="button"
+            className="squisq-image-editor-tool-button squisq-image-editor-tool-button--with-label"
+            onClick={onZoom1to1}
+            title="1:1 pixels"
+          >
+            1:1
+          </button>
+          <button
+            type="button"
+            className="squisq-image-editor-tool-button squisq-image-editor-tool-button--with-label"
+            onClick={onZoomFit}
+            title="Fit to window"
+          >
+            Fit
+          </button>
+        </div>
+      )}
+
       <div className="squisq-image-editor-tool-group squisq-image-editor-tool-group--right">
         {extraTools}
         {onSave && (

package/src/imageEditor/createShapeLayer.ts

@@ -0,0 +1,280 @@
+/**
+ * createShapeLayer — turn a drawing-palette shape `kind` and a canvas drop
+ * point into a new {@link ImageEditLayerInput}.
+ *
+ * The mapping mirrors the drawing editor's `shapeToLayers`: the native
+ * primitives (`rectangle`/`circle`/`line`) become a core `ShapeLayer`,
+ * `text` becomes a `TextLayer`, the line `arrow` becomes a `PathLayer` with
+ * an arrowhead marker, and every other kind (polygons, stars, block arrows,
+ * curved shapes) becomes a `PathLayer` carrying `shapeKind` so the shared
+ * `PathLayer` renderer re-derives the geometry from the position box on
+ * move/resize — exactly like drawings.
+ */
+
+import { shapePath } from '@bendyline/squisq/doc';
+import type { ImageEditLayerInput } from './state.js';
+
+/** Default shape footprint, centered on the drop point. */
+const DEFAULT_WIDTH = 120;
+const DEFAULT_HEIGHT = 80;
+const DEFAULT_FILL = '#3399ff';
+const DEFAULT_STROKE = '#1a4d80';
+const DEFAULT_STROKE_WIDTH = 2;
+
+/** Redline annotation color (engineering review red). */
+const REDLINE_COLOR = '#cc0000';
+const REDLINE_STROKE_WIDTH = 15;
+
+/** Kinds that are drawn by dragging start→end (or corner A→corner B) rather than clicking to drop. */
+const LINEAR_KINDS = new Set(['line', 'arrow', 'redline-arrow', 'redline-rect']);
+
+export function isLinearShapeKind(kind: string): boolean {
+  return LINEAR_KINDS.has(kind);
+}
+
+/** Native `ShapeLayer` primitive kinds (the rest compile to a `PathLayer`). */
+const NATIVE: Record<string, 'rect' | 'circle' | 'line'> = {
+  rectangle: 'rect',
+  circle: 'circle',
+  line: 'line',
+};
+
+export function createShapeLayer(kind: string, x: number, y: number): ImageEditLayerInput {
+  const width = DEFAULT_WIDTH;
+  const height = DEFAULT_HEIGHT;
+  const px = Math.round(x - width / 2);
+  const py = Math.round(y - height / 2);
+  const position = { x: px, y: py, width, height };
+  const name = prettifyKind(kind);
+
+  if (kind === 'text') {
+    return {
+      type: 'text',
+      name: 'Text',
+      position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
+      content: {
+        text: 'New text',
+        style: { fontSize: 32, color: '#111111', fontFamily: 'sans-serif' },
+      },
+    };
+  }
+
+  // ── Redline shortcuts ──────────────────────────────────────────────────────
+  if (kind === 'redline-arrow') {
+    return {
+      type: 'path',
+      name: 'Redline Arrow',
+      position,
+      content: {
+        d: `M ${px} ${py} L ${px + width} ${py + height}`,
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        fill: 'none',
+        endMarker: 'arrow',
+      },
+    };
+  }
+  if (kind === 'redline-rect') {
+    return {
+      type: 'shape',
+      name: 'Redline Rectangle',
+      position,
+      content: {
+        shape: 'rect',
+        fill: 'none',
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        borderRadius: 0,
+      },
+    };
+  }
+  if (kind === 'redline-text') {
+    return {
+      type: 'text',
+      name: 'Redline Text',
+      position: { x: Math.round(x), y: Math.round(y), width: 240, height: 48 },
+      content: {
+        text: 'Annotation',
+        style: {
+          fontSize: 24,
+          color: REDLINE_COLOR,
+          fontFamily: 'sans-serif',
+          fontWeight: 'bold',
+        },
+      },
+    };
+  }
+
+  const native = NATIVE[kind];
+  if (native === 'rect') {
+    return {
+      type: 'shape',
+      name,
+      position,
+      content: {
+        shape: 'rect',
+        fill: DEFAULT_FILL,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+        borderRadius: 8,
+      },
+    };
+  }
+  if (native === 'circle') {
+    return {
+      type: 'shape',
+      name,
+      position,
+      content: {
+        shape: 'circle',
+        fill: DEFAULT_FILL,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+      },
+    };
+  }
+  if (native === 'line') {
+    return {
+      type: 'shape',
+      name,
+      position,
+      content: { shape: 'line', stroke: DEFAULT_STROKE, strokeWidth: DEFAULT_STROKE_WIDTH },
+    };
+  }
+
+  if (kind === 'arrow') {
+    // A bounding-box line with an arrowhead at the end (no fill).
+    return {
+      type: 'path',
+      name: 'Arrow',
+      position,
+      content: {
+        d: `M ${px} ${py} L ${px + width} ${py + height}`,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+        fill: 'none',
+        endMarker: 'arrow',
+      },
+    };
+  }
+
+  // Named polygon / curved shape. Store `shapeKind` so the renderer (and the
+  // export pipeline) re-derive `d` from the position box; `d` is a seed value.
+  const d =
+    shapePath(kind, px, py, width, height) ?? `M ${px} ${py} L ${px + width} ${py + height}`;
+  return {
+    type: 'path',
+    name,
+    position,
+    content: {
+      d,
+      shapeKind: kind,
+      fill: DEFAULT_FILL,
+      stroke: DEFAULT_STROKE,
+      strokeWidth: DEFAULT_STROKE_WIDTH,
+    },
+  };
+}
+
+/**
+ * Create a line-based shape layer from a drag gesture (start point → end point).
+ * Used for `line`, `arrow`, and `redline-arrow` where the user drags to set both
+ * endpoints rather than clicking to drop a fixed-size shape.
+ */
+export function createLinearShapeLayer(
+  kind: string,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+): ImageEditLayerInput {
+  const rx1 = Math.round(x1);
+  const ry1 = Math.round(y1);
+  const rx2 = Math.round(x2);
+  const ry2 = Math.round(y2);
+
+  // Bounding box for selection handle placement — always positive dimensions.
+  const bx = Math.min(rx1, rx2);
+  const by = Math.min(ry1, ry2);
+  const bw = Math.max(Math.abs(rx2 - rx1), 4);
+  const bh = Math.max(Math.abs(ry2 - ry1), 4);
+  const position = { x: bx, y: by, width: bw, height: bh };
+
+  if (kind === 'line') {
+    // ShapeLayer line: renderer draws from (x,y) to (x+width, y+height).
+    // Store the actual start/end so the diagonal matches the drag direction.
+    return {
+      type: 'shape',
+      name: 'Line',
+      position: {
+        x: rx1,
+        y: ry1,
+        width: rx2 - rx1,
+        height: ry2 - ry1,
+      },
+      content: { shape: 'line', stroke: DEFAULT_STROKE, strokeWidth: DEFAULT_STROKE_WIDTH },
+    };
+  }
+
+  if (kind === 'arrow') {
+    return {
+      type: 'path',
+      name: 'Arrow',
+      position,
+      content: {
+        d: `M ${rx1} ${ry1} L ${rx2} ${ry2}`,
+        stroke: DEFAULT_STROKE,
+        strokeWidth: DEFAULT_STROKE_WIDTH,
+        fill: 'none',
+        endMarker: 'arrow',
+      },
+    };
+  }
+
+  if (kind === 'redline-arrow') {
+    return {
+      type: 'path',
+      name: 'Redline Arrow',
+      position,
+      content: {
+        d: `M ${rx1} ${ry1} L ${rx2} ${ry2}`,
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        fill: 'none',
+        endMarker: 'arrow',
+      },
+    };
+  }
+
+  if (kind === 'redline-rect') {
+    // Normalize so width/height are always positive regardless of drag direction.
+    return {
+      type: 'shape',
+      name: 'Redline Rectangle',
+      position: {
+        x: Math.min(rx1, rx2),
+        y: Math.min(ry1, ry2),
+        width: Math.max(Math.abs(rx2 - rx1), 4),
+        height: Math.max(Math.abs(ry2 - ry1), 4),
+      },
+      content: {
+        shape: 'rect',
+        fill: 'none',
+        stroke: REDLINE_COLOR,
+        strokeWidth: REDLINE_STROKE_WIDTH,
+        borderRadius: 0,
+      },
+    };
+  }
+
+  // Fallback: shouldn't be called for non-linear kinds
+  return createShapeLayer(kind, (x1 + x2) / 2, (y1 + y2) / 2);
+}
+
+/** Turn a palette kind into a layer-panel name, e.g. `arrow-right` → `Arrow Right`. */
+function prettifyKind(kind: string): string {
+  return kind
+    .split('-')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ');
+}