@pixodesk/svg-animator-web 1.0.44 → 1.0.46

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { P as PxAnimatorApi } from './PxAnimator-yjuSFhQw.cjs';
-export { a as PxAnimatorOptions, b as PxPlaybackApi, c as PxTagAnimatorOptions, d as createAnimator, l as loadTagAnimators } from './PxAnimator-yjuSFhQw.cjs';
+import { P as PxAnimatorApi } from './PxAnimator-BS-SZULN.cjs';
+export { a as PxAnimatorOptions, b as PxPlaybackApi, c as PxTagAnimatorOptions, d as createAnimator, l as loadTagAnimators } from './PxAnimator-BS-SZULN.cjs';
 import { PxAnimatorCallbacks, PxAnimatedSvgDocument, PxTrigger, PxDiagnostics, PxNode, PxDefinitions } from '@pixodesk/svg-animator-core';
 export { PxAnimatedSvgDocument, PxAnimatorCallbacks, PxAnimatorConfig, PxAnimatorConfigSchema, PxBinding, PxDefinitions, PxDefinitionsSchema, PxDiagnostic, PxDiagnosticKind, PxDiagnostics, PxDiagnosticsConfig, PxEngineCallbacks, PxFillMode, PxInfer, PxNode, PxNodeBaseSchema, PxPlatformAdapter, PxPlaybackDirection, PxPlaybackOverride, PxSchema, PxScrollSchema, PxSvgNode, PxSvgNodeRootSchema, PxTimelineEngineSetting, PxTimelinePatch, PxTrigger, PxTriggerSchema, PxTriggerStart, PxValidationContext, createAdapterAnimator, generateNewIds, px, toDomProps, validateDocument } from '@pixodesk/svg-animator-core';
 
@@ -84,6 +84,6 @@ declare function onAnimatorsChange(listener: PxAnimatorsListener): () => void;
  * Renders a PxNode tree to DOM elements.
  * @public @advanced
  */
-declare function renderNode(node: PxNode, defs?: PxDefinitions, diag?: PxDiagnostics): Element | null;
+declare function renderNode(node: PxNode, _defs?: PxDefinitions, diag?: PxDiagnostics): Element | null;
 
 export { PxAnimatorApi, type PxAnimatorRegistry, type PxAnimatorsEvent, type PxAnimatorsListener, type PxPrerenderedAnimatorOptions, getAllAnimators, onAnimatorsChange, renderNode, setupAnimationTriggers };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { P as PxAnimatorApi } from './PxAnimator-yjuSFhQw.js';
-export { a as PxAnimatorOptions, b as PxPlaybackApi, c as PxTagAnimatorOptions, d as createAnimator, l as loadTagAnimators } from './PxAnimator-yjuSFhQw.js';
+import { P as PxAnimatorApi } from './PxAnimator-BS-SZULN.js';
+export { a as PxAnimatorOptions, b as PxPlaybackApi, c as PxTagAnimatorOptions, d as createAnimator, l as loadTagAnimators } from './PxAnimator-BS-SZULN.js';
 import { PxAnimatorCallbacks, PxAnimatedSvgDocument, PxTrigger, PxDiagnostics, PxNode, PxDefinitions } from '@pixodesk/svg-animator-core';
 export { PxAnimatedSvgDocument, PxAnimatorCallbacks, PxAnimatorConfig, PxAnimatorConfigSchema, PxBinding, PxDefinitions, PxDefinitionsSchema, PxDiagnostic, PxDiagnosticKind, PxDiagnostics, PxDiagnosticsConfig, PxEngineCallbacks, PxFillMode, PxInfer, PxNode, PxNodeBaseSchema, PxPlatformAdapter, PxPlaybackDirection, PxPlaybackOverride, PxSchema, PxScrollSchema, PxSvgNode, PxSvgNodeRootSchema, PxTimelineEngineSetting, PxTimelinePatch, PxTrigger, PxTriggerSchema, PxTriggerStart, PxValidationContext, createAdapterAnimator, generateNewIds, px, toDomProps, validateDocument } from '@pixodesk/svg-animator-core';
 
@@ -84,6 +84,6 @@ declare function onAnimatorsChange(listener: PxAnimatorsListener): () => void;
  * Renders a PxNode tree to DOM elements.
  * @public @advanced
  */
-declare function renderNode(node: PxNode, defs?: PxDefinitions, diag?: PxDiagnostics): Element | null;
+declare function renderNode(node: PxNode, _defs?: PxDefinitions, diag?: PxDiagnostics): Element | null;
 
 export { PxAnimatorApi, type PxAnimatorRegistry, type PxAnimatorsEvent, type PxAnimatorsListener, type PxPrerenderedAnimatorOptions, getAllAnimators, onAnimatorsChange, renderNode, setupAnimationTriggers };

package/dist/index.js

