feat: add rgbaToHexa

Author: daybrush

packages/scenejs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "scenejs",
-    "version": "1.8.5",
+    "version": "1.9.0",
     "description": "JavaScript & CSS timeline-based animation library",
     "main": "dist/scene.cjs.js",
     "module": "dist/scene.esm.js",
@@ -48,6 +48,7 @@
         "@types/chai": "^4.1.7",
         "@types/karma-chai": "^0.1.1",
         "@types/mocha": "^5.2.6",
+        "@types/node": "^18.11.17",
         "@types/sinon": "^10.0.11",
         "chai": "^4.2.0",
         "coveralls": "^3.0.0",

packages/scenejs/src/index.cjs.ts

@@ -3,6 +3,7 @@ import Scene, * as others from "./index";
 for (const name in others) {
     (Scene as any)[name] = (others as any)[name];
 }
+declare const module: any;
 
 export * from "./index";
 module.exports = Scene;

packages/scenejs/src/index.ts

@@ -8,6 +8,12 @@ export * from "./easing";
 export * from "./presets";
 export * from "./types";
 export { OPTIONS, EVENTS, FIXED, ROLES, NAME_SEPARATOR } from "./consts";
-export { setRole, setAlias, isRole, isScene, isSceneItem, isFrame, selectorAll } from "./utils";
+export {
+    setRole, setAlias, isRole,
+    isScene, isSceneItem,
+    isFrame, selectorAll,
+    rgbaToHexWithOpacity,
+    rgbaToHexa,
+} from "./utils";
 export { Scene as default };
 export * from "./reactive";

packages/scenejs/src/utils.ts

@@ -1,13 +1,16 @@
 import {
     ROLES, MAXIMUM, FIXED, ALIAS,
-    RUNNING, PLAY, ENDED, PLAY_CSS, CURRENT_TIME, START_ANIMATION, EASINGS, NAME_SEPARATOR
+    RUNNING, PLAY, ENDED, PLAY_CSS, CURRENT_TIME,
+    START_ANIMATION, EASINGS, NAME_SEPARATOR
 } from "./consts";
 import PropertyObject from "./PropertyObject";
 import Scene from "./Scene";
 import SceneItem from "./SceneItem";
 import {
     isArray, ANIMATION, ARRAY, OBJECT,
-    PROPERTY, STRING, NUMBER, IS_WINDOW, IObject, $, isObject, addEvent, removeEvent, isString,
+    PROPERTY, STRING, NUMBER, IS_WINDOW, IObject,
+    $, isObject, addEvent, removeEvent, isString,
+    splitComma, splitBracket,
 } from "@daybrush/utils";
 import { EasingType, EasingFunction, NameType, SelectorAllType } from "./types";
 import { toPropertyObject } from "./utils/property";
@@ -294,3 +297,38 @@ export function selectorAll(callback: (index: number) => any, defaultCount = 0):
 
     return nextCallback;
 }
+
+export function rgbaToHexa(rgba: string) {
+    const hexInfo = rgbaToHexWithOpacity(rgba);
+    const hex = hexInfo.hex;
+
+    if (!hexInfo.hex) {
+        return "";
+    }
+    const opacityHex = Math.floor(hexInfo.opacity * 255).toString(16);
+
+    return `${hex}${opacityHex}`;
+}
+
+export function rgbaToHexWithOpacity(rgba: string) {
+    const rgbaInfo = splitBracket(rgba);
+
+    if (rgbaInfo.prefix.indexOf("rgb") !== 0) {
+        return {
+            hex: "",
+            opacity: 1,
+        };
+    }
+
+    const rgbaArr = splitComma(rgbaInfo.value);
+    const rgbaNums = rgbaArr.slice(0, 3).map(num => {
+        const dec = parseInt(num, 10);
+
+        return dec.toString(16);
+    });
+
+    return {
+        hex: `#${rgbaNums.join("")}`,
+        opacity: rgbaArr[3] ? parseFloat(rgbaArr[3]) : 1,
+    };
+}

packages/scenejs/src/utils/property.ts

@@ -167,6 +167,7 @@ export function toPropertyObject(value: string | IObject<any> | any[], model?: N
     }
     return value;
 }
+
 export function toObject(object: PropertyObject, result: IObject<any> = {}) {
     const model = object.model;
 

packages/scenejs/test/unit/utils/color.spec.ts

@@ -1,4 +1,5 @@
 import { toFullHex, cutHex, hexToRGBA, hslToRGBA } from "@daybrush/utils";
+import { rgbaToHexa } from "../../../src/utils";
 
 describe("color Test", () => {
     describe("test color ", () => {
@@ -52,5 +53,26 @@ describe("color Test", () => {
             expect(rgb7).to.be.deep.equals([179, 77, 145, 0.4]);
             expect(rgb8).to.be.deep.equals([179, 77, 145, 1]);
         });
+        it("should check 'rgbaToHexa'", () => {
+            // Given, When
+            const rgba1 = rgbaToHexa(`rgba(179, 77, 77, 1)`);
+            const rgba2 = rgbaToHexa(`rgba(145, 179, 77, 1)`);
+            const rgba3 = rgbaToHexa(`rgba(77, 179, 128, 1)`);
+            const rgba4 = rgbaToHexa(`rgba(77, 119, 179, 1)`);
+            const rgba5 = rgbaToHexa(`rgba(110, 77, 179, 1)`);
+            const rgba6 = rgbaToHexa(`rgba(179, 77, 145, 1)`);
+            const rgba7 = rgbaToHexa(`rgba(179, 77, 145, 0.4)`);
+            const rgba8 = rgbaToHexa(`rgba(179, 77, 145, 1)`);
+
+            // Then
+            expect(rgba1).to.be.equals("#b34d4dff");
+            expect(rgba2).to.be.equals("#91b34dff");
+            expect(rgba3).to.be.equals("#4db380ff");
+            expect(rgba4).to.be.equals("#4d77b3ff");
+            expect(rgba5).to.be.equals("#6e4db3ff");
+            expect(rgba6).to.be.equals("#b34d91ff");
+            expect(rgba7).to.be.equals("#b34d9166");
+            expect(rgba8).to.be.equals("#b34d91ff");
+        });
     });
 });

yarn.lock

@@ -3359,6 +3359,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-16.18.9.tgz"
   integrity sha512-nhrqXYxiQ+5B/tPorWum37VgAiefi/wmfJ1QZKGKKecC8/3HqcTTJD0O+VABSPwtseMMF7NCPVT9uGgwn0YqsQ==
 
+"@types/node@^18.11.17":
+  version "18.11.17"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.11.17.tgz#5c009e1d9c38f4a2a9d45c0b0c493fe6cdb4bcb5"
+  integrity sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz"
@@ -16328,6 +16333,17 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
+scenejs@~1.8.5:
+  version "1.8.5"
+  resolved "https://registry.npmjs.org/scenejs/-/scenejs-1.8.5.tgz#0023581e64807dd7e802b601f4d88c4a727da0ff"
+  integrity sha512-LkiHyK2fNGrsV+68b7wQ76SirmgZR93vUsZOdXuWNxc+O9SlapnxkJF698w2ZYHNX331vL9ETUnbToF7zEEgXQ==
+  dependencies:
+    "@cfcs/core" "^0.0.12"
+    "@daybrush/utils" "^1.10.2"
+    "@scena/event-emitter" "^1.0.3"
+    css-styled "^1.0.0"
+    order-map "^0.2.2"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz"