polotno 1.9.7 → 1.9.8
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 +1 -1
- package/canvas/text-element.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +13 -13
- package/utils/validate-key.js +1 -1
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=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"),screen_1=require("../utils/screen"),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}),DEFAULT_TRANSFORMER_ATTRIBUTES={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,anchorStrokeWidth:2,borderStrokeWidth:2,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"})}}},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+90)*Math.cos(a-Math.PI/2),s=(r/2+90)*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})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(n-u*e.scale)/2,_=(r-m*e.scale)/2,h=react_1.default.useRef(null),f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,A=e.selectedShapes.filter((e=>!e.draggable)).length>0,X=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,n,r;if(!h.current)return;const a=h.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]?(h.current.setAttrs(Object.assign(Object.assign({},DEFAULT_TRANSFORMER_ATTRIBUTES),transformerAttributes[i])),"svg"!==i&&"image"!==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),w&&h.current.enabledAnchors([]),A&&h.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),h.current.nodes(o),null===(r=h.current.getLayer())||void 0===r||r.batchDraw()}),[e.selectedElements,k,w,X,A]);const Y=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),T=react_1.default.useRef(!1),R=(0,screen_1.useMobile)(),S=(0,mobx_1.action)((n=>{var r,a;if(R)return;T.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&&(Y.visible=!0,Y.x1=c.x,Y.y1=c.y,Y.x2=c.x,Y.y2=c.y,(null===(a=n.target.getStage())||void 0===a?void 0:a.getPointersPositions().length)>=2&&(Y.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,n;if(!Y.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:Y.x2,y:Y.y2};Y.x2=r.x,Y.y2=r.y})),n=(0,mobx_1.action)((()=>{if(!Y.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)}Y.visible=!1,T.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=t=>{if(T.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.getElementById(null==i?void 0:i.id()),c=null==l?void 0:l.top,s=null==c?void 0:c.id,d=e.selectedElementsIds.indexOf(s)>=0;s&&n&&!d?e.selectElements(e.selectedElementsIds.concat([s])):s&&n&&d?e.selectElements(e.selectedElementsIds.filter((e=>e!==s))):!s||n||d||e.selectElements([s])};(0,use_transformer_snap_1.useSnap)(h);const D=e.activePage===t,L=(null==c?void 0:c.PageControls)||page_controls_1.PageControls,P=1/e.scale,O=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),!f.current)return;f.current.setPointersPositions(n);const r=f.current.findOne(".elements-container").getRelativePointerPosition(),a=f.current.getPointerPosition(),o=f.current.getAllIntersections(a).map((e=>e.findAncestor(".element",!0))).filter(Boolean),i=[...new Set(o)].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"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:f,width:n,height:r,onClick:C,onTap:C,onMouseDown:S,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:S,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(),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:-P/2-O,y:-P/2-O,width:u+P+2*O,height:m+P+2*O,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},onTransform:e=>{var t,n;const r=null===(t=h.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(n=h.current)||void 0===n?void 0:n.getActiveAnchor();y({anchor:a,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:e=>{y({})}}),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(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:Y}),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"}))),b&&D&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:_}))}));
|
|
1
|
+
"use strict";var __rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r},__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"),screen_1=require("../utils/screen"),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}),DEFAULT_TRANSFORMER_ATTRIBUTES={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,anchorStrokeWidth:2,borderStrokeWidth:2,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"})}}},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,r=__rest(e,["url"]);const[n,a]=(0,use_image_1.default)(t,"anonymous"),o=n?(0,crop_1.getCrop)(n,{width:r.width,height:r.height},"center-middle"):{};return(0,image_element_1.useImageLoader)(a,"background"),react_1.default.createElement(react_konva_1.Image,Object.assign({image:n},r,o))},ColorBackground=e=>react_1.default.createElement(react_konva_1.Rect,Object.assign({},e)),PageBackground=e=>{const{background:t,scale:r,borderColor:n}=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 r=e.getContext("2d");return r&&(r.fillStyle="black",r.fillRect(t,0,t,t),r.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:r,height:n,rotation:a,anchor:o,store:i})=>{const l=(0,math_1.getClientRect)({x:e,y:t,width:r,height:n,rotation:konva_1.default.Util.radToDeg(a)});if(void 0===o)return null;const c=(n/2+90)*Math.cos(a-Math.PI/2),s=(n/2+90)*Math.sin(a-Math.PI/2),d=(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:r/i.scale,precious:"px"===i.unit?0:1})+" x "+(0,unit_1.pxToUnitRounded)({unit:i.unit,dpi:i.dpi,px:n/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 r=e.filter((e=>e.alwaysOnTop)),n=e.filter((e=>!e.alwaysOnTop)).concat(r);return react_1.default.createElement(react_1.default.Fragment,null,n.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:r,height:n,pageControlsEnabled:a,backColor:o,pageBorderColor:i,activePageBorderColor:l,components:c,bleedColor:s})=>{const d=e.bleedVisible?t.bleed:0,u=t.computedWidth+2*d,m=t.computedHeight+2*d,g=(r-u*e.scale)/2,_=(n-m*e.scale)/2,h=react_1.default.useRef(null),f=react_1.default.useRef(null),p=react_1.default.useRef(null),b=null==a||a,[x,v]=react_1.default.useState(null),[E,y]=react_1.default.useState({}),k=e.selectedElements.find((e=>e._cropModeEnabled)),w=e.selectedShapes.filter((e=>!e.resizable)).length>0,A=e.selectedShapes.filter((e=>!e.draggable)).length>0,X=e.selectedElements.filter((e=>!e.visible)).length>0;react_1.default.useLayoutEffect((()=>{var t,r,n;if(!h.current)return;const a=h.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]?(h.current.setAttrs(Object.assign(Object.assign({},DEFAULT_TRANSFORMER_ATTRIBUTES),transformerAttributes[i])),"svg"!==i&&"image"!==i||e.selectedElements[0].keepRatio||h.current.setAttrs({enabledAnchors:DEFAULT_TRANSFORMER_ATTRIBUTES.enabledAnchors}),"text"===i&&flags_1.flags.textVerticalResizeEnabled&&h.current.setAttrs({enabledAnchors:null===(r=transformerAttributes.text.enabledAnchors)||void 0===r?void 0:r.concat(["bottom-center"])})):h.current.setAttrs(DEFAULT_TRANSFORMER_ATTRIBUTES),w&&h.current.enabledAnchors([]),A&&h.current.rotateEnabled(!1);o.find((e=>null==e?void 0:e.isDragging()))&&o.forEach((e=>{null==e||e.startDrag()})),h.current.nodes(o),null===(n=h.current.getLayer())||void 0===n||n.batchDraw()}),[e.selectedElements,k,w,X,A]);const Y=(0,mobx_react_lite_1.useLocalObservable)((()=>({visible:!1,x1:0,y1:0,x2:0,y2:0}))),T=react_1.default.useRef(!1),R=(0,screen_1.useMobile)(),S=(0,mobx_1.action)((r=>{var n,a;if(R)return;T.current=!1,e.activePage!==t&&t.select();const o=r.target.findAncestor(".elements-container"),i=r.target.findAncestor("Transformer"),l=r.target.findAncestor(".page-abs-container");if(o||i||l)return;const c=null===(n=r.target.getStage())||void 0===n?void 0:n.getPointerPosition();c&&(Y.visible=!0,Y.x1=c.x,Y.y1=c.y,Y.x2=c.x,Y.y2=c.y,(null===(a=r.target.getStage())||void 0===a?void 0:a.getPointersPositions().length)>=2&&(Y.visible=!1))}));react_1.default.useEffect((()=>{const t=(0,mobx_1.action)((e=>{var t,r;if(!Y.visible)return;null===(t=f.current)||void 0===t||t.setPointersPositions(e);let n=(null===(r=f.current)||void 0===r?void 0:r.getPointerPosition())||{x:Y.x2,y:Y.y2};Y.x2=n.x,Y.y2=n.y})),r=(0,mobx_1.action)((()=>{if(!Y.visible)return;if(!f.current)return;const t=f.current.findOne(".selection"),r=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(r.width&&r.height){const t=[];f.current.find(".element").forEach((n=>{const a=n.getClientRect(),o=e.getElementById(n.id()),i=null==o?void 0:o.draggable,l=null==o?void 0:o.selectable;konva_1.default.Util.haveIntersection(r,a)&&i&&l&&t.push(n.id())})),e.selectElements(t)}Y.visible=!1,T.current=!0}));return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",r),window.addEventListener("touchend",r),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",r),window.removeEventListener("touchend",r)}}),[]);const C=t=>{if(T.current)return;const r=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,n=t.target.findAncestor(".elements-container"),a=t.target.findAncestor(".page-abs-container"),o=t.target.findAncestor("Transformer");if(!(r||n||o||a))return void e.selectElements([]);const i=t.target.findAncestor(".element",!0),l=e.getElementById(null==i?void 0:i.id()),c=null==l?void 0:l.top,s=null==c?void 0:c.id,d=e.selectedElementsIds.indexOf(s)>=0;s&&r&&!d?e.selectElements(e.selectedElementsIds.concat([s])):s&&r&&d?e.selectElements(e.selectedElementsIds.filter((e=>e!==s))):!s||r||d||e.selectElements([s])};(0,use_transformer_snap_1.useSnap)(h);const D=e.activePage===t,L=(null==c?void 0:c.PageControls)||page_controls_1.PageControls,P=1/e.scale,O=0/e.scale;return react_1.default.createElement("div",{ref:p,onDragOver:e=>e.preventDefault(),onDrop:r=>{if(r.preventDefault(),!f.current)return;f.current.setPointersPositions(r);const n=f.current.findOne(".elements-container").getRelativePointerPosition(),a=f.current.getPointerPosition(),o=f.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(n,l,{elements:i,page:t}),onDomDrop=null)},style:{position:"relative",width:r+"px"},className:"polotno-page-container"+(D?" active-page":"")},react_1.default.createElement(react_konva_1.Stage,{ref:f,width:r,height:n,onClick:C,onTap:C,onMouseDown:S,onMouseMove:r=>{if(!r.evt.altKey&&x)return void v(null);if(!r.evt.altKey)return;const n=r.target.findAncestor(".element",!0),a=null==n?void 0:n.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:S,onDragStart:t=>{var r;const n=t.target.findAncestor(".element",!0);if(n){const a=e.getElementById(null==n?void 0:n.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(),null===(r=h.current)||void 0===r||r.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:r,height:n,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,r,0,r,n,0,n,0,0,g,_,g,n-_,r-g,n-_,r-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:-P/2-O,y:-P/2-O,width:u+P+2*O,height:m+P+2*O,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 r=t.width<1||t.height<1,n=e.width<1||e.height<1;return r&&!n?e:t},onTransform:e=>{var t,r;const n=null===(t=h.current)||void 0===t?void 0:t.__getNodeRect(),a=null===(r=h.current)||void 0===r?void 0:r.getActiveAnchor();y({anchor:a,x:n.x,y:n.y,rotation:n.rotation,width:n.width,height:n.height})},onTransformEnd:e=>{y({})}}),x&&x.map((({points:t,distance:r,box1:n,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({},n,{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:r})})))))),react_1.default.createElement(TransformLabels,Object.assign({},E,{store:e})),react_1.default.createElement(Selection,{selection:Y}),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:r-170,y:n-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"}))),b&&D&&react_1.default.createElement(L,{store:e,page:t,xPadding:g,yPadding:_}))}));
|
package/canvas/text-element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=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"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),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:i,cursorPosition:n})=>{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()+10+"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=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let c=0;const d=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(c=(t.height-d)/2),"bottom"===t.verticalAlign&&(c=t.height-d);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:c+"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),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef(!1);return n.current=!!(0,fonts_1.isFontLoaded)(t),react_1.default.useLayoutEffect((()=>{if(n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);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,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[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((i.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.getAttrs(),i=(0,text_1.removeTags)(t.text);let n=t.fontSize;const o=Math.round(2*t.fontSize)-1;for(let r=1;r<o;r++){const r=t.height&&e.height()>t.height,o=i.split("\n").join(" ").split(" ");let a=e.textArr.map((e=>e.text)).join(";");const l=o.find((e=>!a.includes(e)||(a=a.replace(e,""),!1)));if(!(r||l))break;n-=.5,e.fontSize(n)}return e.fontSize(r.fontSize),n}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}l+=" Z";const c=(0,svg_round_corners_1.parsePath)(l);return(0,svg_round_corners_1.roundCommands)(c,o).path}exports.getLineHeight=getLineHeight,exports.usePrevious=usePrevious;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.width/2,y:e.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,c]=react_1.default.useState(!1),d=react_1.default.useRef(e.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 i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.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[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{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(!p)return;const{textOverflow:i}=flags_1.flags;if(e.height)if("change-font-size"!==i||s){if("resize"===i){const i=y();f&&e.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),f||e.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=y();e.height!==n&&t.history.ignore((()=>{e.set({height:n})}))}else{const r=y();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:g,cornerRadius:e.backgroundCornerRadius*(e.fontSize*b*.5),lineHeight:b*e.fontSize,padding:e.backgroundPadding*(e.fontSize*b*.5),width:e.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.fontSize,b,e.backgroundPadding,e.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.height-g.length*b*e.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.height-g.length*b*e.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,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||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.width,height:e.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||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.fontSize,listening:E,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{c(!0),t.history.startTransaction(),d.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();if("ellipsis"!==flags_1.flags.textOverflow){const t=Math.max(a,d.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?y():b*e.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:r=>{var n;c(!1);const o=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.fontSize*o),width:Math.ceil(r.target.width()*o),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()*o}),t.history.endTransaction(),null===(n=i.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1})}})),n&&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:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|
|
1
|
+
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,n)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TextElement=exports.useTextColor=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"),konva_1=__importDefault(require("konva")),svg_round_corners_1=require("svg-round-corners"),loader_1=require("../utils/loader"),fonts_1=require("../utils/fonts"),flags_1=require("../utils/flags"),text_1=require("../utils/text"),gradient=__importStar(require("../utils/gradient")),apply_filters_1=require("./apply-filters"),use_fadein_1=require("./use-fadein"),highlighter_1=require("./highlighter"),screen_1=require("../utils/screen"),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:i,cursorPosition:n})=>{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()+10+"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=n||t.value.length;t.selectionStart=t.selectionEnd=r,i&&(null==t||t.select(),document.execCommand("selectAll",!1,null))}));return()=>{clearTimeout(e)}}),[]);let d=0;const c=l.textArr.length*l.lineHeight()*l.fontSize();"middle"===t.verticalAlign&&(d=(t.height-c)/2),"bottom"===t.verticalAlign&&(d=t.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),i=react_1.default.useRef(!1);return react_1.default.useEffect((()=>{var t=!0;return setTimeout((()=>{t&&(e._editModeEnabled&&(i.current=!0),r(!0),setTimeout((()=>{i.current=!1}),50))}),50),()=>{t=!1}}),[]),{editorEnabled:t&&e._editModeEnabled,selectAll:i.current}},useFontLoader=(e,t)=>{const[r,i]=react_1.default.useReducer((e=>e+1),0),n=react_1.default.useRef(!1);return n.current=!!(0,fonts_1.isFontLoaded)(t),react_1.default.useLayoutEffect((()=>{if(n.current)return;let r=!0;return(async()=>{n.current=!1,i();const o=(0,loader_1.incrementLoader)(`text ${t}`);await e.loadFont(t),konva_1.default.Util.requestAnimFrame(o),r&&(n.current=!0,i())})(),()=>{r=!1}}),[t]),[n.current]};exports.useFontLoader=useFontLoader;const getLineHeight=({fontLoaded:e,fontFamily:t,fontSize:r,lineHeight:i})=>react_1.default.useMemo((()=>{if("number"==typeof i)return i;const e=document.createElement("div");e.style.fontFamily=t,e.style.fontSize=r+"px",e.style.lineHeight=i,e.innerText="Test text",document.body.appendChild(e);const n=e.offsetHeight;return document.body.removeChild(e),n/r}),[e,t,r,i]);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,i=getRelativePointerPosition(r),n=r.textArr,o=Math.floor(i.y/(r.fontSize()*r.lineHeight())),a=n.slice(0,o).reduce(((e,t)=>e+t.text.length),o),l=null!==(t=n[o])&&void 0!==t?t:n[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((i.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(),i=e.height(),n=(0,text_1.removeTags)(t.text);let o=t.fontSize;e.height(void 0);const a=Math.round(2*t.fontSize)-1;for(let r=1;r<a;r++){const r=t.height&&e.height()>t.height,i=n.split("\n").join(" ").split(" ");let a=e.textArr.map((e=>e.text)).join(";");const l=i.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(i),o}function generateBackgroundShape({lines:e,lineHeight:t,width:r,align:i="left",padding:n=0,cornerRadius:o=0}){var a;e.forEach(((e,t)=>{e.cx=r/2,"right"===i?e.cx=r-e.width/2:"left"===i&&(e.cx=e.width/2),"justify"!==i||e.lastInParagraph||(e.width=r),"justify"===i&&(e.cx=e.width/2)}));let l=`M ${null===(a=e[0])||void 0===a?void 0:a.cx} ${-n}`;e.forEach(((r,i)=>{const{cx:o}=r,a=e[i-1];a&&a.width>r.width?l+=` L ${o+r.width/2+n} ${i*t+n}`:l+=` L ${o+r.width/2+n} ${i*t-n}`;const s=e[i+1];s&&s.width>r.width?l+=` L ${o+r.width/2+n} ${(i+1)*t-n}`:l+=` L ${o+r.width/2+n} ${(i+1)*t+n}`}));for(var s=e.length-1;s>=0;s--){const r=e[s],{cx:i}=r,o=e[s+1];o&&o.width>r.width?l+=` L ${i-r.width/2-n} ${(s+1)*t-n}`:l+=` L ${i-r.width/2-n} ${(s+1)*t+n}`;const a=e[s-1];a&&a.width>r.width?l+=` L ${i-r.width/2-n} ${s*t+n}`:l+=` L ${i-r.width/2-n} ${s*t-n}`}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;const useTextColor=e=>react_1.default.useMemo((()=>{if(!gradient.isGradient(e.fill))return{fill:e.fill};const{stops:t,rotation:r}=gradient.parseColor(e.fill),i={x:e.width/2,y:e.height/2},n=Math.sqrt(Math.pow(i.x,2)+Math.pow(i.y,2)),o=konva_1.default.Util.degToRad(r)-Math.PI/2,a=[];return t.forEach((({offset:e,color:t})=>{a.push(e,t)})),{fillLinearGradientStartPointX:i.x-n*Math.cos(o),fillLinearGradientStartPointY:i.y-n*Math.sin(o),fillLinearGradientColorStops:a,fillLinearGradientEndPointX:i.x+n*Math.cos(o),fillLinearGradientEndPointY:i.y+n*Math.sin(o),fill:t[1].color,fillPriority:"linear-gradient"}}),[e.fill]);exports.useTextColor=useTextColor,exports.TextElement=(0,mobx_react_lite_1.observer)((({element:e,store:t})=>{const r=react_1.default.useRef(null),i=react_1.default.useRef(null),{editorEnabled:n,selectAll:o}=useEditor(e),[a,l]=react_1.default.useState(!1),[s,d]=react_1.default.useState(!1),c=react_1.default.useRef(e.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 i=null!==(t=null===(e=r.current)||void 0===e?void 0:e.textArr)&&void 0!==t?t:[];JSON.stringify(i)!==JSON.stringify(g)&&_(i)})),react_1.default.useEffect((()=>{if(e.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[p]=(0,exports.useFontLoader)(t,e.fontFamily),x=(0,text_1.removeTags)(e.text),y=()=>{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(!p)return;const{textOverflow:i}=flags_1.flags;if(e.height)if("change-font-size"!==i||s){if("resize"===i){const i=y();f&&e.height<i&&t.history.ignore((()=>{e.set({height:i}),r.current.height(i)})),f||e.height===i||t.history.ignore((()=>{e.set({height:i}),r.current.height(i)}))}}else{const i=findFitFontSize(r.current,e);if(i!==e.fontSize)return void t.history.ignore((()=>{e.set({fontSize:i})}));const n=y();e.height===n||f||t.history.ignore((()=>{e.set({height:n})}))}else{const r=y();t.history.ignore((()=>{e.set({height:r})}))}})),react_1.default.useLayoutEffect((()=>{const t=r.current;t&&(t.width(t.width()+1e-8),t._setTextData(),(0,apply_filters_1.applyFilter)(t,e))}),[p]);const m=react_1.default.useRef(null),v=react_1.default.useRef(0),w=r=>{r.evt.preventDefault();const i=t.selectedShapes.find((t=>t===e));i&&e.contentEditable&&(v.current=getCursorPosition(r),e.toggleEditMode())},S=!x&&e.placeholder?.6:e.a.opacity;(0,use_fadein_1.useFadeIn)(r,S);const b=(0,exports.getLineHeight)({fontLoaded:p,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),E=e.selectable||"admin"===t.role,T=(0,exports.useTextColor)(e),L=react_1.default.useMemo((()=>e.backgroundEnabled?generateBackgroundShape({lines:g,cornerRadius:e.backgroundCornerRadius*(e.fontSize*b*.5),lineHeight:b*e.fontSize,padding:e.backgroundPadding*(e.fontSize*b*.5),width:e.width,align:e.align}):""),[e.backgroundEnabled,e.backgroundCornerRadius,e.fontSize,b,e.backgroundPadding,e.width,e.align,g]),M=(0,screen_1.useMobile)();let k=0;return"middle"===e.verticalAlign?k=(e.height-g.length*b*e.fontSize)/2:"bottom"===e.verticalAlign&&(k=e.height-g.length*b*e.fontSize),react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(react_konva_1.Path,{ref:i,x:e.a.x,y:e.a.y,rotation:e.a.rotation,hideInExport:!e.showInExport||!x,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity,data:L,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||!x,editModeEnabled:e._editModeEnabled,x:e.a.x,y:e.a.y,rotation:e.a.rotation,width:e.width,height:e.height,text:x||e.placeholder},T,{stroke:e.stroke,lineJoin:"round",strokeWidth:e.strokeWidth,fillAfterStrokeEnabled:!0,fontSize:e.fontSize,fontFamily:`"${e.fontFamily}", "${h}"`,fontStyle:e.fontStyle+" "+e.fontWeight,textDecoration:e.textDecoration,align:e.align,verticalAlign:e.verticalAlign,draggable:M?e.draggable&&u:e.draggable,preventDefault:!M||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.fontSize,listening:E,onDragStart:()=>{t.history.startTransaction()},onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:r=>{e.set({x:r.target.x(),y:r.target.y()}),t.history.endTransaction()},onMouseEnter:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onClick:w,onTap:w,onTransformStart:()=>{d(!0),t.history.startTransaction(),c.current=r.current.height()},onTransform:t=>{var r,n;const o=t.target;null===(r=i.current)||void 0===r||r.setAttrs({x:o.x(),y:o.y(),rotation:o.rotation(),scale:o.scale()});const a=(null===(n=o.getStage())||void 0===n?void 0:n.findOne("Transformer")).getActiveAnchor();if("middle-left"===a||"middle-right"===a){const t=o.scaleX(),r=o.width()*t,i=e.fontSize;let n=r;r<i&&(n=i,m.current&&o.position(m.current)),o.width(n),o.scaleX(1),o.scaleY(1);const a=y();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?y():b*e.fontSize;t.target.height(Math.max(r,t.target.height()*t.target.scaleY())),t.target.scaleY(1)}t.target.strokeWidth(e.strokeWidth/t.target.scaleX()),m.current=t.target.position()},onTransformEnd:r=>{var n;const o=r.target.scaleX();r.target.scaleX(1),r.target.scaleY(1),r.target.strokeWidth(e.strokeWidth),e.set({fontSize:Math.round(e.fontSize*o),width:Math.ceil(r.target.width()*o),x:r.target.x(),y:r.target.y(),rotation:r.target.rotation(),height:r.target.height()*o}),null===(n=i.current)||void 0===n||n.setAttrs({scaleX:1,scaleY:1}),t.history.endTransaction(),d(!1)}})),n&&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:v.current,onBlur:()=>{e.toggleEditMode(!1)}})),!s&&(a||u)&&react_1.default.createElement(highlighter_1.Highlighter,{element:e}))}));
|