office-viewer 0.2.1 → 0.3.0

package/esm/excel/render/dnd/handleMousedown.js

@@ -0,0 +1,74 @@
+import { handleMousemove } from './handleMousemove.js';
+import { handleMouseup } from './handleMouseup.js';
+import { mousedownColHeader } from './mousedownColHeader.js';
+import { mousedownCorner } from './mousedownCorner.js';
+import { mousedownRowHeader } from './mousedownRowHeader.js';
+import { mousedownCell } from './mousedownCell.js';
+
+/**
+ * 处理拖拽事件，包括单元格和表头部分
+ */
+var DRAG_STATE_DEFAULT = {
+    isDragging: false,
+    dragStart: {
+        pageX: 0,
+        pageY: 0,
+        offsetX: 0,
+        offsetY: 0
+    },
+    row: 0,
+    col: 0,
+    tmpRowHeight: 0,
+    tmpColWidth: 0,
+    region: 'normal',
+    dragType: 'cell'
+};
+var dragState = JSON.parse(JSON.stringify(DRAG_STATE_DEFAULT));
+function resetDragState() {
+    Object.assign(dragState, DRAG_STATE_DEFAULT);
+}
+/**
+ * 鼠标按下事件
+ */
+function handleMousedown(workbook, hitTestResult, container, mouseEvent) {
+    // 只处理左键
+    if (mouseEvent.button !== 0) {
+        return;
+    }
+    var newSelection = null;
+    if (hitTestResult.type === 'cell') {
+        newSelection = mousedownCell(workbook, hitTestResult);
+    }
+    if (hitTestResult.type === 'row-header') {
+        newSelection = mousedownRowHeader(workbook, hitTestResult);
+    }
+    if (hitTestResult.type === 'col-header') {
+        newSelection = mousedownColHeader(workbook, hitTestResult);
+    }
+    if (hitTestResult.type === 'corner') {
+        newSelection = mousedownCorner(workbook);
+    }
+    var zoomLevel = workbook.getActiveSheet().getZoomLevel();
+    dragState.workbook = workbook;
+    dragState.container = container;
+    dragState.region = hitTestResult.region;
+    dragState.dragStart = {
+        pageX: mouseEvent.pageX,
+        pageY: mouseEvent.pageY,
+        offsetX: mouseEvent.offsetX / zoomLevel,
+        offsetY: mouseEvent.offsetY / zoomLevel
+    };
+    dragState.row = hitTestResult.startRow;
+    dragState.col = hitTestResult.startCol;
+    dragState.dragType = hitTestResult.type;
+    if (newSelection) {
+        dragState.selection = newSelection;
+        workbook.uiEvent.emit('CHANGE_SELECTION', newSelection);
+    }
+    document.addEventListener('mousemove', handleMousemove, true);
+    document.addEventListener('touchmove', handleMousemove, true);
+    document.addEventListener('mouseup', handleMouseup);
+    document.addEventListener('touchend', handleMouseup);
+}
+
+export { dragState, handleMousedown, resetDragState };

package/esm/excel/render/dnd/handleMousemove.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 鼠标拖拽过程中
+ */
+export declare function handleMousemove(mouseEvent: MouseEvent): void;

package/esm/excel/render/dnd/handleMousemove.js

@@ -0,0 +1,38 @@
+import { getMouseRelativePosition } from './getMouseRelativePosition.js';
+import { handleDragCell } from './handleDragCell.js';
+import { handleDragColGrid } from './handleDragColGrid.js';
+import { handleDragColHeader } from './handleDragColHeader.js';
+import { handleDragRowGrid } from './handleDragRowGrid.js';
+import { handleDragRowHeader } from './handleDragRowHeader.js';
+import { dragState } from './handleMousedown.js';
+
+/**
+ * 鼠标拖拽过程中
+ */
+function handleMousemove(mouseEvent) {
+    dragState.isDragging = true;
+    var _a = getMouseRelativePosition(dragState.container, mouseEvent), offsetX = _a.offsetX, offsetY = _a.offsetY;
+    var zoomLevel = dragState.workbook.getActiveSheet().getZoomLevel();
+    offsetX = offsetX / zoomLevel;
+    offsetY = offsetY / zoomLevel;
+    offsetX = Math.round(offsetX);
+    offsetY = Math.round(offsetY);
+    var dragType = dragState.dragType;
+    if (dragType === 'cell') {
+        handleDragCell(offsetX, offsetY);
+    }
+    if (dragType === 'row-grid') {
+        handleDragRowGrid(mouseEvent);
+    }
+    if (dragType === 'col-grid') {
+        handleDragColGrid(mouseEvent);
+    }
+    if (dragType === 'row-header') {
+        handleDragRowHeader(offsetX, offsetY);
+    }
+    if (dragType === 'col-header') {
+        handleDragColHeader(offsetX, offsetY);
+    }
+}
+
+export { handleMousemove };

