@univerjs/engine-render 1.0.0-alpha.1 → 1.0.0-alpha.2

package/lib/cjs/index.js

@@ -114,6 +114,10 @@ let CURSOR_TYPE = /* @__PURE__ */ function(CURSOR_TYPE) {
 	CURSOR_TYPE["SOUTH_WEST_RESIZE"] = "sw-resize";
 	CURSOR_TYPE["SOUTH_RESIZE"] = "s-resize";
 	CURSOR_TYPE["WEST_RESIZE"] = "w-resize";
+	CURSOR_TYPE["EAST_WEST_RESIZE"] = "ew-resize";
+	CURSOR_TYPE["NORTH_SOUTH_RESIZE"] = "ns-resize";
+	CURSOR_TYPE["NORTH_EAST_SOUTH_WEST_RESIZE"] = "nesw-resize";
+	CURSOR_TYPE["NORTH_WEST_SOUTH_EAST_RESIZE"] = "nwse-resize";
 	CURSOR_TYPE["TEXT"] = "text";
 	CURSOR_TYPE["WAIT"] = "wait";
 	CURSOR_TYPE["HELP"] = "help";
@@ -228,6 +232,7 @@ const cancelRequestFrame = (requestID, requester) => {
 };
 const createCanvasElement = () => {
 	const canvas = document.createElement("canvas");
+	canvas.dir = "ltr";
 	try {
 		canvas.style = canvas.style || {};
 	} catch (e) {
@@ -12471,8 +12476,9 @@ function parseDataStreamToTree(dataStream, tables) {
 	};
 }
 var DocumentViewModel = class DocumentViewModel {
-	constructor(_documentDataModel) {
+	constructor(_documentDataModel, _tableSource) {
 		this._documentDataModel = _documentDataModel;
+		this._tableSource = _tableSource;
 		_defineProperty(this, "_interceptor", null);
 		_defineProperty(this, "_cacheSize", 1e3);
 		_defineProperty(this, "_textRunsCache", /* @__PURE__ */ new Map());
@@ -12650,10 +12656,10 @@ var DocumentViewModel = class DocumentViewModel {
 		}
 	}
 	_buildTableCache() {
-		var _this$getBody4;
+		var _this$getBody4, _this$_tableSource;
 		this._tableCache.clear();
 		const tables = (_this$getBody4 = this.getBody()) === null || _this$getBody4 === void 0 ? void 0 : _this$getBody4.tables;
-		const tableConfig = this.getSnapshot().tableSource;
+		const tableConfig = (_this$_tableSource = this._tableSource) !== null && _this$_tableSource !== void 0 ? _this$_tableSource : this.getSnapshot().tableSource;
 		if (tables == null || tableConfig == null) return;
 		for (const table of tables) {
 			const { startIndex, tableId } = table;
@@ -12695,12 +12701,13 @@ var DocumentViewModel = class DocumentViewModel {
 	_buildHeaderFooterViewModel() {
 		const { headerModelMap, footerModelMap } = this._documentDataModel;
 		const viewModels = [];
+		const tableSource = this.getSnapshot().tableSource;
 		for (const [headerId, headerModel] of headerModelMap) {
-			this._headerTreeMap.set(headerId, new DocumentViewModel(headerModel));
+			this._headerTreeMap.set(headerId, new DocumentViewModel(headerModel, tableSource));
 			viewModels.push(this._headerTreeMap.get(headerId));
 		}
 		for (const [footerId, footerModel] of footerModelMap) {
-			this._footerTreeMap.set(footerId, new DocumentViewModel(footerModel));
+			this._footerTreeMap.set(footerId, new DocumentViewModel(footerModel, tableSource));
 			viewModels.push(this._footerTreeMap.get(footerId));
 		}
 		this._segmentViewModels$.next(viewModels);
@@ -14884,10 +14891,10 @@ function lineIterator(pagesOrCells, cb) {
 	}
 }
 function documentSkeletonTableIterator(pages, options = {}) {
-	const { docsLeft = 0, docsTop = 0, pageMarginTop = 0, resolveViewport = true, tableCellInsetX = 0, unitId = "" } = options;
+	const { docsLeft = 0, docsTop = 0, pageMarginTop = 0, resolveViewport = true, skeFooters, skeHeaders, tableCellInsetX = 0, unitId = "" } = options;
 	const contexts = [];
 	pages.forEach((rootPage, pageIndex) => {
-		var _rootPage$skeColumnGr;
+		var _skeHeaders$get, _skeFooters$get, _rootPage$skeColumnGr;
 		const rootPageTop = ((rootPage.pageHeight === Infinity ? 0 : rootPage.pageHeight) + pageMarginTop) * pageIndex + rootPage.marginTop + docsTop;
 		const rootPageLeft = rootPage.marginLeft + docsLeft;
 		collectPageTables({
@@ -14903,6 +14910,36 @@ function documentSkeletonTableIterator(pages, options = {}) {
 			tableCellInsetX,
 			unitId
 		});
+		const rootPageDocumentTop = rootPageTop - rootPage.marginTop;
+		const rootPageDocumentLeft = docsLeft + rootPage.marginLeft;
+		const headerPage = rootPage.headerId == null ? void 0 : skeHeaders === null || skeHeaders === void 0 || (_skeHeaders$get = skeHeaders.get(rootPage.headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(rootPage.pageWidth);
+		if (headerPage != null) collectPageTables({
+			contexts,
+			docsLeft,
+			page: headerPage,
+			pageIndex,
+			pageLeft: rootPageDocumentLeft,
+			pageTop: rootPageDocumentTop + headerPage.marginTop,
+			rootPage,
+			source: "header",
+			resolveViewport,
+			tableCellInsetX,
+			unitId
+		});
+		const footerPage = rootPage.footerId == null ? void 0 : skeFooters === null || skeFooters === void 0 || (_skeFooters$get = skeFooters.get(rootPage.footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(rootPage.pageWidth);
+		if (footerPage != null) collectPageTables({
+			contexts,
+			docsLeft,
+			page: footerPage,
+			pageIndex,
+			pageLeft: rootPageDocumentLeft,
+			pageTop: rootPageDocumentTop + rootPage.pageHeight - footerPage.height - footerPage.marginBottom,
+			rootPage,
+			source: "footer",
+			resolveViewport,
+			tableCellInsetX,
+			unitId
+		});
 		(_rootPage$skeColumnGr = rootPage.skeColumnGroups) === null || _rootPage$skeColumnGr === void 0 || _rootPage$skeColumnGr.forEach((columnGroup) => {
 			columnGroup.columns.forEach((columnGroupColumn) => {
 				const nestedPage = columnGroupColumn.page;
@@ -15444,20 +15481,22 @@ function getPageFromPath(skeletonData, path) {
 			const pageIndex = pathCopy.shift();
 			page = skeletonData.pages[pageIndex];
 		} else if (field === "skeTables") {
-			var _skeTables;
+			var _page$skeTables3;
+			if (page == null) return null;
 			const tableId = pathCopy.shift();
 			pathCopy.shift();
 			const rowIndex = pathCopy.shift();
 			pathCopy.shift();
 			const cellIndex = pathCopy.shift();
-			page = (_skeTables = page.skeTables) === null || _skeTables === void 0 || (_skeTables = _skeTables.get(tableId)) === null || _skeTables === void 0 || (_skeTables = _skeTables.rows[rowIndex]) === null || _skeTables === void 0 ? void 0 : _skeTables.cells[cellIndex];
+			page = (_page$skeTables3 = page.skeTables) === null || _page$skeTables3 === void 0 || (_page$skeTables3 = _page$skeTables3.get(tableId)) === null || _page$skeTables3 === void 0 || (_page$skeTables3 = _page$skeTables3.rows[rowIndex]) === null || _page$skeTables3 === void 0 ? void 0 : _page$skeTables3.cells[cellIndex];
 		} else if (field === "skeColumnGroups") {
-			var _skeColumnGroups;
+			var _page$skeColumnGroups2;
+			if (page == null) return null;
 			const columnGroupId = pathCopy.shift();
 			pathCopy.shift();
 			const columnIndex = pathCopy.shift();
 			pathCopy.shift();
-			page = (_skeColumnGroups = page.skeColumnGroups) === null || _skeColumnGroups === void 0 || (_skeColumnGroups = _skeColumnGroups.get(columnGroupId)) === null || _skeColumnGroups === void 0 || (_skeColumnGroups = _skeColumnGroups.columns[columnIndex]) === null || _skeColumnGroups === void 0 ? void 0 : _skeColumnGroups.page;
+			page = (_page$skeColumnGroups2 = page.skeColumnGroups) === null || _page$skeColumnGroups2 === void 0 || (_page$skeColumnGroups2 = _page$skeColumnGroups2.get(columnGroupId)) === null || _page$skeColumnGroups2 === void 0 || (_page$skeColumnGroups2 = _page$skeColumnGroups2.columns[columnIndex]) === null || _page$skeColumnGroups2 === void 0 ? void 0 : _page$skeColumnGroups2.page;
 		}
 	}
 	return page;
@@ -15524,8 +15563,8 @@ function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference,
 	}
 	page.originMarginTop = marginTop;
 	page.originMarginBottom = marginBottom;
-	page.marginTop = _getVerticalMargin(marginTop, header, pageHeight);
-	page.marginBottom = _getVerticalMargin(marginBottom, footer, pageHeight);
+	page.marginTop = _getVerticalMargin(marginTop, header);
+	page.marginBottom = _getVerticalMargin(marginBottom, footer);
 	const sections = page.sections;
 	const lastSection = sections[sections.length - 1];
 	const { marginTop: curPageMT, marginBottom: curPageMB, marginLeft: curPageML, marginRight: curPageMR } = page;
@@ -15698,8 +15737,10 @@ function applyTrailingBlockRangeSpaceBelow(pages, body, containerEndIndex) {
 		page.height += lastLine.spaceBelowApply || trailingBlockRangeSpace;
 	}
 }
-function _getVerticalMargin(marginTB, _headerOrFooter, _pageHeight) {
-	return marginTB;
+function _getVerticalMargin(marginTB, headerOrFooter) {
+	if (headerOrFooter == null) return marginTB;
+	const { marginTop = 0, height = 0, marginBottom = 0 } = headerOrFooter;
+	return Math.max(marginTB, marginTop + height + marginBottom);
 }
 
 //#endregion
@@ -17871,6 +17912,26 @@ function resolveMostSpecificPageByCharIndex(page, charIndex) {
 	}
 	return page;
 }
+function getSegmentPageFromRelativePath(skeletonData, segmentPageIndex, path) {
+	var _skeletonData$skeHead, _skeletonData$skeFoot;
+	const rootPage = skeletonData.pages[segmentPageIndex];
+	if (rootPage == null) return null;
+	const { headerId, footerId, pageWidth } = rootPage;
+	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(pageWidth)];
+	for (const segmentPage of segmentPages) {
+		if (segmentPage == null) continue;
+		const page = getPageFromPath({
+			...skeletonData,
+			pages: [segmentPage]
+		}, [
+			"pages",
+			0,
+			...path
+		]);
+		if (page != null) return page;
+	}
+	return null;
+}
 var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 	constructor(_docViewModel, localeService) {
 		super(localeService);
@@ -17965,7 +18026,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				pageIndex = skeletonData.pages.indexOf(page);
 				break;
 			case 3:
-				pageIndex = path[1];
+				pageIndex = typeof path[1] === "number" ? path[1] : segmentPage;
 				break;
 			default: throw new Error("Invalid page type");
 		}
@@ -18011,7 +18072,7 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				pageIndex = pages.indexOf(page);
 				break;
 			case 3:
-				pageIndex = path[1];
+				pageIndex = typeof path[1] === "number" ? path[1] : segmentPageIndex;
 				break;
 			default: throw new Error("Invalid page type");
 		}
@@ -18054,7 +18115,8 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				if (skeFooter == null) return;
 				else skePage = skeFooter;
 			}
-		} else skePage = getPageFromPath(skeletonData, path);
+		} else if (pageType === 3 && path[0] !== "pages") skePage = getSegmentPageFromRelativePath(skeletonData, segmentPage, path);
+		else skePage = getPageFromPath(skeletonData, path);
 		if (skePage == null) return;
 		const glyphGroup = skePage.sections[section].columns[column].lines[line].divides[divide].glyphGroup;
 		glyph = Math.min(glyph, glyphGroup.length - 1);
@@ -18562,8 +18624,8 @@ var DocumentSkeleton = class DocumentSkeleton extends _univerjs_core.Skeleton {
 				if (maybeHeaderSke) segmentPage = maybeHeaderSke;
 				else if (maybeFooterSke) segmentPage = maybeFooterSke;
 				else continue;
-			}
-			if (segmentId === "") segmentPage = resolveMostSpecificPageByCharIndex(page, charIndex);
+				segmentPage = resolveMostSpecificPageByCharIndex(segmentPage, charIndex);
+			} else segmentPage = resolveMostSpecificPageByCharIndex(page, charIndex);
 			const { sections, st, ed } = segmentPage;
 			const segmentPageParent = segmentPage.parent;
 			const isColumnSegmentPage = segmentId === "" && (segmentPageParent === null || segmentPageParent === void 0 ? void 0 : segmentPageParent.page) === segmentPage && ((_segmentPageParent$pa = segmentPageParent.parent) === null || _segmentPageParent$pa === void 0 ? void 0 : _segmentPageParent$pa.columnGroupId);
@@ -23834,7 +23896,15 @@ var Documents = class Documents extends DocComponent {
 		if (this._drawLiquid == null) return;
 		const { sections, skeTables } = page;
 		const { y: originY } = this._drawLiquid;
-		if (skeTables.size > 0) this._drawTable(ctx, page, skeTables, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
+		if (skeTables.size > 0) {
+			const tablePage = {
+				...page,
+				marginLeft: parentPage.marginLeft,
+				marginRight: parentPage.marginRight,
+				marginTop: isHeader ? page.marginTop : page.marginTop + alignOffsetNoAngle.y
+			};
+			this._drawTable(ctx, tablePage, skeTables, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
+		}
 		for (const section of sections) {
 			const { columns } = section;
 			this._drawLiquid.translateSave();
@@ -26555,7 +26625,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/config/config.ts

package/lib/es/index.js

@@ -89,6 +89,10 @@ let CURSOR_TYPE = /* @__PURE__ */ function(CURSOR_TYPE) {
 	CURSOR_TYPE["SOUTH_WEST_RESIZE"] = "sw-resize";
 	CURSOR_TYPE["SOUTH_RESIZE"] = "s-resize";
 	CURSOR_TYPE["WEST_RESIZE"] = "w-resize";
+	CURSOR_TYPE["EAST_WEST_RESIZE"] = "ew-resize";
+	CURSOR_TYPE["NORTH_SOUTH_RESIZE"] = "ns-resize";
+	CURSOR_TYPE["NORTH_EAST_SOUTH_WEST_RESIZE"] = "nesw-resize";
+	CURSOR_TYPE["NORTH_WEST_SOUTH_EAST_RESIZE"] = "nwse-resize";
 	CURSOR_TYPE["TEXT"] = "text";
 	CURSOR_TYPE["WAIT"] = "wait";
 	CURSOR_TYPE["HELP"] = "help";
@@ -203,6 +207,7 @@ const cancelRequestFrame = (requestID, requester) => {
 };
 const createCanvasElement = () => {
 	const canvas = document.createElement("canvas");
+	canvas.dir = "ltr";
 	try {
 		canvas.style = canvas.style || {};
 	} catch (e) {
@@ -12446,8 +12451,9 @@ function parseDataStreamToTree(dataStream, tables) {
 	};
 }
 var DocumentViewModel = class DocumentViewModel {
-	constructor(_documentDataModel) {
+	constructor(_documentDataModel, _tableSource) {
 		this._documentDataModel = _documentDataModel;
+		this._tableSource = _tableSource;
 		_defineProperty(this, "_interceptor", null);
 		_defineProperty(this, "_cacheSize", 1e3);
 		_defineProperty(this, "_textRunsCache", /* @__PURE__ */ new Map());
@@ -12625,10 +12631,10 @@ var DocumentViewModel = class DocumentViewModel {
 		}
 	}
 	_buildTableCache() {
-		var _this$getBody4;
+		var _this$getBody4, _this$_tableSource;
 		this._tableCache.clear();
 		const tables = (_this$getBody4 = this.getBody()) === null || _this$getBody4 === void 0 ? void 0 : _this$getBody4.tables;
-		const tableConfig = this.getSnapshot().tableSource;
+		const tableConfig = (_this$_tableSource = this._tableSource) !== null && _this$_tableSource !== void 0 ? _this$_tableSource : this.getSnapshot().tableSource;
 		if (tables == null || tableConfig == null) return;
 		for (const table of tables) {
 			const { startIndex, tableId } = table;
@@ -12670,12 +12676,13 @@ var DocumentViewModel = class DocumentViewModel {
 	_buildHeaderFooterViewModel() {
 		const { headerModelMap, footerModelMap } = this._documentDataModel;
 		const viewModels = [];
+		const tableSource = this.getSnapshot().tableSource;
 		for (const [headerId, headerModel] of headerModelMap) {
-			this._headerTreeMap.set(headerId, new DocumentViewModel(headerModel));
+			this._headerTreeMap.set(headerId, new DocumentViewModel(headerModel, tableSource));
 			viewModels.push(this._headerTreeMap.get(headerId));
 		}
 		for (const [footerId, footerModel] of footerModelMap) {
-			this._footerTreeMap.set(footerId, new DocumentViewModel(footerModel));
+			this._footerTreeMap.set(footerId, new DocumentViewModel(footerModel, tableSource));
 			viewModels.push(this._footerTreeMap.get(footerId));
 		}
 		this._segmentViewModels$.next(viewModels);
@@ -14859,10 +14866,10 @@ function lineIterator(pagesOrCells, cb) {
 	}
 }
 function documentSkeletonTableIterator(pages, options = {}) {
-	const { docsLeft = 0, docsTop = 0, pageMarginTop = 0, resolveViewport = true, tableCellInsetX = 0, unitId = "" } = options;
+	const { docsLeft = 0, docsTop = 0, pageMarginTop = 0, resolveViewport = true, skeFooters, skeHeaders, tableCellInsetX = 0, unitId = "" } = options;
 	const contexts = [];
 	pages.forEach((rootPage, pageIndex) => {
-		var _rootPage$skeColumnGr;
+		var _skeHeaders$get, _skeFooters$get, _rootPage$skeColumnGr;
 		const rootPageTop = ((rootPage.pageHeight === Infinity ? 0 : rootPage.pageHeight) + pageMarginTop) * pageIndex + rootPage.marginTop + docsTop;
 		const rootPageLeft = rootPage.marginLeft + docsLeft;
 		collectPageTables({
@@ -14878,6 +14885,36 @@ function documentSkeletonTableIterator(pages, options = {}) {
 			tableCellInsetX,
 			unitId
 		});
+		const rootPageDocumentTop = rootPageTop - rootPage.marginTop;
+		const rootPageDocumentLeft = docsLeft + rootPage.marginLeft;
+		const headerPage = rootPage.headerId == null ? void 0 : skeHeaders === null || skeHeaders === void 0 || (_skeHeaders$get = skeHeaders.get(rootPage.headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(rootPage.pageWidth);
+		if (headerPage != null) collectPageTables({
+			contexts,
+			docsLeft,
+			page: headerPage,
+			pageIndex,
+			pageLeft: rootPageDocumentLeft,
+			pageTop: rootPageDocumentTop + headerPage.marginTop,
+			rootPage,
+			source: "header",
+			resolveViewport,
+			tableCellInsetX,
+			unitId
+		});
+		const footerPage = rootPage.footerId == null ? void 0 : skeFooters === null || skeFooters === void 0 || (_skeFooters$get = skeFooters.get(rootPage.footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(rootPage.pageWidth);
+		if (footerPage != null) collectPageTables({
+			contexts,
+			docsLeft,
+			page: footerPage,
+			pageIndex,
+			pageLeft: rootPageDocumentLeft,
+			pageTop: rootPageDocumentTop + rootPage.pageHeight - footerPage.height - footerPage.marginBottom,
+			rootPage,
+			source: "footer",
+			resolveViewport,
+			tableCellInsetX,
+			unitId
+		});
 		(_rootPage$skeColumnGr = rootPage.skeColumnGroups) === null || _rootPage$skeColumnGr === void 0 || _rootPage$skeColumnGr.forEach((columnGroup) => {
 			columnGroup.columns.forEach((columnGroupColumn) => {
 				const nestedPage = columnGroupColumn.page;
@@ -15419,20 +15456,22 @@ function getPageFromPath(skeletonData, path) {
 			const pageIndex = pathCopy.shift();
 			page = skeletonData.pages[pageIndex];
 		} else if (field === "skeTables") {
-			var _skeTables;
+			var _page$skeTables3;
+			if (page == null) return null;
 			const tableId = pathCopy.shift();
 			pathCopy.shift();
 			const rowIndex = pathCopy.shift();
 			pathCopy.shift();
 			const cellIndex = pathCopy.shift();
-			page = (_skeTables = page.skeTables) === null || _skeTables === void 0 || (_skeTables = _skeTables.get(tableId)) === null || _skeTables === void 0 || (_skeTables = _skeTables.rows[rowIndex]) === null || _skeTables === void 0 ? void 0 : _skeTables.cells[cellIndex];
+			page = (_page$skeTables3 = page.skeTables) === null || _page$skeTables3 === void 0 || (_page$skeTables3 = _page$skeTables3.get(tableId)) === null || _page$skeTables3 === void 0 || (_page$skeTables3 = _page$skeTables3.rows[rowIndex]) === null || _page$skeTables3 === void 0 ? void 0 : _page$skeTables3.cells[cellIndex];
 		} else if (field === "skeColumnGroups") {
-			var _skeColumnGroups;
+			var _page$skeColumnGroups2;
+			if (page == null) return null;
 			const columnGroupId = pathCopy.shift();
 			pathCopy.shift();
 			const columnIndex = pathCopy.shift();
 			pathCopy.shift();
-			page = (_skeColumnGroups = page.skeColumnGroups) === null || _skeColumnGroups === void 0 || (_skeColumnGroups = _skeColumnGroups.get(columnGroupId)) === null || _skeColumnGroups === void 0 || (_skeColumnGroups = _skeColumnGroups.columns[columnIndex]) === null || _skeColumnGroups === void 0 ? void 0 : _skeColumnGroups.page;
+			page = (_page$skeColumnGroups2 = page.skeColumnGroups) === null || _page$skeColumnGroups2 === void 0 || (_page$skeColumnGroups2 = _page$skeColumnGroups2.get(columnGroupId)) === null || _page$skeColumnGroups2 === void 0 || (_page$skeColumnGroups2 = _page$skeColumnGroups2.columns[columnIndex]) === null || _page$skeColumnGroups2 === void 0 ? void 0 : _page$skeColumnGroups2.page;
 		}
 	}
 	return page;
@@ -15499,8 +15538,8 @@ function createSkeletonPage(ctx, sectionBreakConfig, skeletonResourceReference,
 	}
 	page.originMarginTop = marginTop;
 	page.originMarginBottom = marginBottom;
-	page.marginTop = _getVerticalMargin(marginTop, header, pageHeight);
-	page.marginBottom = _getVerticalMargin(marginBottom, footer, pageHeight);
+	page.marginTop = _getVerticalMargin(marginTop, header);
+	page.marginBottom = _getVerticalMargin(marginBottom, footer);
 	const sections = page.sections;
 	const lastSection = sections[sections.length - 1];
 	const { marginTop: curPageMT, marginBottom: curPageMB, marginLeft: curPageML, marginRight: curPageMR } = page;
@@ -15673,8 +15712,10 @@ function applyTrailingBlockRangeSpaceBelow(pages, body, containerEndIndex) {
 		page.height += lastLine.spaceBelowApply || trailingBlockRangeSpace;
 	}
 }
-function _getVerticalMargin(marginTB, _headerOrFooter, _pageHeight) {
-	return marginTB;
+function _getVerticalMargin(marginTB, headerOrFooter) {
+	if (headerOrFooter == null) return marginTB;
+	const { marginTop = 0, height = 0, marginBottom = 0 } = headerOrFooter;
+	return Math.max(marginTB, marginTop + height + marginBottom);
 }
 
 //#endregion
@@ -17846,6 +17887,26 @@ function resolveMostSpecificPageByCharIndex(page, charIndex) {
 	}
 	return page;
 }
+function getSegmentPageFromRelativePath(skeletonData, segmentPageIndex, path) {
+	var _skeletonData$skeHead, _skeletonData$skeFoot;
+	const rootPage = skeletonData.pages[segmentPageIndex];
+	if (rootPage == null) return null;
+	const { headerId, footerId, pageWidth } = rootPage;
+	const segmentPages = [headerId == null ? null : (_skeletonData$skeHead = skeletonData.skeHeaders.get(headerId)) === null || _skeletonData$skeHead === void 0 ? void 0 : _skeletonData$skeHead.get(pageWidth), footerId == null ? null : (_skeletonData$skeFoot = skeletonData.skeFooters.get(footerId)) === null || _skeletonData$skeFoot === void 0 ? void 0 : _skeletonData$skeFoot.get(pageWidth)];
+	for (const segmentPage of segmentPages) {
+		if (segmentPage == null) continue;
+		const page = getPageFromPath({
+			...skeletonData,
+			pages: [segmentPage]
+		}, [
+			"pages",
+			0,
+			...path
+		]);
+		if (page != null) return page;
+	}
+	return null;
+}
 var DocumentSkeleton = class DocumentSkeleton extends Skeleton {
 	constructor(_docViewModel, localeService) {
 		super(localeService);
@@ -17940,7 +18001,7 @@ var DocumentSkeleton = class DocumentSkeleton extends Skeleton {
 				pageIndex = skeletonData.pages.indexOf(page);
 				break;
 			case 3:
-				pageIndex = path[1];
+				pageIndex = typeof path[1] === "number" ? path[1] : segmentPage;
 				break;
 			default: throw new Error("Invalid page type");
 		}
@@ -17986,7 +18047,7 @@ var DocumentSkeleton = class DocumentSkeleton extends Skeleton {
 				pageIndex = pages.indexOf(page);
 				break;
 			case 3:
-				pageIndex = path[1];
+				pageIndex = typeof path[1] === "number" ? path[1] : segmentPageIndex;
 				break;
 			default: throw new Error("Invalid page type");
 		}
@@ -18029,7 +18090,8 @@ var DocumentSkeleton = class DocumentSkeleton extends Skeleton {
 				if (skeFooter == null) return;
 				else skePage = skeFooter;
 			}
-		} else skePage = getPageFromPath(skeletonData, path);
+		} else if (pageType === 3 && path[0] !== "pages") skePage = getSegmentPageFromRelativePath(skeletonData, segmentPage, path);
+		else skePage = getPageFromPath(skeletonData, path);
 		if (skePage == null) return;
 		const glyphGroup = skePage.sections[section].columns[column].lines[line].divides[divide].glyphGroup;
 		glyph = Math.min(glyph, glyphGroup.length - 1);
@@ -18537,8 +18599,8 @@ var DocumentSkeleton = class DocumentSkeleton extends Skeleton {
 				if (maybeHeaderSke) segmentPage = maybeHeaderSke;
 				else if (maybeFooterSke) segmentPage = maybeFooterSke;
 				else continue;
-			}
-			if (segmentId === "") segmentPage = resolveMostSpecificPageByCharIndex(page, charIndex);
+				segmentPage = resolveMostSpecificPageByCharIndex(segmentPage, charIndex);
+			} else segmentPage = resolveMostSpecificPageByCharIndex(page, charIndex);
 			const { sections, st, ed } = segmentPage;
 			const segmentPageParent = segmentPage.parent;
 			const isColumnSegmentPage = segmentId === "" && (segmentPageParent === null || segmentPageParent === void 0 ? void 0 : segmentPageParent.page) === segmentPage && ((_segmentPageParent$pa = segmentPageParent.parent) === null || _segmentPageParent$pa === void 0 ? void 0 : _segmentPageParent$pa.columnGroupId);
@@ -23809,7 +23871,15 @@ var Documents = class Documents extends DocComponent {
 		if (this._drawLiquid == null) return;
 		const { sections, skeTables } = page;
 		const { y: originY } = this._drawLiquid;
-		if (skeTables.size > 0) this._drawTable(ctx, page, skeTables, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
+		if (skeTables.size > 0) {
+			const tablePage = {
+				...page,
+				marginLeft: parentPage.marginLeft,
+				marginRight: parentPage.marginRight,
+				marginTop: isHeader ? page.marginTop : page.marginTop + alignOffsetNoAngle.y
+			};
+			this._drawTable(ctx, tablePage, skeTables, extensions, backgroundExtension, glyphExtensionsExcludeBackground, alignOffsetNoAngle, centerAngle, vertexAngle, renderConfig, parentScale);
+		}
 		for (const section of sections) {
 			const { columns } = section;
 			this._drawLiquid.translateSave();
@@ -26530,7 +26600,7 @@ Engine = __decorate([__decorateParam(2, ICanvasColorService)], Engine);
 //#endregion
 //#region package.json
 var name = "@univerjs/engine-render";
-var version = "1.0.0-alpha.1";
+var version = "1.0.0-alpha.2";
 
 //#endregion
 //#region src/config/config.ts

package/lib/types/basics/const.d.ts

@@ -62,6 +62,10 @@ export declare enum CURSOR_TYPE {
     SOUTH_WEST_RESIZE = "sw-resize",
     SOUTH_RESIZE = "s-resize",
     WEST_RESIZE = "w-resize",
+    EAST_WEST_RESIZE = "ew-resize",
+    NORTH_SOUTH_RESIZE = "ns-resize",
+    NORTH_EAST_SOUTH_WEST_RESIZE = "nesw-resize",
+    NORTH_WEST_SOUTH_EAST_RESIZE = "nwse-resize",
     TEXT = "text",
     WAIT = "wait",
     HELP = "help",

package/lib/types/components/docs/layout/tools.d.ts

@@ -92,7 +92,8 @@ export interface IDocumentSkeletonLineContext {
     visualLeft?: number;
     visualWidth?: number;
 }
-export type DocumentSkeletonTableSource = 'page' | 'column';
+export type DocumentSkeletonTableSource = 'page' | 'column' | 'header' | 'footer';
+type HeaderFooterSkeletonMap = Map<string, Map<number, IDocumentSkeletonPage>>;
 export interface IDocumentSkeletonTableCellGeometry {
     cell: IDocumentSkeletonPage;
     cellRect: IBoundRectNoAngle;
@@ -123,6 +124,8 @@ export interface IDocumentSkeletonTableIteratorOptions {
     docsTop?: number;
     pageMarginTop?: number;
     resolveViewport?: boolean;
+    skeFooters?: HeaderFooterSkeletonMap;
+    skeHeaders?: HeaderFooterSkeletonMap;
     tableCellInsetX?: number;
     unitId?: string;
 }

package/lib/types/components/docs/view-model/document-view-model.d.ts

@@ -41,6 +41,7 @@ interface IColumnGroupCoupleCache {
 }
 export declare class DocumentViewModel implements IDisposable {
     private _documentDataModel;
+    private _tableSource?;
     private _interceptor;
     private _cacheSize;
     private _textRunsCache;
@@ -58,7 +59,7 @@ export declare class DocumentViewModel implements IDisposable {
     private _footerTreeMap;
     private readonly _segmentViewModels$;
     readonly segmentViewModels$: import("rxjs").Observable<DocumentViewModel[]>;
-    constructor(_documentDataModel: DocumentDataModel);
+    constructor(_documentDataModel: DocumentDataModel, _tableSource?: Record<string, ITable> | undefined);
     registerCustomRangeInterceptor(interceptor: ICustomRangeInterceptor): IDisposable;
     dispose(): void;
     getHeaderFooterTreeMap(): {