feat(sheet): editor shortcuts (#332)

* refactor(sheet): sheet selection and theme * refactor(sheet): sheet selection and theme * fix(sheet): import error * fix(sheet): import error * fix(sheet): test error * feat(sheet): editor shortcuts * fix(ui-sheets): fix potential null subscription handling (#333) * chore: upgrade dependencies (#327) * feat: refactor `ColorPicker` (#329) * feat: refactor `ColorPicker` * feat: remove `ColorPickerCircleButton` * fix: resolve propagation issue * fix: fix styling of MenuItem * feat: remove react-colorful * chore: upgrade dependencies * fix(sheet): render refresh * fix(sheet): code review fix * refactor(sheet): sheet selection and theme * fix(sheet): import error * feat(sheet): editor shortcuts * fix(sheet): render refresh * fix(sheet): code review fix * fix(sheet): ts check * fix(sheet): test fix * fix(sheet): expand method * fix(sheet): expand error * feat(design): create `design` repo for developing UI components (#335) * feat(design): create `design` repo for developing UI components * feat(design): move `Tooltip` to design * feat(base-ui): remvoe theme from base-ui * feat(base-ui): remove unused code * fix(sheet): type error * fix(sheet): uppercase letters * refactor(sheet): sheet selection and theme * fix(sheet): import error * feat(sheet): editor shortcuts * fix(sheet): render refresh * fix(sheet): code review fix * refactor(sheet): sheet selection and theme * refactor(sheet): sheet selection and theme * fix(sheet): import error * feat(sheet): editor shortcuts * fix(sheet): render refresh * fix(sheet): code review fix * fix(sheet): ts check * fix(sheet): test fix * fix(sheet): expand method * fix(sheet): expand error * fix(sheet): type error --------- Co-authored-by: 白熱 <[email protected]>
dream-num · Oct 27, 2023 · be4a91a · be4a91a
1 parent 5189c13
commit be4a91a
Show file tree

Hide file tree

Showing 46 changed files with 2,588 additions and 1,484 deletions.
diff --git a/packages/base-docs/src/Controller/doc-render.controller.ts b/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;

diff --git a/packages/base-docs/src/commands/operations/cursor.operation.ts b/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;
  },
 };
diff --git a/packages/base-docs/src/index.ts b/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';

diff --git a/packages/base-render/src/Component/Sheets/SheetSkeleton.ts b/packages/base-render/src/Component/Sheets/SheetSkeleton.ts
@@ -355,8 +355,9 @@ export class SpreadsheetSkeleton extends Skeleton {
  }
 
  const { mergeData } = this._config;
-
- this._rowColumnSegment = this.getRowColumnSegment(bounds);
+ if (bounds != null) {
+ this._rowColumnSegment = this.getRowColumnSegment(bounds);
+ }
  this._dataMergeCache = mergeData && this._getMergeCells(mergeData, this._rowColumnSegment);
  this._calculateStylesCache();
  // this._overflowCache = this._calculateOverflowCache();
@@ -822,7 +823,14 @@ export class SpreadsheetSkeleton extends Skeleton {
  return rowHeightAccumulation[lastRowIndex] + columnHeaderHeightAndMarginTop;
  }
 
