@univerjs/sheets-conditional-formatting 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/cjs/index.js

@@ -557,9 +557,8 @@ let ConditionalFormattingRangeIndexModel = class ConditionalFormattingRangeIndex
 		return new Set(Array.from(ids).map((id) => String(id)));
 	}
 	getRulesByRanges(unitId, subUnitId, ranges) {
-		var _this$_conditionalFor;
 		const ids = this.getRuleIdsByRanges(unitId, subUnitId, ranges);
-		return ((_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : []).filter((rule) => ids.has(rule.cfId));
+		return (this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? []).filter((rule) => ids.has(rule.cfId));
 	}
 	dispose() {
 		this.clear();
@@ -688,7 +687,7 @@ const ClearRangeCfCommand = {
 	type: _univerjs_core.CommandType.COMMAND,
 	id: "sheet.command.clear-range-conditional-rule",
 	handler(accessor, params) {
-		var _ref, _params$ranges, _selectionManagerServ;
+		var _selectionManagerServ;
 		if (!params) return false;
 		const conditionalFormattingRangeIndexModel = accessor.get(ConditionalFormattingRangeIndexModel);
 		const conditionalFormattingRangeTransformService = accessor.get(ConditionalFormattingRangeTransformService);
@@ -699,7 +698,7 @@ const ClearRangeCfCommand = {
 		const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService, params);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
-		const ranges = (_ref = (_params$ranges = params.ranges) !== null && _params$ranges !== void 0 ? _params$ranges : (_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) !== null && _ref !== void 0 ? _ref : [];
+		const ranges = params.ranges ?? ((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) ?? [];
 		const allRuleList = conditionalFormattingRangeIndexModel.getRulesByRanges(unitId, subUnitId, ranges).filter((rule) => {
 			var _params$types;
 			return !((_params$types = params.types) === null || _params$types === void 0 ? void 0 : _params$types.length) || params.types.includes(rule.rule.type);
@@ -1204,15 +1203,21 @@ var DataBar = class extends _univerjs_engine_render.SheetExtension {
 		super(..._args);
 		_defineProperty(this, "_paddingRightAndLeft", 2);
 		_defineProperty(this, "_paddingTopAndBottom", 2);
+		_defineProperty(this, "_renderRangeResolver", null);
 		_defineProperty(this, "uKey", dataBarUKey);
 		_defineProperty(this, "Z_INDEX", EXTENSION_Z_INDEX$1);
 		_defineProperty(this, "_radius", 1);
 	}
+	setRenderRangeResolver(resolver) {
+		this._renderRangeResolver = resolver;
+	}
 	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return false;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		const renderRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const sourceRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const renderRanges = this._renderRangeResolver && worksheet.getMergeData().length === 0 ? this._renderRangeResolver(worksheet.getUnitId(), worksheet.getSheetId(), sourceRanges) ?? sourceRanges : sourceRanges;
+		if (!renderRanges.length) return;
 		ctx.save();
 		renderRanges.forEach((range) => {
 			_univerjs_core.Range.foreach(range, (row, col) => {
@@ -1267,6 +1272,10 @@ var DataBar = class extends _univerjs_engine_render.SheetExtension {
 		});
 		ctx.restore();
 	}
+	dispose() {
+		this._renderRangeResolver = null;
+		super.dispose();
+	}
 	_drawRectWithRoundedCorner(ctx, x, y, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
 		const radius = this._radius;
 		if (!height || !width) return;
@@ -1478,7 +1487,7 @@ var HighlightCellCalculateUnit = class extends BaseCalculateUnit {
 					allValue.sort((a, b) => b - a);
 					const configRule = context.rule.rule;
 					if (configRule.isPercent) {
-						if (configRule.isBottom) allValue = allValue.toReversed();
+						if (configRule.isBottom) allValue = allValue.slice().reverse();
 						const threshold = _univerjs_core.Tools.clamp(configRule.value, 0, 100) / 100;
 						const targetIndex = Math.floor(threshold * allValue.length);
 						const safeIndex = _univerjs_core.Tools.clamp(targetIndex - 1, 0, allValue.length - 1);
@@ -1801,7 +1810,9 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 		_defineProperty(this, "_calculateUnitManagers", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_cellCache", new _univerjs_core.LRUMap(CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH));
 		_defineProperty(this, "_markDirty$", new rxjs.Subject());
+		_defineProperty(this, "_cacheClear$", new rxjs.Subject());
 		_defineProperty(this, "markDirty$", this._markDirty$.asObservable());
+		_defineProperty(this, "cacheClear$", this._cacheClear$.asObservable());
 		_defineProperty(this, "_markRuleDirtyAtOnce", (unitId, subUnitId, cfId, isNeedResetPreComputingCache = true) => {
 			this._cellCache.clear();
 			if (isNeedResetPreComputingCache) {
@@ -1863,8 +1874,7 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 		return result;
 	}
 	_getCellCfs(unitId, subUnitId, row, col) {
-		var _this$_conditionalFor;
-		const subunitRules = (_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : [];
+		const subunitRules = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? [];
 		const _calculateUnitManagers = this._ensureCalculateUnitManager(unitId, subUnitId);
 		const list = this._conditionalFormattingRangeIndexModel.getRuleIdsByCell(unitId, subUnitId, row, col);
 		const rules = subunitRules.filter((rule) => list.has(rule.cfId));
@@ -1888,6 +1898,7 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 	clearCache() {
 		this._calculateUnitManagers.clear();
 		this._cellCache.clear();
+		this._cacheClear$.next();
 	}
 	_handleCustomFormulasSeparately() {
 		this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.subscribe((e) => {
@@ -2545,7 +2556,7 @@ for (const key in iconMap) {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -2570,14 +2581,28 @@ const defaultPluginConfig = {};
 
 //#endregion
 //#region src/services/conditional-formatting-style-composer.service.ts
-let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleComposer {
+let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleComposer extends _univerjs_core.Disposable {
 	constructor(_conditionalFormattingRuleModel, _conditionalFormattingViewModel) {
+		super();
 		this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel;
 		this._conditionalFormattingViewModel = _conditionalFormattingViewModel;
+		_defineProperty(this, "_cache", new _univerjs_core.LRUMap(CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH));
+		this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.subscribe(() => this._cache.clear()));
+		this.disposeWithMe(this._conditionalFormattingViewModel.markDirty$.subscribe(() => this._cache.clear()));
+		this.disposeWithMe(this._conditionalFormattingViewModel.cacheClear$.subscribe(() => this._cache.clear()));
+	}
+	dispose() {
+		this._cache.clear();
+		super.dispose();
 	}
 	composeStyle(unitId, subUnitId, row, col) {
+		const cacheKey = `${unitId}_${subUnitId}_${row}_${col}`;
+		if (this._cache.has(cacheKey)) return this._cache.get(cacheKey) ?? null;
 		const cellCfs = this._conditionalFormattingViewModel.getCellCfs(unitId, subUnitId, row, col);
-		if (!(cellCfs === null || cellCfs === void 0 ? void 0 : cellCfs.length)) return null;
+		if (!(cellCfs === null || cellCfs === void 0 ? void 0 : cellCfs.length)) {
+			this._cache.set(cacheKey, null);
+			return null;
+		}
 		const matchedRules = [];
 		let stopIfTrueIndex = -1;
 		for (const cacheItem of cellCfs) {
@@ -2589,13 +2614,17 @@ let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleCompose
 			});
 			if (stopIfTrueIndex === -1 && rule.stopIfTrue && this._isRuleMatched(rule, cacheItem.result)) stopIfTrueIndex = matchedRules.length - 1;
 		}
-		if (!matchedRules.length) return null;
+		if (!matchedRules.length) {
+			this._cache.set(cacheKey, null);
+			return null;
+		}
 		const effectiveRules = stopIfTrueIndex > -1 ? matchedRules.slice(0, stopIfTrueIndex + 1) : matchedRules;
 		const result = {};
 		for (let i = effectiveRules.length - 1; i >= 0; i--) {
 			const { rule, cacheItem } = effectiveRules[i];
 			this._mergeComposeResult(result, rule, cacheItem.result);
 		}
+		this._cache.set(cacheKey, result);
 		return result;
 	}
 	_mergeComposeResult(result, rule, ruleResult) {
@@ -2959,16 +2988,22 @@ var ConditionalFormattingIcon = class extends _univerjs_engine_render.SheetExten
 		_defineProperty(this, "_paddingRightAndLeft", 2);
 		_defineProperty(this, "_width", 15);
 		_defineProperty(this, "_imageMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_renderRangeResolver", null);
 		_defineProperty(this, "uKey", IconUKey);
 		_defineProperty(this, "Z_INDEX", EXTENSION_Z_INDEX);
 		_defineProperty(this, "_radius", 1);
 		this._init();
 	}
+	setRenderRangeResolver(resolver) {
+		this._renderRangeResolver = resolver;
+	}
 	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return false;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		const renderRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const sourceRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const renderRanges = this._renderRangeResolver && worksheet.getMergeData().length === 0 ? this._renderRangeResolver(worksheet.getUnitId(), worksheet.getSheetId(), sourceRanges) ?? sourceRanges : sourceRanges;
+		if (!renderRanges.length) return;
 		ctx.save();
 		renderRanges.forEach((range) => {
 			_univerjs_core.Range.foreach(range, (row, col) => {
@@ -2998,6 +3033,10 @@ var ConditionalFormattingIcon = class extends _univerjs_engine_render.SheetExten
 		});
 		ctx.restore();
 	}
+	dispose() {
+		this._renderRangeResolver = null;
+		super.dispose();
+	}
 	_init() {
 		for (const type in iconMap) iconMap[type].forEach((base64, index) => {
 			const key = this._createKey(type, String(index));

package/lib/es/index.js

@@ -556,9 +556,8 @@ let ConditionalFormattingRangeIndexModel = class ConditionalFormattingRangeIndex
 		return new Set(Array.from(ids).map((id) => String(id)));
 	}
 	getRulesByRanges(unitId, subUnitId, ranges) {
-		var _this$_conditionalFor;
 		const ids = this.getRuleIdsByRanges(unitId, subUnitId, ranges);
-		return ((_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : []).filter((rule) => ids.has(rule.cfId));
+		return (this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? []).filter((rule) => ids.has(rule.cfId));
 	}
 	dispose() {
 		this.clear();
@@ -687,7 +686,7 @@ const ClearRangeCfCommand = {
 	type: CommandType.COMMAND,
 	id: "sheet.command.clear-range-conditional-rule",
 	handler(accessor, params) {
-		var _ref, _params$ranges, _selectionManagerServ;
+		var _selectionManagerServ;
 		if (!params) return false;
 		const conditionalFormattingRangeIndexModel = accessor.get(ConditionalFormattingRangeIndexModel);
 		const conditionalFormattingRangeTransformService = accessor.get(ConditionalFormattingRangeTransformService);
@@ -698,7 +697,7 @@ const ClearRangeCfCommand = {
 		const target = getSheetCommandTarget(univerInstanceService, params);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
-		const ranges = (_ref = (_params$ranges = params.ranges) !== null && _params$ranges !== void 0 ? _params$ranges : (_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) !== null && _ref !== void 0 ? _ref : [];
+		const ranges = params.ranges ?? ((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) ?? [];
 		const allRuleList = conditionalFormattingRangeIndexModel.getRulesByRanges(unitId, subUnitId, ranges).filter((rule) => {
 			var _params$types;
 			return !((_params$types = params.types) === null || _params$types === void 0 ? void 0 : _params$types.length) || params.types.includes(rule.rule.type);
@@ -1203,15 +1202,21 @@ var DataBar = class extends SheetExtension {
 		super(..._args);
 		_defineProperty(this, "_paddingRightAndLeft", 2);
 		_defineProperty(this, "_paddingTopAndBottom", 2);
+		_defineProperty(this, "_renderRangeResolver", null);
 		_defineProperty(this, "uKey", dataBarUKey);
 		_defineProperty(this, "Z_INDEX", EXTENSION_Z_INDEX$1);
 		_defineProperty(this, "_radius", 1);
 	}
+	setRenderRangeResolver(resolver) {
+		this._renderRangeResolver = resolver;
+	}
 	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return false;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		const renderRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const sourceRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const renderRanges = this._renderRangeResolver && worksheet.getMergeData().length === 0 ? this._renderRangeResolver(worksheet.getUnitId(), worksheet.getSheetId(), sourceRanges) ?? sourceRanges : sourceRanges;
+		if (!renderRanges.length) return;
 		ctx.save();
 		renderRanges.forEach((range) => {
 			Range.foreach(range, (row, col) => {
@@ -1266,6 +1271,10 @@ var DataBar = class extends SheetExtension {
 		});
 		ctx.restore();
 	}
+	dispose() {
+		this._renderRangeResolver = null;
+		super.dispose();
+	}
 	_drawRectWithRoundedCorner(ctx, x, y, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
 		const radius = this._radius;
 		if (!height || !width) return;
@@ -1477,7 +1486,7 @@ var HighlightCellCalculateUnit = class extends BaseCalculateUnit {
 					allValue.sort((a, b) => b - a);
 					const configRule = context.rule.rule;
 					if (configRule.isPercent) {
-						if (configRule.isBottom) allValue = allValue.toReversed();
+						if (configRule.isBottom) allValue = allValue.slice().reverse();
 						const threshold = Tools.clamp(configRule.value, 0, 100) / 100;
 						const targetIndex = Math.floor(threshold * allValue.length);
 						const safeIndex = Tools.clamp(targetIndex - 1, 0, allValue.length - 1);
@@ -1800,7 +1809,9 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 		_defineProperty(this, "_calculateUnitManagers", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_cellCache", new LRUMap(CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH));
 		_defineProperty(this, "_markDirty$", new Subject());
+		_defineProperty(this, "_cacheClear$", new Subject());
 		_defineProperty(this, "markDirty$", this._markDirty$.asObservable());
+		_defineProperty(this, "cacheClear$", this._cacheClear$.asObservable());
 		_defineProperty(this, "_markRuleDirtyAtOnce", (unitId, subUnitId, cfId, isNeedResetPreComputingCache = true) => {
 			this._cellCache.clear();
 			if (isNeedResetPreComputingCache) {
@@ -1862,8 +1873,7 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 		return result;
 	}
 	_getCellCfs(unitId, subUnitId, row, col) {
-		var _this$_conditionalFor;
-		const subunitRules = (_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : [];
+		const subunitRules = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? [];
 		const _calculateUnitManagers = this._ensureCalculateUnitManager(unitId, subUnitId);
 		const list = this._conditionalFormattingRangeIndexModel.getRuleIdsByCell(unitId, subUnitId, row, col);
 		const rules = subunitRules.filter((rule) => list.has(rule.cfId));
@@ -1887,6 +1897,7 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 	clearCache() {
 		this._calculateUnitManagers.clear();
 		this._cellCache.clear();
+		this._cacheClear$.next();
 	}
 	_handleCustomFormulasSeparately() {
 		this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.subscribe((e) => {
@@ -2544,7 +2555,7 @@ for (const key in iconMap) {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -2569,14 +2580,28 @@ const defaultPluginConfig = {};
 
 //#endregion
 //#region src/services/conditional-formatting-style-composer.service.ts
-let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleComposer {
+let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleComposer extends Disposable {
 	constructor(_conditionalFormattingRuleModel, _conditionalFormattingViewModel) {
+		super();
 		this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel;
 		this._conditionalFormattingViewModel = _conditionalFormattingViewModel;
+		_defineProperty(this, "_cache", new LRUMap(CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH));
+		this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.subscribe(() => this._cache.clear()));
+		this.disposeWithMe(this._conditionalFormattingViewModel.markDirty$.subscribe(() => this._cache.clear()));
+		this.disposeWithMe(this._conditionalFormattingViewModel.cacheClear$.subscribe(() => this._cache.clear()));
+	}
+	dispose() {
+		this._cache.clear();
+		super.dispose();
 	}
 	composeStyle(unitId, subUnitId, row, col) {
+		const cacheKey = `${unitId}_${subUnitId}_${row}_${col}`;
+		if (this._cache.has(cacheKey)) return this._cache.get(cacheKey) ?? null;
 		const cellCfs = this._conditionalFormattingViewModel.getCellCfs(unitId, subUnitId, row, col);
-		if (!(cellCfs === null || cellCfs === void 0 ? void 0 : cellCfs.length)) return null;
+		if (!(cellCfs === null || cellCfs === void 0 ? void 0 : cellCfs.length)) {
+			this._cache.set(cacheKey, null);
+			return null;
+		}
 		const matchedRules = [];
 		let stopIfTrueIndex = -1;
 		for (const cacheItem of cellCfs) {
@@ -2588,13 +2613,17 @@ let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleCompose
 			});
 			if (stopIfTrueIndex === -1 && rule.stopIfTrue && this._isRuleMatched(rule, cacheItem.result)) stopIfTrueIndex = matchedRules.length - 1;
 		}
-		if (!matchedRules.length) return null;
+		if (!matchedRules.length) {
+			this._cache.set(cacheKey, null);
+			return null;
+		}
 		const effectiveRules = stopIfTrueIndex > -1 ? matchedRules.slice(0, stopIfTrueIndex + 1) : matchedRules;
 		const result = {};
 		for (let i = effectiveRules.length - 1; i >= 0; i--) {
 			const { rule, cacheItem } = effectiveRules[i];
 			this._mergeComposeResult(result, rule, cacheItem.result);
 		}
+		this._cache.set(cacheKey, result);
 		return result;
 	}
 	_mergeComposeResult(result, rule, ruleResult) {
@@ -2958,16 +2987,22 @@ var ConditionalFormattingIcon = class extends SheetExtension {
 		_defineProperty(this, "_paddingRightAndLeft", 2);
 		_defineProperty(this, "_width", 15);
 		_defineProperty(this, "_imageMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_renderRangeResolver", null);
 		_defineProperty(this, "uKey", IconUKey);
 		_defineProperty(this, "Z_INDEX", EXTENSION_Z_INDEX);
 		_defineProperty(this, "_radius", 1);
 		this._init();
 	}
+	setRenderRangeResolver(resolver) {
+		this._renderRangeResolver = resolver;
+	}
 	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return false;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		const renderRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const sourceRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const renderRanges = this._renderRangeResolver && worksheet.getMergeData().length === 0 ? this._renderRangeResolver(worksheet.getUnitId(), worksheet.getSheetId(), sourceRanges) ?? sourceRanges : sourceRanges;
+		if (!renderRanges.length) return;
 		ctx.save();
 		renderRanges.forEach((range) => {
 			Range.foreach(range, (row, col) => {
@@ -2997,6 +3032,10 @@ var ConditionalFormattingIcon = class extends SheetExtension {
 		});
 		ctx.restore();
 	}
+	dispose() {
+		this._renderRangeResolver = null;
+		super.dispose();
+	}
 	_init() {
 		for (const type in iconMap) iconMap[type].forEach((base64, index) => {
 			const key = this._createKey(type, String(index));

package/lib/index.js

@@ -556,9 +556,8 @@ let ConditionalFormattingRangeIndexModel = class ConditionalFormattingRangeIndex
 		return new Set(Array.from(ids).map((id) => String(id)));
 	}
 	getRulesByRanges(unitId, subUnitId, ranges) {
-		var _this$_conditionalFor;
 		const ids = this.getRuleIdsByRanges(unitId, subUnitId, ranges);
-		return ((_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : []).filter((rule) => ids.has(rule.cfId));
+		return (this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? []).filter((rule) => ids.has(rule.cfId));
 	}
 	dispose() {
 		this.clear();
@@ -687,7 +686,7 @@ const ClearRangeCfCommand = {
 	type: CommandType.COMMAND,
 	id: "sheet.command.clear-range-conditional-rule",
 	handler(accessor, params) {
-		var _ref, _params$ranges, _selectionManagerServ;
+		var _selectionManagerServ;
 		if (!params) return false;
 		const conditionalFormattingRangeIndexModel = accessor.get(ConditionalFormattingRangeIndexModel);
 		const conditionalFormattingRangeTransformService = accessor.get(ConditionalFormattingRangeTransformService);
@@ -698,7 +697,7 @@ const ClearRangeCfCommand = {
 		const target = getSheetCommandTarget(univerInstanceService, params);
 		if (!target) return false;
 		const { unitId, subUnitId } = target;
-		const ranges = (_ref = (_params$ranges = params.ranges) !== null && _params$ranges !== void 0 ? _params$ranges : (_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) !== null && _ref !== void 0 ? _ref : [];
+		const ranges = params.ranges ?? ((_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ.map((selection) => selection.range)) ?? [];
 		const allRuleList = conditionalFormattingRangeIndexModel.getRulesByRanges(unitId, subUnitId, ranges).filter((rule) => {
 			var _params$types;
 			return !((_params$types = params.types) === null || _params$types === void 0 ? void 0 : _params$types.length) || params.types.includes(rule.rule.type);
@@ -1203,15 +1202,21 @@ var DataBar = class extends SheetExtension {
 		super(..._args);
 		_defineProperty(this, "_paddingRightAndLeft", 2);
 		_defineProperty(this, "_paddingTopAndBottom", 2);
+		_defineProperty(this, "_renderRangeResolver", null);
 		_defineProperty(this, "uKey", dataBarUKey);
 		_defineProperty(this, "Z_INDEX", EXTENSION_Z_INDEX$1);
 		_defineProperty(this, "_radius", 1);
 	}
+	setRenderRangeResolver(resolver) {
+		this._renderRangeResolver = resolver;
+	}
 	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return false;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		const renderRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const sourceRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const renderRanges = this._renderRangeResolver && worksheet.getMergeData().length === 0 ? this._renderRangeResolver(worksheet.getUnitId(), worksheet.getSheetId(), sourceRanges) ?? sourceRanges : sourceRanges;
+		if (!renderRanges.length) return;
 		ctx.save();
 		renderRanges.forEach((range) => {
 			Range.foreach(range, (row, col) => {
@@ -1266,6 +1271,10 @@ var DataBar = class extends SheetExtension {
 		});
 		ctx.restore();
 	}
+	dispose() {
+		this._renderRangeResolver = null;
+		super.dispose();
+	}
 	_drawRectWithRoundedCorner(ctx, x, y, width, height, topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius) {
 		const radius = this._radius;
 		if (!height || !width) return;
@@ -1477,7 +1486,7 @@ var HighlightCellCalculateUnit = class extends BaseCalculateUnit {
 					allValue.sort((a, b) => b - a);
 					const configRule = context.rule.rule;
 					if (configRule.isPercent) {
-						if (configRule.isBottom) allValue = allValue.toReversed();
+						if (configRule.isBottom) allValue = allValue.slice().reverse();
 						const threshold = Tools.clamp(configRule.value, 0, 100) / 100;
 						const targetIndex = Math.floor(threshold * allValue.length);
 						const safeIndex = Tools.clamp(targetIndex - 1, 0, allValue.length - 1);
@@ -1800,7 +1809,9 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 		_defineProperty(this, "_calculateUnitManagers", /* @__PURE__ */ new Map());
 		_defineProperty(this, "_cellCache", new LRUMap(CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH));
 		_defineProperty(this, "_markDirty$", new Subject());
+		_defineProperty(this, "_cacheClear$", new Subject());
 		_defineProperty(this, "markDirty$", this._markDirty$.asObservable());
+		_defineProperty(this, "cacheClear$", this._cacheClear$.asObservable());
 		_defineProperty(this, "_markRuleDirtyAtOnce", (unitId, subUnitId, cfId, isNeedResetPreComputingCache = true) => {
 			this._cellCache.clear();
 			if (isNeedResetPreComputingCache) {
@@ -1862,8 +1873,7 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 		return result;
 	}
 	_getCellCfs(unitId, subUnitId, row, col) {
-		var _this$_conditionalFor;
-		const subunitRules = (_this$_conditionalFor = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId)) !== null && _this$_conditionalFor !== void 0 ? _this$_conditionalFor : [];
+		const subunitRules = this._conditionalFormattingRuleModel.getSubunitRules(unitId, subUnitId) ?? [];
 		const _calculateUnitManagers = this._ensureCalculateUnitManager(unitId, subUnitId);
 		const list = this._conditionalFormattingRangeIndexModel.getRuleIdsByCell(unitId, subUnitId, row, col);
 		const rules = subunitRules.filter((rule) => list.has(rule.cfId));
@@ -1887,6 +1897,7 @@ let ConditionalFormattingViewModel = class ConditionalFormattingViewModel extend
 	clearCache() {
 		this._calculateUnitManagers.clear();
 		this._cellCache.clear();
+		this._cacheClear$.next();
 	}
 	_handleCustomFormulasSeparately() {
 		this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.subscribe((e) => {
@@ -2544,7 +2555,7 @@ for (const key in iconMap) {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-conditional-formatting";
-var version = "1.0.0-alpha.8";
+var version = "1.0.0-beta.1";
 
 //#endregion
 //#region src/config/config.ts
@@ -2569,14 +2580,28 @@ const defaultPluginConfig = {};
 
 //#endregion
 //#region src/services/conditional-formatting-style-composer.service.ts
-let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleComposer {
+let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleComposer extends Disposable {
 	constructor(_conditionalFormattingRuleModel, _conditionalFormattingViewModel) {
+		super();
 		this._conditionalFormattingRuleModel = _conditionalFormattingRuleModel;
 		this._conditionalFormattingViewModel = _conditionalFormattingViewModel;
+		_defineProperty(this, "_cache", new LRUMap(CONDITIONAL_FORMATTING_VIEWPORT_CACHE_LENGTH));
+		this.disposeWithMe(this._conditionalFormattingRuleModel.$ruleChange.subscribe(() => this._cache.clear()));
+		this.disposeWithMe(this._conditionalFormattingViewModel.markDirty$.subscribe(() => this._cache.clear()));
+		this.disposeWithMe(this._conditionalFormattingViewModel.cacheClear$.subscribe(() => this._cache.clear()));
+	}
+	dispose() {
+		this._cache.clear();
+		super.dispose();
 	}
 	composeStyle(unitId, subUnitId, row, col) {
+		const cacheKey = `${unitId}_${subUnitId}_${row}_${col}`;
+		if (this._cache.has(cacheKey)) return this._cache.get(cacheKey) ?? null;
 		const cellCfs = this._conditionalFormattingViewModel.getCellCfs(unitId, subUnitId, row, col);
-		if (!(cellCfs === null || cellCfs === void 0 ? void 0 : cellCfs.length)) return null;
+		if (!(cellCfs === null || cellCfs === void 0 ? void 0 : cellCfs.length)) {
+			this._cache.set(cacheKey, null);
+			return null;
+		}
 		const matchedRules = [];
 		let stopIfTrueIndex = -1;
 		for (const cacheItem of cellCfs) {
@@ -2588,13 +2613,17 @@ let ConditionalFormattingStyleComposer = class ConditionalFormattingStyleCompose
 			});
 			if (stopIfTrueIndex === -1 && rule.stopIfTrue && this._isRuleMatched(rule, cacheItem.result)) stopIfTrueIndex = matchedRules.length - 1;
 		}
-		if (!matchedRules.length) return null;
+		if (!matchedRules.length) {
+			this._cache.set(cacheKey, null);
+			return null;
+		}
 		const effectiveRules = stopIfTrueIndex > -1 ? matchedRules.slice(0, stopIfTrueIndex + 1) : matchedRules;
 		const result = {};
 		for (let i = effectiveRules.length - 1; i >= 0; i--) {
 			const { rule, cacheItem } = effectiveRules[i];
 			this._mergeComposeResult(result, rule, cacheItem.result);
 		}
+		this._cache.set(cacheKey, result);
 		return result;
 	}
 	_mergeComposeResult(result, rule, ruleResult) {
@@ -2958,16 +2987,22 @@ var ConditionalFormattingIcon = class extends SheetExtension {
 		_defineProperty(this, "_paddingRightAndLeft", 2);
 		_defineProperty(this, "_width", 15);
 		_defineProperty(this, "_imageMap", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_renderRangeResolver", null);
 		_defineProperty(this, "uKey", IconUKey);
 		_defineProperty(this, "Z_INDEX", EXTENSION_Z_INDEX);
 		_defineProperty(this, "_radius", 1);
 		this._init();
 	}
+	setRenderRangeResolver(resolver) {
+		this._renderRangeResolver = resolver;
+	}
 	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return false;
 		const mergeCellRendered = /* @__PURE__ */ new Set();
-		const renderRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const sourceRanges = (diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment];
+		const renderRanges = this._renderRangeResolver && worksheet.getMergeData().length === 0 ? this._renderRangeResolver(worksheet.getUnitId(), worksheet.getSheetId(), sourceRanges) ?? sourceRanges : sourceRanges;
+		if (!renderRanges.length) return;
 		ctx.save();
 		renderRanges.forEach((range) => {
 			Range.foreach(range, (row, col) => {
@@ -2997,6 +3032,10 @@ var ConditionalFormattingIcon = class extends SheetExtension {
 		});
 		ctx.restore();
 	}
+	dispose() {
+		this._renderRangeResolver = null;
+		super.dispose();
+	}
 	_init() {
 		for (const type in iconMap) iconMap[type].forEach((base64, index) => {
 			const key = this._createKey(type, String(index));

package/lib/types/facade/f-conditional-formatting-builder.d.ts

@@ -25,7 +25,7 @@ declare class ConditionalFormatRuleBaseBuilder {
     protected get _ruleConfig(): IConditionalFormattingRuleConfig | null;
     protected _getDefaultConfig(type?: CFRuleType): IConditionalFormattingRuleConfig;
     constructor(initRule?: Partial<IConditionFormattingRule>);
-    protected _ensureAttr(obj: Record<string, any>, keys: string[]): Record<string, any>;
+    protected _ensureAttr<T extends object>(obj: T, keys: string[]): T;
     /**
      * Constructs a conditional format rule from the settings applied to the builder.
      * @returns {IConditionFormattingRule} The conditional format rule.

package/lib/types/models/conditional-formatting-view-model.d.ts

@@ -30,6 +30,7 @@ export declare class ConditionalFormattingViewModel extends Disposable {
      */
     private _cellCache;
     private _markDirty$;
+    private _cacheClear$;
     /**
      * The rendering layer listens to this variable to determine whether a reRender is necessary.
      * @memberof ConditionalFormattingViewModel
@@ -40,6 +41,7 @@ export declare class ConditionalFormattingViewModel extends Disposable {
         subUnitId: string;
         isImmediately?: boolean;
     }>;
+    cacheClear$: import("rxjs").Observable<void>;
     constructor(_injector: Injector, _conditionalFormattingRuleModel: ConditionalFormattingRuleModel, _conditionalFormattingRangeIndexModel: ConditionalFormattingRangeIndexModel, _conditionalFormattingFormulaService: ConditionalFormattingFormulaService, _univerInstanceService: IUniverInstanceService);
     private _initCFFormulaListener;
     getCellCfs(unitId: string, subUnitId: string, row: number, col: number): {

package/lib/types/render/data-bar.render.d.ts

@@ -15,6 +15,7 @@
  */
 import type { IRange, IScale } from '@univerjs/core';
 import type { SpreadsheetSkeleton, UniverRenderingContext } from '@univerjs/engine-render';
+import type { IConditionalFormattingRenderRangeResolver } from './type';
 import { SheetExtension } from '@univerjs/engine-render';
 export declare const dataBarUKey = "sheet-conditional-rule-data-bar";
 export declare const defaultDataBarPositiveColor = "#ffbe38";
@@ -23,9 +24,12 @@ export declare const defaultPlaceholderColor = "#000";
 export declare class DataBar extends SheetExtension {
     private _paddingRightAndLeft;
     private _paddingTopAndBottom;
+    private _renderRangeResolver;
     uKey: string;
     Z_INDEX: number;
     _radius: number;
+    setRenderRangeResolver(resolver: IConditionalFormattingRenderRangeResolver | null): void;
     draw(ctx: UniverRenderingContext, _parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton, diffRanges: IRange[]): false | undefined;
+    dispose(): void;
     private _drawRectWithRoundedCorner;
 }

package/lib/types/render/icon.render.d.ts

@@ -15,6 +15,7 @@
  */
 import type { IRange, IScale } from '@univerjs/core';
 import type { SpreadsheetSkeleton, UniverRenderingContext } from '@univerjs/engine-render';
+import type { IConditionalFormattingRenderRangeResolver } from './type';
 import { SheetExtension } from '@univerjs/engine-render';
 export declare const IconUKey = "sheet-conditional-rule-icon";
 export declare const DEFAULT_WIDTH = 15;
@@ -23,11 +24,14 @@ export declare class ConditionalFormattingIcon extends SheetExtension {
     private _paddingRightAndLeft;
     private _width;
     private _imageMap;
+    private _renderRangeResolver;
     uKey: string;
     Z_INDEX: number;
     _radius: number;
     constructor();
+    setRenderRangeResolver(resolver: IConditionalFormattingRenderRangeResolver | null): void;
     draw(ctx: UniverRenderingContext, _parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton, diffRanges: IRange[]): false | undefined;
+    dispose(): void;
     private _init;
     private _createKey;
 }

package/lib/types/render/type.d.ts

@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { ICellData } from '@univerjs/core';
+import type { ICellData, IRange } from '@univerjs/core';
 import type { IIconSetType } from '../models/icon-map';
+export type IConditionalFormattingRenderRangeResolver = (unitId: string, subUnitId: string, ranges: IRange[]) => IRange[] | null;
 export interface IDataBarRenderParams {
     color: string;
     value: number;