office-viewer 0.2.1 → 0.3.0

package/lib/excel/render/formulaBar/FormulaBar.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var H = require('../../../util/H.js');
+var Range = require('../../io/excel/util/Range.js');
+var numberToLetters = require('../../io/excel/util/numberToLetters.js');
+var CellData = require('../../types/worksheet/CellData.js');
+var Input = require('../ui/Input.js');
+
+/**
+ * 公式栏
+ */
+var FormulaBar = /** @class */ (function () {
+    function FormulaBar(dom, workbook, renderOptions) {
+        var _this = this;
+        this.dom = dom;
+        this.workbook = workbook;
+        if (!renderOptions.showFormulaBar) {
+            return;
+        }
+        this.initDom();
+        workbook.uiEvent.on('SWITCH_SHEET', function () {
+            _this.sync();
+        });
+        workbook.uiEvent.on('CHANGE_SELECTION', function () {
+            _this.sync();
+        });
+    }
+    FormulaBar.prototype.initDom = function () {
+        var _this = this;
+        var nameBox = H.H('div', {
+            className: 'ov-excel-formula-bar__name-box',
+            parent: this.dom
+        });
+        this.nameBox = nameBox;
+        var textBox = H.H('div', {
+            className: 'ov-excel-formula-bar__text-box',
+            parent: this.dom
+        });
+        this.textBox = textBox;
+        var textInput = new Input.Input(textBox, '', '', function (value) {
+            _this.changeCellValue(value);
+        }, 'borderLess');
+        this.textInput = textInput;
+    };
+    FormulaBar.prototype.getActiveCell = function () {
+        var currentSheet = this.workbook.getActiveSheet();
+        var selection = currentSheet.getSelection();
+        if (!selection) {
+            return null;
+        }
+        return selection.activeCell;
+    };
+    /**
+     * 同步 dom 节点
+     */
+    FormulaBar.prototype.sync = function () {
+        var currentSheet = this.workbook.getActiveSheet();
+        var activeCell = this.getActiveCell();
+        if (!activeCell) {
+            return;
+        }
+        if (Range.isSingleCell(activeCell) || currentSheet.isMergeCell(activeCell)) {
+            var cellInfo = this.workbook
+                .getActiveSheet()
+                .getCellInfo(activeCell.startRow, activeCell.startCol);
+            this.textInput.setValue(cellInfo.text);
+            this.cellData = currentSheet.getCellData(activeCell.startRow, activeCell.startCol);
+        }
+        else {
+            this.textInput.setValue('');
+        }
+        this.nameBox.innerText = "".concat(numberToLetters.numberToLetters(activeCell.startCol)).concat(activeCell.startRow + 1);
+    };
+    FormulaBar.prototype.changeCellValue = function (value) {
+        var currentSheet = this.workbook.getActiveSheet();
+        var activeCell = this.getActiveCell();
+        if (!activeCell) {
+            return;
+        }
+        if (Range.isSingleCell(activeCell) || currentSheet.isMergeCell(activeCell)) {
+            currentSheet.updateCellValue(activeCell.startRow, activeCell.startCol, CellData.updateValue(value, this.cellData));
+            this.workbook.uiEvent.emit('UPDATE_RANGE', currentSheet.getIndex(), activeCell);
+        }
+    };
+    return FormulaBar;
+}());
+
+exports.FormulaBar = FormulaBar;

package/lib/excel/render/grid/drawGridLines.d.ts

@@ -0,0 +1,12 @@
+import { GridLineOptions } from '../../sheet/ExcelRenderOptions';
+import { Sheet } from '../../sheet/Sheet';
+import { ViewRange } from 'src/excel/sheet/ViewRange';
+import { SheetCanvas, Line } from '../SheetCanvas';
+/**
+ * 生成网格线
+ */
+export declare function generateGridLines(currentSheet: Sheet, viewRange: ViewRange, width: number, height: number): Line[];
+/**
+ * 绘制网格线
+ */
+export declare function drawGridLines(currentSheet: Sheet, viewRange: ViewRange, canvas: SheetCanvas, height: number, width: number, gridLineOptions: GridLineOptions): void;

