feat: add shadow action to context

packages/board/src/lib/context.ts

@@ -237,6 +237,22 @@ class Context implements TypeContext {
     this._ctx.scale(ratioX, ratioY);
   }
 
+  setShadowColor(color: string): void {
+    this._ctx.shadowColor = color;
+  }
+
+  setShadowOffsetX(offsetX: number): void {
+    this._ctx.shadowOffsetX = this._doSize(offsetX);
+  }
+
+  setShadowOffsetY(offsetY: number): void {
+    this._ctx.shadowOffsetY = this._doSize(offsetY);
+  }
+
+  setShadowBlur(blur: number): void {
+    this._ctx.shadowBlur = this._doSize(blur);
+  }
+
   private _doSize(num: number) {
     return this._opts.devicePixelRatio * num;
   }

packages/core/examples/features/lib/data/text.js

@@ -16,7 +16,7 @@ const data = {
         fontWeight: 'bold',
         borderRadius: 20,
         borderWidth: 2,
-        borderColor: "#bd0b64",
+        borderColor: "#03a9f4",
         bgColor: '#f0f0f0',
         strokeColor: '#2196f3',
         strokeWidth: 1,
@@ -24,19 +24,20 @@ const data = {
     },
     {
       name: "text-002",
-      x: 80,
-      y: 80,
-      w: 200,
-      h: 120,
+      x: 120,
+      y: 120,
+      w: 100,
+      h: 60,
       // angle: 30,
       type: "text",
       desc: {
-        fontSize: 20,
+        fontSize: 40,
+        fontWeight: 'blod',
         text: "Hello Text",
-        color: "#666666",
+        color: "#999999",
         borderRadius: 60,
-        borderWidth: 10,
-        borderColor: "#bd0b64"
+        borderWidth: 4,
+        borderColor: "#03a9f4"
       },
     },
     {
@@ -58,7 +59,7 @@ const data = {
         textAlign: "right",
         borderRadius: 20,
         borderWidth: 2,
-        borderColor: "#bd0b64",
+        borderColor: "#03a9f4",
         bgColor: '#f0f0f0',
       },
     },
@@ -77,7 +78,7 @@ const data = {
         textAlign: "right",
         borderRadius: 20,
         borderWidth: 2,
-        borderColor: "#bd0b64",
+        borderColor: "#03a9f4",
         bgColor: '#f0f0f0',
       },
     },

packages/core/examples/features/lib/main.js

@@ -32,7 +32,7 @@ const core = new Core(mount, {
   elementWrapper: {
     lockColor: '#009688',
     color: '#e91e63',
-    dotSize: 8,
+    dotSize: 6,
     lineWidth: 1,
     // lineDash: [12, 12],
   },

packages/core/src/lib/check.ts

@@ -97,7 +97,7 @@ function textDesc(
 ): boolean {
   const {
     text, color, fontSize, lineHeight, fontFamily, textAlign,
-    fontWeight, bgColor,
+    fontWeight, bgColor, strokeWidth, strokeColor
   } = desc;
   if (!is.text(text)){
     return false;
@@ -123,6 +123,13 @@ function textDesc(
   if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)){
     return false;
   }
+  if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)){
+    return false;
+  }
+  if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)){
+    return false;
+  }
+  
   if (!box(desc)) {
     return false;
   }

packages/core/src/lib/is.ts

@@ -81,6 +81,10 @@ function lineHeight(value: any) {
   return number(value) && value > 0;
 }
 
+function strokeWidth(value: any) {
+  return number(value) && value > 0;
+}
+
 function textAlign(value: any) {
   return ['center', 'left', 'right'].includes(value);
 }
@@ -98,6 +102,7 @@ const is: TypeIs = {
   borderWidth, borderRadius, color,
   imageSrc, imageURL, imageBase64, svg, html,
   text, fontSize, lineHeight, textAlign, fontFamily, fontWeight,
+  strokeWidth,
 };
 
 type TypeIs = {
@@ -121,6 +126,7 @@ type TypeIs = {
   lineHeight: (value: any) => boolean,
   textAlign: (value: any) => boolean,
   fontFamily: (value: any) => boolean,
+  strokeWidth: (value: any) => boolean,
 }
 
 export default is;

packages/types/src/lib/context.ts

@@ -51,6 +51,10 @@ interface TypeContext {
   drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
   createPattern(image: CanvasImageSource, repetition: string | null): CanvasPattern | null;
   setGlobalAlpha(alpha: number): void;
+  setShadowColor(color: string): void;
+  setShadowOffsetX(offsetX: number): void;
+  setShadowOffsetY(offsetY: number): void;
+  setShadowBlur(blur: number): void;
 }
 
 export {

packages/types/src/lib/element.ts

@@ -66,6 +66,10 @@ type TypeElemDescText = {
   bgColor?: string;
   strokeColor?: string;
   strokeWidth?: number;
+  shadowColor?: string;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  shadowOffsetBlur?: number;
 } & TypeElemBoxDesc
 
 type TypeElemDescCircle = {