@pixerate/editor 0.246.0 → 0.249.0

package/dist/chunk-EJLRBS5Q.js

@@ -0,0 +1,301 @@
+import {
+  EDITOR_STICKERS_ID,
+  STAMP_KINDS,
+  StickerError,
+  stampCoverage,
+  stickerPage,
+  stickerRefOf
+} from "./chunk-5RH3VXAK.js";
+import {
+  pngDataUrl
+} from "./chunk-OTTT5N3K.js";
+
+// src/stickers/editor.ts
+var BOX = 100;
+var GRID = 128;
+var SHAPE_SEED = 7;
+var LICENCE = { spdx: "MIT", name: "MIT", commercial: true };
+var META = {
+  dot: { name: "Dot", category: "shapes", tags: ["circle", "round", "spot"], colour: "#2563eb", description: "A round dot." },
+  star: { name: "Star", category: "shapes", tags: ["five-pointed", "favourite", "rating"], colour: "#f59e0b", description: "A five-pointed star, one point up." },
+  heart: { name: "Heart", category: "shapes", tags: ["love", "like"], colour: "#e11d48", description: "A heart." },
+  leaf: { name: "Leaf", category: "nature", tags: ["plant", "green"], colour: "#16a34a", description: "A pointed leaf with a midrib." },
+  flower: { name: "Flower", category: "nature", tags: ["petals", "blossom"], colour: "#db2777", description: "A five-petal flower." },
+  confetti: { name: "Confetti", category: "party", tags: ["celebration", "rectangle"], colour: "#7c3aed", description: "A small strip of confetti." },
+  splat: { name: "Splat", category: "party", tags: ["paint", "splash", "blob"], colour: "#0891b2", description: "A paint splat with drops." },
+  sparkle: { name: "Sparkle", category: "party", tags: ["twinkle", "shine", "glint"], colour: "#eab308", description: "A four-pointed twinkle." },
+  ring: { name: "Ring", category: "shapes", tags: ["circle", "outline", "hoop"], colour: "#0f766e", description: "A ring." }
+};
+var HEX = /^#[0-9a-fA-F]{6}$/;
+function stampOutline(kind) {
+  const n = GRID;
+  const f = new Float32Array((n + 1) * (n + 1));
+  for (let j = 0; j <= n; j++) for (let i = 0; i <= n; i++) f[j * (n + 1) + i] = stampCoverage(kind, i / n * 2 - 1, j / n * 2 - 1, SHAPE_SEED) - 0.5;
+  const at = (i, j) => f[j * (n + 1) + i];
+  const points = /* @__PURE__ */ new Map();
+  const point = (key, i0, j0, i1, j1) => {
+    if (!points.has(key)) {
+      const a = at(i0, j0);
+      const b = at(i1, j1);
+      const t = a / (a - b);
+      points.set(key, [(i0 + (i1 - i0) * t) / n * BOX, (j0 + (j1 - j0) * t) / n * BOX]);
+    }
+    return key;
+  };
+  const next = /* @__PURE__ */ new Map();
+  for (let j = 0; j < n; j++) {
+    for (let i = 0; i < n; i++) {
+      const tl = at(i, j) > 0 ? 1 : 0;
+      const tr = at(i + 1, j) > 0 ? 1 : 0;
+      const br = at(i + 1, j + 1) > 0 ? 1 : 0;
+      const bl = at(i, j + 1) > 0 ? 1 : 0;
+      const code = tl << 3 | tr << 2 | br << 1 | bl;
+      if (code === 0 || code === 15) continue;
+      const top = () => point(`h${i},${j}`, i, j, i + 1, j);
+      const right = () => point(`v${i + 1},${j}`, i + 1, j, i + 1, j + 1);
+      const bottom = () => point(`h${i},${j + 1}`, i, j + 1, i + 1, j + 1);
+      const left = () => point(`v${i},${j}`, i, j, i, j + 1);
+      const seg = (a, b) => next.set(a, b);
+      const centre = at(i, j) + at(i + 1, j) + at(i + 1, j + 1) + at(i, j + 1) > 0;
+      switch (code) {
+        case 1:
+          seg(left(), bottom());
+          break;
+        case 2:
+          seg(bottom(), right());
+          break;
+        case 3:
+          seg(left(), right());
+          break;
+        case 4:
+          seg(right(), top());
+          break;
+        case 5:
+          if (centre) {
+            seg(left(), top());
+            seg(right(), bottom());
+          } else {
+            seg(left(), bottom());
+            seg(right(), top());
+          }
+          break;
+        case 6:
+          seg(bottom(), top());
+          break;
+        case 7:
+          seg(left(), top());
+          break;
+        case 8:
+          seg(top(), left());
+          break;
+        case 9:
+          seg(top(), bottom());
+          break;
+        case 10:
+          if (centre) {
+            seg(top(), right());
+            seg(bottom(), left());
+          } else {
+            seg(top(), left());
+            seg(bottom(), right());
+          }
+          break;
+        case 11:
+          seg(top(), right());
+          break;
+        case 12:
+          seg(right(), left());
+          break;
+        case 13:
+          seg(right(), bottom());
+          break;
+        case 14:
+          seg(bottom(), left());
+          break;
+      }
+    }
+  }
+  const loops = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const start of next.keys()) {
+    if (seen.has(start)) continue;
+    const loop = [];
+    let k = start;
+    while (k !== void 0 && !seen.has(k)) {
+      seen.add(k);
+      loop.push(points.get(k));
+      k = next.get(k);
+    }
+    if (loop.length >= 3) loops.push(simplify(loop, 0.12));
+  }
+  const fmt = (v) => String(Math.round(v * 100) / 100);
+  return loops.map((l) => "M" + l.map(([x, y]) => `${fmt(x)} ${fmt(y)}`).join("L") + "Z").join("");
+}
+function simplify(loop, eps) {
+  if (loop.length < 8) return loop;
+  const keep = new Uint8Array(loop.length);
+  const rdp = (a, b) => {
+    const [ax, ay] = loop[a];
+    const [bx, by] = loop[b];
+    const len = Math.hypot(bx - ax, by - ay) || 1e-9;
+    let worst = -1;
+    let far = 0;
+    for (let i = a + 1; i < b; i++) {
+      const d = Math.abs((bx - ax) * (ay - loop[i][1]) - (ax - loop[i][0]) * (by - ay)) / len;
+      if (d > far) {
+        far = d;
+        worst = i;
+      }
+    }
+    if (worst !== -1 && far > eps) {
+      keep[worst] = 1;
+      rdp(a, worst);
+      rdp(worst, b);
+    }
+  };
+  const mid = Math.floor(loop.length / 2);
+  keep[0] = keep[mid] = 1;
+  rdp(0, mid);
+  rdp(mid, loop.length - 1);
+  keep[loop.length - 1] = 1;
+  return loop.filter((_, i) => keep[i]);
+}
+function stampPixels(kind, size, colour) {
+  const out = new Uint8ClampedArray(size * size * 4);
+  const n = parseInt(colour.slice(1), 16);
+  const ss = size <= 128 ? 3 : 2;
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      let c = 0;
+      for (let sy = 0; sy < ss; sy++) for (let sx = 0; sx < ss; sx++) c += stampCoverage(kind, (x + (sx + 0.5) / ss) / size * 2 - 1, (y + (sy + 0.5) / ss) / size * 2 - 1, SHAPE_SEED);
+      const a = Math.round(c / (ss * ss) * 255);
+      if (!a) continue;
+      const i = (y * size + x) * 4;
+      out[i] = n >> 16 & 255;
+      out[i + 1] = n >> 8 & 255;
+      out[i + 2] = n & 255;
+      out[i + 3] = a;
+    }
+  }
+  return out;
+}
+function editorStickers() {
+  const outlines = /* @__PURE__ */ new Map();
+  const thumbs = /* @__PURE__ */ new Map();
+  const outline = (k) => outlines.get(k) ?? (outlines.set(k, stampOutline(k)), outlines.get(k));
+  const summary = (k) => {
+    const m = META[k];
+    if (!thumbs.has(k)) thumbs.set(k, pngDataUrl(48, 48, stampPixels(k, 48, m.colour)));
+    return { id: k, name: m.name, category: m.category, tags: m.tags, description: m.description, width: BOX, height: BOX, thumbnail: thumbs.get(k), formats: ["svg", "png"], licence: { ...LICENCE }, tintable: true };
+  };
+  const kind = (id) => {
+    if (!STAMP_KINDS.includes(id)) throw new StickerError("unknown_sticker", `The editor has no sticker "${id}"; its stickers are ${STAMP_KINDS.join(", ")}.`);
+    return id;
+  };
+  return {
+    id: EDITOR_STICKERS_ID,
+    name: "Editor stickers",
+    version: "1",
+    capabilities: { supportsSearch: true, supportsSvg: true, supportsRaster: true, maxSize: 1024 },
+    list: (options) => stickerPage(STAMP_KINDS.map(summary), options),
+    search: (query, options) => stickerPage(STAMP_KINDS.map(summary), options, query),
+    describe(id) {
+      if (!STAMP_KINDS.includes(id)) return void 0;
+      const k = id;
+      return { ...summary(k), silhouette: outline(k), colours: [META[k].colour] };
+    },
+    categories: () => [...new Set(STAMP_KINDS.map((k) => META[k].category))].map((c) => ({ id: c, name: c[0].toUpperCase() + c.slice(1), count: STAMP_KINDS.filter((k) => META[k].category === c).length })),
+    load(id, options = {}) {
+      const k = kind(id);
+      const colour = options.colour ?? META[k].colour;
+      if (!HEX.test(colour)) throw new StickerError("invalid_argument", `colour ${JSON.stringify(colour)} must be #rrggbb.`);
+      if (options.format === "png") {
+        const size = options.size ?? 256;
+        if (!(Number.isInteger(size) && size >= 8 && size <= 1024)) throw new StickerError("invalid_argument", `size must be a whole number of px from 8 to 1024, got ${size}.`);
+        return { kind: "image", url: pngDataUrl(size, size, stampPixels(k, size, colour.toLowerCase())), width: size, height: size };
+      }
+      if (options.format !== void 0 && options.format !== "svg") throw new StickerError("unsupported_format", `format must be svg or png, got ${JSON.stringify(options.format)}.`);
+      const d = outline(k);
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${BOX} ${BOX}" width="${BOX}" height="${BOX}"><path fill="${colour.toLowerCase()}" fill-rule="evenodd" d="${d}"/></svg>`;
+      return { kind: "svg", svg, silhouette: d };
+    }
+  };
+}
+
+// src/stickers/browser.ts
+var StickerBrowser = class {
+  constructor(provider, pageSize = 24) {
+    this.provider = provider;
+    this.pageSize = pageSize;
+    this.s = { query: "", category: "", items: [], total: 0, hasMore: false, loading: false, error: null, categories: [], provider: provider().name };
+  }
+  provider;
+  pageSize;
+  s;
+  next;
+  run = 0;
+  listeners = /* @__PURE__ */ new Set();
+  get state() {
+    return this.s;
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+  set(patch) {
+    this.s = { ...this.s, ...patch };
+    for (const l of [...this.listeners]) l();
+  }
+  /** Loads the first page (and the categories) again, for the current provider. */
+  async refresh() {
+    const run = ++this.run;
+    const p = this.provider();
+    this.next = void 0;
+    this.set({ loading: true, error: null, items: [], total: 0, hasMore: false, provider: p.name });
+    try {
+      const categories = await p.categories?.() ?? [];
+      if (run !== this.run) return;
+      this.set({ categories });
+      await this.page(run, p, true);
+    } catch (e) {
+      if (run === this.run) this.set({ loading: false, error: e instanceof Error ? e.message : String(e) });
+    }
+  }
+  /** Searches for `query` (words; `''` lists everything) from the first page. */
+  setQuery(query) {
+    this.s = { ...this.s, query };
+    return this.refresh();
+  }
+  /** Shows one category (`''` for all) from the first page. */
+  setCategory(category) {
+    this.s = { ...this.s, category };
+    return this.refresh();
+  }
+  /** Loads the next page onto the list. */
+  async more() {
+    if (!this.next || this.s.loading) return;
+    const run = this.run;
+    this.set({ loading: true });
+    try {
+      await this.page(run, this.provider(), false);
+    } catch (e) {
+      if (run === this.run) this.set({ loading: false, error: e instanceof Error ? e.message : String(e) });
+    }
+  }
+  async page(run, p, first) {
+    const options = { limit: this.pageSize, ...this.s.category ? { category: this.s.category } : {}, ...!first && this.next ? { after: this.next } : {} };
+    const q = this.s.query.trim();
+    const res = q && p.capabilities.supportsSearch ? await p.search(q, options) : await p.list(options);
+    if (run !== this.run) return;
+    this.next = res.next;
+    const items = res.items.map((s) => ({ ...s, ref: stickerRefOf(p, s.id) }));
+    this.set({ items: first ? items : [...this.s.items, ...items], total: res.total, hasMore: Boolean(res.next), loading: false });
+  }
+};
+
+export {
+  stampOutline,
+  stampPixels,
+  editorStickers,
+  StickerBrowser
+};