@univerjs/engine-render 0.4.0 → 0.4.1-nightly.202410201605

package/lib/es/index.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { Tools, DEFAULT_STYLES, FontStyleType, BaselineOffset, getCellInfoInMergeData, Rectangle, ColorKit, Disposable, EventSubject, checkParagraphHasIndentByStyle, DataStreamTreeTokenType, BorderStyleTypes, BooleanNumber, DisposableCollection, toDisposable, sortRules, Registry, Range, numberToABC, Inject, LocaleService, insertTextToContent, horizontalLineSegmentsSubtraction, deleteContent, DataStreamTreeNodeType, DocumentDataModel, GridType, BulletAlignment, PositionedObjectLayoutType, WrapTextType, ColumnSeparatorType, TableAlignmentType, ObjectRelativeFromV, TableTextWrapType, SpacingRule, CustomDecorationType, CustomRangeType, ObjectMatrix, SectionType, NumberUnitType, PageOrientType, HorizontalAlign, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, mergeWith, GlyphType as GlyphType$1, numberToListABC, PRESET_LIST_TYPE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, getColorStyle, isWhiteColor, IContextService, BuildTextUtils, TextX, DEFAULT_EMPTY_DOCUMENT_VALUE, TextDecoration, COLORS, DocumentFlavor, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, IConfigService } from "@univerjs/core";
+import { Tools, DEFAULT_STYLES, FontStyleType, BaselineOffset, getCellInfoInMergeData, Rectangle, ColorKit, Disposable, EventSubject, checkParagraphHasIndentByStyle, DataStreamTreeTokenType, BorderStyleTypes, BooleanNumber, DisposableCollection, toDisposable, sortRules, Registry, Range, numberToABC, Inject, LocaleService, insertTextToContent, horizontalLineSegmentsSubtraction, deleteContent, DataStreamTreeNodeType, DocumentDataModel, GridType, BulletAlignment, PositionedObjectLayoutType, WrapTextType, ColumnSeparatorType, TableAlignmentType, ObjectRelativeFromV, TableTextWrapType, SpacingRule, CustomDecorationType, CustomRangeType, ObjectMatrix, SectionType, NumberUnitType, DocumentFlavor, PageOrientType, HorizontalAlign, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, mergeWith, GlyphType as GlyphType$1, numberToListABC, PRESET_LIST_TYPE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, getColorStyle, isWhiteColor, IContextService, BuildTextUtils, TextX, DEFAULT_EMPTY_DOCUMENT_VALUE, TextDecoration, COLORS, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, IConfigService } from "@univerjs/core";
 import { BehaviorSubject, Subject, startWith, distinctUntilChanged, Subscription, Observable, shareReplay } from "rxjs";
 var SHAPE_TYPE = /* @__PURE__ */ ((SHAPE_TYPE2) => (SHAPE_TYPE2.RECT = "rect", SHAPE_TYPE2.CIRCLE = "circle", SHAPE_TYPE2.PATH = "path", SHAPE_TYPE2))(SHAPE_TYPE || {}), LINK_VIEW_PORT_TYPE = /* @__PURE__ */ ((LINK_VIEW_PORT_TYPE2) => (LINK_VIEW_PORT_TYPE2[LINK_VIEW_PORT_TYPE2.XY = 0] = "XY", LINK_VIEW_PORT_TYPE2[LINK_VIEW_PORT_TYPE2.X = 1] = "X", LINK_VIEW_PORT_TYPE2[LINK_VIEW_PORT_TYPE2.Y = 2] = "Y", LINK_VIEW_PORT_TYPE2))(LINK_VIEW_PORT_TYPE || {});
 const MIDDLE_CELL_POS_MAGIC_NUMBER = 1, DEFAULT_FONTFACE_PLANE = '"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif', DEFAULT_SKELETON_HEADER_FOOTER = {
@@ -3632,7 +3632,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     __publicField(this, "_context");
     __publicField(this, "_systemType");
     __publicField(this, "_browserType");
-    this._context = context, this.canvas = context.canvas;
+    this.canvas = context.canvas, this._context = context;
   }
   isContextLost() {
     return this._context.isContextLost();
@@ -3823,11 +3823,15 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
   set textBaseline(val) {
     this._context.textBaseline = val;
   }
+  /**
+   * Get scale from ctx.
+   * DOMMatrix.a DOMMatrix.d would affect by ctx.rotate()
+   */
   _getScale() {
-    const m = this._transformCache || this.getTransform();
-    return !this._transformCache && m && (this._transformCache = m), {
-      scaleX: m.a,
-      scaleY: m.d
+    const transform = this.getTransform(), { a, b, c, d } = transform, scaleX = Math.sqrt(a * a + b * b), scaleY = Math.sqrt(c * c + d * d);
+    return {
+      scaleX,
+      scaleY
     };
   }
   getScale() {
@@ -3850,7 +3854,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), w = fixLineWidthByScale(w, scaleX), h = fixLineWidthByScale(h, scaleY), this.roundRect(x, y, w, h, radii);
   }
   getTransform() {
-    return this._context.getTransform();
+    return this._transformCache || this._context.getTransform();
   }
   resetTransform() {
     this._transformCache = null, this._context.resetTransform();
@@ -4089,6 +4093,10 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
     const { scaleX, scaleY } = this._getScale();
     x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), this.moveTo(x, y);
   }
