@pixerate/editor 0.104.0 → 0.106.0

package/dist/paint-editor/index.js

@@ -4,7 +4,7 @@ import {
   resolveExternalAssets,
   serializeLayers,
   serializeLayersExternal
-} from "../chunk-NQLQ2JOI.js";
+} from "../chunk-4X5MIVCE.js";
 import {
   RasterCompositor,
   bytesToBase64,
@@ -1509,6 +1509,28 @@ function defaultImageEncoder() {
     return new Uint8Array(await blob.arrayBuffer());
   };
 }
+async function decodeImageBlob(blob) {
+  const g = globalThis;
+  if (typeof g.createImageBitmap !== "function" || typeof g.OffscreenCanvas !== "function") throw new Error("Decoding images needs a browser (createImageBitmap and OffscreenCanvas).");
+  const bitmap = await g.createImageBitmap(blob);
+  const canvas = new g.OffscreenCanvas(bitmap.width, bitmap.height);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("No 2D context to decode with.");
+  ctx.drawImage(bitmap, 0, 0);
+  const data = new Uint8ClampedArray(ctx.getImageData(0, 0, bitmap.width, bitmap.height).data);
+  bitmap.close?.();
+  return { width: bitmap.width, height: bitmap.height, data };
+}
+function downloadBytes(bytes, fileName, mimeType) {
+  const g = globalThis;
+  if (!g.document || !g.URL || !g.Blob) throw new Error("Downloading needs a browser.");
+  const url = g.URL.createObjectURL(new g.Blob([bytes], { type: mimeType }));
+  const a = g.document.createElement("a");
+  a.href = url;
+  a.download = fileName;
+  a.click();
+  setTimeout(() => g.URL.revokeObjectURL(url), 1e3);
+}
 
 // src/paint-editor/thumbnails.ts
 function thumbnailStroke(width, height) {
@@ -4292,9 +4314,288 @@ function createPaintEditorToolProvider(controller, options = {}) {
   tools.push(...createPigmentTools());
   return { id: options.id ?? "paint-editor", namespace: options.namespace, tools };
 }
+
+// src/paint-editor/ui.ts
+var PAINT_TOOLS = [
+  { id: "brush", label: "Brush", key: "b" },
+  { id: "eyedropper", label: "Eyedropper", key: "i" },
+  { id: "pan", label: "Pan", key: "h" },
+  { id: "rotate", label: "Rotate view", key: "r" }
+];
+var PaintGesture = class {
+  constructor(controller, box) {
+    this.controller = controller;
+    this.box = box;
+  }
+  controller;
+  box;
+  tool = "brush";
+  /** The last refusal (a hidden or locked layer), for the editor to show. */
+  error = null;
+  /** The predicted tail of the current stroke in document pixels (draw it as a thin preview). */
+  predicted = [];
+  mode = null;
+  penAt = null;
+  penDown = false;
+  doc(e) {
+    const b = this.box();
+    const s = this.controller.getState();
+    return screenToDocument(s.view, s.document.canvas, b, e.clientX - b.left, e.clientY - b.top);
+  }
+  pen(e) {
+    const p = this.doc(e);
+    return pointerToPenPoint(e, p.x, p.y, this.controller.getState().view);
+  }
+  /** Pointer down; returns true when the gesture took the pointer (capture it). */
+  down(e) {
+    this.error = null;
+    if (this.mode) return false;
+    if (e.pointerType === "pen") {
+      this.penDown = true;
+      this.penAt = { x: e.clientX, y: e.clientY };
+    } else if (e.pointerType === "touch" && (this.penDown || isPalmTouch({ x: e.clientX, y: e.clientY }, this.penAt, this.controller.getState().hand))) {
+      return false;
+    }
+    const middle = e.button === 1;
+    const tool = middle ? "pan" : this.tool;
+    if (tool === "pan") {
+      this.mode = { kind: "pan", pointerId: e.pointerId, x: e.clientX, y: e.clientY, pan: { ...this.controller.getState().view.pan } };
+      return true;
+    }
+    if (tool === "rotate") {
+      const b = this.box();
+      this.mode = { kind: "rotate", pointerId: e.pointerId, angle: Math.atan2(e.clientY - b.top - b.height / 2, e.clientX - b.left - b.width / 2), rotation: this.controller.getState().view.rotation };
+      return true;
+    }
+    if (tool === "eyedropper" || e.altKey) {
+      this.pick(e);
+      return false;
+    }
+    try {
+      const p = this.pen(e);
+      const session = this.controller.beginStroke({ start: p });
+      session.push([p]);
+      this.mode = { kind: "stroke", pointerId: e.pointerId };
+      return true;
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : String(err);
+      return false;
+    }
+  }
+  pick(e) {
+    const p = this.doc(e);
+    const { width, height } = this.controller.document.canvas;
+    if (p.x < 0 || p.y < 0 || p.x >= width || p.y >= height) return;
+    this.controller.setColor(this.controller.pickColor(p.x, p.y).color);
+  }
+  move(e) {
+    if (e.pointerType === "pen") this.penAt = { x: e.clientX, y: e.clientY };
+    const m = this.mode;
+    if (!m || m.pointerId !== e.pointerId) return;
+    if (m.kind === "pan") {
+      this.controller.setView({ pan: { x: m.pan.x + e.clientX - m.x, y: m.pan.y + e.clientY - m.y } });
+      return;
+    }
+    if (m.kind === "rotate") {
+      const b = this.box();
+      const a = Math.atan2(e.clientY - b.top - b.height / 2, e.clientX - b.left - b.width / 2);
+      let r = m.rotation + (a - m.angle) * 180 / Math.PI;
+      if (e.shiftKey) r = Math.round(r / 15) * 15;
+      this.controller.setView({ rotation: r });
+      return;
+    }
+    const session = this.controller.activeStroke;
+    if (!session) return;
+    const events = typeof e.getCoalescedEvents === "function" ? e.getCoalescedEvents() : [];
+    session.push((events.length ? events : [e]).map((ev) => this.pen(ev)));
+    const predicted = typeof e.getPredictedEvents === "function" ? e.getPredictedEvents() : [];
+    this.predicted = predicted.map((ev) => this.pen(ev));
+  }
+  up(e) {
+    if (e.pointerType === "pen") this.penDown = false;
+    const m = this.mode;
+    if (!m || m.pointerId !== e.pointerId) return;
+    this.mode = null;
+    this.predicted = [];
+    if (m.kind === "stroke") this.controller.activeStroke?.end();
+  }
+  cancel() {
+    this.penDown = false;
+    this.predicted = [];
+    if (this.mode?.kind === "stroke") this.controller.activeStroke?.cancel();
+    this.mode = null;
+  }
+  get active() {
+    return this.mode !== null;
+  }
+  /** Wheel: zoom about the pointer (Ctrl / pinch or plain wheel), Shift+wheel rotates the view. */
+  wheel(e) {
+    const s = this.controller.getState();
+    if (e.shiftKey) {
+      this.controller.setView({ rotation: s.view.rotation + (e.deltaY > 0 ? 5 : -5) });
+      return;
+    }
+    const b = this.box();
+    const zoom = Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, s.view.zoom * Math.exp(-e.deltaY * 15e-4)));
+    const k = zoom / s.view.zoom;
+    const px = e.clientX - b.left - b.width / 2;
+    const py = e.clientY - b.top - b.height / 2;
+    this.controller.setView({ zoom, pan: { x: px - (px - s.view.pan.x) * k, y: py - (py - s.view.pan.y) * k } });
+  }
+};
+function handlePaintShortcut(controller, gesture, e) {
+  const mod = e.ctrlKey || e.metaKey;
+  const key = e.key.toLowerCase();
+  if (mod && key === "z") {
+    if (controller.getState().stroking) return true;
+    if (e.shiftKey) controller.redo();
+    else controller.undo();
+    return true;
+  }
+  if (mod && key === "y") {
+    controller.redo();
+    return true;
+  }
+  if (mod) return false;
+  const tool = PAINT_TOOLS.find((t) => t.key === key);
+  if (tool) {
+    gesture.tool = tool.id;
+    return true;
+  }
+  const brush = controller.getState().brush;
+  if (key === "[" || key === "]") {
+    const step = Math.max(1, Math.round(brush.tip.size * 0.15));
+    controller.setBrush({ tip: { size: Math.max(1, brush.tip.size + (key === "]" ? step : -step)) } });
+    return true;
+  }
+  if (key === "x") {
+    controller.swapColors();
+    return true;
+  }
+  if (key === "m") {
+    controller.setView({ mirror: !controller.getState().view.mirror });
+    return true;
+  }
+  if (key === "escape") {
+    controller.resetView();
+    return true;
+  }
+  return false;
+}
+var PaintCanvasPresenter = class {
+  constructor(controller) {
+    this.controller = controller;
+  }
+  controller;
+  uploaded = /* @__PURE__ */ new Map();
+  scratch = null;
+  size = "";
+  /** Draws what changed into `ctx` (a canvas the size of the document); returns the tiles drawn. */
+  render(ctx) {
+    const { width, height } = this.controller.document.canvas;
+    const size = `${width}x${height}`;
+    let dirty = this.controller.takeDirty();
+    if (size !== this.size) {
+      this.size = size;
+      this.uploaded.clear();
+      dirty = "all";
+    }
+    let drawn = 0;
+    const rect = { x: 0, y: 0, width, height };
+    this.controller.compositeTiles(rect, (tx, ty, data) => {
+      const key = `${tx},${ty}`;
+      if (this.uploaded.get(key) === data) return;
+      this.uploaded.set(key, data);
+      if (!this.scratch) this.scratch = ctx.createImageData(TILE, TILE);
+      this.scratch.data.set(data);
+      const ox = tx * TILE;
+      const oy = ty * TILE;
+      ctx.putImageData(this.scratch, ox, oy, 0, 0, Math.min(TILE, width - ox), Math.min(TILE, height - oy));
+      drawn++;
+    }, { dirty });
+    return drawn;
+  }
+};
+function guideOverlay(controller) {
+  const s = controller.getState();
+  const size = s.document.canvas;
+  const out = [];
+  for (const [from, to] of symmetryAxisSegments(s.guides.symmetry, size)) out.push({ from, to, kind: "symmetry" });
+  if (s.guides.perspective.enabled) for (const [from, to] of perspectiveGuideLines(s.guides.perspective, size, 16)) out.push({ from, to, kind: "perspective" });
+  return out;
+}
+var BRUSH_SLIDERS = [
+  { path: "tip.size", label: "Size", min: 1, max: 400, step: 1 },
+  { path: "tip.opacity", label: "Opacity", min: 0, max: 1, step: 0.01 },
+  { path: "tip.flow", label: "Flow", min: 0, max: 1, step: 0.01 },
+  { path: "tip.hardness", label: "Hardness", min: 0, max: 1, step: 0.01 },
+  { path: "tip.spacing", label: "Spacing", min: 0.01, max: 1, step: 0.01 },
+  { path: "tip.roundness", label: "Roundness", min: 0.05, max: 1, step: 0.01 },
+  { path: "tip.angle", label: "Angle", min: -180, max: 180, step: 1 },
+  { path: "grain", label: "Grain", min: 0, max: 1, step: 0.01 },
+  { path: "tip.smoothing", label: "Smoothing", min: 0, max: 0.95, step: 0.01 },
+  { path: "pressureSmoothing", label: "Pressure smoothing", min: 0, max: 0.95, step: 0.01 },
+  { path: "dynamics.minSize", label: "Min size", min: 0, max: 1, step: 0.01 },
+  { path: "dynamics.tiltSize", label: "Tilt size", min: 0, max: 1, step: 0.01 },
+  { path: "dynamics.velocitySize", label: "Speed size", min: -1, max: 1, step: 0.01 }
+];
+var PAPER_SLIDERS = [
+  { path: "depth", label: "Grain depth", min: 0, max: 1, step: 0.01 },
+  { path: "scale", label: "Grain scale", min: 0.25, max: 8, step: 0.05 },
+  { path: "shading", label: "Shading", min: 0, max: 1, step: 0.01 },
+  { path: "dry.contrast", label: "Contrast", min: 0, max: 3, step: 0.05 },
+  { path: "absorption", label: "Absorption", min: 0, max: 1, step: 0.01 },
+  { path: "permeability", label: "Permeability", min: 0, max: 1, step: 0.01 },
+  { path: "roughness", label: "Roughness", min: 0, max: 1, step: 0.01 }
+];
+function readPath(obj, path) {
+  let v = obj;
+  for (const k of path.split(".")) v = v?.[k];
+  return typeof v === "number" ? v : 0;
+}
+function patchPath(obj, path, value) {
+  const [head, ...rest] = path.split(".");
+  if (!rest.length) return { [head]: value };
+  return { [head]: { ...obj[head], ...patchPath(obj[head] ?? {}, rest.join("."), value) } };
+}
+function wheelPoint(angle, radius) {
+  const a = (angle - 90) * Math.PI / 180;
+  return { x: Math.cos(a) * radius, y: Math.sin(a) * radius };
+}
+function wheelAngle(x, y) {
+  return (Math.atan2(y, x) * 180 / Math.PI + 90 + 360) % 360;
+}
+function renderColorWheel(size, wheel, inner = 0.64) {
+  const data = new Uint8ClampedArray(size * size * 4);
+  const r = size / 2;
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const dx = x + 0.5 - r;
+      const dy = y + 0.5 - r;
+      const d = Math.hypot(dx, dy) / r;
+      if (d > 1 || d < inner) continue;
+      const [cr, cg, cb] = hsvToRgb(wheelToHue(wheelAngle(dx, dy), wheel), 1, 1);
+      const i = (y * size + x) * 4;
+      const edge = Math.min(1, (1 - d) * r, (d - inner) * r);
+      data[i] = cr;
+      data[i + 1] = cg;
+      data[i + 2] = cb;
+      data[i + 3] = Math.round(255 * Math.max(0, edge));
+    }
+  }
+  return { width: size, height: size, data };
+}
+function wheelPick(dx, dy, wheel, color) {
+  const [r, g, b] = parseHexColor(color);
+  const { s, v } = rgbToHsv(r, g, b);
+  const [nr, ng, nb] = hsvToRgb(wheelToHue(wheelAngle(dx, dy), wheel), s || 1, v || 1);
+  return rgbToHexColor(nr, ng, nb);
+}
 export {
+  BLEND_MODES,
   BRUSH_ID,
   BRUSH_ROTATIONS,
+  BRUSH_SLIDERS,
   BUILTIN_BRUSHES,
   DEFAULT_BRUSH_ID,
   DEFAULT_DPI,
@@ -4322,12 +4623,16 @@ export {
   PAINT_BRUSH_ENGINES,
   PAINT_FORMAT,
   PAINT_SCHEMA_VERSION,
+  PAINT_TOOLS,
   PAPER_FAMILIES,
   PAPER_LIBRARY,
   PAPER_NODE_ID,
+  PAPER_SLIDERS,
+  PaintCanvasPresenter,
   PaintDocumentError,
   PaintEditorController,
   PaintEditorError,
+  PaintGesture,
   PaintStrokeSession,
   PaperGrain,
   PenDabWalker,
@@ -4347,22 +4652,27 @@ export {
   createPaintDocument,
   createPaintEditorToolProvider,
   createPaintLayer,
+  decodeImageBlob,
   defaultGuides,
   defaultImageEncoder,
   deserializePaintDocument,
   deserializePaintDocumentAsync,
   documentExtensions,
   documentToScreen,
+  downloadBytes,
   downsampleRgba,
   fitZoom,
   grainCatch,
   grainHeights,
+  guideOverlay,
+  handlePaintShortcut,
   hash2,
   hexToRgb8,
   hslToRgb,
   hsvToRgb,
   hueToWheel,
   invertAffine,
+  isBlendMode,
   isPalmTouch,
   mapPenPoint,
   mix32,
@@ -4384,13 +4694,16 @@ export {
   paperPreset,
   parseBrushLibrary,
   parseHexColor,
+  patchPath,
   penOrientation,
   perspectiveDirections,
   perspectiveGuideLines,
   pointerToPenPoint,
   rand01,
   randSigned,
+  readPath,
   renderBrushThumbnail,
+  renderColorWheel,
   renderPaper,
   rgbToHexColor,
   rgbToHsl,
@@ -4412,6 +4725,9 @@ export {
   viewCssTransform,
   viewMatrix,
   viewPenToDocument,
+  wheelAngle,
+  wheelPick,
+  wheelPoint,
   wheelToHue
 };
 //# sourceMappingURL=index.js.map