feat(color extraction updates): color extraction code

src/animation/animation.ts

@@ -11,8 +11,12 @@ import { TextLayer } from '../layers/text-layer';
 import { Marker } from '../markers';
 import { Property } from '../properties';
 import { KeyFrame } from '../timeline';
+import { rgbaToHex } from '../utils/color-spaces';
 import { useRegistry } from '../utils/use-registry';
 import { Meta } from './meta';
+interface parentLocatorInterface {
+  [key: string]: string;
+}
 
 /**
  * Animation contains all the information about the Lottie animation.
@@ -109,49 +113,61 @@ export class 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.
+  public get colorsVerbose(): Record<string, any> {
+    const colors: parentLocatorInterface = {};
 
     [...useRegistry().keys()]
       // Filter color properties
       .filter((p: Property) => p.type === PropertyType.COLOR)
-      .forEach((cp: Property) => {
+      .forEach((cp: Property, index: number) => {
+        // cp.UID = Date.now();
+
         const parent = cp.getParent();
-        const pathString = this.parentPath(parent, parent.name);
-        console.log(pathString);
+        const pathString = this.parentPath(parent);
+
         cp.values.forEach((v: KeyFrame) => {
-          // console.log(v);
+          const pathCopy = pathString.slice();
+          pathCopy.unshift('Frame ' + v.frame);
+          // console.log(pathCopy); // key
           const colorParts = v.value as [number, number, number, number];
-          const color = JSON.stringify([
+          // const color = JSON.stringify([
+          //   Math.round(colorParts[0] * 255),
+          //   Math.round(colorParts[1] * 255),
+          //   Math.round(colorParts[2] * 255),
+          //   colorParts[3],
+          // ]);
+          // console.log(color); // value
+          // colors[pathCopy.join('.')] = rgbaToHex([
+          //   Math.round(colorParts[0] * 255),
+          //   Math.round(colorParts[1] * 255),
+          //   Math.round(colorParts[2] * 255),
+          //   colorParts[3],
+          // ]);
+          colors[index] = rgbaToHex([
             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 = '';
+  /*
+   * returns the names of all prents given a shape
+   */
+
+  public parentPath(shape: any, paths: string[] = []): string[] {
     if (shape.parent === undefined) {
       // stop recursion
-      //...
-      return pathString;
-    } else {
-      const parent = shape.parent;
-      pathString = identifier + '.' + parent.name;
-      this.parentPath(parent, pathString);
+      paths.push(shape.name);
+      return paths;
     }
+    paths.push(shape.name);
+    return this.parentPath(shape.parent, paths);
   }
 
   /**

src/index.ts

@@ -9,3 +9,4 @@ export * from './shapes';
 export * from './timeline';
 
 export * from './utils/use-registry';
+export * from './utils/color-spaces';

src/properties/property.ts

@@ -6,6 +6,8 @@ import { useRegistry } from '../utils/use-registry';
  * Represents animated properties of layers and shapes.
  */
 export class Property {
+  public UID = 0;
+
   public readonly type: PropertyType;
 
   public expression?: string;

src/utils/color-spaces.ts

@@ -0,0 +1,24 @@
+export function rgbaToHex(rgba: number[]) {
+  let r = (+rgba[0]).toString(16),
+    g = (+rgba[1]).toString(16),
+    b = (+rgba[2]).toString(16),
+    a = Math.round(+rgba[3] * 255).toString(16);
+
+  if (r.length == 1) r = '0' + r;
+  if (g.length == 1) g = '0' + g;
+  if (b.length == 1) b = '0' + b;
+  if (a.length == 1) a = '0' + a;
+
+  return '#' + r + g + b + a;
+}
+export function hexToRgba(hex: string, alpha: number): number[] {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+
+  if (alpha) {
+    return [r / 255, g / 255, b / 255, alpha];
+  }
+
+  return [r / 255, g / 255, b / 255];
+}