@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/customTemplates/LayerToolbar.tsx

@@ -0,0 +1,580 @@
+/**
+ * LayerToolbar — contextual styling controls for the layer currently
+ * selected in the TemplateDesigner. Renders a compact toolbar whose
+ * controls depend on the layer type:
+ *
+ *   - text  → alignment, font size/weight/family, text color, plus a
+ *             background fill (color · opacity · gradient) and border
+ *             (color · thickness · style) — text is a rectangle too.
+ *   - shape → shape kind, fill (color · opacity · gradient), and border
+ *             (color · thickness · style).
+ *   - image → object-fit.
+ *
+ * Fill and border editors are shared between text and shapes via
+ * {@link FillEditor} / {@link BorderEditor}, parameterized by the dotted
+ * attribute paths each layer type uses.
+ *
+ * Every control dispatches a single `setLayerAttr` via `onAttr(path,
+ * value)`, where `path` is a dotted path into the layer (e.g.
+ * `content.style.color`). The parent owns the command dispatch and the
+ * selected-layer lookup, so this component stays a pure view over the
+ * current layer.
+ */
+
+import type { Layer, LinearGradient, BorderStyle } from '@bendyline/squisq/schemas';
+import { AVAILABLE_FONT_STACKS } from '@bendyline/squisq/schemas';
+import { Icon } from '../Icon';
+
+interface LayerToolbarProps {
+  layer: Layer;
+  /** Set a single dotted attribute path on the selected layer. */
+  onAttr: (path: string, value: unknown) => void;
+}
+
+export function LayerToolbar({ layer, onAttr }: LayerToolbarProps) {
+  return (
+    <div className="squisq-layer-toolbar" role="toolbar" aria-label="Layer styling">
+      {layer.type === 'text' && <TextControls layer={layer} onAttr={onAttr} />}
+      {layer.type === 'shape' && <ShapeControls layer={layer} onAttr={onAttr} />}
+      {layer.type === 'path' && <PathControls layer={layer} onAttr={onAttr} />}
+      {layer.type === 'image' && <ImageControls layer={layer} onAttr={onAttr} />}
+    </div>
+  );
+}
+
+// ─── Text ───────────────────────────────────────────────────────
+
+const FONT_SIZES: Array<[string, number]> = [
+  ['Small', 24],
+  ['Medium', 40],
+  ['Large', 72],
+  ['Huge', 120],
+];
+
+function TextControls({
+  layer,
+  onAttr,
+}: {
+  layer: Layer & { type: 'text' };
+  onAttr: LayerToolbarProps['onAttr'];
+}) {
+  const style = layer.content.style;
+  return (
+    <>
+      <SegGroup
+        label="Horizontal align"
+        value={style.textAlign ?? 'left'}
+        onChange={(v) => onAttr('content.style.textAlign', v)}
+        options={[
+          { value: 'left', icon: 'fa-solid fa-align-left', title: 'Align left' },
+          { value: 'center', icon: 'fa-solid fa-align-center', title: 'Align center' },
+          { value: 'right', icon: 'fa-solid fa-align-right', title: 'Align right' },
+        ]}
+      />
+      <SegGroup
+        label="Vertical align"
+        value={style.verticalAlign ?? 'top'}
+        onChange={(v) => onAttr('content.style.verticalAlign', v)}
+        options={[
+          { value: 'top', icon: 'fa-solid fa-arrow-up', title: 'Align top' },
+          { value: 'middle', icon: 'fa-solid fa-grip-lines', title: 'Align middle' },
+          { value: 'bottom', icon: 'fa-solid fa-arrow-down', title: 'Align bottom' },
+        ]}
+      />
+      <Sep />
+      <select
+        className="squisq-layer-toolbar-select"
+        aria-label="Font size"
+        title="Font size"
+        value={nearestSize(style.fontSize)}
+        onChange={(e) => onAttr('content.style.fontSize', Number(e.target.value))}
+      >
+        {FONT_SIZES.map(([l, v]) => (
+          <option key={v} value={v}>
+            {l}
+          </option>
+        ))}
+      </select>
+      <button
+        type="button"
+        className={`squisq-layer-toolbar-btn${
+          style.fontWeight === 'bold' ? ' squisq-layer-toolbar-btn--active' : ''
+        }`}
+        aria-label="Bold"
+        aria-pressed={style.fontWeight === 'bold'}
+        title="Bold"
+        onClick={() =>
+          onAttr('content.style.fontWeight', style.fontWeight === 'bold' ? 'normal' : 'bold')
+        }
+      >
+        <Icon icon="fa-solid fa-bold" />
+      </button>
+      <Sep />
+      <span className="squisq-layer-toolbar-label">
+        <Icon icon="fa-solid fa-font" />
+      </span>
+      <select
+        className="squisq-layer-toolbar-select squisq-layer-toolbar-select--font"
+        aria-label="Font"
+        title="Font"
+        value={style.fontFamily ?? ''}
+        onChange={(e) => onAttr('content.style.fontFamily', e.target.value || undefined)}
+      >
+        <option value="">Default</option>
+        {AVAILABLE_FONT_STACKS.map((s) => (
+          <option key={s.id} value={s.family}>
+            {s.label}
+          </option>
+        ))}
+      </select>
+      <Color
+        label="Text color"
+        value={style.color}
+        onChange={(v) => onAttr('content.style.color', v)}
+      />
+      <Sep />
+      <span className="squisq-layer-toolbar-label" title="Background fill">
+        <Icon icon="fa-solid fa-fill-drip" />
+      </span>
+      <FillEditor
+        label="Background"
+        color={style.background}
+        opacity={style.backgroundOpacity}
+        gradient={style.backgroundGradient}
+        defaultColor="#1f2937"
+        noFillValue={undefined}
+        colorPath="content.style.background"
+        opacityPath="content.style.backgroundOpacity"
+        gradientPath="content.style.backgroundGradient"
+        onAttr={onAttr}
+      />
+      <Sep />
+      <span className="squisq-layer-toolbar-label" title="Border">
+        <Icon icon="fa-solid fa-border-top-left" />
+      </span>
+      <BorderEditor
+        color={style.borderColor}
+        width={style.borderWidth}
+        style={style.borderStyle}
+        defaultColor="#1e293b"
+        noBorderValue={undefined}
+        colorPath="content.style.borderColor"
+        widthPath="content.style.borderWidth"
+        stylePath="content.style.borderStyle"
+        onAttr={onAttr}
+      />
+    </>
+  );
+}
+
+/** Snap an arbitrary font size to the nearest named preset for the select. */
+function nearestSize(size: number): number {
+  let best = FONT_SIZES[0][1];
+  for (const [, v] of FONT_SIZES) {
+    if (Math.abs(v - size) < Math.abs(best - size)) best = v;
+  }
+  return best;
+}
+
+// ─── Shape (native) + Path (computed shape) ─────────────────────
+
+/**
+ * Fill + border controls shared by native `ShapeLayer`s and computed
+ * `PathLayer` shapes — both keep fill/stroke under the same
+ * `content.*` paths, so the editor is identical.
+ */
+function FillBorderControls({
+  content,
+  onAttr,
+}: {
+  content: {
+    fill?: string;
+    fillOpacity?: number;
+    gradient?: LinearGradient;
+    stroke?: string;
+    strokeWidth?: number;
+    borderStyle?: BorderStyle;
+  };
+  onAttr: LayerToolbarProps['onAttr'];
+}) {
+  return (
+    <>
+      <span className="squisq-layer-toolbar-label" title="Fill">
+        <Icon icon="fa-solid fa-fill-drip" />
+      </span>
+      <FillEditor
+        label="Fill"
+        color={content.fill}
+        opacity={content.fillOpacity}
+        gradient={content.gradient}
+        defaultColor="#3b82f6"
+        noFillValue="none"
+        colorPath="content.fill"
+        opacityPath="content.fillOpacity"
+        gradientPath="content.gradient"
+        onAttr={onAttr}
+      />
+      <Sep />
+      <span className="squisq-layer-toolbar-label" title="Border">
+        <Icon icon="fa-solid fa-border-top-left" />
+      </span>
+      <BorderEditor
+        color={content.stroke}
+        width={content.strokeWidth}
+        style={content.borderStyle}
+        defaultColor="#1e293b"
+        noBorderValue="none"
+        colorPath="content.stroke"
+        widthPath="content.strokeWidth"
+        stylePath="content.borderStyle"
+        onAttr={onAttr}
+      />
+    </>
+  );
+}
+
+function ShapeControls({
+  layer,
+  onAttr,
+}: {
+  layer: Layer & { type: 'shape' };
+  onAttr: LayerToolbarProps['onAttr'];
+}) {
+  return (
+    <>
+      <select
+        className="squisq-layer-toolbar-select"
+        aria-label="Shape"
+        title="Shape"
+        value={layer.content.shape}
+        onChange={(e) => onAttr('content.shape', e.target.value)}
+      >
+        <option value="rect">Rectangle</option>
+        <option value="circle">Ellipse</option>
+        <option value="line">Line</option>
+      </select>
+      <Sep />
+      <FillBorderControls content={layer.content} onAttr={onAttr} />
+    </>
+  );
+}
+
+function PathControls({
+  layer,
+  onAttr,
+}: {
+  layer: Layer & { type: 'path' };
+  onAttr: LayerToolbarProps['onAttr'];
+}) {
+  // Computed shapes (diamond, star, arrows…) carry the same fill/stroke
+  // fields as native shapes — no shape-kind select since the geometry is
+  // fixed by the placed shape.
+  return <FillBorderControls content={layer.content} onAttr={onAttr} />;
+}
+
+// ─── Image ──────────────────────────────────────────────────────
+
+function ImageControls({
+  layer,
+  onAttr,
+}: {
+  layer: Layer & { type: 'image' };
+  onAttr: LayerToolbarProps['onAttr'];
+}) {
+  return (
+    <select
+      className="squisq-layer-toolbar-select"
+      aria-label="Image fit"
+      title="How the image fills its box"
+      value={layer.content.fit ?? 'cover'}
+      onChange={(e) => onAttr('content.fit', e.target.value)}
+    >
+      <option value="cover">Fit: Cover</option>
+      <option value="contain">Fit: Contain</option>
+      <option value="fill">Fit: Stretch</option>
+    </select>
+  );
+}
+
+// ─── Shared controls ────────────────────────────────────────────
+
+interface SegOption {
+  value: string;
+  icon: string;
+  title: string;
+}
+
+function SegGroup({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  options: SegOption[];
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="squisq-layer-toolbar-seg" role="group" aria-label={label}>
+      {options.map((o) => (
+        <button
+          key={o.value}
+          type="button"
+          className={`squisq-layer-toolbar-btn${
+            value === o.value ? ' squisq-layer-toolbar-btn--active' : ''
+          }`}
+          aria-label={o.title}
+          aria-pressed={value === o.value}
+          title={o.title}
+          onClick={() => onChange(o.value)}
+        >
+          <Icon icon={o.icon} />
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function Color({
+  label,
+  value,
+  onChange,
+  onClear,
+  clearLabel,
+  cleared,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  onClear?: () => void;
+  clearLabel?: string;
+  cleared?: boolean;
+}) {
+  return (
+    <span className="squisq-layer-toolbar-color" title={label}>
+      <input
+        type="color"
+        aria-label={label}
+        value={normalizeColor(value)}
+        onChange={(e) => onChange(e.target.value)}
+        style={cleared ? { opacity: 0.4 } : undefined}
+      />
+      {onClear && (
+        <button
+          type="button"
+          className={`squisq-layer-toolbar-btn${cleared ? ' squisq-layer-toolbar-btn--active' : ''}`}
+          aria-label={clearLabel ?? 'None'}
+          title={clearLabel ?? 'None'}
+          onClick={onClear}
+        >
+          <Icon icon="fa-solid fa-ban" />
+        </button>
+      )}
+    </span>
+  );
+}
+
+// ─── Fill editor (color · opacity · gradient) ───────────────────
+
+const GRADIENT_DIRECTIONS: Array<[string, number, string]> = [
+  ['↓', 0, 'Top to bottom'],
+  ['→', 90, 'Left to right'],
+  ['↘', 45, 'Diagonal ↘'],
+  ['↙', 135, 'Diagonal ↙'],
+];
+
+function FillEditor({
+  label,
+  color,
+  opacity,
+  gradient,
+  defaultColor,
+  noFillValue,
+  colorPath,
+  opacityPath,
+  gradientPath,
+  onAttr,
+}: {
+  label: string;
+  color: string | undefined;
+  opacity: number | undefined;
+  gradient: LinearGradient | undefined;
+  /** Solid swatch shown when no color is set yet. */
+  defaultColor: string;
+  /** Value written when the user clears the fill (`'none'` for shapes,
+   *  `undefined` for text backgrounds). */
+  noFillValue: 'none' | undefined;
+  colorPath: string;
+  opacityPath: string;
+  gradientPath: string;
+  onAttr: LayerToolbarProps['onAttr'];
+}) {
+  const isGradient = !!gradient;
+  const swatch = color && color !== 'none' ? color : defaultColor;
+  return (
+    <>
+      <select
+        className="squisq-layer-toolbar-select"
+        aria-label={`${label} style`}
+        title={`${label} style`}
+        value={isGradient ? 'gradient' : 'solid'}
+        onChange={(e) => {
+          if (e.target.value === 'gradient') {
+            onAttr(gradientPath, { from: swatch, to: '#ffffff', angle: 0 });
+          } else {
+            onAttr(gradientPath, undefined);
+          }
+        }}
+      >
+        <option value="solid">Solid</option>
+        <option value="gradient">Gradient</option>
+      </select>
+      {isGradient ? (
+        <>
+          <Color
+            label={`${label} start color`}
+            value={gradient!.from}
+            onChange={(v) => onAttr(gradientPath, { ...gradient, from: v })}
+          />
+          <Color
+            label={`${label} end color`}
+            value={gradient!.to}
+            onChange={(v) => onAttr(gradientPath, { ...gradient, to: v })}
+          />
+          <select
+            className="squisq-layer-toolbar-select"
+            aria-label={`${label} direction`}
+            title={`${label} direction`}
+            value={String(gradient!.angle ?? 0)}
+            onChange={(e) => onAttr(gradientPath, { ...gradient, angle: Number(e.target.value) })}
+          >
+            {GRADIENT_DIRECTIONS.map(([glyph, deg, title]) => (
+              <option key={deg} value={deg} title={title}>
+                {glyph}
+              </option>
+            ))}
+          </select>
+        </>
+      ) : (
+        <Color
+          label={`${label} color`}
+          value={swatch}
+          onChange={(v) => onAttr(colorPath, v)}
+          clearLabel="No fill"
+          onClear={() => onAttr(colorPath, noFillValue)}
+          cleared={!color || color === 'none'}
+        />
+      )}
+      <Opacity
+        label={`${label} opacity`}
+        value={opacity}
+        onChange={(v) => onAttr(opacityPath, v)}
+      />
+    </>
+  );
+}
+
+// ─── Border editor (color · thickness · style) ──────────────────
+
+function BorderEditor({
+  color,
+  width,
+  style,
+  defaultColor,
+  noBorderValue,
+  colorPath,
+  widthPath,
+  stylePath,
+  onAttr,
+}: {
+  color: string | undefined;
+  width: number | undefined;
+  style: BorderStyle | undefined;
+  defaultColor: string;
+  noBorderValue: 'none' | undefined;
+  colorPath: string;
+  widthPath: string;
+  stylePath: string;
+  onAttr: LayerToolbarProps['onAttr'];
+}) {
+  return (
+    <>
+      <Color
+        label="Border color"
+        value={color && color !== 'none' ? color : defaultColor}
+        onChange={(v) => onAttr(colorPath, v)}
+        clearLabel="No border"
+        onClear={() => onAttr(colorPath, noBorderValue)}
+        cleared={!color || color === 'none'}
+      />
+      <input
+        type="number"
+        className="squisq-layer-toolbar-number"
+        aria-label="Border thickness"
+        title="Border thickness"
+        min={0}
+        max={80}
+        step={1}
+        value={width ?? 0}
+        onChange={(e) => onAttr(widthPath, Number(e.target.value))}
+      />
+      <select
+        className="squisq-layer-toolbar-select"
+        aria-label="Border style"
+        title="Border style"
+        value={style ?? 'solid'}
+        onChange={(e) => onAttr(stylePath, e.target.value)}
+      >
+        <option value="solid">Solid</option>
+        <option value="dashed">Dashed</option>
+        <option value="dotted">Dotted</option>
+      </select>
+    </>
+  );
+}
+
+function Opacity({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: number | undefined;
+  onChange: (v: number) => void;
+}) {
+  const pct = Math.round((value ?? 1) * 100);
+  return (
+    <label className="squisq-layer-toolbar-opacity" title={`${label} (${pct}%)`}>
+      <input
+        type="range"
+        aria-label={label}
+        min={0}
+        max={100}
+        step={5}
+        value={pct}
+        onChange={(e) => onChange(Number(e.target.value) / 100)}
+      />
+    </label>
+  );
+}
+
+function Sep() {
+  return <div className="squisq-layer-toolbar-sep" aria-hidden="true" />;
+}
+
+/** Coerce an arbitrary CSS color to a 6-digit hex the color input accepts. */
+function normalizeColor(v: string): string {
+  if (/^#[0-9a-f]{6}$/i.test(v)) return v;
+  if (/^#[0-9a-f]{3}$/i.test(v)) {
+    return (
+      '#' +
+      v
+        .slice(1)
+        .split('')
+        .map((c) => c + c)
+        .join('')
+    );
+  }
+  return '#000000';
+}

package/src/customTemplates/ShapeGlyph.tsx

@@ -0,0 +1,47 @@
+/**
+ * ShapeGlyph — a tiny SVG preview of a shape kind for the Add bin's
+ * shape buttons. Uses the same {@link shapePath} geometry the placed
+ * `PathLayer` will use, so the button icon matches what lands on the
+ * canvas. Native kinds (rect / circle / line) are drawn directly since
+ * `shapePath` returns null for them.
+ */
+
+import { shapePath } from '@bendyline/squisq/doc';
+
+const W = 30;
+const H = 24;
+const PAD = 3;
+
+interface ShapeGlyphProps {
+  kind: string;
+  rounded?: boolean;
+}
+
+export function ShapeGlyph({ kind, rounded }: ShapeGlyphProps) {
+  const x = PAD;
+  const y = PAD;
+  const w = W - PAD * 2;
+  const h = H - PAD * 2;
+  const common = {
+    fill: '#e2e8f0',
+    stroke: '#475569',
+    strokeWidth: 1.5,
+  };
+
+  let body;
+  if (kind === 'rect') {
+    body = <rect x={x} y={y} width={w} height={h} rx={rounded ? 5 : 0} {...common} />;
+  } else if (kind === 'circle') {
+    body = <ellipse cx={W / 2} cy={H / 2} rx={w / 2} ry={h / 2} {...common} />;
+  } else if (kind === 'line') {
+    body = <line x1={x} y1={H - PAD} x2={W - PAD} y2={y} stroke="#475569" strokeWidth={2} />;
+  } else {
+    body = <path d={shapePath(kind, x, y, w, h) ?? ''} {...common} />;
+  }
+
+  return (
+    <svg width={W} height={H} viewBox={`0 0 ${W} ${H}`} aria-hidden="true" focusable="false">
+      {body}
+    </svg>
+  );
+}