@univerjs/engine-render 0.1.11 → 0.1.13

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

@@ -2,49 +2,21 @@ import { Nullable, Disposable, Observable } from '@univerjs/core';
 import { BaseObject } from './base-object';
 import { IMouseEvent, IPointerEvent } from './basics/i-events';
 import { Group } from './group';
-import { ThinScene } from './thin-scene';
+import { Scene } from './scene';
+import { ITransformerConfig } from './basics/transformer-config';
 
 declare enum MoveObserverType {
     MOVE_START = 0,
     MOVING = 1,
     MOVE_END = 2
 }
-interface IChangeObserverConfig {
+export interface IChangeObserverConfig {
     objects: Map<string, BaseObject>;
     moveX?: number;
     moveY?: number;
+    angle?: number;
     type: MoveObserverType;
 }
-export interface ITransformerConfig {
-    hoverEnabled?: boolean;
-    hoverEnterFunc?: Nullable<(e: IPointerEvent | IMouseEvent) => void>;
-    hoverLeaveFunc?: Nullable<(e: IPointerEvent | IMouseEvent) => void>;
-    rotateEnabled?: boolean;
-    rotationSnaps?: number[];
-    rotationSnapTolerance?: number;
-    rotateAnchorOffset?: number;
-    rotateSize?: number;
-    rotateCornerRadius?: number;
-    borderEnabled?: boolean;
-    borderStroke?: string;
-    borderStrokeWidth?: number;
-    borderDash?: number[];
-    borderSpacing: number;
-    resizeEnabled?: boolean;
-    enabledAnchors?: number[];
-    anchorFill?: string;
-    anchorStroke?: string;
-    anchorStrokeWidth?: number;
-    anchorSize?: number;
-    anchorCornerRadius?: number;
-    keepRatio?: boolean;
-    centeredScaling?: boolean;
-    flipEnabled?: boolean;
-    ignoreStroke?: boolean;
-    boundBoxFunc?: Nullable<(oldBox: BaseObject, newBox: BaseObject) => BaseObject>;
-    useSingleNodeRotation?: boolean;
-    shouldOverdrawWholeArea?: boolean;
-}
 /**
  * Transformer constructor.  Transformer is a special type of group that allow you transform
  * primitives and shapes. Transforming tool is not changing `width` and `height` properties of nodes
@@ -52,6 +24,7 @@ export interface ITransformerConfig {
  */
 export declare class Transformer extends Disposable implements ITransformerConfig {
     private _scene;
+    isCropper: boolean;
     hoverEnabled: boolean;
     hoverEnterFunc: Nullable<(e: IPointerEvent | IMouseEvent) => void>;
     hoverLeaveFunc: Nullable<(e: IPointerEvent | IMouseEvent) => void>;
@@ -74,6 +47,8 @@ export declare class Transformer extends Disposable implements ITransformerConfi
     anchorCornerRadius: number;
     keepRatio: boolean;
     centeredScaling: boolean;
+    zeroLeft: number;
+    zeroTop: number;
     /**
      * leftTop centerTop rightTop
      * leftMiddle rightMiddle
@@ -88,10 +63,11 @@ export declare class Transformer extends Disposable implements ITransformerConfi
     onChangeStartObservable: Observable<IChangeObserverConfig>;
     onChangingObservable: Observable<IChangeObserverConfig>;
     onChangeEndObservable: Observable<IChangeObserverConfig>;
-    onClearControlObservable: Observable<null>;
+    onClearControlObservable: Observable<boolean>;
     onCreateControlObservable: Observable<Group>;
     private _startOffsetX;
     private _startOffsetY;
+    private _startStateMap;
     private _viewportScrollX;
     private _viewportScrollY;
     private _moveObserver;
@@ -99,30 +75,73 @@ export declare class Transformer extends Disposable implements ITransformerConfi
     private _cancelFocusObserver;
     private _transformerControlMap;
     private _selectedObjectMap;
-    constructor(_scene: ThinScene, config?: ITransformerConfig);
-    getScene(): ThinScene;
-    hideControl(): void;
-    attachTo(applyObject: BaseObject): BaseObject | undefined;
+    private _observerObjectMap;
+    private _copperControl;
+    private _copperSelectedObject;
+    private _moveBufferSkip;
+    private _debounceClearFunc;
+    constructor(_scene: Scene, config?: ITransformerConfig);
+    changeNotification(): this;
+    getSelectedObjectMap(): Map<string, BaseObject>;
+    resetProps(config?: ITransformerConfig): void;
+    getScene(): Scene;
+    clearControls(changeSelf?: boolean): void;
+    updateControl(): void;
+    debounceRefreshControls(): void;
+    clearSelectedObjects(): void;
+    refreshControls(): this;
+    createControlForCopper(applyObject: BaseObject): void;
+    clearCopperControl(): void;
+    setSelectedControl(applyObject: BaseObject): void;
+    private _getConfig;
+    attachTo(applyObject: BaseObject): BaseObject;
+    detachFrom(applyObject: BaseObject): BaseObject;
     dispose(): void;
     private _initialProps;
-    private _updateControlChildren;
+    private _checkMoveBoundary;
+    private _moving;
+    private _moveBufferBlocker;
     private _anchorMoving;
+    private _moveFunc;
+    private _getMovePoint;
+    /**
+     *
+     */
+    private _applyRotationForResult;
+    private _updateCloseKeepRatioState;
+    private _getLimitedSize;
+    private _resizeLeftTop;
+    private _resizeRightBottom;
+    private _resizeLeftBottom;
+    private _resizeRightTop;
+    private _fixMoveLtRb;
+    private _fixMoveLbRt;
     private _attachEventToAnchor;
+    private _recoverySizeBoundary;
     private _attachEventToRotate;
+    private _rotateMoving;
     private _getOutlinePosition;
     private _getRotateAnchorCursor;
+    private _getCopperAnchorPosition;
     private _getRotateAnchorPosition;
     private _createResizeAnchor;
+    private _createCopperResizeAnchor;
+    private _getNorthEastPoints;
+    private _getNorthWestPoints;
+    private _getSouthEastPoints;
+    private _getSouthWestPoints;
     private _checkTransformerType;
     private _updateControlIterator;
     private _updateControl;
     private _hideControl;
     private _attachHover;
-    private _clearControl;
+    private _clearControls;
+    private _clearControlMap;
     private _createControl;
     private _getTopScene;
-    private _moving;
     private _updateActiveObjectList;
+    private _findGroupObject;
     private _addCancelObserver;
+    private _smoothAccuracy;
 }
 export {};

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

@@ -0,0 +1,54 @@
+import { ISrcRect, Nullable, PresetGeometryType } from '@univerjs/core';
+import { UniverRenderingContext } from '../context';
+import { IObjectFullState, IViewportInfo, RENDER_CLASS_TYPE } from '../basics';
+import { IShapeProps, Shape } from './shape';
+
+export interface IImageProps extends IShapeProps {
+    image?: HTMLImageElement;
+    url?: string;
+    success?: () => void;
+    fail?: () => void;
+    /**
+     * 20.1.8.55 srcRect (Source Rectangle)
+     */
+    srcRect?: Nullable<ISrcRect>;
+    /**
+     * 20.1.9.18 prstGeom (Preset geometry)
+     */
+    prstGeom?: Nullable<PresetGeometryType>;
+}
+export declare class Image extends Shape<IImageProps> {
+    protected _props: IImageProps;
+    protected _native: Nullable<HTMLImageElement>;
+    private _renderByCropper;
+    private _transformCalculateSrcRect;
+    constructor(id: string, config: IImageProps);
+    get srcRect(): Nullable<ISrcRect>;
+    get prstGeom(): Nullable<PresetGeometryType>;
+    get classType(): RENDER_CLASS_TYPE;
+    transformByStateCloseCropper(option: IObjectFullState): void;
+    changeSource(url: string): void;
+    resetSize(): void;
+    setPrstGeom(prstGeom?: Nullable<PresetGeometryType>): void;
+    setSrcRect(srcRect?: Nullable<ISrcRect>): void;
+    getProps(): IImageProps;
+    getNative(): Nullable<HTMLImageElement>;
+    getNativeSize(): {
+        width: number;
+        height: number;
+    };
+    closeRenderByCropper(): void;
+    openRenderByCropper(): void;
+    calculateTransformWithSrcRect(): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        angle: number;
+    };
+    private _transformBySrcRect;
+    render(mainCtx: UniverRenderingContext, bounds?: IViewportInfo): this;
+    protected _draw(ctx: UniverRenderingContext): void;
+    private _init;
+    private _updateSrcRectByTransform;
+}

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

