@univerjs/sheets-ui 0.22.1 → 0.23.0-insiders.20260522-e8f2a3b

package/lib/cjs/index.js

@@ -518,11 +518,13 @@ var BaseSelectionRenderService = class extends _univerjs_core.Disposable {
 	}
 	newSelectionControl(scene, skeleton, selection) {
 		const zIndex = this.getSelectionControls().length;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
+		const { rowHeaderWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeight, columnHeaderHeightAndMarginTop } = skeleton;
 		const control = new SelectionControl(scene, zIndex, this._selectionTheme, {
 			highlightHeader: this._highlightHeader,
 			rowHeaderWidth,
-			columnHeaderHeight
+			columnHeaderHeight,
+			rowHeaderOffsetX: Math.max(0, rowHeaderWidthAndMarginLeft - rowHeaderWidth),
+			columnHeaderOffsetY: Math.max(0, columnHeaderHeightAndMarginTop - columnHeaderHeight)
 		});
 		this._selectionControls.push(control);
 		const selectionWithCoord = (0, _univerjs_sheets.attachSelectionWithCoord)(selection, skeleton);
@@ -1808,7 +1810,7 @@ const SELECTION_TITLE_HIGHLIGHT_ALPHA = .3;
 */
 var SelectionControl = class extends _univerjs_core.Disposable {
 	constructor(_scene, _zIndex, _themeService, options) {
-		var _options$enableAutoFi, _options$highlightHea, _options$rowHeaderWid, _options$columnHeader;
+		var _options$enableAutoFi, _options$highlightHea, _options$rowHeaderWid, _options$columnHeader, _options$rowHeaderOff, _options$columnHeader2;
 		super();
 		this._scene = _scene;
 		this._zIndex = _zIndex;
@@ -1847,6 +1849,8 @@ var SelectionControl = class extends _univerjs_core.Disposable {
 		_defineProperty(this, "_currentStyle", void 0);
 		_defineProperty(this, "_rowHeaderWidth", 0);
 		_defineProperty(this, "_columnHeaderHeight", 0);
+		_defineProperty(this, "_rowHeaderOffsetX", 0);
+		_defineProperty(this, "_columnHeaderOffsetY", 0);
 		_defineProperty(this, "_widgetRects", []);
 		_defineProperty(this, "_controlExtension", void 0);
 		_defineProperty(this, "_dispose$", new rxjs.BehaviorSubject(this));
@@ -1864,6 +1868,8 @@ var SelectionControl = class extends _univerjs_core.Disposable {
 		this._highlightHeader = (_options$highlightHea = options === null || options === void 0 ? void 0 : options.highlightHeader) !== null && _options$highlightHea !== void 0 ? _options$highlightHea : true;
 		this._rowHeaderWidth = (_options$rowHeaderWid = options === null || options === void 0 ? void 0 : options.rowHeaderWidth) !== null && _options$rowHeaderWid !== void 0 ? _options$rowHeaderWid : 0;
 		this._columnHeaderHeight = (_options$columnHeader = options === null || options === void 0 ? void 0 : options.columnHeaderHeight) !== null && _options$columnHeader !== void 0 ? _options$columnHeader : 0;
+		this._rowHeaderOffsetX = (_options$rowHeaderOff = options === null || options === void 0 ? void 0 : options.rowHeaderOffsetX) !== null && _options$rowHeaderOff !== void 0 ? _options$rowHeaderOff : 0;
+		this._columnHeaderOffsetY = (_options$columnHeader2 = options === null || options === void 0 ? void 0 : options.columnHeaderOffsetY) !== null && _options$columnHeader2 !== void 0 ? _options$columnHeader2 : 0;
 		this._initializeSheetBody();
 		this._initialHeader();
 	}
@@ -2228,6 +2234,8 @@ var SelectionControl = class extends _univerjs_core.Disposable {
 		if (sk) {
 			this._rowHeaderWidth = sk.rowHeaderWidth;
 			this._columnHeaderHeight = sk.columnHeaderHeight;
+			this._rowHeaderOffsetX = Math.max(0, sk.rowHeaderWidthAndMarginLeft - sk.rowHeaderWidth);
+			this._columnHeaderOffsetY = Math.max(0, sk.columnHeaderHeightAndMarginTop - sk.columnHeaderHeight);
 		}
 		this._selectionRenderModel.setValue(selectionWthCoord.rangeWithCoord, selectionWthCoord.primaryWithCoord);
 		this._showAutoFill = selectionWthCoord.primaryWithCoord !== null;
@@ -2248,6 +2256,8 @@ var SelectionControl = class extends _univerjs_core.Disposable {
 	update(newSelectionRange, rowHeaderWidth = 0, columnHeaderHeight = 0, style, primaryCell) {
 		this._rowHeaderWidth = rowHeaderWidth;
 		this._columnHeaderHeight = columnHeaderHeight;
+		this._rowHeaderOffsetX = 0;
+		this._columnHeaderOffsetY = 0;
 		this.updateRangeBySelectionWithCoord({
 			rangeWithCoord: newSelectionRange,
 			primaryWithCoord: primaryCell,
@@ -2367,6 +2377,8 @@ var SelectionControl = class extends _univerjs_core.Disposable {
 		columnHeaderStrokeWidth /= scale;
 		const rowHeaderWidth = this._rowHeaderWidth;
 		const columnHeaderHeight = this._columnHeaderHeight;
+		const rowHeaderOffsetX = this._rowHeaderOffsetX;
+		const columnHeaderOffsetY = this._columnHeaderOffsetY;
 		if (this._highlightHeader && columnHeaderHeight > 0) {
 			let highlightTitleColor = columnHeaderFill;
 			if (rangeType === _univerjs_core.RANGE_TYPE.COLUMN) highlightTitleColor = new _univerjs_core.ColorKit(stroke).setAlpha(SELECTION_TITLE_HIGHLIGHT_ALPHA).toString();
@@ -2379,7 +2391,7 @@ var SelectionControl = class extends _univerjs_core.Disposable {
 				top: columnHeaderHeight - columnHeaderStrokeWidth + 1 / scale
 			});
 			this._columnHeaderGroup.show();
-			this._columnHeaderGroup.translate(startX, 0);
+			this._columnHeaderGroup.translate(startX, columnHeaderOffsetY);
 		} else this._columnHeaderGroup.hide();
 		this._columnHeaderGroup.makeDirty(true);
 		if (this._highlightHeader && rowHeaderWidth > 0) {
@@ -2394,7 +2406,7 @@ var SelectionControl = class extends _univerjs_core.Disposable {
 				left: rowHeaderWidth - rowHeaderStrokeWidth + 1 / scale
 			});
 			this._rowHeaderGroup.show();
-			this._rowHeaderGroup.translate(0, startY);
+			this._rowHeaderGroup.translate(rowHeaderOffsetX, startY);
 		} else this._rowHeaderGroup.hide();
 		this._rowHeaderGroup.makeDirty(true);
 	}
@@ -2734,10 +2746,6 @@ function cloneCellDataWithSpanInfo(cell) {
 //#endregion
 //#region src/services/clipboard/copy-content-cache.ts
 const COPY_CONTENT_CACHE_LIMIT = 10;
-const ID_LENGTH = 6;
-function genId() {
-	return (0, _univerjs_core.generateRandomId)(ID_LENGTH);
-}
 function extractId(html) {
 	const match = html.match(/data-copy-id="([^\s]+)"/);
 	if (match && match[1]) return match[1];
@@ -4225,7 +4233,7 @@ let SheetClipboardService = class SheetClipboardService extends _univerjs_core.D
 			rowIndex += 1;
 		}
 		for (let c = startColumn; c <= endColumn; c++) discreteRange.cols.push(c);
-		const copyId = genId();
+		const copyId = (0, _univerjs_core.generateRandomId)(6);
 		const html = this._usmToHtml.convert(matrix, discreteRange, hooks, copyId);
 		return {
 			copyId,
@@ -14517,7 +14525,7 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends _u
 			var _this$_sheetSkeletonM;
 			const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentParam()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
 			if (skeleton == null || this._rowResizeRect == null || this._columnResizeRect == null) return;
-			const { rowHeaderWidth, columnHeaderHeight } = skeleton;
+			const { rowBaseWidth, rowGutterWidth, columnBaseHeight, columnGutterHeight } = getHeaderBaseLayout$1(skeleton);
 			const { startX, startY, endX, endY, row, column } = getCoordByOffset(evt.offsetX, evt.offsetY, scene, skeleton);
 			const isLastRow = row === skeleton.worksheet.getRowCount() - 1;
 			const isLastColumn = column === skeleton.worksheet.getColumnCount() - 1;
@@ -14537,9 +14545,9 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends _u
 				}
 				if (this._currentRow === -1) return;
 				if (!this.interceptor.fetchThroughInterceptors(HEADER_RESIZE_PERMISSION_CHECK)(null, { row: this._currentRow })) return false;
-				const rowSize = Math.min(44, rowHeaderWidth / 3);
+				const rowSize = Math.min(44, rowBaseWidth / 3);
 				this._rowResizeRect.transformByState({
-					left: rowHeaderWidth / 2 - rowSize / 2,
+					left: rowGutterWidth + rowBaseWidth / 2 - rowSize / 2,
 					top
 				});
 				this._rowResizeRect.setShapeProps({ size: rowSize });
@@ -14557,10 +14565,10 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends _u
 				}
 				if (this._currentColumn === -1) return;
 				if (!this.interceptor.fetchThroughInterceptors(HEADER_RESIZE_PERMISSION_CHECK)(null, { col: this._currentColumn })) return false;
-				const columnSize = columnHeaderHeight * .7;
+				const columnSize = columnBaseHeight * .7;
 				this._columnResizeRect.transformByState({
 					left,
-					top: columnHeaderHeight / 2 - columnSize / 2
+					top: columnGutterHeight + columnBaseHeight / 2 - columnSize / 2
 				});
 				this._columnResizeRect.setShapeProps({ size: columnSize });
 				this._columnResizeRect.show();
@@ -14605,9 +14613,9 @@ let HeaderResizeRenderController = class HeaderResizeRenderController extends _u
 			let isStartMove = false;
 			let moveChangeX = 0;
 			let moveChangeY = 0;
-			const { columnTotalWidth, rowHeaderWidth, rowTotalHeight, columnHeaderHeight } = skeleton;
-			const shapeWidth = canvasMaxWidth > columnTotalWidth + rowHeaderWidth ? canvasMaxWidth : columnTotalWidth + rowHeaderWidth;
-			const shapeHeight = canvasMaxHeight > rowTotalHeight + columnHeaderHeight ? canvasMaxHeight : rowTotalHeight + columnHeaderHeight;
+			const { columnTotalWidth, rowHeaderWidthAndMarginLeft, rowTotalHeight, columnHeaderHeightAndMarginTop } = skeleton;
+			const shapeWidth = canvasMaxWidth > columnTotalWidth + rowHeaderWidthAndMarginLeft ? canvasMaxWidth : columnTotalWidth + rowHeaderWidthAndMarginLeft;
+			const shapeHeight = canvasMaxHeight > rowTotalHeight + columnHeaderHeightAndMarginTop ? canvasMaxHeight : rowTotalHeight + columnHeaderHeightAndMarginTop;
 			const HEADER_MENU_SHAPE_THUMB_SIZE_SCALE = 4 / Math.max(scaleX, scaleY);
 			if (initialType === 0) this._resizeHelperShape = new _univerjs_engine_render.Rect(HEADER_RESIZE_CONTROLLER_SHAPE_HELPER, {
 				width: shapeWidth,
@@ -14740,126 +14748,498 @@ HeaderResizeRenderController = __decorate([
 	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService)),
 	__decorateParam(3, _univerjs_core.ICommandService)
 ], HeaderResizeRenderController);
+function getHeaderBaseLayout$1(skeleton) {
+	var _skeleton$worksheet$g, _skeleton$worksheet, _config$rowHeader, _config$columnHeader;
+	const config = (_skeleton$worksheet$g = (_skeleton$worksheet = skeleton.worksheet).getConfig) === null || _skeleton$worksheet$g === void 0 ? void 0 : _skeleton$worksheet$g.call(_skeleton$worksheet);
+	const configuredRowWidth = config === null || config === void 0 || (_config$rowHeader = config.rowHeader) === null || _config$rowHeader === void 0 ? void 0 : _config$rowHeader.width;
+	const configuredColumnHeight = config === null || config === void 0 || (_config$columnHeader = config.columnHeader) === null || _config$columnHeader === void 0 ? void 0 : _config$columnHeader.height;
+	const rowBaseWidth = typeof configuredRowWidth === "number" && configuredRowWidth > 0 ? Math.min(configuredRowWidth, skeleton.rowHeaderWidth) : skeleton.rowHeaderWidth;
+	const columnBaseHeight = typeof configuredColumnHeight === "number" && configuredColumnHeight > 0 ? Math.min(configuredColumnHeight, skeleton.columnHeaderHeight) : skeleton.columnHeaderHeight;
+	return {
+		rowBaseWidth,
+		rowGutterWidth: Math.max(0, skeleton.rowHeaderWidthAndMarginLeft - rowBaseWidth),
+		columnBaseHeight,
+		columnGutterHeight: Math.max(0, skeleton.columnHeaderHeightAndMarginTop - columnBaseHeight)
+	};
+}
 
 //#endregion
-//#region src/controllers/render-controllers/sheet.render-controller.ts
-const FRAME_STACK_THRESHOLD = 60;
-let SheetRenderController = class SheetRenderController extends _univerjs_core.RxDisposable {
-	constructor(_context, _configService, _sheetSkeletonManagerService, _sheetRenderService, _commandService, _telemetryService) {
-		super();
-		this._context = _context;
-		this._configService = _configService;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._sheetRenderService = _sheetRenderService;
-		this._commandService = _commandService;
-		this._telemetryService = _telemetryService;
-		_defineProperty(this, "_renderMetric$", new rxjs.Subject());
-		_defineProperty(this, "renderMetric$", this._renderMetric$.asObservable());
-		_defineProperty(this, "_renderFrameTimeMetric", null);
-		_defineProperty(this, "_renderFrameTags", {});
-		_defineProperty(this, "_afterRenderMetric$", new rxjs.Subject());
-		this._addNewRender();
-		this._initRenderMetricSubscriber();
+//#region src/services/header-unhide-range.service.ts
+let HeaderUnhideRangeAxis = /* @__PURE__ */ function(HeaderUnhideRangeAxis) {
+	HeaderUnhideRangeAxis["ROW"] = "row";
+	HeaderUnhideRangeAxis["COLUMN"] = "column";
+	return HeaderUnhideRangeAxis;
+}({});
+var HeaderUnhideRangeService = class {
+	constructor() {
+		_defineProperty(this, "_visibleHandlers", /* @__PURE__ */ new Set());
 	}
-	_addNewRender() {
-		const { scene, engine, unit: workbook } = this._context;
-		this._addComponent(workbook);
-		this._initRerenderScheduler();
-		this._initCommandListener();
-		const worksheet = this._context.unit.getActiveSheet();
-		if (!worksheet) throw new Error("No active sheet found");
-		const sheetId = worksheet.getSheetId();
-		this._sheetSkeletonManagerService.setCurrent({ sheetId });
-		const frameFn = () => scene.render();
-		this.disposeWithMe(this._context.activated$.subscribe((activated) => {
-			if (activated) engine.runRenderLoop(frameFn);
-			else engine.stopRenderLoop(frameFn);
-		}));
+	registerRangeVisibleHandler(handler) {
+		this._visibleHandlers.add(handler);
+		const dispose = () => this._visibleHandlers.delete(handler);
+		return {
+			dispose,
+			unsubscribe: dispose
+		};
 	}
-	_initRenderMetricSubscriber() {
-		const { engine } = this._context;
-		engine.beginFrame$.subscribe(() => {
-			this._renderFrameTimeMetric = null;
-			this._renderFrameTags = {};
+	shouldRenderRange(visible, payload) {
+		let nextVisible = visible;
+		for (const handler of this._visibleHandlers) nextVisible = handler(nextVisible, payload);
+		return nextVisible;
+	}
+};
+
+//#endregion
+//#region src/menu/header-menu-shape.ts
+const HEADER_MENU_SHAPE_CIRCLE_FILL = "rgba(0, 0, 0, 0.15)";
+const HEADER_MENU_SHAPE_TRIANGLE_FILL = "rgb(0, 0, 0)";
+const HEADER_MENU_BACKGROUND_COLOR = "rgb(255, 255, 255, 1)";
+var HeaderMenuShape = class extends _univerjs_engine_render.Shape {
+	constructor(key, props) {
+		super(key, props);
+		_defineProperty(this, "_size", 12);
+		_defineProperty(this, "_iconRatio", .4);
+		_defineProperty(this, "_mode", 0);
+		this.setShapeProps(props);
+	}
+	setShapeProps(props) {
+		if (props === null || props === void 0 ? void 0 : props.size) this._size = props.size;
+		if (props === null || props === void 0 ? void 0 : props.mode) this._mode = props.mode;
+		this.transformByState({
+			width: this._size,
+			height: this._size
 		});
-		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
-			});
+	}
+	_draw(ctx) {
+		if (this._mode === 1) _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			radius: this._size,
+			fill: HEADER_MENU_SHAPE_CIRCLE_FILL
 		});
-		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);
+		const iconSize = this._size * .5 * this._iconRatio;
+		const sixtyDegree = Math.PI / 180 * 60;
+		const left = iconSize * Math.sin(sixtyDegree);
+		const top = iconSize * Math.cos(sixtyDegree);
+		_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+			pointsGroup: [[
+				{
+					x: -left + this._size / 2,
+					y: -top + this._size / 2
+				},
+				{
+					x: left + this._size / 2,
+					y: -top + this._size / 2
+				},
+				{
+					x: this._size / 2,
+					y: iconSize + this._size / 2
+				}
+			]],
+			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
 		});
-		engine.renderFrameTags$.subscribe(([key, value]) => {
-			this._renderFrameTags[key] = value;
+	}
+};
+
+//#endregion
+//#region src/views/header-unhide-shape.ts
+const UNHIDE_ICON_SIZE = 12;
+const UNHIDE_ARROW_RATIO = .4;
+var HeaderUnhideShape = class extends _univerjs_engine_render.Shape {
+	constructor(key, props, onClick) {
+		super(key, props);
+		_defineProperty(this, "_size", 12);
+		_defineProperty(this, "_iconRatio", UNHIDE_ARROW_RATIO);
+		_defineProperty(this, "_hovered", true);
+		_defineProperty(this, "_hasPrevious", true);
+		_defineProperty(this, "_hasNext", true);
+		_defineProperty(this, "_unhideType", void 0);
+		if (props) this.setShapeProps(props);
+		this.onPointerEnter$.subscribeEvent(() => this.setShapeProps({ hovered: true }));
+		this.onPointerLeave$.subscribeEvent(() => this.setShapeProps({ hovered: false }));
+		this.onPointerDown$.subscribeEvent(() => onClick === null || onClick === void 0 ? void 0 : onClick());
+	}
+	setShapeProps(props) {
+		if (props.type !== void 0) this._unhideType = props.type;
+		if (props.hovered !== void 0) this._hovered = props.hovered;
+		if (props.hasPrevious !== void 0) this._hasPrevious = props.hasPrevious;
+		if (props.hasNext !== void 0) this._hasNext = props.hasNext;
+		this.transformByState({
+			width: this._size * (this._unhideType === 1 ? 2 : 1),
+			height: this._size * (this._unhideType === 0 ? 2 : 1)
 		});
-		const frameInfoList = [];
-		this._afterRenderMetric$.pipe((0, rxjs.withLatestFrom)(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
-			frameInfoList.push({
-				FPS: basicFrameTimeInfo.FPS,
-				elapsedTime: basicFrameTimeInfo.elapsedTime,
-				frameTime: Math.round(basicFrameTimeInfo.frameTime * 100) / 100,
-				...sceneRenderDetail.frameTimeMetric,
-				...sceneRenderDetail.tags
-			});
-			if (frameInfoList.length > FRAME_STACK_THRESHOLD) {
-				this._captureRenderMetric(frameInfoList);
-				frameInfoList.length = 0;
-			}
+	}
+	_draw(ctx) {
+		if (this._unhideType === 0) this._drawOnRow(ctx);
+		else this._drawOnCol(ctx);
+	}
+	_drawOnRow(ctx) {
+		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		else _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: this._size,
+			height: 2 * this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		const iconSize = this._size * .5 * this._iconRatio;
+		const sixtyDegree = Math.PI / 3;
+		const top = iconSize * Math.cos(sixtyDegree);
+		const left = iconSize * Math.sin(sixtyDegree);
+		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+			pointsGroup: [[
+				{
+					x: this._size / 2,
+					y: this._size / 2 - left
+				},
+				{
+					x: this._size / 2 - left,
+					y: this._size / 2 + top
+				},
+				{
+					x: this._size / 2 + left,
+					y: this._size / 2 + top
+				}
+			]],
+			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
 		});
+		if (this._hasNext) {
+			const offset = this._hasPrevious ? 3 : 1;
+			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+				pointsGroup: [[
+					{
+						x: this._size / 2,
+						y: this._size * offset / 2 + left
+					},
+					{
+						x: this._size / 2 - left,
+						y: this._size * offset / 2 - top
+					},
+					{
+						x: this._size / 2 + left,
+						y: this._size * offset / 2 - top
+					}
+				]],
+				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+			});
+		}
 	}
 	/**
-	* Send render metric to telemetry service
-	* @param frameInfoList
+	*
+	* @param ctx
 	*/
-	_captureRenderMetric(frameInfoList) {
-		var _this$_telemetryServi;
-		const filteredFrameInfo = frameInfoList;
-		if (filteredFrameInfo.length === 0) return;
-		const sumValueForNumListFields = (data) => {
-			let totalSum = 0;
-			const sums = Object.entries(data).filter(([_, value]) => Array.isArray(value)).map(([key]) => key).reduce((acc, key) => {
-				acc[key] = data[key].reduce((sum, num) => sum + num, 0);
-				return acc;
-			}, {});
-			Object.keys(data).filter((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX)).forEach((key) => {
-				totalSum += sums[key];
-			});
-			return {
-				...sums,
-				extensionTotal: totalSum
-			};
-		};
-		const frameTimeListAfterSum = frameInfoList.map((info) => {
-			return {
-				...info,
-				...sumValueForNumListFields(info)
-			};
+	_drawOnCol(ctx) {
+		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
 		});
-		const getSummaryStats = (list) => {
-			return Object.entries(list[0]).filter(([key, _]) => !["elapsedTime"].includes(key)).filter(([_, value]) => typeof value === "number").map(([key]) => key).reduce((acc, key) => {
-				const values = list.map((obj) => obj[key]);
-				const max = Math.max(...values);
-				const min = Math.min(...values);
-				const avg = values.reduce((sum, val) => sum + val, 0) / values.length;
-				acc[key] = {
-					max: Math.round(max * 100) / 100,
-					min: Math.round(min * 100) / 100,
-					avg: Math.round(avg * 100) / 100
-				};
-				return acc;
-			}, {});
-		};
-		const summaryFrameStats = getSummaryStats(frameTimeListAfterSum);
-		const elapsedTimeToStart = filteredFrameInfo[filteredFrameInfo.length - 1].elapsedTime;
-		const telemetryData = {
-			sheetId: this._context.unit.getActiveSheet().getSheetId(),
-			unitId: this._context.unit.getUnitId(),
-			elapsedTimeToStart,
-			...summaryFrameStats
+		else _univerjs_engine_render.Rect.drawWith(ctx, {
+			width: 2 * this._size,
+			height: this._size,
+			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
+			fill: HEADER_MENU_BACKGROUND_COLOR
+		});
+		const iconSize = this._size * .5 * this._iconRatio;
+		const sixtyDegree = Math.PI / 3;
+		const top = iconSize * Math.cos(sixtyDegree);
+		const left = iconSize * Math.sin(sixtyDegree);
+		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+			pointsGroup: [[
+				{
+					x: -top + this._size / 2,
+					y: this._size / 2
+				},
+				{
+					x: this._size / 2 + left,
+					y: this._size / 2 - left
+				},
+				{
+					x: this._size / 2 + left,
+					y: this._size / 2 + left
+				}
+			]],
+			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+		});
+		if (this._hasNext) {
+			const offset = this._hasPrevious ? 3 : 1;
+			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
+				pointsGroup: [[
+					{
+						x: top + this._size * offset / 2,
+						y: this._size / 2
+					},
+					{
+						x: -left + this._size * offset / 2,
+						y: this._size / 2 - left
+					},
+					{
+						x: -left + this._size * offset / 2,
+						y: this._size / 2 + left
+					}
+				]],
+				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+			});
+		}
+	}
+};
+
+//#endregion
+//#region src/controllers/render-controllers/header-unhide.render-controller.ts
+const HEADER_UNHIDE_CONTROLLER_SHAPE = "__SpreadsheetHeaderUnhideSHAPEControllerShape__";
+const HEADER_UNHIDE_RANGE_VISIBLE_CHECK = (0, _univerjs_core.createInterceptorKey)("headerUnhideRangeVisibleCheck");
+let HeaderUnhideRenderController = class HeaderUnhideRenderController extends _univerjs_core.RxDisposable {
+	get _workbook() {
+		return this._context.unit;
+	}
+	constructor(_context, _sheetSkeletonManagerService, _headerUnhideRangeService, _commandService) {
+		super();
+		this._context = _context;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._headerUnhideRangeService = _headerUnhideRangeService;
+		this._commandService = _commandService;
+		_defineProperty(this, "_shapes", {
+			cols: [],
+			rows: []
+		});
+		_defineProperty(this, "interceptor", new _univerjs_core.InterceptorManager({ HEADER_UNHIDE_RANGE_VISIBLE_CHECK }));
+		this._init();
+	}
+	dispose() {
+		super.dispose();
+		this._clearShapes();
+	}
+	_init() {
+		let activeSheetId = "";
+		this._context.unit.activeSheet$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((worksheet) => {
+			this._clearShapes();
+			if (!worksheet) {
+				activeSheetId = "";
+				return;
+			}
+			activeSheetId = worksheet.getSheetId();
+			this._update(this._workbook, worksheet);
+		});
+		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
+			if (param) {
+				const { unitId, sheetId } = param;
+				if (unitId === this._workbook.getUnitId() && sheetId === activeSheetId) {
+					const worksheet = this._workbook.getSheetBySheetId(sheetId);
+					if (worksheet) this._update(this._workbook, worksheet);
+				}
+			}
+		}));
+	}
+	_update(workbook, worksheet) {
+		var _this$_sheetSkeletonM;
+		const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getSkeletonParam(worksheet.getSheetId())) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
+		if (!skeleton) return;
+		const visibleCheck = this.interceptor.fetchThroughInterceptors(HEADER_UNHIDE_RANGE_VISIBLE_CHECK);
+		const shouldRenderRange = (payload) => {
+			var _visibleCheck;
+			return this._headerUnhideRangeService.shouldRenderRange((_visibleCheck = visibleCheck(true, payload)) !== null && _visibleCheck !== void 0 ? _visibleCheck : true, payload);
+		};
+		const hiddenRowRanges = worksheet.getHiddenRows().filter((range) => shouldRenderRange({
+			axis: "row",
+			range,
+			workbook,
+			worksheet
+		}));
+		const hiddenColRanges = worksheet.getHiddenCols().filter((range) => shouldRenderRange({
+			axis: "column",
+			range,
+			workbook,
+			worksheet
+		}));
+		const { scene } = this._getSheetObject();
+		const rowCount = worksheet.getRowCount();
+		const rowShapes = hiddenRowRanges.map((range) => {
+			const { startRow, endRow } = range;
+			const position = getCoordByCell(startRow, 0, scene, skeleton);
+			const hasPrevious = startRow !== 0;
+			const hasNext = endRow !== rowCount - 1;
+			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
+				type: 0,
+				hovered: false,
+				hasPrevious,
+				hasNext,
+				top: position.startY - (hasPrevious ? 12 : 0),
+				left: position.startX - 12
+			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificRowsVisibleCommand.id, {
+				unitId: workbook.getUnitId(),
+				subUnitId: worksheet.getSheetId(),
+				ranges: [range]
+			}));
+		});
+		const colCount = worksheet.getColumnCount();
+		const colShapes = hiddenColRanges.map((range) => {
+			const { startColumn, endColumn } = range;
+			const position = getCoordByCell(0, startColumn, scene, skeleton);
+			const hasPrevious = startColumn !== 0;
+			const hasNext = endColumn !== colCount - 1;
+			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
+				type: 1,
+				hovered: false,
+				hasPrevious,
+				hasNext,
+				top: Math.max(skeleton.columnHeaderHeight, skeleton.columnHeaderHeightAndMarginTop) - 12,
+				left: position.startX - (hasPrevious ? 12 : 0)
+			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificColsVisibleCommand.id, {
+				unitId: workbook.getUnitId(),
+				subUnitId: worksheet.getSheetId(),
+				ranges: [range]
+			}));
+		});
+		scene.addObjects(colShapes, 12);
+		scene.addObjects(rowShapes, 12);
+		this._clearShapes();
+		this._shapes = {
+			cols: colShapes,
+			rows: rowShapes
+		};
+	}
+	_clearShapes() {
+		this._shapes.cols.forEach((shape) => shape.dispose());
+		this._shapes.rows.forEach((shape) => shape.dispose());
+		this._shapes = {
+			cols: [],
+			rows: []
+		};
+	}
+	_getSheetObject() {
+		return getSheetObject(this._workbook, this._context);
+	}
+};
+HeaderUnhideRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(HeaderUnhideRangeService)),
+	__decorateParam(3, _univerjs_core.ICommandService)
+], HeaderUnhideRenderController);
+
+//#endregion
+//#region src/controllers/render-controllers/sheet.render-controller.ts
+const FRAME_STACK_THRESHOLD = 60;
+let SheetRenderController = class SheetRenderController extends _univerjs_core.RxDisposable {
+	constructor(_context, _configService, _sheetSkeletonManagerService, _sheetRenderService, _commandService, _telemetryService) {
+		super();
+		this._context = _context;
+		this._configService = _configService;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._sheetRenderService = _sheetRenderService;
+		this._commandService = _commandService;
+		this._telemetryService = _telemetryService;
+		_defineProperty(this, "_renderMetric$", new rxjs.Subject());
+		_defineProperty(this, "renderMetric$", this._renderMetric$.asObservable());
+		_defineProperty(this, "_renderFrameTimeMetric", null);
+		_defineProperty(this, "_renderFrameTags", {});
+		_defineProperty(this, "_afterRenderMetric$", new rxjs.Subject());
+		this._addNewRender();
+		this._initRenderMetricSubscriber();
+	}
+	_addNewRender() {
+		const { scene, engine, unit: workbook } = this._context;
+		this._addComponent(workbook);
+		this._initRerenderScheduler();
+		this._initCommandListener();
+		const worksheet = this._context.unit.getActiveSheet();
+		if (!worksheet) throw new Error("No active sheet found");
+		const sheetId = worksheet.getSheetId();
+		this._sheetSkeletonManagerService.setCurrent({ sheetId });
+		const frameFn = () => scene.render();
+		this.disposeWithMe(this._context.activated$.subscribe((activated) => {
+			if (activated) engine.runRenderLoop(frameFn);
+			else engine.stopRenderLoop(frameFn);
+		}));
+	}
+	_initRenderMetricSubscriber() {
+		const { engine } = this._context;
+		this.disposeWithMe(engine.beginFrame$.subscribe(() => {
+			this._renderFrameTimeMetric = null;
+			this._renderFrameTags = {};
+		}));
+		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
+			});
+		}));
+		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);
+		}));
+		this.disposeWithMe(engine.renderFrameTags$.subscribe(([key, value]) => {
+			this._renderFrameTags[key] = value;
+		}));
+		const frameInfoList = [];
+		this.disposeWithMe(this._afterRenderMetric$.pipe((0, rxjs.withLatestFrom)(engine.endFrame$)).subscribe(([sceneRenderDetail, basicFrameTimeInfo]) => {
+			frameInfoList.push({
+				FPS: basicFrameTimeInfo.FPS,
+				elapsedTime: basicFrameTimeInfo.elapsedTime,
+				frameTime: Math.round(basicFrameTimeInfo.frameTime * 100) / 100,
+				...sceneRenderDetail.frameTimeMetric,
+				...sceneRenderDetail.tags
+			});
+			if (frameInfoList.length > FRAME_STACK_THRESHOLD) {
+				this._captureRenderMetric(frameInfoList);
+				frameInfoList.length = 0;
+			}
+		}));
+	}
+	/**
+	* Send render metric to telemetry service
+	* @param frameInfoList
+	*/
+	_captureRenderMetric(frameInfoList) {
+		var _this$_telemetryServi;
+		const filteredFrameInfo = frameInfoList;
+		if (filteredFrameInfo.length === 0) return;
+		const sumValueForNumListFields = (data) => {
+			let totalSum = 0;
+			const sums = Object.entries(data).filter(([_, value]) => Array.isArray(value)).map(([key]) => key).reduce((acc, key) => {
+				acc[key] = data[key].reduce((sum, num) => sum + num, 0);
+				return acc;
+			}, {});
+			Object.keys(data).filter((key) => key.startsWith(_univerjs_engine_render.SHEET_EXTENSION_PREFIX)).forEach((key) => {
+				totalSum += sums[key];
+			});
+			return {
+				...sums,
+				extensionTotal: totalSum
+			};
+		};
+		const frameTimeListAfterSum = frameInfoList.map((info) => {
+			return {
+				...info,
+				...sumValueForNumListFields(info)
+			};
+		});
+		const getSummaryStats = (list) => {
+			return Object.entries(list[0]).filter(([key, _]) => !["elapsedTime"].includes(key)).filter(([_, value]) => typeof value === "number").map(([key]) => key).reduce((acc, key) => {
+				const values = list.map((obj) => obj[key]);
+				const max = Math.max(...values);
+				const min = Math.min(...values);
+				const avg = values.reduce((sum, val) => sum + val, 0) / values.length;
+				acc[key] = {
+					max: Math.round(max * 100) / 100,
+					min: Math.round(min * 100) / 100,
+					avg: Math.round(avg * 100) / 100
+				};
+				return acc;
+			}, {});
+		};
+		const summaryFrameStats = getSummaryStats(frameTimeListAfterSum);
+		const elapsedTimeToStart = filteredFrameInfo[filteredFrameInfo.length - 1].elapsedTime;
+		const telemetryData = {
+			sheetId: this._context.unit.getActiveSheet().getSheetId(),
+			unitId: this._context.unit.getUnitId(),
+			elapsedTimeToStart,
+			...summaryFrameStats
 		};
 		this._renderMetric$.next(telemetryData);
 		(_this$_telemetryServi = this._telemetryService) === null || _this$_telemetryServi === void 0 || _this$_telemetryServi.capture("sheet_render_cost", telemetryData);
@@ -15000,13 +15380,13 @@ let SheetRenderController = class SheetRenderController extends _univerjs_core.R
 			const spreadsheetRowHeader = components.get("__SpreadsheetRowHeader__");
 			const spreadsheetColumnHeader = components.get("__SpreadsheetColumnHeader__");
 			const spreadsheetLeftTopPlaceholder = components.get("__SpreadsheetLeftTopPlaceholder__");
-			const { rowHeaderWidth, columnHeaderHeight } = spreadsheetSkeleton;
+			const leftTopPlaceholderSize = getLeftTopPlaceholderSize(spreadsheetSkeleton);
 			spreadsheet === null || spreadsheet === void 0 || spreadsheet.updateSkeleton(spreadsheetSkeleton);
 			spreadsheetRowHeader === null || spreadsheetRowHeader === void 0 || spreadsheetRowHeader.updateSkeleton(spreadsheetSkeleton);
 			spreadsheetColumnHeader === null || spreadsheetColumnHeader === void 0 || spreadsheetColumnHeader.updateSkeleton(spreadsheetSkeleton);
 			spreadsheetLeftTopPlaceholder === null || spreadsheetLeftTopPlaceholder === void 0 || spreadsheetLeftTopPlaceholder.transformByState({
-				width: rowHeaderWidth,
-				height: columnHeaderHeight
+				width: leftTopPlaceholderSize.width,
+				height: leftTopPlaceholderSize.height
 			});
 		}));
 	}
