From c4fda3f83f508fb714667f331204b12162e265e7 Mon Sep 17 00:00:00 2001 From: karamalie Date: Wed, 25 Aug 2021 14:46:01 +0500 Subject: [PATCH] feat(theming code): theming code --- package.json | 2 +- src/animation/animation.ts | 52 ++++++++++++++++++++++++++++++++++++++ src/properties/property.ts | 8 ++++-- 3 files changed, 59 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 6d3d74a..69885d4 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "author": "Jawish Hameed ", "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", diff --git a/src/animation/animation.ts b/src/animation/animation.ts index 36475d8..15fa3f6 100644 --- a/src/animation/animation.ts +++ b/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[] { + const colors: Record[] = []; + + // 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. * diff --git a/src/properties/property.ts b/src/properties/property.ts index 91cacd7..95f1c1f 100644 --- a/src/properties/property.ts +++ b/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;