@univerjs/sheets-table-ui 0.23.0 → 0.24.0

package/lib/index.js

@@ -1,21 +1,21 @@
-import { ColorKit, CommandType, DependentOn, Disposable, ErrorService, ICommandService, IConfigService, IContextService, IPermissionService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, ObjectMatrix, Plugin, Rectangle, RxDisposable, ThemeService, UniverInstanceType, VerticalAlign, cellToRange, merge, registerDependencies, touchDependencies } from "@univerjs/core";
-import { IRenderManagerService, Rect, SHEET_VIEWPORT_KEY, Shape, convertTransformToOffsetX, convertTransformToOffsetY } from "@univerjs/engine-render";
-import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SheetTableInsertColCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableButtonStateEnum, SheetsTableController, SheetsTableSortStateEnum, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, customEmptyThemeWithBorderStyle, isConditionFilter, isManualTableFilter, processStyleWithBorderStyle } from "@univerjs/sheets-table";
-import { SelectAllCommand, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetScrollManagerService, SheetSkeletonManagerService, getCoordByCell, getCurrentRangeDisable$, getSheetObject } from "@univerjs/sheets-ui";
-import { BuiltInUIPart, ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, IUIPartsService, MenuItemType, RibbonDataGroup, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
-import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, filter, map, merge as merge$1, of, startWith, switchMap, takeUntil } from "rxjs";
+import { ColorKit, CommandType, DependentOn, Disposable, ErrorService, ICommandService, IConfigService, IContextService, IPermissionService, IUniverInstanceService, Inject, Injector, InterceptorEffectEnum, LocaleService, ObjectMatrix, Plugin, Rectangle, RxDisposable, UniverInstanceType, VerticalAlign, cellToRange, fromCallback, merge, registerDependencies, toDisposable, touchDependencies } from "@univerjs/core";
+import { CURSOR_TYPE, DEFAULT_FONTFACE_PLANE, IRenderManagerService, Rect, Shape } from "@univerjs/engine-render";
+import { AddSheetTableCommand, AddTableThemeCommand, DeleteSheetTableCommand, RemoveTableThemeCommand, SHEET_TABLE_CUSTOM_THEME_PREFIX, SetSheetTableCommand, SetSheetTableFilterCommand, SheetTableInsertColCommand, SheetTableInsertColumnAtCommand, SheetTableInsertRowAtCommand, SheetTableInsertRowCommand, SheetTableRemoveColCommand, SheetTableRemoveColumnAtCommand, SheetTableRemoveRowCommand, SheetTableService, SheetsTableController, SheetsTableSortStateEnum, TableColumnFilterTypeEnum, TableConditionTypeEnum, TableDateCompareTypeEnum, TableManager, TableNumberCompareTypeEnum, TableStringCompareTypeEnum, UniverSheetsTablePlugin, customEmptyThemeWithBorderStyle, getExistingNamesSet, isConditionFilter, isManualTableFilter, processStyleWithBorderStyle, validateSheetTableName } from "@univerjs/sheets-table";
+import { ISheetSelectionRenderService, SHEET_VIEW_KEY, SelectAllCommand, SetScrollOperation, SetZoomRatioOperation, SheetCanvasPopManagerService, SheetSkeletonManagerService, getCoordByCell, getCurrentRangeDisable$, getTransformCoord } from "@univerjs/sheets-ui";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IMenuManagerService, ISidebarService, MenuItemType, RibbonDataGroup, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { Subject, distinctUntilChanged, filter, map, merge as merge$1, of, startWith, switchMap, takeUntil } from "rxjs";
 import { Button, ButtonGroup, CascaderList, Checkbox, ColorPicker, DatePicker, DateRangePicker, Dropdown, Input, InputNumber, Segmented, Select, borderClassName, clsx, scrollbarClassName } from "@univerjs/design";
-import { AscendingIcon, DeleteIcon, DescendingIcon, DropdownIcon, GridOutlineIcon, MoreDownIcon, PaintBucketDoubleIcon, RenameIcon, TableIcon } from "@univerjs/icons";
+import { AscendingIcon, DeleteColumnDoubleIcon, DescendingIcon, DropdownIcon, LeftInsertColumnDoubleIcon, MoreDownIcon, RightInsertColumnDoubleIcon, TableIcon } from "@univerjs/icons";
 import { INTERCEPTOR_POINT, RangeThemeStyle, SetRangeThemeMutation, SetRangeValuesMutation, SetSelectionsOperation, SetVerticalTextAlignCommand, SheetInterceptorService, SheetRangeThemeModel, SheetsSelectionsService, WorkbookEditablePermission, WorkbookPermissionService, expandToContinuousRange, getPrimaryForRange, getSheetCommandTarget, isSingleCellSelection } from "@univerjs/sheets";
 import { SortRangeCommand, SortType } from "@univerjs/sheets-sort";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { deserializeRangeWithSheet, serializeRange } from "@univerjs/engine-formula";
+import { IDefinedNamesService, deserializeRangeWithSheet, serializeRange } from "@univerjs/engine-formula";
 import { RangeSelector } from "@univerjs/sheets-formula-ui";
 
 //#region package.json
 var name = "@univerjs/sheets-table-ui";
-var version = "0.23.0";
+var version = "0.24.0";
 
 //#endregion
 //#region src/const.ts
@@ -39,6 +39,8 @@ const SHEETS_TABLE_FILTER_PANEL_OPENED_KEY = "SHEETS_TABLE_FILTER_PANEL_OPENED_K
 const UNIVER_SHEET_TABLE_FILTER_PANEL_ID = "UNIVER_SHEET_Table_FILTER_PANEL_ID";
 const TABLE_TOOLBAR_BUTTON = "TABLE_TOOLBAR_BUTTON";
 const TABLE_SELECTOR_DIALOG = "TABLE_SELECTOR_DIALOG";
+const SHEET_TABLE_RENAME_DIALOG = "SHEET_TABLE_RENAME_DIALOG";
+const SHEET_TABLE_RENAME_DIALOG_ID = "SHEET_TABLE_RENAME_DIALOG_ID";
 const SHEET_TABLE_THEME_PANEL_ID = "SHEET_TABLE_THEME_PANEL_ID";
 const SHEET_TABLE_THEME_PANEL = "SHEET_TABLE_THEME_PANEL";
 const TABLE_CUSTOM_NAME_PREFIX = "table-custom-";
@@ -107,7 +109,7 @@ function __decorate(decorators, target, key, desc) {
 }
 
 //#endregion
