@pixerate/editor 0.240.0 → 0.242.0

package/dist/effects/index.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-N4ZXW3WB.js";
 import {
   createEffectAuthoringSession
-} from "../chunk-TEFQISBY.js";
+} from "../chunk-X3ZINLIP.js";
 import {
   EFFECT_LAYER_USES,
   EFFECT_SEQUENCE_NAME,
@@ -28,16 +28,18 @@ import {
   templateSlotTakes,
   templateValueProblem,
   templateValuesSchema
-} from "../chunk-G3RUKJ5C.js";
+} from "../chunk-RXZL4NG5.js";
 import {
   EffectRendererPool
 } from "../chunk-EHLOCVWB.js";
 import {
   CAMERA_MOVE_MAX_MS,
   CAMERA_MOVE_ROLES,
+  EFFECT_ACCEPTS,
   EFFECT_ERROR_CODES,
   EFFECT_KINDS,
   EFFECT_LAYER_ROLES,
+  EFFECT_PATH_FORMAT,
   EFFECT_SUBJECT_KINDS,
   EFFECT_TEMPLATE_SLOT_TYPES,
   EFFECT_TRANSITION_MS,
@@ -69,13 +71,14 @@ import {
   isEffectPixels,
   linearToSrgb,
   normaliseEffectTag,
+  pathControlsOf,
   resolveCameraMoveSpec,
   resolveEffectValues,
   sampleCameraViews,
   sampleEffectCameraMove,
   searchEffectSummaries,
   srgbToLinear
-} from "../chunk-SIK3LT6M.js";
+} from "../chunk-OFH6Q67U.js";
 import "../chunk-V2ZCJRDM.js";
 import "../chunk-RNSANXPT.js";
 import {
@@ -105,6 +108,7 @@ function checkSummary(e, issues) {
   if (typeof e.loop !== "boolean") at("loop is not a boolean");
   if (e.duration !== void 0 && !(e.duration > 0)) at("duration must be a positive number of ms when present");
   if (e.backgroundOpacity !== void 0 && (typeof e.backgroundOpacity !== "string" || !e.backgroundOpacity)) at("backgroundOpacity must name a control when present");
+  for (const a of e.accepts ?? []) if (!EFFECT_ACCEPTS.includes(a)) at(`accepts "${a}" is not one of ${EFFECT_ACCEPTS.join(", ")}`);
   if (e.kind === "camera") {
     if (e.uses?.length !== 1 || e.uses[0] !== "camera") at('a camera effect must have exactly the use "camera"');
     const m = e.camera;
@@ -136,6 +140,9 @@ function checkDescription(id, d, issues) {
     if (!control) at(`backgroundOpacity "${d.backgroundOpacity}" is not a control`);
     else if (control.type !== "number" || control.minimum !== 0 || control.maximum !== 1) at(`backgroundOpacity "${d.backgroundOpacity}" must be a number control from 0 to 1`);
   }
+  const paths = pathControlsOf(d);
+  if (paths.length && !d.accepts?.includes("path")) at(`controls ${paths.map((p) => `"${p}"`).join(", ")} take a path, but accepts does not list "path"`);
+  if (!paths.length && d.accepts?.includes("path")) at('accepts lists "path", but no control has format "svg-path"');
   for (const e of effectValueErrors(d, d.defaults)) at(`default ${e.path}: ${e.message}`);
   for (const p of d.presets ?? []) for (const e of effectValueErrors(d, p.values)) at(`preset "${p.name}" ${e.path}: ${e.message}`);
   for (const input2 of d.inputs ?? []) {
@@ -547,6 +554,13 @@ function fakeTemplateMethods() {
 var HEX = "^#[0-9a-fA-F]{6}$";
 var colour = (description) => ({ type: "string", pattern: HEX, description });
 var amount = (description) => ({ type: "number", minimum: 0, maximum: 1, description });
+var pathControl = (what) => ({
+  description: `${what}: SVG path data (fitted into the frame, contain, 8% margin), or points [x0, y0, x1, y1, \u2026] in frame pixels from the top left (used as given), or "" for none.`,
+  anyOf: [
+    { type: "string", format: "svg-path", description: 'SVG path data, or "" for no path.' },
+    { type: "array", items: { type: "number", description: "x or y, frame pixels." }, description: "Points x0, y0, x1, y1, \u2026 in frame pixels." }
+  ]
+});
 var DESCRIPTIONS = [
   {
     id: "fake.invert",
@@ -711,8 +725,77 @@ var DESCRIPTIONS = [
     defaults: { color: "#f43f5e", ms: 500 },
     presets: [],
     inputs: []
+  },
+  {
+    id: "fake.trail",
+    name: "Trail",
+    kind: "shader",
+    category: "path",
+    uses: ["overlay"],
+    description: "A line drawn along its path control over transparency; with no path, a line across the middle.",
+    tags: ["path", "line"],
+    transparent: true,
+    loop: false,
+    accepts: ["path"],
+    controls: {
+      type: "object",
+      additionalProperties: false,
+      properties: {
+        path: pathControl("Where the line runs"),
+        color: colour("Line colour as #rrggbb. Default #22d3ee."),
+        width: { type: "number", minimum: 1, maximum: 64, description: "Line width in pixels. Default 6." }
+      }
+    },
+    defaults: { path: "", color: "#22d3ee", width: 6 },
+    presets: [],
+    inputs: []
+  },
+  {
+    id: "fake.route",
+    name: "Route",
+    kind: "vector",
+    category: "path",
+    uses: ["title"],
+    description: "A vector line along its path control, its picture fitted to the path (viewBox = the path bounds); with no path, a short wave.",
+    tags: ["path", "route"],
+    transparent: true,
+    loop: false,
+    duration: 400,
+    accepts: ["path"],
+    controls: {
+      type: "object",
+      additionalProperties: false,
+      properties: {
+        path: pathControl("The route"),
+        color: colour("Line colour as #rrggbb. Default #f59e0b.")
+      }
+    },
+    defaults: { path: "", color: "#f59e0b" },
+    presets: [],
+    inputs: []
   }
 ];
+function pathNumbers(d) {
+  return [...d.matchAll(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi)].map((m) => Number(m[0]));
+}
+function framePoints(value, width, height, fallback) {
+  if (Array.isArray(value)) return value.length >= 4 ? value : fallback;
+  if (typeof value !== "string" || !value.trim()) return fallback;
+  const n = pathNumbers(value);
+  if (n.length < 4) return fallback;
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (let i = 0; i + 1 < n.length; i += 2) {
+    x0 = Math.min(x0, n[i]);
+    x1 = Math.max(x1, n[i]);
+    y0 = Math.min(y0, n[i + 1]);
+    y1 = Math.max(y1, n[i + 1]);
+  }
+  const m = 0.08;
+  const k = Math.min(width * (1 - 2 * m) / Math.max(1e-9, x1 - x0), height * (1 - 2 * m) / Math.max(1e-9, y1 - y0));
+  const ox = (width - (x1 - x0) * k) / 2 - x0 * k;
+  const oy = (height - (y1 - y0) * k) / 2 - y0 * k;
+  return n.map((v, i) => i % 2 ? v * k + oy : v * k + ox);
+}
 var CAMERA_DESCRIPTIONS = [
   {
     id: "fake.glide",
@@ -831,6 +914,29 @@ function renderPixels(d, v, request, width, height) {
       }
       break;
     }
+    case "fake.trail": {
+      const rgb = hexToRgb(v.color);
+      const pts = framePoints(v.path, width, height, [0, height / 2, width, height / 2]);
+      const r = v.width / 2;
+      for (let i = 0; i + 3 < pts.length; i += 2) {
+        const [ax, ay, bx, by] = [pts[i], pts[i + 1], pts[i + 2], pts[i + 3]];
+        const steps = Math.max(1, Math.ceil(Math.hypot(bx - ax, by - ay)));
+        for (let s = 0; s <= steps; s++) {
+          const cx = ax + (bx - ax) * s / steps;
+          const cy = ay + (by - ay) * s / steps;
+          for (let y = Math.max(0, Math.floor(cy - r)); y <= Math.min(height - 1, Math.ceil(cy + r)); y++)
+            for (let x = Math.max(0, Math.floor(cx - r)); x <= Math.min(width - 1, Math.ceil(cx + r)); x++) {
+              if ((x + 0.5 - cx) ** 2 + (y + 0.5 - cy) ** 2 > r * r) continue;
+              const i4 = (y * width + x) * 4;
+              o[i4] = rgb[0];
+              o[i4 + 1] = rgb[1];
+              o[i4 + 2] = rgb[2];
+              o[i4 + 3] = 255;
+            }
+        }
+      }
+      break;
+    }
     case "fake.bar": {
       const rgb = hexToRgb(v.color);
       const slide = v.slide;
@@ -983,10 +1089,29 @@ function createFakeEffectProvider(options = {}) {
         }
       };
     },
+    pathFromText(text, opts) {
+      if (typeof text !== "string" || !text.trim()) throw new EffectUnsupportedError("There are no words to write; pass some text.");
+      if (opts?.font !== void 0 && opts.font !== "zig") throw new EffectUnsupportedError(`The fake provider has no font "${opts.font}"; its only font is "zig".`);
+      return [...text].map((_, i) => `M${i * 10} 10 L${i * 10 + 3} 0 L${i * 10 + 6} 10`).join(" ");
+    },
     applyVectorEffect(id, target, values) {
       const d = get(id);
       if (d.kind !== "motion" && d.kind !== "vector") throw new EffectUnsupportedError(`"${id}" is a ${d.kind} effect, not a vector one.`, id);
       const v = resolveEffectValues(d, values);
+      if (d.id === "fake.route") {
+        const pts = Array.isArray(v.path) && v.path.length >= 4 ? v.path : typeof v.path === "string" && pathNumbers(v.path).length >= 4 ? pathNumbers(v.path) : [0, 20, 25, 0, 50, 20, 75, 40, 100, 20];
+        const xs = pts.filter((_, i) => i % 2 === 0);
+        const ys = pts.filter((_, i) => i % 2 === 1);
+        const [x0, y0] = [Math.min(...xs), Math.min(...ys)];
+        const [w, h] = [Math.max(1, Math.max(...xs) - x0), Math.max(1, Math.max(...ys) - y0)];
+        const dpath = "M" + pts.map((p) => +p.toFixed(3)).join(" ").replace(/^(\S+ \S+) /, "$1 L");
+        return {
+          svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${x0} ${y0} ${w} ${h}" width="${w}" height="${h}"><path id="route" d="${dpath}" fill="none" stroke="${v.color}" stroke-width="2"/></svg>`,
+          animate: [{ id: "route", ms: 400, attrs: { opacity: [0, 1] } }],
+          duration: 400,
+          loop: false
+        };
+      }
       if (d.kind === "vector") {
         return { svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle id="badge" cx="50" cy="50" r="40" fill="${v.color}"/></svg>`, animate: [{ id: "badge", ms: v.ms, attrs: { opacity: [0, 1] } }], duration: v.ms, loop: false };
       }
@@ -1537,10 +1662,12 @@ function createEffectAuthoringToolProvider(host, options) {
 export {
   CAMERA_MOVE_MAX_MS,
   CAMERA_MOVE_ROLES,
+  EFFECT_ACCEPTS,
   EFFECT_ERROR_CODES,
   EFFECT_KINDS,
   EFFECT_LAYER_ROLES,
   EFFECT_LAYER_USES,
+  EFFECT_PATH_FORMAT,
   EFFECT_SEQUENCE_NAME,
   EFFECT_SUBJECT_KINDS,
   EFFECT_TEMPLATE_SLOT_TYPES,
@@ -1601,6 +1728,7 @@ export {
   isSubjectTemplateSlot,
   linearToSrgb,
   normaliseEffectTag,
+  pathControlsOf,
   renderEffectThumbnail,
   resolveCameraMoveSpec,
   resolveEffectValues,

package/dist/effects/types.d.cts

@@ -76,6 +76,29 @@ export interface EffectSummary {
     backgroundOpacity?: string;
     /** How a `camera` effect moves. Present exactly when `kind` is `camera`. */
     camera?: EffectCameraMove;
+    /**
+     * What it takes besides pictures, for search: `path` when a control draws along a path given at
+     * run time (`pathControlsOf` names them). Present exactly when it takes one.
+     */
+    accepts?: readonly EffectAccept[];
+}
+/** What an effect can take besides pictures: `path`, a control that draws along a path given at run time. */
+export type EffectAccept = 'path';
+export declare const EFFECT_ACCEPTS: readonly EffectAccept[];
+/**
+ * The JSON Schema `format` of a path control: a string of SVG path data (fitted into the frame as
+ * the control's description says), a flat list of numbers `[x0, y0, x1, y1, …]` in frame pixels
+ * from the top left (used as given), or `""` for no path.
+ */
+export declare const EFFECT_PATH_FORMAT = "svg-path";
+/** A path control's value: SVG path data, points in frame pixels, or `""` for none. */
+export type EffectPathValue = string | readonly number[];
+/** How `pathFromText` writes words. */
+export interface EffectTextPathOptions {
+    /** A font the provider offers for single-stroke writing (its own names, e.g. `script`, `sans`); default its first. */
+    font?: string;
+    /** Where the line sits in its box (default `start`). */
+    align?: 'start' | 'middle' | 'end';
 }
 export interface EffectSearchOptions {
     kind?: EffectKind;
@@ -85,6 +108,8 @@ export interface EffectSearchOptions {
     tags?: readonly string[];
     /** Most results to return. */
     limit?: number;
+    /** Only effects that take every one of these (e.g. `['path']`: effects that draw along a path). */
+    accepts?: readonly EffectAccept[];
 }
 /** One control value: a number, a `#rrggbb` colour or other string, a switch, or a vector of numbers. */
 export type EffectValue = number | string | boolean | readonly number[];
@@ -524,6 +549,12 @@ export interface EffectProvider {
      * effect cannot use with `EffectUnsupportedError`.
      */
     applyVectorEffect?(id: string, target: EffectVectorTarget, values?: EffectValues): MaybePromise<EffectVectorMotion>;
+    /**
+     * Words as single-stroke SVG path data, for a path control (an effect that writes a name along
+     * its path). Optional: editors refuse words when it is missing. Throws `EffectUnsupportedError`
+     * for a font it does not have.
+     */
+    pathFromText?(text: string, options?: EffectTextPathOptions): MaybePromise<string>;
     /**
      * Opens an effect for editing. Present when `capabilities.supportsAuthoring`. Unknown ids throw
      * `UnknownEffectError`; an effect the provider cannot edit throws `EffectUnsupportedError`.

package/dist/effects/types.d.ts

@@ -76,6 +76,29 @@ export interface EffectSummary {
     backgroundOpacity?: string;
     /** How a `camera` effect moves. Present exactly when `kind` is `camera`. */
     camera?: EffectCameraMove;
+    /**
+     * What it takes besides pictures, for search: `path` when a control draws along a path given at
+     * run time (`pathControlsOf` names them). Present exactly when it takes one.
+     */
+    accepts?: readonly EffectAccept[];
+}
+/** What an effect can take besides pictures: `path`, a control that draws along a path given at run time. */
+export type EffectAccept = 'path';
+export declare const EFFECT_ACCEPTS: readonly EffectAccept[];
+/**
+ * The JSON Schema `format` of a path control: a string of SVG path data (fitted into the frame as
+ * the control's description says), a flat list of numbers `[x0, y0, x1, y1, …]` in frame pixels
+ * from the top left (used as given), or `""` for no path.
+ */
+export declare const EFFECT_PATH_FORMAT = "svg-path";
+/** A path control's value: SVG path data, points in frame pixels, or `""` for none. */
+export type EffectPathValue = string | readonly number[];
+/** How `pathFromText` writes words. */
+export interface EffectTextPathOptions {
+    /** A font the provider offers for single-stroke writing (its own names, e.g. `script`, `sans`); default its first. */
+    font?: string;
+    /** Where the line sits in its box (default `start`). */
+    align?: 'start' | 'middle' | 'end';
 }
 export interface EffectSearchOptions {
     kind?: EffectKind;
@@ -85,6 +108,8 @@ export interface EffectSearchOptions {
     tags?: readonly string[];
     /** Most results to return. */
     limit?: number;
+    /** Only effects that take every one of these (e.g. `['path']`: effects that draw along a path). */
+    accepts?: readonly EffectAccept[];
 }
 /** One control value: a number, a `#rrggbb` colour or other string, a switch, or a vector of numbers. */
 export type EffectValue = number | string | boolean | readonly number[];
@@ -524,6 +549,12 @@ export interface EffectProvider {
      * effect cannot use with `EffectUnsupportedError`.
      */
     applyVectorEffect?(id: string, target: EffectVectorTarget, values?: EffectValues): MaybePromise<EffectVectorMotion>;
+    /**
+     * Words as single-stroke SVG path data, for a path control (an effect that writes a name along
+     * its path). Optional: editors refuse words when it is missing. Throws `EffectUnsupportedError`
+     * for a font it does not have.
+     */
+    pathFromText?(text: string, options?: EffectTextPathOptions): MaybePromise<string>;
     /**
      * Opens an effect for editing. Present when `capabilities.supportsAuthoring`. Unknown ids throw
      * `UnknownEffectError`; an effect the provider cannot edit throws `EffectUnsupportedError`.