@@ -15126,6 +15506,13 @@ SheetRenderController = __decorate([
 	__decorateParam(4, _univerjs_core.ICommandService),
 	__decorateParam(5, (0, _univerjs_core.Optional)(_univerjs_telemetry.ITelemetryService))
 ], SheetRenderController);
+function getLeftTopPlaceholderSize(skeleton) {
+	var _skeleton$rowHeaderWi, _skeleton$columnHeade;
+	return {
+		width: (_skeleton$rowHeaderWi = skeleton.rowHeaderWidthAndMarginLeft) !== null && _skeleton$rowHeaderWi !== void 0 ? _skeleton$rowHeaderWi : skeleton.rowHeaderWidth,
+		height: (_skeleton$columnHeade = skeleton.columnHeaderHeightAndMarginTop) !== null && _skeleton$columnHeade !== void 0 ? _skeleton$columnHeade : skeleton.columnHeaderHeight
+	};
+}
 
 //#endregion
 //#region src/components/border-panel/border-line/icons/BorderDashDot.tsx
@@ -16321,7 +16708,6 @@ function ClearSelectionContentMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_sheets.ClearSelectionContentCommand.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		icon: "ClearFormatDoubleIcon",
 		title: "rightClick.clearContent",
 		disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
 			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
@@ -16335,7 +16721,6 @@ function ClearSelectionFormatMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_sheets.ClearSelectionFormatCommand.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
-		icon: "ClearFormatDoubleIcon",
 		title: "rightClick.clearFormat",
 		disabled$: getCurrentRangeDisable$(accessor, {
 			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
@@ -16345,11 +16730,28 @@ function ClearSelectionFormatMenuItemFactory(accessor) {
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)
 	};
 }
