From d584c8b788cd43c4f240cf3700d1604af90527d3 Mon Sep 17 00:00:00 2001
From: chenshenhai <cshenhai@gmail.com>
Date: Sun, 10 Oct 2021 23:51:20 +0800
Subject: [PATCH] feat: add shadow to element-text

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

diff --git a/packages/core/examples/features/lib/data/text.js b/packages/core/examples/features/lib/data/text.js
index 16471f0..3a6b0a9 100644
--- a/packages/core/examples/features/lib/data/text.js
+++ b/packages/core/examples/features/lib/data/text.js
@@ -44,6 +44,11 @@ const data = {
         textShadowOffsetX: 2,
         textShadowOffsetY: 2,
         textShadowBlur: 2,
+
+        shadowColor: '#000000',
+        shadowOffsetX: 2,
+        shadowOffsetY: 2,
+        shadowBlur: 2,
       },
     },
     {
diff --git a/packages/core/src/lib/draw/base.ts b/packages/core/src/lib/draw/base.ts
index ab7c2e4..a537777 100644
--- a/packages/core/src/lib/draw/base.ts
+++ b/packages/core/src/lib/draw/base.ts
@@ -5,6 +5,7 @@ import {
 } from '@idraw/types';
 import util from '@idraw/util';
 import { rotateElement } from './../transform';
+import is from './../is';
 
 const { istype, color } = util;
 
@@ -34,6 +35,7 @@ export function drawBox(
 ): void {
   clearContext(ctx);
   drawBoxBorder(ctx, elem);
+  clearContext(ctx);
   rotateElement(ctx, elem, () => {
     const { x, y, w, h } = elem;
     let r: number = elem.desc.borderRadius || 0;
@@ -82,6 +84,19 @@ export function drawBoxBorder(
     if (r < w / 2 && r < h / 2) {
       r = r + bw / 2;
     }
+    const { desc } = elem;
+    if (desc.shadowColor !== undefined && util.color.isColorStr(desc.shadowColor)) {
+      ctx.setShadowColor(desc.shadowColor);
+    }
+    if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
+      ctx.setShadowOffsetX(desc.shadowOffsetX);
+    }
+    if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
+      ctx.setShadowOffsetY(desc.shadowOffsetY);
+    }
+    if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
+      ctx.setShadowBlur(desc.shadowBlur);
+    }
     ctx.beginPath();
     ctx.setLineWidth(bw);
     ctx.setStrokeStyle(borderColor);
diff --git a/packages/core/src/lib/draw/text.ts b/packages/core/src/lib/draw/text.ts
index ef63bbd..c1aec59 100644
--- a/packages/core/src/lib/draw/text.ts
+++ b/packages/core/src/lib/draw/text.ts
@@ -8,6 +8,7 @@ import util from '@idraw/util';
 import Loader from '../loader';
 import { clearContext, drawBox } from './base';
 import { rotateElement } from './../transform';
+import is from './../is';
 
 export function drawText(
   ctx: TypeContext,
@@ -74,16 +75,16 @@ export function drawText(
       if (lines.length * fontHeight < elem.h) {
         _y += ((elem.h - lines.length * fontHeight) / 2);
       }
-      if (desc.textShadowColor !== undefined) {
+      if (desc.textShadowColor !== undefined && util.color.isColorStr(desc.textShadowColor)) {
         ctx.setShadowColor(desc.textShadowColor);
       }
-      if (desc.textShadowOffsetX !== undefined) {
+      if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
         ctx.setShadowOffsetX(desc.textShadowOffsetX);
       }
-      if (desc.textShadowOffsetY !== undefined) {
+      if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
         ctx.setShadowOffsetY(desc.textShadowOffsetY);
       }
-      if (desc.textShadowBlur !== undefined) {
+      if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
         ctx.setShadowBlur(desc.textShadowBlur);
       }
       lines.forEach((line, i) => {
diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts
index f8f462f..6f2e2cc 100644
--- a/packages/types/src/lib/element.ts
+++ b/packages/types/src/lib/element.ts
@@ -28,6 +28,10 @@ type TypeElemBoxDesc = {
   borderRadius?: number;
   borderWidth?: number;
   borderColor?: string;
+  shadowColor?: string;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  shadowBlur?: number;
 }
 
 type TypeElemDesc = {