package/esm/excel/render/dnd/handleMouseup.d.ts

@@ -0,0 +1 @@
+export declare function handleMouseup(): void;

package/esm/excel/render/dnd/handleMouseup.js

@@ -0,0 +1,17 @@
+import { removeEventListener } from './removeEventListener.js';
+import { dragState, resetDragState } from './handleMousedown.js';
+
+function handleMouseup() {
+    var _a, _b;
+    dragState.isDragging = false;
+    removeEventListener();
+    if (dragState.dragType === 'col-grid') {
+        (_a = dragState.workbook) === null || _a === void 0 ? void 0 : _a.uiEvent.emit('DRAG_COL_GRID_LINE_END', dragState.col, dragState.tmpColWidth);
+    }
+    if (dragState.dragType === 'row-grid') {
+        (_b = dragState.workbook) === null || _b === void 0 ? void 0 : _b.uiEvent.emit('DRAG_ROW_GRID_LINE_END', dragState.row, dragState.tmpRowHeight);
+    }
+    resetDragState();
+}
+
+export { handleMouseup };

package/esm/excel/render/dnd/mousedownCell.d.ts

@@ -0,0 +1,10 @@
+import type { Workbook } from '../../Workbook';
+import { SheetSelection } from '../selection/SheetSelection';
+import { HitTestResult } from '../selection/hitTest';
+/**
+ * 根据点击的单元格生成选区
+ * @param workbook
+ * @param hitTestResult
+ * @returns 新的选区
+ */
+export declare function mousedownCell(workbook: Workbook, hitTestResult: HitTestResult): SheetSelection;

package/esm/excel/render/dnd/mousedownCell.js

@@ -0,0 +1,31 @@
+import { __assign } from 'tslib';
+
+/**
+ * 根据点击的单元格生成选区
+ * @param workbook
+ * @param hitTestResult
+ * @returns 新的选区
+ */
+function mousedownCell(workbook, hitTestResult) {
+    var activeCell = {
+        startRow: hitTestResult.startRow,
+        startCol: hitTestResult.startCol,
+        endRow: hitTestResult.endRow,
+        endCol: hitTestResult.endCol
+    };
+    var newSelection = {
+        // 当前用户名为空
+        user: '',
+        region: hitTestResult.region,
+        selectType: hitTestResult.type,
+        activeCell: activeCell,
+        sheetIndex: workbook.getActiveSheet().getIndex(),
+        // 初始 cellRanges 为当前单元格
+        cellRanges: [
+            __assign({}, activeCell)
+        ]
+    };
+    return newSelection;
+}
+
+export { mousedownCell };

package/esm/excel/render/dnd/mousedownColHeader.d.ts

@@ -0,0 +1,22 @@
+import { Workbook } from '../../Workbook';
+import { RangeRef } from '../../types/RangeRef';
+import { HitTestResult } from '../selection/hitTest';
+/**
+ * 点击到列表头
+ * @param workbook
+ * @param hitTestResult
+ * @returns
+ */
+export declare function mousedownColHeader(workbook: Workbook, hitTestResult: HitTestResult): {
+    user: string;
+    region: import("../../sheet/ViewRange").Region;
+    selectType: "cell" | "corner" | "drawing" | "row-header" | "col-header" | "row-grid" | "col-grid";
+    activeCell: RangeRef;
+    sheetIndex: number;
+    cellRanges: {
+        endRow: number;
+        startRow: number;
+        startCol: number;
+        endCol: number;
+    }[];
+};

package/esm/excel/render/dnd/mousedownColHeader.js

@@ -0,0 +1,29 @@
+import { __assign } from 'tslib';
+import { MAX_ROW } from '../Consts.js';
+
+/**
+ * 点击到列表头
+ * @param workbook
+ * @param hitTestResult
+ * @returns
+ */
+function mousedownColHeader(workbook, hitTestResult) {
+    var activeCell = {
+        startRow: 0,
+        startCol: hitTestResult.startCol,
+        endRow: 0,
+        endCol: hitTestResult.endCol
+    };
+    return {
+        user: '',
+        region: hitTestResult.region,
+        selectType: hitTestResult.type,
+        activeCell: activeCell,
+        sheetIndex: workbook.getActiveSheet().getIndex(),
+        cellRanges: [
+            __assign(__assign({}, activeCell), { endRow: MAX_ROW })
+        ]
+    };
+}
+
+export { mousedownColHeader };

