feat: Add Color Util

doric-web/dist/index.js

@@ -6158,6 +6158,65 @@ var doric_web = (function (exports, axios, sandbox) {
 	    }
 	}
 
+	var GradientOrientation;
+	(function (GradientOrientation) {
+	    /** draw the gradient from the top to the bottom */
+	    GradientOrientation[GradientOrientation["TOP_BOTTOM"] = 0] = "TOP_BOTTOM";
+	    /** draw the gradient from the top-right to the bottom-left */
+	    GradientOrientation[GradientOrientation["TR_BL"] = 1] = "TR_BL";
+	    /** draw the gradient from the right to the left */
+	    GradientOrientation[GradientOrientation["RIGHT_LEFT"] = 2] = "RIGHT_LEFT";
+	    /** draw the gradient from the bottom-right to the top-left */
+	    GradientOrientation[GradientOrientation["BR_TL"] = 3] = "BR_TL";
+	    /** draw the gradient from the bottom to the top */
+	    GradientOrientation[GradientOrientation["BOTTOM_TOP"] = 4] = "BOTTOM_TOP";
+	    /** draw the gradient from the bottom-left to the top-right */
+	    GradientOrientation[GradientOrientation["BL_TR"] = 5] = "BL_TR";
+	    /** draw the gradient from the left to the right */
+	    GradientOrientation[GradientOrientation["LEFT_RIGHT"] = 6] = "LEFT_RIGHT";
+	    /** draw the gradient from the top-left to the bottom-right */
+	    GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
+	})(GradientOrientation || (GradientOrientation = {}));
+	function toRGBAString(color) {
+	    let strs = [];
+	    for (let i = 0; i < 32; i += 8) {
+	        strs.push(((color >> i) & 0xff));
+	    }
+	    strs = strs.reverse();
+	    /// RGBAd
+	    return `rgba(${strs[1]},${strs[2]},${strs[3]},${strs[0] / 255})`;
+	}
+	function generateGradientColorDesc(colors, locations) {
+	    if (!locations) {
+	        return colors.join(', ');
+	    }
+	    if (colors.length !== locations.length) {
+	        throw new Error("Colors and locations arrays must have the same length.");
+	    }
+	    const gradientStops = colors.map((color, index) => `${color} ${locations[index] * 100}%`);
+	    return gradientStops.join(", ");
+	}
+	function generateGradientOrientationDesc(orientation) {
+	    switch (orientation) {
+	        case GradientOrientation.TR_BL:
+	            return 'to bottom left';
+	        case GradientOrientation.RIGHT_LEFT:
+	            return 'to left';
+	        case GradientOrientation.BR_TL:
+	            return 'to top left';
+	        case GradientOrientation.BOTTOM_TOP:
+	            return 'to top';
+	        case GradientOrientation.BL_TR:
+	            return 'to top right';
+	        case GradientOrientation.LEFT_RIGHT:
+	            return 'to right';
+	        case GradientOrientation.TL_BR:
+	            return 'to bottom right';
+	        default:
+	            return 'to bottom';
+	    }
+	}
+
 	exports.LayoutSpec = void 0;
 	(function (LayoutSpec) {
 	    LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY";
@@ -6182,15 +6241,6 @@ var doric_web = (function (exports, axios, sandbox) {
 	function pixelString2Number(v) {
 	    return parseFloat(v.substring(0, v.indexOf("px")));
 	}
-	function toRGBAString(color) {
-	    let strs = [];
-	    for (let i = 0; i < 32; i += 8) {
-	        strs.push(((color >> i) & 0xff));
-	    }
-	    strs = strs.reverse();
-	    /// RGBAd
-	    return `rgba(${strs[1]},${strs[2]},${strs[3]},${strs[0] / 255})`;
-	}
 	class DoricViewNode {
 	    constructor(context) {
 	        this.viewId = "";
@@ -6469,47 +6519,12 @@ var doric_web = (function (exports, axios, sandbox) {
 	                    return toRGBAString(c);
 	                });
 	            }
-	            else if (start && end) {
+	            else if (typeof start === 'number' && typeof end === 'number') {
 	                colorsParam.push(...[toRGBAString(start), toRGBAString(end)]);
 	            }
-	            switch (orientation) {
+	            this.applyCSSStyle({ backgroundImage: `linear-gradient(${generateGradientOrientationDesc(orientation)}, ${generateGradientColorDesc(colorsParam, locations)})` });
-	                case 1:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom left, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
-	                case 2:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to left, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
-	                case 3:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to top left, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
-	                case 4:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to top, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
-	                case 5:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to top right, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
-	                case 6:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to right, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
-	                case 7:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom right, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
-	                default:
-	                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom, ${this.generateGradient(colorsParam, locations)})` });
-	                    break;
 	        }
 	    }
-	    }
-	    generateGradient(colors, locations) {
-	        if (!locations) {
-	            return colors.join(', ');
-	        }
-	        if (colors.length !== locations.length) {
-	            throw new Error("Colors and locations arrays must have the same length.");
-	        }
-	        const gradientStops = colors.map((color, index) => `${color} ${locations[index] * 100}%`);
-	        return gradientStops.join(", ");
-	    }
 	    static create(context, type) {
 	        const viewNodeClass = acquireViewNode(type);
 	        if (viewNodeClass === undefined) {
@@ -8845,7 +8860,6 @@ ${content}
 	exports.registerPlugin = registerPlugin;
 	exports.registerViewNode = registerViewNode;
 	exports.toPixelString = toPixelString;
-	exports.toRGBAString = toRGBAString;
 
 	Object.defineProperty(exports, '__esModule', { value: true });
 

doric-web/src/shader/DoricImageNode.ts

@@ -1,4 +1,5 @@
-import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, toRGBAString } from "./DoricViewNode";
+import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from "./DoricViewNode";
+import { toRGBAString } from "../utils/color";
 
 enum ScaleType {
     ScaleToFill = 0,

doric-web/src/shader/DoricSwitchNode.ts

@@ -1,4 +1,5 @@
-import { DoricViewNode, toRGBAString } from "./DoricViewNode";
+import { DoricViewNode } from "./DoricViewNode";
+import { toRGBAString } from "../utils/color";
 
 export class DoricSwitchNode extends DoricViewNode {
     input?: HTMLInputElement

doric-web/src/shader/DoricTextNode.ts

@@ -1,4 +1,5 @@
-import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString, toRGBAString } from "./DoricViewNode";
+import { DoricViewNode, LEFT, RIGHT, CENTER_X, CENTER_Y, TOP, BOTTOM, toPixelString } from "./DoricViewNode";
+import { toRGBAString } from "../utils/color";
 
 export class DoricTextNode extends DoricViewNode {
     textElement!: HTMLElement

doric-web/src/shader/DoricViewNode.ts

@@ -1,5 +1,7 @@
 import { DoricContext } from "../DoricContext";
 import { acquireViewNode } from "../DoricRegistry";
+import { GradientColor, GradientOrientation, generateGradientColorDesc, generateGradientOrientationDesc } from "../utils/color";
+import { toRGBAString } from "../utils/color";
 
 export enum LayoutSpec {
     EXACTLY = 0,
@@ -37,17 +39,6 @@ export function pixelString2Number(v: string) {
     return parseFloat(v.substring(0, v.indexOf("px")))
 }
 
-export function toRGBAString(color: number) {
-    let strs = []
-    for (let i = 0; i < 32; i += 8) {
-        strs.push(((color >> i) & 0xff))
-    }
-    strs = strs.reverse()
-    /// RGBAd
-    return `rgba(${strs[1]},${strs[2]},${strs[3]},${strs[0] / 255})`
-}
-
-
 export type DoricViewNodeClass = { new(...args: any[]): {} }
 
 export interface DVModel {
@@ -58,14 +49,6 @@ export interface DVModel {
     },
 }
 
-export interface GradientType {
-  start?: number;
-  end?: number;
-  colors?: number[];
-  locations?: number[];
-  orientation?: number;
-}
-
 export abstract class DoricViewNode {
     viewId = ""
     viewType = "View"
@@ -376,7 +359,7 @@ export abstract class DoricViewNode {
         }
     }
 
-    set backgroundColor(v: number | GradientType) {
+    set backgroundColor(v: number | GradientColor) {
         console.log('background')
         if (typeof v === 'number') {
             this.applyCSSStyle({ backgroundColor: toRGBAString(v) });
@@ -387,50 +370,12 @@ export abstract class DoricViewNode {
                 colorsParam = colors.map((c:number) => {
                     return toRGBAString(c)
                 })
-            } else if (start && end){                  
+            } else if (typeof start === 'number' && typeof end === 'number') {                  
                 colorsParam.push(...[toRGBAString(start), toRGBAString(end)])
             }
-            switch (orientation) {
+            this.applyCSSStyle({ backgroundImage: `linear-gradient(${generateGradientOrientationDesc(orientation)}, ${generateGradientColorDesc(colorsParam, locations)})`})
-                case 1 :
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom left, ${this.generateGradient(colorsParam, locations)})` })
-                    break
-                case 2:
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to left, ${this.generateGradient(colorsParam, locations)})` })
-                    break
-                case 3:
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to top left, ${this.generateGradient(colorsParam, locations)})` })
-                    break
-                case 4:
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to top, ${this.generateGradient(colorsParam, locations)})` })
-                    break
-                case 5:
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to top right, ${this.generateGradient(colorsParam, locations)})` })
-                    break
-                case 6:
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to right, ${this.generateGradient(colorsParam, locations)})` })
-                    break
-                case 7:
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom right, ${this.generateGradient(colorsParam, locations)})` })
-                    break
-                default:
-                    this.applyCSSStyle({ backgroundImage: `linear-gradient(to bottom, ${this.generateGradient(colorsParam, locations)})` })
-                    break
         }  
     }
