feat(slide): dev

packages/base-render/src/BaseObject.ts

@@ -68,6 +68,8 @@ export abstract class BaseObject {
 
  private _isTransformer = false;
 
+ private _forceRender = false;
+
  groupKey?: string;
 
  isInGroup: boolean = false;
@@ -265,6 +267,13 @@ export abstract class BaseObject {
  return this;
  }
 
+ isRender(bounds?: IBoundRect) {
+ if (this._forceRender) {
+ return false;
+ }
+ return bounds && !this.isInGroup;
+ }
+
  private _makeDirtyMix() {
  if (this.debounceParentDirty) {
  this.makeDirty(true);

packages/base-render/src/Basics/Interfaces.ts

@@ -1,4 +1,17 @@
-import { BooleanNumber, GridType, IDocStyleBase, IDocumentLayout, IParagraphStyle, IReferenceSource, ISectionBreakBase, ITextStyle } from '@univer/core';
+import {
+ BooleanNumber,
+ GridType,
+ IDocStyleBase,
+ IDocumentLayout,
+ IOffset,
+ IParagraphStyle,
+ IReferenceSource,
+ IScale,
+ ISectionBreakBase,
+ ISize,
+ ITextStyle,
+ ITransformState,
+} from '@univer/core';
 import { TextSelection } from '../Component/Docs/Common/TextSelection';
 import { Documents } from '../Component/Docs/Document';
 import {
@@ -11,41 +24,17 @@ import {
 } from './IDocumentSkeletonCached';
 import { Vector2 } from './Vector2';
 
-export interface ISize {
- width?: number;
- height?: number;
-}
-
-export interface IScale {
- scaleX?: number;
- scaleY?: number;
-}
-
-export interface IOffset {
- left?: number;
- top?: number;
+export interface IObjectFullState extends ITransformState {
+ strokeWidth?: number;
+ zIndex?: number;
+ isTransformer?: boolean;
+ forceRender?: boolean;
 }
 
 export interface IRect extends ISize, IOffset {
  points: Vector2[];
 }
 
-export interface ITransformState extends IOffset {
- scaleX?: number;
- scaleY?: number;
- angle?: number;
- skewX?: number;
- skewY?: number;
- flipX?: boolean;
- flipY?: boolean;
-}
-
-export interface IObjectFullState extends ITransformState, ISize {
- strokeWidth?: number;
- zIndex?: number;
- isTransformer?: boolean;
-}
-
 export interface ISceneTransformState extends ISize, IScale {}
 
 export enum TRANSFORM_CHANGE_OBSERVABLE_TYPE {

packages/base-render/src/Basics/Tools.ts

@@ -1,7 +1,7 @@
-import { FontStyleType, ICellInfo, ISelection, IStyleBase, Nullable, ObjectMatrix, Tools, IRangeData, BaselineOffset } from '@univer/core';
+import { FontStyleType, ICellInfo, ISelection, IStyleBase, Nullable, ObjectMatrix, Tools, IRangeData, BaselineOffset, IScale } from '@univer/core';
 import { DEFAULT_FONTFACE_PLANE } from './Const';
 import { IBoundRectNoAngle } from './Vector2';
-import { IFontLocale, IScale } from './Interfaces';
+import { IFontLocale } from './Interfaces';
 import { FontCache } from './FontCache';
 
 const OBJECT_ARRAY = '[object Array]';
@@ -596,3 +596,20 @@ export function checkStyle(content: string) {
  }
  return false;
 }
+
+export function pxToNum(unit: string) {
+ return Number(unit.replace(/px/gi, ''));
+}
+
+export function getSizeForDom(dom: HTMLElement) {
+ const style = getComputedStyle(dom);
+ const { borderTopWidth, borderLeftWidth, borderRightWidth, borderBottomWidth, width, height } = style;
+ return {
+ top: pxToNum(borderTopWidth),
+ left: pxToNum(borderLeftWidth),
+ right: pxToNum(borderRightWidth),
+ bottom: pxToNum(borderBottomWidth),
+ width: pxToNum(width),
+ height: pxToNum(height),
+ };
+}

packages/base-render/src/Canvas.ts

@@ -137,6 +137,11 @@ export class Canvas {
  this.setSize(this._width, this._height, pixelRatio);
  }
 
+ dispose() {
+ this.clear();
+ this._canvasEle.remove();
+ }
+
  clear() {
  const ctx = this.getContext();
  ctx.clearRect(0, 0, this._width * this._pixelRatio, this._height * this._pixelRatio);

packages/base-render/src/Engine.ts

@@ -1,7 +1,7 @@
 import { Observable } from '@univer/core';
 import { DeviceType, IEvent, IKeyboardEvent, IPointerEvent, PointerInput } from './Basics/IEvents';
 
-import { getPointerPrefix, IsSafari, requestNewFrame } from './Basics/Tools';
+import { getSizeForDom, getPointerPrefix, IsSafari, requestNewFrame } from './Basics/Tools';
 
 import { ITransformChangeState, TRANSFORM_CHANGE_OBSERVABLE_TYPE } from './Basics/Interfaces';
 
@@ -46,6 +46,16 @@ export class Engine {
 
  private _performanceMonitor = new PerformanceMonitor();
 
+ private _pointerMoveEvent: (evt: any) => void;
+
+ private _pointerDownEvent: (evt: any) => void;
+
+ private _pointerUpEvent: (evt: any) => void;
+
+ private _pointerBlurEvent: (evt: any) => void;
+
+ private _pointerWheelEvent: (evt: any) => void;
+
  /**
  * Observable raised when the engine begins a new frame
  */
@@ -112,7 +122,7 @@ export class Engine {
  }
 
  hasActiveScene(): boolean {
- return !!this._activeScene;
+ return this._activeScene != null;
  }
 
  get activeScene() {
@@ -130,8 +140,9 @@ export class Engine {
  return;
  }
 
- const { offsetWidth, offsetHeight } = this._container;
- this.resizeBySize(offsetWidth, offsetHeight);
+ // const { offsetWidth, offsetHeight } = this._container;
+ const { width, height } = getSizeForDom(this._container);
+ this.resizeBySize(width, height);
  }
 
  resizeBySize(width: number, height: number) {
@@ -151,6 +162,35 @@ export class Engine {
  });
  }
 
+ dispose() {
+ const scenes = this.getScenes();
+ const sceneKeys = Object.keys(scenes);
+ sceneKeys.forEach((key) => {
+ scenes[key].dispose();
+ });
+ const eventPrefix = getPointerPrefix();
+ this._canvasEle.removeEventListener(`${eventPrefix}move`, this._pointerMoveEvent);
+ this._canvasEle.removeEventListener(`${eventPrefix}down`, this._pointerDownEvent);
+ this._canvasEle.removeEventListener(`${eventPrefix}up`, this._pointerUpEvent);
+ this._canvasEle.removeEventListener('blur', this._pointerBlurEvent);
+ this._canvasEle.removeEventListener(this._getWheelEventName(), this._pointerWheelEvent);
+
+ this._activeRenderLoops = [];
+ this._canvas.dispose();
+ this.onBeginFrameObservable.clear();
+ this.onEndFrameObservable.clear();
+ this.onTransformChangeObservable.clear();
+ }
+
+ remainScene(key: string) {
+ const scenes = this.getScenes();
+ if (scenes[key]) {
+ const scene = scenes[key];
+ delete scenes[key];
+ return scene;
+ }
+ }
+
  /**
  * Register and execute a render loop. The engine can have more than one render function
  * @param renderFunction defines the function to continuously execute
@@ -284,7 +324,7 @@ export class Engine {
  private _handlePointerAction() {
  const eventPrefix = getPointerPrefix();
 
- const pointerMoveEvent = (evt: any) => {
+ this._pointerMoveEvent = (evt: any) => {
  const deviceType = this.__getPointerType(evt);
  // Store previous values for event
  const previousHorizontal = this.__pointer[PointerInput.Horizontal];
@@ -339,7 +379,7 @@ export class Engine {
  }
  };
 
- const pointerDownEvent = (evt: any) => {
+ this._pointerDownEvent = (evt: any) => {
  const deviceType = this.__getPointerType(evt);
  const previousHorizontal = this.__pointer[PointerInput.Horizontal];
  const previousVertical = this.__pointer[PointerInput.Vertical];
@@ -397,7 +437,7 @@ export class Engine {
  // console.log('pointerDownEvent_2', previousHorizontal, evt.clientX, previousVertical, evt.clientY, this.__pointer);
  };
 
- const pointerUpEvent = (evt: any) => {
+ this._pointerUpEvent = (evt: any) => {
  const deviceType = this.__getPointerType(evt);
  const previousHorizontal = this.__pointer[PointerInput.Horizontal];
  const previousVertical = this.__pointer[PointerInput.Vertical];
@@ -443,7 +483,7 @@ export class Engine {
  }
  };
 
- const pointerBlurEvent = (evt: any) => {
+ this._pointerBlurEvent = (evt: any) => {
  if (this.__mouseId >= 0 && this._canvasEle.hasPointerCapture(this.__mouseId)) {
  this._canvasEle.releasePointerCapture(this.__mouseId);
  this.__mouseId = -1;
@@ -452,7 +492,7 @@ export class Engine {
  this.__pointer = {};
  };
 
- const pointerWheelEvent = (evt: any) => {
+ this._pointerWheelEvent = (evt: any) => {
  const deviceType = DeviceType.Mouse;
  // Store previous values for event
  let previousWheelScrollX = this.__pointer[PointerInput.MouseWheelX];
@@ -486,11 +526,11 @@ export class Engine {
  }
  };
 
- this._canvasEle.addEventListener(`${eventPrefix}move`, pointerMoveEvent);
- this._canvasEle.addEventListener(`${eventPrefix}down`, pointerDownEvent);
- this._canvasEle.addEventListener(`${eventPrefix}up`, pointerUpEvent);
- this._canvasEle.addEventListener('blur', pointerBlurEvent);
- this._canvasEle.addEventListener(this._getWheelEventName(), pointerWheelEvent, this._getPassive() ? { passive: false } : false);
+ this._canvasEle.addEventListener(`${eventPrefix}move`, this._pointerMoveEvent);
+ this._canvasEle.addEventListener(`${eventPrefix}down`, this._pointerDownEvent);
+ this._canvasEle.addEventListener(`${eventPrefix}up`, this._pointerUpEvent);
+ this._canvasEle.addEventListener('blur', this._pointerBlurEvent);
+ this._canvasEle.addEventListener(this._getWheelEventName(), this._pointerWheelEvent, this._getPassive() ? { passive: false } : false);
  }
 
  private _getWheelEventName(): string {

packages/base-render/src/Layer.ts

@@ -96,4 +96,15 @@ export class Layer {
  });
  return this;
  }
+
+ clear() {
+ this._objects = [];
+ }
+
+ dispose() {
+ this.getObjects().forEach((o) => {
+ o.dispose();
+ });
+ this.clear();
+ }
 }