refactor: rename desc.color tp desc.bgColor for rect and circle

This commit is contained in:
chenshenhai 2021-09-08 09:16:00 +08:00
parent 9b6756eee9
commit ebfb4810fc
13 changed files with 38 additions and 38 deletions

View file

@ -8,7 +8,7 @@ const data = {
h: 100,
type: 'rect',
desc: {
color: '#f0f0f0',
bgColor: '#f0f0f0',
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',

View file

@ -32,18 +32,18 @@ describe("@idraw/core static check", () => {
test('Core.check.rectDesc', () => {
expect(Core.check.rectDesc({
color: '#ffffff',
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(Core.check.rectDesc({
color: 123,
bgColor: 123,
})).toStrictEqual(false);
expect(Core.check.rectDesc({
borderRadius: 12,
borderWidth: 10,
borderColor: '#123abf',
color: '#ffffff',
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(Core.check.rectDesc({
@ -58,17 +58,17 @@ describe("@idraw/core static check", () => {
test('Core.check.circleDesc', () => {
expect(Core.check.circleDesc({
color: '#ffffff',
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(Core.check.circleDesc({
color: 123,
bgColor: 123,
})).toStrictEqual(false);
expect(Core.check.circleDesc({
borderWidth: 10,
borderColor: '#123abf',
color: '#ffffff',
bgColor: '#ffffff',
})).toStrictEqual(true);
expect(Core.check.circleDesc({

View file

@ -9,7 +9,7 @@ const data = {
h: 100,
type: "circle",
desc: {
color: "#f0f0f0",
bgColor: "#f0f0f0",
borderWidth: 2,
borderColor: '#999999'
},
@ -23,7 +23,7 @@ const data = {
angle: 30,
type: "circle",
desc: {
color: "#f0f0f0",
bgColor: "#f0f0f0",
borderWidth: 2,
borderColor: '#666666'
},
@ -37,7 +37,7 @@ const data = {
type: "circle",
angle: 0,
desc: {
color: "#f0f0f0",
bgColor: "#f0f0f0",
borderWidth: 2,
borderColor: '#666666'
},
@ -50,7 +50,7 @@ const data = {
h: 300,
type: "circle",
desc: {
color: "#f0f0f0",
bgColor: "#f0f0f0",
borderWidth: 10,
borderColor: '#666666'
},

View file

@ -9,7 +9,7 @@ const data = {
h: 100,
type: "rect",
desc: {
color: "#f0f0f0",
bgColor: "#f0f0f0",
borderRadius: 20,
borderWidth: 10,
borderColor: "#bd0b64",
@ -27,7 +27,7 @@ const data = {
lock: true,
},
desc: {
color: "#cccccc",
bgColor: "#cccccc",
borderRadius: 60,
borderWidth: 10,
borderColor: "#bd0b64",
@ -42,7 +42,7 @@ const data = {
type: "rect",
angle: 80,
desc: {
color: "#c0c0c0",
bgColor: "#c0c0c0",
borderRadius: 20,
borderWidth: 10,
borderColor: "#bd0b64",
@ -56,7 +56,7 @@ const data = {
h: 100,
type: "rect",
desc: {
color: "#e0e0e0",
bgColor: "#e0e0e0",
borderRadius: 20,
borderWidth: 10,
borderColor: "#bd0b64",

View file

@ -369,7 +369,7 @@
h: 60,
type: "rect",
desc: {
color: "#8bc34a",
bgColor: "#8bc34a",
borderWidth: 4,
borderRadius: 0,
borderColor: "#009688",

View file

@ -9,7 +9,7 @@ const data = {
h: 50,
type: "rect",
desc: {
color: "#ffeb3b",
bgColor: "#ffeb3b",
borderRadius: 10,
borderWidth: 5,
borderColor: "#ffc107",

View file

@ -146,7 +146,7 @@
h: 60,
type: "rect",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -160,7 +160,7 @@
h: 80,
type: "rect",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -181,7 +181,7 @@
h: 100,
type: "circle",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -195,7 +195,7 @@
h: 80,
type: "circle",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -396,7 +396,7 @@
h: 60,
type: "rect",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -410,7 +410,7 @@
h: 80,
type: "rect",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -438,7 +438,7 @@
},
type: "rect",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -452,7 +452,7 @@
h: 80,
type: "rect",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -480,7 +480,7 @@
invisible: true,
},
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",
@ -494,7 +494,7 @@
h: 80,
type: "rect",
desc: {
color: "#c6e0f5",
bgColor: "#c6e0f5",
borderRadius: 8,
borderWidth: 2,
borderColor: "#2196f3",

View file

@ -35,8 +35,8 @@ function box(
function rectDesc(
desc: any
): boolean {
const { color } = desc;
if (desc.hasOwnProperty('color') && !is.color(color)) {
const { bgColor } = desc;
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
return false;
}
if (!box(desc)) {
@ -48,8 +48,8 @@ function rectDesc(
function circleDesc(
desc: any
): boolean {
const { color, borderColor, borderWidth } = desc;
if (desc.hasOwnProperty('color') && !is.color(color)) {
const { bgColor, borderColor, borderWidth } = desc;
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
return false;
}
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {

View file

@ -9,7 +9,7 @@ export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) {
rotateElement(ctx, elem, (ctx) => {
const { x, y, w, h, desc } = elem;
const {
color = '#000000',
bgColor = '#000000',
borderColor = '#000000',
borderWidth
} = desc;
@ -33,7 +33,7 @@ export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) {
}
ctx.beginPath();
ctx.setFillStyle(color);
ctx.setFillStyle(bgColor);
ctx.moveTo(centerX + a, centerY);
for(var i = 0; i < 2 * Math.PI; i += unit) {
ctx.lineTo(centerX + a * Math.cos(i), centerY + b * Math.sin(i));

View file

@ -5,7 +5,7 @@ import {
import { drawBox } from './base';
export function drawRect(ctx: TypeContext, elem: TypeElement<'rect'>) {
drawBox(ctx, elem, elem.desc.color as string);
drawBox(ctx, elem, elem.desc.bgColor as string);
}

View file

@ -8,7 +8,7 @@ export default {
h: 100,
type: 'rect',
desc: {
color: '#f0f0f0',
bgColor: '#f0f0f0',
borderRadius: 20,
borderWidth: 10,
borderColor: '#bd0b64',

View file

@ -67,7 +67,7 @@
h: 50,
type: "rect",
desc: {
color: "#ffeb3b",
bgColor: "#ffeb3b",
borderRadius: 10,
borderWidth: 5,
borderColor: "#ffc107",

View file

@ -52,7 +52,7 @@ type TypeElemDesc = {
type TypeElemType = 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html';
type TypeElemDescRect = {
color?: string;
bgColor?: string;
} & TypeElemBoxDesc
type TypeElemDescText = {
@ -67,7 +67,7 @@ type TypeElemDescText = {
} & TypeElemBoxDesc
type TypeElemDescCircle = {
color: string;
bgColor: string;
} & TypeElemBoxDesc
type TypeElemDescImage = {