- getCellByIndex(row: number, column: number, scaleX: number, scaleY: number) {
+ /**
+ * Return cell information corresponding to the current coordinates, including the merged cell object.
+ * @param row Specified Row Coordinate
+ * @param column Specified Column Coordinate
+ * @param scaleX render scene scale x-axis, current Horizontal Scale, scene.getAncestorScale
+ * @param scaleY render scene scale y-axis, current Vertical Scale, scene.getAncestorScale
+ */
+ getCellByIndex(row: number, column: number, scaleX: number, scaleY: number): ISelectionCellWithCoord {
  const {
  rowHeightAccumulation,
  columnWidthAccumulation,

diff --git a/packages/base-render/src/Shape/ScrollBar.ts b/packages/base-render/src/Shape/ScrollBar.ts
@@ -339,7 +339,7 @@ export class ScrollBar extends BaseScrollBar {
  this.makeViewDirty(true);
  state.stopPropagation();
  });
- this._verticalPointerMoveObserver = mainScene.on(EVENT_TYPE.PointerMove, (evt: unknown, state: EventState) => {
+ this._verticalPointerMoveObserver = mainScene.onPointerMoveObserver.add((evt: unknown, state: EventState) => {
  const e = evt as IPointerEvent | IMouseEvent;
  if (!this._isVerticalMove) {
  return;
@@ -349,7 +349,7 @@ export class ScrollBar extends BaseScrollBar {
  });
  this._lastY = e.offsetY;
  });
- this._verticalPointerUpObserver = mainScene.on(EVENT_TYPE.PointerUp, (evt: unknown, state: EventState) => {
+ this._verticalPointerUpObserver = mainScene.onPointerUpObserver.add((evt: unknown, state: EventState) => {
  const e = evt as IPointerEvent | IMouseEvent;
  const srcElement = this.verticalThumbRect;
  this._isVerticalMove = false;
@@ -418,7 +418,7 @@ export class ScrollBar extends BaseScrollBar {
  mainScene.disableEvent();
  state.stopPropagation();
  });
- this._horizonPointerMoveObserver = mainScene.on(EVENT_TYPE.PointerMove, (evt: unknown, state: EventState) => {
+ this._horizonPointerMoveObserver = mainScene.onPointerMoveObserver.add((evt: unknown, state: EventState) => {
  const e = evt as IPointerEvent | IMouseEvent;
  if (!this._isHorizonMove) {
  return;
@@ -428,7 +428,7 @@ export class ScrollBar extends BaseScrollBar {
  });
  this._lastX = e.offsetX;
  });
- this._horizonPointerUpObserver = mainScene.on(EVENT_TYPE.PointerUp, (evt: unknown, state: EventState) => {
+ this._horizonPointerUpObserver = mainScene.onPointerUpObserver.add((evt: unknown, state: EventState) => {
  const e = evt as IPointerEvent | IMouseEvent;
  const srcElement = this.horizonThumbRect;
  this._isHorizonMove = false;

diff --git a/packages/base-sheets/src/Basics/Const/COMMAND_LISTENER_CONST.ts b/packages/base-sheets/src/Basics/Const/COMMAND_LISTENER_CONST.ts
@@ -28,10 +28,10 @@ export const COMMAND_LISTENER_SKELETON_CHANGE = [
  AddWorksheetMergeMutation.id,
  RemoveWorksheetMergeMutation.id,
  MoveRowsMutation.id,
- SetRangeValuesMutation.id,
- SetBorderStylesMutation.id,
  SetColHiddenMutation.id,
  SetColVisibleMutation.id,
  SetRowHiddenMutation.id,
  SetRowVisibleMutation.id,
 ];
+
+export const COMMAND_LISTENER_VALUE_CHANGE = [SetBorderStylesMutation.id, SetRangeValuesMutation.id];
diff --git a/packages/base-sheets/src/Basics/selection.ts b/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,25 +35,76 @@ 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 {
+ /**
+ * The volume of the selection border determines the thickness of the selection border
+ */
  strokeWidth: number;
+ /**
+ * The color of the selection border.
+ */
  stroke: string;
+ /**
+ * 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.
+ */
+ strokeDash?: number;
+ /**
+ * 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.
+ */
  fill: string;
+ /**
+ * 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
+ */
  widgets: ISelectionWidgetConfig;
+ /**
+ * The volume of the touch points.
+ */
  widgetSize?: number;
+ /**
+ * The thickness of the border of the touch points
+ */
  widgetStrokeWidth?: number;
+ /**
+ * The color of the touch points.
+ */
  widgetStroke?: string;
 
+ /**
+ * https://support.microsoft.com/en-us/office/copy-a-formula-by-dragging-the-fill-handle-in-excel-for-mac-dd928259-622b-473f-9a33-83aa1a63e218
+ * Whether to show the drop-down fill button at the bottom right corner of the selection.
+ */
  hasAutoFill: boolean;
- AutofillSize?: number;
- AutofillStrokeWidth?: number;
- AutofillStroke?: string;
+ 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.
 
+ /**
+ * Whether to synchronize the display of row title highlights, the highlighting range is consistent with the horizontal range of the selection.
+ */
  hasRowHeader?: boolean;
+ /**
+ * The color of the row title highlight.
+ * A level of transparency should be set to avoid covering the row title content.
+ */
  rowHeaderFill?: string;
+ /**
+ * The color of the bottom border of the row title.
+ */
  rowHeaderStroke?: string;
+ /**
+ * The color of the bottom border of the row title.
+ */
  rowHeaderStrokeWidth?: number;
 
+ /**
+ * The setting of column title highlight is similar to that of row title.
+ */
  hasColumnHeader?: boolean;
  columnHeaderFill?: string;
  columnHeaderStroke?: string;
@@ -56,12 +119,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: {},
@@ -86,6 +151,14 @@ export function getNormalSelectionStyle(themeService: ThemeService): ISelectionS
  };
 }
 
+/**
+ * Process a selection with coordinates and style,
+ * and extract the coordinate information, because the render needs coordinates when drawing.
+ * Since the selection.manager.service is unrelated to the coordinates,
+ * it only accepts data of type ISelectionWithStyle, so a conversion is necessary.
+ * @param selectionWithCoordAndStyle Selection with coordinates and style
+ * @returns
+ */
 export function convertSelectionDataToRange(
  selectionWithCoordAndStyle: ISelectionWithCoordAndStyle
 ): ISelectionWithStyle {
@@ -118,6 +191,29 @@ export function convertSelectionDataToRange(
  return result;
 }
 
-export const SELECTION_CONTROL_BORDER_BUFFER_WIDTH = 4;
+/**
+ * Convert the coordinates of a single cell into a selection data.
+ * @param row Specified Row Coordinate
+ * @param column Specified Column Coordinate
+ * @param mergeData Obtain the data of merged cells through the worksheet object.
+ * @returns ISelectionWithStyle
+ */
+export function transformCellDataToSelectionData(
+ row: number,
+ column: number,
+ mergeData: IRange[]
+): Nullable<ISelectionWithStyle> {
+ const newCellRange = getCellInfoInMergeData(row, column, mergeData);
+
+ const newSelectionData = makeCellRangeToRangeData(newCellRange);
 
-export const SELECTION_CONTROL_BORDER_BUFFER_COLOR = 'rgba(255,255,255, 0.01)';
+ if (!newSelectionData) {
+ return;
+ }
+
+ return {
+ range: newSelectionData,
+ primary: newCellRange,
+ style: null,
+ };
+}