feat(conditional-formatting): bugfix

packages/engine-formula/src/index.ts

@@ -31,7 +31,7 @@ export type {
     IDirtyUnitSheetDefinedNameMap,
 } from './basics/common';
 export { isInDirtyRange } from './basics/dirty';
-export { ErrorType } from './basics/error-type';
+export { ErrorType, ERROR_TYPE_SET } from './basics/error-type';
 export { FunctionType, type IFunctionInfo, type IFunctionParam } from './basics/function';
 export { type IFunctionNames } from './basics/function';
 export { includeFormulaLexerToken, isFormulaLexerToken, normalizeSheetName } from './basics/match-token';

packages/sheets-conditional-formatting-ui/src/commands/commands/add-data-bar-cf.command.ts

@@ -31,6 +31,7 @@ interface IAddUniqueValuesConditionalRuleParams {
     nativeColor: IDataBar['config']['nativeColor'];
     positiveColor: IDataBar['config']['positiveColor'];
     isGradient: IDataBar['config']['isGradient'];
+    isShowValue: IDataBar['isShowValue'];
 
 }
 export const AddDataBarConditionalRuleCommand: ICommand<IAddUniqueValuesConditionalRuleParams> = {
@@ -40,7 +41,7 @@ export const AddDataBarConditionalRuleCommand: ICommand<IAddUniqueValuesConditio
         if (!params) {
             return false;
         }
-        const { ranges, min, max, nativeColor, positiveColor, isGradient, stopIfTrue } = params;
+        const { ranges, min, max, nativeColor, positiveColor, isGradient, stopIfTrue, isShowValue } = params;
         const conditionalFormattingRuleModel = accessor.get(ConditionalFormattingRuleModel);
         const univerInstanceService = accessor.get(IUniverInstanceService);
         const commandService = accessor.get(ICommandService);
@@ -55,6 +56,7 @@ export const AddDataBarConditionalRuleCommand: ICommand<IAddUniqueValuesConditio
             stopIfTrue: !!stopIfTrue,
             rule: {
                 type: CFRuleType.dataBar,
+                isShowValue,
                 config: {
                     min, max, nativeColor, positiveColor, isGradient,
                 },

packages/sheets-conditional-formatting-ui/src/commands/operations/open-conditional-formatting-panel.ts

@@ -100,6 +100,7 @@ export const OpenConditionalFormattingOperator: ICommand = {
                     ranges,
                     rule: {
                         type: CFRuleType.dataBar,
+                        isShowValue: true,
                     },
                 } as unknown as IConditionFormattingRule<IDataBar>;
                 conditionalFormattingMenuController.openPanel(rule);

packages/sheets-conditional-formatting-ui/src/components/hook/useHighlightRange.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect } from 'react';
+import type { IRange } from '@univerjs/core';
+import { useDependency } from '@wendellhu/redi/react-bindings';
+import { IMarkSelectionService } from '@univerjs/sheets-ui';
+
+export const useHighlightRange = (ranges: IRange[] = []) => {
+    const markSelectionService = useDependency(IMarkSelectionService);
+    useEffect(() => {
+        const ids = ranges.map((range) => markSelectionService.addShape({
+            range,
+            style: {
+                hasAutoFill: false,
+                fill: 'rgba(73, 184, 17, 0.05)',
+                strokeWidth: 1,
+                stroke: '#49B811',
+                widgets: {},
+            },
+            primary: {
+                startColumn: range.startColumn,
+                endColumn: range.endColumn,
+                startRow: range.startRow,
+                endRow: range.endRow,
+                actualRow: range.startRow,
+                actualColumn: range.startColumn,
+                isMerged: false,
+                isMergedMainCell: false,
+            },
+        }));
+        return () => {
+            ids.forEach((id) => {
+                id && markSelectionService.removeShape(id);
+            });
+        };
+    }, [ranges]);
+};

packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/dataBar.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { InputNumber, Radio, RadioGroup, Select } from '@univerjs/design';
+import { Checkbox, InputNumber, Radio, RadioGroup, Select } from '@univerjs/design';
 import { useDependency } from '@wendellhu/redi/react-bindings';
 import { createInternalEditorID, IUniverInstanceService, LocaleService } from '@univerjs/core';
 import { TextEditor } from '@univerjs/ui';
@@ -142,12 +142,21 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
         return value.value === undefined ? defaultV : value.value;
     });
 
