@flighthq/scene2d-formats 0.3.0 → 0.3.1-next.320.fe56fc2

package/dist/lottieDocument.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lottieDocument.d.ts","sourceRoot":"","sources":["../src/lottieDocument.ts"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAEV,aAAa,EAMb,gBAAgB,EAKhB,cAAc,EACd,2BAA2B,EAC3B,0BAA0B,EAsB3B,MAAM,0BAA0B,CAAC;AAKlC,wBAAgB,kCAAkC,CAAC,IAAI,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAQpG;AAED;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,EACzC,WAAW,CAAC,EAAE,gBAAgB,EAAE,EAChC,OAAO,CAAC,EAAE,QAAQ,CAAC,2BAA2B,CAAC,GAC9C,0BAA0B,CAsC5B"}
+{"version":3,"file":"lottieDocument.d.ts","sourceRoot":"","sources":["../src/lottieDocument.ts"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAEV,aAAa,EAOb,gBAAgB,EAKhB,cAAc,EACd,2BAA2B,EAC3B,0BAA0B,EAsB3B,MAAM,0BAA0B,CAAC;AAKlC,wBAAgB,kCAAkC,CAAC,IAAI,EAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAQpG;AAED;;;GAGG;AACH,wBAAgB,+BAA+B,CAC7C,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,EACzC,WAAW,CAAC,EAAE,gBAAgB,EAAE,EAChC,OAAO,CAAC,EAAE,QAAQ,CAAC,2BAA2B,CAAC,GAC9C,0BAA0B,CAsC5B"}

package/dist/lottieDocument.js

@@ -4,8 +4,8 @@ import { packColor } from '@flighthq/color/contract';
 import { easeCubicBezier } from '@flighthq/easing/contract';
 import { createGradientTransformMatrix } from '@flighthq/geometry/contract';
 import { reportImportDiagnostic } from '@flighthq/importdiagnostics/contract';
-import { addNodeChild } from '@flighthq/node/contract';
-import { appendPathCubicCurveTo, appendPathEllipse, appendPathLineTo, appendPathMoveTo, appendPathPolygon, appendPathRectangle, appendPathRoundRectangle, createPath, dashPath, getPathLength, } from '@flighthq/path/contract';
+import { addNodeChild, invalidateNodeLocalTransform } from '@flighthq/node/contract';
+import { appendPathCubicCurveTo, appendPathEllipse, appendPathLineTo, appendPathMoveTo, appendPathPolygon, appendPathRectangle, appendPathRoundRectangle, createPath, dashPath, getPathLength, reversePath, } from '@flighthq/path/contract';
 import { applyAnimationClipToNode2D, createSprite, createDisplayObject } from '@flighthq/scene2d/contract';
 import { appendShapeBeginFill, appendShapeBeginGradientFill, appendShapeEndFill, appendShapeLineGradientStyle, appendShapeLineStyle, appendShapePath, clearShapeCommands, createShape, } from '@flighthq/shape/contract';
 import { createTextLabel } from '@flighthq/text/contract';
@@ -20,7 +20,7 @@ export function applyAnimationClipToLottieDocument(clip, time) {
         if (target === null || typeof target !== 'object' || target.lottieApply === undefined)
             continue;
         sampleAnimationTrack(_sampleScratch, channel.track, time);
-        target.lottieApply(_sampleScratch);
+        target.lottieApply(_sampleScratch, time);
     }
 }
 /**
@@ -77,10 +77,16 @@ function appendLottieLayers(root, layers, context) {
 }
 function createLottieLayerNode(layer, context) {
     const container = createDisplayObject({ name: layer.nm ?? null });
-    applyLottieTransform(container, layer.ks, context);
+    const hidden = layer.hd === true;
+    // A hidden layer still contributes its spatial transform when another layer parents to it. Its
+    // opacity, visibility window, paint, and masks affect only its own content, so none may leak onto
+    // the referencing child through Flight's hierarchy.
+    applyLottieTransform(container, layer.ks, context, !hidden, layer.ao === 1);
+    reportLottieExpression(layer.ks, context);
+    if (hidden)
+        return container;
     applyLottieLayerVisibility(container, layer, context);
     applyLottieBlendMode(container, layer, context);
-    reportLottieExpression(layer.ks, context);
     if (layer.ty === 0)
         appendLottiePrecomposition(container, layer, context);
     else if (layer.ty === 1)
@@ -102,7 +108,7 @@ function createLottieLayerNode(layer, context) {
     applyLottieMasks(container, layer.masksProperties ?? [], context);
     return container;
 }
-function applyLottieTransform(target, transform, context) {
+function applyLottieTransform(target, transform, context, includeOpacity = true, autoOrient = false) {
     if (transform === undefined)
         return;
     if (isSeparatedPosition(transform.p)) {
@@ -118,10 +124,13 @@ function applyLottieTransform(target, transform, context) {
     // pass through unconverted. The radians live below the seam, where nodeTransform2d applies
     // DEG_TO_RAD.
     applyScalarProperty(target, transform.r ?? transform.rz, 'Rotation', (value) => value, context);
-    applyScalarProperty(target, transform.o, 'Alpha', (value) => value / 100, context);
+    if (includeOpacity)
+        applyScalarProperty(target, transform.o, 'Alpha', (value) => value / 100, context);
     if (transform.sk !== undefined) {
         applyScalarProperty(target, transform.sk, 'SkewX', (value) => value, context);
     }
+    if (autoOrient)
+        appendLottieAutoOrientation(target, transform.p, transform.r ?? transform.rz, context);
 }
 function applyVectorProperty(target, property, vectorPath, scalarPaths, components, convert, context) {
     if (property === undefined)
@@ -133,7 +142,7 @@ function applyVectorProperty(target, property, vectorPath, scalarPaths, componen
     appendNumericPropertyChannels(property, components, (component) => ({
         node: target,
         path: component === null ? vectorPath : scalarPaths[component],
-    }), convert, context);
+    }), convert, context, vectorPath === 'Position');
 }
 function applyScalarProperty(target, property, path, convert, context) {
     if (property === undefined)
@@ -143,20 +152,112 @@ function applyScalarProperty(target, property, path, convert, context) {
         return;
     appendNumericPropertyChannels(property, 1, () => ({ node: target, path }), convert, context);
 }
-function appendNumericPropertyChannels(property, components, target, convert, context) {
+function appendNumericPropertyChannels(property, components, target, convert, context, spatialTangents = false) {
     if (!isAnimatedProperty(property))
         return;
     const keyframes = property.k;
     if (keyframes.length === 0)
         return;
-    const componentSpecific = hasComponentSpecificEasing(keyframes, components);
+    const spatial = spatialTangents && hasSpatialTangents(keyframes);
+    const componentSpecific = !spatial && hasComponentSpecificEasing(keyframes, components);
     if (componentSpecific && components > 1) {
         for (let component = 0; component < components; component++) {
             context.channels.push(createAnimationChannel(createLottieTrack(keyframes, 1, context, (value) => [convert(numericValue(value, components)[component], component)], component), target(component)));
         }
         return;
     }
-    context.channels.push(createAnimationChannel(createLottieTrack(keyframes, components, context, (value) => numericValue(value, components).map(convert), 0), target(null)));
+    context.channels.push(createAnimationChannel(createLottieTrack(keyframes, components, context, (value) => numericValue(value, components).map(convert), 0, spatial, (value, component) => convert(value, component) - convert(0, component)), target(null)));
+}
+function appendLottieAutoOrientation(target, property, rotation, context) {
+    const sampler = createLottiePositionSampler(property, context);
+    if (sampler === null)
+        return;
+    const baseRotation = target.rotation;
+    const rotationTrack = rotation !== undefined && isAnimatedProperty(rotation)
+        ? createLottieTrack(rotation.k, 1, context, (value) => numericValue(value, 1), 0)
+        : null;
+    const previous = [0, 0];
+    const current = [0, 0];
+    const frameStep = Math.abs(context.frameScale) / context.document.fr;
+    const applyOrientation = (time) => {
+        let previousTime;
+        let currentTime;
+        if (time <= sampler.firstTime) {
+            previousTime = sampler.firstTime;
+            currentTime = sampler.firstTime + frameStep * 0.01;
+        }
+        else if (time >= sampler.lastTime) {
+            previousTime = sampler.lastTime - frameStep * (sampler.separated ? 0.01 : 0.05);
+            currentTime = sampler.lastTime;
+        }
+        else {
+            previousTime = time - frameStep * 0.01;
+            currentTime = time;
+        }
+        sampler.sample(previous, previousTime);
+        sampler.sample(current, currentTime);
+        const orientation = (Math.atan2(current[1] - previous[1], current[0] - previous[0]) * 180) / Math.PI;
+        if (rotationTrack !== null)
+            sampleAnimationTrack(_autoOrientRotationScratch, rotationTrack, time);
+        target.rotation = (rotationTrack === null ? baseRotation : _autoOrientRotationScratch[0]) + orientation;
+        invalidateNodeLocalTransform(target);
+    };
+    applyOrientation(sampler.firstTime);
+    context.channels.push(createAnimationChannel(sampler.carrier, {
+        lottieApply(_sample, time) {
+            applyOrientation(time);
+        },
+    }));
+}
+function createLottiePositionSampler(property, context) {
+    if (property === undefined)
+        return null;
+    if (isSeparatedPosition(property)) {
+        const xTrack = isAnimatedProperty(property.x)
+            ? createLottieTrack(property.x.k, 1, context, (value) => numericValue(value, 1), 0)
+            : null;
+        const yTrack = isAnimatedProperty(property.y)
+            ? createLottieTrack(property.y.k, 1, context, (value) => numericValue(value, 1), 0)
+            : null;
+        const carrier = xTrack ?? yTrack;
+        if (carrier === null)
+            return null;
+        const x = numericValue(initialLottieValue(property.x), 1)[0];
+        const y = numericValue(initialLottieValue(property.y), 1)[0];
+        const tracks = [xTrack, yTrack].filter((track) => track !== null && track.times.length > 0);
+        if (tracks.length === 0)
+            return null;
+        return {
+            carrier,
+            firstTime: Math.min(...tracks.map((track) => track.times[0])),
+            lastTime: Math.max(...tracks.map((track) => track.times[track.times.length - 1])),
+            sample(out, time) {
+                out[0] = x;
+                out[1] = y;
+                if (xTrack !== null)
+                    sampleAnimationTrack(out, xTrack, time);
+                if (yTrack !== null) {
+                    sampleAnimationTrack(_autoOrientScalarScratch, yTrack, time);
+                    out[1] = _autoOrientScalarScratch[0];
+                }
+            },
+            separated: true,
+        };
+    }
+    if (!isAnimatedProperty(property))
+        return null;
+    const track = createLottieTrack(property.k, 2, context, (value) => numericValue(value, 2), 0, hasSpatialTangents(property.k));
+    if (track.times.length === 0)
+        return null;
+    return {
+        carrier: track,
+        firstTime: track.times[0],
+        lastTime: track.times[track.times.length - 1],
+        sample(out, time) {
+            sampleAnimationTrack(out, track, time);
+        },
+        separated: false,
+    };
 }
 function bindMutableNumericProperty(property, current, convert, onChange, context) {
     if (!isAnimatedProperty(property))
@@ -174,9 +275,9 @@ function bindMutableNumericProperty(property, current, convert, onChange, contex
         },
     }), convert, context);
 }
-function createLottieTrack(keyframes, components, context, valueOf, easingComponent) {
+function createLottieTrack(keyframes, components, context, valueOf, easingComponent, spatialTangents = false, tangentOf = (value) => value) {
     const times = [];
-    const values = [];
+    const samples = [];
     const retained = [];
     for (let index = 0; index < keyframes.length; index++) {
         const keyframe = keyframes[index];
@@ -186,26 +287,102 @@ function createLottieTrack(keyframes, components, context, valueOf, easingCompon
         times.push(time);
         retained.push(keyframe);
         const source = keyframe.s ?? keyframes[index - 1]?.e;
-        values.push(...valueOf(source, index));
+        samples.push(valueOf(source, index));
     }
+    const spatial = spatialTangents && hasSpatialTangents(retained);
+    const values = spatial
+        ? createLottieSpatialTrackValues(retained, samples, times, components, tangentOf)
+        : samples.flat();
     const segmentEasings = [];
     for (let index = 0; index < retained.length - 1; index++) {
         const keyframe = retained[index];
-        if (keyframe.h === 1) {
-            segmentEasings.push(_holdEasing);
-        }
-        else {
-            segmentEasings.push(createLottieSegmentEasing(keyframe.o, retained[index + 1].i, easingComponent));
-        }
+        const temporal = keyframe.h === 1 ? _holdEasing : createLottieSegmentEasing(keyframe.o, keyframe.i, easingComponent);
+        const outgoing = spatialTangent(keyframe.to, components, tangentOf);
+        const incoming = spatialTangent(keyframe.ti, components, tangentOf);
+        segmentEasings.push(spatial && outgoing !== null && incoming !== null
+            ? createLottieSpatialSegmentEasing(temporal, samples[index], samples[index + 1], outgoing, incoming)
+            : temporal);
     }
     return createAnimationTrack({
         components,
-        interpolation: 'Linear',
+        interpolation: spatial ? 'Cubic' : 'Linear',
         segmentEasings,
         times,
         values,
     });
 }
+function createLottieSpatialTrackValues(keyframes, samples, times, components, tangentOf) {
+    const incoming = samples.map(() => new Array(components).fill(0));
+    const outgoing = samples.map(() => new Array(components).fill(0));
+    for (let index = 0; index < samples.length - 1; index++) {
+        const dt = times[index + 1] - times[index];
+        const spatialOut = spatialTangent(keyframes[index].to, components, tangentOf);
+        const spatialIn = spatialTangent(keyframes[index].ti, components, tangentOf);
+        for (let component = 0; component < components; component++) {
+            if (spatialOut !== null && spatialIn !== null) {
+                outgoing[index][component] = (3 * spatialOut[component]) / dt;
+                incoming[index + 1][component] = (-3 * spatialIn[component]) / dt;
+            }
+            else {
+                const slope = (samples[index + 1][component] - samples[index][component]) / dt;
+                outgoing[index][component] = slope;
+                incoming[index + 1][component] = slope;
+            }
+        }
+    }
+    const values = [];
+    for (let index = 0; index < samples.length; index++) {
+        values.push(...incoming[index], ...samples[index], ...outgoing[index]);
+    }
+    return values;
+}
+function spatialTangent(value, components, tangentOf) {
+    if (!Array.isArray(value))
+        return null;
+    return numericValue(value, components).map(tangentOf);
+}
+const LOTTIE_SPATIAL_CURVE_SAMPLES = 150;
+function createLottieSpatialSegmentEasing(temporal, start, end, outgoing, incoming) {
+    const lengths = new Array(LOTTIE_SPATIAL_CURVE_SAMPLES).fill(0);
+    let previous = start;
+    for (let index = 1; index < LOTTIE_SPATIAL_CURVE_SAMPLES; index++) {
+        const point = sampleLottieSpatialBezier(start, end, outgoing, incoming, index / (LOTTIE_SPATIAL_CURVE_SAMPLES - 1));
+        let distanceSquared = 0;
+        for (let component = 0; component < start.length; component++) {
+            distanceSquared += (point[component] - previous[component]) ** 2;
+        }
+        lengths[index] = lengths[index - 1] + Math.sqrt(distanceSquared);
+        previous = point;
+    }
+    const total = lengths[lengths.length - 1];
+    return (alpha) => {
+        const distanceFraction = temporal?.(alpha) ?? alpha;
+        if (distanceFraction <= 0 || total === 0)
+            return 0;
+        if (distanceFraction >= 1)
+            return 1;
+        const distance = total * distanceFraction;
+        let low = 0;
+        let high = lengths.length - 1;
+        while (low + 1 < high) {
+            const middle = (low + high) >> 1;
+            if (lengths[middle] <= distance)
+                low = middle;
+            else
+                high = middle;
+        }
+        const span = lengths[high] - lengths[low];
+        const fraction = span > 0 ? (distance - lengths[low]) / span : 0;
+        return (low + fraction) / (LOTTIE_SPATIAL_CURVE_SAMPLES - 1);
+    };
+}
+function sampleLottieSpatialBezier(start, end, outgoing, incoming, time) {
+    const inverse = 1 - time;
+    return start.map((value, component) => inverse ** 3 * value +
+        3 * inverse ** 2 * time * (value + outgoing[component]) +
+        3 * inverse * time ** 2 * (end[component] + incoming[component]) +
+        time ** 3 * end[component]);
+}
 function createLottieSegmentEasing(outgoing, incoming, component) {
     if (outgoing === undefined || incoming === undefined)
         return null;
@@ -318,6 +495,9 @@ function appendLottieShapeItems(parent, items, context, name = null) {
             const color = numericValue(initialLottieValue(stroke.c), 3);
             const opacity = [numericValue(initialLottieValue(stroke.o), 1)[0] / 100];
             const width = [numericValue(initialLottieValue(stroke.w), 1)[0]];
+            const miterLimit = [
+                stroke.ml2 === undefined ? (stroke.ml ?? 4) : numericValue(initialLottieValue(stroke.ml2), 1)[0],
+            ];
             const dashEntries = stroke.d ?? [];
             const hasAnimatedDash = dashEntries.some((entry) => isAnimatedProperty(entry.v));
             const dash = hasAnimatedDash
@@ -338,7 +518,7 @@ function appendLottieShapeItems(parent, items, context, name = null) {
                 dashOffset,
                 joints: mapLottieLineJoin(stroke.lj),
                 kind: 'stroke',
-                miterLimit: stroke.ml ?? 4,
+                miterLimit: miterLimit[0],
                 opacity: opacity[0],
                 width: width[0],
             };
@@ -352,6 +532,12 @@ function appendLottieShapeItems(parent, items, context, name = null) {
                 paint.width = width[0];
                 rerender();
             }, context);
+            if (stroke.ml2 !== undefined) {
+                bindMutableNumericProperty(stroke.ml2, miterLimit, (value) => value, () => {
+                    paint.miterLimit = miterLimit[0];
+                    rerender();
+                }, context);
+            }
         }
         else if (item.ty === 'gf' || item.ty === 'gs') {
             const gradient = item;
@@ -361,6 +547,9 @@ function appendLottieShapeItems(parent, items, context, name = null) {
             const end = numericValue(initialLottieValue(gradient.e), 2);
             const opacity = [gradient.o === undefined ? 100 : numericValue(initialLottieValue(gradient.o), 1)[0]];
             const width = [gradient.w === undefined ? 1 : numericValue(initialLottieValue(gradient.w), 1)[0]];
+            const miterLimit = [
+                gradient.ml2 === undefined ? (gradient.ml ?? 4) : numericValue(initialLottieValue(gradient.ml2), 1)[0],
+            ];
             const dashEntries = gradient.d ?? [];
             const hasAnimatedDash = dashEntries.some((entry) => isAnimatedProperty(entry.v));
             const dash = hasAnimatedDash
@@ -382,13 +571,14 @@ function appendLottieShapeItems(parent, items, context, name = null) {
                 end,
                 joints: mapLottieLineJoin(gradient.lj),
                 kind: 'gradient',
-                miterLimit: gradient.ml ?? 4,
+                miterLimit: miterLimit[0],
                 opacity: opacity[0] / 100,
                 shape: gradient.t,
                 start,
                 type: gradient.ty,
                 values,
                 width: width[0],
+                winding: gradient.r === 2 ? 'evenOdd' : 'nonZero',
             };
             state.paints.push(paint);
             bindMutableNumericProperty(gradient.g.k, values, (value) => value, rerender, context);
@@ -406,6 +596,12 @@ function appendLottieShapeItems(parent, items, context, name = null) {
                     rerender();
                 }, context);
             }
+            if (gradient.ml2 !== undefined) {
+                bindMutableNumericProperty(gradient.ml2, miterLimit, (value) => value, () => {
+                    paint.miterLimit = miterLimit[0];
+                    rerender();
+                }, context);
+            }
         }
         else if (item.ty === 'tm') {
             const trim = item;
@@ -433,7 +629,7 @@ function createLottieShapeItemPath(item) {
         const value = toLottieShapePath(initialLottieValue(shapePath.ks));
         if (value === undefined)
             return null;
-        return createLottieBezierPath(value);
+        return applyLottieShapeDirection(createLottieBezierPath(value), shapePath.d);
     }
     const path = createPath();
     if (item.ty === 'rc') {
@@ -447,14 +643,14 @@ function createLottieShapeItemPath(item) {
         else {
             appendPathRectangle(path, position[0] - size[0] / 2, position[1] - size[1] / 2, size[0], size[1]);
         }
-        return path;
+        return applyLottieShapeDirection(path, rectangle.d);
     }
     if (item.ty === 'el') {
         const ellipse = item;
         const position = numericValue(initialLottieValue(ellipse.p), 2);
         const size = numericValue(initialLottieValue(ellipse.s), 2);
         appendPathEllipse(path, position[0], position[1], size[0] / 2, size[1] / 2);
-        return path;
+        return applyLottieShapeDirection(path, ellipse.d);
     }
     if (item.ty === 'sr') {
         const polystar = item;
@@ -465,7 +661,7 @@ function createLottieShapeItemPath(item) {
         const rotation = numericValue(initialLottieValue(polystar.r), 1)[0];
         const outerRoundness = polystar.os === undefined ? 0 : numericValue(initialLottieValue(polystar.os), 1)[0];
         const innerRoundness = polystar.sy === 1 && polystar.is !== undefined ? numericValue(initialLottieValue(polystar.is), 1)[0] : 0;
-        return createLottiePolystarPath(polystar.sy, center, points, outer, inner, rotation, outerRoundness, innerRoundness);
+        return applyLottieShapeDirection(createLottiePolystarPath(polystar.sy, center, points, outer, inner, rotation, outerRoundness, innerRoundness), polystar.d);
     }
     return null;
 }
@@ -513,7 +709,7 @@ function createLottiePolystarPath(kind, center, pointCount, outer, inner, rotati
 }
 function bindLottieGeometryItem(item, state, pathIndex, rerender, context) {
     const rebuild = (path) => {
-        state.paths[pathIndex] = path;
+        state.paths[pathIndex] = applyLottieShapeDirection(path, item.d);
         rerender();
     };
     if (item.ty === 'sh') {
@@ -705,9 +901,10 @@ function createLottieBezierPath(value) {
     }
     return path;
 }
-// Each paint restates the group's whole path set, because that is what a Bodymovin paint means: it
-// applies to every path in its group. Paints are emitted in the order the file lists them, so a
-// second fill lands on top of the first rather than replacing it.
+// The current representation restates every local path for every local paint. This preserves
+// multiple paints when all paths precede all styles, but it does not yet implement Lottie's general
+// render stack: styles scope only over preceding shapes (including shapes in nested groups), and
+// repeated styles render in reverse order. That needs a scoped stack rather than another field here.
 function renderLottieShapeState(state) {
     clearShapeCommands(state.shape);
     if (state.paths.length === 0)
@@ -728,7 +925,7 @@ function renderLottieShapeState(state) {
         }
         else if (paint.type === 'gf') {
             appendLottieGradientFill(state.shape, paint);
-            appendLottieShapePaths(state, null);
+            appendLottieShapePaths(state, paint.winding);
             appendShapeEndFill(state.shape);
         }
         else {
@@ -756,6 +953,13 @@ function appendLottieGradientStroke(shape, paint) {
     appendShapeLineStyle(shape, paint.width, 0, 1, false, 'normal', paint.caps, paint.joints, paint.miterLimit);
     appendShapeLineGradientStyle(shape, paint.shape === 2 ? 'radial' : 'linear', gradient.colors, gradient.alphas, gradient.ratios, createLottieGradientMatrix(paint.start, paint.end));
 }
+function applyLottieShapeDirection(path, direction) {
+    if (direction !== 3)
+        return path;
+    const reversed = createPath(path.winding);
+    reversePath(path, reversed);
+    return reversed;
+}
 function applyLottieMasks(target, masks, context) {
     const active = masks.filter((mask) => mask.mode !== 'n');
     if (active.length === 0)
@@ -915,8 +1119,7 @@ function hasComponentSpecificEasing(keyframes, components) {
         return false;
     for (let index = 0; index < keyframes.length - 1; index++) {
         const current = keyframes[index];
-        const next = keyframes[index + 1];
-        for (const handle of [current.o, next.i]) {
+        for (const handle of [current.o, current.i]) {
             if (handle === undefined)
                 continue;
             if (handleVaries(handle.x, components) || handleVaries(handle.y, components))
@@ -925,6 +1128,11 @@ function hasComponentSpecificEasing(keyframes, components) {
     }
     return false;
 }
+function hasSpatialTangents(keyframes) {
+    return keyframes.some((keyframe, index) => {
+        return index < keyframes.length - 1 && Array.isArray(keyframe.to) && Array.isArray(keyframe.ti);
+    });
+}
 function handleVaries(value, components) {
     if (!Array.isArray(value) || value.length < 2)
         return false;
@@ -1029,6 +1237,8 @@ function reportLottieDrop(context, kind, detail) {
     reportImportDiagnostic(context.diagnostics, ImportDiagnosticSeverity.Drop, kind, 'lottieDocument', detail);
 }
 const _sampleScratch = new Array(256).fill(0);
+const _autoOrientRotationScratch = [0];
+const _autoOrientScalarScratch = [0];
 const _holdEasing = () => 0;
 // Bodymovin's own numbering. The five that fold into blend state:
 const _lottieFixedBlendModes = new Map([