@univerjs/engine-render 0.1.15 → 0.1.17

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

@@ -1,5 +1,5 @@
-import { EventState, IKeyValue, ITransformState, Nullable, Observer, Disposable, Observable } from '@univerjs/core';
-import { EVENT_TYPE, CURSOR_TYPE, RENDER_CLASS_TYPE } from './basics/const';
+import { IKeyValue, ITransformState, Nullable, Disposable, EventSubject } from '@univerjs/core';
+import { CURSOR_TYPE, RENDER_CLASS_TYPE } from './basics/const';
 import { IDragEvent, IMouseEvent, IPointerEvent, IWheelEvent } from './basics/i-events';
 import { IObjectFullState, ITransformChangeState } from './basics/interfaces';
 import { Transform } from './basics/transform';
@@ -12,23 +12,23 @@ export declare const BASE_OBJECT_ARRAY: string[];
 export declare abstract class BaseObject extends Disposable {
     groupKey?: string;
     isInGroup: boolean;
-    onTransformChangeObservable: Observable<ITransformChangeState>;
-    onPointerDownObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerMoveObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerUpObserver: Observable<IMouseEvent | IPointerEvent>;
-    onDblclickObserver: Observable<IMouseEvent | IPointerEvent>;
-    onTripleClickObserver: Observable<IMouseEvent | IPointerEvent>;
-    onMouseWheelObserver: Observable<IWheelEvent>;
-    onPointerOutObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerLeaveObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerOverObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerEnterObserver: Observable<IMouseEvent | IPointerEvent>;
-    onDragLeaveObserver: Observable<IMouseEvent | IDragEvent>;
-    onDragOverObserver: Observable<IMouseEvent | IDragEvent>;
-    onDragEnterObserver: Observable<IMouseEvent | IDragEvent>;
-    onDropObserver: Observable<IMouseEvent | IDragEvent>;
-    onIsAddedToParentObserver: Observable<any>;
-    onDisposeObserver: Observable<BaseObject>;
+    onTransformChange$: EventSubject<ITransformChangeState>;
+    onPointerDown$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerMove$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerUp$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerOut$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerOver$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerLeave$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerEnter$: EventSubject<IMouseEvent | IPointerEvent>;
+    onDblclick$: EventSubject<IMouseEvent | IPointerEvent>;
+    onTripleClick$: EventSubject<IMouseEvent | IPointerEvent>;
+    onMouseWheel$: EventSubject<IWheelEvent>;
+    onDragLeave$: EventSubject<IMouseEvent | IDragEvent>;
+    onDragOver$: EventSubject<IMouseEvent | IDragEvent>;
+    onDragEnter$: EventSubject<IMouseEvent | IDragEvent>;
+    onDrop$: EventSubject<IMouseEvent | IDragEvent>;
+    onIsAddedToParent$: EventSubject<any>;
+    onDispose$: EventSubject<BaseObject>;
     protected _oKey: string;
     protected _dirty: boolean;
     protected _forceDirty: boolean;
@@ -131,11 +131,8 @@ export declare abstract class BaseObject extends Disposable {
     getState(): ITransformState;
     hide(): void;
     show(): void;
-    render(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
+    render(ctx: UniverRenderingContext, bounds: IViewportInfo): 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;
     triggerPointerMove(evt: IPointerEvent | IMouseEvent): boolean;
     triggerPointerDown(evt: IPointerEvent | IMouseEvent): boolean;
     triggerPointerUp(evt: IPointerEvent | IMouseEvent): boolean;

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

@@ -18,18 +18,6 @@ export declare enum SHAPE_TYPE {
     CIRCLE = "circle",
     PATH = "path"
 }
-export declare enum EVENT_TYPE {
-    PointerMove = "PointerMove",
-    PointerDown = "PointerDown",
-    PointerUp = "PointerUp",
-    PointerOut = "PointerOut",
-    PointerLeave = "PointerLeave",
-    PointerOver = "PointerOver",
-    PointerEnter = "PointerEnter",
-    wheel = "MouseWheel",
-    KeyDown = "KeyDown",
-    KeyUp = "KeyUp"
-}
 export declare enum LINK_VIEW_PORT_TYPE {
     XY = 0,
     X = 1,

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

@@ -434,10 +434,6 @@ export interface IBoundRect {
     dy: number;
 }
 export interface IBoundRectNoAngle {
-    /**
-     * 冻结区域相对 MainCanvas 的物理位置,
-     * left = n * colWidth + rowHeaderWidth
-     */
     left: number;
     top: number;
     right: number;

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

@@ -1,4 +1,4 @@
-import { Nullable, Observable } from '@univerjs/core';
+import { Nullable } from '@univerjs/core';
 import { IDocumentSkeletonPage } from '../../basics/i-document-skeleton-cached';
 import { Transform } from '../../basics/transform';
 import { IViewportInfo } from '../../basics/vector2';
@@ -19,11 +19,11 @@ export interface IDocumentOffsetConfig extends IPageMarginLayout {
     documentTransform: Transform;
 }
 export declare class Documents extends DocComponent {
-    onPageRenderObservable: Observable<IPageRenderConfig>;
+    private readonly _pageRender$;
+    readonly pageRender$: import('rxjs').Observable<IPageRenderConfig>;
     docsLeft: number;
     docsTop: number;
     private _drawLiquid;
-    private _skeletonObserver;
     constructor(oKey: string, documentSkeleton?: DocumentSkeleton, config?: IDocumentsConfig);
     static create(oKey: string, documentSkeleton?: DocumentSkeleton, config?: IDocumentsConfig): Documents;
     dispose(): void;

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

@@ -97,11 +97,7 @@ export declare class TextSelectionRenderManager extends RxDisposable implements
     private _container;
     private _inputParent;
     private _input;
-    private _moveObservers;
-    private _upObservers;
     private _scrollTimers;
-    private _viewportScrollX;
-    private _viewportScrollY;
     private _rangeList;
     private _currentSegmentId;
     private _selectionStyle;
@@ -112,6 +108,8 @@ export declare class TextSelectionRenderManager extends RxDisposable implements
     private _docSkeleton;
     private _scene;
     private _document;
+    private _scenePointerMoveSubs;
+    private _scenePointerUpSubs;
     constructor(_logService: ILogService);
     __getEditorContainer(): HTMLElement;
     getViewPort(): Viewport;

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

@@ -1,7 +1,7 @@
 import { Nullable } from '@univerjs/core';
 import { IViewportInfo, Vector2 } from '../../basics/vector2';
 import { UniverRenderingContext } from '../../context';
-import { ColumnHeaderLayout } from './extensions/column-header-layout';
+import { ColumnHeaderLayout, IColumnsHeaderCfgParam } from './extensions/column-header-layout';
 import { SpreadsheetHeader } from './sheet-component';
 import { SpreadsheetSkeleton } from './sheet-skeleton';
 
@@ -25,4 +25,5 @@ export declare class SpreadsheetColumnHeader extends SpreadsheetHeader {
     draw(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
     isHit(coord: Vector2): boolean;
     private _initialDefaultExtension;
+    setCustomHeader(cfg: IColumnsHeaderCfgParam): void;
 }

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

@@ -1,10 +1,21 @@
 import { IScale } from '@univerjs/core';
 import { UniverRenderingContext } from '../../../context';
 import { SpreadsheetSkeleton } from '../sheet-skeleton';
+import { IAColumnCfg, IAColumnCfgObj, IColumnStyleCfg } from '../interfaces';
 import { SheetExtension } from './sheet-extension';
 
+export interface IColumnsHeaderCfgParam {
+    headerStyle?: Partial<IColumnStyleCfg>;
+    columnsCfg?: IAColumnCfg[];
+}
 export declare class ColumnHeaderLayout extends SheetExtension {
     uKey: string;
     Z_INDEX: number;
+    columnsCfg: IAColumnCfg[];
+    headerStyle: IColumnStyleCfg;
+    constructor(cfg?: IColumnsHeaderCfgParam);
+    configHeaderColumn(cfg: IColumnsHeaderCfgParam): void;
+    getCfgOfCurrentColumn(colIndex: number): [IAColumnCfgObj, boolean];
+    setStyleToCtx(ctx: UniverRenderingContext, columnStyle: Partial<IColumnStyleCfg>): void;
     draw(ctx: UniverRenderingContext, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton): void;
 }

package/lib/types/components/sheets/extensions/row-header-layout.d.ts

@@ -1,10 +1,21 @@
 import { IScale } from '@univerjs/core';
 import { UniverRenderingContext } from '../../../context';
 import { SpreadsheetSkeleton } from '../sheet-skeleton';
+import { IARowCfg, IARowCfgObj, IColumnStyleCfg, IRowStyleCfg } from '../interfaces.ts';
 import { SheetExtension } from './sheet-extension';
 
+export interface IRowsHeaderCfgParam {
+    headerStyle?: Partial<IRowStyleCfg>;
+    rowsCfg?: IARowCfg[];
+}
 export declare class RowHeaderLayout extends SheetExtension {
     uKey: string;
     Z_INDEX: number;
+    rowsCfg: IARowCfg[];
+    headerStyle: IRowStyleCfg;
+    constructor(cfg?: IRowsHeaderCfgParam);
+    configHeaderRow(cfg: IRowsHeaderCfgParam): void;
+    getCfgOfCurrentRow(rowIndex: number): [IARowCfgObj, boolean];
+    setStyleToCtx(ctx: UniverRenderingContext, rowStyle: Partial<IColumnStyleCfg>): void;
     draw(ctx: UniverRenderingContext, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton): void;
 }

package/lib/types/components/sheets/interfaces.d.ts

@@ -69,4 +69,30 @@ export interface IPaintForScrolling {
     scaleX: number;
     scaleY: number;
 }
+export interface IColumnStyleCfg {
+    fontFamily: string;
+    fontColor: string;
+    fontSize: number;
+    borderColor: string;
+    textAlign: CanvasTextAlign;
+    textBaseline: CanvasTextBaseline;
+    backgroundColor: string;
+}
+export type IAColumnCfgObj = IColumnStyleCfg & {
+    text: string;
+};
+export type IAColumnCfg = undefined | null | string | Partial<IAColumnCfgObj>;
+export interface IRowStyleCfg {
+    fontFamily: string;
+    fontColor: string;
+    fontSize: number;
+    borderColor: string;
+    textAlign: CanvasTextAlign;
+    textBaseline: CanvasTextBaseline;
+    backgroundColor: string;
+}
+export type IARowCfgObj = IColumnStyleCfg & {
+    text: string;
+};
+export type IARowCfg = undefined | null | string | Partial<IARowCfgObj>;
 export {};

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

@@ -1,7 +1,7 @@
 import { Nullable } from '@univerjs/core';
 import { IViewportInfo, Vector2 } from '../../basics/vector2';
 import { UniverRenderingContext } from '../../context';
-import { RowHeaderLayout } from './extensions/row-header-layout';
+import { IRowsHeaderCfgParam, RowHeaderLayout } from './extensions/row-header-layout';
 import { SpreadsheetHeader } from './sheet-component';
 import { SpreadsheetSkeleton } from './sheet-skeleton';
 
@@ -25,4 +25,5 @@ export declare class SpreadsheetRowHeader extends SpreadsheetHeader {
     draw(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
     isHit(coord: Vector2): boolean;
     private _initialDefaultExtension;
+    setCustomHeader(cfg: IRowsHeaderCfgParam): void;
 }

package/lib/types/components/sheets/sheet-skeleton.d.ts

@@ -29,6 +29,12 @@ export interface IDocumentLayoutObject {
     paddingData: IPaddingData;
     fill?: Nullable<string>;
 }
+export declare const DEFAULT_PADDING_DATA: {
+    t: number;
+    b: number;
+    l: number;
+    r: number;
+};
 export declare const RENDER_RAW_FORMULA_KEY = "RENDER_RAW_FORMULA";
 export declare class SpreadsheetSkeleton extends Skeleton {
     private _worksheet;
@@ -71,6 +77,9 @@ export declare class SpreadsheetSkeleton extends Skeleton {
     get columnTotalWidth(): number;
     get rowHeaderWidth(): number;
     get columnHeaderHeight(): number;
+    /**
+     * row col start & end range
+     */
     get rowColumnSegment(): IRowColumnSegment;
     get dataMergeCache(): IRange[];
     get stylesCache(): IStylesCache;

package/lib/types/components/slides/slide.d.ts

@@ -1,4 +1,4 @@
-import { Nullable, Observable } from '@univerjs/core';
+import { Nullable, EventSubject } from '@univerjs/core';
 import { UniverRenderingContext } from '../../context';
 import { Scene } from '../../scene';
 import { SceneViewer } from '../../scene-viewer';
@@ -8,7 +8,7 @@ export declare enum SLIDE_NAVIGATION_KEY {
     RIGHT = "__slideNavigationRight__"
 }
 export declare class Slide extends SceneViewer {
-    onSlideChangePageByNavigationObservable: Observable<Nullable<string>>;
+    slideChangePageByNavigation$: EventSubject<Nullable<string>>;
     private _navigationEnabled;
     activeFirstPage(): void;
     addPage(scene: Scene): void;

package/lib/types/engine.d.ts

@@ -1,4 +1,3 @@
-import { Observable } from '@univerjs/core';
 import { CURSOR_TYPE } from './basics/const';
 import { Canvas, CanvasRenderMode } from './canvas';
 import { Scene } from './scene';
@@ -6,14 +5,10 @@ import { ThinEngine } from './thin-engine';
 
 export declare class Engine extends ThinEngine<Scene> {
     renderEvenInBackground: boolean;
-    /**
-     * Observable raised when the engine begins a new frame
-     */
-    onBeginFrameObservable: Observable<Engine>;
-    /**
-     * Observable raised when the engine ends the current frame
-     */
-    onEndFrameObservable: Observable<Engine>;
+    private readonly _beginFrame$;
+    readonly beginFrame$: import('rxjs').Observable<void>;
+    private readonly _endFrame$;
+    readonly endFrame$: import('rxjs').Observable<void>;
     private _container;
     private _canvas;
     private _renderingQueueLaunched;
@@ -97,7 +92,6 @@ export declare class Engine extends ThinEngine<Scene> {
     _renderFrame(): void;
     private _cancelFrame;
     private _getHostWindow;
-    /** @hidden */
     private _renderLoop;
     private _measureFps;
     private _handleKeyboardAction;

package/lib/types/group.d.ts

@@ -33,7 +33,7 @@ export declare class Group extends BaseObject {
     private _transformObject;
     getObjectsByOrder(): BaseObject[];
     getObjects(): BaseObject[];
-    render(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
+    render(ctx: UniverRenderingContext, bounds: IViewportInfo): void;
     resize(width?: number | string, height?: number | string): this;
     scale(scaleX?: number, scaleY?: number): this;
     skew(skewX?: number, skewY?: number): this;

package/lib/types/index.d.ts

@@ -43,3 +43,4 @@ export { DocumentSkeleton } from './components/docs/layout/doc-skeleton';
 export { ThinEngine } from './thin-engine';
 export { getCharSpaceApply, getNumberUnitValue } from './components/docs/layout/tools';
 export { type IChangeObserverConfig } from './scene.transformer';
+export { DEFAULT_PADDING_DATA } from './components/sheets/sheet-skeleton';

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

@@ -10,8 +10,8 @@ import { IRender, IRenderModuleCtor } from './render-unit';
 
 export type RenderComponentType = SheetComponent | DocComponent | Slide | BaseObject;
 export interface IRenderManagerService extends IDisposable {
+    /** @deprecated */
     currentRender$: Observable<Nullable<string>>;
-    createRender$: Observable<Nullable<string>>;
     addRender(unitId: string, renderer: IRender): void;
     createRender(unitId: string): IRender;
     removeRender(unitId: string): void;
@@ -19,14 +19,17 @@ export interface IRenderManagerService extends IDisposable {
     getRenderById(unitId: string): Nullable<IRender>;
     getRenderAll(): Map<string, IRender>;
     defaultEngine: Engine;
-    create(unitId: Nullable<string>): void;
+    /** @deprecated */
+    createRender$: Observable<string>;
+    /** @deprecated this design is very very weird! Remove it. */
+    create(unitId: string): void;
     /** @deprecated There will be multi units to render at the same time, so there is no *current*. */
     getCurrent(): Nullable<IRender>;
     /** @deprecated There will be multi units to render at the same time, so there is no *first*. */
     getFirst(): Nullable<IRender>;
     has(unitId: string): boolean;
     withCurrentTypeOfUnit<T>(type: UniverInstanceType, id: DependencyIdentifier<T>): Nullable<T>;
-    registerRenderController<T extends UnitModel>(type: UnitType, ctor: IRenderModuleCtor<T>): IDisposable;
+    registerRenderModule<T extends UnitModel>(type: UnitType, ctor: IRenderModuleCtor<T>): IDisposable;
 }
 export declare class RenderManagerService extends Disposable implements IRenderManagerService {
     private readonly _injector;
@@ -37,14 +40,15 @@ export declare class RenderManagerService extends Disposable implements IRenderM
     private readonly _currentRender$;
     readonly currentRender$: Observable<Nullable<string>>;
     private readonly _createRender$;
-    readonly createRender$: Observable<Nullable<string>>;
+    /** @deprecated */
+    readonly createRender$: Observable<string>;
     get defaultEngine(): Engine;
     private readonly _renderControllers;
     constructor(_injector: Injector, _univerInstanceService: IUniverInstanceService);
     dispose(): void;
-    registerRenderController(type: UnitType, ctor: IRenderModuleCtor): IDisposable;
+    registerRenderModule(type: UnitType, ctor: IRenderModuleCtor): IDisposable;
     private _getRenderControllersForType;
-    create(unitId: Nullable<string>): void;
+    create(unitId: string): void;
     createRender(unitId: string): IRender;
     withCurrentTypeOfUnit<T>(type: UniverInstanceType, id: DependencyIdentifier<T>): Nullable<T>;
     private _createRender;

package/lib/types/scene-viewer.d.ts

@@ -22,7 +22,7 @@ export declare class SceneViewer extends BaseObject {
     enableSelectedClipElement(): void;
     disableSelectedClipElement(): void;
     allowSelectedClipElement(): boolean;
-    pick(coord: Vector2): Nullable<ThinScene | BaseObject>;
+    pick(coord: Vector2): Nullable<BaseObject | ThinScene>;
     dispose(): void;
     private _initialProps;
 }

package/lib/types/scene.d.ts

@@ -62,7 +62,6 @@ export declare class Scene extends ThinScene {
      * scene._setTransForm --> viewport@resetCanvasSizeAndUpdateScrollBar ---> scrollTo ---> limitedScroll ---> onScrollBeforeObserver ---> setScrollInfo
      * scrollInfo needs accurate scene width & height, limitedScroll depends on scene & engine's width & height
      * @param state
-     * @returns
      */
     transformByState(state: ISceneTransformState): void;
     getParent(): ThinEngine<Scene> | SceneViewer;

package/lib/types/scene.input-manager.d.ts

@@ -14,7 +14,7 @@ export declare class InputManager extends Disposable {
     static ExclusiveDoubleClickMode: boolean;
     /** 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. */
     private _alreadyAttached;
-    private _onInputObserver;
+    private _onInput$;
     private _onPointerMove;
     private _onPointerDown;
     private _onPointerUp;

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

@@ -1,4 +1,4 @@
-import { Nullable, Disposable, Observable } from '@univerjs/core';
+import { Nullable, Disposable } from '@univerjs/core';
 import { BaseObject } from './base-object';
 import { IMouseEvent, IPointerEvent } from './basics/i-events';
 import { Group } from './group';
@@ -60,22 +60,27 @@ export declare class Transformer extends Disposable implements ITransformerConfi
     boundBoxFunc: Nullable<(oldBox: BaseObject, newBox: BaseObject) => BaseObject>;
     useSingleNodeRotation: boolean;
     shouldOverdrawWholeArea: boolean;
-    onChangeStartObservable: Observable<IChangeObserverConfig>;
-    onChangingObservable: Observable<IChangeObserverConfig>;
-    onChangeEndObservable: Observable<IChangeObserverConfig>;
-    onClearControlObservable: Observable<boolean>;
-    onCreateControlObservable: Observable<Group>;
+    private readonly _changeStart$;
+    readonly changeStart$: import('rxjs').Observable<IChangeObserverConfig>;
+    private readonly _changing$;
+    readonly changing$: import('rxjs').Observable<IChangeObserverConfig>;
+    private readonly _changeEnd$;
+    readonly changeEnd$: import('rxjs').Observable<IChangeObserverConfig>;
+    private readonly _clearControl$;
+    readonly clearControl$: import('rxjs').Observable<boolean>;
+    private readonly _createControl$;
+    readonly createControl$: import('rxjs').Observable<Group>;
     private _startOffsetX;
     private _startOffsetY;
     private _startStateMap;
     private _viewportScrollX;
     private _viewportScrollY;
-    private _moveObserver;
-    private _upObserver;
-    private _cancelFocusObserver;
+    private _topScenePointerMoveSub;
+    private _topScenePointerUpSub;
+    private _cancelFocusSubscription;
     private _transformerControlMap;
     private _selectedObjectMap;
-    private _observerObjectMap;
+    private _subscriptionObjectMap;
     private _copperControl;
     private _copperSelectedObject;
     private _moveBufferSkip;

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

@@ -1,4 +1,5 @@
 import { UniverRenderingContext } from '../context';
+import { IViewportInfo } from '../basics/vector2';
 import { IShapeProps, Shape } from './shape';
 
 export interface IRectProps extends IShapeProps {
@@ -13,5 +14,5 @@ export declare class Rect<T extends IRectProps = IRectProps> extends Shape<T> {
     toJson(): {
         [x: string]: any;
     };
-    protected _draw(ctx: UniverRenderingContext): void;
+    protected _draw(ctx: UniverRenderingContext, viewportInfo?: IViewportInfo): void;
 }

package/lib/types/shape/scroll-bar.d.ts

@@ -11,10 +11,10 @@ export declare class ScrollBar extends BaseScrollBar {
     private _lastY;
     private _isHorizonMove;
     private _isVerticalMove;
-    private _horizonPointerMoveObserver;
-    private _horizonPointerUpObserver;
-    private _verticalPointerMoveObserver;
-    private _verticalPointerUpObserver;
+    private _horizonPointerMoveSub;
+    private _horizonPointerUpSub;
+    private _verticalPointerMoveSub;
+    private _verticalPointerUpSub;
     barSize: number;
     barBorder: number;
     thumbMargin: number;
@@ -27,6 +27,7 @@ export declare class ScrollBar extends BaseScrollBar {
     thumbActiveBackgroundColor: string;
     barBackgroundColor: string;
     barBorderColor: string;
+    private _eventSub;
     constructor(view: Viewport, props?: IScrollBarProps);
     static attachTo(view: Viewport, props?: IScrollBarProps): ScrollBar;
     dispose(): void;

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

@@ -106,6 +106,6 @@ export declare abstract class Shape<T extends IShapeProps> extends BaseObject {
     toJson(): {
         [x: string]: any;
     };
-    protected _draw(ctx: UniverRenderingContext): void;
+    protected _draw(ctx: UniverRenderingContext, bounds?: IViewportInfo): void;
     private _initialProps;
 }

package/lib/types/thin-engine.d.ts

@@ -1,4 +1,4 @@
-import { Disposable, Observable } from '@univerjs/core';
+import { Disposable, EventSubject } from '@univerjs/core';
 import { IDisposable } from '@wendellhu/redi';
 import { CURSOR_TYPE, RENDER_CLASS_TYPE } from './basics/const';
 import { IEvent } from './basics/i-events';
@@ -6,8 +6,8 @@ import { ITransformChangeState } from './basics/interfaces';
 import { Canvas } from './canvas';
 
 export declare abstract class ThinEngine<T extends IDisposable> extends Disposable {
-    onInputChangedObservable: Observable<IEvent>;
-    onTransformChangeObservable: Observable<ITransformChangeState>;
+    onInputChanged$: EventSubject<IEvent>;
+    onTransformChange$: EventSubject<ITransformChangeState>;
     private _scenes;
     private _activeScene;
     get classType(): RENDER_CLASS_TYPE;

package/lib/types/thin-scene.d.ts

@@ -1,29 +1,31 @@
-import { EventState, Nullable, Observer, Disposable, Observable } from '@univerjs/core';
+import { Nullable, Disposable, EventSubject } from '@univerjs/core';
 import { BaseObject } from './base-object';
-import { CURSOR_TYPE, EVENT_TYPE, RENDER_CLASS_TYPE } from './basics/const';
+import { CURSOR_TYPE, RENDER_CLASS_TYPE } from './basics/const';
 import { IDragEvent, IKeyboardEvent, IMouseEvent, IPointerEvent, IWheelEvent } from './basics/i-events';
 import { ITransformChangeState } from './basics/interfaces';
 import { Transform } from './basics/transform';
 import { Vector2 } from './basics/vector2';
 import { UniverRenderingContext } from './context';
+import { ThinEngine } from './thin-engine';
+import { Scene } from './scene';
 
 export declare abstract class ThinScene extends Disposable {
-    onTransformChangeObservable: Observable<ITransformChangeState>;
-    onFileLoadedObservable: Observable<string>;
-    onPointerDownObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerMoveObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerUpObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerEnterObserver: Observable<IMouseEvent | IPointerEvent>;
-    onPointerLeaveObserver: Observable<IMouseEvent | IPointerEvent>;
-    onDragEnterObserver: Observable<IDragEvent>;
-    onDragOverObserver: Observable<IDragEvent>;
-    onDragLeaveObserver: Observable<IDragEvent>;
-    onDropObserver: Observable<IDragEvent>;
-    onDblclickObserver: Observable<IMouseEvent | IPointerEvent>;
-    onTripleClickObserver: Observable<IMouseEvent | IPointerEvent>;
-    onMouseWheelObserver: Observable<IWheelEvent>;
-    onKeyDownObservable: Observable<IKeyboardEvent>;
-    onKeyUpObservable: Observable<IKeyboardEvent>;
+    onTransformChange$: EventSubject<ITransformChangeState>;
+    onFileLoaded$: EventSubject<string>;
+    onPointerDown$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerMove$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerUp$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerEnter$: EventSubject<IMouseEvent | IPointerEvent>;
+    onPointerLeave$: EventSubject<IMouseEvent | IPointerEvent>;
+    onDragEnter$: EventSubject<IDragEvent>;
+    onDragOver$: EventSubject<IDragEvent>;
+    onDragLeave$: EventSubject<IDragEvent>;
+    onDrop$: EventSubject<IDragEvent>;
+    onDblclick$: EventSubject<IMouseEvent | IPointerEvent>;
+    onTripleClick$: EventSubject<IMouseEvent | IPointerEvent>;
+    onMouseWheel$: EventSubject<IWheelEvent>;
+    onKeyDown$: EventSubject<IKeyboardEvent>;
+    onKeyUp$: EventSubject<IKeyboardEvent>;
     debounceParentTimeout: number;
     private _sceneKey;
     private _width;
@@ -48,9 +50,6 @@ export declare abstract class ThinScene extends Disposable {
     set scaleY(scaleY: number);
     enableEvent(): void;
     disableEvent(): void;
-    on(eventType: EVENT_TYPE, func: (evt: unknown, state: EventState) => void): Nullable<Observer<unknown>>;
-    off(eventType: EVENT_TYPE, observer: Nullable<Observer<unknown>>): void;
-    remove(eventType: EVENT_TYPE): void;
     triggerKeyDown(evt: IKeyboardEvent): void;
     triggerKeyUp(evt: IKeyboardEvent): void;
     abstract triggerPointerUp(evt: IPointerEvent | IMouseEvent): void;
@@ -73,7 +72,7 @@ export declare abstract class ThinScene extends Disposable {
     abstract getObject(oKey: string): Nullable<BaseObject>;
     abstract addObject(o: BaseObject, zIndex?: number): void;
     abstract addObjects(objects: BaseObject[], zIndex?: number): void;
-    abstract getEngine(): any;
+    abstract getEngine(): Nullable<ThinEngine<Scene>>;
     abstract setObjectBehavior(o: BaseObject): void;
     attachTransformerTo(o: BaseObject): void;
     detachTransformerFrom(o: BaseObject): void;

package/lib/types/viewport.d.ts

@@ -1,4 +1,4 @@
-import { EventState, IPosition, Nullable, Observable } from '@univerjs/core';
+import { EventState, IPosition, Nullable, EventSubject } from '@univerjs/core';
 import { BaseObject } from './base-object';
 import { IWheelEvent } from './basics/i-events';
 import { Transform } from './basics/transform';
@@ -73,11 +73,11 @@ export declare class Viewport {
      */
     private _physicalSceneWidth;
     private _physicalSceneHeight;
-    onMouseWheelObserver: Observable<IWheelEvent>;
-    onScrollAfterObserver: Observable<IScrollObserverParam>;
-    onScrollBeforeObserver: Observable<IScrollObserverParam>;
-    onScrollStopObserver: Observable<IScrollObserverParam>;
-    onScrollByBarObserver: Observable<IScrollObserverParam>;
+    onMouseWheel$: EventSubject<IWheelEvent>;
+    onScrollAfter$: EventSubject<IScrollObserverParam>;
+    onScrollBefore$: EventSubject<IScrollObserverParam>;
+    onScrollStop$: EventSubject<IScrollObserverParam>;
+    onScrollByBar$: EventSubject<IScrollObserverParam>;
     private _viewportKey;
     /**
      * viewport top origin value in logic, scale does not affect it.
@@ -334,7 +334,7 @@ export declare class Viewport {
     private _getBoundScale;
     /**
      * main canvas element resize
-     * called by this.scene.getEngine()?.onTransformChangeObservable.add
+     * called by this.scene.getEngine()?.onTransformChange$.add
      */
     private _mainCanvasResizeHandler;
 }