-//#region src/services/sheets-table-ui-service.ts
+//#region src/services/sheets-table-ui.service.ts
 let SheetsTableUiService = class SheetsTableUiService extends Disposable {
 	constructor(_tableManager, _sheetTableService, _univerInstanceService, _commandService, _localeService) {
 		super();
@@ -851,9 +853,12 @@ function SheetTableFilterPanel() {
 	const table = tableManager.getTable(unitId, tableId);
 	if (!table) return null;
 	const tableFilters = table.getTableFilters();
+	const tableRange = table.getRange();
 	const sortState = tableFilters.getSortState();
 	sortState.columnIndex === columnIndex && (sortState.sortState, SheetsTableSortStateEnum.Asc);
 	sortState.columnIndex === columnIndex && (sortState.sortState, SheetsTableSortStateEnum.Desc);
+	const absoluteColumn = tableFilterPanelInfo.column;
+	const canDeleteColumn = tableRange.endColumn > tableRange.startColumn;
 	const closeDialog = () => {
 		sheetsTableComponentController.closeFilterPanel();
 	};
@@ -875,6 +880,27 @@ function SheetTableFilterPanel() {
 		tableFilters.setSortState(columnIndex, asc ? SheetsTableSortStateEnum.Asc : SheetsTableSortStateEnum.Desc);
 		closeDialog();
 	};
+	const insertColumn = (side) => {
+		commandService.executeCommand(SheetTableInsertColumnAtCommand.id, {
+			unitId,
+			subUnitId,
+			tableId,
+			index: side === "left" ? absoluteColumn : absoluteColumn + 1,
+			count: 1
+		});
+		closeDialog();
+	};
+	const deleteColumn = () => {
+		if (!canDeleteColumn) return;
+		commandService.executeCommand(SheetTableRemoveColumnAtCommand.id, {
+			unitId,
+			subUnitId,
+			tableId,
+			index: absoluteColumn,
+			count: 1
+		});
+		closeDialog();
+	};
 	const onApply = () => {
 		if (filterBy === "items") {
 			const filteredItems = [];
@@ -921,7 +947,39 @@ function SheetTableFilterPanel() {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "univer-box-border univer-flex univer-min-w-[312px] univer-flex-col univer-rounded-[10px] univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
 		children: [
-			((_permissionService$ge = permissionService.getPermissionPoint(workbookEditableId)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value) && /* @__PURE__ */ jsx("div", {
+			((_permissionService$ge = permissionService.getPermissionPoint(workbookEditableId)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value) && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "-univer-mx-4 -univer-mt-2 univer-mb-3 univer-border-0 univer-border-b univer-border-solid univer-border-gray-200 univer-py-1",
+				children: [
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
+						onClick: () => insertColumn("left"),
+						children: [/* @__PURE__ */ jsx(LeftInsertColumnDoubleIcon, {
+							className: "univer-size-5",
+							extend: { colorChannel1: "var(--univer-primary-600)" }
+						}), /* @__PURE__ */ jsx("span", { children: localeService.t("sheets-table.columnMenu.insert-left") })]
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
+						onClick: () => insertColumn("right"),
+						children: [/* @__PURE__ */ jsx(RightInsertColumnDoubleIcon, {
+							className: "univer-size-5",
+							extend: { colorChannel1: "var(--univer-primary-600)" }
+						}), /* @__PURE__ */ jsx("span", { children: localeService.t("sheets-table.columnMenu.insert-right") })]
+					}),
+					/* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "univer-box-border univer-flex univer-h-10 univer-w-full univer-cursor-pointer univer-items-center univer-gap-3 univer-border-none univer-bg-transparent univer-px-4 univer-text-left univer-text-sm univer-text-gray-900 hover:univer-bg-gray-100 disabled:univer-cursor-not-allowed disabled:univer-text-gray-400 dark:!univer-text-white dark:hover:!univer-bg-gray-600",
+						disabled: !canDeleteColumn,
+						onClick: deleteColumn,
+						children: [/* @__PURE__ */ jsx(DeleteColumnDoubleIcon, {
+							className: "univer-size-5",
+							extend: { colorChannel1: "var(--univer-primary-600)" }
+						}), /* @__PURE__ */ jsx("span", { children: localeService.t("sheets-table.columnMenu.delete") })]
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
 				className: "univer-mb-3 univer-flex",
 				children: /* @__PURE__ */ jsxs(ButtonGroup, {
 					className: "univer-mb-3 !univer-flex univer-w-full",
@@ -935,7 +993,7 @@ function SheetTableFilterPanel() {
 						children: [/* @__PURE__ */ jsx(DescendingIcon, { className: "univer-mr-1" }), localeService.t("sheets-sort.general.sort-desc")]
 					})]
 				})
-			}),
+			})] }),
 			/* @__PURE__ */ jsx("div", {
 				className: "univer-w-full",
 				children: /* @__PURE__ */ jsx(Segmented, {
@@ -996,6 +1054,89 @@ function useFilterByOptions(localeService) {
 	}], [localeService.getCurrentLocale(), localeService]);
 }
 
+//#endregion
+//#region src/views/components/SheetTableRenameDialog.tsx
+function SheetTableRenameDialog(props) {
+	var _table$getDisplayName;
+	const { unitId, tableId, onClose } = props;
+	const localeService = useDependency(LocaleService);
+	const commandService = useDependency(ICommandService);
+	const tableManager = useDependency(TableManager);
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const definedNamesService = useDependency(IDefinedNamesService);
+	const table = tableManager.getTableById(unitId, tableId);
+	const [value, setValue] = useState((_table$getDisplayName = table === null || table === void 0 ? void 0 : table.getDisplayName()) !== null && _table$getDisplayName !== void 0 ? _table$getDisplayName : "");
+	const [error, setError] = useState("");
+	const existingNames = useMemo(() => {
+		const names = getExistingNamesSet(unitId, {
+			univerInstanceService,
+			tableManager,
+			definedNamesService
+		});
+		const currentName = table === null || table === void 0 ? void 0 : table.getDisplayName().toLowerCase();
+		if (currentName) names.delete(currentName);
+		return names;
+	}, [
+		definedNamesService,
+		table,
+		tableManager,
+		unitId,
+		univerInstanceService
+	]);
+	const handleConfirm = () => {
+		const nextName = value.trim();
+		if (!table || nextName === table.getDisplayName()) {
+			onClose();
+			return;
+		}
+		if (!validateSheetTableName(nextName, existingNames).valid) {
+			setError(localeService.t("sheets-table.tableNameError"));
+			return;
+		}
+		commandService.executeCommand(SetSheetTableCommand.id, {
+			unitId,
+			tableId,
+			name: nextName
+		});
+		onClose();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-box-border univer-flex univer-w-full univer-flex-col univer-gap-4 univer-pb-3 univer-pt-2",
+		children: [
+			/* @__PURE__ */ jsx(Input, {
+				size: "middle",
+				value,
+				placeholder: localeService.t("sheets-table.renamePlaceholder"),
+				onChange: (nextValue) => {
+					setValue(nextValue);
+					setError("");
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter") handleConfirm();
+				},
+				autoFocus: true
+			}),
+			error ? /* @__PURE__ */ jsx("div", {
+				className: "-univer-mt-2 univer-text-sm univer-text-red-500",
+				children: error
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-w-full univer-items-center univer-justify-end univer-gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					className: "univer-min-w-16",
+					onClick: onClose,
+					children: localeService.t("sheets-table.cancel")
+				}), /* @__PURE__ */ jsx(Button, {
+					className: "univer-min-w-16",
+					variant: "primary",
+					onClick: handleConfirm,
+					children: localeService.t("sheets-table.confirm")
+				})]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/controllers/sheet-table-component.controller.ts
 let SheetsTableComponentController = class SheetsTableComponentController extends Disposable {
@@ -1013,6 +1154,22 @@ let SheetsTableComponentController = class SheetsTableComponentController extend
 	setCurrentTableFilterInfo(info) {
 		this._currentTableFilterInfo = info;
 	}
+	openOrToggleFilterPanel(info) {
+		const opened = this._contextService.getContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY);
+		if (opened && this._isSameFilterPanelInfo(this._currentTableFilterInfo, info)) {
+			this.closeFilterPanel();
+			return;
+		}
+		this.setCurrentTableFilterInfo(info);
+		if (opened) {
+			var _this$_popupDisposabl;
+			(_this$_popupDisposabl = this._popupDisposable) === null || _this$_popupDisposabl === void 0 || _this$_popupDisposabl.dispose();
+			this._popupDisposable = null;
+			this._openFilterPopup();
+			return;
+		}
+		this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, true);
+	}
 	clearCurrentTableFilterInfo() {
 		this._currentTableFilterInfo = null;
 	}
@@ -1020,7 +1177,7 @@ let SheetsTableComponentController = class SheetsTableComponentController extend
 		return this._currentTableFilterInfo;
 	}
 	_initComponents() {
-		[[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel]].forEach(([key, comp]) => {
+		[[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel], [SHEET_TABLE_RENAME_DIALOG, SheetTableRenameDialog]].forEach(([key, comp]) => {
 			this.disposeWithMe(this._componentManager.register(key, comp));
 		});
 	}
@@ -1049,11 +1206,14 @@ let SheetsTableComponentController = class SheetsTableComponentController extend
 		});
 	}
 	_closeFilterPopup() {
-		var _this$_popupDisposabl;
-		(_this$_popupDisposabl = this._popupDisposable) === null || _this$_popupDisposabl === void 0 || _this$_popupDisposabl.dispose();
+		var _this$_popupDisposabl2;
+		(_this$_popupDisposabl2 = this._popupDisposable) === null || _this$_popupDisposabl2 === void 0 || _this$_popupDisposabl2.dispose();
 		this._popupDisposable = null;
 		this.clearCurrentTableFilterInfo();
 	}
+	_isSameFilterPanelInfo(a, b) {
+		return Boolean(a && a.unitId === b.unitId && a.subUnitId === b.subUnitId && a.tableId === b.tableId && a.column === b.column && a.row === b.row);
+	}
 };
 SheetsTableComponentController = __decorate([
 	__decorateParam(0, Inject(ComponentManager)),
@@ -1071,19 +1231,15 @@ const OpenTableFilterPanelOperation = {
 		if (!params) return false;
 		const { row, col, unitId, subUnitId, tableId } = params;
 		const tableManager = accessor.get(TableManager);
-		const contextService = accessor.get(IContextService);
 		const sheetsTableComponentController = accessor.get(SheetsTableComponentController);
 		if (!tableManager.getTable(unitId, tableId)) return false;
-		if (!contextService.getContextValue("SHEETS_TABLE_FILTER_PANEL_OPENED_KEY")) {
-			sheetsTableComponentController.setCurrentTableFilterInfo({
-				unitId,
-				subUnitId,
-				row,
-				tableId,
-				column: col
-			});
-			contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, true);
-		}
+		sheetsTableComponentController.openOrToggleFilterPanel({
+			unitId,
+			subUnitId,
+			row,
+			tableId,
+			column: col
+		});
 		return true;
 	}
 };
@@ -1165,6 +1321,296 @@ const defaultPluginConfig = {
 	anchorBackgroundColor: "rgb(134,139,156)"
 };
 