package/esm/excel/render/dnd/mousedownCorner.d.ts

@@ -0,0 +1,8 @@
+import { Workbook } from '../../Workbook';
+/**
+ * 点击到全选
+ * @param workbook
+ * @param hitTestResult
+ * @returns
+ */
+export declare function mousedownCorner(workbook: Workbook): import("../selection/SheetSelection").SheetSelection;

package/esm/excel/render/dnd/mousedownCorner.js

@@ -0,0 +1,13 @@
+import { selectAll } from './selectAll.js';
+
+/**
+ * 点击到全选
+ * @param workbook
+ * @param hitTestResult
+ * @returns
+ */
+function mousedownCorner(workbook) {
+    return selectAll(workbook.getActiveSheet().getIndex());
+}
+
+export { mousedownCorner };

package/esm/excel/render/dnd/mousedownRowHeader.d.ts

@@ -0,0 +1,22 @@
+import { Workbook } from '../../Workbook';
+import { RangeRef } from '../../types/RangeRef';
+import { HitTestResult } from '../selection/hitTest';
+/**
+ * 点击到行表头
+ * @param workbook
+ * @param hitTestResult
+ * @returns
+ */
+export declare function mousedownRowHeader(workbook: Workbook, hitTestResult: HitTestResult): {
+    user: string;
+    region: import("../../sheet/ViewRange").Region;
+    selectType: "cell" | "corner" | "drawing" | "row-header" | "col-header" | "row-grid" | "col-grid";
+    activeCell: RangeRef;
+    sheetIndex: number;
+    cellRanges: {
+        endCol: number;
+        startRow: number;
+        startCol: number;
+        endRow: number;
+    }[];
+};

package/esm/excel/render/dnd/mousedownRowHeader.js

@@ -0,0 +1,29 @@
+import { __assign } from 'tslib';
+import { MAX_COL } from '../Consts.js';
+
+/**
+ * 点击到行表头
+ * @param workbook
+ * @param hitTestResult
+ * @returns
+ */
+function mousedownRowHeader(workbook, hitTestResult) {
+    var activeCell = {
+        startRow: hitTestResult.startRow,
+        startCol: 0,
+        endRow: hitTestResult.endRow,
+        endCol: 0
+    };
+    return {
+        user: '',
+        region: hitTestResult.region,
+        selectType: hitTestResult.type,
+        activeCell: activeCell,
+        sheetIndex: workbook.getActiveSheet().getIndex(),
+        cellRanges: [
+            __assign(__assign({}, activeCell), { endCol: MAX_COL })
+        ]
+    };
+}
+
+export { mousedownRowHeader };

package/esm/excel/render/dnd/removeEventListener.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 移除事件监听
+ */
+export declare function removeEventListener(): void;

package/esm/excel/render/dnd/removeEventListener.js

@@ -0,0 +1,14 @@
+import { handleMousemove } from './handleMousemove.js';
+import { handleMouseup } from './handleMouseup.js';
+
+/**
+ * 移除事件监听
+ */
+function removeEventListener() {
+    document.removeEventListener('mousemove', handleMousemove, true);
+    // document.removeEventListener('touchmove', handleMousemove, true);
+    document.removeEventListener('mouseup', handleMouseup);
+    // document.removeEventListener('touchend', handleMouseup);
+}
+
+export { removeEventListener };

package/esm/excel/render/dnd/selectAll.d.ts

@@ -0,0 +1,5 @@
+import { SheetSelection } from '../selection/SheetSelection';
+/**
+ * 全选范围
+ */
+export declare function selectAll(sheetIndex: number): SheetSelection;

package/esm/excel/render/dnd/selectAll.js

@@ -0,0 +1,26 @@
+import { __assign } from 'tslib';
+import { MAX_ROW, MAX_COL } from '../Consts.js';
+
+/**
+ * 全选范围
+ */
+function selectAll(sheetIndex) {
+    var activeCell = {
+        startRow: 0,
+        startCol: 0,
+        endRow: 0,
+        endCol: 0
+    };
+    return {
+        user: '',
+        region: 'normal',
+        selectType: 'corner',
+        activeCell: activeCell,
+        sheetIndex: sheetIndex,
+        cellRanges: [
+            __assign(__assign({}, activeCell), { endRow: MAX_ROW, endCol: MAX_COL })
+        ]
+    };
+}
+
+export { selectAll };

package/esm/excel/render/drawing/BaseDrawingRender.d.ts

