@idraw/renderer 0.2.0-alpha.24 → 0.3.0-alpha.0

package/dist/index.cjs.js

@@ -118,18 +118,18 @@ function toColorHexNum(color) {
 function toColorHexStr(color) {
     return '#' + color.toString(16);
 }
-function isColorStr$1(color) {
+function isColorStr(color) {
     return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
 }
-function createUUID$1() {
+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$2(target) {
+function deepClone(target) {
     function _clone(t) {
-        var type = is$1$1(t);
+        var type = is$1(t);
         if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
             return t;
         }
@@ -151,7 +151,7 @@ function deepClone$2(target) {
     }
     return _clone(target);
 }
-function is$1$1(data) {
+function is$1(data) {
     return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
 }
 function parsePrototype(data) {
@@ -159,7 +159,7 @@ function parsePrototype(data) {
     var result = typeStr.replace(/(\[object|\])/ig, '').trim();
     return result;
 }
-var istype$1 = {
+var istype = {
     type: function (data, lowerCase) {
         var result = parsePrototype(data);
         return lowerCase === true ? result.toLocaleLowerCase() : result;
@@ -241,7 +241,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);
@@ -272,7 +272,7 @@ function parseSVGToDataURL(svg) {
     });
 }
 var Image = window.Image;
-function loadImage$1(src) {
+function loadImage(src) {
     return new Promise(function (resolve, reject) {
         var img = new Image;
         img.onload = function () {
@@ -283,7 +283,7 @@ function loadImage$1(src) {
         img.src = src;
     });
 }
-function loadSVG$1(svg) {
+function loadSVG(svg) {
     return __awaiter(this, void 0, void 0, function () {
         var dataURL, image;
         return __generator(this, function (_a) {
@@ -291,7 +291,7 @@ function loadSVG$1(svg) {
                 case 0: return [4, parseSVGToDataURL(svg)];
                 case 1:
                     dataURL = _a.sent();
-                    return [4, loadImage$1(dataURL)];
+                    return [4, loadImage(dataURL)];
                 case 2:
                     image = _a.sent();
                     return [2, image];
@@ -299,7 +299,7 @@ function loadSVG$1(svg) {
         });
     });
 }
-function loadHTML$1(html, opts) {
+function loadHTML(html, opts) {
     return __awaiter(this, void 0, void 0, function () {
         var dataURL, image;
         return __generator(this, function (_a) {
@@ -307,7 +307,7 @@ function loadHTML$1(html, opts) {
                 case 0: return [4, parseHTMLToDataURL(html, opts)];
                 case 1:
                     dataURL = _a.sent();
-                    return [4, loadImage$1(dataURL)];
+                    return [4, loadImage(dataURL)];
                 case 2:
                     image = _a.sent();
                     return [2, image];
@@ -315,7 +315,7 @@ function loadHTML$1(html, opts) {
         });
     });
 }
-var Context$1 = (function () {
+var Context = (function () {
     function Context(ctx, opts) {
         this._opts = opts;
         this._ctx = ctx;
@@ -463,11 +463,11 @@ var Context$1 = (function () {
     Context.prototype.setFont = function (opts) {
         var strList = [];
         if (opts.fontWeight === 'bold') {
-            strList.push("" + opts.fontWeight);
+            strList.push("".concat(opts.fontWeight));
         }
-        strList.push(this._doSize(opts.fontSize || 12) + "px");
-        strList.push("" + (opts.fontFamily || 'sans-serif'));
-        this._ctx.font = "" + strList.join(' ');
+        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;
@@ -538,20 +538,20 @@ function borderWidth(value) {
 function borderRadius(value) {
     return number(value) && value >= 0;
 }
-function color$2(value) {
-    return isColorStr$1(value);
+function color(value) {
+    return isColorStr(value);
 }
 function imageURL(value) {
-    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("" + value));
+    return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
 }
 function imageBase64(value) {
-    return (typeof value === 'string' && /^(data:image\/)/.test("" + 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(("" + value).trim()) && /<\/[\s]{0,}svg>$/i.test(("" + value).trim()));
+    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;
@@ -586,7 +586,7 @@ function fontFamily(value) {
 function fontWeight(value) {
     return ['bold'].includes(value);
 }
-var is$2 = {
+var is = {
     x: x,
     y: y,
     w: w,
@@ -595,7 +595,7 @@ var is$2 = {
     number: number,
     borderWidth: borderWidth,
     borderRadius: borderRadius,
-    color: color$2,
+    color: color,
     imageSrc: imageSrc,
     imageURL: imageURL,
     imageBase64: imageBase64,
@@ -611,7 +611,7 @@ var is$2 = {
 };
 function attrs(attrs) {
     var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
-    if (!(is$2.x(x) && is$2.y(y) && is$2.w(w) && is$2.h(h) && is$2.angle(angle))) {
+    if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
         return false;
     }
     if (!(angle >= -360 && angle <= 360)) {
@@ -622,20 +622,20 @@ function attrs(attrs) {
 function box(desc) {
     if (desc === void 0) { desc = {}; }
     var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
-    if (desc.hasOwnProperty('borderColor') && !is$2.color(borderColor)) {
+    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderRadius') && !is$2.number(borderRadius)) {
+    if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderWidth') && !is$2.number(borderWidth)) {
+    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
         return false;
     }
     return true;
 }
 function rectDesc(desc) {
     var bgColor = desc.bgColor;
-    if (desc.hasOwnProperty('bgColor') && !is$2.color(bgColor)) {
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
         return false;
     }
     if (!box(desc)) {
@@ -645,68 +645,68 @@ function rectDesc(desc) {
 }
 function circleDesc(desc) {
     var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
-    if (desc.hasOwnProperty('bgColor') && !is$2.color(bgColor)) {
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderColor') && !is$2.color(borderColor)) {
+    if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
         return false;
     }
-    if (desc.hasOwnProperty('borderWidth') && !is$2.number(borderWidth)) {
+    if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
         return false;
     }
     return true;
 }
 function imageDesc(desc) {
     var src = desc.src;
-    if (!is$2.imageSrc(src)) {
+    if (!is.imageSrc(src)) {
         return false;
     }
     return true;
 }
 function svgDesc(desc) {
     var svg = desc.svg;
-    if (!is$2.svg(svg)) {
+    if (!is.svg(svg)) {
         return false;
     }
     return true;
 }
 function htmlDesc(desc) {
     var html = desc.html;
-    if (!is$2.html(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$2.text(text)) {
+    if (!is.text(text)) {
         return false;
     }
-    if (!is$2.color(color)) {
+    if (!is.color(color)) {
         return false;
     }
-    if (!is$2.fontSize(fontSize)) {
+    if (!is.fontSize(fontSize)) {
         return false;
     }
-    if (desc.hasOwnProperty('bgColor') && !is$2.color(bgColor)) {
+    if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
         return false;
     }
-    if (desc.hasOwnProperty('fontWeight') && !is$2.fontWeight(fontWeight)) {
+    if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
         return false;
     }
-    if (desc.hasOwnProperty('lineHeight') && !is$2.lineHeight(lineHeight)) {
+    if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
         return false;
     }
-    if (desc.hasOwnProperty('fontFamily') && !is$2.fontFamily(fontFamily)) {
+    if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
         return false;
     }
-    if (desc.hasOwnProperty('textAlign') && !is$2.textAlign(textAlign)) {
+    if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
         return false;
     }
-    if (desc.hasOwnProperty('strokeWidth') && !is$2.strokeWidth(strokeWidth)) {
+    if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
         return false;
     }
-    if (desc.hasOwnProperty('strokeColor') && !is$2.color(strokeColor)) {
+    if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
         return false;
     }
     if (!box(desc)) {
@@ -723,36 +723,25 @@ var check = {
     svgDesc: svgDesc,
     htmlDesc: htmlDesc,
 };
-var index = {
-    is: is$2,
-    check: check,
-    time: {
-        delay: delay,
-        compose: compose,
-        throttle: throttle,
-    },
-    loader: {
-        loadImage: loadImage$1,
-        loadSVG: loadSVG$1,
-        loadHTML: loadHTML$1,
-    },
-    file: {
-        downloadImageFromCanvas: downloadImageFromCanvas,
-    },
-    color: {
-        toColorHexStr: toColorHexStr,
-        toColorHexNum: toColorHexNum,
-        isColorStr: isColorStr$1,
-    },
-    uuid: {
-        createUUID: createUUID$1
-    },
-    istype: istype$1,
-    data: {
-        deepClone: deepClone$2,
-    },
-    Context: Context$1,
-};
+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
+});
 
 function parseAngleToRadian(angle) {
     return angle / 180 * Math.PI;
@@ -784,7 +773,6 @@ function rotateContext(ctx, center, radian, callback) {
     }
 }
 
-var is$1 = index.is, istype = index.istype, color$1 = index.color;
 function clearContext(ctx) {
     ctx.setFillStyle('#000000');
     ctx.setStrokeStyle('#000000');
@@ -835,7 +823,7 @@ function drawBoxBorder(ctx, elem) {
         }
         var bw = elem.desc.borderWidth;
         var borderColor = '#000000';
-        if (color$1.isColorStr(elem.desc.borderColor) === true) {
+        if (isColorStr(elem.desc.borderColor) === true) {
             borderColor = elem.desc.borderColor;
         }
         var x = elem.x - bw / 2;
@@ -848,16 +836,16 @@ function drawBoxBorder(ctx, elem) {
             r = r + bw / 2;
         }
         var desc = elem.desc;
-        if (desc.shadowColor !== undefined && color$1.isColorStr(desc.shadowColor)) {
+        if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
             ctx.setShadowColor(desc.shadowColor);
         }
-        if (desc.shadowOffsetX !== undefined && is$1.number(desc.shadowOffsetX)) {
+        if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
             ctx.setShadowOffsetX(desc.shadowOffsetX);
         }
-        if (desc.shadowOffsetY !== undefined && is$1.number(desc.shadowOffsetY)) {
+        if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
             ctx.setShadowOffsetY(desc.shadowOffsetY);
         }
-        if (desc.shadowBlur !== undefined && is$1.number(desc.shadowBlur)) {
+        if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
             ctx.setShadowBlur(desc.shadowBlur);
         }
         ctx.beginPath();
@@ -904,7 +892,6 @@ function drawHTML(ctx, elem, loader) {
     });
 }
 
-var is = index.is, color = index.color;
 function drawText(ctx, elem, loader) {
     clearContext(ctx);
     drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
@@ -925,41 +912,52 @@ function drawText(ctx, elem, loader) {
         var fontHeight = desc.lineHeight || desc.fontSize;
         var descTextList = descText.split('\n');
         var lines = [];
-        descTextList.forEach(function (tempText) {
+        var lineNum = 0;
+        descTextList.forEach(function (tempText, idx) {
             var lineText = '';
-            var lineNum = 0;
-            for (var i = 0; i < tempText.length; i++) {
-                if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
-                    lineText += (tempText[i] || '');
-                }
-                else {
-                    lines.push({
-                        text: lineText,
-                        width: ctx.calcScreenNum(ctx.measureText(lineText).width),
-                    });
-                    lineText = (tempText[i] || '');
-                    lineNum++;
-                }
-                if ((lineNum + 1) * fontHeight > elem.h) {
-                    break;
-                }
-                if (lineText && tempText.length - 1 === i) {
-                    if ((lineNum + 1) * fontHeight < elem.h) {
+            if (tempText.length > 0) {
+                for (var i = 0; i < tempText.length; i++) {
+                    if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
+                        lineText += (tempText[i] || '');
+                    }
+                    else {
                         lines.push({
                             text: lineText,
                             width: ctx.calcScreenNum(ctx.measureText(lineText).width),
                         });
+                        lineText = (tempText[i] || '');
+                        lineNum++;
+                    }
+                    if ((lineNum + 1) * fontHeight > elem.h) {
                         break;
                     }
+                    if (tempText.length - 1 === i) {
+                        if ((lineNum + 1) * fontHeight < elem.h) {
+                            lines.push({
+                                text: lineText,
+                                width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+                            });
+                            if (idx < descTextList.length - 1) {
+                                lineNum++;
+                            }
+                            break;
+                        }
+                    }
                 }
             }
+            else {
+                lines.push({
+                    text: '',
+                    width: 0,
+                });
+            }
         });
         {
             var _y_1 = elem.y;
             if (lines.length * fontHeight < elem.h) {
                 _y_1 += ((elem.h - lines.length * fontHeight) / 2);
             }
-            if (desc.textShadowColor !== undefined && color.isColorStr(desc.textShadowColor)) {
+            if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
                 ctx.setShadowColor(desc.textShadowColor);
             }
             if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
@@ -983,7 +981,7 @@ function drawText(ctx, elem, loader) {
             });
             clearContext(ctx);
         }
-        if (color.isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
+        if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
             var _y_2 = elem.y;
             if (lines.length * fontHeight < elem.h) {
                 _y_2 += ((elem.h - lines.length * fontHeight) / 2);
@@ -1035,7 +1033,6 @@ function drawCircle(ctx, elem) {
     });
 }
 
-var isColorStr = index.color.isColorStr;
 function drawContext(ctx, data, loader) {
     var _a;
     clearContext(ctx);
@@ -1137,8 +1134,6 @@ function filterScript(html) {
     return html.replace(/<script[\s\S]*?<\/script>/ig, '');
 }
 
-var _a$1 = index.loader, loadImage = _a$1.loadImage, loadSVG = _a$1.loadSVG, loadHTML = _a$1.loadHTML;
-var deepClone$1 = index.data.deepClone;
 var LoaderStatus;
 (function (LoaderStatus) {
     LoaderStatus["FREE"] = "free";
@@ -1234,7 +1229,7 @@ var Loader = (function () {
             source: source,
             elemW: elemW,
             elemH: elemH,
-            element: deepClone$1(elem),
+            element: deepClone(elem),
         };
     };
     Loader.prototype._loadTask = function () {
@@ -1447,9 +1442,6 @@ var _retainQueueOneItem = Symbol('_retainQueueOneItem');
 
 var _a, _b, _c;
 var requestAnimationFrame = window.requestAnimationFrame;
-var createUUID = index.uuid.createUUID;
-var deepClone = index.data.deepClone;
-var Context = index.Context;
 var DrawStatus;
 (function (DrawStatus) {
     DrawStatus["NULL"] = "null";
@@ -1584,4 +1576,9 @@ var Renderer = (function (_super) {
     return Renderer;
 }(RendererEvent));
 
-module.exports = Renderer;
+var default_1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Renderer: Renderer
+});
+
+module.exports = default_1;

package/dist/index.d.ts

@@ -23,7 +23,7 @@ declare const _opts: unique symbol;
 
 declare const _queue: unique symbol;
 
-declare class Renderer extends RendererEvent {
+export declare class Renderer extends RendererEvent {
     private [_queue];
     private [_ctx];
     private [_status];
@@ -39,7 +39,6 @@ declare class Renderer extends RendererEvent {
     private [_drawFrame];
     private [_retainQueueOneItem];
 }
-export default Renderer;
 
 declare class RendererEvent implements TypeRendererEvent {
     private _listeners;