office-viewer 0.2.1 → 0.3.0

package/lib/excel/render/sparkline/renderColumn.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var applyColor = require('./applyColor.js');
+
+/**
+ * 绘制柱状图
+ */
+function renderColumn(ctx, width, height, min, max, data, sparklineOptions, getColor) {
+    var e_1, _a;
+    var color = getColor(sparklineOptions['x14:colorSeries']);
+    // 柱状图之间的间隔
+    var gap = 2;
+    var diff = max - min;
+    // 只有一个点就只绘制中间
+    ctx.fillStyle = color;
+    if (data.length === 1) {
+        var firstData = data[0];
+        if (firstData !== undefined) {
+            var columnWidth_1 = 6;
+            ctx.fillRect(width / 2 - 1, height - ((firstData - min) / diff) * height, columnWidth_1, ((firstData - min) / diff) * height);
+        }
+        return;
+    }
+    var columnWidth = (width - gap * (data.length - 1)) / data.length;
+    var minColumnHeight = 1;
+    try {
+        for (var _b = tslib.__values(data.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = tslib.__read(_c.value, 2), index = _d[0], value = _d[1];
+            if (value === undefined) {
+                continue;
+            }
+            applyColor.applyColor(ctx, data, index, value, min, max, sparklineOptions, color, getColor);
+            var x = index * (columnWidth + gap);
+            var columnHeight = Math.max(minColumnHeight, ((value - min) / diff) * height);
+            var y = height - columnHeight;
+            ctx.fillRect(x, y, columnWidth, columnHeight);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+
+exports.renderColumn = renderColumn;

package/lib/excel/render/sparkline/renderLine.d.ts

@@ -0,0 +1,7 @@
+import { CT_Color } from '../../../openxml/ExcelTypes';
+import { X14SparklineGroup } from '../../types/X14Sparkline/X14SparklineGroup';
+import { Numbers } from './Numbers';
+/**
+ * 绘制折线图
+ */
+export declare function renderLine(ctx: OffscreenCanvasRenderingContext2D, width: number, height: number, min: number, max: number, data: Numbers, sparklineOptions: X14SparklineGroup, getColor: (color?: CT_Color) => string): void;

package/lib/excel/render/sparkline/renderLine.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var applyColor = require('./applyColor.js');
+
+/**
+ * 绘制折线图
+ */
+function renderLine(ctx, width, height, min, max, data, sparklineOptions, getColor) {
+    var e_1, _a, e_2, _b, e_3, _c;
+    var padding = 2;
+    // 为了避免线跑出去，需要在两边加上一些空白
+    height -= padding * 2;
+    width -= padding * 2;
+    var color = getColor(sparklineOptions['x14:colorSeries']);
+    // 只有一个点没法画
+    if (data.length < 1) {
+        console.warn('sparkline 只有一个数据', data);
+        return;
+    }
+    var step = width / (data.length - 1);
+    // 绘制坐标轴
+    if (sparklineOptions.displayXAxis) {
+        ctx.beginPath();
+        ctx.strokeStyle = color;
+        ctx.lineWidth = sparklineOptions.lineWeight || 1.2;
+        ctx.moveTo(0 + padding, height / 2 + padding);
+        ctx.lineTo(width, height / 2);
+        ctx.stroke();
+    }
+    // 画线
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = sparklineOptions.lineWeight || 1.2;
+    var points = [];
+    // 上一个是空值，则需要 moveTo
+    var lastIsUndefined = false;
+    try {
+        for (var _d = tslib.__values(data.entries()), _e = _d.next(); !_e.done; _e = _d.next()) {
+            var _f = tslib.__read(_e.value, 2), index = _f[0], value = _f[1];
+            if (value === undefined) {
+                lastIsUndefined = true;
+                continue;
+            }
+            var x = index * step + padding;
+            var y = height - ((value - min) / (max - min)) * height + padding;
+            if (index === 0 && lastIsUndefined) {
+                ctx.moveTo(x, y);
+                lastIsUndefined = false;
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+            points.push({ x: x, y: y, index: index, value: value });
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    ctx.stroke();
+    // 画点
+    if (sparklineOptions.markers) {
+        try {
+            for (var points_1 = tslib.__values(points), points_1_1 = points_1.next(); !points_1_1.done; points_1_1 = points_1.next()) {
+                var point = points_1_1.value;
+                ctx.beginPath();
+                applyColor.applyColor(ctx, data, point.index, point.value, min, max, sparklineOptions, color, getColor);
+                ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
+                ctx.fillStyle = color;
+                ctx.fill();
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (points_1_1 && !points_1_1.done && (_b = points_1.return)) _b.call(points_1);
+            }
+            finally { if (e_2) throw e_2.error; }
+        }
+    }
+    else {
+        try {
+            // 画特定的点
+            for (var points_2 = tslib.__values(points), points_2_1 = points_2.next(); !points_2_1.done; points_2_1 = points_2.next()) {
+                var point = points_2_1.value;
+                var showRender = applyColor.applyColor(ctx, data, point.index, point.value, min, max, sparklineOptions, color, getColor);
+                if (!showRender) {
+                    continue;
+                }
+                ctx.beginPath();
+                ctx.arc(point.x, point.y, 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+        finally {
+            try {
+                if (points_2_1 && !points_2_1.done && (_c = points_2.return)) _c.call(points_2);
+            }
+            finally { if (e_3) throw e_3.error; }
+        }
+    }
+}
+
+exports.renderLine = renderLine;

package/lib/excel/render/sparkline/renderSparkline.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 绘制 sparkline，这里的坐标都是从 0 开始
+ */
+import { CT_Color } from '../../../openxml/ExcelTypes';
+import { X14SparklineGroup } from '../../types/X14Sparkline/X14SparklineGroup';
+/**
+ * 绘制 Sparkline
+ */
+export declare function renderSparkline(ctx: OffscreenCanvasRenderingContext2D, width: number, height: number, data: string[], sparklineOptions: X14SparklineGroup, getColor: (color?: CT_Color) => string): void;

package/lib/excel/render/sparkline/renderSparkline.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var renderLine = require('./renderLine.js');
+var renderColumn = require('./renderColumn.js');
+var renderStacked = require('./renderStacked.js');
+var number = require('../../../util/number.js');
+
+/**
+ * 绘制 sparkline，这里的坐标都是从 0 开始
+ */
+/**
+ * 绘制 Sparkline
+ */
+function renderSparkline(ctx, width, height, data, sparklineOptions, getColor) {
+    var type = sparklineOptions.type || 'line';
+    var minVal;
+    var maxVal;
+    var numbers = data.map(function (d) {
+        if (d === '') {
+            return undefined;
+        }
+        var num = parseFloat(d);
+        if (minVal === undefined) {
+            minVal = num;
+        }
+        if (maxVal === undefined) {
+            maxVal = num;
+        }
+        if (number.lt(num, minVal)) {
+            minVal = num;
+        }
+        if (number.gt(num, maxVal)) {
+            maxVal = num;
+        }
+        return num;
+    });
+    if (numbers.length === 0 || minVal === undefined || maxVal === undefined) {
+        console.warn('sparkline 数据不完整', numbers);
+        return;
+    }
+    if (sparklineOptions.manualMin !== undefined) {
+        minVal = sparklineOptions.manualMin;
+    }
+    if (sparklineOptions.manualMax !== undefined) {
+        maxVal = sparklineOptions.manualMax;
+    }
+    if (type === 'line') {
+        renderLine.renderLine(ctx, width, height, minVal, maxVal, numbers, sparklineOptions, getColor);
+    }
+    else if (type === 'column') {
+        renderColumn.renderColumn(ctx, width, height, minVal, maxVal, numbers, sparklineOptions, getColor);
+    }
+    else if (type === 'stacked') {
+        renderStacked.renderStacked(ctx, width, height, minVal, maxVal, numbers, sparklineOptions, getColor);
+    }
+    else {
+        console.warn('不支持的 sparkline 类型', type);
+    }
+}
+
+exports.renderSparkline = renderSparkline;

package/lib/excel/render/sparkline/renderStacked.d.ts

@@ -0,0 +1,7 @@
+import { CT_Color } from '../../../openxml/ExcelTypes';
+import { X14SparklineGroup } from '../../types/X14Sparkline/X14SparklineGroup';
+import { Numbers } from './Numbers';
+/**
+ * render win/loss sparkline
+ */
+export declare function renderStacked(ctx: OffscreenCanvasRenderingContext2D, width: number, height: number, min: number, max: number, data: Numbers, sparklineOptions: X14SparklineGroup, getColor: (color?: CT_Color) => string): void;

package/lib/excel/render/sparkline/renderStacked.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var applyColor = require('./applyColor.js');
+var number = require('../../../util/number.js');
+
+/**
+ * render win/loss sparkline
+ */
+function renderStacked(ctx, width, height, min, max, data, sparklineOptions, getColor) {
+    var e_1, _a;
+    var color = getColor(sparklineOptions['x14:colorSeries']);
+    var colorNegative = getColor(sparklineOptions['x14:colorNegative']);
+    // 柱状图之间的间隔
+    var gap = 2;
+    var columnHeight = height / 2;
+    // 只有一个点就只绘制中间
+    if (data.length === 1) {
+        var firstData = data[0];
+        if (firstData !== undefined) {
+            var columnWidth_1 = 6;
+            if (number.gt(firstData, 0)) {
+                ctx.fillStyle = color;
+                ctx.fillRect(width / 2, 0, columnWidth_1, columnHeight);
+            }
+            else {
+                ctx.fillStyle = colorNegative;
+                ctx.fillRect(width / 2, height - columnHeight, columnWidth_1, columnHeight);
+            }
+        }
+        return;
+    }
+    var columnWidth = (width - gap * (data.length - 1)) / data.length;
+    try {
+        for (var _b = tslib.__values(data.entries()), _c = _b.next(); !_c.done; _c = _b.next()) {
+            var _d = tslib.__read(_c.value, 2), index = _d[0], value = _d[1];
+            if (value === undefined) {
+                continue;
+            }
+            applyColor.applyColor(ctx, data, index, value, min, max, sparklineOptions, color, getColor);
+            var x = index * (columnWidth + gap);
+            var y = void 0;
+            if (number.gt(value, 0)) {
+                ctx.fillStyle = color;
+                y = 0;
+            }
+            else {
+                ctx.fillStyle = colorNegative;
+                y = height - columnHeight;
+            }
+            ctx.fillRect(x, y, columnWidth, columnHeight);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+}
+
+exports.renderStacked = renderStacked;

package/lib/excel/render/ui/Button.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 简单的按钮组件
+ */
+export declare class Button {
+    button: HTMLButtonElement;
+    constructor(container: HTMLElement, style: 'primary' | 'normal', text: string, onClick: () => void);
+}

package/lib/excel/render/ui/CheckBox.d.ts

@@ -0,0 +1,16 @@
+export type CheckBoxOption = {
+    value: string;
+    text: string;
+    checked: boolean;
+};
+export declare class CheckBox {
+    checkboxContainer: HTMLDivElement;
+    checkbox: HTMLInputElement;
+    option: CheckBoxOption;
+    constructor(container: HTMLElement, option: CheckBoxOption, onChange: (checked: boolean, option: CheckBoxOption) => void);
+    getText(): string;
+    setChecked(checked: boolean): void;
+    isChecked(): boolean;
+    show(): void;
+    hide(): void;
+}

package/lib/excel/render/ui/CheckBox.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var H = require('../../../util/H.js');
+
+var CheckBox = /** @class */ (function () {
+    function CheckBox(container, option, onChange) {
+        this.option = option;
+        var checkboxContainer = H.H('div', {
+            className: 'excel-checkbox-container',
+            parent: container
+        });
+        var label = H.H('label', {
+            parent: checkboxContainer
+        });
+        this.checkboxContainer = checkboxContainer;
+        var checkbox = H.H('input', {
+            type: 'checkbox',
+            parent: label
+        });
+        this.checkbox = checkbox;
+        checkbox.checked = option.checked;
+        checkbox.onchange = function () {
+            option.checked = checkbox.checked;
+            onChange(checkbox.checked, option);
+        };
+        H.H('span', {
+            innerText: option.text,
+            parent: label
+        });
+    }
+    CheckBox.prototype.getText = function () {
+        return this.option.text;
+    };
+    CheckBox.prototype.setChecked = function (checked) {
+        this.option.checked = checked;
+        this.checkbox.checked = checked;
+    };
+    CheckBox.prototype.isChecked = function () {
+        return this.checkbox.checked;
+    };
+    CheckBox.prototype.show = function () {
+        this.checkboxContainer.style.display = 'block';
+    };
+    CheckBox.prototype.hide = function () {
+        this.checkboxContainer.style.display = 'none';
+    };
+    return CheckBox;
+}());
+
+exports.CheckBox = CheckBox;

package/lib/excel/render/ui/CheckBoxList.d.ts

@@ -0,0 +1,16 @@
+import { CheckBox, CheckBoxOption } from './CheckBox';
+import { Input } from './Input';
+/**
+ * 多选框列表，目前用在自动筛选的条件选择
+ */
+export declare class CheckBoxList {
+    options: CheckBoxOption[];
+    listContainer: HTMLDivElement;
+    checkBoxes: CheckBox[];
+    checkAllBox: CheckBox;
+    searchInput: Input;
+    constructor(container: HTMLElement, selectAllText: string, searchPlaceholder: string | undefined, options: CheckBoxOption[], onCheck: (checked: boolean, option: CheckBoxOption, options: CheckBoxOption[]) => void);
+    handleSearch(text: string): void;
+    syncCheckAll(): void;
+    getOptions(): CheckBoxOption[];
+}

package/lib/excel/render/ui/CheckBoxList.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var H = require('../../../util/H.js');
+var CheckBox = require('./CheckBox.js');
+var Input = require('./Input.js');
+
+/**
+ * 多选框列表，目前用在自动筛选的条件选择
+ */
+var CheckBoxList = /** @class */ (function () {
+    function CheckBoxList(container, selectAllText, searchPlaceholder, options, onCheck) {
+        var e_1, _a;
+        if (searchPlaceholder === void 0) { searchPlaceholder = ''; }
+        var _this = this;
+        this.checkBoxes = [];
+        this.options = options;
+        var wrapper = H.H('div', {
+            className: 'excel-checkbox-list-wrapper',
+            parent: container
+        });
+        var searchInput = new Input.Input(wrapper, searchPlaceholder, '', function (text) {
+            _this.handleSearch(text);
+        });
+        this.searchInput = searchInput;
+        var listContainer = H.H('div', {
+            className: 'excel-checkbox-list',
+            parent: wrapper
+        });
+        this.listContainer = listContainer;
+        var checkAllOption = {
+            value: '__all__',
+            text: selectAllText,
+            checked: true
+        };
+        var checkAll = new CheckBox.CheckBox(listContainer, checkAllOption, function (checked) {
+            _this.checkBoxes.forEach(function (checkbox) {
+                checkbox.setChecked(checked);
+            });
+            onCheck(checked, checkAllOption, options);
+        });
+        this.checkAllBox = checkAll;
+        try {
+            for (var options_1 = tslib.__values(options), options_1_1 = options_1.next(); !options_1_1.done; options_1_1 = options_1.next()) {
+                var option = options_1_1.value;
+                var checkbox = new CheckBox.CheckBox(listContainer, option, function (checked, option) {
+                    onCheck(checked, option, options);
+                    _this.syncCheckAll();
+                });
+                this.checkBoxes.push(checkbox);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (options_1_1 && !options_1_1.done && (_a = options_1.return)) _a.call(options_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        this.syncCheckAll();
+    }
+    CheckBoxList.prototype.handleSearch = function (text) {
+        var e_2, _a, e_3, _b;
+        if (text) {
+            try {
+                // 做一下过滤
+                for (var _c = tslib.__values(this.checkBoxes), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var checkbox = _d.value;
+                    if (checkbox.getText().toLowerCase().indexOf(text.toLowerCase()) > -1) {
+                        checkbox.show();
+                    }
+                    else {
+                        checkbox.hide();
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+        }
+        else {
+            try {
+                for (var _e = tslib.__values(this.checkBoxes), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var checkbox = _f.value;
+                    checkbox.show();
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+        }
+    };
+    CheckBoxList.prototype.syncCheckAll = function () {
+        var allChecked = this.checkBoxes.every(function (checkbox) { return checkbox.isChecked(); });
+        this.checkAllBox.setChecked(allChecked);
+    };
+    CheckBoxList.prototype.getOptions = function () {
+        return this.options;
+    };
+    return CheckBoxList;
+}());
+
+exports.CheckBoxList = CheckBoxList;

package/lib/excel/render/ui/Divider.d.ts

@@ -0,0 +1,3 @@
+export declare class Divider {
+    constructor(container: HTMLElement);
+}

package/lib/excel/render/ui/Divider.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var H = require('../../../util/H.js');
+
+var Divider = /** @class */ (function () {
+    function Divider(container) {
+        H.H('div', {
+            className: 'excel-divider',
+            parent: container
+        });
+    }
+    return Divider;
+}());
+
+exports.Divider = Divider;

package/lib/excel/render/ui/Input.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 简单的 input 组件 封装
+ */
+export declare class Input {
+    input: HTMLInputElement;
+    constructor(container: HTMLElement, placeholder: string, value: string, onChange: (value: string) => void, style?: 'normal' | 'borderLess', options?: string[]);
+    getElement(): HTMLInputElement;
+    getValue(): string;
+    setValue(text: string): void;
+    force(): void;
+}

package/lib/excel/render/ui/Input.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 简单的 input 组件 封装
+ */
+var inputId = 0;
+var Input = /** @class */ (function () {
+    function Input(container, placeholder, value, onChange, style, options) {
+        if (style === void 0) { style = 'normal'; }
+        if (options === void 0) { options = []; }
+        var _this = this;
+        this.input = document.createElement('input');
+        this.input.value = value;
+        this.input.placeholder = placeholder;
+        container.appendChild(this.input);
+        this.input.className = 'excel-input';
+        if (style === 'borderLess') {
+            this.input.classList.add('excel-input-border-less');
+        }
+        this.input.oninput = function () {
+            onChange(_this.input.value);
+        };
+        if (options.length) {
+            var datalist_1 = document.createElement('datalist');
+            datalist_1.id = "".concat(inputId++, "-list");
+            container.appendChild(datalist_1);
+            options.forEach(function (option) {
+                var optionElement = document.createElement('option');
+                optionElement.value = option;
+                datalist_1.appendChild(optionElement);
+            });
+            this.input.setAttribute('list', datalist_1.id);
+        }
+    }
+    Input.prototype.getElement = function () {
+        return this.input;
+    };
+    Input.prototype.getValue = function () {
+        return this.input.value;
+    };
+    Input.prototype.setValue = function (text) {
+        this.input.value = text;
+    };
+    Input.prototype.force = function () {
+        this.input.focus();
+    };
+    return Input;
+}());
+
+exports.Input = Input;

package/lib/excel/render/ui/Radio.d.ts

@@ -0,0 +1,11 @@
+/**
+ * radio 的简单封装
+ */
+export declare class Radio<ValueType extends string> {
+    element: HTMLDivElement;
+    constructor(container: HTMLElement, options: Array<{
+        value: ValueType;
+        text: string;
+    }>, defaultValue: ValueType, onChange?: (value: string) => void);
+    getValue(): ValueType;
+}