@@ -4,6 +4,7 @@ import {
   PX_COLOR_ATTR_NAMES,
   PX_CSS_ONLY_STYLE_PROPS,
   PX_DEFAULT_DURATION_MS,
+  PX_DEFAULT_ITERATIONS,
   PX_DISALLOWED_SVG_TAGS_LOWER,
   PX_PCT_BASED_ATTR_NAMES,
   PX_STYLE_ATTR_NAMES,
@@ -37,7 +38,6 @@ import {
   foldTimelineOverride,
   generateNewIds,
   getAnimatorConfig,
-  getDefinitions,
   interpolateValue,
   isNativeForced,
   isPxDocument,
@@ -61,9 +61,53 @@ import {
   toRGBA,
   validateDocument,
   validateNodeEffects
-} from "./chunk-ZEMEZT7X.js";
+} from "./chunk-ZBGGXE5W.js";
 
 // ../svg-animator-core/dist/internal.js
+var CLASS_NAME_KEY = "className";
+var CLASS_ATTR = "class";
+var DOM_TYPE_KEY = "domType";
+var TYPE_ATTR = "type";
+var DEFAULT_TAG = "g";
+function renderPxTree(node, factory, diag) {
+  return node ? renderOne(node, factory, diag, true, 0) : null;
+}
+function renderOne(node, factory, diag, isRoot, index) {
+  const _a = node, { type, children, style } = _a, props = __objRest(_a, ["type", "children", "style"]);
+  const tag = type || DEFAULT_TAG;
+  if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tag.toLowerCase())) {
+    (diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, 1103, tag);
+    return null;
+  }
+  const domType = props[DOM_TYPE_KEY];
+  if (domType !== void 0) delete props[DOM_TYPE_KEY];
+  const attrs = {};
+  let inlineStyle;
+  const domProps = toDomProps(props);
+  for (const propName of Object.keys(domProps)) {
+    const sanitized = sanitizeAttributeValue(propName, domProps[propName]);
+    if (sanitized === void 0) continue;
+    if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
+      (inlineStyle != null ? inlineStyle : inlineStyle = {})[propName] = String(sanitized);
+      continue;
+    }
+    attrs[propName === CLASS_NAME_KEY ? CLASS_ATTR : camelCaseToKebabWordIfNeeded(propName)] = sanitized;
+  }
+  if (domType !== void 0) attrs[TYPE_ATTR] = String(domType);
+  if (style) {
+    for (const styleProp of Object.keys(style)) (inlineStyle != null ? inlineStyle : inlineStyle = {})[styleProp] = String(style[styleProp]);
+  }
+  const rendered = [];
+  if (children) {
+    children.forEach((child, i) => {
+      const el = renderOne(child, factory, diag, false, i);
+      if (el !== null) rendered.push(el);
+    });
+  }
+  const ownText = props[PX_TEXT_CONTENT_ATTR];
+  const text = !rendered.length && typeof ownText === "string" && ownText ? ownText : void 0;
+  return factory({ tag, attrs, style: inlineStyle, children: rendered, text, node, isRoot, index });
+}
 function isScrollTimeline(config) {
   return (config == null ? void 0 : config.timelineSource) === "scroll";
 }
