From f6fbe1b5554ddd077bbbfef612e815c8e3f39c48 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Thu, 3 Jun 2021 14:22:43 +0800
Subject: [PATCH] feat: rename element's radius to borderRadius

---
 packages/core/example/lib/data/circle.js | 68 ++++++++++++++++++++++++
 packages/core/example/lib/data/image.js  |  4 +-
 packages/core/example/lib/data/rect.js   |  8 +--
 packages/core/example/lib/data/text.js   |  8 +--
 packages/core/src/lib/draw/base.ts       |  4 +-
 packages/types/src/lib/element.ts        |  2 +-
 6 files changed, 81 insertions(+), 13 deletions(-)
 create mode 100644 packages/core/example/lib/data/circle.js

diff --git a/packages/core/example/lib/data/circle.js b/packages/core/example/lib/data/circle.js
new file mode 100644
index 0000000..846973f
--- /dev/null
+++ b/packages/core/example/lib/data/circle.js
@@ -0,0 +1,68 @@
+
+const data = {
+  // bgColor: '#ffffff',
+  elements: [
+    {
+      name: 'rect-001',
+      x: 10,
+      y: 10,
+      w: 200,
+      h: 100,
+      type: 'circle',
+      borderRadius: 20,
+      borderWidth: 10,
+      borderColor: '#bd0b64',
+      desc: {
+        color: '#f0f0f0',
+      }
+    },
+    {
+      name: 'rect-002',
+      x: 80,
+      y: 80,
+      w: 200,
+      h: 120,
+      // angle: 30,
+      type: 'rect',
+      borderRadius: 60,
+      borderWidth: 10,
+      borderColor: '#bd0b64',
+      desc: {
+        color: '#cccccc',
+      }
+    },
+    {
+      name: 'rect-003',
+      x: 160,
+      y: 160,
+      w: 200,
+      h: 20,
+      type: 'rect',
+      angle: 80,
+      borderRadius: 20,
+      borderWidth: 10,
+      borderColor: '#bd0b64',
+      desc: {
+        color: '#c0c0c0',
+      }
+    },
+    {
+      name: 'rect-004',
+      x: 400 - 10,
+      y: 300 - 10,
+      w: 200,
+      h: 100,
+      type: 'rect',
+      borderRadius: 20,
+      borderWidth: 10,
+      borderColor: '#bd0b64',
+      desc: {
+        color: '#e0e0e0',
+      }
+    }
+  ]
+}
+
+
+
+export default data;
\ No newline at end of file
diff --git a/packages/core/example/lib/data/image.js b/packages/core/example/lib/data/image.js
index b6e34cb..e43f115 100644
--- a/packages/core/example/lib/data/image.js
+++ b/packages/core/example/lib/data/image.js
@@ -9,7 +9,7 @@ const data = {
       w: 200,
       h: 100,
       type: 'image',
-      radius: 20,
+      borderRadius: 20,
       borderWidth: 10,
       borderColor: '#bd0b64',
       // angle: 30,
@@ -25,7 +25,7 @@ const data = {
       w: 200,
       h: 120,
       // angle: 30,
-      radius: 20,
+      borderRadius: 20,
       borderWidth: 10,
       borderColor: '#bd0b64',
       type: 'image',
diff --git a/packages/core/example/lib/data/rect.js b/packages/core/example/lib/data/rect.js
index 9975687..8c2f8ca 100644
--- a/packages/core/example/lib/data/rect.js
+++ b/packages/core/example/lib/data/rect.js
@@ -9,7 +9,7 @@ const data = {
       w: 200,
       h: 100,
       type: 'rect',
-      radius: 20,
+      borderRadius: 20,
       borderWidth: 10,
       borderColor: '#bd0b64',
       desc: {
@@ -24,7 +24,7 @@ const data = {
       h: 120,
       // angle: 30,
       type: 'rect',
-      radius: 60,
+      borderRadius: 60,
       borderWidth: 10,
       borderColor: '#bd0b64',
       desc: {
@@ -39,7 +39,7 @@ const data = {
       h: 20,
       type: 'rect',
       angle: 80,
-      radius: 20,
+      borderRadius: 20,
       borderWidth: 10,
       borderColor: '#bd0b64',
       desc: {
@@ -53,7 +53,7 @@ const data = {
       w: 200,
       h: 100,
       type: 'rect',
-      radius: 20,
+      borderRadius: 20,
       borderWidth: 10,
       borderColor: '#bd0b64',
       desc: {
diff --git a/packages/core/example/lib/data/text.js b/packages/core/example/lib/data/text.js
index 64992e3..e2759b5 100644
--- a/packages/core/example/lib/data/text.js
+++ b/packages/core/example/lib/data/text.js
@@ -9,7 +9,7 @@ const data = {
       w: 200,
       h: 100,
       type: 'text',
-      radius: 20,
+      borderRadius: 20,
       borderWidth: 2,
       borderColor: '#bd0b64',
       desc: {
@@ -27,7 +27,7 @@ const data = {
       h: 120,
       // angle: 30,
       type: 'text',
-      radius: 60,
+      borderRadius: 60,
       borderWidth: 10,
       borderColor: '#bd0b64',
       desc: {
@@ -44,7 +44,7 @@ const data = {
     //   h: 20,
     //   type: 'text',
     //   angle: 80,
-    //   radius: 20,
+    //   borderRadius: 20,
     //   borderWidth: 10,
     //   borderColor: '#bd0b64',
     //   desc: {
@@ -58,7 +58,7 @@ const data = {
     //   w: 200,
     //   h: 100,
     //   type: 'text',
-    //   radius: 20,
+    //   borderRadius: 20,
     //   borderWidth: 10,
     //   borderColor: '#bd0b64',
     //   desc: {
diff --git a/packages/core/src/lib/draw/base.ts b/packages/core/src/lib/draw/base.ts
index e406a90..fb79de8 100644
--- a/packages/core/src/lib/draw/base.ts
+++ b/packages/core/src/lib/draw/base.ts
@@ -28,7 +28,7 @@ export function drawBox(
   drawBoxBorder(ctx, elem);
   rotateElement(ctx, elem, () => {
     const { x, y, w, h } = elem;
-    let r: number = elem.radius || 0;
+    let r: number = elem.borderRadius || 0;
     r = Math.min(r, w / 2, h / 2);
     ctx.beginPath();
     ctx.moveTo(x + r, y);
@@ -66,7 +66,7 @@ export function drawBoxBorder(
     const w = elem.w + bw;
     const h = elem.h + bw;
 
-    let r: number = elem.radius || 0;
+    let r: number = elem.borderRadius || 0;
     r = Math.min(r, w / 2, h / 2);
     if (r < w / 2 && r < h / 2) {
       r = r + bw / 2
diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts
index 72df81d..92c5468 100644
--- a/packages/types/src/lib/element.ts
+++ b/packages/types/src/lib/element.ts
@@ -9,7 +9,7 @@ type TypeElement<T extends keyof TypeElemDesc> = {
   w: number;
   h: number;
   angle?: number;
-  radius?: number;
+  borderRadius?: number;
   borderWidth?: number;
   borderColor?: string;
   desc: TypeElemDesc[T];