polotno 2.40.0 → 2.40.2

package/pages-timeline/page-preview.js

@@ -20,4 +20,4 @@ import e from"react";import{observer as t}from"mobx-react-lite";import{reaction
   &:hover {
     display: block;
   }
-`;let w=[],E=!1;const P=async()=>{if(E||0===w.length){return}E=!0;const{page:e,setPreview:t}=w.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(o){if(o instanceof Error&&"string"==typeof o.message&&o.message.includes("Canvas was unmounted.")){return E=!1,void P()}throw o}E=!1,P()};export const PagePreview=t(({page:t,scale:g})=>{const[E,y]=e.useState(null),R=t.store.activePage===t||t.store._selectedPagesIds.includes(t.id),k=e.useRef(null),I=t.store.pages.indexOf(t),C=60/t.computedHeight*t.computedWidth,T=m.animationsEnabled?t.duration*g:C,D=t.store.pages.length>1;e.useLayoutEffect(()=>{k.current&&(k.current.style.width=T+"px")},[I,T]),(({page:t,setPreview:i,groupRef:r})=>{const a=e.useRef(!1);e.useEffect(()=>{const e=()=>{w.push({page:t,setPreview:e=>i(e)}),P()};let s=null,l=null,c=Date.now();const d=()=>{s&&clearTimeout(s),a.current&&(l||(l=setTimeout(()=>{Date.now()-c>=6e3&&(e(),c=Date.now(),l=null)},6e3)),s=setTimeout(()=>{e(),c=Date.now(),s=null,l&&(clearTimeout(l),l=null)},300))};let u=null;const p=n(t,e=>{x(u,e)||(d(),u=e)}),g=o(()=>t.children.some(e=>e._editModeEnabled),e=>{e||d()}),m=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(a.current=!0,d()):(s&&clearTimeout(s),l&&clearTimeout(l),a.current=!1)})},{threshold:.1});return r.current&&m.observe(r.current),()=>{m.disconnect(),s&&clearTimeout(s),l&&clearTimeout(l),p(),g(),w=w.filter(e=>e.page!==t)}},[r,t,i])})({page:t,setPreview:y,groupRef:k});const{handleStartDrag:j}=((t,o)=>({handleStartDrag:e.useCallback((e,n)=>{e.preventDefault();const i=e=>{if(e.preventDefault(),!o.current){return}const i="start"===n?7:-7,{clientX:r}=e,{left:a,width:s}=o.current.getBoundingClientRect(),l=(r-a-i)/s;"end"===n&&t.set({duration:Math.max(1e3,l*t.duration)})},r=()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",r)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",r)},[o,t])}))(t,k);return e.createElement(v,{style:{width:T+"px",marginRight:m.animationsEnabled?"0px":"10px",height:"60px"},ref:k,className:"polotno-page-container"+(R?" sortable-selected":"")},e.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:E?`url("${E}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:e=>{const{store:o}=t,n=o._selectedPagesIds.length?o._selectedPagesIds:o.activePage?[o.activePage.id]:[],i=n.includes(t.id),r=e.shiftKey;if(r&&i){const e=n.filter(e=>e!==t.id);o.selectPages(e)}else if(r&&!i){const e=n.concat([t.id]);o.selectPages(e)}else{o.selectPages([t.id])}}},!E&&e.createElement(h,null)),e.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:R?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(t.duration/1e3).toFixed(1),"s"),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:e=>j(e,"end")}),R&&e.createElement(b,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},e.createElement(s,{content:e.createElement(r,{style:{width:"140px"}},e.createElement(a,{icon:e.createElement(c,null),text:f("pagesTimeline.duplicatePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o:e.activePage?[e.activePage]:[];if(!n.length){return}const i=new Set(n.map(e=>e.id)),r=e.pages.filter(e=>i.has(e.id)),a=r[r.length-1],s=r.map(e=>e.clone()),l=e.pages.indexOf(a);s.forEach((e,t)=>{e.setZIndex(l+1+t)}),e.selectPages(s.map(e=>e.id))}}),e.createElement(a,{icon:e.createElement(d,null),text:f("pagesTimeline.addPage"),onClick:()=>{var e,o,n;const i=t.store.addPage({bleed:(null===(e=t.store.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(o=t.store.activePage)||void 0===o?void 0:o.width)||"auto",height:(null===(n=t.store.activePage)||void 0===n?void 0:n.height)||"auto"}),r=t.store.pages.indexOf(t);i.setZIndex(r+1)}}),D&&e.createElement(a,{icon:e.createElement(p,null),text:f("pagesTimeline.removePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o.map(e=>e.id):e.activePage?[e.activePage.id]:[];n.length&&e.deletePages(n)}})),position:l.TOP},e.createElement(i,{icon:e.createElement(u,null),style:{minHeight:"20px",borderRadius:"10px"}}))))});
+`;let w=[],E=!1;const P=async()=>{if(E||0===w.length){return}E=!0;const{page:e,setPreview:t}=w.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(o){o instanceof Error&&"string"==typeof o.message&&(o.message.includes("Canvas was unmounted.")||o.message.includes("<Workspace /> component is not mounted"))||console.error(o)}finally{E=!1}P()};export const PagePreview=t(({page:t,scale:g})=>{const[E,y]=e.useState(null),k=t.store.activePage===t||t.store._selectedPagesIds.includes(t.id),R=e.useRef(null),I=t.store.pages.indexOf(t),C=60/t.computedHeight*t.computedWidth,T=m.animationsEnabled?t.duration*g:C,D=t.store.pages.length>1;e.useLayoutEffect(()=>{R.current&&(R.current.style.width=T+"px")},[I,T]),(({page:t,setPreview:i,groupRef:r})=>{const a=e.useRef(!1);e.useEffect(()=>{const e=()=>{w.push({page:t,setPreview:e=>i(e)}),P()};let s=null,l=null,c=Date.now();const d=()=>{s&&clearTimeout(s),a.current&&(l||(l=setTimeout(()=>{Date.now()-c>=6e3&&(e(),c=Date.now(),l=null)},6e3)),s=setTimeout(()=>{e(),c=Date.now(),s=null,l&&(clearTimeout(l),l=null)},300))};let u=null;const p=n(t,e=>{x(u,e)||(d(),u=e)}),g=o(()=>t.children.some(e=>e._editModeEnabled),e=>{e||d()}),m=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(a.current=!0,d()):(s&&clearTimeout(s),l&&clearTimeout(l),a.current=!1)})},{threshold:.1});return r.current&&m.observe(r.current),()=>{m.disconnect(),s&&clearTimeout(s),l&&clearTimeout(l),p(),g(),w=w.filter(e=>e.page!==t)}},[r,t,i])})({page:t,setPreview:y,groupRef:R});const{handleStartDrag:j}=((t,o)=>({handleStartDrag:e.useCallback((e,n)=>{e.preventDefault();const i=e=>{if(e.preventDefault(),!o.current){return}const i="start"===n?7:-7,{clientX:r}=e,{left:a,width:s}=o.current.getBoundingClientRect(),l=(r-a-i)/s;"end"===n&&t.set({duration:Math.max(1e3,l*t.duration)})},r=()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",r)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",r)},[o,t])}))(t,R);return e.createElement(v,{style:{width:T+"px",marginRight:m.animationsEnabled?"0px":"10px",height:"60px"},ref:R,className:"polotno-page-container"+(k?" sortable-selected":"")},e.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:E?`url("${E}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:e=>{const{store:o}=t,n=o._selectedPagesIds.length?o._selectedPagesIds:o.activePage?[o.activePage.id]:[],i=n.includes(t.id),r=e.shiftKey;if(r&&i){const e=n.filter(e=>e!==t.id);o.selectPages(e)}else if(r&&!i){const e=n.concat([t.id]);o.selectPages(e)}else{o.selectPages([t.id])}}},!E&&e.createElement(h,null)),e.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:k?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"}},(t.duration/1e3).toFixed(1),"s"),m.animationsEnabled&&e.createElement("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:e=>j(e,"end")}),k&&e.createElement(b,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()}},e.createElement(s,{content:e.createElement(r,{style:{width:"140px"}},e.createElement(a,{icon:e.createElement(c,null),text:f("pagesTimeline.duplicatePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o:e.activePage?[e.activePage]:[];if(!n.length){return}const i=new Set(n.map(e=>e.id)),r=e.pages.filter(e=>i.has(e.id)),a=r[r.length-1],s=r.map(e=>e.clone()),l=e.pages.indexOf(a);s.forEach((e,t)=>{e.setZIndex(l+1+t)}),e.selectPages(s.map(e=>e.id))}}),e.createElement(a,{icon:e.createElement(d,null),text:f("pagesTimeline.addPage"),onClick:()=>{var e,o,n;const i=t.store.addPage({bleed:(null===(e=t.store.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(o=t.store.activePage)||void 0===o?void 0:o.width)||"auto",height:(null===(n=t.store.activePage)||void 0===n?void 0:n.height)||"auto"}),r=t.store.pages.indexOf(t);i.setZIndex(r+1)}}),D&&e.createElement(a,{icon:e.createElement(p,null),text:f("pagesTimeline.removePage"),onClick:()=>{const e=t.store,o=(e.selectedPages||[]).filter(Boolean),n=o.length?o.map(e=>e.id):e.activePage?[e.activePage.id]:[];n.length&&e.deletePages(n)}})),position:l.TOP},e.createElement(i,{icon:e.createElement(u,null),style:{minHeight:"20px",borderRadius:"10px"}}))))});