-function ClearSelectionAllMenuItemFactory(accessor) {
+function ClearSelectionAllToolbarMenuItemFactory(accessor) {
 	return {
 		id: _univerjs_sheets.ClearSelectionAllCommand.id,
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		icon: "ClearFormatDoubleIcon",
+		tooltip: "rightClick.clearAll",
+		disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
+			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
+			worksheetTypes: [
+				_univerjs_sheets.WorksheetEditPermission,
+				_univerjs_sheets.WorksheetSetCellValuePermission,
+				_univerjs_sheets.WorksheetSetCellStylePermission
+			],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionEditPoint]
+		})),
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET)
+	};
+}
+function ClearSelectionAllMenuItemFactory(accessor) {
+	return {
+		id: _univerjs_sheets.ClearSelectionAllCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
 		title: "rightClick.clearAll",
 		tooltip: "rightClick.clearAll",
 		disabled$: getObservableWithExclusiveRange$(accessor, getCurrentRangeDisable$(accessor, {
@@ -18646,7 +19048,7 @@ const menuSchema = {
 			},
 			[_univerjs_sheets.ClearSelectionAllCommand.id]: {
 				order: 3,
-				menuItemFactory: ClearSelectionAllMenuItemFactory
+				menuItemFactory: ClearSelectionAllToolbarMenuItemFactory
 			}
 		},
 		[_univerjs_ui.RibbonStartGroup.FORMAT]: {
@@ -23990,7 +24392,7 @@ const useHighlightRange = (ranges = []) => {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-ui";
-var version = "0.22.1";
+var version = "0.23.0-insiders.20260522-e8f2a3b";
 
 //#endregion
 //#region src/services/cell-alert-manager.service.ts
@@ -26784,28 +27186,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();
@@ -26891,690 +27295,394 @@ var WorksheetProtectionRenderExtension = class extends _univerjs_engine_render.S
 	getShadowStrategy() {
 		return this._shadowStrategy;
 	}
-	setZIndex(zIndex) {
-		this.Z_INDEX = zIndex;
-	}
-};
-
-//#endregion
-//#region src/controllers/permission/sheet-permission-render.controller.ts
-let SheetPermissionRenderManagerController = class SheetPermissionRenderManagerController extends _univerjs_core.Disposable {
-	constructor(_injector, _componentManager) {
-		super();
-		this._injector = _injector;
-		this._componentManager = _componentManager;
-		this._init();
-	}
-	_init() {
-		this._initComponents();
-		this._initUiPartComponents();
-	}
-	_initComponents() {
-		[
-			[permissionMenuIconKey, _univerjs_icons.ProtectIcon],
-			[permissionDeleteIconKey, _univerjs_icons.DeleteIcon],
-			[permissionEditIconKey, _univerjs_icons.WriteIcon],
-			[permissionCheckIconKey, _univerjs_icons.CheckMarkIcon],
-			[permissionLockIconKey, _univerjs_icons.LockIcon],
-			[UNIVER_SHEET_PERMISSION_PANEL, SheetPermissionPanel],
-			[UNIVER_SHEET_PERMISSION_USER_DIALOG, SheetPermissionUserDialog],
-			[UNIVER_SHEET_PERMISSION_DIALOG, SheetPermissionDialog],
-			[UNIVER_SHEET_PERMISSION_ALERT_DIALOG, AlertDialog]
-		].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
-	}
-	_initUiPartComponents() {
-		const config = this._injector.get(_univerjs_core.IConfigService).getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
-		if (config === null || config === void 0 ? void 0 : config.protectedRangeUserSelector) {
-			const { component, framework } = config.protectedRangeUserSelector;
-			this.disposeWithMe(this._componentManager.register(UNIVER_SHEET_PERMISSION_USER_PART, component, { framework }));
-		}
-	}
-};
-SheetPermissionRenderManagerController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager))], SheetPermissionRenderManagerController);
-let SheetPermissionRenderController = class SheetPermissionRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _rangeProtectionRuleModel, _sheetSkeletonManagerService, _permissionService, _configService) {
-		super();
-		this._context = _context;
-		this._rangeProtectionRuleModel = _rangeProtectionRuleModel;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._permissionService = _permissionService;
-		this._configService = _configService;
-		_defineProperty(this, "_rangeProtectionCanViewRenderExtension", void 0);
-		_defineProperty(this, "_rangeProtectionCanNotViewRenderExtension", void 0);
-		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
-		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
-		this._rangeProtectionCanViewRenderExtension = new RangeProtectionCanViewRenderExtension(shadowStrategy);
-		this._rangeProtectionCanNotViewRenderExtension = new RangeProtectionCanNotViewRenderExtension(shadowStrategy);
-		this._initSkeleton();
-		this._initRender();
-		this.disposeWithMe(this._rangeProtectionRuleModel.ruleChange$.subscribe((info) => {
-			var _info$oldRule, _info$oldRule2;
-			if (((_info$oldRule = info.oldRule) === null || _info$oldRule === void 0 ? void 0 : _info$oldRule.id) && this._rangeProtectionCanViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanViewRenderExtension.clearCache();
-			if (((_info$oldRule2 = info.oldRule) === null || _info$oldRule2 === void 0 ? void 0 : _info$oldRule2.id) && this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanNotViewRenderExtension.clearCache();
-		}));
-	}
-	_initRender() {
-		const spreadsheetRender = this._context.mainComponent;
-		if (spreadsheetRender) {
-			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanViewRenderExtension);
-			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanNotViewRenderExtension);
-		}
-	}
-	_initSkeleton() {
-		const markDirtySkeleton = () => {
-			var _this$_context$mainCo;
-			this._sheetSkeletonManagerService.reCalculate();
-			(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty();
-		};
-		this.disposeWithMe((0, rxjs.merge)(this._permissionService.permissionPointUpdate$.pipe((0, rxjs.throttleTime)(300, void 0, { trailing: true })), this._rangeProtectionRuleModel.rangeRuleInitStateChange$, this._rangeProtectionRuleModel.ruleChange$).pipe().subscribe(markDirtySkeleton));
-	}
-};
-SheetPermissionRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets.RangeProtectionRuleModel)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
-	__decorateParam(3, _univerjs_core.IPermissionService),
-	__decorateParam(4, _univerjs_core.IConfigService)
-], SheetPermissionRenderController);
-let WorksheetProtectionRenderController = class WorksheetProtectionRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _renderManagerService, _sheetSkeletonManagerService, _worksheetProtectionRuleModel, _configService) {
-		super();
-		this._context = _context;
-		this._renderManagerService = _renderManagerService;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._worksheetProtectionRuleModel = _worksheetProtectionRuleModel;
-		this._configService = _configService;
-		_defineProperty(this, "_worksheetProtectionRenderExtension", void 0);
-		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
-		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
-		this._worksheetProtectionRenderExtension = new WorksheetProtectionRenderExtension(shadowStrategy);
-		this._initSkeleton();
-		if (shadowStrategy === "none") return;
-		this._initRender();
-	}
-	_initRender() {
-		const renderId = this._context.unitId;
-		const render = renderId && this._renderManagerService.getRenderById(renderId);
-		const spreadsheetRender = render && render.mainComponent;
-		if (spreadsheetRender) {
-			if (!spreadsheetRender.getExtensionByKey("worksheet-protection")) spreadsheetRender.register(this._worksheetProtectionRenderExtension);
-		}
-	}
-	_initSkeleton() {
-		const markDirtySkeleton = () => {
-			var _this$_context$mainCo2;
-			this._sheetSkeletonManagerService.reCalculate();
-			(_this$_context$mainCo2 = this._context.mainComponent) === null || _this$_context$mainCo2 === void 0 || _this$_context$mainCo2.makeDirty();
-		};
-		this.disposeWithMe((0, rxjs.merge)(this._worksheetProtectionRuleModel.worksheetRuleInitStateChange$).pipe().subscribe(markDirtySkeleton));
-	}
-};
-WorksheetProtectionRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_engine_render.IRenderManagerService)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.WorksheetProtectionRuleModel)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.IConfigService))
-], WorksheetProtectionRenderController);
-
-//#endregion
-//#region src/controllers/render-controllers/clipboard.render-controller.ts
-let ClipboardRenderController = class ClipboardRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _sheetSkeletonManagerService, _sheetClipboardService, _sheetClipboardController) {
-		super();
-		this._context = _context;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._sheetClipboardService = _sheetClipboardService;
-		this._sheetClipboardController = _sheetClipboardController;
-		this._initialize();
-	}
-	_initialize() {
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((skeleton) => {
-			if (!(skeleton === null || skeleton === void 0 ? void 0 : skeleton.unitId)) return;
-			if (!this._sheetClipboardService.getPasteMenuVisible()) return;
-			const pasteOptionsCache = this._sheetClipboardService.getPasteOptionsCache();
-			const menuUnitId = pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.target.unitId;
-			if (skeleton.unitId === menuUnitId) this._sheetClipboardController.refreshOptionalPaste();
-		})));
-	}
-};
-ClipboardRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
-	__decorateParam(2, ISheetClipboardService),
-	__decorateParam(3, (0, _univerjs_core.Inject)(SheetClipboardController))
-], ClipboardRenderController);
-
-//#endregion
-//#region src/controllers/render-controllers/format-painter.render-controller.ts
-let FormatPainterRenderController = class FormatPainterRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _formatPainterService, _selectionRenderService, _commandService) {
-		super();
-		this._context = _context;
-		this._formatPainterService = _formatPainterService;
-		this._selectionRenderService = _selectionRenderService;
-		this._commandService = _commandService;
-		this._initialize();
-	}
-	_initialize() {
-		this._bindFormatPainterStatus();
-		this._commandExecutedListener();
-	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._selectionRenderService.selectionMoveEnd$.subscribe((selections) => {
-			if (this._formatPainterService.getStatus() !== 0) {
-				var _this$_context$unit$g;
-				const { rangeWithCoord } = selections[selections.length - 1];
-				this._commandService.executeCommand(ApplyFormatPainterCommand.id, {
-					unitId: this._context.unitId,
-					subUnitId: ((_this$_context$unit$g = this._context.unit.getActiveSheet()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.getSheetId()) || "",
-					range: {
-						startRow: rangeWithCoord.startRow,
-						startColumn: rangeWithCoord.startColumn,
-						endRow: rangeWithCoord.endRow,
-						endColumn: rangeWithCoord.endColumn
-					}
-				});
-				if (this._formatPainterService.getStatus() === 1) this._commandService.executeCommand(SetOnceFormatPainterCommand.id);
-			}
-		}));
-	}
-	_bindFormatPainterStatus() {
-		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._formatPainterService.status$.subscribe((status) => {
-			const scene = this._context.scene;
-			if (!scene) return;
-			if (status !== 0) scene.setDefaultCursor(_univerjs_engine_render.CURSOR_TYPE.CELL);
-			else scene.setDefaultCursor(_univerjs_engine_render.CURSOR_TYPE.DEFAULT);
-		})));
-	}
-};
-FormatPainterRenderController = __decorate([
-	__decorateParam(1, IFormatPainterService),
-	__decorateParam(2, ISheetSelectionRenderService),
-	__decorateParam(3, _univerjs_core.ICommandService)
-], FormatPainterRenderController);
+	setZIndex(zIndex) {
+		this.Z_INDEX = zIndex;
+	}
+};
 
 //#endregion
