fix(sheet): skip filtered row on setting style (#2221)

* fix(sheet): skip filtered row on setting style

* refactor(sheet): rename function to createRangeIteratorWithSkipFilteredRows

packages/sheets/src/commands/commands/set-style.command.ts

@@ -44,6 +44,7 @@ import { SheetInterceptorService } from '../../services/sheet-interceptor/sheet-
 import type { ISetRangeValuesMutationParams } from '../mutations/set-range-values.mutation';
 import { SetRangeValuesMutation, SetRangeValuesUndoMutationFactory } from '../mutations/set-range-values.mutation';
 import { getSheetCommandTarget } from './utils/target-util';
+import { createRangeIteratorWithSkipFilteredRows } from './utils/selection-utils';
 
 export interface IStyleTypeValue<T> {
  type: keyof IStyleData;
@@ -74,7 +75,7 @@ export const SetStyleCommand: ICommand<ISetStyleCommandParams<unknown>> = {
  const target = getSheetCommandTarget(univerInstanceService);
  if (!target) return false;
 
- const { unitId, subUnitId } = target;
+ const { unitId, subUnitId, worksheet } = target;
  const { range, style } = params;
  const commandService = accessor.get(ICommandService);
  const undoRedoService = accessor.get(IUndoRedoService);
@@ -87,35 +88,26 @@ export const SetStyleCommand: ICommand<ISetStyleCommandParams<unknown>> = {
 
  const cellValue = new ObjectMatrix<ICellData>();
 
+ const iterator = createRangeIteratorWithSkipFilteredRows(worksheet);
+
  if (Tools.isArray(style.value)) {
  for (let i = 0; i < ranges.length; i++) {
- const { startRow, endRow, startColumn, endColumn } = ranges[i];
-
- for (let r = 0; r <= endRow - startRow; r++) {
- for (let c = 0; c <= endColumn - startColumn; c++) {
- cellValue.setValue(r + startRow, c + startColumn, {
- s: {
- [style.type]: style.value[r][c],
- },
- });
- }
- }
+ iterator.forOperableEach(ranges[i], (r, c, range) => {
+ cellValue.setValue(r + range.startRow, c + range.startColumn, {
+ s: {
+ [style.type]: (style.value as T[][])[r][c],
+ },
+ });
+ });
  }
  } else {
  for (let i = 0; i < ranges.length; i++) {
- const { startRow, endRow, startColumn, endColumn } = ranges[i];
-
  const styleObj: ICellData = {
  s: {
  [style.type]: style.value,
  },
  };
-
- for (let r = startRow; r <= endRow; r++) {
- for (let c = startColumn; c <= endColumn; c++) {
- cellValue.setValue(r, c, styleObj);
- }
- }
+ iterator.forOperableEach(ranges[i], (r, c) => cellValue.setValue(r, c, styleObj));
  }
  }
 

packages/sheets/src/commands/commands/utils/selection-utils.ts

@@ -210,3 +210,27 @@ export function isSingleCellSelection(selection: Nullable<ISelectionWithStyle &
  const { range, primary } = selection;
  return Rectangle.equals(range, primary);
 }
+/**
+ * Create an iterator to iterate over cells in range.
+ * It will skip the row that has been filtered.
+ * @param sheet bind a sheet
+ * @returns iterator
+ */
+export function createRangeIteratorWithSkipFilteredRows(sheet: Worksheet) {
+ function forOperableEach(ranges: IRange, operator: (row: number, col: number, range: IRange) => void) {
+ function iterate(range: IRange) {
+ for (let r = range.startRow; r <= range.endRow; r++) {
+ if (sheet.getRowFiltered(r)) {
+ continue;
+ }
+ for (let c = range.startColumn; c <= range.endColumn; c++) {
+ operator(r, c, range);
+ }
+ }
+ };
+ iterate(ranges);
+ }
+ return {
+ forOperableEach,
+ };
+}

packages/ui/src/components/hooks/layout.ts

@@ -17,6 +17,8 @@
 import { useEffect } from 'react';
 import { BehaviorSubject } from 'rxjs';
 import canUseDom from 'rc-util/lib/Dom/canUseDom';
+
+import type { Nullable } from '@univerjs/core';
 /**
  * These hooks are used for browser layout
  * Prefer to client-side
@@ -77,7 +79,7 @@ function detectElementOverViewport(element: HTMLElement) {
 }
 
 /** Allow the element to scroll when its height over the viewport height */
-export function useScrollOnOverViewport(element: HTMLElement | undefined | null, disabled: boolean = false) {
+export function useScrollOnOverViewport(element: Nullable<HTMLElement>, disabled: boolean = false) {
  useEffect(() => {
  if (canUseDom() || !element || disabled) {
  return;