@idraw/renderer 0.3.0-alpha.8 → 0.3.0-beta.2
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/LICENSE +1 -1
- package/dist/esm/lib/draw/text.js +32 -20
- package/dist/index.global.js +13 -9
- package/dist/index.global.min.js +1 -1
- package/package.json +4 -4
package/LICENSE
CHANGED
|
@@ -8,7 +8,7 @@ export function drawText(ctx, elem, loader) {
|
|
|
8
8
|
const desc = Object.assign({
|
|
9
9
|
fontSize: 12,
|
|
10
10
|
fontFamily: 'sans-serif',
|
|
11
|
-
textAlign: 'center'
|
|
11
|
+
textAlign: 'center'
|
|
12
12
|
}, elem.desc);
|
|
13
13
|
ctx.setFillStyle(elem.desc.color);
|
|
14
14
|
ctx.setTextBaseline('top');
|
|
@@ -17,7 +17,7 @@ export function drawText(ctx, elem, loader) {
|
|
|
17
17
|
fontSize: desc.fontSize,
|
|
18
18
|
fontFamily: desc.fontFamily
|
|
19
19
|
});
|
|
20
|
-
const descText = desc.text.replace(/\r\n/
|
|
20
|
+
const descText = desc.text.replace(/\r\n/gi, '\n');
|
|
21
21
|
const fontHeight = desc.lineHeight || desc.fontSize;
|
|
22
22
|
const descTextList = descText.split('\n');
|
|
23
23
|
const lines = [];
|
|
@@ -26,15 +26,16 @@ export function drawText(ctx, elem, loader) {
|
|
|
26
26
|
let lineText = '';
|
|
27
27
|
if (tempText.length > 0) {
|
|
28
28
|
for (let i = 0; i < tempText.length; i++) {
|
|
29
|
-
if (ctx.measureText(lineText + (tempText[i] || '')).width <
|
|
30
|
-
|
|
29
|
+
if (ctx.measureText(lineText + (tempText[i] || '')).width <
|
|
30
|
+
ctx.calcDeviceNum(elem.w)) {
|
|
31
|
+
lineText += tempText[i] || '';
|
|
31
32
|
}
|
|
32
33
|
else {
|
|
33
34
|
lines.push({
|
|
34
35
|
text: lineText,
|
|
35
|
-
width: ctx.calcScreenNum(ctx.measureText(lineText).width)
|
|
36
|
+
width: ctx.calcScreenNum(ctx.measureText(lineText).width)
|
|
36
37
|
});
|
|
37
|
-
lineText =
|
|
38
|
+
lineText = tempText[i] || '';
|
|
38
39
|
lineNum++;
|
|
39
40
|
}
|
|
40
41
|
if ((lineNum + 1) * fontHeight > elem.h) {
|
|
@@ -44,7 +45,7 @@ export function drawText(ctx, elem, loader) {
|
|
|
44
45
|
if ((lineNum + 1) * fontHeight < elem.h) {
|
|
45
46
|
lines.push({
|
|
46
47
|
text: lineText,
|
|
47
|
-
width: ctx.calcScreenNum(ctx.measureText(lineText).width)
|
|
48
|
+
width: ctx.calcScreenNum(ctx.measureText(lineText).width)
|
|
48
49
|
});
|
|
49
50
|
if (idx < descTextList.length - 1) {
|
|
50
51
|
lineNum++;
|
|
@@ -57,22 +58,34 @@ export function drawText(ctx, elem, loader) {
|
|
|
57
58
|
else {
|
|
58
59
|
lines.push({
|
|
59
60
|
text: '',
|
|
60
|
-
width: 0
|
|
61
|
+
width: 0
|
|
61
62
|
});
|
|
62
63
|
}
|
|
63
64
|
});
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
if (
|
|
67
|
-
|
|
65
|
+
let startY = 0;
|
|
66
|
+
if (lines.length * fontHeight < elem.h) {
|
|
67
|
+
if (elem.desc.verticalAlign === 'top') {
|
|
68
|
+
startY = 0;
|
|
69
|
+
}
|
|
70
|
+
else if (elem.desc.verticalAlign === 'bottom') {
|
|
71
|
+
startY += elem.h - lines.length * fontHeight;
|
|
72
|
+
}
|
|
73
|
+
else {
|
|
74
|
+
startY += (elem.h - lines.length * fontHeight) / 2;
|
|
68
75
|
}
|
|
69
|
-
|
|
76
|
+
}
|
|
77
|
+
{
|
|
78
|
+
const _y = elem.y + startY;
|
|
79
|
+
if (desc.textShadowColor !== undefined &&
|
|
80
|
+
isColorStr(desc.textShadowColor)) {
|
|
70
81
|
ctx.setShadowColor(desc.textShadowColor);
|
|
71
82
|
}
|
|
72
|
-
if (desc.textShadowOffsetX !== undefined &&
|
|
83
|
+
if (desc.textShadowOffsetX !== undefined &&
|
|
84
|
+
is.number(desc.textShadowOffsetX)) {
|
|
73
85
|
ctx.setShadowOffsetX(desc.textShadowOffsetX);
|
|
74
86
|
}
|
|
75
|
-
if (desc.textShadowOffsetY !== undefined &&
|
|
87
|
+
if (desc.textShadowOffsetY !== undefined &&
|
|
88
|
+
is.number(desc.textShadowOffsetY)) {
|
|
76
89
|
ctx.setShadowOffsetY(desc.textShadowOffsetY);
|
|
77
90
|
}
|
|
78
91
|
if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
|
|
@@ -90,11 +103,10 @@ export function drawText(ctx, elem, loader) {
|
|
|
90
103
|
});
|
|
91
104
|
clearContext(ctx);
|
|
92
105
|
}
|
|
93
|
-
if (isColorStr(desc.strokeColor) &&
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
106
|
+
if (isColorStr(desc.strokeColor) &&
|
|
107
|
+
desc.strokeWidth !== undefined &&
|
|
108
|
+
desc.strokeWidth > 0) {
|
|
109
|
+
const _y = elem.y + startY;
|
|
98
110
|
lines.forEach((line, i) => {
|
|
99
111
|
let _x = elem.x;
|
|
100
112
|
if (desc.textAlign === 'center') {
|
package/dist/index.global.js
CHANGED
|
@@ -616,7 +616,7 @@ var iDrawRenderer = function() {
|
|
|
616
616
|
fontSize: desc.fontSize,
|
|
617
617
|
fontFamily: desc.fontFamily
|
|
618
618
|
});
|
|
619
|
-
const descText = desc.text.replace(/\r\n/
|
|
619
|
+
const descText = desc.text.replace(/\r\n/gi, "\n");
|
|
620
620
|
const fontHeight = desc.lineHeight || desc.fontSize;
|
|
621
621
|
const descTextList = descText.split("\n");
|
|
622
622
|
const lines = [];
|
|
@@ -658,11 +658,18 @@ var iDrawRenderer = function() {
|
|
|
658
658
|
});
|
|
659
659
|
}
|
|
660
660
|
});
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
if (
|
|
664
|
-
|
|
661
|
+
let startY = 0;
|
|
662
|
+
if (lines.length * fontHeight < elem.h) {
|
|
663
|
+
if (elem.desc.verticalAlign === "top") {
|
|
664
|
+
startY = 0;
|
|
665
|
+
} else if (elem.desc.verticalAlign === "bottom") {
|
|
666
|
+
startY += elem.h - lines.length * fontHeight;
|
|
667
|
+
} else {
|
|
668
|
+
startY += (elem.h - lines.length * fontHeight) / 2;
|
|
665
669
|
}
|
|
670
|
+
}
|
|
671
|
+
{
|
|
672
|
+
const _y = elem.y + startY;
|
|
666
673
|
if (desc.textShadowColor !== void 0 && isColorStr(desc.textShadowColor)) {
|
|
667
674
|
ctx.setShadowColor(desc.textShadowColor);
|
|
668
675
|
}
|
|
@@ -687,10 +694,7 @@ var iDrawRenderer = function() {
|
|
|
687
694
|
clearContext(ctx);
|
|
688
695
|
}
|
|
689
696
|
if (isColorStr(desc.strokeColor) && desc.strokeWidth !== void 0 && desc.strokeWidth > 0) {
|
|
690
|
-
|
|
691
|
-
if (lines.length * fontHeight < elem.h) {
|
|
692
|
-
_y += (elem.h - lines.length * fontHeight) / 2;
|
|
693
|
-
}
|
|
697
|
+
const _y = elem.y + startY;
|
|
694
698
|
lines.forEach((line, i) => {
|
|
695
699
|
let _x = elem.x;
|
|
696
700
|
if (desc.textAlign === "center") {
|
package/dist/index.global.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var iDrawRenderer=function(){"use strict";function t(t){return"string"==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function e(t){return function t(e){const i=(s=e,Object.prototype.toString.call(s).replace(/[\]|\[]{1,1}/gi,"").split(" ")[1]);var s;if(["Null","Number","String","Boolean","Undefined"].indexOf(i)>=0)return e;if("Array"===i){const i=[];return e.forEach((e=>{i.push(t(e))})),i}if("Object"===i){const i={};return Object.keys(e).forEach((s=>{i[s]=t(e[s])})),i}}(t)}function i(t){return(Object.prototype.toString.call(t)||"").replace(/(\[object|\])/gi,"").trim()}const s={type(t,e){const s=i(t);return!0===e?s.toLocaleLowerCase():s},array:t=>"Array"===i(t),json:t=>"Object"===i(t),function:t=>"Function"===i(t),asyncFunction:t=>"AsyncFunction"===i(t),string:t=>"String"===i(t),number:t=>"Number"===i(t),undefined:t=>"Undefined"===i(t),null:t=>"Null"===i(t),promise:t=>"Promise"===i(t)};var o=globalThis&&globalThis.__awaiter||function(t,e,i,s){return new(i||(i=Promise))((function(o,r){function n(t){try{h(s.next(t))}catch(t){r(t)}}function a(t){try{h(s.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(n,a)}h((s=s.apply(t,e||[])).next())}))};const{Image:r}=window;function n(t){return new Promise(((e,i)=>{const s=new r;s.crossOrigin="anonymous",s.onload=function(){e(s)},s.onabort=i,s.onerror=i,s.src=t}))}function a(t){return o(this,void 0,void 0,(function*(){const e=yield function(t){return new Promise(((e,i)=>{const s=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(s),o.onload=function(t){var i;const s=null===(i=null==t?void 0:t.target)||void 0===i?void 0:i.result;e(s)},o.onerror=function(t){i(t)}}))}(t);return yield n(e)}))}function h(t,e){return o(this,void 0,void 0,(function*(){t=t.replace(/\&/gi,"&");const i=yield function(t,e){const{width:i,height:s}=e;return new Promise(((e,o)=>{const r=new Blob([`\n <svg xmlns="http://www.w3.org/2000/svg" width="${i||""}" height = "${s||""}">\n <foreignObject width="100%" height="100%">\n <div xmlns = "http://www.w3.org/1999/xhtml">\n ${t}\n </div>\n </foreignObject>\n </svg>\n `],{type:"image/svg+xml;charset=utf-8"}),n=new FileReader;n.readAsDataURL(r),n.onload=function(t){var i;const s=null===(i=null==t?void 0:t.target)||void 0===i?void 0:i.result;e(s)},n.onerror=function(t){o(t)}}))}(t,e);return yield n(i)}))}class l{constructor(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}getContext(){return this._ctx}resetSize(t){this._opts=Object.assign(Object.assign({},this._opts),t)}calcDeviceNum(t){return t*this._opts.devicePixelRatio}calcScreenNum(t){return t/this._opts.devicePixelRatio}getSize(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}}setTransform(t){this._transform=Object.assign(Object.assign({},this._transform),t)}getTransform(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}}setFillStyle(t){this._ctx.fillStyle=t}fill(t){return this._ctx.fill(t||"nonzero")}arc(t,e,i,s,o,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(i),s,o,r)}rect(t,e,i,s){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}fillRect(t,e,i,s){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}clearRect(t,e,i,s){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}beginPath(){return this._ctx.beginPath()}closePath(){return this._ctx.closePath()}lineTo(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))}moveTo(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))}arcTo(t,e,i,s,o){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s),this._doSize(o))}setLineWidth(t){return this._ctx.lineWidth=this._doSize(t)}setLineDash(t){return this._ctx.setLineDash(t.map((t=>this._doSize(t))))}isPointInPath(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))}isPointInPathWithoutScroll(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))}setStrokeStyle(t){this._ctx.strokeStyle=t}stroke(){return this._ctx.stroke()}translate(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))}rotate(t){return this._ctx.rotate(t)}drawImage(...t){const e=t[0],i=t[1],s=t[2],o=t[3],r=t[4],n=t[t.length-4],a=t[t.length-3],h=t[t.length-2],l=t[t.length-1];return 9===t.length?this._ctx.drawImage(e,this._doSize(i),this._doSize(s),this._doSize(o),this._doSize(r),this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l)):this._ctx.drawImage(e,this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l))}createPattern(t,e){return this._ctx.createPattern(t,e)}measureText(t){return this._ctx.measureText(t)}setTextAlign(t){this._ctx.textAlign=t}fillText(t,e,i,s){return void 0!==s?this._ctx.fillText(t,this._doSize(e),this._doSize(i),this._doSize(s)):this._ctx.fillText(t,this._doSize(e),this._doSize(i))}strokeText(t,e,i,s){return void 0!==s?this._ctx.strokeText(t,this._doSize(e),this._doSize(i),this._doSize(s)):this._ctx.strokeText(t,this._doSize(e),this._doSize(i))}setFont(t){const e=[];"bold"===t.fontWeight&&e.push(`${t.fontWeight}`),e.push(`${this._doSize(t.fontSize||12)}px`),e.push(`${t.fontFamily||"sans-serif"}`),this._ctx.font=`${e.join(" ")}`}setTextBaseline(t){this._ctx.textBaseline=t}setGlobalAlpha(t){this._ctx.globalAlpha=t}save(){this._ctx.save()}restore(){this._ctx.restore()}scale(t,e){this._ctx.scale(t,e)}setShadowColor(t){this._ctx.shadowColor=t}setShadowOffsetX(t){this._ctx.shadowOffsetX=this._doSize(t)}setShadowOffsetY(t){this._ctx.shadowOffsetY=this._doSize(t)}setShadowBlur(t){this._ctx.shadowBlur=this._doSize(t)}ellipse(t,e,i,s,o,r,n,a){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s),o,r,n,a)}_doSize(t){return this._opts.devicePixelRatio*t}_doX(t){const{scale:e,scrollX:i}=this._transform,s=(t-i)/e;return this._doSize(s)}_doY(t){const{scale:e,scrollY:i}=this._transform,s=(t-i)/e;return this._doSize(s)}}function c(t){return"number"==typeof t&&(t>0||t<=0)}function u(t){return"number"==typeof t&&t>=0}function d(t){return"string"==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${t}`)}function f(t){return"string"==typeof t&&/^(data:image\/)/.test(`${t}`)}const _={x:function(t){return c(t)},y:function(t){return c(t)},w:u,h:function(t){return"number"==typeof t&&t>=0},angle:function(t){return"number"==typeof t&&t>=-360&&t<=360},number:c,borderWidth:function(t){return u(t)},borderRadius:function(t){return c(t)&&t>=0},color:function(e){return t(e)},imageSrc:function(t){return f(t)||d(t)},imageURL:d,imageBase64:f,svg:function(t){return"string"==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test(`${t}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${t}`.trim())},html:function(t){let e=!1;if("string"==typeof t){let i=document.createElement("div");i.innerHTML=t,i.children.length>0&&(e=!0),i=null}return e},text:function(t){return"string"==typeof t},fontSize:function(t){return c(t)&&t>0},lineHeight:function(t){return c(t)&&t>0},textAlign:function(t){return["center","left","right"].includes(t)},fontFamily:function(t){return"string"==typeof t&&t.length>0},fontWeight:function(t){return["bold"].includes(t)},strokeWidth:function(t){return c(t)&&t>0}};function g(t,e,i){const s=function(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}(e);return function(t,e,i,s){e&&(i>0||i<0)&&(t.translate(e.x,e.y),t.rotate(i),t.translate(-e.x,-e.y));s(t),e&&(i>0||i<0)&&(t.translate(e.x,e.y),t.rotate(-i),t.translate(-e.x,-e.y))}(t,s,(e.angle||0)/180*Math.PI||0,i)}function m(t){t.setFillStyle("#000000"),t.setStrokeStyle("#000000"),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor("#00000000"),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}function x(e,i,o){m(e),function(e,i){m(e),g(e,i,(()=>{if(!(i.desc.borderWidth&&i.desc.borderWidth>0))return;const s=i.desc.borderWidth;let o="#000000";!0===t(i.desc.borderColor)&&(o=i.desc.borderColor);const r=i.x-s/2,n=i.y-s/2,a=i.w+s,h=i.h+s;let l=i.desc.borderRadius||0;l=Math.min(l,a/2,h/2),l<a/2&&l<h/2&&(l+=s/2);const{desc:c}=i;void 0!==c.shadowColor&&t(c.shadowColor)&&e.setShadowColor(c.shadowColor),void 0!==c.shadowOffsetX&&_.number(c.shadowOffsetX)&&e.setShadowOffsetX(c.shadowOffsetX),void 0!==c.shadowOffsetY&&_.number(c.shadowOffsetY)&&e.setShadowOffsetY(c.shadowOffsetY),void 0!==c.shadowBlur&&_.number(c.shadowBlur)&&e.setShadowBlur(c.shadowBlur),e.beginPath(),e.setLineWidth(s),e.setStrokeStyle(o),e.moveTo(r+l,n),e.arcTo(r+a,n,r+a,n+h,l),e.arcTo(r+a,n+h,r,n+h,l),e.arcTo(r,n+h,r,n,l),e.arcTo(r,n,r+a,n,l),e.closePath(),e.stroke()}))}(e,i),m(e),g(e,i,(()=>{const{x:t,y:r,w:n,h:a}=i;let h=i.desc.borderRadius||0;h=Math.min(h,n/2,a/2),(n<2*h||a<2*h)&&(h=0),e.beginPath(),e.moveTo(t+h,r),e.arcTo(t+n,r,t+n,r+a,h),e.arcTo(t+n,r+a,t,r+a,h),e.arcTo(t,r+a,t,r,h),e.arcTo(t,r,t+n,r,h),e.closePath(),("string"==typeof o||["CanvasPattern"].includes(s.type(o)))&&e.setFillStyle(o),e.fill()}))}function S(t,e){x(t,e,e.desc.bgColor)}function w(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function p(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function y(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function v(e,i,s){m(e),x(e,i,i.desc.bgColor||"transparent"),g(e,i,(()=>{const s={fontSize:12,fontFamily:"sans-serif",textAlign:"center",...i.desc};e.setFillStyle(i.desc.color),e.setTextBaseline("top"),e.setFont({fontWeight:s.fontWeight,fontSize:s.fontSize,fontFamily:s.fontFamily});const o=s.text.replace(/\r\n/gi,"\n"),r=s.lineHeight||s.fontSize,n=o.split("\n"),a=[];let h=0;n.forEach(((t,s)=>{let o="";if(t.length>0){for(let l=0;l<t.length&&(e.measureText(o+(t[l]||"")).width<e.calcDeviceNum(i.w)?o+=t[l]||"":(a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),o=t[l]||"",h++),!((h+1)*r>i.h));l++)if(t.length-1===l&&(h+1)*r<i.h){a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),s<n.length-1&&h++;break}}else a.push({text:"",width:0})}));{let o=i.y;a.length*r<i.h&&(o+=(i.h-a.length*r)/2),void 0!==s.textShadowColor&&t(s.textShadowColor)&&e.setShadowColor(s.textShadowColor),void 0!==s.textShadowOffsetX&&_.number(s.textShadowOffsetX)&&e.setShadowOffsetX(s.textShadowOffsetX),void 0!==s.textShadowOffsetY&&_.number(s.textShadowOffsetY)&&e.setShadowOffsetY(s.textShadowOffsetY),void 0!==s.textShadowBlur&&_.number(s.textShadowBlur)&&e.setShadowBlur(s.textShadowBlur),a.forEach(((t,n)=>{let a=i.x;"center"===s.textAlign?a=i.x+(i.w-t.width)/2:"right"===s.textAlign&&(a=i.x+(i.w-t.width)),e.fillText(t.text,a,o+r*n)})),m(e)}if(t(s.strokeColor)&&void 0!==s.strokeWidth&&s.strokeWidth>0){let t=i.y;a.length*r<i.h&&(t+=(i.h-a.length*r)/2),a.forEach(((o,n)=>{let a=i.x;"center"===s.textAlign?a=i.x+(i.w-o.width)/2:"right"===s.textAlign&&(a=i.x+(i.w-o.width)),void 0!==s.strokeColor&&e.setStrokeStyle(s.strokeColor),void 0!==s.strokeWidth&&s.strokeWidth>0&&e.setLineWidth(s.strokeWidth),e.strokeText(o.text,a,t+r*n)}))}}))}function b(t,e){m(t),g(t,e,(t=>{const{x:i,y:s,w:o,h:r,desc:n}=e,{bgColor:a="#000000",borderColor:h="#000000",borderWidth:l=0}=n,c=o/2,u=r/2,d=i+c,f=s+u;if(l&&l>0){const e=l/2+c,i=l/2+u;t.beginPath(),t.setStrokeStyle(h),t.setLineWidth(l),t.ellipse(d,f,e,i,0,0,2*Math.PI),t.closePath(),t.stroke()}t.beginPath(),t.setFillStyle(a),t.ellipse(d,f,c,u,0,0,2*Math.PI),t.closePath(),t.fill()}))}function z(e,i,s){var o;m(e);const r=e.getSize();if(e.clearRect(0,0,r.contextWidth,r.contextHeight),"string"==typeof i.bgColor&&t(i.bgColor)&&function(t,e){const i=t.getSize();t.setFillStyle(e),t.fillRect(0,0,i.contextWidth,i.contextHeight)}(e,i.bgColor),i.elements.length>0)for(let t=0;t<i.elements.length;t++){const r=i.elements[t];if(!0!==(null==(o=null==r?void 0:r.operation)?void 0:o.invisible))switch(r.type){case"rect":S(e,r);break;case"text":v(e,r);break;case"image":w(e,r,s);break;case"svg":p(e,r,s);break;case"html":y(e,r,s);break;case"circle":b(e,r)}}}class L{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);null==i||i.push(e),this._listeners.set(t,i||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);if(Array.isArray(i))for(let t=0;t<(null==i?void 0:i.length);t++)if(i[t]===e){i.splice(t,1);break}this._listeners.set(t,i||[])}}trigger(t,e){const i=this._listeners.get(t);return!!Array.isArray(i)&&(i.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}class D{constructor(t){this._currentLoadData={},this._currentUUIDQueue=[],this._storageLoadData={},this._status="free",this._waitingLoadQueue=[],this._opts=t,this._event=new L,this._waitingLoadQueue=[]}load(t,e){const[i,s]=this._resetLoadData(t,e);"free"===this._status||"complete"===this._status?(this._currentUUIDQueue=i,this._currentLoadData=s,this._loadTask()):"loading"===this._status&&i.length>0&&this._waitingLoadQueue.push({uuidQueue:i,loadData:s})}on(t,e){this._event.on(t,e)}off(t,e){this._event.off(t,e)}isComplete(){return"complete"===this._status}getContent(t){var e;return"loaded"===(null==(e=this._storageLoadData[t])?void 0:e.status)?this._storageLoadData[t].content:null}_resetLoadData(t,e){const i={},s=[],o=this._storageLoadData;for(let r=t.elements.length-1;r>=0;r--){const n=t.elements[r];["image","svg","html"].includes(n.type)&&(o[n.uuid]?e.includes(n.uuid)&&(i[n.uuid]=this._createEmptyLoadItem(n),s.push(n.uuid)):(i[n.uuid]=this._createEmptyLoadItem(n),s.push(n.uuid)))}return[s,i]}_createEmptyLoadItem(t){let i="";const s=t.type;let o=t.w,r=t.h;if("image"===t.type){i=t.desc.src||""}else if("svg"===t.type){i=t.desc.svg||""}else if("html"===t.type){const e=t;i=(e.desc.html||"").replace(/<script[\s\S]*?<\/script>/gi,""),o=e.desc.width||t.w,r=e.desc.height||t.h}return{uuid:t.uuid,type:s,status:"null",content:null,source:i,elemW:o,elemH:r,element:e(t)}}_loadTask(){if("loading"===this._status)return;if(this._status="loading",0===this._currentUUIDQueue.length){if(0===this._waitingLoadQueue.length)return this._status="complete",void this._event.trigger("complete",void 0);{const t=this._waitingLoadQueue.shift();if(t){const{uuidQueue:e,loadData:i}=t;this._currentLoadData=i,this._currentUUIDQueue=e}}}const{maxParallelNum:t}=this._opts,e=this._currentUUIDQueue.splice(0,t);e.forEach(((t,e)=>{}));const i=[],s=()=>{if(i.length>=t)return!1;if(0===e.length)return!0;for(let o=i.length;o<t;o++){const t=e.shift();if(void 0===t)break;i.push(t),this._loadElementSource(this._currentLoadData[t]).then((o=>{var r,n;i.splice(i.indexOf(t),1);const a=s();this._storageLoadData[t]={uuid:t,type:this._currentLoadData[t].type,status:"loaded",content:o,source:this._currentLoadData[t].source,elemW:this._currentLoadData[t].elemW,elemH:this._currentLoadData[t].elemH,element:this._currentLoadData[t].element},0===i.length&&0===e.length&&!0===a&&(this._status="free",this._loadTask()),this._event.trigger("load",{uuid:null==(r=this._storageLoadData[t])?void 0:r.uuid,type:this._storageLoadData[t].type,status:this._storageLoadData[t].status,content:this._storageLoadData[t].content,source:this._storageLoadData[t].source,elemW:this._storageLoadData[t].elemW,elemH:this._storageLoadData[t].elemH,element:null==(n=this._storageLoadData[t])?void 0:n.element})})).catch((o=>{var r,n,a,h,l,c,u,d,f,_,g,m;console.warn(o),i.splice(i.indexOf(t),1);const x=s();this._currentLoadData[t]&&(this._storageLoadData[t]={uuid:t,type:null==(r=this._currentLoadData[t])?void 0:r.type,status:"fail",content:null,error:o,source:null==(n=this._currentLoadData[t])?void 0:n.source,elemW:null==(a=this._currentLoadData[t])?void 0:a.elemW,elemH:null==(h=this._currentLoadData[t])?void 0:h.elemH,element:null==(l=this._currentLoadData[t])?void 0:l.element}),0===i.length&&0===e.length&&!0===x&&(this._status="free",this._loadTask()),this._currentLoadData[t]&&this._event.trigger("error",{uuid:t,type:null==(c=this._storageLoadData[t])?void 0:c.type,status:null==(u=this._storageLoadData[t])?void 0:u.status,content:null==(d=this._storageLoadData[t])?void 0:d.content,source:null==(f=this._storageLoadData[t])?void 0:f.source,elemW:null==(_=this._storageLoadData[t])?void 0:_.elemW,elemH:null==(g=this._storageLoadData[t])?void 0:g.elemH,element:null==(m=this._storageLoadData[t])?void 0:m.element})}))}return!1};s()}async _loadElementSource(t){if(t&&"image"===t.type){return await n(t.source)}if(t&&"svg"===t.type){return await a(t.source)}if(t&&"html"===t.type){return await h(t.source,{width:t.elemW,height:t.elemH})}throw Error("Element's source is not support!")}}class T{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);null==i||i.push(e),this._listeners.set(t,i||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);if(Array.isArray(i))for(let t=0;t<(null==i?void 0:i.length);t++)if(i[t]===e){i.splice(t,1);break}this._listeners.set(t,i||[])}}trigger(t,e){const i=this._listeners.get(t);return!!Array.isArray(i)&&(i.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}const P=Symbol("_queue"),O=Symbol("_ctx"),C=Symbol("_status"),W=Symbol("_loader"),k=Symbol("_opts"),A=Symbol("_freeze"),I=Symbol("_drawFrame"),R=Symbol("_retainQueueOneItem");var F,$,H;const{requestAnimationFrame:B}=window;class E extends T{constructor(t){super(),this[F]=[],this[$]=null,this[H]="null",this[k]=t,this[W]=new D({maxParallelNum:6}),this[W].on("load",(t=>{this[I](),this.trigger("load",{element:t.element})})),this[W].on("error",(t=>{this.trigger("error",{element:t.element,error:t.error})})),this[W].on("complete",(()=>{this.trigger("loadComplete",{t:Date.now()})}))}render(t,i,s){const{changeResourceUUIDs:o=[]}=s||{};this[C]="free";const r=e(i);if(Array.isArray(r.elements)&&r.elements.forEach((t=>{"string"==typeof t.uuid&&t.uuid||(t.uuid=function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${t()}${t()}-${t()}-${t()}-${t()}-${t()}${t()}${t()}`}())})),!this[O])if(this[k]&&"[object HTMLCanvasElement]"===Object.prototype.toString.call(t)){const{width:e,height:i,contextWidth:s,contextHeight:o,devicePixelRatio:r}=this[k],n=t;n.width=e*r,n.height=i*r;const a=n.getContext("2d");this[O]=new l(a,{width:e,height:i,contextWidth:s||e,contextHeight:o||i,devicePixelRatio:r})}else t&&(this[O]=t);if(["freeze"].includes(this[C]))return;const n=e({data:r});this[P].push(n),this[I](),this[W].load(r,o||[])}getContext(){return this[O]}thaw(){this[C]="free"}[(F=P,$=O,H=C,A)](){this[C]="freeze"}[I](){"freeze"!==this[C]&&B((()=>{if("freeze"===this[C])return;const t=this[O];let e=this[P][0],i=!1;this[P].length>1?e=this[P].shift():i=!0,!0!==this[W].isComplete()?(this[I](),e&&t&&z(t,e.data,this[W])):e&&t?(z(t,e.data,this[W]),this[R](),i?this[C]="free":this[I]()):this[C]="free",this.trigger("drawFrame",{t:Date.now()}),!0===this[W].isComplete()&&1===this[P].length&&"free"===this[C]&&(t&&this[P][0]&&this[P][0].data&&z(t,this[P][0].data,this[W]),this.trigger("drawFrameComplete",{t:Date.now()}),this[A]())}))}[R](){if(this[P].length<=1)return;const t=e(this[P][this[P].length-1]);this[P]=[t]}}return E}();
|
|
1
|
+
var iDrawRenderer=function(){"use strict";function t(t){return"string"==typeof t&&/^\#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t)}function e(t){return function t(e){const i=(s=e,Object.prototype.toString.call(s).replace(/[\]|\[]{1,1}/gi,"").split(" ")[1]);var s;if(["Null","Number","String","Boolean","Undefined"].indexOf(i)>=0)return e;if("Array"===i){const i=[];return e.forEach((e=>{i.push(t(e))})),i}if("Object"===i){const i={};return Object.keys(e).forEach((s=>{i[s]=t(e[s])})),i}}(t)}function i(t){return(Object.prototype.toString.call(t)||"").replace(/(\[object|\])/gi,"").trim()}const s={type(t,e){const s=i(t);return!0===e?s.toLocaleLowerCase():s},array:t=>"Array"===i(t),json:t=>"Object"===i(t),function:t=>"Function"===i(t),asyncFunction:t=>"AsyncFunction"===i(t),string:t=>"String"===i(t),number:t=>"Number"===i(t),undefined:t=>"Undefined"===i(t),null:t=>"Null"===i(t),promise:t=>"Promise"===i(t)};var o=globalThis&&globalThis.__awaiter||function(t,e,i,s){return new(i||(i=Promise))((function(o,r){function n(t){try{h(s.next(t))}catch(t){r(t)}}function a(t){try{h(s.throw(t))}catch(t){r(t)}}function h(t){var e;t.done?o(t.value):(e=t.value,e instanceof i?e:new i((function(t){t(e)}))).then(n,a)}h((s=s.apply(t,e||[])).next())}))};const{Image:r}=window;function n(t){return new Promise(((e,i)=>{const s=new r;s.crossOrigin="anonymous",s.onload=function(){e(s)},s.onabort=i,s.onerror=i,s.src=t}))}function a(t){return o(this,void 0,void 0,(function*(){const e=yield function(t){return new Promise(((e,i)=>{const s=new Blob([t],{type:"image/svg+xml;charset=utf-8"}),o=new FileReader;o.readAsDataURL(s),o.onload=function(t){var i;const s=null===(i=null==t?void 0:t.target)||void 0===i?void 0:i.result;e(s)},o.onerror=function(t){i(t)}}))}(t);return yield n(e)}))}function h(t,e){return o(this,void 0,void 0,(function*(){t=t.replace(/\&/gi,"&");const i=yield function(t,e){const{width:i,height:s}=e;return new Promise(((e,o)=>{const r=new Blob([`\n <svg xmlns="http://www.w3.org/2000/svg" width="${i||""}" height = "${s||""}">\n <foreignObject width="100%" height="100%">\n <div xmlns = "http://www.w3.org/1999/xhtml">\n ${t}\n </div>\n </foreignObject>\n </svg>\n `],{type:"image/svg+xml;charset=utf-8"}),n=new FileReader;n.readAsDataURL(r),n.onload=function(t){var i;const s=null===(i=null==t?void 0:t.target)||void 0===i?void 0:i.result;e(s)},n.onerror=function(t){o(t)}}))}(t,e);return yield n(i)}))}class l{constructor(t,e){this._opts=e,this._ctx=t,this._transform={scale:1,scrollX:0,scrollY:0}}getContext(){return this._ctx}resetSize(t){this._opts=Object.assign(Object.assign({},this._opts),t)}calcDeviceNum(t){return t*this._opts.devicePixelRatio}calcScreenNum(t){return t/this._opts.devicePixelRatio}getSize(){return{width:this._opts.width,height:this._opts.height,contextWidth:this._opts.contextWidth,contextHeight:this._opts.contextHeight,devicePixelRatio:this._opts.devicePixelRatio}}setTransform(t){this._transform=Object.assign(Object.assign({},this._transform),t)}getTransform(){return{scale:this._transform.scale,scrollX:this._transform.scrollX,scrollY:this._transform.scrollY}}setFillStyle(t){this._ctx.fillStyle=t}fill(t){return this._ctx.fill(t||"nonzero")}arc(t,e,i,s,o,r){return this._ctx.arc(this._doSize(t),this._doSize(e),this._doSize(i),s,o,r)}rect(t,e,i,s){return this._ctx.rect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}fillRect(t,e,i,s){return this._ctx.fillRect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}clearRect(t,e,i,s){return this._ctx.clearRect(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s))}beginPath(){return this._ctx.beginPath()}closePath(){return this._ctx.closePath()}lineTo(t,e){return this._ctx.lineTo(this._doSize(t),this._doSize(e))}moveTo(t,e){return this._ctx.moveTo(this._doSize(t),this._doSize(e))}arcTo(t,e,i,s,o){return this._ctx.arcTo(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s),this._doSize(o))}setLineWidth(t){return this._ctx.lineWidth=this._doSize(t)}setLineDash(t){return this._ctx.setLineDash(t.map((t=>this._doSize(t))))}isPointInPath(t,e){return this._ctx.isPointInPath(this._doX(t),this._doY(e))}isPointInPathWithoutScroll(t,e){return this._ctx.isPointInPath(this._doSize(t),this._doSize(e))}setStrokeStyle(t){this._ctx.strokeStyle=t}stroke(){return this._ctx.stroke()}translate(t,e){return this._ctx.translate(this._doSize(t),this._doSize(e))}rotate(t){return this._ctx.rotate(t)}drawImage(...t){const e=t[0],i=t[1],s=t[2],o=t[3],r=t[4],n=t[t.length-4],a=t[t.length-3],h=t[t.length-2],l=t[t.length-1];return 9===t.length?this._ctx.drawImage(e,this._doSize(i),this._doSize(s),this._doSize(o),this._doSize(r),this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l)):this._ctx.drawImage(e,this._doSize(n),this._doSize(a),this._doSize(h),this._doSize(l))}createPattern(t,e){return this._ctx.createPattern(t,e)}measureText(t){return this._ctx.measureText(t)}setTextAlign(t){this._ctx.textAlign=t}fillText(t,e,i,s){return void 0!==s?this._ctx.fillText(t,this._doSize(e),this._doSize(i),this._doSize(s)):this._ctx.fillText(t,this._doSize(e),this._doSize(i))}strokeText(t,e,i,s){return void 0!==s?this._ctx.strokeText(t,this._doSize(e),this._doSize(i),this._doSize(s)):this._ctx.strokeText(t,this._doSize(e),this._doSize(i))}setFont(t){const e=[];"bold"===t.fontWeight&&e.push(`${t.fontWeight}`),e.push(`${this._doSize(t.fontSize||12)}px`),e.push(`${t.fontFamily||"sans-serif"}`),this._ctx.font=`${e.join(" ")}`}setTextBaseline(t){this._ctx.textBaseline=t}setGlobalAlpha(t){this._ctx.globalAlpha=t}save(){this._ctx.save()}restore(){this._ctx.restore()}scale(t,e){this._ctx.scale(t,e)}setShadowColor(t){this._ctx.shadowColor=t}setShadowOffsetX(t){this._ctx.shadowOffsetX=this._doSize(t)}setShadowOffsetY(t){this._ctx.shadowOffsetY=this._doSize(t)}setShadowBlur(t){this._ctx.shadowBlur=this._doSize(t)}ellipse(t,e,i,s,o,r,n,a){this._ctx.ellipse(this._doSize(t),this._doSize(e),this._doSize(i),this._doSize(s),o,r,n,a)}_doSize(t){return this._opts.devicePixelRatio*t}_doX(t){const{scale:e,scrollX:i}=this._transform,s=(t-i)/e;return this._doSize(s)}_doY(t){const{scale:e,scrollY:i}=this._transform,s=(t-i)/e;return this._doSize(s)}}function c(t){return"number"==typeof t&&(t>0||t<=0)}function u(t){return"number"==typeof t&&t>=0}function d(t){return"string"==typeof t&&/^(http:\/\/|https:\/\/|\.\/|\/)/.test(`${t}`)}function f(t){return"string"==typeof t&&/^(data:image\/)/.test(`${t}`)}const _={x:function(t){return c(t)},y:function(t){return c(t)},w:u,h:function(t){return"number"==typeof t&&t>=0},angle:function(t){return"number"==typeof t&&t>=-360&&t<=360},number:c,borderWidth:function(t){return u(t)},borderRadius:function(t){return c(t)&&t>=0},color:function(e){return t(e)},imageSrc:function(t){return f(t)||d(t)},imageURL:d,imageBase64:f,svg:function(t){return"string"==typeof t&&/^(<svg[\s]{1,}|<svg>)/i.test(`${t}`.trim())&&/<\/[\s]{0,}svg>$/i.test(`${t}`.trim())},html:function(t){let e=!1;if("string"==typeof t){let i=document.createElement("div");i.innerHTML=t,i.children.length>0&&(e=!0),i=null}return e},text:function(t){return"string"==typeof t},fontSize:function(t){return c(t)&&t>0},lineHeight:function(t){return c(t)&&t>0},textAlign:function(t){return["center","left","right"].includes(t)},fontFamily:function(t){return"string"==typeof t&&t.length>0},fontWeight:function(t){return["bold"].includes(t)},strokeWidth:function(t){return c(t)&&t>0}};function g(t,e,i){const s=function(t){return{x:t.x+t.w/2,y:t.y+t.h/2}}(e);return function(t,e,i,s){e&&(i>0||i<0)&&(t.translate(e.x,e.y),t.rotate(i),t.translate(-e.x,-e.y));s(t),e&&(i>0||i<0)&&(t.translate(e.x,e.y),t.rotate(-i),t.translate(-e.x,-e.y))}(t,s,(e.angle||0)/180*Math.PI||0,i)}function m(t){t.setFillStyle("#000000"),t.setStrokeStyle("#000000"),t.setLineDash([]),t.setGlobalAlpha(1),t.setShadowColor("#00000000"),t.setShadowOffsetX(0),t.setShadowOffsetY(0),t.setShadowBlur(0)}function x(e,i,o){m(e),function(e,i){m(e),g(e,i,(()=>{if(!(i.desc.borderWidth&&i.desc.borderWidth>0))return;const s=i.desc.borderWidth;let o="#000000";!0===t(i.desc.borderColor)&&(o=i.desc.borderColor);const r=i.x-s/2,n=i.y-s/2,a=i.w+s,h=i.h+s;let l=i.desc.borderRadius||0;l=Math.min(l,a/2,h/2),l<a/2&&l<h/2&&(l+=s/2);const{desc:c}=i;void 0!==c.shadowColor&&t(c.shadowColor)&&e.setShadowColor(c.shadowColor),void 0!==c.shadowOffsetX&&_.number(c.shadowOffsetX)&&e.setShadowOffsetX(c.shadowOffsetX),void 0!==c.shadowOffsetY&&_.number(c.shadowOffsetY)&&e.setShadowOffsetY(c.shadowOffsetY),void 0!==c.shadowBlur&&_.number(c.shadowBlur)&&e.setShadowBlur(c.shadowBlur),e.beginPath(),e.setLineWidth(s),e.setStrokeStyle(o),e.moveTo(r+l,n),e.arcTo(r+a,n,r+a,n+h,l),e.arcTo(r+a,n+h,r,n+h,l),e.arcTo(r,n+h,r,n,l),e.arcTo(r,n,r+a,n,l),e.closePath(),e.stroke()}))}(e,i),m(e),g(e,i,(()=>{const{x:t,y:r,w:n,h:a}=i;let h=i.desc.borderRadius||0;h=Math.min(h,n/2,a/2),(n<2*h||a<2*h)&&(h=0),e.beginPath(),e.moveTo(t+h,r),e.arcTo(t+n,r,t+n,r+a,h),e.arcTo(t+n,r+a,t,r+a,h),e.arcTo(t,r+a,t,r,h),e.arcTo(t,r,t+n,r,h),e.closePath(),("string"==typeof o||["CanvasPattern"].includes(s.type(o)))&&e.setFillStyle(o),e.fill()}))}function S(t,e){x(t,e,e.desc.bgColor)}function w(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function p(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function y(t,e,i){const s=i.getContent(e.uuid);g(t,e,(()=>{s&&t.drawImage(s,e.x,e.y,e.w,e.h)}))}function v(e,i,s){m(e),x(e,i,i.desc.bgColor||"transparent"),g(e,i,(()=>{const s={fontSize:12,fontFamily:"sans-serif",textAlign:"center",...i.desc};e.setFillStyle(i.desc.color),e.setTextBaseline("top"),e.setFont({fontWeight:s.fontWeight,fontSize:s.fontSize,fontFamily:s.fontFamily});const o=s.text.replace(/\r\n/gi,"\n"),r=s.lineHeight||s.fontSize,n=o.split("\n"),a=[];let h=0;n.forEach(((t,s)=>{let o="";if(t.length>0){for(let l=0;l<t.length&&(e.measureText(o+(t[l]||"")).width<e.calcDeviceNum(i.w)?o+=t[l]||"":(a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),o=t[l]||"",h++),!((h+1)*r>i.h));l++)if(t.length-1===l&&(h+1)*r<i.h){a.push({text:o,width:e.calcScreenNum(e.measureText(o).width)}),s<n.length-1&&h++;break}}else a.push({text:"",width:0})}));let l=0;a.length*r<i.h&&("top"===i.desc.verticalAlign?l=0:"bottom"===i.desc.verticalAlign?l+=i.h-a.length*r:l+=(i.h-a.length*r)/2);{const o=i.y+l;void 0!==s.textShadowColor&&t(s.textShadowColor)&&e.setShadowColor(s.textShadowColor),void 0!==s.textShadowOffsetX&&_.number(s.textShadowOffsetX)&&e.setShadowOffsetX(s.textShadowOffsetX),void 0!==s.textShadowOffsetY&&_.number(s.textShadowOffsetY)&&e.setShadowOffsetY(s.textShadowOffsetY),void 0!==s.textShadowBlur&&_.number(s.textShadowBlur)&&e.setShadowBlur(s.textShadowBlur),a.forEach(((t,n)=>{let a=i.x;"center"===s.textAlign?a=i.x+(i.w-t.width)/2:"right"===s.textAlign&&(a=i.x+(i.w-t.width)),e.fillText(t.text,a,o+r*n)})),m(e)}if(t(s.strokeColor)&&void 0!==s.strokeWidth&&s.strokeWidth>0){const t=i.y+l;a.forEach(((o,n)=>{let a=i.x;"center"===s.textAlign?a=i.x+(i.w-o.width)/2:"right"===s.textAlign&&(a=i.x+(i.w-o.width)),void 0!==s.strokeColor&&e.setStrokeStyle(s.strokeColor),void 0!==s.strokeWidth&&s.strokeWidth>0&&e.setLineWidth(s.strokeWidth),e.strokeText(o.text,a,t+r*n)}))}}))}function b(t,e){m(t),g(t,e,(t=>{const{x:i,y:s,w:o,h:r,desc:n}=e,{bgColor:a="#000000",borderColor:h="#000000",borderWidth:l=0}=n,c=o/2,u=r/2,d=i+c,f=s+u;if(l&&l>0){const e=l/2+c,i=l/2+u;t.beginPath(),t.setStrokeStyle(h),t.setLineWidth(l),t.ellipse(d,f,e,i,0,0,2*Math.PI),t.closePath(),t.stroke()}t.beginPath(),t.setFillStyle(a),t.ellipse(d,f,c,u,0,0,2*Math.PI),t.closePath(),t.fill()}))}function z(e,i,s){var o;m(e);const r=e.getSize();if(e.clearRect(0,0,r.contextWidth,r.contextHeight),"string"==typeof i.bgColor&&t(i.bgColor)&&function(t,e){const i=t.getSize();t.setFillStyle(e),t.fillRect(0,0,i.contextWidth,i.contextHeight)}(e,i.bgColor),i.elements.length>0)for(let t=0;t<i.elements.length;t++){const r=i.elements[t];if(!0!==(null==(o=null==r?void 0:r.operation)?void 0:o.invisible))switch(r.type){case"rect":S(e,r);break;case"text":v(e,r);break;case"image":w(e,r,s);break;case"svg":p(e,r,s);break;case"html":y(e,r,s);break;case"circle":b(e,r)}}}class L{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);null==i||i.push(e),this._listeners.set(t,i||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);if(Array.isArray(i))for(let t=0;t<(null==i?void 0:i.length);t++)if(i[t]===e){i.splice(t,1);break}this._listeners.set(t,i||[])}}trigger(t,e){const i=this._listeners.get(t);return!!Array.isArray(i)&&(i.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}class D{constructor(t){this._currentLoadData={},this._currentUUIDQueue=[],this._storageLoadData={},this._status="free",this._waitingLoadQueue=[],this._opts=t,this._event=new L,this._waitingLoadQueue=[]}load(t,e){const[i,s]=this._resetLoadData(t,e);"free"===this._status||"complete"===this._status?(this._currentUUIDQueue=i,this._currentLoadData=s,this._loadTask()):"loading"===this._status&&i.length>0&&this._waitingLoadQueue.push({uuidQueue:i,loadData:s})}on(t,e){this._event.on(t,e)}off(t,e){this._event.off(t,e)}isComplete(){return"complete"===this._status}getContent(t){var e;return"loaded"===(null==(e=this._storageLoadData[t])?void 0:e.status)?this._storageLoadData[t].content:null}_resetLoadData(t,e){const i={},s=[],o=this._storageLoadData;for(let r=t.elements.length-1;r>=0;r--){const n=t.elements[r];["image","svg","html"].includes(n.type)&&(o[n.uuid]?e.includes(n.uuid)&&(i[n.uuid]=this._createEmptyLoadItem(n),s.push(n.uuid)):(i[n.uuid]=this._createEmptyLoadItem(n),s.push(n.uuid)))}return[s,i]}_createEmptyLoadItem(t){let i="";const s=t.type;let o=t.w,r=t.h;if("image"===t.type){i=t.desc.src||""}else if("svg"===t.type){i=t.desc.svg||""}else if("html"===t.type){const e=t;i=(e.desc.html||"").replace(/<script[\s\S]*?<\/script>/gi,""),o=e.desc.width||t.w,r=e.desc.height||t.h}return{uuid:t.uuid,type:s,status:"null",content:null,source:i,elemW:o,elemH:r,element:e(t)}}_loadTask(){if("loading"===this._status)return;if(this._status="loading",0===this._currentUUIDQueue.length){if(0===this._waitingLoadQueue.length)return this._status="complete",void this._event.trigger("complete",void 0);{const t=this._waitingLoadQueue.shift();if(t){const{uuidQueue:e,loadData:i}=t;this._currentLoadData=i,this._currentUUIDQueue=e}}}const{maxParallelNum:t}=this._opts,e=this._currentUUIDQueue.splice(0,t);e.forEach(((t,e)=>{}));const i=[],s=()=>{if(i.length>=t)return!1;if(0===e.length)return!0;for(let o=i.length;o<t;o++){const t=e.shift();if(void 0===t)break;i.push(t),this._loadElementSource(this._currentLoadData[t]).then((o=>{var r,n;i.splice(i.indexOf(t),1);const a=s();this._storageLoadData[t]={uuid:t,type:this._currentLoadData[t].type,status:"loaded",content:o,source:this._currentLoadData[t].source,elemW:this._currentLoadData[t].elemW,elemH:this._currentLoadData[t].elemH,element:this._currentLoadData[t].element},0===i.length&&0===e.length&&!0===a&&(this._status="free",this._loadTask()),this._event.trigger("load",{uuid:null==(r=this._storageLoadData[t])?void 0:r.uuid,type:this._storageLoadData[t].type,status:this._storageLoadData[t].status,content:this._storageLoadData[t].content,source:this._storageLoadData[t].source,elemW:this._storageLoadData[t].elemW,elemH:this._storageLoadData[t].elemH,element:null==(n=this._storageLoadData[t])?void 0:n.element})})).catch((o=>{var r,n,a,h,l,c,u,d,f,_,g,m;console.warn(o),i.splice(i.indexOf(t),1);const x=s();this._currentLoadData[t]&&(this._storageLoadData[t]={uuid:t,type:null==(r=this._currentLoadData[t])?void 0:r.type,status:"fail",content:null,error:o,source:null==(n=this._currentLoadData[t])?void 0:n.source,elemW:null==(a=this._currentLoadData[t])?void 0:a.elemW,elemH:null==(h=this._currentLoadData[t])?void 0:h.elemH,element:null==(l=this._currentLoadData[t])?void 0:l.element}),0===i.length&&0===e.length&&!0===x&&(this._status="free",this._loadTask()),this._currentLoadData[t]&&this._event.trigger("error",{uuid:t,type:null==(c=this._storageLoadData[t])?void 0:c.type,status:null==(u=this._storageLoadData[t])?void 0:u.status,content:null==(d=this._storageLoadData[t])?void 0:d.content,source:null==(f=this._storageLoadData[t])?void 0:f.source,elemW:null==(_=this._storageLoadData[t])?void 0:_.elemW,elemH:null==(g=this._storageLoadData[t])?void 0:g.elemH,element:null==(m=this._storageLoadData[t])?void 0:m.element})}))}return!1};s()}async _loadElementSource(t){if(t&&"image"===t.type){return await n(t.source)}if(t&&"svg"===t.type){return await a(t.source)}if(t&&"html"===t.type){return await h(t.source,{width:t.elemW,height:t.elemH})}throw Error("Element's source is not support!")}}class T{constructor(){this._listeners=new Map}on(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);null==i||i.push(e),this._listeners.set(t,i||[])}else this._listeners.set(t,[e])}off(t,e){if(this._listeners.has(t)){const i=this._listeners.get(t);if(Array.isArray(i))for(let t=0;t<(null==i?void 0:i.length);t++)if(i[t]===e){i.splice(t,1);break}this._listeners.set(t,i||[])}}trigger(t,e){const i=this._listeners.get(t);return!!Array.isArray(i)&&(i.forEach((t=>{t(e)})),!0)}has(t){if(this._listeners.has(t)){const e=this._listeners.get(t);if(Array.isArray(e)&&e.length>0)return!0}return!1}}const P=Symbol("_queue"),O=Symbol("_ctx"),C=Symbol("_status"),W=Symbol("_loader"),k=Symbol("_opts"),A=Symbol("_freeze"),I=Symbol("_drawFrame"),R=Symbol("_retainQueueOneItem");var F,$,H;const{requestAnimationFrame:B}=window;class E extends T{constructor(t){super(),this[F]=[],this[$]=null,this[H]="null",this[k]=t,this[W]=new D({maxParallelNum:6}),this[W].on("load",(t=>{this[I](),this.trigger("load",{element:t.element})})),this[W].on("error",(t=>{this.trigger("error",{element:t.element,error:t.error})})),this[W].on("complete",(()=>{this.trigger("loadComplete",{t:Date.now()})}))}render(t,i,s){const{changeResourceUUIDs:o=[]}=s||{};this[C]="free";const r=e(i);if(Array.isArray(r.elements)&&r.elements.forEach((t=>{"string"==typeof t.uuid&&t.uuid||(t.uuid=function(){function t(){return(65536*(1+Math.random())|0).toString(16).substring(1)}return`${t()}${t()}-${t()}-${t()}-${t()}-${t()}${t()}${t()}`}())})),!this[O])if(this[k]&&"[object HTMLCanvasElement]"===Object.prototype.toString.call(t)){const{width:e,height:i,contextWidth:s,contextHeight:o,devicePixelRatio:r}=this[k],n=t;n.width=e*r,n.height=i*r;const a=n.getContext("2d");this[O]=new l(a,{width:e,height:i,contextWidth:s||e,contextHeight:o||i,devicePixelRatio:r})}else t&&(this[O]=t);if(["freeze"].includes(this[C]))return;const n=e({data:r});this[P].push(n),this[I](),this[W].load(r,o||[])}getContext(){return this[O]}thaw(){this[C]="free"}[(F=P,$=O,H=C,A)](){this[C]="freeze"}[I](){"freeze"!==this[C]&&B((()=>{if("freeze"===this[C])return;const t=this[O];let e=this[P][0],i=!1;this[P].length>1?e=this[P].shift():i=!0,!0!==this[W].isComplete()?(this[I](),e&&t&&z(t,e.data,this[W])):e&&t?(z(t,e.data,this[W]),this[R](),i?this[C]="free":this[I]()):this[C]="free",this.trigger("drawFrame",{t:Date.now()}),!0===this[W].isComplete()&&1===this[P].length&&"free"===this[C]&&(t&&this[P][0]&&this[P][0].data&&z(t,this[P][0].data,this[W]),this.trigger("drawFrameComplete",{t:Date.now()}),this[A]())}))}[R](){if(this[P].length<=1)return;const t=e(this[P][this[P].length-1]);this[P]=[t]}}return E}();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@idraw/renderer",
|
|
3
|
-
"version": "0.3.0-
|
|
3
|
+
"version": "0.3.0-beta.2",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
"author": "chenshenhai",
|
|
22
22
|
"license": "MIT",
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"@idraw/types": "^0.3.0-
|
|
24
|
+
"@idraw/types": "^0.3.0-beta.2"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@idraw/util": "^0.3.0-
|
|
27
|
+
"@idraw/util": "^0.3.0-beta.2"
|
|
28
28
|
},
|
|
29
29
|
"publishConfig": {
|
|
30
30
|
"access": "public"
|
|
31
31
|
},
|
|
32
|
-
"gitHead": "
|
|
32
|
+
"gitHead": "95addb072d69a708d68221cfa3bdb22384ab7f19"
|
|
33
33
|
}
|