@@ -521,7 +565,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     let seekPosition;
     if (config.delay && config.delay < 0 && config.duration) {
       const rawSeek = -config.delay;
-      seekPosition = iterations === Infinity ? rawSeek % config.duration : Math.min(rawSeek, config.duration * (iterations != null ? iterations : 1));
+      seekPosition = iterations === Infinity ? rawSeek % config.duration : Math.min(rawSeek, config.duration * (iterations != null ? iterations : PX_DEFAULT_ITERATIONS));
     }
     const effectOptions = {
       duration: config.duration,
@@ -628,7 +672,7 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     },
     "setCurrentTime": (time) => {
       var _a2;
-      const ceiling = seekCeilingMs((_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : 1);
+      const ceiling = seekCeilingMs((_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : PX_DEFAULT_ITERATIONS);
       const seek = ceiling > 0 ? clampSeekMs(time, ceiling) : Math.max(0, time);
       finishNotified = false;
       animations.forEach((a) => {
@@ -638,11 +682,11 @@ function createWebApiAnimator(doc, callbacks, rootElement, forceEvenIfHasUnsuppo
     "getCurrentProgress": () => {
       var _a2;
       const t = api.getCurrentTime();
-      return t === null ? null : timeToProgress(t, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : 1);
+      return t === null ? null : timeToProgress(t, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : PX_DEFAULT_ITERATIONS);
     },
     "setCurrentProgress": (progress) => {
       var _a2;
-      api.setCurrentTime(progressToTimeMs(progress, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : 1));
+      api.setCurrentTime(progressToTimeMs(progress, (_a2 = config.duration) != null ? _a2 : 0, iterations != null ? iterations : PX_DEFAULT_ITERATIONS));
     },
     "destroy": () => {
       var _a2;
@@ -1015,69 +1059,26 @@ function bindWithEngineChoice(doc, adapter, callbacks, rootElement) {
 
 // src/dom/PxAnimatorDOM.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-function createElement(tagName, normalizedProps, style, children, textContent, diag) {
-  if (PX_DISALLOWED_SVG_TAGS_LOWER.has(tagName.toLowerCase())) {
-    (diag != null ? diag : createDiagnostics(void 0, "[PxAnimator]")).warn(PxDiagnosticKind.document, PxDiagnosticCode.blockedTag, tagName);
-    return null;
-  }
-  const element = document.createElementNS(SVG_NS, tagName);
-  for (const propName in normalizedProps) {
-    const sanitized = sanitizeAttributeValue(propName, normalizedProps[propName]);
-    if (sanitized === void 0) continue;
-    if (PX_CSS_ONLY_STYLE_PROPS.has(propName)) {
-      element.style[propName] = String(sanitized);
-      continue;
-    }
-    element.setAttribute(camelCaseToKebabWordIfNeeded(propName), sanitized);
-  }
+var createDomElement = ({ tag, attrs, style, children, text }) => {
+  const element = document.createElementNS(SVG_NS, tag);
+  for (const name of Object.keys(attrs)) element.setAttribute(name, attrs[name]);
   if (style) {
-    for (const styleProp in style) {
-      element.style[styleProp] = String(style[styleProp]);
-    }
-  }
-  if (children == null ? void 0 : children.length) {
-    for (const child of children) {
-      element.appendChild(child);
-    }
-  } else if (textContent) {
-    element.textContent = textContent;
+    const target = element.style;
+    for (const prop of Object.keys(style)) target[prop] = style[prop];
   }
+  for (const child of children) element.appendChild(child);
+  if (text !== void 0) element.textContent = text;
   return element;
-}
-function renderNode(node, defs, diag) {
-  if (!node) return null;
-  const _a = node, { type, children, style } = _a, props = __objRest(_a, ["type", "children", "style"]);
-  const domType = props.domType;
-  if (domType !== void 0) delete props.domType;
-  const nodeDefs = getDefinitions(node) || defs;
-  const resolvedStyle = style;
-  let childElements;
-  if (children) {
-    for (const ch of children) {
-      const child = renderNode(ch, nodeDefs, diag);
-      if (child) {
-        if (!childElements) childElements = [];
-        childElements.push(child);
-      }
-    }
-  }
-  const element = createElement(
-    type || "g",
-    toDomProps(props),
-    resolvedStyle,
-    childElements,
-    props[PX_TEXT_CONTENT_ATTR],
-    diag
-  );
-  if (element && domType !== void 0) element.setAttribute("type", domType);
-  return element;
+};
+function renderNode(node, _defs, diag) {
+  return renderPxTree(node, createDomElement, diag);
 }
 
 // src/animator/PxAnimator.ts
 function createAnimatorFromConfig(doc, adapter, callbacks, rootElement) {
   return bindWithEngineChoice(doc, adapter, callbacks, rootElement);
 }
-function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, resetTimeline) {
+function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, resetTimeline, providedRoot) {
   const diag = createDiagnostics(callbacks, "[PxAnimator]");
   const effectsWarnings = validateNodeEffects(doc);
   for (const w of effectsWarnings) diag.warn(PxDiagnosticKind.document, PxDiagnosticCode.effectsShape, w);
@@ -1101,6 +1102,7 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, re
       }
     }
   }
+  if (!rootElement && providedRoot) rootElement = providedRoot;
   const api = createAnimatorFromConfig(doc, adapter, callbacks, rootElement);
   if (containerElement && rootElement) {
     const rendered = rootElement;
@@ -1113,7 +1115,7 @@ function createAnimatorImpl(doc, adapter, callbacks, containerElement, patch, re
   return api;
 }
 function isInternalOptions(options) {
-  return "adapter" in options;
+  return "adapter" in options || "rootElement" in options;
 }
 function resolveTimelineOption(options) {
   const { timeline, duration, delay, iterations, start } = options;
@@ -1122,6 +1124,7 @@ function resolveTimelineOption(options) {
 function createAnimator(options) {
   const { src, doc, container, resetTimeline } = options;
   const adapter = isInternalOptions(options) ? options.adapter : void 0;
+  const providedRoot = isInternalOptions(options) ? options.rootElement : void 0;
   const patch = resolveTimelineOption(options);
   let proxy;
   const callbacks = withRegistryEvents(toEngineCallbacks(options), () => proxy);
@@ -1154,7 +1157,7 @@ function createAnimator(options) {
   };
   const build = (document2) => {
     try {
-      ready(createAnimatorImpl(document2, adapter, callbacks, container, patch, resetTimeline));
+      ready(createAnimatorImpl(document2, adapter, callbacks, container, patch, resetTimeline, providedRoot));
     } catch (e) {
       const err = asThrownError(e);
       failed(PxDiagnosticKind.internal, PxDiagnosticCode.buildFailed, err);