fix(sheet): range selector error (#1897)

* fix(sheet): range selector error * fix(sheet): cycle ref * fix(sheet): range selector return zero array
dream-num · Apr 13, 2024 · a2c8cb6 · a2c8cb6
1 parent 04abb1b
commit a2c8cb6
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 29 deletions.
diff --git a/packages/engine-render/src/components/docs/document.ts b/packages/engine-render/src/components/docs/document.ts
@@ -566,7 +566,7 @@ export class Documents extends DocComponent {
         if (verticalAlign === VerticalAlign.MIDDLE) {
             offsetTop = (this.height - pageHeight) / 2;
         } else if (verticalAlign === VerticalAlign.TOP) {
-            offsetTop = 0;
+            offsetTop = pagePaddingTop;
         } else { // VerticalAlign.UNSPECIFIED follow the same rule as HorizontalAlign.BOTTOM.
             offsetTop = this.height - pageHeight - pagePaddingBottom;
         }

diff --git a/packages/engine-render/src/components/sheets/sheet-skeleton.ts b/packages/engine-render/src/components/sheets/sheet-skeleton.ts
@@ -201,7 +201,7 @@ export interface IDocumentLayoutObject {
 }
 
 const DEFAULT_PADDING_DATA = {
-    t: 1,
+    t: 0,
     b: 1,
     l: 2,
     r: 2,
@@ -1811,7 +1811,7 @@ export class SpreadsheetSkeleton extends Skeleton {
         const {
             textRotation,
             paddingData = {
-                t: 1,
+                t: 0,
                 r: 2,
                 b: 1,
                 l: 2,

diff --git a/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts b/packages/sheets-ui/src/controllers/editor/start-edit.controller.ts
@@ -241,7 +241,7 @@ export class StartEditController extends Disposable {
             if (verticalAlign === VerticalAlign.MIDDLE) {
                 offsetTop = (editorHeight - actualHeight) / 2 / scaleY;
             } else if (verticalAlign === VerticalAlign.TOP) {
-                offsetTop = 0;
+                offsetTop = paddingData.t || 0;
             } else { // VerticalAlign.UNSPECIFIED follow the same rule as HorizontalAlign.BOTTOM.
                 offsetTop = (editorHeight - actualHeight) / scaleY - (paddingData.b || 0);
             }

diff --git a/packages/sheets-ui/src/views/defined-name/DefinedName.tsx b/packages/sheets-ui/src/views/defined-name/DefinedName.tsx
@@ -39,7 +39,7 @@ export function DefinedName() {
 
     return (
         <div className={styles.definedName}>
-            <Input value={rangeString} type="text" size="small" affixWrapperStyle={{ border: 'none', paddingLeft: '6px', paddingRight: '6px' }} />
+            <Input value={rangeString} type="text" size="small" affixWrapperStyle={{ border: 'none', paddingLeft: '6px', paddingRight: '6px', height: '100%' }} />
 
             <Dropdown overlay={<DefinedNameOverlay />}>
                 <div className={styles.definedNameDropDown}>

diff --git a/packages/sheets-ui/src/views/defined-name/DefinedNameInput.tsx b/packages/sheets-ui/src/views/defined-name/DefinedNameInput.tsx
@@ -71,8 +71,11 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
     const sheetId = workbook.getActiveSheet().getSheetId();
 
     const [nameValue, setNameValue] = useState(name);
+
     const [formulaOrRefStringValue, setFormulaOrRefStringValue] = useState(formulaOrRefString);
+
     const [commentValue, setCommentValue] = useState(comment);
+
     const [localSheetIdValue, setLocalSheetIdValue] = useState(localSheetId);
 
     const [validString, setValidString] = useState('');
@@ -81,8 +84,6 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
 
     const [validFormulaOrRange, setValidFormulaOrRange] = useState(true);
 
-    const [updateFormulaOrRefStringValue, setUpdateFormulaOrRefStringValue] = useState(formulaOrRefString);
-
     const options = [{
         label: localeService.t('definedName.scopeWorkbook'),
         value: SCOPE_WORKBOOK_VALUE,
@@ -104,7 +105,6 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
         }
 
         setFormulaOrRefStringValue(formulaOrRefStringCache);
-        setUpdateFormulaOrRefStringValue(formulaOrRefStringCache);
 
         setValidString('');
     }, [state]);
@@ -135,11 +135,11 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
     };
 
     const rangeSelectorChange = (ranges: IUnitRange[]) => {
-        setUpdateFormulaOrRefStringValue(convertRangeToString(ranges));
+        setFormulaOrRefStringValue(convertRangeToString(ranges));
     };
 
     const formulaEditorChange = (value: Nullable<string>) => {
-        setUpdateFormulaOrRefStringValue(value || '');
+        setFormulaOrRefStringValue(value || '');
     };
 
     const confirmChange = () => {
@@ -167,7 +167,7 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
             return;
         }
 
-        if (updateFormulaOrRefStringValue.length === 0) {
+        if (formulaOrRefStringValue.length === 0) {
             setValidString(localeService.t('definedName.formulaOrRefStringEmpty'));
             return;
         }
@@ -185,7 +185,7 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
         confirm && confirm({
             id: id || '',
             name: nameValue,
-            formulaOrRefString: lexerTreeBuilder.convertRefersToAbsolute(updateFormulaOrRefStringValue, AbsoluteRefType.ALL, AbsoluteRefType.ALL),
+            formulaOrRefString: lexerTreeBuilder.convertRefersToAbsolute(formulaOrRefStringValue, AbsoluteRefType.ALL, AbsoluteRefType.ALL),
             comment: commentValue,
             localSheetId: localSheetIdValue,
         });
@@ -194,10 +194,10 @@ export const DefinedNameInput = (props: IDefinedNameInputProps) => {
     const typeValueChange = (value: string | number | boolean) => {
         const type = value as string;
         if (type === 'formula' && formulaOrRefStringValue.substring(0, 1) !== operatorToken.EQUALS) {
-            setUpdateFormulaOrRefStringValue(`${operatorToken.EQUALS}`);
+            setFormulaOrRefStringValue(`${operatorToken.EQUALS}`);
             setFormulaOrRefStringValue(`${operatorToken.EQUALS}`);
         } else if (formulaOrRefStringValue.substring(0, 1) === operatorToken.EQUALS) {
-            setUpdateFormulaOrRefStringValue('');
+            setFormulaOrRefStringValue('');
             setFormulaOrRefStringValue('');
         }
         setTypeValue(type);

diff --git a/packages/sheets-ui/src/views/defined-name/index.module.less b/packages/sheets-ui/src/views/defined-name/index.module.less
@@ -7,6 +7,8 @@
 
     border-right: 1px solid rgb(var(--border-color));
 
+    height: 100%;
+
     &-drop-down {
         display: flex;
         align-items: center;

diff --git a/packages/ui/src/components/editor/TextEditor.tsx b/packages/ui/src/components/editor/TextEditor.tsx
@@ -182,22 +182,29 @@ export function TextEditor(props: ITextEditorProps & Omit<MyComponentProps, 'onC
         const valueChange = debounce((editor: Readonly<Editor>) => {
             const unitId = editor.editorUnitId;
             const isLegality = editorService.checkValueLegality(unitId);
-            const rect = editor.getBoundingClientRect();
 
-            setValidationOffset([rect.left, rect.top]);
-            if (rect.left + rect.top > 0) {
-                setValidationVisible(!isLegality);
-            }
 
-            if (editor.onlyInputFormula()) {
-                setValidationContent(localeService.t('textEditor.formulaError'));
-            } else {
-                setValidationContent(localeService.t('textEditor.rangeError'));
-            }
+            setTimeout(() => {
+                const rect = editor.getBoundingClientRect();
+                setValidationOffset([rect.left, rect.top - 16]);
+                if (rect.left + rect.top > 0) {
+                    setValidationVisible(!isLegality);
+                }
+
+                if (editor.onlyInputFormula()) {
+                    setValidationContent(localeService.t('textEditor.formulaError'));
+                } else {
+                    setValidationContent(localeService.t('textEditor.rangeError'));
+                }
+            }, 100);
 
-            onValid && onValid(isLegality);
 
-            onChange && onChange(editorService.getValue(id));
+            const currentValue = editorService.getValue(unitId);
+
+            if (currentValue !== value) {
+                onValid && onValid(isLegality);
+                onChange && onChange(editorService.getValue(id));
+            }
         }, 30);
 
         const valueChangeSubscription = editorService.valueChange$.subscribe((editor) => {

diff --git a/packages/ui/src/components/range-selector/RangeSelector.tsx b/packages/ui/src/components/range-selector/RangeSelector.tsx
@@ -253,12 +253,23 @@ export function RangeSelector(props: IRangeSelectorProps) {
     function handleTextValueChange(value: Nullable<string>) {
         setRangeValue(value || '');
 
-        if (value === '') {
+        const valueArray = value?.split(',') || [];
+
+        if (value === '' || valueArray.length === 0) {
+            onChange && onChange([]);
+            return;
+        }
+
+        const result = valueArray.every((refString) => {
+            return isReferenceString(refString.trim());
+        });
+
+        if (!result) {
             onChange && onChange([]);
             return;
         }
 
-        const ranges = value?.split(',').map((ref) => {
+        const ranges = valueArray.map((ref) => {
             const unitRange = deserializeRangeWithSheet(ref);
             return {
                 unitId: unitRange.unitId,

diff --git a/packages/ui/src/services/layout/layout.service.ts b/packages/ui/src/services/layout/layout.service.ts
@@ -18,6 +18,7 @@ import type { ContextService, Nullable } from '@univerjs/core';
 import { Disposable, DocumentDataModel, FOCUSING_UNIVER_EDITOR, IContextService, ILogService, IUniverInstanceService, LifecycleStages, OnLifecycle, remove, SlideDataModel, toDisposable, UniverInstanceType, Workbook } from '@univerjs/core';
 import { createIdentifier, type IDisposable } from '@wendellhu/redi';
 import { fromEvent } from 'rxjs';
+import { IEditorService } from '../editor/editor.service';
 
 type FocusHandlerFn = (unitId: string) => void;
 
@@ -65,7 +66,8 @@ export class DesktopLayoutService extends Disposable implements ILayoutService {
     constructor(
         @IContextService private readonly _contextService: ContextService,
         @IUniverInstanceService private readonly _univerInstanceService: IUniverInstanceService,
-        @ILogService private readonly _logService: ILogService
+        @ILogService private readonly _logService: ILogService,
+        @IEditorService private readonly _editorService: IEditorService
     ) {
         super();
 
@@ -147,6 +149,7 @@ export class DesktopLayoutService extends Disposable implements ILayoutService {
             fromEvent(window, 'focusin').subscribe((event) => {
                 const target = event.target as HTMLElement;
                 if (collectionOfCnForFocusableEle.some((item) => target.classList.contains(item))) {
+                    this._editorService.blur();
                     queueMicrotask(() => this.focus());
                     return;
                 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -201,7 +201,7 @@ export interface IDocumentLayoutObject { @@
     }
     const DEFAULT_PADDING_DATA = {
-        t: 1,
+        t: 0,
         b: 1,
         l: 2,
         r: 2,
@@ Expand Down Expand Up / @@ -1811,7 +1811,7 @@ export class SpreadsheetSkeleton extends Skeleton { @@
             const {
                 textRotation,
                 paddingData = {
-                    t: 1,
+                    t: 0,
                     r: 2,
                     b: 1,
                     l: 2,
@@ Expand Down @@