-//#region src/menu/header-menu-shape.ts
-const HEADER_MENU_SHAPE_CIRCLE_FILL = "rgba(0, 0, 0, 0.15)";
-const HEADER_MENU_SHAPE_TRIANGLE_FILL = "rgb(0, 0, 0)";
-const HEADER_MENU_BACKGROUND_COLOR = "rgb(255, 255, 255, 1)";
-var HeaderMenuShape = class extends _univerjs_engine_render.Shape {
-	constructor(key, props) {
-		super(key, props);
-		_defineProperty(this, "_size", 12);
-		_defineProperty(this, "_iconRatio", .4);
-		_defineProperty(this, "_mode", 0);
-		this.setShapeProps(props);
+//#region src/controllers/permission/sheet-permission-render.controller.ts
+let SheetPermissionRenderManagerController = class SheetPermissionRenderManagerController extends _univerjs_core.Disposable {
+	constructor(_injector, _componentManager) {
+		super();
+		this._injector = _injector;
+		this._componentManager = _componentManager;
+		this._init();
 	}
-	setShapeProps(props) {
-		if (props === null || props === void 0 ? void 0 : props.size) this._size = props.size;
-		if (props === null || props === void 0 ? void 0 : props.mode) this._mode = props.mode;
-		this.transformByState({
-			width: this._size,
-			height: this._size
-		});
+	_init() {
+		this._initComponents();
+		this._initUiPartComponents();
 	}
-	_draw(ctx) {
-		if (this._mode === 1) _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: this._size,
-			height: this._size,
-			radius: this._size,
-			fill: HEADER_MENU_SHAPE_CIRCLE_FILL
-		});
-		const iconSize = this._size * .5 * this._iconRatio;
-		const sixtyDegree = Math.PI / 180 * 60;
-		const left = iconSize * Math.sin(sixtyDegree);
-		const top = iconSize * Math.cos(sixtyDegree);
-		_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-			pointsGroup: [[
-				{
-					x: -left + this._size / 2,
-					y: -top + this._size / 2
-				},
-				{
-					x: left + this._size / 2,
-					y: -top + this._size / 2
-				},
-				{
-					x: this._size / 2,
-					y: iconSize + this._size / 2
-				}
-			]],
-			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
+	_initComponents() {
+		[
+			[permissionMenuIconKey, _univerjs_icons.ProtectIcon],
+			[permissionDeleteIconKey, _univerjs_icons.DeleteIcon],
+			[permissionEditIconKey, _univerjs_icons.WriteIcon],
+			[permissionCheckIconKey, _univerjs_icons.CheckMarkIcon],
+			[permissionLockIconKey, _univerjs_icons.LockIcon],
+			[UNIVER_SHEET_PERMISSION_PANEL, SheetPermissionPanel],
+			[UNIVER_SHEET_PERMISSION_USER_DIALOG, SheetPermissionUserDialog],
+			[UNIVER_SHEET_PERMISSION_DIALOG, SheetPermissionDialog],
+			[UNIVER_SHEET_PERMISSION_ALERT_DIALOG, AlertDialog]
+		].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
 		});
 	}
+	_initUiPartComponents() {
+		const config = this._injector.get(_univerjs_core.IConfigService).getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
+		if (config === null || config === void 0 ? void 0 : config.protectedRangeUserSelector) {
+			const { component, framework } = config.protectedRangeUserSelector;
+			this.disposeWithMe(this._componentManager.register(UNIVER_SHEET_PERMISSION_USER_PART, component, { framework }));
+		}
+	}
 };
