feat(theming code): theming code

package.json

@@ -21,7 +21,7 @@
   "author": "Jawish Hameed <jawish@lottiefiles.com>",
   "scripts": {
     "build": "yarn build:prod",
-    "build:dev": "cross-env NODE_ENV=development rollup -c",
+    "build:dev": "cross-env NODE_ENV=development rollup -c -w",
     "build:prod": "cross-env NODE_ENV=production rollup -c",
     "clean": "del-cli --force coverage dist docs",
     "docs": "typedoc --plugin none",

src/animation/animation.ts

@@ -3,6 +3,7 @@ import fetch from 'cross-fetch';
 import { Asset, ImageAsset, PrecompositionAsset } from '../assets';
 import { AssetType, LayerType, PropertyType } from '../constants';
 import { Layer, PrecompositionLayer, ShapeLayer } from '../layers';
+// import { Shape } from '../shapes';
 import { GroupLayer } from '../layers/group-layer';
 import { ImageLayer } from '../layers/image-layer';
 import { SolidLayer } from '../layers/solid-layer';
@@ -102,6 +103,57 @@ export class Animation {
     return Array.from(colors).map(c => JSON.parse(c));
   }
 
+  /*
+   * Returns all the colors used in the animation.
+   *
+   * @returns Array of colors.
+   */
+
+  public get colorsVerbose(): Record<string, any>[] {
+    const colors: Record<string, any>[] = [];
+
+    // map the lottie into lottie js
+    // all the properties are stored inside a registry.  (type == color)
+    // inside each property there are many key frames
+    // each keyframe has a color.
+
+    [...useRegistry().keys()]
+      // Filter color properties
+      .filter((p: Property) => p.type === PropertyType.COLOR)
+      .forEach((cp: Property) => {
+        const parent = cp.getParent();
+        const pathString = this.parentPath(parent, parent.name);
+        console.log(pathString);
+        cp.values.forEach((v: KeyFrame) => {
+          // console.log(v);
+          const colorParts = v.value as [number, number, number, number];
+          const color = JSON.stringify([
+            Math.round(colorParts[0] * 255),
+            Math.round(colorParts[1] * 255),
+            Math.round(colorParts[2] * 255),
+            colorParts[3],
+          ]);
+          console.log(color);
+        });
+        // console.log('------------------------');
+      });
+
+    return colors;
+  }
+
+  public parentPath(shape: any, identifier: string): any {
+    let pathString = '';
+    if (shape.parent === undefined) {
+      // stop recursion
+      //...
+      return pathString;
+    } else {
+      const parent = shape.parent;
+      pathString = identifier + '.' + parent.name;
+      this.parentPath(parent, pathString);
+    }
+  }
+
   /**
    * Returns the running time of the animation in seconds.
    *

src/properties/property.ts

@@ -23,7 +23,11 @@ export class Property {
    *
    * @protected
    */
-  protected parent: any;
+  private _parent: any;
+
+  public getParent(): any {
+    return this._parent;
+  }
 
   /**
    * Constructor.
@@ -32,7 +36,7 @@ export class Property {
    * @param type        Property type.
    */
   constructor(parent: any, type: PropertyType) {
-    this.parent = parent;
+    this._parent = parent;
 
     this.type = type;