polotno 2.9.13 → 2.9.14
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/package.json +1 -1
- package/polotno.bundle.js +1 -1
- package/utils/html2canvas.js +1 -1
package/package.json
CHANGED
package/polotno.bundle.js
CHANGED
|
@@ -86,7 +86,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
|
|
|
86
86
|
-moz-background-clip: text;
|
|
87
87
|
-webkit-text-fill-color: transparent;
|
|
88
88
|
-moz-text-fill-color: transparent;
|
|
89
|
-
`),`<div style="white-space: unset; width: ${Math.round(e.width||100)}px; ${r}; font-size: ${e.fontSize}px; font-family: '${t}'; text-decoration: ${e.textDecoration}; text-align: ${e.align}; line-height: ${e.lineHeight}; letter-spacing: ${e.letterSpacing}rem; font-style: ${e.fontStyle}; font-weight: ${e.fontWeight}; -webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}; paint-order: stroke fill;" contentEditable dir="${iK(iM(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}let aw=e=>{let t=e.fontSize;for(let n=1;n<50;n++){let n=ab({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}),{height:r}=an(n),i=e.height&&r>e.height,o=function({html:e}){let t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";let n=at();n.appendChild(t);let r=t.cloneNode(!0);r.style.visibility="hidden",r.style.whiteSpace="nowrap",n.appendChild(r);let i=r.scrollWidth>t.clientWidth;return n.removeChild(r),n.removeChild(t),i}({html:n});if(!(i||o))break;t-=.5}return t},ax=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),a_=j(({element:e,store:t})=>{let n=c(w).useRef(null),[r,i]=c(w).useState(),[o,a]=c(w).useState(!1),[l,s]=c(w).useState(!0),[u,d]=c(w).useState(!1),h=c(w).useRef(e.height),f=t.selectedElements.indexOf(e)>=0,p=e.fontSize/3,{textVerticalResizeEnabled:g}=iR,m=i0(e.fontFamily),[y]=iQ(t,e.fontFamily),b=e._editModeEnabled;ih(n);let _=y?e.fontFamily:m!==e.fontFamily?m:"Arial",E=ic(e).fill,S=ab(e,{fontFamily:_,color:E}),{width:C,height:O}=c(w).useMemo(()=>an(S),[S,e.width,y]);c(w).useEffect(()=>{if(!y)return;if(!e.height){e.set({height:O});return}let{textOverflow:n}=iR;if("change-font-size"!==n||o)"resize"!==n||(g&&e.height<O&&t.history.ignore(()=>{e.set({height:O})}),g||e.height===O||t.history.ignore(()=>{e.set({height:O})}));else{let n=aw(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height===O||(g&&e.height<O?t.history.ignore(()=>{e.set({height:O})}):g||t.history.ignore(()=>{e.set({height:O})}))}});let k=c(w).useRef(0),P=async()=>{k.current++;let n=k.current,r=iv(`text ${e.id}`);s(!0);let o=null,a=ax?5:1;for(let i=0;i<a;i++){if(o=await ar({html:S,width:e.width||1,height:e.height||O||1,fontFamily:_,padding:p,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===_)||iS.find(e=>e.fontFamily===_)}),n!==k.current){r();return}if(!function(e){let t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}(o)&&ax){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),s(!1),c(R).Util.requestAnimFrame(r)};c(w).useEffect(()=>{o||b||P()},[S,o,O,b,_,e.height,t._elementsPixelRatio]);let T=o||l;c(w).useEffect(()=>x.autorun(()=>{iD(n.current,e)}),[r,T,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let A=0;"middle"===e.verticalAlign&&(A=(e.height-O)/2),"bottom"===e.verticalAlign&&(A=e.height-O);let j=iJ({fontLoaded:y,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),N=iH();return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rX,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*j*.5),offsetY:e.backgroundPadding*(e.fontSize*j*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*j),height:e.a.height+e.backgroundPadding*(e.fontSize*j),cornerRadius:e.backgroundCornerRadius*(e.fontSize*j*.5)}),(0,v.jsx)(rX,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!T,draggable:N?e.draggable&&f:e.draggable,preventDefault:!N||f,opacity:b?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{a(!0),h.current=e.height},onTransform:t=>{let n=t.target,r=(n.getStage()?.findOne("Transformer")).getActiveAnchor(),i=n.scaleX();if("middle-left"===r||"middle-right"===r){let t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),iR.textVerticalResizeEnabled){let t=Math.max(O,h.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if("top-center"===r||"bottom-center"===r){let r=Math.max("resize"===iR.textOverflow?O:e.lineHeight*e.fontSize,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:r,rotation:n.rotation()})}else n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*i,width:n.width()*i,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*i})},onTransformEnd:t=>{a(!1),s(!0);let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),(0,v.jsx)(rQ,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:p,offsetY:p-A,listening:!1,rotation:e.rotation,width:e.a.width+2*p,height:e.a.height+2*p,visible:!T,opacity:b?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),T&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{divProps:{style:{pointerEvents:"none"}},children:(0,v.jsx)(am,{dangerouslySetInnerHTML:{__html:S},style:{pointerEvents:"none",display:"inline-block"}})})}),b&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{children:(0,v.jsx)(ay,{html:S,element:e,onChange:t=>{let n=iG({oldText:iM(e.text),newText:iM(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1)}})})}),(f||u)&&(0,v.jsx)(iz,{element:e})]})});var w=(g("8NFma"),g("8NFma"));function aE(e){return e/180*Math.PI}function aS(e,t,n,r,i){let o=Math.sqrt(n*n+r*r);return{x:e+o*Math.cos(i+=Math.atan2(r,n)),y:t+o*Math.sin(i)}}function aC(e){let{x:t,y:n,width:r,height:i}=e,o=aE(e.rotation),a=aS(t,n,0,0,o),l=aS(t,n,r,0,o),s=aS(t,n,r,i,o),u=aS(t,n,0,i,o),c=Math.min(a.x,l.x,s.x,u.x),d=Math.min(a.y,l.y,s.y,u.y),h=Math.max(a.x,l.x,s.x,u.x),f=Math.max(a.y,l.y,s.y,u.y);return{x:c,y:d,width:h-c,height:f-d,minX:c,minY:d,maxX:h,maxY:f}}function aO(e){let t=e.map(e=>aC(e)),n=Math.min(...t.map(e=>e.minX)),r=Math.min(...t.map(e=>e.minY)),i=Math.max(...t.map(e=>e.maxX)),o=Math.max(...t.map(e=>e.maxY));return{x:n,y:r,width:i-n,height:o-r,minX:n,minY:r,maxX:i,maxY:o}}function ak(e,t){var n=[],r=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var r=Math.abs(e-t.guide);r<5&&n.push({lineGuide:e,diff:r,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e-t.guide);n<5&&r.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})})});var i=[];let o=n.sort((e,t)=>e.diff-t.diff),a=r.sort((e,t)=>e.diff-t.diff);var l=o[0],s=a[0];return l&&o.filter(e=>.1>Math.abs(e.diff-l.diff)).forEach(e=>{i.push({orientation:"V",...e})}),s&&a.filter(e=>.1>Math.abs(e.diff-s.diff)).forEach(e=>{i.push({orientation:"H",...e})}),i}function aP(e,t,n){let r=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),i=n=>{n.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var i,o=ak(function(t){let n=e.current?.getStage();var i=[],o=[];return n.find(r).forEach(e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}}),{vertical:i,horizontal:o}}([n.target,...t.map(e=>e.current)]),{vertical:[{guide:(i=n.target).absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:i.absolutePosition().y,offset:0,snap:"center"}]});if(!o.length)return;!function(t){let n=e.current?.getLayer(),r=n?.children.find(e=>"line-guides"===e.name());t.forEach(e=>{if("H"===e.orientation){var t=new(c(R)).Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){var t=new(c(R)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}(o);let a=n.target.getAbsolutePosition(),l={...a};o.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}});let s=l.x-a.x,u=l.y-a.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){let e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+u})}},o=e=>{if(!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};c(w).useEffect(()=>{e.current&&(e.current.on("dragmove",i),e.current.on("dragend",o))},n)}function aT(e){let{x:t,y:n,width:r,height:i,rotation:o}=e.a,a=o*Math.PI/180,l={x:t+i/2*Math.cos(a+Math.PI/2),y:n+i/2*Math.sin(a+Math.PI/2)},s={x:l.x+r*Math.cos(a),y:l.y+r*Math.sin(a)};return{middleLeft:l,middleRight:s}}function aA(e,t,n){let r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),i=Math.atan2(t.y-e.y,t.x-e.x),o=180*i/Math.PI;return{x:e.x+Math.cos(i-Math.PI/2)*n/2,y:e.y+Math.sin(i-Math.PI/2)*n/2,width:r,height:n,rotation:o}}let aj=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),aN=j(({element:e,type:t})=>{let n=ic(e,e.a.color,"fill"),r=ic(e,e.a.color,"stroke"),i={strokeWidth:e.height,lineCap:"round",lineJoin:"round",...r,...n,opacity:e.a.opacity,hideInExport:!e.showInExport};return(0,v.jsxs)(v.Fragment,{children:["arrow"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],...i}),"triangle"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],closed:!0,...i}),"bar"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),0,2*e.height],closed:!0,...i}),"square"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),4*e.height,-(2*e.height),4*e.height,2*e.height,0,2*e.height],closed:!0,...i}),"circle"===t&&(0,v.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...i})]})}),aR=j(({element:e,store:t})=>{let n=c(w).useRef(null),r=c(w).useRef(null),i=c(w).useRef(null),o=e.selectable||"admin"===t.role,a=iH(),[l,s]=c(w).useState(!1),u=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=aT(e);aP(r,[n],[u]),aP(i,[n],[u]);let f=ic(e,e.a.color,"stroke");return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rZ,{ref:n,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map(t=>t*e.a.height),...f,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:o,draggable:a?e.draggable&&u:e.draggable,preventDefault:!a||u,hideInExport:!e.showInExport,onMouseEnter:()=>{s(!0)},onMouseLeave:()=>{s(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*n,width:e.width*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}}),(0,v.jsx)(rK,{x:d.x,y:d.y,rotation:e.rotation,hideInExport:!e.showInExport,children:(0,v.jsx)(aN,{element:e,type:e.startHead})}),(0,v.jsx)(rK,{x:h.x,y:h.y,rotation:e.rotation+180,children:(0,v.jsx)(aN,{element:e,type:e.endHead})}),l&&!u&&(0,v.jsx)(iz,{element:e}),u&&e.resizable&&(0,v.jsx)(r9,{selector:".page-abs-container",enabled:!0,children:(0,v.jsxs)(rK,{visible:u,children:[(0,v.jsx)(rX,{x:d.x,y:d.y,ref:r,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(t.target.position(),h,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),(0,v.jsx)(rX,{x:h.x,y:h.y,ref:i,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var w=g("8NFma"),x=g("2SBKn");function aL(){return document.createElement("canvas")}async function aI(e){return e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0?i8(i7(await i6(e))):e}let aM=e=>{let[t,n]=c(w).useState(e);return c(w).useEffect(()=>{(async()=>{let r=await aI(e);r!==t&&n(r)})()},[e]),t},aD=new window.Image;aD.src=i8(`
|
|
89
|
+
`),`<div style="white-space: unset; width: ${Math.round(e.width||100)}px; ${r}; font-size: ${e.fontSize}px; font-family: '${t}'; text-decoration: ${e.textDecoration}; text-align: ${e.align}; line-height: ${e.lineHeight}; letter-spacing: ${e.letterSpacing}rem; font-style: ${e.fontStyle}; font-weight: ${e.fontWeight}; -webkit-text-stroke: ${e.strokeWidth}px ${e.stroke}; paint-order: stroke fill;" contentEditable dir="${iK(iM(e.text))}">${e.text.replaceAll("\n","</br>")}</div>`}let aw=e=>{let t=e.fontSize;for(let n=1;n<50;n++){let n=ab({...e.toJSON(),fontSize:t},{fontFamily:e.fontFamily}),{height:r}=an(n),i=e.height&&r>e.height,o=function({html:e}){let t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000",t.style.whiteSpace="nowrap",t.style.visibility="hidden";let n=at();n.appendChild(t);let r=t.textContent,i=t.childNodes[0],o=r.split(/\s+/),a=!1;for(let e=0;e<o.length;e++){let n=o[e];if(i.textContent=n,a=i.scrollWidth>t.clientWidth)break}return n.removeChild(t),a}({html:n});if(!(i||o))break;t-=.5}return t},ax=/^((?!chrome|android).)*safari/i.test(navigator.userAgent),a_=j(({element:e,store:t})=>{let n=c(w).useRef(null),[r,i]=c(w).useState(),[o,a]=c(w).useState(!1),[l,s]=c(w).useState(!0),[u,d]=c(w).useState(!1),h=c(w).useRef(e.height),f=t.selectedElements.indexOf(e)>=0,p=e.fontSize/3,{textVerticalResizeEnabled:g}=iR,m=i0(e.fontFamily),[y]=iQ(t,e.fontFamily),b=e._editModeEnabled;ih(n);let _=y?e.fontFamily:m!==e.fontFamily?m:"Arial",E=ic(e).fill,S=ab(e,{fontFamily:_,color:E}),{width:C,height:O}=c(w).useMemo(()=>an(S),[S,e.width,y]);c(w).useEffect(()=>{if(!y)return;if(!e.height){e.set({height:O});return}let{textOverflow:n}=iR;if("change-font-size"!==n||o)"resize"!==n||(g&&e.height<O&&t.history.ignore(()=>{e.set({height:O})}),g||e.height===O||t.history.ignore(()=>{e.set({height:O})}));else{let n=aw(e);n!==e.fontSize?t.history.ignore(()=>{e.set({fontSize:n})}):e.height===O||(g&&e.height<O?t.history.ignore(()=>{e.set({height:O})}):g||t.history.ignore(()=>{e.set({height:O})}))}});let k=c(w).useRef(0),P=async()=>{k.current++;let n=k.current,r=iv(`text ${e.id}`);s(!0);let o=null,a=ax?5:1;for(let i=0;i<a;i++){if(o=await ar({html:S,width:e.width||1,height:e.height||O||1,fontFamily:_,padding:p,pixelRatio:t._elementsPixelRatio,font:t.fonts.find(e=>e.fontFamily===_)||iS.find(e=>e.fontFamily===_)}),n!==k.current){r();return}if(!function(e){let t=e.getContext("2d").getImageData(0,0,e.width,e.height).data;for(let e=0;e<t.length;e+=4)if(0!==t[e+3])return!0;return!1}(o)&&ax){await new Promise(e=>setTimeout(e,50*(i+1)));continue}}if(!o){r();return}i(o),s(!1),c(R).Util.requestAnimFrame(r)};c(w).useEffect(()=>{o||b||P()},[S,o,O,b,_,e.height,t._elementsPixelRatio]);let T=o||l;c(w).useEffect(()=>x.autorun(()=>{iD(n.current,e)}),[r,T,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let A=0;"middle"===e.verticalAlign&&(A=(e.height-O)/2),"bottom"===e.verticalAlign&&(A=e.height-O);let j=iJ({fontLoaded:y,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),N=iH();return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rX,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*j*.5),offsetY:e.backgroundPadding*(e.fontSize*j*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*j),height:e.a.height+e.backgroundPadding*(e.fontSize*j),cornerRadius:e.backgroundCornerRadius*(e.fontSize*j*.5)}),(0,v.jsx)(rX,{ref:n,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!T,draggable:N?e.draggable&&f:e.draggable,preventDefault:!N||f,opacity:b?0:e.a.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:()=>{e.contentEditable&&e.toggleEditMode(!0)},onDblTap:()=>{e.contentEditable&&e.toggleEditMode(!0)},onTransformStart:t=>{a(!0),h.current=e.height},onTransform:t=>{let n=t.target,r=(n.getStage()?.findOne("Transformer")).getActiveAnchor(),i=n.scaleX();if("middle-left"===r||"middle-right"===r){let t=n.scaleX(),r=Math.max(n.width()*t,e.fontSize);if(n.width(r),n.scaleX(1),iR.textVerticalResizeEnabled){let t=Math.max(O,h.current);e.set({height:t})}e.set({width:r,x:n.x(),y:n.y()})}else if("top-center"===r||"bottom-center"===r){let r=Math.max("resize"===iR.textOverflow?O:e.lineHeight*e.fontSize,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:r,rotation:n.rotation()})}else n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*i,width:n.width()*i,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*i})},onTransformEnd:t=>{a(!1),s(!0);let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*n,width:t.target.width()*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*n,shadowOffsetX:e.shadowOffsetX*n,shadowOffsetY:e.shadowOffsetY*n,strokeWidth:e.strokeWidth*n})}}),(0,v.jsx)(rQ,{ref:n,image:r,x:e.a.x,y:e.a.y,offsetX:p,offsetY:p-A,listening:!1,rotation:e.rotation,width:e.a.width+2*p,height:e.a.height+2*p,visible:!T,opacity:b?0:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),T&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{divProps:{style:{pointerEvents:"none"}},children:(0,v.jsx)(am,{dangerouslySetInnerHTML:{__html:S},style:{pointerEvents:"none",display:"inline-block"}})})}),b&&(0,v.jsx)(rK,{x:e.a.x,y:e.a.y,rotation:e.rotation,offsetY:-A,children:(0,v.jsx)(r8,{children:(0,v.jsx)(ay,{html:S,element:e,onChange:t=>{let n=iG({oldText:iM(e.text),newText:iM(t),element:e});e.set({text:t,fontSize:n})},onBlur:t=>{e.toggleEditMode(!1)}})})}),(f||u)&&(0,v.jsx)(iz,{element:e})]})});var w=(g("8NFma"),g("8NFma"));function aE(e){return e/180*Math.PI}function aS(e,t,n,r,i){let o=Math.sqrt(n*n+r*r);return{x:e+o*Math.cos(i+=Math.atan2(r,n)),y:t+o*Math.sin(i)}}function aC(e){let{x:t,y:n,width:r,height:i}=e,o=aE(e.rotation),a=aS(t,n,0,0,o),l=aS(t,n,r,0,o),s=aS(t,n,r,i,o),u=aS(t,n,0,i,o),c=Math.min(a.x,l.x,s.x,u.x),d=Math.min(a.y,l.y,s.y,u.y),h=Math.max(a.x,l.x,s.x,u.x),f=Math.max(a.y,l.y,s.y,u.y);return{x:c,y:d,width:h-c,height:f-d,minX:c,minY:d,maxX:h,maxY:f}}function aO(e){let t=e.map(e=>aC(e)),n=Math.min(...t.map(e=>e.minX)),r=Math.min(...t.map(e=>e.minY)),i=Math.max(...t.map(e=>e.maxX)),o=Math.max(...t.map(e=>e.maxY));return{x:n,y:r,width:i-n,height:o-r,minX:n,minY:r,maxX:i,maxY:o}}function ak(e,t){var n=[],r=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var r=Math.abs(e-t.guide);r<5&&n.push({lineGuide:e,diff:r,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e-t.guide);n<5&&r.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})})});var i=[];let o=n.sort((e,t)=>e.diff-t.diff),a=r.sort((e,t)=>e.diff-t.diff);var l=o[0],s=a[0];return l&&o.filter(e=>.1>Math.abs(e.diff-l.diff)).forEach(e=>{i.push({orientation:"V",...e})}),s&&a.filter(e=>.1>Math.abs(e.diff-s.diff)).forEach(e=>{i.push({orientation:"H",...e})}),i}function aP(e,t,n){let r=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),i=n=>{n.target.getLayer().children.find(e=>"line-guides"===e.name()).destroyChildren();var i,o=ak(function(t){let n=e.current?.getStage();var i=[],o=[];return n.find(r).forEach(e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}}),{vertical:i,horizontal:o}}([n.target,...t.map(e=>e.current)]),{vertical:[{guide:(i=n.target).absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:i.absolutePosition().y,offset:0,snap:"center"}]});if(!o.length)return;!function(t){let n=e.current?.getLayer(),r=n?.children.find(e=>"line-guides"===e.name());t.forEach(e=>{if("H"===e.orientation){var t=new(c(R)).Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t),n.batchDraw()}else if("V"===e.orientation){var t=new(c(R)).Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});r?.add(t)}})}(o);let a=n.target.getAbsolutePosition(),l={...a};o.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}});let s=l.x-a.x,u=l.y-a.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){let e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+u})}},o=e=>{if(!e.target)return;let t=e.target.getLayer();t.children.find(e=>"line-guides"===e.name()).destroyChildren(),t.batchDraw()};c(w).useEffect(()=>{e.current&&(e.current.on("dragmove",i),e.current.on("dragend",o))},n)}function aT(e){let{x:t,y:n,width:r,height:i,rotation:o}=e.a,a=o*Math.PI/180,l={x:t+i/2*Math.cos(a+Math.PI/2),y:n+i/2*Math.sin(a+Math.PI/2)},s={x:l.x+r*Math.cos(a),y:l.y+r*Math.sin(a)};return{middleLeft:l,middleRight:s}}function aA(e,t,n){let r=Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2)),i=Math.atan2(t.y-e.y,t.x-e.x),o=180*i/Math.PI;return{x:e.x+Math.cos(i-Math.PI/2)*n/2,y:e.y+Math.sin(i-Math.PI/2)*n/2,width:r,height:n,rotation:o}}let aj=(e,t)=>({offsetX:5/e,offsetY:5/e,width:10/e,height:10/e,fill:"white",stroke:"rgb(0, 161, 255)",strokeWidth:2,strokeScaleEnabled:!1,draggable:!0,dragDistance:0,onMouseEnter:e=>{e.target.getStage().container().style.cursor="crosshair"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onDragStart:e=>{t.history.startTransaction()},onDragEnd:e=>{t.history.endTransaction()}}),aN=j(({element:e,type:t})=>{let n=ic(e,e.a.color,"fill"),r=ic(e,e.a.color,"stroke"),i={strokeWidth:e.height,lineCap:"round",lineJoin:"round",...r,...n,opacity:e.a.opacity,hideInExport:!e.showInExport};return(0,v.jsxs)(v.Fragment,{children:["arrow"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],...i}),"triangle"===t&&(0,v.jsx)(rZ,{points:[3*e.height,-(2*e.height),0,0,3*e.height,2*e.height],closed:!0,...i}),"bar"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),0,2*e.height],closed:!0,...i}),"square"===t&&(0,v.jsx)(rZ,{points:[0,-(2*e.height),4*e.height,-(2*e.height),4*e.height,2*e.height,0,2*e.height],closed:!0,...i}),"circle"===t&&(0,v.jsx)("Circle",{x:2*e.height,y:0,radius:2*e.height,...i})]})}),aR=j(({element:e,store:t})=>{let n=c(w).useRef(null),r=c(w).useRef(null),i=c(w).useRef(null),o=e.selectable||"admin"===t.role,a=iH(),[l,s]=c(w).useState(!1),u=t.selectedElements.indexOf(e)>=0&&1===t.selectedElements.length,{middleLeft:d,middleRight:h}=aT(e);aP(r,[n],[u]),aP(i,[n],[u]);let f=ic(e,e.a.color,"stroke");return(0,v.jsxs)(c(w).Fragment,{children:[(0,v.jsx)(rZ,{ref:n,name:"element",id:e.id,x:e.a.x,y:e.a.y,points:[0,0,e.a.width,0],offsetY:-e.a.height/2,strokeWidth:e.a.height,hitStrokeWidth:Math.max(e.a.height,20),dash:e.dash.map(t=>t*e.a.height),...f,rotation:e.a.rotation,opacity:e.animated("opacity"),shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,listening:o,draggable:a?e.draggable&&u:e.draggable,preventDefault:!a||u,hideInExport:!e.showInExport,onMouseEnter:()=>{s(!0)},onMouseLeave:()=>{s(!1)},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onTransform:t=>{let n=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({height:e.height*n,width:e.width*n,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}}),(0,v.jsx)(rK,{x:d.x,y:d.y,rotation:e.rotation,hideInExport:!e.showInExport,children:(0,v.jsx)(aN,{element:e,type:e.startHead})}),(0,v.jsx)(rK,{x:h.x,y:h.y,rotation:e.rotation+180,children:(0,v.jsx)(aN,{element:e,type:e.endHead})}),l&&!u&&(0,v.jsx)(iz,{element:e}),u&&e.resizable&&(0,v.jsx)(r9,{selector:".page-abs-container",enabled:!0,children:(0,v.jsxs)(rK,{visible:u,children:[(0,v.jsx)(rX,{x:d.x,y:d.y,ref:r,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(t.target.position(),h,e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}}),(0,v.jsx)(rX,{x:h.x,y:h.y,ref:i,name:"line-anchor",...aj(t.scale,t),onDragMove:t=>{let n=aA(d,t.target.position(),e.height);e.set({x:n.x,y:n.y,width:n.width,rotation:n.rotation})}})]})})]})});var w=g("8NFma"),x=g("2SBKn");function aL(){return document.createElement("canvas")}async function aI(e){return e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0?i8(i7(await i6(e))):e}let aM=e=>{let[t,n]=c(w).useState(e);return c(w).useEffect(()=>{(async()=>{let r=await aI(e);r!==t&&n(r)})()},[e]),t},aD=new window.Image;aD.src=i8(`
|
|
90
90
|
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
91
91
|
<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"/>
|
|
92
92
|
<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/utils/html2canvas.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,o)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.htmlToCanvas=exports.detectSize=exports.isContentWrapping=exports.resetStyleContent=void 0;const rasterizeHTML=__importStar(require("rasterizehtml")),fonts_1=require("./fonts");exports.resetStyleContent="\n p {\n margin: 0;\n padding: 0;\n word-wrap: break-word; /* Required for Firefox */\n }\n ul, ol {\n list-style-position: outside;\n margin: 0;\n padding: 0;\n display: inline-block;\n text-align: left;\n }\n li {\n margin-left: 1.7em;\n padding-left: 0.5em; /* This should match the margin-left value */\n }\n /* Add resets */\n ul {\n list-style-type: disc;\n }\n ol {\n list-style-type: decimal;\n }\n \n";const resetStyle=`\n<style>\n html, body {\n padding: 0;\n margin: 0;\n }\n ${exports.resetStyleContent}\n</style>\n`;let hidden;const getHiddenElement=()=>(hidden||(hidden=document.createElement("div"),hidden.id="polotno-hidden-do-not-touch",hidden.style.overflow="hidden",hidden.style.position="relative",document.body.appendChild(hidden),hidden.innerHTML=`<style>#polotno-hidden-do-not-touch {${exports.resetStyleContent}}</style>`),hidden);function isContentWrapping({html:e}){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";const n=getHiddenElement();n.appendChild(t);const i=t.
|
|
1
|
+
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,i){void 0===i&&(i=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,i,o)}:function(e,t,n,i){void 0===i&&(i=n),e[i]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.htmlToCanvas=exports.detectSize=exports.isContentWrapping=exports.resetStyleContent=void 0;const rasterizeHTML=__importStar(require("rasterizehtml")),fonts_1=require("./fonts");exports.resetStyleContent="\n p {\n margin: 0;\n padding: 0;\n word-wrap: break-word; /* Required for Firefox */\n }\n ul, ol {\n list-style-position: outside;\n margin: 0;\n padding: 0;\n display: inline-block;\n text-align: left;\n }\n li {\n margin-left: 1.7em;\n padding-left: 0.5em; /* This should match the margin-left value */\n }\n /* Add resets */\n ul {\n list-style-type: disc;\n }\n ol {\n list-style-type: decimal;\n }\n \n";const resetStyle=`\n<style>\n html, body {\n padding: 0;\n margin: 0;\n }\n ${exports.resetStyleContent}\n</style>\n`;let hidden;const getHiddenElement=()=>(hidden||(hidden=document.createElement("div"),hidden.id="polotno-hidden-do-not-touch",hidden.style.overflow="hidden",hidden.style.position="relative",document.body.appendChild(hidden),hidden.innerHTML=`<style>#polotno-hidden-do-not-touch {${exports.resetStyleContent}}</style>`),hidden);function isContentWrapping({html:e}){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000",t.style.whiteSpace="nowrap",t.style.visibility="hidden";const n=getHiddenElement();n.appendChild(t);const i=t.textContent,o=t.childNodes[0],l=i.split(/\s+/);let s=!1;for(let e=0;e<l.length;e++){const n=l[e];if(o.textContent=n,s=o.scrollWidth>t.clientWidth,s)break}return n.removeChild(t),s}function detectSize(e){const t=document.createElement("div");t.innerHTML=e,t.style.display="inline-block",t.style.position="fixed",t.style.top="0px",t.style.left="0px",t.style.zIndex="1000";const n=getHiddenElement();n.appendChild(t);const i=t.getBoundingClientRect();return n.removeChild(t),{width:i.width,height:i.height}}async function htmlToCanvas({html:e,width:t,height:n,fontFamily:i,padding:o,font:l,pixelRatio:s}){const r=document.createElement("canvas");if("Arial"!==i&&!l){const t=(0,fonts_1.getGoogleFontsVariants)();e+=`<link type="text/css" href="https://fonts.googleapis.com/css?family=${i}:${t}" rel="stylesheet">`}if(l){const t=l.styles||(l.url?[{src:`url("${l.url}")`}]:[]);e+="<style>",t.forEach((t=>{e+=`\n @font-face {\n font-family: '${i}';\n src: ${t.src};\n font-style: ${t.fontStyle||"normal"};\n font-weight: ${t.fontWeight||"normal"};\n }\n `})),e+="</style>"}e+=resetStyle;const d=await rasterizeHTML.drawHTML(`<div style="padding: ${o}px;">${e}</div>`,r,{width:t+2*o,height:n+2*o});r.width=(t+2*o)*s,r.height=(n+2*o)*s;const a=r.getContext("2d");return null==a||a.drawImage(d.image,0,0,d.image.width*s,d.image.height*s),r}exports.isContentWrapping=isContentWrapping,exports.detectSize=detectSize,exports.htmlToCanvas=htmlToCanvas;
|