feat(sheet): editor shortcuts

packages/base-docs/src/Controller/doc-render.controller.ts

@@ -88,15 +88,15 @@ export class DocRenderController extends Disposable {
 
  if (engineWidth > docsWidth) {
  docsLeft = engineWidth / 2 - docsWidth / 2;
- sceneWidth = engineWidth - 30;
+ sceneWidth = engineWidth - 34;
  } else {
  docsLeft = pageMarginLeft;
  sceneWidth = docsWidth + pageMarginLeft * 2;
  }
 
  if (engineHeight > docsHeight) {
  docsTop = engineHeight / 2 - docsHeight / 2;
- sceneHeight = engineHeight - 30;
+ sceneHeight = engineHeight - 34;
  } else {
  docsTop = pageMarginTop;
  sceneHeight = docsHeight + pageMarginTop * 2;

packages/base-docs/src/commands/operations/cursor.operation.ts

@@ -17,11 +17,6 @@ export const MoveCursorOperation: IOperation<IMoveCursorOperationParams> = {
  return false;
  }
 
- // const univerInstanceService = accessor.get(IUniverInstanceService);
- // const inputController = accessor.get(InputController);
-
- // inputController.moveCursor(univerInstanceService.getCurrentUniverDocInstance(), params.direction);
-
  return true;
  },
 };

packages/base-docs/src/index.ts

@@ -12,10 +12,12 @@ export {
  type IUpdateCommandParams,
  UpdateCommand,
 } from './commands/commands/core-editing.command';
+export { BreakLineCommand, DeleteLeftCommand } from './commands/commands/core-editing.command';
 export {
  type IRichTextEditingMutationParams,
  RichTextEditingMutation,
 } from './commands/mutations/core-editing.mutation';
+export { MoveCursorOperation } from './commands/operations/cursor.operation';
 export * from './DocPlugin';
 export * from './Locale';
 export { DocSkeletonManagerService } from './services/doc-skeleton-manager.service';

packages/base-sheets/src/Basics/selection.ts

@@ -1,5 +1,17 @@
 import { TinyColor } from '@ctrl/tinycolor';
