office-viewer 0.2.1 → 0.3.1

package/lib/excel/render/drawing/drawDrawing.js

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var drawPic = require('./drawPic.js');
+var drawShape = require('./drawShape.js');
+var drawChart = require('./drawChart.js');
+var getRectFromAnchorPoint = require('./getRectFromAnchorPoint.js');
+var getAbsoluteAnchorPosition = require('./getAbsoluteAnchorPosition.js');
+
+/**
+ * 绘制 sheet 里的图片及文本框
+ */
+function drawDrawing(excelRender, currentSheet, viewRange, canvas) {
+    var e_1, _a, e_2, _b, e_3, _c;
+    var _d, _e, _f;
+    var drawing = currentSheet.getDrawing();
+    if (!drawing) {
+        return;
+    }
+    var displayRect = currentSheet.getDisplayRect();
+    var _g = currentSheet.getRowColSize(), rowHeaderWidth = _g.rowHeaderWidth, colHeaderHeight = _g.colHeaderHeight;
+    try {
+        for (var _h = tslib.__values(drawing.twoCellAnchors), _j = _h.next(); !_j.done; _j = _h.next()) {
+            var twoCellAnchor = _j.value;
+            if (!twoCellAnchor.from || !twoCellAnchor.to) {
+                console.warn('from or to do not exist');
+                continue;
+            }
+            var drawingRect = getRectFromAnchorPoint.getRectFromTwoAnchorPoint(currentSheet, (_d = twoCellAnchor.from) === null || _d === void 0 ? void 0 : _d[0], (_e = twoCellAnchor.to) === null || _e === void 0 ? void 0 : _e[0], viewRange);
+            if (twoCellAnchor.pic) {
+                drawPic.drawPic(currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, twoCellAnchor.pic);
+            }
+            if (twoCellAnchor.shape) {
+                drawShape.drawShape(excelRender, currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, twoCellAnchor.shape);
+            }
+            if (twoCellAnchor.chartSpace) {
+                drawChart.drawChart(currentSheet, displayRect, rowHeaderWidth, colHeaderHeight, drawingRect, twoCellAnchor.chartSpace);
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_j && !_j.done && (_a = _h.return)) _a.call(_h);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    try {
+        for (var _k = tslib.__values(drawing.absoluteAnchors), _l = _k.next(); !_l.done; _l = _k.next()) {
+            var absoluteAnchor = _l.value;
+            var size = getAbsoluteAnchorPosition.getAbsoluteAnchorPosition(absoluteAnchor);
+            var x = size.x + rowHeaderWidth - displayRect.x;
+            var y = size.y + colHeaderHeight - displayRect.y;
+            var drawingRect = {
+                x: x,
+                y: y,
+                width: size.width,
+                height: size.height
+            };
+            // 目前没测试过在 absoluteAnchor 里的效果，都不知道怎么在 excel 里操作
+            if (absoluteAnchor.pic) {
+                drawPic.drawPic(currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, absoluteAnchor.pic);
+            }
+            if (absoluteAnchor.shape) {
+                drawShape.drawShape(excelRender, currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, absoluteAnchor.shape);
+            }
+            if (absoluteAnchor.chartSpace) {
+                drawChart.drawChart(currentSheet, displayRect, rowHeaderWidth, colHeaderHeight, drawingRect, absoluteAnchor.chartSpace);
+            }
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_l && !_l.done && (_b = _k.return)) _b.call(_k);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    try {
+        for (var _m = tslib.__values(drawing.oneCellAnchors), _o = _m.next(); !_o.done; _o = _m.next()) {
+            var oneCellAnchor = _o.value;
+            if (!oneCellAnchor.from) {
+                console.warn('from do not exist');
+                continue;
+            }
+            var drawingRect = getRectFromAnchorPoint.getRectFromOneAnchorPoint(currentSheet, (_f = oneCellAnchor.from) === null || _f === void 0 ? void 0 : _f[0], viewRange);
+            if (oneCellAnchor.pic) {
+                drawPic.drawPic(currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, oneCellAnchor.pic);
+            }
+            if (oneCellAnchor.shape) {
+                drawShape.drawShape(excelRender, currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, oneCellAnchor.shape);
+            }
+            if (oneCellAnchor.chartSpace) {
+                drawChart.drawChart(currentSheet, displayRect, rowHeaderWidth, colHeaderHeight, drawingRect, oneCellAnchor.chartSpace);
+            }
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (_o && !_o.done && (_c = _m.return)) _c.call(_m);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+}
+
+exports.drawDrawing = drawDrawing;

package/lib/excel/render/drawing/drawPic.d.ts

@@ -0,0 +1,5 @@
+import { Sheet } from '../../sheet/Sheet';
+import { IPicture } from '../../types/IDrawing';
+import { Rect } from '../Rect';
+import { SheetCanvas } from '../SheetCanvas';
+export declare function drawPic(currentSheet: Sheet, canvas: SheetCanvas, displayRect: Rect, drawingRect: Rect, rowHeaderWidth: number, colHeaderHeight: number, pic: IPicture): void;

package/lib/excel/render/drawing/drawPic.js

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Rect = require('../Rect.js');
+var PicRender = require('./PicRender.js');
+
+var PicRenderMap = {};
+function drawPic(currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, pic) {
+    if (!pic) {
+        console.warn('pic do not exist');
+        return;
+    }
+    var imgURL = pic.imgURL;
+    if (!imgURL) {
+        console.warn('imgURL do not exist');
+        return;
+    }
+    // 目前只用 drawing 的坐标，这个 xfrm 还不知道是什么
+    // const xfrm = pic.spPr?.xfrm;
+    // if (!xfrm) {
+    //   console.warn('xfrm do not exist');
+    //   return;
+    // }
+    // const ext = xfrm.ext;
+    // const off = xfrm.off;
+    // if (!ext || !off) {
+    //   console.warn('ext or off do not exist');
+    //   return;
+    // }
+    // const x = emuToPx(parseFloat(off.x! as string));
+    // const y = emuToPx(parseFloat(off.y! as string));
+    // const width = emuToPx(ext.cx!);
+    // const height = emuToPx(ext.cy!);
+    var workbook = currentSheet.getWorkbook();
+    // Excel 渲染在数据容器内，可以被表头遮挡
+    var dataContainer = workbook.getDataContainer();
+    var renderRect = {
+        x: drawingRect.x - rowHeaderWidth,
+        y: drawingRect.y - colHeaderHeight,
+        width: drawingRect.width,
+        height: drawingRect.height
+    };
+    // 因为前面算的是相对位置，所以这里也得转成相对位置
+    var relativeDisplayRect = {
+        x: 0,
+        y: 0,
+        width: displayRect.width,
+        height: displayRect.height
+    };
+    // 如果图片在显示区域内才绘制
+    if (Rect.rectIntersect(renderRect, relativeDisplayRect)) {
+        var gid = pic.gid;
+        // 目前 sheet 切换的时候会清空
+        var gidElement = dataContainer.querySelector("[data-gid=\"".concat(gid, "\"]"));
+        if (PicRenderMap[gid] && gidElement) {
+            PicRenderMap[gid].updatePosition(renderRect);
+            PicRenderMap[gid].show();
+        }
+        else {
+            var picRender = new PicRender.PicRender(dataContainer, renderRect, gid, pic);
+            PicRenderMap[gid] = picRender;
+        }
+    }
+    else {
+        if (PicRenderMap[pic.gid]) {
+            PicRenderMap[pic.gid].hide();
+        }
+    }
+}
+
+exports.drawPic = drawPic;

package/lib/excel/render/drawing/drawShape.d.ts

@@ -0,0 +1,9 @@
+import { Sheet } from '../../sheet/Sheet';
+import { IShape } from '../../types/IDrawing';
+import { ExcelRender } from '../ExcelRender';
+import { Rect } from '../Rect';
+import { SheetCanvas } from '../SheetCanvas';
+/**
+ * 绘制 sheet 里的形状及文本框
+ */
+export declare function drawShape(excelRender: ExcelRender, currentSheet: Sheet, canvas: SheetCanvas, displayRect: Rect, drawingRect: Rect, rowHeaderWidth: number, colHeaderHeight: number, sp: IShape): Promise<void>;

package/lib/excel/render/drawing/drawShape.js

@@ -0,0 +1,138 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var presetShape = require('../../../openxml/drawing/presetShape.js');
+var shapeToSVG = require('../../../openxml/drawing/svg/shapeToSVG.js');
+var Rect = require('../Rect.js');
+var drawTextInCell = require('../cell/drawTextInCell.js');
+
+function convertIShapePropertiesToShapePr(shapePr) {
+    var outline = shapePr.outline;
+    var fillColor = shapePr.fillColor;
+    var noFill = undefined;
+    if (shapePr.noFill) {
+        noFill = true;
+    }
+    return {
+        outline: outline,
+        fillColor: fillColor,
+        noFill: noFill
+    };
+}
+/**
+ * 绘制 sheet 里的形状及文本框
+ */
+function drawShape(excelRender, currentSheet, canvas, displayRect, drawingRect, rowHeaderWidth, colHeaderHeight, sp) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return tslib.__awaiter(this, void 0, void 0, function () {
+        var relativeDisplayRect, renderRect, workbook, dataProvider, spPr, prstGeom, prst, shape, avLst, _h, _j, gd, _k, _l, gd, svg, svgContent, svgURL, richText, alignment, anchor, cellInfo;
+        var e_1, _m, e_2, _o;
+        return tslib.__generator(this, function (_p) {
+            switch (_p.label) {
+                case 0:
+                    relativeDisplayRect = {
+                        x: 0,
+                        y: 0,
+                        width: displayRect.width,
+                        height: displayRect.height
+                    };
+                    renderRect = {
+                        x: drawingRect.x - rowHeaderWidth,
+                        y: drawingRect.y - colHeaderHeight,
+                        width: drawingRect.width,
+                        height: drawingRect.height
+                    };
+                    if (!Rect.rectIntersect(renderRect, relativeDisplayRect)) return [3 /*break*/, 3];
+                    workbook = currentSheet.getWorkbook();
+                    dataProvider = workbook.getDataProvider();
+                    spPr = sp.spPr;
+                    prstGeom = spPr.prstGeom;
+                    if (!(prstGeom && prstGeom.prst)) return [3 /*break*/, 2];
+                    prst = prstGeom.prst;
+                    shape = presetShape.presetShape[prst];
+                    if (!shape) return [3 /*break*/, 2];
+                    avLst = [];
+                    try {
+                        // 将自动解析的 avLst 转成之前手动解析的 ShapeGuide
+                        for (_h = tslib.__values(((_a = prstGeom.avLst) === null || _a === void 0 ? void 0 : _a.gd) || []), _j = _h.next(); !_j.done; _j = _h.next()) {
+                            gd = _j.value;
+                            avLst.push({
+                                n: gd.name,
+                                f: gd.fmla
+                            });
+                        }
+                    }
+                    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                    finally {
+                        try {
+                            if (_j && !_j.done && (_m = _h.return)) _m.call(_h);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                    }
+                    try {
+                        // 将自动解析的 avLst 转成之前手动解析的 ShapeGuide
+                        for (_k = tslib.__values(((_b = prstGeom.avLst) === null || _b === void 0 ? void 0 : _b.gd) || []), _l = _k.next(); !_l.done; _l = _k.next()) {
+                            gd = _l.value;
+                            avLst.push({
+                                n: gd.name,
+                                f: gd.fmla
+                            });
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (_l && !_l.done && (_o = _k.return)) _o.call(_k);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                    svg = shapeToSVG.shapeToSVG(shape, avLst, convertIShapePropertiesToShapePr(spPr), drawingRect.width, drawingRect.height, {
+                        lineColor: (_c = sp.styleColor) === null || _c === void 0 ? void 0 : _c.lnRefColor,
+                        fillColor: (_d = sp.styleColor) === null || _d === void 0 ? void 0 : _d.fillRefColor,
+                        fontColor: (_e = sp.styleColor) === null || _e === void 0 ? void 0 : _e.fontRefColor
+                    });
+                    svgContent = new XMLSerializer().serializeToString(svg);
+                    svgURL = 'data:image/svg+xml;base64,' + btoa(svgContent);
+                    return [4 /*yield*/, canvas.drawImageWithCache(svgURL, drawingRect.x - displayRect.x, drawingRect.y - displayRect.y, drawingRect.width, drawingRect.height)];
+                case 1:
+                    _p.sent();
+                    _p.label = 2;
+                case 2:
+                    richText = sp.richText;
+                    if (richText) {
+                        alignment = {};
+                        anchor = (_g = (_f = sp.txBody) === null || _f === void 0 ? void 0 : _f.bodyPr) === null || _g === void 0 ? void 0 : _g.anchor;
+                        if (anchor) {
+                            switch (anchor) {
+                                case 't':
+                                    alignment.vertical = 'top';
+                                    break;
+                                case 'ctr':
+                                    alignment.vertical = 'center';
+                                    break;
+                                case 'b':
+                                    alignment.vertical = 'bottom';
+                                    break;
+                            }
+                        }
+                        cellInfo = {
+                            row: 0,
+                            col: 0,
+                            font: {},
+                            text: '',
+                            value: '',
+                            alignment: alignment,
+                            cellData: richText
+                        };
+                        drawTextInCell.drawTextInCell(excelRender, currentSheet, canvas.getContext(), dataProvider, cellInfo, drawingRect.x - displayRect.x, drawingRect.y - displayRect.y, drawingRect.width, drawingRect.height, 0, 0);
+                    }
+                    _p.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+}
+
+exports.drawShape = drawShape;

package/lib/excel/render/drawing/findPositionInViewRange.d.ts

@@ -0,0 +1,7 @@
+import { Sheet } from '../../sheet/Sheet';
+import { ViewRange } from 'src/excel/sheet/ViewRange';
+import { Rect } from '../Rect';
+/**
+ * 在 viewRange 中找到 row 和 col 的位置
+ */
+export declare function findPositionInViewRange(currentSheet: Sheet, row: number, col: number, viewRange: ViewRange): Rect;

package/lib/excel/render/drawing/findPositionInViewRange.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 在 viewRange 中找到 row 和 col 的位置
+ */
+function findPositionInViewRange(currentSheet, row, col, viewRange) {
+    var rowIndex = viewRange.rows.indexOf(row);
+    var colIndex = viewRange.cols.indexOf(col);
+    var rowSize;
+    var colSize;
+    if (rowIndex !== -1 && colIndex !== -1) {
+        rowSize = viewRange.rowSizes[rowIndex];
+        colSize = viewRange.colSizes[colIndex];
+        return {
+            x: colSize.offset,
+            y: rowSize.offset,
+            width: colSize.size,
+            height: rowSize.size
+        };
+    }
+    var cellPosition = currentSheet.getCellPosition(row, col);
+    return {
+        x: cellPosition.x,
+        y: cellPosition.y,
+        width: cellPosition.width,
+        height: cellPosition.height
+    };
+}
+
+exports.findPositionInViewRange = findPositionInViewRange;

package/lib/excel/render/drawing/getAbsoluteAnchorPosition.d.ts

@@ -0,0 +1,11 @@
+import { CT_AbsoluteAnchor } from '../../../openxml/ExcelTypes';
+/**
+ * 获取绝对锚点的位置信息
+ * @param absoluteAnchor
+ */
+export declare function getAbsoluteAnchorPosition(absoluteAnchor: CT_AbsoluteAnchor): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/lib/excel/render/drawing/getAbsoluteAnchorPosition.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var emuToPx = require('../../../util/emuToPx.js');
+
+/**
+ * 获取绝对锚点的位置信息
+ * @param absoluteAnchor
+ */
+function getAbsoluteAnchorPosition(absoluteAnchor) {
+    var _a, _b;
+    var pos = (_a = absoluteAnchor.pos) === null || _a === void 0 ? void 0 : _a[0];
+    if (pos) {
+        var x = parseFloat(pos.x);
+        var y = parseFloat(pos.y);
+        var ext = (_b = absoluteAnchor.ext) === null || _b === void 0 ? void 0 : _b[0];
+        if (ext && !isNaN(x) && !isNaN(y)) {
+            var width = emuToPx.emuToPx(ext.cx);
+            var height = emuToPx.emuToPx(ext.cy);
+            return {
+                x: x,
+                y: y,
+                width: width,
+                height: height
+            };
+        }
+    }
+    return {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    };
+}
+
+exports.getAbsoluteAnchorPosition = getAbsoluteAnchorPosition;

package/lib/excel/render/drawing/getOneCellAnchorPosition.d.ts

@@ -0,0 +1,8 @@
+import { CT_OneCellAnchor } from '../../../openxml/ExcelTypes';
+import { Sheet } from '../../sheet/Sheet';
+export declare function getOneCellAnchorPosition(oneCellAnchor: CT_OneCellAnchor, sheet: Sheet): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/lib/excel/render/drawing/getOneCellAnchorPosition.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var emuToPx = require('../../../util/emuToPx.js');
+
+function getOneCellAnchorPosition(oneCellAnchor, sheet) {
+    var _a, _b, _c, _d, _e;
+    var x = 0;
+    var y = 0;
+    var width = 0;
+    var height = 0;
+    var from = (_a = oneCellAnchor.from) === null || _a === void 0 ? void 0 : _a[0];
+    if (from) {
+        var cellRow = ((_b = from.row) === null || _b === void 0 ? void 0 : _b[0]) || 0;
+        var cellRowOffset = emuToPx.emuToPx((_c = from.rowOff) === null || _c === void 0 ? void 0 : _c[0]);
+        var cellCol = ((_d = from.col) === null || _d === void 0 ? void 0 : _d[0]) || 0;
+        var cellColOffset = emuToPx.emuToPx((_e = from.colOff) === null || _e === void 0 ? void 0 : _e[0]);
+        var cellPosition = sheet.getCellPosition(cellRow, cellCol);
+        return {
+            x: cellPosition.x,
+            y: cellPosition.y,
+            width: cellColOffset,
+            height: cellRowOffset
+        };
+    }
+    return {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+    };
+}
+
+exports.getOneCellAnchorPosition = getOneCellAnchorPosition;

package/lib/excel/render/drawing/getPositionByMaker.d.ts

@@ -0,0 +1,11 @@
+import { CT_Marker } from '../../../openxml/ExcelTypes';
+import { Sheet } from '../../sheet/Sheet';
+/**
+ * 基于 maker 计算位置信息
+ */
+export declare function getPositionByMaker(maker: CT_Marker, sheet: Sheet): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/lib/excel/render/drawing/getRectFromAnchorPoint.d.ts

@@ -0,0 +1,18 @@
+import { CT_Marker } from '../../../openxml/ExcelTypes';
+import { Sheet } from '../../sheet/Sheet';
+import { ViewRange } from 'src/excel/sheet/ViewRange';
+export declare function getRectFromOneAnchorPoint(currentSheet: Sheet, cell: CT_Marker, viewRange: ViewRange): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * 基于 Anchor Point 计算位置信息
+ */
+export declare function getRectFromTwoAnchorPoint(currentSheet: Sheet, from: CT_Marker, to: CT_Marker, viewRange: ViewRange): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/lib/excel/render/drawing/getRectFromAnchorPoint.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var emuToPx = require('../../../util/emuToPx.js');
+var findPositionInViewRange = require('./findPositionInViewRange.js');
+
+function getRectFromOneAnchorPoint(currentSheet, cell, viewRange) {
+    var _a, _b, _c, _d;
+    var cellRow = ((_a = cell.row) === null || _a === void 0 ? void 0 : _a[0]) || 0;
+    var cellRowOffset = emuToPx.emuToPx((_b = cell.rowOff) === null || _b === void 0 ? void 0 : _b[0]);
+    var cellCol = ((_c = cell.col) === null || _c === void 0 ? void 0 : _c[0]) || 0;
+    var cellColOffset = emuToPx.emuToPx((_d = cell.colOff) === null || _d === void 0 ? void 0 : _d[0]);
+    var cellPosition = findPositionInViewRange.findPositionInViewRange(currentSheet, cellRow, cellCol, viewRange);
+    return {
+        x: cellPosition.x,
+        y: cellPosition.y,
+        width: cellColOffset,
+        height: cellRowOffset
+    };
+}
+/**
+ * 基于 Anchor Point 计算位置信息
+ */
+function getRectFromTwoAnchorPoint(currentSheet, from, to, viewRange) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var fromRow = ((_a = from.row) === null || _a === void 0 ? void 0 : _a[0]) || 0;
+    var fromRowOffset = emuToPx.emuToPx((_b = from.rowOff) === null || _b === void 0 ? void 0 : _b[0]);
+    var fromCol = ((_c = from.col) === null || _c === void 0 ? void 0 : _c[0]) || 0;
+    var fromColOffset = emuToPx.emuToPx((_d = from.colOff) === null || _d === void 0 ? void 0 : _d[0]);
+    var toRow = ((_e = to.row) === null || _e === void 0 ? void 0 : _e[0]) || 0;
+    var toRowOffset = emuToPx.emuToPx((_f = to.rowOff) === null || _f === void 0 ? void 0 : _f[0]);
+    var toCol = ((_g = to.col) === null || _g === void 0 ? void 0 : _g[0]) || 0;
+    var toColOffset = emuToPx.emuToPx((_h = to.colOff) === null || _h === void 0 ? void 0 : _h[0]);
+    var fromPosition = findPositionInViewRange.findPositionInViewRange(currentSheet, fromRow, fromCol, viewRange);
+    var toPosition = findPositionInViewRange.findPositionInViewRange(currentSheet, toRow, toCol, viewRange);
+    var x = fromPosition.x + fromColOffset;
+    var y = fromPosition.y + fromRowOffset;
+    return {
+        x: x,
+        y: y,
+        width: toPosition.x + toColOffset - x,
+        height: toPosition.y + toRowOffset - y
+    };
+}
+
+exports.getRectFromOneAnchorPoint = getRectFromOneAnchorPoint;
+exports.getRectFromTwoAnchorPoint = getRectFromTwoAnchorPoint;

package/lib/excel/render/drawing/getTwoCellAnchorPosition.d.ts

@@ -0,0 +1,8 @@
+import { CT_TwoCellAnchor } from '../../../openxml/ExcelTypes';
+import { Sheet } from '../../sheet/Sheet';
+export declare function getTwoCellAnchorPosition(twoCellAnchor: CT_TwoCellAnchor, sheet: Sheet): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/lib/excel/render/drawing/getTwoCellAnchorPosition.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var emuToPx = require('../../../util/emuToPx.js');
+
+function getTwoCellAnchorPosition(twoCellAnchor, sheet) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var from = (_a = twoCellAnchor.from) === null || _a === void 0 ? void 0 : _a[0];
+    var to = (_b = twoCellAnchor.to) === null || _b === void 0 ? void 0 : _b[0];
+    if (!from || !to) {
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
+    }
+    var fromRow = ((_c = from.row) === null || _c === void 0 ? void 0 : _c[0]) || 0;
+    var fromRowOffset = emuToPx.emuToPx((_d = from.rowOff) === null || _d === void 0 ? void 0 : _d[0]);
+    var fromCol = ((_e = from.col) === null || _e === void 0 ? void 0 : _e[0]) || 0;
+    var fromColOffset = emuToPx.emuToPx((_f = from.colOff) === null || _f === void 0 ? void 0 : _f[0]);
+    var fromPosition = sheet.getCellPosition(fromRow, fromCol);
+    var toRow = ((_g = to.row) === null || _g === void 0 ? void 0 : _g[0]) || 0;
+    var toRowOffset = emuToPx.emuToPx((_h = to.rowOff) === null || _h === void 0 ? void 0 : _h[0]);
+    var toCol = ((_j = to.col) === null || _j === void 0 ? void 0 : _j[0]) || 0;
+    var toColOffset = emuToPx.emuToPx((_k = to.colOff) === null || _k === void 0 ? void 0 : _k[0]);
+    var toPosition = sheet.getCellPosition(toRow, toCol);
+    var x = fromPosition.x + fromColOffset;
+    var y = fromPosition.y + fromRowOffset;
+    var width = toPosition.x + toColOffset - x;
+    var height = toPosition.y + toRowOffset - y;
+    return {
+        x: x,
+        y: y,
+        width: width,
+        height: height
+    };
+}
+
+exports.getTwoCellAnchorPosition = getTwoCellAnchorPosition;

package/lib/excel/render/formulaBar/FormulaBar.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 公式栏
+ */
+import { Workbook } from '../../Workbook';
+import { ExcelRenderOptions } from '../../sheet/ExcelRenderOptions';
+import { CellData } from '../../types/worksheet/CellData';
+import { Input } from '../ui/Input';
+export declare class FormulaBar {
+    dom: HTMLElement;
+    /**
+     * 左侧的单元格名称
+     */
+    nameBox?: HTMLElement;
+    /**
+     * 右侧的输入框
+     */
+    textBox?: HTMLElement;
+    workbook: Workbook;
+    textInput: Input;
+    cellData?: CellData;
+    constructor(dom: HTMLElement, workbook: Workbook, renderOptions: ExcelRenderOptions);
+    initDom(): void;
+    getActiveCell(): import("../../types/RangeRef").RangeRef | null;
+    /**
+     * 同步 dom 节点
+     */
+    sync(): void;
+    changeCellValue(value: string): void;
+}