Add 'length' alias for layerDepth setting

Author: nateplusplus

.storybook/main.js

@@ -9,4 +9,7 @@ module.exports = {
   core: {
     builder: '@storybook/builder-webpack5',
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin',
+  },
 };

dist/esm/pushin.js

@@ -38,6 +38,7 @@ export interface SceneSettings {
     composition?: CompositionOptions;
     ratio?: number[];
     autoStart?: string;
+    length?: number;
 }
 export interface PushInOptions {
     composition?: CompositionOptions;
@@ -49,15 +50,16 @@ export interface PushInOptions {
     scrollTarget?: string;
     mode?: string;
     autoStart?: string;
+    length?: number;
 }
 export interface PushInSettings {
+    mode: string;
     composition?: CompositionOptions;
     debug?: boolean;
     layers?: LayerOptions[];
     selector?: string;
     target?: string;
     scrollTarget?: string;
-    mode: string;
 }
 export interface TargetSettings {
     target?: string;

dist/esm/pushin.js.map

@@ -92,6 +92,7 @@
     "lint-staged": "^13.0.3",
     "prettier": "^2.6.1",
     "react": "^18.2.0",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-dom": "^18.2.0",
     "rollup": "3.20.3",
     "rollup-plugin-copy": "3.4.0",

dist/esm/types.d.ts

@@ -32,6 +32,7 @@ export class PushInScene extends PushInBase {
       layers: pushin.options?.layers || [],
       ratio: options?.ratio,
       autoStart: pushin.options?.autoStart,
+      length: this.pushin.options?.length,
     };
 
     this.layers = [];
@@ -92,6 +93,11 @@ export class PushInScene extends PushInBase {
   setLayerDepth() {
     let layerDepth = this.getNumberOption('layerDepth');
 
+    if (!layerDepth) {
+      // use pushin 'length' setting as alias for layerDepth
+      layerDepth = this.getNumberOption('length', this.pushin.container);
+    }
+
     if (layerDepth && typeof layerDepth !== 'number') {
       // not yet compatible with array - set to first index if array passed in.
       [layerDepth] = layerDepth;