@univerjs/engine-render 0.4.0-alpha.1 → 0.4.0-experimental.d7288c0-20241017

package/lib/es/index.js

@@ -4286,6 +4286,9 @@ const _Canvas = class _Canvas {
   getHeight() {
     return this._height;
   }
+  setId(id) {
+    this._canvasEle.id = id;
+  }
   setSize(width, height, pixelRatioParam) {
     var _a10;
     this._pixelRatio = pixelRatioParam || getDevicePixelRatio();
@@ -25808,9 +25811,9 @@ const UNIQUE_KEY$6 = "DefaultFontExtension", _Font = class _Font extends SheetEx
       renderFontContext.cellInfo = cellInfo, this.renderFontEachCell(renderFontContext, range.startRow, range.startColumn, fontMatrix);
     }), ctx.restore();
   }
-  renderFontEachCell(renderFontContext, row, col, fontMatrix) {
+  renderFontEachCell(renderFontCtx, row, col, fontMatrix) {
     var _a10;
-    const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontContext;
+    const { ctx, viewRanges, diffRanges, spreadsheetSkeleton, cellInfo } = renderFontCtx;
     let { startY, endY, startX, endX } = cellInfo;
     const { isMerged, isMergedMainCell, mergeInfo } = cellInfo;
     if (isMerged && !isMergedMainCell)
@@ -25826,9 +25829,16 @@ const UNIQUE_KEY$6 = "DefaultFontExtension", _Font = class _Font extends SheetEx
     const cellData = spreadsheetSkeleton.worksheet.getCell(row, col) || {};
     if ((_a10 = cellData.fontRenderExtension) != null && _a10.isSkip)
       return !0;
-    ctx.save(), ctx.beginPath(), renderFontContext.overflowRectangle = overflowRange, renderFontContext.cellData = cellData, renderFontContext.startX = startX, renderFontContext.startY = startY, renderFontContext.endX = endX, renderFontContext.endY = endY, this._clipTextOverflow(renderFontContext, row, col, fontMatrix), ctx.translate(startX + FIX_ONE_PIXEL_BLUR_OFFSET, startY + FIX_ONE_PIXEL_BLUR_OFFSET), this._renderDocuments(ctx, fontsConfig, startX, startY, endX, endY, row, col, spreadsheetSkeleton.overflowCache), ctx.closePath(), ctx.restore();
+    ctx.save(), ctx.beginPath(), renderFontCtx.overflowRectangle = overflowRange, renderFontCtx.cellData = cellData, renderFontCtx.startX = startX, renderFontCtx.startY = startY, renderFontCtx.endX = endX, renderFontCtx.endY = endY, this._setFontRenderBounds(renderFontCtx, row, col, fontMatrix), ctx.translate(startX + FIX_ONE_PIXEL_BLUR_OFFSET, startY + FIX_ONE_PIXEL_BLUR_OFFSET), this._renderDocuments(ctx, fontsConfig, renderFontCtx.startX, renderFontCtx.startY, renderFontCtx.endX, renderFontCtx.endY, row, col, spreadsheetSkeleton.overflowCache), ctx.closePath(), ctx.restore();
   }
-  _clipTextOverflow(renderFontContext, row, col, fontMatrix) {
+  /**
+   * Change font render bounds, for overflow and filter icon & custom render.
+   * @param renderFontContext
+   * @param row
+   * @param col
+   * @param fontMatrix
+   */
+  _setFontRenderBounds(renderFontContext, row, col, fontMatrix) {
     var _a10, _b, _c, _d;
     const { ctx, scale, overflowRectangle, rowHeightAccumulation, columnWidthAccumulation, cellData } = renderFontContext;
     let { startX, endX, startY, endY } = renderFontContext;
@@ -25876,14 +25886,15 @@ const UNIQUE_KEY$6 = "DefaultFontExtension", _Font = class _Font extends SheetEx
       );
     } else
       ctx.rectByPrecision(startX + 1 / scale, startY + 1 / scale, cellWidth - 2 / scale, cellHeight - 2 / scale), ctx.clip();
+    renderFontContext.startX = startX, renderFontContext.startY = startY, renderFontContext.endX = endX, renderFontContext.endY = endY;
   }