@@ -17,7 +17,7 @@ export * from './circle';
 export * from './control';
 export * from './drawing';
 export * from './path';
-export * from './picture';
+export * from './image';
 export * from './rect';
 export * from './regular-polygon';
 export * from './rich-text';

package/lib/types/shape/regular-polygon.d.ts

@@ -1,5 +1,5 @@
 import { IObjectFullState } from '../basics/interfaces';
-import { IPoint } from '../basics/vector2';
+import { IPoint, Vector2 } from '../basics/vector2';
 import { UniverRenderingContext } from '../context';
 import { IShapeProps, Shape } from './shape';
 
@@ -12,6 +12,9 @@ export declare class RegularPolygon extends Shape<IRegularPolygonProps> {
     constructor(key?: string, props?: IRegularPolygonProps);
     get pointsGroup(): IPoint[][];
     static drawWith(ctx: UniverRenderingContext, props: IRegularPolygonProps | RegularPolygon): void;
+    isHit(coord: Vector2): boolean;
+    private _contains;
+    private _isOnLine;
     updatePointGroup(pointGroup: IPoint[][]): void;
     resizePolygon(preValue: IObjectFullState): void;
     toJson(): {

package/lib/types/shape/rich-text.d.ts

@@ -1,13 +1,12 @@
 import { IDocumentData, IStyleBase, ITransformState, LocaleService } from '@univerjs/core';
 import { BaseObject } from '../base-object';
-import { IViewportBound } from '../basics/vector2';
+import { IViewportInfo } from '../basics/vector2';
 import { UniverRenderingContext } from '../context';
 
 export interface IRichTextProps extends ITransformState, IStyleBase {
     text?: string;
     richText?: IDocumentData;
     zIndex: number;
-    isTransformer?: boolean;
     forceRender?: boolean;
 }
 export declare const RICHTEXT_OBJECT_ARRAY: string[];
@@ -33,7 +32,7 @@ export declare class RichText extends BaseObject {
         height: number;
     } | undefined;
     setProps(props?: IRichTextProps): this | undefined;
-    render(mainCtx: UniverRenderingContext, bounds?: IViewportBound): this;
+    render(mainCtx: UniverRenderingContext, bounds?: IViewportInfo): this;
     toJson(): {
         [x: string]: any;
     };

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

@@ -1,7 +1,7 @@
 import { IScale, Nullable } from '@univerjs/core';
 import { BaseObject } from '../base-object';
 import { IObjectFullState } from '../basics/interfaces';
-import { IViewportBound, Vector2 } from '../basics/vector2';
+import { IViewportInfo, Vector2 } from '../basics/vector2';
 import { UniverRenderingContext } from '../context';
 
 export type LineJoin = 'round' | 'bevel' | 'miter';
@@ -37,7 +37,7 @@ export interface IShapeProps extends IObjectFullState {
     parent?: IScale;
 }
 export declare const SHAPE_OBJECT_ARRAY: string[];
-export declare abstract class Shape<T> extends BaseObject {
+export declare abstract class Shape<T extends IShapeProps> extends BaseObject {
     private _hoverCursor;
     private _moveCursor;
     private _fillRule;
@@ -98,9 +98,10 @@ export declare abstract class Shape<T> extends BaseObject {
      * @param {UniverRenderingContext} ctx SheetContext to render on
      */
     private static _renderStroke;
+    private static _removeShadow;
     private static _setFillStyles;
     private static _setStrokeStyles;
-    render(mainCtx: UniverRenderingContext, bounds?: IViewportBound): this;
+    render(mainCtx: UniverRenderingContext, bounds?: IViewportInfo): this;
     setProps(props?: T): this | undefined;
     toJson(): {
         [x: string]: any;

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

@@ -24,6 +24,7 @@ export declare abstract class ThinEngine<T extends IDisposable> extends Disposab
     abstract setRemainCapture(): void;
     hasActiveScene(): boolean;
     dispose(): void;
+    getParent(): void;
     remainScene(key: string): T | undefined;
     abstract clearCanvas(): void;
     abstract getCanvas(): Canvas;

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

@@ -1,7 +1,7 @@
 import { EventState, Nullable, Observer, Disposable, Observable } from '@univerjs/core';
 import { BaseObject } from './base-object';
 import { CURSOR_TYPE, EVENT_TYPE, RENDER_CLASS_TYPE } from './basics/const';
-import { IKeyboardEvent, IMouseEvent, IPointerEvent, IWheelEvent } from './basics/i-events';
+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';
@@ -15,6 +15,10 @@ export declare abstract class ThinScene extends Disposable {
     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>;
@@ -59,6 +63,10 @@ export declare abstract class ThinScene extends Disposable {
     abstract triggerPointerLeave(evt: IPointerEvent | IMouseEvent): void;
     abstract triggerPointerOver(evt: IPointerEvent | IMouseEvent): void;
     abstract triggerPointerEnter(evt: IPointerEvent | IMouseEvent): void;
+    abstract triggerDragEnter(evt: IDragEvent | IMouseEvent): void;
+    abstract triggerDragOver(evt: IDragEvent | IMouseEvent): void;
+    abstract triggerDragLeave(evt: IDragEvent | IMouseEvent): void;
+    abstract triggerDrop(evt: IDragEvent | IMouseEvent): void;
     abstract render(parentCtx?: UniverRenderingContext): void;
     abstract getParent(): any;
     dispose(): void;
@@ -67,7 +75,8 @@ export declare abstract class ThinScene extends Disposable {
     abstract addObjects(objects: BaseObject[], zIndex?: number): void;
     abstract getEngine(): any;
     abstract setObjectBehavior(o: BaseObject): void;
-    abstract applyTransformer(o: BaseObject): void;
+    attachTransformerTo(o: BaseObject): void;
+    detachTransformerFrom(o: BaseObject): void;
     makeDirtyNoParent(state?: boolean): ThinScene;
     makeDirty(state?: boolean): this;
     abstract pick(coord: Vector2): Nullable<BaseObject | ThinScene>;

package/lib/types/viewport.d.ts

@@ -2,7 +2,7 @@ import { EventState, IPosition, Nullable, Observable } from '@univerjs/core';
 import { BaseObject } from './base-object';
 import { IWheelEvent } from './basics/i-events';
 import { Transform } from './basics/transform';
-import { IViewportBound, Vector2 } from './basics/vector2';
+import { IBoundRectNoAngle, IViewportInfo, Vector2 } from './basics/vector2';
 import { UniverRenderingContext } from './context';
 import { BaseScrollBar } from './shape/base-scroll-bar';
 import { ThinScene } from './thin-scene';
@@ -21,13 +21,24 @@ interface IViewProps extends IViewPosition {
     isWheelPreventDefaultX?: boolean;
     isWheelPreventDefaultY?: boolean;
     active?: boolean;
+    isRelativeX?: boolean;
+    isRelativeY?: boolean;
+    allowCache?: boolean;
+    bufferEdgeX?: number;
+    bufferEdgeY?: number;
 }
 export interface IScrollObserverParam {
     viewport?: Viewport;
+    /**
+     * scrollX for scrollbar
+     */
     scrollX?: number;
     scrollY?: number;
     x?: number;
     y?: number;
+    /**
+     * scrollX for viewport
+     */
     actualScrollX?: number;
     actualScrollY?: number;
     limitX?: number;
@@ -40,25 +51,36 @@ interface IScrollBarPosition {
 }
 export declare class Viewport {
     /**
-     * The offset of the scrollbar equals the distance from the top to the scrollbar
-     * use getActualScroll, convert to actualScrollX, actualScrollY
-     *
+     * scrollX means scroll x value for scrollbar in viewMain
+     * use getBarScroll to get scrolling value(scrollX, scrollY) for scrollbar
      */
     scrollX: number;
     scrollY: number;
+    _preScrollX: number;
+    _preScrollY: number;
     /**
      * The actual scroll offset equals the distance from the content area position to the top, and there is a conversion relationship with scrollX and scrollY
-     * use getBarScroll, convert to scrollX, scrollY
+     * use getActualScroll to get scrolling value for spreadsheet.
      */
-    actualScrollX: number;
-    actualScrollY: number;
+    viewportScrollX: number;
+    viewportScrollY: number;
+    preViewportScrollX: number;
+    preViewportScrollY: number;
+    _deltaViewportScrollX: number;
+    _deltaViewportScrollY: number;
     onMouseWheelObserver: Observable<IWheelEvent>;
     onScrollAfterObserver: Observable<IScrollObserverParam>;
     onScrollBeforeObserver: Observable<IScrollObserverParam>;
     onScrollStopObserver: Observable<IScrollObserverParam>;
     onScrollByBarObserver: Observable<IScrollObserverParam>;
-    private _viewPortKey;
+    private _viewportKey;
+    /**
+     * viewport top origin value in logic, scale does not affect it.
+     */
     private _topOrigin;
+    /**
+     * viewport left origin value in logic, scale does not affect it.
+     */
     private _leftOrigin;
     private _bottomOrigin;
     private _rightOrigin;
@@ -75,8 +97,6 @@ export declare class Viewport {
     private _isWheelPreventDefaultX;
     private _isWheelPreventDefaultY;
     private _scrollStopNum;
-    private _preScrollX;
-    private _preScrollY;
     private _renderClipState;
     private _active;
     private _paddingStartX;
@@ -85,12 +105,43 @@ export declare class Viewport {
     private _paddingEndY;
     private _isRelativeX;
     private _isRelativeY;
-    private _preViewportBound;
-    constructor(viewPortKey: string, scene: ThinScene, props?: IViewProps);
+    /**
+     * viewbound of cache area, cache area is slightly bigger than viewbound.
+     */
+    private _cacheBound;
+    private _preCacheBound;
+    private _preCacheVisibleBound;
+    /**
+     * bound of visible area
+     */
+    private _viewBound;
+    private _preViewBound;
+    /**
+     *  Whether the viewport needs to be updated.
+     *  In future, viewMain dirty would not affect othew viewports.
+     */
+    private _isDirty;
+    private _cacheCanvas;
+    /**
+     * The configuration comes from the props.allowCache passed in during viewport initialization.
+     * When _allowCache is true, a cacheCanvas will be created.
+     */
+    private _allowCache;
+    /**
+     * Buffer Area size, default is zero
+     */
+    bufferEdgeX: number;
+    bufferEdgeY: number;
+    constructor(viewportKey: string, scene: ThinScene, props?: IViewProps);
+    initCacheCanvas(props?: IViewProps): void;
+    /**
+     * test
+     */
+    _testDisplayCache(): void;
     get scene(): ThinScene;
     get width(): Nullable<number>;
     get height(): Nullable<number>;
-    get viewPortKey(): string;
+    get viewportKey(): string;
     get topOrigin(): number;
     get leftOrigin(): number;
     get bottomOrigin(): number;
@@ -108,16 +159,40 @@ export declare class Viewport {
     private set left(value);
     private set bottom(value);
     private set right(value);
+    get viewBound(): IBoundRectNoAngle;
+    get cacheBound(): IBoundRectNoAngle | null;
+    set cacheBound(val: IBoundRectNoAngle | null);
+    get preCacheBound(): IBoundRectNoAngle | null;
+    set preCacheBound(val: IBoundRectNoAngle | null);
     enable(): void;
     disable(): void;
+    /**
+     * 物理 canvas 大小改变时调用(调整 window 大小时触发)
+     */
     resetSizeAndScrollBar(): void;
     setScrollBar(instance: BaseScrollBar): void;
     removeScrollBar(): void;
+    /**
+     * 和 resetSizeAndScrollBar 不同
+     * 此方法是调整冻结行列设置时 & 初始化时触发, resize window 时并不会触发
+     *
+     * 注意参数 position 不一定有 height & width  对于 viewMain 只有 left top bottom right
+     * this.width this.height 也有可能是 undefined
+     * 因此应通过 _getViewPortSize 获取宽高
+     * @param position
+     */
     resize(position: IViewPosition): void;
     setPadding(param: IPosition): void;
     resetPadding(): void;
     /**
+     *
+     * 改动 scrollbar 的位置，不是 viewport content 滚动
      * scroll to position, absolute
+     * 只有 viewMain 才会被调用 scrollTo 其他 viewport 都不会调用此方法
+     * 具体在 scroll.controller 中
+     *
+     * Debug
+     * window.scene.getViewports()[0].scrollTo({x: 14.2, y: 1.8}, true)
      * @param pos
      * @returns
      */
@@ -155,6 +230,10 @@ export declare class Viewport {
         x: number;
         y: number;
     };
+    /**
+     * get actual scroll value by scrollXY
+     * @returns
+     */
     getTransformedScroll(): {
         x: number;
         y: number;
@@ -162,8 +241,19 @@ export declare class Viewport {
     getScrollBar(): Nullable<BaseScrollBar>;
     updateScroll(param: IScrollObserverParam): this;
     getScrollBarTransForm(): Transform;
+    shouldIntoRender(): boolean;
+    /**
+     * engine.renderLoop ---> scene.render ---> layer.render ---> viewport.render
+     * that means each layer call all viewports to render
+     * @param parentCtx 如果 layer._allowCache true, 那么 parentCtx 是 layer 中的 cacheCtx
+     * @param objects
+     * @param isMaxLayer
+     * @param isLast last viewport would
+     */
     render(parentCtx?: UniverRenderingContext, objects?: BaseObject[], isMaxLayer?: boolean): void;
-    getBounding(): IViewportBound;
+    private _makeDefaultViewport;
+    private _calcViewportInfo;
+    getBounding(): IViewportInfo;
     getRelativeVector(coord: Vector2): Vector2;
     getAbsoluteVector(coord: Vector2): Vector2;
     onMouseWheel(evt: IWheelEvent, state: EventState): void;
@@ -176,15 +266,43 @@ export declare class Viewport {
         isLimitedX: boolean;
         isLimitedY: boolean;
     } | undefined;
-    private _resizeCacheCanvasAndScrollBar;
+    markDirty(state?: boolean): void;
+    get isDirty(): boolean;
+    private _isForceDirty;
+    markForceDirty(state?: boolean): void;
+    resetPrevCacheBounds(): void;
+    get isForceDirty(): boolean;
+    private _resizeCacheCanvas;
     private _getViewPortSize;
     private _scrollRendered;
     private _triggerScrollStop;
+    /**
+     * Scroll Viewport
+     * Only the 'viewMain' will enter this function, other viewports will not.
+     *
+     * caller: scroll.controller viewportMain.proscrollTo(config)
+     * @param scrollType
+     * @param pos viewMain 滚动条的位置
+     * @param isTrigger
+     */
     private _scroll;
-    private _calViewportRelativeBounding;
+    expandBounds(value: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    }): IBoundRectNoAngle;
+    updatePrevCacheBounds(viewBound?: IBoundRectNoAngle): void;
+    private _calcCacheUpdate;
     private _diffViewBound;
+    private _calcDiffCacheBound;
     private _drawScrollbar;
     private _setWithAndHeight;
     private _getBoundScale;
+    /**
+     * main canvas element resize
+     * called by this.scene.getEngine()?.onTransformChangeObservable.add
+     */
+    private _mainCanvasResizeHandler;
 }
 export {};