tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Add Color Util

Browse Source
This commit is contained in:
钱泽虹 2023-08-25 19:27:26 +08:00 committed by osborn
parent 1b60ce87a9
commit a48cd6a6ad
7 changed files with 145 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
doric-web/dist/index.js vendored
View File

@ -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) {
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;
}
this.applyCSSStyle({ backgroundImage: `linear-gradient(${generateGradientOrientationDesc(orientation)}, ${generateGradientColorDesc(colorsParam, locations)})` });
}
}
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 });

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
doric-web/src/shader/DoricImageNode.ts
View File

@ -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,

3
doric-web/src/shader/DoricSwitchNode.ts
View File

@ -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

3
doric-web/src/shader/DoricTextNode.ts
View File

@ -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

67
doric-web/src/shader/DoricViewNode.ts
View File

@ -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,51 +370,13 @@ 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) {
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
}
this.applyCSSStyle({ backgroundImage: `linear-gradient(${generateGradientOrientationDesc(orientation)}, ${generateGradientColorDesc(colorsParam, locations)})`})
}
}
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)
if (viewNodeClass === undefined) {
@ -549,7 +494,7 @@ export abstract class DoricViewNode {
return this.view.style.backgroundColor
}
setBackgroundColor(v: number | GradientType) {
setBackgroundColor(v: number | GradientColor) {
this.backgroundColor = v
}

71
doric-web/src/utils/color.ts Normal file
View File

@ -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'
}
}