feat: add shadow to element-circle

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

@@ -11,7 +11,13 @@ const data = {
       desc: {
         bgColor: "#f0f0f0",
         borderWidth: 2,
-        borderColor: '#999999'
+        borderColor: '#999999',
+
+        shadowColor: '#03a9f4',
+        // shadowColor: '#000000',
+        shadowOffsetX: 2,
+        shadowOffsetY: 2,
+        shadowBlur: 2,
       },
     },
     {
@@ -25,7 +31,8 @@ const data = {
       desc: {
         bgColor: "#f0f0f0",
         borderWidth: 2,
-        borderColor: '#666666'
+        borderColor: '#666666',
+        
       },
     },
     {
@@ -50,9 +57,16 @@ const data = {
       h: 300,
       type: "circle",
       desc: {
-        bgColor: "#f0f0f0",
+        // bgColor: "#f0f0f0",
+        bgColor: "#000000",
         borderWidth: 10,
-        borderColor: '#666666'
+        borderColor: '#666666',
+
+        shadowColor: '#03a9f4',
+        // shadowColor: '#000000',
+        shadowOffsetX: 2,
+        shadowOffsetY: 2,
+        shadowBlur: 2,
       },
     },
   ],

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

@@ -2,6 +2,7 @@ import dataRect from "./rect.js";
 import dataImage from "./image.js";
 import dataSVG from "./svg.js";
 import dataText from "./text.js";
+import dataCircle from "./circle.js";
 
 const url = new URLSearchParams(window.location.search);
 
@@ -10,6 +11,7 @@ const dataMap = {
   image: dataImage,
   svg: dataSVG,
   text: dataText,
+  circle: dataCircle,
 };
 
 export function getData() {

packages/core/src/lib/draw/circle.ts

@@ -1,11 +1,11 @@
-import {
-  TypeContext, 
-  TypeElement,
-} from '@idraw/types';
+import { TypeContext, TypeElement, } from '@idraw/types';
+import util from '@idraw/util'
 import { rotateElement } from './../transform';
+import is from './../is';
+import { clearContext } from './base';
 
 export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) {
-
+  clearContext(ctx);
   rotateElement(ctx, elem, (ctx) => {
     const { x, y, w, h, desc } = elem;
     const {
@@ -13,6 +13,7 @@ export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) {
       borderColor = '#000000',
       borderWidth
     } = desc;
+
     const a = w / 2;
     const b = h / 2;
     const centerX = x + a;
@@ -21,6 +22,18 @@ export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) {
     if (borderWidth && borderWidth > 0) {
       const ba = borderWidth / 2 + a;
       const bb = borderWidth / 2 + b;
+      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.setStrokeStyle(borderColor);
       ctx.setLineWidth(borderWidth)

packages/types/src/lib/element.ts

@@ -24,16 +24,19 @@ type TypeElement<T extends keyof TypeElemDesc | TypeElemType> = TypeElementBase<
   uuid: string;
 }
 
-type TypeElemBoxDesc = {
-  borderRadius?: number;
-  borderWidth?: number;
-  borderColor?: string;
+type TypeElemDescBase = {
   shadowColor?: string;
   shadowOffsetX?: number;
   shadowOffsetY?: number;
   shadowBlur?: number;
 }
 
+type TypeElemBoxDesc = {
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+} & TypeElemDescBase;
+
 type TypeElemDesc = {
   'text': TypeElemDescText,
   'rect': TypeElemDescRect,
@@ -82,7 +85,7 @@ type TypeElemDescCircle = {
 
 type TypeElemDescImage = {
   src: string;
-}
+} & TypeElemDescBase;
 
 type TypeElemDescSVG = {
   svg: string;