@idraw/util 0.2.0-alpha.2 → 0.2.0-alpha.23

package/dist/index.es.js

@@ -71,7 +71,7 @@ function createUUID() {
 
 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;
         }
@@ -93,7 +93,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];
 }
 
@@ -134,61 +134,82 @@ var istype = {
     promise: function (data) {
         return parsePrototype(data) === 'Promise';
     },
-    nodeList: function (data) {
-        return parsePrototype(data) === 'NodeList';
-    },
-    imageData: function (data) {
-        return parsePrototype(data) === 'ImageData';
-    }
 };
 
-var Image = window.Image, Blob = window.Blob, FileReader = window.FileReader;
-function loadImage(src) {
-    return new Promise(function (resolve, reject) {
-        var img = new Image;
-        img.onload = function () {
-            resolve(img);
-        };
-        img.onabort = reject;
-        img.onerror = reject;
-        img.src = src;
-    });
-}
-function loadSVG(svg) {
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function parseHTMLToDataURL(html, opts) {
+    var width = opts.width, height = opts.height;
     return new Promise(function (resolve, reject) {
-        var _svg = svg;
-        var image = new Image();
+        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 blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
         var reader = new FileReader();
         reader.readAsDataURL(blob);
         reader.onload = function (event) {
             var _a;
             var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
-            image.onload = function () {
-                resolve(image);
-            };
-            image.src = base64;
+            resolve(base64);
         };
         reader.onerror = function (err) {
             reject(err);
         };
     });
 }
-function loadHTML(html, opts) {
-    var width = opts.width, height = opts.height;
+function parseSVGToDataURL(svg) {
     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 image = new Image();
+        var _svg = svg;
         var blob = new Blob([_svg], { type: 'image/svg+xml;charset=utf-8' });
         var reader = new FileReader();
         reader.readAsDataURL(blob);
         reader.onload = function (event) {
             var _a;
             var base64 = (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result;
-            image.onload = function () {
-                resolve(image);
-            };
-            image.src = base64;
+            resolve(base64);
         };
         reader.onerror = function (err) {
             reject(err);
@@ -196,7 +217,465 @@ function loadHTML(html, opts) {
     });
 }
 
+var Image = window.Image;
+function loadImage(src) {
+    return new Promise(function (resolve, reject) {
+        var img = new Image;
+        img.onload = function () {
+            resolve(img);
+        };
+        img.onabort = reject;
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+function loadSVG(svg) {
+    return __awaiter(this, void 0, void 0, function () {
+        var dataURL, image;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4, parseSVGToDataURL(svg)];
+                case 1:
+                    dataURL = _a.sent();
+                    return [4, loadImage(dataURL)];
+                case 2:
+                    image = _a.sent();
+                    return [2, image];
+            }
+        });
+    });
+}
+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 1:
+                    dataURL = _a.sent();
+                    return [4, loadImage(dataURL)];
+                case 2:
+                    image = _a.sent();
+                    return [2, image];
+            }
+        });
+    });
+}
+
+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("" + opts.fontWeight);
+        }
+        strList.push(this._doSize(opts.fontSize || 12) + "px");
+        strList.push("" + (opts.fontFamily || 'sans-serif'));
+        this._ctx.font = "" + 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("" + value));
+}
+function imageBase64(value) {
+    return (typeof value === 'string' && /^(data:image\/)/.test("" + value));
+}
+function imageSrc(value) {
+    return (imageBase64(value) || imageURL(value));
+}
+function svg(value) {
+    return (typeof value === 'string' && /^(<svg[\s]{1,}|<svg>)/i.test(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + 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,
+};
+
+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 index = {
+    is: is,
+    check: check,
     time: {
         delay: delay,
         compose: compose,
@@ -221,7 +700,8 @@ var index = {
     istype: istype,
     data: {
         deepClone: deepClone,
-    }
+    },
+    Context: Context,
 };
 
 export { index as default };