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-render/package.json

@@ -44,7 +44,6 @@
  "esbuild": "node ./esbuild.config.mjs"
  },
  "dependencies": {
- "@ctrl/tinycolor": "^4.0.2",
  "@univerjs/core": "workspace:^0.0.1",
  "@wendellhu/redi": "^0.12.8",
  "react": "^18.2.0",

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

@@ -8,7 +8,6 @@ export * from './Interfaces';
 export * from './Path2';
 export * from './PerformanceMonitor';
 export * from './ScrollXY';
-export * from './Selection';
 export * from './TextSelection';
 export * from './Tools';
 export * from './Transform';

packages/base-render/src/Component/Sheets/index.ts

@@ -2,9 +2,6 @@ export * from './ColumnHeader';
 export * from './Extensions';
 export * from './Interfaces';
 export * from './RowHeader';
-export * from './Selection/selection-transformer-model';
-export * from './Selection/selection-transformer-shape';
-export * from './Selection/selection-transformer-shape-manager';
 export * from './SheetComponent';
 export * from './SheetSkeleton';
 export * from './Spreadsheet';

packages/base-sheets/package.json

@@ -49,7 +49,8 @@
  "@wendellhu/redi": "^0.12.8",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
- "rxjs": "^7.8.1"
+ "rxjs": "^7.8.1",
+ "@ctrl/tinycolor": "^4.0.2"
  },
  "devDependencies": {
  "@types/node": "^18.14.0",
@@ -62,4 +63,4 @@
  "ts-node": "^10.9.1",
  "vitest": "^0.34.5"
  }
-}
+}

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

@@ -0,0 +1,158 @@
+import { TinyColor } from '@ctrl/tinycolor';
+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
+ * tl top_left_corner
+ * tc top_center_corner
+ * tr top_right_corner
+ * ml middle_left_corner
+ * mr middle_right_corner
+ * bl bottom_left_corner
+ * bc bottom_center_corner
+ * br bottom_right_corner
+ */
+export interface ISelectionWidgetConfig {
+ tl?: boolean;
+ tc?: boolean;
+ tr?: boolean;
+ ml?: boolean;
+ mr?: boolean;
+ bl?: boolean;
+ bc?: boolean;
+ br?: boolean;
+}
+
+/**
+ * https://support.microsoft.com/en-us/office/select-cell-contents-in-excel-23f64223-2b6b-453a-8688-248355f10fa9
+ */
+export interface ISelectionStyle {
+ 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;
+}
+
+export interface ISelectionWithCoordAndStyle extends ISelectionWithCoord {
+ style: Nullable<ISelectionStyle>;
+}
+
+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: {},
+ widgetSize: 6,
+ widgetStrokeWidth: 1,
+ widgetStroke: style.colorWhite,
+
+ hasAutoFill: true,
+ AutofillSize: 6,
+ AutofillStrokeWidth: 1,
+ AutofillStroke: style.colorWhite,
+
+ hasRowHeader: true,
+ rowHeaderFill: fill,
+ rowHeaderStroke: style.primaryColor,
+ rowHeaderStrokeWidth: 1,
+
+ hasColumnHeader: true,
+ columnHeaderFill: fill,
+ columnHeaderStroke: style.primaryColor,
+ columnHeaderStrokeWidth: 1,
+ };
+}
+
+export function convertSelectionDataToRange(
+ selectionWithCoordAndStyle: ISelectionWithCoordAndStyle
+): ISelectionWithStyle {
+ const { rangeWithCoord, primaryWithCoord, style } = selectionWithCoordAndStyle;
+ const result: ISelectionWithStyle = {
+ range: {
+ startRow: rangeWithCoord.startRow,
+ startColumn: rangeWithCoord.startColumn,
+ endRow: rangeWithCoord.endRow,
+ endColumn: rangeWithCoord.endColumn,
+ rangeType: rangeWithCoord.rangeType,
+ },
+ primary: null,
+ style,
+ };
+ if (primaryWithCoord != null) {
+ const { actualRow, actualColumn, isMerged, isMergedMainCell } = primaryWithCoord;
+ const { startRow, startColumn, endRow, endColumn } = primaryWithCoord.mergeInfo;
+ result.primary = {
+ actualRow,
+ actualColumn,
+ isMerged,
+ isMergedMainCell,
+ startRow,
+ startColumn,
+ endRow,
+ endColumn,
+ };
+ }
+ return result;
+}
+
+export function transformCellDataToSelectionData(
+ row: number,
+ column: number,
+ mergeData: IRange[]
+): Nullable<ISelectionWithStyle> {
+ const newCellRange = getCellInfoInMergeData(row, column, mergeData);
+
+ const newSelectionData = makeCellRangeToRangeData(newCellRange);
+
+ if (!newSelectionData) {
+ return;
+ }
+
+ return {
+ range: newSelectionData,
+ primary: newCellRange,
+ style: null,
+ };
+}