chore: use mobile-selection-shape.ts

packages/engine-render/src/components/sheets/spreadsheet.ts

@@ -779,65 +779,7 @@ export class Spreadsheet extends SheetComponent {
  return color;
  }
 
- private _lastPointerPos: IPoint;
- private _pointerScrolling: boolean;
  initUserEvents() {
  // control spreadsheet scrolling
-
- // move to scroll.render-controller
-
- // scene.input-manager@triggerPointerDown --> this.onPointerMoveObserver.notifyObservers
- // this.on(EVENT_TYPE.PointerDown, (evt: unknown, state: EventState) => {
- // const e = evt as IPointerEvent | IMouseEvent;
- // // console.log('....', e, this.width, this.height);
- // // this._view.scrollTo({
- // // x: e.offsetX - this._view.left - this.horizontalThumbWidth / 2,
- // // });
- // this._lastPointerPos = { x: e.offsetX, y: e.offsetY };
- // this._pointerScrolling = true;
- // state.stopPropagation();
- // });
-
- // this.on(EVENT_TYPE.PointerMove, (evt: unknown, state: EventState) => {
- // if (!this._pointerScrolling) return;
- // console.log('spreadsheet moving...........');
- // const e = evt as IPointerEvent | IMouseEvent;
- // const viewMain = (this.getScene() as Scene).getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
- // if (!viewMain) return;
- // const deltaX = -(e.offsetX - this._lastPointerPos.x);
- // const deltaY = -(e.offsetY - this._lastPointerPos.y);
- // // const viewportScrollX = viewMain.viewportScrollX + deltaX;
- // // const viewportScrollY = viewMain.viewportScrollY + deltaY;
- // if (deltaX !== 0 || deltaY !== 0) {
- // console.log('....delta', deltaX, deltaY);
- // }
-
- // viewMain.scrollByViewportScroll({
- // deltaX,
- // deltaY,
- // });
- // this._lastPointerPos = { x: e.offsetX, y: e.offsetY };
- // state.stopPropagation();
- // });
-
- // this.on(EVENT_TYPE.PointerUp, (evt: unknown, state: EventState) => {
- // this._pointerScrolling = false;
- // console.log('%c moving end!! PointerUp', 'color: red');
- // });
- // this.on(EVENT_TYPE.PointerUp, (evt: unknown, state: EventState) => {
- // this._pointerScrolling = false;
- // console.log('%c moving end!! PointerUp', 'color: red');
- // });
- // this.on(EVENT_TYPE.PointerOut, (evt: unknown, state: EventState) => {
- // this._pointerScrolling = false;
- // console.log('%c moving end!! PointerOut', 'color: red');
- // });
- // this.on(EVENT_TYPE.PointerLeave, (evt: unknown, state: EventState) => {
- // // this._pointerScrolling = false;
- // console.log('%c moving end!! PointerLeave', 'color: red', this._pointerScrolling);
- // });
- // this.on(EVENT_TYPE.PointerCancel, (evt: unknown, state: EventState) => {
- // this._pointerScrolling = false;
- // });
  }
 }

packages/engine-render/src/scene.input-manager.ts

@@ -156,7 +156,7 @@ export class InputManager extends Disposable {
  }
  }
 