package/lib/excel/render/grid/drawGridLines.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 生成网格线
+ */
+function generateGridLines(currentSheet, viewRange, width, height) {
+    var rows = viewRange.rows, rowSizes = viewRange.rowSizes, cols = viewRange.cols, colSizes = viewRange.colSizes;
+    var lines = [];
+    // 水平线
+    for (var index = 0; index < rows.length; index++) {
+        var currentRowOffset = rowSizes[index].offset;
+        lines.push({
+            x1: 0,
+            y1: currentRowOffset,
+            x2: width,
+            y2: currentRowOffset
+        });
+    }
+    // 垂直线
+    for (var index = 0; index < cols.length; index++) {
+        var currentColOffset = colSizes[index].offset;
+        lines.push({
+            x1: currentColOffset,
+            y1: 0,
+            x2: currentColOffset,
+            y2: height
+        });
+    }
+    return lines;
+}
+/**
+ * 绘制网格线
+ */
+function drawGridLines(currentSheet, viewRange, canvas, height, width, gridLineOptions) {
+    if (!currentSheet.showGridLines()) {
+        return;
+    }
+    var lines = generateGridLines(currentSheet, viewRange, width, height);
+    canvas.drawLines(lines, gridLineOptions.gridLineColor);
+}
+
+exports.drawGridLines = drawGridLines;
+exports.generateGridLines = generateGridLines;

package/lib/excel/render/header/drawRowColHeaders.d.ts

@@ -0,0 +1,10 @@
+import { ExcelRenderOptions } from '../../sheet/ExcelRenderOptions';
+import { Sheet } from '../../sheet/Sheet';
+import { ViewRange } from 'src/excel/sheet/ViewRange';
+import { FontSize } from '../../types/FontSize';
+import { FontStyle } from '../../types/FontStyle';
+import { SheetCanvas } from '../SheetCanvas';
+/**
+ * 绘制行列的表头
+ */
+export declare function drawRowColHeaders(currentSheet: Sheet, viewRange: ViewRange, sheetCanvas: SheetCanvas, renderOptions: ExcelRenderOptions, defaultFontSize: FontSize, defaultFontStyle: FontStyle): void;