-import { ISelection, ISelectionWithCoord, Nullable, ThemeService } from '@univerjs/core';
+import { getCellInfoInMergeData } from '@univerjs/base-render';
+import {
+ IRange,
+ ISelection,
+ ISelectionWithCoord,
+ makeCellRangeToRangeData,
+ Nullable,
+ ThemeService,
+} from '@univerjs/core';
+
+export const SELECTION_CONTROL_BORDER_BUFFER_WIDTH = 4; // The draggable range of the selection is too thin, making it easy for users to miss. Therefore, a buffer gap is provided to make it easier for users to select.
+
+export const SELECTION_CONTROL_BORDER_BUFFER_COLOR = 'rgba(255,255,255, 0.01)';
 
 /**
  * Whether to display the controller that modifies the selection, distributed in 8 locations
@@ -23,26 +35,31 @@ export interface ISelectionWidgetConfig {
  br?: boolean;
 }
 
+/**
+ * https://support.microsoft.com/en-us/office/select-cell-contents-in-excel-23f64223-2b6b-453a-8688-248355f10fa9
+ */
 export interface ISelectionStyle {
- strokeWidth: number;
- stroke: string;
- fill: string;
- widgets: ISelectionWidgetConfig;
- widgetSize?: number;
- widgetStrokeWidth?: number;
- widgetStroke?: string;
-
- hasAutoFill: boolean;
- AutofillSize?: number;
- AutofillStrokeWidth?: number;
- AutofillStroke?: string;
-
- hasRowHeader?: boolean;
- rowHeaderFill?: string;
- rowHeaderStroke?: string;
- rowHeaderStrokeWidth?: number;
-
- hasColumnHeader?: boolean;
+ strokeWidth: number; // The volume of the selection border determines the thickness of the selection border
+ stroke: string; // The color of the selection border.
+ strokeDash?: number; // The dashed line of the selection border. Here, the dashed line is a numerical value, different from the canvas dashed line setting. It is implemented internally as [0, strokeDash]. Setting it to 8 will look more aesthetically pleasing.
+ fill: string; // The fill color inside the selection. It needs to have a level of transparency, otherwise content in the covered area of the selection will be obscured.
+ widgets: ISelectionWidgetConfig; // The eight touch points of the selection. You can refer to Excel's formula and chart selections, which allow you to manually adjust the size of the selection. Univer has four more touch points (up, down, left, and right) than Excel. https://support.microsoft.com/en-us/office/select-data-for-a-chart-5fca57b7-8c52-4e09-979a-631085113862
+ widgetSize?: number; // The volume of the touch points.
+ widgetStrokeWidth?: number; // The thickness of the border of the touch points
+ widgetStroke?: string; // The color of the touch points.
+
+ // https://support.microsoft.com/en-us/office/copy-a-formula-by-dragging-the-fill-handle-in-excel-for-mac-dd928259-622b-473f-9a33-83aa1a63e218
+ hasAutoFill: boolean; // Whether to show the drop-down fill button at the bottom right corner of the selection.
+ AutofillSize?: number; // The size of the fill button.
+ AutofillStrokeWidth?: number; // The border size of the fill button.
+ AutofillStroke?: string; // The color of the fill button.
+
+ hasRowHeader?: boolean; // Whether to synchronize the display of row title highlights, the highlighting range is consistent with the horizontal range of the selection.
+ rowHeaderFill?: string; // The color of the row title highlight. A level of transparency should be set to avoid covering the row title content.
+ rowHeaderStroke?: string; // The color of the bottom border of the row title.
+ rowHeaderStrokeWidth?: number; // The color of the bottom border of the row title.
+
+ hasColumnHeader?: boolean; // The setting of column title highlight is similar to that of row title.
  columnHeaderFill?: string;
  columnHeaderStroke?: string;
  columnHeaderStrokeWidth?: number;
@@ -56,12 +73,14 @@ export interface ISelectionWithStyle extends ISelection {
  style: Nullable<ISelectionStyle>;
 }
 
+// The default configuration of the selection.
 export function getNormalSelectionStyle(themeService: ThemeService): ISelectionStyle {
  const style = themeService.getCurrentTheme();
  const fill = new TinyColor(style.colorBlack).setAlpha(0.1).toString();
  return {
  strokeWidth: 2,
  stroke: style.primaryColor,
+ // strokeDash: 8,
  fill,
  // widgets: { tl: true, tc: true, tr: true, ml: true, mr: true, bl: true, bc: true, br: true },
  widgets: {},
@@ -118,6 +137,22 @@ export function convertSelectionDataToRange(
  return result;
 }
 
-export const SELECTION_CONTROL_BORDER_BUFFER_WIDTH = 4;
+export function transformCellDataToSelectionData(
+ row: number,
+ column: number,
+ mergeData: IRange[]
+): Nullable<ISelectionWithStyle> {
+ const newCellRange = getCellInfoInMergeData(row, column, mergeData);
 
-export const SELECTION_CONTROL_BORDER_BUFFER_COLOR = 'rgba(255,255,255, 0.01)';
+ const newSelectionData = makeCellRangeToRangeData(newCellRange);
+
+ if (!newSelectionData) {
+ return;
+ }
+
+ return {
+ range: newSelectionData,
+ primary: newCellRange,
+ style: null,
+ };
+}

packages/base-sheets/src/Controller/Selection.controller.ts

@@ -62,7 +62,7 @@ export class SelectionController extends Disposable {
 
  this._commandExecutedListener();
 
- spreadsheetLeftTopPlaceholder?.onPointerDownObserver.add((evt: IPointerEvent | IMouseEvent) => {});
+ spreadsheetLeftTopPlaceholder?.onPointerDownObserver.add(() => {});
 
  this._userActionSyncListener();
 
@@ -99,6 +99,9 @@ export class SelectionController extends Disposable {
  }
  this._selectionRenderService.reset();
  for (const selectionWithStyle of param) {
+ if (selectionWithStyle == null) {
+ continue;
+ }
  const selectionData = this._selectionRenderService.convertSelectionRangeToData(selectionWithStyle);
  selectionData.style = getNormalSelectionStyle(this._themeService);
  this._selectionRenderService.addControlToCurrentByRangeData(selectionData);
@@ -122,7 +125,7 @@ export class SelectionController extends Disposable {
  }
  });
 
- spreadsheetRowHeader?.onPointerMoveObserver.add((evt: IPointerEvent | IMouseEvent, state) => {});
+ // spreadsheetRowHeader?.onPointerMoveObserver.add((evt: IPointerEvent | IMouseEvent, state) => {});
  }
 
  private _initialColumnHeader(sheetObject: ISheetObjectParam) {
@@ -150,6 +153,9 @@ export class SelectionController extends Disposable {
  }
 
  for (const selectionWithStyle of param) {
+ if (selectionWithStyle == null) {
+ continue;
+ }
  const selectionData = this._selectionRenderService.convertSelectionRangeToData(selectionWithStyle);
  this._selectionRenderService.addControlToCurrentByRangeData(selectionData);
  }
@@ -204,7 +210,7 @@ export class SelectionController extends Disposable {
  if (param == null) {
  return;
  }
- const { unitId, sheetId, skeleton, commandId } = param;
+ const { unitId, sheetId, skeleton } = param;
 
  const currentRender = this._renderManagerService.getRenderById(unitId);
 

packages/base-sheets/src/Controller/header-menu.controller.ts

@@ -96,19 +96,19 @@ export class HeaderMenuController extends Disposable {
  return;
  }
 
- const { spreadsheetColumnHeader, spreadsheetRowHeader, scene } = sheetObject;
+ const { spreadsheetColumnHeader, spreadsheetRowHeader } = sheetObject;
 
  const eventBindingObject =
  initialType === HEADER_HOVER_TYPE.ROW ? spreadsheetRowHeader : spreadsheetColumnHeader;
 
  this._observers.push(
- eventBindingObject?.onPointerEnterObserver.add((evt: IPointerEvent | IMouseEvent, state) => {
+ eventBindingObject?.onPointerEnterObserver.add(() => {
  this._hoverRect?.show();
  })
  );
 
  this._observers.push(
- eventBindingObject?.onPointerMoveObserver.add((evt: IPointerEvent | IMouseEvent, state) => {
+ eventBindingObject?.onPointerMoveObserver.add((evt: IPointerEvent | IMouseEvent) => {
  const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton;
  if (skeleton == null) {
  return;
@@ -121,7 +121,7 @@ export class HeaderMenuController extends Disposable {
 
  const { rowHeaderWidth, columnHeaderHeight } = skeleton;
 
- const { startX, startY, endX, endY, row, column } = getCoordByOffset(
+ const { startX, startY, endX, endY, column } = getCoordByOffset(
  evt.offsetX,
  evt.offsetY,
  sheetObject.scene,
@@ -169,7 +169,7 @@ export class HeaderMenuController extends Disposable {
  );
 
  this._observers.push(
- eventBindingObject?.onPointerLeaveObserver.add((evt: IPointerEvent | IMouseEvent, state) => {
+ eventBindingObject?.onPointerLeaveObserver.add(() => {
  this._hoverRect?.hide();
  this._hoverMenu?.hide();
  })
@@ -217,7 +217,7 @@ export class HeaderMenuController extends Disposable {
  sheetObject.scene.resetCursor();
  });
 
- this._hoverMenu.onPointerDownObserver.add((evt: IPointerEvent | IMouseEvent, state) => {
+ this._hoverMenu.onPointerDownObserver.add((evt: IPointerEvent | IMouseEvent) => {
  const sheetObject = this._getSheetObject();
  if (sheetObject == null) {
  return;
@@ -228,7 +228,7 @@ export class HeaderMenuController extends Disposable {
  const currentSelectionDatas = this._selectionManagerService.getSelectionRanges();
 
  const selectedSelection = currentSelectionDatas?.find((data) => {
- const { startRow, startColumn, endRow, endColumn } = data;
+ const { startColumn, endColumn } = data;
  if (currentColumn >= startColumn && startColumn <= endColumn) {
  return true;
  }

packages/base-sheets/src/Controller/header-move.controller.ts

@@ -111,8 +111,7 @@ export class HeaderMoveController extends Disposable {
  @IUniverInstanceService private readonly _currentUniverService: IUniverInstanceService,
  @IRenderManagerService private readonly _renderManagerService: IRenderManagerService,
  @ICommandService private readonly _commandService: ICommandService,
- @ISelectionRenderService
- private readonly _selectionRenderService: ISelectionRenderService,
+ @ISelectionRenderService private readonly _selectionRenderService: ISelectionRenderService,
  @Inject(SelectionManagerService) private readonly _selectionManagerService: SelectionManagerService
  ) {
  super();
@@ -140,18 +139,13 @@ export class HeaderMoveController extends Disposable {
  initialType === HEADER_MOVE_TYPE.ROW ? spreadsheetRowHeader : spreadsheetColumnHeader;
 
  this._rowOrColumnMoveObservers.push(
- eventBindingObject?.onPointerMoveObserver.add((evt: IPointerEvent | IMouseEvent, state) => {
+ eventBindingObject?.onPointerMoveObserver.add((evt: IPointerEvent | IMouseEvent) => {
  const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton;
  if (skeleton == null) {
  return;
  }
 
- const { startX, startY, endX, endY, row, column } = getCoordByOffset(
- evt.offsetX,
- evt.offsetY,
- scene,
- skeleton
- );
+ const { row, column } = getCoordByOffset(evt.offsetX, evt.offsetY, scene, skeleton);
 
  const matchSelectionData = this._checkInHeaderRange(
  initialType === HEADER_MOVE_TYPE.ROW ? row : column,
@@ -171,7 +165,7 @@ export class HeaderMoveController extends Disposable {
  );
 
  this._rowOrColumnLeaveObservers.push(
- eventBindingObject?.onPointerLeaveObserver.add((evt: IPointerEvent | IMouseEvent, state) => {
+ eventBindingObject?.onPointerLeaveObserver.add(() => {
  this._moveHelperBackgroundShape?.hide();
  this._moveHelperLineShape?.hide();
  scene.resetCursor();
@@ -180,7 +174,7 @@ export class HeaderMoveController extends Disposable {
  );
 
  this._rowOrColumnDownObservers.push(
- eventBindingObject?.onPointerDownObserver.add((evt: IPointerEvent | IMouseEvent, state) => {
+ eventBindingObject?.onPointerDownObserver.add((evt: IPointerEvent | IMouseEvent) => {
  const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton;
  if (skeleton == null) {
  return;
@@ -196,12 +190,7 @@ export class HeaderMoveController extends Disposable {
 
  this._startOffsetY = newEvtOffsetY;
 
- const { startX, startY, endX, endY, row, column } = getCoordByOffset(
- evt.offsetX,
- evt.offsetY,
- scene,
- skeleton
- );
+ const { row, column } = getCoordByOffset(evt.offsetX, evt.offsetY, scene, skeleton);
 
  if (initialType === HEADER_MOVE_TYPE.ROW) {
  this._changeFromRow = row;
@@ -248,7 +237,7 @@ export class HeaderMoveController extends Disposable {
  });
  });
 
- this._upObserver = scene.onPointerUpObserver.add((_upEvt: IPointerEvent | IMouseEvent) => {
+ this._upObserver = scene.onPointerUpObserver.add(() => {
  this._disposeBackgroundAndLine();
  scene.resetCursor();
  scene.enableEvent();

packages/base-sheets/src/SheetPlugin.ts

@@ -22,6 +22,7 @@ import { ScrollManagerService } from './services/scroll-manager.service';
 import { SelectionManagerService } from './services/selection/selection-manager.service';
 import { ISelectionRenderService, SelectionRenderService } from './services/selection/selection-render.service';
 import { SheetSkeletonManagerService } from './services/sheet-skeleton-manager.service';
+import { ShortcutExperienceService } from './services/shortcut-experience.service';
 import { SheetCanvasView } from './View/sheet-canvas-view';
 
 /**
@@ -64,6 +65,7 @@ export class SheetPlugin extends Plugin {
  ],
  [ScrollManagerService],
  [SelectionManagerService],
+ [ShortcutExperienceService],
 
  // controllers
  [FormulaBarController],