@univerjs/engine-render 0.1.0-alpha.2 → 0.1.0-alpha.3

package/lib/types/base-object.d.ts

@@ -20,7 +20,7 @@ import { CURSOR_TYPE, RENDER_CLASS_TYPE } from './basics/const';
 import type { IMouseEvent, IPointerEvent, IWheelEvent } from './basics/i-events';
 import type { IObjectFullState, ITransformChangeState } from './basics/interfaces';
 import { Transform } from './basics/transform';
-import type { IBoundRect, Vector2 } from './basics/vector2';
+import type { IViewportBound, Vector2 } from './basics/vector2';
 export declare const BASE_OBJECT_ARRAY: string[];
 export declare abstract class BaseObject {
     groupKey?: string;
@@ -65,6 +65,7 @@ export declare abstract class BaseObject {
     private _cursor;
     private _isTransformer;
     private _forceRender;
+    private _layer;
     constructor(key?: string);
     get transform(): Transform;
     get topOrigin(): string | number;
@@ -94,6 +95,7 @@ export declare abstract class BaseObject {
     get debounceParentDirty(): boolean;
     get isTransformer(): boolean;
     get cursor(): CURSOR_TYPE;
+    get layer(): any;
     set transform(trans: Transform);
     set zIndex(index: number);
     set parent(o: any);
@@ -101,6 +103,7 @@ export declare abstract class BaseObject {
     set debounceParentDirty(state: boolean);
     set isTransformer(state: boolean);
     set cursor(val: CURSOR_TYPE);
+    set layer(layer: any);
     protected set top(num: number | string);
     protected set left(num: number | string);
     protected set width(num: number | string);
@@ -122,7 +125,7 @@ export declare abstract class BaseObject {
     skew(skewX?: number, skewY?: number): this;
     flip(flipX?: boolean, flipY?: boolean): this;
     transformByState(option: IObjectFullState): this | undefined;
-    isRender(bounds?: IBoundRect): boolean | undefined;
+    isRender(bounds?: IViewportBound): boolean | undefined;
     getParent(): any;
     getState(): {
         left: number;
@@ -139,13 +142,11 @@ export declare abstract class BaseObject {
     };
     hide(): void;
     show(): void;
-    render(ctx: CanvasRenderingContext2D, bounds?: IBoundRect): void;
+    render(ctx: CanvasRenderingContext2D, bounds?: IViewportBound): void;
     isHit(coord: Vector2): boolean;
     on(eventType: EVENT_TYPE, func: (evt: unknown, state: EventState) => void): Nullable<Observer<unknown>>;
     off(eventType: EVENT_TYPE, observer: Nullable<Observer<unknown>>): void;
     clear(eventType: EVENT_TYPE): void;
-    resizeCacheCanvas(): void;
-    scaleCacheCanvas(): void;
     triggerPointerMove(evt: IPointerEvent | IMouseEvent): boolean;
     triggerPointerDown(evt: IPointerEvent | IMouseEvent): boolean;
     triggerPointerUp(evt: IPointerEvent | IMouseEvent): boolean;

package/lib/types/basics/const.d.ts

@@ -13,159 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const RGB_PAREN = "rgb(";
-export declare const RGBA_PAREN = "rgba(";
-export declare const COLORS: {
-    aliceBlue: number[];
-    antiqueWhite: number[];
-    aqua: number[];
-    aquamarine: number[];
-    azure: number[];
-    beige: number[];
-    bisque: number[];
-    black: number[];
-    blancheAlmond: number[];
-    blue: number[];
-    blueViolet: number[];
-    brown: number[];
-    burlyWood: number[];
-    cadetBlue: number[];
-    chartreuse: number[];
-    chocolate: number[];
-    coral: number[];
-    cornFlowerBlue: number[];
-    cornSilk: number[];
-    crimson: number[];
-    cyan: number[];
-    darkblue: number[];
-    darkCyan: number[];
-    darkGoldenrod: number[];
-    darkGray: number[];
-    darkGreen: number[];
-    darkGrey: number[];
-    darkKhaki: number[];
-    darkMagenta: number[];
-    darkOliveGreen: number[];
-    darkOrange: number[];
-    darkOrchid: number[];
-    darkRed: number[];
-    darkSalmon: number[];
-    darkSeaGreen: number[];
-    darkSlateBlue: number[];
-    darkSlateGray: number[];
-    darkSlateGrey: number[];
-    darkTurquoise: number[];
-    darkViolet: number[];
-    deepPink: number[];
-    deepSkyBlue: number[];
-    dimGray: number[];
-    dimGrey: number[];
-    dodgerBlue: number[];
-    firebrick: number[];
-    floralWhite: number[];
-    forestGreen: number[];
-    fuchsia: number[];
-    gainsboro: number[];
-    ghostWhite: number[];
-    gold: number[];
-    goldenrod: number[];
-    gray: number[];
-    green: number[];
-    greenYellow: number[];
-    grey: number[];
-    honeydew: number[];
-    hotPink: number[];
-    indianRed: number[];
-    indigo: number[];
-    ivory: number[];
-    khaki: number[];
-    lavender: number[];
-    lavenderBlush: number[];
-    lawnGreen: number[];
-    lemonChiffon: number[];
-    lightblue: number[];
-    lightCoral: number[];
-    lightCyan: number[];
-    lightGoldenrodYellow: number[];
-    lightGray: number[];
-    lightGreen: number[];
-    lightGrey: number[];
-    lightPink: number[];
-    lightSalmon: number[];
-    lightSeaGreen: number[];
-    lightSkyBlue: number[];
-    lightSlateGray: number[];
-    lightSlateGrey: number[];
-    lightSteelBlue: number[];
-    lightYellow: number[];
-    lime: number[];
-    limeGreen: number[];
-    linen: number[];
-    magenta: number[];
-    maroon: number[];
-    mediumAquamarine: number[];
-    mediumBlue: number[];
-    mediumOrchid: number[];
-    mediumPurple: number[];
-    mediumSeaGreen: number[];
-    mediumSlateBlue: number[];
-    mediumSpringGreen: number[];
-    mediumTurquoise: number[];
-    mediumVioletRed: number[];
-    midBightBlue: number[];
-    mintCream: number[];
-    mistyRose: number[];
-    moccasin: number[];
-    navajoWhite: number[];
-    navy: number[];
-    oldLace: number[];
-    olive: number[];
-    oliveDrab: number[];
-    orange: number[];
-    orangeRed: number[];
-    orchid: number[];
-    paleGoldenrod: number[];
-    paleGreen: number[];
-    paleTurquoise: number[];
-    paleVioletRed: number[];
-    papayaWhip: number[];
-    peachPuff: number[];
-    peru: number[];
-    pink: number[];
-    plum: number[];
-    powderBlue: number[];
-    purple: number[];
-    rebeccaPurple: number[];
-    red: number[];
-    rosyBrown: number[];
-    royalBlue: number[];
-    saddleBrown: number[];
-    salmon: number[];
-    sandyBrown: number[];
-    seaGreen: number[];
-    seashell: number[];
-    sienna: number[];
-    silver: number[];
-    skyBlue: number[];
-    slateBlue: number[];
-    slateGray: number[];
-    slateGrey: number[];
-    snow: number[];
-    springGreen: number[];
-    steelBlue: number[];
-    tan: number[];
-    teal: number[];
-    thistle: number[];
-    transparent: number[];
-    tomato: number[];
-    turquoise: number[];
-    violet: number[];
-    wheat: number[];
-    white: number[];
-    whiteSmoke: number[];
-    yellow: number[];
-    yellowGreen: number[];
-};
 export declare enum SHAPE_TYPE {
     RECT = "rect",
     CIRCLE = "circle",
@@ -275,3 +122,4 @@ export declare enum RENDER_CLASS_TYPE {
 }
 export declare const DEFAULT_SELECTION_LAYER_INDEX = 1000;
 export declare const MAXIMUM_ROW_HEIGHT = 2000;
+export declare const FIX_ONE_PIXEL_BLUR_OFFSET = 0.5;

package/lib/types/basics/range.d.ts

@@ -24,6 +24,11 @@ export declare const NORMAL_TEXT_SELECTION_PLUGIN_STYLE: ITextSelectionStyle;
 export interface ITextRangeWithStyle extends ITextRangeParam {
     style?: ITextSelectionStyle;
 }
+export interface ISuccinctTextRangeParam {
+    startOffset: number;
+    endOffset: number;
+    style?: ITextSelectionStyle;
+}
 export declare enum RANGE_DIRECTION {
     NONE = "none",
     BACKWARD = "backward",

package/lib/types/basics/tools.d.ts

@@ -51,6 +51,7 @@ export declare function isNumber(value?: unknown): value is number;
 export declare function isObject(value?: unknown): value is object;
 export declare function precisionTo(num: number, accurate: number): number;
 /**
+ * When drawing lines, it is necessary to align their precision.
  * performance testing
  * var time = performance.now(); for(let i=0;i<100000000;i++){ fixLineWidthByScale(i, 0.666); }; console.log(performance.now()-time);
  */
@@ -73,7 +74,7 @@ export declare const EMOJI_REG: RegExp;
 export declare function startWithEmoji(text: string): boolean;
 export declare function hasArabic(text: string): boolean;
 export declare function hasTibetan(text: string): boolean;
-export declare function hasSpaceAndTab(text: string): boolean;
+export declare function hasSpace(text: string): boolean;
 export declare function getDPI(): number;
 export declare function ptToPx(pt: number): number;
 export declare function pxToPt(px: number): number;
@@ -100,13 +101,13 @@ export declare function mergeInfoOffset(mergeInfo: IRangeWithCoord, offsetX: num
     startY: number;
     endX: number;
     endY: number;
-    startRow: number;
     startColumn: number;
-    endRow: number;
     endColumn: number;
     rangeType?: import("@univerjs/core").RANGE_TYPE | undefined;
     startAbsoluteRefType?: import("@univerjs/core").AbsoluteRefType | undefined;
     endAbsoluteRefType?: import("@univerjs/core").AbsoluteRefType | undefined;
+    startRow: number;
+    endRow: number;
 };
 export declare function isRectIntersect(rect1: IBoundRectNoAngle, rect2: IBoundRectNoAngle): boolean;
 export declare function injectStyle(styles: string[]): void;

package/lib/types/basics/vector2.d.ts

@@ -450,3 +450,11 @@ export interface IBoundRectNoAngle {
     right: number;
     bottom: number;
 }
+export interface IViewportBound {
+    viewBound: IBoundRectNoAngle;
+    diffBounds: IBoundRectNoAngle[];
+    diffX: number;
+    diffY: number;
+    viewPortPosition: IBoundRectNoAngle;
+    viewPortKey?: string;
+}

package/lib/types/components/component.d.ts

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 import { BaseObject } from '../base-object';
-import type { IBoundRect } from '../basics/vector2';
+import type { IViewportBound } from '../basics/vector2';
 import type { ComponentExtension } from './extension';
-export declare class RenderComponent<T, U> extends BaseObject {
+export declare class RenderComponent<T, U, V> extends BaseObject {
     private _extensions;
-    get extensions(): Map<string, ComponentExtension<T, U>>;
-    register(...extensions: Array<ComponentExtension<T, U>>): void;
+    get extensions(): Map<string, ComponentExtension<T, U, V>>;
+    register(...extensions: Array<ComponentExtension<T, U, V>>): void;
     unRegister(...uKeys: string[]): void;
-    getExtensionsByOrder(): ComponentExtension<T, U>[];
-    getExtensionByKey(uKey: string): ComponentExtension<T, U> | undefined;
-    draw(ctx: CanvasRenderingContext2D, bounds?: IBoundRect): void;
+    getExtensionsByOrder(): ComponentExtension<T, U, V>[];
+    getExtensionByKey(uKey: string): ComponentExtension<T, U, V> | undefined;
+    draw(ctx: CanvasRenderingContext2D, bounds?: IViewportBound): void;
 }

package/lib/types/components/docs/block/paragraph/bullet.d.ts

@@ -15,5 +15,5 @@
  */
 import type { IBullet, ILists, LocaleService, Nullable } from '@univerjs/core';
 import type { IDocumentSkeletonBullet } from '../../../../basics/i-document-skeleton-cached';
-export declare function dealWidthBullet(bullet?: IBullet, lists?: ILists, listLevelAncestors?: Array<Nullable<IDocumentSkeletonBullet>>, localeService?: LocaleService): IDocumentSkeletonBullet | undefined;
+export declare function dealWithBullet(bullet?: IBullet, lists?: ILists, listLevelAncestors?: Array<Nullable<IDocumentSkeletonBullet>>, localeService?: LocaleService): IDocumentSkeletonBullet | undefined;
 export declare function getDefaultBulletSke(listId: string, startIndex?: number): IDocumentSkeletonBullet;

package/lib/types/components/docs/block/paragraph/language-ruler.d.ts

@@ -13,14 +13,23 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IParagraphStyle, Nullable } from '@univerjs/core';
-import type { IDocumentSkeletonSpan } from '../../../../basics/i-document-skeleton-cached';
+import type { IParagraphStyle } from '@univerjs/core';
 import type { ISectionBreakConfig } from '../../../../basics/interfaces';
 import type { DataStreamTreeNode } from '../../view-model/data-stream-tree-node';
 import type { DocumentViewModel } from '../../view-model/document-view-model';
-interface ILanguageResult {
-    charIndex: number;
-    spanGroup: IDocumentSkeletonSpan[];
-}
-export declare function composeCharForLanguage(char: string, index: number, charArray: string, bodyModel: DocumentViewModel, paragraphNode: DataStreamTreeNode, sectionBreakConfig: ISectionBreakConfig, paragraphStyle: IParagraphStyle): Nullable<ILanguageResult>;
-export {};
+export declare function otherHandler(index: number, charArray: string, bodyModel: DocumentViewModel, paragraphNode: DataStreamTreeNode, sectionBreakConfig: ISectionBreakConfig, paragraphStyle: IParagraphStyle): {
+    step: number;
+    spanGroup: import("../../../..").IDocumentSkeletonSpan[];
+};
+export declare function ArabicHandler(index: number, charArray: string, bodyModel: DocumentViewModel, paragraphNode: DataStreamTreeNode, sectionBreakConfig: ISectionBreakConfig, paragraphStyle: IParagraphStyle): {
+    step: number;
+    spanGroup: import("../../../..").IDocumentSkeletonSpan[];
+};
+export declare function emojiHandler(index: number, charArray: string, bodyModel: DocumentViewModel, paragraphNode: DataStreamTreeNode, sectionBreakConfig: ISectionBreakConfig, paragraphStyle: IParagraphStyle): {
+    step: number;
+    spanGroup: import("../../../..").IDocumentSkeletonSpan[];
+};
+export declare function TibetanHandler(index: number, charArray: string, bodyModel: DocumentViewModel, paragraphNode: DataStreamTreeNode, sectionBreakConfig: ISectionBreakConfig, paragraphStyle: IParagraphStyle): {
+    step: number;
+    spanGroup: import("../../../..").IDocumentSkeletonSpan[];
+};

package/lib/types/components/docs/common/range.d.ts

@@ -15,14 +15,14 @@
  */
 import type { Nullable } from '@univerjs/core';
 import type { INodePosition } from '../../../basics/interfaces';
-import type { ITextRangeWithStyle, ITextSelectionStyle } from '../../../basics/range';
+import type { ISuccinctTextRangeParam, ITextSelectionStyle } from '../../../basics/range';
 import { RANGE_DIRECTION } from '../../../basics/range';
 import type { Scene } from '../../../scene';
 import { Rect } from '../../../shape/rect';
 import type { ThinScene } from '../../../thin-scene';
 import type { DocumentSkeleton } from '../doc-skeleton';
 import type { IDocumentOffsetConfig } from '../document';
-export declare function cursorConvertToTextRange(scene: Scene, range: ITextRangeWithStyle, docSkeleton: DocumentSkeleton, documentOffsetConfig: IDocumentOffsetConfig): Nullable<TextRange>;
+export declare function cursorConvertToTextRange(scene: Scene, range: ISuccinctTextRangeParam, docSkeleton: DocumentSkeleton, documentOffsetConfig: IDocumentOffsetConfig): Nullable<TextRange>;
 export declare class TextRange {
     private _scene;
     private _documentOffsetConfig;

package/lib/types/components/docs/doc-component.d.ts

@@ -17,23 +17,19 @@ import type { Nullable } from '@univerjs/core';
 import type { IDocumentSkeletonLine, IDocumentSkeletonSpan } from '../../basics/i-document-skeleton-cached';
 import { PageLayoutType } from '../../basics/i-document-skeleton-cached';
 import type { INodeInfo } from '../../basics/interfaces';
-import type { IBoundRect } from '../../basics/vector2';
-import { Canvas } from '../../canvas';
+import type { IBoundRectNoAngle, IViewportBound } from '../../basics/vector2';
 import { RenderComponent } from '../component';
 import type { DOCS_EXTENSION_TYPE } from './doc-extension';
 import type { DocumentSkeleton } from './doc-skeleton';
-export declare class DocComponent extends RenderComponent<IDocumentSkeletonSpan | IDocumentSkeletonLine, DOCS_EXTENSION_TYPE> {
+export declare class DocComponent extends RenderComponent<IDocumentSkeletonSpan | IDocumentSkeletonLine, DOCS_EXTENSION_TYPE, IBoundRectNoAngle[]> {
     private _skeleton?;
-    private _allowCache;
     pageMarginLeft: number;
     pageMarginTop: number;
     pageLayoutType: PageLayoutType;
-    protected _cacheCanvas: Nullable<Canvas>;
-    constructor(oKey: string, _skeleton?: DocumentSkeleton | undefined, _allowCache?: boolean);
-    setAllowCache(state?: boolean): void;
+    constructor(oKey: string, _skeleton?: DocumentSkeleton | undefined);
     getSkeleton(): DocumentSkeleton | undefined;
     setSkeleton(skeleton: DocumentSkeleton): void;
-    render(mainCtx: CanvasRenderingContext2D, bounds?: IBoundRect): this | undefined;
+    render(mainCtx: CanvasRenderingContext2D, bounds?: IViewportBound): this | undefined;
     getParentScale(): {
         scaleX: any;
         scaleY: any;
@@ -43,6 +39,6 @@ export declare class DocComponent extends RenderComponent<IDocumentSkeletonSpan
     remainActiveSelection(): void;
     findNodeByCoord(offsetX: number, offsetY: number): Nullable<INodeInfo>;
     findCoordByNode(span: IDocumentSkeletonSpan): void;
-    protected _getBounding(bounds?: IBoundRect): void;
-    protected _draw(ctx: CanvasRenderingContext2D, bounds?: IBoundRect): void;
+    protected _getBounding(bounds?: IViewportBound): void;
+    protected _draw(ctx: CanvasRenderingContext2D, bounds?: IViewportBound): void;
 }

package/lib/types/components/docs/doc-extension.d.ts

@@ -13,13 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { IBoundRectNoAngle } from '../..';
 import type { IDocumentSkeletonLine, IDocumentSkeletonSpan } from '../../basics/i-document-skeleton-cached';
 import { ComponentExtension } from '../extension';
 export declare enum DOCS_EXTENSION_TYPE {
     SPAN = 0,
     LINE = 1
 }
-export declare class docExtension extends ComponentExtension<IDocumentSkeletonSpan | IDocumentSkeletonLine, DOCS_EXTENSION_TYPE> {
+export declare class docExtension extends ComponentExtension<IDocumentSkeletonSpan | IDocumentSkeletonLine, DOCS_EXTENSION_TYPE, IBoundRectNoAngle> {
     type: DOCS_EXTENSION_TYPE;
     translateX: number;
     translateY: number;

package/lib/types/components/docs/doc-skeleton.d.ts

@@ -17,7 +17,7 @@ import type { LocaleService, Nullable } from '@univerjs/core';
 import type { IDocumentSkeletonCached, IDocumentSkeletonSpan } from '../../basics/i-document-skeleton-cached';
 import { PageLayoutType } from '../../basics/i-document-skeleton-cached';
 import type { INodeInfo, INodePosition, INodeSearch } from '../../basics/interfaces';
-import type { IBoundRect, Vector2 } from '../../basics/vector2';
+import type { IViewportBound, Vector2 } from '../../basics/vector2';
 import { Skeleton } from '../skeleton';
 import type { DocumentViewModel } from './view-model/document-view-model';
 export declare enum DocumentSkeletonState {
@@ -34,7 +34,7 @@ export declare class DocumentSkeleton extends Skeleton {
     constructor(_docViewModel: DocumentViewModel, localeService: LocaleService);
     static create(docViewModel: DocumentViewModel, localeService: LocaleService): DocumentSkeleton;
     getViewModel(): DocumentViewModel;
-    calculate(bounds?: IBoundRect): void;
+    calculate(bounds?: IViewportBound): void;
     getSkeletonData(): Nullable<IDocumentSkeletonCached>;
     getActualSize(): {
         actualWidth: number;

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

@@ -18,7 +18,7 @@ import { Observable } from '@univerjs/core';
 import type { IDocumentSkeletonPage } from '../../basics/i-document-skeleton-cached';
 import { PageLayoutType } from '../../basics/i-document-skeleton-cached';
 import type { Transform } from '../../basics/transform';
-import type { IBoundRect } from '../../basics/vector2';
+import type { IViewportBound } from '../../basics/vector2';
 import type { Scene } from '../../scene';
 import { DocComponent } from './doc-component';
 import type { DocumentSkeleton } from './doc-skeleton';
@@ -28,7 +28,6 @@ interface IPageMarginLayout {
     pageLayoutType?: PageLayoutType;
 }
 export interface IDocumentsConfig extends IPageMarginLayout {
-    allowCache?: boolean;
     hasEditor?: boolean;
 }
 export interface IPageRenderConfig {
@@ -54,9 +53,9 @@ export declare class Documents extends DocComponent {
     setConfig(config?: IDocumentsConfig): void;
     getOffsetConfig(): IDocumentOffsetConfig;
     getEngine(): Nullable<import("../../thin-engine").ThinEngine<Scene>>;
-    draw(ctx: CanvasRenderingContext2D, bounds?: IBoundRect): void;
+    draw(ctx: CanvasRenderingContext2D, bounds?: IViewportBound): void;
     changeSkeleton(newSkeleton: DocumentSkeleton): this;
-    protected _draw(ctx: CanvasRenderingContext2D, bounds?: IBoundRect): void;
+    protected _draw(ctx: CanvasRenderingContext2D, bounds?: IViewportBound): void;
     private _horizontalHandler;
     private _verticalHandler;
     private _startRotation;

package/lib/types/components/docs/text-selection-render-manager.d.ts

@@ -18,7 +18,7 @@ import { RxDisposable } from '@univerjs/core';
 import type { Observable } from 'rxjs';
 import type { IMouseEvent, IPointerEvent } from '../../basics/i-events';
 import type { INodePosition } from '../../basics/interfaces';
-import type { ITextRangeWithStyle, ITextSelectionStyle, RANGE_DIRECTION } from '../../basics/range';
+import type { ISuccinctTextRangeParam, ITextRangeWithStyle, ITextSelectionStyle, RANGE_DIRECTION } from '../../basics/range';
 import type { Engine } from '../../engine';
 import type { Scene } from '../../scene';
 import type { Viewport } from '../../viewport';
@@ -34,6 +34,21 @@ interface IAddTextRangesConfig {
     skeleton: DocumentSkeleton;
     documentOffsetConfig: IDocumentOffsetConfig;
 }
+export interface ITextSelectionInnerParam {
+    textRanges: TextRange[];
+    segmentId: string;
+    style: ITextSelectionStyle;
+}
+export interface IActiveTextRange {
+    startOffset: number;
+    endOffset: number;
+    collapsed: boolean;
+    startNodePosition: Nullable<INodePosition>;
+    endNodePosition: Nullable<INodePosition>;
+    direction: RANGE_DIRECTION;
+    segmentId: string;
+    style: ITextSelectionStyle;
+}
 export interface ITextSelectionRenderManager {
     readonly onInputBefore$: Observable<Nullable<IEditorInputConfig>>;
     readonly onKeydown$: Observable<Nullable<IEditorInputConfig>>;
@@ -43,16 +58,16 @@ export interface ITextSelectionRenderManager {
     readonly onCompositionend$: Observable<Nullable<IEditorInputConfig>>;
     readonly onSelectionStart$: Observable<Nullable<INodePosition>>;
     readonly onPaste$: Observable<Nullable<IEditorInputConfig>>;
-    readonly textSelection$: Observable<TextRange[]>;
+    readonly textSelectionInner$: Observable<Nullable<ITextSelectionInnerParam>>;
+    __getEditorContainer(): HTMLElement;
     getViewPort(): Viewport;
     enableSelection(): void;
     disableSelection(): void;
     setSegment(id: string): void;
     setStyle(style: ITextSelectionStyle): void;
     resetStyle(): void;
-    getAllTextRanges(): TextRange[];
     removeAllTextRanges(): void;
-    addTextRanges(ranges: ITextRangeWithStyle[], config?: IAddTextRangesConfig): void;
+    addTextRanges(ranges: ISuccinctTextRangeParam[], config?: IAddTextRangesConfig): void;
     sync(): void;
     activate(x: number, y: number): void;
     focus(): void;
@@ -60,11 +75,6 @@ export interface ITextSelectionRenderManager {
     deactivate(): void;
     changeRuntime(docSkeleton: DocumentSkeleton, scene: Scene, viewport?: Nullable<Viewport>, documentOffsetConfig?: IDocumentOffsetConfig): void;
     dispose(): void;
-    getActiveRange(): Nullable<ITextRangeWithStyle & {
-        startNodePosition: Nullable<INodePosition>;
-        endNodePosition: Nullable<INodePosition>;
-        direction: RANGE_DIRECTION;
-    }>;
     handleDblClick(evt: IPointerEvent | IMouseEvent, documentOffsetConfig: IDocumentOffsetConfig, viewport: Nullable<Viewport>): void;
     handleTripleClick(evt: IPointerEvent | IMouseEvent, documentOffsetConfig: IDocumentOffsetConfig, viewport: Nullable<Viewport>): void;
     eventTrigger(evt: IPointerEvent | IMouseEvent, documentOffsetConfig: IDocumentOffsetConfig, viewport: Nullable<Viewport>): void;
@@ -94,8 +104,8 @@ export declare class TextSelectionRenderManager extends RxDisposable implements
     readonly onSelectionStart$: Observable<Nullable<INodePosition>>;
     private readonly _onPaste$;
     readonly onPaste$: Observable<Nullable<IEditorInputConfig>>;
-    private readonly _textSelection$;
-    readonly textSelection$: Observable<TextRange[]>;
+    private readonly _textSelectionInner$;
+    readonly textSelectionInner$: Observable<Nullable<ITextSelectionInnerParam>>;
     private _container;
     private _inputParent;
     private _input;
@@ -113,24 +123,14 @@ export declare class TextSelectionRenderManager extends RxDisposable implements
     private _isIMEInputApply;
     private _activeViewport;
     constructor(_docSkeleton?: Nullable<DocumentSkeleton>, _scene?: Nullable<Scene>, viewport?: Nullable<Viewport>);
+    __getEditorContainer(): HTMLElement;
     getViewPort(): Viewport;
     setSegment(id: string): void;
     setStyle(style?: ITextSelectionStyle): void;
     resetStyle(): void;
     enableSelection(): void;
     disableSelection(): void;
-    getActiveRange(): {
-        startOffset: number;
-        endOffset: number;
-        collapsed: boolean;
-        startNodePosition: INodePosition | null;
-        endNodePosition: Nullable<INodePosition>;
-        direction: RANGE_DIRECTION;
-        segmentId: string;
-        style: ITextSelectionStyle;
-    } | null;
-    getAllTextRanges(): TextRange[];
-    addTextRanges(ranges: ITextRangeWithStyle[], config?: IAddTextRangesConfig): void;
+    addTextRanges(ranges: ISuccinctTextRangeParam[]): void;
     sync(): void;
     activate(x: number, y: number): void;
     focus(): void;
@@ -141,6 +141,8 @@ export declare class TextSelectionRenderManager extends RxDisposable implements
     handleTripleClick(evt: IPointerEvent | IMouseEvent, documentOffsetConfig: IDocumentOffsetConfig, viewportMain: Nullable<Viewport>): void;
     eventTrigger(evt: IPointerEvent | IMouseEvent, documentOffsetConfig: IDocumentOffsetConfig, viewportMain: Nullable<Viewport>): void;
     removeAllTextRanges(): void;
+    private _getAllTextRanges;
+    private _getActiveRange;
     private _add;
     private _getActiveRangeInstance;
     dispose(): void;
@@ -156,7 +158,7 @@ export declare class TextSelectionRenderManager extends RxDisposable implements
     private _isEmpty;
     private _getCanvasOffset;
     private _scrollToSelection;
-    private _syncDomToSelection;
+    private _updateDomCursorPositionAndSize;
     private _moving;
     private _attachScrollEvent;
     private _initInputEvents;

package/lib/types/components/extension.d.ts

@@ -25,7 +25,7 @@ export interface IExtensionConfig {
     alignOffset?: Vector2;
     renderConfig?: IDocumentRenderConfig;
 }
-export declare class ComponentExtension<T, U> {
+export declare class ComponentExtension<T, U, V> {
     uKey: string;
     type: U;
     zIndex: number;
@@ -33,7 +33,7 @@ export declare class ComponentExtension<T, U> {
     translateX: number;
     translateY: number;
     extensionOffset: IExtensionConfig;
-    draw(ctx: CanvasRenderingContext2D, parentScale: IScale, skeleton: T): void;
+    draw(ctx: CanvasRenderingContext2D, parentScale: IScale, skeleton: T, diffBounds?: V): void;
     clearCache(): void;
     protected _getScale(parentScale: IScale): number;
 }

package/lib/types/components/sheets/column-header.d.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IBoundRect, Vector2 } from '../../basics/vector2';
+import type { IViewportBound, Vector2 } from '../../basics/vector2';
 import type { ColumnHeaderLayout } from './extensions/column-header-layout';
 import { SpreadsheetHeader } from './sheet-component';
 import type { SpreadsheetSkeleton } from './sheet-skeleton';
@@ -21,7 +21,7 @@ export declare class SpreadsheetColumnHeader extends SpreadsheetHeader {
     private _columnHeaderLayoutExtension;
     constructor(oKey: string, spreadsheetSkeleton?: SpreadsheetSkeleton);
     get columnHeaderLayoutExtension(): ColumnHeaderLayout;
-    draw(ctx: CanvasRenderingContext2D, bounds?: IBoundRect): void;
+    draw(ctx: CanvasRenderingContext2D, bounds?: IViewportBound): void;
     isHit(coord: Vector2): boolean;
     private _initialDefaultExtension;
 }

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

@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IScale } from '@univerjs/core';
+import type { IRange, IScale } from '@univerjs/core';
 import type { SpreadsheetSkeleton } from '../sheet-skeleton';
 import { SheetExtension } from './sheet-extension';
 export declare class Background extends SheetExtension {
     uKey: string;
     zIndex: number;
-    draw(ctx: CanvasRenderingContext2D, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton): void;
+    draw(ctx: CanvasRenderingContext2D, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton, diffRanges?: IRange[]): void;
 }

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

@@ -13,12 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { IScale } from '@univerjs/core';
+import type { IRange, IScale } from '@univerjs/core';
 import type { SpreadsheetSkeleton } from '../sheet-skeleton';
 import { SheetExtension } from './sheet-extension';
 export declare class Border extends SheetExtension {
     uKey: string;
     zIndex: number;
-    draw(ctx: CanvasRenderingContext2D, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton): void;
+    draw(ctx: CanvasRenderingContext2D, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton, diffRanges?: IRange[]): void;
     private _getOverflowExclusion;
 }