-    }
-
-    generateGradient(colors: string[], locations?:number[]) {
-        if (!locations) {
-            return colors.join(', ')
-        }
-
-        if (colors.length !== locations.length) {
-          throw new Error("Colors and locations arrays must have the same length.");
-        }
-      
-        const gradientStops = colors.map((color, index) => `${color} ${locations[index] * 100}%`);
-        return gradientStops.join(", ");
-    }
 
     static create(context: DoricContext, type: string) {
         const viewNodeClass = acquireViewNode(type)
@@ -549,7 +494,7 @@ export abstract class DoricViewNode {
         return this.view.style.backgroundColor
     }
 
-    setBackgroundColor(v: number | GradientType) {
+    setBackgroundColor(v: number | GradientColor) {
         this.backgroundColor = v
     }
 

doric-web/src/utils/color.ts

@@ -0,0 +1,71 @@
+
+export interface GradientColor {
+    start?: number;
+    end?: number;
+    colors?: number[];
+    locations?: number[];
+    orientation?: number;
+  }
+  
+export enum GradientOrientation {
+    /** draw the gradient from the top to the bottom */
+    TOP_BOTTOM = 0,
+    /** draw the gradient from the top-right to the bottom-left */
+    TR_BL,
+    /** draw the gradient from the right to the left */
+    RIGHT_LEFT,
+    /** draw the gradient from the bottom-right to the top-left */
+    BR_TL,
+    /** draw the gradient from the bottom to the top */
+    BOTTOM_TOP,
+    /** draw the gradient from the bottom-left to the top-right */
+    BL_TR,
+    /** draw the gradient from the left to the right */
+    LEFT_RIGHT,
+    /** draw the gradient from the top-left to the bottom-right */
+    TL_BR,
+}
+
+export function toRGBAString(color: number) {
+    let strs = []
+    for (let i = 0; i < 32; i += 8) {
+        strs.push(((color >> i) & 0xff))
+    }
+    strs = strs.reverse()
+    /// RGBAd
+    return `rgba(${strs[1]},${strs[2]},${strs[3]},${strs[0] / 255})`
+}
+
+export function generateGradientColorDesc(colors: string[], locations?:number[]) {
+    if (!locations) {
+        return colors.join(', ')
+    }
+
+    if (colors.length !== locations.length) {
+      throw new Error("Colors and locations arrays must have the same length.");
+    }
+  
+    const gradientStops = colors.map((color, index) => `${color} ${locations[index] * 100}%`);
+    return gradientStops.join(", ");
+}
+
+export function generateGradientOrientationDesc(orientation: GradientOrientation) {
+    switch (orientation) {
+        case GradientOrientation.TR_BL :
+            return 'to bottom left'
+        case GradientOrientation.RIGHT_LEFT:
+            return 'to left'
+        case GradientOrientation.BR_TL:
+            return 'to top left'
+        case GradientOrientation.BOTTOM_TOP:
+            return 'to top'
+        case GradientOrientation.BL_TR:
+            return 'to top right'
+        case GradientOrientation.LEFT_RIGHT:
+            return 'to right'
+        case GradientOrientation.TL_BR:
+            return 'to bottom right'
+        default:
+            return 'to bottom'
+    }
+}