+    const [isShowValue, isShowValueSet] = useState(() => {
+        const defaultV = true;
+        if (!rule) {
+            return defaultV;
+        }
+        return rule.isShowValue === undefined ? defaultV : !!rule.isShowValue;
+    });
+
     const getResult = (option: { minValueType: CFValueType ;
                                  minValue: number | string;
                                  maxValueType: CFValueType ;
                                  maxValue: number | string;
                                  isGradient: string;
                                  positiveColor: string;
+                                 isShowValue: boolean;
                                  nativeColor: string; }) => {
         const config: { min: IValueConfig;
                         max: IValueConfig;
@@ -160,35 +169,36 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
             positiveColor: option.positiveColor,
             nativeColor: option.nativeColor,
         };
-        return { config, type: CFRuleType.dataBar };
+        return { config, type: CFRuleType.dataBar, isShowValue: option.isShowValue };
     };
     useEffect(() => {
         const dispose = interceptorManager.intercept(interceptorManager.getInterceptPoints().submit, {
             handler() {
-                return getResult({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor });
+                return getResult({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue });
             },
         });
         return dispose as () => void;
-    }, [isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor, interceptorManager]);
+    }, [isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor, interceptorManager, isShowValue]);
 
     const _handleChange = (option: { minValueType: CFValueType ;
                                      minValue: number | string;
                                      maxValueType: CFValueType ;
                                      maxValue: number | string;
                                      isGradient: string;
                                      positiveColor: string;
+                                     isShowValue: boolean;
                                      nativeColor: string; }) => {
         props.onChange(getResult(option));
     };
 
     const handlePositiveColorChange = (color: string) => {
         positiveColorSet(color);
 
-        _handleChange({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor: color, nativeColor });
+        _handleChange({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor: color, nativeColor, isShowValue });
     };
     const handleNativeColorChange = (color: string) => {
         nativeColorSet(color);
-        _handleChange({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor: color });
+        _handleChange({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor: color, isShowValue });
     };
 
     const isShowInput = (type: string) => {
@@ -201,19 +211,19 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
                 {localeService.t('sheet.cf.panel.styleRule')}
             </div>
             <div className={`${styles.cfPreviewWrap}`}>
-                <Preview rule={getResult({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor }) as IConditionalFormattingRuleConfig} />
+                <Preview rule={getResult({ isGradient, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue }) as IConditionalFormattingRuleConfig} />
             </div>
             <div>
                 <div className={stylesBase.label}>
                     {localeService.t('sheet.cf.panel.fillType')}
                 </div>
 
-                <div className={`${stylesBase.mTSm} ${stylesBase.mLXxs} `}>
+                <div className={`${stylesBase.mTSm} ${stylesBase.mLXxs} ${stylesBase.labelContainer} `}>
                     <RadioGroup
                         value={isGradient}
                         onChange={(v) => {
                             isGradientSet(v as string);
-                            _handleChange({ isGradient: v as string, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor });
+                            _handleChange({ isGradient: v as string, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue });
                         }}
                     >
                         <Radio value="0">
@@ -223,6 +233,16 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
                             <span className={styles.text}>{localeService.t('sheet.cf.panel.gradient')}</span>
                         </Radio>
                     </RadioGroup>
+                    <div className={`${styles.utilItem} ${stylesBase.mLXl}`}>
+                        <Checkbox
+                            checked={!isShowValue}
+                            onChange={(v) => {
+                                isShowValueSet(!v);
+                                _handleChange({ isGradient: v as string, minValue, minValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue: !v });
+                            }}
+                        />
+                        {localeService.t('sheet.cf.panel.onlyShowDataBar')}
+                    </div>
                 </div>
             </div>
             <div>
@@ -255,7 +275,7 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
                             minValueTypeSet(v as CFValueType);
                             const value = createDefaultValueByValueType(v as CFValueType, 10);
                             minValueSet(value);
-                            _handleChange({ isGradient, minValue: value, minValueType: v as CFValueType, maxValue, maxValueType, positiveColor, nativeColor });
+                            _handleChange({ isGradient, minValue: value, minValueType: v as CFValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue });
                         }}
                     />
 
