@pixodesk/svg-animator-rn 1.0.35 → 1.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -55
- package/dist/index.cjs +113 -89
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +31 -237
- package/dist/index.d.ts +31 -237
- package/dist/index.js +100 -81
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
- package/src/PixodeskSvgAnimator.tsx +158 -154
- package/src/PxRnErrorBoundary.tsx +13 -4
- package/src/PxRnMatrix.test.ts +2 -2
- package/src/PxRnMatrix.ts +1 -1
- package/src/PxRnPropNames.ts +4 -3
- package/src/PxRnRender.tsx +21 -27
- package/src/PxRnSafety.ts +3 -1
- package/src/PxRnTracks.test.ts +12 -12
- package/src/PxRnTracks.ts +10 -12
- package/src/PxRnTypeMap.ts +1 -0
- package/src/index.ts +0 -9
package/dist/index.cjs
CHANGED
|
@@ -60,29 +60,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
60
60
|
var index_exports = {};
|
|
61
61
|
__export(index_exports, {
|
|
62
62
|
PixodeskSvgAnimator: () => PixodeskSvgAnimator,
|
|
63
|
-
|
|
64
|
-
RN_SVG_COMPONENTS: () => RN_SVG_COMPONENTS,
|
|
65
|
-
compileTracks: () => compileTracks,
|
|
66
|
-
default: () => PixodeskSvgAnimator_default,
|
|
67
|
-
openClosedTextPathTargets: () => openClosedTextPathTargets,
|
|
68
|
-
renderRnNode: () => renderRnNode,
|
|
69
|
-
sampleProps: () => sampleProps,
|
|
70
|
-
toRnPropName: () => toRnPropName,
|
|
71
|
-
toRnProps: () => toRnProps
|
|
63
|
+
default: () => PixodeskSvgAnimator_default
|
|
72
64
|
});
|
|
73
65
|
module.exports = __toCommonJS(index_exports);
|
|
74
66
|
|
|
75
67
|
// src/PixodeskSvgAnimator.tsx
|
|
76
|
-
var
|
|
68
|
+
var import_svg_animator_core4 = require("@pixodesk/svg-animator-core");
|
|
69
|
+
var import_internal6 = require("@pixodesk/svg-animator-core/internal");
|
|
77
70
|
var import_react3 = require("react");
|
|
78
71
|
var import_react_native = require("react-native");
|
|
79
72
|
var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
|
|
80
73
|
|
|
81
74
|
// src/PxRnTracks.ts
|
|
82
|
-
var
|
|
75
|
+
var import_svg_animator_core = require("@pixodesk/svg-animator-core");
|
|
76
|
+
var import_internal2 = require("@pixodesk/svg-animator-core/internal");
|
|
83
77
|
|
|
84
78
|
// src/PxRnPropNames.ts
|
|
85
|
-
var
|
|
79
|
+
var import_internal = require("@pixodesk/svg-animator-core/internal");
|
|
86
80
|
|
|
87
81
|
// src/PxRnMatrix.ts
|
|
88
82
|
var DEG = Math.PI / 180;
|
|
@@ -159,7 +153,7 @@ function toRnPropName(attrName) {
|
|
|
159
153
|
if (DROPPED_ATTRS.has(attrName)) return void 0;
|
|
160
154
|
const override = ATTR_NAME_OVERRIDES[attrName];
|
|
161
155
|
if (override) return override;
|
|
162
|
-
return (0,
|
|
156
|
+
return (0, import_internal.kebabToCamelCaseWord)(attrName);
|
|
163
157
|
}
|
|
164
158
|
var LENGTH_LIST_PROPS = /* @__PURE__ */ new Set(["strokeDasharray"]);
|
|
165
159
|
function toRnPropValue(rnPropName, value, tag, native = false) {
|
|
@@ -179,8 +173,8 @@ function toRnPropValue(rnPropName, value, tag, native = false) {
|
|
|
179
173
|
// src/PxRnTracks.ts
|
|
180
174
|
function compileTracks(doc, opts) {
|
|
181
175
|
var _a, _b, _c, _d;
|
|
182
|
-
const config = (0,
|
|
183
|
-
const duration = +(config.duration ||
|
|
176
|
+
const config = (0, import_svg_animator_core.getAnimatorConfig)(doc) || {};
|
|
177
|
+
const duration = +(config.duration || import_internal2.DEFAULT_DURATION_MS);
|
|
184
178
|
const _iterations = config.iterations;
|
|
185
179
|
let iterations = 1;
|
|
186
180
|
if (typeof _iterations === "number") iterations = _iterations || 1;
|
|
@@ -199,7 +193,7 @@ function compileTracks(doc, opts) {
|
|
|
199
193
|
((_a2 = n == null ? void 0 : n.children) != null ? _a2 : []).forEach(indexTags);
|
|
200
194
|
};
|
|
201
195
|
indexTags(doc);
|
|
202
|
-
const bindings = (0,
|
|
196
|
+
const bindings = (0, import_svg_animator_core.getNormalizedBindings)(doc, import_svg_animator_core.PxTimelineEngine.js) || [];
|
|
203
197
|
const elements = [];
|
|
204
198
|
for (const binding of bindings) {
|
|
205
199
|
const animDef = binding.animate;
|
|
@@ -207,7 +201,7 @@ function compileTracks(doc, opts) {
|
|
|
207
201
|
const props = {};
|
|
208
202
|
for (let i = 0; i < sampleCount; i++) {
|
|
209
203
|
const t = i === sampleCount - 1 ? duration : i * stepMs;
|
|
210
|
-
const values = (0,
|
|
204
|
+
const values = (0, import_svg_animator_core.calcAnimationValues)(animDef, t);
|
|
211
205
|
for (const [attr, value] of Object.entries(values)) {
|
|
212
206
|
const rnProp = toRnPropName(attr);
|
|
213
207
|
if (!rnProp) continue;
|
|
@@ -259,7 +253,8 @@ function sampleProps(tracks, tMs, stepMs, sampleCount, native = false) {
|
|
|
259
253
|
}
|
|
260
254
|
|
|
261
255
|
// src/PxRnRender.tsx
|
|
262
|
-
var
|
|
256
|
+
var import_svg_animator_core2 = require("@pixodesk/svg-animator-core");
|
|
257
|
+
var import_internal3 = require("@pixodesk/svg-animator-core/internal");
|
|
263
258
|
var import_react = require("react");
|
|
264
259
|
|
|
265
260
|
// src/PxRnTypeMap.ts
|
|
@@ -326,14 +321,14 @@ var RN_SVG_COMPONENTS = {
|
|
|
326
321
|
|
|
327
322
|
// src/PxRnRender.tsx
|
|
328
323
|
function toRnProps(props, warnings, tag) {
|
|
329
|
-
const
|
|
324
|
+
const normalized = (0, import_svg_animator_core2.getNormalizedProps)(props);
|
|
330
325
|
const out = {};
|
|
331
|
-
for (const key of Object.keys(
|
|
332
|
-
const
|
|
333
|
-
if (
|
|
326
|
+
for (const key of Object.keys(normalized)) {
|
|
327
|
+
const sanitized = (0, import_internal3.sanitizeAttributeValue)(key, normalized[key]);
|
|
328
|
+
if (sanitized === void 0) continue;
|
|
334
329
|
const rnKey = toRnPropName(key);
|
|
335
330
|
if (!rnKey) continue;
|
|
336
|
-
out[rnKey] = toRnPropValue(rnKey, String(
|
|
331
|
+
out[rnKey] = toRnPropValue(rnKey, String(sanitized), tag);
|
|
337
332
|
}
|
|
338
333
|
return out;
|
|
339
334
|
}
|
|
@@ -344,7 +339,7 @@ function renderRnNode(node, opts = {}, key) {
|
|
|
344
339
|
const tag = String(type || "g");
|
|
345
340
|
const domType = props.domType;
|
|
346
341
|
if (domType !== void 0) delete props.domType;
|
|
347
|
-
if (
|
|
342
|
+
if (import_internal3.DISALLOWED_SVG_TAGS_LOWER.has(tag.toLowerCase())) {
|
|
348
343
|
(_b = opts.warnings) == null ? void 0 : _b.push("tag blocked (dangerous): " + tag);
|
|
349
344
|
return null;
|
|
350
345
|
}
|
|
@@ -355,17 +350,17 @@ function renderRnNode(node, opts = {}, key) {
|
|
|
355
350
|
}
|
|
356
351
|
const rnProps = toRnProps(props, opts.warnings, tag);
|
|
357
352
|
if (domType !== void 0) rnProps.type = domType;
|
|
358
|
-
const resolved =
|
|
353
|
+
const resolved = style;
|
|
359
354
|
if (resolved) {
|
|
360
355
|
for (const [k, v] of Object.entries(resolved)) {
|
|
361
356
|
const rnKey = toRnPropName(k);
|
|
362
357
|
if (!rnKey || rnKey in rnProps) continue;
|
|
363
|
-
const
|
|
364
|
-
if (
|
|
365
|
-
rnProps[rnKey] = toRnPropValue(rnKey, String(
|
|
358
|
+
const sanitized = (0, import_internal3.sanitizeAttributeValue)(rnKey, v);
|
|
359
|
+
if (sanitized === void 0) continue;
|
|
360
|
+
rnProps[rnKey] = toRnPropValue(rnKey, String(sanitized), tag);
|
|
366
361
|
}
|
|
367
362
|
}
|
|
368
|
-
const textContent = props[
|
|
363
|
+
const textContent = props[import_internal3.TEXT_CONTENT_ATTR];
|
|
369
364
|
let childElements = void 0;
|
|
370
365
|
if (Array.isArray(children) && children.length > 0) {
|
|
371
366
|
childElements = children.map((ch, i) => {
|
|
@@ -391,6 +386,8 @@ function renderRnNode(node, opts = {}, key) {
|
|
|
391
386
|
|
|
392
387
|
// src/PxRnErrorBoundary.tsx
|
|
393
388
|
var import_react2 = require("react");
|
|
389
|
+
var import_svg_animator_core3 = require("@pixodesk/svg-animator-core");
|
|
390
|
+
var import_internal4 = require("@pixodesk/svg-animator-core/internal");
|
|
394
391
|
var PxRnErrorBoundary = class extends import_react2.Component {
|
|
395
392
|
constructor() {
|
|
396
393
|
super(...arguments);
|
|
@@ -400,9 +397,8 @@ var PxRnErrorBoundary = class extends import_react2.Component {
|
|
|
400
397
|
return { error };
|
|
401
398
|
}
|
|
402
399
|
componentDidCatch(error, info) {
|
|
403
|
-
var _a, _b
|
|
404
|
-
(
|
|
405
|
-
console.warn("[PixodeskSvgAnimator] render failed:", (_d = error == null ? void 0 : error.message) != null ? _d : error);
|
|
400
|
+
var _a, _b;
|
|
401
|
+
((_a = this.props.diag) != null ? _a : (0, import_internal4.createDiagnostics)(void 0, "[PixodeskSvgAnimator]")).error(import_svg_animator_core3.PxDiagnosticKind.internal, error, { componentStack: (_b = info == null ? void 0 : info.componentStack) != null ? _b : void 0 });
|
|
406
402
|
}
|
|
407
403
|
componentDidUpdate(prev) {
|
|
408
404
|
if (this.state.error && prev.children !== this.props.children) {
|
|
@@ -417,7 +413,7 @@ var PxRnErrorBoundary = class extends import_react2.Component {
|
|
|
417
413
|
};
|
|
418
414
|
|
|
419
415
|
// src/PxRnSafety.ts
|
|
420
|
-
var
|
|
416
|
+
var import_internal5 = require("@pixodesk/svg-animator-core/internal");
|
|
421
417
|
function isClosedPath(d) {
|
|
422
418
|
return typeof d === "string" && /[zZ]/.test(d);
|
|
423
419
|
}
|
|
@@ -442,7 +438,7 @@ function openClosedTextPathTargets(doc, warnings) {
|
|
|
442
438
|
if (String(n.type) === "textPath") hasTextPath = true;
|
|
443
439
|
});
|
|
444
440
|
if (!hasTextPath) return doc;
|
|
445
|
-
const result = (0,
|
|
441
|
+
const result = (0, import_internal5.deepClone)(doc);
|
|
446
442
|
const byId = /* @__PURE__ */ new Map();
|
|
447
443
|
forEachNode(result, (n) => {
|
|
448
444
|
const id = n.id;
|
|
@@ -469,8 +465,8 @@ function openClosedTextPathTargets(doc, warnings) {
|
|
|
469
465
|
if (!target || !isClosedPath(target.d)) return;
|
|
470
466
|
let copyId = openCopies.get(targetId);
|
|
471
467
|
if (!copyId) {
|
|
472
|
-
const copy = (0,
|
|
473
|
-
copyId = "px_open_" + (0,
|
|
468
|
+
const copy = (0, import_internal5.deepClone)(target);
|
|
469
|
+
copyId = "px_open_" + (0, import_internal5.generateUniqueId)();
|
|
474
470
|
copy.id = copyId;
|
|
475
471
|
copy.d = openPath(String(copy.d));
|
|
476
472
|
delete copy.animate;
|
|
@@ -561,29 +557,29 @@ var EMPTY_TRACKS = {
|
|
|
561
557
|
sampleCount: 2,
|
|
562
558
|
elements: []
|
|
563
559
|
};
|
|
564
|
-
function compileDocument(doc, overrides) {
|
|
565
|
-
const {
|
|
566
|
-
const warnings = (0,
|
|
567
|
-
for (const w of warnings)
|
|
568
|
-
(0,
|
|
569
|
-
const patch = (0,
|
|
570
|
-
if (patch !== void 0 ||
|
|
571
|
-
const applied = (0,
|
|
572
|
-
for (const w of applied.warnings)
|
|
560
|
+
function compileDocument(doc, overrides, diag) {
|
|
561
|
+
const { timeline, resetTimeline, duration, delay, iterations, startOn } = overrides;
|
|
562
|
+
const warnings = (0, import_svg_animator_core4.validateNodeEffects)(doc);
|
|
563
|
+
for (const w of warnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.document, "effects shape: " + w);
|
|
564
|
+
(0, import_internal6.reportDocumentDiagnostics)(doc, "[PixodeskSvgAnimator]");
|
|
565
|
+
const patch = (0, import_svg_animator_core4.foldTimelineOverride)(timeline, { duration, delay, iterations, startOn });
|
|
566
|
+
if (patch !== void 0 || resetTimeline) {
|
|
567
|
+
const applied = (0, import_svg_animator_core4.applyAnimatorConfig)(doc, patch != null ? patch : {}, { resetDefaults: !!resetTimeline });
|
|
568
|
+
for (const w of applied.warnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.usage, "timeline override: " + w);
|
|
573
569
|
doc = applied.doc;
|
|
574
570
|
}
|
|
575
|
-
let prepared = (0,
|
|
571
|
+
let prepared = (0, import_svg_animator_core4.materializeAllInTree)(doc, import_svg_animator_core4.PxTimelineEngine.native);
|
|
576
572
|
if (NATIVE_SVG_VIEWS) {
|
|
577
573
|
prepared = openClosedTextPathTargets(prepared);
|
|
578
574
|
}
|
|
579
|
-
prepared = (0,
|
|
575
|
+
prepared = (0, import_svg_animator_core4.generateNewIds)(prepared);
|
|
580
576
|
const tracks = compileTracks(prepared, { native: NATIVE_SVG_VIEWS });
|
|
581
577
|
return { doc: prepared, tracks, error: null };
|
|
582
578
|
}
|
|
583
579
|
function PixodeskSvgAnimator({
|
|
584
580
|
doc,
|
|
585
|
-
|
|
586
|
-
|
|
581
|
+
timeline,
|
|
582
|
+
resetTimeline,
|
|
587
583
|
duration,
|
|
588
584
|
delay,
|
|
589
585
|
iterations,
|
|
@@ -600,25 +596,36 @@ function PixodeskSvgAnimator({
|
|
|
600
596
|
onPause,
|
|
601
597
|
onCancel,
|
|
602
598
|
onFinish,
|
|
599
|
+
onRemove,
|
|
603
600
|
onError,
|
|
604
|
-
fallback
|
|
601
|
+
fallback,
|
|
602
|
+
onWarn,
|
|
603
|
+
muteWarn,
|
|
604
|
+
muteError
|
|
605
605
|
}) {
|
|
606
|
-
var _a, _b
|
|
607
|
-
const
|
|
606
|
+
var _a, _b;
|
|
607
|
+
const timelineKey = typeof timeline === "string" ? timeline : JSON.stringify(timeline != null ? timeline : null);
|
|
608
|
+
const makeDiag = () => (0, import_internal6.createDiagnostics)(
|
|
609
|
+
{ onWarn, onError, muteWarn, muteError },
|
|
610
|
+
"[PixodeskSvgAnimator]"
|
|
611
|
+
);
|
|
608
612
|
const compiled = (0, import_react3.useMemo)(() => {
|
|
609
613
|
try {
|
|
610
614
|
return compileDocument(
|
|
611
615
|
doc,
|
|
612
|
-
{
|
|
616
|
+
{ timeline, resetTimeline, duration, delay, iterations, startOn },
|
|
617
|
+
makeDiag()
|
|
613
618
|
);
|
|
614
619
|
} catch (e) {
|
|
615
620
|
const error = e instanceof Error ? e : new Error(String(e));
|
|
616
|
-
|
|
621
|
+
makeDiag().error(import_svg_animator_core4.PxDiagnosticKind.internal, error, { phase: "compile" });
|
|
617
622
|
return { doc: null, tracks: EMPTY_TRACKS, error };
|
|
618
623
|
}
|
|
619
|
-
}, [doc,
|
|
624
|
+
}, [doc, timelineKey, resetTimeline, duration, delay, iterations, startOn]);
|
|
620
625
|
const tracks = compiled.tracks;
|
|
621
|
-
const totalDuration =
|
|
626
|
+
const totalDuration = (0, import_svg_animator_core4.progressSpanMs)(tracks.duration, tracks.iterations);
|
|
627
|
+
const seekCeiling = (0, import_svg_animator_core4.seekCeilingMs)(tracks.duration, tracks.iterations);
|
|
628
|
+
const runClock = (0, import_react3.useMemo)(() => (0, import_svg_animator_core4.createRunClock)(seekCeiling), [seekCeiling]);
|
|
622
629
|
const progress = (0, import_react_native_reanimated.useSharedValue)(0);
|
|
623
630
|
const playingRef = (0, import_react3.useRef)(false);
|
|
624
631
|
const rateRef = (0, import_react3.useRef)(1);
|
|
@@ -630,6 +637,8 @@ function PixodeskSvgAnimator({
|
|
|
630
637
|
};
|
|
631
638
|
const notifyFinish = () => {
|
|
632
639
|
playingRef.current = false;
|
|
640
|
+
runClock.seek(Number.isFinite(seekCeiling) ? seekCeiling : tracks.duration);
|
|
641
|
+
runClock.stop();
|
|
633
642
|
progress.value = restingPosition();
|
|
634
643
|
onFinish == null ? void 0 : onFinish();
|
|
635
644
|
onStop == null ? void 0 : onStop();
|
|
@@ -666,12 +675,15 @@ function PixodeskSvgAnimator({
|
|
|
666
675
|
const api = {
|
|
667
676
|
isPlaying: () => playingRef.current,
|
|
668
677
|
play: () => {
|
|
678
|
+
if (Number.isFinite(seekCeiling) && runClock.now() >= seekCeiling) runClock.seek(0);
|
|
679
|
+
runClock.start(rateRef.current);
|
|
669
680
|
startFrom(progress.value);
|
|
670
681
|
onPlay == null ? void 0 : onPlay();
|
|
671
682
|
},
|
|
672
683
|
pause: () => {
|
|
673
684
|
(0, import_react_native_reanimated.cancelAnimation)(progress);
|
|
674
685
|
playingRef.current = false;
|
|
686
|
+
runClock.stop();
|
|
675
687
|
onPause == null ? void 0 : onPause();
|
|
676
688
|
onStop == null ? void 0 : onStop();
|
|
677
689
|
},
|
|
@@ -679,62 +691,82 @@ function PixodeskSvgAnimator({
|
|
|
679
691
|
(0, import_react_native_reanimated.cancelAnimation)(progress);
|
|
680
692
|
progress.value = 0;
|
|
681
693
|
playingRef.current = false;
|
|
694
|
+
runClock.seek(0);
|
|
695
|
+
runClock.stop();
|
|
682
696
|
onCancel == null ? void 0 : onCancel();
|
|
683
697
|
onStop == null ? void 0 : onStop();
|
|
684
698
|
},
|
|
685
699
|
finish: () => {
|
|
686
700
|
(0, import_react_native_reanimated.cancelAnimation)(progress);
|
|
687
701
|
playingRef.current = false;
|
|
702
|
+
runClock.seek(Number.isFinite(seekCeiling) ? seekCeiling : tracks.duration);
|
|
703
|
+
runClock.stop();
|
|
688
704
|
progress.value = restingPosition();
|
|
689
705
|
onFinish == null ? void 0 : onFinish();
|
|
690
706
|
onStop == null ? void 0 : onStop();
|
|
691
707
|
},
|
|
692
708
|
setPlaybackRate: (rate) => {
|
|
693
|
-
if (!
|
|
694
|
-
|
|
709
|
+
if (!(0, import_svg_animator_core4.isValidPlaybackRate)(rate)) {
|
|
710
|
+
makeDiag().warn(import_svg_animator_core4.PxDiagnosticKind.usage, import_svg_animator_core4.PX_RATE_REJECTED);
|
|
695
711
|
return;
|
|
696
712
|
}
|
|
697
713
|
rateRef.current = rate;
|
|
698
|
-
if (playingRef.current)
|
|
714
|
+
if (playingRef.current) {
|
|
715
|
+
runClock.start(rate);
|
|
716
|
+
startFrom(progress.value);
|
|
717
|
+
}
|
|
699
718
|
},
|
|
700
|
-
|
|
719
|
+
// Ms from the start of the WHOLE run, like every other engine (review §3). This used
|
|
720
|
+
// to return `progress.value`, which is ms within the current iteration — so a slider
|
|
721
|
+
// built on it jumped back to 0 every time the animation repeated.
|
|
722
|
+
getCurrentTime: () => runClock.now(),
|
|
701
723
|
setCurrentTime: (t) => {
|
|
702
724
|
const wasPlaying = playingRef.current;
|
|
703
725
|
(0, import_react_native_reanimated.cancelAnimation)(progress);
|
|
704
726
|
playingRef.current = false;
|
|
705
|
-
const clamped =
|
|
727
|
+
const clamped = (0, import_svg_animator_core4.clampSeekMs)(t, seekCeiling);
|
|
728
|
+
runClock.seek(clamped);
|
|
706
729
|
const withinIteration = tracks.duration > 0 ? clamped % tracks.duration || (clamped === 0 ? 0 : tracks.duration) : 0;
|
|
707
730
|
progress.value = withinIteration;
|
|
708
731
|
if (wasPlaying) startFrom(withinIteration);
|
|
732
|
+
else runClock.stop();
|
|
733
|
+
},
|
|
734
|
+
getCurrentProgress: () => (0, import_svg_animator_core4.timeToProgress)(runClock.now(), tracks.duration, tracks.iterations),
|
|
735
|
+
setCurrentProgress: (p) => {
|
|
736
|
+
api.setCurrentTime((0, import_svg_animator_core4.progressToTimeMs)(p, tracks.duration, tracks.iterations));
|
|
709
737
|
}
|
|
710
738
|
};
|
|
711
739
|
(0, import_react3.useImperativeHandle)(apiRef, () => api, [compiled]);
|
|
712
|
-
const trigger = compiled.doc ? (_a = (0,
|
|
713
|
-
const effectiveStartOn =
|
|
714
|
-
const effectiveOutAction =
|
|
740
|
+
const trigger = (0, import_svg_animator_core4.resolveTrigger)(compiled.doc ? (_a = (0, import_svg_animator_core4.getAnimatorConfig)(compiled.doc)) == null ? void 0 : _a.trigger : void 0);
|
|
741
|
+
const effectiveStartOn = trigger.startOn;
|
|
742
|
+
const effectiveOutAction = trigger.outAction;
|
|
743
|
+
const { mode: compMode, warnings: modeWarnings } = (0, import_svg_animator_core4.resolveControlMode)({ progress: progressProp, time, play, pause, autoplay });
|
|
715
744
|
(0, import_react3.useEffect)(() => {
|
|
716
|
-
|
|
717
|
-
|
|
745
|
+
const diag = makeDiag();
|
|
746
|
+
for (const w of modeWarnings) diag.warn(import_svg_animator_core4.PxDiagnosticKind.usage, w);
|
|
747
|
+
}, [modeWarnings.join("|")]);
|
|
748
|
+
(0, import_react3.useEffect)(() => {
|
|
749
|
+
if (compMode === import_svg_animator_core4.PxControlMode.fixedTime) {
|
|
750
|
+
const seekMs = time !== void 0 ? time : (0, import_svg_animator_core4.progressToTimeMs)(progressProp != null ? progressProp : 0, tracks.duration, tracks.iterations);
|
|
718
751
|
api.setCurrentTime(seekMs);
|
|
719
752
|
return;
|
|
720
753
|
}
|
|
721
|
-
if (
|
|
754
|
+
if (compMode === import_svg_animator_core4.PxControlMode.play) {
|
|
722
755
|
if (play && !pause) api.play();
|
|
723
756
|
else if (pause) api.pause();
|
|
724
|
-
else if (play === false) api.
|
|
757
|
+
else if (play === false) api.pause();
|
|
725
758
|
else api.play();
|
|
726
759
|
return;
|
|
727
760
|
}
|
|
728
|
-
if (autoplay && effectiveStartOn === "load") {
|
|
761
|
+
if (compMode === import_svg_animator_core4.PxControlMode.autoplay && effectiveStartOn === "load") {
|
|
729
762
|
api.play();
|
|
730
763
|
}
|
|
731
|
-
}, [compiled, autoplay, play, pause, progressProp, time]);
|
|
764
|
+
}, [compiled, compMode, autoplay, play, pause, progressProp, time]);
|
|
732
765
|
const scrollRef = (0, import_react3.useRef)(null);
|
|
733
766
|
const inViewRef = (0, import_react3.useRef)(false);
|
|
734
767
|
(0, import_react3.useEffect)(() => {
|
|
735
|
-
var _a2;
|
|
736
768
|
if (!autoplay || effectiveStartOn !== "scrollIntoView") return;
|
|
737
|
-
const threshold =
|
|
769
|
+
const threshold = trigger.scrollIntoViewThreshold;
|
|
738
770
|
inViewRef.current = false;
|
|
739
771
|
const check = () => {
|
|
740
772
|
const node = scrollRef.current;
|
|
@@ -765,6 +797,8 @@ function PixodeskSvgAnimator({
|
|
|
765
797
|
return () => {
|
|
766
798
|
(0, import_react_native_reanimated.cancelAnimation)(progress);
|
|
767
799
|
playingRef.current = false;
|
|
800
|
+
onRemove == null ? void 0 : onRemove();
|
|
801
|
+
onStop == null ? void 0 : onStop();
|
|
768
802
|
};
|
|
769
803
|
}, [compiled]);
|
|
770
804
|
const trackById = (0, import_react3.useMemo)(() => {
|
|
@@ -780,7 +814,7 @@ function PixodeskSvgAnimator({
|
|
|
780
814
|
if (!compiled.doc) return null;
|
|
781
815
|
const renderOpts = {
|
|
782
816
|
warnings: warningsRef.current,
|
|
783
|
-
defs: (0,
|
|
817
|
+
defs: (0, import_svg_animator_core4.getDefs)(compiled.doc)
|
|
784
818
|
};
|
|
785
819
|
try {
|
|
786
820
|
return renderRnNode(compiled.doc, __spreadProps(__spreadValues({}, renderOpts), {
|
|
@@ -820,17 +854,15 @@ function PixodeskSvgAnimator({
|
|
|
820
854
|
} catch (e) {
|
|
821
855
|
const error = e instanceof Error ? e : new Error(String(e));
|
|
822
856
|
renderErrorRef.current = error;
|
|
823
|
-
|
|
857
|
+
makeDiag().error(import_svg_animator_core4.PxDiagnosticKind.internal, error, { phase: "render" });
|
|
824
858
|
return null;
|
|
825
859
|
}
|
|
826
860
|
}, [compiled, trackById]);
|
|
827
861
|
(0, import_react3.useEffect)(() => {
|
|
828
|
-
|
|
862
|
+
const diag = makeDiag();
|
|
863
|
+
for (const w of warningsRef.current) diag.warn(import_svg_animator_core4.PxDiagnosticKind.platform, w);
|
|
829
864
|
}, [root]);
|
|
830
|
-
const failure = (
|
|
831
|
-
(0, import_react3.useEffect)(() => {
|
|
832
|
-
if (failure) onError == null ? void 0 : onError(failure);
|
|
833
|
-
}, [failure]);
|
|
865
|
+
const failure = (_b = compiled.error) != null ? _b : renderErrorRef.current;
|
|
834
866
|
if (failure) return fallback ? fallback(failure) : null;
|
|
835
867
|
let content = root;
|
|
836
868
|
if (autoplay && effectiveStartOn === "scrollIntoView" && root) {
|
|
@@ -855,19 +887,11 @@ function PixodeskSvgAnimator({
|
|
|
855
887
|
}
|
|
856
888
|
);
|
|
857
889
|
}
|
|
858
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PxRnErrorBoundary, {
|
|
890
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PxRnErrorBoundary, { fallback, diag: makeDiag(), children: content });
|
|
859
891
|
}
|
|
860
892
|
var PixodeskSvgAnimator_default = PixodeskSvgAnimator;
|
|
861
893
|
// Annotate the CommonJS export names for ESM import in node:
|
|
862
894
|
0 && (module.exports = {
|
|
863
|
-
PixodeskSvgAnimator
|
|
864
|
-
PxRnErrorBoundary,
|
|
865
|
-
RN_SVG_COMPONENTS,
|
|
866
|
-
compileTracks,
|
|
867
|
-
openClosedTextPathTargets,
|
|
868
|
-
renderRnNode,
|
|
869
|
-
sampleProps,
|
|
870
|
-
toRnPropName,
|
|
871
|
-
toRnProps
|
|
895
|
+
PixodeskSvgAnimator
|
|
872
896
|
});
|
|
873
897
|
//# sourceMappingURL=index.cjs.map
|