@@ -0,0 +1,11 @@
+import { Rect } from '../Rect';
+/**
+ * Drawing 渲染基类
+ */
+export declare class BaseDrawingRender {
+    drawingContainer: HTMLElement;
+    constructor(container: HTMLElement, displayRect: Rect, gid: string, className: string);
+    hide(): void;
+    show(): void;
+    updatePosition(displayRect: Rect): void;
+}

package/esm/excel/render/drawing/BaseDrawingRender.js

@@ -0,0 +1,29 @@
+/**
+ * Drawing 渲染基类
+ */
+var BaseDrawingRender = /** @class */ (function () {
+    function BaseDrawingRender(container, displayRect, gid, className) {
+        var picContainer = document.createElement('div');
+        picContainer.className = className;
+        picContainer.dataset.gid = gid;
+        this.drawingContainer = picContainer;
+        this.updatePosition(displayRect);
+        container.appendChild(picContainer);
+    }
+    BaseDrawingRender.prototype.hide = function () {
+        this.drawingContainer.style.display = 'none';
+    };
+    BaseDrawingRender.prototype.show = function () {
+        this.drawingContainer.style.display = 'block';
+    };
+    BaseDrawingRender.prototype.updatePosition = function (displayRect) {
+        var x = displayRect.x, y = displayRect.y, width = displayRect.width, height = displayRect.height;
+        this.drawingContainer.style.left = "".concat(x, "px");
+        this.drawingContainer.style.top = "".concat(y, "px");
+        this.drawingContainer.style.width = "".concat(width, "px");
+        this.drawingContainer.style.height = "".concat(height, "px");
+    };
+    return BaseDrawingRender;
+}());
+
+export { BaseDrawingRender };

package/esm/excel/render/drawing/EChartsRender.d.ts

@@ -0,0 +1,7 @@
+import type echarts from 'echarts';
+import { BaseDrawingRender } from './BaseDrawingRender';
+import { Rect } from '../Rect';
+export declare class EChartsRender extends BaseDrawingRender {
+    constructor(container: HTMLElement, displayRect: Rect, gid: string);
+    render(option: echarts.EChartOption): void;
+}

package/esm/excel/render/drawing/EChartsRender.js

@@ -0,0 +1,20 @@
+import { __extends } from 'tslib';
+import { BaseDrawingRender } from './BaseDrawingRender.js';
+
+var EChartsRender = /** @class */ (function (_super) {
+    __extends(EChartsRender, _super);
+    function EChartsRender(container, displayRect, gid) {
+        return _super.call(this, container, displayRect, gid, 'excel-chart') || this;
+    }
+    EChartsRender.prototype.render = function (option) {
+        var _this = this;
+        import('echarts').then(function (echarts) {
+            // @ts-ignore 奇怪为啥不对
+            var chart = echarts.init(_this.drawingContainer);
+            chart.setOption(option);
+        });
+    };
+    return EChartsRender;
+}(BaseDrawingRender));
+
+export { EChartsRender };

package/esm/excel/render/drawing/PicRender.d.ts

@@ -0,0 +1,6 @@
+import { IPicture } from '../../types/IDrawing';
+import { Rect } from '../Rect';
+import { BaseDrawingRender } from './BaseDrawingRender';
+export declare class PicRender extends BaseDrawingRender {
+    constructor(container: HTMLElement, displayRect: Rect, gid: string, pic: IPicture);
+}

package/esm/excel/render/drawing/PicRender.js

@@ -0,0 +1,57 @@
+import { __extends } from 'tslib';
+import { BaseDrawingRender } from './BaseDrawingRender.js';
+
+var PicRender = /** @class */ (function (_super) {
+    __extends(PicRender, _super);
+    function PicRender(container, displayRect, gid, pic) {
+        var _this = this;
+        var _a;
+        _this = _super.call(this, container, displayRect, gid, 'excel-pic') || this;
+        if (!pic.imgURL) {
+            console.warn('imgURL do not exist');
+            return _this;
+        }
+        var srcRect = (_a = pic.blipFill) === null || _a === void 0 ? void 0 : _a.srcRect;
+        var img = new Image();
+        img.src = pic.imgURL;
+        if (srcRect) {
+            // 根据 srcRect 的百分比来设置图片的位置及大小
+            var containerWidth = displayRect.width;
+            var containerHeight = displayRect.height;
+            var leftPercent = 0;
+            if (srcRect.l) {
+                leftPercent = parseInt(srcRect.l, 10) / 100000;
+            }
+            var topPercent = 0;
+            if (srcRect.t) {
+                topPercent = parseInt(srcRect.t, 10) / 100000;
+            }
+            var bottomPercent = 0;
+            if (srcRect.b) {
+                bottomPercent = parseInt(srcRect.b, 10) / 100000;
+            }
+            var rightPercent = 0;
+            if (srcRect.r) {
+                rightPercent = parseInt(srcRect.r, 10) / 100000;
+            }
+            var width = containerWidth * (1 + leftPercent + rightPercent);
+            var height = containerHeight * (1 + topPercent + bottomPercent);
+            var top_1 = -containerHeight * topPercent;
+            var left = -containerWidth * leftPercent;
+            img.style.width = "".concat(width, "px");
+            img.style.height = "".concat(height, "px");
+            img.style.top = "".concat(top_1, "px");
+            img.style.left = "".concat(left, "px");
+            img.style.position = 'absolute';
+        }
+        else {
+            img.style.height = '100%';
+            img.style.width = '100%';
+        }
+        _this.drawingContainer.appendChild(img);
+        return _this;
+    }
+    return PicRender;
+}(BaseDrawingRender));
+
+export { PicRender };