-  _renderDocuments(ctx, docsConfig, startX, startY, endX, endY, row, column, overflowCache) {
+  _renderDocuments(ctx, docsConfig, startX, startY, endX, endY, row, col, overflowCache) {
     const documents = this.getDocuments();
     if (documents == null)
       throw new Error("documents is null");
     const { documentSkeleton, vertexAngle = 0, wrapStrategy } = docsConfig, cellHeight = endY - startY, cellWidth = endX - startX;
     wrapStrategy === WrapStrategy.WRAP && vertexAngle === 0 ? (documentSkeleton.getViewModel().getDataModel().updateDocumentDataPageSize(cellWidth), documentSkeleton.calculate()) : documentSkeleton.getViewModel().getDataModel().updateDocumentDataPageSize(Number.POSITIVE_INFINITY);
-    const overflowRectangle = overflowCache.getValue(row, column);
+    const overflowRectangle = overflowCache.getValue(row, col);
     if (!(wrapStrategy === WrapStrategy.WRAP && !overflowRectangle && vertexAngle === 0)) {
       const contentSize = getDocsSkeletonPageSize(documentSkeleton), documentStyle = documentSkeleton.getViewModel().getDataModel().getSnapshot().documentStyle;
       if (contentSize && documentStyle) {
@@ -26232,7 +26243,7 @@ const UNIQUE_KEY$2 = "DefaultDocsBorderExtension", _Border = class _Border exten
 __name(_Border, "Border");
 let Border = _Border;
 DocumentsSpanAndLineExtensionRegistry.add(new Border());
-const SHAPE_OBJECT_ARRAY = [
+const BASE_OBJECT_ARRAY_Set = new Set(BASE_OBJECT_ARRAY), SHAPE_OBJECT_ARRAY = [
   "hoverCursor",
   "moveCursor",
   "fillRule",
@@ -26410,7 +26421,7 @@ const SHAPE_OBJECT_ARRAY = [
     return themeKeys.length === 0 ? this : (themeKeys.forEach((key) => {
       if (props[key] === void 0)
         return !0;
-      BASE_OBJECT_ARRAY.indexOf(key) === -1 && (this[`_${key}`] = props[key]);
+      BASE_OBJECT_ARRAY_Set.has(key) || (this[`_${key}`] = props[key]);
     }), this.makeDirty(!0), this);
   }
   toJson() {
@@ -26432,10 +26443,15 @@ const SHAPE_OBJECT_ARRAY = [
       return;
     const transformState = {};
     let hasTransformState = !1;
+    const hasRotateEnabled = (props == null ? void 0 : props.rotateEnabled) !== void 0, hasResizeEnabled = (props == null ? void 0 : props.resizeEnabled) !== void 0;
+    if (hasRotateEnabled || hasResizeEnabled) {
+      const transformerConfig = this.transformerConfig || {};
+      hasRotateEnabled && (transformerConfig.rotateEnabled = props == null ? void 0 : props.rotateEnabled), hasResizeEnabled && (transformerConfig.resizeEnabled = props == null ? void 0 : props.resizeEnabled), this.transformerConfig = { ...transformerConfig };
+    }
     themeKeys.forEach((key) => {
       if (props[key] === void 0)
         return !0;
-      BASE_OBJECT_ARRAY.indexOf(key) > -1 ? (transformState[key] = props[key], hasTransformState = !0) : this[`_${key}`] = props[key];
+      BASE_OBJECT_ARRAY_Set.has(key) ? (transformState[key] = props[key], hasTransformState = !0) : this[`_${key}`] = props[key];
     }), hasTransformState && this.transformByState(transformState), this.makeDirty(!0);
   }
 };
@@ -27907,9 +27923,10 @@ const UNIQUE_KEY$1 = "DefaultDocsFontAndBaseLineExtension", DOC_EXTENSION_Z_INDE
     else {
       const CHECKED_GLYPH = "☑";
       if ((content === "☐" || content === CHECKED_GLYPH) && glyph.glyphType === GlyphType.LIST) {
-        ctx.save();
         const size = Math.ceil(((_b = (_a10 = glyph.ts) == null ? void 0 : _a10.fs) != null ? _b : 12) * 1.2);
-        ctx.translate(spanPointWithFont.x, spanPointWithFont.y - size), Checkbox.drawWith(ctx, {
+        ctx.save();
+        const fontHeight = glyph.bBox.aba - glyph.bBox.abd, bottom = spanPointWithFont.y, top = bottom - fontHeight, left = spanPointWithFont.x, topOffset = top + (bottom - top - size) / 2, leftOffset = left, BORDER_WIDTH = 1;
+        ctx.translate(leftOffset - BORDER_WIDTH / 2, topOffset - BORDER_WIDTH / 2), Checkbox.drawWith(ctx, {
           width: size,
           height: size,
           checked: content === CHECKED_GLYPH
@@ -27934,11 +27951,11 @@ const UNIQUE_KEY = "DefaultDocsLineExtension", DOC_EXTENSION_Z_INDEX = 40, _Line
   }
   draw(ctx, parentScale, glyph) {
     var _a10;
-    const line2 = (_a10 = glyph.parent) == null ? void 0 : _a10.parent, { ts: textStyle, bBox, content } = glyph;
+    const line2 = (_a10 = glyph.parent) == null ? void 0 : _a10.parent, { renderConfig } = this.extensionOffset, vertexAngle = (renderConfig == null ? void 0 : renderConfig.vertexAngle) || 0, drawStrikeAndUnderline = !(((renderConfig == null ? void 0 : renderConfig.centerAngle) || 0) === 0 && vertexAngle !== 0 && vertexAngle % 90 === 0), { ts: textStyle, bBox, content } = glyph;
     if (line2 == null || textStyle == null || content === "\r")
       return;
     const { asc, dsc } = line2, { sp: strikeoutPosition, spo, sbo, bd } = bBox, scale = getScale(parentScale), DELTA = 0.5, { ul: underline, st: strikethrough, ol: overline, va: baselineOffset, bbl: bottomBorderLine } = textStyle;
-    if (underline) {
+    if (drawStrikeAndUnderline && underline) {
       const startY = asc + dsc;
       this._drawLine(ctx, glyph, underline, startY, scale);
     }
@@ -27946,7 +27963,7 @@ const UNIQUE_KEY = "DefaultDocsLineExtension", DOC_EXTENSION_Z_INDEX = 40, _Line
       const startY = asc + dsc + 3;
       this._drawLine(ctx, glyph, bottomBorderLine, startY, scale, 2);
     }
-    if (strikethrough) {
+    if (drawStrikeAndUnderline && strikethrough) {
       let startY = asc + bd - strikeoutPosition - DELTA;
       baselineOffset === BaselineOffset.SUPERSCRIPT ? startY -= spo : baselineOffset === BaselineOffset.SUBSCRIPT && (startY += sbo), this._drawLine(ctx, glyph, strikethrough, startY, scale);
     }
@@ -29428,6 +29445,7 @@ const _ThinEngine = class _ThinEngine extends Disposable {
 __name(_ThinEngine, "ThinEngine");
 let ThinEngine = _ThinEngine;
 const _Engine = class _Engine extends ThinEngine {
+  // unitId
   constructor(elemWidth = 1, elemHeight = 1, pixelRatio, mode) {
     super();
     __publicField(this, "renderEvenInBackground", !0);
@@ -29479,6 +29497,7 @@ const _Engine = class _Engine extends ThinEngine {
     __publicField(this, "_isUsingFirefox", navigator.userAgent.indexOf("Firefox") !== -1);
     __publicField(this, "_previousWidth", -1e3);
     __publicField(this, "_previousHeight", -1e3);
+    __publicField(this, "_unitId", "");
     this._canvas = new Canvas({
       mode,
       width: elemWidth,
@@ -31322,7 +31341,7 @@ const TransformerManagerTypeArray = [
     }), this._transformerControlMap.clear();
   }
   _createControl(applyObject, isSkipOnCropper = !0) {
-    const { left = 0, top = 0, height = 0, width = 0 } = applyObject.getState(), angle = applyObject.angle, { isCropper, resizeEnabled, rotateAnchorOffset, rotateSize, rotateCornerRadius, borderEnabled, borderStroke, borderStrokeWidth, borderSpacing, enabledAnchors } = this._getConfig(applyObject);
+    const { left = 0, top = 0, height = 0, width = 0 } = applyObject.getState(), angle = applyObject.angle, { isCropper, resizeEnabled, rotateEnabled, rotateAnchorOffset, rotateSize, rotateCornerRadius, borderEnabled, borderStroke, borderStrokeWidth, borderSpacing, enabledAnchors } = this._getConfig(applyObject);
     if (isSkipOnCropper && isCropper)
       return;
     const oKey = applyObject.oKey, zIndex = this._selectedObjectMap.size + applyObject.maxZIndex + DEFAULT_CONTROL_PLUS_INDEX, layerIndex = applyObject.getLayerIndex() || DEFAULT_TRANSFORMER_LAYER_INDEX, groupElements = [];
@@ -31342,29 +31361,32 @@ const TransformerManagerTypeArray = [
         height,
         width,
         applyObject
-      ), rotateLine = new Rect(`__SpreadsheetTransformerRotateLine___${zIndex}`, {
-        zIndex: zIndex - 1,
-        evented: !1,
-        left: lineLeft,
-        top: lineTop,
-        height: rotateAnchorOffset,
-        width: 1,
-        strokeWidth: borderStrokeWidth,
-        stroke: borderStroke
-      }), { left: left2, top: top2 } = this._getRotateAnchorPosition("__SpreadsheetTransformerRotate__", height, width, applyObject), cursor = this._getRotateAnchorCursor(
-        "__SpreadsheetTransformerRotate__"
-        /* ROTATE */
-      ), rotate = new Rect(`__SpreadsheetTransformerRotate___${zIndex}`, {
-        zIndex: zIndex - 1,
-        left: left2,
-        top: top2,
-        height: rotateSize,
-        width: rotateSize,
-        radius: rotateCornerRadius,
-        strokeWidth: borderStrokeWidth * 2,
-        stroke: borderStroke
-      });
-      this._attachEventToRotate(rotate, applyObject), this._attachHover(rotate, cursor, CURSOR_TYPE.DEFAULT), groupElements.push(rotateLine, rotate);
+      );
+      if (rotateEnabled) {
+        const rotateLine = new Rect(`__SpreadsheetTransformerRotateLine___${zIndex}`, {
+          zIndex: zIndex - 1,
+          evented: !1,
+          left: lineLeft,
+          top: lineTop,
+          height: rotateAnchorOffset,
+          width: 1,
+          strokeWidth: borderStrokeWidth,
+          stroke: borderStroke
+        }), { left: left2, top: top2 } = this._getRotateAnchorPosition("__SpreadsheetTransformerRotate__", height, width, applyObject), cursor = this._getRotateAnchorCursor(
+          "__SpreadsheetTransformerRotate__"
+          /* ROTATE */
+        ), rotate = new Rect(`__SpreadsheetTransformerRotate___${zIndex}`, {
+          zIndex: zIndex - 1,
+          left: left2,
+          top: top2,
+          height: rotateSize,
+          width: rotateSize,
+          radius: rotateCornerRadius,
+          strokeWidth: borderStrokeWidth * 2,
+          stroke: borderStroke
+        });
+        this._attachEventToRotate(rotate, applyObject), this._attachHover(rotate, cursor, CURSOR_TYPE.DEFAULT), groupElements.push(rotateLine, rotate);
+      }
     }
     if (resizeEnabled)
       for (let i = 0, len = enabledAnchors.length; i < len; i++) {

package/lib/types/canvas.d.ts

@@ -19,6 +19,7 @@ interface ICanvasProps {
     height?: number;
     pixelRatio?: number;
     mode?: CanvasRenderMode;
+    id?: string;
 }
 /**
  * View Renderer constructor. It is a wrapper around native canvas element.
@@ -48,6 +49,7 @@ export declare class Canvas {
     getPixelRatio(): number;
     getWidth(): number;
     getHeight(): number;
+    setId(id: string): void;
     setSize(width?: number, height?: number, pixelRatioParam?: number): void;
     setPixelRatio(pixelRatio: number): void;
     dispose(): void;

package/lib/types/components/docs/extensions/font-and-base-line.d.ts

@@ -1,7 +1,7 @@
 import { IScale } from '@univerjs/core';
-import { docExtension } from '../doc-extension';
 import { IDocumentSkeletonGlyph } from '../../../basics/i-document-skeleton-cached';
 import { UniverRenderingContext } from '../../../context';
+import { docExtension } from '../doc-extension';
 export declare class FontAndBaseLine extends docExtension {
     uKey: string;
     Z_INDEX: number;

package/lib/types/components/sheets/extensions/font.d.ts

@@ -28,8 +28,15 @@ export declare class Font extends SheetExtension {
     Z_INDEX: number;
     getDocuments(): any;
     draw(ctx: UniverRenderingContext, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton, diffRanges: IRange[], moreBoundsInfo: IDrawInfo): void;
-    renderFontEachCell(renderFontContext: IRenderFontContext, row: number, col: number, fontMatrix: ObjectMatrix<IFontCacheItem>): true | undefined;
-    private _clipTextOverflow;
+    renderFontEachCell(renderFontCtx: IRenderFontContext, row: number, col: number, fontMatrix: ObjectMatrix<IFontCacheItem>): true | undefined;
+    /**
+     * Change font render bounds, for overflow and filter icon & custom render.
+     * @param renderFontContext
+     * @param row
+     * @param col
+     * @param fontMatrix
+     */
+    private _setFontRenderBounds;
     private _renderDocuments;
     private _clipRectangleForOverflow;
 }

package/lib/types/engine.d.ts

@@ -54,6 +54,7 @@ export declare class Engine extends ThinEngine<Scene> {
     private _isUsingFirefox;
     private _previousWidth;
     private _previousHeight;
+    private _unitId;
     constructor(elemWidth?: number, elemHeight?: number, pixelRatio?: number, mode?: CanvasRenderMode);
     _init(): void;
     get elapsedTime(): number;

package/lib/types/render-manager/render-manager.service.d.ts

@@ -1,11 +1,11 @@
-import { Disposable, Injector, IUniverInstanceService, UniverInstanceType, Dependency, DependencyIdentifier, IDisposable, Nullable, UnitModel, UnitType } from '@univerjs/core';
+import { Dependency, DependencyIdentifier, IDisposable, Nullable, UnitModel, UnitType, Disposable, Injector, IUniverInstanceService, UniverInstanceType } from '@univerjs/core';
 import { Observable } from 'rxjs';
-import { Engine } from '../engine';
-import { IRender, RenderUnit } from './render-unit';
 import { BaseObject } from '../base-object';
 import { DocComponent } from '../components/docs/doc-component';
 import { SheetComponent } from '../components/sheets/sheet-component';
 import { Slide } from '../components/slides/slide';
+import { Engine } from '../engine';
+import { IRender, RenderUnit } from './render-unit';
 export type RenderComponentType = SheetComponent | DocComponent | Slide | BaseObject;
 export interface IRenderManagerService extends IDisposable {
     /** @deprecated */

package/lib/types/scene.transformer.d.ts

@@ -1,9 +1,9 @@
 import { Nullable, Disposable } from '@univerjs/core';
 import { BaseObject } from './base-object';
 import { IMouseEvent, IPointerEvent } from './basics/i-events';
-import { Group } from './group';
-import { Scene } from './scene';
 import { ITransformerConfig } from './basics/transformer-config';
+import { Scene } from './scene';
+import { Group } from './group';
 declare enum MoveObserverType {
     MOVE_START = 0,
     MOVING = 1,

package/lib/types/shape/rect.d.ts

@@ -1,7 +1,7 @@
 import { Nullable } from '@univerjs/core';
-import { ObjectType } from '../base-object';
-import { Shape, IShapeProps } from './shape';
 import { UniverRenderingContext } from '../context';
+import { IShapeProps, Shape } from './shape';
+import { ObjectType } from '../base-object';
 export interface IRectProps extends IShapeProps {
     radius?: number;
     visualHeight?: number;

package/lib/types/shape/shape.d.ts

@@ -1,12 +1,14 @@
 import { IOffset, IScale, ISize, Nullable } from '@univerjs/core';
-import { BaseObject, ObjectType } from '../base-object';
 import { IObjectFullState } from '../basics/interfaces';
 import { IViewportInfo, Vector2 } from '../basics/vector2';
 import { UniverRenderingContext } from '../context';
+import { BaseObject, ObjectType } from '../base-object';
 export type LineJoin = 'round' | 'bevel' | 'miter';
 export type LineCap = 'butt' | 'round' | 'square';
 export type PaintFirst = 'fill' | 'stroke';
 export interface IShapeProps extends IObjectFullState, ISize, IOffset, IScale {
+    rotateEnabled?: boolean;
+    resizeEnabled?: boolean;
     hoverCursor?: Nullable<string>;
     moveCursor?: string | null;
     fillRule?: string;