mirror of
https://github.com/idrawjs/idraw
synced 2026-05-24 01:58:27 +00:00
refactor: rename Element.desc to Element.detail
This commit is contained in:
chenshenhai
parent
dcc3432249
commit
7fdd24a765
23 changed files with 232 additions and 246 deletions
|
|
@ -7,7 +7,7 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 120,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
detail: {
|
||||
color: '#f0f0f0'
|
||||
}
|
||||
},
|
||||
|
|
@ -17,7 +17,7 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 120,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
detail: {
|
||||
color: '#cccccc'
|
||||
}
|
||||
},
|
||||
|
|
@ -27,7 +27,7 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 120,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
detail: {
|
||||
color: '#c0c0c0'
|
||||
}
|
||||
},
|
||||
|
|
@ -37,7 +37,7 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 100,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
detail: {
|
||||
color: '#e0e0e0'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -500,9 +500,9 @@ export function calcSelectedElementsArea(
|
|||
}
|
||||
|
||||
export function isElementInGroup(elem: Element<ElementType>, group: Element<'group'>): boolean {
|
||||
if (group?.type === 'group' && Array.isArray(group?.desc?.children)) {
|
||||
for (let i = 0; i < group.desc.children.length; i++) {
|
||||
const child = group.desc.children[i];
|
||||
if (group?.type === 'group' && Array.isArray(group?.detail?.children)) {
|
||||
for (let i = 0; i < group.detail.children.length; i++) {
|
||||
const child = group.detail.children[i];
|
||||
if (elem.uuid === child.uuid) {
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function createButtonItem(variantName: string) {
|
|||
y: 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
children: [
|
||||
{
|
||||
uuid: createUUID(),
|
||||
|
|
@ -20,7 +20,7 @@ function createButtonItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -31,7 +31,7 @@ function createButtonItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -42,7 +42,7 @@ function createButtonItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc106'
|
||||
}
|
||||
},
|
||||
|
|
@ -53,7 +53,7 @@ function createButtonItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
},
|
||||
|
|
@ -64,7 +64,7 @@ function createButtonItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@ export function createButton(name: string, size?: Partial<ElementSize>) {
|
|||
y: 50,
|
||||
w: 360,
|
||||
h: 200,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#aaaaaa54',
|
||||
default: createButtonItem('default'),
|
||||
variants: [createButtonItem('primary'), createButtonItem('secondary')]
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function createCheckboxItem(variantName: string) {
|
|||
y: 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
children: [
|
||||
{
|
||||
uuid: createUUID(),
|
||||
|
|
@ -20,7 +20,7 @@ function createCheckboxItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -31,7 +31,7 @@ function createCheckboxItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -42,7 +42,7 @@ function createCheckboxItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc106'
|
||||
}
|
||||
},
|
||||
|
|
@ -53,7 +53,7 @@ function createCheckboxItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
},
|
||||
|
|
@ -64,7 +64,7 @@ function createCheckboxItem(variantName: string) {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@ export function createCheckbox(name: string, size?: Partial<ElementSize>) {
|
|||
y: 50,
|
||||
w: 360,
|
||||
h: 200,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#aaaaaa54',
|
||||
default: createCheckboxItem('default'),
|
||||
variants: [createCheckboxItem('primary'), createCheckboxItem('secondary')]
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
desc: {
|
||||
detail: {
|
||||
src: './images/lena.png'
|
||||
}
|
||||
},
|
||||
|
|
@ -22,7 +22,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -33,7 +33,7 @@ const data: Data = {
|
|||
y: 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#2196f3'
|
||||
}
|
||||
},
|
||||
|
|
@ -44,7 +44,7 @@ const data: Data = {
|
|||
y: 250,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
src: './images/github.png?t=003'
|
||||
}
|
||||
},
|
||||
|
|
@ -55,7 +55,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#009688'
|
||||
}
|
||||
},
|
||||
|
|
@ -66,7 +66,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#673ab7'
|
||||
}
|
||||
},
|
||||
|
|
@ -77,7 +77,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc107'
|
||||
}
|
||||
},
|
||||
|
|
@ -88,7 +88,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
},
|
||||
|
|
@ -99,7 +99,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -110,7 +110,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
},
|
||||
|
|
@ -122,7 +122,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 60,
|
||||
type: 'text',
|
||||
desc: {
|
||||
detail: {
|
||||
fontSize: 16,
|
||||
text: [0, 1, 2, 3, 4].map((i) => `Hello Text ${i}`).join('\r\n'),
|
||||
// text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join(''),
|
||||
|
|
@ -140,7 +140,7 @@ const data: Data = {
|
|||
y: 100,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
svg: `<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M336 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" ></path><path d="M688 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" ></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2-44.3-18.7-84.1-45.6-118.3-79.8-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8c18.7-44.3 45.6-84.1 79.8-118.3 34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2 44.3 18.7 84.1 45.6 118.3 79.8 34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8c-18.7 44.3-45.6 84.1-79.8 118.2z"></path><path d="M664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-0.3-4.2-3.9-7.4-8.1-7.4H360c-4.6 0-8.2 3.8-8 8.4 4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6c0.2-4.6-3.4-8.4-8-8.4z" ></path></svg>`
|
||||
}
|
||||
},
|
||||
|
|
@ -152,7 +152,7 @@ const data: Data = {
|
|||
h: 100,
|
||||
type: 'html',
|
||||
angle: 0,
|
||||
desc: {
|
||||
detail: {
|
||||
html: `
|
||||
<style>
|
||||
.btn-box {
|
||||
|
|
@ -208,7 +208,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'group',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#1f1f1f',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -218,7 +218,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -229,7 +229,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -240,7 +240,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc106'
|
||||
}
|
||||
},
|
||||
|
|
@ -251,7 +251,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
},
|
||||
|
|
@ -262,7 +262,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
}
|
||||
|
|
@ -278,7 +278,7 @@ const data: Data = {
|
|||
h: 100,
|
||||
angle: 30,
|
||||
type: 'group',
|
||||
desc: {
|
||||
detail: {
|
||||
children: [
|
||||
{
|
||||
uuid: 'group-003-014',
|
||||
|
|
@ -287,7 +287,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -298,7 +298,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -309,7 +309,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc106'
|
||||
}
|
||||
},
|
||||
|
|
@ -320,7 +320,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
},
|
||||
|
|
@ -331,7 +331,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
}
|
||||
|
|
@ -346,7 +346,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
desc: {
|
||||
detail: {
|
||||
src: './images/lena.png?v=0017'
|
||||
}
|
||||
},
|
||||
|
|
@ -357,7 +357,7 @@ const data: Data = {
|
|||
w: 375,
|
||||
h: 400,
|
||||
type: 'group',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#FFFFFF',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -368,7 +368,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
desc: {
|
||||
detail: {
|
||||
src: './images/lena.png'
|
||||
}
|
||||
},
|
||||
|
|
@ -380,7 +380,7 @@ const data: Data = {
|
|||
w: 200,
|
||||
h: 200,
|
||||
angle: 30,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f0f0f0',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -390,7 +390,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -401,7 +401,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -412,7 +412,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc106'
|
||||
}
|
||||
},
|
||||
|
|
@ -423,7 +423,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
},
|
||||
|
|
@ -434,7 +434,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
},
|
||||
|
|
@ -446,7 +446,7 @@ const data: Data = {
|
|||
w: 200,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#666666',
|
||||
children: [
|
||||
{
|
||||
|
|
@ -456,7 +456,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -467,7 +467,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -478,7 +478,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc106'
|
||||
}
|
||||
},
|
||||
|
|
@ -489,7 +489,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
},
|
||||
|
|
@ -500,7 +500,7 @@ const data: Data = {
|
|||
y: 0,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export type DesignComponentItem = Omit<ElementSize, 'angle'> & {
|
|||
uuid: string;
|
||||
type: 'component-item';
|
||||
name: string;
|
||||
desc?: ElementBaseDesc & {
|
||||
detail?: ElementBaseDesc & {
|
||||
children: Array<Element<ElementType> | DesignComponentItem>;
|
||||
};
|
||||
};
|
||||
|
|
@ -17,7 +17,7 @@ export type DesignComponent = Omit<ElementSize, 'angle'> & {
|
|||
uuid: string;
|
||||
type: 'component';
|
||||
name: string;
|
||||
desc?: ElementBaseDesc & {
|
||||
detail?: ElementBaseDesc & {
|
||||
default: DesignComponentItem;
|
||||
variants: DesignComponentItem[];
|
||||
};
|
||||
|
|
@ -27,7 +27,7 @@ export type DesignModule = Omit<ElementSize, 'angle'> & {
|
|||
uuid: string;
|
||||
type: 'module';
|
||||
name: string;
|
||||
desc?: ElementBaseDesc & {
|
||||
detail?: ElementBaseDesc & {
|
||||
children: Array<DesignComponent>;
|
||||
};
|
||||
};
|
||||
|
|
@ -36,7 +36,7 @@ export type DesignPage = Omit<ElementSize, 'angle'> & {
|
|||
uuid: string;
|
||||
type: 'page';
|
||||
name: string;
|
||||
desc: ElementBaseDesc & {
|
||||
detail: ElementBaseDesc & {
|
||||
children: Array<DesignModule>;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@ const baseDescKeys = ['borderWidth', 'borderColor', 'borderRadius', 'shadowColor
|
|||
|
||||
function parseElementBaseDesc(elem: DesignComponent | DesignComponentItem | Element<ElementType>): ElementBaseDesc {
|
||||
const baseDesc: ElementBaseDesc = {};
|
||||
if (elem?.desc) {
|
||||
Object.keys(elem.desc).forEach((name: string) => {
|
||||
if (elem?.detail) {
|
||||
Object.keys(elem.detail).forEach((name: string) => {
|
||||
if (baseDescKeys.includes(name)) {
|
||||
baseDesc[name as keyof ElementBaseDesc] = (elem.desc as any)?.[name];
|
||||
baseDesc[name as keyof ElementBaseDesc] = (elem.detail as any)?.[name];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -25,20 +25,20 @@ function parseComponentItemToElement(item: DesignComponentItem): Element<'group'
|
|||
y: item.y,
|
||||
w: item.w,
|
||||
h: item.h,
|
||||
desc: {
|
||||
detail: {
|
||||
...parseElementBaseDesc(item),
|
||||
...{
|
||||
children: []
|
||||
}
|
||||
}
|
||||
};
|
||||
item.desc?.children?.forEach?.((child) => {
|
||||
item.detail?.children?.forEach?.((child) => {
|
||||
if (child.type === 'component-item') {
|
||||
const childElem = parseComponentItemToElement(child);
|
||||
elem.desc.children.push(childElem);
|
||||
elem.detail.children.push(childElem);
|
||||
} else {
|
||||
const childElem = deepClone(child);
|
||||
elem.desc.children.push(childElem);
|
||||
elem.detail.children.push(childElem);
|
||||
}
|
||||
});
|
||||
return elem;
|
||||
|
|
@ -53,7 +53,7 @@ function parseComponentToElement(comp: DesignComponent): Element<'group'> {
|
|||
y: comp.y,
|
||||
w: comp.w,
|
||||
h: comp.h,
|
||||
desc: {
|
||||
detail: {
|
||||
...parseElementBaseDesc(comp),
|
||||
...{
|
||||
children: []
|
||||
|
|
@ -61,12 +61,12 @@ function parseComponentToElement(comp: DesignComponent): Element<'group'> {
|
|||
}
|
||||
};
|
||||
|
||||
if (comp?.desc?.default) {
|
||||
elem.desc.children.push(parseComponentItemToElement(comp.desc.default));
|
||||
if (comp?.detail?.default) {
|
||||
elem.detail.children.push(parseComponentItemToElement(comp.detail.default));
|
||||
}
|
||||
if (comp?.desc?.variants && Array.isArray(comp?.desc?.variants)) {
|
||||
comp.desc.variants.forEach((item) => {
|
||||
elem.desc.children.push(parseComponentItemToElement(item));
|
||||
if (comp?.detail?.variants && Array.isArray(comp?.detail?.variants)) {
|
||||
comp.detail.variants.forEach((item) => {
|
||||
elem.detail.children.push(parseComponentItemToElement(item));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ function parseElementToViewTreeNode(elem: Element<ElementType>): ViewTreeNode |
|
|||
type: elem.type,
|
||||
children: []
|
||||
};
|
||||
if (Array.isArray((elem as Element<'group'>)?.desc?.children)) {
|
||||
(elem as Element<'group'>).desc.children.forEach((child: Element<ElementType>) => {
|
||||
if (Array.isArray((elem as Element<'group'>)?.detail?.children)) {
|
||||
(elem as Element<'group'>).detail.children.forEach((child: Element<ElementType>) => {
|
||||
const childNode = parseElementToViewTreeNode(child);
|
||||
if (childNode) {
|
||||
treeNode?.children?.push(childNode);
|
||||
|
|
@ -30,8 +30,8 @@ function parseComponentItemToViewTreeNode(comp: DesignComponentItem): ViewTreeNo
|
|||
children: []
|
||||
};
|
||||
|
||||
if (comp?.desc?.children && Array.isArray(comp?.desc?.children)) {
|
||||
comp.desc.children.forEach((child) => {
|
||||
if (comp?.detail?.children && Array.isArray(comp?.detail?.children)) {
|
||||
comp.detail.children.forEach((child) => {
|
||||
let childNode: ViewTreeNode | null = null;
|
||||
if (child.type === 'component') {
|
||||
childNode = parseComponentToViewTreeNode(child as DesignComponent);
|
||||
|
|
@ -54,13 +54,13 @@ export function parseComponentToViewTreeNode(comp: DesignComponent): ViewTreeNod
|
|||
children: []
|
||||
};
|
||||
|
||||
if (comp?.desc?.default) {
|
||||
const node = parseComponentItemToViewTreeNode(comp.desc.default);
|
||||
if (comp?.detail?.default) {
|
||||
const node = parseComponentItemToViewTreeNode(comp.detail.default);
|
||||
treeNode.children.push(node);
|
||||
}
|
||||
|
||||
if (Array.isArray(comp?.desc?.variants)) {
|
||||
comp?.desc?.variants?.forEach((child: DesignComponentItem) => {
|
||||
if (Array.isArray(comp?.detail?.variants)) {
|
||||
comp?.detail?.variants?.forEach((child: DesignComponentItem) => {
|
||||
const node = parseComponentItemToViewTreeNode(child);
|
||||
treeNode.children.push(node);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ idraw.addElement({
|
|||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
|
|
@ -93,7 +93,7 @@ function Demo() {
|
|||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
|
|
@ -135,7 +135,7 @@ onMounted(() => {
|
|||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: "#f7d3c1",
|
||||
borderRadius: 20,
|
||||
borderWidth: 4,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,7 @@ import { deepClone } from '@idraw/util';
|
|||
// w: 100,
|
||||
// h: 50,
|
||||
// type: 'rect',
|
||||
// desc: {
|
||||
// detail: {
|
||||
// bgColor: '#ffeb3b',
|
||||
// borderRadius: 10,
|
||||
// borderWidth: 5,
|
||||
|
|
@ -26,7 +26,7 @@ import { deepClone } from '@idraw/util';
|
|||
// h: 60,
|
||||
// // angle: 30,
|
||||
// type: 'text',
|
||||
// desc: {
|
||||
// detail: {
|
||||
// fontSize: 16,
|
||||
// text: 'Hello Text',
|
||||
// fontWeight: 'bold',
|
||||
|
|
@ -43,7 +43,7 @@ import { deepClone } from '@idraw/util';
|
|||
// w: 160,
|
||||
// h: 80,
|
||||
// type: 'image',
|
||||
// desc: {
|
||||
// detail: {
|
||||
// src: './images/computer.png'
|
||||
// },
|
||||
// operation: {
|
||||
|
|
@ -59,7 +59,7 @@ import { deepClone } from '@idraw/util';
|
|||
// h: 100,
|
||||
// type: 'svg',
|
||||
// angle: 135,
|
||||
// desc: {
|
||||
// detail: {
|
||||
// svg: '<svg t="1622524892065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9337" width="200" height="200"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9 23.5 23.2 38.1 55.4 38.1 91v112.5c0.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z" p-id="9338"></path></svg>'
|
||||
// },
|
||||
// operation: {
|
||||
|
|
@ -75,7 +75,7 @@ import { deepClone } from '@idraw/util';
|
|||
// h: 100,
|
||||
// // angle: 30,
|
||||
// type: 'text',
|
||||
// desc: {
|
||||
// detail: {
|
||||
// fontSize: 16,
|
||||
// // text: 'Hello Text Hello Text Hello Text Hello Text Hello Text Hello Text',
|
||||
// text: 'Hello Text',
|
||||
|
|
@ -101,7 +101,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
angle: 30,
|
||||
desc: {
|
||||
detail: {
|
||||
src: './images/lena.png'
|
||||
}
|
||||
},
|
||||
|
|
@ -112,7 +112,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#f44336'
|
||||
}
|
||||
},
|
||||
|
|
@ -123,7 +123,7 @@ const data: Data = {
|
|||
y: 50,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#2196f3'
|
||||
}
|
||||
},
|
||||
|
|
@ -134,7 +134,7 @@ const data: Data = {
|
|||
y: 250,
|
||||
w: 100,
|
||||
h: 100,
|
||||
desc: {
|
||||
detail: {
|
||||
src: './images/github.png?t=003'
|
||||
}
|
||||
},
|
||||
|
|
@ -145,7 +145,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#009688'
|
||||
}
|
||||
},
|
||||
|
|
@ -156,7 +156,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#673ab7'
|
||||
}
|
||||
},
|
||||
|
|
@ -167,7 +167,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ffc107'
|
||||
}
|
||||
},
|
||||
|
|
@ -178,7 +178,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#4caf50'
|
||||
}
|
||||
},
|
||||
|
|
@ -189,7 +189,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#ff9800'
|
||||
}
|
||||
},
|
||||
|
|
@ -200,7 +200,7 @@ const data: Data = {
|
|||
w: 100,
|
||||
h: 100,
|
||||
type: 'circle',
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: '#cddc39'
|
||||
}
|
||||
}
|
||||
|
|
@ -216,7 +216,7 @@ const data: Data = {
|
|||
// w: 100,
|
||||
// h: 100,
|
||||
// type: 'circle',
|
||||
// desc: {
|
||||
// detail: {
|
||||
// bgColor: '#009688'
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ renderer.render(canvas, {
|
|||
w: 200,
|
||||
h: 100,
|
||||
type: "rect",
|
||||
desc: {
|
||||
detail: {
|
||||
bgColor: "#f0f0f0",
|
||||
borderRadius: 20,
|
||||
borderWidth: 10,
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export function drawBox(ctx: ViewContext2D, elem: Element<ElementType>, pattern?
|
|||
return;
|
||||
}
|
||||
const { x, y, w, h } = elem;
|
||||
let r: number = elem.desc.borderRadius || 0;
|
||||
let r: number = elem.detail.borderRadius || 0;
|
||||
r = Math.min(r, w / 2, h / 2);
|
||||
if (w < r * 2 || h < r * 2) {
|
||||
r = 0;
|
||||
|
|
@ -39,36 +39,36 @@ export function drawBox(ctx: ViewContext2D, elem: Element<ElementType>, pattern?
|
|||
}
|
||||
|
||||
export function drawBoxBorder(ctx: ViewContext2D, elem: Element<ElementType>): void {
|
||||
if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
|
||||
if (!(elem.detail.borderWidth && elem.detail.borderWidth > 0)) {
|
||||
return;
|
||||
}
|
||||
const bw = elem.desc.borderWidth;
|
||||
const bw = elem.detail.borderWidth;
|
||||
let borderColor = '#000000';
|
||||
if (isColorStr(elem.desc.borderColor) === true) {
|
||||
borderColor = elem.desc.borderColor as string;
|
||||
if (isColorStr(elem.detail.borderColor) === true) {
|
||||
borderColor = elem.detail.borderColor as string;
|
||||
}
|
||||
const x = elem.x - bw / 2;
|
||||
const y = elem.y - bw / 2;
|
||||
const w = elem.w + bw;
|
||||
const h = elem.h + bw;
|
||||
|
||||
let r: number = elem.desc.borderRadius || 0;
|
||||
let r: number = elem.detail.borderRadius || 0;
|
||||
r = Math.min(r, w / 2, h / 2);
|
||||
if (r < w / 2 && r < h / 2) {
|
||||
r = r + bw / 2;
|
||||
}
|
||||
const { desc } = elem;
|
||||
if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
|
||||
ctx.shadowColor = desc.shadowColor;
|
||||
const { detail } = elem;
|
||||
if (detail.shadowColor !== undefined && isColorStr(detail.shadowColor)) {
|
||||
ctx.shadowColor = detail.shadowColor;
|
||||
}
|
||||
if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
|
||||
ctx.shadowOffsetX = desc.shadowOffsetX;
|
||||
if (detail.shadowOffsetX !== undefined && is.number(detail.shadowOffsetX)) {
|
||||
ctx.shadowOffsetX = detail.shadowOffsetX;
|
||||
}
|
||||
if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
|
||||
ctx.shadowOffsetY = desc.shadowOffsetY;
|
||||
if (detail.shadowOffsetY !== undefined && is.number(detail.shadowOffsetY)) {
|
||||
ctx.shadowOffsetY = detail.shadowOffsetY;
|
||||
}
|
||||
if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
|
||||
ctx.shadowBlur = desc.shadowBlur;
|
||||
if (detail.shadowBlur !== undefined && is.number(detail.shadowBlur)) {
|
||||
ctx.shadowBlur = detail.shadowBlur;
|
||||
}
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = bw;
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/
|
|||
import { rotateElement } from '@idraw/util';
|
||||
|
||||
export function drawCircle(ctx: ViewContext2D, elem: Element<'circle'>, opts: RendererDrawElementOptions) {
|
||||
const { desc, angle } = elem;
|
||||
const { bgColor = '#000000', borderColor = '#000000', borderWidth = 0 } = desc;
|
||||
const { detail, angle } = elem;
|
||||
const { bgColor = '#000000', borderColor = '#000000', borderWidth = 0 } = detail;
|
||||
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
|
||||
// const { scale, offsetTop, offsetBottom, offsetLeft, offsetRight } = viewScaleInfo;
|
||||
const { x, y, w, h } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h }, viewScaleInfo, viewSizeInfo);
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@ export function drawGroup(ctx: ViewContext2D, elem: Element<'group'>, opts: Rend
|
|||
const { x, y, w, h, angle } = calculator.elementSize({ x: elem.x, y: elem.y, w: elem.w, h: elem.h, angle: elem.angle }, viewScaleInfo, viewSizeInfo);
|
||||
|
||||
rotateElement(ctx, { x, y, w, h, angle }, () => {
|
||||
drawBox(ctx, { ...elem, ...{ x, y, w, h, angle } }, elem?.desc?.bgColor);
|
||||
if (Array.isArray(elem.desc.children)) {
|
||||
drawBox(ctx, { ...elem, ...{ x, y, w, h, angle } }, elem?.detail?.bgColor);
|
||||
if (Array.isArray(elem.detail.children)) {
|
||||
const { parentElementSize: parentSize } = opts;
|
||||
const newParentSize: ElementSize = {
|
||||
x: parentSize.x + elem.x,
|
||||
|
|
@ -74,8 +74,8 @@ export function drawGroup(ctx: ViewContext2D, elem: Element<'group'>, opts: Rend
|
|||
ctx.closePath();
|
||||
ctx.clip();
|
||||
|
||||
for (let i = 0; i < elem.desc.children.length; i++) {
|
||||
let child = elem.desc.children[i];
|
||||
for (let i = 0; i < elem.detail.children.length; i++) {
|
||||
let child = elem.detail.children[i];
|
||||
child = {
|
||||
...child,
|
||||
...{
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@ import type { Element, RendererDrawElementOptions, ViewContext2D } from '@idraw/
|
|||
import { rotateElement } from '@idraw/util';
|
||||
|
||||
export function drawRect(ctx: ViewContext2D, elem: Element<'rect'>, opts: RendererDrawElementOptions) {
|
||||
// const { desc } = elem;
|
||||
// const { detail } = elem;
|
||||
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
|
||||
|
||||
const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
|
||||
rotateElement(ctx, { x, y, w, h, angle }, () => {
|
||||
let r: number = (elem.desc.borderRadius || 0) * viewScaleInfo.scale;
|
||||
let r: number = (elem.detail.borderRadius || 0) * viewScaleInfo.scale;
|
||||
r = Math.min(r, w / 2, h / 2);
|
||||
if (w < r * 2 || h < r * 2) {
|
||||
r = 0;
|
||||
|
|
@ -19,7 +19,7 @@ export function drawRect(ctx: ViewContext2D, elem: Element<'rect'>, opts: Render
|
|||
ctx.arcTo(x, y + h, x, y, r);
|
||||
ctx.arcTo(x, y, x + w, y, r);
|
||||
ctx.closePath();
|
||||
ctx.fillStyle = elem.desc.bgColor || '#000000';
|
||||
ctx.fillStyle = elem.detail.bgColor || '#000000';
|
||||
ctx.fill();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,29 +7,29 @@ export function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: Render
|
|||
const { calculator, viewScaleInfo, viewSizeInfo } = opts;
|
||||
const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
|
||||
rotateElement(ctx, { x, y, w, h, angle }, () => {
|
||||
drawBox(ctx, { ...elem, ...{ x, y, w, h, angle } }, elem.desc.bgColor || 'transparent');
|
||||
const desc: Element<'text'>['desc'] = {
|
||||
drawBox(ctx, { ...elem, ...{ x, y, w, h, angle } }, elem.detail.bgColor || 'transparent');
|
||||
const detail: Element<'text'>['detail'] = {
|
||||
...{
|
||||
fontSize: 12,
|
||||
fontFamily: 'sans-serif',
|
||||
textAlign: 'center'
|
||||
},
|
||||
...elem.desc
|
||||
...elem.detail
|
||||
};
|
||||
ctx.fillStyle = elem.desc.color;
|
||||
ctx.fillStyle = elem.detail.color;
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.$setFont({
|
||||
fontWeight: desc.fontWeight,
|
||||
fontSize: desc.fontSize,
|
||||
fontFamily: desc.fontFamily
|
||||
fontWeight: detail.fontWeight,
|
||||
fontSize: detail.fontSize,
|
||||
fontFamily: detail.fontFamily
|
||||
});
|
||||
const descText = desc.text.replace(/\r\n/gi, '\n');
|
||||
const fontHeight = desc.lineHeight || desc.fontSize;
|
||||
const descTextList = descText.split('\n');
|
||||
const detailText = detail.text.replace(/\r\n/gi, '\n');
|
||||
const fontHeight = detail.lineHeight || detail.fontSize;
|
||||
const detailTextList = detailText.split('\n');
|
||||
const lines: { text: string; width: number }[] = [];
|
||||
|
||||
let lineNum = 0;
|
||||
descTextList.forEach((tempText: string, idx: number) => {
|
||||
detailTextList.forEach((tempText: string, idx: number) => {
|
||||
let lineText = '';
|
||||
|
||||
if (tempText.length > 0) {
|
||||
|
|
@ -53,7 +53,7 @@ export function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: Render
|
|||
text: lineText,
|
||||
width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
|
||||
});
|
||||
if (idx < descTextList.length - 1) {
|
||||
if (idx < detailTextList.length - 1) {
|
||||
lineNum++;
|
||||
}
|
||||
break;
|
||||
|
|
@ -70,9 +70,9 @@ export function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: Render
|
|||
|
||||
let startY = 0;
|
||||
if (lines.length * fontHeight < h) {
|
||||
if (elem.desc.verticalAlign === 'top') {
|
||||
if (elem.detail.verticalAlign === 'top') {
|
||||
startY = 0;
|
||||
} else if (elem.desc.verticalAlign === 'bottom') {
|
||||
} else if (elem.detail.verticalAlign === 'bottom') {
|
||||
startY += h - lines.length * fontHeight;
|
||||
} else {
|
||||
// middle and default
|
||||
|
|
@ -83,23 +83,23 @@ export function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: Render
|
|||
// draw text lines
|
||||
{
|
||||
const _y = y + startY;
|
||||
if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
|
||||
ctx.shadowColor = desc.textShadowColor;
|
||||
if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
|
||||
ctx.shadowColor = detail.textShadowColor;
|
||||
}
|
||||
if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
|
||||
ctx.shadowOffsetX = desc.textShadowOffsetX;
|
||||
if (detail.textShadowOffsetX !== undefined && is.number(detail.textShadowOffsetX)) {
|
||||
ctx.shadowOffsetX = detail.textShadowOffsetX;
|
||||
}
|
||||
if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
|
||||
ctx.shadowOffsetY = desc.textShadowOffsetY;
|
||||
if (detail.textShadowOffsetY !== undefined && is.number(detail.textShadowOffsetY)) {
|
||||
ctx.shadowOffsetY = detail.textShadowOffsetY;
|
||||
}
|
||||
if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
|
||||
ctx.shadowBlur = desc.textShadowBlur;
|
||||
if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
|
||||
ctx.shadowBlur = detail.textShadowBlur;
|
||||
}
|
||||
lines.forEach((line, i) => {
|
||||
let _x = x;
|
||||
if (desc.textAlign === 'center') {
|
||||
if (detail.textAlign === 'center') {
|
||||
_x = x + (w - line.width) / 2;
|
||||
} else if (desc.textAlign === 'right') {
|
||||
} else if (detail.textAlign === 'right') {
|
||||
_x = x + (w - line.width);
|
||||
}
|
||||
ctx.fillText(line.text, _x, _y + fontHeight * i);
|
||||
|
|
@ -107,20 +107,20 @@ export function drawText(ctx: ViewContext2D, elem: Element<'text'>, opts: Render
|
|||
}
|
||||
|
||||
// draw text stroke
|
||||
if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
|
||||
if (isColorStr(detail.strokeColor) && detail.strokeWidth !== undefined && detail.strokeWidth > 0) {
|
||||
const _y = y + startY;
|
||||
lines.forEach((line, i) => {
|
||||
let _x = x;
|
||||
if (desc.textAlign === 'center') {
|
||||
if (detail.textAlign === 'center') {
|
||||
_x = x + (w - line.width) / 2;
|
||||
} else if (desc.textAlign === 'right') {
|
||||
} else if (detail.textAlign === 'right') {
|
||||
_x = x + (w - line.width);
|
||||
}
|
||||
if (desc.strokeColor !== undefined) {
|
||||
ctx.strokeStyle = desc.strokeColor;
|
||||
if (detail.strokeColor !== undefined) {
|
||||
ctx.strokeStyle = detail.strokeColor;
|
||||
}
|
||||
if (desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
|
||||
ctx.lineWidth = desc.strokeWidth;
|
||||
if (detail.strokeWidth !== undefined && detail.strokeWidth > 0) {
|
||||
ctx.lineWidth = detail.strokeWidth;
|
||||
}
|
||||
ctx.strokeText(line.text, _x, _y + fontHeight * i);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ export class Loader extends EventEmitter<LoaderEventMap> implements RendererLoad
|
|||
constructor() {
|
||||
super();
|
||||
this._registerLoadFunc<'image'>('image', async (elem: Element<'image'>) => {
|
||||
const content = await loadImage(elem.desc.src);
|
||||
const content = await loadImage(elem.detail.src);
|
||||
return {
|
||||
uuid: elem.uuid,
|
||||
lastModified: Date.now(),
|
||||
|
|
@ -24,9 +24,9 @@ export class Loader extends EventEmitter<LoaderEventMap> implements RendererLoad
|
|||
};
|
||||
});
|
||||
this._registerLoadFunc<'html'>('html', async (elem: Element<'html'>) => {
|
||||
const content = await loadHTML(elem.desc.html, {
|
||||
width: elem.desc.width || elem.w,
|
||||
height: elem.desc.height || elem.h
|
||||
const content = await loadHTML(elem.detail.html, {
|
||||
width: elem.detail.width || elem.w,
|
||||
height: elem.detail.height || elem.h
|
||||
});
|
||||
return {
|
||||
uuid: elem.uuid,
|
||||
|
|
@ -35,7 +35,7 @@ export class Loader extends EventEmitter<LoaderEventMap> implements RendererLoad
|
|||
};
|
||||
});
|
||||
this._registerLoadFunc<'svg'>('svg', async (elem: Element<'svg'>) => {
|
||||
const content = await loadSVG(elem.desc.svg);
|
||||
const content = await loadSVG(elem.detail.svg);
|
||||
return {
|
||||
uuid: elem.uuid,
|
||||
lastModified: Date.now(),
|
||||
|
|
@ -52,11 +52,11 @@ export class Loader extends EventEmitter<LoaderEventMap> implements RendererLoad
|
|||
private _getLoadElementSource(element: Element<LoadElementType>): null | string {
|
||||
let source: string | null = null;
|
||||
if (element.type === 'image') {
|
||||
source = (element as Element<'image'>)?.desc?.src || null;
|
||||
source = (element as Element<'image'>)?.detail?.src || null;
|
||||
} else if (element.type === 'svg') {
|
||||
source = (element as Element<'svg'>)?.desc?.svg || null;
|
||||
source = (element as Element<'svg'>)?.detail?.svg || null;
|
||||
} else if (element.type === 'html') {
|
||||
source = (element as Element<'html'>)?.desc?.html || null;
|
||||
source = (element as Element<'html'>)?.detail?.html || null;
|
||||
}
|
||||
return source;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,6 +92,6 @@ export interface Element<T extends ElementType> extends ElementSize {
|
|||
uuid: string;
|
||||
name?: string;
|
||||
type: T;
|
||||
desc: ElementDescMap[T];
|
||||
detail: ElementDescMap[T];
|
||||
operation?: ElementOperation;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
|
||||
|
||||
export function getData() {
|
||||
const data = {
|
||||
elements: [
|
||||
|
|
@ -9,8 +7,8 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 120,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
color: '#f0f0f0',
|
||||
detail: {
|
||||
color: '#f0f0f0'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -19,8 +17,8 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 120,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
color: '#cccccc',
|
||||
detail: {
|
||||
color: '#cccccc'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -29,8 +27,8 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 120,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
color: '#c0c0c0',
|
||||
detail: {
|
||||
color: '#c0c0c0'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -39,11 +37,11 @@ export function getData() {
|
|||
w: 200,
|
||||
h: 100,
|
||||
type: 'rect',
|
||||
desc: {
|
||||
color: '#e0e0e0',
|
||||
detail: {
|
||||
color: '#e0e0e0'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
return data;
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,82 +12,71 @@ function attrs(attrs: any): boolean {
|
|||
return true;
|
||||
}
|
||||
|
||||
function box(desc: any = {}): boolean {
|
||||
const { borderColor, borderRadius, borderWidth } = desc;
|
||||
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
||||
function box(detail: any = {}): boolean {
|
||||
const { borderColor, borderRadius, borderWidth } = detail;
|
||||
if (detail.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
|
||||
if (detail.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
||||
if (detail.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function rectDesc(desc: any): boolean {
|
||||
const { bgColor } = desc;
|
||||
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
||||
function rectDesc(detail: any): boolean {
|
||||
const { bgColor } = detail;
|
||||
if (detail.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
||||
return false;
|
||||
}
|
||||
if (!box(desc)) {
|
||||
if (!box(detail)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function circleDesc(desc: any): boolean {
|
||||
const { bgColor, borderColor, borderWidth } = desc;
|
||||
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
||||
function circleDesc(detail: any): boolean {
|
||||
const { bgColor, borderColor, borderWidth } = detail;
|
||||
if (detail.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
||||
if (detail.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
||||
if (detail.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function imageDesc(desc: any): boolean {
|
||||
const { src } = desc;
|
||||
function imageDesc(detail: any): boolean {
|
||||
const { src } = detail;
|
||||
if (!is.imageSrc(src)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function svgDesc(desc: any): boolean {
|
||||
const { svg } = desc;
|
||||
function svgDesc(detail: any): boolean {
|
||||
const { svg } = detail;
|
||||
if (!is.svg(svg)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function htmlDesc(desc: any): boolean {
|
||||
const { html } = desc;
|
||||
function htmlDesc(detail: any): boolean {
|
||||
const { html } = detail;
|
||||
if (!is.html(html)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function textDesc(desc: any): boolean {
|
||||
const {
|
||||
text,
|
||||
color,
|
||||
fontSize,
|
||||
lineHeight,
|
||||
fontFamily,
|
||||
textAlign,
|
||||
fontWeight,
|
||||
bgColor,
|
||||
strokeWidth,
|
||||
strokeColor
|
||||
} = desc;
|
||||
function textDesc(detail: any): boolean {
|
||||
const { text, color, fontSize, lineHeight, fontFamily, textAlign, fontWeight, bgColor, strokeWidth, strokeColor } = detail;
|
||||
if (!is.text(text)) {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -97,29 +86,29 @@ function textDesc(desc: any): boolean {
|
|||
if (!is.fontSize(fontSize)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
||||
if (detail.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
|
||||
if (detail.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
|
||||
if (detail.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
|
||||
if (detail.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
|
||||
if (detail.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
|
||||
if (detail.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
|
||||
return false;
|
||||
}
|
||||
if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
|
||||
if (detail.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!box(desc)) {
|
||||
if (!box(detail)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { rotateElementVertexes } from './rotate';
|
|||
|
||||
function getGroupIndexes(elem: Element<'group'>, uuids: string[], parentIndex: string): string[] {
|
||||
let indexes: string[] = [];
|
||||
if (elem?.type === 'group' && elem?.desc?.children?.length > 0) {
|
||||
for (let i = 0; i < elem.desc.children.length; i++) {
|
||||
const child = elem.desc.children[i];
|
||||
if (elem?.type === 'group' && elem?.detail?.children?.length > 0) {
|
||||
for (let i = 0; i < elem.detail.children.length; i++) {
|
||||
const child = elem.detail.children[i];
|
||||
if (uuids.includes(child.uuid)) {
|
||||
indexes.push([parentIndex, i].join('.'));
|
||||
} else if (elem.type === 'group') {
|
||||
|
|
@ -43,7 +43,7 @@ function getGroupUUIDs(elements: Array<Element<ElementType>>, index: string): st
|
|||
if (elem && nums.length === 0) {
|
||||
uuids.push(elem.uuid);
|
||||
} else if (elem.type === 'group' && nums.length > 0) {
|
||||
target = (elem as Element<'group'>)?.desc?.children || [];
|
||||
target = (elem as Element<'group'>)?.detail?.children || [];
|
||||
}
|
||||
}
|
||||
break;
|
||||
|
|
@ -70,12 +70,12 @@ export function getSelectedElementUUIDs(data: Data, indexes: Array<number | stri
|
|||
|
||||
function getElementInGroup(elem: Element<'group'>, uuids: string[]): Array<Element<ElementType>> {
|
||||
let elements: Array<Element<ElementType>> = [];
|
||||
if (elem?.type === 'group' && elem?.desc?.children?.length > 0) {
|
||||
for (let i = 0; i < elem.desc.children.length; i++) {
|
||||
const child = elem.desc.children[i];
|
||||
if (elem?.type === 'group' && elem?.detail?.children?.length > 0) {
|
||||
for (let i = 0; i < elem.detail.children.length; i++) {
|
||||
const child = elem.detail.children[i];
|
||||
if (uuids.includes(child.uuid)) {
|
||||
elements.push(child);
|
||||
} else if (elem.type === 'group' && elem.desc?.children?.length > 0) {
|
||||
} else if (elem.type === 'group' && elem.detail?.children?.length > 0) {
|
||||
elements = elements.concat(getElementInGroup(child as Element<'group'>, uuids));
|
||||
}
|
||||
}
|
||||
|
|
@ -115,7 +115,7 @@ export function validateElements(elements: Array<Element<ElementType>>): boolean
|
|||
console.warn('Element missing uuid', elem);
|
||||
}
|
||||
if (elem.type === 'group') {
|
||||
isValid = validateElements((elem as Element<'group'>)?.desc?.children);
|
||||
isValid = validateElements((elem as Element<'group'>)?.detail?.children);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue