@pixerate/editor 0.67.0 → 0.67.1

package/dist/animation-editor/index.cjs

@@ -1501,7 +1501,7 @@ function checkMotionScene(scene) {
   if (scene.trigger) {
     if ((_nullishCoalesce(scene.loop, () => ( "none"))) !== "none") issues.push(motionIssue("trigger-loop", `The scene plays on ${scene.trigger}, so its "${scene.loop}" loop does not apply; set loop to "none" or remove the trigger.`, {}));
     if (scene.trigger === "click") {
-      if (scene.shots.length === 1) issues.push(motionIssue("click-one-shot", "The scene plays on click but has one shot, so every click replays it from the start; split it into shots (the first plays on load, each click plays the next).", { shot: scene.shots[0].id }));
+      if (scene.shots.length === 1) issues.push(motionIssue("click-one-shot", "The scene plays on click but has one shot, so every click replays it from the start; split it into shots (each click plays the next one).", { shot: scene.shots[0].id }));
       scene.shots.forEach((shot, i) => {
         if (i > 0 && shot.at) issues.push(motionIssue("click-cue", `Shot "${shot.id}" is cued, but on click a shot starts when it is clicked to; remove its "at" or the trigger.`, { shot: shot.id }));
       });
@@ -2065,7 +2065,7 @@ function toFlairSvgMotion(scene, options = {}) {
   animate.sort((x, y) => (_nullishCoalesce(x.delay, () => ( 0))) - (_nullishCoalesce(y.delay, () => ( 0))));
   const lastChange = animate.reduce((m, a) => Math.max(m, (_nullishCoalesce(a.delay, () => ( 0))) + (_nullishCoalesce(a.ms, () => ( 0)))), 0);
   const trigger = options.trigger === null ? void 0 : _nullishCoalesce(options.trigger, () => ( scene.trigger));
-  if (trigger === "click" && timeline.shots.length > 1) {
+  if (trigger === "click" && timeline.shots.length) {
     for (const a of animate) {
       const at = _nullishCoalesce(a.delay, () => ( 0));
       let step = 0;
@@ -2075,7 +2075,7 @@ function toFlairSvgMotion(scene, options = {}) {
       const delay = round2(at - timeline.shots[step].start);
       delete a.delay;
       if (delay > 0) a.delay = delay;
-      if (step > 0) a.step = step;
+      a.step = step + 1;
     }
     animate.sort((x, y) => (_nullishCoalesce(x.step, () => ( 0))) - (_nullishCoalesce(y.step, () => ( 0))) || (_nullishCoalesce(x.delay, () => ( 0))) - (_nullishCoalesce(y.delay, () => ( 0))));
   }
@@ -2260,7 +2260,8 @@ function fromFlairSvgMotion(input, options = {}) {
   const nodes = indexMotionNodes(artwork.nodes);
   const byStep = /* @__PURE__ */ new Map();
   for (const anim of _nullishCoalesce(motion.animate, () => ( []))) {
-    const step = Math.max(0, Math.floor(_nullishCoalesce(anim.step, () => ( 0))));
+    const raw = Math.max(0, Math.floor(_nullishCoalesce(anim.step, () => ( 0))));
+    const step = options.clickSteps ? Math.max(1, raw) : raw;
     if (!byStep.has(step)) byStep.set(step, []);
     byStep.get(step).push(anim);
   }
@@ -2311,7 +2312,7 @@ function presetColor(value) {
 }
 function fromFlairVectorEffect(effect, options = {}) {
   if (!effect || effect.kind !== "vector" || !effect.motion) throw new Error('Give a Flair vector effect: { kind: "vector", id, name, motion: { svg, animate } }.');
-  const result = fromFlairSvgMotion(effect.motion, { name: _nullishCoalesce(_nullishCoalesce(options.name, () => ( effect.id)), () => ( effect.name)), hold: _nullishCoalesce(options.hold, () => ( effect.hold)) });
+  const result = fromFlairSvgMotion(effect.motion, { name: _nullishCoalesce(_nullishCoalesce(options.name, () => ( effect.id)), () => ( effect.name)), hold: _nullishCoalesce(options.hold, () => ( effect.hold)), ...effect.trigger === "click" ? { clickSteps: true } : {} });
   const names = new Set((_nullishCoalesce(result.scene.controls, () => ( []))).map((c) => c.name));
   const presets = (_nullishCoalesce(effect.presets, () => ( []))).map((p) => ({ name: p.name, values: Object.fromEntries(Object.entries(p.values).flatMap(([k, v]) => names.has(k) && presetColor(v) ? [[k, presetColor(v)]] : [])) })).filter((p) => Object.keys(p.values).length);
   const scene = { ...result.scene, ...effect.description ? { description: effect.description } : {}, ...presets.length ? { presets } : {}, ...effect.trigger ? { trigger: effect.trigger } : {} };
@@ -3025,7 +3026,7 @@ var SETTINGS = {
   loop: { type: "string", enum: ["none", "loop", "ping-pong"], description: "Playback past the end (default none)." },
   trigger: {
     anyOf: [{ type: "string", enum: ["click", "hover", "press", "scroll"] }, { type: "null" }],
-    description: "Play in answer to the viewer when exported to Flair: click (the first shot plays on load, each click plays the next shot), hover or press (plays while the pointer is over or down, rewinds when it leaves), scroll (scrubs as it scrolls past). null plays on its own (default). The editor previews it played through."
+    description: "Play in answer to the viewer when exported to Flair: click (nothing plays until a click; each click plays the next shot, then the first again), hover or press (plays while the pointer is over or down, rewinds when it leaves), scroll (scrubs as it scrolls past). null plays on its own (default). The editor previews it played through."
   },
   fps: { type: "number", minimum: 1, maximum: 120, description: "Sampling rate for exports (default 30)." },
   steps: { anyOf: [{ type: "number", exclusiveMinimum: 0, maximum: 120 }, { type: "null" }], description: 'Stepped time for every command without its own: changes hold on a grid of this many frames per second (12 = "on twos" at 24 fps) for a hand-drawn look; null makes it smooth again (default).' },
@@ -3621,7 +3622,7 @@ Working method
 1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id; or import_flair_effect to start from a Flair effect and edit it).
 2. Plan a few shots, each one idea. Add them with insert_shots (add_commands, update_command, move_command and delete_commands refine a shot), or edit_animation to make several edits as one step (dry_run first when unsure).
 3. To hit a length, fit_animation (keep the shots whose pace matters). check_animation and fix every error and warning; render_animation_frame (shot + "end") to look at the result; add onion_skin or motion_paths to see the motion in one picture, or get_motion_path for the numbers.
-- For something the viewer plays (a button, a toggle, a step-by-step explainer), set "trigger" with set_animation_settings: click plays the next shot on each click (make the last shot lead back to how the first ended for a toggle), hover or press plays and rewinds, scroll scrubs.
+- For something the viewer plays (a button, a toggle, a step-by-step explainer), set "trigger" with set_animation_settings: click plays the next shot on each click and then starts over (make the last shot put things back for a toggle), hover or press plays and rewinds, scroll scrubs.
 4. To make a reusable Flair effect, set_animation_controls (colour controls stand for every use of their default colour) and export_flair_effect.
 
 Keep motion purposeful: one thing moving at a time reads best, ease-out for arrivals, ease-in for exits, and hold long enough to see each result.`;