From 58d9953eb1034e14b9085d79b9a7fc5f029bb042 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Sat, 3 Jun 2023 21:41:59 +0800
Subject: [PATCH] feat: improve parser for  component toelement

---
 packages/design/dev/data/components/button.ts |  1 +
 .../design/dev/data/components/checkbox.ts    |  1 +
 packages/design/src/util/view-data.ts         | 27 ++++++++++++++++---
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/design/dev/data/components/button.ts b/packages/design/dev/data/components/button.ts
index 4a1c670..8506ae9 100644
--- a/packages/design/dev/data/components/button.ts
+++ b/packages/design/dev/data/components/button.ts
@@ -83,6 +83,7 @@ export function createButton(name: string) {
     w: 800,
     h: 400,
     desc: {
+      bgColor: '#aaaaaa54',
       default: createButtonItem('default'),
       variants: [createButtonItem('primary'), createButtonItem('secondary')]
     }
diff --git a/packages/design/dev/data/components/checkbox.ts b/packages/design/dev/data/components/checkbox.ts
index 95706ec..b9f1c16 100644
--- a/packages/design/dev/data/components/checkbox.ts
+++ b/packages/design/dev/data/components/checkbox.ts
@@ -83,6 +83,7 @@ export function createCheckbox(name: string) {
     w: 800,
     h: 400,
     desc: {
+      bgColor: '#aaaaaa54',
       default: createCheckboxItem('default'),
       variants: [createCheckboxItem('primary'), createCheckboxItem('secondary')]
     }
diff --git a/packages/design/src/util/view-data.ts b/packages/design/src/util/view-data.ts
index 0b5c870..e99d4c6 100644
--- a/packages/design/src/util/view-data.ts
+++ b/packages/design/src/util/view-data.ts
@@ -1,7 +1,21 @@
 import { deepClone } from '@idraw/util';
-import type { Data, Element } from '@idraw/types';
+import type { Data, Element, ElementType, ElementBaseDesc } from '@idraw/types';
 import type { DesignComponent, DesignComponentItem } from '../types';
 
+const baseDescKeys = ['borderWidth', 'borderColor', 'borderRadius', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'shadowBlur', 'color', 'bgColor'];
+
+function parseElementBaseDesc(elem: DesignComponent | DesignComponentItem | Element<ElementType>): ElementBaseDesc {
+  const baseDesc: ElementBaseDesc = {};
+  if (elem?.desc) {
+    Object.keys(elem.desc).forEach((name: string) => {
+      if (baseDescKeys.includes(name)) {
+        baseDesc[name as keyof ElementBaseDesc] = (elem.desc as any)?.[name];
+      }
+    });
+  }
+  return baseDesc;
+}
+
 function parseComponentItemToElement(item: DesignComponentItem): Element<'group'> {
   const elem: Element<'group'> = {
     uuid: item.uuid,
@@ -12,8 +26,10 @@ function parseComponentItemToElement(item: DesignComponentItem): Element<'group'
     w: item.w,
     h: item.h,
     desc: {
-      ...item.desc,
-      children: []
+      ...parseElementBaseDesc(item),
+      ...{
+        children: []
+      }
     }
   };
   item.desc?.children?.forEach?.((child) => {
@@ -38,7 +54,10 @@ function parseComponentToElement(comp: DesignComponent): Element<'group'> {
     w: comp.w,
     h: comp.h,
     desc: {
-      children: []
+      ...parseElementBaseDesc(comp),
+      ...{
+        children: []
+      }
     }
   };