feat(engine-render): support drawing group shadows (#7252)

packages/engine-render/src/__tests__/drawing-group.spec.ts

@@ -43,6 +43,10 @@ function createContext() {
         lineDashOffset: 0,
         lineJoin: 'round',
         miterLimit: 0,
+        shadowColor: '',
+        shadowBlur: 0,
+        shadowOffsetX: 0,
+        shadowOffsetY: 0,
     } as any;
 }
 
@@ -125,6 +129,12 @@ describe('drawing group', () => {
         });
         const childRenderSpy = vi.spyOn(child, 'render').mockImplementation(() => child);
         drawingGroup.addObject(child);
+        drawingGroup.setOuterShadow({
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+            shadowBlur: 12,
+            shadowOffsetX: -4,
+            shadowOffsetY: 4,
+        });
 
         const ctx = createContext();
         drawingGroup.render(ctx, {
@@ -133,6 +143,10 @@ describe('drawing group', () => {
 
         expect(ctx.transform).toHaveBeenCalled();
         expect(childRenderSpy).toHaveBeenCalled();
+        expect(ctx.shadowColor).toBe('rgba(0, 0, 0, 0.5)');
+        expect(ctx.shadowBlur).toBe(12);
+        expect(ctx.shadowOffsetX).toBe(-4);
+        expect(ctx.shadowOffsetY).toBe(4);
     });
 
     it('maps children of nested drawing groups through the parent rendered bound', () => {

packages/engine-render/src/drawing-group.ts

@@ -21,6 +21,13 @@ import type { UniverRenderingContext } from './context';
 import { RENDER_CLASS_TYPE, Transform } from './basics';
 import { Group } from './group';
 
+export interface IDrawingGroupShadow {
+    shadowColor: string;
+    shadowBlur: number;
+    shadowOffsetX: number;
+    shadowOffsetY: number;
+}
+
 export class DrawingGroupObject extends Group {
     protected override _selfSizeMode: boolean = true;
     /**
@@ -36,6 +43,13 @@ export class DrawingGroupObject extends Group {
         height: 0,
     };
 
+    private _outerShadow?: IDrawingGroupShadow;
+
+    setOuterShadow(shadow?: IDrawingGroupShadow): void {
+        this._outerShadow = shadow;
+        this.makeDirty(true);
+    }
+
     /**
      * Set the baseBound (chOff/chExt in OOXML) for this group.
      * This defines the coordinate space of children within the group.
@@ -89,6 +103,12 @@ export class DrawingGroupObject extends Group {
         const centerX = realLeft + realWidth / 2;
         const centerY = realTop + realHeight / 2;
         ctx.transform(m[0], m[1], m[2], m[3], centerX, centerY);
+        if (this._outerShadow) {
+            ctx.shadowColor = this._outerShadow.shadowColor;
+            ctx.shadowBlur = this._outerShadow.shadowBlur;
+            ctx.shadowOffsetX = this._outerShadow.shadowOffsetX;
+            ctx.shadowOffsetY = this._outerShadow.shadowOffsetY;
+        }
         const objects = this.getObjectsByOrder();
 
         // ctx.rect(0, 0, this.width, this.height);

packages/engine-render/src/index.ts

@@ -67,6 +67,7 @@ export type { IUniverEngineRenderConfig } from './config/config';
 export * from './context';
 export * from './custom';
 export { DrawingGroupObject } from './drawing-group';
+export type { IDrawingGroupShadow } from './drawing-group';
 export * from './engine';
 export * from './group';
 export * from './layer';