@univerjs/sheets-ui 0.22.0 → 0.22.1-insiders.20260516-8900c44

package/lib/cjs/index.js

@@ -14778,26 +14778,26 @@ let SheetRenderController = class SheetRenderController extends _univerjs_core.R
 	}
 	_initRenderMetricSubscriber() {
 		const { engine } = this._context;
-		engine.beginFrame$.subscribe(() => {
+		this.disposeWithMe(engine.beginFrame$.subscribe(() => {
 			this._renderFrameTimeMetric = null;
 			this._renderFrameTags = {};
-		});
-		engine.endFrame$.subscribe(() => {
+		}));
+		this.disposeWithMe(engine.endFrame$.subscribe(() => {
 			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).filter((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX)).length > 0) this._afterRenderMetric$.next({
 				frameTimeMetric: this._renderFrameTimeMetric,
 				tags: this._renderFrameTags
 			});
-		});
-		engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
+		}));
+		this.disposeWithMe(engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
 			if (!this._renderFrameTimeMetric) this._renderFrameTimeMetric = {};
 			if (!this._renderFrameTimeMetric[key]) this._renderFrameTimeMetric[key] = [];
 			this._renderFrameTimeMetric[key].push(Math.round(value * 100) / 100);
-		});
-		engine.renderFrameTags$.subscribe(([key, value]) => {
+		}));
+		this.disposeWithMe(engine.renderFrameTags$.subscribe(([key, value]) => {
 			this._renderFrameTags[key] = value;
-		});
+		}));
 		const frameInfoList = [];
