feat(sparkline): add render extension (#4233)

packages/engine-render/src/components/sheets/sheet-skeleton.ts

@@ -67,7 +67,8 @@ import {
     ObjectMatrix,
     searchArray,
     Tools,
-    WrapStrategy } from '@univerjs/core';
+    WrapStrategy,
+} from '@univerjs/core';
 import { distinctUntilChanged, startWith } from 'rxjs';
 import { BORDER_TYPE as BORDER_LTRB, COLOR_BLACK_RGB, MAXIMUM_COL_WIDTH, MAXIMUM_ROW_HEIGHT, MIN_COL_WIDTH } from '../../basics/const';
 import { getRotateOffsetAndFarthestHypotenuse } from '../../basics/draw';

packages/sheets-graphics/README.md

@@ -0,0 +1,27 @@
+# @univerjs/sheets-graphics
+
+## Package Overview
+
+| Package Name | UMD Namespace | Version | License | Downloads | Contains CSS | Contains i18n locales |
+| --- | --- | --- | --- | --- | :---: | :---: |
+| `@univerjs/sheets-graphics` | `UniverSheetGraphicsPlugin` | [![][npm-version-shield]][npm-version-link] | ![][npm-license-shield] | ![][npm-downloads-shield] | ❌ | ❌ |
+
+## Introduction
+
+`@univerjs/sheets-graphics` is a basic in-cell graphics drawing plugin for Univer Sheet.
+
+## Installation
+
+```shell
+# Using npm
+npm install @univerjs/sheets-graphics
+
+# Using pnpm
+pnpm add @univerjs/sheets-graphics
+```
+
+<!-- Links -->
+[npm-version-shield]: https://img.shields.io/npm/v/@univerjs/sheets-graphics?style=flat-square
+[npm-version-link]: https://npmjs.com/package/@univerjs/sheets-graphics
+[npm-license-shield]: https://img.shields.io/npm/l/@univerjs/sheets-graphics?style=flat-square
+[npm-downloads-shield]: https://img.shields.io/npm/dm/@univerjs/sheets-graphics?style=flat-square

packages/sheets-graphics/build.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { build } from '@univerjs-infra/shared/vite';
+
+build();

packages/sheets-graphics/package.json

@@ -0,0 +1,86 @@
+{
+    "name": "@univerjs/sheets-graphics",
+    "version": "0.5.0-alpha.0",
+    "private": false,
+    "description": "Drawing graphics for Univer Sheets",
+    "author": "DreamNum <[email protected]>",
+    "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": [],
+    "exports": {
+        ".": "./src/index.ts",
+        "./*": "./src/*"
+    },
+    "main": "./src/index.ts",
+    "types": "./lib/types/index.d.ts",
+    "publishConfig": {
+        "access": "public",
+        "main": "./lib/es/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/*"
+        }
+    },
+    "directories": {
+        "lib": "lib"
+    },
+    "files": [
+        "lib"
+    ],
+    "scripts": {
+        "test": "vitest run",
+        "test:watch": "vitest",
+        "coverage": "vitest run --coverage",
+        "lint:types": "tsc --noEmit",
+        "build": "tsx build.ts"
+    },
+    "peerDependencies": {
+        "rxjs": ">=7.0.0"
+    },
+    "dependencies": {
+        "@univerjs/core": "workspace:*",
+        "@univerjs/engine-render": "workspace:*",
+        "@univerjs/icons": "^0.2.5"
+    },
+    "devDependencies": {
+        "@univerjs-infra/shared": "workspace:*",
+        "rxjs": "^7.8.1",
+        "typescript": "^5.6.3",
+        "vite": "^5.4.10",
+        "vitest": "^2.1.4"
+    },
+    "space": {
+        ".": {
+            "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/*"
+    }
+}

packages/sheets-graphics/src/common/const.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const UNIQUE_KEY = 'SheetGraphicsExtension';
+export const GRAPHICS_EXTENSION_INDEX = 35;

packages/sheets-graphics/src/controllers/config.schema.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { DependencyOverride } from '@univerjs/core';
+
+export const PLUGIN_CONFIG_KEY = 'graphics.config';
+
+export const configSymbol = Symbol(PLUGIN_CONFIG_KEY);
+
+export interface IUniverSheetGraphicsConfig {
+    override?: DependencyOverride;
+}
+
+export const defaultPluginConfig: IUniverSheetGraphicsConfig = {};

packages/sheets-graphics/src/controllers/graphics-render.controller.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ISelectionCellWithMergeInfo } from '@univerjs/core';
+import type { IRenderContext, IRenderModule, Spreadsheet, SpreadsheetSkeleton, UniverRenderingContext } from '@univerjs/engine-render';
+import { Disposable } from '@univerjs/core';
+import { UNIQUE_KEY } from '../common/const';
+import { Graphics } from '../views/extensions/graphics.extension';
+
+export class SheetGraphicsRenderController extends Disposable implements IRenderModule {
+    private _graphicsExtensionInstance: Graphics | null = null;
+
+    constructor(
+        private readonly _context: IRenderContext
+    ) {
+        super();
+        this._initRender();
+    }
+
+    private _initRender() {
+        const spreadsheet = this._context.mainComponent as Spreadsheet;
+        if (spreadsheet && !spreadsheet.getExtensionByKey(UNIQUE_KEY)) {
+            this._graphicsExtensionInstance = new Graphics();
+            spreadsheet.register(this._graphicsExtensionInstance);
+        }
+    }
+
+    registerRenderer(key: string, renderer: (ctx: UniverRenderingContext, skeleton: SpreadsheetSkeleton, coordInfo: ISelectionCellWithMergeInfo) => void) {
+        this._graphicsExtensionInstance?.registerRenderer(key, renderer);
+    }
+}