-
-//#endregion
-//#region src/controllers/render-controllers/header-menu.render-controller.ts
-const HEADER_MENU_CONTROLLER_SHAPE = "__SpreadsheetHeaderMenuSHAPEControllerShape__";
-const HEADER_MENU_CONTROLLER_MENU = "__SpreadsheetHeaderMenuMAINControllerShape__";
-const HEADER_MENU_CONTROLLER_SHAPE_COLOR = "rgba(0, 0, 0, 0.1)";
-let HeaderMenuRenderController = class HeaderMenuRenderController extends _univerjs_core.Disposable {
-	constructor(_context, _sheetSkeletonManagerService, _contextMenuService, _commandService, _selectionManagerService) {
+SheetPermissionRenderManagerController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager))], SheetPermissionRenderManagerController);
+let SheetPermissionRenderController = class SheetPermissionRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _rangeProtectionRuleModel, _sheetSkeletonManagerService, _permissionService, _configService) {
 		super();
 		this._context = _context;
+		this._rangeProtectionRuleModel = _rangeProtectionRuleModel;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._contextMenuService = _contextMenuService;
-		this._commandService = _commandService;
-		this._selectionManagerService = _selectionManagerService;
-		_defineProperty(this, "_hoverRect", void 0);
-		_defineProperty(this, "_hoverMenu", void 0);
-		_defineProperty(this, "_currentColumn", Number.POSITIVE_INFINITY);
-		_defineProperty(this, "_headerPointerSubs", void 0);
-		_defineProperty(this, "_colHeaderPointerSubs", void 0);
-		this._initialize();
-	}
-	dispose() {
-		var _this$_hoverRect, _this$_hoverMenu, _this$_headerPointerS;
-		(_this$_hoverRect = this._hoverRect) === null || _this$_hoverRect === void 0 || _this$_hoverRect.dispose();
-		(_this$_hoverMenu = this._hoverMenu) === null || _this$_hoverMenu === void 0 || _this$_hoverMenu.dispose();
-		(_this$_headerPointerS = this._headerPointerSubs) === null || _this$_headerPointerS === void 0 || _this$_headerPointerS.unsubscribe();
-		this._headerPointerSubs = null;
+		this._permissionService = _permissionService;
+		this._configService = _configService;
+		_defineProperty(this, "_rangeProtectionCanViewRenderExtension", void 0);
+		_defineProperty(this, "_rangeProtectionCanNotViewRenderExtension", void 0);
+		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
+		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
+		this._rangeProtectionCanViewRenderExtension = new RangeProtectionCanViewRenderExtension(shadowStrategy);
+		this._rangeProtectionCanNotViewRenderExtension = new RangeProtectionCanNotViewRenderExtension(shadowStrategy);
+		this._initSkeleton();
+		this._initRender();
+		this.disposeWithMe(this._rangeProtectionRuleModel.ruleChange$.subscribe((info) => {
+			var _info$oldRule, _info$oldRule2;
+			if (((_info$oldRule = info.oldRule) === null || _info$oldRule === void 0 ? void 0 : _info$oldRule.id) && this._rangeProtectionCanViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanViewRenderExtension.clearCache();
+			if (((_info$oldRule2 = info.oldRule) === null || _info$oldRule2 === void 0 ? void 0 : _info$oldRule2.id) && this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.oldRule.id) || this._rangeProtectionCanNotViewRenderExtension.renderCache.has(info.rule.id)) this._rangeProtectionCanNotViewRenderExtension.clearCache();
+		}));
 	}
-	_initialize() {
-		const scene = this._context.scene;
-		this._hoverRect = new _univerjs_engine_render.Rect(HEADER_MENU_CONTROLLER_SHAPE, {
-			fill: HEADER_MENU_CONTROLLER_SHAPE_COLOR,
-			evented: false
-		});
-		this._hoverMenu = new HeaderMenuShape(HEADER_MENU_CONTROLLER_MENU, {
-			zIndex: 100,
-			visible: false
-		});
-		scene.addObjects([this._hoverRect, this._hoverMenu], 10);
-		this._initialHover(0);
-		this._initialHover(1);
-		this._initialHoverMenu();
+	_initRender() {
+		const spreadsheetRender = this._context.mainComponent;
+		if (spreadsheetRender) {
+			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanViewRenderExtension);
+			if (!spreadsheetRender.getExtensionByKey("RANGE_PROTECTION_CAN_NOT_VIEW_RENDER_EXTENSION_KEY")) spreadsheetRender.register(this._rangeProtectionCanNotViewRenderExtension);
+		}
 	}
