@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
package/dist/index.cjs.js
CHANGED
|
@@ -118,18 +118,18 @@ function toColorHexNum(color) {
|
|
|
118
118
|
function toColorHexStr(color) {
|
|
119
119
|
return '#' + color.toString(16);
|
|
120
120
|
}
|
|
121
|
-
function isColorStr
|
|
121
|
+
function isColorStr(color) {
|
|
122
122
|
return typeof color === 'string' && /^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(color);
|
|
123
123
|
}
|
|
124
|
-
function createUUID
|
|
124
|
+
function createUUID() {
|
|
125
125
|
function str4() {
|
|
126
126
|
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
127
127
|
}
|
|
128
128
|
return "".concat(str4()).concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4(), "-").concat(str4()).concat(str4()).concat(str4());
|
|
129
129
|
}
|
|
130
|
-
function deepClone
|
|
130
|
+
function deepClone(target) {
|
|
131
131
|
function _clone(t) {
|
|
132
|
-
var type = is$1
|
|
132
|
+
var type = is$1(t);
|
|
133
133
|
if (['Null', 'Number', 'String', 'Boolean', 'Undefined'].indexOf(type) >= 0) {
|
|
134
134
|
return t;
|
|
135
135
|
}
|
|
@@ -151,7 +151,7 @@ function deepClone$2(target) {
|
|
|
151
151
|
}
|
|
152
152
|
return _clone(target);
|
|
153
153
|
}
|
|
154
|
-
function is$1
|
|
154
|
+
function is$1(data) {
|
|
155
155
|
return Object.prototype.toString.call(data).replace(/[\]|\[]{1,1}/ig, '').split(' ')[1];
|
|
156
156
|
}
|
|
157
157
|
function parsePrototype(data) {
|
|
@@ -159,7 +159,7 @@ function parsePrototype(data) {
|
|
|
159
159
|
var result = typeStr.replace(/(\[object|\])/ig, '').trim();
|
|
160
160
|
return result;
|
|
161
161
|
}
|
|
162
|
-
var istype
|
|
162
|
+
var istype = {
|
|
163
163
|
type: function (data, lowerCase) {
|
|
164
164
|
var result = parsePrototype(data);
|
|
165
165
|
return lowerCase === true ? result.toLocaleLowerCase() : result;
|
|
@@ -272,7 +272,7 @@ function parseSVGToDataURL(svg) {
|
|
|
272
272
|
});
|
|
273
273
|
}
|
|
274
274
|
var Image = window.Image;
|
|
275
|
-
function loadImage
|
|
275
|
+
function loadImage(src) {
|
|
276
276
|
return new Promise(function (resolve, reject) {
|
|
277
277
|
var img = new Image;
|
|
278
278
|
img.onload = function () {
|
|
@@ -283,7 +283,7 @@ function loadImage$1(src) {
|
|
|
283
283
|
img.src = src;
|
|
284
284
|
});
|
|
285
285
|
}
|
|
286
|
-
function loadSVG
|
|
286
|
+
function loadSVG(svg) {
|
|
287
287
|
return __awaiter(this, void 0, void 0, function () {
|
|
288
288
|
var dataURL, image;
|
|
289
289
|
return __generator(this, function (_a) {
|
|
@@ -291,7 +291,7 @@ function loadSVG$1(svg) {
|
|
|
291
291
|
case 0: return [4, parseSVGToDataURL(svg)];
|
|
292
292
|
case 1:
|
|
293
293
|
dataURL = _a.sent();
|
|
294
|
-
return [4, loadImage
|
|
294
|
+
return [4, loadImage(dataURL)];
|
|
295
295
|
case 2:
|
|
296
296
|
image = _a.sent();
|
|
297
297
|
return [2, image];
|
|
@@ -299,7 +299,7 @@ function loadSVG$1(svg) {
|
|
|
299
299
|
});
|
|
300
300
|
});
|
|
301
301
|
}
|
|
302
|
-
function loadHTML
|
|
302
|
+
function loadHTML(html, opts) {
|
|
303
303
|
return __awaiter(this, void 0, void 0, function () {
|
|
304
304
|
var dataURL, image;
|
|
305
305
|
return __generator(this, function (_a) {
|
|
@@ -307,7 +307,7 @@ function loadHTML$1(html, opts) {
|
|
|
307
307
|
case 0: return [4, parseHTMLToDataURL(html, opts)];
|
|
308
308
|
case 1:
|
|
309
309
|
dataURL = _a.sent();
|
|
310
|
-
return [4, loadImage
|
|
310
|
+
return [4, loadImage(dataURL)];
|
|
311
311
|
case 2:
|
|
312
312
|
image = _a.sent();
|
|
313
313
|
return [2, image];
|
|
@@ -315,7 +315,7 @@ function loadHTML$1(html, opts) {
|
|
|
315
315
|
});
|
|
316
316
|
});
|
|
317
317
|
}
|
|
318
|
-
var Context
|
|
318
|
+
var Context = (function () {
|
|
319
319
|
function Context(ctx, opts) {
|
|
320
320
|
this._opts = opts;
|
|
321
321
|
this._ctx = ctx;
|
|
@@ -538,8 +538,8 @@ function borderWidth(value) {
|
|
|
538
538
|
function borderRadius(value) {
|
|
539
539
|
return number(value) && value >= 0;
|
|
540
540
|
}
|
|
541
|
-
function color
|
|
542
|
-
return isColorStr
|
|
541
|
+
function color(value) {
|
|
542
|
+
return isColorStr(value);
|
|
543
543
|
}
|
|
544
544
|
function imageURL(value) {
|
|
545
545
|
return (typeof value === 'string' && /^(http:\/\/|https:\/\/|\.\/|\/)/.test("".concat(value)));
|
|
@@ -586,7 +586,7 @@ function fontFamily(value) {
|
|
|
586
586
|
function fontWeight(value) {
|
|
587
587
|
return ['bold'].includes(value);
|
|
588
588
|
}
|
|
589
|
-
var is
|
|
589
|
+
var is = {
|
|
590
590
|
x: x,
|
|
591
591
|
y: y,
|
|
592
592
|
w: w,
|
|
@@ -595,7 +595,7 @@ var is$2 = {
|
|
|
595
595
|
number: number,
|
|
596
596
|
borderWidth: borderWidth,
|
|
597
597
|
borderRadius: borderRadius,
|
|
598
|
-
color: color
|
|
598
|
+
color: color,
|
|
599
599
|
imageSrc: imageSrc,
|
|
600
600
|
imageURL: imageURL,
|
|
601
601
|
imageBase64: imageBase64,
|
|
@@ -611,7 +611,7 @@ var is$2 = {
|
|
|
611
611
|
};
|
|
612
612
|
function attrs(attrs) {
|
|
613
613
|
var x = attrs.x, y = attrs.y, w = attrs.w, h = attrs.h, angle = attrs.angle;
|
|
614
|
-
if (!(is
|
|
614
|
+
if (!(is.x(x) && is.y(y) && is.w(w) && is.h(h) && is.angle(angle))) {
|
|
615
615
|
return false;
|
|
616
616
|
}
|
|
617
617
|
if (!(angle >= -360 && angle <= 360)) {
|
|
@@ -622,20 +622,20 @@ function attrs(attrs) {
|
|
|
622
622
|
function box(desc) {
|
|
623
623
|
if (desc === void 0) { desc = {}; }
|
|
624
624
|
var borderColor = desc.borderColor, borderRadius = desc.borderRadius, borderWidth = desc.borderWidth;
|
|
625
|
-
if (desc.hasOwnProperty('borderColor') && !is
|
|
625
|
+
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
|
626
626
|
return false;
|
|
627
627
|
}
|
|
628
|
-
if (desc.hasOwnProperty('borderRadius') && !is
|
|
628
|
+
if (desc.hasOwnProperty('borderRadius') && !is.number(borderRadius)) {
|
|
629
629
|
return false;
|
|
630
630
|
}
|
|
631
|
-
if (desc.hasOwnProperty('borderWidth') && !is
|
|
631
|
+
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
|
632
632
|
return false;
|
|
633
633
|
}
|
|
634
634
|
return true;
|
|
635
635
|
}
|
|
636
636
|
function rectDesc(desc) {
|
|
637
637
|
var bgColor = desc.bgColor;
|
|
638
|
-
if (desc.hasOwnProperty('bgColor') && !is
|
|
638
|
+
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
639
639
|
return false;
|
|
640
640
|
}
|
|
641
641
|
if (!box(desc)) {
|
|
@@ -645,68 +645,68 @@ function rectDesc(desc) {
|
|
|
645
645
|
}
|
|
646
646
|
function circleDesc(desc) {
|
|
647
647
|
var bgColor = desc.bgColor, borderColor = desc.borderColor, borderWidth = desc.borderWidth;
|
|
648
|
-
if (desc.hasOwnProperty('bgColor') && !is
|
|
648
|
+
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
649
649
|
return false;
|
|
650
650
|
}
|
|
651
|
-
if (desc.hasOwnProperty('borderColor') && !is
|
|
651
|
+
if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
|
|
652
652
|
return false;
|
|
653
653
|
}
|
|
654
|
-
if (desc.hasOwnProperty('borderWidth') && !is
|
|
654
|
+
if (desc.hasOwnProperty('borderWidth') && !is.number(borderWidth)) {
|
|
655
655
|
return false;
|
|
656
656
|
}
|
|
657
657
|
return true;
|
|
658
658
|
}
|
|
659
659
|
function imageDesc(desc) {
|
|
660
660
|
var src = desc.src;
|
|
661
|
-
if (!is
|
|
661
|
+
if (!is.imageSrc(src)) {
|
|
662
662
|
return false;
|
|
663
663
|
}
|
|
664
664
|
return true;
|
|
665
665
|
}
|
|
666
666
|
function svgDesc(desc) {
|
|
667
667
|
var svg = desc.svg;
|
|
668
|
-
if (!is
|
|
668
|
+
if (!is.svg(svg)) {
|
|
669
669
|
return false;
|
|
670
670
|
}
|
|
671
671
|
return true;
|
|
672
672
|
}
|
|
673
673
|
function htmlDesc(desc) {
|
|
674
674
|
var html = desc.html;
|
|
675
|
-
if (!is
|
|
675
|
+
if (!is.html(html)) {
|
|
676
676
|
return false;
|
|
677
677
|
}
|
|
678
678
|
return true;
|
|
679
679
|
}
|
|
680
680
|
function textDesc(desc) {
|
|
681
681
|
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;
|
|
682
|
-
if (!is
|
|
682
|
+
if (!is.text(text)) {
|
|
683
683
|
return false;
|
|
684
684
|
}
|
|
685
|
-
if (!is
|
|
685
|
+
if (!is.color(color)) {
|
|
686
686
|
return false;
|
|
687
687
|
}
|
|
688
|
-
if (!is
|
|
688
|
+
if (!is.fontSize(fontSize)) {
|
|
689
689
|
return false;
|
|
690
690
|
}
|
|
691
|
-
if (desc.hasOwnProperty('bgColor') && !is
|
|
691
|
+
if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
|
|
692
692
|
return false;
|
|
693
693
|
}
|
|
694
|
-
if (desc.hasOwnProperty('fontWeight') && !is
|
|
694
|
+
if (desc.hasOwnProperty('fontWeight') && !is.fontWeight(fontWeight)) {
|
|
695
695
|
return false;
|
|
696
696
|
}
|
|
697
|
-
if (desc.hasOwnProperty('lineHeight') && !is
|
|
697
|
+
if (desc.hasOwnProperty('lineHeight') && !is.lineHeight(lineHeight)) {
|
|
698
698
|
return false;
|
|
699
699
|
}
|
|
700
|
-
if (desc.hasOwnProperty('fontFamily') && !is
|
|
700
|
+
if (desc.hasOwnProperty('fontFamily') && !is.fontFamily(fontFamily)) {
|
|
701
701
|
return false;
|
|
702
702
|
}
|
|
703
|
-
if (desc.hasOwnProperty('textAlign') && !is
|
|
703
|
+
if (desc.hasOwnProperty('textAlign') && !is.textAlign(textAlign)) {
|
|
704
704
|
return false;
|
|
705
705
|
}
|
|
706
|
-
if (desc.hasOwnProperty('strokeWidth') && !is
|
|
706
|
+
if (desc.hasOwnProperty('strokeWidth') && !is.strokeWidth(strokeWidth)) {
|
|
707
707
|
return false;
|
|
708
708
|
}
|
|
709
|
-
if (desc.hasOwnProperty('strokeColor') && !is
|
|
709
|
+
if (desc.hasOwnProperty('strokeColor') && !is.color(strokeColor)) {
|
|
710
710
|
return false;
|
|
711
711
|
}
|
|
712
712
|
if (!box(desc)) {
|
|
@@ -723,36 +723,25 @@ var check = {
|
|
|
723
723
|
svgDesc: svgDesc,
|
|
724
724
|
htmlDesc: htmlDesc,
|
|
725
725
|
};
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
isColorStr: isColorStr$1,
|
|
746
|
-
},
|
|
747
|
-
uuid: {
|
|
748
|
-
createUUID: createUUID$1
|
|
749
|
-
},
|
|
750
|
-
istype: istype$1,
|
|
751
|
-
data: {
|
|
752
|
-
deepClone: deepClone$2,
|
|
753
|
-
},
|
|
754
|
-
Context: Context$1,
|
|
755
|
-
};
|
|
726
|
+
Object.freeze({
|
|
727
|
+
__proto__: null,
|
|
728
|
+
is: is,
|
|
729
|
+
check: check,
|
|
730
|
+
delay: delay,
|
|
731
|
+
compose: compose,
|
|
732
|
+
throttle: throttle,
|
|
733
|
+
loadImage: loadImage,
|
|
734
|
+
loadSVG: loadSVG,
|
|
735
|
+
loadHTML: loadHTML,
|
|
736
|
+
downloadImageFromCanvas: downloadImageFromCanvas,
|
|
737
|
+
toColorHexStr: toColorHexStr,
|
|
738
|
+
toColorHexNum: toColorHexNum,
|
|
739
|
+
isColorStr: isColorStr,
|
|
740
|
+
createUUID: createUUID,
|
|
741
|
+
istype: istype,
|
|
742
|
+
deepClone: deepClone,
|
|
743
|
+
Context: Context
|
|
744
|
+
});
|
|
756
745
|
|
|
757
746
|
function parseAngleToRadian(angle) {
|
|
758
747
|
return angle / 180 * Math.PI;
|
|
@@ -784,7 +773,6 @@ function rotateContext(ctx, center, radian, callback) {
|
|
|
784
773
|
}
|
|
785
774
|
}
|
|
786
775
|
|
|
787
|
-
var is$1 = index.is, istype = index.istype, color$1 = index.color;
|
|
788
776
|
function clearContext(ctx) {
|
|
789
777
|
ctx.setFillStyle('#000000');
|
|
790
778
|
ctx.setStrokeStyle('#000000');
|
|
@@ -835,7 +823,7 @@ function drawBoxBorder(ctx, elem) {
|
|
|
835
823
|
}
|
|
836
824
|
var bw = elem.desc.borderWidth;
|
|
837
825
|
var borderColor = '#000000';
|
|
838
|
-
if (
|
|
826
|
+
if (isColorStr(elem.desc.borderColor) === true) {
|
|
839
827
|
borderColor = elem.desc.borderColor;
|
|
840
828
|
}
|
|
841
829
|
var x = elem.x - bw / 2;
|
|
@@ -848,16 +836,16 @@ function drawBoxBorder(ctx, elem) {
|
|
|
848
836
|
r = r + bw / 2;
|
|
849
837
|
}
|
|
850
838
|
var desc = elem.desc;
|
|
851
|
-
if (desc.shadowColor !== undefined &&
|
|
839
|
+
if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
|
|
852
840
|
ctx.setShadowColor(desc.shadowColor);
|
|
853
841
|
}
|
|
854
|
-
if (desc.shadowOffsetX !== undefined && is
|
|
842
|
+
if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
|
|
855
843
|
ctx.setShadowOffsetX(desc.shadowOffsetX);
|
|
856
844
|
}
|
|
857
|
-
if (desc.shadowOffsetY !== undefined && is
|
|
845
|
+
if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
|
|
858
846
|
ctx.setShadowOffsetY(desc.shadowOffsetY);
|
|
859
847
|
}
|
|
860
|
-
if (desc.shadowBlur !== undefined && is
|
|
848
|
+
if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
|
|
861
849
|
ctx.setShadowBlur(desc.shadowBlur);
|
|
862
850
|
}
|
|
863
851
|
ctx.beginPath();
|
|
@@ -904,7 +892,6 @@ function drawHTML(ctx, elem, loader) {
|
|
|
904
892
|
});
|
|
905
893
|
}
|
|
906
894
|
|
|
907
|
-
var is = index.is, color = index.color;
|
|
908
895
|
function drawText(ctx, elem, loader) {
|
|
909
896
|
clearContext(ctx);
|
|
910
897
|
drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
|
|
@@ -970,7 +957,7 @@ function drawText(ctx, elem, loader) {
|
|
|
970
957
|
if (lines.length * fontHeight < elem.h) {
|
|
971
958
|
_y_1 += ((elem.h - lines.length * fontHeight) / 2);
|
|
972
959
|
}
|
|
973
|
-
if (desc.textShadowColor !== undefined &&
|
|
960
|
+
if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
|
|
974
961
|
ctx.setShadowColor(desc.textShadowColor);
|
|
975
962
|
}
|
|
976
963
|
if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
|
|
@@ -994,7 +981,7 @@ function drawText(ctx, elem, loader) {
|
|
|
994
981
|
});
|
|
995
982
|
clearContext(ctx);
|
|
996
983
|
}
|
|
997
|
-
if (
|
|
984
|
+
if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
|
|
998
985
|
var _y_2 = elem.y;
|
|
999
986
|
if (lines.length * fontHeight < elem.h) {
|
|
1000
987
|
_y_2 += ((elem.h - lines.length * fontHeight) / 2);
|
|
@@ -1046,7 +1033,6 @@ function drawCircle(ctx, elem) {
|
|
|
1046
1033
|
});
|
|
1047
1034
|
}
|
|
1048
1035
|
|
|
1049
|
-
var isColorStr = index.color.isColorStr;
|
|
1050
1036
|
function drawContext(ctx, data, loader) {
|
|
1051
1037
|
var _a;
|
|
1052
1038
|
clearContext(ctx);
|
|
@@ -1148,8 +1134,6 @@ function filterScript(html) {
|
|
|
1148
1134
|
return html.replace(/<script[\s\S]*?<\/script>/ig, '');
|
|
1149
1135
|
}
|
|
1150
1136
|
|
|
1151
|
-
var _a$1 = index.loader, loadImage = _a$1.loadImage, loadSVG = _a$1.loadSVG, loadHTML = _a$1.loadHTML;
|
|
1152
|
-
var deepClone$1 = index.data.deepClone;
|
|
1153
1137
|
var LoaderStatus;
|
|
1154
1138
|
(function (LoaderStatus) {
|
|
1155
1139
|
LoaderStatus["FREE"] = "free";
|
|
@@ -1245,7 +1229,7 @@ var Loader = (function () {
|
|
|
1245
1229
|
source: source,
|
|
1246
1230
|
elemW: elemW,
|
|
1247
1231
|
elemH: elemH,
|
|
1248
|
-
element: deepClone
|
|
1232
|
+
element: deepClone(elem),
|
|
1249
1233
|
};
|
|
1250
1234
|
};
|
|
1251
1235
|
Loader.prototype._loadTask = function () {
|
|
@@ -1458,9 +1442,6 @@ var _retainQueueOneItem = Symbol('_retainQueueOneItem');
|
|
|
1458
1442
|
|
|
1459
1443
|
var _a, _b, _c;
|
|
1460
1444
|
var requestAnimationFrame = window.requestAnimationFrame;
|
|
1461
|
-
var createUUID = index.uuid.createUUID;
|
|
1462
|
-
var deepClone = index.data.deepClone;
|
|
1463
|
-
var Context = index.Context;
|
|
1464
1445
|
var DrawStatus;
|
|
1465
1446
|
(function (DrawStatus) {
|
|
1466
1447
|
DrawStatus["NULL"] = "null";
|
|
@@ -1595,4 +1576,9 @@ var Renderer = (function (_super) {
|
|
|
1595
1576
|
return Renderer;
|
|
1596
1577
|
}(RendererEvent));
|
|
1597
1578
|
|
|
1598
|
-
|
|
1579
|
+
var default_1 = /*#__PURE__*/Object.freeze({
|
|
1580
|
+
__proto__: null,
|
|
1581
|
+
Renderer: Renderer
|
|
1582
|
+
});
|
|
1583
|
+
|
|
1584
|
+
module.exports = default_1;
|
package/dist/index.d.ts
CHANGED
|
@@ -23,7 +23,7 @@ declare const _opts: unique symbol;
|
|
|
23
23
|
|
|
24
24
|
declare const _queue: unique symbol;
|
|
25
25
|
|
|
26
|
-
declare class Renderer extends RendererEvent {
|
|
26
|
+
export declare class Renderer extends RendererEvent {
|
|
27
27
|
private [_queue];
|
|
28
28
|
private [_ctx];
|
|
29
29
|
private [_status];
|
|
@@ -39,7 +39,6 @@ declare class Renderer extends RendererEvent {
|
|
|
39
39
|
private [_drawFrame];
|
|
40
40
|
private [_retainQueueOneItem];
|
|
41
41
|
}
|
|
42
|
-
export default Renderer;
|
|
43
42
|
|
|
44
43
|
declare class RendererEvent implements TypeRendererEvent {
|
|
45
44
|
private _listeners;
|