@@ -267,7 +287,7 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
                         value={minValue}
                         onChange={(v) => {
                             minValueSet(v || 0);
-                            _handleChange({ isGradient, minValue: v || 0, minValueType, maxValue, maxValueType, positiveColor, nativeColor });
+                            _handleChange({ isGradient, minValue: v || 0, minValueType, maxValue, maxValueType, positiveColor, nativeColor, isShowValue });
                         }}
                     />
                 </div>
@@ -280,7 +300,7 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
                             maxValueTypeSet(v as CFValueType);
                             const value = createDefaultValueByValueType(v as CFValueType, 90);
                             maxValueSet(value);
-                            _handleChange({ isGradient, minValue, minValueType, maxValue: value, maxValueType: v as CFValueType, positiveColor, nativeColor });
+                            _handleChange({ isGradient, minValue, minValueType, maxValue: value, maxValueType: v as CFValueType, positiveColor, nativeColor, isShowValue });
                         }}
                     />
                     <InputText
@@ -291,7 +311,7 @@ export const DataBarStyleEditor = (props: IStyleEditorProps) => {
                         value={maxValue}
                         onChange={(v) => {
                             maxValueSet(v || 0);
-                            _handleChange({ isGradient, minValue, minValueType, maxValue: v || 0, maxValueType, positiveColor, nativeColor });
+                            _handleChange({ isGradient, minValue, minValueType, maxValue: v || 0, maxValueType, positiveColor, nativeColor, isShowValue });
                         }}
                     />
                 </div>

packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/highlightCell.tsx

@@ -145,7 +145,10 @@ const getOperatorOptions = (type: CFSubRuleType.duplicateValues | CFSubRuleType.
                 createOptionItem(CFTextOperator.equal, localeService),
                 createOptionItem(CFTextOperator.notEqual, localeService),
                 createOptionItem(CFTextOperator.containsBlanks, localeService),
-                createOptionItem(CFTextOperator.notContainsBlanks, localeService)];
+                createOptionItem(CFTextOperator.notContainsBlanks, localeService),
+                createOptionItem(CFTextOperator.containsErrors, localeService),
+                createOptionItem(CFTextOperator.notContainsErrors, localeService),
+            ];
         }
         case CFSubRuleType.number:{
             return [
@@ -203,7 +206,8 @@ export const HighlightCellStyleEditor = (props: IStyleEditorProps<any, ITextHigh
     }, {
         value: CFSubRuleType.uniqueValues,
         label: localeService.t('sheet.cf.subRuleType.uniqueValues'),
-    }];
+    },
+    ];
     const operatorOptions = useMemo(() => getOperatorOptions(subType, localeService), [subType]);
 
     const [operator, operatorSet] = useState<IResult['operator'] | undefined>(() => {

packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/index.module.less

@@ -17,17 +17,20 @@
         justify-content: flex-end;
         margin-bottom: var(--margin-base);
     }
+
+    .util-item {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        font-size: var(--font-size-xxs);
+    }
+
     .icon-set {
         .render-config {
             display: flex;
             align-items: center;
             font-size: var(--font-size-xxs);
             justify-content: flex-start;
-            .util-item {
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
-            }
         }
         .flex {
             display: flex;

packages/sheets-conditional-formatting-ui/src/components/panel/rule-edit/index.tsx

@@ -23,7 +23,7 @@ import { Button, Select } from '@univerjs/design';
 
 import { RangeSelector } from '@univerjs/ui';
 import type { IRemoveSheetMutationParams } from '@univerjs/sheets';
-import { RemoveSheetMutation, SelectionManagerService, SetWorksheetActiveOperation } from '@univerjs/sheets';
+import { RemoveSheetMutation, SelectionManagerService, setEndForRange, SetWorksheetActiveOperation } from '@univerjs/sheets';
 import type { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting';
 import { CFRuleType, CFSubRuleType, ConditionalFormattingRuleModel, SHEET_CONDITIONAL_FORMATTING_PLUGIN } from '@univerjs/sheets-conditional-formatting';
 import type { IAddCfCommandParams } from '../../../commands/commands/add-cf.command';
@@ -182,9 +182,10 @@ export const RuleEdit = (props: IRuleEditProps) => {
     const handleSubmit = () => {
         const beforeSubmitResult = interceptorManager.fetchThroughInterceptors(interceptorManager.getInterceptPoints().beforeSubmit)(true, null);
         const getRanges = () => {
-            const ranges = rangeResult.current;
-            const isError = ranges.some((range) => Number.isNaN(range.startRow) || Number.isNaN(range.startColumn));
-            return isError ? [] : ranges;
+            const worksheet = univerInstanceService.getCurrentUniverSheetInstance().getActiveSheet();
+            const ranges = rangeResult.current.map((range) => setEndForRange(range, worksheet.getRowCount(), worksheet.getColumnCount()));
+            const result = ranges.filter((range) => !(Number.isNaN(range.startRow) || Number.isNaN(range.startColumn)));
+            return result;
         };
 
         if (beforeSubmitResult) {

packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.module.less

@@ -7,7 +7,7 @@
         align-items: center;
         .select {
             color: rgb(var(--text-color));
-            width: 126px;
+            width: 138px;
             .select-selector {
                 border: none;
                 padding: 0;

packages/sheets-conditional-formatting-ui/src/components/panel/rule-list/index.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Select, Tooltip } from '@univerjs/design';
 
 import { useDependency } from '@wendellhu/redi/react-bindings';
+import type { IRange } from '@univerjs/core';
 import { ICommandService, IUniverInstanceService, LocaleService, Rectangle } from '@univerjs/core';
 import { SelectionManagerService, SetSelectionsOperation, SetWorksheetActiveOperation } from '@univerjs/sheets';
 import { serializeRange } from '@univerjs/engine-formula';
@@ -35,6 +36,7 @@ import 'react-resizable/css/styles.css';
 import { Preview } from '../../preview';
 import { ConditionalFormattingI18nController } from '../../../controllers/cf.i18n.controller';
 import { ClearWorksheetCfCommand } from '../../../commands/commands/clear-worksheet-cf.command';
+import { useHighlightRange } from '../../hook/useHighlightRange';
 
 import styles from './index.module.less';
 
@@ -115,15 +117,19 @@ export const RuleList = (props: IRuleListProps) => {
     const unitId = workbook.getUnitId();
     const worksheet = workbook.getActiveSheet();
     const subUnitId = worksheet.getSheetId();
+
+    const [currentRuleRanges, currentRuleRangesSet] = useState<IRange[]>([]);
     const [selectValue, selectValueSet] = useState('2');
     const [fetchRuleListId, fetchRuleListIdSet] = useState(0);
     const [draggingId, draggingIdSet] = useState<number>(-1);
     const [layoutWidth, layoutWidthSet] = useState(defaultWidth);
     const layoutContainerRef = useRef<HTMLDivElement>(null);
+
     const selectOption = [
         { label: localeService.t('sheet.cf.panel.workSheet'), value: '2' },
         { label: localeService.t('sheet.cf.panel.selectedRange'), value: '1' },
     ];
+
     const getRuleList = () => {
         const ruleList = conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId);
         if (!ruleList || !ruleList.length) {
@@ -146,6 +152,8 @@ export const RuleList = (props: IRuleListProps) => {
     };
     const [ruleList, ruleListSet] = useState(getRuleList);
 
+    useHighlightRange(currentRuleRanges);
+
     useEffect(() => {
         const disposable = commandService.onCommandExecuted((commandInfo) => {
             if (commandInfo.id === SetWorksheetActiveOperation.id) {
@@ -320,7 +328,14 @@ export const RuleList = (props: IRuleListProps) => {
                             {ruleList.map((rule, index) => {
                                 return (
                                     <div key={`${rule.cfId}`}>
-                                        <div className={`${styles.ruleItem} ${draggingId === index ? styles.active : ''}`} onClick={() => onClick(rule)}>
+                                        <div
+                                            onMouseMove={() => {
+                                                rule.ranges !== currentRuleRanges && currentRuleRangesSet(rule.ranges);
+                                            }}
+                                            onMouseLeave={() => currentRuleRangesSet([])}
+                                            onClick={() => onClick(rule)}
+                                            className={`${styles.ruleItem} ${draggingId === index ? styles.active : ''}`}
+                                        >
                                             <div
                                                 className={`${styles.draggableHandle} draggableHandle`}
                                                 onClick={(e) => e.stopPropagation()}