polotno 1.1.0 → 1.1.1

package/canvas/page.d.ts

@@ -16,9 +16,10 @@ declare type PageProps = {
     backColor: string;
     pageBorderColor: string;
     activePageBorderColor: string;
+    bleedColor: string;
     components: any;
 };
-declare const _default: (({ store, page, width, height, pageControlsEnabled, backColor, pageBorderColor, activePageBorderColor, components, }: PageProps) => JSX.Element) & {
+declare const _default: (({ store, page, width, height, pageControlsEnabled, backColor, pageBorderColor, activePageBorderColor, components, bleedColor, }: PageProps) => JSX.Element) & {
     displayName: string;
 };
 export default _default;

package/canvas/page.js

@@ -1 +1 @@
-"use strict";var __rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),page_controls_1=require("./page-controls"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),DEFAULT_TRANSFORMER_ATTRIBUTES={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,anchorStrokeWidth:2,borderStrokeWidth:2},transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,n=__rest(e,["url"]);const[r,a]=(0,use_image_1.default)(t,"anonymous"),o=r?(0,crop_1.getCrop)(r,{width:n.width,height:n.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:r},n,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:n,borderColor:r}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e.filter((e=>e.alwaysOnTop)),r=e.filter((e=>!e.alwaysOnTop)).concat(n);return react_1.default.createElement(react_1.default.Fragment,null,r.map((e=>react_1.default.createElement(element_1.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:n,height:r,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c})=>{const s=e.bleedVisible?t.bleed:0,d=t.computedWidth+2*s,m=t.computedHeight+2*s,u=(n-d*e.scale)/2,g=(r-m*e.scale)/2,_=react_1.default.useRef(null),h=react_1.default.useRef(null),f=react_1.default.useRef(null),p=null==a||a,[b,x]=react_1.default.useState(null),v=e.selectedElements.find((e=>e._cropModeEnabled)),E=e.selectedElements.filter((e=>!e.draggable)).length>0,y=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useEffect((()=>{var t,n,r;if(!_.current)return;const a=_.current.getStage(),o=e.selectedElements.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";E?(_.current.enabledAnchors([]),_.current.rotateEnabled(!1)):transformerAttributes[i]?(_.current.setAttrs(Object.assign(Object.assign({},DEFAULT_TRANSFORMER_ATTRIBUTES),transformerAttributes[i])),"svg"!==i||e.selectedElements[0].keepRatio||_.current.setAttrs({enabledAnchors:DEFAULT_TRANSFORMER_ATTRIBUTES.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&_.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):_.current.setAttrs(DEFAULT_TRANSFORMER_ATTRIBUTES),_.current.nodes(o),null===(r=_.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,v,E,y]);const k=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),w=react_1.default.useRef(!1),A=(0,mobx_1.action)((n=>{var r,a;w.current=!1,e.activePage!==t&&t.select();const o=n.target.findAncestor(".elements-container"),i=n.target.findAncestor("Transformer"),l=n.target.findAncestor(".page-abs-container");if(o||i||l)return;const c=null===(r=n.target.getStage())||void 0===r?void 0:r.getPointerPosition();c&&(k.visible=!0,k.x1=c.x,k.y1=c.y,k.x2=c.x,k.y2=c.y,(null===(a=n.target.getStage())||void 0===a?void 0:a.getPointersPositions().length)>=2&&(k.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!k.visible)return;null===(t=h.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=h.current)||void 0===n?void 0:n.getPointerPosition())||{x:k.x2,y:k.y2};k.x2=r.x,k.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!k.visible)return;if(!h.current)return;const t=h.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];h.current.find(".element").forEach((r=>{const a=r.getClientRect(),o=e.getElementById(r.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(n,a)&&i&&l&&t.push(r.id())})),e.selectElements(t)}k.visible=!1,w.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const Y=t=>{if(w.current)return;const n=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,r=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),o=t.target.findAncestor("Transformer");if(!(n||r||o||a))return void e.selectElements([]);const i=t.target.findAncestor(".element",!0),l=e.selectedElementsIds.indexOf(null==i?void 0:i.id())>=0;i&&n&&!l&&e.selectElements(e.selectedElementsIds.concat([i.id()])),i&&n&&l&&e.selectElements(e.selectedElementsIds.filter((e=>e!==i.id()))),!i||n||l||e.selectElements([i.id()])};(0,use_transformer_snap_1.useSnap)(_);const X=e.activePage===t,D=(null==c?void 0:c.PageControls)||page_controls_1.PageControls,R=1/e.scale,T=0/e.scale;return react_1.default.createElement("div",{ref:f,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!h.current)return;h.current.setPointersPositions(t);const n=h.current.findOne(".elements-container").getRelativePointerPosition(),r=h.current.getPointerPosition(),a=h.current.getIntersection(r),o=a&&a.findAncestor(".element",!0),i=o?e.getElementById(o.id()):void 0;onDomDrop&&(onDomDrop(n,i),onDomDrop=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(X?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:h,width:n,height:r,onClick:Y,onTap:Y,onMouseDown:A,onMouseMove:n=>{if(!n.evt.altKey&&b)return void x(null);if(!n.evt.altKey)return;const r=n.target.findAncestor(".element",!0),a=null==r?void 0:r.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(b)!==JSON.stringify(c)&&x(c)},onTouchStart:A,onDragStart:t=>{var n;if(t.target.hasName("element")){const r=t.target.id();!(e.selectedElementsIds.indexOf(r)>=0)&&r&&(e.selectElements([r]),null===(n=_.current)||void 0===n||n.startDrag(t))}b&&x(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:n,height:r,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:u,y:g,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:s,y:s},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:s,y:s,name:"elements-container"},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:"red",name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,opacity:.1,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,u,g,u,r-g,n-u,r-g,n-u,g,u,g],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:u,y:g,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-R/2-T,y:-R/2-T,width:d+R+2*T,height:m+R+2*T,stroke:X&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:u+s*e.scale,y:g+s*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:_,boundBoxFunc:(e,t)=>{const n=t.width<1||t.height<1,r=e.width<1||e.height<1;return n&&!r?e:t}}),b&&b.map((({points:t,distance:n,box1:r,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},r,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:n})})))))),react_1.default.createElement(Selection,{selection:k}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.dev",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.dev")},onTap:()=>{window.open("https://polotno.dev")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),p&&X&&react_1.default.createElement(D,{store:e,page:t,xPadding:u,yPadding:g}))}));
+"use strict";var __rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.registerNextDomDrop=exports.registerTransformerAttrs=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),mobx_1=require("mobx"),react_konva_1=require("react-konva"),use_image_1=__importDefault(require("use-image")),konva_1=__importDefault(require("konva")),element_1=__importDefault(require("./element")),use_transformer_snap_1=require("./use-transformer-snap"),image_element_1=require("./image-element"),crop_1=require("../utils/crop"),page_controls_1=require("./page-controls"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),DEFAULT_TRANSFORMER_ATTRIBUTES={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,anchorStrokeWidth:2,borderStrokeWidth:2},transformerAttributes={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]}};function registerTransformerAttrs(e,t){transformerAttributes[e]=transformerAttributes[e]||t,Object.assign(transformerAttributes[e],t)}exports.registerTransformerAttrs=registerTransformerAttrs;const Background=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e,{preventDefault:!1})),ImageBackground=e=>{var{url:t}=e,n=__rest(e,["url"]);const[r,a]=(0,use_image_1.default)(t,"anonymous"),o=r?(0,crop_1.getCrop)(r,{width:n.width,height:n.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:r},n,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:n,borderColor:r}=e,a=__rest(e,["background","scale","borderColor"]),o=react_1.default.useMemo((()=>!!konva_1.default.Util.colorToRGBA(t)),[t]),i=react_1.default.useMemo((()=>{const e=document.createElement("canvas"),t=30;e.width=60,e.height=60;const n=e.getContext("2d");return n&&(n.fillStyle="black",n.fillRect(t,0,t,t),n.fillRect(0,t,t,t)),e}),[]);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Rect,Object.assign({fillPatternImage:i},a,{opacity:.1,hideInExport:!0})),o?react_1.default.createElement(ColorBackground,Object.assign({fill:t},a)):react_1.default.createElement(ImageBackground,Object.assign({url:t},a)))},Selection=(0,mobx_react_lite_1.observer)((({selection:e})=>e.visible?react_1.default.createElement(react_konva_1.Rect,{name:"selection",x:Math.min(e.x1,e.x2),y:Math.min(e.y1,e.y2),width:Math.abs(e.x1-e.x2),height:Math.abs(e.y1-e.y2),fill:"rgba(0, 161, 255, 0.3)"}):null)),Elements=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e.filter((e=>e.alwaysOnTop)),r=e.filter((e=>!e.alwaysOnTop)).concat(n);return react_1.default.createElement(react_1.default.Fragment,null,r.map((e=>react_1.default.createElement(element_1.default,{key:e.id,store:t,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}}))))}));let onDomDrop=null;const registerNextDomDrop=e=>{onDomDrop=e};exports.registerNextDomDrop=registerNextDomDrop,exports.default=(0,mobx_react_lite_1.observer)((({store:e,page:t,width:n,height:r,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,m=t.computedWidth+2*d,u=t.computedHeight+2*d,g=(n-m*e.scale)/2,_=(r-u*e.scale)/2,h=react_1.default.useRef(null),f=react_1.default.useRef(null),b=react_1.default.useRef(null),p=null==a||a,[x,v]=react_1.default.useState(null),E=e.selectedElements.find((e=>e._cropModeEnabled)),y=e.selectedElements.filter((e=>!e.draggable)).length>0,k=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useEffect((()=>{var t,n,r;if(!h.current)return;const a=h.current.getStage(),o=e.selectedElements.map((e=>e._cropModeEnabled?null:a.findOne("#"+e.id))).filter((e=>e)),i=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";y?(h.current.enabledAnchors([]),h.current.rotateEnabled(!1)):transformerAttributes[i]?(h.current.setAttrs(Object.assign(Object.assign({},DEFAULT_TRANSFORMER_ATTRIBUTES),transformerAttributes[i])),"svg"!==i||e.selectedElements[0].keepRatio||h.current.setAttrs({enabledAnchors:DEFAULT_TRANSFORMER_ATTRIBUTES.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&h.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):h.current.setAttrs(DEFAULT_TRANSFORMER_ATTRIBUTES),h.current.nodes(o),null===(r=h.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,E,y,k]);const w=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),A=react_1.default.useRef(!1),Y=(0,mobx_1.action)((n=>{var r,a;A.current=!1,e.activePage!==t&&t.select();const o=n.target.findAncestor(".elements-container"),i=n.target.findAncestor("Transformer"),l=n.target.findAncestor(".page-abs-container");if(o||i||l)return;const c=null===(r=n.target.getStage())||void 0===r?void 0:r.getPointerPosition();c&&(w.visible=!0,w.x1=c.x,w.y1=c.y,w.x2=c.x,w.y2=c.y,(null===(a=n.target.getStage())||void 0===a?void 0:a.getPointersPositions().length)>=2&&(w.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!w.visible)return;null===(t=f.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=f.current)||void 0===n?void 0:n.getPointerPosition())||{x:w.x2,y:w.y2};w.x2=r.x,w.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!w.visible)return;if(!f.current)return;const t=f.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];f.current.find(".element").forEach((r=>{const a=r.getClientRect(),o=e.getElementById(r.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(n,a)&&i&&l&&t.push(r.id())})),e.selectElements(t)}w.visible=!1,A.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n),window.addEventListener("touchend",n),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}}),[]);const X=t=>{if(A.current)return;const n=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,r=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),o=t.target.findAncestor("Transformer");if(!(n||r||o||a))return void e.selectElements([]);const i=t.target.findAncestor(".element",!0),l=e.selectedElementsIds.indexOf(null==i?void 0:i.id())>=0;i&&n&&!l&&e.selectElements(e.selectedElementsIds.concat([i.id()])),i&&n&&l&&e.selectElements(e.selectedElementsIds.filter((e=>e!==i.id()))),!i||n||l||e.selectElements([i.id()])};(0,use_transformer_snap_1.useSnap)(h);const D=e.activePage===t,R=(null==c?void 0:c.PageControls)||page_controls_1.PageControls,T=1/e.scale,S=0/e.scale;return react_1.default.createElement("div",{ref:b,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!f.current)return;f.current.setPointersPositions(t);const n=f.current.findOne(".elements-container").getRelativePointerPosition(),r=f.current.getPointerPosition(),a=f.current.getIntersection(r),o=a&&a.findAncestor(".element",!0),i=o?e.getElementById(o.id()):void 0;onDomDrop&&(onDomDrop(n,i),onDomDrop=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:f,width:n,height:r,onClick:X,onTap:X,onMouseDown:Y,onMouseMove:n=>{if(!n.evt.altKey&&x)return void v(null);if(!n.evt.altKey)return;const r=n.target.findAncestor(".element",!0),a=null==r?void 0:r.id();if(!e.selectedElements[0])return;if(e.selectedElementsIds.includes(a))return;const o=(0,math_1.getTotalClientRect)(e.selectedElements),i=a?e.getElementById(a):{x:0,y:0,width:t.computedWidth,height:t.computedHeight,rotation:0},l=(0,math_1.getClientRect)(i),c=[];o.minX>l.maxX&&c.push({distance:o.minX-l.maxX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),o.maxX<l.minX&&c.push({distance:l.minX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),o.minY>l.maxY&&c.push({box1:o,box2:l,distance:o.minY-l.maxY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]}),o.maxY<l.minY&&c.push({box1:o,box2:l,distance:l.minY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]});o.minX>=l.minX&&o.maxX<=l.maxX&&o.minY>=l.minY&&o.maxY<=l.maxY&&(c.push({distance:o.minX-l.minX,box1:o,box2:l,points:[{x:o.minX,y:o.minY+o.height/2},{x:l.minX,y:o.minY+o.height/2},{x:l.minX,y:l.minY+l.height/2}]}),c.push({distance:l.maxX-o.maxX,box1:o,box2:l,points:[{x:o.maxX,y:o.minY+o.height/2},{x:l.maxX,y:o.minY+o.height/2},{x:l.maxX,y:l.minY+l.height/2}]}),c.push({box1:o,box2:l,distance:o.minY-l.minY,points:[{x:o.minX+o.width/2,y:o.minY},{x:o.minX+o.width/2,y:l.minY},{x:l.minX+l.width/2,y:l.minY}]}),c.push({box1:o,box2:l,distance:l.maxY-o.maxY,points:[{x:o.minX+o.width/2,y:o.maxY},{x:o.minX+o.width/2,y:l.maxY},{x:l.minX+l.width/2,y:l.maxY}]})),JSON.stringify(x)!==JSON.stringify(c)&&v(c)},onTouchStart:Y,onDragStart:t=>{var n;if(t.target.hasName("element")){const r=t.target.id();!(e.selectedElementsIds.indexOf(r)>=0)&&r&&(e.selectElements([r]),null===(n=h.current)||void 0===n||n.startDrag(t))}x&&v(null)},pageId:t.id,style:{position:"relative"}},react_1.default.createElement(react_konva_1.Layer,null,react_1.default.createElement(Background,{width:n,height:r,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:d,y:d},react_1.default.createElement(PageBackground,{x:-t.bleed,y:-t.bleed,width:t.computedWidth+2*t.bleed,height:t.computedHeight+2*t.bleed,background:t.background,shadowBlur:10,shadowColor:"lightgrey",name:"page-background",preventDefault:!1,scale:e.scale})),react_1.default.createElement(react_konva_1.Group,{x:d,y:d,name:"elements-container"},react_1.default.createElement(react_konva_1.Rect,{name:"elements-area",width:t.computedWidth,height:t.computedHeight,listening:!1}),react_1.default.createElement(Elements,{elements:t.children,store:e})),react_1.default.createElement(react_konva_1.Rect,{stroke:s,name:"bleed",strokeWidth:t.bleed,x:t.bleed/2,y:t.bleed/2,width:t.computedWidth+t.bleed,height:t.computedHeight+t.bleed,listening:!1,visible:t.bleed>0&&e.bleedVisible,hideInExport:!0})),react_1.default.createElement(react_konva_1.Line,{name:"workspace-background",points:[0,0,n,0,n,r,0,r,0,0,g,_,g,r-_,n-g,r-_,n-g,_,g,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:g,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-T/2-S,y:-T/2-S,width:m+T+2*S,height:u+T+2*S,stroke:D&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:g+d*e.scale,y:_+d*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:h,boundBoxFunc:(e,t)=>{const n=t.width<1||t.height<1,r=e.width<1||e.height<1;return n&&!r?e:t}}),x&&x.map((({points:t,distance:n,box1:r,box2:a},o)=>react_1.default.createElement(react_konva_1.Group,{name:"distances-container",hideInExport:!0,key:o,listening:!1},react_1.default.createElement(react_konva_1.Rect,Object.assign({},r,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Rect,Object.assign({},a,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Line,{points:[t[0].x,t[0].y,t[1].x,t[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Line,{points:[t[1].x,t[1].y,t[2].x,t[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),react_1.default.createElement(react_konva_1.Label,{x:(t[0].x+t[1].x)/2,y:(t[0].y+t[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:(0,unit_1.pxToUnitString)({unit:e.unit,dpi:e.dpi,px:n})})))))),react_1.default.createElement(Selection,{selection:w}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.dev",fontSize:14,fill:"rgba(0,0,0,0.6)",x:n-170,y:r-18,onMouseEnter:e=>{e.target.getStage().container().style.cursor="pointer"},onMouseLeave:e=>{e.target.getStage().container().style.cursor=""},onTouchStart:e=>{e.cancelBubble=!0},onMouseDown:e=>{e.cancelBubble=!0},onClick:()=>{window.open("https://polotno.dev")},onTap:()=>{window.open("https://polotno.dev")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),p&&D&&react_1.default.createElement(R,{store:e,page:t,xPadding:g,yPadding:_}))}));

package/canvas/workspace.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { StoreType } from '../model/store';
-export declare const Workspace: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, components, }: {
+export declare const Workspace: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, components, }: {
     store: StoreType;
     pageControlsEnabled?: boolean | undefined;
     backgroundColor?: string | undefined;
     pageBorderColor?: string | undefined;
+    bleedColor?: string | undefined;
     activePageBorderColor?: string | undefined;
     components?: any;
 }) => JSX.Element) & {

package/canvas/workspace.js

@@ -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,l)=>{const o=react_1.default.useRef({width:t,height:r}),n=react_1.default.useRef({top:0,left:0});react_1.default.useEffect((()=>{const t=e.current,r=e=>{n.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,l=(n.current.left+a.offsetWidth/2)/o.current.width,s=(n.current.top+a.offsetHeight/2)/o.current.height;a.scrollLeft=l*t-a.offsetWidth/2,a.scrollTop=s*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r)=>{const a=react_1.default.useRef(!1),l=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{a.current=!0,clearTimeout(l.current),l.current=setTimeout((()=>{a.current=!1}),300)};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const o=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(a.current)return;const l=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-l.scrollTop)>.9*t&&(l.scrollTop=o)}),[r.activePage,o])},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:l,components:o})=>{const[n,s]=react_1.default.useState({width:100,height:100}),c=react_1.default.useRef(n),i=react_1.default.useRef(null),u=react_1.default.useRef(null),d=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,h=Math.max(...e.pages.map((e=>e.computedWidth))),f=Math.max(...e.pages.map((e=>e.computedHeight))),g=h+2*d,p=f+2*d,_=()=>{if(null===i.current)return;const t=i.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(i.current));const r=u.current.clientWidth||t.width,a={width:r,height:t.height};(c.current.width!==a.width||c.current.height!==a.height)&&(s(a),c.current=a);const l=(r-40)/g,o=(t.height-110)/p,n=Math.max(Math.min(l,o),.01);e.scaleToFit!==n&&(e.setScale(n),e._setScaleToFit(n))};react_1.default.useEffect(_,[g,p]),react_1.default.useEffect((()=>{const e=i.current;if(window.ResizeObserver){const t=new ResizeObserver(_);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(_,100);return()=>clearInterval(e)}}),[g,p]);const m=Math.max(20,(n.width-g*e.scale)/2),v=p*e.scale*e.pages.length,w=Math.max(55,(n.height-v)/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)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(2,e.scaleToFit),n=Math.min(.5,e.scaleToFit),s=(r=t.deltaY>0?1.05*e.scale:e.scale/1.05,a=n,l=o,Math.max(a,Math.min(l,r)));e.setScale(s)}else var r,a,l};return null===(t=u.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=u.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);useSaveScrollOnScaleChange(u,g*e.scale+2*m,p*e.scale+2*w,e.scale),useScrollOnActiveChange(u,p*e.scale+2*w,e);const E=n.width>=g*e.scale+2*m,x=r||"rgba(232, 232, 232, 0.9)",b=e.pages.indexOf(e.activePage),y=(null==o?void 0:o.NoPages)||NoPages;return react_1.default.createElement("div",{ref:i,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:x},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:u,onScroll:t=>{const r=t.currentTarget.childNodes[0].offsetHeight,a=t.currentTarget.scrollTop,l=Math.floor((a+n.height/2)/r),o=e.pages[l];o&&o.select()},style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:E?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,n)=>Math.abs(n-b)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:m,yPadding:w,width:g*e.scale+2*m,height:p*e.scale+2*w,store:e,pageControlsEnabled:t,backColor:x,pageBorderColor:a||"lightgrey",activePageBorderColor:l||"rgb(0, 161, 255)",components:o}):react_1.default.createElement("div",{key:r.id,style:{width:g*e.scale+2*m+"px",height:p*e.scale+2*w+"px"}}))),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:m,yPadding:w,width:g*e.scale+2*m,height:p*e.scale+2*w}),0===e.pages.length&&react_1.default.createElement(y,{store:e})))})),exports.default=exports.Workspace;
+"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,l)=>{const o=react_1.default.useRef({width:t,height:r}),n=react_1.default.useRef({top:0,left:0});react_1.default.useEffect((()=>{const t=e.current,r=e=>{n.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,l=(n.current.left+a.offsetWidth/2)/o.current.width,s=(n.current.top+a.offsetHeight/2)/o.current.height;a.scrollLeft=l*t-a.offsetWidth/2,a.scrollTop=s*r-a.offsetHeight/2,o.current={width:t,height:r}}),[a,t,r])},useScrollOnActiveChange=(e,t,r)=>{const a=react_1.default.useRef(!1),l=react_1.default.useRef(null);react_1.default.useEffect((()=>{const t=e.current,r=()=>{a.current=!0,clearTimeout(l.current),l.current=setTimeout((()=>{a.current=!1}),300)};return t.addEventListener("scroll",r),()=>{t.removeEventListener("scroll",r)}}),[]);const o=r.pages.indexOf(r.activePage);react_1.default.useLayoutEffect((()=>{if(!r.activePage)return;if(!e.current)return;if(a.current)return;const l=e.current,o=r.pages.indexOf(r.activePage)*t;Math.abs(o-l.scrollTop)>.9*t&&(l.scrollTop=o)}),[r.activePage,o])},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:l,bleedColor:o,components:n})=>{const[s,c]=react_1.default.useState({width:100,height:100}),i=react_1.default.useRef(s),u=react_1.default.useRef(null),d=react_1.default.useRef(null),h=e.bleedVisible?Math.max(0,...e.pages.map((e=>e.bleed))):0,f=Math.max(...e.pages.map((e=>e.computedWidth))),g=Math.max(...e.pages.map((e=>e.computedHeight))),p=f+2*h,_=g+2*h,m=()=>{if(null===u.current)return;const t=u.current.getBoundingClientRect();0!==t.width&&0!==t.height||(console.warn(ZERO_SIZE_WARNING),console.log(u.current));const r=d.current.clientWidth||t.width,a={width:r,height:t.height};(i.current.width!==a.width||i.current.height!==a.height)&&(c(a),i.current=a);const l=(r-40)/p,o=(t.height-110)/_,n=Math.max(Math.min(l,o),.01);e.scaleToFit!==n&&(e.setScale(n),e._setScaleToFit(n))};react_1.default.useEffect(m,[p,_]),react_1.default.useEffect((()=>{const e=u.current;if(window.ResizeObserver){const t=new ResizeObserver(m);return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(m,100);return()=>clearInterval(e)}}),[p,_]);const v=Math.max(20,(s.width-p*e.scale)/2),w=_*e.scale*e.pages.length,E=Math.max(55,(s.height-w)/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)}),[]),react_1.default.useEffect((()=>{var t;const r=t=>{if(t.ctrlKey||t.metaKey){t.preventDefault();const o=Math.max(2,e.scaleToFit),n=Math.min(.5,e.scaleToFit),s=(r=t.deltaY>0?1.05*e.scale:e.scale/1.05,a=n,l=o,Math.max(a,Math.min(l,r)));e.setScale(s)}else var r,a,l};return null===(t=d.current)||void 0===t||t.addEventListener("wheel",r),()=>{var e;return null===(e=d.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}}),[]);useSaveScrollOnScaleChange(d,p*e.scale+2*v,_*e.scale+2*E,e.scale),useScrollOnActiveChange(d,_*e.scale+2*E,e);const b=s.width>=p*e.scale+2*v,x=r||"rgba(232, 232, 232, 0.9)",y=e.pages.indexOf(e.activePage),k=(null==n?void 0:n.NoPages)||NoPages;return react_1.default.createElement("div",{ref:u,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:x},tabIndex:0,className:"polotno-workspace-container"},react_1.default.createElement("div",{ref:d,onScroll:t=>{const r=t.currentTarget.childNodes[0].offsetHeight,a=t.currentTarget.scrollTop,l=Math.floor((a+s.height/2)/r),o=e.pages[l];o&&o.select()},style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:b?"hidden":"auto"},className:"polotno-workspace-inner"},e.pages.map(((r,s)=>Math.abs(s-y)<=1||r._exporting?react_1.default.createElement(page_1.default,{key:r.id,page:r,xPadding:v,yPadding:E,width:p*e.scale+2*v,height:_*e.scale+2*E,store:e,pageControlsEnabled:t,backColor:x,pageBorderColor:a||"lightgrey",activePageBorderColor:l||"rgb(0, 161, 255)",bleedColor:o||"rgba(255, 0, 0, 0.1)",components:n}):react_1.default.createElement("div",{key:r.id,style:{width:p*e.scale+2*v+"px",height:_*e.scale+2*E+"px"}}))),e.rulesVisible&&react_1.default.createElement(rules_1.TopRules,{store:e,xPadding:v,yPadding:E,width:p*e.scale+2*v,height:_*e.scale+2*E}),0===e.pages.length&&react_1.default.createElement(k,{store:e})))})),exports.default=exports.Workspace;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -10,12 +10,12 @@
     "design editor"
   ],
   "dependencies": {
-    "@blueprintjs/core": "^4.10.1",
-    "@blueprintjs/popover2": "^1.6.6",
-    "@blueprintjs/select": "^4.6.6",
+    "@blueprintjs/core": "^4.11.2",
+    "@blueprintjs/popover2": "^1.7.2",
+    "@blueprintjs/select": "^4.8.2",
     "@meronex/icons": "^4.0.0",
     "gradient-parser": "^1.0.2",
-    "konva": "^8.3.12",
+    "konva": "^8.3.13",
     "mobx": "6.6.2",
     "mobx-react-lite": "^3.4.0",
     "mobx-state-tree": "5.1.6",
@@ -23,13 +23,13 @@
     "quill": "^1.3.7",
     "rasterizehtml": "^1.3.1",
     "react-color": "^2.19.3",
-    "react-konva": "18.2.1",
+    "react-konva": "18.2.2",
     "react-konva-utils": "^0.3.0",
     "react-sortablejs": "6.1.1",
     "react-window": "^1.8.7",
     "sortablejs": "^1.15.0",
     "swr": "^1.3.0",
-    "use-image": "^1.0.12"
+    "use-image": "^1.1.0"
   },
   "targets": {
     "bundle": {
@@ -51,7 +51,7 @@
   ],
   "devDependencies": {
     "@types/jest": "^27",
-    "@types/react": "^18.0.20",
+    "@types/react": "^18.0.21",
     "@types/sanitize-html": "^2.6.2",
     "buffer": "^6.0.3",
     "jest": "^27",
@@ -62,7 +62,7 @@
     "react-dom": "^18.2.0",
     "svg-path-bounds": "^1.0.2",
     "ts-jest": "^27",
-    "typescript": "^4.8.3",
+    "typescript": "^4.8.4",
     "uglifyjs-folder": "^3.1.3"
   },
   "homepage": "https://polotno.dev/",