@univerjs/sheets-conditional-formatting-ui 0.2.6 → 0.2.8

package/lib/es/index.js

@@ -2,9 +2,9 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: !0 });
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key != "symbol" ? key + "" : key, value);
-import { CommandType, ICommandService, IUniverInstanceService, IUndoRedoService, ObjectMatrix, Range, sequenceExecute, UniverInstanceType, Rectangle, ColorKit, BooleanNumber, Disposable, OnLifecycle, LifecycleStages, Inject, LocaleService, useDependency, createInterceptorKey, createInternalEditorID, Tools, InterceptorManager, Injector, toDisposable, Plugin, DependentOn } from "@univerjs/core";
-import { ConditionalFormattingRuleModel, CFRuleType, CFSubRuleType, AddConditionalRuleMutation, CFNumberOperator, setConditionalRuleMutationUndoFactory, SetConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, DeleteConditionalRuleMutation, MoveConditionalRuleMutation, transformSupportSymmetryAnchor, MoveConditionalRuleMutationUndoFactory, getColorScaleFromValue, iconMap, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, AddConditionalRuleMutationUndoFactory, CFValueType, createDefaultValueByValueType, SHEET_CONDITIONAL_FORMATTING_PLUGIN, removeUndefinedAttr, createDefaultValue, CFTextOperator, CFTimePeriodOperator, iconGroup, getOppositeOperator, compareWithNumber, EMPTY_ICON_TYPE, createDefaultRule, DEFAULT_PADDING, DEFAULT_WIDTH, ConditionalFormattingService, ConditionalFormattingViewModel, isRangesEqual, UniverSheetsConditionalFormattingPlugin, getStringFromDataStream } from "@univerjs/sheets-conditional-formatting";
-import { getSheetCommandTarget, SheetsSelectionsService, findAllRectangle, createTopMatrixFromMatrix, SetWorksheetActiveOperation, WorkbookEditablePermission, WorksheetSetCellStylePermission, WorksheetEditPermission, RangeProtectionPermissionEditPoint, SetSelectionsOperation, RemoveSheetMutation, setEndForRange, INTERCEPTOR_POINT, SheetInterceptorService, RefRangeService, handleDefaultRangeChangeWithEffectRefCommands, ClearSelectionFormatCommand, ClearSelectionAllCommand, RangeMergeUtil } from "@univerjs/sheets";
+import { CommandType, ICommandService, IUniverInstanceService, IUndoRedoService, ObjectMatrix, Range, sequenceExecute, UniverInstanceType, Rectangle, ColorKit, BooleanNumber, Disposable, OnLifecycle, LifecycleStages, Inject, LocaleService, useDependency, Injector, createInterceptorKey, createInternalEditorID, Tools, InterceptorManager, toDisposable, Plugin, DependentOn } from "@univerjs/core";
+import { ConditionalFormattingRuleModel, CFRuleType, CFSubRuleType, AddConditionalRuleMutation, CFNumberOperator, setConditionalRuleMutationUndoFactory, SetConditionalRuleMutation, DeleteConditionalRuleMutationUndoFactory, DeleteConditionalRuleMutation, MoveConditionalRuleMutation, transformSupportSymmetryAnchor, MoveConditionalRuleMutationUndoFactory, getColorScaleFromValue, iconMap, DEFAULT_BG_COLOR, DEFAULT_FONT_COLOR, defaultDataBarPositiveColor, defaultDataBarNativeColor, AddConditionalRuleMutationUndoFactory, CFValueType, createDefaultValueByValueType, SHEET_CONDITIONAL_FORMATTING_PLUGIN, removeUndefinedAttr, createDefaultValue, CFTextOperator, CFTimePeriodOperator, iconGroup, getOppositeOperator, compareWithNumber, EMPTY_ICON_TYPE, createDefaultRule, DEFAULT_PADDING, DEFAULT_WIDTH, ConditionalFormattingService, ConditionalFormattingViewModel, isRangesEqual, UniverSheetsConditionalFormattingPlugin, getStringFromDataStream } from "@univerjs/sheets-conditional-formatting";
+import { getSheetCommandTarget, SheetsSelectionsService, findAllRectangle, createTopMatrixFromMatrix, SetWorksheetActiveOperation, checkRangesEditablePermission, WorkbookEditablePermission, WorksheetSetCellStylePermission, WorksheetEditPermission, RangeProtectionPermissionEditPoint, SetSelectionsOperation, RemoveSheetMutation, setEndForRange, INTERCEPTOR_POINT, SheetInterceptorService, RefRangeService, handleDefaultRangeChangeWithEffectRefCommands, ClearSelectionFormatCommand, ClearSelectionAllCommand, RangeMergeUtil } from "@univerjs/sheets";
 import { MenuItemType, MenuGroup, MenuPosition, getMenuHiddenObservable, useObservable, ComponentManager, TextEditor, ILayoutService, useScrollYOverContainer, RangeSelector, IMenuService, ISidebarService } from "@univerjs/ui";
 import { Observable, merge, debounceTime as debounceTime$1 } from "rxjs";
 import { debounceTime, bufferTime, filter } from "rxjs/operators";