-	_initialHover(initialType = 0) {
-		var _this$_headerPointerS2, _this$_headerPointerS3, _this$_headerPointerS4;
-		const spreadsheetColumnHeader = this._context.components.get("__SpreadsheetColumnHeader__");
-		const spreadsheetRowHeader = this._context.components.get("__SpreadsheetRowHeader__");
-		const eventBindingObject = initialType === 0 ? spreadsheetRowHeader : spreadsheetColumnHeader;
-		const pointerMoveHandler = (evt) => {
-			var _this$_sheetSkeletonM;
-			const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentParam()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
-			if (skeleton == null) return;
-			const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-			const { startX, startY, endX, endY, column } = getCoordByOffset(evt.offsetX, evt.offsetY, this._context.scene, skeleton);
-			if (initialType === 0) {
-				var _this$_hoverRect2;
-				(_this$_hoverRect2 = this._hoverRect) === null || _this$_hoverRect2 === void 0 || _this$_hoverRect2.transformByState({
-					width: rowHeaderWidth,
-					height: endY - startY,
-					left: 0,
-					top: startY
-				});
-			} else {
-				var _this$_hoverRect3;
-				this._currentColumn = column;
-				(_this$_hoverRect3 = this._hoverRect) === null || _this$_hoverRect3 === void 0 || _this$_hoverRect3.transformByState({
-					width: endX - startX,
-					height: columnHeaderHeight,
-					left: startX,
-					top: 0
-				});
-				if (this._hoverMenu == null) return;
-				if (endX - startX < columnHeaderHeight * 2) {
-					this._hoverMenu.hide();
-					return;
-				}
-				const menuSize = columnHeaderHeight * .8;
-				this._hoverMenu.transformByState({
-					left: endX - columnHeaderHeight,
-					top: columnHeaderHeight / 2 - menuSize / 2
-				});
-				this._hoverMenu.setShapeProps({ size: menuSize });
-				this._hoverMenu.show();
-			}
-		};
-		const pointerEnterHandler = () => {
-			var _this$_hoverRect4;
-			(_this$_hoverRect4 = this._hoverRect) === null || _this$_hoverRect4 === void 0 || _this$_hoverRect4.show();
-		};
-		const pointerLeaveHandler = () => {
-			var _this$_hoverRect5, _this$_hoverMenu2;
-			(_this$_hoverRect5 = this._hoverRect) === null || _this$_hoverRect5 === void 0 || _this$_hoverRect5.hide();
-			(_this$_hoverMenu2 = this._hoverMenu) === null || _this$_hoverMenu2 === void 0 || _this$_hoverMenu2.hide();
+	_initSkeleton() {
+		const markDirtySkeleton = () => {
+			var _this$_context$mainCo;
+			this._sheetSkeletonManagerService.reCalculate();
+			(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty();
 		};
-		this._headerPointerSubs = new rxjs.Subscription();
-		const headerPointerMoveSub = eventBindingObject.onPointerMove$.subscribeEvent(pointerMoveHandler);
-		const headerPointerEnterSub = eventBindingObject.onPointerEnter$.subscribeEvent(pointerEnterHandler);
-		const headerPointerLeaveSub = eventBindingObject.onPointerLeave$.subscribeEvent(pointerLeaveHandler);
-		(_this$_headerPointerS2 = this._headerPointerSubs) === null || _this$_headerPointerS2 === void 0 || _this$_headerPointerS2.add(headerPointerMoveSub);
-		(_this$_headerPointerS3 = this._headerPointerSubs) === null || _this$_headerPointerS3 === void 0 || _this$_headerPointerS3.add(headerPointerEnterSub);
-		(_this$_headerPointerS4 = this._headerPointerSubs) === null || _this$_headerPointerS4 === void 0 || _this$_headerPointerS4.add(headerPointerLeaveSub);
+		this.disposeWithMe((0, rxjs.merge)(this._permissionService.permissionPointUpdate$.pipe((0, rxjs.throttleTime)(300, void 0, { trailing: true })), this._rangeProtectionRuleModel.rangeRuleInitStateChange$, this._rangeProtectionRuleModel.ruleChange$).pipe().subscribe(markDirtySkeleton));
 	}
-	_initialHoverMenu() {
-		if (this._hoverMenu == null) return;
-		this._hoverMenu.onPointerEnter$.subscribeEvent(() => {
-			if (this._hoverMenu == null) return;
-			this._hoverMenu.setProps({
-				mode: 1,
-				visible: true
-			});
-			this._context.scene.setCursor(_univerjs_engine_render.CURSOR_TYPE.POINTER);
-		});
-		this._hoverMenu.onPointerLeave$.subscribeEvent(() => {
-			if (this._hoverMenu == null) return;
-			this._hoverMenu.setProps({
-				mode: 0,
-				visible: false
-			});
-			this._context.scene.resetCursor();
-		});
-		this._hoverMenu.onPointerDown$.subscribeEvent((evt) => {
-			var _this$_selectionManag;
-			const currentColumn = this._currentColumn;
-			const currentSelectionDatas = (_this$_selectionManag = this._selectionManagerService.getCurrentSelections()) === null || _this$_selectionManag === void 0 ? void 0 : _this$_selectionManag.map((s) => s.range);
-			if (!!!(currentSelectionDatas === null || currentSelectionDatas === void 0 ? void 0 : currentSelectionDatas.filter((range) => range.rangeType === _univerjs_core.RANGE_TYPE.COLUMN).find((data) => {
-				const { startColumn, endColumn } = data;
-				if (currentColumn >= startColumn && currentColumn <= endColumn) return true;
-				return false;
-			}))) {
-				const selection = this._getSelectionOnColumn(currentColumn);
-				this._commandService.syncExecuteCommand(_univerjs_sheets.SetSelectionsOperation.id, selection);
-			}
-			evt.stopPropagation();
-			evt.preventDefault();
-			this._contextMenuService.triggerContextMenu(evt, _univerjs_ui.ContextMenuPosition.COL_HEADER);
-		});
+};
+SheetPermissionRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets.RangeProtectionRuleModel)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
+	__decorateParam(3, _univerjs_core.IPermissionService),
+	__decorateParam(4, _univerjs_core.IConfigService)
+], SheetPermissionRenderController);
+let WorksheetProtectionRenderController = class WorksheetProtectionRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _renderManagerService, _sheetSkeletonManagerService, _worksheetProtectionRuleModel, _configService) {
+		super();
+		this._context = _context;
+		this._renderManagerService = _renderManagerService;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._worksheetProtectionRuleModel = _worksheetProtectionRuleModel;
+		this._configService = _configService;
+		_defineProperty(this, "_worksheetProtectionRenderExtension", void 0);
+		const config = this._configService.getConfig(SHEETS_UI_PLUGIN_CONFIG_KEY);
+		const shadowStrategy = convertToShadowStrategy(config === null || config === void 0 ? void 0 : config.protectedRangeShadow);
+		this._worksheetProtectionRenderExtension = new WorksheetProtectionRenderExtension(shadowStrategy);
+		this._initSkeleton();
+		if (shadowStrategy === "none") return;
+		this._initRender();
+	}
+	_initRender() {
+		const renderId = this._context.unitId;
+		const render = renderId && this._renderManagerService.getRenderById(renderId);
+		const spreadsheetRender = render && render.mainComponent;
+		if (spreadsheetRender) {
+			if (!spreadsheetRender.getExtensionByKey("worksheet-protection")) spreadsheetRender.register(this._worksheetProtectionRenderExtension);
+		}
 	}
-	_getSelectionOnColumn(column) {
-		const workbook = this._context.unit;
-		const worksheet = workbook.getActiveSheet();
-		if (!worksheet) throw new Error("No active worksheet");
-		return {
-			unitId: workbook.getUnitId(),
-			subUnitId: worksheet.getSheetId(),
-			selections: [{
-				range: {
-					startRow: 0,
-					startColumn: column,
-					endRow: worksheet.getRowCount() - 1,
-					endColumn: column,
-					rangeType: _univerjs_core.RANGE_TYPE.COLUMN
-				},
-				primary: {
-					startRow: 0,
-					startColumn: column,
-					endRow: 0,
-					endColumn: column,
-					actualRow: 0,
-					actualColumn: column,
-					isMerged: false,
-					isMergedMainCell: false
-				},
-				style: null
-			}]
+	_initSkeleton() {
+		const markDirtySkeleton = () => {
+			var _this$_context$mainCo2;
+			this._sheetSkeletonManagerService.reCalculate();
+			(_this$_context$mainCo2 = this._context.mainComponent) === null || _this$_context$mainCo2 === void 0 || _this$_context$mainCo2.makeDirty();
 		};
+		this.disposeWithMe((0, rxjs.merge)(this._worksheetProtectionRuleModel.worksheetRuleInitStateChange$).pipe().subscribe(markDirtySkeleton));
 	}
 };
-HeaderMenuRenderController = __decorate([
-	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
-	__decorateParam(2, _univerjs_ui.IContextMenuService),
-	__decorateParam(3, _univerjs_core.ICommandService),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService))
-], HeaderMenuRenderController);
+WorksheetProtectionRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_engine_render.IRenderManagerService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.WorksheetProtectionRuleModel)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.IConfigService))
+], WorksheetProtectionRenderController);
 
 //#endregion
-//#region src/views/header-unhide-shape.ts
-const UNHIDE_ICON_SIZE = 12;
-const UNHIDE_ARROW_RATIO = .4;
-var HeaderUnhideShape = class extends _univerjs_engine_render.Shape {
-	constructor(key, props, onClick) {
-		super(key, props);
-		_defineProperty(this, "_size", 12);
-		_defineProperty(this, "_iconRatio", UNHIDE_ARROW_RATIO);
-		_defineProperty(this, "_hovered", true);
-		_defineProperty(this, "_hasPrevious", true);
-		_defineProperty(this, "_hasNext", true);
-		_defineProperty(this, "_unhideType", void 0);
-		if (props) this.setShapeProps(props);
-		this.onPointerEnter$.subscribeEvent(() => this.setShapeProps({ hovered: true }));
-		this.onPointerLeave$.subscribeEvent(() => this.setShapeProps({ hovered: false }));
-		this.onPointerDown$.subscribeEvent(() => onClick === null || onClick === void 0 ? void 0 : onClick());
+//#region src/controllers/render-controllers/clipboard.render-controller.ts
+let ClipboardRenderController = class ClipboardRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _sheetSkeletonManagerService, _sheetClipboardService, _sheetClipboardController) {
+		super();
+		this._context = _context;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._sheetClipboardService = _sheetClipboardService;
+		this._sheetClipboardController = _sheetClipboardController;
+		this._initialize();
 	}
-	setShapeProps(props) {
-		if (props.type !== void 0) this._unhideType = props.type;
-		if (props.hovered !== void 0) this._hovered = props.hovered;
-		if (props.hasPrevious !== void 0) this._hasPrevious = props.hasPrevious;
-		if (props.hasNext !== void 0) this._hasNext = props.hasNext;
-		this.transformByState({
-			width: this._size * (this._unhideType === 1 ? 2 : 1),
-			height: this._size * (this._unhideType === 0 ? 2 : 1)
-		});
+	_initialize() {
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((skeleton) => {
+			if (!(skeleton === null || skeleton === void 0 ? void 0 : skeleton.unitId)) return;
+			if (!this._sheetClipboardService.getPasteMenuVisible()) return;
+			const pasteOptionsCache = this._sheetClipboardService.getPasteOptionsCache();
+			const menuUnitId = pasteOptionsCache === null || pasteOptionsCache === void 0 ? void 0 : pasteOptionsCache.target.unitId;
+			if (skeleton.unitId === menuUnitId) this._sheetClipboardController.refreshOptionalPaste();
+		})));
 	}
-	_draw(ctx) {
-		if (this._unhideType === 0) this._drawOnRow(ctx);
-		else this._drawOnCol(ctx);
+};
+ClipboardRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
+	__decorateParam(2, ISheetClipboardService),
+	__decorateParam(3, (0, _univerjs_core.Inject)(SheetClipboardController))
+], ClipboardRenderController);
+
+//#endregion
+//#region src/controllers/render-controllers/format-painter.render-controller.ts
+let FormatPainterRenderController = class FormatPainterRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _formatPainterService, _selectionRenderService, _commandService) {
+		super();
+		this._context = _context;
+		this._formatPainterService = _formatPainterService;
+		this._selectionRenderService = _selectionRenderService;
+		this._commandService = _commandService;
+		this._initialize();
 	}
-	_drawOnRow(ctx) {
-		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
-		});
-		else _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: this._size,
-			height: 2 * this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
-		});
-		const iconSize = this._size * .5 * this._iconRatio;
-		const sixtyDegree = Math.PI / 3;
-		const top = iconSize * Math.cos(sixtyDegree);
-		const left = iconSize * Math.sin(sixtyDegree);
-		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-			pointsGroup: [[
-				{
-					x: this._size / 2,
-					y: this._size / 2 - left
-				},
-				{
-					x: this._size / 2 - left,
-					y: this._size / 2 + top
-				},
-				{
-					x: this._size / 2 + left,
-					y: this._size / 2 + top
-				}
-			]],
-			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
-		});
-		if (this._hasNext) {
-			const offset = this._hasPrevious ? 3 : 1;
-			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-				pointsGroup: [[
-					{
-						x: this._size / 2,
-						y: this._size * offset / 2 + left
-					},
-					{
-						x: this._size / 2 - left,
-						y: this._size * offset / 2 - top
-					},
-					{
-						x: this._size / 2 + left,
-						y: this._size * offset / 2 - top
-					}
-				]],
-				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
-			});
-		}
+	_initialize() {
+		this._bindFormatPainterStatus();
+		this._commandExecutedListener();
 	}