-		this._afterRenderMetric$.pipe((0, rxjs.withLatestFrom)(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
+		this.disposeWithMe(this._afterRenderMetric$.pipe((0, rxjs.withLatestFrom)(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
 			frameInfoList.push({
 				FPS: basicFrameTimeInfo.FPS,
 				elapsedTime: basicFrameTimeInfo.elapsedTime,
@@ -14809,7 +14809,7 @@ let SheetRenderController = class SheetRenderController extends _univerjs_core.R
 				this._captureRenderMetric(frameInfoList);
 				frameInfoList.length = 0;
 			}
-		});
+		}));
 	}
 	/**
 	* Send render metric to telemetry service
@@ -21036,7 +21036,7 @@ function DefinedName({ disable }) {
 //#endregion
 //#region src/views/formula-bar/FormulaBar.tsx
 function FormulaBar(props) {
-	var _editState$documentLa, _editState$documentLa2;
+	var _workbookEditablePerm, _editState$documentLa, _editState$documentLa2;
 	const { className, disableDefinedName } = props;
 	const [iconActivated, setIconActivated] = (0, react.useState)(false);
 	const [arrowDirection, setArrowDirection] = (0, react.useState)(0);
@@ -21064,6 +21064,10 @@ function FormulaBar(props) {
 	const contextService = (0, _univerjs_ui.useDependency)(_univerjs_core.IContextService);
 	(0, _univerjs_ui.useObservable)((0, react.useMemo)(() => contextService.subscribeContextValue$(_univerjs_core.FOCUSING_FX_BAR_EDITOR), [contextService]));
 	const isFocusFxBar = contextService.getContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR);
+	const workbookEditablePermission = (0, _univerjs_ui.useObservable)((0, react.useMemo)(() => {
+		if (!workbook) return;
+		return permissionService.getPermissionPoint$(new _univerjs_sheets.WorkbookEditablePermission(workbook.getUnitId()).id);
+	}, [permissionService, workbook]));
 	const ref = (0, react.useRef)(null);
 	const editorService = (0, _univerjs_ui.useDependency)(_univerjs_docs_ui.IEditorService);
 	const config = (0, _univerjs_ui.useConfigValue)(SHEETS_UI_PLUGIN_CONFIG_KEY);
@@ -21165,11 +21169,18 @@ function FormulaBar(props) {
 	}
 	const { viewDisable, editDisable: permissionEditDisable } = disableInfo;
 	const editDisable = permissionEditDisable || !!disableEdit;
+	const workbookEditDisable = !((_workbookEditablePerm = workbookEditablePermission === null || workbookEditablePermission === void 0 ? void 0 : workbookEditablePermission.value) !== null && _workbookEditablePerm !== void 0 ? _workbookEditablePerm : true);
+	const editorActivationDisable = editDisable || workbookEditDisable;
 	const disabled = editDisable || imageDisable;
 	const shouldSkipFocus = (0, react.useRef)(false);
 	const handlePointerDown = () => {
 		try {
 			if (editorBridgeService.isVisible().visible === false) {
+				if (editorActivationDisable) {
+					contextService.setContextValue(_univerjs_core.FOCUSING_FX_BAR_EDITOR, true);
+					editorService.focus(_univerjs_core.DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+					return;
+				}
 				if (!commandService.syncExecuteCommand(SetCellEditVisibleOperation.id, {
 					visible: true,
 					eventType: _univerjs_engine_render.DeviceInputEventType.PointerDown,
@@ -23979,7 +23990,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "0.22.0";
+var version = "0.22.1-insiders.20260516-8900c44";
 
 //#endregion
 //#region src/services/cell-alert-manager.service.ts
@@ -26773,28 +26784,30 @@ var RangeProtectionRenderExtension = class extends _univerjs_engine_render.Sheet
 	getShadowStrategy() {
 		return this._shadowStrategy;
 	}
-	draw(ctx, _parentScale, spreadsheetSkeleton) {
+	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return;
 		ctx.save();
 		if (!this._pattern) this._pattern = ctx.createPattern(this._img, "repeat");
 		this.renderCache.clear();
-		_univerjs_core.Range.foreach(spreadsheetSkeleton.rowColumnSegment, (row, col) => {
-			if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
-			const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
-			if (!this._pattern) return;
-			ctx.fillStyle = this._pattern;
-			selectionProtection.forEach((config) => {
-				if (!config.ruleId) return;
-				if (this.shouldRender(config)) {
-					if (this.renderCache.has(config.ruleId)) return;
-					this.renderCache.add(config.ruleId);
-					config.ranges.forEach((range) => {
-						const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
-						const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
-						ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
-					});
-				}
+		((diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment]).forEach((range) => {
+			_univerjs_core.Range.foreach(range, (row, col) => {
+				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
+				const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
+				if (!this._pattern) return;
+				ctx.fillStyle = this._pattern;
+				selectionProtection.forEach((config) => {
+					if (!config.ruleId) return;
+					if (this.shouldRender(config)) {
+						if (this.renderCache.has(config.ruleId)) return;
+						this.renderCache.add(config.ruleId);
+						config.ranges.forEach((range) => {
+							const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
+							const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
+							ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
+						});
+					}
+				});
 			});
 		});
 		ctx.restore();
@@ -28865,9 +28878,9 @@ let SheetSkeletonRenderController = class SheetSkeletonRenderController extends
 		this._context = _context;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
 		this._renderManagerService = _renderManagerService;
-		this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
 			this._updateSceneSize(param);
-		});
+		}));
 	}
 	_updateSceneSize(param) {
 		var _this$_renderManagerS;

package/lib/es/index.js

@@ -14749,26 +14749,26 @@ let SheetRenderController = class SheetRenderController extends RxDisposable {
 	}
 	_initRenderMetricSubscriber() {
 		const { engine } = this._context;
-		engine.beginFrame$.subscribe(() => {
+		this.disposeWithMe(engine.beginFrame$.subscribe(() => {
 			this._renderFrameTimeMetric = null;
 			this._renderFrameTags = {};
-		});
-		engine.endFrame$.subscribe(() => {
+		}));
+		this.disposeWithMe(engine.endFrame$.subscribe(() => {
 			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).filter((key) => key.startsWith(SHEET_EXTENSION_PREFIX)).length > 0) this._afterRenderMetric$.next({
 				frameTimeMetric: this._renderFrameTimeMetric,
 				tags: this._renderFrameTags
 			});
-		});
-		engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
+		}));
+		this.disposeWithMe(engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
 			if (!this._renderFrameTimeMetric) this._renderFrameTimeMetric = {};
 			if (!this._renderFrameTimeMetric[key]) this._renderFrameTimeMetric[key] = [];
 			this._renderFrameTimeMetric[key].push(Math.round(value * 100) / 100);
-		});
-		engine.renderFrameTags$.subscribe(([key, value]) => {
+		}));
+		this.disposeWithMe(engine.renderFrameTags$.subscribe(([key, value]) => {
 			this._renderFrameTags[key] = value;
-		});
+		}));
 		const frameInfoList = [];
-		this._afterRenderMetric$.pipe(withLatestFrom(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
+		this.disposeWithMe(this._afterRenderMetric$.pipe(withLatestFrom(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
 			frameInfoList.push({
 				FPS: basicFrameTimeInfo.FPS,
 				elapsedTime: basicFrameTimeInfo.elapsedTime,
@@ -14780,7 +14780,7 @@ let SheetRenderController = class SheetRenderController extends RxDisposable {
 				this._captureRenderMetric(frameInfoList);
 				frameInfoList.length = 0;
 			}
-		});
+		}));
 	}
 	/**
 	* Send render metric to telemetry service
@@ -21007,7 +21007,7 @@ function DefinedName({ disable }) {
 //#endregion
 //#region src/views/formula-bar/FormulaBar.tsx
 function FormulaBar(props) {
-	var _editState$documentLa, _editState$documentLa2;
+	var _workbookEditablePerm, _editState$documentLa, _editState$documentLa2;
 	const { className, disableDefinedName } = props;
 	const [iconActivated, setIconActivated] = useState(false);
 	const [arrowDirection, setArrowDirection] = useState(0);
@@ -21035,6 +21035,10 @@ function FormulaBar(props) {
 	const contextService = useDependency(IContextService);
 	useObservable(useMemo(() => contextService.subscribeContextValue$(FOCUSING_FX_BAR_EDITOR), [contextService]));
 	const isFocusFxBar = contextService.getContextValue(FOCUSING_FX_BAR_EDITOR);
+	const workbookEditablePermission = useObservable(useMemo(() => {
+		if (!workbook) return;
+		return permissionService.getPermissionPoint$(new WorkbookEditablePermission(workbook.getUnitId()).id);
+	}, [permissionService, workbook]));
 	const ref = useRef(null);
 	const editorService = useDependency(IEditorService);
 	const config = useConfigValue(SHEETS_UI_PLUGIN_CONFIG_KEY);
@@ -21136,11 +21140,18 @@ function FormulaBar(props) {
 	}
 	const { viewDisable, editDisable: permissionEditDisable } = disableInfo;
 	const editDisable = permissionEditDisable || !!disableEdit;
+	const workbookEditDisable = !((_workbookEditablePerm = workbookEditablePermission === null || workbookEditablePermission === void 0 ? void 0 : workbookEditablePermission.value) !== null && _workbookEditablePerm !== void 0 ? _workbookEditablePerm : true);
+	const editorActivationDisable = editDisable || workbookEditDisable;
 	const disabled = editDisable || imageDisable;
 	const shouldSkipFocus = useRef(false);
 	const handlePointerDown = () => {
 		try {
 			if (editorBridgeService.isVisible().visible === false) {
+				if (editorActivationDisable) {
+					contextService.setContextValue(FOCUSING_FX_BAR_EDITOR, true);
+					editorService.focus(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+					return;
+				}
 				if (!commandService.syncExecuteCommand(SetCellEditVisibleOperation.id, {
 					visible: true,
 					eventType: DeviceInputEventType.PointerDown,
@@ -23950,7 +23961,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "0.22.0";
+var version = "0.22.1-insiders.20260516-8900c44";
 
 //#endregion
 //#region src/services/cell-alert-manager.service.ts
@@ -26744,28 +26755,30 @@ var RangeProtectionRenderExtension = class extends SheetExtension {
 	getShadowStrategy() {
 		return this._shadowStrategy;
 	}
-	draw(ctx, _parentScale, spreadsheetSkeleton) {
+	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return;
 		ctx.save();
 		if (!this._pattern) this._pattern = ctx.createPattern(this._img, "repeat");
 		this.renderCache.clear();
-		Range.foreach(spreadsheetSkeleton.rowColumnSegment, (row, col) => {
-			if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
-			const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
-			if (!this._pattern) return;
-			ctx.fillStyle = this._pattern;
-			selectionProtection.forEach((config) => {
-				if (!config.ruleId) return;
-				if (this.shouldRender(config)) {
-					if (this.renderCache.has(config.ruleId)) return;
-					this.renderCache.add(config.ruleId);
-					config.ranges.forEach((range) => {
-						const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
-						const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
-						ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
-					});
-				}
+		((diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment]).forEach((range) => {
+			Range.foreach(range, (row, col) => {
+				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
+				const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
+				if (!this._pattern) return;
+				ctx.fillStyle = this._pattern;
+				selectionProtection.forEach((config) => {
+					if (!config.ruleId) return;
+					if (this.shouldRender(config)) {
+						if (this.renderCache.has(config.ruleId)) return;
+						this.renderCache.add(config.ruleId);
+						config.ranges.forEach((range) => {
+							const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
+							const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
+							ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
+						});
+					}
+				});
 			});
 		});
 		ctx.restore();
@@ -28836,9 +28849,9 @@ let SheetSkeletonRenderController = class SheetSkeletonRenderController extends
 		this._context = _context;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
 		this._renderManagerService = _renderManagerService;
-		this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
 			this._updateSceneSize(param);
-		});
+		}));
 	}
 	_updateSceneSize(param) {
 		var _this$_renderManagerS;

package/lib/index.js

@@ -14749,26 +14749,26 @@ let SheetRenderController = class SheetRenderController extends RxDisposable {
 	}
 	_initRenderMetricSubscriber() {
 		const { engine } = this._context;
-		engine.beginFrame$.subscribe(() => {
+		this.disposeWithMe(engine.beginFrame$.subscribe(() => {
 			this._renderFrameTimeMetric = null;
 			this._renderFrameTags = {};
-		});
-		engine.endFrame$.subscribe(() => {
+		}));
+		this.disposeWithMe(engine.endFrame$.subscribe(() => {
 			if (this._renderFrameTimeMetric && Object.keys(this._renderFrameTimeMetric).filter((key) => key.startsWith(SHEET_EXTENSION_PREFIX)).length > 0) this._afterRenderMetric$.next({
 				frameTimeMetric: this._renderFrameTimeMetric,
 				tags: this._renderFrameTags
 			});
-		});
-		engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
+		}));
+		this.disposeWithMe(engine.renderFrameTimeMetric$.subscribe(([key, value]) => {
 			if (!this._renderFrameTimeMetric) this._renderFrameTimeMetric = {};
 			if (!this._renderFrameTimeMetric[key]) this._renderFrameTimeMetric[key] = [];
 			this._renderFrameTimeMetric[key].push(Math.round(value * 100) / 100);
-		});
-		engine.renderFrameTags$.subscribe(([key, value]) => {
+		}));
+		this.disposeWithMe(engine.renderFrameTags$.subscribe(([key, value]) => {
 			this._renderFrameTags[key] = value;
-		});
+		}));
 		const frameInfoList = [];
-		this._afterRenderMetric$.pipe(withLatestFrom(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
+		this.disposeWithMe(this._afterRenderMetric$.pipe(withLatestFrom(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
 			frameInfoList.push({
 				FPS: basicFrameTimeInfo.FPS,
 				elapsedTime: basicFrameTimeInfo.elapsedTime,
@@ -14780,7 +14780,7 @@ let SheetRenderController = class SheetRenderController extends RxDisposable {
 				this._captureRenderMetric(frameInfoList);
 				frameInfoList.length = 0;
 			}
-		});
+		}));
 	}
 	/**
 	* Send render metric to telemetry service
@@ -21007,7 +21007,7 @@ function DefinedName({ disable }) {
 //#endregion
 //#region src/views/formula-bar/FormulaBar.tsx
 function FormulaBar(props) {
-	var _editState$documentLa, _editState$documentLa2;
+	var _workbookEditablePerm, _editState$documentLa, _editState$documentLa2;
 	const { className, disableDefinedName } = props;
 	const [iconActivated, setIconActivated] = useState(false);
 	const [arrowDirection, setArrowDirection] = useState(0);
@@ -21035,6 +21035,10 @@ function FormulaBar(props) {
 	const contextService = useDependency(IContextService);
 	useObservable(useMemo(() => contextService.subscribeContextValue$(FOCUSING_FX_BAR_EDITOR), [contextService]));
 	const isFocusFxBar = contextService.getContextValue(FOCUSING_FX_BAR_EDITOR);
+	const workbookEditablePermission = useObservable(useMemo(() => {
+		if (!workbook) return;
+		return permissionService.getPermissionPoint$(new WorkbookEditablePermission(workbook.getUnitId()).id);
+	}, [permissionService, workbook]));
 	const ref = useRef(null);
 	const editorService = useDependency(IEditorService);
 	const config = useConfigValue(SHEETS_UI_PLUGIN_CONFIG_KEY);
@@ -21136,11 +21140,18 @@ function FormulaBar(props) {
 	}
 	const { viewDisable, editDisable: permissionEditDisable } = disableInfo;
 	const editDisable = permissionEditDisable || !!disableEdit;
+	const workbookEditDisable = !((_workbookEditablePerm = workbookEditablePermission === null || workbookEditablePermission === void 0 ? void 0 : workbookEditablePermission.value) !== null && _workbookEditablePerm !== void 0 ? _workbookEditablePerm : true);
+	const editorActivationDisable = editDisable || workbookEditDisable;
 	const disabled = editDisable || imageDisable;
 	const shouldSkipFocus = useRef(false);
 	const handlePointerDown = () => {
 		try {
 			if (editorBridgeService.isVisible().visible === false) {
+				if (editorActivationDisable) {
+					contextService.setContextValue(FOCUSING_FX_BAR_EDITOR, true);
+					editorService.focus(DOCS_FORMULA_BAR_EDITOR_UNIT_ID_KEY);
+					return;
+				}
 				if (!commandService.syncExecuteCommand(SetCellEditVisibleOperation.id, {
 					visible: true,
 					eventType: DeviceInputEventType.PointerDown,
@@ -23950,7 +23961,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "0.22.0";
+var version = "0.22.1-insiders.20260516-8900c44";
 
 //#endregion
 //#region src/services/cell-alert-manager.service.ts
@@ -26744,28 +26755,30 @@ var RangeProtectionRenderExtension = class extends SheetExtension {
 	getShadowStrategy() {
 		return this._shadowStrategy;
 	}
-	draw(ctx, _parentScale, spreadsheetSkeleton) {
+	draw(ctx, _parentScale, spreadsheetSkeleton, diffRanges) {
 		const { worksheet } = spreadsheetSkeleton;
 		if (!worksheet) return;
 		ctx.save();
 		if (!this._pattern) this._pattern = ctx.createPattern(this._img, "repeat");
 		this.renderCache.clear();
-		Range.foreach(spreadsheetSkeleton.rowColumnSegment, (row, col) => {
-			if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
-			const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
-			if (!this._pattern) return;
-			ctx.fillStyle = this._pattern;
-			selectionProtection.forEach((config) => {
-				if (!config.ruleId) return;
-				if (this.shouldRender(config)) {
-					if (this.renderCache.has(config.ruleId)) return;
-					this.renderCache.add(config.ruleId);
-					config.ranges.forEach((range) => {
-						const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
-						const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
-						ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
-					});
-				}
+		((diffRanges === null || diffRanges === void 0 ? void 0 : diffRanges.length) ? diffRanges : [spreadsheetSkeleton.rowColumnSegment]).forEach((range) => {
+			Range.foreach(range, (row, col) => {
+				if (!worksheet.getRowVisible(row) || !worksheet.getColVisible(col)) return;
+				const { selectionProtection = [] } = worksheet.getCell(row, col) || {};
+				if (!this._pattern) return;
+				ctx.fillStyle = this._pattern;
+				selectionProtection.forEach((config) => {
+					if (!config.ruleId) return;
+					if (this.shouldRender(config)) {
+						if (this.renderCache.has(config.ruleId)) return;
+						this.renderCache.add(config.ruleId);
+						config.ranges.forEach((range) => {
+							const start = spreadsheetSkeleton.getCellWithCoordByIndex(range.startRow, range.startColumn, false);
+							const end = spreadsheetSkeleton.getCellWithCoordByIndex(range.endRow, range.endColumn, false);
+							ctx.fillRect(start.startX, start.startY, end.endX - start.startX, end.endY - start.startY);
+						});
+					}
+				});
 			});
 		});
 		ctx.restore();
@@ -28836,9 +28849,9 @@ let SheetSkeletonRenderController = class SheetSkeletonRenderController extends
 		this._context = _context;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
 		this._renderManagerService = _renderManagerService;
-		this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
 			this._updateSceneSize(param);
-		});
+		}));
 	}
 	_updateSceneSize(param) {
 		var _this$_renderManagerS;

package/lib/types/views/permission/extensions/range-protection.render.d.ts

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { ICellDataForSheetInterceptor, IScale } from '@univerjs/core';
+import type { ICellDataForSheetInterceptor, IRange, IScale } from '@univerjs/core';
 import type { SpreadsheetSkeleton, UniverRenderingContext } from '@univerjs/engine-render';
 import type { ICellPermission } from '@univerjs/sheets';
 import { SheetExtension } from '@univerjs/engine-render';
@@ -41,7 +41,7 @@ export declare abstract class RangeProtectionRenderExtension extends SheetExtens
      */
     getShadowStrategy(): 'always' | 'non-editable' | 'non-viewable' | 'none';
     protected abstract shouldRender(config: ICellPermission): boolean;
-    draw(ctx: UniverRenderingContext, _parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton): void;
+    draw(ctx: UniverRenderingContext, _parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton, diffRanges?: IRange[]): void;
 }
 export declare class RangeProtectionCanViewRenderExtension extends RangeProtectionRenderExtension {
     uKey: string;