@pixerate/editor 0.26.0 → 0.27.0

package/dist/canvas/index.js

@@ -1,7 +1,3 @@
-import {
-  DEFAULT_ARRANGE_SHORTCUTS,
-  matchArrangeShortcut
-} from "../chunk-7DWMJCAT.js";
 import {
   TokenError,
   getTokenCollection,
@@ -27,6 +23,10 @@ import {
   overlaps,
   placeBeside
 } from "../chunk-VHZCXHS4.js";
+import {
+  DEFAULT_ARRANGE_SHORTCUTS,
+  matchArrangeShortcut
+} from "../chunk-7DWMJCAT.js";
 
 // src/canvas/clock.ts
 var pageHidden = () => typeof document !== "undefined" && document.hidden;
@@ -11382,6 +11382,289 @@ function restoreCanvasMainComponent(nodes, id, options = {}) {
   for (const nn of nested) after = rebaseInstance(after, nn, options.tokens);
   return done(nodes, after, [compId], options);
 }
+var VARIANT_GAP = 20;
+var variantKey = (values) => formatVariantName(values);
+function variantNameProblem(kind, s) {
+  const label = kind === "property" ? "Variant property names" : "Variant values";
+  if (!s) return `${label} must not be empty.`;
+  if (/[,=]/.test(s)) return `${label} can't contain "," or "=".`;
+  return void 0;
+}
+function cleanVariantPairs(pairs) {
+  const out = {};
+  for (const [rawKey, rawValue] of Object.entries(pairs)) {
+    if (typeof rawValue !== "string") return `"${rawKey}" takes a text value.`;
+    const k = rawKey.trim();
+    const v = rawValue.trim();
+    const problem = variantNameProblem("property", k) ?? variantNameProblem("value", v);
+    if (problem) return problem;
+    out[k] = v;
+  }
+  return out;
+}
+function variantOrder(ids, values) {
+  const order = [];
+  for (const id of ids) for (const k of Object.keys(values.get(id) ?? {})) if (!order.includes(k)) order.push(k);
+  return order;
+}
+function withVariantValues(node, values, order) {
+  const name = formatVariantName(values, order);
+  const data = { ...dataOf(node), [COMPONENT_DATA_KEY]: { ...getComponentData(node) ?? {}, variant: values }, label: name };
+  if (typeof data.name === "string" && data.name.includes("=")) data.name = name;
+  return same(dataOf(node), data) ? node : withData(node, data);
+}
+function closestVariant(list, wanted) {
+  const entries = Object.entries(wanted);
+  let best;
+  const better = (a, b) => {
+    for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return a[i] > b[i];
+    return false;
+  };
+  for (const v of list) {
+    const values = getVariantValues(v);
+    const matches2 = entries.map(([k, val]) => values[k] === val ? 1 : 0);
+    const score = [matches2.reduce((a, b) => a + b, 0), ...matches2];
+    if (!best || better(score, best.score)) best = { score, id: v.id };
+  }
+  return best?.id;
+}
+function variantEditIn(g, setId) {
+  const set = g.get(setId);
+  if (!isCanvasComponentSet(set)) return { code: "not-found", reason: "Choose a component set." };
+  if (owningInstanceIn(g, setId)) return { code: "inside-instance", reason: "A component set inside an instance can't be edited: edit its main." };
+  const variants = variantsIn(g, setId);
+  return { set, variants, values: new Map(variants.map((v) => [v.id, getVariantValues(v)])) };
+}
+function addMissingProperties(edit, pairs, defaultValue) {
+  const known = /* @__PURE__ */ new Set();
+  for (const v of edit.values.values()) for (const k of Object.keys(v)) known.add(k);
+  const added = Object.keys(pairs).filter((k) => !known.has(k));
+  if (added.length === 0) return void 0;
+  const problem = variantNameProblem("value", defaultValue);
+  if (problem) return problem;
+  const defs = dataOf(edit.set)[COMPONENT_SET_DATA_KEY]?.properties;
+  const clash = isRecord(defs) ? added.find((k) => k in defs) : void 0;
+  if (clash) return `"${clash}" is a component property.`;
+  for (const [id, v] of edit.values) {
+    const next = { ...v };
+    for (const k of added) next[k] = defaultValue;
+    edit.values.set(id, next);
+  }
+  return void 0;
+}
+function duplicateAmong(values, ids) {
+  for (const id of ids) {
+    const key = variantKey(values.get(id));
+    for (const [other, v] of values) {
+      if (other !== id && variantKey(v) === key) return formatVariantName(values.get(id), variantOrder([...values.keys()], values));
+    }
+  }
+  return void 0;
+}
+function writeVariantEdit(edit, extra = []) {
+  const order = variantOrder([...edit.variants.map((v) => v.id), ...extra], edit.values);
+  const updates = /* @__PURE__ */ new Map();
+  for (const v of edit.variants) {
+    const next = withVariantValues(v, edit.values.get(v.id), order);
+    if (next !== v) updates.set(v.id, next);
+  }
+  return updates;
+}
+function nextVariantValuesIn(g, setId, fromId) {
+  const variants = variantsIn(g, setId);
+  const base = getVariantValues(g.get(fromId));
+  const first = variantOptionsIn(g, setId)[0];
+  const prop = first?.name ?? "Property 1";
+  const used = new Set(variants.map((v) => variantKey(getVariantValues(v))));
+  for (let k = variants.length + 1; ; k++) {
+    const values = { ...base, [prop]: `Variant${k}` };
+    if (!first?.values.includes(`Variant${k}`) && !used.has(variantKey(values))) return values;
+  }
+}
+function getNextVariantValues(nodes, setId, from) {
+  const g = new Graph(nodes);
+  return nextVariantValuesIn(g, setId, from ?? defaultVariantIn(g, setId));
+}
+function relayoutSet(nodes, setId, options) {
+  if (options.layout === false || !getAutoLayout(nodes.find((n) => n.id === setId))) return nodes;
+  return applyNodeUpdates(nodes, layoutUpMany(nodes, [setId], typeof options.layout === "object" ? options.layout : {}));
+}
+function addCanvasVariant(nodes, setId, options = {}) {
+  const g = new Graph(nodes);
+  const edit = variantEditIn(g, setId);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  if (edit.variants.length === 0) return fail(nodes, "invalid", "The set has no variant to duplicate.");
+  const fromId = options.from ?? defaultVariantIn(g, setId);
+  const source = edit.variants.find((v) => v.id === fromId);
+  if (!source) return fail(nodes, "not-found", `"${fromId}" is not a variant of this set.`);
+  const wanted = cleanVariantPairs(options.variant ?? nextVariantValuesIn(g, setId, fromId));
+  if (typeof wanted === "string") return fail(nodes, "invalid", wanted);
+  const problem = addMissingProperties(edit, wanted, (options.defaultValue ?? "Default").trim());
+  if (problem) return fail(nodes, "invalid", problem);
+  const id = options.id ?? uniqueId(`${setId}-variant`, g.byId);
+  if (g.get(id)) return fail(nodes, "invalid", `Id "${id}" is taken.`);
+  edit.values.set(id, { ...edit.values.get(fromId), ...wanted });
+  const dup = duplicateAmong(edit.values, [id]);
+  if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
+  const autoLayout = !!getAutoLayout(edit.set);
+  const { width, height } = getNodeSize(source);
+  let position = options.position ? { ...options.position } : { ...source.position };
+  if (!options.position && !autoLayout) {
+    const rects = edit.variants.map((v) => ({ ...v.position, ...getNodeSize(v) }));
+    position = { x: source.position.x + width + VARIANT_GAP, y: source.position.y };
+    for (let k = 0; k <= rects.length; k++) {
+      const hit = rects.find((r) => position.x < r.x + r.width && r.x < position.x + width && position.y < r.y + r.height && r.y < position.y + height);
+      if (!hit) break;
+      position = { x: hit.x + hit.width + VARIANT_GAP, y: position.y };
+    }
+  }
+  const taken = new Set(g.byId.keys());
+  taken.add(id);
+  const map = /* @__PURE__ */ new Map([[fromId, id]]);
+  const sub3 = g.subtree(fromId);
+  for (const d of sub3) {
+    if (d === fromId) continue;
+    const nid = uniqueId(`${id}-${d}`, taken);
+    taken.add(nid);
+    map.set(d, nid);
+  }
+  const order = variantOrder([...edit.variants.map((v) => v.id), id], edit.values);
+  const subSet = new Set(sub3);
+  const copies = nodes.filter((n) => subSet.has(n.id)).map((n) => {
+    const next = { ...n, id: map.get(n.id) };
+    if (n.parentId !== void 0 && n.id !== fromId) next.parentId = map.get(n.parentId) ?? n.parentId;
+    for (const k of RUNTIME_KEYS) delete next[k];
+    if (n.id !== fromId) return next;
+    next.position = position;
+    return withVariantValues(next, edit.values.get(id), order);
+  });
+  const updates = writeVariantEdit(edit, [id]);
+  const inSet = new Set(g.subtree(setId));
+  let last = -1;
+  nodes.forEach((n, i) => {
+    if (inSet.has(n.id)) last = i;
+  });
+  let after = [];
+  nodes.forEach((n, i) => {
+    after.push(updates.get(n.id) ?? n);
+    if (i === last) after.push(...copies);
+  });
+  if (autoLayout && !options.position) after = relayoutSet(after, setId, options);
+  else {
+    const size = getNodeSize(edit.set);
+    const w = Math.max(size.width, position.x + width + VARIANT_GAP);
+    const h = Math.max(size.height, position.y + height + VARIANT_GAP);
+    if (w !== size.width || h !== size.height) after = applyNodeUpdates(after, [{ id: setId, width: w, height: h }]);
+  }
+  return done(nodes, after, [id], options);
+}
+function removeCanvasVariant(nodes, variantId, options = {}) {
+  const g = new Graph(nodes);
+  const set = variantSetIn(g, variantId);
+  if (!set) return fail(nodes, "not-found", "Choose a variant of a component set.");
+  if (owningInstanceIn(g, set.id)) return fail(nodes, "inside-instance", "A component set inside an instance can't be edited: edit its main.");
+  const others = variantsIn(g, set.id).filter((v) => v.id !== variantId);
+  if (others.length === 0) return fail(nodes, "invalid", "A component set needs at least one variant: delete the set instead.");
+  const replacement = closestVariant(others, getVariantValues(g.get(variantId)));
+  const swap = (v) => v === variantId ? replacement : v;
+  const repointed = nodes.map((n) => {
+    const data = dataOf(n);
+    let next;
+    const inst = getInstanceData(n);
+    if (inst) {
+      const moved = { ...inst, componentId: swap(inst.componentId) };
+      if (inst.properties) moved.properties = Object.fromEntries(Object.entries(inst.properties).map(([k, v]) => [k, swap(v)]));
+      if (!same(moved, inst)) next = { ...data, [INSTANCE_DATA_KEY]: moved };
+    }
+    for (const key of [COMPONENT_DATA_KEY, COMPONENT_SET_DATA_KEY]) {
+      const owner = data[key];
+      if (!isRecord(owner) || !isRecord(owner.properties)) continue;
+      const defs = {};
+      for (const [k, def] of Object.entries(owner.properties)) {
+        defs[k] = def.type === "instanceSwap" ? { ...def, default: swap(def.default), ...def.preferred ? { preferred: [...new Set(def.preferred.map(swap))] } : {} } : def;
+      }
+      if (!same(defs, owner.properties)) next = { ...next ?? data, [key]: { ...owner, properties: defs } };
+    }
+    return next ? withData(n, next) : n;
+  });
+  const mid = syncCanvasComponents(nodes, repointed, options);
+  const gone = new Set(new Graph(mid).subtree(variantId));
+  const after = relayoutSet(
+    mid.filter((n) => !gone.has(n.id)),
+    set.id,
+    options
+  );
+  return { ok: true, nodes: syncCanvasComponents(mid, after, options), ids: [replacement] };
+}
+function setCanvasVariantProperties(nodes, variantId, values, options = {}) {
+  const g = new Graph(nodes);
+  const set = variantSetIn(g, variantId);
+  if (!set) return fail(nodes, "not-found", "Choose a variant of a component set.");
+  const edit = variantEditIn(g, set.id);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  const wanted = cleanVariantPairs(values);
+  if (typeof wanted === "string") return fail(nodes, "invalid", wanted);
+  const problem = addMissingProperties(edit, wanted, (options.defaultValue ?? "Default").trim());
+  if (problem) return fail(nodes, "invalid", problem);
+  edit.values.set(variantId, { ...edit.values.get(variantId), ...wanted });
+  const dup = duplicateAmong(edit.values, [variantId]);
+  if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
+  const updates = writeVariantEdit(edit);
+  if (updates.size === 0) return { ok: true, nodes, ids: [variantId] };
+  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [variantId], options);
+}
+function updateInstanceValues(g, setId, updates, fn) {
+  const ids = new Set(variantsIn(g, setId).map((v) => v.id));
+  for (const n of g.nodes) {
+    const inst = getInstanceData(n);
+    if (!inst?.properties || !ids.has(inst.componentId)) continue;
+    const props = fn({ ...inst.properties });
+    if (same(props, inst.properties)) continue;
+    const cur = updates.get(n.id) ?? n;
+    updates.set(n.id, withData(cur, { ...dataOf(cur), [INSTANCE_DATA_KEY]: { ...inst, properties: props } }));
+  }
+}
+function renameCanvasVariantProperty(nodes, setId, name, newName, options = {}) {
+  const g = new Graph(nodes);
+  const edit = variantEditIn(g, setId);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  const known = variantOptionsIn(g, setId);
+  if (!known.some((o) => o.name === name)) return fail(nodes, "unknown-property", `Unknown variant property "${name}".`);
+  const to = newName.trim();
+  const problem = variantNameProblem("property", to);
+  if (problem) return fail(nodes, "invalid", problem);
+  if (to === name) return { ok: true, nodes, ids: [setId] };
+  if (known.some((o) => o.name === to)) return fail(nodes, "invalid", `"${to}" exists already.`);
+  if (to in propertyDefsIn(g, edit.variants[0].id)) return fail(nodes, "invalid", `"${to}" is a component property.`);
+  const rename = (v) => Object.fromEntries(Object.entries(v).map(([k, val]) => [k === name ? to : k, val]));
+  for (const [id, v] of edit.values) edit.values.set(id, rename(v));
+  const updates = writeVariantEdit(edit);
+  updateInstanceValues(g, setId, updates, (props) => name in props ? rename(props) : props);
+  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [setId], options);
+}
+function renameCanvasVariantValue(nodes, setId, property, value, newValue, options = {}) {
+  const g = new Graph(nodes);
+  const edit = variantEditIn(g, setId);
+  if (!("set" in edit)) return fail(nodes, edit.code, edit.reason);
+  const option = variantOptionsIn(g, setId).find((o) => o.name === property);
+  if (!option) return fail(nodes, "unknown-property", `Unknown variant property "${property}".`);
+  if (!option.values.includes(value)) return fail(nodes, "invalid", `"${property}" has no value "${value}".`);
+  const to = newValue.trim();
+  const problem = variantNameProblem("value", to);
+  if (problem) return fail(nodes, "invalid", problem);
+  if (to === value) return { ok: true, nodes, ids: [setId] };
+  const touched = [];
+  for (const [id, v] of edit.values) {
+    if (v[property] !== value) continue;
+    edit.values.set(id, { ...v, [property]: to });
+    touched.push(id);
+  }
+  const dup = duplicateAmong(edit.values, touched);
+  if (dup) return fail(nodes, "invalid", `A variant with ${dup} exists already.`);
+  const updates = writeVariantEdit(edit);
+  updateInstanceValues(g, setId, updates, (props) => props[property] === value ? { ...props, [property]: to } : props);
+  return done(nodes, nodes.map((n) => updates.get(n.id) ?? n), [setId], options);
+}
 
 // src/canvas/componentsController.ts
 function makePatch(from, to) {
@@ -11449,6 +11732,24 @@ function createCanvasComponentsController(options) {
   }
   const reason = (result) => result.ok ? true : result.reason;
   const nodes = () => options.getNodes();
+  const refused = (why) => ({ ok: false, nodes: nodes(), code: "not-found", reason: why });
+  const setOf = (id) => {
+    const at = target(id);
+    const node = at ? nodes().find((n) => n.id === at) : void 0;
+    if (!node) return void 0;
+    return isCanvasComponentSet(node) ? node.id : getVariantSet(nodes(), node.id);
+  };
+  const variantOf = (id) => {
+    const at = target(id);
+    return at && getVariantSet(nodes(), at) ? at : void 0;
+  };
+  const NO_SET = "Select a component set or one of its variants.";
+  const NO_VARIANT = "Select a variant of a component set.";
+  const addOptions = (setId, addOptions_) => {
+    if (addOptions_.from !== void 0 || setId !== void 0) return addOptions_;
+    const v = variantOf();
+    return v ? { ...addOptions_, from: v } : addOptions_;
+  };
   const controller = {
     sync,
     /** Rebuilds every instance from its main (e.g. after loading), not recorded in history. */
@@ -11563,6 +11864,63 @@ function createCanvasComponentsController(options) {
         (n) => setCanvasComponentProperty(n, componentId, name, def, { ...syncOptions(), ...propertyOptions })
       );
     },
+    /**
+     * Adds a variant to a set (default: the selection's set) by duplicating `from` (default:
+     * the selected variant, else the default variant) with the given `variant` values.
+     */
+    addVariant(setId, variantOptions = {}) {
+      const set2 = setOf(setId);
+      if (!set2) return refused(NO_SET);
+      const opts = addOptions(setId, variantOptions);
+      return run("Add Variant", (n) => addCanvasVariant(n, set2, { ...syncOptions(), ...opts }));
+    },
+    canAddVariant(setId, variantOptions = {}) {
+      const set2 = setOf(setId);
+      return set2 ? reason(addCanvasVariant(nodes(), set2, { ...addOptions(setId, variantOptions), layout: false })) : NO_SET;
+    },
+    /** Removes a variant (default: the selected one); its instances switch to the closest variant. */
+    removeVariant(variantId) {
+      const v = variantOf(variantId);
+      if (!v) return refused(NO_VARIANT);
+      return run("Remove Variant", (n) => removeCanvasVariant(n, v, syncOptions()));
+    },
+    canRemoveVariant(variantId) {
+      const v = variantOf(variantId);
+      return v ? reason(removeCanvasVariant(nodes(), v, { layout: false })) : NO_VARIANT;
+    },
+    /** Edits a variant's property values (default: the selected variant). */
+    setVariantProperties(values, variantId, variantOptions = {}) {
+      const v = variantOf(variantId);
+      if (!v) return refused(NO_VARIANT);
+      return run("Edit Variant", (n) => setCanvasVariantProperties(n, v, values, { ...syncOptions(), ...variantOptions }));
+    },
+    canSetVariantProperties(values, variantId) {
+      const v = variantOf(variantId);
+      if (!v) return NO_VARIANT;
+      return values ? reason(setCanvasVariantProperties(nodes(), v, values, { layout: false })) : true;
+    },
+    /** Renames a variant property across a set (default: the selection's set). */
+    renameVariantProperty(name, newName, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return refused(NO_SET);
+      return run("Rename Variant Property", (n) => renameCanvasVariantProperty(n, set2, name, newName, syncOptions()));
+    },
+    canRenameVariantProperty(name, newName, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return NO_SET;
+      return name !== void 0 && newName !== void 0 ? reason(renameCanvasVariantProperty(nodes(), set2, name, newName, { layout: false })) : true;
+    },
+    /** Renames a value of a variant property across a set (default: the selection's set). */
+    renameVariantValue(property, value, newValue, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return refused(NO_SET);
+      return run("Rename Variant Value", (n) => renameCanvasVariantValue(n, set2, property, value, newValue, syncOptions()));
+    },
+    canRenameVariantValue(property, value, newValue, setId) {
+      const set2 = setOf(setId);
+      if (!set2) return NO_SET;
+      return property !== void 0 && value !== void 0 && newValue !== void 0 ? reason(renameCanvasVariantValue(nodes(), set2, property, value, newValue, { layout: false })) : true;
+    },
     /** Binds (or with `null` unbinds) a main layer's field to a component property. */
     bindComponentProperty(layerId, field, name) {
       return run("Bind Component Property", (n) => bindCanvasComponentProperty(n, layerId, field, name, syncOptions()));
@@ -11644,6 +12002,7 @@ export {
   StreamingLayoutManager,
   TOKEN_BINDINGS_DATA_KEY,
   TOKEN_MODES_DATA_KEY,
+  addCanvasVariant,
   addKeyframesAtTime,
   alignNodes,
   animateNode,
@@ -11767,6 +12126,7 @@ export {
   getLayoutParent,
   getLayoutSizing,
   getLayoutedNodes,
+  getNextVariantValues,
   getNodeAnimation,
   getNodeOverrides,
   getNodeRect,
@@ -11880,7 +12240,10 @@ export {
   recordAnimationChanges,
   relayoutUpdates,
   remapPastedNodes,
+  removeCanvasVariant,
   removeTrack,
+  renameCanvasVariantProperty,
+  renameCanvasVariantValue,
   reorderNodes,
   repositionNodesTo,
   resetCanvasInstanceOverrides,
@@ -11908,6 +12271,7 @@ export {
   setCanvasComponentProperty,
   setCanvasInstanceProperties,
   setCanvasTokenMode,
+  setCanvasVariantProperties,
   setKeyframe,
   setKeyframeEasing,
   setMotionPath,