@@ -288,9 +288,7 @@ const AddAverageCfCommand = {
       undoMutations: undos
     }), result;
   }
-};
-var P = /* @__PURE__ */ ((E) => (E[E.View = 0] = "View", E[E.Edit = 1] = "Edit", E[E.ManageCollaborator = 2] = "ManageCollaborator", E[E.Print = 3] = "Print", E[E.Duplicate = 4] = "Duplicate", E[E.Comment = 5] = "Comment", E[E.Copy = 6] = "Copy", E[E.Share = 7] = "Share", E[E.Export = 8] = "Export", E[E.MoveWorksheet = 9] = "MoveWorksheet", E[E.DeleteWorksheet = 10] = "DeleteWorksheet", E[E.HideWorksheet = 11] = "HideWorksheet", E[E.RenameWorksheet = 12] = "RenameWorksheet", E[E.CreateWorksheet = 13] = "CreateWorksheet", E[E.SetWorksheetStyle = 14] = "SetWorksheetStyle", E[E.EditWorksheetCell = 15] = "EditWorksheetCell", E[E.InsertHyperlink = 16] = "InsertHyperlink", E[E.Sort = 17] = "Sort", E[E.Filter = 18] = "Filter", E[E.PivotTable = 19] = "PivotTable", E[E.FloatImg = 20] = "FloatImg", E[E.History = 21] = "History", E[E.RwHgtClWdt = 22] = "RwHgtClWdt", E[E.ViemRwHgtClWdt = 23] = "ViemRwHgtClWdt", E[E.ViewFilter = 24] = "ViewFilter", E[E.MoveSheet = 25] = "MoveSheet", E[E.DeleteSheet = 26] = "DeleteSheet", E[E.HideSheet = 27] = "HideSheet", E[E.CopySheet = 28] = "CopySheet", E[E.RenameSheet = 29] = "RenameSheet", E[E.CreateSheet = 30] = "CreateSheet", E[E.SelectProtectedCells = 31] = "SelectProtectedCells", E[E.SelectUnProtectedCells = 32] = "SelectUnProtectedCells", E[E.SetCellStyle = 33] = "SetCellStyle", E[E.SetCellValue = 34] = "SetCellValue", E[E.SetRowStyle = 35] = "SetRowStyle", E[E.SetColumnStyle = 36] = "SetColumnStyle", E[E.InsertRow = 37] = "InsertRow", E[E.InsertColumn = 38] = "InsertColumn", E[E.DeleteRow = 39] = "DeleteRow", E[E.DeleteColumn = 40] = "DeleteColumn", E[E.EditExtraObject = 41] = "EditExtraObject", E[E.Delete = 42] = "Delete", E[E.RecoverHistory = 43] = "RecoverHistory", E[E.ViewHistory = 44] = "ViewHistory", E[E.UNRECOGNIZED = -1] = "UNRECOGNIZED", E))(P || {});
-const commandList = [SetWorksheetActiveOperation.id, AddConditionalRuleMutation.id, SetConditionalRuleMutation.id, DeleteConditionalRuleMutation.id, MoveConditionalRuleMutation.id], FactoryManageConditionalFormattingRule = /* @__PURE__ */ __name((accessor) => {
+}, commandList = [SetWorksheetActiveOperation.id, AddConditionalRuleMutation.id, SetConditionalRuleMutation.id, DeleteConditionalRuleMutation.id, MoveConditionalRuleMutation.id], FactoryManageConditionalFormattingRule = /* @__PURE__ */ __name((accessor) => {
   const commonSelections = [
     {
       label: "sheet.cf.ruleType.highlightCell",
@@ -349,20 +347,17 @@ const commandList = [SetWorksheetActiveOperation.id, AddConditionalRuleMutation.
     if (!workbook) return;
     const worksheet = workbook.getActiveSheet();
     if (!worksheet) return;
-    const ruleList = (conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || []).filter((rule) => rule.ranges.some((ruleRange2) => ranges.some((range) => Rectangle.intersects(range, ruleRange2))));
-    subscriber.next(!!ruleList.length);
+    const hasPermission = (conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || []).filter((rule) => rule.ranges.some((ruleRange2) => ranges.some((range) => Rectangle.intersects(range, ruleRange2)))).map((rule) => rule.ranges).every((ranges2) => checkRangesEditablePermission(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges2));
+    subscriber.next(hasPermission);
   })), clearSheetEnable$ = new Observable(
-    (subscriber) => merge(
-      selectionManagerService.selectionMoveEnd$,
-      new Observable((commandSubscribe) => {
-        const disposable = commandService.onCommandExecuted((commandInfo) => {
-          var _a13;
-          const { id, params } = commandInfo, unitId = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a13.getUnitId();
-          commandList.includes(id) && params.unitId === unitId && commandSubscribe.next(null);
-        });
-        return () => disposable.dispose();
-      })
-    ).pipe(debounceTime(16)).subscribe(() => {
+    (subscriber) => new Observable((commandSubscribe) => {
+      const disposable = commandService.onCommandExecuted((commandInfo) => {
+        var _a13;
+        const { id, params } = commandInfo, unitId = (_a13 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET)) == null ? void 0 : _a13.getUnitId();
+        commandList.includes(id) && params.unitId === unitId && commandSubscribe.next(null);
+      });
+      return () => disposable.dispose();
+    }).pipe(debounceTime(16)).subscribe(() => {
       const workbook = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET);
       if (!workbook) return;
       const worksheet = workbook.getActiveSheet();
@@ -370,18 +365,8 @@ const commandList = [SetWorksheetActiveOperation.id, AddConditionalRuleMutation.
       const allRule = conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId()) || [];
       if (!allRule.length)
         return subscriber.next(!1), !1;
-      const hasNotPermission = allRule.some((rule) => rule.ranges.some((range) => {
-        var _a13, _b;
-        const { startRow, startColumn, endRow, endColumn } = range;
-        for (let row = startRow; row <= endRow; row++)
-          for (let col = startColumn; col <= endColumn; col++) {
-            const permission = (_b = (_a13 = worksheet.getCell(row, col)) == null ? void 0 : _a13.selectionProtection) == null ? void 0 : _b[0];
-            if ((permission == null ? void 0 : permission[P.Edit]) === !1 || (permission == null ? void 0 : permission[P.View]) === !1)
-              return !0;
-          }
-        return !1;
-      }));
-      subscriber.next(!hasNotPermission);
+      const hasPermission = allRule.map((rule) => rule.ranges).every((ranges) => checkRangesEditablePermission(accessor, workbook.getUnitId(), worksheet.getSheetId(), ranges));
+      subscriber.next(hasPermission);
     })
   ), selections$ = new Observable((subscriber) => {
     clearRangeEnable$.subscribe((v) => {
@@ -4635,10 +4620,10 @@ const GridLayout = /* @__PURE__ */ getDefaultExportFromCjs(reactGridLayoutExport
   }, [rule]);
   switch (rule.type) {
     case CFRuleType.dataBar: {
-      const { isGradient } = rule.config, commonStyle = { width: "50%", height: "100%" }, positiveColor = isGradient ? `linear-gradient(to right, ${rule.config.positiveColor}, rgb(255 255 255))` : rule.config.positiveColor, nativeColor = isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor})` : rule.config.nativeColor;
+      const { isGradient } = rule.config, commonStyle = { width: "50%", height: "100%" }, positiveColor = isGradient ? `linear-gradient(to right, ${rule.config.positiveColor || defaultDataBarPositiveColor}, rgb(255 255 255))` : rule.config.positiveColor, nativeColor = isGradient ? `linear-gradient(to right,  rgb(255 255 255),${rule.config.nativeColor || defaultDataBarNativeColor})` : rule.config.nativeColor;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.cfPreview, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...commonStyle, background: nativeColor, border: `1px solid ${rule.config.nativeColor}` } }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...commonStyle, background: positiveColor, border: `1px solid ${rule.config.positiveColor}` } })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...commonStyle, background: nativeColor, border: `1px solid ${rule.config.nativeColor || defaultDataBarNativeColor}` } }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...commonStyle, background: positiveColor, border: `1px solid ${rule.config.positiveColor || defaultDataBarPositiveColor}` } })
       ] });
     }
     case CFRuleType.colorScale:
@@ -4764,7 +4749,7 @@ const cfRuleList = "univer-cf-rule-list", ruleSelector = "univer-rule-selector",
 }, "getRuleDescribe");
 let defaultWidth = 0;
 const RuleList = /* @__PURE__ */ __name((props) => {
-  const { onClick } = props, conditionalFormattingRuleModel = useDependency(ConditionalFormattingRuleModel), univerInstanceService = useDependency(IUniverInstanceService), selectionManagerService = useDependency(SheetsSelectionsService), commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), conditionalFormattingI18nController = useDependency(ConditionalFormattingI18nController), workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), void 0, void 0, []), unitId = workbook.getUnitId(), worksheet = workbook.getActiveSheet();
+  const { onClick } = props, conditionalFormattingRuleModel = useDependency(ConditionalFormattingRuleModel), univerInstanceService = useDependency(IUniverInstanceService), selectionManagerService = useDependency(SheetsSelectionsService), commandService = useDependency(ICommandService), localeService = useDependency(LocaleService), injector = useDependency(Injector), conditionalFormattingI18nController = useDependency(ConditionalFormattingI18nController), workbook = useObservable(() => univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET), void 0, void 0, []), unitId = workbook.getUnitId(), worksheet = workbook.getActiveSheet();
   if (!worksheet)
     throw new Error("No active sheet found");
   const subUnitId = worksheet.getSheetId(), [currentRuleRanges, currentRuleRangesSet] = useState([]), [selectValue, selectValueSet] = useState("2"), [fetchRuleListId, fetchRuleListIdSet] = useState(0), [draggingId, draggingIdSet] = useState(-1), [layoutWidth, layoutWidthSet] = useState(defaultWidth), layoutContainerRef = useRef(null), selectOption = [
@@ -4781,25 +4766,9 @@ const RuleList = /* @__PURE__ */ __name((props) => {
       const range = selection.range;
       return ruleList2.filter((rule) => rule.ranges.some((ruleRange2) => Rectangle.intersects(ruleRange2, range)));
     } else if (selectValue === "2")
-      return ruleList2;
+      return [...ruleList2];
     return [];
-  }, "getRuleList"), getConditionalFormattingRulesByPermissionCorrect = /* @__PURE__ */ __name((rules) => {
-    const worksheet2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET).getActiveSheet();
-    return rules.map((rule) => {
-      const ranges = rule.ranges;
-      return (ranges == null ? void 0 : ranges.some((range) => {
-        var _a13, _b;
-        const { startRow, startColumn, endRow, endColumn } = range;
-        for (let row = startRow; row <= endRow; row++)
-          for (let col = startColumn; col <= endColumn; col++) {
-            const permission = (_b = (_a13 = worksheet2 == null ? void 0 : worksheet2.getCell(row, col)) == null ? void 0 : _a13.selectionProtection) == null ? void 0 : _b[0];
-            if ((permission == null ? void 0 : permission[P.Edit]) === !1 || (permission == null ? void 0 : permission[P.View]) === !1)
-              return !0;
-          }
-        return !1;
-      })) ? { ...rule, disable: !0 } : { ...rule };
-    });
-  }, "getConditionalFormattingRulesByPermissionCorrect"), [ruleList, ruleListSet] = useState(getRuleList);
+  }, "getRuleList"), [ruleList, ruleListSet] = useState(getRuleList);
   useHighlightRange(currentRuleRanges), useEffect(() => {
     const disposable = commandService.onCommandExecuted((commandInfo) => {
       commandInfo.id === SetWorksheetActiveOperation.id && fetchRuleListIdSet(Math.random());
@@ -4879,7 +4848,19 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     selectValue === "2" ? commandService.executeCommand(ClearWorksheetCfCommand.id) : selectValue === "1" && ruleList.map((rule) => ({ unitId, subUnitId, cfId: rule.cfId })).forEach((config) => {
       commandService.executeCommand(DeleteCfCommand.id, config);
     });
-  }, "handleClear"), layout = ruleList.map((rule, index2) => ({ i: rule.cfId, x: 0, w: 12, y: index2, h: 1, isResizable: !1 })), ruleListByPermissionCheck = getConditionalFormattingRulesByPermissionCorrect(ruleList), hasDisableRule = ruleListByPermissionCheck == null ? void 0 : ruleListByPermissionCheck.some((rule) => rule.disable);
+  }, "handleClear"), ruleListByPermissionCheck = useMemo(() => {
+    const workbook2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet2 = workbook2.getActiveSheet();
+    return ruleList.filter((rule) => {
+      const ranges = rule.ranges;
+      return checkRangesEditablePermission(injector, workbook2.getUnitId(), worksheet2.getSheetId(), ranges);
+    });
+  }, [ruleList]), layout = ruleListByPermissionCheck.map((rule, index2) => ({ i: rule.cfId, x: 0, w: 12, y: index2, h: 1, isResizable: !1 })), isHasAllRuleEditPermission = useMemo(() => {
+    const workbook2 = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet2 = workbook2.getActiveSheet();
+    return ruleList.every((rule) => {
+      const ranges = rule.ranges;
+      return checkRangesEditablePermission(injector, workbook2.getUnitId(), worksheet2.getSheetId(), ranges);
+    });
+  }, [ruleList]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.cfRuleList, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.ruleSelector, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: conditionalFormattingI18nController.tWithReactNode(
@@ -4890,7 +4871,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
       ).map((ele, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: ele }, index2)) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.btnList, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: localeService.t("sheet.cf.panel.createRule"), placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$3.icon}`, onClick: handleCreate, children: /* @__PURE__ */ jsxRuntimeExports.jsx(IncreaseSingle, {}) }) }),
-        ruleList.length && !hasDisableRule ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: localeService.t("sheet.cf.panel.clear"), placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$3.gap} ${styles$3.icon}`, onClick: handleClear, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteSingle, {}) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$3.gap}  ${styles$3.disabled}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteSingle, {}) })
+        ruleList.length && isHasAllRuleEditPermission ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: localeService.t("sheet.cf.panel.clear"), placement: "bottom", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$3.gap} ${styles$3.icon}`, onClick: handleClear, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteSingle, {}) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$3.gap}  ${styles$3.disabled}`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteSingle, {}) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: layoutContainerRef, className: styles$3.gridLayoutWrap, children: layoutWidth ? /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -4912,7 +4893,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
             }, "onMouseMove"),
             onMouseLeave: /* @__PURE__ */ __name(() => currentRuleRangesSet([]), "onMouseLeave"),
             onClick: /* @__PURE__ */ __name(() => {
-              rule.disable || onClick(rule);
+              onClick(rule);
             }, "onClick"),
             className: `${styles$3.ruleItem} ${draggingId === index2 ? styles$3.active : ""}`,
             children: [
@@ -4929,7 +4910,7 @@ const RuleList = /* @__PURE__ */ __name((props) => {
                 /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.ruleRange, children: rule.ranges.map((range) => serializeRange(range)).join(",") })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.preview, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Preview, { rule: rule.rule }) }),
-              !rule.disable && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
                 "div",
                 {
                   className: `${styles$3.deleteItem} ${draggingId === index2 ? styles$3.active : ""}`,
@@ -5265,12 +5246,10 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     return rule ? (_a14 = rule.config) != null && _a14.isGradient ? "1" : "0" : defaultV;
   }), [positiveColor, positiveColorSet] = useState(() => {
     var _a14;
-    const defaultV = "#abd91a";
-    return rule && ((_a14 = rule.config) == null ? void 0 : _a14.positiveColor) || defaultV;
+    return rule ? ((_a14 = rule.config) == null ? void 0 : _a14.positiveColor) || defaultDataBarPositiveColor : defaultDataBarPositiveColor;
   }), [nativeColor, nativeColorSet] = useState(() => {
     var _a14;
-    const defaultV = "#ffbe38";
-    return rule && ((_a14 = rule.config) == null ? void 0 : _a14.nativeColor) || defaultV;
+    return rule ? ((_a14 = rule.config) == null ? void 0 : _a14.nativeColor) || defaultDataBarNativeColor : defaultDataBarNativeColor;
   }), commonOptions = [createOptionItem$1(CFValueType.num, localeService), createOptionItem$1(CFValueType.percent, localeService), createOptionItem$1(CFValueType.percentile, localeService), createOptionItem$1(CFValueType.formula, localeService)], minOptions = [createOptionItem$1(CFValueType.min, localeService), ...commonOptions], maxOptions = [createOptionItem$1(CFValueType.max, localeService), ...commonOptions], [minValueType, minValueTypeSet] = useState(() => {
     var _a14;
     const defaultV = minOptions[0].value;
@@ -5295,8 +5274,8 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     min: { type: option.minValueType, value: option.minValue },
     max: { type: option.maxValueType, value: option.maxValue },
     isGradient: option.isGradient === "1",
-    positiveColor: option.positiveColor,
-    nativeColor: option.nativeColor
+    positiveColor: option.positiveColor || defaultDataBarPositiveColor,
+    nativeColor: option.nativeColor || defaultDataBarNativeColor
   }, type: CFRuleType.dataBar, isShowValue: option.isShowValue }), "getResult");
   useEffect(() => interceptorManager.intercept(interceptorManager.getInterceptPoints().submit, {
     handler() {
@@ -5864,11 +5843,9 @@ const RuleList = /* @__PURE__ */ __name((props) => {
     handler() {
       return getResult({ style, formula });
     }
-  }), [style, formula, interceptorManager]), useEffect(() => {
-    interceptorManager.intercept(interceptorManager.getInterceptPoints().beforeSubmit, {
-      handler: /* @__PURE__ */ __name((v, _c, next) => !formula || formula.length === 1 || !formulaError.startsWith("=") ? (formulaErrorSet(localeService.t("sheet.cf.errorMessage.formulaError")), !1) : next(v), "handler")
-    });
-  }, [formula]);
+  }), [style, formula, interceptorManager]), useEffect(() => interceptorManager.intercept(interceptorManager.getInterceptPoints().beforeSubmit, {
+    handler: /* @__PURE__ */ __name((v, _c, next) => !formula || formula.length === 1 || !formula.startsWith("=") ? (formulaErrorSet(localeService.t("sheet.cf.errorMessage.formulaError")), !1) : next(v), "handler")
+  }), [formula]);
   const _onChange = /* @__PURE__ */ __name((config) => {
     onChange(getResult(config));
   }, "_onChange");
@@ -6970,7 +6947,7 @@ var __defProp$8 = Object.defineProperty, __getOwnPropDesc$8 = Object.getOwnPrope
 }, "__decorateClass$8"), __decorateParam$8 = /* @__PURE__ */ __name((index2, decorator) => (target, key) => decorator(target, key, index2), "__decorateParam$8"), _a4;
 let SheetsCfRenderController = (_a4 = class extends Disposable {
   constructor(_sheetInterceptorService, _conditionalFormattingService, _univerInstanceService, _renderManagerService, _conditionalFormattingViewModel, _conditionalFormattingRuleModel) {
-    super(), this._sheetInterceptorService = _sheetInterceptorService, this._conditionalFormattingService = _conditionalFormattingService, this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._conditionalFormattingViewModel = _conditionalFormattingViewModel, this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel, this._initViewModelInterceptor(), this._initSkeleton();
+    super(), this._sheetInterceptorService = _sheetInterceptorService, this._conditionalFormattingService = _conditionalFormattingService, this._univerInstanceService = _univerInstanceService, this._renderManagerService = _renderManagerService, this._conditionalFormattingViewModel = _conditionalFormattingViewModel, this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel, this._initViewModelInterceptor(), this._initSkeleton(), this._initVmEffectByRule();
   }
   _initSkeleton() {
     const markDirtySkeleton = /* @__PURE__ */ __name(() => {
@@ -6995,6 +6972,65 @@ let SheetsCfRenderController = (_a4 = class extends Disposable {
       return worksheet ? v.filter((item2) => item2.unitId === workbook.getUnitId() && item2.subUnitId === worksheet.getSheetId()).length > 0 : !1;
     })).subscribe(markDirtySkeleton));
   }
+  _initVmEffectByRule() {
+    this.disposeWithMe(
+      this._conditionalFormattingRuleModel.$ruleChange.subscribe((config) => {
+        const { rule, unitId, subUnitId } = config;
+        switch (config.type) {
+          case "add": {
+            const cfPriorityMap = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId).map((item2) => item2.cfId).reduce((map, cur, index2) => (map.set(cur, index2), map), /* @__PURE__ */ new Map());
+            rule.ranges.forEach((range) => {
+              Range.foreach(range, (row, col) => {
+                this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, rule.cfId), this._conditionalFormattingViewModel.sortCellCf(unitId, subUnitId, row, col, cfPriorityMap);
+              });
+            }), this._conditionalFormattingViewModel.markRuleDirty(unitId, subUnitId, rule);
+            return;
+          }
+          case "delete": {
+            rule.ranges.forEach((range) => {
+              Range.foreach(range, (row, col) => {
+                this._conditionalFormattingViewModel.deleteCellCf(unitId, subUnitId, row, col, rule.cfId);
+              });
+            }), this._conditionalFormattingViewModel.markRuleDirty(unitId, subUnitId, rule);
+            return;
+          }
+          case "set": {
+            const oldRule = config.oldRule, cfPriorityMap = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId).map((item2) => item2.cfId).reduce((map, cur, index2) => (map.set(cur, index2), map), /* @__PURE__ */ new Map()), dispose = this._conditionalFormattingService.interceptorManager.intercept(this._conditionalFormattingService.interceptorManager.getInterceptPoints().beforeUpdateRuleResult, {
+              handler: /* @__PURE__ */ __name((config2, _, next) => {
+                if (unitId === (config2 == null ? void 0 : config2.unitId) && subUnitId === config2.subUnitId && oldRule.cfId === config2.cfId) {
+                  oldRule.ranges.forEach((range) => {
+                    Range.foreach(range, (row, col) => {
+                      this._conditionalFormattingViewModel.deleteCellCf(unitId, subUnitId, row, col, oldRule.cfId);
+                    });
+                  }), rule.ranges.forEach((range) => {
+                    Range.foreach(range, (row, col) => {
+                      this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, oldRule.cfId), this._conditionalFormattingViewModel.sortCellCf(unitId, subUnitId, row, col, cfPriorityMap);
+                    });
+                  }), dispose();
+                  return;
+                }
+                next(config2);
+              }, "handler")
+            });
+            rule.ranges.forEach((range) => {
+              Range.foreach(range, (row, col) => {
+                this._conditionalFormattingViewModel.pushCellCf(unitId, subUnitId, row, col, oldRule.cfId);
+              });
+            }), this._conditionalFormattingViewModel.markRuleDirty(unitId, subUnitId, rule);
+            return;
+          }
+          case "sort": {
+            const cfPriorityMap = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId).map((item2) => item2.cfId).reduce((map, cur, index2) => (map.set(cur, index2), map), /* @__PURE__ */ new Map());
+            rule.ranges.forEach((range) => {
+              Range.foreach(range, (row, col) => {
+                this._conditionalFormattingViewModel.sortCellCf(unitId, subUnitId, row, col, cfPriorityMap);
+              });
+            });
+          }
+        }
+      })
+    );
+  }
   _initViewModelInterceptor() {
     this.disposeWithMe(this._sheetInterceptorService.intercept(INTERCEPTOR_POINT.CELL_CONTENT, {
       handler: /* @__PURE__ */ __name((cell, context, next) => {
@@ -7009,7 +7045,7 @@ let SheetsCfRenderController = (_a4 = class extends Disposable {
   }
 }, __name(_a4, "SheetsCfRenderController"), _a4);
 SheetsCfRenderController = __decorateClass$8([
-  OnLifecycle(LifecycleStages.Rendered, SheetsCfRenderController),
+  OnLifecycle(LifecycleStages.Starting, SheetsCfRenderController),
   __decorateParam$8(0, Inject(SheetInterceptorService)),
   __decorateParam$8(1, Inject(ConditionalFormattingService)),
   __decorateParam$8(2, Inject(IUniverInstanceService)),
@@ -7053,9 +7089,7 @@ let ConditionalFormattingCopyPasteController = (_a5 = class extends Disposable {
     const model = this._conditionalFormattingViewModel.getMatrix(unitId, subUnitId);
     if (!model)
       return;
-    const accessor = {
-      get: this._injector.get.bind(this._injector)
-    }, discreteRange = rangeToDiscreteRange(range, accessor, unitId, subUnitId);
+    const discreteRange = this._injector.invoke((accessor) => rangeToDiscreteRange(range, accessor, unitId, subUnitId));
     if (!discreteRange)
       return;
     const { rows, cols } = discreteRange, cfIdSet = /* @__PURE__ */ new Set();
@@ -7517,36 +7551,25 @@ let ConditionalFormattingClearController = (_a11 = class extends Disposable {
           const workbook = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SHEET), worksheet = workbook.getActiveSheet();
           if (!worksheet)
             return defaultV;
-          const allRules = this._conditionalFormattingRuleModel.getSubunitRules(workbook.getUnitId(), worksheet.getSheetId());
+          const unitId = workbook.getUnitId(), subUnitId = worksheet.getSheetId(), allRules = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId);
           if (!allRules || !allRules.length)
             return defaultV;
-          allRules.filter((rule) => ranges.some((range) => rule.ranges.some((ruleRange2) => Rectangle.getIntersects(ruleRange2, range)))).forEach((rule) => {
-            const mergeRanges = new RangeMergeUtil().add(...rule.ranges).subtract(...ranges).merge();
-            if (mergeRanges.length) {
-              const redo = {
-                id: SetConditionalRuleMutation.id,
-                params: {
-                  unitId: workbook.getUnitId(),
-                  subUnitId: worksheet.getSheetId(),
-                  rule: { ...rule, ranges: mergeRanges }
-                }
-              }, undo = setConditionalRuleMutationUndoFactory(this._injector, redo.params);
-              redos.push(redo), undos.push(...undo);
-            } else {
-              const redo = {
-                id: DeleteConditionalRuleMutation.id,
-                params: {
-                  unitId: workbook.getUnitId(),
-                  subUnitId: worksheet.getSheetId(),
-                  cfId: rule.cfId
-                }
-              }, undo = DeleteConditionalRuleMutationUndoFactory(this._injector, redo.params);
-              redos.push(redo), undos.push(...undo);
-            }
-          });
+          const { redos: interceptRedos, undos: interceptUndos } = generateClearCfMutations(this._injector, allRules, ranges, unitId, subUnitId);
+          redos.push(...interceptRedos), undos.push(...interceptUndos);
         }
         return defaultV;
       }, "getMutations")
+    })), this.disposeWithMe(this._sheetInterceptorService.interceptRanges({
+      getMutations: /* @__PURE__ */ __name(({ unitId, subUnitId, ranges }) => {
+        const redos = [], undos = [], emptyInterceptorArr = { redos, undos };
+        if (!ranges || !ranges.length)
+          return emptyInterceptorArr;
+        const allRules = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId);
+        if (!allRules || !allRules.length)
+          return emptyInterceptorArr;
+        const { redos: interceptRedos, undos: interceptUndos } = generateClearCfMutations(this._injector, allRules, ranges, unitId, subUnitId);
+        return redos.push(...interceptRedos), undos.push(...interceptUndos), emptyInterceptorArr;
+      }, "getMutations")
     }));
   }
 }, __name(_a11, "ConditionalFormattingClearController"), _a11);
@@ -7558,6 +7581,34 @@ ConditionalFormattingClearController = __decorateClass$1([
   __decorateParam$1(3, Inject(SheetsSelectionsService)),
   __decorateParam$1(4, Inject(ConditionalFormattingRuleModel))
 ], ConditionalFormattingClearController);
+function generateClearCfMutations(injector, allRules, ranges, unitId, subUnitId) {
+  const redos = [], undos = [];
+  return allRules.filter((rule) => ranges.some((range) => rule.ranges.some((ruleRange2) => Rectangle.getIntersects(ruleRange2, range)))).forEach((rule) => {
+    const mergeRanges = new RangeMergeUtil().add(...rule.ranges).subtract(...ranges).merge();
+    if (mergeRanges.length) {
+      const redo = {
+        id: SetConditionalRuleMutation.id,
+        params: {
+          unitId,
+          subUnitId,
+          rule: { ...rule, ranges: mergeRanges }
+        }
+      }, undo = setConditionalRuleMutationUndoFactory(injector, redo.params);
+      redos.push(redo), undos.push(...undo);
+    } else {
+      const redo = {
+        id: DeleteConditionalRuleMutation.id,
+        params: {
+          unitId,
+          subUnitId,
+          cfId: rule.cfId
+        }
+      }, undo = DeleteConditionalRuleMutationUndoFactory(injector, redo.params);
+      redos.push(redo), undos.push(...undo);
+    }
+  }), { redos, undos };
+}
+__name(generateClearCfMutations, "generateClearCfMutations");
 var __defProp2 = Object.defineProperty, __getOwnPropDesc = Object.getOwnPropertyDescriptor, __defNormalProp2 = /* @__PURE__ */ __name((obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, "__defNormalProp"), __decorateClass = /* @__PURE__ */ __name((decorators, target, key, kind) => {
   for (var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target, i = decorators.length - 1, decorator; i >= 0; i--)
     (decorator = decorators[i]) && (result = (kind ? decorator(target, key, result) : decorator(result)) || result);

package/lib/types/commands/commands/add-average-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { IAverageHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddAverageCfParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand } from '@univerjs/core';
 import { IConditionFormattingRule, MakePropertyOptional } from '@univerjs/sheets-conditional-formatting';
-
 export interface IAddCfCommandParams {
     unitId?: string;
     subUnitId?: string;

package/lib/types/commands/commands/add-color-scale-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { IColorScale } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddColorScaleConditionalRuleParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-data-bar-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { IDataBar } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddUniqueValuesConditionalRuleParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-duplicate-values-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { IHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddDuplicateValuesConditionalRuleParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-number-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { INumberHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddNumberCfParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-rank-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { IRankHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddRankCfParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-text-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { ITextHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddAverageCfParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-time-period-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { ITimePeriodHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddTimePeriodCf {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/add-unique-values-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand, IRange } from '@univerjs/core';
 import { IHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IAddUniqueValuesConditionalRuleParams {
     ranges: IRange[];
     stopIfTrue?: boolean;

package/lib/types/commands/commands/clear-range-cf.command.d.ts

@@ -1,5 +1,4 @@
 import { ICommand, IRange } from '@univerjs/core';
-
 export interface IClearRangeCfParams {
     ranges?: IRange[];
     unitId?: string;

package/lib/types/commands/commands/clear-worksheet-cf.command.d.ts

@@ -1,5 +1,4 @@
 import { ICommand } from '@univerjs/core';
-
 export interface IClearWorksheetCfParams {
     unitId?: string;
     subUnitId?: string;

package/lib/types/commands/commands/delete-cf.command.d.ts

@@ -1,5 +1,4 @@
 import { ICommand } from '@univerjs/core';
-
 export interface IDeleteCfCommandParams {
     unitId?: string;
     subUnitId?: string;

package/lib/types/commands/commands/move-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand } from '@univerjs/core';
 import { IAnchor } from '@univerjs/sheets-conditional-formatting';
-
 export interface IMoveCfCommand {
     unitId?: string;
     subUnitId?: string;

package/lib/types/commands/commands/set-cf.command.d.ts

@@ -1,6 +1,5 @@
 import { ICommand } from '@univerjs/core';
 import { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting';
-
 export interface ISetCfCommandParams {
     unitId?: string;
     subUnitId?: string;

package/lib/types/commands/operations/open-conditional-formatting-panel.d.ts

@@ -1,5 +1,4 @@
 import { ICommand } from '@univerjs/core';
-
 export declare enum CF_MENU_OPERATION {
     createRule = 1,
     viewRule = 2,

package/lib/types/components/color-picker/index.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 interface IColorPickerProps {
     color: string;
     onChange: (color: string) => void;

package/lib/types/components/conditional-style-editor/index.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IHighlightCell } from '@univerjs/sheets-conditional-formatting';
-
 interface IConditionalStyleEditorProps {
     className?: string;
     style?: IHighlightCell['style'];

package/lib/types/components/panel/index.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting';
-
 interface IConditionFormattingPanelProps {
     rule?: IConditionFormattingRule;
 }

package/lib/types/components/panel/rule-edit/colorScale.d.ts

@@ -1,4 +1,3 @@
 import { default as React } from 'react';
 import { IStyleEditorProps } from './type';
-
 export declare const ColorScaleStyleEditor: (props: IStyleEditorProps) => React.JSX.Element;

package/lib/types/components/panel/rule-edit/dataBar.d.ts

@@ -1,4 +1,3 @@
 import { default as React } from 'react';
 import { IStyleEditorProps } from './type';
-
 export declare const DataBarStyleEditor: (props: IStyleEditorProps) => React.JSX.Element;

package/lib/types/components/panel/rule-edit/formula.d.ts

@@ -1,4 +1,3 @@
 import { default as React } from 'react';
 import { IStyleEditorProps } from './type';
-
 export declare const FormulaStyleEditor: (props: IStyleEditorProps) => React.JSX.Element;

package/lib/types/components/panel/rule-edit/highlightCell.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
 import { INumberHighlightCell, ITextHighlightCell, ITimePeriodHighlightCell } from '@univerjs/sheets-conditional-formatting';
 import { IStyleEditorProps } from './type';
-
 export declare const HighlightCellStyleEditor: (props: IStyleEditorProps<any, ITextHighlightCell | INumberHighlightCell | ITimePeriodHighlightCell>) => React.JSX.Element;

package/lib/types/components/panel/rule-edit/iconSet.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
 import { IIconSet } from '@univerjs/sheets-conditional-formatting';
 import { IStyleEditorProps } from './type';
-
 export declare const IconSet: (props: IStyleEditorProps<unknown, IIconSet>) => React.JSX.Element;

package/lib/types/components/panel/rule-edit/index.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting';
-
 interface IRuleEditProps {
     rule?: IConditionFormattingRule;
     onCancel: () => void;

package/lib/types/components/panel/rule-edit/rank.d.ts

@@ -1,4 +1,3 @@
 import { default as React } from 'react';
 import { IStyleEditorProps } from './type';
-
 export declare const RankStyleEditor: (props: IStyleEditorProps) => React.JSX.Element;

package/lib/types/components/panel/rule-edit/type.d.ts

@@ -1,6 +1,5 @@
 import { InterceptorManager } from '@univerjs/core';
 import { IConditionalFormattingRuleConfig } from '@univerjs/sheets-conditional-formatting';
-
 export declare const beforeSubmit: import('@univerjs/core').IInterceptor<boolean, null>;
 export declare const submit: import('@univerjs/core').IInterceptor<any, null>;
 export interface IStyleEditorProps<S = any, R = IConditionalFormattingRuleConfig> {

package/lib/types/components/panel/rule-list/index.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { IConditionFormattingRule } from '@univerjs/sheets-conditional-formatting';
-
 interface IRuleListProps {
     onClick: (rule: IConditionFormattingRule) => void;
     onCreate: () => void;