polotno-node 2.9.29 → 2.9.30

package/README.md

@@ -201,7 +201,7 @@ const url = await instance.jsonToPDFDataURL(json, {
 
 ### `attrs.skipFontError`
 
-If `skipFontError` is true, it will not throw error font is not loaded or not defined. By default it is `false`.
+If `skipFontError` is true, it will not throw error font is not loaded or not defined. By default it is `false`, so it will throw error.
 
 ```js
 const url = await instance.jsonToPDFDataURL(json, {
@@ -209,6 +209,16 @@ const url = await instance.jsonToPDFDataURL(json, {
 });
 ```
 
+### `attrs.skipImageError`
+
+If `skipImageError` is true, it will not throw error an can't be loaded. By default it is `false`, so it will throw error.
+
+```js
+const url = await instance.jsonToPDFDataURL(json, {
+  skipImageError: true,
+});
+```
+
 ### `attrs.textOverflow`
 
 Control behavior of text on its overflow. Default is `change-font-size`. It means it will automatically reduce font size to fit text into the box. Other options are:

package/dist/assets/{index-z65AljXl.js → index-CnIp_NfV.js}

@@ -210,7 +210,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
       -webkit-text-fill-color: transparent;
       -moz-text-fill-color: transparent;
     `),`<div style="white-space: unset; width: ${Math.round(D.width||100)}px; ${L}; font-size: ${D.fontSize}px; font-family: '${q}'; text-decoration: ${D.textDecoration}; text-align: ${D.align}; line-height: ${D.lineHeight}; letter-spacing: ${D.letterSpacing}rem; font-style: ${D.fontStyle}; font-weight: ${D.fontWeight}; -webkit-text-stroke: ${D.strokeWidth}px ${D.stroke}; paint-order: stroke fill;"  contentEditable dir="${(0,h.getDir)((0,O.removeTags)(D.text))}">${D.text.replaceAll(`
-`,"</br>")}</div>`}const Z=D=>{let q=D.fontSize;for(let A=1;A<50;A++){const L=$(Object.assign(Object.assign({},D.toJSON()),{fontSize:q}),{fontFamily:D.fontFamily}),{height:z}=(0,y.detectSize)(L),I=D.height&&z>D.height,H=(0,y.isContentWrapping)({html:L});if(!(I||H))break;q-=.5}return q},Y=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);e.HTMLElement=(0,o.observer)(({element:D,store:q})=>{const A=a.default.useRef(null),[L,z]=a.default.useState(),[I,H]=a.default.useState(!1),[W,V]=a.default.useState(!0),[U,K]=a.default.useState(!1),X=a.default.useRef(D.height),Q=q.selectedElements.indexOf(D)>=0,te=D.fontSize/3,{textVerticalResizeEnabled:ee}=S.flags,ne=(0,h.usePrevious)(D.fontFamily),[ie]=(0,h.useFontLoader)(q,D.fontFamily),le=D._editModeEnabled;(0,m.useFadeIn)(A);const xe=ie?D.fontFamily:ne!==D.fontFamily?ne:"Arial",Fe=(0,w.useColor)(D).fill,oe=$(D,{fontFamily:xe,color:Fe}),{width:ue,height:ve}=M(oe,D,ie);a.default.useEffect(()=>{if(!ie)return;if(!D.height)return void D.set({height:ve});const{textOverflow:Te}=S.flags;if(Te!=="change-font-size"||I)Te==="resize"&&(ee&&D.height<ve&&q.history.ignore(()=>{D.set({height:ve})}),ee||D.height===ve||q.history.ignore(()=>{D.set({height:ve})}));else{const ze=Z(D);ze!==D.fontSize?q.history.ignore(()=>{D.set({fontSize:ze})}):D.height!==ve&&(ee&&D.height<ve?q.history.ignore(()=>{D.set({height:ve})}):ee||q.history.ignore(()=>{D.set({height:ve})}))}});const Ee=a.default.useRef(0);a.default.useEffect(()=>{I||le||(async()=>{Ee.current++;const Te=Ee.current,ze=(0,b.incrementLoader)(`text ${D.id}`);V(!0);let Re=null;const Ne=Y?5:1;for(let $e=0;$e<Ne;$e++){if(Re=await(0,y.htmlToCanvas)({html:oe,width:D.width||1,height:D.height||ve||1,fontFamily:xe,padding:te,pixelRatio:q._elementsPixelRatio,font:q.fonts.find(Ge=>Ge.fontFamily===xe)||R.globalFonts.find(Ge=>Ge.fontFamily===xe)}),Te!==Ee.current)return void ze();B(Re)&&Y&&await new Promise(Ge=>setTimeout(Ge,50*($e+1)))}Re?(z(Re),V(!1),f.default.Util.requestAnimFrame(ze)):ze()})()},[oe,I,ve,le,xe,D.height,q._elementsPixelRatio]);const re=I||W;a.default.useEffect(()=>g.autorun(()=>{const Te=A.current;(0,_.applyFilter)(Te,D)}),[L,re,D.shadowColor,D.shadowOffsetX,D.shadowOffsetY,D.shadowOpacity]);let de=0;D.verticalAlign==="middle"&&(de=(D.height-ve)/2),D.verticalAlign==="bottom"&&(de=D.height-ve);const me=(0,h.getLineHeight)({fontLoaded:ie,fontFamily:D.fontFamily,fontSize:D.fontSize,lineHeight:D.lineHeight}),Se=(0,T.isTouchDevice)();return a.default.createElement(a.default.Fragment,null,a.default.createElement(l.Rect,{x:D.a.x,y:D.a.y,offsetX:D.backgroundPadding*(D.fontSize*me*.5),offsetY:D.backgroundPadding*(D.fontSize*me*.5),rotation:D.a.rotation,hideInExport:!D.showInExport,listening:!1,visible:D.backgroundEnabled,opacity:D.backgroundOpacity*D.a.opacity,fill:D.backgroundColor,width:D.a.width+D.backgroundPadding*(D.fontSize*me),height:D.a.height+D.backgroundPadding*(D.fontSize*me),cornerRadius:D.backgroundCornerRadius*(D.fontSize*me*.5)}),a.default.createElement(l.Rect,{ref:A,name:"element",x:D.a.x,y:D.a.y,listening:D.selectable,rotation:D.a.rotation,width:D.a.width,height:D.a.height,visible:!re,draggable:Se?D.draggable&&Q:D.draggable,preventDefault:!Se||Q,opacity:le?0:D.a.opacity,hideInExport:!D.showInExport,onMouseEnter:()=>{K(!0)},onMouseLeave:()=>{K(!1)},onDragMove:Te=>{D.set({x:Te.target.x(),y:Te.target.y()})},onDragEnd:Te=>{D.set({x:Te.target.x(),y:Te.target.y()})},id:D.id,onDblClick:()=>{D.contentEditable&&D.toggleEditMode(!0)},onDblTap:()=>{D.contentEditable&&D.toggleEditMode(!0)},onTransformStart:Te=>{H(!0),X.current=D.height},onTransform:Te=>{var ze;const Re=Te.target,Ne=((ze=Re.getStage())===null||ze===void 0?void 0:ze.findOne("Transformer")).getActiveAnchor(),$e=Ne==="middle-left"||Ne==="middle-right",Ge=Ne==="top-center"||Ne==="bottom-center",ut=Re.scaleX();if($e){const ce=Re.scaleX(),fe=Math.max(Re.width()*ce,D.fontSize);if(Re.width(fe),Re.scaleX(1),S.flags.textVerticalResizeEnabled){const Ze=Math.max(ve,X.current);D.set({height:Ze})}D.set({width:fe,x:Re.x(),y:Re.y()})}else if(Ge){let ce=S.flags.textOverflow==="resize"?ve:D.lineHeight*D.fontSize;const fe=Math.max(ce,Te.target.height()*Te.target.scaleY());Re.scaleY(1),D.set({x:Re.x(),y:Re.y(),height:fe,rotation:Re.rotation()})}else Re.scaleX(1),Re.scaleY(1),D.set({fontSize:D.fontSize*ut,width:Re.width()*ut,x:Re.x(),y:Re.y(),rotation:Re.rotation(),height:Re.height()*ut})},onTransformEnd:Te=>{H(!1),V(!0);const ze=Te.target.scaleX();Te.target.scaleX(1),Te.target.scaleY(1),D.set({fontSize:D.fontSize*ze,width:Te.target.width()*ze,x:Te.target.x(),y:Te.target.y(),rotation:Te.target.rotation(),shadowBlur:D.shadowBlur*ze,shadowOffsetX:D.shadowOffsetX*ze,shadowOffsetY:D.shadowOffsetY*ze,strokeWidth:D.strokeWidth*ze})}}),a.default.createElement(l.Image,{ref:A,image:L,x:D.a.x,y:D.a.y,offsetX:te,offsetY:te-de,listening:!1,rotation:D.rotation,width:D.a.width+2*te,height:D.a.height+2*te,visible:!re,opacity:le?0:D.a.opacity,shadowEnabled:D.shadowEnabled,shadowBlur:D.shadowBlur,shadowOffsetX:D.shadowOffsetX,shadowOffsetY:D.shadowOffsetY,shadowColor:D.shadowColor,shadowOpacity:D.shadowOpacity,hideInExport:!D.showInExport}),re&&a.default.createElement(l.Group,{x:D.a.x,y:D.a.y,rotation:D.rotation,offsetY:-de},a.default.createElement(v.Html,{divProps:{style:{pointerEvents:"none"}}},a.default.createElement(P,{dangerouslySetInnerHTML:{__html:oe},style:{pointerEvents:"none",display:"inline-block"}}))),le&&a.default.createElement(l.Group,{x:D.a.x,y:D.a.y,rotation:D.rotation,offsetY:-de},a.default.createElement(v.Html,null,a.default.createElement(k,{html:oe,element:D,onChange:Te=>{const ze=(0,E.getLimitedFontSize)({oldText:(0,O.removeTags)(D.text),newText:(0,O.removeTags)(Te),element:D});D.set({text:Te,fontSize:ze})},onBlur:Te=>{D.toggleEditMode(!1)}}))),(Q||U)&&a.default.createElement(p.Highlighter,{element:D}))})})(K7);var nS={},y2={},Qs={};(function(e){function t(u){return u/180*Math.PI}function r(u,f,g,S,_){const h=Math.sqrt(g*g+S*S);return _+=Math.atan2(S,g),{x:u+h*Math.cos(_),y:f+h*Math.sin(_)}}function n(u){const{x:f,y:g,width:S,height:_}=u,h=t(u.rotation),w=r(f,g,0,0,h),y=r(f,g,S,0,h),m=r(f,g,S,_,h),p=r(f,g,0,_,h),v=Math.min(w.x,y.x,m.x,p.x),d=Math.min(w.y,y.y,m.y,p.y),b=Math.max(w.x,y.x,m.x,p.x),O=Math.max(w.y,y.y,m.y,p.y);return{x:v,y:d,width:b-v,height:O-d,minX:v,minY:d,maxX:b,maxY:O}}function i(u){const f=u.map(w=>n(w)),g=Math.min(...f.map(w=>w.minX)),S=Math.min(...f.map(w=>w.minY)),_=Math.max(...f.map(w=>w.maxX)),h=Math.max(...f.map(w=>w.maxY));return{x:g,y:S,width:_-g,height:h-S,minX:g,minY:S,maxX:_,maxY:h}}function a(u){const f=t(u.rotation||0);return{x:u.x+u.width/2*Math.cos(f)+u.height/2*Math.sin(-f),y:u.y+u.height/2*Math.cos(f)+u.width/2*Math.sin(f)}}function o(u,f,g){const S=t(f),_=g.x+(u.x-g.x)*Math.cos(S)-(u.y-g.y)*Math.sin(S),h=g.y+(u.x-g.x)*Math.sin(S)+(u.y-g.y)*Math.cos(S);return Object.assign(Object.assign({},u),{rotation:u.rotation+f,x:_,y:h})}function l(u,f){return o(u,f,a(u))}Object.defineProperty(e,"__esModule",{value:!0}),e.rotateAroundCenter=e.rotateAroundPoint=e.getCenter=e.getTotalClientRect=e.getClientRect=e.degToRad=void 0,e.degToRad=t,e.getClientRect=n,e.getTotalClientRect=i,e.getCenter=a,e.rotateAroundPoint=o,e.rotateAroundCenter=l})(Qs);(function(e){var t=ye&&ye.__importDefault||function(S){return S&&S.__esModule?S:{default:S}};Object.defineProperty(e,"__esModule",{value:!0}),e.useAnchorSnap=e.useSnap=void 0;const r=t(et),n=t(_i),i=Qs;var a=5;function o(S){const _=S.__getNodeRect(),h=(0,i.getClientRect)(Object.assign(Object.assign({},_),{rotation:n.default.Util.radToDeg(_.rotation)})),w=S.getAbsolutePosition();return{vertical:[{guide:h.x,offset:w.x-h.x,snap:"start"},{guide:h.x+h.width/2,offset:w.x-h.x-h.width/2,snap:"center"},{guide:h.x+h.width,offset:w.x-h.x-h.width,snap:"end"}],horizontal:[{guide:h.y,offset:w.y-h.y,snap:"start"},{guide:h.y+h.height/2,offset:w.y-h.y-h.height/2,snap:"center"},{guide:h.y+h.height,offset:w.y-h.y-h.height,snap:"end"}]}}function l(S,_){var h=[],w=[];S.vertical.forEach(b=>{_.vertical.forEach(O=>{var R=Math.abs(b-O.guide);R<a&&h.push({lineGuide:b,diff:R,snap:O.snap,offset:O.offset})})}),S.horizontal.forEach(b=>{_.horizontal.forEach(O=>{var R=Math.abs(b-O.guide);R<a&&w.push({lineGuide:b,diff:R,snap:O.snap,offset:O.offset})})});var y=[];const m=h.sort((b,O)=>b.diff-O.diff),p=w.sort((b,O)=>b.diff-O.diff);var v=m[0],d=p[0];return v&&m.filter(b=>Math.abs(b.diff-v.diff)<.1).forEach(b=>{y.push(Object.assign({orientation:"V"},b))}),d&&p.filter(b=>Math.abs(b.diff-d.diff)<.1).forEach(b=>{y.push(Object.assign({orientation:"H"},b))}),y}function u(S,_){const h=r.default.useRef(),w=O=>O.hasName("element")||O.hasName("page-background")||!h.current&&O.hasName("elements-area");function y(O){var R;const T=(R=S.current)===null||R===void 0?void 0:R.getStage();var E=[],P=[];return T.find(w).forEach(x=>{if(!(O.indexOf(x)>=0)){var k=x.getClientRect({skipShadow:!0,skipStroke:!0});E.push(k.x,k.x+k.width,k.x+k.width/2),P.push(k.y,k.y+k.height,k.y+k.height/2)}}),{vertical:E,horizontal:P}}function m(O){var R;const T=(R=S.current)===null||R===void 0?void 0:R.getLayer(),E=T==null?void 0:T.children.find(P=>P.name()==="line-guides");O.forEach(P=>{if(P.orientation==="H"){var x=new n.default.Line({points:[-6e3,P.lineGuide,6e3,P.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});E==null||E.add(x),T.batchDraw()}else P.orientation==="V"&&(x=new n.default.Line({points:[P.lineGuide,-6e3,P.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),E==null||E.add(x))})}const p=O=>{O.target.getLayer().children.find(k=>k.name()==="line-guides").destroyChildren();var R=l(y(O.target.nodes()),o(O.target));if(!R.length)return;m(R);const T=O.target.getAbsolutePosition(),E=Object.assign({},T);R.forEach(k=>{switch(k.snap){case"start":case"center":case"end":switch(k.orientation){case"V":E.x=k.lineGuide+k.offset;break;case"H":E.y=k.lineGuide+k.offset}}});const P=E.x-T.x,x=E.y-T.y;O.evt.ctrlKey||O.evt.metaKey||O.target.nodes().forEach(k=>{const M=k.getAbsolutePosition();k.setAbsolutePosition({x:M.x+P,y:M.y+x})})},v=(O,R,T)=>{const E=S.current,P=E.getLayer();if(P.children.find($=>$.name()==="line-guides").destroyChildren(),E.getActiveAnchor()==="rotater"||Math.sqrt(Math.pow(R.x-O.x,2)+Math.pow(R.y-O.y,2))>50||!P)return R;var x=l(y(E.nodes()),{vertical:[{guide:R.x,offset:0,snap:"start"}],horizontal:[{guide:R.y,offset:0,snap:"start"}]});if(!x.length||(m(x),T.ctrlKey||T.metaKey))return R;let k=R.x,M=R.x;x.forEach($=>{switch($.orientation){case"V":k=$.lineGuide;break;case"H":M=$.lineGuide}});const j=Math.abs(R.x-k)<10,B=Math.abs(R.y-M)<10;return j&&!B?{x:k,y:O.y}:B&&!j?{x:O.x,y:M}:j&&B?{x:k,y:M}:R},d=O=>{if(h.current=!1,!O.target)return;const R=O.target.getLayer();R.children.find(T=>T.name()==="line-guides").destroyChildren(),R.batchDraw()},b=()=>{const O=S.current.nodes().map(T=>T.id()),R=_.getElementById(O[0]);h.current=(R==null?void 0:R.type)==="image"};r.default.useEffect(()=>{S.current&&(S.current.anchorDragBoundFunc(v),S.current.on("dragstart",()=>{setTimeout(()=>{const O=[...n.default.DD._dragElements.entries()];O.reverse(),n.default.DD._dragElements.clear(),O.forEach(([R,T])=>{n.default.DD._dragElements.set(R,T)})}),b()}),S.current.on("dragmove",p),S.current.on("dragend",d),S.current.on("transformstart",()=>{b()}),S.current.on("transformend",d),S.current.on("transform",O=>{var R,T;O.evt.ctrlKey||O.evt.metaKey?(R=S.current)===null||R===void 0||R.rotationSnapTolerance(0):(T=S.current)===null||T===void 0||T.rotationSnapTolerance(5)}))},[])}function f(S){return{vertical:[{guide:S.absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:S.absolutePosition().y,offset:0,snap:"center"}]}}function g(S,_,h){const w=p=>p.hasName("element")||p.hasName("line-anchor")||p.hasName("page-background")||p.hasName("elements-area"),y=p=>{p.target.getLayer().children.find(T=>T.name()==="line-guides").destroyChildren();var v=l(function(T){var E;const P=(E=S.current)===null||E===void 0?void 0:E.getStage();var x=[],k=[];return P.find(w).forEach(M=>{if(!(T.indexOf(M)>=0)){var j=M.getClientRect({skipShadow:!0,skipStroke:!0});M.hasName("line-anchor")&&(j={x:M.absolutePosition().x,y:M.absolutePosition().y,width:0,height:0}),x.push(j.x,j.x+j.width,j.x+j.width/2),k.push(j.y,j.y+j.height,j.y+j.height/2)}}),{vertical:x,horizontal:k}}([p.target,..._.map(T=>T.current)]),f(p.target));if(!v.length)return;(function(T){var E;const P=(E=S.current)===null||E===void 0?void 0:E.getLayer(),x=P==null?void 0:P.children.find(k=>k.name()==="line-guides");T.forEach(k=>{if(k.orientation==="H"){var M=new n.default.Line({points:[-6e3,k.lineGuide,6e3,k.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});x==null||x.add(M),P.batchDraw()}else k.orientation==="V"&&(M=new n.default.Line({points:[k.lineGuide,-6e3,k.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),x==null||x.add(M))})})(v);const d=p.target.getAbsolutePosition(),b=Object.assign({},d);v.forEach(T=>{switch(T.snap){case"start":case"center":case"end":switch(T.orientation){case"V":b.x=T.lineGuide+T.offset;break;case"H":b.y=T.lineGuide+T.offset}}});const O=b.x-d.x,R=b.y-d.y;if(!(p.evt.ctrlKey||p.evt.metaKey)){const T=p.target.getAbsolutePosition();p.target.absolutePosition({x:T.x+O,y:T.y+R})}},m=p=>{if(!p.target)return;const v=p.target.getLayer();v.children.find(d=>d.name()==="line-guides").destroyChildren(),v.batchDraw()};r.default.useEffect(()=>{S.current&&(S.current.on("dragmove",y),S.current.on("dragend",m))},h)}e.useSnap=u,e.useAnchorSnap=g})(y2);(function(e){var t=ye&&ye.__importDefault||function(w){return w&&w.__esModule?w:{default:w}};Object.defineProperty(e,"__esModule",{value:!0}),e.LineElement=e.getLinePositionFromMiddlePoints=e.getMiddlePoints=void 0;const r=t(et),n=yi,i=xa,a=Gc,o=$c,l=Pl,u=y2,f=Po;function g(w){const{x:y,y:m,width:p,height:v,rotation:d}=w.a,b=d*Math.PI/180,O={x:y+v/2*Math.cos(b+Math.PI/2),y:m+v/2*Math.sin(b+Math.PI/2)};return{middleLeft:O,middleRight:{x:O.x+p*Math.cos(b),y:O.y+p*Math.sin(b)}}}function S(w,y,m){const p=Math.sqrt(Math.pow(y.x-w.x,2)+Math.pow(y.y-w.y,2)),v=Math.atan2(y.y-w.y,y.x-w.x),d=180*v/Math.PI;return{x:w.x+Math.cos(v-Math.PI/2)*m/2,y:w.y+Math.sin(v-Math.PI/2)*m/2,width:p,height:m,rotation:d}}e.getMiddlePoints=g,e.getLinePositionFromMiddlePoints=S;const _=(w,y)=>({offsetX:5/w,offsetY:5/w,width:10/w,height:10/w,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:m=>{m.target.getStage().container().style.cursor="crosshair"},onMouseLeave:m=>{m.target.getStage().container().style.cursor=""},onDragStart:m=>{y.history.startTransaction()},onDragEnd:m=>{y.history.endTransaction()}}),h=(0,n.observer)(({element:w,type:y})=>{const m=(0,a.useColor)(w,w.a.color,"fill"),p=(0,a.useColor)(w,w.a.color,"stroke"),v=Object.assign(Object.assign(Object.assign({strokeWidth:w.height,lineCap:"round",lineJoin:"round"},p),m),{opacity:w.a.opacity,hideInExport:!w.showInExport});return r.default.createElement(r.default.Fragment,null,y==="arrow"&&r.default.createElement(i.Line,Object.assign({points:[3*w.height,2*-w.height,0,0,3*w.height,2*w.height]},v)),y==="triangle"&&r.default.createElement(i.Line,Object.assign({points:[3*w.height,2*-w.height,0,0,3*w.height,2*w.height],closed:!0},v)),y==="bar"&&r.default.createElement(i.Line,Object.assign({points:[0,2*-w.height,0,2*w.height],closed:!0},v)),y==="square"&&r.default.createElement(i.Line,Object.assign({points:[0,2*-w.height,4*w.height,2*-w.height,4*w.height,2*w.height,0,2*w.height],closed:!0},v)),y==="circle"&&r.default.createElement(i.Circle,Object.assign({x:2*w.height,y:0,radius:2*w.height},v)))});e.LineElement=(0,n.observer)(({element:w,store:y})=>{const m=r.default.useRef(null),p=r.default.useRef(null),v=r.default.useRef(null),d=w.selectable||y.role==="admin",b=(0,f.isTouchDevice)(),[O,R]=r.default.useState(!1),T=y.selectedElements.indexOf(w)>=0&&y.selectedElements.length===1,{middleLeft:E,middleRight:P}=g(w);(0,u.useAnchorSnap)(p,[m],[T]),(0,u.useAnchorSnap)(v,[m],[T]);const x=(0,a.useColor)(w,w.a.color,"stroke");return r.default.createElement(r.default.Fragment,null,r.default.createElement(i.Line,Object.assign({ref:m,name:"element",id:w.id,x:w.a.x,y:w.a.y,points:[0,0,w.a.width,0],offsetY:-w.a.height/2,strokeWidth:w.a.height,hitStrokeWidth:Math.max(w.a.height,20),dash:w.dash.map(k=>k*w.a.height)},x,{rotation:w.a.rotation,opacity:w.animated("opacity"),shadowEnabled:w.shadowEnabled,shadowBlur:w.shadowBlur,shadowOffsetX:w.shadowOffsetX,shadowOffsetY:w.shadowOffsetY,shadowColor:w.shadowColor,shadowOpacity:w.shadowOpacity,listening:d,draggable:b?w.draggable&&T:w.draggable,preventDefault:!b||T,hideInExport:!w.showInExport,onMouseEnter:()=>{R(!0)},onMouseLeave:()=>{R(!1)},onDragMove:k=>{w.set({x:k.target.x(),y:k.target.y()})},onDragEnd:k=>{w.set({x:k.target.x(),y:k.target.y()})},onTransform:k=>{const M=k.target.scaleX();k.target.scaleX(1),k.target.scaleY(1),w.set({height:w.height*M,width:w.width*M,x:k.target.x(),y:k.target.y(),rotation:k.target.rotation()})}})),r.default.createElement(i.Group,{x:E.x,y:E.y,rotation:w.rotation,hideInExport:!w.showInExport},r.default.createElement(h,{element:w,type:w.startHead})),r.default.createElement(i.Group,{x:P.x,y:P.y,rotation:w.rotation+180},r.default.createElement(h,{element:w,type:w.endHead})),O&&!T&&r.default.createElement(l.Highlighter,{element:w}),T&&w.resizable&&r.default.createElement(o.Portal,{selector:".page-abs-container",enabled:!0},r.default.createElement(i.Group,{visible:T},r.default.createElement(i.Rect,Object.assign({x:E.x,y:E.y,ref:p,name:"line-anchor"},_(y.scale,y),{onDragMove:k=>{const M=S(k.target.position(),P,w.height);w.set({x:M.x,y:M.y,width:M.width,rotation:M.rotation})}})),r.default.createElement(i.Rect,Object.assign({x:P.x,y:P.y,ref:v,name:"line-anchor"},_(y.scale,y),{onDragMove:k=>{const M=S(E,k.target.position(),w.height);w.set({x:M.x,y:M.y,width:M.width,rotation:M.rotation})}})))))})})(nS);var iS={};(function(e){var t=ye&&ye.__createBinding||(Object.create?function(A,L,z,I){I===void 0&&(I=z);var H=Object.getOwnPropertyDescriptor(L,z);H&&!("get"in H?!L.__esModule:H.writable||H.configurable)||(H={enumerable:!0,get:function(){return L[z]}}),Object.defineProperty(A,I,H)}:function(A,L,z,I){I===void 0&&(I=z),A[I]=L[z]}),r=ye&&ye.__setModuleDefault||(Object.create?function(A,L){Object.defineProperty(A,"default",{enumerable:!0,value:L})}:function(A,L){A.default=L}),n=ye&&ye.__importStar||function(A){if(A&&A.__esModule)return A;var L={};if(A!=null)for(var z in A)z!=="default"&&Object.prototype.hasOwnProperty.call(A,z)&&t(L,A,z);return r(L,A),L},i=ye&&ye.__importDefault||function(A){return A&&A.__esModule?A:{default:A}};Object.defineProperty(e,"__esModule",{value:!0}),e.VideoElement=e.useImageLoader=e.setImageLoaderHook=void 0;const a=i(et),o=yi,l=Wi,u=xa,f=i(Gp),g=i(_i),S=$c,_=Pl,h=Hi,w=n(Xs),y=Yn,m=Vc,p=Ol,v=Po;function d(){return document.createElement("canvas")}async function b(A){if(!(A.indexOf("data:image/svg+xml")>=0||A.indexOf(".svg")>=0))return A;const L=await w.urlToString(A),z=w.fixSize(L);return w.svgToURL(z)}const O=A=>{const[L,z]=a.default.useState(A);return a.default.useEffect(()=>{(async()=>{const I=await b(A);I!==L&&z(I)})()},[A]),L},R=new window.Image;R.src=w.svgToURL(`
+`,"</br>")}</div>`}const Z=D=>{let q=D.fontSize;for(let A=1;A<50;A++){const L=$(Object.assign(Object.assign({},D.toJSON()),{fontSize:q}),{fontFamily:D.fontFamily}),{height:z}=(0,y.detectSize)(L),I=D.height&&z>D.height,H=(0,y.isContentWrapping)({html:L});if(!(I||H))break;q-=.5}return q},Y=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);e.HTMLElement=(0,o.observer)(({element:D,store:q})=>{const A=a.default.useRef(null),[L,z]=a.default.useState(),[I,H]=a.default.useState(!1),[W,V]=a.default.useState(!0),[U,K]=a.default.useState(!1),X=a.default.useRef(D.height),Q=q.selectedElements.indexOf(D)>=0,te=D.fontSize/3,{textVerticalResizeEnabled:ee}=S.flags,ne=(0,h.usePrevious)(D.fontFamily),[ie]=(0,h.useFontLoader)(q,D.fontFamily),le=D._editModeEnabled;(0,m.useFadeIn)(A);const xe=ie?D.fontFamily:ne!==D.fontFamily?ne:"Arial",Fe=(0,w.useColor)(D).fill,oe=$(D,{fontFamily:xe,color:Fe}),{width:ue,height:ve}=M(oe,D,ie);a.default.useEffect(()=>{if(!ie)return;if(!D.height)return void D.set({height:ve});const{textOverflow:Te}=S.flags;if(Te!=="change-font-size"||I)Te==="resize"&&(ee&&D.height<ve&&q.history.ignore(()=>{D.set({height:ve})}),ee||D.height===ve||q.history.ignore(()=>{D.set({height:ve})}));else{const ze=Z(D);ze!==D.fontSize?q.history.ignore(()=>{D.set({fontSize:ze})}):D.height!==ve&&(ee&&D.height<ve?q.history.ignore(()=>{D.set({height:ve})}):ee||q.history.ignore(()=>{D.set({height:ve})}))}});const Ee=a.default.useRef(0);a.default.useEffect(()=>{I||le||(async()=>{Ee.current++;const Te=Ee.current,ze=(0,b.incrementLoader)(`text ${D.id}`);V(!0);let Re=null;const Ne=Y?5:1;for(let $e=0;$e<Ne;$e++){if(Re=await(0,y.htmlToCanvas)({html:oe,width:D.width||1,height:D.height||ve||1,fontFamily:xe,padding:te,pixelRatio:q._elementsPixelRatio,font:q.fonts.find(Ge=>Ge.fontFamily===xe)||R.globalFonts.find(Ge=>Ge.fontFamily===xe)}),Te!==Ee.current)return void ze();B(Re)&&Y&&await new Promise(Ge=>setTimeout(Ge,50*($e+1)))}Re?(z(Re),V(!1),f.default.Util.requestAnimFrame(ze)):ze()})()},[oe,I,ve,le,xe,D.height,q._elementsPixelRatio]);const re=I||W;a.default.useEffect(()=>g.autorun(()=>{const Te=A.current;(0,_.applyFilter)(Te,D)}),[L,re,D.shadowColor,D.shadowOffsetX,D.shadowOffsetY,D.shadowOpacity]);let de=0;D.verticalAlign==="middle"&&(de=(D.height-ve)/2),D.verticalAlign==="bottom"&&(de=D.height-ve);const me=(0,h.getLineHeight)({fontLoaded:ie,fontFamily:D.fontFamily,fontSize:D.fontSize,lineHeight:D.lineHeight}),Se=(0,T.isTouchDevice)();return a.default.createElement(a.default.Fragment,null,a.default.createElement(l.Rect,{x:D.a.x,y:D.a.y,offsetX:D.backgroundPadding*(D.fontSize*me*.5),offsetY:D.backgroundPadding*(D.fontSize*me*.5),rotation:D.a.rotation,hideInExport:!D.showInExport,listening:!1,visible:D.backgroundEnabled,opacity:D.backgroundOpacity*D.a.opacity,fill:D.backgroundColor,width:D.a.width+D.backgroundPadding*(D.fontSize*me),height:D.a.height+D.backgroundPadding*(D.fontSize*me),cornerRadius:D.backgroundCornerRadius*(D.fontSize*me*.5)}),a.default.createElement(l.Rect,{ref:A,name:"element",x:D.a.x,y:D.a.y,listening:D.selectable,rotation:D.a.rotation,width:D.a.width,height:D.a.height,visible:!re,draggable:Se?D.draggable&&Q:D.draggable,preventDefault:!Se||Q,opacity:le?0:D.a.opacity,hideInExport:!D.showInExport,onMouseEnter:()=>{K(!0)},onMouseLeave:()=>{K(!1)},onDragMove:Te=>{D.set({x:Te.target.x(),y:Te.target.y()})},onDragEnd:Te=>{D.set({x:Te.target.x(),y:Te.target.y()})},id:D.id,onDblClick:()=>{D.contentEditable&&D.toggleEditMode(!0)},onDblTap:()=>{D.contentEditable&&D.toggleEditMode(!0)},onTransformStart:Te=>{H(!0),X.current=D.height},onTransform:Te=>{var ze;const Re=Te.target,Ne=((ze=Re.getStage())===null||ze===void 0?void 0:ze.findOne("Transformer")).getActiveAnchor(),$e=Ne==="middle-left"||Ne==="middle-right",Ge=Ne==="top-center"||Ne==="bottom-center",ut=Re.scaleX();if($e){const ce=Re.scaleX(),fe=Math.max(Re.width()*ce,D.fontSize);if(Re.width(fe),Re.scaleX(1),S.flags.textVerticalResizeEnabled){const Ze=Math.max(ve,X.current);D.set({height:Ze})}D.set({width:fe,x:Re.x(),y:Re.y()})}else if(Ge){let ce=S.flags.textOverflow==="resize"?ve:D.lineHeight*D.fontSize;const fe=Math.max(ce,Te.target.height()*Te.target.scaleY());Re.scaleY(1),D.set({x:Re.x(),y:Re.y(),height:fe,rotation:Re.rotation()})}else Re.scaleX(1),Re.scaleY(1),D.set({fontSize:D.fontSize*ut,width:Re.width()*ut,x:Re.x(),y:Re.y(),rotation:Re.rotation(),height:Re.height()*ut})},onTransformEnd:Te=>{H(!1),V(!0);const ze=Te.target.scaleX();Te.target.scaleX(1),Te.target.scaleY(1),D.set({fontSize:D.fontSize*ze,width:Te.target.width()*ze,x:Te.target.x(),y:Te.target.y(),rotation:Te.target.rotation(),shadowBlur:D.shadowBlur*ze,shadowOffsetX:D.shadowOffsetX*ze,shadowOffsetY:D.shadowOffsetY*ze,strokeWidth:D.strokeWidth*ze})}}),a.default.createElement(l.Image,{ref:A,image:L,x:D.a.x,y:D.a.y,offsetX:te,offsetY:te-de,listening:!1,rotation:D.rotation,width:D.a.width+2*te,height:D.a.height+2*te,visible:!re,opacity:le?0:D.a.opacity,shadowEnabled:D.shadowEnabled,shadowBlur:D.shadowBlur,shadowOffsetX:D.shadowOffsetX,shadowOffsetY:D.shadowOffsetY,shadowColor:D.shadowColor,shadowOpacity:D.shadowOpacity,hideInExport:!D.showInExport}),re&&a.default.createElement(l.Group,{x:D.a.x,y:D.a.y,rotation:D.rotation,offsetY:-de},a.default.createElement(v.Html,{divProps:{style:{pointerEvents:"none"}}},a.default.createElement(P,{dangerouslySetInnerHTML:{__html:oe},style:{pointerEvents:"none",display:"inline-block"}}))),le&&a.default.createElement(l.Group,{x:D.a.x,y:D.a.y,rotation:D.rotation,offsetY:-de},a.default.createElement(v.Html,null,a.default.createElement(k,{html:oe,element:D,onChange:Te=>{const ze=(0,E.getLimitedFontSize)({oldText:(0,O.removeTags)(D.text),newText:(0,O.removeTags)(Te),element:D});D.set({text:Te,fontSize:ze})},onBlur:Te=>{D.toggleEditMode(!1)}}))),(Q||U)&&a.default.createElement(p.Highlighter,{element:D}))})})(K7);var nS={},y2={},Qs={};(function(e){function t(u){return u/180*Math.PI}function r(u,f,g,S,_){const h=Math.sqrt(g*g+S*S);return _+=Math.atan2(S,g),{x:u+h*Math.cos(_),y:f+h*Math.sin(_)}}function n(u){const{x:f,y:g,width:S,height:_}=u,h=t(u.rotation),w=r(f,g,0,0,h),y=r(f,g,S,0,h),m=r(f,g,S,_,h),p=r(f,g,0,_,h),v=Math.min(w.x,y.x,m.x,p.x),d=Math.min(w.y,y.y,m.y,p.y),b=Math.max(w.x,y.x,m.x,p.x),O=Math.max(w.y,y.y,m.y,p.y);return{x:v,y:d,width:b-v,height:O-d,minX:v,minY:d,maxX:b,maxY:O}}function i(u){const f=u.map(w=>n(w)),g=Math.min(...f.map(w=>w.minX)),S=Math.min(...f.map(w=>w.minY)),_=Math.max(...f.map(w=>w.maxX)),h=Math.max(...f.map(w=>w.maxY));return{x:g,y:S,width:_-g,height:h-S,minX:g,minY:S,maxX:_,maxY:h}}function a(u){const f=t(u.rotation||0);return{x:u.x+u.width/2*Math.cos(f)+u.height/2*Math.sin(-f),y:u.y+u.height/2*Math.cos(f)+u.width/2*Math.sin(f)}}function o(u,f,g){const S=t(f),_=g.x+(u.x-g.x)*Math.cos(S)-(u.y-g.y)*Math.sin(S),h=g.y+(u.x-g.x)*Math.sin(S)+(u.y-g.y)*Math.cos(S);return Object.assign(Object.assign({},u),{rotation:u.rotation+f,x:_,y:h})}function l(u,f){return o(u,f,a(u))}Object.defineProperty(e,"__esModule",{value:!0}),e.rotateAroundCenter=e.rotateAroundPoint=e.getCenter=e.getTotalClientRect=e.getClientRect=e.degToRad=void 0,e.degToRad=t,e.getClientRect=n,e.getTotalClientRect=i,e.getCenter=a,e.rotateAroundPoint=o,e.rotateAroundCenter=l})(Qs);(function(e){var t=ye&&ye.__importDefault||function(S){return S&&S.__esModule?S:{default:S}};Object.defineProperty(e,"__esModule",{value:!0}),e.useAnchorSnap=e.useSnap=void 0;const r=t(et),n=t(_i),i=Qs;var a=5;function o(S){const _=S.__getNodeRect(),h=(0,i.getClientRect)(Object.assign(Object.assign({},_),{rotation:n.default.Util.radToDeg(_.rotation)})),w=S.getAbsolutePosition();return{vertical:[{guide:h.x,offset:w.x-h.x,snap:"start"},{guide:h.x+h.width/2,offset:w.x-h.x-h.width/2,snap:"center"},{guide:h.x+h.width,offset:w.x-h.x-h.width,snap:"end"}],horizontal:[{guide:h.y,offset:w.y-h.y,snap:"start"},{guide:h.y+h.height/2,offset:w.y-h.y-h.height/2,snap:"center"},{guide:h.y+h.height,offset:w.y-h.y-h.height,snap:"end"}]}}function l(S,_){var h=[],w=[];S.vertical.forEach(b=>{_.vertical.forEach(O=>{var R=Math.abs(b-O.guide);R<a&&h.push({lineGuide:b,diff:R,snap:O.snap,offset:O.offset})})}),S.horizontal.forEach(b=>{_.horizontal.forEach(O=>{var R=Math.abs(b-O.guide);R<a&&w.push({lineGuide:b,diff:R,snap:O.snap,offset:O.offset})})});var y=[];const m=h.sort((b,O)=>b.diff-O.diff),p=w.sort((b,O)=>b.diff-O.diff);var v=m[0],d=p[0];return v&&m.filter(b=>Math.abs(b.diff-v.diff)<.1).forEach(b=>{y.push(Object.assign({orientation:"V"},b))}),d&&p.filter(b=>Math.abs(b.diff-d.diff)<.1).forEach(b=>{y.push(Object.assign({orientation:"H"},b))}),y}function u(S,_){const h=r.default.useRef(),w=O=>O.hasName("element")||O.hasName("page-background")||!h.current&&O.hasName("elements-area");function y(O){var R;const T=(R=S.current)===null||R===void 0?void 0:R.getStage();var E=[],P=[];return T.find(w).forEach(x=>{if(!(O.indexOf(x)>=0)){var k=x.getClientRect({skipShadow:!0,skipStroke:!0});E.push(k.x,k.x+k.width,k.x+k.width/2),P.push(k.y,k.y+k.height,k.y+k.height/2)}}),{vertical:E,horizontal:P}}function m(O){var R;const T=(R=S.current)===null||R===void 0?void 0:R.getLayer(),E=T==null?void 0:T.children.find(P=>P.name()==="line-guides");O.forEach(P=>{if(P.orientation==="H"){var x=new n.default.Line({points:[-6e3,P.lineGuide,6e3,P.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});E==null||E.add(x),T.batchDraw()}else P.orientation==="V"&&(x=new n.default.Line({points:[P.lineGuide,-6e3,P.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),E==null||E.add(x))})}const p=O=>{O.target.getLayer().children.find(k=>k.name()==="line-guides").destroyChildren();var R=l(y(O.target.nodes()),o(O.target));if(!R.length)return;m(R);const T=O.target.getAbsolutePosition(),E=(O.target.nodes().map(k=>k.getAbsolutePosition()),Object.assign({},T));R.forEach(k=>{switch(k.snap){case"start":case"center":case"end":switch(k.orientation){case"V":E.x=k.lineGuide+k.offset;break;case"H":E.y=k.lineGuide+k.offset}}});const P=E.x-T.x,x=E.y-T.y;if(!(O.evt.ctrlKey||O.evt.metaKey)){O.target.nodes().forEach(M=>{const j=M.getAbsolutePosition();M.setAbsolutePosition({x:j.x+P,y:j.y+x})});const k=O.target.nodes().map(M=>M.getAbsolutePosition().y);k.every(M=>Math.abs(M-k[0])<.1)}},v=(O,R,T)=>{const E=S.current,P=E.getLayer();if(P.children.find($=>$.name()==="line-guides").destroyChildren(),E.getActiveAnchor()==="rotater"||Math.sqrt(Math.pow(R.x-O.x,2)+Math.pow(R.y-O.y,2))>50||!P)return R;var x=l(y(E.nodes()),{vertical:[{guide:R.x,offset:0,snap:"start"}],horizontal:[{guide:R.y,offset:0,snap:"start"}]});if(!x.length||(m(x),T.ctrlKey||T.metaKey))return R;let k=R.x,M=R.x;x.forEach($=>{switch($.orientation){case"V":k=$.lineGuide;break;case"H":M=$.lineGuide}});const j=Math.abs(R.x-k)<10,B=Math.abs(R.y-M)<10;return j&&!B?{x:k,y:O.y}:B&&!j?{x:O.x,y:M}:j&&B?{x:k,y:M}:R},d=O=>{if(h.current=!1,!O.target)return;const R=O.target.getLayer();R.children.find(T=>T.name()==="line-guides").destroyChildren(),R.batchDraw()},b=()=>{const O=S.current.nodes().map(T=>T.id()),R=_.getElementById(O[0]);h.current=(R==null?void 0:R.type)==="image"};r.default.useEffect(()=>{S.current&&(S.current.anchorDragBoundFunc(v),S.current.on("dragstart",()=>{setTimeout(()=>{const O=[...n.default.DD._dragElements.entries()],R=O.find(([T,E])=>E.node instanceof n.default.Transformer);O.splice(O.indexOf(R),1),O.unshift(R),n.default.DD._dragElements.clear(),O.forEach(([T,E])=>{n.default.DD._dragElements.set(T,E)})}),b()}),S.current.on("dragmove",p),S.current.on("dragend",d),S.current.on("transformstart",()=>{b()}),S.current.on("transformend",d),S.current.on("transform",O=>{var R,T;O.evt.ctrlKey||O.evt.metaKey?(R=S.current)===null||R===void 0||R.rotationSnapTolerance(0):(T=S.current)===null||T===void 0||T.rotationSnapTolerance(5)}))},[])}function f(S){return{vertical:[{guide:S.absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:S.absolutePosition().y,offset:0,snap:"center"}]}}function g(S,_,h){const w=p=>p.hasName("element")||p.hasName("line-anchor")||p.hasName("page-background")||p.hasName("elements-area"),y=p=>{p.target.getLayer().children.find(T=>T.name()==="line-guides").destroyChildren();var v=l(function(T){var E;const P=(E=S.current)===null||E===void 0?void 0:E.getStage();var x=[],k=[];return P.find(w).forEach(M=>{if(!(T.indexOf(M)>=0)){var j=M.getClientRect({skipShadow:!0,skipStroke:!0});M.hasName("line-anchor")&&(j={x:M.absolutePosition().x,y:M.absolutePosition().y,width:0,height:0}),x.push(j.x,j.x+j.width,j.x+j.width/2),k.push(j.y,j.y+j.height,j.y+j.height/2)}}),{vertical:x,horizontal:k}}([p.target,..._.map(T=>T.current)]),f(p.target));if(!v.length)return;(function(T){var E;const P=(E=S.current)===null||E===void 0?void 0:E.getLayer(),x=P==null?void 0:P.children.find(k=>k.name()==="line-guides");T.forEach(k=>{if(k.orientation==="H"){var M=new n.default.Line({points:[-6e3,k.lineGuide,6e3,k.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});x==null||x.add(M),P.batchDraw()}else k.orientation==="V"&&(M=new n.default.Line({points:[k.lineGuide,-6e3,k.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),x==null||x.add(M))})})(v);const d=p.target.getAbsolutePosition(),b=Object.assign({},d);v.forEach(T=>{switch(T.snap){case"start":case"center":case"end":switch(T.orientation){case"V":b.x=T.lineGuide+T.offset;break;case"H":b.y=T.lineGuide+T.offset}}});const O=b.x-d.x,R=b.y-d.y;if(!(p.evt.ctrlKey||p.evt.metaKey)){const T=p.target.getAbsolutePosition();p.target.absolutePosition({x:T.x+O,y:T.y+R})}},m=p=>{if(!p.target)return;const v=p.target.getLayer();v.children.find(d=>d.name()==="line-guides").destroyChildren(),v.batchDraw()};r.default.useEffect(()=>{S.current&&(S.current.on("dragmove",y),S.current.on("dragend",m))},h)}e.useSnap=u,e.useAnchorSnap=g})(y2);(function(e){var t=ye&&ye.__importDefault||function(w){return w&&w.__esModule?w:{default:w}};Object.defineProperty(e,"__esModule",{value:!0}),e.LineElement=e.getLinePositionFromMiddlePoints=e.getMiddlePoints=void 0;const r=t(et),n=yi,i=xa,a=Gc,o=$c,l=Pl,u=y2,f=Po;function g(w){const{x:y,y:m,width:p,height:v,rotation:d}=w.a,b=d*Math.PI/180,O={x:y+v/2*Math.cos(b+Math.PI/2),y:m+v/2*Math.sin(b+Math.PI/2)};return{middleLeft:O,middleRight:{x:O.x+p*Math.cos(b),y:O.y+p*Math.sin(b)}}}function S(w,y,m){const p=Math.sqrt(Math.pow(y.x-w.x,2)+Math.pow(y.y-w.y,2)),v=Math.atan2(y.y-w.y,y.x-w.x),d=180*v/Math.PI;return{x:w.x+Math.cos(v-Math.PI/2)*m/2,y:w.y+Math.sin(v-Math.PI/2)*m/2,width:p,height:m,rotation:d}}e.getMiddlePoints=g,e.getLinePositionFromMiddlePoints=S;const _=(w,y)=>({offsetX:5/w,offsetY:5/w,width:10/w,height:10/w,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:m=>{m.target.getStage().container().style.cursor="crosshair"},onMouseLeave:m=>{m.target.getStage().container().style.cursor=""},onDragStart:m=>{y.history.startTransaction()},onDragEnd:m=>{y.history.endTransaction()}}),h=(0,n.observer)(({element:w,type:y})=>{const m=(0,a.useColor)(w,w.a.color,"fill"),p=(0,a.useColor)(w,w.a.color,"stroke"),v=Object.assign(Object.assign(Object.assign({strokeWidth:w.height,lineCap:"round",lineJoin:"round"},p),m),{opacity:w.a.opacity,hideInExport:!w.showInExport});return r.default.createElement(r.default.Fragment,null,y==="arrow"&&r.default.createElement(i.Line,Object.assign({points:[3*w.height,2*-w.height,0,0,3*w.height,2*w.height]},v)),y==="triangle"&&r.default.createElement(i.Line,Object.assign({points:[3*w.height,2*-w.height,0,0,3*w.height,2*w.height],closed:!0},v)),y==="bar"&&r.default.createElement(i.Line,Object.assign({points:[0,2*-w.height,0,2*w.height],closed:!0},v)),y==="square"&&r.default.createElement(i.Line,Object.assign({points:[0,2*-w.height,4*w.height,2*-w.height,4*w.height,2*w.height,0,2*w.height],closed:!0},v)),y==="circle"&&r.default.createElement(i.Circle,Object.assign({x:2*w.height,y:0,radius:2*w.height},v)))});e.LineElement=(0,n.observer)(({element:w,store:y})=>{const m=r.default.useRef(null),p=r.default.useRef(null),v=r.default.useRef(null),d=w.selectable||y.role==="admin",b=(0,f.isTouchDevice)(),[O,R]=r.default.useState(!1),T=y.selectedElements.indexOf(w)>=0&&y.selectedElements.length===1,{middleLeft:E,middleRight:P}=g(w);(0,u.useAnchorSnap)(p,[m],[T]),(0,u.useAnchorSnap)(v,[m],[T]);const x=(0,a.useColor)(w,w.a.color,"stroke");return r.default.createElement(r.default.Fragment,null,r.default.createElement(i.Line,Object.assign({ref:m,name:"element",id:w.id,x:w.a.x,y:w.a.y,points:[0,0,w.a.width,0],offsetY:-w.a.height/2,strokeWidth:w.a.height,hitStrokeWidth:Math.max(w.a.height,20),dash:w.dash.map(k=>k*w.a.height)},x,{rotation:w.a.rotation,opacity:w.animated("opacity"),shadowEnabled:w.shadowEnabled,shadowBlur:w.shadowBlur,shadowOffsetX:w.shadowOffsetX,shadowOffsetY:w.shadowOffsetY,shadowColor:w.shadowColor,shadowOpacity:w.shadowOpacity,listening:d,draggable:b?w.draggable&&T:w.draggable,preventDefault:!b||T,hideInExport:!w.showInExport,onMouseEnter:()=>{R(!0)},onMouseLeave:()=>{R(!1)},onDragMove:k=>{w.set({x:k.target.x(),y:k.target.y()})},onDragEnd:k=>{w.set({x:k.target.x(),y:k.target.y()})},onTransform:k=>{const M=k.target.scaleX();k.target.scaleX(1),k.target.scaleY(1),w.set({height:w.height*M,width:w.width*M,x:k.target.x(),y:k.target.y(),rotation:k.target.rotation()})}})),r.default.createElement(i.Group,{x:E.x,y:E.y,rotation:w.rotation,hideInExport:!w.showInExport},r.default.createElement(h,{element:w,type:w.startHead})),r.default.createElement(i.Group,{x:P.x,y:P.y,rotation:w.rotation+180},r.default.createElement(h,{element:w,type:w.endHead})),O&&!T&&r.default.createElement(l.Highlighter,{element:w}),T&&w.resizable&&r.default.createElement(o.Portal,{selector:".page-abs-container",enabled:!0},r.default.createElement(i.Group,{visible:T},r.default.createElement(i.Rect,Object.assign({x:E.x,y:E.y,ref:p,name:"line-anchor"},_(y.scale,y),{onDragMove:k=>{const M=S(k.target.position(),P,w.height);w.set({x:M.x,y:M.y,width:M.width,rotation:M.rotation})}})),r.default.createElement(i.Rect,Object.assign({x:P.x,y:P.y,ref:v,name:"line-anchor"},_(y.scale,y),{onDragMove:k=>{const M=S(E,k.target.position(),w.height);w.set({x:M.x,y:M.y,width:M.width,rotation:M.rotation})}})))))})})(nS);var iS={};(function(e){var t=ye&&ye.__createBinding||(Object.create?function(A,L,z,I){I===void 0&&(I=z);var H=Object.getOwnPropertyDescriptor(L,z);H&&!("get"in H?!L.__esModule:H.writable||H.configurable)||(H={enumerable:!0,get:function(){return L[z]}}),Object.defineProperty(A,I,H)}:function(A,L,z,I){I===void 0&&(I=z),A[I]=L[z]}),r=ye&&ye.__setModuleDefault||(Object.create?function(A,L){Object.defineProperty(A,"default",{enumerable:!0,value:L})}:function(A,L){A.default=L}),n=ye&&ye.__importStar||function(A){if(A&&A.__esModule)return A;var L={};if(A!=null)for(var z in A)z!=="default"&&Object.prototype.hasOwnProperty.call(A,z)&&t(L,A,z);return r(L,A),L},i=ye&&ye.__importDefault||function(A){return A&&A.__esModule?A:{default:A}};Object.defineProperty(e,"__esModule",{value:!0}),e.VideoElement=e.useImageLoader=e.setImageLoaderHook=void 0;const a=i(et),o=yi,l=Wi,u=xa,f=i(Gp),g=i(_i),S=$c,_=Pl,h=Hi,w=n(Xs),y=Yn,m=Vc,p=Ol,v=Po;function d(){return document.createElement("canvas")}async function b(A){if(!(A.indexOf("data:image/svg+xml")>=0||A.indexOf(".svg")>=0))return A;const L=await w.urlToString(A),z=w.fixSize(L);return w.svgToURL(z)}const O=A=>{const[L,z]=a.default.useState(A);return a.default.useEffect(()=>{(async()=>{const I=await b(A);I!==L&&z(I)})()},[A]),L},R=new window.Image;R.src=w.svgToURL(`
   <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path opacity="0.6" d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" fill="white"/>
   <path d="M4 5.49683V18.5032C4 20.05 5.68077 21.0113 7.01404 20.227L18.0694 13.7239C19.384 12.9506 19.384 11.0494 18.0694 10.2761L7.01404 3.77296C5.68077 2.98869 4 3.95 4 5.49683Z" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

package/dist/index.html

@@ -8,7 +8,7 @@
       }
     </style>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script type="module" crossorigin src="./assets/index-z65AljXl.js"></script>
+    <script type="module" crossorigin src="./assets/index-CnIp_NfV.js"></script>
   </head>
   <body>
     <div id="root"></div>

package/instance.js

@@ -179,7 +179,11 @@ module.exports.createInstance = async ({
         const message = error.toString();
         const isFontError = message.indexOf('Timeout for loading font') >= 0;
         const skipError = isFontError && args[1]?.skipFontError;
-        if (!skipError) {
+
+        const isImageError = message.indexOf('image ') >= 0;
+        const skipImageError = isImageError && args[1]?.skipImageError;
+
+        if (!skipError && !skipImageError) {
           throw new Error(error);
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno-node",
-  "version": "2.9.29",
+  "version": "2.9.30",
   "description": "Polotno workflow from NodeJS",
   "main": "index.js",
   "scripts": {
@@ -26,17 +26,17 @@
     "gifencoder": "^2.0.1",
     "pixelmatch": "^6.0.0",
     "pngjs": "^7.0.0",
-    "polotno": "^2.9.15",
+    "polotno": "^2.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "vite": "^5.3.3"
+    "vite": "^5.3.4"
   },
   "author": "Anton Lavrenov",
   "license": "MIT",
   "dependencies": {
-    "@sparticuz/chromium": "123.0.1",
-    "puppeteer": "22.12.1",
-    "puppeteer-core": "22.12.1",
+    "@sparticuz/chromium": "126.0.0",
+    "puppeteer": "22.13.0",
+    "puppeteer-core": "22.13.0",
     "tmp": "^0.2.3"
   },
   "bugs": {