+  moveToByPrecisionLog(x, y) {
+    const { scaleX, scaleY } = this._getScale(), afterX = fixLineWidthByScale(x, scaleX), afterY = fixLineWidthByScale(y, scaleY);
+    this.moveTo(afterX, afterY);
+  }
   /**
    * rect function.
    * @method
@@ -4130,7 +4138,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   rotate(angle) {
-    this._context.rotate(angle);
+    this._transformCache = null, this._context.rotate(angle);
   }
   /**
    * save function.
@@ -4144,7 +4152,7 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   scale(x, y) {
-    this._context.scale(x, y);
+    this._transformCache = null, this._context.scale(x, y);
   }
   /**
    * setLineDash function.
@@ -4190,20 +4198,21 @@ const _UniverRenderingContext2D = class _UniverRenderingContext2D {
    * @method
    */
   transform(a, b, c, d, e, f) {
-    this._context.transform(a, b, c, d, e, f), this._transformCache = null;
+    this._transformCache = null, this._context.transform(a, b, c, d, e, f);
   }
   /**
    * translate function.
    * @method
    */
   translate(x, y) {
-    this._context.translate(x, y);
+    this._transformCache = null, this._context.translate(x, y);
   }
   translateWithPrecision(x, y) {
     const { scaleX, scaleY } = this._getScale();
-    x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), this._context.translate(x, y);
+    x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), this._transformCache = null, this._context.translate(x, y);
   }
   translateWithPrecisionRatio(x, y) {
+    this._transformCache = null;
     const { scaleX, scaleY } = this._getScale();
     this._context.translate(x / scaleX, y / scaleY);
   }
@@ -4233,15 +4242,8 @@ const _UniverPrintingContext = class _UniverPrintingContext extends UniverRender
     super(...arguments);
     __publicField(this, "__mode", "printing");
   }
