polotno 2.19.0 → 2.19.1
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/model/shape-model.js +1 -1
- package/model/svg-model.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +1 -1
package/model/shape-model.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.ShapeFilter=exports.getDiff=exports.Animation=void 0;const mobx_state_tree_1=require("mobx-state-tree"),animations_1=require("../utils/animations"),mobx_1=require("mobx"),node_model_1=require("./node-model");exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:mobx_state_tree_1.types.frozen({})});const getDiff=(e,t)=>{const i={};for(const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shape=exports.ShapeFilter=exports.getDiff=exports.Animation=void 0;const mobx_state_tree_1=require("mobx-state-tree"),animations_1=require("../utils/animations"),mobx_1=require("mobx"),node_model_1=require("./node-model");exports.Animation=mobx_state_tree_1.types.model("Animation",{delay:0,duration:500,enabled:!0,type:mobx_state_tree_1.types.enumeration("Type",["enter","exit","loop"]),name:"none",data:mobx_state_tree_1.types.frozen({})});const getDiff=(e,t)=>{const i={};for(const a in t)if("number"==typeof e[a]&&"number"==typeof t[a]){const n=t[a]-e[a];0!==n&&(i[a]=n)}return i};exports.getDiff=getDiff,exports.ShapeFilter=mobx_state_tree_1.types.model("ShapeFilter",{intensity:1}),exports.Shape=node_model_1.Node.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:mobx_state_tree_1.types.array(exports.Animation),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:mobx_state_tree_1.types.map(exports.ShapeFilter),shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot((e=>{const t=Object.assign(Object.assign({},e),{x:e.x||0,y:e.y||0,filters:Array.isArray(e.filters)?{}:e.filters});return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t})).views((e=>{const t=(0,mobx_1.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),i=(0,mobx_1.action)((e=>{Object.assign(t,e)})),a=(0,mobx_1.action)((e=>{for(const i in e)"number"==typeof t[i]&&(t[i]=t[i]+e[i])}));return{get a(){const{currentTime:n}=e.store;if(i({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===n)return t;const o=n-e.page.startTime;if(o>e.page.duration)return t;if(o<0)return t;const s=e.store.animatedElementsIds;if(s.length&&!s.includes(e.id))return t;const r=e.animations.find((e=>"enter"===e.type)),l=(null==r?void 0:r.enabled)&&o<r.delay;l&&i({opacity:0});const d=(null==r?void 0:r.enabled)&&o>=r.delay&&o<=r.delay+r.duration;if(d){const t=o-r.delay,i=(0,animations_1.animate)({element:e,animation:r,dTime:t}),n=(0,exports.getDiff)(e,i);a(n)}const p=e.animations.find((e=>"exit"===e.type));if(!l&&!d&&(null==p?void 0:p.enabled)&&o>=e.page.duration-p.duration-p.delay&&o<=e.page.duration-p.delay){const t=o-(e.page.duration-p.duration-p.delay),i=(0,animations_1.animate)({element:e,animation:p,dTime:t}),n=(0,exports.getDiff)(e,i);a(n)}(null==p?void 0:p.enabled)&&o>=e.page.duration-p.delay&&i({opacity:0});const m=e.animations.find((e=>"loop"===e.type));if(null==m?void 0:m.enabled){const t=o,i=(0,animations_1.animate)({element:e,animation:m,dTime:t}),n=(0,exports.getDiff)(e,i);a(n)}return t},animated:t=>e.a[t]}})).actions((e=>({setAnimation(t,i){const a=e.animations.find((e=>e.type===t));a?Object.assign(a,i):e.animations.push(Object.assign({type:t},i))},setFilter(t,i){e.filters.clear(),0!==i&&e.filters.set(t,{intensity:i})}})));
|
package/model/svg-model.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SVGElement=void 0;const mobx_state_tree_1=require("mobx-state-tree"),shape_model_1=require("./shape-model");exports.SVGElement=shape_model_1.Shape.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:mobx_state_tree_1.types.map(mobx_state_tree_1.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src||e.svgSource}))).actions((e=>({replaceColor(r,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SVGElement=void 0;const mobx_state_tree_1=require("mobx-state-tree"),shape_model_1=require("./shape-model");exports.SVGElement=shape_model_1.Shape.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:mobx_state_tree_1.types.map(mobx_state_tree_1.types.string)}).preProcessSnapshot((e=>Object.assign(Object.assign({},e),{src:e.src||e.svgSource,colorsReplace:Array.isArray(e.colorsReplace)?{}:e.colorsReplace}))).actions((e=>({replaceColor(r,o){e.colorsReplace.set(r,o)}})));
|
package/package.json
CHANGED
package/polotno.bundle.js
CHANGED
|
@@ -185,7 +185,7 @@ For more info see: https://github.com/konvajs/react-konva/issues/194
|
|
|
185
185
|
font-style: ${e.fontStyle||"normal"};
|
|
186
186
|
font-weight: ${e.fontWeight||"normal"};
|
|
187
187
|
}
|
|
188
|
-
`}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),ij[e.fontFamily]=!0}(n)):function(e){if(iA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:${iN}`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),iA[e]=!0}(t),Promise.all(r.map(e=>iT(t,e.fontStyle,e.fontWeight)))},validate:e=>sN.validate(e,[{path:"",type:sN}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))})),sj=(0,iq.types).model("Node",{id:iq.types.identifier,type:"none",name:"",opacity:1,custom:(0,iq.types).frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e)null===e[t]&&(e[t]=void 0);return e}).postProcessSnapshot(e=>{let t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n}).views(e=>({get locked(){return!e.draggable&&!e.contentEditable&&!e.styleEditable&&!e.resizable},get page(){return(0,iq.getParentOfType)(e,sP)},get store(){return(0,iq.getParentOfType)(e,sN)},get top(){let t=e;for(;;){if(!(0,iq.hasParentOfType)(t,sY))return t;t=(0,iq.getParentOfType)(t,sY)}},get parent(){if((0,iq.hasParentOfType)(e,sY))return(0,iq.getParentOfType)(e,sY);if((0,iq.hasParentOfType)(e,sP))return(0,iq.getParentOfType)(e,sP);if((0,iq.hasParentOfType)(e,sN))return(0,iq.getParentOfType)(e,sN);return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>({...(0,iq.getSnapshot)(e)})})).actions(e=>({clone(t={},{skipSelect:n=!1}={}){let r=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||l2(10),sW(r,e=>{e.id=l2(10)}),Object.assign(r,t),e.page.addElement(r,{skipSelect:n})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));var iq=v("58B0H");let sR={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}},sL={fade:({dTime:e,element:t,animation:n})=>{let r=e/n.duration;return"enter"===n.type?{opacity:r*t.opacity}:{opacity:(1-r)*t.opacity}},rotate:({dTime:e,element:t,animation:n})=>{let r=n.duration;return function(e,t){let n=function(e){let t=aR(e.rotation||0);return{x:e.x+e.width/2*Math.cos(t)+e.height/2*Math.sin(-t),y:e.y+e.height/2*Math.cos(t)+e.width/2*Math.sin(t)}}(e);return function(e,t,n){let r=aR(t),i=n.x+(e.x-n.x)*Math.cos(r)-(e.y-n.y)*Math.sin(r),o=n.y+(e.x-n.x)*Math.sin(r)+(e.y-n.y)*Math.cos(r);return{...e,rotation:e.rotation+t,x:i,y:o}}(e,t,n)}({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation},e/r*360)},blink:({dTime:e,element:t,animation:n})=>{let r=n.duration,i=e%r/(r/2);return{opacity:t.opacity*(i<=1?i:2-i)}},bounce:({dTime:e,element:t,animation:n})=>{let r=n.duration,i={},o={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},a={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize},l=e%r/(r/2),s=l<=1?l:2-l;for(let e in o){let t=o[e],n=a[e]-t;i[e]=t+s*n}return i},move:({dTime:e,element:t,animation:n})=>{let r=sR[n.data.direction]||sR.right,i={};for(var o in r.from){let a=r.from[o],l=r.to[o];"exit"===n.type&&(a=r.to[o],l=-r.from[o]);let s=t[o]+a,u=t[o]+l-s;i[o]=s+e/n.duration*u}return i},zoom:({dTime:e,element:t,animation:n})=>{let r={},i=("in"===(n.data.direction||"in")?1:-1)>0?3/4:5/4,o=t.rotation*Math.PI/180,a=Math.cos(o),l=Math.sin(o),s=t.width*(1-i),u=t.height*(1-i),c={x:t.x+(s*a-u*l)/2,y:t.y+(s*l+u*a)/2,width:t.width*i,height:t.height*i,fontSize:t.fontSize*i},d={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize};for(var h in c){let t=c[h],i=d[h];if("exit"===n.type){let e=t;t=i,i=e}let o=i-t;r[h]=t+e/n.duration*o}return r}},sI=({element:e,dTime:t,animation:n})=>{let r=sL[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})};var _=v("2SBKn");let sM=(0,iq.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,iq.types).enumeration("Type",["enter","exit","loop"]),name:"none",data:(0,iq.types).frozen({})}),sD=(e,t)=>{let n={};for(let r in t)if("number"==typeof e[r]&&"number"==typeof t[r]){let i=t[r]-e[r];0!==i&&(n[r]=i)}return n},sz=(0,iq.types).model("ShapeFilter",{intensity:1}),sF=sj.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,iq.types).array(sM),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:(0,iq.types).map(sz),shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{let t={...e,x:e.x||0,y:e.y||0};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{let t=(0,_.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),n=(0,_.action)(e=>{Object.assign(t,e)}),r=(0,_.action)(e=>{for(let n in e)"number"==typeof t[n]&&(t[n]=t[n]+e[n])});return{get a(){let{currentTime:i}=e.store;if(n({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===i)return t;let o=i-e.page.startTime;if(o>e.page.duration||o<0)return t;let a=e.store.animatedElementsIds;if(a.length&&!a.includes(e.id))return t;let l=e.animations.find(e=>"enter"===e.type),s=l?.enabled&&o<l.delay;s&&n({opacity:0});let u=l?.enabled&&o>=l.delay&&o<=l.delay+l.duration;if(u){let t=o-l.delay,n=sI({element:e,animation:l,dTime:t});r(sD(e,n))}let c=e.animations.find(e=>"exit"===e.type);if(!s&&!u&&c?.enabled&&o>=e.page.duration-c.duration-c.delay&&o<=e.page.duration-c.delay){let t=o-(e.page.duration-c.duration-c.delay),n=sI({element:e,animation:c,dTime:t});r(sD(e,n))}c?.enabled&&o>=e.page.duration-c.delay&&n({opacity:0});let d=e.animations.find(e=>"loop"===e.type);if(d?.enabled){let t=sI({element:e,animation:d,dTime:o});r(sD(e,t))}return t},animated:t=>e.a[t]}}).actions(e=>({setAnimation(t,n){let r=e.animations.find(e=>e.type===t);r?Object.assign(r,n):e.animations.push({type:t,...n})},setFilter(t,n){e.filters.clear(),0!==n&&e.filters.set(t,{intensity:n})}}));var iq=v("58B0H");let sB=sF.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:(0,iq.types).optional((0,iq.types).union(iq.types.number,iq.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot(e=>({...e})).actions(e=>({toggleEditMode(t){e._editModeEnabled=t??!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})),sH=sF.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})),sV=sH.named("Video").props({type:"video",duration:0,startTime:0,endTime:1,volume:1});var iq=v("58B0H");let sU=sF.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,iq.types).array(iq.types.number),startHead:"",endHead:""}).actions(e=>({}));var iq=v("58B0H");let sG=sF.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:(0,iq.types).map(iq.types.string)}).preProcessSnapshot(e=>({...e,src:e.src||e.svgSource})).actions(e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}));var iq=v("58B0H");let sq=sF.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:(0,iq.types).array(iq.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0}),sW=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;sW(n,t)}},s$=[...Array(20)].map((e,t)=>(0,iq.types).late(()=>sX[t])),sK=(0,iq.types).union({dispatcher:e=>{let t=sZ[e.type];if(!t)throw Error(`Unknown element type: "${e.type}"`);return t}},sG,sB,sH,sU,sV,sq,(0,iq.types).late(()=>sY),...s$),sY=sj.named("Group").props({type:"group",children:(0,iq.types).array(sK)}).views(e=>({get draggable(){let t=!0;return sW(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return sW(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return sW(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return sW(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return sW(e,e=>{e.locked||(t=!1)}),t}})).actions(e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&sW(e,e=>{e.set({draggable:t})}),void 0!==n&&sW(e,e=>{e.set({contentEditable:n})}),void 0!==r&&sW(e,e=>{e.set({styleEditable:r})}),void 0!==i&&sW(e,e=>{e.set({resizable:i})}),Object.assign(e,o)},addElement(t,{skipSelect:n=!1}={}){let r=sZ[t.type];if(!r){console.error("Can not find model with type "+t.type);return}t.children&&t.children.forEach(e=>{e.id=l2(10)});let i=r.create({id:l2(10),...t});return e.children.push(i),i.selectable&&!n&&e.store.selectElements([i.id]),i},setElementZIndex(t,n){let r=e.children.find(e=>e.id===t);r&&((0,iq.detach)(r),e.children.remove(r),e.children.splice(n,0,r))}})),sX=[],sZ={svg:sG,text:sB,image:sH,group:sY,line:sU,video:sV,figure:sq},sQ=[],sJ="",s0="polotno_clipboard",s1=e=>{sQ=JSON.parse(JSON.stringify(e));try{localStorage.setItem(s0,JSON.stringify(e))}catch(e){}},s2=()=>{try{let e=localStorage.getItem(s0);if(e)return JSON.parse(e)}catch(e){}return sQ},s3=e=>{sJ=e.activePage?.id,s1(e.selectedElements.map(e=>e.toJSON()))},s4=e=>{sJ=e.activePage?.id,s1(e.selectedElements.map(e=>e.toJSON()));let t=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(t)},s8=e=>{let t=0;sJ===e.activePage?.id&&(t=e.width/20),sJ=e.activePage?.id,e.history.transaction(()=>{let n=[],r=s2();sW({children:r},e=>{delete e.id,"group"!==e.type&&(e.x+=t,e.y+=t)}),r.forEach(t=>{let r=e.activePage?.addElement(t);r&&n.push(r.id)}),s1(r),e.selectElements(n)})};var _=v("2SBKn");let s6=(0,_.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",filters:"Filters",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",copyStyle:"Copy style",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"},aiText:{aiWrite:"AI write",rewrite:"Rewrite",shorten:"Shorten",continue:"Continue writing",proofread:"Proofread",tones:"Tones",friendly:"Friendly",professional:"Professional",humorous:"Humorous",formal:"Formal",customPrompt:"Custom prompt",generatedResult:"Generated result",cancel:"Cancel",generate:"Generate",back:"Back",tryAgain:"Try Again",insert:"Insert",promptPlaceholder:"Describe what you want to generate"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"},pagesTimeline:{pages:"Pages",removePage:"Remove page",addPage:"Add page",duplicatePage:"Duplicate page",removeAudio:"Remove audio"},contextMenu:{duplicate:"Duplicate",remove:"Remove",lock:"Lock",unlock:"Unlock",copy:"Copy",paste:"Paste",copyStyle:"Copy style",moveUp:"Move up",moveDown:"Move down",moveBack:"Move back",moveForward:"Move forward"}}),s5=e=>e&&"object"==typeof e;(0,_.action)((e,{validate:t=!1}={})=>{t&&function e(t,n,r=""){Object.keys(n).forEach(i=>{let o=n[i],a=r?`${r}.${i}`:i;s5(o)?s5(t[i])?e(t[i],o,a):console.warn(`Missing nested translation object at '${a}'`):void 0===t[i]&&console.warn(`Missing translation '${a}'`)})}(e,s6),function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];s5(o)&&s5(i)?e(i,o):t[r]=o})}(s6,e)});let s9={},s7=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(s6,e);if(void 0!==t)return t;s9[e]||(s9[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)},ue=(e,t,n)=>Math.max(t,Math.min(n,e)),ut=`Polotno warning: <Workspace /> component can not automatically detect its size.
|
|
188
|
+
`}),n.innerHTML=i,document.getElementsByTagName("head")[0].appendChild(n),ij[e.fontFamily]=!0}(n)):function(e){if(iA[e])return;let t=e.replace(/ /g,"+"),n=`https://fonts.googleapis.com/css?family=${t}:${iN}`,r=document.createElement("link");r.type="text/css",r.href=n,r.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(r),iA[e]=!0}(t),Promise.all(r.map(e=>iT(t,e.fontStyle,e.fontWeight)))},validate:e=>sN.validate(e,[{path:"",type:sN}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))})),sj=(0,iq.types).model("Node",{id:iq.types.identifier,type:"none",name:"",opacity:1,custom:(0,iq.types).frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e)null===e[t]&&(e[t]=void 0);return e}).postProcessSnapshot(e=>{let t={...e},n={};for(var r in t)"_"!==r[0]&&(n[r]=e[r]);return n}).views(e=>({get locked(){return!e.draggable&&!e.contentEditable&&!e.styleEditable&&!e.resizable},get page(){return(0,iq.getParentOfType)(e,sP)},get store(){return(0,iq.getParentOfType)(e,sN)},get top(){let t=e;for(;;){if(!(0,iq.hasParentOfType)(t,sY))return t;t=(0,iq.getParentOfType)(t,sY)}},get parent(){if((0,iq.hasParentOfType)(e,sY))return(0,iq.getParentOfType)(e,sY);if((0,iq.hasParentOfType)(e,sP))return(0,iq.getParentOfType)(e,sP);if((0,iq.hasParentOfType)(e,sN))return(0,iq.getParentOfType)(e,sN);return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>({...(0,iq.getSnapshot)(e)})})).actions(e=>({clone(t={},{skipSelect:n=!1}={}){let r=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||l2(10),sW(r,e=>{e.id=l2(10)}),Object.assign(r,t),e.page.addElement(r,{skipSelect:n})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));var iq=v("58B0H");let sR={right:{from:{x:-200},to:{x:0}},left:{from:{x:200},to:{x:0}},up:{from:{y:200},to:{y:0}},down:{from:{y:-200},to:{y:0}},"bottom-right":{from:{x:-200,y:-200},to:{x:0,y:0}},"bottom-left":{from:{x:200,y:-200},to:{x:0,y:0}},"top-right":{from:{x:-200,y:200},to:{x:0,y:0}},"top-left":{from:{x:200,y:200},to:{x:0,y:0}}},sL={fade:({dTime:e,element:t,animation:n})=>{let r=e/n.duration;return"enter"===n.type?{opacity:r*t.opacity}:{opacity:(1-r)*t.opacity}},rotate:({dTime:e,element:t,animation:n})=>{let r=n.duration;return function(e,t){let n=function(e){let t=aR(e.rotation||0);return{x:e.x+e.width/2*Math.cos(t)+e.height/2*Math.sin(-t),y:e.y+e.height/2*Math.cos(t)+e.width/2*Math.sin(t)}}(e);return function(e,t,n){let r=aR(t),i=n.x+(e.x-n.x)*Math.cos(r)-(e.y-n.y)*Math.sin(r),o=n.y+(e.x-n.x)*Math.sin(r)+(e.y-n.y)*Math.cos(r);return{...e,rotation:e.rotation+t,x:i,y:o}}(e,t,n)}({x:t.x,y:t.y,width:t.width,height:t.height,rotation:t.rotation},e/r*360)},blink:({dTime:e,element:t,animation:n})=>{let r=n.duration,i=e%r/(r/2);return{opacity:t.opacity*(i<=1?i:2-i)}},bounce:({dTime:e,element:t,animation:n})=>{let r=n.duration,i={},o={x:t.x+t.width/3,y:t.y+t.height/3,width:t.width/3,height:t.height/3,fontSize:t.fontSize/3},a={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize},l=e%r/(r/2),s=l<=1?l:2-l;for(let e in o){let t=o[e],n=a[e]-t;i[e]=t+s*n}return i},move:({dTime:e,element:t,animation:n})=>{let r=sR[n.data.direction]||sR.right,i={};for(var o in r.from){let a=r.from[o],l=r.to[o];"exit"===n.type&&(a=r.to[o],l=-r.from[o]);let s=t[o]+a,u=t[o]+l-s;i[o]=s+e/n.duration*u}return i},zoom:({dTime:e,element:t,animation:n})=>{let r={},i=("in"===(n.data.direction||"in")?1:-1)>0?3/4:5/4,o=t.rotation*Math.PI/180,a=Math.cos(o),l=Math.sin(o),s=t.width*(1-i),u=t.height*(1-i),c={x:t.x+(s*a-u*l)/2,y:t.y+(s*l+u*a)/2,width:t.width*i,height:t.height*i,fontSize:t.fontSize*i},d={x:t.x,y:t.y,width:t.width,height:t.height,fontSize:t.fontSize};for(var h in c){let t=c[h],i=d[h];if("exit"===n.type){let e=t;t=i,i=e}let o=i-t;r[h]=t+e/n.duration*o}return r}},sI=({element:e,dTime:t,animation:n})=>{let r=sL[n.name];return r?r({element:e,dTime:t,animation:n}):(console.error("Can not find animation type: "+n.name),{})};var _=v("2SBKn");let sM=(0,iq.types).model("Animation",{delay:0,duration:500,enabled:!0,type:(0,iq.types).enumeration("Type",["enter","exit","loop"]),name:"none",data:(0,iq.types).frozen({})}),sD=(e,t)=>{let n={};for(let r in t)if("number"==typeof e[r]&&"number"==typeof t[r]){let i=t[r]-e[r];0!==i&&(n[r]=i)}return n},sz=(0,iq.types).model("ShapeFilter",{intensity:1}),sF=sj.named("Shape").props({x:0,y:0,width:100,height:100,rotation:0,opacity:1,animations:(0,iq.types).array(sM),blurEnabled:!1,blurRadius:10,brightnessEnabled:!1,brightness:0,sepiaEnabled:!1,grayscaleEnabled:!1,filters:(0,iq.types).map(sz),shadowEnabled:!1,shadowBlur:5,shadowOffsetX:0,shadowOffsetY:0,shadowColor:"black",shadowOpacity:1,visible:!0,draggable:!0,resizable:!0,selectable:!0,contentEditable:!0,styleEditable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{let t={...e,x:e.x||0,y:e.y||0,filters:Array.isArray(e.filters)?{}:e.filters};return"width"in e&&(t.width=t.width||1),"height"in e&&(t.height=t.height||1),e.locked&&(t.draggable=!1,t.contentEditable=!1,t.styleEditable=!1,t.resizable=!1,t.removable=!1),t}).views(e=>{let t=(0,_.observable)({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),n=(0,_.action)(e=>{Object.assign(t,e)}),r=(0,_.action)(e=>{for(let n in e)"number"==typeof t[n]&&(t[n]=t[n]+e[n])});return{get a(){let{currentTime:i}=e.store;if(n({x:e.x,y:e.y,width:e.width,height:e.height,rotation:e.rotation,opacity:e.opacity,color:e.color,fontSize:e.fontSize}),0===i)return t;let o=i-e.page.startTime;if(o>e.page.duration||o<0)return t;let a=e.store.animatedElementsIds;if(a.length&&!a.includes(e.id))return t;let l=e.animations.find(e=>"enter"===e.type),s=l?.enabled&&o<l.delay;s&&n({opacity:0});let u=l?.enabled&&o>=l.delay&&o<=l.delay+l.duration;if(u){let t=o-l.delay,n=sI({element:e,animation:l,dTime:t});r(sD(e,n))}let c=e.animations.find(e=>"exit"===e.type);if(!s&&!u&&c?.enabled&&o>=e.page.duration-c.duration-c.delay&&o<=e.page.duration-c.delay){let t=o-(e.page.duration-c.duration-c.delay),n=sI({element:e,animation:c,dTime:t});r(sD(e,n))}c?.enabled&&o>=e.page.duration-c.delay&&n({opacity:0});let d=e.animations.find(e=>"loop"===e.type);if(d?.enabled){let t=sI({element:e,animation:d,dTime:o});r(sD(e,t))}return t},animated:t=>e.a[t]}}).actions(e=>({setAnimation(t,n){let r=e.animations.find(e=>e.type===t);r?Object.assign(r,n):e.animations.push({type:t,...n})},setFilter(t,n){e.filters.clear(),0!==n&&e.filters.set(t,{intensity:n})}}));var iq=v("58B0H");let sB=sF.named("Text").props({type:"text",text:"",placeholder:"",fontSize:14,fontFamily:"Roboto",fontStyle:"normal",fontWeight:"normal",textDecoration:"",fill:"black",align:"center",width:100,height:0,verticalAlign:"top",strokeWidth:0,stroke:"black",lineHeight:(0,iq.types).optional((0,iq.types).union(iq.types.number,iq.types.string),1.2),letterSpacing:0,_editModeEnabled:!1,backgroundEnabled:!1,backgroundColor:"#7ED321",backgroundOpacity:1,backgroundCornerRadius:.5,backgroundPadding:.5}).preProcessSnapshot(e=>({...e})).actions(e=>({toggleEditMode(t){e._editModeEnabled=t??!e._editModeEnabled,e._editModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()}})),sH=sF.named("Image").props({type:"image",width:100,height:100,src:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,cornerRadius:0,flipX:!1,flipY:!1,clipSrc:"",borderColor:"black",borderSize:0,keepRatio:!1,_cropModeEnabled:!1}).actions(e=>({toggleCropMode(t){e._cropModeEnabled=t??!e._cropModeEnabled,e._cropModeEnabled?e.store.history.startTransaction():e.store.history.endTransaction()},beforeDestroy(){e._cropModeEnabled&&e.store.history.endTransaction()}})),sV=sH.named("Video").props({type:"video",duration:0,startTime:0,endTime:1,volume:1});var iq=v("58B0H");let sU=sF.named("Line").props({type:"line",width:400,height:10,color:"black",dash:(0,iq.types).array(iq.types.number),startHead:"",endHead:""}).actions(e=>({}));var iq=v("58B0H");let sG=sF.named("SVG").props({type:"svg",src:"",maskSrc:"",cropX:0,cropY:0,cropWidth:1,cropHeight:1,keepRatio:!0,flipX:!1,flipY:!1,width:100,height:100,borderColor:"black",borderSize:0,cornerRadius:0,colorsReplace:(0,iq.types).map(iq.types.string)}).preProcessSnapshot(e=>({...e,src:e.src||e.svgSource,colorsReplace:Array.isArray(e.colorsReplace)?{}:e.colorsReplace})).actions(e=>({replaceColor(t,n){e.colorsReplace.set(t,n)}}));var iq=v("58B0H");let sq=sF.named("Figure").props({type:"figure",subType:"rect",fill:"rgb(0, 161, 255)",dash:(0,iq.types).array(iq.types.number),strokeWidth:0,stroke:"rgba(98, 197, 255, 1)",cornerRadius:0}),sW=(e,t)=>{if(e.children)for(let n of e.children){if(!0===t(n))break;sW(n,t)}},s$=[...Array(20)].map((e,t)=>(0,iq.types).late(()=>sX[t])),sK=(0,iq.types).union({dispatcher:e=>{let t=sZ[e.type];if(!t)throw Error(`Unknown element type: "${e.type}"`);return t}},sG,sB,sH,sU,sV,sq,(0,iq.types).late(()=>sY),...s$),sY=sj.named("Group").props({type:"group",children:(0,iq.types).array(sK)}).views(e=>({get draggable(){let t=!0;return sW(e,e=>{e.draggable||(t=!1)}),t},get resizable(){let t=!0;return sW(e,e=>{e.resizable||(t=!1)}),t},get contentEditable(){let t=!0;return sW(e,e=>{e.contentEditable||(t=!1)}),t},get styleEditable(){let t=!0;return sW(e,e=>{e.styleEditable||(t=!1)}),t},get locked(){let t=!0;return sW(e,e=>{e.locked||(t=!1)}),t}})).actions(e=>({set({draggable:t,contentEditable:n,styleEditable:r,resizable:i,...o}){void 0!==t&&sW(e,e=>{e.set({draggable:t})}),void 0!==n&&sW(e,e=>{e.set({contentEditable:n})}),void 0!==r&&sW(e,e=>{e.set({styleEditable:r})}),void 0!==i&&sW(e,e=>{e.set({resizable:i})}),Object.assign(e,o)},addElement(t,{skipSelect:n=!1}={}){let r=sZ[t.type];if(!r){console.error("Can not find model with type "+t.type);return}t.children&&t.children.forEach(e=>{e.id=l2(10)});let i=r.create({id:l2(10),...t});return e.children.push(i),i.selectable&&!n&&e.store.selectElements([i.id]),i},setElementZIndex(t,n){let r=e.children.find(e=>e.id===t);r&&((0,iq.detach)(r),e.children.remove(r),e.children.splice(n,0,r))}})),sX=[],sZ={svg:sG,text:sB,image:sH,group:sY,line:sU,video:sV,figure:sq},sQ=[],sJ="",s0="polotno_clipboard",s1=e=>{sQ=JSON.parse(JSON.stringify(e));try{localStorage.setItem(s0,JSON.stringify(e))}catch(e){}},s2=()=>{try{let e=localStorage.getItem(s0);if(e)return JSON.parse(e)}catch(e){}return sQ},s3=e=>{sJ=e.activePage?.id,s1(e.selectedElements.map(e=>e.toJSON()))},s4=e=>{sJ=e.activePage?.id,s1(e.selectedElements.map(e=>e.toJSON()));let t=e.selectedElements.filter(e=>e.removable).map(e=>e.id);e.deleteElements(t)},s8=e=>{let t=0;sJ===e.activePage?.id&&(t=e.width/20),sJ=e.activePage?.id,e.history.transaction(()=>{let n=[],r=s2();sW({children:r},e=>{delete e.id,"group"!==e.type&&(e.x+=t,e.y+=t)}),r.forEach(t=>{let r=e.activePage?.addElement(t);r&&n.push(r.id)}),s1(r),e.selectElements(n)})};var _=v("2SBKn");let s6=(0,_.observable)({toolbar:{duration:"Duration",opacity:"Opacity",effects:"Effects",blur:"Blur",textBackground:"Background",backgroundCornerRadius:"Corner radius",backgroundOpacity:"Opacity",backgroundPadding:"Padding",brightness:"Brightness",filters:"Filters",sepia:"Sepia",grayscale:"Grayscale",textStroke:"Text Stroke",shadow:"Shadow",border:"Border",cornerRadius:"Corner Radius",copyStyle:"Copy style",position:"Position",layering:"Layering",toForward:"To forward",up:"Up",down:"Down",toBottom:"To bottom",alignLeft:"Align left",alignCenter:"Align center",alignRight:"Align right",alignTop:"Align top",alignMiddle:"Align middle",alignBottom:"Align bottom",flip:"Flip",flipHorizontally:"Flip horizontally",flipVertically:"Flip vertically",fitToBackground:"Fit to page",removeBackground:"Remove background",removeBackgroundTitle:"Remove background from image",cancelRemoveBackground:"Cancel",confirmRemoveBackground:"Confirm",crop:"Crop",cropDone:"Done",cropCancel:"Cancel",clip:"Apply mask",removeClip:"Remove mask",removeMask:"Remove mask",transparency:"Transparency",lockedDescription:"Object is locked. Unlock it to allow changes from canvas.",unlockedDescription:"Object is unlocked. Lock it to prevent changes from canvas.",removeElements:"Remove elements",duplicateElements:"Duplicate elements",download:"Download",saveAsImage:"Save as image",saveAsPDF:"Save as PDF",lineHeight:"Line height",letterSpacing:"Letter spacing",offsetX:"Offset X",offsetY:"Offset Y",color:"Color",selectable:"Selectable",draggable:"Draggable",removable:"Removable",resizable:"Resizable",contentEditable:"Can change content",styleEditable:"Can change style",alwaysOnTop:"Always on top",showInExport:"Show in export",ungroupElements:"Ungroup",groupElements:"Group",lineSize:"Line size",fade:"Fade",move:"Move",zoom:"Zoom",animate:"Animate",rotate:"Rotate",none:"None",bounce:"Bounce",blink:"Blink",spaceEvenly:"Space evenly",horizontalDistribution:"Horizontally",verticalDistribution:"Vertically",strokeWidth:"Stroke Width",colorPicker:{solid:"Solid",linear:"Linear"},aiText:{aiWrite:"AI write",rewrite:"Rewrite",shorten:"Shorten",continue:"Continue writing",proofread:"Proofread",tones:"Tones",friendly:"Friendly",professional:"Professional",humorous:"Humorous",formal:"Formal",customPrompt:"Custom prompt",generatedResult:"Generated result",cancel:"Cancel",generate:"Generate",back:"Back",tryAgain:"Try Again",insert:"Insert",promptPlaceholder:"Describe what you want to generate"}},workspace:{noPages:"There are no pages yet...",addPage:"Add page",removePage:"Remove page",duplicatePage:"Duplicate page",moveUp:"Move up",moveDown:"Move down"},scale:{reset:"Reset"},error:{removeBackground:"Ops! Something went wrong. Background can not be removed."},sidePanel:{templates:"Templates",searchTemplatesWithSameSize:"Show templates with the same size",searchPlaceholder:"Search...",otherFormats:"Other formats",noResults:"No results",error:"Loading is failed...",text:"Text",uploadFont:"Upload font",myFonts:"My fonts",photos:"Photos",videos:"Videos",animations:"Animations",effects:"Effects",elements:"Elements",shapes:"Shapes",lines:"Lines",upload:"Upload",uploadImage:"Upload Image",uploadTip:"Do you want to upload your own images?",background:"Background",resize:"Resize",layers:"Layers",layerTypes:{image:"Image",text:"Text",svg:"SVG",line:"Line",figure:"Figure",group:"Group"},layersTip:"Elements on your active page:",noLayers:"No elements on the page...",namePlaceholder:"Type element name...",useMagicResize:"Use magic resize",clipImage:"Mask image",width:"Width",height:"Height",magicResizeDescription:"Magic resize will automatically resize and move all elements on the canvas",headerText:"Header",createHeader:"Create header",subHeaderText:"Sub Header",createSubHeader:"Create sub header",bodyText:"Body text",createBody:"Create body text"},pagesTimeline:{pages:"Pages",removePage:"Remove page",addPage:"Add page",duplicatePage:"Duplicate page",removeAudio:"Remove audio"},contextMenu:{duplicate:"Duplicate",remove:"Remove",lock:"Lock",unlock:"Unlock",copy:"Copy",paste:"Paste",copyStyle:"Copy style",moveUp:"Move up",moveDown:"Move down",moveBack:"Move back",moveForward:"Move forward"}}),s5=e=>e&&"object"==typeof e;(0,_.action)((e,{validate:t=!1}={})=>{t&&function e(t,n,r=""){Object.keys(n).forEach(i=>{let o=n[i],a=r?`${r}.${i}`:i;s5(o)?s5(t[i])?e(t[i],o,a):console.warn(`Missing nested translation object at '${a}'`):void 0===t[i]&&console.warn(`Missing translation '${a}'`)})}(e,s6),function e(t,n){Object.keys(n).forEach(r=>{let i=t[r],o=n[r];s5(o)&&s5(i)?e(i,o):t[r]=o})}(s6,e)});let s9={},s7=e=>{let t=function(e,t){var n,r=t.split("."),i=e;for(n=0;n<r.length;++n){if(void 0==i[r[n]])return;i=i[r[n]]}return i}(s6,e);if(void 0!==t)return t;s9[e]||(s9[e]=!0,console.warn(`Missing translation '${e}'`));let n=e.split("."),r=n[n.length-1]||" ";return r.charAt(0).toUpperCase()+r.slice(1)},ue=(e,t,n)=>Math.max(t,Math.min(n,e)),ut=`Polotno warning: <Workspace /> component can not automatically detect its size.
|
|
189
189
|
Width or height of parent elements is equal 0.
|
|
190
190
|
Please make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.
|
|
191
191
|
For simpler debugging here is the log of the parent element:`,un=(e,t,n,r,i,o)=>{let a=/*@__PURE__*/h(C).useRef({width:t,height:n}),l=/*@__PURE__*/h(C).useRef({top:0,left:0}),s=/*@__PURE__*/h(C).useRef(!1),u=/*@__PURE__*/h(C).useRef(i.pages.length);s.current=u.current!==i.pages.length,u.current=i.pages.length,/*@__PURE__*/h(C).useEffect(()=>{let t=e.current,n=e=>{l.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]),/*@__PURE__*/h(C).useLayoutEffect(()=>{if(!e.current||s.current)return;let r=e.current,i=(l.current.left+r.offsetWidth/2)/a.current.width,u=(l.current.top+r.offsetHeight/2)/a.current.height;o.current=!0,r.scrollLeft=i*t-r.offsetWidth/2,r.scrollTop=u*n-r.offsetHeight/2,a.current={width:t,height:n}},[r,t,n])},ur=({element:e,scrollTop:t=0,duration:n=300,onFinish:r=()=>{}})=>{let i=e.scrollTop,o=t-i,a=0,l=!1;if(0===n)return e.scrollTop=t,()=>{};let s=()=>{if(l)return;let t=u(a+=20,i,o,n);e.scrollTop=t,a<n?setTimeout(s,20):r()},u=(e,t,n,r)=>(e/=r/2)<1?n/2*e*e+t:-n/2*(--e*(e-2)-1)+t;return s(),()=>{l=!0}},ui=(e,t,n,r,i,o)=>{let a=/*@__PURE__*/h(C).useRef(!1),l=/*@__PURE__*/h(C).useRef(null),s=/*@__PURE__*/h(C).useRef(!1);/*@__PURE__*/h(C).useEffect(()=>{let t=e.current,n=()=>{if(i.current)return};return t.addEventListener("scroll",n),()=>{t.removeEventListener("scroll",n)}},[]);let u=n.pages.indexOf(n.activePage);return /*@__PURE__*/h(C).useLayoutEffect(()=>{if(!n.activePage||!e.current||a.current)return;let r=e.current,i=n.pages.indexOf(n.activePage)*t,o=()=>{};return(Math.abs(i-r.scrollTop)>.5*t||s.current)&&(s.current=!0,o=ur({element:r,scrollTop:i,onFinish:()=>{s.current=!1},duration:n.isPlaying?0:300})),o},[n.activePage,u,n.isPlaying]),{handleScroll:e=>{if(o||s.current)return;a.current=!0,clearTimeout(l.current),l.current=setTimeout(()=>{a.current=!1},300);let t=e.currentTarget.childNodes[0].offsetHeight,i=Math.floor((e.currentTarget.scrollTop+r.height/3)/t),u=n.pages[i];u&&n.activePage!==u&&u.select()}}},uo=({store:e})=>/*#__PURE__*/(0,b.jsxs)("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"},children:[/*#__PURE__*/(0,b.jsx)("p",{children:s7("workspace.noPages")}),/*#__PURE__*/(0,b.jsx)("button",{onClick:()=>{e.addPage()},children:s7("workspace.addPage")})]}),ua=({width:e,height:t,xPadding:n,yPadding:r,backgroundColor:i})=>/*#__PURE__*/(0,b.jsx)("div",{style:{width:e+"px",height:t+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:r+"px",paddingBottom:r+"px"},children:/*#__PURE__*/(0,b.jsx)("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})}),ul=R(({store:e,pageControlsEnabled:t,backgroundColor:n,pageBorderColor:r,activePageBorderColor:i,bleedColor:o,components:a,onKeyDown:l,paddingX:s,paddingY:u,altCloneEnabled:c=!0,visiblePagesOffset:d,renderOnlyActivePage:f})=>{let p=s??20,g=u??55,[m,v]=/*@__PURE__*/h(C).useState({width:100,height:100}),y=/*@__PURE__*/h(C).useRef(m),x=/*@__PURE__*/h(C).useRef(null),w=/*@__PURE__*/h(C).useRef(null),_=e.bleedVisible?Math.max(0,...e.pages.map(e=>e.bleed)):0,S=Math.max(...e.pages.map(e=>e.computedWidth)),E=Math.max(...e.pages.map(e=>e.computedHeight)),k=e.activePage?.computedHeight||0,O=S+2*_,P=(f?k:E)+2*_,T=async({skipTimeout:t}={skipTimeout:!1})=>{if(t||await new Promise(e=>setTimeout(e,50)),null===x.current)return;let n=x.current.getBoundingClientRect();(0===n.width||0===n.height)&&(console.warn(ut),console.log(x.current));let r=w.current.clientWidth||n.width,i={width:r,height:n.height};(y.current.width!==i.width||y.current.height!==i.height)&&(v(i),y.current=i);let o=e.pages.length>1?3.1:2,a=Math.max(Math.min((r-2*p)/O,(n.height-g*o)/P),.01);e.scaleToFit!==a&&(e.setScale(a),e._setScaleToFit(a))};/*@__PURE__*/h(C).useLayoutEffect(()=>{T({skipTimeout:!0})},[]),/*@__PURE__*/h(C).useEffect(()=>{T()},[O,P]),/*@__PURE__*/h(C).useEffect(()=>{e.__()},[]),/*@__PURE__*/h(C).useEffect(()=>{let e=x.current;if(window.ResizeObserver){let t=new ResizeObserver(()=>{T({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{let e=setInterval(()=>{T({skipTimeout:!0})},100);return()=>clearInterval(e)}},[O,P]);let A=Math.max(p,(m.width-O*e.scale)/2),N=f?1:e.pages.length,j=P*e.scale*N,R=Math.max(g,(m.height-j)/N/2);/*@__PURE__*/h(C).useEffect(()=>{let t=t=>{(l||function(e,t){if(document.activeElement?.tagName==="INPUT"||document.activeElement?.tagName==="TEXTAREA"||document.activeElement?.contentEditable==="true")return;let n=t.selectedElements.filter(e=>e.removable).map(e=>e.id);(46===e.keyCode||8===e.keyCode)&&t.deleteElements(n);let r=e.ctrlKey||e.metaKey,i=e.shiftKey;if(r&&!i&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),r&&i&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),r&&"KeyA"===e.code){e.preventDefault();let n=t.activePage?.children.filter(e=>e.selectable),r=n?.map(e=>e.id)||[];t.selectElements(r)}r&&"KeyC"===e.code&&(e.preventDefault(),s3(t)),r&&"KeyX"===e.code&&(e.preventDefault(),s4(t)),r&&"KeyV"===e.code&&(e.preventDefault(),s8(t)),"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.draggable&&e.set({y:e.y+1})})),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.draggable&&e.set({y:e.y-1})})),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.draggable&&e.set({x:e.x-1})})),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach(e=>{e.draggable&&e.set({x:e.x+1})}))})(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[]),/*@__PURE__*/h(C).useEffect(()=>{let t=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();let n=Math.max(3,e.scaleToFit),r=Math.min(.1,e.scaleToFit),i=ue(t.deltaY<0?1.05*e.scale:e.scale/1.05,r,n);e.setScale(i);return}};return w.current?.addEventListener("wheel",t),()=>w.current?.removeEventListener("wheel",t)},[]);let L=/*@__PURE__*/h(C).useRef(!1);un(w,O*e.scale+2*A,P*e.scale+2*R,e.scale,e,L);let{handleScroll:I}=ui(w,P*e.scale+2*R,e,m,L,f),M=m.width>=O*e.scale+2*A,D=n||"rgba(232, 232, 232, 0.9)",z=e.pages.indexOf(e.activePage),F=a?.NoPages||uo,B=d??Math.min(3,Math.max(1,Math.ceil(m.height/2/(P*e.scale))));return/*#__PURE__*/(0,b.jsx)("div",{ref:x,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:D},tabIndex:0,className:"polotno-workspace-container",children:/*#__PURE__*/(0,b.jsxs)("div",{ref:w,onScroll:I,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:M?"hidden":"auto"},className:"polotno-workspace-inner",children:[e.pages.map((n,l)=>{let s=n===e.activePage;if(f&&!s&&!(n._exportingOrRendering||n._forceMount))return null;if(!(Math.abs(l-z)<=B||n._exportingOrRendering||n._forceMount))return/*#__PURE__*/(0,b.jsx)(ua,{width:O*e.scale+2*A,height:P*e.scale+2*R,backgroundColor:D,xPadding:A,yPadding:R},n.id);let u=/*#__PURE__*/(0,b.jsx)(lW,{page:n,xPadding:A,yPadding:R,width:O*e.scale+2*A,height:P*e.scale+2*R,store:e,pageControlsEnabled:t,backColor:D,pageBorderColor:r||"lightgrey",activePageBorderColor:i||"rgb(0, 161, 255)",altCloneEnabled:c,bleedColor:o||"rgba(255, 0, 0, 0.1)",components:a},n.id);return(n._exportingOrRendering||n._forceMount)&&!s&&f?/*#__PURE__*/(0,b.jsx)("div",{style:{display:"none"},children:u},n.id):u}),e.rulesVisible&&/*#__PURE__*/(0,b.jsx)(l0,{store:e,xPadding:A,yPadding:R,width:O*e.scale+2*A,height:P*e.scale+2*R}),0===e.pages.length&&/*#__PURE__*/(0,b.jsx)(F,{store:e}),e.audios.map(t=>/*#__PURE__*/(0,b.jsx)(l1,{audio:t,store:e},t.id))]})})});v("8NFma");var us=v("gztBd"),uu={};!/*!
|