-	/**
-	*
-	* @param ctx
-	*/
-	_drawOnCol(ctx) {
-		if (this._hovered) if (!this._hasNext || !this._hasPrevious) _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
-		});
-		else _univerjs_engine_render.Rect.drawWith(ctx, {
-			width: 2 * this._size,
-			height: this._size,
-			stroke: HEADER_MENU_SHAPE_TRIANGLE_FILL,
-			fill: HEADER_MENU_BACKGROUND_COLOR
-		});
-		const iconSize = this._size * .5 * this._iconRatio;
-		const sixtyDegree = Math.PI / 3;
-		const top = iconSize * Math.cos(sixtyDegree);
-		const left = iconSize * Math.sin(sixtyDegree);
-		if (this._hasPrevious) _univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-			pointsGroup: [[
-				{
-					x: -top + this._size / 2,
-					y: this._size / 2
-				},
-				{
-					x: this._size / 2 + left,
-					y: this._size / 2 - left
-				},
-				{
-					x: this._size / 2 + left,
-					y: this._size / 2 + left
-				}
-			]],
-			fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
-		});
-		if (this._hasNext) {
-			const offset = this._hasPrevious ? 3 : 1;
-			_univerjs_engine_render.RegularPolygon.drawWith(ctx, {
-				pointsGroup: [[
-					{
-						x: top + this._size * offset / 2,
-						y: this._size / 2
-					},
-					{
-						x: -left + this._size * offset / 2,
-						y: this._size / 2 - left
-					},
-					{
-						x: -left + this._size * offset / 2,
-						y: this._size / 2 + left
+	_commandExecutedListener() {
+		this.disposeWithMe(this._selectionRenderService.selectionMoveEnd$.subscribe((selections) => {
+			if (this._formatPainterService.getStatus() !== 0) {
+				var _this$_context$unit$g;
+				const { rangeWithCoord } = selections[selections.length - 1];
+				this._commandService.executeCommand(ApplyFormatPainterCommand.id, {
+					unitId: this._context.unitId,
+					subUnitId: ((_this$_context$unit$g = this._context.unit.getActiveSheet()) === null || _this$_context$unit$g === void 0 ? void 0 : _this$_context$unit$g.getSheetId()) || "",
+					range: {
+						startRow: rangeWithCoord.startRow,
+						startColumn: rangeWithCoord.startColumn,
+						endRow: rangeWithCoord.endRow,
+						endColumn: rangeWithCoord.endColumn
 					}
-				]],
-				fill: HEADER_MENU_SHAPE_TRIANGLE_FILL
-			});
-		}
+				});
+				if (this._formatPainterService.getStatus() === 1) this._commandService.executeCommand(SetOnceFormatPainterCommand.id);
+			}
+		}));
+	}
+	_bindFormatPainterStatus() {
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(this._formatPainterService.status$.subscribe((status) => {
+			const scene = this._context.scene;
+			if (!scene) return;
+			if (status !== 0) scene.setDefaultCursor(_univerjs_engine_render.CURSOR_TYPE.CELL);
+			else scene.setDefaultCursor(_univerjs_engine_render.CURSOR_TYPE.DEFAULT);
+		})));
 	}
 };
+FormatPainterRenderController = __decorate([
+	__decorateParam(1, IFormatPainterService),
+	__decorateParam(2, ISheetSelectionRenderService),
+	__decorateParam(3, _univerjs_core.ICommandService)
+], FormatPainterRenderController);
 
 //#endregion
-//#region src/controllers/render-controllers/header-unhide.render-controller.ts
-const HEADER_UNHIDE_CONTROLLER_SHAPE = "__SpreadsheetHeaderUnhideSHAPEControllerShape__";
-let HeaderUnhideRenderController = class HeaderUnhideRenderController extends _univerjs_core.RxDisposable {
-	get _workbook() {
-		return this._context.unit;
-	}
-	constructor(_context, _sheetSkeletonManagerService, _commandService) {
+//#region src/controllers/render-controllers/header-menu.render-controller.ts
+const HEADER_MENU_CONTROLLER_SHAPE = "__SpreadsheetHeaderMenuSHAPEControllerShape__";
+const HEADER_MENU_CONTROLLER_MENU = "__SpreadsheetHeaderMenuMAINControllerShape__";
+const HEADER_MENU_CONTROLLER_SHAPE_COLOR = "rgba(0, 0, 0, 0.1)";
+let HeaderMenuRenderController = class HeaderMenuRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _sheetSkeletonManagerService, _contextMenuService, _commandService, _selectionManagerService) {
 		super();
 		this._context = _context;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._contextMenuService = _contextMenuService;
 		this._commandService = _commandService;
-		_defineProperty(this, "_shapes", {
-			cols: [],
-			rows: []
-		});
-		this._init();
+		this._selectionManagerService = _selectionManagerService;
+		_defineProperty(this, "_hoverRect", void 0);
+		_defineProperty(this, "_hoverMenu", void 0);
+		_defineProperty(this, "_currentColumn", Number.POSITIVE_INFINITY);
+		_defineProperty(this, "_headerPointerSubs", void 0);
+		_defineProperty(this, "_colHeaderPointerSubs", void 0);
+		this._initialize();
 	}
 	dispose() {
-		super.dispose();
-		this._clearShapes();
+		var _this$_hoverRect, _this$_hoverMenu, _this$_headerPointerS;
+		(_this$_hoverRect = this._hoverRect) === null || _this$_hoverRect === void 0 || _this$_hoverRect.dispose();
+		(_this$_hoverMenu = this._hoverMenu) === null || _this$_hoverMenu === void 0 || _this$_hoverMenu.dispose();
+		(_this$_headerPointerS = this._headerPointerSubs) === null || _this$_headerPointerS === void 0 || _this$_headerPointerS.unsubscribe();
+		this._headerPointerSubs = null;
 	}
-	_init() {
-		let activeSheetId = "";
-		this._context.unit.activeSheet$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((worksheet) => {
-			this._clearShapes();
-			if (!worksheet) {
-				activeSheetId = "";
-				return;
-			}
-			activeSheetId = worksheet.getSheetId();
-			this._update(this._workbook, worksheet);
+	_initialize() {
+		const scene = this._context.scene;
+		this._hoverRect = new _univerjs_engine_render.Rect(HEADER_MENU_CONTROLLER_SHAPE, {
+			fill: HEADER_MENU_CONTROLLER_SHAPE_COLOR,
+			evented: false
 		});
-		this.disposeWithMe(this._sheetSkeletonManagerService.currentSkeleton$.subscribe((param) => {
-			if (param) {
-				const { unitId, sheetId } = param;
-				if (unitId === this._workbook.getUnitId() && sheetId === activeSheetId) {
-					const worksheet = this._workbook.getSheetBySheetId(sheetId);
-					if (worksheet) this._update(this._workbook, worksheet);
+		this._hoverMenu = new HeaderMenuShape(HEADER_MENU_CONTROLLER_MENU, {
+			zIndex: 100,
+			visible: false
+		});
+		scene.addObjects([this._hoverRect, this._hoverMenu], 10);
+		this._initialHover(0);
+		this._initialHover(1);
+		this._initialHoverMenu();
+	}
+	_initialHover(initialType = 0) {
+		var _this$_headerPointerS2, _this$_headerPointerS3, _this$_headerPointerS4;
+		const spreadsheetColumnHeader = this._context.components.get("__SpreadsheetColumnHeader__");
+		const spreadsheetRowHeader = this._context.components.get("__SpreadsheetRowHeader__");
+		const eventBindingObject = initialType === 0 ? spreadsheetRowHeader : spreadsheetColumnHeader;
+		const pointerMoveHandler = (evt) => {
+			var _this$_sheetSkeletonM;
+			const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getCurrentParam()) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
+			if (skeleton == null) return;
+			const { rowBaseWidth, rowGutterWidth, columnBaseHeight, columnGutterHeight } = getHeaderBaseLayout(skeleton);
+			const { startX, startY, endX, endY, column } = getCoordByOffset(evt.offsetX, evt.offsetY, this._context.scene, skeleton);
+			if (initialType === 0) {
+				var _this$_hoverRect2;
+				(_this$_hoverRect2 = this._hoverRect) === null || _this$_hoverRect2 === void 0 || _this$_hoverRect2.transformByState({
+					width: rowBaseWidth,
+					height: endY - startY,
+					left: rowGutterWidth,
+					top: startY
+				});
+			} else {
+				var _this$_hoverRect3;
+				this._currentColumn = column;
+				(_this$_hoverRect3 = this._hoverRect) === null || _this$_hoverRect3 === void 0 || _this$_hoverRect3.transformByState({
+					width: endX - startX,
+					height: columnBaseHeight,
+					left: startX,
+					top: columnGutterHeight
+				});
+				if (this._hoverMenu == null) return;
+				if (endX - startX < columnBaseHeight * 2) {
+					this._hoverMenu.hide();
+					return;
 				}
+				const menuSize = columnBaseHeight * .8;
+				this._hoverMenu.transformByState({
+					left: endX - columnBaseHeight,
+					top: columnGutterHeight + columnBaseHeight / 2 - menuSize / 2
+				});
+				this._hoverMenu.setShapeProps({ size: menuSize });
+				this._hoverMenu.show();
 			}
-		}));
+		};
+		const pointerEnterHandler = () => {
+			var _this$_hoverRect4;
+			(_this$_hoverRect4 = this._hoverRect) === null || _this$_hoverRect4 === void 0 || _this$_hoverRect4.show();
+		};
+		const pointerLeaveHandler = () => {
+			var _this$_hoverRect5, _this$_hoverMenu2;
+			(_this$_hoverRect5 = this._hoverRect) === null || _this$_hoverRect5 === void 0 || _this$_hoverRect5.hide();
+			(_this$_hoverMenu2 = this._hoverMenu) === null || _this$_hoverMenu2 === void 0 || _this$_hoverMenu2.hide();
+		};
+		this._headerPointerSubs = new rxjs.Subscription();
+		const headerPointerMoveSub = eventBindingObject.onPointerMove$.subscribeEvent(pointerMoveHandler);
+		const headerPointerEnterSub = eventBindingObject.onPointerEnter$.subscribeEvent(pointerEnterHandler);
+		const headerPointerLeaveSub = eventBindingObject.onPointerLeave$.subscribeEvent(pointerLeaveHandler);
+		(_this$_headerPointerS2 = this._headerPointerSubs) === null || _this$_headerPointerS2 === void 0 || _this$_headerPointerS2.add(headerPointerMoveSub);
+		(_this$_headerPointerS3 = this._headerPointerSubs) === null || _this$_headerPointerS3 === void 0 || _this$_headerPointerS3.add(headerPointerEnterSub);
+		(_this$_headerPointerS4 = this._headerPointerSubs) === null || _this$_headerPointerS4 === void 0 || _this$_headerPointerS4.add(headerPointerLeaveSub);
 	}
-	_update(workbook, worksheet) {
-		var _this$_sheetSkeletonM;
-		const skeleton = (_this$_sheetSkeletonM = this._sheetSkeletonManagerService.getSkeletonParam(worksheet.getSheetId())) === null || _this$_sheetSkeletonM === void 0 ? void 0 : _this$_sheetSkeletonM.skeleton;
-		if (!skeleton) return;
-		const hiddenRowRanges = worksheet.getHiddenRows();
-		const hiddenColRanges = worksheet.getHiddenCols();
-		const { scene } = this._getSheetObject();
-		const rowCount = worksheet.getRowCount();
-		const rowShapes = hiddenRowRanges.map((range) => {
-			const { startRow, endRow } = range;
-			const position = getCoordByCell(startRow, 0, scene, skeleton);
-			const hasPrevious = startRow !== 0;
-			const hasNext = endRow !== rowCount - 1;
-			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
-				type: 0,
-				hovered: false,
-				hasPrevious,
-				hasNext,
-				top: position.startY - (hasPrevious ? 12 : 0),
-				left: position.startX - 12
-			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificRowsVisibleCommand.id, {
-				unitId: workbook.getUnitId(),
-				subUnitId: worksheet.getSheetId(),
-				ranges: [range]
-			}));
+	_initialHoverMenu() {
+		if (this._hoverMenu == null) return;
+		this._hoverMenu.onPointerEnter$.subscribeEvent(() => {
+			if (this._hoverMenu == null) return;
+			this._hoverMenu.setProps({
+				mode: 1,
+				visible: true
+			});
+			this._context.scene.setCursor(_univerjs_engine_render.CURSOR_TYPE.POINTER);
 		});
-		const colCount = worksheet.getColumnCount();
-		const colShapes = hiddenColRanges.map((range) => {
-			const { startColumn, endColumn } = range;
-			const position = getCoordByCell(0, startColumn, scene, skeleton);
-			const hasPrevious = startColumn !== 0;
-			const hasNext = endColumn !== colCount - 1;
-			return new HeaderUnhideShape(HEADER_UNHIDE_CONTROLLER_SHAPE, {
-				type: 1,
-				hovered: false,
-				hasPrevious,
-				hasNext,
-				top: 20 - 12,
-				left: position.startX - (hasPrevious ? 12 : 0)
-			}, () => this._commandService.executeCommand(_univerjs_sheets.SetSpecificColsVisibleCommand.id, {
-				unitId: workbook.getUnitId(),
-				subUnitId: worksheet.getSheetId(),
-				ranges: [range]
-			}));
+		this._hoverMenu.onPointerLeave$.subscribeEvent(() => {
+			if (this._hoverMenu == null) return;
+			this._hoverMenu.setProps({
+				mode: 0,
+				visible: false
+			});
+			this._context.scene.resetCursor();
+		});
+		this._hoverMenu.onPointerDown$.subscribeEvent((evt) => {
+			var _this$_selectionManag;
+			const currentColumn = this._currentColumn;
+			const currentSelectionDatas = (_this$_selectionManag = this._selectionManagerService.getCurrentSelections()) === null || _this$_selectionManag === void 0 ? void 0 : _this$_selectionManag.map((s) => s.range);
+			if (!!!(currentSelectionDatas === null || currentSelectionDatas === void 0 ? void 0 : currentSelectionDatas.filter((range) => range.rangeType === _univerjs_core.RANGE_TYPE.COLUMN).find((data) => {
+				const { startColumn, endColumn } = data;
+				if (currentColumn >= startColumn && currentColumn <= endColumn) return true;
+				return false;
+			}))) {
+				const selection = this._getSelectionOnColumn(currentColumn);
+				this._commandService.syncExecuteCommand(_univerjs_sheets.SetSelectionsOperation.id, selection);
+			}
+			evt.stopPropagation();
+			evt.preventDefault();
+			this._contextMenuService.triggerContextMenu(evt, _univerjs_ui.ContextMenuPosition.COL_HEADER);
 		});
-		scene.addObjects(colShapes, 12);
-		scene.addObjects(rowShapes, 12);
-		this._clearShapes();
-		this._shapes = {
-			cols: colShapes,
-			rows: rowShapes
-		};
 	}
-	_clearShapes() {
-		this._shapes.cols.forEach((shape) => shape.dispose());
-		this._shapes.rows.forEach((shape) => shape.dispose());
-		this._shapes = {
-			cols: [],
-			rows: []
+	_getSelectionOnColumn(column) {
+		const workbook = this._context.unit;
+		const worksheet = workbook.getActiveSheet();
+		if (!worksheet) throw new Error("No active worksheet");
+		return {
+			unitId: workbook.getUnitId(),
+			subUnitId: worksheet.getSheetId(),
+			selections: [{
+				range: {
+					startRow: 0,
+					startColumn: column,
+					endRow: worksheet.getRowCount() - 1,
+					endColumn: column,
+					rangeType: _univerjs_core.RANGE_TYPE.COLUMN
+				},
+				primary: {
+					startRow: 0,
+					startColumn: column,
+					endRow: 0,
+					endColumn: column,
+					actualRow: 0,
+					actualColumn: column,
+					isMerged: false,
+					isMergedMainCell: false
+				},
+				style: null
+			}]
 		};
 	}
-	_getSheetObject() {
-		return getSheetObject(this._workbook, this._context);
-	}
 };
-HeaderUnhideRenderController = __decorate([__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)), __decorateParam(2, _univerjs_core.ICommandService)], HeaderUnhideRenderController);
+HeaderMenuRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)),
+	__decorateParam(2, _univerjs_ui.IContextMenuService),
+	__decorateParam(3, _univerjs_core.ICommandService),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService))
+], HeaderMenuRenderController);
+function getHeaderBaseLayout(skeleton) {
+	var _skeleton$worksheet$g, _skeleton$worksheet, _config$rowHeader, _config$columnHeader;
+	const config = (_skeleton$worksheet$g = (_skeleton$worksheet = skeleton.worksheet).getConfig) === null || _skeleton$worksheet$g === void 0 ? void 0 : _skeleton$worksheet$g.call(_skeleton$worksheet);
+	const configuredRowWidth = config === null || config === void 0 || (_config$rowHeader = config.rowHeader) === null || _config$rowHeader === void 0 ? void 0 : _config$rowHeader.width;
+	const configuredColumnHeight = config === null || config === void 0 || (_config$columnHeader = config.columnHeader) === null || _config$columnHeader === void 0 ? void 0 : _config$columnHeader.height;
+	const rowBaseWidth = typeof configuredRowWidth === "number" && configuredRowWidth > 0 ? Math.min(configuredRowWidth, skeleton.rowHeaderWidth) : skeleton.rowHeaderWidth;
+	const columnBaseHeight = typeof configuredColumnHeight === "number" && configuredColumnHeight > 0 ? Math.min(configuredColumnHeight, skeleton.columnHeaderHeight) : skeleton.columnHeaderHeight;
+	return {
+		rowBaseWidth,
+		rowGutterWidth: Math.max(0, skeleton.rowHeaderWidthAndMarginLeft - rowBaseWidth),
+		columnBaseHeight,
+		columnGutterHeight: Math.max(0, skeleton.columnHeaderHeightAndMarginTop - columnBaseHeight)
+	};
+}
 
 //#endregion
 //#region src/consts/mobile-context.ts
@@ -28876,12 +28984,12 @@ 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;
+		var _this$_renderManagerS, _scene$getViewport, _scene$getViewport2, _scene$getViewport3, _scene$getViewport4, _scene$getViewport5;
 		if (param == null) return;
 		const { unitId } = this._context;
 		const { skeleton } = param;
@@ -28894,6 +29002,30 @@ let SheetSkeletonRenderController = class SheetSkeletonRenderController extends
 			height: columnHeaderHeightAndMarginTop + rowTotalHeight
 		});
 		scene.getMainViewport().setMargin(rowHeaderWidthAndMarginLeft, columnHeaderHeightAndMarginTop);
