polotno 1.7.5 → 1.7.6
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/html-element.js +1 -1
- package/canvas/workspace.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +25 -25
- package/toolbar/html-toolbar.js +1 -1
- package/utils/html.js +1 -1
- package/utils/html2canvas.d.ts +2 -1
- package/utils/html2canvas.js +1 -1
package/canvas/html-element.js
CHANGED
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
.ql-direction-rtl {
|
|
17
17
|
direction: rtl;
|
|
18
18
|
}
|
|
19
|
-
`,RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const n=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!n.current)return;const e=new quill_1.default(n.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","align","direction"]});return exports.quillRef.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(exports.quillRef.currentFormat=e.getFormat()),setTimeout((()=>{var e;i(null===(e=n.current)||void 0===e?void 0:e.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(i=>{i||t(),i&&(exports.quillRef.currentFormat=e.getFormat())})),n.current.childNodes[0].addEventListener("blur",(e=>{var i;(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("ql-clipboard"))||t()})),()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={},delete window.__polotnoQuill}}),[]),react_1.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i)return;const o=i.getSelection();if(!((null===(t=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var a=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(a),i.history.clear(),o&&(i.setSelection(o.index,o.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const o=(0,text_element_1.useTextColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:n,style:{fontSize:r.fontSize,color:o,width:r.width,fontFamily:r.fontFamily,lineHeight:r.lineHeight,letterSpacing:r.letterSpacing+"rem",textAlign:r.align},dir:(0,text_element_1.getDir)((0,text_1.removeTags)(r.text))})};function useHtmlSize(e,t,i){return react_1.default.useMemo((()=>(0,html2canvas_1.detectSize)(e)),[e,t.width,i])}function getHtml(e,{fontFamily:t="",color:i="black"}={}){let r=`color: ${i||e.fill}`;return`<div style="white-space: unset; width: ${Math.round(e.width||100)}px; ${r}; font-size: ${e.fontSize}px; font-family: '${t}'; text-decoration: ${e.textDecoration}; text-align: ${e.align}; line-height: ${e.lineHeight}; letter-spacing: ${e.letterSpacing}rem; font-style: ${e.fontStyle}; font-weight: ${e.fontWeight}; -webkit-text-stroke: ${e.strokeWidth}px ${e.stroke};" contentEditable dir="${(0,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text}</div>`}const findFitFontSize=e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=getHtml(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,html2canvas_1.detectSize)(i);if(!(e.height&&r>e.height))break;t-=.5}return t},isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,n]=react_1.default.useState(),[o,a]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,d]=react_1.default.useState(!1),[u,f]=react_1.default.useState(!1),h=react_1.default.useRef(e.height),g=t.selectedElements.indexOf(e)>=0,_=e.fontSize/
|
|
19
|
+
`,RichEditor=({html:e,onBlur:t,onChange:i,element:r})=>{const n=react_1.default.useRef(null);react_1.default.useEffect((()=>{if(!n.current)return;const e=new quill_1.default(n.current,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:["background","bold","color","font","italic","size","strike","underline","indent","align","direction"]});return exports.quillRef.editor.instance=e,window.__polotnoQuill=e,e.on("text-change",(()=>{e.getSelection()&&(exports.quillRef.currentFormat=e.getFormat()),setTimeout((()=>{var e;i(null===(e=n.current)||void 0===e?void 0:e.childNodes[0].innerHTML)}),10)})),e.setSelection(0,0,"api"),e.on("selection-change",(i=>{i||t(),i&&(exports.quillRef.currentFormat=e.getFormat())})),n.current.childNodes[0].addEventListener("blur",(e=>{var i;(null===(i=e.relatedTarget)||void 0===i?void 0:i.classList.contains("ql-clipboard"))||t()})),()=>{exports.quillRef.editor.instance=null,exports.quillRef.currentFormat={},delete window.__polotnoQuill}}),[]),react_1.default.useEffect((()=>{var t;const i=exports.quillRef.editor.instance;if(!i)return;const o=i.getSelection();if(!((null===(t=n.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===r.text)){var a=i.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");i.setContents(a),i.history.clear(),o&&(i.setSelection(o.index,o.length),exports.quillRef.currentFormat=i.getFormat())}}),[r.text]);const o=(0,text_element_1.useTextColor)(r).fill;return react_1.default.createElement(RichTextContainer,{ref:n,style:{fontSize:r.fontSize,color:o,width:r.width,fontFamily:r.fontFamily,lineHeight:r.lineHeight,letterSpacing:r.letterSpacing+"rem",textAlign:r.align},dir:(0,text_element_1.getDir)((0,text_1.removeTags)(r.text))})};function useHtmlSize(e,t,i){return react_1.default.useMemo((()=>(0,html2canvas_1.detectSize)(e)),[e,t.width,i])}function getHtml(e,{fontFamily:t="",color:i="black"}={}){let r=`color: ${i||e.fill}`;return`<div style="white-space: unset; width: ${Math.round(e.width||100)}px; ${r}; font-size: ${e.fontSize}px; font-family: '${t}'; text-decoration: ${e.textDecoration}; text-align: ${e.align}; line-height: ${e.lineHeight}; letter-spacing: ${e.letterSpacing}rem; font-style: ${e.fontStyle}; font-weight: ${e.fontWeight}; -webkit-text-stroke: ${e.strokeWidth}px ${e.stroke};" contentEditable dir="${(0,text_element_1.getDir)((0,text_1.removeTags)(e.text))}">${e.text}</div>`}const findFitFontSize=e=>{let t=e.fontSize;for(let i=1;i<50;i++){const i=getHtml(Object.assign(Object.assign({},e.toJSON()),{fontSize:t}),{fontFamily:e.fontFamily}),{height:r}=(0,html2canvas_1.detectSize)(i);if(!(e.height&&r>e.height))break;t-=.5}return t},isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);exports.HTMLElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const i=react_1.default.useRef(null),[r,n]=react_1.default.useState(),[o,a]=react_1.default.useState(!1),[l,s]=react_1.default.useState(!0),[c,d]=react_1.default.useState(!1),[u,f]=react_1.default.useState(!1),h=react_1.default.useRef(e.height),g=t.selectedElements.indexOf(e)>=0,_=e.fontSize/3,{textVerticalResizeEnabled:m}=flags_1.flags,[x]=(0,text_element_1.useFontLoader)(t,e.fontFamily);(0,use_fadein_1.useFadeIn)(i);const p=x?e.fontFamily:"Arial",y=(0,text_element_1.useTextColor)(e).fill,b=getHtml(e,{fontFamily:p,color:y}),{width:v,height:w}=useHtmlSize(b,e,x);react_1.default.useEffect((()=>{if(!x)return;if(!e.height)return void e.set({height:w});const{textOverflow:i}=flags_1.flags;if("change-font-size"!==i||o)"resize"===i&&(m&&e.height<w&&t.history.ignore((()=>{e.set({height:w})})),m||e.height===w||t.history.ignore((()=>{e.set({height:w})})));else{const i=findFitFontSize(e);i!==e.fontSize?t.history.ignore((()=>{e.set({fontSize:i})})):e.height!==w&&t.history.ignore((()=>{e.set({height:w})}))}}));const S=react_1.default.useRef(0),E=async()=>{S.current++;const i=S.current,r=(0,loader_1.incrementLoader)(`text ${e.id}`);s(!0),await new Promise((e=>setTimeout(e,0)));const o=await(0,html2canvas_1.htmlToCanvas)({html:b,width:e.width||1,height:e.height||w||1,fontFamily:p,padding:_,pixelRatio:t._elementsPixelRatio,font:t.fonts.find((e=>e.fontFamily===p))||fonts.globalFonts.find((e=>e.fontFamily===p))});i===S.current?(n(o),s(!1),konva_1.default.Util.requestAnimFrame(r)):r()};react_1.default.useEffect((()=>{o||c||E()}),[b,o,w,c,p,e.height,t._elementsPixelRatio]),react_1.default.useEffect((()=>{if(!x)return;if(!isSafari)return;const e=setTimeout((()=>{E()}),50);return()=>clearTimeout(e)}),[x]);const q=o||l;react_1.default.useEffect((()=>mobx.autorun((()=>{const t=i.current;(0,apply_filters_1.applyFilter)(t,e)}))),[r,q,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]);let z=0;"middle"===e.verticalAlign&&(z=(e.height-w)/2),"bottom"===e.verticalAlign&&(z=e.height-w);const k=(0,text_element_1.getLineHeight)({fontLoaded:x,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),F=(0,screen_1.useMobile)();return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,{x:e.x,y:e.y,offsetX:e.backgroundPadding*(e.fontSize*k*.5),offsetY:e.backgroundPadding*(e.fontSize*k*.5),rotation:e.rotation,hideInExport:!e.showInExport||!e.text,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,fill:e.backgroundColor,width:e.width+e.backgroundPadding*(e.fontSize*k),height:e.height+e.backgroundPadding*(e.fontSize*k),cornerRadius:e.backgroundCornerRadius*(e.fontSize*k*.5)}),react_1.default.createElement(react_konva_1.Rect,{ref:i,name:"element",x:e.x,y:e.y,listening:e.selectable,rotation:e.rotation,width:e.width,height:e.height,visible:!q,draggable:F?e.draggable&&g:e.draggable,preventDefault:!F||g,opacity:c?0:e.opacity,hideInExport:!e.showInExport,onMouseEnter:()=>{f(!0)},onMouseLeave:()=>{f(!1)},onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:i=>{e.set({x:i.target.x(),y:i.target.y()}),t.history.endTransaction()},id:e.id,onDblClick:()=>{e.contentEditable&&d(!0)},onDblTap:()=>{e.contentEditable&&d(!0)},onTransformStart:t=>{a(!0),h.current=e.height},onTransform:t=>{var i;const r=t.target,n=(null===(i=r.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor(),o="middle-left"===n||"middle-right"===n,a="top-center"===n||"bottom-center"===n,l=r.scaleX();if(o){const t=r.scaleX(),i=Math.max(r.width()*t,e.fontSize);if(r.width(i),r.scaleX(1),flags_1.flags.textVerticalResizeEnabled){const t=Math.max(w,h.current);e.set({height:t})}e.set({width:i,x:r.x(),y:r.y()})}else if(a){let i="resize"===flags_1.flags.textOverflow?w:e.lineHeight*e.fontSize;const n=Math.max(i,t.target.height()*t.target.scaleY());r.scaleY(1),e.set({x:r.x(),y:r.y(),height:n,rotation:r.rotation()})}else r.scaleX(1),r.scaleY(1),e.set({fontSize:e.fontSize*l,width:r.width()*l,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*l})},onTransformEnd:t=>{a(!1),s(!0);const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*i,width:t.target.width()*i,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation()})}}),react_1.default.createElement(react_konva_1.Image,{ref:i,image:r,x:e.x,y:e.y,offsetX:_,offsetY:_-z,listening:!1,rotation:e.rotation,width:e.width+2*_,height:e.height+2*_,visible:!q,opacity:c?0:e.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport}),q&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-z},react_1.default.createElement(react_konva_utils_1.Html,{divProps:{style:{pointerEvents:"none"}}},react_1.default.createElement(RichTextContainer,{dangerouslySetInnerHTML:{__html:b},style:{pointerEvents:"none",display:"inline-block"}}))),c&&react_1.default.createElement(react_konva_1.Group,{x:e.x,y:e.y,rotation:e.rotation,offsetY:-z},react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement(RichEditor,{html:b,element:e,onChange:t=>{e.set({text:t})},onBlur:e=>{d(!1)}}))),(g||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|
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")),rules_1=require("./rules"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),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,n,l)=>{const o=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),s=react_1.default.useRef(!1),i=react_1.default.useRef(n.pages.length);s.current=i.current!==n.pages.length,i.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(s.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/o.current.width,i=(c.current.top+a.offsetHeight/2)/o.current.height;l.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=i*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r,a,n)=>{const l=react_1.default.useRef(!1),o=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(l.current)return;const a=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-a.scrollTop)>.
|
|
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")),rules_1=require("./rules"),hotkeys_1=require("./hotkeys"),l10n_1=require("../utils/l10n"),limit=(e,t,r)=>Math.max(t,Math.min(r,e)),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,n,l)=>{const o=react_1.default.useRef({width:t,height:r}),c=react_1.default.useRef({top:0,left:0}),s=react_1.default.useRef(!1),i=react_1.default.useRef(n.pages.length);s.current=i.current!==n.pages.length,i.current=n.pages.length,react_1.default.useEffect((()=>{const t=e.current,r=e=>{c.current={top:t.scrollTop,left:t.scrollLeft}};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]),react_1.default.useLayoutEffect((()=>{if(!e.current)return;if(s.current)return;const a=e.current,n=(c.current.left+a.offsetWidth/2)/o.current.width,i=(c.current.top+a.offsetHeight/2)/o.current.height;l.current=!0,a.scrollLeft=n*t-a.offsetWidth/2,a.scrollTop=i*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r,a,n)=>{const l=react_1.default.useRef(!1),o=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{n.current};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const c=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(l.current)return;const a=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-a.scrollTop)>.5*t&&(n.current=!0,a.scrollTop=o)}),[r.activePage,c]);return{handleScroll:e=>{if(n.current)return void(n.current=!1);l.current=!0,clearTimeout(o.current),o.current=setTimeout((()=>{l.current=!1}),300);const t=e.currentTarget.childNodes[0].offsetHeight,c=e.currentTarget.scrollTop,s=Math.floor((c+a.height/3)/t),i=r.pages[s];i&&i.select()}}},NoPages=({store:e})=>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.Workspace=(0,mobx_react_lite_1.observer)((({store:e,pageControlsEnabled:t,backgroundColor:r,pageBorderColor:a,activePageBorderColor:n,bleedColor:l,components:o,onKeyDown:c})=>{const[s,i]=react_1.default.useState({width:100,height:100}),u=react_1.default.useRef(s),d=react_1.default.useRef(null),h=react_1.default.useRef(null),f=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,g=Math.max(...e.pages.map((e=>e.computedWidth))),p=Math.max(...e.pages.map((e=>e.computedHeight))),_=g+2*f,m=p+2*f,v=()=>{if(null===d.current)return;const t=d.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(d.current));const r=h.current.clientWidth||t.width,a={width:r,height:t.height};(u.current.width!==a.width||u.current.height!==a.height)&&(i(a),u.current=a);const n=(r-40)/_,l=(t.height-110)/m,o=Math.max(Math.min(n,l),.01);e.scaleToFit!==o&&(e.setScale(o),e._setScaleToFit(o))};react_1.default.useEffect(v,[_,m]),react_1.default.useEffect((()=>{const e=d.current;if(window.ResizeObserver){const t=new ResizeObserver(v);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(v,100);return()=>clearInterval(e)}}),[_,m]);const w=Math.max(20,(s.width-_*e.scale)/2),b=m*e.scale*e.pages.length,x=Math.max(55,(s.height-b)/e.pages.length/2);react_1.default.useEffect((()=>{const t=t=>{(c||hotkeys_1.handleHotkey)(t,e)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const l=Math.max(2,e.scaleToFit),o=Math.min(.5,e.scaleToFit),c=(r=t.deltaY<0?1.05*e.scale:e.scale/1.05,a=o,n=l,Math.max(a,Math.min(n,r)));e.setScale(c)}else var r,a,n};return null===(t=h.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=h.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);const E=react_1.default.useRef(!1);useSaveScrollOnScaleChange(h,_*e.scale+2*w,m*e.scale+2*x,e.scale,e,E);const{handleScroll:y}=useScrollOnActiveChange(h,m*e.scale+2*x,e,s,E),k=s.width>=_*e.scale+2*w,P=r||"rgba(232, 232, 232, 0.9)",C=e.pages.indexOf(e.activePage),R=(null==o?void 0:o.NoPages)||NoPages;return react_1.default.createElement("div",{ref:d,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:P},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:h,onScroll:y,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:k?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,c)=>Math.abs(c-C)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:w,yPadding:x,width:_*e.scale+2*w,height:m*e.scale+2*x,store:e,pageControlsEnabled:t,backColor:P,pageBorderColor:a||"lightgrey",activePageBorderColor:n||"rgb(0, 161, 255)",bleedColor:l||"rgba(255, 0, 0, 0.1)",components:o}):react_1.default.createElement("div",{key:r.id,style:{width:_*e.scale+2*w+"px",height:m*e.scale+2*x+"px",backgroundColor:P,paddingLeft:w+"px",paddingRight:w+"px",paddingTop:x+"px",paddingBottom:x+"px"}},react_1.default.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})))),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:w,yPadding:x,width:_*e.scale+2*w,height:m*e.scale+2*x}),0===e.pages.length&&react_1.default.createElement(R,{store:e})))})),exports.default=exports.Workspace;
|