polotno 2.23.2 → 2.23.3
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/canvas/image-element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,i)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.setOuterImageCropTransformerStyle=exports.setInnerImageCropTransformerStyle=exports.useSizeFixer=void 0;const o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),s=i(require("konva")),c=require("react-konva-utils"),u=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen");function y(){return document.createElement("canvas")}function M(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t};const v={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(v,e)};const b={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(b,e)};const E=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(E(e.a.width*a,1,1e4)),l=Math.floor(E(e.a.height*a,1,1e4)),c=Math.min(i*a,d/2,l/2),u=Math.max(e.a.width/r.width,e.a.height/r.height)*a,g=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),w=o.default.useMemo((()=>{if(t&&t.width&&t.height){return m&&0===c&&!g?void 0:y()}}),[t,c,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,l-c),e.arc(d-c,l-c,c,0,Math.PI/2,!1),e.lineTo(c,l),e.arc(c,l-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=y();i.width=e.width,i.height=e.height;const o=Math.max(1,Math.floor(i.width*t)),n=Math.max(1,Math.floor(i.height*t));null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const h=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(h.data.buffer),c=h.width,u=t/o,g=r/n,f=Math.round(1/u),p=Math.round(1/g),m=f*p,w=0;w<h.height;w++){for(var x=0;x<c;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),s[x+w*c]=E<<24|b<<16|v<<8|M}}return h}(i.getContext("2d").getImageData(0,0,i.width,i.height),o,n,0,0,i.width,i.height);return i.width=o,i.height=n,null===(a=i.getContext("2d"))||void 0===a||a.putImageData(h,0,0),i}(t,u):t,i=g?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;e.drawImage(a,i.x,i.y,i.width,i.height,0,0,w.width,w.height)}),[w,e.a.width,e.a.height,r.x,r.y,r.width,r.height,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&s.default.Util.releaseCanvas(w)}),[w]),w||t};const S=y(),I=(0,n.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new s.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),O=(0,n.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=l.default;exports.setImageLoaderHook=e=>{C=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect((()=>i),[]),o.default.useLayoutEffect((()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,u.triggerLoadError)(n)}),[e])},exports.ImageElement=(0,n.observer)((({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),u=t.selectedShapes.indexOf(e)>=0&&e.selectable,[f,E]=(e=>{const[t,r]=o.default.useReducer((e=>e+1),0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);return n.current!==e.src&&(n.current=e.src,a.current="loading"),o.default.useEffect((()=>{if("svg"!==e.type){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await g.urlToString(e.src),n=g.fixSize(o),h=g.replaceColors(n,e.colorsReplace);t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[i.current,a.current]})(e),[R,_]=C(f,"anonymous"),T="svg"!==e.type||"loaded"===E?_:"loading";(0,exports.useImageLoader)(T,e.src,e.id);const X=e.page._exportingOrRendering?1:Math.max(1,t.scale),Y=t._elementsPixelRatio*X,k=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect((()=>{a.current=e||a.current}),[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:R,status:_,type:e.type}),D=((e,t,r)=>{const a=o.default.useMemo((()=>{var a,i;const{flipX:o,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,l=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||e.maskSrc;if(!o&&!n&&!l){return t}if(!t||!t.width||!t.height){return null}const s=y();let c=1;"svg"===e.type&&(c=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(s,Math.max(t.width*c,1),Math.max(t.height*c,1));let u=o?-s.width:0,g=n?-s.height:0;return null===(a=s.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=s.getContext("2d"))||void 0===i||i.drawImage(t,u,g,s.width,s.height),s}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&s.default.Util.releaseCanvas(a)}),[a]),a})(e,R||k,Y),W=((e,t)=>{const[r,a]=C(e.maskSrc,"anonymous"),i=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(i,e.maskSrc||"",e.id),o.default.useMemo((()=>{if(!r){return t}if(!t||!t.width||!t.height){return t}const a=y();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const i=a.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(r,e);return i.drawImage(r,o.x,o.y,o.width,o.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])})(e,D)||S;let{cropX:A,cropY:L,cropWidth:P,cropHeight:z}=e.a;"loaded"!==_&&(A=L=0,P=z=1);const q=W.width*P,H=W.height*z,j=e.a.width/e.a.height;let F,B;const N=q/H,U=e.stretchEnabled;U?(F=q,B=H):j>=N?(F=q,B=q/j):(F=H*j,B=H);const G={x:W.width*A,y:W.height*L,width:F,height:B},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,$=e.page._exportingOrRendering?1:Math.min(2,t.scale),J=t._elementsPixelRatio*$;let K=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=C(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return y()}}),[t,n]);return o.default.useLayoutEffect((()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=y(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=n.width*o,i.height=n.height*o,null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),s.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())}),[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,W,G,J,V,a||e._cropModeEnabled||"svg"===e.type,!0),J,[G,V,J]);const Q=Math.max(e.a.width/F,e.a.height/B);o.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.current&&e.toggleCropMode(!1)}function i(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",i),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",i),document.body.removeEventListener("touchstart",i),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),o.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(n.current,e),(0,h.autorun)((()=>{(0,m.applyFilter)(n.current,e)}),{delay:100})}}),[K,e.page._exportingOrRendering,a,P,z,e._cropModeEnabled]),o.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,m.applyFilter)(n.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect((()=>{(0,m.applyFilter)(n.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const Z=o.default.useRef(null),ee=o.default.useRef(null),te=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ee.current.nodes([Z.current]),te.current.nodes([l.current]))}),[e._cropModeEnabled]);var re=o.default.useRef(null),ae=o.default.useRef(0),ie=o.default.useRef(!1);const oe=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1,F/a),n=Math.min(1,B/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,s=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*W.width,y:-s*W.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:s,cropWidth:o,cropHeight:n})},ne=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},he="svg"===e.type&&k,de="loading"===_&&!he,le="failed"===_,se=!de&&!le,ce=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=se?e.a.opacity:0;(0,w.useFadeIn)(n,ue);const ge=e.selectable||"admin"===t.role,fe=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,de&&o.default.createElement(I,{element:e}),le&&o.default.createElement(O,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:K,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:ue,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:G,listening:ge,draggable:fe?e.draggable&&u:e.draggable,preventDefault:!fe||u,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:ne,onDblTap:ne,onTransformStart:()=>{i(!0),ce.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,i=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),o=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-F/W.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-B/W.height,s=Math.min(l,Math.max(0,e.cropY)),c=n.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&i<1&&ce.current.cropHeight>B/W.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&ce.current.cropWidth>F/W.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),U&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:s,x:a.x(),y:a.y(),width:a.width()*i,height:a.height()*o,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-s)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:F/W.width,cropHeight:B/W.height}),i(!1)}}),o.default.createElement(d.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:ue,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,V-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),o.default.createElement(d.Image,{listening:!1,image:K,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:Q,scaleY:Q},o.default.createElement(d.Image,{image:W,ref:l,opacity:.4,draggable:!0,x:-e.cropX*W.width,y:-e.cropY*W.height,onDragMove:oe,onTransform:oe,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const i=e.target;if(r&&!a&&!i.isDragging()&&ie.current&&(i.startDrag(),ie.current=!1),r&&a){s.default.hitOnDragEnabled=!0,i.isDragging()&&(ie.current=!0,i.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var o={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!re.current){return void(re.current=M(o,n))}var h=M(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);ae.current||(ae.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},c=d/ae.current;i.scaleX(c),i.scaleY(c);const m=t.point(h),w=t.point(re.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*c+u),y:Math.min(0,h.y-l.y*c+g)};i.position(f),ae.current=d,re.current=h,oe(e)}},onTouchEnd:e=>{ae.current=0,re.current=null,s.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:te},b)),o.default.createElement(d.Rect,{width:F,height:B,ref:Z,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*W.width-1e-9&&(t.target.x(-e.cropX*W.width),t.target.scaleX(1)),t.target.y()<-e.cropY*W.height-1e-9&&(t.target.y(-e.cropY*W.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/W.width)),a=Math.min(1,Math.max(0,t.target.y()/W.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/W.width),h=Math.min(1-a,o/W.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(i*Q,W.width*(1-r)*Q),height:Math.min(o*Q,W.height*(1-a)*Q)})}}),o.default.createElement(d.Transformer,Object.assign({ref:ee},v,{visible:e.resizable})))))}));
|
|
1
|
+
var e,t=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var i=Object.getOwnPropertyDescriptor(t,r);i&&!("get"in i?!t.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,i)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),r=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),a=this&&this.__importStar||(e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e){Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r)}return t},e(t)},function(a){if(a&&a.__esModule){return a}var i={};if(null!=a){for(var o=e(a),n=0;n<o.length;n++){"default"!==o[n]&&t(i,a,o[n])}}return r(i,a),i}),i=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageElement=exports.useImageLoader=exports.setImageLoaderHook=exports.useCornerRadiusAndCrop=exports.setOuterImageCropTransformerStyle=exports.setInnerImageCropTransformerStyle=exports.useSizeFixer=void 0;const o=i(require("react")),n=require("mobx-react-lite"),h=require("mobx"),d=require("react-konva"),l=i(require("use-image")),s=i(require("konva")),c=require("react-konva-utils"),u=require("../utils/loader"),g=a(require("../utils/svg")),f=require("../utils/flags"),p=require("../utils/canvas"),m=require("./apply-filters"),w=require("./use-fadein"),x=require("../utils/screen");function y(){return document.createElement("canvas")}function M(e,t){return{x:(e.x+t.x)/2,y:(e.y+t.y)/2}}exports.useSizeFixer=e=>{const[t,r]=o.default.useState(e);return o.default.useEffect((()=>{(async()=>{const a=await async function(e){if(!(e.indexOf("data:image/svg+xml")>=0||e.indexOf(".svg")>=0)){return e}const t=await g.urlToString(e),r=g.fixSize(t);return g.svgToURL(r)}(e);a!==t&&r(a)})()}),[e]),t};const v={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],keepRatio:!1,rotateEnabled:!1,anchorFill:"rgb(240, 240, 240)",anchorStrokeWidth:2,borderStrokeWidth:2};exports.setInnerImageCropTransformerStyle=e=>{Object.assign(v,e)};const b={boundBoxFunc:(e,t)=>t.width<5||t.height<5?e:t,anchorSize:20,enabledAnchors:["top-left","top-right","bottom-left","bottom-right"],rotateEnabled:!1,borderEnabled:!1,anchorCornerRadius:10,anchorStrokeWidth:2,borderStrokeWidth:2};exports.setOuterImageCropTransformerStyle=e=>{Object.assign(b,e)};const E=(e,t,r)=>Math.max(t,Math.min(r,e));exports.useCornerRadiusAndCrop=(e,t,r,a,i=0,n=!1,h=!0)=>{const d=Math.floor(E(e.a.width*a,1,1e4)),l=Math.floor(E(e.a.height*a,1,1e4)),c=Math.min(i*a,d/2,l/2),u=Math.max(e.a.width/r.width,e.a.height/r.height)*a,g=e.page._exportingOrRendering&&f.flags.imageDownScalingEnabled&&u<1&&!n,m=0===r.x&&0===r.y&&r.width===(null==t?void 0:t.width)&&r.height===(null==t?void 0:t.height),w=o.default.useMemo((()=>{if(t&&t.width&&t.height){return m&&0===c&&!g?void 0:y()}}),[t,c,g,m]);return o.default.useLayoutEffect((()=>{if(!w||!t){return}(0,p.trySetCanvasSize)(w,d,l);const e=w.getContext("2d");if(!e){return}c&&(e.beginPath(),e.moveTo(c,0),e.lineTo(d-c,0),e.arc(d-c,c,c,3*Math.PI/2,0,!1),e.lineTo(d,l-c),e.arc(d-c,l-c,c,0,Math.PI/2,!1),e.lineTo(c,l),e.arc(c,l-c,c,Math.PI/2,Math.PI,!1),e.lineTo(0,c),e.arc(c,c,c,Math.PI,3*Math.PI/2,!1),e.clip());const a=g?function(e,t){var r,a;const i=y();i.width=e.width,i.height=e.height;const o=Math.max(1,Math.floor(i.width*t)),n=Math.max(1,Math.floor(i.height*t));null===(r=i.getContext("2d"))||void 0===r||r.drawImage(e,0,0,i.width,i.height);const h=function(e,t,r,a,i,o,n){for(var h=new ImageData(t,r),d=new Int32Array(e.data.buffer),l=e.width,s=new Int32Array(h.data.buffer),c=h.width,u=t/o,g=r/n,f=Math.round(1/u),p=Math.round(1/g),m=f*p,w=0;w<h.height;w++){for(var x=0;x<c;x++){for(var y=0+Math.round(x/u)+(0+Math.round(w/g))*l,M=0,v=0,b=0,E=0,S=0;S<p;S++){for(var I=0;I<f;I++){var O=d[y+I+S*l];M+=O<<24>>>24,v+=O<<16>>>24,b+=O<<8>>>24,E+=O>>>24}}M=Math.round(M/m),v=Math.round(v/m),b=Math.round(b/m),E=Math.round(E/m),s[x+w*c]=E<<24|b<<16|v<<8|M}}return h}(i.getContext("2d").getImageData(0,0,i.width,i.height),o,n,0,0,i.width,i.height);return i.width=o,i.height=n,null===(a=i.getContext("2d"))||void 0===a||a.putImageData(h,0,0),i}(t,u):t,i=g?{x:Math.floor(r.x*u),y:Math.floor(r.y*u),width:Math.floor(r.width*u),height:Math.floor(r.height*u)}:r;e.drawImage(a,i.x,i.y,i.width,i.height,0,0,w.width,w.height)}),[w,e.a.width,e.a.height,r.x,r.y,r.width,r.height,i,a,n,e.page._exportingOrRendering,g]),o.default.useEffect((()=>()=>{w&&"CANVAS"===w.nodeName&&s.default.Util.releaseCanvas(w)}),[w]),w||t};const S=y(),I=(0,n.observer)((({element:e})=>{const t=Math.min(30,e.a.width/4,e.a.height/4),r=o.default.useRef(null);return o.default.useEffect((()=>{const e=r.current;if(!e){return}const t=new s.default.Animation((t=>{e.rotate(((null==t?void 0:t.timeDiff)||0)/2)}),e.getLayer());return t.start(),()=>{t.stop()}})),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(124, 173, 212, 0.8)"}),o.default.createElement(d.Arc,{ref:r,x:e.a.width/2,y:e.a.height/2,fill:"white",outerRadius:Math.abs(t),innerRadius:Math.max(1,t-5),angle:270}))})),O=(0,n.observer)((({element:e})=>{const t=Math.max(10,Math.min(30,e.a.width/25));return o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,listening:!1,opacity:e.a.opacity,hideInExport:!e.showInExport},o.default.createElement(d.Rect,{width:e.a.width,height:e.a.height,fill:"rgba(223, 102, 102, 0.8)"}),o.default.createElement(d.Text,{text:"Can not load the image...",fontSize:t,width:e.a.width,height:e.a.height,align:"center",fill:"white",verticalAlign:"middle",padding:5}))}));let C=l.default;exports.setImageLoaderHook=e=>{C=e},exports.useImageLoader=(e,t="",r="")=>{const a=o.default.useRef(),i=()=>{var e;null===(e=a.current)||void 0===e||e.call(a),a.current=void 0};o.default.useEffect((()=>i),[]),o.default.useLayoutEffect((()=>{const o=t.slice(0,200),n=`image with id ${r} url: ${o}`;"loading"!==e||a.current||(a.current=(0,u.incrementLoader)(n)),"loading"!==e&&i(),"failed"===e&&(0,u.triggerLoadError)(n)}),[e])},exports.ImageElement=(0,n.observer)((({element:e,store:t})=>{var r;const[a,i]=o.default.useState(!1),n=o.default.useRef(null),l=o.default.useRef(null),u=t.selectedShapes.indexOf(e)>=0&&e.selectable,[f,E]=(e=>{const[t,r]=o.default.useReducer((e=>e+1),0),a=o.default.useRef("loading"),i=o.default.useRef(e.src),n=o.default.useRef(e.src);return n.current!==e.src&&(n.current=e.src,a.current="loading"),o.default.useEffect((()=>{if("svg"!==e.type){return}if(!e.src){return}let t=!1;return(async()=>{a.current="loading",r();const o=await g.urlToString(e.src),n=g.fixSize(o),h=g.replaceColors(n,e.colorsReplace);t||(i.current=h,a.current="loaded",r())})(),()=>{t=!0}}),[e.src,JSON.stringify(e.colorsReplace)]),"svg"!==e.type?[e.src,"loaded"]:[i.current,a.current]})(e),[R,_]=C(f,"anonymous"),T="svg"!==e.type||"loaded"===E?_:"loading";(0,exports.useImageLoader)(T,e.src,e.id);const X=e.page._exportingOrRendering?1:Math.max(1,t.scale),Y=t._elementsPixelRatio*X,k=(({image:e,status:t,type:r})=>{const a=o.default.useRef();return o.default.useEffect((()=>{a.current=e||a.current}),[e]),"failed"!==t||"failed"!==t&&"svg"===r?a.current:void 0})({image:R,status:_,type:e.type}),D=((e,t,r)=>{const a=o.default.useMemo((()=>{var a,i;const{flipX:o,flipY:n}=e,h="svg"===e.type||e.src.indexOf("data:image/svg+xml")>=0||e.src.indexOf(".svg")>=0,d=navigator.userAgent.toLowerCase().indexOf("firefox")>-1,l=(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)||d)&&h||e.maskSrc;if(!o&&!n&&!l){return t}if(!t||!t.width||!t.height){return null}const s=y();let c=1;"svg"===e.type&&(c=Math.max(e.a.width/t.width*r,e.a.height/t.height*r)),(0,p.trySetCanvasSize)(s,Math.max(t.width*c,1),Math.max(t.height*c,1));let u=o?-s.width:0,g=n?-s.height:0;return null===(a=s.getContext("2d"))||void 0===a||a.scale(o?-1:1,n?-1:1),null===(i=s.getContext("2d"))||void 0===i||i.drawImage(t,u,g,s.width,s.height),s}),[e.maskSrc,e.flipX,e.flipY,t,e.a.width,e.a.height,r]);return o.default.useEffect((()=>()=>{a&&"CANVAS"===a.nodeName&&s.default.Util.releaseCanvas(a)}),[a]),a})(e,R||k,Y),W=((e,t)=>{const[r,a]=C(e.maskSrc,"anonymous"),i=e.maskSrc?a:"loaded";return(0,exports.useImageLoader)(i,e.maskSrc||"",e.id),o.default.useMemo((()=>{if(!r){return t}if(!t||!t.width||!t.height){return t}const a=y();a.width=Math.max(t.width,1),a.height=Math.max(t.height,1);const i=a.getContext("2d");if(!i){return t}i.drawImage(t,0,0),i.globalCompositeOperation="source-in";const o=function(e,t){const r=t.width/t.height;let a,i;return r>=e.width/e.height?(a=e.width,i=e.width/r):(a=e.height*r,i=e.height),{x:(e.width-a)/2,y:(e.height-i)/2,width:a,height:i}}(r,e);return i.drawImage(r,o.x,o.y,o.width,o.height,0,0,t.width,t.height),a}),[t,r,e.a.width,e.a.height])})(e,D)||S;let{cropX:A,cropY:L,cropWidth:P,cropHeight:z}=e.a;"loaded"!==_&&(A=L=0,P=z=1);const q=W.width*P,H=W.height*z,j=e.a.width/e.a.height;let F,B;const N=q/H,U=e.stretchEnabled;U?(F=q,B=H):j>=N?(F=q,B=q/j):(F=H*j,B=H);const G={x:W.width*A,y:W.height*L,width:F,height:B},V=null!==(r=e.cornerRadius)&&void 0!==r?r:0,$=e.page._exportingOrRendering?1:Math.min(2,t.scale),J=t._elementsPixelRatio*$;let K=((e,t,r,a)=>{const i=(0,exports.useSizeFixer)(e.clipSrc||""),[n,h]=C(i,"anonymous"),d=e.clipSrc?h:"loaded";(0,exports.useImageLoader)(d,e.clipSrc,e.id);const l=o.default.useMemo((()=>{if(t&&n){return y()}}),[t,n]);return o.default.useLayoutEffect((()=>{var a;if(!n){return}if(!t||!t.width||!t.height){return}if(!n||!n.width||!n.height){return}if(!l){return}const i=y(),o=Math.max(e.a.width/n.width*r,e.a.height/n.height*r);i.width=Math.max(n.width*o,1),i.height=Math.max(n.height*o,1),null===(a=i.getContext("2d"))||void 0===a||a.drawImage(n,0,0,i.width,i.height),l.width=Math.max(t.width,1),l.height=Math.max(t.height,1);const h=l.getContext("2d");h&&(h.save(),h.drawImage(i,0,0,t.width,t.height),s.default.Util.releaseCanvas(i),h.globalCompositeOperation="source-in",h.drawImage(t,0,0,l.width,l.height),h.restore())}),[l,t,n,e.a.width,e.a.height,r,...a]),e.clipSrc&&n?l:t})(e,(0,exports.useCornerRadiusAndCrop)(e,W,G,J,V,a||e._cropModeEnabled||"svg"===e.type,!0),J,[G,V,J]);const Q=Math.max(e.a.width/F,e.a.height/B);o.default.useEffect((()=>{var t;if(!e._cropModeEnabled){return}const r=null===(t=n.current)||void 0===t?void 0:t.getStage();function a(t){e._cropModeEnabled&&t.target!==l.current&&e.toggleCropMode(!1)}function i(t){e._cropModeEnabled&&t.target.parentNode!==r.content&&e.toggleCropMode(!1)}return document.body.addEventListener("click",i),null==r||r.on("click",a),null==r||r.on("tap",a),()=>{document.body.removeEventListener("click",i),document.body.removeEventListener("touchstart",i),null==r||r.off("click",a),null==r||r.off("click",a)}}),[e._cropModeEnabled]),o.default.useLayoutEffect((()=>{if(!a&&!e._cropModeEnabled){return(0,m.applyFilter)(n.current,e),(0,h.autorun)((()=>{(0,m.applyFilter)(n.current,e)}),{delay:100})}}),[K,e.page._exportingOrRendering,a,P,z,e._cropModeEnabled]),o.default.useLayoutEffect((()=>{var t;a||e._cropModeEnabled?null===(t=n.current)||void 0===t||t.clearCache():(0,m.applyFilter)(n.current,e)}),[a,e.a.width,e.a.height,e._cropModeEnabled]),o.default.useEffect((()=>{(0,m.applyFilter)(n.current,e)}),[e.shadowEnabled,e.shadowBlur,e.cornerRadius,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);const Z=o.default.useRef(null),ee=o.default.useRef(null),te=o.default.useRef(null);o.default.useLayoutEffect((()=>{e._cropModeEnabled&&(ee.current.nodes([Z.current]),te.current.nodes([l.current]))}),[e._cropModeEnabled]);var re=o.default.useRef(null),ae=o.default.useRef(0),ie=o.default.useRef(!1);const oe=t=>{var r;(null===(r=t.evt.touches)||void 0===r?void 0:r.length)>2&&t.target.stopDrag(),Math.round(t.target.x())>0&&(t.target.x(0),t.target.scaleX(1)),Math.round(t.target.y())>0&&(t.target.y(0),t.target.scaleY(1));const a=t.target.width()*t.target.scaleX(),i=t.target.height()*t.target.scaleY(),o=Math.min(1,F/a),n=Math.min(1,B/i),h=1-o,d=Math.min(h,Math.max(0,Math.round(-t.target.x())/a)),l=1-n,s=Math.min(l,Math.max(0,Math.round(-t.target.y())/i));t.target.setAttrs({x:-d*W.width,y:-s*W.height,scaleX:1,scaleY:1}),e.set({cropX:d,cropY:s,cropWidth:o,cropHeight:n})},ne=()=>{"svg"!==e.type&&e.contentEditable&&(e.stretchEnabled||setTimeout((()=>{e.toggleCropMode(!0)})))},he="svg"===e.type&&k,de="loading"===_&&!he,le="failed"===_,se=!de&&!le,ce=o.default.useRef({cropX:0,cropY:0,cropWidth:0,cropHeight:0}),ue=se?e.a.opacity:0;(0,w.useFadeIn)(n,ue);const ge=e.selectable||"admin"===t.role,fe=(0,x.isTouchDevice)();return o.default.createElement(o.default.Fragment,null,de&&o.default.createElement(I,{element:e}),le&&o.default.createElement(O,{element:e}),o.default.createElement(d.Image,{ref:n,name:"element",id:e.id,image:K,x:e.a.x,y:e.a.y,width:e.a.width||1,height:e.a.height||1,rotation:e.a.rotation,opacity:ue,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,customCrop:G,listening:ge,draggable:fe?e.draggable&&u:e.draggable,preventDefault:!fe||u,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDblClick:ne,onDblTap:ne,onTransformStart:()=>{i(!0),ce.current={cropX:e.cropX,cropY:e.cropY,cropWidth:e.cropWidth,cropHeight:e.cropHeight}},onTransform:t=>{var r;const a=t.currentTarget,i=Math.abs(a.scaleX()-1)<1e-7?1:a.scaleX(),o=Math.abs(a.scaleY()-1)<1e-7?1:a.scaleY();a.scaleX(1),a.scaleY(1);const n=null===(r=t.target.getStage())||void 0===r?void 0:r.findOne("Transformer"),h=1-F/W.width,d=Math.min(h,Math.max(0,e.cropX)),l=1-B/W.height,s=Math.min(l,Math.max(0,e.cropY)),c=n.getActiveAnchor(),u=!(c.indexOf("middle")>=0||c.indexOf("center")>=0),g=!u&&i<1&&ce.current.cropHeight>B/W.height;let f=u?e.cropWidth:e.cropWidth*i;g&&(f=e.cropWidth);const p=!u&&o<1&&ce.current.cropWidth>F/W.width;let m=u?e.cropHeight:e.cropHeight*o;p&&(m=e.cropHeight),U&&(f=e.cropWidth,m=e.cropHeight),e.set({cropX:d,cropY:s,x:a.x(),y:a.y(),width:a.width()*i,height:a.height()*o,rotation:t.target.rotation(),cropWidth:Math.min(f,1-d),cropHeight:Math.min(m,1-s)})},onTransformEnd:t=>{const r=t.currentTarget;e.set({width:r.width(),height:r.height(),x:r.x(),y:r.y(),rotation:t.target.rotation(),cropWidth:F/W.width,cropHeight:B/W.height}),i(!1)}}),o.default.createElement(d.Rect,{x:e.x,y:e.y,width:Math.max(e.a.width-e.borderSize,0),height:Math.max(e.a.height-e.borderSize,0),opacity:ue,offsetX:-e.borderSize/2,offsetY:-e.borderSize/2,stroke:e.borderColor,strokeWidth:e.borderSize,listening:!1,visible:!!e.borderSize,rotation:e.rotation,cornerRadius:Math.max(0,V-e.borderSize),hideInExport:!e.showInExport}),e._cropModeEnabled&&o.default.createElement(c.Portal,{selector:".page-abs-container",enabled:!0},o.default.createElement(d.Rect,{x:-window.innerWidth/t.scale,y:-window.innerWidth/t.scale,width:window.innerWidth/t.scale*3,height:window.innerWidth/t.scale*3,fill:"rgba(0,0,0,0.3)"}),o.default.createElement(d.Image,{listening:!1,image:K,x:e.x,y:e.y,width:e.a.width,height:e.a.height,rotation:e.rotation,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur}),o.default.createElement(d.Group,{x:e.x,y:e.y,rotation:e.rotation,scaleX:Q,scaleY:Q},o.default.createElement(d.Image,{image:W,ref:l,opacity:.4,draggable:!0,x:-e.cropX*W.width,y:-e.cropY*W.height,onDragMove:oe,onTransform:oe,onTouchMove:e=>{e.evt.preventDefault();const t=e.target.getStage().getPointersPositions();var r=t[0],a=t[1];const i=e.target;if(r&&!a&&!i.isDragging()&&ie.current&&(i.startDrag(),ie.current=!1),r&&a){s.default.hitOnDragEnabled=!0,i.isDragging()&&(ie.current=!0,i.stopDrag());const t=e.target.getAbsoluteTransform().copy();t.invert();var o={x:r.x,y:r.y},n={x:a.x,y:a.y};if(!re.current){return void(re.current=M(o,n))}var h=M(o,n),d=function(e,t){return Math.sqrt(Math.pow(t.x-e.x,2)+Math.pow(t.y-e.y,2))}(o,n);ae.current||(ae.current=d);const p=i.position();var l={x:h.x-p.x,y:h.y-p.y},c=d/ae.current;i.scaleX(c),i.scaleY(c);const m=t.point(h),w=t.point(re.current);var u=m.x-w.x,g=m.y-w.y,f={x:Math.min(0,h.x-l.x*c+u),y:Math.min(0,h.y-l.y*c+g)};i.position(f),ae.current=d,re.current=h,oe(e)}},onTouchEnd:e=>{ae.current=0,re.current=null,s.default.hitOnDragEnabled=!1}}),o.default.createElement(d.Transformer,Object.assign({ref:te},b)),o.default.createElement(d.Rect,{width:F,height:B,ref:Z,listening:!1,onTransform:t=>{t.target.x()<-e.cropX*W.width-1e-9&&(t.target.x(-e.cropX*W.width),t.target.scaleX(1)),t.target.y()<-e.cropY*W.height-1e-9&&(t.target.y(-e.cropY*W.height),t.target.scaleY(1));const r=Math.min(1,Math.max(0,e.cropX+t.target.x()/W.width)),a=Math.min(1,Math.max(0,t.target.y()/W.height+e.cropY)),i=t.target.width()*t.target.scaleX(),o=t.target.height()*t.target.scaleY(),n=Math.min(1-r,i/W.width),h=Math.min(1-a,o/W.height),d=t.target.getAbsolutePosition(t.target.getParent().getParent());t.target.scale({x:1,y:1}),t.target.position({x:0,y:0}),e.set({x:d.x,y:d.y,cropX:r,cropY:a,cropWidth:n,cropHeight:h,width:Math.min(i*Q,W.width*(1-r)*Q),height:Math.min(o*Q,W.height*(1-a)*Q)})}}),o.default.createElement(d.Transformer,Object.assign({ref:ee},v,{visible:e.resizable})))))}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const t=e(require("react")),r=require("mobx-react-lite"),n=e(require("./page")),a=require("./rules"),o=require("./audio"),l=require("./hotkeys"),i=require("../utils/l10n"),s=({store:e})=>t.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},t.default.createElement("p",null,(0,i.t)("workspace.noPages")),t.default.createElement("button",{onClick:()=>{e.addPage()}},(0,i.t)("workspace.addPage"))),u=({width:e,height:r,xPadding:n,yPadding:a,backgroundColor:o})=>t.default.createElement("div",{style:{width:e+"px",height:r+"px",backgroundColor:o,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:a+"px",paddingBottom:a+"px"}},t.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));exports.WorkspaceCanvas=(0,r.observer)((({store:e,pageControlsEnabled:r,backgroundColor:i,pageBorderColor:c,activePageBorderColor:d,bleedColor:f,components:h,onKeyDown:g,paddingX:p,paddingY:m,altCloneEnabled:v=!0,visiblePagesOffset:w,renderOnlyActivePage:y})=>{var E;const b=null!=p?p:20,x=null!=m?m:55,[k,P]=t.default.useState({width:100,height:100}),T=t.default.useRef(k),C=t.default.useRef(null),M=t.default.useRef(null),R=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,_=Math.max(...e.pages.map((e=>e.computedWidth))),L=Math.max(...e.pages.map((e=>e.computedHeight))),O=(null===(E=e.activePage)||void 0===E?void 0:E.computedHeight)||0,W=_+2*R,q=(y?O:L)+2*R,S=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise((e=>setTimeout(e,50))),null===C.current){return}const r=C.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(C.current));const n=M.current.clientWidth||r.width,a={width:n,height:r.height};(T.current.width!==a.width||T.current.height!==a.height)&&(P(a),T.current=a);const o=(n-2*b)/W,l=e.pages.length>1?3.1:2,i=(r.height-x*l)/q,s=Math.max(Math.min(o,i),.01);e.scaleToFit!==s&&(e.setScale(s),e._setScaleToFit(s))};t.default.useLayoutEffect((()=>{S({skipTimeout:!0})}),[]),t.default.useEffect((()=>{S()}),[W,q]),t.default.useEffect((()=>{e.__()}),[]),t.default.useEffect((()=>{const e=C.current;if(window.ResizeObserver){const t=new ResizeObserver((()=>{S({skipTimeout:!0})}));return t.observe(e),()=>t.unobserve(e)}{const e=setInterval((()=>{S({skipTimeout:!0})}),100);return()=>clearInterval(e)}}),[W,q]);const F=Math.max(b,(k.width-W*e.scale)/2),z=y?1:e.pages.length,B=q*e.scale*z,H=Math.max(x,(k.height-B)/z/2);t.default.useEffect((()=>{const t=t=>{(g||l.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),t.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(5,e.scaleToFit),l=Math.min(.1,e.scaleToFit),i=.03,s=(r=t.deltaY<0?e.scale*(1+i):e.scale/(1+i),n=l,a=o,Math.max(n,Math.min(a,r)));e.setScale(s)}else{var r,n,a}};return null===(t=M.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=M.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const N=t.default.useRef(!1);((e,r,n,a,o,l)=>{const i=t.default.useRef({width:r,height:n}),s=t.default.useRef({top:0,left:0}),u=t.default.useRef(!1),c=t.default.useRef(o.pages.length);u.current=c.current!==o.pages.length,c.current=o.pages.length,t.default.useEffect((()=>{const t=e.current,r=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),t.default.useLayoutEffect((()=>{if(!e.current){return}if(u.current){return}const t=e.current,a=(s.current.left+t.offsetWidth/2)/i.current.width,o=(s.current.top+t.offsetHeight/2)/i.current.height;l.current=!0,t.scrollLeft=a*r-t.offsetWidth/2,t.scrollTop=o*n-t.offsetHeight/2,i.current={width:r,height:n}}),[a,r,n])})(M,W*e.scale+2*F,q*e.scale+2*H,e.scale,e,N);const{handleScroll:A}=((e,r,n,a,o,l)=>{const i=t.default.useRef(!1),s=t.default.useRef(null),u=t.default.useRef(!1);t.default.useEffect((()=>{const t=e.current,r=()=>{o.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=n.pages.indexOf(n.activePage);return t.default.useLayoutEffect((()=>{if(l){return}if(!n.activePage){return}if(!e.current){return}if(i.current){return}const t=e.current,a=n.pages.indexOf(n.activePage)*r;let o=()=>{};return(Math.abs(a-t.scrollTop)>.5*r||u.current)&&(u.current=!0,o=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const a=e.scrollTop,o=t-a;let l=0,i=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(i){return}l+=20;const t=u(l,a,o,r);e.scrollTop=t,l<r?setTimeout(s,20):n()},u=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return s(),()=>{i=!0}})({element:t,scrollTop:a,onFinish:()=>{u.current=!1},duration:n.isPlaying?0:300})),o}),[n.activePage,c,n.isPlaying,l]),{handleScroll:e=>{if(l){return}if(u.current){return}i.current=!0,clearTimeout(s.current),s.current=setTimeout((()=>{i.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,o=Math.floor((r+a.height/3)/t),c=n.pages[o];c&&n.activePage!==c&&c.select()}}})(M,q*e.scale+2*H,e,k,N,y),D=k.width>=W*e.scale+2*F,I=i||"rgba(232, 232, 232, 0.9)",K=e.pages.indexOf(e.activePage),Y=(null==h?void 0:h.NoPages)||s,j=null!=w?w:Math.min(3,Math.max(1,Math.ceil(k.height/2/(q*e.scale))));return t.default.createElement("div",{ref:C,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:I,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},t.default.createElement("div",{ref:M,onScroll:A,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:D?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((a,o)=>{const l=a===e.activePage;if(y&&!l&&!a._exportingOrRendering&&!a._forceMount){return null}if(!(Math.abs(o-K)<=j||a._exportingOrRendering||a._forceMount)){return t.default.createElement(u,{key:a.id,width:W*e.scale+2*F,height:q*e.scale+2*H,backgroundColor:I,xPadding:F,yPadding:H})}const i=t.default.createElement(n.default,{key:a.id,page:a,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H,store:e,pageControlsEnabled:r,backColor:I,pageBorderColor:c||"lightgrey",activePageBorderColor:d||"rgb(0, 161, 255)",altCloneEnabled:v,bleedColor:f||"rgba(255, 0, 0, 0.1)",components:h,viewportSize:k});return(a._exportingOrRendering||a._forceMount)&&!l&&y?t.default.createElement("div",{style:{display:"none"},key:a.id},i):i})),e.rulesVisible&&t.default.createElement(a.TopRules,{store:e,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H}),0===e.pages.length&&t.default.createElement(Y,{store:e}),e.audios.map((r=>t.default.createElement(o.AudioElement,{key:r.id,audio:r,store:e})))))})),exports.default=exports.WorkspaceCanvas;
|
|
1
|
+
var e=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.WorkspaceCanvas=void 0;const t=e(require("react")),r=require("mobx-react-lite"),n=e(require("./page")),a=require("./rules"),o=require("./audio"),l=require("./hotkeys"),i=require("../utils/l10n"),s=({store:e})=>t.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},t.default.createElement("p",null,(0,i.t)("workspace.noPages")),t.default.createElement("button",{onClick:()=>{e.addPage()}},(0,i.t)("workspace.addPage"))),u=({width:e,height:r,xPadding:n,yPadding:a,backgroundColor:o})=>t.default.createElement("div",{style:{width:e+"px",height:r+"px",backgroundColor:o,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:a+"px",paddingBottom:a+"px"}},t.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}}));exports.WorkspaceCanvas=(0,r.observer)((({store:e,pageControlsEnabled:r,backgroundColor:i,pageBorderColor:c,activePageBorderColor:d,bleedColor:f,components:h,onKeyDown:g,paddingX:p,paddingY:m,altCloneEnabled:v=!0,visiblePagesOffset:w,renderOnlyActivePage:y})=>{var E;const b=null!=p?p:20,x=null!=m?m:55,[k,P]=t.default.useState({width:100,height:100}),T=t.default.useRef(k),C=t.default.useRef(null),M=t.default.useRef(null),R=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,_=Math.max(...e.pages.map((e=>e.computedWidth))),L=Math.max(...e.pages.map((e=>e.computedHeight))),O=(null===(E=e.activePage)||void 0===E?void 0:E.computedHeight)||0,W=_+2*R,q=(y?O:L)+2*R,S=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise((e=>setTimeout(e,50))),null===C.current){return}const r=C.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(C.current));const n=M.current.clientWidth||r.width,a={width:n,height:r.height};(T.current.width!==a.width||T.current.height!==a.height)&&(P(a),T.current=a);const o=(n-2*b)/W,l=e.pages.length>1?3.1:2,i=(r.height-x*l)/q,s=e.pages.length?Math.max(Math.min(o,i),.01):1;e.scaleToFit!==s&&(e.setScale(s),e._setScaleToFit(s))};t.default.useLayoutEffect((()=>{S({skipTimeout:!0})}),[]),t.default.useEffect((()=>{S()}),[W,q]),t.default.useEffect((()=>{e.__()}),[]),t.default.useEffect((()=>{const e=C.current;if(window.ResizeObserver){const t=new ResizeObserver((()=>{S({skipTimeout:!0})}));return t.observe(e),()=>t.unobserve(e)}{const e=setInterval((()=>{S({skipTimeout:!0})}),100);return()=>clearInterval(e)}}),[W,q]);const F=Math.max(b,(k.width-W*e.scale)/2),z=y?1:e.pages.length,B=q*e.scale*z,H=Math.max(x,(k.height-B)/z/2);t.default.useEffect((()=>{const t=t=>{(g||l.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),t.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(5,e.scaleToFit),l=Math.min(.1,e.scaleToFit),i=.03,s=(r=t.deltaY<0?e.scale*(1+i):e.scale/(1+i),n=l,a=o,Math.max(n,Math.min(a,r)));e.setScale(s)}else{var r,n,a}};return null===(t=M.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=M.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const N=t.default.useRef(!1);((e,r,n,a,o,l)=>{const i=t.default.useRef({width:r,height:n}),s=t.default.useRef({top:0,left:0}),u=t.default.useRef(!1),c=t.default.useRef(o.pages.length);u.current=c.current!==o.pages.length,c.current=o.pages.length,t.default.useEffect((()=>{const t=e.current,r=e=>{s.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),t.default.useLayoutEffect((()=>{if(!e.current){return}if(u.current){return}const t=e.current,a=(s.current.left+t.offsetWidth/2)/i.current.width,o=(s.current.top+t.offsetHeight/2)/i.current.height;l.current=!0,t.scrollLeft=a*r-t.offsetWidth/2,t.scrollTop=o*n-t.offsetHeight/2,i.current={width:r,height:n}}),[a,r,n])})(M,W*e.scale+2*F,q*e.scale+2*H,e.scale,e,N);const{handleScroll:A}=((e,r,n,a,o,l)=>{const i=t.default.useRef(!1),s=t.default.useRef(null),u=t.default.useRef(!1);t.default.useEffect((()=>{const t=e.current,r=()=>{o.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=n.pages.indexOf(n.activePage);return t.default.useLayoutEffect((()=>{if(l){return}if(!n.activePage){return}if(!e.current){return}if(i.current){return}const t=e.current,a=n.pages.indexOf(n.activePage)*r;let o=()=>{};return(Math.abs(a-t.scrollTop)>.5*r||u.current)&&(u.current=!0,o=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const a=e.scrollTop,o=t-a;let l=0,i=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(i){return}l+=20;const t=u(l,a,o,r);e.scrollTop=t,l<r?setTimeout(s,20):n()},u=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return s(),()=>{i=!0}})({element:t,scrollTop:a,onFinish:()=>{u.current=!1},duration:n.isPlaying?0:300})),o}),[n.activePage,c,n.isPlaying,l]),{handleScroll:e=>{if(l){return}if(u.current){return}i.current=!0,clearTimeout(s.current),s.current=setTimeout((()=>{i.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,o=Math.floor((r+a.height/3)/t),c=n.pages[o];c&&n.activePage!==c&&c.select()}}})(M,q*e.scale+2*H,e,k,N,y),D=k.width>=W*e.scale+2*F,I=i||"rgba(232, 232, 232, 0.9)",K=e.pages.indexOf(e.activePage),Y=(null==h?void 0:h.NoPages)||s,j=null!=w?w:Math.min(3,Math.max(1,Math.ceil(k.height/2/(q*e.scale))));return t.default.createElement("div",{ref:C,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:I,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},t.default.createElement("div",{ref:M,onScroll:A,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:D?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((a,o)=>{const l=a===e.activePage;if(y&&!l&&!a._exportingOrRendering&&!a._forceMount){return null}if(!(Math.abs(o-K)<=j||a._exportingOrRendering||a._forceMount)){return t.default.createElement(u,{key:a.id,width:W*e.scale+2*F,height:q*e.scale+2*H,backgroundColor:I,xPadding:F,yPadding:H})}const i=t.default.createElement(n.default,{key:a.id,page:a,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H,store:e,pageControlsEnabled:r,backColor:I,pageBorderColor:c||"lightgrey",activePageBorderColor:d||"rgb(0, 161, 255)",altCloneEnabled:v,bleedColor:f||"rgba(255, 0, 0, 0.1)",components:h,viewportSize:k});return(a._exportingOrRendering||a._forceMount)&&!l&&y?t.default.createElement("div",{style:{display:"none"},key:a.id},i):i})),e.rulesVisible&&t.default.createElement(a.TopRules,{store:e,xPadding:F,yPadding:H,width:W*e.scale+2*F,height:q*e.scale+2*H}),0===e.pages.length&&t.default.createElement(Y,{store:e}),e.audios.map((r=>t.default.createElement(o.AudioElement,{key:r.id,audio:r,store:e})))))})),exports.default=exports.WorkspaceCanvas;
|