+		scene.getMainViewport().resizeWhenFreezeChange({
+			left: rowHeaderWidthAndMarginLeft,
+			top: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_COLUMN_LEFT)) === null || _scene$getViewport === void 0 || _scene$getViewport.resizeWhenFreezeChange({
+			left: rowHeaderWidthAndMarginLeft,
+			height: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport2 = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_COLUMN_RIGHT)) === null || _scene$getViewport2 === void 0 || _scene$getViewport2.resizeWhenFreezeChange({
+			left: rowHeaderWidthAndMarginLeft,
+			height: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport3 = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_ROW_BOTTOM)) === null || _scene$getViewport3 === void 0 || _scene$getViewport3.resizeWhenFreezeChange({
+			width: rowHeaderWidthAndMarginLeft,
+			top: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport4 = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_ROW_TOP)) === null || _scene$getViewport4 === void 0 || _scene$getViewport4.resizeWhenFreezeChange({
+			width: rowHeaderWidthAndMarginLeft,
+			top: columnHeaderHeightAndMarginTop
+		});
+		(_scene$getViewport5 = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_LEFT_TOP)) === null || _scene$getViewport5 === void 0 || _scene$getViewport5.resizeWhenFreezeChange({
+			width: rowHeaderWidthAndMarginLeft,
+			height: columnHeaderHeightAndMarginTop
+		});
 	}
 };
 SheetSkeletonRenderController = __decorate([__decorateParam(1, (0, _univerjs_core.Inject)(SheetSkeletonManagerService)), __decorateParam(2, _univerjs_engine_render.IRenderManagerService)], SheetSkeletonRenderController);
@@ -29727,16 +29859,18 @@ let MobileSheetsSelectionRenderService = class MobileSheetsSelectionRenderServic
 	*/
 	newSelectionControl(scene, skeleton, selection) {
 		const selectionControls = this.getSelectionControls();
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
+		const { rowHeaderWidth, rowHeaderWidthAndMarginLeft, columnHeaderHeight, columnHeaderHeightAndMarginTop } = skeleton;
 		const rangeType = selection.range.rangeType;
 		const control = new MobileSelectionControl(scene, selectionControls.length, this._themeService, {
 			highlightHeader: this._highlightHeader,
 			rowHeaderWidth,
 			columnHeaderHeight,
+			rowHeaderOffsetX: Math.max(0, rowHeaderWidthAndMarginLeft - rowHeaderWidth),
+			columnHeaderOffsetY: Math.max(0, columnHeaderHeightAndMarginTop - columnHeaderHeight),
 			rangeType
 		});
 		const selectionWithCoord = (0, _univerjs_sheets.attachSelectionWithCoord)(selection, skeleton);
-		control.updateRangeBySelectionWithCoord(selectionWithCoord);
+		control.updateRangeBySelectionWithCoord(selectionWithCoord, skeleton);
 		this._selectionControls.push(control);
 		const { expandingModeForTopLeft, expandingModeForBottomRight } = (() => {
 			switch (rangeType) {
@@ -30012,6 +30146,7 @@ let UniverSheetsMobileUIPlugin = class UniverSheetsMobileUIPlugin extends _unive
 			[IStatusBarService, { useClass: StatusBarService }],
 			[IMarkSelectionService, { useClass: MarkSelectionService }],
 			[HoverManagerService],
+			[HeaderUnhideRangeService],
 			[DragManagerService],
 			[SheetCanvasPopManagerService],
 			[CellPopupManagerService],
@@ -30607,6 +30742,7 @@ let UniverSheetsUIPlugin = class UniverSheetsUIPlugin extends _univerjs_core.Plu
 			[IStatusBarService, { useClass: StatusBarService }],
 			[IMarkSelectionService, { useClass: MarkSelectionService }],
 			[HoverManagerService],
+			[HeaderUnhideRangeService],
 			[DragManagerService],
 			[SheetCanvasPopManagerService],
 			[CellPopupManagerService],
@@ -30821,6 +30957,7 @@ Object.defineProperty(exports, 'FormulaEditorController', {
     return FormulaEditorController;
   }
 });
+exports.HEADER_UNHIDE_RANGE_VISIBLE_CHECK = HEADER_UNHIDE_RANGE_VISIBLE_CHECK;
 Object.defineProperty(exports, 'HeaderFreezeRenderController', {
   enumerable: true,
   get: function () {
@@ -30839,6 +30976,14 @@ Object.defineProperty(exports, 'HeaderResizeRenderController', {
     return HeaderResizeRenderController;
   }
 });
+exports.HeaderUnhideRangeAxis = HeaderUnhideRangeAxis;
+exports.HeaderUnhideRangeService = HeaderUnhideRangeService;
+Object.defineProperty(exports, 'HeaderUnhideRenderController', {
+  enumerable: true,
+  get: function () {
+    return HeaderUnhideRenderController;
+  }
+});
 exports.HideColConfirmCommand = HideColConfirmCommand;
 exports.HideRowConfirmCommand = HideRowConfirmCommand;
 Object.defineProperty(exports, 'HoverManagerService', {