feat: watermark

examples/package.json

@@ -67,6 +67,7 @@
         "@univerjs/uni-slides-ui": "workspace:*",
         "@univerjs/uniscript": "workspace:*",
         "@univerjs/uniui": "workspace:*",
+        "@univerjs/watermark": "workspace:*",
         "clsx": "^2.1.1",
         "monaco-editor": "0.52.0",
         "react": "18.3.1",

examples/src/sheets/very-lazy.ts

@@ -22,6 +22,7 @@ import { UniverSheetsFindReplacePlugin } from '@univerjs/sheets-find-replace';
 import { UniverSheetsHyperLinkUIPlugin } from '@univerjs/sheets-hyper-link-ui';
 import { UniverSheetsSortUIPlugin } from '@univerjs/sheets-sort-ui';
 import { UniverUniscriptPlugin } from '@univerjs/uniscript';
+import { UniverWatermarkPlugin } from '@univerjs/watermark';
 
 /* eslint-disable-next-line node/prefer-global/process */
 const IS_E2E: boolean = !!process.env.IS_E2E;
@@ -50,6 +51,7 @@ export default function getVeryLazyPlugins() {
         [UniverSheetsSortUIPlugin],
         [UniverSheetsCrosshairHighlightPlugin],
         [UniverSheetsFindReplacePlugin],
+        [UniverWatermarkPlugin],
     ];
 
     if (!IS_E2E) {

packages/docs-ui/src/services/docs-render.service.ts

@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import type { DocumentDataModel } from '@univerjs/core';
+import type { DocumentDataModel, Workbook } from '@univerjs/core';
 import { IUniverInstanceService, RxDisposable, UniverInstanceType } from '@univerjs/core';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { takeUntil } from 'rxjs';
 
+const DOC_MAIN_CANVAS_ID = 'univer-doc-main-canvas';
+
 export class DocsRenderService extends RxDisposable {
     constructor(
         @IUniverInstanceService private readonly _instanceSrv: IUniverInstanceService,
@@ -48,7 +50,13 @@ export class DocsRenderService extends RxDisposable {
 
     private _createRenderer(doc: DocumentDataModel) {
         const unitId = doc.getUnitId();
-
+        const workbookId = this._instanceSrv.getCurrentUnitForType<Workbook>(UniverInstanceType.UNIVER_DOC)?.getUnitId();
+        this._renderManagerService.created$.subscribe((renderer) => {
+            if (renderer.unitId === workbookId) {
+                renderer.engine.getCanvas().setId(DOC_MAIN_CANVAS_ID);
+                renderer.engine.getCanvas().getContext().setId(DOC_MAIN_CANVAS_ID);
+            }
+        });
         if (!this._renderManagerService.has(unitId)) {
             this._createRenderWithId(unitId);
 

packages/engine-render/src/context.ts

@@ -34,6 +34,16 @@ export class UniverRenderingContext2D implements CanvasRenderingContext2D {
         this._context = context;
     }
 
+    private _id: string;
+
+    getId() {
+        return this._id;
+    }
+
+    setId(id: string) {
+        this._id = id;
+    }
+
     isContextLost(): boolean {
         // @ts-ignore
         return this._context.isContextLost();
@@ -438,10 +448,10 @@ export class UniverRenderingContext2D implements CanvasRenderingContext2D {
         this._context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
     }
 
-     /**
-      * bezierCurveTo function precision.
-      * @method
-      */
+    /**
+     * bezierCurveTo function precision.
+     * @method
+     */
     bezierCurveToByPrecision(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number) {
         const { scaleX, scaleY } = this._getScale();
         x = fixLineWidthByScale(x, scaleX);
@@ -673,10 +683,10 @@ export class UniverRenderingContext2D implements CanvasRenderingContext2D {
         this._context.fillRect(x, y, width, height);
     }
 
-     /**
-      * fillRect function precision.
-      * @method
-      */
+    /**
+     * fillRect function precision.
+     * @method
+     */
     fillRectByPrecision(x: number, y: number, width: number, height: number) {
         const { scaleX, scaleY } = this._getScale();
         x = fixLineWidthByScale(x, scaleX);

packages/facade/package.json

@@ -84,7 +84,8 @@
         "@univerjs/sheets-ui": "workspace:*",
         "@univerjs/thread-comment": "workspace:*",
         "@univerjs/thread-comment-ui": "workspace:*",
-        "@univerjs/ui": "workspace:*"
+        "@univerjs/ui": "workspace:*",
+        "@univerjs/watermark": "workspace:*"
     },
     "devDependencies": {
         "@univerjs-infra/shared": "workspace:*",

packages/facade/src/apis/facade.ts

@@ -37,6 +37,8 @@ import type {
 import type { ISocket } from '@univerjs/network';
 import type { ISetCrosshairHighlightColorOperationParams } from '@univerjs/sheets-crosshair-highlight';
 import type { IRegisterFunctionParams } from '@univerjs/sheets-formula';
+import type { IImageWatermarkConfig, ITextWatermarkConfig } from '@univerjs/watermark';
+
 import {
     BorderStyleTypes,
     debounce,
@@ -53,14 +55,14 @@ import {
     UniverInstanceType,
     WrapStrategy,
 } from '@univerjs/core';
-
 import { SetFormulaCalculationStartMutation } from '@univerjs/engine-formula';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { ISocketService, WebSocketService } from '@univerjs/network';
 import { DisableCrosshairHighlightOperation, EnableCrosshairHighlightOperation, SetCrosshairHighlightColorOperation } from '@univerjs/sheets-crosshair-highlight';
 import { IRegisterFunctionService, RegisterFunctionService } from '@univerjs/sheets-formula';
 import { SHEET_VIEW_KEY } from '@univerjs/sheets-ui';
 import { CopyCommand, PasteCommand } from '@univerjs/ui';
+import { IWatermarkTypeEnum, WatermarkImageBaseConfig, WatermarkService, WatermarkTextBaseConfig } from '@univerjs/watermark';
 import { FDocument } from './docs/f-document';
 import { FHooks } from './f-hooks';
 import { FDataValidationBuilder } from './sheets/f-data-validation-builder';
@@ -536,4 +538,59 @@ export class FUniver {
     getPermission(): FPermission {
         return this._injector.createInstance(FPermission);
     }
+
+    // #region watermark
+
+    /**
+     * Adds a watermark to the unit. Supports both text and image watermarks based on the specified type.
+     *
+     * @param {IWatermarkTypeEnum.Text | IWatermarkTypeEnum.Image} type - The type of watermark to add. Can be either 'Text' or 'Image'.
+     * @param {ITextWatermarkConfig | IImageWatermarkConfig} config - The configuration object for the watermark.
+     * - If the type is 'Text', the config should follow the ITextWatermarkConfig interface.
+     * - If the type is 'Image', the config should follow the IImageWatermarkConfig interface.
+     * @throws {Error} Throws an error if the watermark type is unknown.
+     */
+    addWatermark(type: IWatermarkTypeEnum.Text, config: ITextWatermarkConfig): void;
+    addWatermark(type: IWatermarkTypeEnum.Image, config: IImageWatermarkConfig): void;
+    addWatermark(
+        type: IWatermarkTypeEnum.Text | IWatermarkTypeEnum.Image,
+        config: ITextWatermarkConfig | IImageWatermarkConfig
+    ): void {
+        const watermarkService = this._injector.get(WatermarkService);
+        if (type === IWatermarkTypeEnum.Text) {
+            watermarkService.updateWatermarkConfig({
+                type: IWatermarkTypeEnum.Text,
+                config: {
+                    text: {
+                        ...WatermarkTextBaseConfig,
+                        ...config,
+                    },
+                },
+            });
+        } else if (type === IWatermarkTypeEnum.Image) {
+            watermarkService.updateWatermarkConfig({
+                type: IWatermarkTypeEnum.Image,
+                config: {
+                    image: {
+                        ...WatermarkImageBaseConfig,
+                        ...config,
+                    },
+                },
+            });
+        } else {
+            throw new Error('Unknown watermark type');
+        }
+    }
+
+    /**
+     * Deletes the currently applied watermark from the unit.
+     *
+     * This function retrieves the watermark service and invokes the method to remove any existing watermark configuration.
+     */
+    deleteWatermark(): void {
+        const watermarkService = this._injector.get(WatermarkService);
+        watermarkService.deleteWatermarkConfig();
+    }
+
+    // #endregion
 }

packages/facade/src/apis/sheets/f-workbook.ts

@@ -26,6 +26,7 @@ import type { ICanvasFloatDom } from '@univerjs/sheets-drawing-ui';
 import type { ISheetHyperLinkInfo } from '@univerjs/sheets-hyper-link-ui';
 import type { CommentUpdate, IAddCommentCommandParams, IDeleteCommentCommandParams } from '@univerjs/thread-comment';
 import type { IDialogPartMethodOptions, ISidebarMethodOptions } from '@univerjs/ui';
+
 import type { IFComponentKey } from './utils';
 import {
     ICommandService,
@@ -46,6 +47,7 @@ import { AddSheetDataValidationCommand, RemoveSheetAllDataValidationCommand, Rem
 import { SheetsHyperLinkResolverService } from '@univerjs/sheets-hyper-link-ui';
 import { AddCommentCommand, DeleteCommentCommand, DeleteCommentTreeCommand, ThreadCommentModel, UpdateCommentCommand } from '@univerjs/thread-comment';
 import { IDialogService, ISidebarService } from '@univerjs/ui';
+
 import { filter } from 'rxjs';
 import { FRange } from './f-range';
 import { FWorksheet } from './f-worksheet';

packages/sheets-ui/src/services/sheets-render.service.ts

@@ -51,7 +51,7 @@ export class SheetsRenderService extends RxDisposable {
      */
     registerSkeletonChangingMutations(mutationId: string): IDisposable {
         if (this._skeletonChangeMutations.has(mutationId)) {
-            return toDisposable(() => {});
+            return toDisposable(() => { });
         }
 
         this._skeletonChangeMutations.add(mutationId);
@@ -87,6 +87,7 @@ export class SheetsRenderService extends RxDisposable {
         this._renderManagerService.created$.subscribe((renderer) => {
             if (renderer.unitId === unitId) {
                 renderer.engine.getCanvas().setId(`${SHEET_MAIN_CANVAS_ID}_${unitId}`);
+                renderer.engine.getCanvas().getContext().setId(`${SHEET_MAIN_CANVAS_ID}_${unitId}`);
             }
         });
         this._renderManagerService.createRender(unitId);

packages/watermark/README.md

@@ -0,0 +1,37 @@
+# @univerjs/watermark
+
+## Package Overview
+
+| Package Name | UMD Namespace | Version | License | Downloads | Contains CSS | Contains i18n locales |
+| --- | --- | --- | --- | --- | :---: | :---: |
+| `@univerjs/watermark` | `UniverWatermark` | [![][npm-version-shield]][npm-version-link] | ![][npm-license-shield] | ![][npm-downloads-shield] | ⭕️ | ⭕️ |
+
+## Introduction
+
+`@univerjs/watermark` Provides Univer with the ability to add watermarks
+
+## Usage
+
+### Installation
+
+```shell
+# Using npm
+npm install @univerjs/watermark
+
+# Using pnpm
+pnpm add @univerjs/watermark
+```
+
+### Register the plugin
+
+```typescript
+import { UniverWatermarkPlugin } from '@univerjs/watermark';
+
+univer.registerPlugin(UniverWatermarkPlugin);
+```
+
+<!-- Links -->
+[npm-version-shield]: https://img.shields.io/npm/v/@univerjs/watermark?style=flat-square
+[npm-version-link]: https://npmjs.com/package/@univerjs/watermark
+[npm-license-shield]: https://img.shields.io/npm/l/@univerjs/watermark?style=flat-square
+[npm-downloads-shield]: https://img.shields.io/npm/dm/@univerjs/watermark?style=flat-square

packages/watermark/package.json

@@ -0,0 +1,104 @@
+{
+    "name": "@univerjs/watermark",
+    "version": "0.3.0",
+    "private": false,
+    "description": "univer watermark plugin",
+    "author": "DreamNum <developer@univer.ai>",
+    "license": "Apache-2.0",
+    "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/univer"
+    },
+    "homepage": "https://univer.ai",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/dream-num/univer"
+    },
+    "bugs": {
+        "url": "https://github.com/dream-num/univer/issues"
+    },
+    "keywords": [
+        "univer"
+    ],
+    "exports": {
+        ".": "./src/index.ts",
+        "./*": "./src/*",
+        "./locale/*": "./src/locale/*.ts"
+    },
+    "main": "./lib/cjs/index.js",
+    "module": "./lib/es/index.js",
+    "types": "./lib/types/index.d.ts",
+    "publishConfig": {
+        "access": "public",
+        "main": "./lib/cjs/index.js",
+        "module": "./lib/es/index.js",
+        "exports": {
+            ".": {
+                "import": "./lib/es/index.js",
+                "require": "./lib/cjs/index.js",
+                "types": "./lib/types/index.d.ts"
+            },
+            "./*": {
+                "import": "./lib/es/*",
+                "require": "./lib/cjs/*",
+                "types": "./lib/types/index.d.ts"
+            },
+            "./lib/*": "./lib/*",
+            "./locale/*": "./lib/locale/*.json"
+        }
+    },
+    "directories": {
+        "lib": "lib"
+    },
+    "files": [
+        "lib"
+    ],
+    "scripts": {
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "coverage": "vitest run --coverage",
+        "lint:types": "tsc --noEmit",
+        "build": "tsc && vite build"
+    },
+    "peerDependencies": {
+        "@univerjs/core": "workspace:*",
+        "@univerjs/design": "workspace:*",
+        "@univerjs/engine-render": "workspace:*",
+        "@univerjs/ui": "workspace:*",
+        "clsx": ">=2.0.0",
+        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "rxjs": ">=7.0.0"
+    },
+    "dependencies": {
+        "@univerjs/core": "workspace:*",
+        "@univerjs/design": "workspace:*",
+        "@univerjs/engine-render": "workspace:*",
+        "@univerjs/icons": "^0.1.80",
+        "@univerjs/ui": "workspace:*",
+        "clsx": "^2.1.1"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.9",
+        "@univerjs-infra/shared": "workspace:*",
+        "less": "^4.2.0",
+        "react": "18.3.1",
+        "rxjs": "^7.8.1",
+        "typescript": "^5.6.2",
+        "vite": "^5.4.8",
+        "vitest": "^2.1.1"
+    },
+    "univerSpace": {
+        ".": {
+            "import": "./lib/es/index.js",
+            "require": "./lib/cjs/index.js",
+            "types": "./lib/types/index.d.ts"
+        },
+        "./*": {
+            "import": "./lib/es/*",
+            "require": "./lib/cjs/*",
+            "types": "./lib/types/index.d.ts"
+        },
+        "./lib/*": "./lib/*",
+        "./locale/*": "./lib/locale/*.json"
+    }
+}