package/lib/excel/render/header/drawRowColHeaders.js

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var numberToLetters = require('../../io/excel/util/numberToLetters.js');
+var genFontStr = require('../cell/genFontStr.js');
+
+/**
+ * 绘制行列的表头
+ */
+function drawRowColHeaders(currentSheet, viewRange, sheetCanvas, renderOptions, defaultFontSize, defaultFontStyle) {
+    var e_1, _a, e_2, _b;
+    var rows = viewRange.rows, startRowOffset = viewRange.startRowOffset, height = viewRange.height, width = viewRange.width, cols = viewRange.cols, startColOffset = viewRange.startColOffset;
+    var _c = currentSheet.getRowColSize(), rowHeaderWidth = _c.rowHeaderWidth, colHeaderHeight = _c.colHeaderHeight;
+    var gridLineColor = renderOptions.gridLineColor, rowColHeadersBgColor = renderOptions.rowColHeadersBackgroundColor, hiddenRowColHeadersLineColor = renderOptions.hiddenRowColHeadersLineColor;
+    var currentRowOffset = startRowOffset;
+    // 竖向的背景
+    sheetCanvas.drawRect(0, 0, rowHeaderWidth, height, rowColHeadersBgColor);
+    var font = genFontStr.genFontStr(defaultFontStyle);
+    var color = renderOptions.rowColHeadersColor;
+    var hasHiddenRow = false;
+    try {
+        // 绘制竖向的线表头
+        for (var rows_1 = tslib.__values(rows), rows_1_1 = rows_1.next(); !rows_1_1.done; rows_1_1 = rows_1.next()) {
+            var i = rows_1_1.value;
+            // 绘制竖向的文字
+            var rowHeight = currentSheet.getRowHeight(i);
+            // 为零就代表隐藏，标记一下
+            if (rowHeight === 0) {
+                hasHiddenRow = true;
+                continue;
+            }
+            // 横向的线
+            var lineY = currentRowOffset + colHeaderHeight;
+            sheetCanvas.drawLine({
+                x1: 0,
+                y1: lineY,
+                x2: rowHeaderWidth,
+                y2: lineY
+            }, gridLineColor);
+            // 如果有隐藏内容的情况
+            if (hasHiddenRow) {
+                // 重置一下
+                hasHiddenRow = false;
+                sheetCanvas.drawLine({
+                    x1: 0,
+                    y1: lineY,
+                    x2: rowHeaderWidth,
+                    y2: lineY
+                }, hiddenRowColHeadersLineColor, 3);
+            }
+            else {
+                sheetCanvas.drawLine({
+                    x1: 0,
+                    y1: lineY,
+                    x2: rowHeaderWidth,
+                    y2: lineY
+                }, gridLineColor);
+            }
+            var textSize = String(i + 1).length;
+            var textWidth = textSize * defaultFontSize.width;
+            sheetCanvas.drawText(font, color, String(i + 1), (rowHeaderWidth - textWidth) / 2, currentRowOffset +
+                (rowHeight - defaultFontSize.height) / 2 +
+                colHeaderHeight, 'top');
+            currentRowOffset += rowHeight;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (rows_1_1 && !rows_1_1.done && (_a = rows_1.return)) _a.call(rows_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    // 绘制最左侧的线，目前 office 365 是不绘制的
+    // sheetCanvas.drawLine(
+    //   {
+    //     x1: 0,
+    //     y1: 0,
+    //     x2: 0,
+    //     y2: currentRowOffset + colHeaderHeight
+    //   },
+    //   gridLineColor
+    // );
+    // 横向的背景
+    sheetCanvas.drawRect(0, 0, width, colHeaderHeight, rowColHeadersBgColor);
+    var currentColOffset = startColOffset;
+    // 横向字体的 Y 坐标，这个是固定的
+    var colTextY = (colHeaderHeight - defaultFontSize.height) / 2;
+    // 绘制横向的线表头
+    // 上一个列的索引
+    var lastColIndex = 0;
+    try {
+        for (var cols_1 = tslib.__values(cols), cols_1_1 = cols_1.next(); !cols_1_1.done; cols_1_1 = cols_1.next()) {
+            var i = cols_1_1.value;
+            var colWidth = currentSheet.getColWidth(i);
+            // 竖向的线
+            var lineX = currentColOffset + rowHeaderWidth;
+            // 如果当前索引比上一个索引大 1 以上，就代表有隐藏的列
+            var hasHiddenCol = i - lastColIndex > 1;
+            if (hasHiddenCol) {
+                sheetCanvas.drawLine({
+                    x1: lineX,
+                    y1: 0,
+                    x2: lineX,
+                    y2: colHeaderHeight
+                }, hiddenRowColHeadersLineColor, 3);
+            }
+            else {
+                sheetCanvas.drawLine({
+                    x1: lineX,
+                    y1: 0,
+                    x2: lineX,
+                    y2: colHeaderHeight
+                }, gridLineColor);
+            }
+            // 绘制横向的文字
+            var text = numberToLetters.numberToLetters(i);
+            var textSize = text.length;
+            var textWidth = textSize * defaultFontSize.width;
+            sheetCanvas.drawText(font, color, text, currentColOffset + (colWidth - textWidth) / 2 + rowHeaderWidth, colTextY, 'top');
+            currentColOffset += colWidth;
+            lastColIndex = i;
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (cols_1_1 && !cols_1_1.done && (_b = cols_1.return)) _b.call(cols_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    // 绘制最上方的线，目前 office 365 是不绘制的
+    // sheetCanvas.drawLine(
+    //   {
+    //     x1: 0,
+    //     y1: 0,
+    //     x2: currentColOffset + rowHeaderWidth,
+    //     y2: 0
+    //   },
+    //   gridLineColor
+    // );
+    // 绘制左上角的背景，TODO: 这里还有别的设计，比如一个倒三角
+    sheetCanvas.drawRect(0, 0, rowHeaderWidth, colHeaderHeight, rowColHeadersBgColor);
+}
+
+exports.drawRowColHeaders = drawRowColHeaders;

package/lib/excel/render/keyboard/handleCopy.d.ts

@@ -0,0 +1,5 @@
+import { Workbook } from '../../Workbook';
+/**
+ * 复制
+ */
+export declare function handleCopy(e: KeyboardEvent, workbook: Workbook): void;

package/lib/excel/render/keyboard/handleCopy.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var copySelection = require('../selection/copySelection.js');
+
+/**
+ * 复制
+ */
+function handleCopy(e, workbook) {
+    if (e.metaKey || e.ctrlKey) {
+        // 全选
+        if (e.key === 'a') {
+            console.log('SELECT ALL');
+        }
+        // 复制
+        if (e.key === 'c') {
+            copySelection.copySelection(workbook);
+        }
+    }
+}
+
+exports.handleCopy = handleCopy;

package/lib/excel/render/keyboard/handleKeydown.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 处理键盘事件
+ */
+import { Workbook } from '../../Workbook';
+export declare function handleKeydown(e: KeyboardEvent, workbook: Workbook): void;

package/lib/excel/render/keyboard/handleKeydown.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var handleCopy = require('./handleCopy.js');
+var handleSelectAll = require('./handleSelectAll.js');
+var handleSheetArrowKey = require('./handleSheetArrowKey.js');
+
+/**
+ * 处理键盘事件
+ */
+function handleKeydown(e, workbook) {
+    handleSelectAll.handleSelectAll(e, workbook);
+    handleCopy.handleCopy(e, workbook);
+    handleSheetArrowKey.handleSheetCanvasKeydown(e, workbook);
+}
+
+exports.handleKeydown = handleKeydown;

package/lib/excel/render/keyboard/handlePaste.d.ts

@@ -0,0 +1,5 @@
+import { Workbook } from '../../Workbook';
+/**
+ * 粘贴时触发
+ */
+export declare function handlePaste(e: ClipboardEvent, workbook: Workbook): void;

package/lib/excel/render/keyboard/handlePaste.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 粘贴时触发
+ */
+function handlePaste(e, workbook) {
+    var _a;
+    var html = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/html');
+    if (!html) {
+        return;
+    }
+    var element = document.createElement('div');
+    element.innerHTML = html;
+    element.querySelectorAll('table tr');
+    // TODO: 将表格转成数据
+}
+
+exports.handlePaste = handlePaste;

package/lib/excel/render/keyboard/handleSelectAll.d.ts

@@ -0,0 +1,5 @@
+import { Workbook } from '../../Workbook';
+/**
+ * 复制
+ */
+export declare function handleSelectAll(e: KeyboardEvent, workbook: Workbook): void;

package/lib/excel/render/keyboard/handleSelectAll.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var selectAll = require('../dnd/selectAll.js');
+
+/**
+ * 复制
+ */
+function handleSelectAll(e, workbook) {
+    if (e.metaKey || e.ctrlKey) {
+        // 全选
+        if (e.key === 'a') {
+            var sheetIndex = workbook.getActiveSheet().getIndex();
+            workbook.uiEvent.emit('CHANGE_SELECTION', selectAll.selectAll(sheetIndex));
+            e.preventDefault();
+        }
+    }
+}
+
+exports.handleSelectAll = handleSelectAll;

package/lib/excel/render/keyboard/handleSheetArrowKey.d.ts

@@ -0,0 +1,5 @@
+import { Workbook } from '../../Workbook';
+/**
+ * 在 sheet canvas 上的事件
+ */
+export declare function handleSheetCanvasKeydown(e: KeyboardEvent, workbook: Workbook): void;

package/lib/excel/render/keyboard/handleSheetArrowKey.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Consts = require('../Consts.js');
+
+/**
+ * 在 sheet canvas 上的事件
+ */
+function handleSheetCanvasKeydown(e, workbook) {
+    var _a;
+    var currentSheet = workbook.getActiveSheet();
+    var activeCell = (_a = currentSheet.selection) === null || _a === void 0 ? void 0 : _a.activeCell;
+    if (!activeCell) {
+        return;
+    }
+    var changeActiveCell = false;
+    if (e.key === 'ArrowUp') {
+        activeCell.startRow = Math.max(0, activeCell.startRow - 1);
+        changeActiveCell = true;
+    }
+    if (e.key === 'ArrowDown') {
+        activeCell.startRow = Math.min(Consts.MAX_ROW, activeCell.startRow + 1);
+        changeActiveCell = true;
+    }
+    if (e.key === 'ArrowLeft') {
+        activeCell.startCol = Math.max(0, activeCell.startCol - 1);
+        changeActiveCell = true;
+    }
+    if (e.key === 'ArrowRight') {
+        activeCell.startCol = Math.min(Consts.MAX_COL, activeCell.startCol + 1);
+        changeActiveCell = true;
+    }
+    if (changeActiveCell) {
+        e.preventDefault();
+        activeCell.endRow = activeCell.startRow;
+        activeCell.endCol = activeCell.startCol;
+        if (currentSheet.selection) {
+            currentSheet.selection.cellRanges = [activeCell];
+            workbook.uiEvent.emit('CHANGE_SELECTION', currentSheet.selection);
+        }
+    }
+}
+
+exports.handleSheetCanvasKeydown = handleSheetCanvasKeydown;

package/lib/excel/render/scroll/Scroll.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 当前滚动条滚动的位置
+ */
+export type Scroll = {
+    left: number;
+    top: number;
+};

package/lib/excel/render/selection/Position.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 位置信息
+ */
+export interface Position {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}

package/lib/excel/render/selection/SheetSelection.d.ts

@@ -0,0 +1,29 @@
+import { Region } from 'src/excel/sheet/ViewRange';
+import { RangeRef } from '../../types/RangeRef';
+import { HitTestResult } from './hitTest';
+/**
+ * 选区定义，叫 SheetSelection 主要是为了避免和浏览器的 Selection 混淆
+ */
+export type SheetSelection = {
+    selectType: HitTestResult['type'];
+    /**
+     * 选区所在的 sheet 的区域信息
+     */
+    region: Region;
+    /**
+     * 用户名
+     */
+    user: string;
+    /**
+     * 当前选区所在的 sheet 索引
+     */
+    sheetIndex: number;
+    /**
+     * 激活的单元格
+     */
+    activeCell: RangeRef;
+    /**
+     * 选区，对应 sqref 属性
+     */
+    cellRanges: RangeRef[];
+};

package/lib/excel/render/selection/binarySearchSize.d.ts

@@ -0,0 +1,8 @@
+import { Size } from 'src/excel/sheet/ViewRange';
+/**
+ * 二分查找到到 hitTest 的位置
+ * @param sizes 位置信息
+ * @param position 要查找的位置
+ * @returns
+ */
+export declare function binarySearchSize(sizes: Size[], position: number): number;

package/lib/excel/render/selection/binarySearchSize.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 二分查找到到 hitTest 的位置
+ * @param sizes 位置信息
+ * @param position 要查找的位置
+ * @returns
+ */
+function binarySearchSize(sizes, position) {
+    var found = -1;
+    var start = 0;
+    var end = sizes.length - 1;
+    while (start <= end) {
+        var mid = Math.floor((start + end) / 2);
+        var size = sizes[mid];
+        if (size.offset <= position && size.offset + size.size > position) {
+            return mid;
+        }
+        else if (size.offset < position) {
+            start = mid + 1;
+        }
+        else {
+            end = mid - 1;
+        }
+    }
+    return found;
+}
+
+exports.binarySearchSize = binarySearchSize;

package/lib/excel/render/selection/buildHTML/buildBorder.d.ts

@@ -0,0 +1,6 @@
+import { CT_BorderPr } from '../../../../openxml/ExcelTypes';
+import { IDataProvider } from '../../../types/IDataProvider';
+/**
+ * 生成边框样式
+ */
+export declare function buildBorder(position: string, border: CT_BorderPr, dataProvider: IDataProvider): string;

package/lib/excel/render/selection/buildHTML/buildBorder.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Consts = require('../../Consts.js');
+
+/**
+ * 生成边框样式
+ */
+function buildBorder(position, border, dataProvider) {
+    var color = '';
+    if (border.color) {
+        color = dataProvider.getColor(border.color, Consts.AUTO_COLOR);
+    }
+    var borderStyle = 'solid';
+    switch (border.style) {
+        case 'dashDot':
+        case 'dashDotDot':
+        case 'dashed':
+        case 'mediumDashed':
+        case 'mediumDashDot':
+        case 'mediumDashDotDot':
+            borderStyle = 'dashed';
+            break;
+        case 'dotted':
+            borderStyle = 'dotted';
+            break;
+        case 'double':
+            borderStyle = 'double';
+            break;
+        case 'none':
+            return '';
+    }
+    if (color && color !== 'none') {
+        return "".concat(position, ": 1px ").concat(borderStyle, " ").concat(color, ": ");
+    }
+    return '';
+}
+
+exports.buildBorder = buildBorder;

package/lib/excel/render/selection/buildHTML/cellInfoToStyle.d.ts

@@ -0,0 +1,6 @@
+import { Workbook } from '../../../Workbook';
+import { CellInfo } from '../../../types/CellInfo';
+/**
+ * 生成单元格样式
+ */
+export declare function cellInfoToStyle(workbook: Workbook, cellInfo: CellInfo): string;