@idraw/util 0.2.0-alpha.9 → 0.3.0-alpha.1

package/dist/index.cjs.js

@@ -68,12 +68,12 @@ function createUUID() {
     function str4() {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
     }
-    return "" + str4() + str4() + "-" + str4() + "-" + str4() + "-" + str4() + "-" + str4() + str4() + str4();
+    return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
 }
 
 function deepClone(target) {
     function _clone(t) {
-        var type = is(t);
+        var type = is$1(t);
         if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
             return t;
         }
@@ -95,7 +95,7 @@ function deepClone(target) {
     }
     return _clone(target);
 }
-function is(data) {
+function is$1(data) {
     return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
 }
 
@@ -138,6 +138,16 @@ var istype = {
     },
 };
 
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -178,7 +188,7 @@ function __generator(thisArg, body) {
 function parseHTMLToDataURL(html, opts) {
     var width = opts.width, height = opts.height;
     return new Promise(function (resolve, reject) {
-        var _svg = "\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"" + (width || '') + "\" height = \"" + (height || '') + "\">\n      <foreignObject width=\"100%\" height=\"100%\">\n        <div xmlns = \"http://www.w3.org/1999/xhtml\">\n          " + html + "\n        </div>\n      </foreignObject>\n    </svg>\n    ";
+        var _svg = "\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width || '', "\" height = \"").concat(height || '', "\">\n      <foreignObject width=\"100%\" height=\"100%\">\n        <div xmlns = \"http://www.w3.org/1999/xhtml\">\n          ").concat(html, "\n        </div>\n      </foreignObject>\n    </svg>\n    ");
         var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
         var reader = new FileReader();
         reader.readAsDataURL(blob);
@@ -237,12 +247,17 @@ function loadSVG(svg) {
         });
     });
 }
+function filterAmpersand(str) {
+    return str.replace(/\&/ig, '&amp;');
+}
 function loadHTML(html, opts) {
     return __awaiter(this, void 0, void 0, function () {
         var dataURL, image;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4, parseHTMLToDataURL(html, opts)];
+                case 0:
+                    html = filterAmpersand(html);
+                    return [4, parseHTMLToDataURL(html, opts)];
                 case 1:
                     dataURL = _a.sent();
                     return [4, loadImage(dataURL)];
@@ -254,32 +269,435 @@ function loadHTML(html, opts) {
     });
 }
 
