ranui 0.1.6 → 0.1.7

package/dist/index-a216f328.js

@@ -0,0 +1,662 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { e as exceljsExports, l as lodashExports, t as tinycolor, S as Spreadsheet } from "./vendor-f71e6f68.js";
+import { t as timestampToTime } from "./index-d2d69b06.js";
+import { g as getLightColor, a as getDarkColor } from "./colz-746223ab.js";
+const themeColor = [
+  "#FFFFFF",
+  "#000000",
+  "#BFBFBF",
+  "#323232",
+  "#4472C4",
+  "#ED7D31",
+  "#A5A5A5",
+  "#FFC000",
+  "#5B9BD5",
+  "#71AD47"
+];
+const indexedColor = [
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#000000",
+  "#FFFFFF",
+  "#FF0000",
+  "#00FF00",
+  "#0000FF",
+  "#FFFF00",
+  "#FF00FF",
+  "#00FFFF",
+  "#800000",
+  "#008000",
+  "#000080",
+  "#808000",
+  "#800080",
+  "#008080",
+  "#C0C0C0",
+  "#808080",
+  "#9999FF",
+  "#993366",
+  "#FFFFCC",
+  "#CCFFFF",
+  "#660066",
+  "#FF8080",
+  "#0066CC",
+  "#CCCCFF",
+  "#000080",
+  "#FF00FF",
+  "#FFFF00",
+  "#00FFFF",
+  "#800080",
+  "#800000",
+  "#008080",
+  "#0000FF",
+  "#00CCFF",
+  "#CCFFFF",
+  "#CCFFCC",
+  "#FFFF99",
+  "#99CCFF",
+  "#FF99CC",
+  "#CC99FF",
+  "#FFCC99",
+  "#3366FF",
+  "#33CCCC",
+  "#99CC00",
+  "#FFCC00",
+  "#FF9900",
+  "#FF6600",
+  "#666699",
+  "#969696",
+  "#003366",
+  "#339966",
+  "#003300",
+  "#333300",
+  "#993300",
+  "#993366",
+  "#333399",
+  "#333333",
+  "#FFFFFF"
+];
+const defaultColWidth$1 = 80;
+const defaultRowHeight$1 = 24;
+function readExcelData(buffer) {
+  try {
+    const wb = new exceljsExports.Workbook();
+    return wb.xlsx.load(buffer);
+  } catch (e) {
+    console.warn(e);
+    return Promise.reject(e);
+  }
+}
+function transferColumns(excelSheet, spreadSheet, options) {
+  for (let i = 0; i < (excelSheet.columns || []).length; i++) {
+    spreadSheet.cols[i.toString()] = {};
+    if (excelSheet.columns[i].width) {
+      spreadSheet.cols[i.toString()].width = excelSheet.columns[i].width * 6 + (options.widthOffset || 0);
+    } else {
+      spreadSheet.cols[i.toString()].width = defaultColWidth$1 + (options.widthOffset || 0);
+    }
+  }
+  spreadSheet.cols.len = Math.max(
+    Object.keys(spreadSheet.cols).length,
+    options.minColLength || 0
+  );
+}
+function getCellText(cell) {
+  const { numFmt, value, type } = cell;
+  switch (type) {
+    case 2:
+      try {
+        if (cell.style.numFmt) {
+          if (cell.style.numFmt.endsWith("%")) {
+            const precision = cell.style.numFmt.match(/\.(\d+)%/);
+            if (precision) {
+              return (Number(value) * 100).toFixed(precision[1].length) + "%";
+            } else {
+              return Number(value) * 100 + "%";
+            }
+          } else if (/0(?:\.0+)?/.test(cell.style.numFmt)) {
+            if (Number(value) === 0 && cell.style.numFmt.startsWith("_")) {
+              return "-";
+            }
+            let precision = cell.style.numFmt.match(/0\.(0+)(_|;|$)/);
+            if (precision) {
+              precision = precision[1].length;
+            } else {
+              precision = 0;
+            }
+            let result = Number(value).toFixed(precision) + "";
+            if (cell.style.numFmt.includes("#,##")) {
+              result = result.split(".");
+              const number = result[0].split("").reverse();
+              const newNumber = [];
+              for (let i = 0; i < number.length; i++) {
+                newNumber.push(number[i]);
+                if ((i + 1) % 3 === 0 && i < number.length - 1 && number[i + 1] !== "-") {
+                  newNumber.push(",");
+                }
+              }
+              result[0] = newNumber.reverse().join("");
+              result = result.join(".");
+            }
+            return result;
+          }
+        }
+        return value + "";
+      } catch (e) {
+        return value;
+      }
+    case 3:
+      return value;
+    case 4:
+      switch (numFmt) {
+        case "mm-dd-yy":
+          return timestampToTime(value).format("YYYY/MM/DD");
+        case "[$-F800]dddd, mmmm dd, yyyy":
+          return timestampToTime(value).format("YYYY年M月D日 ddd");
+        case 'm"月"d"日";@':
+          return timestampToTime(value).format("M月D日");
+        case "yyyy/m/d h:mm;@":
+        case 'm/d/yy "h":mm':
+          return timestampToTime(value).subtract(8, "hour").format("YYYY/M/DD HH:mm");
+        case "h:mm;@":
+          return timestampToTime(value).format("HH:mm");
+        default:
+          return timestampToTime(value).format("YYYY-MM-DD");
+      }
+    case 5:
+      return value.text;
+    case 6:
+      return lodashExports.get(value, "result.error") || value.result;
+    case 8:
+      return cell.text;
+    default:
+      return value;
+  }
+}
+function transferArgbColor(originColor) {
+  if (typeof originColor === "object") {
+    return "#000000";
+  }
+  if (/^#?[a-f\d]{6}$/i.test(originColor)) {
+    return originColor.startsWith("#") ? originColor : "#" + originColor;
+  }
+  originColor = originColor.trim().toLowerCase();
+  const color = {};
+  try {
+    const argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
+      originColor
+    ) || "";
+    color.r = parseInt(argb[2], 16);
+    color.g = parseInt(argb[3], 16);
+    color.b = parseInt(argb[4], 16);
+    color.a = parseInt(argb[1], 16) / 255;
+    return tinycolor(
+      `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`
+    ).toHexString();
+  } catch (e) {
+    console.warn(e);
+  }
+}
+function transferThemeColor(themeIndex, tint) {
+  if (themeIndex > 9) {
+    return "#C7C9CC";
+  }
+  if (typeof tint === "undefined") {
+    return themeColor[themeIndex];
+  } else if (tint > 0) {
+    return getLightColor(themeColor[themeIndex], tint);
+  } else {
+    return getDarkColor(themeColor[themeIndex], Math.abs(tint));
+  }
+}
+function getStyle(cell) {
+  cell.style = lodashExports.cloneDeep(cell.style);
+  let backGroundColor = null;
+  if (cell.style.fill && cell.style.fill.fgColor) {
+    if (cell.style.fill.fgColor.argb) {
+      backGroundColor = transferArgbColor(cell.style.fill.fgColor.argb);
+    } else if (Object.prototype.hasOwnProperty.call(cell.style.fill.fgColor, "theme")) {
+      backGroundColor = transferThemeColor(
+        cell.style.fill.fgColor.theme,
+        cell.style.fill.fgColor.tint
+      );
+    } else if (cell.style.fill.fgColor.indexed) {
+      backGroundColor = indexedColor[cell.style.fill.fgColor.indexed] || "#C7C9CC";
+    } else {
+      backGroundColor = "#C7C9CC";
+    }
+  }
+  if (backGroundColor) {
+    cell.style.bgcolor = backGroundColor;
+  }
+  let fontColor = null;
+  if (cell.style.font && cell.style.font.color) {
+    if (cell.style.font.color.argb) {
+      fontColor = transferArgbColor(cell.style.font.color.argb);
+    } else if (Object.prototype.hasOwnProperty.call(cell.style.font.color, "theme")) {
+      fontColor = transferThemeColor(
+        cell.style.font.color.theme,
+        cell.style.font.color.tint
+      );
+    } else if (cell.style.font.color.indexed) {
+      fontColor = indexedColor[cell.style.font.color.indexed] || "#000000";
+    } else {
+      fontColor = "#000000";
+    }
+  }
+  if (fontColor) {
+    cell.style.color = fontColor;
+  }
+  if (cell.style.alignment) {
+    if (cell.style.alignment.horizontal) {
+      cell.style.align = cell.style.alignment.horizontal;
+    }
+    if (cell.style.alignment.vertical) {
+      cell.style.valign = cell.style.alignment.vertical;
+    }
+  }
+  if (cell.style.alignment && cell.style.alignment.wrapText) {
+    cell.style.textwrap = true;
+  }
+  if (cell.style.border) {
+    const styleBorder = {};
+    Object.keys(cell.style.border).forEach((position) => {
+      const originBorder = cell.style.border[position];
+      let bordColor = "#000000";
+      if (typeof originBorder.color === "string") {
+        bordColor = originBorder.color;
+      } else if (originBorder.color) {
+        if (originBorder.color.argb) {
+          bordColor = transferArgbColor(originBorder.color.argb) || "";
+        } else if (Object.prototype.hasOwnProperty.call(originBorder.color, "theme")) {
+          bordColor = transferThemeColor(
+            originBorder.color.theme,
+            originBorder.color.tint
+          );
+        } else if (originBorder.color.indexed) {
+          bordColor = indexedColor[originBorder.color.indexed];
+        }
+      }
+      styleBorder[position] = [originBorder.style || "thin", bordColor];
+    });
+    cell.style.border2 = { ...cell.style.border };
+    cell.style.border = styleBorder;
+  }
+  return cell.style;
+}
+function transferExcelToSpreadSheet(workbook, options) {
+  const workbookData = [];
+  workbook.eachSheet((sheet) => {
+    const sheetData = {
+      name: sheet.name,
+      styles: [],
+      rows: {},
+      cols: {},
+      merges: [],
+      media: []
+    };
+    const mergeAddressData = [];
+    for (const mergeRange in sheet._merges) {
+      sheetData.merges.push(sheet._merges[mergeRange].shortRange);
+      const mergeAddress = {};
+      mergeAddress.startAddress = sheet._merges[mergeRange].tl;
+      mergeAddress.endAddress = sheet._merges[mergeRange].br;
+      mergeAddress.YRange = sheet._merges[mergeRange].model.bottom - sheet._merges[mergeRange].model.top;
+      mergeAddress.XRange = sheet._merges[mergeRange].model.right - sheet._merges[mergeRange].model.left;
+      mergeAddressData.push(mergeAddress);
+    }
+    transferColumns(sheet, sheetData, options);
+    (sheet._rows || []).forEach((row, spreadSheetRowIndex) => {
+      sheetData.rows[spreadSheetRowIndex] = { cells: {} };
+      if (row.height) {
+        sheetData.rows[spreadSheetRowIndex].height = row.height + (options.heightOffset || 0);
+      } else {
+        sheetData.rows[spreadSheetRowIndex].height = defaultRowHeight$1 + (options.heightOffset || 0);
+      }
+      (row._cells || []).forEach((cell, spreadSheetColIndex) => {
+        sheetData.rows[spreadSheetRowIndex].cells[spreadSheetColIndex] = {};
+        const mergeAddress = lodashExports.find(mergeAddressData, function(o) {
+          return o.startAddress === cell._address;
+        });
+        if (mergeAddress && cell.master.address !== mergeAddress.startAddress) {
+          return;
+        }
+        if (mergeAddress) {
+          sheetData.rows[spreadSheetRowIndex].cells[spreadSheetColIndex].merge = [mergeAddress.YRange, mergeAddress.XRange];
+        }
+        sheetData.rows[spreadSheetRowIndex].cells[spreadSheetColIndex].text = getCellText(cell);
+        sheetData.styles.push(getStyle(cell));
+        sheetData.rows[spreadSheetRowIndex].cells[spreadSheetColIndex].style = sheetData.styles.length - 1;
+      });
+    });
+    if (sheetData._media) {
+      sheetData.media = sheetData._media;
+    }
+    sheetData.rows.len = Math.max(Object.keys(sheetData.rows).length, 100);
+    workbookData.push(sheetData);
+  });
+  return {
+    workbookData,
+    workbookSource: workbook,
+    medias: workbook.media || []
+  };
+}
+let cache = [];
+function renderImage(ctx, medias, sheet, offset) {
+  if (sheet && sheet._media.length) {
+    sheet._media.forEach((media) => {
+      const { imageId, range, type } = media;
+      if (type === "image") {
+        const position = calcPosition(sheet, range, offset);
+        drawImage(ctx, imageId, medias[imageId], position);
+      }
+    });
+  }
+}
+const clipWidth = 60;
+const clipHeight = 25;
+const defaultColWidth = 80;
+const defaultRowHeight = 24;
+const devicePixelRatio = window.devicePixelRatio;
+function calcPosition(sheet, range, offset) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const { tl = {}, br = {} } = range;
+  const { nativeCol, nativeColOff, nativeRow, nativeRowOff } = tl;
+  let basicX = clipWidth;
+  let basicY = clipHeight;
+  for (let i = 0; i < nativeCol; i++) {
+    basicX += ((_b = (_a = sheet == null ? void 0 : sheet._columns) == null ? void 0 : _a[i]) == null ? void 0 : _b.width) * 6 || defaultColWidth;
+  }
+  for (let i = 0; i < nativeRow; i++) {
+    basicY += ((_d = (_c = sheet == null ? void 0 : sheet._rows) == null ? void 0 : _c[i]) == null ? void 0 : _d.height) || defaultRowHeight;
+  }
+  const x = basicX + nativeColOff / 12700;
+  const y = basicY + nativeRowOff / 12700;
+  const {
+    nativeCol: nativeColEnd,
+    nativeColOff: nativeColOffEnd,
+    nativeRow: nativeRowEnd,
+    nativeRowOff: nativeRowOffEnd
+  } = br;
+  let width;
+  if (nativeCol === nativeColEnd) {
+    width = (nativeColOffEnd - nativeColOff) / 12700;
+  } else {
+    width = (((_f = (_e = sheet == null ? void 0 : sheet._columns) == null ? void 0 : _e[nativeCol]) == null ? void 0 : _f.width) * 6 || defaultColWidth) - nativeColOff / 12700;
+    for (let i = nativeCol + 1; i < nativeColEnd; i++) {
+      width += ((_h = (_g = sheet == null ? void 0 : sheet._columns) == null ? void 0 : _g[i]) == null ? void 0 : _h.width) * 6 || defaultColWidth;
+    }
+    width += nativeColOffEnd / 12700;
+  }
+  let height;
+  if (nativeRow === nativeRowEnd) {
+    height = (nativeRowOffEnd - nativeRowOff) / 12700;
+  } else {
+    height = (((_j = (_i = sheet == null ? void 0 : sheet._rows) == null ? void 0 : _i[nativeRow]) == null ? void 0 : _j.height) || defaultRowHeight) - nativeRowOff / 12700;
+    for (let i = nativeRow + 1; i < nativeRowEnd; i++) {
+      height += ((_l = (_k = sheet == null ? void 0 : sheet._rows) == null ? void 0 : _k[i]) == null ? void 0 : _l.height) || defaultRowHeight;
+    }
+    height += nativeRowOffEnd / 12700;
+  }
+  return {
+    x: (x - (((_m = offset == null ? void 0 : offset.scroll) == null ? void 0 : _m.x) || 0)) * devicePixelRatio,
+    y: (y - (((_n = offset == null ? void 0 : offset.scroll) == null ? void 0 : _n.y) || 0)) * devicePixelRatio,
+    width: width * devicePixelRatio,
+    height: height * devicePixelRatio
+  };
+}
+function clearCache() {
+  cache = [];
+}
+function drawImage(ctx, index, data, position) {
+  getImage(index, data).then((image) => {
+    let sx = 0;
+    let sy = 0;
+    let sWidth = image.width;
+    let sHeight = image.height;
+    let dx = position.x;
+    let dy = position.y;
+    let dWidth = position.width;
+    let dHeight = position.height;
+    const scaleX = dWidth / sWidth;
+    const scaleY = dHeight / sHeight;
+    if (dx < clipWidth * devicePixelRatio) {
+      const diff = clipWidth * devicePixelRatio - dx;
+      dx = clipWidth * devicePixelRatio;
+      dWidth -= diff;
+      sWidth -= diff / scaleX;
+      sx += diff / scaleX;
+    }
+    if (dy < clipHeight * devicePixelRatio) {
+      const diff = clipHeight * devicePixelRatio - dy;
+      dy = clipHeight * devicePixelRatio;
+      dHeight -= diff;
+      sHeight -= diff / scaleY;
+      sy += diff / scaleY;
+    }
+    ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+  }).catch((e) => {
+  });
+}
+function getImage(index, data) {
+  return new Promise((resolve, reject) => {
+    if (cache[index]) {
+      return resolve(cache[index]);
+    }
+    const { buffer, extension } = data.buffer;
+    const blob = new Blob([buffer], { type: "image/" + extension });
+    const url = URL.createObjectURL(blob);
+    const image = new Image();
+    image.src = url;
+    image.onload = function() {
+      resolve(image);
+      cache[index] = image;
+    };
+    image.onerror = function(e) {
+      reject(e);
+    };
+  });
+}
+function readOnlyInput(root) {
+  if (root) {
+    const nodes = root.querySelectorAll("input");
+    for (const node of nodes) {
+      node && !node.readOnly && (node.readOnly = true);
+    }
+  }
+}
+const defaultOptions = {
+  minColLength: 20
+};
+class JsExcelPreview {
+  constructor(container, options = {}) {
+    __publicField(this, "container");
+    __publicField(this, "options", {});
+    __publicField(this, "wrapper");
+    __publicField(this, "wrapperMain");
+    __publicField(this, "xs");
+    __publicField(this, "sheetIndex");
+    __publicField(this, "mediasSource");
+    __publicField(this, "workbookDataSource");
+    __publicField(this, "ctx");
+    __publicField(this, "fileData");
+    __publicField(this, "observer");
+    __publicField(this, "offset");
+    this.container = container;
+    this.options = { ...defaultOptions, ...options };
+    this.sheetIndex = 1;
+    this.mediasSource = {};
+    this.workbookDataSource = {
+      _worksheets: []
+    };
+    this.createWrapper();
+    this.initSpreadsheet();
+    this.hack();
+  }
+  createWrapper() {
+    this.wrapper = document.createElement("div");
+    this.wrapper.className = "r-preview-excel-main";
+    this.container.appendChild(this.wrapper);
+  }
+  initSpreadsheet() {
+    var _a;
+    if (!this.wrapper)
+      return;
+    this.xs = new Spreadsheet(this.wrapper, {
+      mode: "read",
+      showToolbar: false,
+      showContextmenu: this.options.showContextmenu || false,
+      view: {
+        height: () => this.wrapper && this.wrapper.clientHeight || 300,
+        width: () => this.wrapper && this.wrapper.clientWidth || 1200
+      },
+      row: {
+        height: 24,
+        len: 100
+      },
+      col: {
+        len: 26,
+        width: 80,
+        indexWidth: 60,
+        minWidth: 60
+      }
+      // autoFocus: false
+    }).loadData({});
+    if (!this.xs)
+      return;
+    if (this.xs.bottombar) {
+      const swapFunc = this.xs.bottombar.swapFunc;
+      this.xs.bottombar.swapFunc = (index) => {
+        var _a2;
+        swapFunc.call((_a2 = this.xs) == null ? void 0 : _a2.bottombar, index);
+        this.sheetIndex = index + 1;
+        setTimeout(() => {
+          var _a3, _b;
+          ((_a3 = this.xs) == null ? void 0 : _a3.reRender) && ((_b = this.xs) == null ? void 0 : _b.reRender());
+          if (this.mediasSource && this.ctx && this.offset) {
+            renderImage(
+              this.ctx,
+              this.mediasSource,
+              this.workbookDataSource._worksheets[this.sheetIndex],
+              this.offset
+            );
+          }
+        });
+      };
+    }
+    if ((_a = this.xs.sheet) == null ? void 0 : _a.editor) {
+      const clear = this.xs.sheet.editor.clear;
+      this.xs.sheet.editor.clear = (...args) => {
+        var _a2, _b;
+        clear.apply((_b = (_a2 = this.xs) == null ? void 0 : _a2.sheet) == null ? void 0 : _b.editor, args);
+        setTimeout(() => {
+          if (this.ctx && this.mediasSource && this.offset) {
+            renderImage(
+              this.ctx,
+              this.mediasSource,
+              this.workbookDataSource._worksheets[this.sheetIndex],
+              this.offset
+            );
+          }
+        });
+      };
+      const setOffset = this.xs.sheet.editor.setOffset;
+      this.xs.sheet.editor.setOffset = (...args) => {
+        var _a2, _b;
+        setOffset.apply((_b = (_a2 = this.xs) == null ? void 0 : _a2.sheet) == null ? void 0 : _b.editor, args);
+        if (args.length > 1) {
+          this.offset = args.shift();
+        }
+        if (this.ctx && this.mediasSource && this.offset) {
+          renderImage(
+            this.ctx,
+            this.mediasSource,
+            this.workbookDataSource._worksheets[this.sheetIndex],
+            this.offset
+          );
+        }
+      };
+    }
+    const canvas = this.wrapper.querySelector("canvas");
+    if (canvas) {
+      this.ctx = canvas.getContext("2d");
+    }
+  }
+  renderExcel(buffer) {
+    this.fileData = buffer;
+    return readExcelData(buffer).then((workbook) => {
+      var _a;
+      if (!workbook._worksheets || workbook._worksheets.length === 0) {
+        throw new Error("未获取到数据，可能文件格式不正确或文件已损坏");
+      }
+      const { workbookData, medias, workbookSource } = transferExcelToSpreadSheet(workbook, this.options);
+      this.mediasSource = medias;
+      this.workbookDataSource = workbookSource;
+      this.offset = void 0;
+      this.sheetIndex = 1;
+      clearCache();
+      (_a = this.xs) == null ? void 0 : _a.loadData(workbookData);
+      if (this.ctx && this.mediasSource && this.offset) {
+        renderImage(
+          this.ctx,
+          this.mediasSource,
+          this.workbookDataSource._worksheets[this.sheetIndex],
+          this.offset
+        );
+      }
+    }).catch((e) => {
+      var _a;
+      this.mediasSource = [];
+      this.workbookDataSource = {
+        _worksheets: []
+      };
+      clearCache();
+      (_a = this.xs) == null ? void 0 : _a.loadData({});
+      return Promise.reject(e);
+    });
+  }
+  hack() {
+    if (!this.wrapper)
+      return;
+    const observerCallback = lodashExports.debounce(readOnlyInput, 200).bind(
+      this,
+      this.wrapper
+    );
+    this.observer = new MutationObserver(observerCallback);
+    const observerConfig = { attributes: true, childList: true, subtree: true };
+    this.observer.observe(this.wrapper, observerConfig);
+    observerCallback();
+  }
+}
+const renderExcel = (file, dom) => {
+  if (!dom)
+    return Promise.reject();
+  const Preview = new JsExcelPreview(dom);
+  const file2Array = () => new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsArrayBuffer(file);
+    reader.onload = () => {
+      if (reader.result) {
+        resolve(reader == null ? void 0 : reader.result);
+      } else {
+        reject();
+      }
+    };
+  });
+  return file2Array().then((res) => {
+    Preview.renderExcel(res);
+  });
+};
+export {
+  renderExcel
+};