@idraw/util 0.4.0-alpha.2 → 0.4.0-alpha.4

package/dist/index.global.js

@@ -47,6 +47,62 @@ var iDrawUtil = function(exports) {
     downloadClickEvent.initEvent("click", true, false);
     downloadLink.dispatchEvent(downloadClickEvent);
   }
+  function pickFile(opts) {
+    const { success, error } = opts;
+    let input = document.createElement("input");
+    input.type = "file";
+    input.addEventListener("change", function() {
+      var _a;
+      const file = (_a = input.files) == null ? void 0 : _a[0];
+      success({
+        file
+      });
+      input = null;
+    });
+    input.addEventListener("error", function(err) {
+      if (typeof error === "function") {
+        error(err);
+      }
+      input = null;
+    });
+    input.click();
+  }
+  function parseFileToBase64(file) {
+    return new Promise(function(resolve, reject) {
+      let reader = new FileReader();
+      reader.addEventListener("load", function() {
+        resolve(reader.result);
+        reader = null;
+      });
+      reader.addEventListener("error", function(err) {
+        reject(err);
+        reader = null;
+      });
+      reader.addEventListener("abort", function() {
+        reject(new Error("abort"));
+        reader = null;
+      });
+      reader.readAsDataURL(file);
+    });
+  }
+  function parseFileToText(file) {
+    return new Promise(function(resolve, reject) {
+      let reader = new FileReader();
+      reader.addEventListener("load", function() {
+        resolve(reader.result);
+        reader = null;
+      });
+      reader.addEventListener("error", function(err) {
+        reject(err);
+        reader = null;
+      });
+      reader.addEventListener("abort", function() {
+        reject(new Error("abort"));
+        reader = null;
+      });
+      reader.readAsText(file);
+    });
+  }
   function toColorHexNum(color2) {
     return parseInt(color2.replace(/^\#/, "0x"));
   }
@@ -207,6 +263,73 @@ var iDrawUtil = function(exports) {
     }
     return null;
   }
+  function colorToCSS(color2) {
+    let css = "transparent";
+    if (typeof color2 === "string") {
+      css = color2;
+    } else if ((color2 == null ? void 0 : color2.type) === "linear-gradient") {
+      const items = [];
+      if (typeof color2.angle === "number") {
+        items.push(`${color2.angle}deg`);
+      } else {
+        items.push(`180deg`);
+      }
+      if (Array.isArray(color2.stops)) {
+        color2.stops.forEach((stop) => {
+          items.push(`${stop.color} ${stop.offset * 100}%`);
+        });
+      }
+      css = `linear-gradient(${items.join(", ")})`;
+    } else if ((color2 == null ? void 0 : color2.type) === "radial-gradient") {
+      const items = [];
+      if (Array.isArray(color2.stops)) {
+        color2.stops.forEach((stop) => {
+          items.push(`${stop.color} ${stop.offset * 100}%`);
+        });
+      }
+      css = `radial-gradient(circle, ${items.join(", ")})`;
+    }
+    return css;
+  }
+  function colorToLinearGradientCSS(color2) {
+    let css = "transparent";
+    if (typeof color2 === "string") {
+      css = color2;
+    } else if ((color2 == null ? void 0 : color2.type) === "radial-gradient" || (color2 == null ? void 0 : color2.type) === "linear-gradient") {
+      const items = [];
+      if (Array.isArray(color2.stops) && color2.stops.length > 0) {
+        color2.stops.forEach((stop, i) => {
+          items.push(`${stop.color} ${stop.offset * 100}%`);
+          if (i === color2.stops.length - 1 && stop.offset < 1) {
+            items.push(`${stop.color} ${stop.offset * 100}%`);
+          }
+        });
+        css = `linear-gradient(90deg, ${items.join(", ")})`;
+      }
+    }
+    return css;
+  }
+  function mergeHexColorAlpha(hex, alpha) {
+    if (alpha === 1) {
+      return hex;
+    }
+    let hexAlpha = 1;
+    const regHex1 = /^\#[0-9a-f]{6,6}$/i;
+    const regHex2 = /^\#[0-9a-f]{8,8}$/i;
+    let result = hex;
+    if (regHex1.test(hex)) {
+      hexAlpha = parseInt(hex.substring(5, 7).replace(/^\#/, "0x"));
+    } else if (regHex2.test(hex)) {
+      hexAlpha = parseInt(hex.substring(7, 9).replace(/^\#/, "0x"));
+      result = hex.substring(0, 7);
+    }
+    hexAlpha = hexAlpha * alpha;
+    if (regHex1.test(result) && hexAlpha > 0 && hexAlpha < 1) {
+      const aHexNum = Math.max(0, Math.min(255, Math.ceil(hexAlpha * 256)));
+      result = `${result.toUpperCase()}${aHexNum.toString(16).toUpperCase()}`;
+    }
+    return result;
+  }
   function createUUID() {
     function _createStr() {
       return ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
@@ -326,7 +449,7 @@ var iDrawUtil = function(exports) {
     const result = typeStr.replace(/(\[object|\])/gi, "").trim();
     return result;
   }
-  const istype$1 = {
+  const istype = {
     type(data, lowerCase) {
       const result = parsePrototype(data);
       return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -791,7 +914,8 @@ var iDrawUtil = function(exports) {
       return this._ctx.getLineDash();
     }
     setLineDash(nums) {
-      return this._ctx.setLineDash(nums.map((n) => this.$doPixelRatio(n)));
+      const dash = nums.map((n) => this.$doPixelRatio(n));
+      return this._ctx.setLineDash(dash);
     }
     stroke(path) {
       return path ? this._ctx.stroke(path) : this._ctx.stroke();
@@ -928,8 +1052,10 @@ var iDrawUtil = function(exports) {
     };
     const viewContext = createContext2D(ctxOpts);
     const helperContext = createContext2D(ctxOpts);
+    const underContext = createContext2D(ctxOpts);
     const boardContext = createContext2D({ ctx, ...ctxOpts });
     const content = {
+      underContext,
       viewContext,
       helperContext,
       boardContext
@@ -1063,9 +1189,8 @@ var iDrawUtil = function(exports) {
   function parseAngleToRadian(angle2) {
     return angle2 / 180 * Math.PI;
   }
-  function rotateElement(ctx, elemSize, callback) {
-    const center = calcElementCenter(elemSize);
-    const radian = parseAngleToRadian(elemSize.angle || 0);
+  function rotateByCenter(ctx, angle2, center, callback) {
+    const radian = parseAngleToRadian(angle2 || 0);
     if (center && (radian > 0 || radian < 0)) {
       ctx.translate(center.x, center.y);
       ctx.rotate(radian);
@@ -1078,6 +1203,12 @@ var iDrawUtil = function(exports) {
       ctx.translate(-center.x, -center.y);
     }
   }
+  function rotateElement(ctx, elemSize, callback) {
+    const center = calcElementCenter(elemSize);
+    rotateByCenter(ctx, elemSize.angle || 0, center, () => {
+      callback(ctx);
+    });
+  }
   function calcElementCenter(elem) {
     const p = {
       x: elem.x + elem.w / 2,
@@ -1426,16 +1557,30 @@ var iDrawUtil = function(exports) {
     return groupQueue;
   }
   function mergeElement(originElem, updateContent) {
+    var _a;
     const commonKeys = Object.keys(updateContent);
     for (let i = 0; i < commonKeys.length; i++) {
       const commonKey = commonKeys[i];
       if (["x", "y", "w", "h", "angle", "name"].includes(commonKey)) {
         originElem[commonKey] = updateContent[commonKey];
       } else if (["detail", "operations"].includes(commonKey)) {
-        if (istype.json(updateContent[commonKey]) && istype.json(originElem[commonKey])) {
-          originElem[commonKey] = { ...originElem[commonKey], ...updateContent[commonKey] };
-        } else if (istype.array(updateContent[commonKey]) && istype.array(originElem[commonKey])) {
-          originElem[commonKey] = { ...originElem[commonKey], ...updateContent[commonKey] };
+        if (istype.json(updateContent[commonKey])) {
+          if (!(originElem == null ? void 0 : originElem.hasOwnProperty(commonKey))) {
+            originElem[commonKey] = {};
+          }
+          if (istype.json(originElem[commonKey])) {
+            originElem[commonKey] = { ...originElem[commonKey], ...updateContent[commonKey] };
+          }
+        } else if (istype.array(updateContent[commonKey])) {
+          if (!(originElem == null ? void 0 : originElem.hasOwnProperty(commonKey))) {
+            originElem[commonKey] = [];
+          }
+          if (istype.array(originElem[commonKey])) {
+            (_a = updateContent == null ? void 0 : updateContent[commonKey]) == null ? void 0 : _a.forEach((item, i2) => {
+              originElem[commonKey][i2] = item;
+            });
+            originElem[commonKey] = [...originElem[commonKey], ...updateContent[commonKey]];
+          }
         }
       }
     }
@@ -1443,16 +1588,82 @@ var iDrawUtil = function(exports) {
   }
   function updateElementInList(uuid, updateContent, elements) {
     var _a;
+    let targetElement = null;
     for (let i = 0; i < elements.length; i++) {
       const elem = elements[i];
       if (elem.uuid === uuid) {
         mergeElement(elem, updateContent);
+        targetElement = elem;
         break;
       } else if (elem.type === "group") {
-        updateElementInList(uuid, updateContent, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+        targetElement = updateElementInList(uuid, updateContent, ((_a = elem == null ? void 0 : elem.detail) == null ? void 0 : _a.children) || []);
+      }
+    }
+    return targetElement;
+  }
+  function getElementSize(elem) {
+    const { x: x2, y: y2, w: w2, h: h2, angle: angle2 } = elem;
+    const size = { x: x2, y: y2, w: w2, h: h2, angle: angle2 };
+    return size;
+  }
+  function mergeElementAsset(element, assets) {
+    const elem = element;
+    let assetId = null;
+    let assetItem = null;
+    if (elem.type === "image") {
+      assetId = elem.detail.src;
+    } else if (elem.type === "svg") {
+      assetId = elem.detail.svg;
+    } else if (elem.type === "html") {
+      assetId = elem.detail.html;
+    }
+    if (assetId && (assetId == null ? void 0 : assetId.startsWith("@assets/"))) {
+      assetItem = assets[assetId];
+    }
+    if ((assetItem == null ? void 0 : assetItem.type) === elem.type && typeof (assetItem == null ? void 0 : assetItem.value) === "string" && (assetItem == null ? void 0 : assetItem.value)) {
+      if (elem.type === "image") {
+        elem.detail.src = assetItem.value;
+      } else if (elem.type === "svg") {
+        elem.detail.svg = assetItem.value;
+      } else if (elem.type === "html") {
+        elem.detail.html = assetItem.value;
       }
     }
-    return elements;
+    return elem;
+  }
+  function filterElementAsset(element) {
+    let assetId = null;
+    let assetItem = null;
+    let resource = null;
+    if (element.type === "image") {
+      resource = element.detail.src;
+    } else if (element.type === "svg") {
+      resource = element.detail.svg;
+    } else if (element.type === "html") {
+      resource = element.detail.html;
+    }
+    if (typeof resource === "string" && !isAssetId(resource)) {
+      assetId = createAssetId(resource);
+      assetItem = {
+        type: element.type,
+        value: resource
+      };
+      if (element.type === "image") {
+        element.detail.src = assetId;
+      } else if (element.type === "svg") {
+        element.detail.svg = assetId;
+      } else if (element.type === "html") {
+        element.detail.html = assetId;
+      }
+    }
+    return {
+      element,
+      assetId,
+      assetItem
+    };
+  }
+  function isResourceElement(elem) {
+    return ["image", "svg", "html"].includes(elem == null ? void 0 : elem.type);
   }
   function checkRectIntersect(rect1, rect2) {
     const react1MinX = rect1.x;
@@ -1743,54 +1954,58 @@ var iDrawUtil = function(exports) {
     const topRightCenter = vertexes[1];
     const bottomRightCenter = vertexes[2];
     const bottomLeftCenter = vertexes[3];
-    const topSize = createControllerElementSizeFromCenter(topCenter, { size: ctrlSize, angle: totalAngle });
-    const rightSize = createControllerElementSizeFromCenter(rightCenter, { size: ctrlSize, angle: totalAngle });
-    const bottomSize = createControllerElementSizeFromCenter(bottomCenter, { size: ctrlSize, angle: totalAngle });
-    const leftSize = createControllerElementSizeFromCenter(leftCenter, { size: ctrlSize, angle: totalAngle });
     const topLeftSize = createControllerElementSizeFromCenter(topLeftCenter, { size: ctrlSize, angle: totalAngle });
     const topRightSize = createControllerElementSizeFromCenter(topRightCenter, { size: ctrlSize, angle: totalAngle });
     const bottomLeftSize = createControllerElementSizeFromCenter(bottomLeftCenter, { size: ctrlSize, angle: totalAngle });
     const bottomRightSize = createControllerElementSizeFromCenter(bottomRightCenter, { size: ctrlSize, angle: totalAngle });
+    const topLeftVertexes = calcElementVertexes(topLeftSize);
+    const topRightVertexes = calcElementVertexes(topRightSize);
+    const bottomLeftVertexes = calcElementVertexes(bottomLeftSize);
+    const bottomRightVertexes = calcElementVertexes(bottomRightSize);
+    const topVertexes = [topLeftVertexes[1], topRightVertexes[0], topRightVertexes[3], topLeftVertexes[2]];
+    const rightVertexes = [topRightVertexes[3], topRightVertexes[2], bottomRightVertexes[1], bottomRightVertexes[0]];
+    const bottomVertexes = [bottomLeftVertexes[1], bottomRightVertexes[0], bottomRightVertexes[3], bottomLeftVertexes[2]];
+    const leftVertexes = [topLeftVertexes[3], topLeftVertexes[2], bottomLeftVertexes[1], bottomLeftVertexes[0]];
     const sizeController = {
       elementWrapper: vertexes,
       left: {
         type: "left",
-        vertexes: calcElementVertexes(leftSize),
+        vertexes: leftVertexes,
         center: leftCenter
       },
       right: {
         type: "right",
-        vertexes: calcElementVertexes(rightSize),
+        vertexes: rightVertexes,
         center: rightCenter
       },
       top: {
         type: "top",
-        vertexes: calcElementVertexes(topSize),
+        vertexes: topVertexes,
         center: topCenter
       },
       bottom: {
         type: "bottom",
-        vertexes: calcElementVertexes(bottomSize),
+        vertexes: bottomVertexes,
         center: bottomCenter
       },
       topLeft: {
         type: "top-left",
-        vertexes: calcElementVertexes(topLeftSize),
+        vertexes: topLeftVertexes,
         center: topLeftCenter
       },
       topRight: {
         type: "top-right",
-        vertexes: calcElementVertexes(topRightSize),
+        vertexes: topRightVertexes,
         center: topRightCenter
       },
       bottomLeft: {
         type: "bottom-left",
-        vertexes: calcElementVertexes(bottomLeftSize),
+        vertexes: bottomLeftVertexes,
         center: bottomLeftCenter
       },
       bottomRight: {
         type: "bottom-right",
-        vertexes: calcElementVertexes(bottomRightSize),
+        vertexes: bottomRightVertexes,
         center: bottomRightCenter
       }
     };
@@ -2008,9 +2223,93 @@ var iDrawUtil = function(exports) {
     });
   }
   function formatNumber(num, opts) {
-    const decimalPlaces = (opts == null ? void 0 : opts.decimalPlaces) || 2;
+    let decimalPlaces = 2;
+    if (typeof (opts == null ? void 0 : opts.decimalPlaces) !== "undefined" && (opts == null ? void 0 : opts.decimalPlaces) >= 0) {
+      decimalPlaces = opts.decimalPlaces;
+    }
     return parseFloat(num.toFixed(decimalPlaces));
   }
+  function matrixToRadian(matrix) {
+    if (matrix[1] != -1 * matrix[3] || matrix[4] != matrix[0] || matrix[0] * matrix[4] - matrix[3] * matrix[1] != 1) {
+      return null;
+    } else {
+      return Math.acos(matrix[0]);
+    }
+  }
+  function matrixToAngle(matrix) {
+    const radian = matrixToRadian(matrix);
+    if (typeof radian === "number") {
+      const angle2 = radian * 180 / Math.PI;
+      return angle2;
+    }
+    return radian;
+  }
+  function getDefaultElementDetailConfig() {
+    const config = {
+      boxSizing: "border-box",
+      borderWidth: 0,
+      borderColor: "#000000",
+      shadowColor: "#000000",
+      borderRadius: 0,
+      borderDash: [],
+      shadowOffsetX: 0,
+      shadowOffsetY: 0,
+      shadowBlur: 0,
+      opacity: 1,
+      color: "#000000",
+      textAlign: "left",
+      verticalAlign: "top",
+      fontSize: 16,
+      lineHeight: 20,
+      fontFamily: "sans-serif",
+      fontWeight: 400
+    };
+    return config;
+  }
+  const defaultElemConfig = getDefaultElementDetailConfig();
+  function calcViewBoxSize(viewElem, opts) {
+    const { viewScaleInfo } = opts;
+    const { scale } = viewScaleInfo;
+    let { borderRadius: borderRadius2, boxSizing = defaultElemConfig.boxSizing, borderWidth: borderWidth2 } = viewElem.detail;
+    if (typeof borderWidth2 !== "number") {
+      borderRadius2 = 0;
+    }
+    let { x: x2, y: y2, w: w2, h: h2 } = viewElem;
+    let radiusList = [0, 0, 0, 0];
+    if (typeof borderRadius2 === "number") {
+      const br = borderRadius2 * scale;
+      radiusList = [br, br, br, br];
+    } else if (Array.isArray(borderRadius2) && (borderRadius2 == null ? void 0 : borderRadius2.length) === 4) {
+      radiusList = [borderRadius2[0] * scale, borderRadius2[1] * scale, borderRadius2[2] * scale, borderRadius2[3] * scale];
+    }
+    let bw = 0;
+    if (typeof borderWidth2 === "number") {
+      bw = (borderWidth2 || 1) * scale;
+    }
+    if (boxSizing === "border-box") {
+      x2 = viewElem.x + bw / 2;
+      y2 = viewElem.y + bw / 2;
+      w2 = viewElem.w - bw;
+      h2 = viewElem.h - bw;
+    } else if (boxSizing === "content-box") {
+      x2 = viewElem.x - bw / 2;
+      y2 = viewElem.y - bw / 2;
+      w2 = viewElem.w + bw;
+      h2 = viewElem.h + bw;
+    } else {
+      x2 = viewElem.x;
+      y2 = viewElem.y;
+      w2 = viewElem.w;
+      h2 = viewElem.h;
+    }
+    return {
+      x: x2,
+      y: y2,
+      w: w2,
+      h: h2,
+      radiusList
+    };
+  }
   exports.Context2D = Context2D;
   exports.EventEmitter = EventEmitter;
   exports.Store = Store;
@@ -2024,12 +2323,15 @@ var iDrawUtil = function(exports) {
   exports.calcElementsContextSize = calcElementsContextSize;
   exports.calcElementsViewInfo = calcElementsViewInfo;
   exports.calcSpeed = calcSpeed;
+  exports.calcViewBoxSize = calcViewBoxSize;
   exports.calcViewElementSize = calcViewElementSize;
   exports.calcViewPointSize = calcViewPointSize;
   exports.calcViewVertexes = calcViewVertexes;
   exports.check = check;
   exports.checkRectIntersect = checkRectIntersect;
   exports.colorNameToHex = colorNameToHex;
+  exports.colorToCSS = colorToCSS;
+  exports.colorToLinearGradientCSS = colorToLinearGradientCSS;
   exports.compose = compose;
   exports.compressImage = compressImage;
   exports.createAssetId = createAssetId;
@@ -2042,14 +2344,17 @@ var iDrawUtil = function(exports) {
   exports.downloadImageFromCanvas = downloadImageFromCanvas;
   exports.equalPoint = equalPoint;
   exports.equalTouchPoint = equalTouchPoint;
+  exports.filterElementAsset = filterElementAsset;
   exports.findElementFromList = findElementFromList;
   exports.findElementsFromList = findElementsFromList;
   exports.formatNumber = formatNumber;
   exports.generateHTML = generateHTML;
   exports.generateSVGPath = generateSVGPath;
   exports.getCenterFromTwoPoints = getCenterFromTwoPoints;
+  exports.getDefaultElementDetailConfig = getDefaultElementDetailConfig;
   exports.getElemenetsAssetIds = getElemenetsAssetIds;
   exports.getElementRotateVertexes = getElementRotateVertexes;
+  exports.getElementSize = getElementSize;
   exports.getElementVertexes = getElementVertexes;
   exports.getGroupQueueFromList = getGroupQueueFromList;
   exports.getSelectedElementUUIDs = getSelectedElementUUIDs;
@@ -2060,16 +2365,25 @@ var iDrawUtil = function(exports) {
   exports.isAssetId = isAssetId;
   exports.isColorStr = isColorStr;
   exports.isElementInView = isElementInView;
+  exports.isResourceElement = isResourceElement;
   exports.isViewPointInElement = isViewPointInElement;
-  exports.istype = istype$1;
+  exports.istype = istype;
   exports.limitAngle = limitAngle;
   exports.loadHTML = loadHTML;
   exports.loadImage = loadImage;
   exports.loadSVG = loadSVG;
+  exports.matrixToAngle = matrixToAngle;
+  exports.matrixToRadian = matrixToRadian;
+  exports.mergeElementAsset = mergeElementAsset;
+  exports.mergeHexColorAlpha = mergeHexColorAlpha;
   exports.parseAngleToRadian = parseAngleToRadian;
+  exports.parseFileToBase64 = parseFileToBase64;
+  exports.parseFileToText = parseFileToText;
   exports.parseHTML = parseHTML;
   exports.parseRadianToAngle = parseRadianToAngle;
   exports.parseSVGPath = parseSVGPath;
+  exports.pickFile = pickFile;
+  exports.rotateByCenter = rotateByCenter;
   exports.rotateElement = rotateElement;
   exports.rotateElementVertexes = rotateElementVertexes;
   exports.rotatePoint = rotatePoint;