-var index = {
-    time: {
-        delay: delay,
-        compose: compose,
-        throttle: throttle,
-    },
-    loader: {
-        loadImage: loadImage,
-        loadSVG: loadSVG,
-        loadHTML: loadHTML,
-    },
-    file: {
-        downloadImageFromCanvas: downloadImageFromCanvas,
-    },
-    color: {
-        toColorHexStr: toColorHexStr,
-        toColorHexNum: toColorHexNum,
-        isColorStr: isColorStr,
-    },
-    uuid: {
-        createUUID: createUUID
-    },
-    istype: istype,
-    data: {
-        deepClone: deepClone,
+var Context = (function () {
+    function Context(ctx, opts) {
+        this._opts = opts;
+        this._ctx = ctx;
+        this._transform = {
+            scale: 1,
+            scrollX: 0,
+            scrollY: 0,
+        };
     }
+    Context.prototype.getContext = function () {
+        return this._ctx;
+    };
+    Context.prototype.resetSize = function (opts) {
+        this._opts = __assign(__assign({}, this._opts), opts);
+    };
+    Context.prototype.calcDeviceNum = function (num) {
+        return num * this._opts.devicePixelRatio;
+    };
+    Context.prototype.calcScreenNum = function (num) {
+        return num / this._opts.devicePixelRatio;
+    };
+    Context.prototype.getSize = function () {
+        return {
+            width: this._opts.width,
+            height: this._opts.height,
+            contextWidth: this._opts.contextWidth,
+            contextHeight: this._opts.contextHeight,
+            devicePixelRatio: this._opts.devicePixelRatio,
+        };
+    };
+    Context.prototype.setTransform = function (config) {
+        this._transform = __assign(__assign({}, this._transform), config);
+    };
+    Context.prototype.getTransform = function () {
+        return {
+            scale: this._transform.scale,
+            scrollX: this._transform.scrollX,
+            scrollY: this._transform.scrollY,
+        };
+    };
+    Context.prototype.setFillStyle = function (color) {
+        this._ctx.fillStyle = color;
+    };
+    Context.prototype.fill = function (fillRule) {
+        return this._ctx.fill(fillRule || 'nonzero');
+    };
+    Context.prototype.arc = function (x, y, radius, startAngle, endAngle, anticlockwise) {
+        return this._ctx.arc(this._doSize(x), this._doSize(y), this._doSize(radius), startAngle, endAngle, anticlockwise);
+    };
+    Context.prototype.rect = function (x, y, w, h) {
+        return this._ctx.rect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
+    };
+    Context.prototype.fillRect = function (x, y, w, h) {
+        return this._ctx.fillRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
+    };
+    Context.prototype.clearRect = function (x, y, w, h) {
+        return this._ctx.clearRect(this._doSize(x), this._doSize(y), this._doSize(w), this._doSize(h));
+    };
+    Context.prototype.beginPath = function () {
+        return this._ctx.beginPath();
+    };
+    Context.prototype.closePath = function () {
+        return this._ctx.closePath();
+    };
+    Context.prototype.lineTo = function (x, y) {
+        return this._ctx.lineTo(this._doSize(x), this._doSize(y));
+    };
+    Context.prototype.moveTo = function (x, y) {
+        return this._ctx.moveTo(this._doSize(x), this._doSize(y));
+    };
+    Context.prototype.arcTo = function (x1, y1, x2, y2, radius) {
+        return this._ctx.arcTo(this._doSize(x1), this._doSize(y1), this._doSize(x2), this._doSize(y2), this._doSize(radius));
+    };
+    Context.prototype.setLineWidth = function (w) {
+        return this._ctx.lineWidth = this._doSize(w);
+    };
+    Context.prototype.setLineDash = function (nums) {
+        var _this = this;
+        return this._ctx.setLineDash(nums.map(function (n) { return _this._doSize(n); }));
+    };
+    Context.prototype.isPointInPath = function (x, y) {
+        return this._ctx.isPointInPath(this._doX(x), this._doY(y));
+    };
+    Context.prototype.isPointInPathWithoutScroll = function (x, y) {
+        return this._ctx.isPointInPath(this._doSize(x), this._doSize(y));
+    };
+    Context.prototype.setStrokeStyle = function (color) {
+        this._ctx.strokeStyle = color;
+    };
+    Context.prototype.stroke = function () {
+        return this._ctx.stroke();
+    };
+    Context.prototype.translate = function (x, y) {
+        return this._ctx.translate(this._doSize(x), this._doSize(y));
+    };
+    Context.prototype.rotate = function (angle) {
+        return this._ctx.rotate(angle);
+    };
+    Context.prototype.drawImage = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var image = args[0];
+        var sx = args[1];
+        var sy = args[2];
+        var sw = args[3];
+        var sh = args[4];
+        var dx = args[args.length - 4];
+        var dy = args[args.length - 3];
+        var dw = args[args.length - 2];
+        var dh = args[args.length - 1];
+        if (args.length === 9) {
+            return this._ctx.drawImage(image, this._doSize(sx), this._doSize(sy), this._doSize(sw), this._doSize(sh), this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
+        }
+        else {
+            return this._ctx.drawImage(image, this._doSize(dx), this._doSize(dy), this._doSize(dw), this._doSize(dh));
+        }
+    };
+    Context.prototype.createPattern = function (image, repetition) {
+        return this._ctx.createPattern(image, repetition);
+    };
+    Context.prototype.measureText = function (text) {
+        return this._ctx.measureText(text);
+    };
+    Context.prototype.setTextAlign = function (align) {
+        this._ctx.textAlign = align;
+    };
+    Context.prototype.fillText = function (text, x, y, maxWidth) {
+        if (maxWidth !== undefined) {
+            return this._ctx.fillText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
+        }
+        else {
+            return this._ctx.fillText(text, this._doSize(x), this._doSize(y));
+        }
+    };
+    Context.prototype.strokeText = function (text, x, y, maxWidth) {
+        if (maxWidth !== undefined) {
+            return this._ctx.strokeText(text, this._doSize(x), this._doSize(y), this._doSize(maxWidth));
+        }
+        else {
+            return this._ctx.strokeText(text, this._doSize(x), this._doSize(y));
+        }
+    };
+    Context.prototype.setFont = function (opts) {
+        var strList = [];
+        if (opts.fontWeight === 'bold') {
+            strList.push("".concat(opts.fontWeight));
+        }
+        strList.push("".concat(this._doSize(opts.fontSize || 12), "px"));
+        strList.push("".concat(opts.fontFamily || 'sans-serif'));
+        this._ctx.font = "".concat(strList.join(' '));
+    };
+    Context.prototype.setTextBaseline = function (baseline) {
+        this._ctx.textBaseline = baseline;
+    };
+    Context.prototype.setGlobalAlpha = function (alpha) {
+        this._ctx.globalAlpha = alpha;
+    };
+    Context.prototype.save = function () {
+        this._ctx.save();
+    };
+    Context.prototype.restore = function () {
+        this._ctx.restore();
+    };
+    Context.prototype.scale = function (ratioX, ratioY) {
+        this._ctx.scale(ratioX, ratioY);
+    };
+    Context.prototype.setShadowColor = function (color) {
+        this._ctx.shadowColor = color;
+    };
+    Context.prototype.setShadowOffsetX = function (offsetX) {
+        this._ctx.shadowOffsetX = this._doSize(offsetX);
+    };
+    Context.prototype.setShadowOffsetY = function (offsetY) {
+        this._ctx.shadowOffsetY = this._doSize(offsetY);
+    };
+    Context.prototype.setShadowBlur = function (blur) {
+        this._ctx.shadowBlur = this._doSize(blur);
+    };
+    Context.prototype.ellipse = function (x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
+        this._ctx.ellipse(this._doSize(x), this._doSize(y), this._doSize(radiusX), this._doSize(radiusY), rotation, startAngle, endAngle, counterclockwise);
+    };
+    Context.prototype._doSize = function (num) {
+        return this._opts.devicePixelRatio * num;
+    };
+    Context.prototype._doX = function (x) {
+        var _a = this._transform, scale = _a.scale, scrollX = _a.scrollX;
+        var _x = (x - scrollX) / scale;
+        return this._doSize(_x);
+    };
+    Context.prototype._doY = function (y) {
+        var _a = this._transform, scale = _a.scale, scrollY = _a.scrollY;
+        var _y = (y - scrollY) / scale;
+        return this._doSize(_y);
+    };
+    return Context;
+}());
+
+function number(value) {
+    return (typeof value === 'number' && (value > 0 || value <= 0));
+}
+function x(value) {
+    return number(value);
+}
+function y(value) {
+    return number(value);
+}
+function w(value) {
+    return (typeof value === 'number' && value >= 0);
+}
+function h(value) {
+    return (typeof value === 'number' && value >= 0);
+}
+function angle(value) {
+    return (typeof value === 'number' && value >= -360 && value <= 360);
+}
+function borderWidth(value) {
+    return w(value);
+}
+function borderRadius(value) {
+    return number(value) && value >= 0;
+}
+function color(value) {
+    return isColorStr(value);
+}
+function imageURL(value) {
+    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
+}
+function imageBase64(value) {
+    return (typeof value === 'string' && /^(data:image\/)/.test("".concat(value)));
+}
+function imageSrc(value) {
+    return (imageBase64(value) || imageURL(value));
+}
+function svg(value) {
+    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test("".concat(value).trim()) && /<\/[\s]{0,}svg>$/i.test("".concat(value).trim()));
+}
+function html(value) {
+    var result = false;
+    if (typeof value === 'string') {
+        var div = document.createElement('div');
+        div.innerHTML = value;
+        if (div.children.length > 0) {
+            result = true;
+        }
+        div = null;
+    }
+    return result;
+}
+function text(value) {
+    return typeof value === 'string';
+}
+function fontSize(value) {
+    return number(value) && value > 0;
+}
+function lineHeight(value) {
+    return number(value) && value > 0;
+}
+function strokeWidth(value) {
+    return number(value) && value > 0;
+}
+function textAlign(value) {
+    return ['center', 'left', 'right'].includes(value);
+}
+function fontFamily(value) {
+    return typeof value === 'string' && value.length > 0;
+}
+function fontWeight(value) {
+    return ['bold'].includes(value);
+}
+var is = {
+    x: x,
+    y: y,
+    w: w,
+    h: h,
+    angle: angle,
+    number: number,
+    borderWidth: borderWidth,
+    borderRadius: borderRadius,
+    color: color,
+    imageSrc: imageSrc,
+    imageURL: imageURL,
+    imageBase64: imageBase64,
+    svg: svg,
+    html: html,
+    text: text,
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    textAlign: textAlign,
+    fontFamily: fontFamily,
+    fontWeight: fontWeight,
+    strokeWidth: strokeWidth,
 };
 
-module.exports = index;
+function attrs(attrs) {
+    var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
+    if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
+        return false;
+    }
+    if (!(angle >= -360 && angle <= 360)) {
+        return false;
+    }
+    return true;
+}
+function box(desc) {
+    if (desc === void 0) { desc = {}; }
+    var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
+    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+        return false;
+    }
+    return true;
+}
+function rectDesc(desc) {
+    var bgColor = desc.bgColor;
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+        return false;
+    }
+    if (!box(desc)) {
+        return false;
+    }
+    return true;
+}
+function circleDesc(desc) {
+    var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
+        return false;
+    }
+    return true;
+}
+function imageDesc(desc) {
+    var src = desc.src;
+    if (!is.imageSrc(src)) {
+        return false;
+    }
+    return true;
+}
+function svgDesc(desc) {
+    var svg = desc.svg;
+    if (!is.svg(svg)) {
+        return false;
+    }
+    return true;
+}
+function htmlDesc(desc) {
+    var html = desc.html;
+    if (!is.html(html)) {
+        return false;
+    }
+    return true;
+}
+function textDesc(desc) {
+    var text = desc.text, color = desc.color, fontSize = desc.fontSize, lineHeight = desc.lineHeight, fontFamily = desc.fontFamily, textAlign = desc.textAlign, fontWeight = desc.fontWeight, bgColor = desc.bgColor, strokeWidth = desc.strokeWidth, strokeColor = desc.strokeColor;
+    if (!is.text(text)) {
+        return false;
+    }
+    if (!is.color(color)) {
+        return false;
+    }
+    if (!is.fontSize(fontSize)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
+        return false;
+    }
+    if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
+        return false;
+    }
+    if (!box(desc)) {
+        return false;
+    }
+    return true;
+}
+var check = {
+    attrs: attrs,
+    textDesc: textDesc,
+    rectDesc: rectDesc,
+    circleDesc: circleDesc,
+    imageDesc: imageDesc,
+    svgDesc: svgDesc,
+    htmlDesc: htmlDesc,
+};
+
+var default_1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  is: is,
+  check: check,
+  delay: delay,
+  compose: compose,
+  throttle: throttle,
+  loadImage: loadImage,
+  loadSVG: loadSVG,
+  loadHTML: loadHTML,
+  downloadImageFromCanvas: downloadImageFromCanvas,
+  toColorHexStr: toColorHexStr,
+  toColorHexNum: toColorHexNum,
+  isColorStr: isColorStr,
+  createUUID: createUUID,
+  istype: istype,
+  deepClone: deepClone,
+  Context: Context
+});
+
+module.exports = default_1;