@univerjs/engine-render 0.2.11 → 0.2.12

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, numberToABC, CustomDecorationType, CustomRangeType, PositionedObjectLayoutType, WrapTextType, TableAlignmentType, GridType, BulletAlignment, ColumnSeparatorType, GlyphType as GlyphType$1, numberToListABC, HorizontalAlign, DataStreamTreeNodeType, PageOrientType, ObjectRelativeFromV, TableTextWrapType, SpacingRule, ObjectMatrix, SectionType, NumberUnitType, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, Inject, LocaleService, insertTextToContent, horizontalLineSegmentsSubtraction, deleteContent, DocumentDataModel, PRESET_LIST_TYPE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, getColorStyle, isWhiteColor, IContextService, DEFAULT_EMPTY_DOCUMENT_VALUE, Range, TextDecoration, COLORS, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, RxDisposable, ILogService, DocumentFlavor } from "@univerjs/core";
+import { Tools, DEFAULT_STYLES, FontStyleType, BaselineOffset, getCellInfoInMergeData, Rectangle, ColorKit, Disposable, EventSubject, checkParagraphHasIndentByStyle, DataStreamTreeTokenType, BorderStyleTypes, BooleanNumber, DisposableCollection, toDisposable, sortRules, Registry, numberToABC, CustomDecorationType, CustomRangeType, PositionedObjectLayoutType, WrapTextType, TableAlignmentType, GridType, BulletAlignment, ColumnSeparatorType, GlyphType as GlyphType$1, numberToListABC, HorizontalAlign, DataStreamTreeNodeType, PageOrientType, ObjectRelativeFromV, TableTextWrapType, SpacingRule, ObjectMatrix, SectionType, NumberUnitType, VerticalAlign, WrapStrategy, AlignTypeH, ObjectRelativeFromH, AlignTypeV, Inject, LocaleService, insertTextToContent, horizontalLineSegmentsSubtraction, deleteContent, DocumentDataModel, PRESET_LIST_TYPE, searchArray, extractPureTextFromCell, CellValueType, isCellCoverable, isNullCell, getColorStyle, isWhiteColor, IContextService, DEFAULT_EMPTY_DOCUMENT_VALUE, Range, TextDecoration, COLORS, requestImmediateMacroTask, MOVE_BUFFER_VALUE, sortRulesByDesc, Injector, isClassDependencyItem, createIdentifier, remove, UniverInstanceType, IUniverInstanceService, Plugin, IConfigService, RxDisposable, ILogService, DocumentFlavor } from "@univerjs/core";
 import { BehaviorSubject, Subject, startWith, distinctUntilChanged, Subscription, Observable, shareReplay, fromEvent } 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 = {
@@ -1684,13 +1684,14 @@ function inRowViewRanges(ranges, rowIndex) {
   return flag;
 }
 __name(inRowViewRanges, "inRowViewRanges");
-function mergeRangeIfIntersects(mainRanges, ranges) {
+function expandRangeIfIntersects(mainRanges, ranges) {
+  const intersects = [];
   for (const mainRange of mainRanges)
     for (const range of ranges)
-      Rectangle.intersects(mainRange, range) && (mainRange.startRow = Math.min(mainRange.startRow, range.startRow), mainRange.endRow = Math.max(mainRange.endRow, range.endRow), mainRange.startColumn = Math.min(mainRange.startColumn, range.startColumn), mainRange.endColumn = Math.max(mainRange.endColumn, range.endColumn));
-  return mainRanges;
+      Rectangle.intersects(mainRange, range) && intersects.push(range);
+  return [...mainRanges, ...intersects];
 }
-__name(mergeRangeIfIntersects, "mergeRangeIfIntersects");
+__name(expandRangeIfIntersects, "expandRangeIfIntersects");
 function clampRanges(range) {
   return {
     startRow: Math.max(0, range.startRow),
@@ -3268,22 +3269,38 @@ const INITIAL_Path2 = [new Vector2(0, 0), new Vector2(1, 1)], _Path2 = class _Pa
 };
 __name(_Path2, "Path2");
 let Path2 = _Path2;
-const _PerformanceMonitor = class _PerformanceMonitor {
+const DEFAULT_FRAME_SAMPLE_SIZE = 60, DEFAULT_FRAME_LIST_SIZE = 60 * 60, DEFAULT_ONE_SEC_MS = 1e3, DEFAULT_FRAME_TIME = 16.67, _PerformanceMonitor = class _PerformanceMonitor extends Disposable {
+  // private _frameCount: number = 0; // number of all frames in whole life time.
   /**
-   * constructor
-   * @param frameSampleSize The number of samples required to saturate the sliding window
+   * @param {number} frameSampleSize The number of samples required to saturate the sliding window
    */
-  constructor(frameSampleSize = 30) {
+  constructor(frameSampleSize = DEFAULT_FRAME_SAMPLE_SIZE) {
+    super();
     __publicField(this, "_enabled", !0);
     __publicField(this, "_rollingFrameTime");
     __publicField(this, "_lastFrameTimeMs");
+    /**
+     * Counting frame in a second.
+     */
+    __publicField(this, "_frameCountInLastSecond", 0);
+    /**
+     *  The millisecond value of the last second. For counting frame in a second.
+     */
+    __publicField(this, "_lastSecondTimeMs");
+    /**
+     * The FPS values recorded in the past 1 second.
+     */
+    __publicField(this, "_recFPSValueLastSecond", 60);
     this._rollingFrameTime = new RollingAverage(frameSampleSize);
   }
+  dispose() {
+    super.dispose();
+  }
   /**
-   * Returns the average frame time in milliseconds over the sliding window (or the subset of frames sampled so far)
+   * Returns the average frame time in milliseconds of the sliding window (or the subset of frames sampled so far)
    */
   get averageFrameTime() {
-    return this._rollingFrameTime.average;
+    return this._rollingFrameTime.averageFrameTime;
   }
   /**
    * Returns the variance frame time in milliseconds over the sliding window (or the subset of frames sampled so far)
@@ -3292,7 +3309,7 @@ const _PerformanceMonitor = class _PerformanceMonitor {
     return this._rollingFrameTime.variance;
   }
   /**
-   * Returns the frame time of the most recent frame
+   * Returns the frame time of the last recent frame.
    */
   get instantaneousFrameTime() {
     return this._rollingFrameTime.history(0);
@@ -3301,14 +3318,14 @@ const _PerformanceMonitor = class _PerformanceMonitor {
    * Returns the average framerate in frames per second over the sliding window (or the subset of frames sampled so far)
    */
   get averageFPS() {
-    return 1e3 / this._rollingFrameTime.average;
+    return this._recFPSValueLastSecond;
   }
   /**
    * Returns the average framerate in frames per second using the most recent frame time
    */
   get instantaneousFPS() {
     const history = this._rollingFrameTime.history(0);
-    return history === 0 ? 0 : 1e3 / history;
+    return history === 0 ? 0 : DEFAULT_ONE_SEC_MS / history;
   }
   /**
    * Returns true if enough samples have been taken to completely fill the sliding window
@@ -3323,19 +3340,29 @@ const _PerformanceMonitor = class _PerformanceMonitor {
     return this._enabled;
   }
   /**
-   * Samples current frame
-   * @param timeMs A timestamp in milliseconds of the current frame to compare with other frames
+   * Samples current frame, set averageFPS instantaneousFrameTime
+   * this method is called each frame by engine renderLoop  --> endFrame.
+   * @param timestamp A timestamp in milliseconds of the current frame to compare with other frames
    */
-  sampleFrame(timeMs = this.Now()) {
+  sampleFrame(timestamp = this.now()) {
     if (this._enabled) {
+      if (this._frameCountInLastSecond++, this._lastSecondTimeMs != null) {
+        if (this._lastSecondTimeMs <= timestamp - DEFAULT_ONE_SEC_MS) {
+          const passedTime = timestamp - this._lastSecondTimeMs;
+          this._recFPSValueLastSecond = Math.round(this._frameCountInLastSecond / passedTime * DEFAULT_ONE_SEC_MS), this._lastSecondTimeMs = timestamp, this._frameCountInLastSecond = 0;
+        }
+      } else
+        this._lastSecondTimeMs = timestamp;
       if (this._lastFrameTimeMs != null) {
-        const dt = timeMs - this._lastFrameTimeMs;
-        this._rollingFrameTime.add(dt);
+        const dt = timestamp - this._lastFrameTimeMs;
+        this._rollingFrameTime.addFrameTime(dt), this._rollingFrameTime.calcAverageFrameTime();
       }
-      this._lastFrameTimeMs = timeMs;
     }
   }
-  Now() {
+  endFrame(timestamp) {
+    this.sampleFrame(timestamp), this._lastFrameTimeMs = timestamp;
+  }
+  now() {
     return performance && performance.now ? performance.now() : Date.now();
   }
   /**
@@ -3370,29 +3397,41 @@ const _RollingAverage = class _RollingAverage {
     /**
      * Current average
      */
-    __publicField(this, "average", 0);
+    __publicField(this, "averageFrameTime", DEFAULT_FRAME_TIME);
     /**
      * Current variance
      */
     __publicField(this, "variance", 0);
     __publicField(this, "_samples", []);
+    /**
+     * for isStaturated
+     * max value of _sampleCount is length of _samples
+     */
     __publicField(this, "_sampleCount", 0);
     __publicField(this, "_pos", 0);
     __publicField(this, "_m2", 0);
     this._samples = new Array(length), this.reset();
   }
   /**
-   * Adds a sample to the sample set
-   * @param v The sample value
+   * Calc average frameTime and variance.
    */
-  add(v) {
+  calcAverageFrameTime() {
+    const frameDuration = this.history(0);
     let delta;
     if (this.isSaturated()) {
       const bottomValue = this._samples[this._pos];
-      delta = bottomValue - this.average, this.average -= delta / (this._sampleCount - 1), this._m2 -= delta * (bottomValue - this.average);
+      delta = bottomValue - this.averageFrameTime, this._m2 -= delta * (bottomValue - this.averageFrameTime);
     } else
       this._sampleCount++;
-    delta = v - this.average, this.average += delta / this._sampleCount, this._m2 += delta * (v - this.average), this.variance = this._m2 / (this._sampleCount - 1), this._samples[this._pos] = v, this._pos++, this._pos %= this._samples.length;
+    const min2 = Math.min(...this._samples), max2 = Math.min(...this._samples), filteredData = this._samples.filter((v) => v !== max2 && v !== min2);
+    this.averageFrameTime = filteredData.reduce((sum, value) => sum + value, 0) / filteredData.length, delta = frameDuration - this.averageFrameTime, this._m2 += delta * (frameDuration - this.averageFrameTime), this.variance = this._m2 / (this._sampleCount - 1);
+  }
+  /**
+   * Adds a sample to the sample set
+   * @param frameTime The sample value
+   */
+  addFrameTime(frameTime) {
+    this._samples[this._pos] = frameTime, this._pos = ++this._pos % this._samples.length;
   }
   /**
    * Returns previously added values or null if outside of history or outside the sliding window domain
@@ -3416,7 +3455,7 @@ const _RollingAverage = class _RollingAverage {
    * Resets the rolling average (equivalent to 0 samples taken so far)
    */
   reset() {
-    this.average = 0, this.variance = 0, this._sampleCount = 0, this._pos = 0, this._m2 = 0;
+    this.averageFrameTime = DEFAULT_FRAME_TIME, this.variance = 0, this._sampleCount = 0, this._pos = 0, this._m2 = 0;
   }
   /**
    * Wraps a value around the sample range boundaries
@@ -4355,7 +4394,7 @@ const _SpreadsheetColumnHeader = class _SpreadsheetColumnHeader extends Spreadsh
 __name(_SpreadsheetColumnHeader, "SpreadsheetColumnHeader");
 let SpreadsheetColumnHeader = _SpreadsheetColumnHeader;
 var SHEET_EXTENSION_TYPE = /* @__PURE__ */ ((SHEET_EXTENSION_TYPE2) => (SHEET_EXTENSION_TYPE2[SHEET_EXTENSION_TYPE2.GRID = 0] = "GRID", SHEET_EXTENSION_TYPE2))(SHEET_EXTENSION_TYPE || {});
-const _SheetExtension = class _SheetExtension extends ComponentExtension {
+const SHEET_EXTENSION_PREFIX = "sheet-ext-", _SheetExtension = class _SheetExtension extends ComponentExtension {
   constructor() {
     super(...arguments);
     __publicField(this, "type", 0);
@@ -4491,20 +4530,12 @@ let Background$1 = (_a = class extends SheetExtension {
     var _a11;
     return (_a11 = this.parent) != null && _a11.isPrinting ? this.PRINTING_Z_INDEX : this.Z_INDEX;
   }
-  // eslint-disable-next-line max-lines-per-function
-  draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, { viewRanges, checkOutOfViewBound }) {
-    const { stylesCache } = spreadsheetSkeleton, { background, backgroundPositions } = stylesCache;
-    if (!spreadsheetSkeleton)
-      return;
-    const { worksheet } = spreadsheetSkeleton;
-    if (!worksheet)
-      return;
-    const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
-    if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
+  draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges, { viewRanges, checkOutOfViewBound }) {
+    const { stylesCache, worksheet, rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton, { background, backgroundPositions } = stylesCache;
+    if (!worksheet || !background || !rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
       return;
     ctx.save();
-    const { scaleX, scaleY } = ctx.getScale();
-    background && Object.keys(background).forEach((rgb) => {
+    const { scaleX, scaleY } = ctx.getScale(), renderBGByCell = /* @__PURE__ */ __name((rgb) => {
       const backgroundCache = background[rgb];
       ctx.fillStyle = rgb || getColor([255, 255, 255]);
       const backgroundPaths = new Path2D();
@@ -4515,7 +4546,7 @@ let Background$1 = (_a = class extends SheetExtension {
         if (cellInfo == null)
           return !0;
         let { startY, endY, startX, endX } = cellInfo;
-        const { isMerged, isMergedMainCell, mergeInfo } = cellInfo, mergeTo = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges, combineWithMergeRanges = mergeRangeIfIntersects(mergeTo, [mergeInfo]);
+        const { isMerged, isMergedMainCell, mergeInfo } = cellInfo, mergeTo = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges, combineWithMergeRanges = expandRangeIfIntersects([...mergeTo], [mergeInfo]);
         if (!inViewRanges(combineWithMergeRanges, rowIndex, columnIndex) || isMerged)
           return !0;
         {
@@ -4526,7 +4557,8 @@ let Background$1 = (_a = class extends SheetExtension {
         const startXPrecise = fixLineWidthByScale(startX, scaleX), startYPrecise = fixLineWidthByScale(startY, scaleY), endXPrecise = fixLineWidthByScale(endX, scaleX), endYPrecise = fixLineWidthByScale(endY, scaleY);
         backgroundPaths.rect(startXPrecise, startYPrecise, endXPrecise - startXPrecise, endYPrecise - startYPrecise);
       }), ctx.fill(backgroundPaths);
-    }), ctx.restore();
+    }, "renderBGByCell");
+    Object.keys(background).forEach(renderBGByCell), ctx.restore();
   }
 }, __name(_a, "Background"), _a);
 SpreadsheetExtensionRegistry.add(Background$1);
@@ -4539,20 +4571,14 @@ let Border$1 = (_a2 = class extends SheetExtension {
     __publicField(this, "Z_INDEX", BORDER_Z_INDEX);
   }
   // eslint-disable-next-line max-lines-per-function
-  draw(ctx, parentScale, spreadsheetSkeleton, diffRanges) {
-    const { dataMergeCache, stylesCache, overflowCache } = spreadsheetSkeleton, { border } = stylesCache;
-    if (!spreadsheetSkeleton)
-      return;
-    const { worksheet } = spreadsheetSkeleton;
-    if (!worksheet)
-      return;
-    const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
-    if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
+  draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
+    const { dataMergeCache, stylesCache, overflowCache, worksheet, rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
+    if (!worksheet || !rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0)
       return;
     ctx.save();
     let preStyle, preColor;
     ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET);
-    const precisionScale = this._getScale(ctx.getScale());
+    const precisionScale = this._getScale(ctx.getScale()), { border } = stylesCache;
     border == null || border.forValue((rowIndex, columnIndex, borderCaches) => {
       if (!borderCaches)
         return !0;
@@ -5109,7 +5135,7 @@ function getTableIdAndSliceIndex(tableSliceId) {
   };
 }
 __name(getTableIdAndSliceIndex, "getTableIdAndSliceIndex");
-var BreakPointType = /* @__PURE__ */ ((BreakPointType2) => (BreakPointType2.Normal = "Normal", BreakPointType2.Mandatory = "Mandatory", BreakPointType2.Hyphen = "Hyphen", BreakPointType2))(BreakPointType || {});
+var BreakPointType = /* @__PURE__ */ ((BreakPointType2) => (BreakPointType2.Normal = "Normal", BreakPointType2.Mandatory = "Mandatory", BreakPointType2.Hyphen = "Hyphen", BreakPointType2.Link = "Link", BreakPointType2))(BreakPointType || {});
 const _Break = class _Break {
   constructor(position, type = "Normal") {
     this.position = position, this.type = type;
@@ -20104,13 +20130,13 @@ function getWord(str) {
   return word;
 }
 __name(getWord, "getWord");
-function getHyphenPosition(lastPos, hyphenSlice, index2) {
-  let hyphenPos = lastPos;
+function getSlicePosition(lastPos, hyphenSlice, index2) {
+  let position = lastPos;
   for (let i = 0; i <= index2; i++)
-    hyphenPos += hyphenSlice[i].length;
-  return hyphenPos;
+    position += hyphenSlice[i].length;
+  return position;
 }
-__name(getHyphenPosition, "getHyphenPosition");
+__name(getSlicePosition, "getSlicePosition");
 function isUpperCase(word) {
   return word.length > 0 && word === word.toUpperCase();
 }
@@ -20123,21 +20149,21 @@ const _LineBreakerHyphenEnhancer = class _LineBreakerHyphenEnhancer {
     __publicField(this, "_word", "");
     __publicField(this, "_hyphenIndex", -1);
     __publicField(this, "_hyphenSlice", []);
-    __publicField(this, "_content", "");
-    this._lineBreaker = _lineBreaker, this._hyphen = _hyphen, this._lang = _lang, this._doNotHyphenateCaps = _doNotHyphenateCaps, this._content = _lineBreaker.content;
+    __publicField(this, "content", "");
+    this._lineBreaker = _lineBreaker, this._hyphen = _hyphen, this._lang = _lang, this._doNotHyphenateCaps = _doNotHyphenateCaps, this.content = _lineBreaker.content;
   }
   nextBreakPoint() {
     if (this._isInWord)
       if (this._hyphenIndex < this._hyphenSlice.length - 1) {
-        const position = getHyphenPosition(this._curBreak.position, this._hyphenSlice, this._hyphenIndex);
+        const position = getSlicePosition(this._curBreak.position, this._hyphenSlice, this._hyphenIndex);
         return this._hyphenIndex++, new Break(position, BreakPointType.Hyphen);
       } else
         return this._isInWord = !1, this._word = "", this._hyphenSlice = [], this._hyphenIndex = -1, this._nextBreak;
     else {
       if (this._curBreak = this._nextBreak, this._nextBreak = this._lineBreaker.nextBreakPoint(), this._nextBreak == null || this._curBreak == null)
         return null;
-      const word = getWord(this._content.slice(this._curBreak.position, this._nextBreak.position));
-      return word.length && !(isUpperCase(word) && this._doNotHyphenateCaps) ? (this._isInWord = !0, this._word = word, this._hyphenSlice = this._hyphen.hyphenate(this._word, this._lang), this._hyphenIndex = 0, this.nextBreakPoint()) : this._nextBreak;
+      const word = getWord(this.content.slice(this._curBreak.position, this._nextBreak.position));
+      return word.length && !(isUpperCase(word) && this._doNotHyphenateCaps) && this._nextBreak.type !== BreakPointType.Link ? (this._isInWord = !0, this._word = word, this._hyphenSlice = this._hyphen.hyphenate(this._word, this._lang), this._hyphenIndex = 0, this.nextBreakPoint()) : this._nextBreak;
     }
   }
 };
@@ -20149,6 +20175,74 @@ function customBlockLineBreakExtension(breaker) {
   breaker.addRule("break_before_and_after_slash_b", (codePoint, lastCodePoint) => codePoint === SLASH_B_CODE_POINT || lastCodePoint === SLASH_B_CODE_POINT);
 }
 __name(customBlockLineBreakExtension, "customBlockLineBreakExtension");
+function ofLinkCharType(char) {
+  return /[a-z]/i.test(char) ? "Alphabetic" : /[0-9]/.test(char) ? "Digit" : char === "(" || char === "[" ? "Open" : "Other";
+}
+__name(ofLinkCharType, "ofLinkCharType");
+function linebreakLink(link) {
+  const pieces = [];
+  let offset = 0, prevCharType = "Other";
+  for (let i = 0; i < link.length; i++) {
+    const char = link[i], charType = ofLinkCharType(char);
+    if (i > 0 && prevCharType !== "Open" && (charType === "Other" ? charType === "Other" : charType !== prevCharType)) {
+      const piece = link.slice(offset, i);
+      if (piece.length < 16)
+        pieces.push(piece);
+      else
+        for (let j = 0; j < piece.length; j++)
+          pieces.push(piece[j]);
+      offset = i, prevCharType = charType;
+    }
+  }
+  return pieces;
+}
+__name(linebreakLink, "linebreakLink");
+const LINK_CHAR_REG_EXP = /[a-z\d!#$%&*+,-./:;=?@_~\\]/i, LINK_CHAR_NO_TRAILING_REG_EXP = /[!,.;:?']$/g;
+function extractLink(content, offset) {
+  let link = "";
+  for (let i = offset; i < content.length; i++) {
+    const char = content[i];
+    if (LINK_CHAR_REG_EXP.test(char))
+      link += char;
+    else
+      break;
+  }
+  return link.replace(LINK_CHAR_NO_TRAILING_REG_EXP, ""), link;
+}
+__name(extractLink, "extractLink");
+const _LineBreakerLinkEnhancer = class _LineBreakerLinkEnhancer {
+  constructor(_lineBreaker) {
+    __publicField(this, "_curBreak", null);
+    __publicField(this, "_nextBreak", new Break(0));
+    __publicField(this, "_isInLink", !1);
+    __publicField(this, "_link", "");
+    __publicField(this, "_index", -1);
+    __publicField(this, "_linkSlice", []);
+    __publicField(this, "content", "");
+    this._lineBreaker = _lineBreaker, this.content = _lineBreaker.content;
+  }
+  nextBreakPoint() {
+    if (this._isInLink)
+      if (this._index < this._linkSlice.length - 1) {
+        const position = getSlicePosition(this._curBreak.position, this._linkSlice, this._index);
+        return this._index++, new Break(position, BreakPointType.Link);
+      } else
+        return this._isInLink = !1, this._link = "", this._linkSlice = [], this._index = -1, this._nextBreak;
+    else {
+      if (this._curBreak = this._nextBreak, this._nextBreak = this._lineBreaker.nextBreakPoint(), this._nextBreak == null || this._curBreak == null)
+        return null;
+      const word = this.content.slice(this._curBreak.position, this._nextBreak.position);
+      if (word.length && (word.endsWith("://") || word.startsWith("www."))) {
+        for (this._isInLink = !0, this._link = extractLink(this.content, this._curBreak.position), this._linkSlice = linebreakLink(this._link), this._index = 0; this._nextBreak && this._nextBreak.position < this._curBreak.position + this._link.length; )
+          this._nextBreak = this._lineBreaker.nextBreakPoint();
+        return this.nextBreakPoint();
+      } else
+        return this._nextBreak;
+    }
+  }
+};
+__name(_LineBreakerLinkEnhancer, "LineBreakerLinkEnhancer");
+let LineBreakerLinkEnhancer = _LineBreakerLinkEnhancer;
 function otherHandler(index2, charArray, viewModel, paragraphNode, sectionBreakConfig, paragraph) {
   const glyphGroup = [];
   let step = 0;
@@ -20244,7 +20338,7 @@ function shaping(ctx, content, viewModel, paragraphNode, sectionBreakConfig, use
   let last = 0, bk, lastGlyphIndex = 0;
   const { hyphen, languageDetector } = ctx, paragraphBody = prepareParagraphBody(viewModel.getBody(), endIndex);
   let glyphInfos = [];
-  useOpenType && (glyphInfos = textShape(paragraphBody)), tabLineBreakExtension(breaker), customBlockLineBreakExtension(breaker);
+  useOpenType && (glyphInfos = textShape(paragraphBody)), tabLineBreakExtension(breaker), customBlockLineBreakExtension(breaker), breaker = new LineBreakerLinkEnhancer(breaker);
   const lang = languageDetector.detect(content), needHyphen = hyphenConfig(paragraphStyle, sectionBreakConfig), doNotHyphenateCaps = sectionBreakConfig.doNotHyphenateCaps === BooleanNumber.TRUE;
   for (lang !== Lang.UNKNOWN && needHyphen && (hyphen.hasPattern(lang) ? breaker = new LineBreakerHyphenEnhancer(breaker, hyphen, lang, doNotHyphenateCaps) : hyphen.loadPattern(lang)); bk = breaker.nextBreakPoint(); ) {
     const word = content.slice(last, bk.position), shapedGlyphs = [];
@@ -25382,15 +25476,16 @@ let SpreadsheetSkeleton = (_a6 = class extends Skeleton {
         this._setCellStylesCache(mergeRange.startRow, mergeRange.startColumn, {
           mergeRange
         });
-      for (let r = startRow; r <= endRow; r++) {
-        for (let c = startColumn; c <= endColumn; c++)
-          this._setCellStylesCache(r, c);
-        for (let c = 0; c < startColumn; c++)
-          this._setCellStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
-        if (endColumn !== 0)
-          for (let c = endColumn + 1; c < columnWidthAccumulation.length; c++)
+      for (let r = startRow; r <= endRow; r++)
+        if (this.worksheet.getRowVisible(r) !== !1) {
+          for (let c = startColumn; c <= endColumn; c++)
+            this._setCellStylesCache(r, c);
+          for (let c = 0; c < startColumn; c++)
             this._setCellStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
-      }
+          if (endColumn !== 0)
+            for (let c = endColumn + 1; c < columnWidthAccumulation.length; c++)
+              this._setCellStylesCache(r, c, { cacheItem: { bg: !1, border: !1 } });
+        }
     }
   }
   _resetCache() {
@@ -25694,15 +25789,13 @@ const UNIQUE_KEY$7 = "DefaultFontExtension", EXTENSION_Z_INDEX = 45, _Font = cla
     return parent == null ? void 0 : parent.getDocuments();
   }
   draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, moreBoundsInfo) {
-    const { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo, { stylesCache, dataMergeCache, overflowCache, worksheet } = spreadsheetSkeleton, { font: fontList } = stylesCache;
-    if (!spreadsheetSkeleton || !worksheet || !fontList)
-      return;
-    const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;
-    if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0 || !worksheet)
+    const { stylesCache, dataMergeCache, overflowCache, worksheet, rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton, { font: fontList } = stylesCache;
+    if (!worksheet || !fontList || !rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === void 0 || rowTotalHeight === void 0 || !worksheet)
       return;
     ctx.save();
     const scale = this._getScale(parentScale), renderFontByCell = /* @__PURE__ */ __name((fontFormat) => {
-      fontList[fontFormat].forValue((rowIndex, columnIndex, docsConfig) => {
+      const fontObjectArray = fontList[fontFormat], { viewRanges = [], checkOutOfViewBound } = moreBoundsInfo;
+      fontObjectArray.forValue((rowIndex, columnIndex, docsConfig) => {
         var _a11, _b, _c, _d, _e;
         if (!checkOutOfViewBound && !inViewRanges(viewRanges, rowIndex, columnIndex))
           return !0;
@@ -25721,7 +25814,7 @@ const UNIQUE_KEY$7 = "DefaultFontExtension", EXTENSION_Z_INDEX = 45, _Font = cla
           const visibleRow = spreadsheetSkeleton.worksheet.getRowVisible(rowIndex), visibleCol = spreadsheetSkeleton.worksheet.getColVisible(columnIndex);
           if (!visibleRow || !visibleCol) return !0;
         }
-        const mergeTo = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges, combineWithMergeRanges = mergeRangeIfIntersects(mergeTo, [mergeInfo]);
+        const mergeTo = diffRanges && diffRanges.length > 0 ? diffRanges : viewRanges, combineWithMergeRanges = expandRangeIfIntersects([...mergeTo], [mergeInfo]);
         if (!inRowViewRanges(combineWithMergeRanges, rowIndex) || (isMergedMainCell && (startY = mergeInfo.startY, endY = mergeInfo.endY, startX = mergeInfo.startX, endX = mergeInfo.endX), diffRanges && !this.isRowInRanges(mergeInfo.startRow, mergeInfo.endRow, diffRanges)))
           return !0;
         const overflowRectangle = overflowCache.getValue(rowIndex, columnIndex), { horizontalAlign, vertexAngle = 0, centerAngle = 0 } = docsConfig;
@@ -25969,7 +26062,7 @@ const UNIQUE_KEY$4 = "DefaultCustomExtension", Z_INDEX = 55, stringifyRange = /*
     __publicField(this, "Z_INDEX", Z_INDEX);
     __publicField(this, "uKey", UNIQUE_KEY$4);
   }
-  draw(ctx, parentScale, skeleton, diffRanges) {
+  draw(ctx, _parentScale, skeleton, diffRanges) {
     const { rowHeightAccumulation, columnWidthAccumulation, worksheet, dataMergeCache, rowColumnSegment } = skeleton;
     if (!worksheet)
       return;
@@ -27686,7 +27779,7 @@ const MINI_THUMB_SIZE = 17, _ScrollBar = class _ScrollBar extends BaseScrollBar
       const e = evt, srcElement = this.verticalThumbRect;
       this._isVerticalMove = !0, this._lastX = e.offsetX, this._lastY = e.offsetY, srcElement == null || srcElement.setProps({
         fill: this.thumbActiveBackgroundColor
-      }), mainScene.disableEvent(), this.makeViewDirty(!0), state.stopPropagation();
+      }), mainScene.disableObjectsEvent(), this.makeViewDirty(!0), state.stopPropagation();
     })), this._verticalPointerMoveSub = mainScene.onPointerMove$.subscribeEvent((evt, _state) => {
       var _a11;
       const e = evt;
@@ -27695,7 +27788,7 @@ const MINI_THUMB_SIZE = 17, _ScrollBar = class _ScrollBar extends BaseScrollBar
       }), this._lastY = e.offsetY, (_a11 = mainScene.getEngine()) == null || _a11.setRemainCapture());
     }), this._verticalPointerUpSub = mainScene.onPointerUp$.subscribeEvent((_evt, _state) => {
       const srcElement = this.verticalThumbRect;
-      this._isVerticalMove = !1, mainScene.enableEvent(), srcElement == null || srcElement.setProps({
+      this._isVerticalMove = !1, mainScene.enableObjectsEvent(), srcElement == null || srcElement.setProps({
         fill: this.thumbBackgroundColor
       }), this.makeViewDirty(!0);
     });
@@ -27727,7 +27820,7 @@ const MINI_THUMB_SIZE = 17, _ScrollBar = class _ScrollBar extends BaseScrollBar
       const e = evt;
       this._isHorizonMove = !0, this._lastX = e.offsetX, this._lastY = e.offsetY, (_a11 = this.horizonThumbRect) == null || _a11.setProps({
         fill: this.thumbActiveBackgroundColor
-      }), this.makeViewDirty(!0), mainScene.disableEvent(), state.stopPropagation();
+      }), this.makeViewDirty(!0), mainScene.disableObjectsEvent(), state.stopPropagation();
     })), this._horizonPointerMoveSub = mainScene.onPointerMove$.subscribeEvent((evt, _state) => {
       var _a11;
       const e = evt;
@@ -27736,7 +27829,7 @@ const MINI_THUMB_SIZE = 17, _ScrollBar = class _ScrollBar extends BaseScrollBar
       }), this._lastX = e.offsetX, (_a11 = mainScene.getEngine()) == null || _a11.setRemainCapture());
     }), this._horizonPointerUpSub = mainScene.onPointerUp$.subscribeEvent((evt, state) => {
       const srcElement = this.horizonThumbRect;
-      this._isHorizonMove = !1, mainScene.enableEvent(), srcElement == null || srcElement.setProps({
+      this._isHorizonMove = !1, mainScene.enableObjectsEvent(), srcElement == null || srcElement.setProps({
         fill: this.thumbBackgroundColor
       }), this.makeViewDirty(!0);
     });
@@ -28529,13 +28622,28 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
     if (!spreadsheetSkeleton)
       return;
     this._drawAuxiliary(ctx);
-    const parentScale = this.getParentScale(), diffRanges = this._refreshIncrementalState && (viewportInfo != null && viewportInfo.diffBounds) ? (_a11 = viewportInfo == null ? void 0 : viewportInfo.diffBounds) == null ? void 0 : _a11.map((bound) => spreadsheetSkeleton.getRowColumnSegmentByViewBound(bound)) : void 0, viewRanges = [spreadsheetSkeleton.getRowColumnSegmentByViewBound(viewportInfo == null ? void 0 : viewportInfo.cacheBound)], extensions = this.getExtensionsByOrder();
-    for (const extension of extensions)
-      `${viewportInfo.viewportKey}${extension.constructor.name}`, extension.draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, {
+    const parentScale = this.getParentScale(), diffRanges = this._refreshIncrementalState && (viewportInfo != null && viewportInfo.diffBounds) ? (_a11 = viewportInfo == null ? void 0 : viewportInfo.diffBounds) == null ? void 0 : _a11.map((bound) => spreadsheetSkeleton.getRowColumnSegmentByViewBound(bound)) : [], viewRanges = [spreadsheetSkeleton.getRowColumnSegmentByViewBound(viewportInfo == null ? void 0 : viewportInfo.cacheBound)], extensions = this.getExtensionsByOrder(), scene = this.getScene();
+    for (const extension of extensions) {
+      const timeKey = `${SHEET_EXTENSION_PREFIX}${extension.uKey}`, st = Tools.now();
+      extension.draw(ctx, parentScale, spreadsheetSkeleton, diffRanges, {
         viewRanges,
         checkOutOfViewBound: !0,
         viewportKey: viewportInfo.viewportKey
-      });
+      }), this.addRenderFrameTimeMetricToScene(timeKey, Tools.now() - st, scene);
+    }
+  }
+  addRenderFrameTimeMetricToScene(timeKey, val, scene) {
+    scene = scene != null ? scene : this.getScene(), scene.getEngine().renderFrameTimeMetric$.next([timeKey, val]);
+  }
+  addRenderTagToScene(renderKey, val, scene) {
+    scene = scene != null ? scene : this.getScene(), scene.getEngine().renderFrameTags$.next([renderKey, val]);
+  }
+  /**
+   * override for return type as Scene.
+   * @returns Scene
+   */
+  getScene() {
+    return super.getScene();
   }
   isHit(coord) {
     const oCoord = this.getInverseCoord(coord), skeleton = this.getSkeleton();
@@ -28607,7 +28715,7 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
     const { diffBounds, diffX, diffY, viewPortPosition, cacheCanvas, leftOrigin, topOrigin, bufferEdgeX, bufferEdgeY, isDirty: isViewportDirty, isForceDirty: isViewportForceDirty } = viewportInfo, { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton, { a: scaleX = 1, d: scaleY = 1 } = mainCtx.getTransform(), bufferEdgeSizeX = bufferEdgeX * scaleX / window.devicePixelRatio, bufferEdgeSizeY = bufferEdgeY * scaleY / window.devicePixelRatio, cacheCtx = cacheCanvas.getContext();
     cacheCtx.save();
     const { left, top, right, bottom } = viewPortPosition, dw = right - left + rowHeaderWidth, dh = bottom - top + columnHeaderHeight, isForceDirty = isViewportForceDirty || this.isForceDirty(), isDirty = isViewportDirty || this.isDirty();
-    diffBounds.length === 0 || diffX === 0 && diffY === 0 || isForceDirty || isDirty ? (isDirty || isForceDirty) && this.refreshCacheCanvas(viewportInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY }) : (diffBounds.length !== 0 || diffX !== 0 || diffY !== 0) && this.paintNewAreaForScrolling(viewportInfo, {
+    diffBounds.length === 0 || diffX === 0 && diffY === 0 || isForceDirty || isDirty ? (isDirty || isForceDirty) && (this.addRenderTagToScene("scrolling", !1), this.refreshCacheCanvas(viewportInfo, { cacheCanvas, cacheCtx, mainCtx, topOrigin, leftOrigin, bufferEdgeX, bufferEdgeY })) : (diffBounds.length !== 0 || diffX !== 0 || diffY !== 0) && (this.addRenderTagToScene("scrolling", !0), this.paintNewAreaForScrolling(viewportInfo, {
       cacheCanvas,
       cacheCtx,
       mainCtx,
@@ -28619,7 +28727,7 @@ const OBJECT_KEY = "__SHEET_EXTENSION_FONT_DOCUMENT_INSTANCE__", _Spreadsheet =
       scaleY,
       columnHeaderHeight,
       rowHeaderWidth
-    });
+    }));
     const sourceLeft = bufferEdgeSizeX * Math.min(1, window.devicePixelRatio), sourceTop = bufferEdgeSizeY * Math.min(1, window.devicePixelRatio);
     this._applyCache(cacheCanvas, mainCtx, sourceLeft, sourceTop, dw, dh, left, top, dw, dh), cacheCtx.restore();
   }
@@ -29276,21 +29384,30 @@ const _Engine = class _Engine extends ThinEngine {
     __publicField(this, "beginFrame$", this._beginFrame$.asObservable());
     __publicField(this, "_endFrame$", new Subject());
     __publicField(this, "endFrame$", this._endFrame$.asObservable());
+    __publicField(this, "renderFrameTimeMetric$", new Subject());
+    __publicField(this, "renderFrameTags$", new Subject());
+    /**
+     * time when render start, for elapsedTime
+     */
+    __publicField(this, "_renderStartTime", 0);
     __publicField(this, "_rect$", null);
     __publicField(this, "_container");
     __publicField(this, "_canvas");
     __publicField(this, "_renderingQueueLaunched", !1);
-    __publicField(this, "_activeRenderLoops", new Array());
-    __publicField(this, "_renderFunction", /* @__PURE__ */ __name(() => {
+    __publicField(this, "_renderFrameTasks", new Array());
+    __publicField(this, "_renderFunction", /* @__PURE__ */ __name((_timestamp) => {
     }, "_renderFunction"));
     __publicField(this, "_requestNewFrameHandler", -1);
+    /**
+     * frameCount
+     */
     __publicField(this, "_frameId", -1);
     __publicField(this, "_usingSafari", IsSafari());
     __publicField(this, "_resizeObserver");
     // FPS
     __publicField(this, "_fps", 60);
     __publicField(this, "_deltaTime", 0);
-    __publicField(this, "_performanceMonitor", new PerformanceMonitor());
+    __publicField(this, "_performanceMonitor");
     __publicField(this, "_pointerMoveEvent");
     __publicField(this, "_pointerDownEvent");
     __publicField(this, "_pointerUpEvent");
@@ -29316,7 +29433,7 @@ const _Engine = class _Engine extends ThinEngine {
       width: elemWidth,
       height: elemHeight,
       pixelRatio
-    }), this._handleKeyboardAction(), this._handlePointerAction(), this._handleDragAction(), mode !== CanvasRenderMode.Printing && this._matchMediaHandler();
+    }), this._init(), this._handleKeyboardAction(), this._handlePointerAction(), this._handleDragAction(), mode !== CanvasRenderMode.Printing && this._matchMediaHandler();
   }
   get clientRect$() {
     return this._rect$ || (this._rect$ = new Observable((subscriber) => {
@@ -29328,6 +29445,12 @@ const _Engine = class _Engine extends ThinEngine {
       };
     })).pipe(shareReplay(1));
   }
+  _init() {
+    this._performanceMonitor = new PerformanceMonitor();
+  }
+  get elapsedTime() {
+    return Tools.now() - this._renderStartTime;
+  }
   get width() {
     return this.getCanvas().getWidth();
   }
@@ -29414,14 +29537,20 @@ const _Engine = class _Engine extends ThinEngine {
     var _a11;
     super.dispose();
     const eventPrefix = getPointerPrefix(), canvasEle = this.getCanvasElement();
-    canvasEle.removeEventListener(`${eventPrefix}leave`, this._pointerLeaveEvent), canvasEle.removeEventListener(`${eventPrefix}enter`, this._pointerEnterEvent), canvasEle.removeEventListener(`${eventPrefix}move`, this._pointerMoveEvent), canvasEle.removeEventListener(`${eventPrefix}down`, this._pointerDownEvent), canvasEle.removeEventListener(`${eventPrefix}up`, this._pointerUpEvent), canvasEle.removeEventListener(`${eventPrefix}out`, this._pointerOutEvent), canvasEle.removeEventListener(`${eventPrefix}cancel`, this._pointerCancelEvent), canvasEle.removeEventListener("blur", this._pointerBlurEvent), canvasEle.removeEventListener("dragenter", this._dragEnterEvent), canvasEle.removeEventListener("dragleave", this._dragLeaveEvent), canvasEle.removeEventListener("dragover", this._dragOverEvent), canvasEle.removeEventListener("drop", this._dropEvent), canvasEle.removeEventListener(this._getWheelEventName(), this._pointerWheelEvent), this._activeRenderLoops = [], this.getCanvas().dispose(), this.onTransformChange$.complete(), this._beginFrame$.complete(), this._endFrame$.complete(), (_a11 = this._resizeObserver) == null || _a11.disconnect(), this._container = null;
+    canvasEle.removeEventListener(`${eventPrefix}leave`, this._pointerLeaveEvent), canvasEle.removeEventListener(`${eventPrefix}enter`, this._pointerEnterEvent), canvasEle.removeEventListener(`${eventPrefix}move`, this._pointerMoveEvent), canvasEle.removeEventListener(`${eventPrefix}down`, this._pointerDownEvent), canvasEle.removeEventListener(`${eventPrefix}up`, this._pointerUpEvent), canvasEle.removeEventListener(`${eventPrefix}out`, this._pointerOutEvent), canvasEle.removeEventListener(`${eventPrefix}cancel`, this._pointerCancelEvent), canvasEle.removeEventListener("blur", this._pointerBlurEvent), canvasEle.removeEventListener("dragenter", this._dragEnterEvent), canvasEle.removeEventListener("dragleave", this._dragLeaveEvent), canvasEle.removeEventListener("dragover", this._dragOverEvent), canvasEle.removeEventListener("drop", this._dropEvent), canvasEle.removeEventListener(this._getWheelEventName(), this._pointerWheelEvent), this._renderFrameTasks = [], this._performanceMonitor.dispose(), this.getCanvas().dispose(), this.onTransformChange$.complete(), this.onTransformChange$.complete(), this._beginFrame$.complete(), this._endFrame$.complete(), (_a11 = this._resizeObserver) == null || _a11.disconnect(), this._container = null;
+  }
+  addFunction2RenderLoop(renderFunction) {
+    this._renderFrameTasks.indexOf(renderFunction) === -1 && this._renderFrameTasks.push(renderFunction);
+  }
+  startRenderLoop() {
+    this._renderingQueueLaunched || (this._renderStartTime = performance.now(), this._renderingQueueLaunched = !0, this._renderFunction = this._renderFunctionCore.bind(this), this._requestNewFrameHandler = requestNewFrame(this._renderFunction));
   }
   /**
-   * Register and execute a render loop. The engine can have more than one render function
+   * Register and execute a render loop. The engine could manage more than one render function
    * @param renderFunction defines the function to continuously execute
    */
   runRenderLoop(renderFunction) {
-    this._activeRenderLoops.indexOf(renderFunction) === -1 && (this._activeRenderLoops.push(renderFunction), this._renderingQueueLaunched || (this._renderingQueueLaunched = !0, this._renderFunction = this._renderLoop.bind(this), this._requestNewFrameHandler = requestNewFrame(this._renderFunction)));
+    this.addFunction2RenderLoop(renderFunction), this.startRenderLoop();
   }
   /**
    * stop executing a render loop function and remove it from the execution array
@@ -29429,25 +29558,28 @@ const _Engine = class _Engine extends ThinEngine {
    */
   stopRenderLoop(renderFunction) {
     if (!renderFunction) {
-      this._activeRenderLoops.length = 0, this._cancelFrame();
+      this._renderFrameTasks.length = 0, this._cancelFrame();
       return;
     }
-    const index2 = this._activeRenderLoops.indexOf(renderFunction);
-    index2 >= 0 && (this._activeRenderLoops.splice(index2, 1), this._activeRenderLoops.length === 0 && this._cancelFrame());
+    const index2 = this._renderFrameTasks.indexOf(renderFunction);
+    index2 >= 0 && (this._renderFrameTasks.splice(index2, 1), this._renderFrameTasks.length === 0 && this._cancelFrame());
   }
   /**
    * Begin a new frame
    */
-  beginFrame() {
-    this._measureFps(), this._beginFrame$.next();
+  _beginFrame(_timestamp) {
+    this._frameId++, this._beginFrame$.next(this._frameId);
   }
   /**
    * End the current frame
    */
-  endFrame() {
-    this._frameId++, this._endFrame$.next();
+  _endFrame(timestamp) {
+    this._performanceMonitor.endFrame(timestamp), this._fps = this._performanceMonitor.averageFPS, this._deltaTime = this._performanceMonitor.instantaneousFrameTime || 0, this._endFrame$.next({
+      FPS: this.getFps(),
+      frameTime: this.getDeltaTime(),
+      elapsedTime: this.elapsedTime
+    });
   }
-  // FPS
   /**
    * Gets the current framerate
    * @returns a number representing the framerate
@@ -29462,9 +29594,12 @@ const _Engine = class _Engine extends ThinEngine {
   getDeltaTime() {
     return this._deltaTime;
   }
-  _renderFrame() {
-    for (let index2 = 0; index2 < this._activeRenderLoops.length; index2++) {
-      const renderFunction = this._activeRenderLoops[index2];
+  /**
+   * Exec all function in _renderFrameTasks
+   */
+  _renderFrame(_timestamp) {
+    for (let index2 = 0; index2 < this._renderFrameTasks.length; index2++) {
+      const renderFunction = this._renderFrameTasks[index2];
       renderFunction();
     }
   }
@@ -29485,12 +29620,13 @@ const _Engine = class _Engine extends ThinEngine {
     var _a11;
     return typeof window > "u" ? null : (_a11 = this.getCanvasElement().ownerDocument) != null && _a11.defaultView ? this.getCanvasElement().ownerDocument.defaultView : window;
   }
-  _renderLoop() {
+  /**
+   * call itself by raf
+   * Exec all function in _renderFrameTasks in _renderFrame()
+   */
+  _renderFunctionCore(timestamp) {
     let shouldRender = !0;
-    this.renderEvenInBackground || (shouldRender = !1), shouldRender && (this.beginFrame(), this._renderFrame(), this.endFrame()), this._activeRenderLoops.length > 0 ? this._requestNewFrameHandler = requestNewFrame(this._renderFunction) : this._renderingQueueLaunched = !1;
-  }
-  _measureFps() {
-    this._performanceMonitor.sampleFrame(), this._fps = this._performanceMonitor.averageFPS, this._deltaTime = this._performanceMonitor.instantaneousFrameTime || 0;
+    this.renderEvenInBackground || (shouldRender = !1), shouldRender && (this._beginFrame(timestamp), this._renderFrame(timestamp), this._endFrame(timestamp)), this._renderFrameTasks.length > 0 ? this._requestNewFrameHandler = requestNewFrame(this._renderFunction) : this._renderingQueueLaunched = !1;
   }
   _handleKeyboardAction() {
     const keyboardDownEvent = /* @__PURE__ */ __name((evt) => {
@@ -29955,6 +30091,194 @@ const _Layer = class _Layer extends Disposable {
 };
 __name(_Layer, "Layer");
 let Layer = _Layer;
+const _InputManager = class _InputManager extends Disposable {
+  constructor(scene) {
+    super();
+    __publicField(this, "_scene");
+    /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
+    __publicField(this, "_alreadyAttached", !1);
+    // private _alreadyAttachedTo: HTMLElement;
+    // WorkBookObserver
+    __publicField(this, "_onInput$");
+    // Pointers
+    __publicField(this, "_onPointerMove");
+    __publicField(this, "_onPointerDown");
+    __publicField(this, "_onPointerUp");
+    __publicField(this, "_onPointerOut");
+    __publicField(this, "_onPointerCancel");
+    __publicField(this, "_onPointerEnter");
+    __publicField(this, "_onPointerLeave");
+    __publicField(this, "_onMouseWheel");
+    // Keyboard
+    __publicField(this, "_onKeyDown");
+    __publicField(this, "_onKeyUp");
+    // Drag
+    __publicField(this, "_onDragEnter");
+    __publicField(this, "_onDragLeave");
+    __publicField(this, "_onDragOver");
+    __publicField(this, "_onDrop");
+    __publicField(this, "_currentMouseEnterPicked");
+    __publicField(this, "_startingPosition", new Vector2(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY));
+    __publicField(this, "_delayedTimeout", -1);
+    __publicField(this, "_delayedTripeTimeout", -1);
+    __publicField(this, "_doubleClickOccurred", 0);
+    __publicField(this, "_tripleClickState", !1);
+    __publicField(this, "_currentObject");
+    this._scene = scene;
+  }
+  /**
+   * TODO: DR-Univer, fix as unknown as
+   */
+  dispose() {
+    super.dispose(), this.detachControl(), this._scene = null, this._currentMouseEnterPicked = null, this._currentObject = null, this._startingPosition = null, clearTimeout(this._delayedTimeout), clearTimeout(this._delayedTripeTimeout), this._onPointerMove = null, this._onPointerDown = null, this._onPointerUp = null, this._onPointerEnter = null, this._onPointerLeave = null, this._onMouseWheel = null, this._onKeyDown = null, this._onKeyUp = null, this._onDragEnter = null, this._onDragLeave = null, this._onDragOver = null, this._onDrop = null;
+  }
+  // Handle events such as triggering mouseleave and mouseenter.
+  mouseLeaveEnterHandler(evt) {
+    var _a11;
+    const o = this._currentObject;
+    if (o == null)
+      (_a11 = this._currentMouseEnterPicked) == null || _a11.triggerPointerLeave(evt), this._currentMouseEnterPicked = null;
+    else if (o !== this._currentMouseEnterPicked) {
+      const previousPicked = this._currentMouseEnterPicked;
+      this._currentMouseEnterPicked = o, previousPicked == null || previousPicked.triggerPointerLeave(evt), o == null || o.triggerPointerEnter(evt);
+    }
+  }
+  // Handle events such as triggering dragleave and dragenter.
+  dragLeaveEnterHandler(evt) {
+    var _a11;
+    const o = this._currentObject;
+    if (o == null)
+      (_a11 = this._currentMouseEnterPicked) == null || _a11.triggerDragLeave(evt), this._currentMouseEnterPicked = null;
+    else if (o !== this._currentMouseEnterPicked) {
+      const previousPicked = this._currentMouseEnterPicked;
+      this._currentMouseEnterPicked = o, previousPicked == null || previousPicked.triggerDragLeave(evt), o == null || o.triggerDragEnter(evt);
+    }
+  }
+  // eslint-disable-next-line max-lines-per-function
+  attachControl(hasDown = !0, hasUp = !0, enableMove = !0, hasWheel = !0, hasEnter = !0, hasLeave = !0) {
+    const engine = this._scene.getEngine();
+    engine && (this._onPointerEnter = (evt) => {
+      var _a11;
+      evt.pointerId === void 0 && (evt.pointerId = 0), this._currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY), (_a11 = this._currentObject) == null || _a11.triggerPointerMove(evt), this.mouseLeaveEnterHandler(evt);
+    }, this._onPointerLeave = (evt) => {
+      evt.pointerId === void 0 && (evt.pointerId = 0), this._currentObject = null, this.mouseLeaveEnterHandler(evt);
+    }, this._onPointerMove = (evt) => {
+      var _a11;
+      evt.pointerId === void 0 && (evt.pointerId = 0);
+      const currentObject = this._currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerPointerMove(evt);
+      this.mouseLeaveEnterHandler(evt), this._checkDirectSceneEventTrigger(!isStop, this._currentObject) && (this._scene.onPointerMove$.emitEvent(evt), (_a11 = this._scene.getEngine()) == null || _a11.setRemainCapture());
+    }, this._onPointerDown = (evt) => {
+      evt.pointerId === void 0 && (evt.pointerId = 0);
+      const currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerPointerDown(evt);
+      this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onPointerDown$.emitEvent(evt);
+    }, this._onPointerUp = (evt) => {
+      evt.pointerId === void 0 && (evt.pointerId = 0);
+      const currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerPointerUp(evt);
+      this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onPointerUp$.emitEvent(evt), this._prePointerDoubleOrTripleClick(evt);
+    }, this._onPointerCancel = (evt) => {
+      this._scene.onPointerCancel$.emitEvent(evt);
+    }, this._onPointerOut = (evt) => {
+      this._scene.onPointerOut$.emitEvent(evt);
+    }, this._onMouseWheel = (evt) => {
+      const currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerMouseWheel(evt);
+      this._scene.getViewports().forEach((vp) => {
+        vp.onMouseWheel$.emitEvent(evt);
+      }), this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onMouseWheel$.emitEvent(evt);
+    }, this._onKeyDown = (evt) => {
+      this._scene.onKeyDown$.emitEvent(evt);
+    }, this._onKeyUp = (evt) => {
+      this._scene.onKeyUp$.emitEvent(evt);
+    }, this._onDragEnter = (evt) => {
+      var _a11;
+      this._currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY), (_a11 = this._currentObject) == null || _a11.triggerDragOver(evt), this.dragLeaveEnterHandler(evt);
+    }, this._onDragLeave = (evt) => {
+      this._currentObject = null, this.dragLeaveEnterHandler(evt);
+    }, this._onDragOver = (evt) => {
+      var _a11, _b;
+      this._currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY);
+      const isStop = (_a11 = this._currentObject) == null ? void 0 : _a11.triggerDragOver(evt);
+      this.dragLeaveEnterHandler(evt), this._checkDirectSceneEventTrigger(!isStop, this._currentObject) && (this._scene.onDragOver$.emitEvent(evt), (_b = this._scene.getEngine()) == null || _b.setRemainCapture());
+    }, this._onDrop = (evt) => {
+      const currentObject = this._getObjectAtPos(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerDrop(evt);
+      this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onDrop$.emitEvent(evt);
+    }, this._onInput$ = engine.onInputChanged$.subscribeEvent((eventData) => {
+      const evt = eventData;
+      if (eventData.deviceType === DeviceType.Keyboard && (eventData.currentState === 1 && this._onKeyDown(evt), eventData.currentState === 0 && this._onKeyUp(evt)), eventData.dataTransfer) {
+        enableMove && (eventData.inputIndex === PointerInput.Horizontal || eventData.inputIndex === PointerInput.Vertical || eventData.inputIndex === PointerInput.DeltaHorizontal || eventData.inputIndex === PointerInput.DeltaVertical) ? this._onDragOver(evt) : hasEnter && eventData.currentState === 4 ? this._onDragEnter(evt) : hasLeave && eventData.currentState === 5 ? this._onDragLeave(evt) : hasUp && eventData.currentState === 6 && this._onDrop(evt);
+        return;
+      }
+      if (eventData.deviceType === DeviceType.Mouse || eventData.deviceType === DeviceType.Touch)
+        switch (hasDown && eventData.inputIndex >= PointerInput.LeftClick && eventData.inputIndex <= PointerInput.RightClick && eventData.currentState === 1 && this._onPointerDown(evt), hasUp && eventData.inputIndex >= PointerInput.LeftClick && eventData.inputIndex <= PointerInput.RightClick && eventData.currentState === 0 && this._onPointerUp(evt), enableMove && eventData.type === "pointermove" ? this._onPointerMove(evt) : hasWheel && (eventData.inputIndex === PointerInput.MouseWheelX || eventData.inputIndex === PointerInput.MouseWheelY || eventData.inputIndex === PointerInput.MouseWheelZ) ? this._onMouseWheel(evt) : hasEnter && eventData.currentState === 2 ? this._onPointerEnter(evt) : hasLeave && eventData.currentState === 3 && this._onPointerLeave(evt), evt.type) {
+          case "pointerout":
+            this._onPointerOut(evt);
+            break;
+          case "pointercancel":
+            this._onPointerCancel(evt);
+            break;
+        }
+    }), this.disposeWithMe(
+      toDisposable(
+        this._onInput$
+      )
+    ), this._alreadyAttached = !0);
+  }
+  /**
+   * Detaches all event handlers
+   */
+  detachControl() {
+    var _a11;
+    !this._alreadyAttached || !this._scene.getEngine() || ((_a11 = this._onInput$) == null || _a11.unsubscribe(), this._alreadyAttached = !1);
+  }
+  /**
+   * Just call this._scene?.pick, nothing special.
+   * @param offsetX
+   * @param offsetY
+   * @returns
+   */
+  _getObjectAtPos(offsetX, offsetY) {
+    var _a11;
+    return (_a11 = this._scene) == null ? void 0 : _a11.pick(Vector2.FromArray([offsetX, offsetY]));
+  }
+  _checkDirectSceneEventTrigger(isTrigger, currentObject) {
+    let notObject = !1;
+    currentObject == null && (notObject = !0);
+    let isNotInSceneViewer = !0;
+    if (currentObject && currentObject.classType === RENDER_CLASS_TYPE.BASE_OBJECT) {
+      const scene = currentObject.getScene();
+      scene && (isNotInSceneViewer = scene.getParent().classType !== RENDER_CLASS_TYPE.SCENE_VIEWER);
+    }
+    return !this._scene.objectsEvented && isTrigger && isNotInSceneViewer || notObject;
+  }
+  /**
+   * @hidden
+   * @returns Boolean if delta for pointer exceeds drag movement threshold
+   */
+  _isPointerSwiping(pointerX, pointerY) {
+    return Math.abs(this._startingPosition.x - pointerX) > _InputManager.DragMovementThreshold || Math.abs(this._startingPosition.y - pointerY) > _InputManager.DragMovementThreshold;
+  }
+  _prePointerDoubleOrTripleClick(evt) {
+    var _a11, _b, _c, _d;
+    const { clientX, clientY } = evt;
+    this._isPointerSwiping(clientX, clientY) && this._resetDoubleClickParam(), this._delayedTimeout = setTimeout(() => {
+      this._resetDoubleClickParam();
+    }, _InputManager.DoubleClickDelay), this._doubleClickOccurred += 1, this._tripleClickState && ((_b = (_a11 = this._scene) == null ? void 0 : _a11.pick(Vector2.FromArray([evt.offsetX, evt.offsetY]))) == null || _b.triggerTripleClick(evt), this._scene.onTripleClick$.emitEvent(evt)), this._doubleClickOccurred === 2 && ((_d = (_c = this._scene) == null ? void 0 : _c.pick(Vector2.FromArray([evt.offsetX, evt.offsetY]))) == null || _d.triggerDblclick(evt), this._scene.onDblclick$.emitEvent(evt), this._resetDoubleClickParam(), this._tripleClickState = !0, clearTimeout(this._delayedTripeTimeout), this._delayedTripeTimeout = setTimeout(() => {
+      this._tripleClickState = !1;
+    }, _InputManager.TripleClickDelay)), this._startingPosition.x = clientX, this._startingPosition.y = clientY;
+  }
+  _resetDoubleClickParam() {
+    this._doubleClickOccurred = 0, clearTimeout(this._delayedTimeout);
+  }
+};
+__name(_InputManager, "InputManager"), /** The distance in pixel that you have to move to prevent some events */
+__publicField(_InputManager, "DragMovementThreshold", 2), // in pixels
+/** Time in milliseconds to wait to raise long press events if button is still pressed */
+__publicField(_InputManager, "LongPressDelay", 500), // in milliseconds
+/** Time in milliseconds with two consecutive clicks will be considered as a double or triple click */
+__publicField(_InputManager, "DoubleClickDelay", 500), // in milliseconds
+__publicField(_InputManager, "TripleClickDelay", 300), // in milliseconds
+/** If you need to check double click without raising a single click at first click, enable this flag */
+__publicField(_InputManager, "ExclusiveDoubleClickMode", !1);
+let InputManager = _InputManager;
 var ScrollTimerType = /* @__PURE__ */ ((ScrollTimerType2) => (ScrollTimerType2[ScrollTimerType2.NONE = 0] = "NONE", ScrollTimerType2[ScrollTimerType2.X = 1] = "X", ScrollTimerType2[ScrollTimerType2.Y = 2] = "Y", ScrollTimerType2[ScrollTimerType2.ALL = 3] = "ALL", ScrollTimerType2))(ScrollTimerType || {});
 const _ScrollTimer = class _ScrollTimer {
   constructor(_scene, _scrollTimerType = 3, _padding) {
@@ -29966,6 +30290,9 @@ const _ScrollTimer = class _ScrollTimer {
     __publicField(this, "_moveY", 0);
     __publicField(this, "_scrollX", 0);
     __publicField(this, "_scrollY", 0);
+    /**
+     * Custmize scroll function.
+     */
     __publicField(this, "_scrollFunction");
     this._scene = _scene, this._scrollTimerType = _scrollTimerType, this._padding = _padding, this._padding || (this._padding = { t: 0, b: 15, l: 0, r: 60 });
   }
@@ -29987,7 +30314,8 @@ const _ScrollTimer = class _ScrollTimer {
   startScroll(offsetX, offsetY, targetViewport) {
     this._offsetX = offsetX, this._offsetY = offsetY, this._moveX = offsetX, this._moveY = offsetY, targetViewport != null ? this._viewport = targetViewport : this._viewport = this.getViewportByCoord(this._scene), this._runRenderLoop();
   }
-  _scroll(viewport) {
+  //eslint-disable-next-line complexity
+  _autoScroll(viewport) {
     const topBounding = (viewport == null ? void 0 : viewport.top) || 0, bottomBounding = topBounding + ((viewport == null ? void 0 : viewport.height) || 0), leftBounding = (viewport == null ? void 0 : viewport.left) || 0, rightBounding = leftBounding + ((viewport == null ? void 0 : viewport.width) || 0), { t = 0, b = 0, r = 0, l = 0 } = this._padding;
     let x = 0, y = 0, shouldScroll = !1;
     if (this._scrollTimerType & 1 && (this._moveX < leftBounding + l && (x = this._moveX - leftBounding - l, shouldScroll = !0), this._moveX > rightBounding - r && (x = this._moveX - rightBounding + r, shouldScroll = !0)), this._scrollTimerType & 2 && (this._moveY < topBounding + t && (y = this._moveY - topBounding - t, shouldScroll = !0), this._moveY > bottomBounding - b && (y = this._moveY - bottomBounding + b, shouldScroll = !0)), !shouldScroll)
@@ -29998,7 +30326,7 @@ const _ScrollTimer = class _ScrollTimer {
     }), viewportScrollVal = viewport == null ? void 0 : viewport.transScroll2ViewportScrollValue(x, y);
     if (this._scrollX = (viewportScrollVal == null ? void 0 : viewportScrollVal.x) || 0, this._scrollY = (viewportScrollVal == null ? void 0 : viewportScrollVal.y) || 0, limited) {
       const ancestorScene = this._findAncestorScene(viewport == null ? void 0 : viewport.scene), newViewport = this.getViewportByCoord(ancestorScene);
-      newViewport && this._scroll(newViewport);
+      newViewport && this._autoScroll(newViewport);
     }
   }
   scrolling(offsetX, offsetY, scrollFunction) {
@@ -30017,7 +30345,7 @@ const _ScrollTimer = class _ScrollTimer {
     return this._scene;
   }
   _runRenderLoop() {
-    this._scroll(this._viewport), this._scrollFunction && this._scrollFunction(this._scrollX, this._scrollY), this._requestNewFrameNumber = requestNewFrame(this._runRenderLoop.bind(this));
+    this._autoScroll(this._viewport), this._scrollFunction && this._scrollFunction(this._scrollX, this._scrollY), this._requestNewFrameNumber = requestNewFrame(this._runRenderLoop.bind(this));
   }
   _findAncestorScene(scene) {
     let parent = scene == null ? void 0 : scene.getParent();
@@ -30232,7 +30560,7 @@ const TransformerManagerTypeArray = [
       const { isCropper } = this._getConfig(applyObject), scene = this._getTopScene();
       if (!scene)
         return;
-      this._addCancelObserver(scene), scene.disableEvent();
+      this._addCancelObserver(scene), scene.disableObjectsEvent();
       const scrollTimer = ScrollTimer.create(scene);
       scrollTimer.startScroll(evtOffsetX, evtOffsetY);
       const { scrollX, scrollY } = getCurrentScrollXY(scrollTimer);
@@ -30253,7 +30581,7 @@ const TransformerManagerTypeArray = [
           this._moving(moveOffsetX, moveOffsetY, scrollTimer, isCropper);
         });
       }), scenePointerUpSub = scene.onPointerUp$.subscribeEvent((event) => {
-        scenePointerMoveSub == null || scenePointerMoveSub.unsubscribe(), scenePointerUpSub == null || scenePointerUpSub.unsubscribe(), scene.enableEvent(), !isCropper && this.refreshControls(), scrollTimer.dispose();
+        scenePointerMoveSub == null || scenePointerMoveSub.unsubscribe(), scenePointerUpSub == null || scenePointerUpSub.unsubscribe(), scene.enableObjectsEvent(), !isCropper && this.refreshControls(), scrollTimer.dispose();
         const { offsetX, offsetY } = event;
         isCropper ? this._changeEnd$.next({
           objects: /* @__PURE__ */ new Map([[applyObject.oKey, applyObject]]),
@@ -30521,7 +30849,7 @@ const TransformerManagerTypeArray = [
           const topScene = this._getTopScene(), { keepRatio, isCropper } = this._getConfig(applyObject);
           if (topScene == null)
             return;
-          topScene.disableEvent();
+          topScene.disableObjectsEvent();
           const scrollTimer = ScrollTimer.create(topScene);
           scrollTimer.startScroll(evtOffsetX, evtOffsetY);
           const { scrollX, scrollY } = getCurrentScrollXY(scrollTimer);
@@ -30552,7 +30880,7 @@ const TransformerManagerTypeArray = [
             }), topScene.setCursor(cursor);
           }), this._topScenePointerUpSub = topScene.onPointerUp$.subscribeEvent((event) => {
             var _a11, _b;
-            (_a11 = this._topScenePointerMoveSub) == null || _a11.unsubscribe(), (_b = this._topScenePointerUpSub) == null || _b.unsubscribe(), topScene.enableEvent(), topScene.resetCursor(), scrollTimer.dispose(), this._startStateMap.clear();
+            (_a11 = this._topScenePointerMoveSub) == null || _a11.unsubscribe(), (_b = this._topScenePointerUpSub) == null || _b.unsubscribe(), topScene.enableObjectsEvent(), topScene.resetCursor(), scrollTimer.dispose(), this._startStateMap.clear();
             const { offsetX, offsetY } = event;
             isCropper ? (this._recoverySizeBoundary([applyObject], ancestorLeft, ancestorTop, topSceneWidth, topSceneHeight), this._changeEnd$.next({
               objects: /* @__PURE__ */ new Map([[applyObject.oKey, applyObject]]),
@@ -30585,7 +30913,7 @@ const TransformerManagerTypeArray = [
           const topScene = this._getTopScene();
           if (topScene == null)
             return;
-          topScene.disableEvent();
+          topScene.disableObjectsEvent();
           const viewportActualXY = topScene.getVpScrollXYInfoByPosToVp(Vector2.create(evtOffsetX, evtOffsetY));
           this._viewportScrollX = viewportActualXY.x, this._viewportScrollY = viewportActualXY.y;
           const cursor = this._getRotateAnchorCursor(
@@ -30601,7 +30929,7 @@ const TransformerManagerTypeArray = [
             const { offsetX: moveOffsetX, offsetY: moveOffsetY } = moveEvt;
             this._rotateMoving(moveOffsetX, moveOffsetY, centerX, centerY, agentOrigin), topScene.setCursor(cursor);
           }), topScenePointerUpSub = topScene.onPointerUp$.subscribeEvent((event) => {
-            topScenePointerMoveSub == null || topScenePointerMoveSub.unsubscribe(), topScenePointerUpSub == null || topScenePointerUpSub.unsubscribe(), topScene.enableEvent(), topScene.resetCursor(), this.refreshControls();
+            topScenePointerMoveSub == null || topScenePointerMoveSub.unsubscribe(), topScenePointerUpSub == null || topScenePointerUpSub.unsubscribe(), topScene.enableObjectsEvent(), topScene.resetCursor(), this.refreshControls();
             const { offsetX, offsetY } = event;
             this._changeEnd$.next({
               objects: this._selectedObjectMap,
@@ -31032,188 +31360,6 @@ const TransformerManagerTypeArray = [
 };
 __name(_Transformer, "Transformer");
 let Transformer = _Transformer;
-const _InputManager = class _InputManager extends Disposable {
-  constructor(scene) {
-    super();
-    /** This is a defensive check to not allow control attachment prior to an already active one. If already attached, previous control is unattached before attaching the new one. */
-    __publicField(this, "_alreadyAttached", !1);
-    // private _alreadyAttachedTo: HTMLElement;
-    // WorkBookObserver
-    __publicField(this, "_onInput$");
-    // Pointers
-    __publicField(this, "_onPointerMove");
-    __publicField(this, "_onPointerDown");
-    __publicField(this, "_onPointerUp");
-    __publicField(this, "_onPointerOut");
-    __publicField(this, "_onPointerCancel");
-    __publicField(this, "_onPointerEnter");
-    __publicField(this, "_onPointerLeave");
-    __publicField(this, "_onMouseWheel");
-    // Keyboard
-    __publicField(this, "_onKeyDown");
-    __publicField(this, "_onKeyUp");
-    // Drag
-    __publicField(this, "_onDragEnter");
-    __publicField(this, "_onDragLeave");
-    __publicField(this, "_onDragOver");
-    __publicField(this, "_onDrop");
-    __publicField(this, "_scene");
-    __publicField(this, "_currentMouseEnterPicked");
-    __publicField(this, "_startingPosition", new Vector2(Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY));
-    __publicField(this, "_delayedTimeout", -1);
-    __publicField(this, "_delayedTripeTimeout", -1);
-    __publicField(this, "_doubleClickOccurred", 0);
-    __publicField(this, "_tripleClickState", !1);
-    __publicField(this, "_currentObject");
-    this._scene = scene;
-  }
-  /**
-   * TODO: DR-Univer, fix as unknown as
-   */
-  dispose() {
-    super.dispose(), this.detachControl(), this._scene = null, this._currentMouseEnterPicked = null, this._currentObject = null, this._startingPosition = null, clearTimeout(this._delayedTimeout), clearTimeout(this._delayedTripeTimeout), this._onPointerMove = null, this._onPointerDown = null, this._onPointerUp = null, this._onPointerEnter = null, this._onPointerLeave = null, this._onMouseWheel = null, this._onKeyDown = null, this._onKeyUp = null, this._onDragEnter = null, this._onDragLeave = null, this._onDragOver = null, this._onDrop = null;
-  }
-  // Handle events such as triggering mouseleave and mouseenter.
-  mouseLeaveEnterHandler(evt) {
-    var _a11;
-    const o = this._currentObject;
-    if (o == null)
-      (_a11 = this._currentMouseEnterPicked) == null || _a11.triggerPointerLeave(evt), this._currentMouseEnterPicked = null;
-    else if (o !== this._currentMouseEnterPicked) {
-      const previousPicked = this._currentMouseEnterPicked;
-      this._currentMouseEnterPicked = o, previousPicked == null || previousPicked.triggerPointerLeave(evt), o == null || o.triggerPointerEnter(evt);
-    }
-  }
-  // Handle events such as triggering dragleave and dragenter.
-  dragLeaveEnterHandler(evt) {
-    var _a11;
-    const o = this._currentObject;
-    if (o == null)
-      (_a11 = this._currentMouseEnterPicked) == null || _a11.triggerDragLeave(evt), this._currentMouseEnterPicked = null;
-    else if (o !== this._currentMouseEnterPicked) {
-      const previousPicked = this._currentMouseEnterPicked;
-      this._currentMouseEnterPicked = o, previousPicked == null || previousPicked.triggerDragLeave(evt), o == null || o.triggerDragEnter(evt);
-    }
-  }
-  // eslint-disable-next-line max-lines-per-function
-  attachControl(hasDown = !0, hasUp = !0, enableMove = !0, hasWheel = !0, hasEnter = !0, hasLeave = !0) {
-    const engine = this._scene.getEngine();
-    engine && (this._onPointerEnter = (evt) => {
-      var _a11;
-      evt.pointerId === void 0 && (evt.pointerId = 0), this._currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY), (_a11 = this._currentObject) == null || _a11.triggerPointerMove(evt), this.mouseLeaveEnterHandler(evt);
-    }, this._onPointerLeave = (evt) => {
-      evt.pointerId === void 0 && (evt.pointerId = 0), this._currentObject = null, this.mouseLeaveEnterHandler(evt);
-    }, this._onPointerMove = (evt) => {
-      var _a11;
-      evt.pointerId === void 0 && (evt.pointerId = 0);
-      const currentObject = this._currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerPointerMove(evt);
-      this.mouseLeaveEnterHandler(evt), this._checkDirectSceneEventTrigger(!isStop, this._currentObject) && (this._scene.onPointerMove$.emitEvent(evt), (_a11 = this._scene.getEngine()) == null || _a11.setRemainCapture());
-    }, this._onPointerDown = (evt) => {
-      evt.pointerId === void 0 && (evt.pointerId = 0);
-      const currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerPointerDown(evt);
-      this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onPointerDown$.emitEvent(evt);
-    }, this._onPointerUp = (evt) => {
-      evt.pointerId === void 0 && (evt.pointerId = 0);
-      const currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerPointerUp(evt);
-      this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onPointerUp$.emitEvent(evt), this._prePointerDoubleOrTripleClick(evt);
-    }, this._onPointerCancel = (evt) => {
-      this._scene.onPointerCancel$.emitEvent(evt);
-    }, this._onPointerOut = (evt) => {
-      this._scene.onPointerOut$.emitEvent(evt);
-    }, this._onMouseWheel = (evt) => {
-      const currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerMouseWheel(evt);
-      this._scene.getViewports().forEach((vp) => {
-        vp.onMouseWheel$.emitEvent(evt);
-      }), this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onMouseWheel$.emitEvent(evt);
-    }, this._onKeyDown = (evt) => {
-      this._scene.onKeyDown$.emitEvent(evt);
-    }, this._onKeyUp = (evt) => {
-      this._scene.onKeyUp$.emitEvent(evt);
-    }, this._onDragEnter = (evt) => {
-      var _a11;
-      this._currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY), (_a11 = this._currentObject) == null || _a11.triggerDragOver(evt), this.dragLeaveEnterHandler(evt);
-    }, this._onDragLeave = (evt) => {
-      this._currentObject = null, this.dragLeaveEnterHandler(evt);
-    }, this._onDragOver = (evt) => {
-      var _a11, _b;
-      this._currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY);
-      const isStop = (_a11 = this._currentObject) == null ? void 0 : _a11.triggerDragOver(evt);
-      this.dragLeaveEnterHandler(evt), this._checkDirectSceneEventTrigger(!isStop, this._currentObject) && (this._scene.onDragOver$.emitEvent(evt), (_b = this._scene.getEngine()) == null || _b.setRemainCapture());
-    }, this._onDrop = (evt) => {
-      const currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY), isStop = currentObject == null ? void 0 : currentObject.triggerDrop(evt);
-      this._checkDirectSceneEventTrigger(!isStop, currentObject) && this._scene.onDrop$.emitEvent(evt);
-    }, this._onInput$ = engine.onInputChanged$.subscribeEvent((eventData) => {
-      const evt = eventData;
-      if (eventData.deviceType === DeviceType.Keyboard && (eventData.currentState === 1 && this._onKeyDown(evt), eventData.currentState === 0 && this._onKeyUp(evt)), eventData.dataTransfer) {
-        enableMove && (eventData.inputIndex === PointerInput.Horizontal || eventData.inputIndex === PointerInput.Vertical || eventData.inputIndex === PointerInput.DeltaHorizontal || eventData.inputIndex === PointerInput.DeltaVertical) ? this._onDragOver(evt) : hasEnter && eventData.currentState === 4 ? this._onDragEnter(evt) : hasLeave && eventData.currentState === 5 ? this._onDragLeave(evt) : hasUp && eventData.currentState === 6 && this._onDrop(evt);
-        return;
-      }
-      if (eventData.deviceType === DeviceType.Mouse || eventData.deviceType === DeviceType.Touch)
-        switch (hasDown && eventData.inputIndex >= PointerInput.LeftClick && eventData.inputIndex <= PointerInput.RightClick && eventData.currentState === 1 && this._onPointerDown(evt), hasUp && eventData.inputIndex >= PointerInput.LeftClick && eventData.inputIndex <= PointerInput.RightClick && eventData.currentState === 0 && this._onPointerUp(evt), enableMove && eventData.type === "pointermove" ? this._onPointerMove(evt) : hasWheel && (eventData.inputIndex === PointerInput.MouseWheelX || eventData.inputIndex === PointerInput.MouseWheelY || eventData.inputIndex === PointerInput.MouseWheelZ) ? this._onMouseWheel(evt) : hasEnter && eventData.currentState === 2 ? this._onPointerEnter(evt) : hasLeave && eventData.currentState === 3 && this._onPointerLeave(evt), evt.type) {
-          case "pointerout":
-            this._onPointerOut(evt);
-            break;
-          case "pointercancel":
-            this._onPointerCancel(evt);
-            break;
-        }
-    }), this.disposeWithMe(
-      toDisposable(
-        this._onInput$
-      )
-    ), this._alreadyAttached = !0);
-  }
-  /**
-   * Detaches all event handlers
-   */
-  detachControl() {
-    var _a11;
-    !this._alreadyAttached || !this._scene.getEngine() || ((_a11 = this._onInput$) == null || _a11.unsubscribe(), this._alreadyAttached = !1);
-  }
-  _getCurrentObject(offsetX, offsetY) {
-    var _a11;
-    return (_a11 = this._scene) == null ? void 0 : _a11.pick(Vector2.FromArray([offsetX, offsetY]));
-  }
-  _checkDirectSceneEventTrigger(isTrigger, currentObject) {
-    let notObject = !1;
-    currentObject == null && (notObject = !0);
-    let isNotInSceneViewer = !0;
-    if (currentObject && currentObject.classType === RENDER_CLASS_TYPE.BASE_OBJECT) {
-      const scene = currentObject.getScene();
-      scene && (isNotInSceneViewer = scene.getParent().classType !== RENDER_CLASS_TYPE.SCENE_VIEWER);
-    }
-    return !this._scene.evented && isTrigger && isNotInSceneViewer || notObject;
-  }
-  /**
-   * @hidden
-   * @returns Boolean if delta for pointer exceeds drag movement threshold
-   */
-  _isPointerSwiping(pointerX, pointerY) {
-    return Math.abs(this._startingPosition.x - pointerX) > _InputManager.DragMovementThreshold || Math.abs(this._startingPosition.y - pointerY) > _InputManager.DragMovementThreshold;
-  }
-  _prePointerDoubleOrTripleClick(evt) {
-    var _a11, _b, _c, _d;
-    const { clientX, clientY } = evt;
-    this._isPointerSwiping(clientX, clientY) && this._resetDoubleClickParam(), this._delayedTimeout = setTimeout(() => {
-      this._resetDoubleClickParam();
-    }, _InputManager.DoubleClickDelay), this._doubleClickOccurred += 1, this._tripleClickState && ((_b = (_a11 = this._scene) == null ? void 0 : _a11.pick(Vector2.FromArray([evt.offsetX, evt.offsetY]))) == null || _b.triggerTripleClick(evt), this._scene.onTripleClick$.emitEvent(evt)), this._doubleClickOccurred === 2 && ((_d = (_c = this._scene) == null ? void 0 : _c.pick(Vector2.FromArray([evt.offsetX, evt.offsetY]))) == null || _d.triggerDblclick(evt), this._scene.onDblclick$.emitEvent(evt), this._resetDoubleClickParam(), this._tripleClickState = !0, clearTimeout(this._delayedTripeTimeout), this._delayedTripeTimeout = setTimeout(() => {
-      this._tripleClickState = !1;
-    }, _InputManager.TripleClickDelay)), this._startingPosition.x = clientX, this._startingPosition.y = clientY;
-  }
-  _resetDoubleClickParam() {
-    this._doubleClickOccurred = 0, clearTimeout(this._delayedTimeout);
-  }
-};
-__name(_InputManager, "InputManager"), /** The distance in pixel that you have to move to prevent some events */
-__publicField(_InputManager, "DragMovementThreshold", 2), // in pixels
-/** Time in milliseconds to wait to raise long press events if button is still pressed */
-__publicField(_InputManager, "LongPressDelay", 500), // in milliseconds
-/** Time in milliseconds with two consecutive clicks will be considered as a double or triple click */
-__publicField(_InputManager, "DoubleClickDelay", 500), // in milliseconds
-__publicField(_InputManager, "TripleClickDelay", 300), // in milliseconds
-/** If you need to check double click without raising a single click at first click, enable this flag */
-__publicField(_InputManager, "ExclusiveDoubleClickMode", !1);
-let InputManager = _InputManager;
 const _ThinScene = class _ThinScene extends Disposable {
   constructor(sceneKey) {
     super();
@@ -31266,7 +31412,7 @@ const _ThinScene = class _ThinScene extends Disposable {
   get sceneKey() {
     return this._sceneKey;
   }
-  get evented() {
+  get objectsEvented() {
     return this._evented;
   }
   set transform(trans) {
@@ -31284,10 +31430,15 @@ const _ThinScene = class _ThinScene extends Disposable {
   set scaleY(scaleY) {
     this._scaleY = scaleY;
   }
-  enableEvent() {
+  enableObjectsEvent() {
     this._evented = !0;
   }
-  disableEvent() {
+  /**
+   * If scene.event is disabled, scene.pick(curosrPos) return null.
+   * Then only scene itself can response to pointer event, all objects under the scene would not.
+   * see sceneInputManager@_onPointerMove
+   */
+  disableObjectsEvent() {
     this._evented = !1;
   }
   triggerKeyDown(evt) {
@@ -31518,6 +31669,11 @@ const _Scene = class _Scene extends ThinScene {
         return layer;
     return this._createDefaultLayer(zIndex);
   }
+  findLayerByZIndex(zIndex = 1) {
+    for (const layer of this.getLayers())
+      if (layer.zIndex === zIndex)
+        return layer;
+  }
   getLayerMaxZIndex() {
     let maxIndex = Number.MIN_VALUE;
     for (let i = 0; i < this._layers.length; i++) {
@@ -31694,7 +31850,7 @@ const _Scene = class _Scene extends ThinScene {
       layers[i].render(parentCtx, i === len - 1);
   }
   async requestRender(parentCtx) {
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve, _reject) => {
       this.render(parentCtx), requestNewFrame(resolve);
     });
   }
@@ -31814,15 +31970,19 @@ const _Scene = class _Scene extends ThinScene {
       viewport.dispose();
     }), viewports = [], this.clearLayer(), this.clearViewports(), this.detachControl(), (_a11 = this.onTransformChange$) == null || _a11.complete(), (_b = this._inputManager) == null || _b.dispose(), this._inputManager = null, (_c = this._transformer) == null || _c.dispose(), this._transformer = null, this.onPointerDown$.complete(), this.onPointerMove$.complete(), this.onPointerUp$.complete(), this.onPointerEnter$.complete(), this.onPointerLeave$.complete(), this.onDblclick$.complete(), this.onTripleClick$.complete(), this.onMouseWheel$.complete(), this.onKeyDown$.complete(), this.onKeyUp$.complete(), this._addObject$.complete(), super.dispose();
   }
-  // Determine the only object selected
-  pick(vec) {
-    let pickedViewport = this.getActiveViewportByCoord(vec);
-    if (pickedViewport || (pickedViewport = this._viewports[0]), !this.evented || !pickedViewport)
-      return;
-    const scrollBarRect = pickedViewport.pickScrollBar(vec);
+  /**
+   * Get the object under the pointer, if scene.event is disabled, the object is null.
+   * @param {Vector2} coord
+   * @return {Nullable<BaseObject | Scene | ThinScene>} object under the pointer
+   */
+  pick(coord) {
+    let pickedViewport = this.getActiveViewportByCoord(coord);
+    if (pickedViewport || (pickedViewport = this._viewports[0]), !this.objectsEvented || !pickedViewport)
+      return null;
+    const scrollBarRect = pickedViewport.pickScrollBar(coord);
     if (scrollBarRect)
       return scrollBarRect;
-    const vecFromSheetContent = pickedViewport.transformVector2SceneCoord(vec);
+    const vecFromSheetContent = pickedViewport.transformVector2SceneCoord(coord);
     let isPickedObject = null;
     const objectOrder = this.getAllObjectsByOrderForPick().reverse(), objectLength = objectOrder.length;
     for (let i = 0; i < objectLength; i++) {
@@ -32215,6 +32375,7 @@ function isDisposable(thing) {
   return !!thing && typeof thing.dispose == "function";
 }
 __name(isDisposable, "isDisposable");
+const PLUGIN_CONFIG_KEY = "engine-render.config", defaultPluginConfig = {};
 var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor, __decorateClass$1 = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);
@@ -32223,8 +32384,10 @@ var __defProp$1 = Object.defineProperty, __getOwnPropDesc$1 = Object.getOwnPrope
 const IRenderingEngine = createIdentifier("univer.render-engine"), PLUGIN_NAME = "RENDER_ENGINE_PLUGIN";
 var _a9;
 let UniverRenderEnginePlugin = (_a9 = class extends Plugin {
-  constructor(_config, _injector) {
-    super(), this._injector = _injector, this._injector.add([IRenderingEngine, { useFactory: /* @__PURE__ */ __name(() => new Engine(), "useFactory") }]), this._injector.add([
+  constructor(_config = defaultPluginConfig, _injector, _configService) {
+    super(), this._config = _config, this._injector = _injector, this._configService = _configService;
+    const { ...rest } = this._config;
+    this._configService.setConfig(PLUGIN_CONFIG_KEY, rest), this._injector.add([IRenderingEngine, { useFactory: /* @__PURE__ */ __name(() => new Engine(), "useFactory") }]), this._injector.add([
       IRenderManagerService,
       {
         useClass: RenderManagerService
@@ -32233,7 +32396,8 @@ let UniverRenderEnginePlugin = (_a9 = class extends Plugin {
   }
 }, __name(_a9, "UniverRenderEnginePlugin"), __publicField(_a9, "pluginName", PLUGIN_NAME), _a9);
 UniverRenderEnginePlugin = __decorateClass$1([
-  __decorateParam$1(1, Inject(Injector))
+  __decorateParam$1(1, Inject(Injector)),
+  __decorateParam$1(2, IConfigService)
 ], UniverRenderEnginePlugin);
 function subtractViewportRange(range1, range2) {
   if (range2.startRow >= range1.endRow || range2.endRow <= range1.startRow || range2.startColumn >= range1.endColumn || range2.endColumn <= range1.startColumn)
@@ -34063,7 +34227,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
         return;
     }
     const { segmentId, segmentPage } = startNode;
-    segmentId && this._currentSegmentId && segmentId !== this._currentSegmentId && this.setSegment(segmentId), segmentId && segmentPage !== this._currentSegmentPage && this.setSegmentPage(segmentPage), this._anchorNodePosition = position, evt.shiftKey && this._getActiveRangeInstance() ? this._updateActiveRangePosition(position) : !evt.ctrlKey && !this._isEmpty() && this._removeAllRanges(), scene.disableEvent();
+    segmentId && this._currentSegmentId && segmentId !== this._currentSegmentId && this.setSegment(segmentId), segmentId && segmentPage !== this._currentSegmentPage && this.setSegmentPage(segmentPage), this._anchorNodePosition = position, evt.shiftKey && this._getActiveRangeInstance() ? this._updateActiveRangePosition(position) : !evt.ctrlKey && !this._isEmpty() && this._removeAllRanges(), scene.disableObjectsEvent();
     const scrollTimer = ScrollTimer.create(scene);
     this._scrollTimers.push(scrollTimer), scrollTimer.startScroll(evtOffsetX, evtOffsetY), this._onSelectionStart$.next((_b = this._getActiveRangeInstance()) == null ? void 0 : _b.startNodePosition), (_c = scene.getTransformer()) == null || _c.clearSelectedObjects();
     let preMoveOffsetX = evtOffsetX, preMoveOffsetY = evtOffsetY;
@@ -34073,7 +34237,7 @@ let TextSelectionRenderManager = (_a10 = class extends RxDisposable {
     })), this._scenePointerUpSubs.push(scene.onPointerUp$.subscribeEvent(() => {
       if ([...this._scenePointerMoveSubs, ...this._scenePointerUpSubs].forEach((e) => {
         e.unsubscribe();
-      }), scene.enableEvent(), this._anchorNodePosition && !this._focusNodePosition) {
+      }), scene.enableObjectsEvent(), this._anchorNodePosition && !this._focusNodePosition) {
         const textRange = new TextRange(this._scene, this._document, this._docSkeleton, this._anchorNodePosition, void 0, this._selectionStyle, this._currentSegmentId);
         this._addTextRange(textRange);
       } else if (this._anchorNodePosition && this._focusNodePosition) {
@@ -34590,6 +34754,8 @@ export {
   CustomObject,
   DEFAULT_DOCUMENT_FONTSIZE,
   DEFAULT_FONTFACE_PLANE,
+  DEFAULT_FRAME_LIST_SIZE,
+  DEFAULT_FRAME_SAMPLE_SIZE,
   DEFAULT_MEASURE_TEXT,
   DEFAULT_OFFSET_SPACING,
   DEFAULT_PADDING_DATA,
@@ -34663,6 +34829,7 @@ export {
   RowHeaderLayout,
   SHAPE_OBJECT_ARRAY,
   SHAPE_TYPE,
+  SHEET_EXTENSION_PREFIX,
   SHEET_EXTENSION_TYPE,
   SHEET_VIEWPORT_KEY,
   SLIDE_NAVIGATION_KEY,
@@ -34714,6 +34881,7 @@ export {
   degToRad,
   drawDiagonalLineByBorderType,
   drawLineByBorderType,
+  expandRangeIfIntersects,
   fixLineWidthByScale,
   generateRandomKey,
   getAnchorBounding,
@@ -34782,7 +34950,6 @@ export {
   isValidRectRange,
   lineIterator,
   mergeInfoOffset,
-  mergeRangeIfIntersects,
   parseDataStreamToTree,
   pixelToPt,
   precisionTo,