package/esm/excel/render/drawing/ResizeBox.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 用于缩放 drawing 的边框，目前没实现编辑功能所以还不能用，只是展示
+ */
+export declare class ResizeBox {
+    /**
+     * 边框元素
+     */
+    box: HTMLElement;
+    /**
+     * 左上角的操作节点
+     */
+    topLeft: HTMLElement;
+    /**
+     * 顶部的操作节点
+     */
+    top: HTMLElement;
+    /**
+     * 右上角的操作节点
+     */
+    topRight: HTMLElement;
+    /**
+     * 左侧的操作节点
+     */
+    left: HTMLElement;
+    /**
+     * 右侧的操作节点
+     */
+    right: HTMLElement;
+    /**
+     * 左下角的操作节点
+     */
+    bottomLeft: HTMLElement;
+    /**
+     * 底部的操作节点
+     */
+    bottom: HTMLElement;
+    /**
+     * 右下角的操作节点
+     */
+    bottomRight: HTMLElement;
+    /**
+     * 控制节点的大小，需要和 CSS 里保持一致
+     */
+    controllerSize: number;
+    constructor(container: HTMLElement);
+    /**
+     * 更新位置信息
+     */
+    updatePosition(x: number, y: number, width: number, height: number): void;
+    hide(): void;
+}

package/esm/excel/render/drawing/ResizeBox.js

@@ -0,0 +1,83 @@
+import { H } from '../../../util/H.js';
+
+/**
+ * 用于缩放 drawing 的边框，目前没实现编辑功能所以还不能用，只是展示
+ */
+var ResizeBox = /** @class */ (function () {
+    function ResizeBox(container) {
+        /**
+         * 控制节点的大小，需要和 CSS 里保持一致
+         */
+        this.controllerSize = 14;
+        this.box = H('div', {
+            className: 'ov-excel-resize-box',
+            parent: container
+        });
+        this.topLeft = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        this.top = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        this.topRight = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        this.left = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        this.right = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        this.bottomLeft = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        this.bottom = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        this.bottomRight = H('div', {
+            className: 'ov-excel-resize-box-control',
+            parent: this.box
+        });
+        // 默认隐藏，点击的时候才开启
+        this.hide();
+    }
+    /**
+     * 更新位置信息
+     */
+    ResizeBox.prototype.updatePosition = function (x, y, width, height) {
+        this.box.style.display = 'block';
+        this.box.style.left = "".concat(x, "px");
+        this.box.style.top = "".concat(y, "px");
+        this.box.style.width = "".concat(width, "px");
+        this.box.style.height = "".concat(height, "px");
+        this.topLeft.style.left = '-7px';
+        this.topLeft.style.top = '-7px';
+        this.top.style.left = "".concat(width / 2 - this.controllerSize / 2, "px");
+        this.top.style.top = '-7px';
+        this.topRight.style.right = '-7px';
+        this.topRight.style.top = '-7px';
+        this.left.style.left = '-7px';
+        this.left.style.top = "".concat(height / 2 - this.controllerSize / 2, "px");
+        this.right.style.right = '-7px';
+        this.right.style.top = "".concat(height / 2 - this.controllerSize / 2, "px");
+        this.bottomLeft.style.left = '-7px';
+        this.bottomLeft.style.bottom = '-7px';
+        this.bottom.style.left = "".concat(width / 2 - this.controllerSize / 2, "px");
+        this.bottom.style.bottom = '-7px';
+        this.bottomRight.style.right = '-7px';
+        this.bottomRight.style.bottom = '-7px';
+    };
+    ResizeBox.prototype.hide = function () {
+        this.box.style.display = 'none';
+    };
+    return ResizeBox;
+}());
+
+export { ResizeBox };