packages/sheets-graphics/src/index.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { UniverSheetGraphicsPlugin } from './plugin';
+export { SheetGraphicsRenderController } from './controllers/graphics-render.controller';
+

packages/sheets-graphics/src/plugin.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Dependency } from '@univerjs/core';
+import type { IUniverSheetGraphicsConfig } from './controllers/config.schema';
+
+import { IConfigService, Inject, Injector, Plugin, UniverInstanceType } from '@univerjs/core';
+import { IRenderManagerService } from '@univerjs/engine-render';
+import { defaultPluginConfig, PLUGIN_CONFIG_KEY } from './controllers/config.schema';
+import { SheetGraphicsRenderController } from './controllers/graphics-render.controller';
+
+const PLUGIN_NAME = 'UNIVER_SHEET_DRAWING_PLUGIN';
+
+export class UniverSheetGraphicsPlugin extends Plugin {
+    static override pluginName = PLUGIN_NAME;
+
+    constructor(
+        private readonly _config: Partial<IUniverSheetGraphicsConfig> = defaultPluginConfig,
+        @Inject(Injector) protected _injector: Injector,
+        @IConfigService private readonly _configService: IConfigService,
+        @IRenderManagerService private readonly _renderManagerService: IRenderManagerService
+    ) {
+        super();
+
+        const { ...rest } = this._config;
+        this._configService.setConfig(PLUGIN_CONFIG_KEY, rest);
+    }
+
+    override onRendered(): void {
+        ([
+            [SheetGraphicsRenderController],
+        ] as Dependency[]).forEach((dep) => {
+            this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SHEET, dep);
+        });
+    }
+}

packages/sheets-graphics/src/views/extensions/graphics.extension.ts

@@ -0,0 +1,57 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { IObjectMatrixPrimitiveType, IRange, IScale, ISelectionCellWithMergeInfo } from '@univerjs/core';
+import type { IDrawInfo, SpreadsheetSkeleton, UniverRenderingContext } from '@univerjs/engine-render';
+import { Range } from '@univerjs/core';
+import { SheetExtension } from '@univerjs/engine-render';
+import { GRAPHICS_EXTENSION_INDEX, UNIQUE_KEY } from '../../common/const';
+
+type IGraphicsCache = IObjectMatrixPrimitiveType<ISelectionCellWithMergeInfo>;
+
+type IGraphicsRenderer = (ctx: UniverRenderingContext, skeleton: SpreadsheetSkeleton, coordInfo: ISelectionCellWithMergeInfo) => void;
+type IGraphicsRenderMap = Map<string, IGraphicsRenderer>;
+
+export class Graphics extends SheetExtension {
+    override uKey = UNIQUE_KEY;
+    protected override Z_INDEX = GRAPHICS_EXTENSION_INDEX;
+
+    private _graphicsRenderMap: IGraphicsRenderMap = new Map();
+
+    public registerRenderer(key: string, renderer: IGraphicsRenderer) {
+        this._graphicsRenderMap.set(key, renderer);
+    }
+
+    override draw(ctx: UniverRenderingContext, _parentScale: IScale, skeleton: SpreadsheetSkeleton, diffBounds: IRange[], { viewRanges }: IDrawInfo): void {
+        const featureTypes = Array.from(this._graphicsRenderMap.keys());
+        viewRanges.forEach((range) => {
+            Range.foreach(range, (row, col) => {
+                const cellPosition = skeleton.getCellByIndexWithNoHeader(row, col);
+                if (!cellPosition) {
+                    return;
+                }
+                featureTypes.forEach((featureType) => {
+                    const renderer = this._graphicsRenderMap.get(featureType);
+                    renderer?.(ctx, skeleton, cellPosition);
+                });
+            });
+        });
+    }
+
+    override dispose(): void {
+        this._graphicsRenderMap.clear();
+    }
+}

packages/sheets-graphics/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/sheets-graphics/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "@univerjs-infra/shared/tsconfigs/base",
+    "compilerOptions": {
+        "rootDir": "src",
+        "outDir": "lib/types"
+    },
+    "references": [{ "path": "./tsconfig.node.json" }],
+    "include": ["src"]
+}

packages/sheets-graphics/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+    "extends": "@univerjs-infra/shared/tsconfigs/node",
+    "include": ["vitest.config.ts", "build.ts"]
+}

packages/sheets-graphics/vitest.config.ts

@@ -0,0 +1,3 @@
+import createConfig from '@univerjs-infra/shared/vitest';
+
+export default createConfig();