polotno 2.4.14 → 2.4.16
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/page.js
CHANGED
|
@@ -1 +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=exports.setTransformerStyle=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"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),nativeDrag=konva_1.default.DD._drag;window.removeEventListener("mousemove",nativeDrag),konva_1.default.DD._drag=function(e){(0,mobx_1.runInAction)((()=>{nativeDrag.call(this,e)}))},window.addEventListener("mousemove",konva_1.default.DD._drag);const rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const 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"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{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)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:n,height:r,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:n,height:r,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(r/2+70)*Math.cos(a-Math.PI/2),s=(r/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),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,altCloneEnabled:d})=>{const u=e.bleedVisible?t.bleed:0,m=t.computedWidth+2*u,g=t.computedHeight+2*u,h=(n-m*e.scale)/2,_=(r-g*e.scale)/2,f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=react_1.default.useRef(null),x=null==a||a,[v,E]=react_1.default.useState(null),[y,k]=react_1.default.useState({}),w=e.selectedElements.find((e=>e._cropModeEnabled)),S=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,D=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.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";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),S&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),f.current.nodes(o),null===(r=f.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,w,S,D,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),T=(0,screen_1.useMobile)(),X=(0,mobx_1.action)((e=>{var t,n;if(T)return;R.current=!1;const r=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(r||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(n=e.target.getStage())||void 0===n?void 0:n.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!A.visible)return;null===(t=p.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=p.current)||void 0===n?void 0:n.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=r.x,A.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!p.current)return;const t=p.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];p.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(o.top.id)}));const r=[...new Set(t)];e.selectElements(r)}A.visible=!1,R.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 C=n=>{if(e.activePage!==t&&t.select(),R.current)return;const r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,a=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),i=n.target.findAncestor("Transformer");if(!(r||a||i||o))return void e.selectElements([]);const l=n.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&r&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&r&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||r||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const L=e.activePage===t,O=null==c?void 0:c.PageControls,P=null==c?void 0:c.Tooltip,M=1/e.scale,I=0/e.scale;return react_1.default.createElement("div",{ref:b,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!p.current)return;p.current.setPointersPositions(n);const r=p.current.findOne(".elements-container").getRelativePointerPosition(),a=p.current.getPointerPosition(),o=p.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(r,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(L?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:p,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:C,onTap:C,onMouseDown:X,onMouseMove:n=>{if(!n.evt.altKey&&v)return void E(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(v)!==JSON.stringify(c)&&E(c)},onTouchStart:X,onDragStart:t=>{var n;const r=t.target.findAncestor(".element",!0);if(r){const a=e.getElementById(null==r?void 0:r.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(t),null===(n=f.current)||void 0===n||n.startDrag(t))}v&&E(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:h,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-container-2"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:u,y:u},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:u,y:u,name:"elements-container",listening:!e.isPlaying},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,h,_,h,r-_,n-h,r-_,n-h,_,h,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:h,y:_,scaleX:e.scale,scaleY:e.scale},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-M/2-I,y:-M/2-I,width:m+M+2*I,height:g+M+2*I,stroke:L&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:h+u*e.scale,y:_+u*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,onDragStart:n=>{var r;(null===(r=n.evt)||void 0===r?void 0:r.altKey)&&d&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,r=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(n=f.current)||void 0===n?void 0:n.getActiveAnchor();k({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),v&&v.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})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:m,height:g,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:m,height:g,align:"center",verticalAlign:"middle"})),P&&react_1.default.createElement(P,{components:c,store:e,page:t,stageRef:p})),react_1.default.createElement(TransformLabels,Object.assign({},y,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",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.com")},onTap:()=>{window.open("https://polotno.com")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),x&&L&&O&&react_1.default.createElement(O,{store:e,page:t,xPadding:h,yPadding:_}))}));
|
|
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=exports.setTransformerStyle=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"),validate_key_1=require("../utils/validate-key"),math_1=require("../utils/math"),unit_1=require("../utils/unit"),flags_1=require("../utils/flags"),screen_1=require("../utils/screen"),nativeDrag=konva_1.default.DD._drag;window.removeEventListener("mousemove",nativeDrag),konva_1.default.DD._drag=function(e){(0,mobx_1.runInAction)((()=>{nativeDrag.call(this,e)}))},window.addEventListener("mousemove",konva_1.default.DD._drag);const rotateFillGroup=new konva_1.default.Group,rotateFillSize=20;rotateFillGroup.add(new konva_1.default.Rect({width:20,height:20,fill:"white"})),rotateFillGroup.add(new konva_1.default.Path({scaleX:20/24,scaleY:20/24,data:"M4.98313549,11.0001422 C5.49589839,10.9914935 5.92501998,11.3703506 5.99116425,11.8666444 L5.99985778,11.9831355 L6.00348884,12.2068855 C6.11245031,15.4321748 8.76323537,17.9999971 11.9999971,17.9999971 C12.1869612,17.9999971 12.3726725,17.9914753 12.5567465,17.9745765 L12.2928932,17.7071068 C11.9023689,17.3165825 11.9023689,16.6834175 12.2928932,16.2928932 C12.6834175,15.9023689 13.3165825,15.9023689 13.7071068,16.2928932 L15.7071068,18.2928932 C16.0976311,18.6834175 16.0976311,19.3165825 15.7071068,19.7071068 L13.7071068,21.7071068 C13.3165825,22.0976311 12.6834175,22.0976311 12.2928932,21.7071068 C11.9023689,21.3165825 11.9023689,20.6834175 12.2928932,20.2928932 L12.6111505,19.9769552 C12.4086045,19.9922816 12.2047796,19.9999971 11.9999971,19.9999971 C7.7687005,19.9999971 4.28886152,16.7094374 4.01666425,12.5105203 L4.00420123,12.2575143 L4.00014222,12.0168645 C3.9908282,11.4646583 4.43092928,11.0094562 4.98313549,11.0001422 Z M11.7071068,2.29289322 C12.0675907,2.65337718 12.0953203,3.22060824 11.7902954,3.61289944 L11.7071068,3.70710678 L11.3891629,4.0230186 C11.5916051,4.00770767 11.7953244,4 12,4 C16.418278,4 20,7.581722 20,12 C20,12.5522847 19.5522847,13 19,13 C18.4477153,13 18,12.5522847 18,12 C18,8.6862915 15.3137085,6 12,6 C11.8129339,6 11.6271216,6.00853145 11.4429483,6.02544919 L11.7071068,6.29289322 C12.0976311,6.68341751 12.0976311,7.31658249 11.7071068,7.70710678 C11.3466228,8.06759074 10.7793918,8.09532028 10.3871006,7.79029539 L10.2928932,7.70710678 L8.29289322,5.70710678 C7.93240926,5.34662282 7.90467972,4.77939176 8.20970461,4.38710056 L8.29289322,4.29289322 L10.2928932,2.29289322 C10.6834175,1.90236893 11.3165825,1.90236893 11.7071068,2.29289322 Z",fill:"black"}));const rotaterFill=rotateFillGroup.toCanvas({pixelRatio:2,width:20,height:20}),TRANSFORMER_STYLE={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],borderEnabled:!0,rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,anchorStrokeWidth:2,borderStrokeWidth:2,rotateAnchorOffset:30,anchorStyleFunc:e=>{if(e.hasName("rotater")){const t=20;e.setAttrs({width:t,height:t,cornerRadius:t/2,offsetX:t/2,offsetY:t/2,fillPatternImage:rotaterFill,fillPatternScaleX:t/20/2,fillPatternScaleY:t/20/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}},setTransformerStyle=e=>{Object.assign(TRANSFORMER_STYLE,e)};exports.setTransformerStyle=setTransformerStyle;const 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"]},line:{enabledAnchors:[],borderEnabled:!1,rotateEnabled:!1},image:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},many:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},group:{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)),TransformLabels=(0,mobx_react_lite_1.observer)((({x:e,y:t,width:n,height:r,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:n,height:r,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(r/2+70)*Math.cos(a-Math.PI/2),s=(r/2+70)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+("px"===i.unit?"":" "+i.unit);return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2+c,y:(l.minY+l.maxY)/2+s,offsetX:14,offsetY:14,visible:"rotater"===o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)"}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:Math.round(konva_1.default.Util.radToDeg(a)).toString()+"°"})),react_1.default.createElement(react_konva_1.Label,{x:(l.minX+l.maxX)/2,y:l.maxY+20,visible:"rotater"!==o},react_1.default.createElement(react_konva_1.Tag,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),react_1.default.createElement(react_konva_1.Text,{align:"center",verticalAlign:"middle",fill:"white",padding:8,text:d})))})),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,altCloneEnabled:d})=>{const u=e.bleedVisible?t.bleed:0,m=t.computedWidth+2*u,g=t.computedHeight+2*u,h=(n-m*e.scale)/2,_=(r-g*e.scale)/2,f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=react_1.default.useRef(null),x=null==a||a,[v,E]=react_1.default.useState(null),[y,k]=react_1.default.useState({}),w=e.selectedElements.find((e=>e._cropModeEnabled)),S=e.selectedShapes.filter((e=>!e.resizable)).length>0,Y=e.selectedShapes.filter((e=>!e.draggable)).length>0,D=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!f.current)return;const a=f.current.getStage(),o=e.selectedShapes.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";transformerAttributes[i]?(f.current.setAttrs(Object.assign(Object.assign({},TRANSFORMER_STYLE),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||f.current.setAttrs({enabledAnchors:TRANSFORMER_STYLE.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&f.current.setAttrs({enabledAnchors:null===(n=transformerAttributes.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):f.current.setAttrs(TRANSFORMER_STYLE),S&&f.current.enabledAnchors([]),Y&&f.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{e.isDragging()||null==e||e.startDrag()})),f.current.nodes(o),null===(r=f.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,w,S,D,Y]);const A=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),R=react_1.default.useRef(!1),T=(0,screen_1.useMobile)(),X=(0,mobx_1.action)((e=>{var t,n;if(T)return;R.current=!1;const r=e.target.findAncestor(".elements-container"),a=e.target.findAncestor("Transformer"),o=e.target.findAncestor(".page-abs-container");if(r||a||o)return;const i=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();i&&(A.visible=!0,A.x1=i.x,A.y1=i.y,A.x2=i.x,A.y2=i.y,(null===(n=e.target.getStage())||void 0===n?void 0:n.getPointersPositions().length)>=2&&(A.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!A.visible)return;null===(t=p.current)||void 0===t||t.setPointersPositions(e);let r=(null===(n=p.current)||void 0===n?void 0:n.getPointerPosition())||{x:A.x2,y:A.y2};A.x2=r.x,A.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!A.visible)return;if(!p.current)return;const t=p.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];p.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(o.top.id)}));const r=[...new Set(t)];e.selectElements(r)}A.visible=!1,R.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 C=n=>{if(e.activePage!==t&&t.select(),R.current)return;const r=n.evt.ctrlKey||n.evt.metaKey||n.evt.shiftKey,a=n.target.findAncestor(".elements-container"),o=n.target.findAncestor(".page-abs-container"),i=n.target.findAncestor("Transformer");if(!(r||a||i||o))return void e.selectElements([]);const l=n.target.findAncestor(".element",!0),c=e.getElementById(null==l?void 0:l.id()),s=null==c?void 0:c.top,d=null==s?void 0:s.id,u=e.selectedElementsIds.indexOf(d)>=0;d&&r&&!u?e.selectElements(e.selectedElementsIds.concat([d])):d&&r&&u?e.selectElements(e.selectedElementsIds.filter((e=>e!==d))):!d||r||u||e.selectElements([d])};(0,use_transformer_snap_1.useSnap)(f);const L=e.activePage===t,O=null==c?void 0:c.PageControls,P=null==c?void 0:c.Tooltip,M=1/e.scale,I=0/e.scale;return react_1.default.createElement("div",{ref:b,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!p.current)return;p.current.setPointersPositions(n);const r=p.current.findOne(".elements-container").getRelativePointerPosition(),a=p.current.getPointerPosition(),o=p.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o.reverse())].map((t=>e.getElementById(t.id()))),l=i[0];onDomDrop&&(onDomDrop(r,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:n+"px"},className:"polotno-page-container"+(L?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:p,width:Math.min(n,4*window.innerWidth),height:Math.min(r,4*window.innerHeight),onClick:C,onTap:C,onMouseDown:X,onMouseMove:n=>{if(!n.evt.altKey&&v)return void E(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.selectedShapes),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(v)!==JSON.stringify(c)&&E(c)},onTouchStart:X,onDragStart:t=>{var n;const r=t.target.findAncestor(".element",!0);if(r){const a=e.getElementById(null==r?void 0:r.id()),o=null==a?void 0:a.top,i=null==o?void 0:o.id;!(e.selectedElementsIds.indexOf(i)>=0)&&i&&(e.selectElements([i]),t.target.stopDrag(),t.target.startDrag(t),null===(n=f.current)||void 0===n||n.startDrag(t))}v&&E(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:h,y:_,scaleX:e.scale,scaleY:e.scale,name:"page-container"},react_1.default.createElement(react_konva_1.Group,{name:"page-container-2"},react_1.default.createElement(react_konva_1.Group,{name:"page-background-group",x:u,y:u},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:u,y:u,name:"elements-container",listening:!e.isPlaying},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,h,_,h,r-_,n-h,r-_,n-h,_,h,_],listening:!1,closed:!0,fill:o}),react_1.default.createElement(react_konva_1.Group,{x:h,y:_,scaleX:e.scale,scaleY:e.scale},react_1.default.createElement(react_konva_1.Rect,{name:"page-highlight",hideInExport:!0,x:-M/2-I,y:-M/2-I,width:m+M+2*I,height:g+M+2*I,stroke:L&&e.pages.length>1?l:i,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),react_1.default.createElement(react_konva_1.Group,{x:h+u*e.scale,y:_+u*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},react_1.default.createElement(react_konva_1.Transformer,{ref:f,onDragStart:n=>{var r;(null===(r=n.evt)||void 0===r?void 0:r.altKey)&&d&&e.selectedElements.forEach((e=>{const n=e.clone({},{skipSelect:!0}),r=t.children.indexOf(e);t.setElementZIndex(n.id,r)})),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction()},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,r=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!r?e:t},onTransform:e=>{var t,n;const r=null===(t=f.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(n=f.current)||void 0===n?void 0:n.getActiveAnchor();k({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{k({}),e.history.endTransaction()},visible:!e.isPlaying}),v&&v.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})}))))),t._rendering&&react_1.default.createElement(react_konva_1.Group,null,react_1.default.createElement(react_konva_1.Rect,{width:m,height:g,fill:"rgba(255,255,255,0.9)"}),react_1.default.createElement(react_konva_1.Text,{text:"Rendering...",fontSize:60,width:m,height:g,align:"center",verticalAlign:"middle"})),P&&react_1.default.createElement(P,{components:c,store:e,page:t,stageRef:p})),react_1.default.createElement(TransformLabels,Object.assign({},y,{store:e})),react_1.default.createElement(Selection,{selection:A}),validate_key_1.shouldShowCredit.value&&react_1.default.createElement(react_konva_1.Text,{text:"Powered by polotno.com",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.com")},onTap:()=>{window.open("https://polotno.com")}}),react_1.default.createElement(react_konva_1.Group,{name:"line-guides"}))),x&&L&&O&&react_1.default.createElement(O,{store:e,page:t,xPadding:h,yPadding:_}))}));
|
package/canvas/text-element.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.TextElement=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),svg_round_corners_1=require("svg-round-corners"),use_color_1=require("./use-color"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),mobx_state_tree_1=require("mobx-state-tree"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:n,cursorPosition:i})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+l.fontSize()*l.lineHeight()+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n .polotno-input::placeholder {\n color: ${o.color};\n opacity: 0.6;\n }\n `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=i||t.value.length;t.selectionStart=t.selectionEnd=r,n&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]),react_1.default.useEffect((()=>{window.addEventListener("blur",r);const e=e=>{var t;(null===(t=s.current)||void 0===t?void 0:t.contains(e.target))||r()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",r),window.removeEventListener("touchstart",e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),n=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(n.current=!0),r(!0),setTimeout((()=>{n.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:n.current}},useFontLoader=(e,t)=>{const[r,n]=react_1.default.useReducer((e=>e+1),0),i=react_1.default.useRef((0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if(i.current=(0,fonts_1.isFontLoaded)(t),i.current)return;let r=!0;return(async()=>{i.current=!1,n();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),setTimeout(o,50),r&&(i.current=!0,n())})(),()=>{r=!1}}),[t]),[i.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:n})=>react_1.default.useMemo((()=>{if("number"==typeof n)return n;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=n,e.innerText="Test text",document.body.appendChild(e);const i=e.offsetHeight;return document.body.removeChild(e),i/r}),[e,t,r,n]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,n=getRelativePointerPosition(r),i=r.textArr,o=Math.floor(n.y/(r.fontSize()*r.lineHeight())),a=i.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=i[o])&&void 0!==t?t:i[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((n.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),n=e.height(),i=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,n=i.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=n.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(n),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:n="left",padding:i=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===n?e.cx=r-e.width/2:"left"===n&&(e.cx=e.width/2),"justify"!==n||e.lastInParagraph||(e.width=r),"justify"===n&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-i}`;e.forEach(((r,n)=>{const{cx:o}=r,a=e[n-1];a&&a.width>r.width?l+=` L ${o+r.width/2+i} ${n*t+i}`:l+=` L ${o+r.width/2+i} ${n*t-i}`;const s=e[n+1];s&&s.width>r.width?l+=` L ${o+r.width/2+i} ${(n+1)*t-i}`:l+=` L ${o+r.width/2+i} ${(n+1)*t+i}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:n}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${n-r.width/2-i} ${(s+1)*t-i}`:l+=` L ${n-r.width/2-i} ${(s+1)*t+i}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${n-r.width/2-i} ${s*t+i}`:l+=` L ${n-r.width/2-i} ${s*t-i}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),n=react_1.default.useRef(null),{editorEnabled:i,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(g)&&_(n)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[x]=(0,exports.useFontLoader)(t,e.fontFamily),p=(0,text_1.removeTags)(e.text),v=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!x)return;const{textOverflow:n}=flags_1.flags;if(e.a.height)if("change-font-size"!==n||s||t.isPlaying){if("resize"===n){const n=v();f&&e.a.height<n&&t.history.ignore((()=>{var t;(0,mobx_state_tree_1.isAlive)(e)&&e.set({height:n}),null===(t=r.current)||void 0===t||t.height(n)}),!1,!0),f||e.a.height===n||t.history.ignore((()=>{var t;(0,mobx_state_tree_1.isAlive)(e)&&e.set({height:n}),null===(t=r.current)||void 0===t||t.height(n)}),!1,!0)}}else{const n=findFitFontSize(r.current,e);if(n!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:n})}),!1,!0);const i=v();e.a.height===i||f||t.history.ignore((()=>{e.set({height:i})}),!1,!0)}else{const r=v();t.history.ignore((()=>{e.set({height:r})}),!1,!0)}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[x]);const m=react_1.default.useRef(null),y=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const n=t.selectedShapes.find((t=>t===e));n&&e.contentEditable&&(y.current=getCursorPosition(r),e.toggleEditMode())},S=!p&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:x,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,L=(0,use_color_1.useColor)(e),T=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),z=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:n,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!p,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:T,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!p,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:p||e.placeholder},L,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:z?e.draggable&&u:e.draggable,preventDefault:!z||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),c.current=r.current.height()},onTransform:t=>{var r,i;const o=t.target;null===(r=n.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(i=o.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,n=e.a.fontSize;let i=r;r<n&&(i=n,m.current&&o.position(m.current)),o.width(i),o.scaleX(1),o.scaleY(1);const a=v();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?v():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}m.current=t.target.position()},onTransformEnd:t=>{var r;const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*i),width:Math.ceil(t.target.width()*i),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*i,shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i}),null===(r=n.current)||void 0===r||r.setAttrs({scaleX:1,scaleY:1}),d(!1)}})),i&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:y.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|
|
1
|
+
"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.usePrevious=exports.getLineHeight=exports.useFontLoader=exports.getDir=exports.isRTLText=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),react_konva_1=require("react-konva"),react_konva_utils_1=require("react-konva-utils"),mobx_1=require("mobx"),svg_round_corners_1=require("svg-round-corners"),use_color_1=require("./use-color"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),mobx_state_tree_1=require("mobx-state-tree"),styleNode=document.createElement("style");styleNode.type="text/css",document.head.appendChild(styleNode);const initialStyles={border:"none",padding:"0px",overflow:"hidden",background:"none",outline:"none",resize:"none",overflowWrap:"break-word",whiteSpace:"pre-wrap",userSelect:"text",wordBreak:"normal"};function isRTL(e){var t="֑-߿יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+t+"]*?["+t+"]").test(e)}function isRTLText(e){e=e.replace(/\s/g,"");let t=0;for(var r=0;r<e.length;r++){isRTL(e[r])&&(t+=1)}return t>e.length/2}function getDir(e){return isRTLText(e)?"rtl":"ltr"}exports.isRTLText=isRTLText,exports.getDir=getDir;const TextInput=(0,mobx_react_lite_1.observer)((({textNodeRef:e,element:t,onBlur:r,selectAll:n,cursorPosition:i})=>{const[o,a]=react_1.default.useState(initialStyles),l=e.current;react_1.default.useLayoutEffect((()=>{const e={};e.width=l.width()-2*l.padding()+"px",e.height=l.height()-2*l.padding()+l.fontSize()*l.lineHeight()+"px",e.fontSize=l.fontSize()+"px",e.lineHeight=l.lineHeight()+.01,e.fontFamily=l.fontFamily(),e.textAlign=l.align(),e.color=l.fill(),e.fontWeight=t.fontWeight,e.fontStyle=t.fontStyle,e.letterSpacing=t.letterSpacing+"em";const r=`\n .polotno-input::placeholder {\n color: ${o.color};\n opacity: 0.6;\n }\n `;styleNode.innerHTML="",styleNode.appendChild(document.createTextNode(r)),JSON.stringify(e)!==JSON.stringify(o)&&a(e)}));const s=react_1.default.useRef(null);react_1.default.useEffect((()=>{const e=setTimeout((()=>{var e;const t=s.current;if(!t)return;null===(e=s.current)||void 0===e||e.focus();const r=i||t.value.length;t.selectionStart=t.selectionEnd=r,n&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]),react_1.default.useEffect((()=>{window.addEventListener("blur",r);const e=e=>{var t;(null===(t=s.current)||void 0===t?void 0:t.contains(e.target))||r()};return window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",r),window.removeEventListener("touchstart",e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.a.height-c)/2),"bottom"===t.verticalAlign&&(d=t.a.height-c);const u=(0,text_1.removeTags)(t.text);return react_1.default.createElement(react_konva_utils_1.Html,null,react_1.default.createElement("textarea",{className:"polotno-input",ref:s,dir:getDir(u),style:Object.assign(Object.assign(Object.assign({},initialStyles),o),{paddingTop:d+"px"}),value:u,onChange:e=>{t.set({text:e.target.value})},placeholder:t.placeholder,onBlur:r}))})),useEditor=e=>{const[t,r]=react_1.default.useState(!1),n=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(n.current=!0),r(!0),setTimeout((()=>{n.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:n.current}},useFontLoader=(e,t)=>{const[r,n]=react_1.default.useReducer((e=>e+1),0),i=react_1.default.useRef((0,fonts_1.isFontLoaded)(t));return react_1.default.useLayoutEffect((()=>{if(i.current=(0,fonts_1.isFontLoaded)(t),i.current)return;let r=!0;return(async()=>{i.current=!1,n();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),setTimeout(o,100),r&&(i.current=!0,n())})(),()=>{r=!1}}),[t]),[i.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:n})=>react_1.default.useMemo((()=>{if("number"==typeof n)return n;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=n,e.innerText="Test text",document.body.appendChild(e);const i=e.offsetHeight;return document.body.removeChild(e),i/r}),[e,t,r,n]);function getRelativePointerPosition(e){var t=e.getAbsoluteTransform().copy();t.invert();var r=e.getStage().getPointerPosition();return t.point(r)}function getCursorPosition(e){var t;const r=e.target,n=getRelativePointerPosition(r),i=r.textArr,o=Math.floor(n.y/(r.fontSize()*r.lineHeight())),a=i.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=i[o])&&void 0!==t?t:i[0];let s=0;"right"===r.align()?s=r.width()-l.width:"center"===r.align()&&(s=r.width()/2-l.width/2);return a+Math.round((n.x-s)/l.width*l.text.length)}function usePrevious(e){const t=react_1.default.useRef(e),r=react_1.default.useRef(e);return react_1.default.useMemo((()=>{r.current=t.current,t.current=e}),[e]),r.current}function findFitFontSize(e,t){const r=e.fontSize(),n=e.height(),i=(0,text_1.removeTags)(t.text);let o=t.a.fontSize;e.height(void 0);const a=Math.round(2*t.a.fontSize)-1;for(let r=1;r<a;r++){const r=t.a.height&&e.height()>t.a.height,n=i.split("\n").join(" ").split(/[\s-]+/);let a=e.textArr.map((e=>e.text)).join(";");const l=n.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;o-=.5,e.fontSize(o)}return e.fontSize(r),e.height(n),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:n="left",padding:i=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===n?e.cx=r-e.width/2:"left"===n&&(e.cx=e.width/2),"justify"!==n||e.lastInParagraph||(e.width=r),"justify"===n&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-i}`;e.forEach(((r,n)=>{const{cx:o}=r,a=e[n-1];a&&a.width>r.width?l+=` L ${o+r.width/2+i} ${n*t+i}`:l+=` L ${o+r.width/2+i} ${n*t-i}`;const s=e[n+1];s&&s.width>r.width?l+=` L ${o+r.width/2+i} ${(n+1)*t-i}`:l+=` L ${o+r.width/2+i} ${(n+1)*t+i}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:n}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${n-r.width/2-i} ${(s+1)*t-i}`:l+=` L ${n-r.width/2-i} ${(s+1)*t+i}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${n-r.width/2-i} ${s*t+i}`:l+=` L ${n-r.width/2-i} ${s*t-i}`}l+=" Z";const d=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(d,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),n=react_1.default.useRef(null),{editorEnabled:i,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.a.height),u=t.selectedElements.indexOf(e)>=0,{textVerticalResizeEnabled:f}=flags_1.flags,h=usePrevious(e.fontFamily),[g,_]=react_1.default.useState([]);react_1.default.useEffect((()=>{var e,t;const n=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(n)!==JSON.stringify(g)&&_(n)})),react_1.default.useEffect((()=>{if(e.a.width)return;const t=r.current;t.width(600),e.set({width:1.4*t.getTextWidth()})}),[]),react_1.default.useLayoutEffect((()=>(0,mobx_1.autorun)((()=>{const t=r.current;(0,apply_filters_1.applyFilter)(t,e)}))));const[x]=(0,exports.useFontLoader)(t,e.fontFamily),p=(0,text_1.removeTags)(e.text),v=()=>{const e=r.current.clone({height:void 0}),t=Math.ceil(e.fontSize()*e.lineHeight()*e.textArr.length+1);return e.destroy(),t};react_1.default.useLayoutEffect((()=>{if(!x)return;const{textOverflow:n}=flags_1.flags;if(e.a.height)if("change-font-size"!==n||s||t.isPlaying){if("resize"===n){const n=v();f&&e.a.height<n&&t.history.ignore((()=>{var t;(0,mobx_state_tree_1.isAlive)(e)&&e.set({height:n}),null===(t=r.current)||void 0===t||t.height(n)}),!1,!0),f||e.a.height===n||t.history.ignore((()=>{var t;(0,mobx_state_tree_1.isAlive)(e)&&e.set({height:n}),null===(t=r.current)||void 0===t||t.height(n)}),!1,!0)}}else{const n=findFitFontSize(r.current,e);if(n!==e.a.fontSize)return void t.history.ignore((()=>{e.set({fontSize:n})}),!1,!0);const i=v();e.a.height===i||f||t.history.ignore((()=>{e.set({height:i})}),!1,!0)}else{const r=v();t.history.ignore((()=>{e.set({height:r})}),!1,!0)}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[x]);const m=react_1.default.useRef(null),y=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const n=t.selectedShapes.find((t=>t===e));n&&e.contentEditable&&(y.current=getCursorPosition(r),e.toggleEditMode())},S=!p&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:x,fontFamily:e.fontFamily,fontSize:e.a.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,L=(0,use_color_1.useColor)(e),T=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:JSON.parse(JSON.stringify(g)),cornerRadius:e.backgroundCornerRadius*(e.a.fontSize*b*.5),lineHeight:b*e.a.fontSize,padding:e.backgroundPadding*(e.a.fontSize*b*.5),width:e.a.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.a.fontSize,b,e.backgroundPadding,e.a.width,e.align,g]),z=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.a.height-g.length*b*e.a.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.a.height-g.length*b*e.a.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:n,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!p,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:T,fill:e.backgroundColor,offsetY:-k}),react_1.default.createElement(react_konva_1.Text,Object.assign({ref:r,id:e.id,name:"element",hideInExport:!e.showInExport||!p,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.a.width,height:e.a.height,text:p||e.placeholder},L,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.a.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:z?e.draggable&&u:e.draggable,preventDefault:!z||u,opacity:S,visible:!e._editModeEnabled,ellipsis:"ellipsis"===flags_1.flags.textOverflow,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,lineHeight:b,letterSpacing:e.letterSpacing*e.a.fontSize,listening:E,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),c.current=r.current.height()},onTransform:t=>{var r,i;const o=t.target;null===(r=n.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(i=o.getStage())||void 0===i?void 0:i.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,n=e.a.fontSize;let i=r;r<n&&(i=n,m.current&&o.position(m.current)),o.width(i),o.scaleX(1),o.scaleY(1);const a=v();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,c.current);o.height(t),e.set({height:o.height()})}e.set({x:o.x(),y:o.y(),width:o.width(),rotation:o.rotation()}),(0,apply_filters_1.applyFilter)(o,e)}if("top-center"===a||"bottom-center"===a){let r="resize"===flags_1.flags.textOverflow?v():b*e.a.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}m.current=t.target.position()},onTransformEnd:t=>{var r;const i=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:Math.round(e.a.fontSize*i),width:Math.ceil(t.target.width()*i),x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),height:t.target.height()*i,shadowBlur:e.shadowBlur*i,shadowOffsetX:e.shadowOffsetX*i,shadowOffsetY:e.shadowOffsetY*i,strokeWidth:e.strokeWidth*i}),null===(r=n.current)||void 0===r||r.setAttrs({scaleX:1,scaleY:1}),d(!1)}})),i&&react_1.default.createElement(react_konva_1.Group,{x:e.a.x,y:e.a.y,rotation:e.a.rotation},react_1.default.createElement(TextInput,{textNodeRef:r,element:e,selectAll:o,cursorPosition:y.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|
package/package.json
CHANGED
|
@@ -44,4 +44,4 @@
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
${(0,screen_1.mobileStyle)("\n display: none;\n ")}
|
|
47
|
-
`,HideButton=({onClick:e})=>react_1.default.createElement(HideButtonContainer,{onClick:e},react_1.default.createElement("svg",{width:"96",height:"16",viewBox:"0 0 96 16",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("path",{className:"fill stroke",d:"M 95.865 16 C 93.555 14.8571 92.4 12.5714 88.6116 8.9143 C 88.4008 8.6286 88.242 8.4571 88.0054 8.3429 L 88.011 8.2286 C 85.701 5.9429 83.622 3.8857 81.1965 2.4 C 79.002 1.1429 76.3455 0.3429 72.765 0.1143 V 0 H 25.41 C 21.1365 0 18.1335 0.8 15.477 2.2857 C 12.936 3.7714 10.9725 5.8286 8.5073 8.2286 L 8.547 8.24 C 8.316 8.4571 8.085 8.6278 7.8393 8.831 C 4.0161 12.6741 3.465 14.8571 0 16"})),react_1.default.createElement("div",{className:"pointer"},"<")),Page=(0,mobx_react_lite_1.observer)((({page:e})=>{const[
|
|
47
|
+
`,HideButton=({onClick:e})=>react_1.default.createElement(HideButtonContainer,{onClick:e},react_1.default.createElement("svg",{width:"96",height:"16",viewBox:"0 0 96 16",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("path",{className:"fill stroke",d:"M 95.865 16 C 93.555 14.8571 92.4 12.5714 88.6116 8.9143 C 88.4008 8.6286 88.242 8.4571 88.0054 8.3429 L 88.011 8.2286 C 85.701 5.9429 83.622 3.8857 81.1965 2.4 C 79.002 1.1429 76.3455 0.3429 72.765 0.1143 V 0 H 25.41 C 21.1365 0 18.1335 0.8 15.477 2.2857 C 12.936 3.7714 10.9725 5.8286 8.5073 8.2286 L 8.547 8.24 C 8.316 8.4571 8.085 8.6278 7.8393 8.831 C 4.0161 12.6741 3.465 14.8571 0 16"})),react_1.default.createElement("div",{className:"pointer"},"<")),Page=(0,mobx_react_lite_1.observer)((({page:e,scale:t})=>{const[r,a]=react_1.default.useState(null),l=e.store.activePage===e;react_1.default.useEffect((()=>{const t=async()=>{const t=await e.store.toDataURL({pageId:e.id,pixelRatio:.1});a(t)};let r=null;const l=(0,mobx_state_tree_1.onSnapshot)(e.children,(()=>{r||(r=setTimeout((()=>{t(),r=null}),1e3))}));return t(),()=>{clearTimeout(r),l()}}),[]);const o=react_1.default.useRef(null);return react_1.default.createElement("div",{style:{width:e.duration*t+"px",height:"60px",display:"flex",position:"relative",overflow:"hidden",borderRadius:"15px",overflow:"hidden"},ref:o},react_1.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"10px",backgroundImage:`url("${r}")`,backgroundRepeat:"repeat-x",backgroundSize:"auto 100%"},onClick:()=>{e.store.selectPage(e.id)}}),l&&react_1.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:"2px solid rgb(0, 161, 255, 0.9)"}}),react_1.default.createElement("div",{style:{position:"absolute",top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:t=>{((t,r)=>{t.preventDefault();const a=t=>{t.preventDefault();const a="start"===r?7:-7,{clientX:l}=t,{left:i,width:n}=o.current.getBoundingClientRect(),s=(l-i-a)/n;"start"===r||"end"===r&&e.set({duration:Math.max(1e3,s*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t,"end")}}))})),CurrentTime=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{position:"absolute",left:e.currentTime*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})));exports.Pages=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{display:"flex",position:"relative"}},e.pages.map((e=>react_1.default.createElement(Page,{key:e.id,page:e,scale:t}))),react_1.default.createElement(CurrentTime,{store:e,scale:t})))),exports.PagesTimeline=(0,mobx_react_lite_1.observer)((({store:e})=>react_1.default.createElement("div",{className:"bp5-navbar",style:{display:"flex",padding:"5px",height:"auto"}},react_1.default.createElement("div",{style:{width:"100%",position:"relative",height:"100px"}},react_1.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"10px"}},react_1.default.createElement("div",{style:{height:"60px",display:"flex"}},react_1.default.createElement("div",{style:{width:"80px"}},react_1.default.createElement(core_1.Button,{icon:e.isPlaying?react_1.default.createElement(icons_1.Pause,null):react_1.default.createElement(icons_1.Play,null),onClick:()=>{e.isPlaying?e.stop():e.play()},minimal:!0,style:{width:"100%",height:"100%"}})),react_1.default.createElement(exports.Pages,{store:e,scale:.02}),react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Plus,null),onClick:()=>{e.addPage()},minimal:!0})),react_1.default.createElement(HideButton,null))))));
|