@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/cjs/vector/vectorAnimation.js

@@ -1,155 +1,128 @@
-'use strict';
-
-/**
- * vectorAnimation — model + CSS keyframes export for shape animations.
- *
- * The editor stores one optional `ShapeAnimation` per VShape (by shape id).
- * Each animation has a duration, repeat policy, and a list of keyframes
- * keyed by normalized time `t` (0..1). Keyframes carry an animatable
- * subset of CSS properties — transform pieces (rotate/scale/translate)
- * and opacity — applied to the shape via a `transform` override + opacity
- * during preview, and emitted as `@keyframes` blocks in exports.
- */
-/** Built-in presets users can drop onto any shape. */
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const ANIMATION_PRESETS = {
-    spin: {
-        duration: 1200,
-        repeat: 'infinite',
-        direction: 'normal',
-        easing: 'linear',
-        keyframes: [
-            { t: 0, rotate: 0 },
-            { t: 1, rotate: 360 },
-        ],
-    },
-    pulse: {
-        duration: 1000,
-        repeat: 'infinite',
-        direction: 'alternate',
-        easing: 'ease-in-out',
-        keyframes: [
-            { t: 0, scale: 1, opacity: 1 },
-            { t: 1, scale: 1.15, opacity: 0.75 },
-        ],
-    },
-    bounce: {
-        duration: 900,
-        repeat: 'infinite',
-        direction: 'alternate',
-        easing: 'ease-in-out',
-        keyframes: [
-            { t: 0, translateY: 0 },
-            { t: 1, translateY: -8 },
-        ],
-    },
-    fade: {
-        duration: 1500,
-        repeat: 'infinite',
-        direction: 'alternate',
-        easing: 'ease-in-out',
-        keyframes: [
-            { t: 0, opacity: 1 },
-            { t: 1, opacity: 0.2 },
-        ],
-    },
+  spin: {
+    duration: 1200,
+    repeat: "infinite",
+    direction: "normal",
+    easing: "linear",
+    keyframes: [
+      { t: 0, rotate: 0 },
+      { t: 1, rotate: 360 }
+    ]
+  },
+  pulse: {
+    duration: 1e3,
+    repeat: "infinite",
+    direction: "alternate",
+    easing: "ease-in-out",
+    keyframes: [
+      { t: 0, scale: 1, opacity: 1 },
+      { t: 1, scale: 1.15, opacity: 0.75 }
+    ]
+  },
+  bounce: {
+    duration: 900,
+    repeat: "infinite",
+    direction: "alternate",
+    easing: "ease-in-out",
+    keyframes: [
+      { t: 0, translateY: 0 },
+      { t: 1, translateY: -8 }
+    ]
+  },
+  fade: {
+    duration: 1500,
+    repeat: "infinite",
+    direction: "alternate",
+    easing: "ease-in-out",
+    keyframes: [
+      { t: 0, opacity: 1 },
+      { t: 1, opacity: 0.2 }
+    ]
+  }
 };
 function lerp(a, b, k) {
-    return a + (b - a) * k;
+  return a + (b - a) * k;
 }
-/** Sample an animation at normalized time `t` (0..1). Linear interpolation
- * between adjacent keyframes (easing is applied at the CSS layer by the
- * browser; preview here is simple linear). */
 function sampleAnimation(anim, t) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const ks = anim.keyframes;
-    if (ks.length === 0) {
-        return { t };
-    }
-    if (t <= ks[0].t) {
-        return { ...ks[0], t };
-    }
-    if (t >= ks[ks.length - 1].t) {
-        return { ...ks[ks.length - 1], t };
-    }
-    for (let i = 0; i < ks.length - 1; i++) {
-        const a = ks[i];
-        const b = ks[i + 1];
-        if (t >= a.t && t <= b.t) {
-            const k = (t - a.t) / Math.max(1e-6, b.t - a.t);
-            return {
-                t,
-                rotate: a.rotate != null || b.rotate != null ? lerp((_a = a.rotate) !== null && _a !== void 0 ? _a : 0, (_b = b.rotate) !== null && _b !== void 0 ? _b : 0, k) : undefined,
-                scale: a.scale != null || b.scale != null ? lerp((_c = a.scale) !== null && _c !== void 0 ? _c : 1, (_d = b.scale) !== null && _d !== void 0 ? _d : 1, k) : undefined,
-                translateX: a.translateX != null || b.translateX != null
-                    ? lerp((_e = a.translateX) !== null && _e !== void 0 ? _e : 0, (_f = b.translateX) !== null && _f !== void 0 ? _f : 0, k)
-                    : undefined,
-                translateY: a.translateY != null || b.translateY != null
-                    ? lerp((_g = a.translateY) !== null && _g !== void 0 ? _g : 0, (_h = b.translateY) !== null && _h !== void 0 ? _h : 0, k)
-                    : undefined,
-                opacity: a.opacity != null || b.opacity != null
-                    ? lerp((_j = a.opacity) !== null && _j !== void 0 ? _j : 1, (_k = b.opacity) !== null && _k !== void 0 ? _k : 1, k)
-                    : undefined,
-            };
-        }
-    }
+  const ks = anim.keyframes;
+  if (ks.length === 0) {
+    return { t };
+  }
+  if (t <= ks[0].t) {
+    return { ...ks[0], t };
+  }
+  if (t >= ks[ks.length - 1].t) {
     return { ...ks[ks.length - 1], t };
+  }
+  for (let i = 0; i < ks.length - 1; i++) {
+    const a = ks[i];
+    const b = ks[i + 1];
+    if (t >= a.t && t <= b.t) {
+      const k = (t - a.t) / Math.max(1e-6, b.t - a.t);
+      return {
+        t,
+        rotate: a.rotate != null || b.rotate != null ? lerp(a.rotate ?? 0, b.rotate ?? 0, k) : void 0,
+        scale: a.scale != null || b.scale != null ? lerp(a.scale ?? 1, b.scale ?? 1, k) : void 0,
+        translateX: a.translateX != null || b.translateX != null ? lerp(a.translateX ?? 0, b.translateX ?? 0, k) : void 0,
+        translateY: a.translateY != null || b.translateY != null ? lerp(a.translateY ?? 0, b.translateY ?? 0, k) : void 0,
+        opacity: a.opacity != null || b.opacity != null ? lerp(a.opacity ?? 1, b.opacity ?? 1, k) : void 0
+      };
+    }
+  }
+  return { ...ks[ks.length - 1], t };
 }
