From 5a8d6a07193daed758c0735a786745388a71ad5b Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Sun, 10 Oct 2021 23:32:13 +0800
Subject: [PATCH] feat: add textShadow to element-text

---
 packages/core/examples/features/lib/data/text.js |  7 ++++++-
 packages/core/src/lib/draw/base.ts               |  4 ++++
 packages/core/src/lib/draw/text.ts               | 13 +++++++++++++
 packages/types/src/lib/element.ts                |  8 ++++----
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/packages/core/examples/features/lib/data/text.js b/packages/core/examples/features/lib/data/text.js
index 8f00474..4e03329 100644
--- a/packages/core/examples/features/lib/data/text.js
+++ b/packages/core/examples/features/lib/data/text.js
@@ -37,7 +37,12 @@ const data = {
         color: "#999999",
         borderRadius: 60,
         borderWidth: 4,
-        borderColor: "#03a9f4"
+        borderColor: "#03a9f4",
+
+        textShadowColor: '#000000',
+        textShadowOffsetX: 2,
+        textShadowOffsetY: 2,
+        textShadowBlur: 0.5,
       },
     },
     {
diff --git a/packages/core/src/lib/draw/base.ts b/packages/core/src/lib/draw/base.ts
index b26153b..ab7c2e4 100644
--- a/packages/core/src/lib/draw/base.ts
+++ b/packages/core/src/lib/draw/base.ts
@@ -15,6 +15,10 @@ export function clearContext(ctx: TypeContext) {
   ctx.setStrokeStyle('#000000');
   ctx.setLineDash([]);
   ctx.setGlobalAlpha(1);
+  ctx.setShadowColor('#00000000');
+  ctx.setShadowOffsetX(0)
+  ctx.setShadowOffsetY(0);
+  ctx.setShadowBlur(0);
 }
 
 export function drawBgColor(ctx: TypeContext, color: string) {
diff --git a/packages/core/src/lib/draw/text.ts b/packages/core/src/lib/draw/text.ts
index ba78d25..ef63bbd 100644
--- a/packages/core/src/lib/draw/text.ts
+++ b/packages/core/src/lib/draw/text.ts
@@ -74,6 +74,18 @@ export function drawText(
       if (lines.length * fontHeight < elem.h) {
         _y += ((elem.h - lines.length * fontHeight) / 2);
       }
+      if (desc.textShadowColor !== undefined) {
+        ctx.setShadowColor(desc.textShadowColor);
+      }
+      if (desc.textShadowOffsetX !== undefined) {
+        ctx.setShadowOffsetX(desc.textShadowOffsetX);
+      }
+      if (desc.textShadowOffsetY !== undefined) {
+        ctx.setShadowOffsetY(desc.textShadowOffsetY);
+      }
+      if (desc.textShadowBlur !== undefined) {
+        ctx.setShadowBlur(desc.textShadowBlur);
+      }
       lines.forEach((line, i) => {
         let _x = elem.x;
         if (desc.textAlign === 'center') {
@@ -83,6 +95,7 @@ export function drawText(
         }
         ctx.fillText(line.text, _x, _y + fontHeight * i);
       });
+      clearContext(ctx);
     }
 
     // draw text stroke
diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts
index 464f056..f8f462f 100644
--- a/packages/types/src/lib/element.ts
+++ b/packages/types/src/lib/element.ts
@@ -66,10 +66,10 @@ type TypeElemDescText = {
   bgColor?: string;
   strokeColor?: string;
   strokeWidth?: number;
-  shadowColor?: string;
-  shadowOffsetX?: number;
-  shadowOffsetY?: number;
-  shadowOffsetBlur?: number;
+  textShadowColor?: string;
+  textShadowOffsetX?: number;
+  textShadowOffsetY?: number;
+  textShadowBlur?: number;
 } & TypeElemBoxDesc
 
 type TypeElemDescCircle = {