polotno 0.36.8 → 0.36.9
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/workspace.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +5 -5
- package/toolbar/zoom-buttons.js +2 -2
package/canvas/workspace.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Workspace=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),ZERO_SIZE_WARNING="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:",useSaveScrollOnScaleChange=(e,t,r,a,o)=>{const n=react_1.default.useRef({width:t,height:r}),l=react_1.default.useRef({top:0,left:0});react_1.default.useEffect((()=>{const t=e.current,r=()=>{l.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;const a=e.current,o=(l.current.left+a.offsetWidth/2)/n.current.width,c=(l.current.top+a.offsetHeight/2)/n.current.height;a.scrollLeft=o*t-a.offsetWidth/2,a.scrollTop=c*r-a.offsetHeight/2,n.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r)=>{const a=react_1.default.useRef(!1),o=react_1.default.useRef(0);react_1.default.useEffect((()=>{const t=e.current,r=()=>{a.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{a.current=!1}),300)};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const n=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(a.current)return;const o=e.current,n=r.pages.indexOf(r.activePage)*t;Math.abs(n-o.scrollTop)>.9*t&&(o.scrollTop=n)}),[r.activePage,n])};exports.Workspace=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:o})=>{const[n,l]=react_1.default.useState({width:100,height:100}),c=react_1.default.useRef(n),s=react_1.default.useRef(null),i=react_1.default.useRef(null),u=e._bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,d=e.width+2*u,f=e.height+2*u,h=()=>{if(null===s.current)return;const t=s.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(s.current));const r=i.current.clientWidth||t.width,a={width:r,height:t.height};(c.current.width!==a.width||c.current.height!==a.height)&&(l(a),c.current=a);const o=(r-16)/d,n=(t.height-90)/f,u=Math.max(Math.min(o,n),.01);e.scaleToFit!==u&&(e.setScale(u),e._setScaleToFit(u))};react_1.default.useEffect(h,[d,f]),react_1.default.useEffect((()=>{const e=s.current;if(window.ResizeObserver){const t=new ResizeObserver(h);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(h,100);return()=>clearInterval(e)}}),[]);const g=Math.max(8,(n.width-d*e.scale)/2),p=f*e.scale*e.pages.length,_=Math.max(45,(n.height-p)/e.pages.length/2);react_1.default.useEffect((()=>{const t=t=>{(0,hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]);useSaveScrollOnScaleChange(i,d*e.scale+2*g,f*e.scale+2*_,e.scale),useScrollOnActiveChange(i,f*e.scale+2*_,e);const m=n.width>=d*e.scale+2*g,v=r||"#e8e8e8",w=e.pages.indexOf(e.activePage);return react_1.default.createElement("div",{ref:s,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:v},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:i,onScroll:t=>{const r=t.currentTarget.childNodes[0].offsetHeight,a=t.currentTarget.scrollTop,o=Math.floor((a+n.height/2)/r),l=e.pages[o];l&&l.select()},style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:m?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,n)=>Math.abs(n-w)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:g,yPadding:_,width:d*e.scale+2*g,height:f*e.scale+2*_,store:e,pageControlsEnabled:t,backColor:v,pageBorderColor:a||"lightgrey",activePageBorderColor:o||"rgb(0, 161, 255)"}):react_1.default.createElement("div",{key:r.id,style:{width:d*e.scale+2*g+"px",height:f*e.scale+2*_+"px"}}))),0===e.pages.length&&react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage")))))})),exports.default=exports.Workspace;
|
|
1
|
+
"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Workspace=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),page_1=__importDefault(require("./page")),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),ZERO_SIZE_WARNING="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:",useSaveScrollOnScaleChange=(e,t,r,a,o)=>{const n=react_1.default.useRef({width:t,height:r}),l=react_1.default.useRef({top:0,left:0});react_1.default.useEffect((()=>{const t=e.current,r=()=>{l.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;const a=e.current,o=(l.current.left+a.offsetWidth/2)/n.current.width,c=(l.current.top+a.offsetHeight/2)/n.current.height;a.scrollLeft=o*t-a.offsetWidth/2,a.scrollTop=c*r-a.offsetHeight/2,n.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r)=>{const a=react_1.default.useRef(!1),o=react_1.default.useRef(0);react_1.default.useEffect((()=>{const t=e.current,r=()=>{a.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{a.current=!1}),300)};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const n=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(a.current)return;const o=e.current,n=r.pages.indexOf(r.activePage)*t;Math.abs(n-o.scrollTop)>.9*t&&(o.scrollTop=n)}),[r.activePage,n])};exports.Workspace=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:o})=>{const[n,l]=react_1.default.useState({width:100,height:100}),c=react_1.default.useRef(n),s=react_1.default.useRef(null),i=react_1.default.useRef(null),u=e._bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,d=e.width+2*u,f=e.height+2*u,h=()=>{if(null===s.current)return;const t=s.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(s.current));const r=i.current.clientWidth||t.width,a={width:r,height:t.height};(c.current.width!==a.width||c.current.height!==a.height)&&(l(a),c.current=a);const o=(r-16)/d,n=(t.height-90)/f,u=Math.max(Math.min(o,n),.01);e.scaleToFit!==u&&(e.setScale(u),e._setScaleToFit(u))};react_1.default.useEffect(h,[d,f]),react_1.default.useEffect((()=>{const e=s.current;if(window.ResizeObserver){const t=new ResizeObserver(h);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(h,100);return()=>clearInterval(e)}}),[d,f]);const g=Math.max(8,(n.width-d*e.scale)/2),p=f*e.scale*e.pages.length,_=Math.max(45,(n.height-p)/e.pages.length/2);react_1.default.useEffect((()=>{const t=t=>{(0,hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]);useSaveScrollOnScaleChange(i,d*e.scale+2*g,f*e.scale+2*_,e.scale),useScrollOnActiveChange(i,f*e.scale+2*_,e);const m=n.width>=d*e.scale+2*g,v=r||"#e8e8e8",w=e.pages.indexOf(e.activePage);return react_1.default.createElement("div",{ref:s,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:v},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:i,onScroll:t=>{const r=t.currentTarget.childNodes[0].offsetHeight,a=t.currentTarget.scrollTop,o=Math.floor((a+n.height/2)/r),l=e.pages[o];l&&l.select()},style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:m?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,n)=>Math.abs(n-w)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:g,yPadding:_,width:d*e.scale+2*g,height:f*e.scale+2*_,store:e,pageControlsEnabled:t,backColor:v,pageBorderColor:a||"lightgrey",activePageBorderColor:o||"rgb(0, 161, 255)"}):react_1.default.createElement("div",{key:r.id,style:{width:d*e.scale+2*g+"px",height:f*e.scale+2*_+"px"}}))),0===e.pages.length&&react_1.default.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},react_1.default.createElement("p",null,(0,l10n_1.t)("workspace.noPages")),react_1.default.createElement("button",{onClick:()=>{e.addPage()}},(0,l10n_1.t)("workspace.addPage")))))})),exports.default=exports.Workspace;
|