-/** Build a `transform` SVG attribute value from a sampled frame, with
- * rotate centered around (cx, cy). Returns empty string when nothing
- * to apply. */
 function frameToTransform(frame, cx, cy) {
-    var _a, _b;
-    const parts = [];
-    if (frame.translateX != null || frame.translateY != null) {
-        parts.push(`translate(${(_a = frame.translateX) !== null && _a !== void 0 ? _a : 0} ${(_b = frame.translateY) !== null && _b !== void 0 ? _b : 0})`);
+  const parts = [];
+  if (frame.translateX != null || frame.translateY != null) {
+    parts.push(`translate(${frame.translateX ?? 0} ${frame.translateY ?? 0})`);
+  }
+  if (frame.rotate != null) {
+    parts.push(`rotate(${frame.rotate} ${cx} ${cy})`);
+  }
+  if (frame.scale != null && frame.scale !== 1) {
+    parts.push(`translate(${cx} ${cy}) scale(${frame.scale}) translate(${-cx} ${-cy})`);
+  }
+  return parts.join(" ");
+}
+function animationToCSSKeyframes(name, anim) {
+  const lines = [];
+  lines.push(`@keyframes ${name} {`);
+  for (const k of anim.keyframes) {
+    const pct = Math.round(k.t * 100);
+    const tr = [];
+    if (k.translateX != null || k.translateY != null) {
+      tr.push(`translate(${k.translateX ?? 0}px, ${k.translateY ?? 0}px)`);
     }
-    if (frame.rotate != null) {
-        parts.push(`rotate(${frame.rotate} ${cx} ${cy})`);
+    if (k.rotate != null) {
+      tr.push(`rotate(${k.rotate}deg)`);
     }
-    if (frame.scale != null && frame.scale !== 1) {
-        parts.push(`translate(${cx} ${cy}) scale(${frame.scale}) translate(${-cx} ${-cy})`);
+    if (k.scale != null) {
+      tr.push(`scale(${k.scale})`);
     }
-    return parts.join(' ');
-}
-/** Emit a `@keyframes` block for one animation. Uses CSS `transform`
- * for rotate/translate/scale and `opacity`. */
-function animationToCSSKeyframes(name, anim) {
-    var _a, _b;
-    const lines = [];
-    lines.push(`@keyframes ${name} {`);
-    for (const k of anim.keyframes) {
-        const pct = Math.round(k.t * 100);
-        const tr = [];
-        if (k.translateX != null || k.translateY != null) {
-            tr.push(`translate(${(_a = k.translateX) !== null && _a !== void 0 ? _a : 0}px, ${(_b = k.translateY) !== null && _b !== void 0 ? _b : 0}px)`);
-        }
-        if (k.rotate != null) {
-            tr.push(`rotate(${k.rotate}deg)`);
-        }
-        if (k.scale != null) {
-            tr.push(`scale(${k.scale})`);
-        }
-        const props = [];
-        if (tr.length) {
-            props.push(`  transform: ${tr.join(' ')};`);
-        }
-        if (k.opacity != null) {
-            props.push(`  opacity: ${k.opacity};`);
-        }
-        lines.push(`  ${pct}% {`);
-        lines.push(...props);
-        lines.push(`  }`);
+    const props = [];
+    if (tr.length) {
+      props.push(`  transform: ${tr.join(" ")};`);
+    }
+    if (k.opacity != null) {
+      props.push(`  opacity: ${k.opacity};`);
     }
-    lines.push(`}`);
-    return lines.join('\n');
+    lines.push(`  ${pct}% {`);
+    lines.push(...props);
+    lines.push(`  }`);
+  }
+  lines.push(`}`);
+  return lines.join("\n");
 }
-/** Emit a CSS rule that binds the animation to a selector. */
 function animationToCSSRule(selector, name, anim) {
-    var _a;
-    const repeat = anim.repeat === 'infinite' ? 'infinite' : String(anim.repeat);
-    return `${selector} {\n  animation: ${name} ${anim.duration}ms ${(_a = anim.easing) !== null && _a !== void 0 ? _a : 'linear'} ${repeat} ${anim.direction};\n  transform-box: fill-box;\n  transform-origin: center;\n}`;
+  const repeat = anim.repeat === "infinite" ? "infinite" : String(anim.repeat);
+  return `${selector} {
+  animation: ${name} ${anim.duration}ms ${anim.easing ?? "linear"} ${repeat} ${anim.direction};
+  transform-box: fill-box;
+  transform-origin: center;
+}`;
 }
-
 exports.ANIMATION_PRESETS = ANIMATION_PRESETS;
 exports.animationToCSSKeyframes = animationToCSSKeyframes;
 exports.animationToCSSRule = animationToCSSRule;