- pointerId = 0;
+ private _pointerId = 0;
 
  // eslint-disable-next-line max-lines-per-function
  attachControl(
@@ -238,7 +238,7 @@ export class InputManager extends Disposable {
  if (evt.pointerId === undefined) {
  (evt as any).pointerId = 0;
  }
- this.pointerId = evt.pointerId;
+ this._pointerId = evt.pointerId;
  const currentObject = this._getCurrentObject(evt.offsetX, evt.offsetY);
 
  console.log('!!!scene _onPointerDown', currentObject?.oKey);

packages/engine-render/src/scene.ts

@@ -372,6 +372,12 @@ export class Scene extends ThinScene {
  this._layers.push(...argument);
  }
 
+ override addObjects(objects: BaseObject[], zIndex: number = 1) {
+ this.getLayer(zIndex)?.addObjects(objects);
+ this._addObject$.next(this);
+ return this;
+ }
+
  override addObject(o: BaseObject, zIndex: number = 1) {
  // objects.forEach((o) => {
  // if (o.oKey === '__SpreadsheetSelectionFillControlTopLeft__0') {
@@ -394,18 +400,6 @@ export class Scene extends ThinScene {
  o.onIsAddedToParentObserver.notifyObservers(this);
  }
 
- override addObjects(objects: BaseObject[], zIndex: number = 1) {
- objects.forEach((o) => {
- if (o.oKey === '__SpreadsheetSelectionFillControlTopLeft__0') {
- // eslint-disable-next-line no-debugger
- debugger;
- }
- });
- this.getLayer(zIndex)?.addObjects(objects);
- this._addObject$.next(this);
- return this;
- }
-
  removeObject(object?: BaseObject | string) {
  if (object == null) {
  return;

packages/engine-render/src/shape/rect.ts

@@ -34,23 +34,6 @@ export const RECT_OBJECT_ARRAY = ['radius'];
 export class Rect<T extends IRectProps = IRectProps> extends Shape<T> {
  private _radius: number = 0;
 
- /**
- * the X value of rect topleft position in scene (same cordinate as viewport)
- */
- private _startX: number = 0;
- /**
- * the Y of rect topleft position in scene (same cordinate as viewport)
- */
- private _startY: number = 0;
- /**
- * the X value of rect bottomright position in scene (same cordinate as viewport)
- */
- private _endX: number = 0;
- /**
- * the Y value of rect bottomright position in scene (same cordinate as viewport)
- */
- private _endY: number = 0;
-
  constructor(key?: string, props?: T) {
  super(key, props);
  if (props?.radius) {
@@ -62,34 +45,6 @@ export class Rect<T extends IRectProps = IRectProps> extends Shape<T> {
  return this._radius;
  }
 
- /**
- * the X value of rect topleft position in scene (same cordinate as viewport)
- */
- get startX() {
- return this._startX;
- }
-
- /**
- * the Y of rect topleft position in scene (same cordinate as viewport)
- */
- get startY() {
- return this._startY;
- }
-
- /**
- * the X value of rect bottomright position in scene (same cordinate as viewport)
- */
- get endX() {
- return this._endX;
- }
-
- /**
- * the Y value of rect bottomright position in scene (same cordinate as viewport)
- */
- get endY() {
- return this._endY;
- }
-
  static override drawWith(ctx: UniverRenderingContext, props: IRectProps | Rect) {
  let { radius, left, top, width, height } = props;
 

packages/engine-render/src/shape/scroll-bar.ts

@@ -362,24 +362,19 @@ export class ScrollBar extends BaseScrollBar {
  this.makeViewDirty(true);
  state.stopPropagation();
  });
- this._verticalPointerMoveObserver = mainScene.onPointerMoveObserver.add((evt: unknown, state: EventState) => {
+ this._verticalPointerMoveObserver = mainScene.onPointerMoveObserver.add((evt: unknown, _state: EventState) => {
  const e = evt as IPointerEvent | IMouseEvent;
  if (!this._isVerticalMove) {
- // console.log('delta', this._lastY);
- // this._view.scrollToByViewportScroll({
- // viewportScrollY: -(e.offsetY - this._lastY),
- // });
  return;
- } else {
- this._view.scrollByBar({
- y: e.offsetY - this._lastY,
- });
  }
+ this._view.scrollByBar({
+ y: e.offsetY - this._lastY,
+ });
+
  this._lastY = e.offsetY;
  mainScene.getEngine()?.setRemainCapture();
  });
- this._verticalPointerUpObserver = mainScene.onPointerUpObserver.add((evt: unknown, state: EventState) => {
- const e = evt as IPointerEvent | IMouseEvent;
+ this._verticalPointerUpObserver = mainScene.onPointerUpObserver.add((evt: unknown, _state: EventState) => {
  const srcElement = this.verticalThumbRect;
  this._isVerticalMove = false;
  // srcElement.fill = this._thumbBackgroundColor!;

packages/engine-render/src/viewport.ts

@@ -548,11 +548,14 @@ export class Viewport {
 
  /**
  * current position plus offset, relative
+ * normally triggered by scroll-timer(in sheet)
  * @param pos
  * @returns isLimited
  */
  scrollBy(pos: IScrollBarPosition, isTrigger = true) {
- return this._scrollToScrollbarPos(SCROLL_TYPE.scrollBy, pos, isTrigger);
+ pos.x = this.scrollX + (pos.x || 0);
+ pos.y = this.scrollY + (pos.y || 0);
+ return this._scrollToScrollbarPos(SCROLL_TYPE.scrollTo, pos, isTrigger);
  }
 
  /**
@@ -561,8 +564,8 @@ export class Viewport {
  * @param isTrigger
  */
  scrollByBar(pos: IScrollBarPosition, isTrigger = true) {
- // pos.x = this.scrollX + (pos.x || 0);
- // pos.y = this.scrollY + (pos.y || 0);
+ pos.x = this.scrollX + (pos.x || 0);
+ pos.y = this.scrollY + (pos.y || 0);
  this._scrollToScrollbarPos(SCROLL_TYPE.scrollTo, pos, isTrigger);
  const { x, y } = pos;
  this.onScrollByBarObserver.notifyObservers({
@@ -987,6 +990,12 @@ export class Viewport {
  return svCoord;
  }
 
+ /**
+ * At f7140a7c11, only doc need this method.
+ * In sheet, wheel event is handled by scroll-manager.service@setScrollInfo
+ * @param evt
+ * @param state
+ */
  // eslint-disable-next-line complexity, max-lines-per-function
  onMouseWheel(evt: IWheelEvent, state: EventState) {
  if (!this._scrollBar || this.isActive === false) {

packages/sheets-filter-ui/src/controllers/sheets-filter-render.controller.ts

@@ -133,7 +133,7 @@ export class SheetsFilterRenderController extends RxDisposable implements IRende
  });
 
  const { rowHeaderWidth, columnHeaderHeight } = skeleton;
- const filterRangeShape = this._filterRangeShape = new SelectionShape(scene, DEFAULT_Z_INDEX, true, false, this._themeService);
+ const filterRangeShape = this._filterRangeShape = new SelectionShape(scene, DEFAULT_Z_INDEX, true, this._themeService);
  filterRangeShape.update(rangeWithCoord, rowHeaderWidth, columnHeaderHeight, {
  hasAutoFill: false,
  fill: 'rgba(0, 0, 0, 0.0)',

packages/sheets-ui/src/services/mark-selection/mark-selection.service.ts

@@ -99,7 +99,7 @@ export class MarkSelectionService extends Disposable implements IMarkSelectionSe
  if (!scene || !skeleton) return;
 
  const { rowHeaderWidth, columnHeaderHeight } = skeleton;
- const control = new SelectionControl(scene, zIndex, false, false, this._themeService);
+ const control = new SelectionControl(scene, zIndex, false, this._themeService);
  control.update(rangeWithCoord, rowHeaderWidth, columnHeaderHeight, style, primaryWithCoord);
  shape.control = control;
  });

packages/sheets-ui/src/services/selection/__test__/selection-render.test.ts

@@ -232,7 +232,7 @@ describe('Test indirect', () => {
  selectionServiceUsable = param;
  });
 
- selectionRenderService.expandSelectionEventTrigger(mockEvent);
+ selectionRenderService.eventTrigger(mockEvent);
 
  scene.triggerPointerMove({ ...mockEvent, offsetX: 200 });
 

packages/sheets-ui/src/services/selection/mobile-selection-render.service.ts

@@ -38,8 +38,9 @@ import { BehaviorSubject, Subject } from 'rxjs';
 import { SheetSkeletonManagerService } from '../sheet-skeleton-manager.service';
 import { getSheetObject } from '../../controllers/utils/component-tools';
 import type { SelectionRenderModel } from './selection-render-model';
-import { SelectionControl } from './selection-shape';
+import type { SelectionControl } from './selection-shape';
 import { type IControlFillConfig, type ISelectionRenderService, RANGE_FILL_PERMISSION_CHECK, RANGE_MOVE_PERMISSION_CHECK } from './selection-render.service';
+import { MobileSelectionControl } from './mobile-selection-shape';
 
 enum ExpandingCorner {
  BOTTOM_RIGHT = 'bottom-right',
@@ -264,7 +265,7 @@ export class MobileSelectionRenderService implements ISelectionRenderService {
  if (scene == null || skeleton == null) {
  return;
  }
- const control = new SelectionControl(scene, currentControls.length, this._isHeaderHighlight, true, this._themeService);
+ const control = new MobileSelectionControl(scene, currentControls.length, this._isHeaderHighlight, this._themeService);
 
  // new SelectionShapeExtension(control, skeleton, scene, this._themeService, this._injector);
 
@@ -686,11 +687,10 @@ export class MobileSelectionRenderService implements ISelectionRenderService {
  /**
  * The default behavior is to clear previous selections and always create new selections.
  */
- activeSelectionControl = new SelectionControl(
+ activeSelectionControl = new MobileSelectionControl(
  scene,
  curControls.length + zIndex,
  this._isHeaderHighlight,
- true,
  this._themeService
  );
 
@@ -1148,7 +1148,7 @@ export class MobileSelectionRenderService implements ISelectionRenderService {
  return false;
  }
 
- const { startRow: startRowOfActiveCell, startColumn: startColumnOfActiveCell, endRow: endRowOfActiveCell, endColumn: endColOfActiveCell } = activeSelectionControl?.model.currentCell?.mergeInfo || { startRow: -1, endRow: -1, startColumn: -1, endColumn: -1 }; ;
+ const { startRow: startRowOfActiveCell, startColumn: startColumnOfActiveCell, endRow: endRowOfActiveCell, endColumn: endColOfActiveCell } = activeSelectionControl?.model.currentCell?.mergeInfo || { startRow: -1, endRow: -1, startColumn: -1, endColumn: -1 };
 
  const {
  startRow: currSelCtrlStartRow,