@idraw/renderer 0.2.0-alpha.26 → 0.3.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +70 -84
- package/dist/index.d.ts +1 -2
- package/dist/{index.es.js → index.esm.js} +70 -84
- package/dist/index.global.js +70 -84
- package/dist/index.global.min.js +1 -1
- package/esm/default.d.ts +1 -0
- package/esm/default.js +2 -0
- package/esm/esm.d.ts +2 -0
- package/esm/esm.js +3 -0
- package/esm/index.js +136 -0
- package/esm/names.d.ts +9 -0
- package/esm/names.js +9 -0
- package/package.json +8 -6
|
@@ -116,18 +116,18 @@ function toColorHexNum(color) {
|
|
|
116
116
|
function toColorHexStr(color) {
|
|
117
117
|
return '#' + color.toString(16);
|
|
118
118
|
}
|
|
119
|
-
function isColorStr
|
|
119
|
+
function isColorStr(color) {
|
|
120
120
|
return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
|
|
121
121
|
}
|
|
122
|
-
function createUUID
|
|
122
|
+
function createUUID() {
|
|
123
123
|
function str4() {
|
|
124
124
|
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
125
125
|
}
|
|
126
126
|
return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
|
|
127
127
|
}
|
|
128
|
-
function deepClone
|
|
128
|
+
function deepClone(target) {
|
|
129
129
|
function _clone(t) {
|
|
130
|
-
var type = is$1
|
|
130
|
+
var type = is$1(t);
|
|
131
131
|
if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
|
|
132
132
|
return t;
|
|
133
133
|
}
|
|
@@ -149,7 +149,7 @@ function deepClone$2(target) {
|
|
|
149
149
|
}
|
|
150
150
|
return _clone(target);
|
|
151
151
|
}
|
|
152
|
-
function is$1
|
|
152
|
+
function is$1(data) {
|
|
153
153
|
return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
|
|
154
154
|
}
|
|
155
155
|
function parsePrototype(data) {
|
|
@@ -157,7 +157,7 @@ function parsePrototype(data) {
|
|
|
157
157
|
var result = typeStr.replace(/(\[object|\])/ig, '').trim();
|
|
158
158
|
return result;
|
|
159
159
|
}
|
|
160
|
-
var istype
|
|
160
|
+
var istype = {
|
|
161
161
|
type: function (data, lowerCase) {
|
|
162
162
|
var result = parsePrototype(data);
|
|
163
163
|
return lowerCase === true ? result.toLocaleLowerCase() : result;
|
|
@@ -270,7 +270,7 @@ function parseSVGToDataURL(svg) {
|
|
|
270
270
|
});
|
|
271
271
|
}
|
|
272
272
|
var Image = window.Image;
|
|
273
|
-
function loadImage
|
|
273
|
+
function loadImage(src) {
|
|
274
274
|
return new Promise(function (resolve, reject) {
|
|
275
275
|
var img = new Image;
|
|
276
276
|
img.onload = function () {
|
|
@@ -281,7 +281,7 @@ function loadImage$1(src) {
|
|
|
281
281
|
img.src = src;
|
|
282
282
|
});
|
|
283
283
|
}
|
|
284
|
-
function loadSVG
|
|
284
|
+
function loadSVG(svg) {
|
|
285
285
|
return __awaiter(this, void 0, void 0, function () {
|
|
286
286
|
var dataURL, image;
|
|
287
287
|
return __generator(this, function (_a) {
|
|
@@ -289,7 +289,7 @@ function loadSVG$1(svg) {
|
|
|
289
289
|
case 0: return [4, parseSVGToDataURL(svg)];
|
|
290
290
|
case 1:
|
|
291
291
|
dataURL = _a.sent();
|
|
292
|
-
return [4, loadImage
|
|
292
|
+
return [4, loadImage(dataURL)];
|
|
293
293
|
case 2:
|
|
294
294
|
image = _a.sent();
|
|
295
295
|
return [2, image];
|
|
@@ -297,7 +297,7 @@ function loadSVG$1(svg) {
|
|
|
297
297
|
});
|
|
298
298
|
});
|
|
299
299
|
}
|
|
300
|
-
function loadHTML
|
|
300
|
+
function loadHTML(html, opts) {
|
|
301
301
|
return __awaiter(this, void 0, void 0, function () {
|
|
302
302
|
var dataURL, image;
|
|
303
303
|
return __generator(this, function (_a) {
|
|
@@ -305,7 +305,7 @@ function loadHTML$1(html, opts) {
|
|
|
305
305
|
case 0: return [4, parseHTMLToDataURL(html, opts)];
|
|
306
306
|
case 1:
|
|
307
307
|
dataURL = _a.sent();
|
|
308
|
-
return [4, loadImage
|
|
308
|
+
return [4, loadImage(dataURL)];
|
|
309
309
|
case 2:
|
|
310
310
|
image = _a.sent();
|
|
311
311
|
return [2, image];
|
|
@@ -313,7 +313,7 @@ function loadHTML$1(html, opts) {
|
|
|
313
313
|
});
|
|
314
314
|
});
|
|
315
315
|
}
|
|
316
|
-
var Context
|
|
316
|
+
var Context = (function () {
|
|
317
317
|
function Context(ctx, opts) {
|
|
318
318
|
this._opts = opts;
|
|
319
319
|
this._ctx = ctx;
|
|
@@ -536,8 +536,8 @@ function borderWidth(value) {
|
|
|
536
536
|
function borderRadius(value) {
|
|
537
537
|
return number(value) && value >= 0;
|
|
538
538
|
}
|
|
539
|
-
function color
|
|
540
|
-
return isColorStr
|
|
539
|
+
function color(value) {
|
|
540
|
+
return isColorStr(value);
|
|
541
541
|
}
|
|
542
542
|
function imageURL(value) {
|
|
543
543
|
return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
|
|
@@ -584,7 +584,7 @@ function fontFamily(value) {
|
|
|
584
584
|
function fontWeight(value) {
|
|
585
585
|
return ['bold'].includes(value);
|
|
586
586
|
}
|
|
587
|
-
var is
|
|
587
|
+
var is = {
|
|
588
588
|
x: x,
|
|
589
589
|
y: y,
|
|
590
590
|
w: w,
|
|
@@ -593,7 +593,7 @@ var is$2 = {
|
|
|
593
593
|
number: number,
|
|
594
594
|
borderWidth: borderWidth,
|
|
595
595
|
borderRadius: borderRadius,
|
|
596
|
-
color: color
|
|
596
|
+
color: color,
|
|
597
597
|
imageSrc: imageSrc,
|
|
598
598
|
imageURL: imageURL,
|
|
599
599
|
imageBase64: imageBase64,
|
|
@@ -609,7 +609,7 @@ var is$2 = {
|
|
|
609
609
|
};
|
|
610
610
|
function attrs(attrs) {
|
|
611
611
|
var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
|
|
612
|
-
if (!(is
|
|
612
|
+
if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
|
|
613
613
|
return false;
|
|
614
614
|
}
|
|
615
615
|
if (!(angle >= -360 && angle <= 360)) {
|
|
@@ -620,20 +620,20 @@ function attrs(attrs) {
|
|
|
620
620
|
function box(desc) {
|
|
621
621
|
if (desc === void 0) { desc = {}; }
|
|
622
622
|
var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
|
|
623
|
-
if (desc.hasOwnProperty('borderColor') && !is
|
|
623
|
+
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
|
624
624
|
return false;
|
|
625
625
|
}
|
|
626
|
-
if (desc.hasOwnProperty('borderRadius') && !is
|
|
626
|
+
if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
|
|
627
627
|
return false;
|
|
628
628
|
}
|
|
629
|
-
if (desc.hasOwnProperty('borderWidth') && !is
|
|
629
|
+
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
|
630
630
|
return false;
|
|
631
631
|
}
|
|
632
632
|
return true;
|
|
633
633
|
}
|
|
634
634
|
function rectDesc(desc) {
|
|
635
635
|
var bgColor = desc.bgColor;
|
|
636
|
-
if (desc.hasOwnProperty('bgColor') && !is
|
|
636
|
+
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
637
637
|
return false;
|
|
638
638
|
}
|
|
639
639
|
if (!box(desc)) {
|
|
@@ -643,68 +643,68 @@ function rectDesc(desc) {
|
|
|
643
643
|
}
|
|
644
644
|
function circleDesc(desc) {
|
|
645
645
|
var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
|
|
646
|
-
if (desc.hasOwnProperty('bgColor') && !is
|
|
646
|
+
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
647
647
|
return false;
|
|
648
648
|
}
|
|
649
|
-
if (desc.hasOwnProperty('borderColor') && !is
|
|
649
|
+
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
|
650
650
|
return false;
|
|
651
651
|
}
|
|
652
|
-
if (desc.hasOwnProperty('borderWidth') && !is
|
|
652
|
+
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
|
653
653
|
return false;
|
|
654
654
|
}
|
|
655
655
|
return true;
|
|
656
656
|
}
|
|
657
657
|
function imageDesc(desc) {
|
|
658
658
|
var src = desc.src;
|
|
659
|
-
if (!is
|
|
659
|
+
if (!is.imageSrc(src)) {
|
|
660
660
|
return false;
|
|
661
661
|
}
|
|
662
662
|
return true;
|
|
663
663
|
}
|
|
664
664
|
function svgDesc(desc) {
|
|
665
665
|
var svg = desc.svg;
|
|
666
|
-
if (!is
|
|
666
|
+
if (!is.svg(svg)) {
|
|
667
667
|
return false;
|
|
668
668
|
}
|
|
669
669
|
return true;
|
|
670
670
|
}
|
|
671
671
|
function htmlDesc(desc) {
|
|
672
672
|
var html = desc.html;
|
|
673
|
-
if (!is
|
|
673
|
+
if (!is.html(html)) {
|
|
674
674
|
return false;
|
|
675
675
|
}
|
|
676
676
|
return true;
|
|
677
677
|
}
|
|
678
678
|
function textDesc(desc) {
|
|
679
679
|
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;
|
|
680
|
-
if (!is
|
|
680
|
+
if (!is.text(text)) {
|
|
681
681
|
return false;
|
|
682
682
|
}
|
|
683
|
-
if (!is
|
|
683
|
+
if (!is.color(color)) {
|
|
684
684
|
return false;
|
|
685
685
|
}
|
|
686
|
-
if (!is
|
|
686
|
+
if (!is.fontSize(fontSize)) {
|
|
687
687
|
return false;
|
|
688
688
|
}
|
|
689
|
-
if (desc.hasOwnProperty('bgColor') && !is
|
|
689
|
+
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
690
690
|
return false;
|
|
691
691
|
}
|
|
692
|
-
if (desc.hasOwnProperty('fontWeight') && !is
|
|
692
|
+
if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
|
|
693
693
|
return false;
|
|
694
694
|
}
|
|
695
|
-
if (desc.hasOwnProperty('lineHeight') && !is
|
|
695
|
+
if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
|
|
696
696
|
return false;
|
|
697
697
|
}
|
|
698
|
-
if (desc.hasOwnProperty('fontFamily') && !is
|
|
698
|
+
if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
|
|
699
699
|
return false;
|
|
700
700
|
}
|
|
701
|
-
if (desc.hasOwnProperty('textAlign') && !is
|
|
701
|
+
if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
|
|
702
702
|
return false;
|
|
703
703
|
}
|
|
704
|
-
if (desc.hasOwnProperty('strokeWidth') && !is
|
|
704
|
+
if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
|
|
705
705
|
return false;
|
|
706
706
|
}
|
|
707
|
-
if (desc.hasOwnProperty('strokeColor') && !is
|
|
707
|
+
if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
|
|
708
708
|
return false;
|
|
709
709
|
}
|
|
710
710
|
if (!box(desc)) {
|
|
@@ -721,36 +721,25 @@ var check = {
|
|
|
721
721
|
svgDesc: svgDesc,
|
|
722
722
|
htmlDesc: htmlDesc,
|
|
723
723
|
};
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
isColorStr: isColorStr$1,
|
|
744
|
-
},
|
|
745
|
-
uuid: {
|
|
746
|
-
createUUID: createUUID$1
|
|
747
|
-
},
|
|
748
|
-
istype: istype$1,
|
|
749
|
-
data: {
|
|
750
|
-
deepClone: deepClone$2,
|
|
751
|
-
},
|
|
752
|
-
Context: Context$1,
|
|
753
|
-
};
|
|
724
|
+
Object.freeze({
|
|
725
|
+
__proto__: null,
|
|
726
|
+
is: is,
|
|
727
|
+
check: check,
|
|
728
|
+
delay: delay,
|
|
729
|
+
compose: compose,
|
|
730
|
+
throttle: throttle,
|
|
731
|
+
loadImage: loadImage,
|
|
732
|
+
loadSVG: loadSVG,
|
|
733
|
+
loadHTML: loadHTML,
|
|
734
|
+
downloadImageFromCanvas: downloadImageFromCanvas,
|
|
735
|
+
toColorHexStr: toColorHexStr,
|
|
736
|
+
toColorHexNum: toColorHexNum,
|
|
737
|
+
isColorStr: isColorStr,
|
|
738
|
+
createUUID: createUUID,
|
|
739
|
+
istype: istype,
|
|
740
|
+
deepClone: deepClone,
|
|
741
|
+
Context: Context
|
|
742
|
+
});
|
|
754
743
|
|
|
755
744
|
function parseAngleToRadian(angle) {
|
|
756
745
|
return angle / 180 * Math.PI;
|
|
@@ -782,7 +771,6 @@ function rotateContext(ctx, center, radian, callback) {
|
|
|
782
771
|
}
|
|
783
772
|
}
|
|
784
773
|
|
|
785
|
-
var is$1 = index.is, istype = index.istype, color$1 = index.color;
|
|
786
774
|
function clearContext(ctx) {
|
|
787
775
|
ctx.setFillStyle('#000000');
|
|
788
776
|
ctx.setStrokeStyle('#000000');
|
|
@@ -833,7 +821,7 @@ function drawBoxBorder(ctx, elem) {
|
|
|
833
821
|
}
|
|
834
822
|
var bw = elem.desc.borderWidth;
|
|
835
823
|
var borderColor = '#000000';
|
|
836
|
-
if (
|
|
824
|
+
if (isColorStr(elem.desc.borderColor) === true) {
|
|
837
825
|
borderColor = elem.desc.borderColor;
|
|
838
826
|
}
|
|
839
827
|
var x = elem.x - bw / 2;
|
|
@@ -846,16 +834,16 @@ function drawBoxBorder(ctx, elem) {
|
|
|
846
834
|
r = r + bw / 2;
|
|
847
835
|
}
|
|
848
836
|
var desc = elem.desc;
|
|
849
|
-
if (desc.shadowColor !== undefined &&
|
|
837
|
+
if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
|
|
850
838
|
ctx.setShadowColor(desc.shadowColor);
|
|
851
839
|
}
|
|
852
|
-
if (desc.shadowOffsetX !== undefined && is
|
|
840
|
+
if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
|
|
853
841
|
ctx.setShadowOffsetX(desc.shadowOffsetX);
|
|
854
842
|
}
|
|
855
|
-
if (desc.shadowOffsetY !== undefined && is
|
|
843
|
+
if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
|
|
856
844
|
ctx.setShadowOffsetY(desc.shadowOffsetY);
|
|
857
845
|
}
|
|
858
|
-
if (desc.shadowBlur !== undefined && is
|
|
846
|
+
if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
|
|
859
847
|
ctx.setShadowBlur(desc.shadowBlur);
|
|
860
848
|
}
|
|
861
849
|
ctx.beginPath();
|
|
@@ -902,7 +890,6 @@ function drawHTML(ctx, elem, loader) {
|
|
|
902
890
|
});
|
|
903
891
|
}
|
|
904
892
|
|
|
905
|
-
var is = index.is, color = index.color;
|
|
906
893
|
function drawText(ctx, elem, loader) {
|
|
907
894
|
clearContext(ctx);
|
|
908
895
|
drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
|
|
@@ -968,7 +955,7 @@ function drawText(ctx, elem, loader) {
|
|
|
968
955
|
if (lines.length * fontHeight < elem.h) {
|
|
969
956
|
_y_1 += ((elem.h - lines.length * fontHeight) / 2);
|
|
970
957
|
}
|
|
971
|
-
if (desc.textShadowColor !== undefined &&
|
|
958
|
+
if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
|
|
972
959
|
ctx.setShadowColor(desc.textShadowColor);
|
|
973
960
|
}
|
|
974
961
|
if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
|
|
@@ -992,7 +979,7 @@ function drawText(ctx, elem, loader) {
|
|
|
992
979
|
});
|
|
993
980
|
clearContext(ctx);
|
|
994
981
|
}
|
|
995
|
-
if (
|
|
982
|
+
if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
|
|
996
983
|
var _y_2 = elem.y;
|
|
997
984
|
if (lines.length * fontHeight < elem.h) {
|
|
998
985
|
_y_2 += ((elem.h - lines.length * fontHeight) / 2);
|
|
@@ -1044,7 +1031,6 @@ function drawCircle(ctx, elem) {
|
|
|
1044
1031
|
});
|
|
1045
1032
|
}
|
|
1046
1033
|
|
|
1047
|
-
var isColorStr = index.color.isColorStr;
|
|
1048
1034
|
function drawContext(ctx, data, loader) {
|
|
1049
1035
|
var _a;
|
|
1050
1036
|
clearContext(ctx);
|
|
@@ -1146,8 +1132,6 @@ function filterScript(html) {
|
|
|
1146
1132
|
return html.replace(/<script[\s\S]*?<\/script>/ig, '');
|
|
1147
1133
|
}
|
|
1148
1134
|
|
|
1149
|
-
var _a$1 = index.loader, loadImage = _a$1.loadImage, loadSVG = _a$1.loadSVG, loadHTML = _a$1.loadHTML;
|
|
1150
|
-
var deepClone$1 = index.data.deepClone;
|
|
1151
1135
|
var LoaderStatus;
|
|
1152
1136
|
(function (LoaderStatus) {
|
|
1153
1137
|
LoaderStatus["FREE"] = "free";
|
|
@@ -1243,7 +1227,7 @@ var Loader = (function () {
|
|
|
1243
1227
|
source: source,
|
|
1244
1228
|
elemW: elemW,
|
|
1245
1229
|
elemH: elemH,
|
|
1246
|
-
element: deepClone
|
|
1230
|
+
element: deepClone(elem),
|
|
1247
1231
|
};
|
|
1248
1232
|
};
|
|
1249
1233
|
Loader.prototype._loadTask = function () {
|
|
@@ -1456,9 +1440,6 @@ var _retainQueueOneItem = Symbol('_retainQueueOneItem');
|
|
|
1456
1440
|
|
|
1457
1441
|
var _a, _b, _c;
|
|
1458
1442
|
var requestAnimationFrame = window.requestAnimationFrame;
|
|
1459
|
-
var createUUID = index.uuid.createUUID;
|
|
1460
|
-
var deepClone = index.data.deepClone;
|
|
1461
|
-
var Context = index.Context;
|
|
1462
1443
|
var DrawStatus;
|
|
1463
1444
|
(function (DrawStatus) {
|
|
1464
1445
|
DrawStatus["NULL"] = "null";
|
|
@@ -1593,4 +1574,9 @@ var Renderer = (function (_super) {
|
|
|
1593
1574
|
return Renderer;
|
|
1594
1575
|
}(RendererEvent));
|
|
1595
1576
|
|
|
1596
|
-
|
|
1577
|
+
var default_1 = /*#__PURE__*/Object.freeze({
|
|
1578
|
+
__proto__: null,
|
|
1579
|
+
Renderer: Renderer
|
|
1580
|
+
});
|
|
1581
|
+
|
|
1582
|
+
export { Renderer, default_1 as default };
|