mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 01:58:27 +00:00
refactor: rename desc.color tp desc.bgColor for rect and circle
This commit is contained in:
parent
9b6756eee9
commit
ebfb4810fc
13 changed files with 38 additions and 38 deletions
|
|
@ -8,7 +8,7 @@ const data = {
|
|||
h: 100,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
color: '#f0f0f0',
|
||||
bgColor: '#f0f0f0',
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: '#bd0b64',
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -369,7 +369,7 @@
|
|||
h: 60,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#8bc34a",
|
||||
bgColor: "#8bc34a",
|
||||
borderWidth: 4,
|
||||
borderRadius: 0,
|
||||
borderColor: "#009688",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const data = {
|
|||
h: 50,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#ffeb3b",
|
||||
bgColor: "#ffeb3b",
|
||||
borderRadius: 10,
|
||||
borderWidth: 5,
|
||||
borderColor: "#ffc107",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default {
|
|||
h: 100,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
color: '#f0f0f0',
|
||||
bgColor: '#f0f0f0',
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
borderColor: '#bd0b64',
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
h: 50,
|
||||
type: "rect",
|
||||
desc: {
|
||||
color: "#ffeb3b",
|
||||
bgColor: "#ffeb3b",
|
||||
borderRadius: 10,
|
||||
borderWidth: 5,
|
||||
borderColor: "#ffc107",
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
Loading…
Reference in a new issue