+//#endregion
+//#region src/views/widgets/table-controls-util.ts
+const TABLE_CONTROL_MENU_WIDTH = 168;
+const TABLE_CONTROL_MENU_ITEM_HEIGHT = 32;
+const TABLE_CONTROL_MENU_ACTIONS = [
+	"rename",
+	"update-range",
+	"set-theme",
+	"delete"
+];
+function isPointInTableControlRegion(region, x, y) {
+	return x >= region.left && x <= region.left + region.width && y >= region.top && y <= region.top + region.height;
+}
+function hitTestTableControl(regions, x, y) {
+	for (let i = regions.length - 1; i >= 0; i--) if (isPointInTableControlRegion(regions[i], x, y)) return regions[i];
+	return null;
+}
+function buildTableMenuRegions(tableId, left, top) {
+	return TABLE_CONTROL_MENU_ACTIONS.map((action, index) => ({
+		type: "menu-item",
+		tableId,
+		action,
+		left,
+		top: top + index * 32,
+		width: 168,
+		height: 32
+	}));
+}
+function buildCenteredPlusSegments(centerX, centerY, size) {
+	const halfSize = size / 2;
+	return [{
+		fromX: centerX - halfSize,
+		fromY: centerY,
+		toX: centerX + halfSize,
+		toY: centerY
+	}, {
+		fromX: centerX,
+		fromY: centerY - halfSize,
+		toX: centerX,
+		toY: centerY + halfSize
+	}];
+}
+
+//#endregion
+//#region src/views/widgets/table-controls.shape.ts
+const ANCHOR_MIN_WIDTH = 122;
+const ANCHOR_MAX_WIDTH = 240;
+const ANCHOR_PADDING_X = 12;
+const ANCHOR_TOGGLE_WIDTH = 30;
+const ANCHOR_OFFSET_Y = 0;
+const ANCHOR_BORDER = "rgba(0, 0, 0, 0.22)";
+const ANCHOR_DIVIDER = "rgba(0, 0, 0, 0.20)";
+const ANCHOR_TOGGLE_BG_ACTIVE = "rgba(0, 0, 0, 0.12)";
+const MENU_RADIUS = 8;
+const MENU_BORDER = "#d9dee7";
+const MENU_HOVER_BG = "#f1f3f4";
+const INSERT_BUTTON_VISUAL_SIZE = 18;
+const INSERT_BUTTON_PLUS_SIZE = 8;
+var SheetTableControlsShape = class extends Shape {
+	constructor(key, _getSkeleton) {
+		super(key, {
+			evented: true,
+			fill: "rgba(0, 0, 0, 0)",
+			zIndex: 5001
+		});
+		this._getSkeleton = _getSkeleton;
+		_defineProperty(this, "_items", []);
+		_defineProperty(this, "_regions", []);
+		_defineProperty(this, "_openedMenuTableId", null);
+		_defineProperty(this, "_hoveredRegion", null);
+		_defineProperty(this, "_hoveredInsertRegion", null);
+		_defineProperty(this, "_menuLabels", {
+			rename: "Rename table",
+			"update-range": "Update range",
+			"set-theme": "Set theme",
+			delete: "Remove table"
+		});
+	}
+	setItems(items) {
+		this._items = items;
+		this.makeDirty(true);
+	}
+	setMenuLabels(labels) {
+		this._menuLabels = labels;
+		this.makeDirty(true);
+	}
+	setOpenedMenuTableId(tableId) {
+		if (this._openedMenuTableId === tableId) return;
+		this._openedMenuTableId = tableId;
+		this.makeDirty(true);
+	}
+	getOpenedMenuTableId() {
+		return this._openedMenuTableId;
+	}
+	setHoveredRegion(region) {
+		if (this._hoveredRegion === region) return;
+		this._hoveredRegion = region;
+		this.makeDirty(true);
+	}
+	setHoveredInsertRegion(region) {
+		if (this._hoveredInsertRegion === region) return;
+		this._hoveredInsertRegion = region;
+		this.makeDirty(true);
+	}
+	hitTest(x, y) {
+		return hitTestTableControl(this._regions, x, y);
+	}
+	isHit(coord) {
+		return this.hitTest(coord.x, coord.y) != null;
+	}
+	refreshBounds() {
+		const skeleton = this._getSkeleton();
+		if (!skeleton) {
+			this.hide();
+			return;
+		}
+		this.show();
+		this.transformByState({
+			left: 0,
+			top: 0,
+			width: skeleton.rowHeaderWidth + skeleton.columnTotalWidth,
+			height: skeleton.columnHeaderHeight + skeleton.rowTotalHeight
+		});
+	}
+	_draw(ctx) {
+		this._regions = [];
+		const skeleton = this._getSkeleton();
+		if (!skeleton) return;
+		ctx.save();
+		ctx.textBaseline = "middle";
+		for (const item of this._items) this._drawAnchor(ctx, skeleton, item);
+		if (this._hoveredInsertRegion) {
+			var _item$fill;
+			const item = this._items.find((renderItem) => {
+				var _this$_hoveredInsertR;
+				return renderItem.tableId === ((_this$_hoveredInsertR = this._hoveredInsertRegion) === null || _this$_hoveredInsertR === void 0 ? void 0 : _this$_hoveredInsertR.tableId);
+			});
+			this._drawInsertButton(ctx, this._hoveredInsertRegion, (_item$fill = item === null || item === void 0 ? void 0 : item.fill) !== null && _item$fill !== void 0 ? _item$fill : "#355bb7");
+			this._regions.push(this._hoveredInsertRegion);
+		}
+		ctx.restore();
+	}
+	_drawAnchor(ctx, skeleton, item) {
+		const position = skeleton.getNoMergeCellWithCoordByIndex(item.range.startRow, item.range.startColumn);
+		const left = position.startX;
+		const rawTop = position.startY - 28 - ANCHOR_OFFSET_Y;
+		const top = Math.max(0, rawTop);
+		const width = Math.max(ANCHOR_MIN_WIDTH, Math.min(ANCHOR_MAX_WIDTH, item.tableName.length * 8.5 + ANCHOR_PADDING_X * 2 + ANCHOR_TOGGLE_WIDTH));
+		const toggleRegion = {
+			type: "anchor-menu-toggle",
+			tableId: item.tableId,
+			left: left + width - ANCHOR_TOGGLE_WIDTH,
+			top,
+			width: ANCHOR_TOGGLE_WIDTH,
+			height: 28
+		};
+		ctx.save();
+		ctx.translateWithPrecision(left, top);
+		this._drawTopRoundedRect(ctx, width, 28, 14, item.fill, ANCHOR_BORDER);
+		this._drawAnchorToggle(ctx, width, item.text, this._openedMenuTableId === item.tableId || this._isSameRegion(this._hoveredRegion, toggleRegion));
+		ctx.font = `600 13px ${DEFAULT_FONTFACE_PLANE}`;
+		ctx.fillStyle = item.text;
+		ctx.textAlign = "left";
+		ctx.fillText(item.tableName, ANCHOR_PADDING_X, 28 / 2);
+		ctx.restore();
+		this._regions.push({
+			type: "anchor-main",
+			tableId: item.tableId,
+			left,
+			top,
+			width,
+			height: 28
+		});
+		this._regions.push(toggleRegion);
+		if (this._openedMenuTableId === item.tableId) this._drawMenu(ctx, item.tableId, left, top + 28);
+	}
+	_drawAnchorToggle(ctx, anchorWidth, color, active) {
+		const toggleLeft = anchorWidth - ANCHOR_TOGGLE_WIDTH;
+		if (active) this._drawRightTopRoundedRect(ctx, toggleLeft, anchorWidth, 28, 14, ANCHOR_TOGGLE_BG_ACTIVE);
+		ctx.save();
+		ctx.beginPath();
+		ctx.strokeStyle = ANCHOR_DIVIDER;
+		ctx.lineWidth = 1;
+		ctx.moveTo(toggleLeft + .5, 5);
+		ctx.lineTo(toggleLeft + .5, 28 - 5);
+		ctx.stroke();
+		ctx.restore();
+		const centerX = anchorWidth - ANCHOR_TOGGLE_WIDTH / 2;
+		const centerY = 28 / 2;
+		ctx.save();
+		ctx.beginPath();
+		ctx.strokeStyle = color;
+		ctx.lineWidth = 1.6;
+		ctx.lineCap = "round";
+		ctx.moveTo(centerX - 5, centerY - 4);
+		ctx.lineTo(centerX + 5, centerY - 4);
+		ctx.moveTo(centerX - 5, centerY);
+		ctx.lineTo(centerX + 5, centerY);
+		ctx.moveTo(centerX - 5, centerY + 4);
+		ctx.lineTo(centerX + 5, centerY + 4);
+		ctx.stroke();
+		ctx.restore();
+	}
+	_drawTopRoundedRect(ctx, width, height, radius, fill, stroke) {
+		const r = Math.min(radius, width / 2, height);
+		ctx.beginPath();
+		ctx.moveTo(0, height);
+		ctx.lineTo(0, r);
+		ctx.arcTo(0, 0, r, 0, r);
+		ctx.lineTo(width - r, 0);
+		ctx.arcTo(width, 0, width, r, r);
+		ctx.lineTo(width, height);
+		ctx.closePath();
+		ctx.fillStyle = fill;
+		ctx.fill();
+		if (stroke) {
+			ctx.strokeStyle = stroke;
+			ctx.lineWidth = 1;
+			ctx.stroke();
+		}
+	}
+	_drawRightTopRoundedRect(ctx, left, width, height, radius, fill) {
+		const r = Math.min(radius, width - left, height);
+		ctx.save();
+		ctx.beginPath();
+		ctx.moveTo(left, height);
+		ctx.lineTo(left, 0);
+		ctx.lineTo(width - r, 0);
+		ctx.arcTo(width, 0, width, r, r);
+		ctx.lineTo(width, height);
+		ctx.closePath();
+		ctx.fillStyle = fill;
+		ctx.fill();
+		ctx.restore();
+	}
+	_drawMenu(ctx, tableId, left, top) {
+		const regions = buildTableMenuRegions(tableId, left, top);
+		ctx.save();
+		ctx.translateWithPrecision(left, top);
+		Rect.drawWith(ctx, {
+			width: 168,
+			height: regions.length * 32,
+			radius: MENU_RADIUS,
+			fill: "#fff",
+			stroke: MENU_BORDER
+		});
+		ctx.restore();
+		for (const region of regions) {
+			if (this._isSameRegion(this._hoveredRegion, region)) {
+				ctx.save();
+				ctx.fillStyle = MENU_HOVER_BG;
+				ctx.fillRectByPrecision(region.left, region.top, region.width, region.height);
+				ctx.restore();
+			}
+			ctx.save();
+			ctx.font = `12px ${DEFAULT_FONTFACE_PLANE}`;
+			ctx.fillStyle = region.action === "delete" ? "#d92d20" : "#344054";
+			ctx.textAlign = "left";
+			ctx.fillText(this._menuLabels[region.action], region.left + 12, region.top + region.height / 2);
+			ctx.restore();
+		}
+		this._regions.push(...regions);
+	}
+	_drawInsertButton(ctx, region, fill) {
+		const centerX = region.left + region.width / 2;
+		const centerY = region.top + region.height / 2;
+		const radius = INSERT_BUTTON_VISUAL_SIZE / 2;
+		ctx.save();
+		ctx.beginPath();
+		ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
+		ctx.fillStyle = "#fff";
+		ctx.fill();
+		ctx.strokeStyle = fill;
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.strokeStyle = fill;
+		ctx.lineWidth = 1;
+		ctx.lineCap = "round";
+		for (const segment of buildCenteredPlusSegments(centerX, centerY, INSERT_BUTTON_PLUS_SIZE)) {
+			ctx.moveTo(segment.fromX, segment.fromY);
+			ctx.lineTo(segment.toX, segment.toY);
+		}
+		ctx.stroke();
+		ctx.restore();
+	}
+	_isSameRegion(a, b) {
+		return Boolean(a && a.type === b.type && a.tableId === b.tableId && a.action === b.action && a.index === b.index);
+	}
+};
+
 //#endregion
 //#region src/controllers/sheet-table-theme-ui.controller.ts
 let SheetTableThemeUIController = class SheetTableThemeUIController extends Disposable {
@@ -1187,372 +1633,364 @@ let SheetTableThemeUIController = class SheetTableThemeUIController extends Disp
 SheetTableThemeUIController = __decorate([__decorateParam(0, Inject(ICommandService))], SheetTableThemeUIController);
 
 //#endregion
-//#region src/views/components/SheetTableAnchor.tsx
-const SheetTableAnchor = () => {
-	var _tableConfig$anchorHe, _tableConfig$anchorBa;
-	const [inputFocusId, setInputFocusId] = useState("");
-	const [inputValue, setInputValue] = useState("");
-	const sidebarService = useDependency(ISidebarService);
-	const [openStates, setOpenStates] = useState({});
-	const injector = useDependency(Injector);
-	const anchorPosition = useObservable(useDependency(SheetTableAnchorController).anchorPosition$);
-	const commandService = useDependency(ICommandService);
-	const univerInstanceService = useDependency(IUniverInstanceService);
-	const workbookPermissionInitState = useObservable(useDependency(WorkbookPermissionService).unitPermissionInitStateChange$, false);
-	const tableManager = useDependency(TableManager);
-	const rangeThemeModel = useDependency(SheetRangeThemeModel);
-	const tableRefresh$ = useObservable(useDependency(SheetTableThemeUIController).refreshTable$);
-	const localeService = useDependency(LocaleService);
-	const selections = useObservable(useDependency(SheetsSelectionsService).selectionChanged$, [{
-		range: cellToRange(0, 0),
-		primary: null
-	}]);
-	const [, setRefresh] = useState(Math.random());
-	const tableConfig = useDependency(IConfigService).getConfig(SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY);
-	const anchorHeight = (_tableConfig$anchorHe = tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.anchorHeight) !== null && _tableConfig$anchorHe !== void 0 ? _tableConfig$anchorHe : 24;
-	const anchorBackgroundColor = (_tableConfig$anchorBa = tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.anchorBackgroundColor) !== null && _tableConfig$anchorBa !== void 0 ? _tableConfig$anchorBa : "rgb(53,91,183)";
-	const updateOpenState = (tableId, isOpen) => {
-		setOpenStates((prev) => ({
-			...prev,
-			[tableId]: isOpen
-		}));
-	};
-	useEffect(() => {
-		setRefresh(Math.random());
-	}, [tableRefresh$]);
-	if (!(anchorPosition === null || anchorPosition === void 0 ? void 0 : anchorPosition.length)) return null;
-	const target = getSheetCommandTarget(univerInstanceService);
-	if (!target) return null;
-	const { unitId, subUnitId } = target;
-	const handleChangeTableName = (tableId, name) => {
-		var _tableManager$getTabl;
-		if (((_tableManager$getTabl = tableManager.getTableById(unitId, tableId)) === null || _tableManager$getTabl === void 0 ? void 0 : _tableManager$getTabl.getDisplayName()) === name) {
-			setInputFocusId("");
-			setInputValue("");
-			return;
-		}
-		commandService.executeCommand(SetSheetTableCommand.id, {
-			tableId,
-			unitId,
-			name
-		});
-		setInputValue("");
-		setInputFocusId("");
-	};
-	const handleChangeRange = async (tableId) => {
-		const table = tableManager.getTableById(unitId, tableId);
-		if (!table) return;
-		const selection = await openRangeSelector(injector, unitId, subUnitId, table.getRange(), tableId);
-		if (!selection) return;
-		commandService.executeCommand(SetSheetTableCommand.id, {
-			tableId,
-			unitId,
-			updateRange: { newRange: selection.range }
-		});
-	};
-	if (!workbookPermissionInitState) return null;
-	return /* @__PURE__ */ jsx("div", {
-		className: "univer-absolute univer-z-50 univer-size-0",
-		children: anchorPosition.map((item) => {
-			var _rangeTheme$getHeader, _rangeTheme$getHeader2, _rangeTheme$getHeader3, _rangeTheme$getHeader4, _openStates$item$tabl;
-			const table = tableManager.getTableById(unitId, item.tableId);
-			if (!table) return null;
-			const rangeTheme = rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId());
-			const headerBgColor = (_rangeTheme$getHeader = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader2 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader2 === void 0 || (_rangeTheme$getHeader2 = _rangeTheme$getHeader2.bg) === null || _rangeTheme$getHeader2 === void 0 ? void 0 : _rangeTheme$getHeader2.rgb) !== null && _rangeTheme$getHeader !== void 0 ? _rangeTheme$getHeader : anchorBackgroundColor;
-			const headerTextColor = (_rangeTheme$getHeader3 = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader4 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader4 === void 0 || (_rangeTheme$getHeader4 = _rangeTheme$getHeader4.cl) === null || _rangeTheme$getHeader4 === void 0 ? void 0 : _rangeTheme$getHeader4.rgb) !== null && _rangeTheme$getHeader3 !== void 0 ? _rangeTheme$getHeader3 : "rgb(255, 255, 255)";
-			const tableRange = table.getRange();
-			if (!(selections === null || selections === void 0 ? void 0 : selections.length)) return null;
-			const lastRange = selections[selections.length - 1].range;
-			const shouldHidden = !Rectangle.intersects(tableRange, lastRange) && item.y <= 20;
-			return /* @__PURE__ */ jsxs("div", {
-				className: clsx("univer-shadow-xs univer-absolute univer-box-border univer-cursor-pointer univer-items-center univer-rounded-xl univer-px-2", borderClassName, {
-					"univer-flex": !shouldHidden,
-					"univer-hidden": shouldHidden
-				}),
-				style: {
-					left: item.x,
-					top: Math.max(item.y, 0),
-					backgroundColor: headerBgColor,
-					color: headerTextColor,
-					borderWidth: "0.5px",
-					height: anchorHeight ? `${anchorHeight}px` : "24px"
-				},
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "univer-text-nowrap",
-					children: inputFocusId === item.tableId ? /* @__PURE__ */ jsx(Input, {
-						className: "univer-h-[18px] univer-min-w-16 univer-rounded-none",
-						inputClass: "univer-h-[18px] univer-w-[80px]",
-						value: inputValue,
-						onChange: (v) => setInputValue(v),
-						onBlur: () => handleChangeTableName(item.tableId, inputValue),
-						onKeyDown: (e) => {
-							if (e.key === "Enter") handleChangeTableName(item.tableId, inputValue);
-						},
-						autoFocus: inputFocusId === item.tableId
-					}) : /* @__PURE__ */ jsx("div", {
-						className: "univer-h-[18px] univer-max-w-24 univer-truncate univer-text-sm",
-						children: item.tableName
-					})
-				}), /* @__PURE__ */ jsx(Dropdown, {
-					align: "start",
-					overlay: /* @__PURE__ */ jsxs("div", {
-						className: "univer-py-2",
-						children: [
-							/* @__PURE__ */ jsxs("div", {
-								className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
-								onClick: () => {
-									setInputFocusId(item.tableId);
-									setInputValue(item.tableName);
-								},
-								children: [/* @__PURE__ */ jsx(RenameIcon, {}), localeService.t("sheets-table.rename")]
-							}),
-							/* @__PURE__ */ jsx("div", { className: "univer-my-1 univer-h-px univer-w-full univer-bg-gray-200" }),
-							/* @__PURE__ */ jsxs("div", {
-								onClick: () => handleChangeRange(item.tableId),
-								className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
-								children: [/* @__PURE__ */ jsx(GridOutlineIcon, {}), localeService.t("sheets-table.updateRange")]
-							}),
-							/* @__PURE__ */ jsxs("div", {
-								className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
-								onClick: () => {
-									updateOpenState(item.tableId, false);
-									const table = tableManager.getTableById(unitId, item.tableId);
-									if (!table) return;
-									const tableConfig = table.getTableConfig();
-									const sidebarConfig = {
-										id: SHEET_TABLE_THEME_PANEL_ID,
-										header: { title: localeService.t("sheets-table.tableStyle") },
-										children: {
-											label: SHEET_TABLE_THEME_PANEL,
-											oldConfig: tableConfig,
-											unitId,
-											subUnitId,
-											tableId: item.tableId
-										},
-										width: 330
-									};
-									sidebarService.open(sidebarConfig);
-								},
-								children: [/* @__PURE__ */ jsx(PaintBucketDoubleIcon, { extend: { colorChannel1: "rgb(53,91,183)" } }), localeService.t("sheets-table.setTheme")]
-							}),
-							/* @__PURE__ */ jsx("div", { className: "univer-my-1 univer-h-px univer-w-full univer-bg-gray-200" }),
-							/* @__PURE__ */ jsxs("div", {
-								className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
-								onClick: () => {
-									updateOpenState(item.tableId, false);
-									commandService.executeCommand(DeleteSheetTableCommand.id, {
-										tableId: item.tableId,
-										subUnitId,
-										unitId
-									});
-								},
-								children: [/* @__PURE__ */ jsx(DeleteIcon, { className: "univer-mr-2" }), localeService.t("sheets-table.removeTable")]
-							})
-						]
-					}),
-					open: (_openStates$item$tabl = openStates[item.tableId]) !== null && _openStates$item$tabl !== void 0 ? _openStates$item$tabl : false,
-					onOpenChange: (isOpen) => {
-						updateOpenState(item.tableId, isOpen);
-					},
-					children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MoreDownIcon, {}) })
-				}, item.tableId)]
-			}, item.tableId);
-		})
-	});
-};
-
-//#endregion
-//#region src/controllers/sheet-table-anchor.controller.ts
-let SheetTableAnchorController = class SheetTableAnchorController extends Disposable {
-	constructor(_context, _injector, _sheetSkeletonManagerService, _renderManagerService, _commandService, _univerInstanceService, _uiPartsService, _tableManager, _scrollManagerService, _workbookPermissionService, _permissionService) {
+//#region src/controllers/sheet-table-controls-render.controller.ts
+const TABLE_CONTROLS_LAYER_INDEX = 5002;
+const TABLE_CONTROL_GAP_ROW = 0;
+const TABLE_RENDER_REFRESH_COMMANDS = new Set([SetScrollOperation.id, SetZoomRatioOperation.id]);
+function isSameTopGap(left, right) {
+	if (left === null || right === null) return left === right;
+	return left.size === right.size && left.color === right.color && left.stripeColor === right.stripeColor;
+}
+let SheetTableControlsRenderController = class SheetTableControlsRenderController extends Disposable {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _commandService, _tableManager, _rangeThemeModel, _workbookPermissionService, _permissionService, _sheetsSelectionsService, _selectionRenderService, _sheetTableThemeUIController, _localeService, _dialogService, _sidebarService) {
 		super();
 		this._context = _context;
 		this._injector = _injector;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._renderManagerService = _renderManagerService;
 		this._commandService = _commandService;
-		this._univerInstanceService = _univerInstanceService;
-		this._uiPartsService = _uiPartsService;
 		this._tableManager = _tableManager;
-		this._scrollManagerService = _scrollManagerService;
+		this._rangeThemeModel = _rangeThemeModel;
 		this._workbookPermissionService = _workbookPermissionService;
 		this._permissionService = _permissionService;
-		_defineProperty(this, "_anchorVisible$", new BehaviorSubject(true));
-		_defineProperty(this, "_timer", void 0);
-		_defineProperty(this, "_anchorPosition$", new BehaviorSubject([]));
-		_defineProperty(this, "anchorPosition$", this._anchorPosition$.asObservable());
-		this._initUI();
-		this._initListener();
-		this._initTableAnchor();
+		this._sheetsSelectionsService = _sheetsSelectionsService;
+		this._selectionRenderService = _selectionRenderService;
+		this._sheetTableThemeUIController = _sheetTableThemeUIController;
+		this._localeService = _localeService;
+		this._dialogService = _dialogService;
+		this._sidebarService = _sidebarService;
+		_defineProperty(this, "_shape", void 0);
+		_defineProperty(this, "_topGapBaseBySkeleton", /* @__PURE__ */ new WeakMap());
+		this._shape = new SheetTableControlsShape("SheetTableControlsShape", () => this._sheetSkeletonManagerService.getCurrentSkeleton() || null);
+		this._initShape();
+		this._initRefresh();
+		this._refresh();
 	}
-	_initUI() {
-		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(SheetTableAnchor, this._injector)));
+	_initShape() {
+		var _this$_context$compon, _this$_context$compon2;
+		this._context.scene.addObjects([this._shape], TABLE_CONTROLS_LAYER_INDEX);
+		this.disposeWithMe(toDisposable(() => {
+			this._context.scene.removeObjects([this._shape]);
+		}));
+		this.disposeWithMe(this._shape.onPointerMove$.subscribeEvent((evt, state) => {
+			this._handlePointerMove(evt, state);
+		}));
+		this.disposeWithMe(this._shape.onPointerLeave$.subscribeEvent((_evt, state) => {
+			this._handlePointerLeave(state);
+		}));
+		this.disposeWithMe(this._shape.onPointerDown$.subscribeEvent((evt, state) => {
+			this._handlePointerDown(evt, state);
+		}));
+		this.disposeWithMe((_this$_context$compon = (_this$_context$compon2 = this._context.components.get(SHEET_VIEW_KEY.MAIN)) === null || _this$_context$compon2 === void 0 ? void 0 : _this$_context$compon2.onPointerMove$.subscribeEvent((evt) => {
+			const point = this._getLocalPoint(evt);
+			const insertRegion = this._getInsertRegionFromPoint(point.x, point.y);
+			this._shape.setHoveredInsertRegion(insertRegion);
+		})) !== null && _this$_context$compon !== void 0 ? _this$_context$compon : toDisposable(() => {}));
 	}
-	_initListener() {
-		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
-			if (command.id === SetZoomRatioOperation.id || command.id === SetScrollOperation.id) {
-				this._anchorVisible$.next(false);
-				if (this._timer) clearTimeout(this._timer);
-				this._timer = setTimeout(() => {
-					this._anchorVisible$.next(true);
-				}, 300);
+	_initRefresh() {
+		const commandExecuted$ = fromCallback(this._commandService.onCommandExecuted.bind(this._commandService)).pipe(filter(([command]) => {
+			if (command.type === CommandType.OPERATION && TABLE_RENDER_REFRESH_COMMANDS.has(command.id)) {
+				this._closeFloatingControls();
+				return true;
 			}
+			return command.type === CommandType.MUTATION || command.type === CommandType.COMMAND;
+		}));
+		this.disposeWithMe(merge$1(this._context.unit.activeSheet$, this._sheetSkeletonManagerService.currentSkeleton$, this._tableManager.tableAdd$, this._tableManager.tableDelete$, this._tableManager.tableNameChanged$, this._tableManager.tableRangeChanged$, this._tableManager.tableThemeChanged$, this._sheetTableThemeUIController.refreshTable$, this._workbookPermissionService.unitPermissionInitStateChange$, this._permissionService.permissionPointUpdate$, this._sheetsSelectionsService.selectionChanged$, commandExecuted$).subscribe(() => {
+			this._closeFloatingControls();
+			this._refresh();
 		}));
 	}
-	_initTableAnchor() {
-		this.disposeWithMe(merge$1(this._context.unit.activeSheet$, this._sheetSkeletonManagerService.currentSkeleton$, this._scrollManagerService.validViewportScrollInfo$, this._tableManager.tableAdd$, this._tableManager.tableDelete$, this._tableManager.tableNameChanged$, this._tableManager.tableRangeChanged$, this._tableManager.tableThemeChanged$, this._workbookPermissionService.unitPermissionInitStateChange$.pipe(filter((v) => v)), this._permissionService.permissionPointUpdate$.pipe(debounceTime(300)), this._anchorVisible$).subscribe(() => {
-			var _this$_permissionServ;
-			if (!this._anchorVisible$.getValue()) {
-				this._anchorPosition$.next([]);
-				return;
-			}
-			const workbook = this._context.unit;
-			const worksheet = workbook.getActiveSheet();
-			const subUnitId = worksheet === null || worksheet === void 0 ? void 0 : worksheet.getSheetId();
-			const tables = this._tableManager.getTableList(this._context.unitId).filter((table) => {
-				return table.subUnitId === subUnitId;
+	_refresh() {
+		const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
+		const worksheet = this._context.unit.getActiveSheet();
+		if (!skeleton || !worksheet || !this._canEditWorkbook()) {
+			this._shape.setItems([]);
+			this._shape.refreshBounds();
+			this._context.scene.makeDirty();
+			return;
+		}
+		this._syncTopTableGap(skeleton);
+		this._shape.setMenuLabels({
+			rename: this._localeService.t("sheets-table.rename"),
+			"update-range": this._localeService.t("sheets-table.updateRange"),
+			"set-theme": this._localeService.t("sheets-table.setTheme"),
+			delete: this._localeService.t("sheets-table.removeTable")
+		});
+		const unitId = this._context.unit.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		const items = this._tableManager.getTablesBySubunitId(unitId, subUnitId).map((table) => {
+			var _rangeTheme$getHeader, _rangeTheme$getHeader2, _rangeTheme$getHeader3, _rangeTheme$getHeader4;
+			const rangeTheme = this._rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId());
+			return {
+				tableId: table.getId(),
+				tableName: table.getDisplayName(),
+				range: table.getRange(),
+				fill: (_rangeTheme$getHeader = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader2 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader2 === void 0 || (_rangeTheme$getHeader2 = _rangeTheme$getHeader2.bg) === null || _rangeTheme$getHeader2 === void 0 ? void 0 : _rangeTheme$getHeader2.rgb) !== null && _rangeTheme$getHeader !== void 0 ? _rangeTheme$getHeader : "rgb(53,91,183)",
+				text: (_rangeTheme$getHeader3 = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader4 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader4 === void 0 || (_rangeTheme$getHeader4 = _rangeTheme$getHeader4.cl) === null || _rangeTheme$getHeader4 === void 0 ? void 0 : _rangeTheme$getHeader4.rgb) !== null && _rangeTheme$getHeader3 !== void 0 ? _rangeTheme$getHeader3 : "rgb(255,255,255)"
+			};
+		});
+		this._shape.setItems(items);
+		this._shape.refreshBounds();
+		this._shape.makeDirty(true);
+		this._context.scene.makeDirty();
+	}
+	_canEditWorkbook() {
+		var _this$_permissionServ;
+		const unitId = this._context.unit.getUnitId();
+		return ((_this$_permissionServ = this._permissionService.getPermissionPoint(new WorkbookEditablePermission(unitId).id)) === null || _this$_permissionServ === void 0 ? void 0 : _this$_permissionServ.value) !== false;
+	}
+	_handlePointerMove(evt, state) {
+		const point = this._getLocalPoint(evt);
+		const hit = this._shape.hitTest(point.x, point.y);
+		const insertRegion = this._isInsertHit(hit) ? hit : hit ? null : this._getInsertRegionFromPoint(point.x, point.y);
+		const activeHit = hit !== null && hit !== void 0 ? hit : insertRegion;
+		this._shape.setHoveredRegion(this._isInsertHit(hit) ? null : hit);
+		this._shape.setHoveredInsertRegion(insertRegion);
+		if (activeHit) {
+			state.stopPropagation();
+			this._context.scene.setCursor(CURSOR_TYPE.POINTER);
+		} else this._context.scene.resetCursor();
+	}
+	_isInsertHit(hit) {
+		return (hit === null || hit === void 0 ? void 0 : hit.type) === "insert-row" || (hit === null || hit === void 0 ? void 0 : hit.type) === "insert-column";
+	}
+	_handlePointerLeave(state) {
+		state.stopPropagation();
+		this._shape.setHoveredRegion(null);
+		this._shape.setHoveredInsertRegion(null);
+		this._context.scene.resetCursor();
+	}
+	_handlePointerDown(evt, state) {
+		var _this$_shape$hitTest;
+		if (evt.button === 2) return;
+		const point = this._getLocalPoint(evt);
+		const hit = (_this$_shape$hitTest = this._shape.hitTest(point.x, point.y)) !== null && _this$_shape$hitTest !== void 0 ? _this$_shape$hitTest : this._getInsertRegionFromPoint(point.x, point.y);
+		if (!hit) {
+			this._closeFloatingControls();
+			return;
+		}
+		state.stopPropagation();
+		evt.stopPropagation();
+		evt.preventDefault();
+		this._handleHit(hit);
+	}
+	_handleHit(hit) {
+		const worksheet = this._context.unit.getActiveSheet();
+		if (!worksheet) return;
+		const unitId = this._context.unit.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		if (hit.type === "anchor-menu-toggle" || hit.type === "anchor-main") {
+			this._shape.setOpenedMenuTableId(this._shape.getOpenedMenuTableId() === hit.tableId ? null : hit.tableId);
+			return;
+		}
+		if (hit.type === "insert-row") {
+			this._commandService.executeCommand(SheetTableInsertRowAtCommand.id, {
+				unitId,
+				subUnitId,
+				tableId: hit.tableId,
+				index: hit.index,
+				count: 1
 			});
-			const renderUnit = this._renderManagerService.getRenderById(this._context.unitId);
-			if (!renderUnit) {
-				this._anchorPosition$.next([]);
-				return;
-			}
-			if (!((_this$_permissionServ = this._permissionService.getPermissionPoint(new WorkbookEditablePermission(workbook.getUnitId()).id)) === null || _this$_permissionServ === void 0 ? void 0 : _this$_permissionServ.value)) {
-				this._anchorPosition$.next([]);
-				return;
-			}
-			const tableInfos = tables.reduce((acc, table) => {
-				const { startRow, startColumn } = table.range;
-				const sheetSkeletonManagerService = renderUnit.with(SheetSkeletonManagerService);
-				const sheetObject = getSheetObject(this._univerInstanceService, this._renderManagerService);
-				if (!sheetObject) return acc;
-				const { scene } = sheetObject;
-				const viewport = scene.getViewport(SHEET_VIEWPORT_KEY.VIEW_MAIN);
-				if (!viewport) return acc;
-				const scaleX = scene === null || scene === void 0 ? void 0 : scene.scaleX;
-				const scaleY = scene === null || scene === void 0 ? void 0 : scene.scaleY;
-				const scrollXY = scene === null || scene === void 0 ? void 0 : scene.getViewportScrollXY(viewport);
-				if (!scaleX || !scene || !scaleY || !scrollXY) return acc;
-				const skeleton = sheetSkeletonManagerService.getCurrentSkeleton();
-				if (!skeleton) return acc;
-				const position = skeleton.getNoMergeCellWithCoordByIndex(startRow, startColumn);
-				const startX = convertTransformToOffsetX(position.startX, scaleX, scrollXY);
-				const startY = convertTransformToOffsetY(position.startY, scaleY, scrollXY) - 25 - 4;
-				if (startY >= -10 && startX >= 45) acc.push({
-					x: startX,
-					y: startY,
-					tableId: table.id,
-					tableName: table.name
+			this._closeFloatingControls();
+			return;
+		}
+		if (hit.type === "insert-column") {
+			this._commandService.executeCommand(SheetTableInsertColumnAtCommand.id, {
+				unitId,
+				subUnitId,
+				tableId: hit.tableId,
+				index: hit.index,
+				count: 1
+			});
+			this._closeFloatingControls();
+			return;
+		}
+		if (hit.type !== "menu-item") return;
+		switch (hit.action) {
+			case "rename":
+				this._openRenameDialog(unitId, hit.tableId);
+				break;
+			case "update-range":
+				this._openRangeSelector(unitId, subUnitId, hit.tableId);
+				break;
+			case "set-theme":
+				this._openThemePanel(unitId, subUnitId, hit.tableId);
+				break;
+			case "delete":
+				this._commandService.executeCommand(DeleteSheetTableCommand.id, {
+					tableId: hit.tableId,
+					subUnitId,
+					unitId
 				});
-				return acc;
-			}, []);
-			this._anchorPosition$.next(tableInfos);
-		}));
+				break;
+		}
+		this._closeFloatingControls();
 	}
-};
-SheetTableAnchorController = __decorate([
-	__decorateParam(1, Inject(Injector)),
-	__decorateParam(2, Inject(SheetSkeletonManagerService)),
-	__decorateParam(3, IRenderManagerService),
-	__decorateParam(4, ICommandService),
-	__decorateParam(5, IUniverInstanceService),
-	__decorateParam(6, IUIPartsService),
-	__decorateParam(7, Inject(TableManager)),
-	__decorateParam(8, Inject(SheetScrollManagerService)),
-	__decorateParam(9, Inject(WorkbookPermissionService)),
-	__decorateParam(10, Inject(IPermissionService))
-], SheetTableAnchorController);
-
-//#endregion
-//#region src/views/widgets/drawings.ts
-const BUTTON_VIEWPORT = 16;
-const PIVOT_BUTTON_EMPTY = new Path2D("M3.30363 3C2.79117 3 2.51457 3.60097 2.84788 3.99024L6.8 8.60593V12.5662C6.8 12.7184 6.8864 12.8575 7.02289 12.9249L8.76717 13.7863C8.96655 13.8847 9.2 13.7396 9.2 13.5173V8.60593L13.1521 3.99024C13.4854 3.60097 13.2088 3 12.6964 3H3.30363Z");
-var TableButton = class {
-	static drawNoSetting(ctx, size, fgColor, bgColor) {
-		ctx.save();
-		Rect.drawWith(ctx, {
-			radius: 2,
-			width: BUTTON_VIEWPORT,
-			height: BUTTON_VIEWPORT,
-			fill: bgColor
+	_openRenameDialog(unitId, tableId) {
+		this._dialogService.open({
+			id: SHEET_TABLE_RENAME_DIALOG_ID,
+			title: { title: this._localeService.t("sheets-table.rename") },
+			draggable: true,
+			destroyOnClose: true,
+			mask: true,
+			children: { label: {
+				name: SHEET_TABLE_RENAME_DIALOG,
+				props: {
+					unitId,
+					tableId,
+					onClose: () => this._dialogService.close(SHEET_TABLE_RENAME_DIALOG_ID)
+				}
+			} },
+			width: 360,
+			onClose: () => this._dialogService.close(SHEET_TABLE_RENAME_DIALOG_ID)
 		});
-		ctx.lineCap = "square";
-		ctx.strokeStyle = fgColor;
-		ctx.scale(size / BUTTON_VIEWPORT, size / BUTTON_VIEWPORT);
-		ctx.beginPath();
-		ctx.lineWidth = 1;
-		ctx.lineCap = "round";
-		ctx.moveTo(3, 4);
-		ctx.lineTo(13, 4);
-		ctx.moveTo(4.5, 8);
-		ctx.lineTo(11.5, 8);
-		ctx.moveTo(6, 12);
-		ctx.lineTo(10, 12);
-		ctx.stroke();
-		ctx.restore();
 	}
-	static drawIconByPath(ctx, pathData, fgColor, bgColor) {
-		ctx.save();
-		ctx.strokeStyle = fgColor;
-		ctx.fillStyle = bgColor;
-		Rect.drawWith(ctx, {
-			radius: 2,
-			width: BUTTON_VIEWPORT,
-			height: BUTTON_VIEWPORT,
-			fill: bgColor
+	async _openRangeSelector(unitId, subUnitId, tableId) {
+		const table = this._tableManager.getTableById(unitId, tableId);
+		if (!table) return;
+		const selection = await openRangeSelector(this._injector, unitId, subUnitId, table.getRange(), tableId);
+		if (!selection) return;
+		this._commandService.executeCommand(SetSheetTableCommand.id, {
+			tableId,
+			unitId,
+			updateRange: { newRange: selection.range }
 		});
-		pathData.forEach((d) => {
-			const path = new Path2D(d);
-			ctx.fillStyle = fgColor;
-			ctx.fill(path, "evenodd");
+	}
+	_openThemePanel(unitId, subUnitId, tableId) {
+		const table = this._tableManager.getTableById(unitId, tableId);
+		if (!table) return;
+		this._sidebarService.open({
+			id: SHEET_TABLE_THEME_PANEL_ID,
+			header: { title: this._localeService.t("sheets-table.tableStyle") },
+			children: {
+				label: SHEET_TABLE_THEME_PANEL,
+				oldConfig: table.getTableConfig(),
+				unitId,
+				subUnitId,
+				tableId
+			},
+			width: 330
 		});
-		ctx.restore();
+	}
+	_getInsertRegionFromPoint(x, y) {
+		const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
+		const worksheet = this._context.unit.getActiveSheet();
+		if (!skeleton || !worksheet) return null;
+		const unitId = this._context.unit.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		const tables = this._tableManager.getTablesBySubunitId(unitId, subUnitId);
+		for (const table of tables) {
+			const range = table.getRange();
+			const tableBounds = this._getRangeBounds(skeleton, range);
+			if (x < tableBounds.left || x > tableBounds.right || y < tableBounds.top || y > tableBounds.bottom) continue;
+			if (y > this._getRangeBounds(skeleton, {
+				...range,
+				endRow: range.startRow
+			}).bottom) for (let row = range.startRow + 1; row <= range.endRow; row++) {
+				const cell = skeleton.getNoMergeCellWithCoordByIndex(row, range.startColumn);
+				if (y >= cell.startY && y <= cell.endY) return {
+					type: "insert-row",
+					tableId: table.getId(),
+					index: row + 1,
+					left: tableBounds.left - 22 / 2,
+					top: cell.endY - 22 / 2,
+					width: 22,
+					height: 22
+				};
+			}
+		}
+		return null;
+	}
+	_getRangeBounds(skeleton, range) {
+		const startCell = skeleton.getNoMergeCellWithCoordByIndex(range.startRow, range.startColumn);
+		const endCell = skeleton.getNoMergeCellWithCoordByIndex(range.endRow, range.endColumn);
+		return {
+			left: startCell.startX,
+			top: startCell.startY,
+			right: endCell.endX,
+			bottom: endCell.endY
+		};
+	}
+	_syncTopTableGap(skeleton) {
+		const worksheet = this._context.unit.getActiveSheet();
+		if (!worksheet) return;
+		const unitId = this._context.unit.getUnitId();
+		const subUnitId = worksheet.getSheetId();
+		const hasTopTable = this._tableManager.getTablesBySubunitId(unitId, subUnitId).some((table) => table.getRange().startRow === 0);
+		const current = skeleton.gapConfig;
+		const rowGaps = { ...current.rowGaps };
+		const previousTopGap = rowGaps[TABLE_CONTROL_GAP_ROW] ? { ...rowGaps[TABLE_CONTROL_GAP_ROW] } : null;
+		let shouldSync = false;
+		if (hasTopTable) {
+			var _baseGap$size;
+			if (!this._topGapBaseBySkeleton.has(skeleton)) this._topGapBaseBySkeleton.set(skeleton, rowGaps[TABLE_CONTROL_GAP_ROW] ? { ...rowGaps[TABLE_CONTROL_GAP_ROW] } : null);
+			const baseGap = this._topGapBaseBySkeleton.get(skeleton);
+			rowGaps[TABLE_CONTROL_GAP_ROW] = {
+				...baseGap !== null && baseGap !== void 0 ? baseGap : rowGaps[TABLE_CONTROL_GAP_ROW],
+				size: ((_baseGap$size = baseGap === null || baseGap === void 0 ? void 0 : baseGap.size) !== null && _baseGap$size !== void 0 ? _baseGap$size : 0) + 32
+			};
+			shouldSync = true;
+		} else if (this._topGapBaseBySkeleton.has(skeleton)) {
+			const baseGap = this._topGapBaseBySkeleton.get(skeleton);
+			if (baseGap) rowGaps[TABLE_CONTROL_GAP_ROW] = { ...baseGap };
+			else delete rowGaps[TABLE_CONTROL_GAP_ROW];
+			this._topGapBaseBySkeleton.delete(skeleton);
+			shouldSync = true;
+		}
+		if (!shouldSync) return;
+		if (isSameTopGap(previousTopGap, rowGaps[TABLE_CONTROL_GAP_ROW] ? { ...rowGaps[TABLE_CONTROL_GAP_ROW] } : null)) return;
+		skeleton.setGapConfig({
+			...current,
+			rowGaps
+		});
+		this._refreshSelections();
+	}
+	_refreshSelections() {
+		this._selectionRenderService.resetSelectionsByModelData(this._sheetsSelectionsService.getCurrentSelections());
+	}
+	_closeFloatingControls() {
+		this._shape.setOpenedMenuTableId(null);
+		this._shape.setHoveredInsertRegion(null);
+		this._shape.setHoveredRegion(null);
+	}
+	_getLocalPoint(evt) {
+		const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
+		if (skeleton) return getTransformCoord(evt.offsetX, evt.offsetY, this._context.scene, skeleton);
+		return {
+			x: evt.offsetX,
+			y: evt.offsetY
+		};
 	}
 };
-
-//#endregion
-//#region src/views/widgets/icons.ts
-/**
-* Copyright 2023-present DreamNum Co., Ltd.
-*
-* Licensed under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-*
-*     http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
-* limitations under the License.
-*/
-const filterPartial = ["M3.30363 3C2.79117 3 2.51457 3.60097 2.84788 3.99024L6.8 8.60593V12.5662C6.8 12.7184 6.8864 12.8575 7.02289 12.9249L8.76717 13.7863C8.96655 13.8847 9.2 13.7396 9.2 13.5173V8.60593L13.1521 3.99024C13.4854 3.60097 13.2088 3 12.6964 3H3.30363Z"];
-const filteredSortAsc = ["M12.4008 13.1831C12.6907 13.1831 12.9258 12.9481 12.9258 12.6581V4.60873L14.013 5.69597C14.218 5.901 14.5505 5.901 14.7555 5.69597C14.9605 5.49094 14.9605 5.15853 14.7555 4.95351L12.7721 2.97017C12.5671 2.76515 12.2347 2.76515 12.0297 2.97017L10.0463 4.95351C9.84132 5.15853 9.84132 5.49094 10.0463 5.69597C10.2514 5.901 10.5838 5.901 10.7888 5.69597L11.8758 4.60901V12.6581C11.8758 12.9481 12.1108 13.1831 12.4008 13.1831Z", "M1.28069 4.85447C0.842195 4.33439 1.21191 3.5391 1.89218 3.5391H8.59333C9.2736 3.5391 9.64331 4.33439 9.20482 4.85447L6.51052 8.0501V11.6601C6.51052 12.2245 5.94174 12.6114 5.41683 12.404L4.48092 12.0343C4.1756 11.9136 3.97498 11.6187 3.97498 11.2904V8.0501L1.28069 4.85447Z"];
-const filteredSortDesc = ["M12.4008 2.81641C12.6907 2.81641 12.9258 3.05146 12.9258 3.34141V11.3908L14.013 10.3036C14.218 10.0986 14.5505 10.0986 14.7555 10.3036C14.9605 10.5086 14.9605 10.841 14.7555 11.046L12.7721 13.0294C12.5671 13.2344 12.2347 13.2344 12.0297 13.0294L10.0463 11.046C9.84132 10.841 9.84132 10.5086 10.0463 10.3036C10.2514 10.0986 10.5838 10.0986 10.7888 10.3036L11.8758 11.3905V3.34141C11.8758 3.05146 12.1108 2.81641 12.4008 2.81641Z", "M1.28069 4.85444C0.842195 4.33435 1.21191 3.53906 1.89218 3.53906H8.59333C9.2736 3.53906 9.64331 4.33435 9.20482 4.85443L6.51052 8.05006V11.6601C6.51052 12.2245 5.94174 12.6113 5.41683 12.404L4.48092 12.0342C4.1756 11.9136 3.97498 11.6186 3.97498 11.2903V8.05006L1.28069 4.85444Z"];
-const filterNoneSortAsc = [
-	"M11.9003 13.7046C11.9003 13.9969 11.6633 14.2339 11.371 14.2339C11.0787 14.2339 10.8417 13.9969 10.8417 13.7046V3.57272L9.74577 4.66862C9.53906 4.87534 9.20391 4.87534 8.9972 4.66862C8.79048 4.46191 8.79048 4.12676 8.9972 3.92005L10.9969 1.92039C11.2036 1.71368 11.5387 1.71368 11.7454 1.92039L13.7451 3.92005C13.9518 4.12676 13.9518 4.46191 13.7451 4.66862C13.5384 4.87534 13.2032 4.87534 12.9965 4.66862L11.9003 3.57243V13.7046Z",
-	"M2.69779 10.0113C2.40546 10.0113 2.16847 9.77429 2.16847 9.48196C2.16847 9.18962 2.40546 8.95264 2.69779 8.95264H6.67804C6.89213 8.95264 7.08514 9.0816 7.16707 9.2794C7.249 9.47719 7.20371 9.70486 7.05233 9.85624L3.97569 12.9329H6.67804C6.97038 12.9329 7.20736 13.1699 7.20736 13.4622C7.20736 13.7545 6.97038 13.9915 6.67804 13.9915H2.69779C2.4837 13.9915 2.29069 13.8626 2.20876 13.6648C2.12684 13.467 2.17212 13.2393 2.32351 13.0879L5.40015 10.0113H2.69779Z",
-	"M5.51638 2.58693C5.23363 1.81542 4.14248 1.81543 3.85973 2.58693L2.13245 7.29995C2.03185 7.57443 2.17281 7.87849 2.4473 7.97909C2.72178 8.07969 3.02584 7.93872 3.12644 7.66424L3.64346 6.25351L3.64504 6.25351H5.73266L6.24968 7.66424C6.35027 7.93872 6.65433 8.07969 6.92882 7.97909C7.2033 7.87849 7.34426 7.57443 7.24367 7.29995L5.51638 2.58693ZM5.34467 5.19487L4.68806 3.40325L4.03144 5.19487H5.34467Z"
-];
-const filterNoneSortDesc = [
-	"M11.9003 2.29495C11.9003 2.00261 11.6633 1.76562 11.371 1.76562C11.0787 1.76562 10.8417 2.00261 10.8417 2.29495V12.4268L9.74577 11.3309C9.53906 11.1242 9.20391 11.1242 8.9972 11.3309C8.79048 11.5376 8.79048 11.8727 8.9972 12.0795L10.9969 14.0791C11.2036 14.2858 11.5387 14.2858 11.7454 14.0791L13.7451 12.0795C13.9518 11.8727 13.9518 11.5376 13.7451 11.3309C13.5384 11.1242 13.2032 11.1242 12.9965 11.3309L11.9003 12.4271V2.29495Z",
-	"M2.69792 10.0113C2.40558 10.0113 2.16859 9.77429 2.16859 9.48196C2.16859 9.18962 2.40558 8.95264 2.69792 8.95264H6.67816C6.89225 8.95264 7.08526 9.0816 7.16719 9.2794C7.24912 9.47719 7.20384 9.70486 7.05245 9.85624L3.97581 12.9329H6.67816C6.9705 12.9329 7.20749 13.1699 7.20749 13.4622C7.20749 13.7545 6.9705 13.9915 6.67816 13.9915H2.69792C2.48383 13.9915 2.29082 13.8626 2.20889 13.6648C2.12696 13.467 2.17224 13.2393 2.32363 13.0879L5.40027 10.0113H2.69792Z",
-	"M5.5165 2.58693C5.23375 1.81542 4.1426 1.81543 3.85985 2.58693L2.13257 7.29995C2.03197 7.57443 2.17294 7.8785 2.44742 7.97909C2.7219 8.07969 3.02596 7.93872 3.12656 7.66424L3.64358 6.25351L3.64516 6.25351H5.73278L6.2498 7.66424C6.35039 7.93872 6.65446 8.07969 6.92894 7.97909C7.20342 7.8785 7.34438 7.57443 7.24379 7.29995L5.5165 2.58693ZM5.34479 5.19487L4.68818 3.40325L4.03156 5.19487H5.34479Z"
-];
+SheetTableControlsRenderController = __decorate([
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, Inject(SheetSkeletonManagerService)),
+	__decorateParam(3, ICommandService),
+	__decorateParam(4, Inject(TableManager)),
+	__decorateParam(5, Inject(SheetRangeThemeModel)),
+	__decorateParam(6, Inject(WorkbookPermissionService)),
+	__decorateParam(7, Inject(IPermissionService)),
+	__decorateParam(8, Inject(SheetsSelectionsService)),
+	__decorateParam(9, ISheetSelectionRenderService),
+	__decorateParam(10, Inject(SheetTableThemeUIController)),
+	__decorateParam(11, Inject(LocaleService)),
+	__decorateParam(12, IDialogService),
+	__decorateParam(13, ISidebarService)
+], SheetTableControlsRenderController);
 
 //#endregion
 //#region src/views/widgets/table-filter-button.shape.ts
 const FILTER_ICON_SIZE = 16;
+const FILTER_TRIGGER_HOVER_RADIUS = 4;
 let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Shape {
-	constructor(key, props, _contextService, _commandService, _themeService) {
+	constructor(key, props, _commandService) {
 		super(key, props);
-		this._contextService = _contextService;
 		this._commandService = _commandService;
-		this._themeService = _themeService;
 		_defineProperty(this, "_cellWidth", 0);
 		_defineProperty(this, "_cellHeight", 0);
 		_defineProperty(this, "_filterParams", void 0);
+		_defineProperty(this, "_iconColor", "#fff");
+		_defineProperty(this, "_hoverBackground", "rgba(255, 255, 255, 0.92)");
+		_defineProperty(this, "_hoverIconColor", "#202124");
 		_defineProperty(this, "_hovered", false);
 		this.setShapeProps(props);
 		this.onPointerDown$.subscribeEvent((evt) => this.onPointerDown(evt));
@@ -1563,6 +2001,9 @@ let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Sh
 		if (typeof props.cellHeight !== "undefined") this._cellHeight = props.cellHeight;
 		if (typeof props.cellWidth !== "undefined") this._cellWidth = props.cellWidth;
 		if (typeof props.filterParams !== "undefined") this._filterParams = props.filterParams;
+		if (typeof props.iconColor !== "undefined") this._iconColor = props.iconColor;
+		if (typeof props.hoverBackground !== "undefined") this._hoverBackground = props.hoverBackground;
+		if (typeof props.hoverIconColor !== "undefined") this._hoverIconColor = props.hoverIconColor;
 		this.transformByState({
 			width: props.width,
 			height: props.height
@@ -1577,36 +2018,38 @@ let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Sh
 		const cellRegion = new Path2D();
 		cellRegion.rect(left, top, cellWidth, cellHeight);
 		ctx.clip(cellRegion);
-		const { buttonState } = this._filterParams;
-		const fgColor = this._themeService.getColorFromTheme("primary.600");
-		const bgColor = this._hovered ? this._themeService.getColorFromTheme("gray.50") : "rgba(255, 255, 255, 1.0)";
-		let icons;
-		switch (buttonState) {
-			case SheetsTableButtonStateEnum.FilteredSortNone:
-				icons = filterPartial;
-				break;
-			case SheetsTableButtonStateEnum.FilteredSortAsc:
-				icons = filteredSortAsc;
-				break;
-			case SheetsTableButtonStateEnum.FilteredSortDesc:
-				icons = filteredSortDesc;
-				break;
-			case SheetsTableButtonStateEnum.FilterNoneSortNone: break;
-			case SheetsTableButtonStateEnum.FilterNoneSortAsc:
-				icons = filterNoneSortAsc;
-				break;
-			case SheetsTableButtonStateEnum.FilterNoneSortDesc:
-				icons = filterNoneSortDesc;
-				break;
+		if (this._hovered) {
+			var _ctx$roundRect;
+			ctx.save();
+			ctx.fillStyle = this._hoverBackground;
+			ctx.beginPath();
+			(_ctx$roundRect = ctx.roundRect) === null || _ctx$roundRect === void 0 || _ctx$roundRect.call(ctx, 0, 0, 16, 16, FILTER_TRIGGER_HOVER_RADIUS);
+			if (!ctx.roundRect) ctx.rect(0, 0, 16, 16);
+			ctx.fill();
+			ctx.restore();
 		}
-		if (icons) TableButton.drawIconByPath(ctx, icons, fgColor, bgColor);
-		else if (buttonState !== void 0) TableButton.drawNoSetting(ctx, 16, fgColor, bgColor);
+		this._drawChevron(ctx, this._hovered ? this._hoverIconColor : this._iconColor);
+		ctx.restore();
+	}
+	_drawChevron(ctx, color) {
+		const centerX = 16 / 2;
+		const centerY = 16 / 2 + 1;
+		ctx.save();
+		ctx.beginPath();
+		ctx.strokeStyle = color;
+		ctx.lineWidth = 1.8;
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		ctx.moveTo(centerX - 4.5, centerY - 2.5);
+		ctx.lineTo(centerX, centerY + 2);
+		ctx.lineTo(centerX + 4.5, centerY - 2.5);
+		ctx.stroke();
 		ctx.restore();
 	}
 	onPointerDown(evt) {
 		if (evt.button === 2) return;
 		const { row, col, unitId, subUnitId, tableId } = this._filterParams;
-		if (this._contextService.getContextValue("SHEETS_TABLE_FILTER_PANEL_OPENED_KEY") || !this._commandService.hasCommand(OpenTableFilterPanelOperation.id)) return;
+		if (!this._commandService.hasCommand(OpenTableFilterPanelOperation.id)) return;
 		setTimeout(() => {
 			const cmdParams = {
 				row,
@@ -1627,11 +2070,7 @@ let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends Sh
 		this.makeDirty(true);
 	}
 };
-SheetsTableFilterButtonShape = __decorate([
-	__decorateParam(2, IContextService),
-	__decorateParam(3, ICommandService),
-	__decorateParam(4, Inject(ThemeService))
-], SheetsTableFilterButtonShape);
+SheetsTableFilterButtonShape = __decorate([__decorateParam(2, ICommandService)], SheetsTableFilterButtonShape);
 
 //#endregion
 //#region src/controllers/sheet-table-filter-button-render.controller.ts
@@ -1645,13 +2084,14 @@ const computeIconTop = (startY, endY, cellHeight, verticalAlign) => {
 	}
 };
 let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRenderController extends RxDisposable {
-	constructor(_context, _injector, _sheetSkeletonManagerService, _sheetInterceptorService, _tableManager, _commandService) {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _sheetInterceptorService, _tableManager, _rangeThemeModel, _commandService) {
 		super();
 		this._context = _context;
 		this._injector = _injector;
 		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
 		this._sheetInterceptorService = _sheetInterceptorService;
 		this._tableManager = _tableManager;
+		this._rangeThemeModel = _rangeThemeModel;
 		this._commandService = _commandService;
 		_defineProperty(this, "_buttonRenderDisposable", null);
 		_defineProperty(this, "_tableFilterButtonShapes", []);
@@ -1707,7 +2147,12 @@ let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRende
 		const worksheet = workbook.getSheetBySheetId(worksheetId);
 		if (!worksheet) return;
 		for (const { range, states, tableId } of tableFilterRanges) {
+			var _this$_rangeThemeMode, _headerStyle$cl$rgb, _headerStyle$cl, _headerStyle$bg$rgb, _headerStyle$bg;
 			const { startRow, startColumn, endColumn } = range;
+			const table = this._tableManager.getTableById(unitId, tableId);
+			const headerStyle = table ? (_this$_rangeThemeMode = this._rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId())) === null || _this$_rangeThemeMode === void 0 ? void 0 : _this$_rangeThemeMode.getHeaderRowStyle() : null;
+			const iconColor = (_headerStyle$cl$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$cl = headerStyle.cl) === null || _headerStyle$cl === void 0 ? void 0 : _headerStyle$cl.rgb) !== null && _headerStyle$cl$rgb !== void 0 ? _headerStyle$cl$rgb : "#fff";
+			const hoverIconColor = (_headerStyle$bg$rgb = headerStyle === null || headerStyle === void 0 || (_headerStyle$bg = headerStyle.bg) === null || _headerStyle$bg === void 0 ? void 0 : _headerStyle$bg.rgb) !== null && _headerStyle$bg$rgb !== void 0 ? _headerStyle$bg$rgb : "#202124";
 			this._interceptCellContent(unitId, worksheetId, range);
 			for (let col = startColumn; col <= endColumn; col++) {
 				const key = `sheets-table-filter-button-${startRow}-${col}`;
@@ -1725,6 +2170,9 @@ let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRende
 					height: 16,
 					width: 16,
 					zIndex: SHEETS_FILTER_BUTTON_Z_INDEX,
+					iconColor,
+					hoverBackground: iconColor,
+					hoverIconColor,
 					cellHeight,
 					cellWidth,
 					filterParams: {
@@ -1773,7 +2221,8 @@ SheetsTableFilterButtonRenderController = __decorate([
 	__decorateParam(2, Inject(SheetSkeletonManagerService)),
 	__decorateParam(3, Inject(SheetInterceptorService)),
 	__decorateParam(4, Inject(TableManager)),
-	__decorateParam(5, ICommandService)
+	__decorateParam(5, Inject(SheetRangeThemeModel)),
+	__decorateParam(6, ICommandService)
 ], SheetsTableFilterButtonRenderController);
 
 //#endregion
@@ -2502,8 +2951,9 @@ let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends Plugin {
 		this._registerRenderModules();
 	}
 	_registerRenderModules() {
-		const renderDependencies = [[SheetsTableFilterButtonRenderController], [SheetsTableRenderController]];
-		if (this._config.hideAnchor !== true) renderDependencies.push([SheetTableAnchorController]);
+		const renderDependencies = [];
+		if (this._config.hideAnchor !== true) renderDependencies.push([SheetTableControlsRenderController]);
+		renderDependencies.push([SheetsTableFilterButtonRenderController], [SheetsTableRenderController]);
 		renderDependencies.forEach((m) => {
 			this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SHEET, m));
 		});