-  __getScale() {
-    const m = this.getTransform();
-    return {
-      scaleX: m.a,
-      scaleY: m.d
-    };
-  }
   clearRect(x, y, width, height) {
-    const { scaleX, scaleY } = this.__getScale();
+    const { scaleX, scaleY } = this._getScale();
     x = fixLineWidthByScale(x, scaleX), y = fixLineWidthByScale(y, scaleY), width = fixLineWidthByScale(width, scaleX), height = fixLineWidthByScale(height, scaleY), this._context.save(), this._context.fillStyle = getColor([255, 255, 255]), this._context.fillRect(x, y, width, height), this._context.restore();
   }
   clearRectForTexture(x, y, width, height) {
@@ -7321,10 +7323,46 @@ const DEFAULT_SECTION_BREAK = {
   columnSeparatorType: ColumnSeparatorType.NONE,
   sectionType: SectionType.SECTION_TYPE_UNSPECIFIED,
   startIndex: 0
-}, DEFAULT_PAGE_SIZE = { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY };
+}, DEFAULT_PAGE_SIZE = { width: Number.POSITIVE_INFINITY, height: Number.POSITIVE_INFINITY }, DEFAULT_MODERN_DOCUMENT_STYLE = {
+  pageNumberStart: 1,
+  pageSize: {
+    width: ptToPixel(595),
+    height: Number.POSITIVE_INFINITY
+  },
+  marginTop: ptToPixel(50),
+  marginBottom: ptToPixel(50),
+  marginRight: ptToPixel(50),
+  marginLeft: ptToPixel(50),
+  renderConfig: {
+    vertexAngle: 0,
+    centerAngle: 0,
+    background: {
+      rgb: "#FFFFFF"
+    }
+  },
+  defaultHeaderId: "",
+  defaultFooterId: "",
+  evenPageHeaderId: "",
+  evenPageFooterId: "",
+  firstPageHeaderId: "",
+  firstPageFooterId: "",
+  evenAndOddHeaders: BooleanNumber.FALSE,
+  useFirstPageHeaderFooter: BooleanNumber.FALSE,
+  marginHeader: 0,
+  marginFooter: 0
+}, DEFAULT_MODERN_SECTION_BREAK = {
+  columnProperties: [],
+  columnSeparatorType: ColumnSeparatorType.NONE,
+  sectionType: SectionType.SECTION_TYPE_UNSPECIFIED
+};
 function prepareSectionBreakConfig(ctx, nodeIndex) {
   var _a10;
-  const { viewModel, dataModel, docsConfig } = ctx, sectionNode = viewModel.children[nodeIndex], sectionBreak = viewModel.getSectionBreak(sectionNode.endIndex) || DEFAULT_SECTION_BREAK, { documentStyle } = dataModel, {
+  const { viewModel, dataModel, docsConfig } = ctx, sectionNode = viewModel.children[nodeIndex];
+  let { documentStyle } = dataModel;
+  const { documentFlavor } = documentStyle;
+  let sectionBreak = viewModel.getSectionBreak(sectionNode.endIndex) || DEFAULT_SECTION_BREAK;
+  documentFlavor === DocumentFlavor.MODERN && (sectionBreak = Object.assign({}, sectionBreak, DEFAULT_MODERN_SECTION_BREAK), documentStyle = Object.assign({}, documentStyle, DEFAULT_MODERN_DOCUMENT_STYLE));
+  const {
     pageNumberStart: global_pageNumberStart = 1,
     // pageNumberStart
     pageSize: global_pageSize = DEFAULT_PAGE_SIZE,
@@ -27952,11 +27990,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, { 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;
+    const line2 = (_a10 = glyph.parent) == null ? void 0 : _a10.parent, { 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 (drawStrikeAndUnderline && underline) {
+    if (underline) {
       const startY = asc + dsc;
       this._drawLine(ctx, glyph, underline, startY, scale);
     }
@@ -27964,7 +28002,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 (drawStrikeAndUnderline && strikethrough) {
+    if (strikethrough) {
       let startY = asc + bd - strikeoutPosition - DELTA;
       baselineOffset === BaselineOffset.SUPERSCRIPT ? startY -= spo : baselineOffset === BaselineOffset.SUBSCRIPT && (startY += sbo), this._drawLine(ctx, glyph, strikethrough, startY, scale);
     }
@@ -27986,11 +28024,11 @@ const UNIQUE_KEY = "DefaultDocsLineExtension", DOC_EXTENSION_Z_INDEX = 40, _Line
       originTranslate = Vector2.create(0, 0),
       alignOffset = Vector2.create(0, 0),
       renderConfig = {}
-    } = this.extensionOffset, { left, width } = glyph, { centerAngle: centerAngleDeg = 0, vertexAngle: vertexAngleDeg = 0 } = renderConfig, centerAngle = degToRad(centerAngleDeg), vertexAngle = degToRad(vertexAngleDeg);
-    ctx.save(), ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET);
+    } = this.extensionOffset, { left, width } = glyph, { centerAngle: centerAngleDeg = 0, vertexAngle: vertexAngleDeg = 0 } = renderConfig;
+    ctx.save();
     const color = (c === BooleanNumber.TRUE ? getColorStyle((_a10 = glyph.ts) == null ? void 0 : _a10.cl) : getColorStyle(colorStyle)) || COLOR_BLACK_RGB;
     ctx.strokeStyle = color, ctx.lineWidth = lineWidth, this._setLineType(ctx, lineType || TextDecoration.SINGLE);
-    const start = calculateRectRotate(
+    const centerAngle = degToRad(centerAngleDeg), vertexAngle = degToRad(vertexAngleDeg), start = calculateRectRotate(
       originTranslate.addByPoint(left, startY),
       Vector2.create(0, 0),
       centerAngle,
@@ -28017,8 +28055,6 @@ const _Documents = class _Documents extends DocComponent {
     super(oKey, documentSkeleton, config);
     __publicField(this, "_pageRender$", new Subject());
     __publicField(this, "pageRender$", this._pageRender$.asObservable());
-    __publicField(this, "docsLeft", 0);
-    __publicField(this, "docsTop", 0);
     __publicField(this, "_drawLiquid", new Liquid());
     this._initialDefaultExtension(), this.makeDirty(!0);
   }
@@ -29122,7 +29158,9 @@ const PAGE_STROKE_COLOR = "rgba(198, 198, 198, 1)", PAGE_FILL_COLOR = "rgba(255,
     const skeletonData = (_a10 = this.getSkeleton()) == null ? void 0 : _a10.getSkeletonData(), docDataModel = (_b = this.getSkeleton()) == null ? void 0 : _b.getViewModel().getDataModel();
     if (skeletonData == null || docDataModel == null)
       return;
-    const documentFlavor = docDataModel.getSnapshot().documentStyle.documentFlavor;
+    const { documentFlavor } = docDataModel.getSnapshot().documentStyle;
+    if (documentFlavor !== DocumentFlavor.TRADITIONAL)
+      return;
     this._drawLiquid.reset();
     const { pages } = skeletonData;
     let pageTop = 0, pageLeft = 0;
@@ -29148,51 +29186,49 @@ const PAGE_STROKE_COLOR = "rgba(198, 198, 198, 1)", PAGE_FILL_COLOR = "rgba(255,
         fill: PAGE_FILL_COLOR,
         zIndex: 3
       };
-      if (Rect.drawWith(ctx, backgroundOptions), documentFlavor === DocumentFlavor.TRADITIONAL) {
-        const marginIdentification = {
-          dataArray: [{
-            command: "M",
-            points: [marginLeft - 15, originMarginTop]
-          }, {
-            command: "L",
-            points: [marginLeft, originMarginTop]
-          }, {
-            command: "L",
-            points: [marginLeft, originMarginTop - 15]
-          }, {
-            command: "M",
-            points: [pageWidth - marginRight + 15, originMarginTop]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, originMarginTop]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, originMarginTop - 15]
-          }, {
-            command: "M",
-            points: [marginLeft - 15, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [marginLeft, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [marginLeft, pageHeight - originMarginBottom + 15]
-          }, {
-            command: "M",
-            points: [pageWidth - marginRight + 15, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, pageHeight - originMarginBottom]
-          }, {
-            command: "L",
-            points: [pageWidth - marginRight, pageHeight - originMarginBottom + 15]
-          }],
-          strokeWidth: 1.5,
-          stroke: MARGIN_STROKE_COLOR
-        };
-        Path.drawWith(ctx, marginIdentification);
-      }
-      ctx.restore();
+      Rect.drawWith(ctx, backgroundOptions);
+      const IDENTIFIER_WIDTH = 15, marginIdentification = {
+        dataArray: [{
+          command: "M",
+          points: [marginLeft - IDENTIFIER_WIDTH, originMarginTop]
+        }, {
+          command: "L",
+          points: [marginLeft, originMarginTop]
+        }, {
+          command: "L",
+          points: [marginLeft, originMarginTop - IDENTIFIER_WIDTH]
+        }, {
+          command: "M",
+          points: [pageWidth - marginRight + IDENTIFIER_WIDTH, originMarginTop]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, originMarginTop]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, originMarginTop - IDENTIFIER_WIDTH]
+        }, {
+          command: "M",
+          points: [marginLeft - IDENTIFIER_WIDTH, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [marginLeft, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [marginLeft, pageHeight - originMarginBottom + IDENTIFIER_WIDTH]
+        }, {
+          command: "M",
+          points: [pageWidth - marginRight + IDENTIFIER_WIDTH, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, pageHeight - originMarginBottom]
+        }, {
+          command: "L",
+          points: [pageWidth - marginRight, pageHeight - originMarginBottom + IDENTIFIER_WIDTH]
+        }],
+        strokeWidth: 1.5,
+        stroke: MARGIN_STROKE_COLOR
+      };
+      Path.drawWith(ctx, marginIdentification), ctx.restore();
       const { x, y } = this._drawLiquid.translatePage(
         page,
         this.pageLayoutType,

package/lib/types/components/docs/document.d.ts

@@ -19,8 +19,6 @@ export interface IDocumentOffsetConfig extends IPageMarginLayout {
 export declare class Documents extends DocComponent {
     private readonly _pageRender$;
     readonly pageRender$: import('rxjs').Observable<IPageRenderConfig>;
-    docsLeft: number;
-    docsTop: number;
     private _drawLiquid;
     constructor(oKey: string, documentSkeleton?: DocumentSkeleton, config?: IDocumentsConfig);
     static create(oKey: string, documentSkeleton?: DocumentSkeleton, config?: IDocumentsConfig): Documents;

package/lib/types/context.d.ts

@@ -77,7 +77,14 @@ export declare class UniverRenderingContext2D implements CanvasRenderingContext2
     set textAlign(val: CanvasTextAlign);
     get textBaseline(): CanvasTextBaseline;
     set textBaseline(val: CanvasTextBaseline);
-    private _getScale;
+    /**
+     * Get scale from ctx.
+     * DOMMatrix.a DOMMatrix.d would affect by ctx.rotate()
+     */
+    protected _getScale(): {
+        scaleX: number;
+        scaleY: number;
+    };
     getScale(): {
         scaleX: number;
         scaleY: number;
@@ -266,6 +273,7 @@ export declare class UniverRenderingContext2D implements CanvasRenderingContext2
      * @method
      */
     moveToByPrecision(x: number, y: number): void;
+    moveToByPrecisionLog(x: number, y: number): void;
     /**
      * rect function.
      * @method
@@ -366,7 +374,6 @@ export declare class UniverRenderingContext extends UniverRenderingContext2D {
 }
 export declare class UniverPrintingContext extends UniverRenderingContext2D {
     __mode: string;
-    private __getScale;
     clearRect(x: number, y: number, width: number, height: number): void;
     clearRectForTexture(x: number, y: number, width: number, height: number): void;
     setGlobalCompositeOperation(val: GlobalCompositeOperation): void;

package/lib/types/layer.d.ts

@@ -1,7 +1,7 @@
-import { Disposable } from '@univerjs/core';
-import { BaseObject } from './base-object';
 import { UniverRenderingContext } from './context';
 import { Scene } from './scene';
+import { Disposable } from '@univerjs/core';
+import { BaseObject } from './base-object';
 export declare class Layer extends Disposable {
     private _scene;
     private _zIndex;