fix(sheets): bugfix for freeze & hover-manager-service & data-validat…

…ion (#2233)

* fix: #684 univer-pro

* feat: auto-height

* feat: update

* fix: #2174

* feat: #2162 checkbox ticked and unticked value

* fix: hover-manager-service

* fix: checkbox validator

* feat: lint

* fix: error when delete worksheet

* feat: custom-render event handler

packages/engine-render/src/components/sheets/sheet-skeleton.ts

@@ -828,11 +828,12 @@ export class SpreadsheetSkeleton extends Skeleton {
  offsetY: number,
  scaleX: number,
  scaleY: number,
- scrollXY: { x: number; y: number }
+ scrollXY: { x: number; y: number },
+ closeFirst?: boolean
  ) {
- const row = this.getRowPositionByOffsetY(offsetY, scaleY, scrollXY);
+ const row = this.getRowPositionByOffsetY(offsetY, scaleY, scrollXY, closeFirst);
 
- const column = this.getColumnPositionByOffsetX(offsetX, scaleX, scrollXY);
+ const column = this.getColumnPositionByOffsetX(offsetX, scaleX, scrollXY, closeFirst);
 
  return {
  row,
@@ -848,7 +849,7 @@ export class SpreadsheetSkeleton extends Skeleton {
  * @returns
  */
 
- getColumnPositionByOffsetX(offsetX: number, scaleX: number, scrollXY: { x: number; y: number }) {
+ getColumnPositionByOffsetX(offsetX: number, scaleX: number, scrollXY: { x: number; y: number }, closeFirst?: boolean) {
  offsetX = this.getTransformOffsetX(offsetX, scaleX, scrollXY);
 
  const { columnWidthAccumulation } = this;
@@ -861,6 +862,13 @@ export class SpreadsheetSkeleton extends Skeleton {
  column = 0;
  }
 
+ if (closeFirst) {
+ // check if upper column was closer than current
+ if (Math.abs(columnWidthAccumulation[column] - offsetX) < Math.abs(offsetX - (columnWidthAccumulation[column - 1] ?? 0))) {
+ column = column + 1;
+ }
+ }
+
  // if (column === -1) {
  // const columnLength = columnWidthAccumulation.length - 1;
  // const lastColumnValue = columnWidthAccumulation[columnLength];
@@ -874,6 +882,7 @@ export class SpreadsheetSkeleton extends Skeleton {
  return column;
  }
 
+
  /**
  *
  * @param offsetY scaled offset y
@@ -882,7 +891,7 @@ export class SpreadsheetSkeleton extends Skeleton {
  * @param scrollXY.x
  * @param scrollXY.y
  */
- getRowPositionByOffsetY(offsetY: number, scaleY: number, scrollXY: { x: number; y: number }) {
+ getRowPositionByOffsetY(offsetY: number, scaleY: number, scrollXY: { x: number; y: number }, closeFirst?: boolean) {
  const { rowHeightAccumulation } = this;
 
  offsetY = this.getTransformOffsetY(offsetY, scaleY, scrollXY);
@@ -895,6 +904,12 @@ export class SpreadsheetSkeleton extends Skeleton {
  row = 0;
  }
 
+ if (closeFirst) {
+ // check if upper row was closer than current
+ if (Math.abs(rowHeightAccumulation[row] - offsetY) < Math.abs(offsetY - (rowHeightAccumulation[row - 1] ?? 0))) {
+ row = row + 1;
+ }
+ }
  // if (row === -1) {
  // const rowLength = rowHeightAccumulation.length - 1;
  // const lastRowValue = rowHeightAccumulation[rowLength];

packages/sheets-data-validation/src/controllers/dv-render.controller.ts

@@ -16,11 +16,11 @@
 
 
 import type { ICellDataForSheetInterceptor, ICellRenderContext, Workbook } from '@univerjs/core';
-import { DataValidationRenderMode, DataValidationStatus, DataValidationType, IUniverInstanceService, LifecycleStages, OnLifecycle, RxDisposable, UniverInstanceType, WrapStrategy } from '@univerjs/core';
+import { DataValidationRenderMode, DataValidationStatus, DataValidationType, ICommandService, IUniverInstanceService, LifecycleStages, OnLifecycle, RxDisposable, sequenceExecute, UniverInstanceType, WrapStrategy } from '@univerjs/core';
 import { DataValidationModel, DataValidatorRegistryService } from '@univerjs/data-validation';
 import { ComponentManager, IMenuService } from '@univerjs/ui';
 import { Inject, Injector } from '@wendellhu/redi';
-import { IEditorBridgeService, SheetSkeletonManagerService } from '@univerjs/sheets-ui';
+import { AutoHeightController, IEditorBridgeService, SheetSkeletonManagerService } from '@univerjs/sheets-ui';
 import type { Spreadsheet } from '@univerjs/engine-render';
 import { IRenderManagerService } from '@univerjs/engine-render';
 import { INTERCEPTOR_POINT, SheetInterceptorService } from '@univerjs/sheets';
@@ -58,7 +58,9 @@ export class DataValidationRenderController extends RxDisposable {
  @IEditorBridgeService private readonly _editorBridgeService: IEditorBridgeService,
  @Inject(DataValidationDropdownManagerService) private readonly _dropdownManagerService: DataValidationDropdownManagerService,
  @Inject(SheetInterceptorService) private readonly _sheetInterceptorService: SheetInterceptorService,
- @Inject(Injector) private readonly _injector: Injector
+ @Inject(Injector) private readonly _injector: Injector,
+ @Inject(AutoHeightController) private readonly _autoHeightController: AutoHeightController,
+ @ICommandService private readonly _commandService: ICommandService
  ) {
  super();
  this._init();
@@ -70,6 +72,7 @@ export class DataValidationRenderController extends RxDisposable {
  this._initSkeletonChange();
  this._initDropdown();
  this._initViewModelIntercept();
+ this._initAutoHeight();
  }
 
  private _initMenu() {
@@ -204,7 +207,7 @@ export class DataValidationRenderController extends RxDisposable {
  this._sheetInterceptorService.intercept(
  INTERCEPTOR_POINT.CELL_CONTENT,
  {
- // eslint-disable-next-line max-lines-per-function
+ // eslint-disable-next-line max-lines-per-function, complexity
  handler: (cell, pos, next) => {
  const { row, col, unitId, subUnitId } = pos;
  const manager = this._dataValidationModel.ensureManager(unitId, subUnitId) as SheetDataValidationManager;
@@ -328,4 +331,13 @@ export class DataValidationRenderController extends RxDisposable {
  )
  );
  }
+
+ private _initAutoHeight() {
+ this._dataValidationModel.ruleChange$.subscribe((info) => {
+ if (info.rule?.ranges) {
+ const mutations = this._autoHeightController.getUndoRedoParamsOfAutoHeight(info.rule.ranges);
+ sequenceExecute(mutations.redos, this._commandService);
+ }
+ });
+ }
 }

packages/sheets-data-validation/src/locale/en-US.ts

@@ -27,6 +27,7 @@ const locale: typeof zhCN = {
  date: 'Please input date or formula',
  list: 'Please input options',
  listInvalid: 'The list source must be a delimited list or a reference to a single row or column',
+ checkboxEqual: 'Enter different values for ticked and unticked cell contents.',
  },
  panel: {
  title: 'Data validation management',

packages/sheets-data-validation/src/locale/zh-CN.ts

@@ -25,6 +25,7 @@ const locale = {
  date: '请输入合法的日期或公式',
  list: '请输入至少一个合法选项',
  listInvalid: '列表源必须是分隔列表或对单行或列的引用。',
+ checkboxEqual: '为勾选和未勾选的单元格内容输入不同的值。',
  },
  panel: {
  title: '管理数据验证',

packages/sheets-data-validation/src/validators/checkbox-validator.ts

@@ -46,14 +46,23 @@ export class CheckboxValidator extends BaseDataValidator {
  }
 
  override validatorFormula(rule: IDataValidationRuleBase): IFormulaValidResult {
- const { formula1 = CHECKBOX_FORMULA_1, formula2 = CHECKBOX_FORMULA_2 } = rule;
+ const { formula1, formula2 } = rule;
  const formula1Success = !Tools.isBlank(formula1);
  const formula2Success = !Tools.isBlank(formula2);
+ const isEqual = formula1 === formula2;
 
  return {
- success: formula1Success && formula2Success,
- formula1: !formula1Success ? this.localeService.t('dataValidation.validFail.common') : '',
- formula2: !formula2Success ? this.localeService.t('dataValidation.validFail.common') : '',
+ success: (formula1Success && formula2Success && !isEqual) || (!formula1Success && !formula2Success),
+ formula1: !formula1Success ?
+ this.localeService.t('dataValidation.validFail.common')
+ : isEqual ?
+ this.localeService.t('dataValidation.validFail.checkboxEqual')
+ : '',
+ formula2: !formula2Success ?
+ this.localeService.t('dataValidation.validFail.common')
+ : isEqual ?
+ this.localeService.t('dataValidation.validFail.checkboxEqual')
+ : '',
  };
  }
 

packages/sheets-data-validation/src/views/formula-input/checkbox-formula-input.tsx

@@ -60,7 +60,7 @@ export function CheckboxFormulaInput(props: IFormulaInputProps) {
  onChange={(newValue) => {
  onChange?.({
  ...value,
- formula1: newValue,
+ formula1: newValue || undefined,
  });
  }}
  />
@@ -77,7 +77,7 @@ export function CheckboxFormulaInput(props: IFormulaInputProps) {
  onChange={(newValue) => {
  onChange?.({
  ...value,
- formula2: newValue,
+ formula2: newValue || undefined,
  });
  }}
  />

packages/sheets-data-validation/src/views/list/index.tsx

@@ -53,7 +53,7 @@ function DataValidationListWithWorkbook(props: { workbook: Workbook }) {
  const { workbook } = props;
  const worksheet = useObservable(workbook.activeSheet$, undefined, true)!;
  const unitId = workbook.getUnitId();
- const subUnitId = worksheet.getSheetId();
+ const subUnitId = worksheet?.getSheetId();
  const manager = dataValidationModel.ensureManager(unitId, subUnitId);
 
  useEffect(() => {

packages/sheets-data-validation/src/widgets/checkbox-widget.ts

@@ -78,8 +78,9 @@ export class CheckboxRender implements IBaseDataValidationWidget {
  // super
  }
 
- calcCellAutoHeight(): number | undefined {
- return undefined;
+ calcCellAutoHeight(info: ICellRenderContext): number | undefined {
+ const { style } = info;
+ return (style?.fs ?? 10) * 1.6;
  }
 
  private async _parseFormula(rule: IDataValidationRule, unitId: string, subUnitId: string): Promise<IFormulaResult> {
@@ -165,6 +166,7 @@ export class CheckboxRender implements IBaseDataValidationWidget {
  return false;
  }
 
+
  async onPointerDown(info: ICellRenderContext, evt: IPointerEvent | IMouseEvent) {
  if (evt.button === 2) {
  return;

packages/sheets-data-validation/src/widgets/dropdown-widget.ts

@@ -229,7 +229,7 @@ export class DropdownWidget implements IBaseDataValidationWidget {
  if (
  tb === WrapStrategy.WRAP
  ) {
- docModel.updateDocumentDataPageSize(realWidth);
+ docModel.updateDocumentDataPageSize(Math.max(realWidth, 1));
  }
 
  documentSkeleton.calculate();
@@ -295,7 +295,7 @@ export class DropdownWidget implements IBaseDataValidationWidget {
  if (
  tb === WrapStrategy.WRAP
  ) {
- docModel.updateDocumentDataPageSize(realWidth);
+ docModel.updateDocumentDataPageSize(Math.max(realWidth, 1));
  }
 
  documentSkeleton.calculate();
@@ -329,7 +329,7 @@ export class DropdownWidget implements IBaseDataValidationWidget {
  }
 
  ctx.translate(MARGIN_H, paddingTop);
- const rectWidth = cellWidth - MARGIN_H * 2;
+ const rectWidth = Math.max(cellWidth - MARGIN_H * 2, 1);
  const rectHeight = fontHeight;
  Rect.drawWith(ctx, {
  width: rectWidth,
@@ -398,7 +398,7 @@ export class DropdownWidget implements IBaseDataValidationWidget {
  if (
  tb === WrapStrategy.WRAP
  ) {
- docModel.updateDocumentDataPageSize(realWidth);
+ docModel.updateDocumentDataPageSize(Math.max(realWidth, 1));
  }
 
  documentSkeleton.calculate();
@@ -414,7 +414,7 @@ export class DropdownWidget implements IBaseDataValidationWidget {
  if (
  tb === WrapStrategy.WRAP
  ) {
- docModel.updateDocumentDataPageSize(realWidth);
+ docModel.updateDocumentDataPageSize(Math.max(realWidth, 1));
  }
 
  documentSkeleton.calculate();

packages/sheets-ui/src/controllers/auto-height.controller.ts

@@ -15,7 +15,7 @@
  */
 
 import type { IRange, Workbook } from '@univerjs/core';
-import { IUniverInstanceService, LifecycleStages, OnLifecycle, UniverInstanceType } from '@univerjs/core';
+import { Disposable, IUniverInstanceService, LifecycleStages, OnLifecycle, UniverInstanceType } from '@univerjs/core';
 import type {
  ISetRangeValuesRangeMutationParams,
  ISetStyleCommandParams,
@@ -36,18 +36,19 @@ import { Inject, Injector } from '@wendellhu/redi';
 import { SheetSkeletonManagerService } from '../services/sheet-skeleton-manager.service';
 
 @OnLifecycle(LifecycleStages.Ready, AutoHeightController)
-export class AutoHeightController {
+export class AutoHeightController extends Disposable {
  constructor(
  @Inject(Injector) private _injector: Injector,
  @Inject(SheetInterceptorService) private _sheetInterceptorService: SheetInterceptorService,
  @Inject(SelectionManagerService) private _selectionManagerService: SelectionManagerService,
  @Inject(IUniverInstanceService) private _univerInstanceService: IUniverInstanceService,
  @Inject(SheetSkeletonManagerService) private _sheetSkeletonManagerService: SheetSkeletonManagerService
  ) {
+ super();
  this._initialize();
  }
 
- private _getUndoRedoParamsOfAutoHeight(ranges: IRange[]) {
+ getUndoRedoParamsOfAutoHeight(ranges: IRange[]) {
  const {
  _univerInstanceService: univerInstanceService,
  _sheetSkeletonManagerService: sheetSkeletonService,
@@ -66,12 +67,10 @@ export class AutoHeightController {
  unitId,
  rowsAutoHeightInfo,
  };
-
  const undoParams: ISetWorksheetRowAutoHeightMutationParams = SetWorksheetRowAutoHeightMutationFactory(
  injector,
  redoParams
  );
-
  return {
  undos: [
  {
@@ -92,7 +91,7 @@ export class AutoHeightController {
  const { _sheetInterceptorService: sheetInterceptorService, _selectionManagerService: selectionManagerService } =
  this;
  // for intercept'SetRangeValuesCommand' command.
- sheetInterceptorService.interceptCommand({
+ this.disposeWithMe(sheetInterceptorService.interceptCommand({
  getMutations: (command: { id: string; params: ISetRangeValuesRangeMutationParams }) => {
  if (command.id !== SetRangeValuesCommand.id) {
  return {
@@ -101,11 +100,11 @@ export class AutoHeightController {
  };
  }
 
- return this._getUndoRedoParamsOfAutoHeight(command.params.range);
+ return this.getUndoRedoParamsOfAutoHeight(command.params.range);
  },
- });
+ }));
  // for intercept 'sheet.command.set-row-is-auto-height' command.
- sheetInterceptorService.interceptCommand({
+ this.disposeWithMe(sheetInterceptorService.interceptCommand({
  getMutations: (command: { id: string; params: ISetWorksheetRowIsAutoHeightMutationParams }) => {
  if (command.id !== SetWorksheetRowIsAutoHeightCommand.id) {
  return {
@@ -114,12 +113,12 @@ export class AutoHeightController {
  };
  }
 
- return this._getUndoRedoParamsOfAutoHeight(command.params.ranges);
+ return this.getUndoRedoParamsOfAutoHeight(command.params.ranges);
  },
- });
+ }));
 
  // for intercept set style command.
- sheetInterceptorService.interceptCommand({
+ this.disposeWithMe(sheetInterceptorService.interceptCommand({
  getMutations: (command: { id: string; params: ISetStyleCommandParams<number> }) => {
  if (command.id !== SetStyleCommand.id) {
  return {
@@ -148,8 +147,8 @@ export class AutoHeightController {
  };
  }
 
- return this._getUndoRedoParamsOfAutoHeight(selections);
+ return this.getUndoRedoParamsOfAutoHeight(selections);
  },
- });
+ }));
  }
 }

packages/sheets-ui/src/controllers/cell-custom-render.controller.ts

@@ -19,6 +19,7 @@ import { Disposable, DisposableCollection, IUniverInstanceService, LifecycleStag
 import type { IMouseEvent, IPointerEvent, IRenderContext, IRenderController, RenderManagerService, Spreadsheet } from '@univerjs/engine-render';
 import { IRenderManagerService, Vector2 } from '@univerjs/engine-render';
 import { Inject } from '@wendellhu/redi';
+import type { ISheetSkeletonManagerParam } from '../services/sheet-skeleton-manager.service';
 import { SheetSkeletonManagerService } from '../services/sheet-skeleton-manager.service';
 
 
@@ -48,15 +49,17 @@ export class CellCustomRenderController extends Disposable implements IRenderCon
  const disposableCollection = new DisposableCollection();
 
  const workbook = this._context.unit;
- disposableCollection.dispose();
- if (workbook) {
- const unitId = workbook.getUnitId();
-
- const currentRender = this._renderManagerService.getRenderById(workbook.getUnitId());
+ // eslint-disable-next-line max-lines-per-function
+ const handleSkeletonChange = (skeletonParam: Nullable<ISheetSkeletonManagerParam>) => {
+ disposableCollection.dispose();
+ if (!skeletonParam) {
+ return;
+ }
+ const { unitId, skeleton } = skeletonParam;
+ const currentRender = this._renderManagerService.getRenderById(unitId);
  if (currentRender && currentRender.mainComponent) {
  const spreadsheet = currentRender.mainComponent as Spreadsheet;
  const getActiveRender = (evt: IPointerEvent | IMouseEvent) => {
- const skeleton = this._sheetSkeletonManagerService.getCurrent()?.skeleton!;
  const { offsetX, offsetY } = evt;
  const scene = currentRender.scene;
  const worksheet = workbook.getActiveSheet();
@@ -164,8 +167,10 @@ export class CellCustomRenderController extends Disposable implements IRenderCon
  disposable && disposableCollection.add(disposable);
  moveDisposable && disposableCollection.add(moveDisposable);
  }
- }
+ };
 
+ this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe(handleSkeletonChange));
+ handleSkeletonChange(this._sheetSkeletonManagerService.getCurrent());
  this.disposeWithMe(disposableCollection);
  }
 }