polotno 2.25.11 → 2.25.12
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/element.js +1 -1
- package/canvas/html-element.js +3 -3
- package/canvas/page.d.ts +4 -1
- package/canvas/page.js +1 -1
- package/canvas/tooltip.js +1 -1
- package/canvas/use-transformer-snap.js +1 -1
- package/canvas/workspace-canvas.d.ts +4 -1
- package/canvas/workspace-canvas.js +1 -1
- package/model/node-model.js +1 -1
- package/model/store.d.ts +4 -2
- package/model/store.js +1 -1
- package/package.json +1 -1
- package/polotno-app.d.ts +8 -4
- package/polotno.bundle.js +7 -7
- package/utils/to-svg.d.ts +4 -2
- package/utils/to-svg.js +1 -1
- package/utils/validate-key.js +1 -1
package/canvas/element.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import{observer as t}from"mobx-react-lite";import o from"konva";import{TextElement as n}from"./text-element.js";import{ImageElement as r}from"./image-element.js";import{HTMLElement as i}from"./html-element.js";import{LineElement as m}from"./line-element.js";import{VideoElement as l}from"./video-element.js";import{FigureElement as s}from"./figure-element.js";import{GifElement as a}from"./gif-element.js";import{Group as c}from"react-konva";import{Highlighter as f}from"./highlighter.js";import{forEveryChild as p}from"../model/group-model.js";import{flags as d}from"../utils/flags.js";const u={text:n,image:r,svg:r,line:m,video:l,figure:s,group:t(t=>{const{element:o,store:n}=t,{children:r}=o,i=o.selectable||"admin"===n.role;return e.createElement(c,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport},r.map(o=>e.createElement(h,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a};export function registerShapeComponent(e,t){u[e]=t}const g=(e,t)=>{const n=[];p(e,e=>{"group"!==e.type&&n.push(e.a)});const r=[];n.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new o.Transform;n.translate(e.x,e.y),n.rotate(o.Util.degToRad(e.rotation)),t.forEach(e=>{const t=n.point(e);r.push(t)})});const i=new o.Transform;i.rotate(-o.Util.degToRad(t));let m=1/0,l=1/0,s=-1/0,a=-1/0;r.forEach(e=>{const t=i.point(e);m=Math.min(m,t.x),l=Math.min(l,t.y),s=Math.max(s,t.x),a=Math.max(a,t.y)}),i.invert();const c=i.point({x:m,y:l});return{x:c.x,y:c.y,width:s-m,height:a-l,rotation:t}},h=t(t=>{const{element:
|
|
1
|
+
import e from"react";import{observer as t}from"mobx-react-lite";import o from"konva";import{TextElement as n}from"./text-element.js";import{ImageElement as r}from"./image-element.js";import{HTMLElement as i}from"./html-element.js";import{LineElement as m}from"./line-element.js";import{VideoElement as l}from"./video-element.js";import{FigureElement as s}from"./figure-element.js";import{GifElement as a}from"./gif-element.js";import{Group as c}from"react-konva";import{Highlighter as f}from"./highlighter.js";import{forEveryChild as p}from"../model/group-model.js";import{flags as d}from"../utils/flags.js";const u={text:n,image:r,svg:r,line:m,video:l,figure:s,group:t(t=>{const{element:o,store:n}=t,{children:r}=o,i=o.selectable||"admin"===n.role;return e.createElement(c,{opacity:o.opacity,listening:i,hideInExport:!o.showInExport},r.map(o=>e.createElement(h,Object.assign({},t,{key:o.id,store:n,element:o}))))}),gif:a};export function registerShapeComponent(e,t){u[e]=t}const g=(e,t)=>{const n=[];p(e,e=>{"group"!==e.type&&n.push(e.a)});const r=[];n.forEach(e=>{const t=[{x:0,y:0},{x:0+e.width,y:0},{x:0+e.width,y:0+e.height},{x:0,y:0+e.height}],n=new o.Transform;n.translate(e.x,e.y),n.rotate(o.Util.degToRad(e.rotation)),t.forEach(e=>{const t=n.point(e);r.push(t)})});const i=new o.Transform;i.rotate(-o.Util.degToRad(t));let m=1/0,l=1/0,s=-1/0,a=-1/0;r.forEach(e=>{const t=i.point(e);m=Math.min(m,t.x),l=Math.min(l,t.y),s=Math.max(s,t.x),a=Math.max(a,t.y)}),i.invert();const c=i.point({x:m,y:l});return{x:c.x,y:c.y,width:s-m,height:a-l,rotation:t}},h=t(t=>{var n;const{element:r,store:m}=t,[l,s]=e.useState(!1),a=m.selectedElements.indexOf(r)>=0&&r.selectable,c="group"===(null===(n=r.parent)||void 0===n?void 0:n.type),p=(t=>{const[n,r]=e.useState(null);return e.useEffect(()=>{const e=setTimeout(()=>{const e=t.page.id,n=o.stages.find(t=>t.getAttr("pageId")===e);n||console.error("No stage is found for element",t.id),r(n)});return()=>clearTimeout(e)},[t.id]),n})(r),h=null==p?void 0:p.findOne("Transformer");e.useEffect(()=>{if(p){const e=e=>{const t=e.target.findAncestor(".element",!0),o=m.getElementById(null==t?void 0:t.id()),n=null==o?void 0:o.top,i=null==n?void 0:n.id;s(i===r.id)};p.on("mouseover",e);const t=()=>{s(!1)};return p.on("mouseleave",t),()=>{p.off("mouseover",e),p.off("mouseleave",t)}}},[p]);let x=u[t.element.type];return"text"===t.element.type&&d.htmlRenderEnabled&&(x=i),t.element.visible?x?e.createElement(e.Fragment,null,e.createElement(x,Object.assign({},t)),(l||a)&&!c&&e.createElement(f,{element:"group"===r.type?{a:g(r,(null==h?void 0:h.rotation())||0)}:r})):(console.error("Can not find component for "+t.element.type),null):null});export default h;
|
package/canvas/html-element.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Image as n,Rect as i}from"react-konva";import r from"quill";import*as a from"mobx";import{reaction as l}from"mobx";import{flags as s}from"../utils/flags.js";import{applyFilter as c}from"./apply-filters.js";import{getDir as d,getLineHeight as f,useFontLoader as u,usePrevious as h}from"./text-element.js";import{useColor as g}from"./use-color.js";import{detectSize as m,htmlToCanvas as p,isContentWrapping as x}from"../utils/html2canvas.js";import{resetStyleContent as
|
|
1
|
+
import t from"react";import{observer as e}from"mobx-react-lite";import{Group as o,Image as n,Rect as i}from"react-konva";import r from"quill";import*as a from"mobx";import{reaction as l}from"mobx";import{flags as s}from"../utils/flags.js";import{applyFilter as c}from"./apply-filters.js";import{getDir as d,getLineHeight as f,useFontLoader as u,usePrevious as h}from"./text-element.js";import{useColor as g}from"./use-color.js";import{detectSize as m,htmlToCanvas as p,isContentWrapping as x}from"../utils/html2canvas.js";import{resetStyleContent as w}from"../utils/reset-style.js";import{useFadeIn as b}from"./use-fadein.js";import{Html as y}from"react-konva-utils";import v from"../utils/styled.js";import{incrementLoader as E,triggerLoadError as S}from"../utils/loader.js";import{removeTags as k,sanitizeHtml as z}from"../utils/text.js";import*as F from"../utils/fonts.js";import{isTouchDevice as O}from"../utils/screen.js";import{getLimitedFontSize as R}from"./text-element/max-font-size.js";import{useDelayer as $}from"./use-delayer.js";function C(t){const e=(t||"").trim();if("<p><br></p>"===e||"<p></p>"===e){return""}if(e.startsWith("<p>")&&e.endsWith("</p>")){const t=e.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(t)){return t}}return t}export const quillRef=a.observable({enabled:!1,currentFormat:{},editor:a.observable.object({instance:null},{},{deep:!1})});const j=v("div",t.forwardRef)`
|
|
2
2
|
.ql-editor {
|
|
3
3
|
outline: none;
|
|
4
4
|
}
|
|
5
5
|
.ql-clipboard {
|
|
6
6
|
pointer-events: none;
|
|
7
7
|
}
|
|
8
|
-
${
|
|
8
|
+
${w}
|
|
9
9
|
strong {
|
|
10
10
|
font-weight: 700;
|
|
11
11
|
}
|
|
12
12
|
.ql-direction-rtl {
|
|
13
13
|
direction: rtl;
|
|
14
14
|
}
|
|
15
|
-
`;let T=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{T=t};export const createQuill=t=>new r(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const M=({html:e,onBlur:o,onChange:n,element:i,clickCoords:s})=>{const c=t.useRef(null);t.useEffect(()=>{if(!c.current){return}const t=(i=c.current,new r(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));var i;return a.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()}),setTimeout(()=>{var t;const e=(null===(t=c.current)||void 0===t?void 0:t.childNodes[0]).innerHTML;n($(e))},10)}),setQuillContent(t,e),s?setCursorFromCoords(t,s):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()})}),c.current.childNodes[0].addEventListener("blur",t=>{var e;if(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(t.relatedTarget);n||o()}),()=>{a.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>l(()=>i.text,()=>{var t;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection();$(null===(t=c.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||(setQuillContent(o,e),n&&(o.setSelection(n.index,n.length),a.runInAction(()=>{quillRef.currentFormat=o.getFormat()})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=c.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]);const f={color:i.fill};return i.fill.indexOf("gradient")>=0&&(f.backgroundColor=i.fill,f.backgroundImage=i.fill,f.backgroundSize="100% 100%",f.backgroundRepeat="repeat",f.webkitBackgroundClip="text",f.MozBackgroundClip="text",f.WebkitTextFillColor="transparent",f.MozTextFillColor="transparent"),t.createElement(j,{ref:c,style:Object.assign(Object.assign({},f),{fontSize:i.fontSize,fontWeight:i.fontWeight,textTransform:i.textTransform,width:i.a.width,fontFamily:'"'+i.fontFamily+'"',lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align,opacity:Math.max(i.a.opacity,.2)}),dir:d(S(i.text))})};function A(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}function q(t,{fontFamily:e="",color:o="black"}={}){let n=`color: ${o||t.fill}`;return t.fill.indexOf("gradient")>=0&&(n=`\n background-color: ${o};\n background-image: ${t.fill};\n background-size: 100% 100%;\n background-repeat: repeat;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(t.width||100)}px`,n,`font-size: ${t.fontSize}px`,`font-family: '${e}'`,`text-align: ${t.align}`,`text-transform: ${t.textTransform}`,t.textDecoration?`text-decoration: ${t.textDecoration}; text-decoration-color: ${o||t.fill}; text-decoration-layer: over`:"",t.lineHeight?`line-height: ${t.lineHeight}`:"",t.letterSpacing?`letter-spacing: ${t.letterSpacing*t.fontSize}px`:"",t.fontStyle?`font-style: ${t.fontStyle}`:"",t.fontWeight?`font-weight: ${t.fontWeight}`:"",t.strokeWidth?`-webkit-text-stroke: ${t.strokeWidth}px ${t.stroke}`:"",t.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${d(S(t.text))}">${z(t.text).replace(/\n/g,"</br>")}</div>`}const I=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:r})=>{const l=t.useRef(null),[d,b]=t.useState(),[v,z]=t.useState(!1),[$,T]=t.useState(!1),X=t.useRef(e.height),Y=r.selectedShapes.indexOf(e)>=0&&e.selectable,P=e.fontSize/3,{textVerticalResizeEnabled:W}=s,H=h(e.fontFamily),[L]=u(r,e.fontFamily),_=e._editModeEnabled;y(l);const B=L?e.fontFamily:H!==e.fontFamily?H:"Arial",D=g(e).fill,N=q(e,{fontFamily:B,color:D}),{width:Q,height:V}=function(e,o,n){return t.useMemo(()=>m(e),[e,o.width,n])}(N,e,L);t.useEffect(()=>{if(!L){return}if(!e.height){return void r.history.ignore(()=>{e.set({height:V})})}const{textOverflow:t}=s;if("change-font-size"!==t||v){"resize"===t&&(W&&e.height<V&&r.history.ignore(()=>{e.set({height:V})}),W||e.height===V||r.history.ignore(()=>{e.set({height:V})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=q(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=m(o),i=t.height&&n>t.height,r=x({html:o});if(!i&&!r){break}e-=.5}return e})(e);t!==e.fontSize?r.history.ignore(()=>{e.set({fontSize:t})}):e.height!==V&&(W&&e.height<V?r.history.ignore(()=>{e.set({height:V})}):W||r.history.ignore(()=>{e.set({height:V})}))}});const J=t.useMemo(()=>{const t={lastArgs:null,lastResult:null};return async function(e){return t.lastArgs&&t.lastResult&&(o=t.lastArgs,n=e,JSON.stringify(o)===JSON.stringify(n))||(t.lastResult=await p(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),G=t.useRef(0),K=t.useRef(null);t.useEffect(()=>{v||_||(async()=>{G.current++;const t=G.current;let o=E(`text ${e.id} ${t}`);K.current&&K.current(),K.current=o,T(!0);let n=null;const i=I?5:1;for(let l=0;l<i;l++){const o=l>0?J:p;try{if(n=await o({skipCache:l>0,html:N,width:e.width||1,height:e.height||V||1,fontFamily:B,padding:P,pixelRatio:r._elementsPixelRatio,font:r.fonts.find(t=>t.fontFamily===B)||F.globalFonts.find(t=>t.fontFamily===B)}),t!==G.current){return}if(I&&A(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(a){console.error(a),k(`Error rendering rich text with id ${e.id}`);break}}n?b(n):o?(o(),o=null):console.error("Finish function is called twice!"),T(!1)})()},[N,v,V,_,B,e.height,r._elementsPixelRatio,L]);const[U,Z]=C($,300),[tt]=C(v,300,!0),et=tt||U;t.useEffect(()=>{var t;if(!et){return a.autorun(()=>{const t=l.current;c(t,e)})}null===(t=l.current)||void 0===t||t.clearCache()},[d,et,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{d&&!$&&K.current&&(K.current(),K.current=null)},[d,$]),t.useEffect(()=>()=>{K.current&&K.current()},[]),t.useEffect(()=>{Y||""!==S(e.text)||!e.removable||e.placeholder||r.deleteElements([e.id])},[Y]);let ot=0;"middle"===e.verticalAlign&&(ot=(e.height-V)/2),"bottom"===e.verticalAlign&&(ot=e.height-V);const nt=f({fontLoaded:L,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),it=R(),rt=t.useRef(null),at=t.useRef(null),lt=_&&e.strokeWidth>0;return t.createElement(t.Fragment,null,t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*nt*.5),offsetY:e.backgroundPadding*(e.fontSize*nt*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*nt),height:e.a.height+e.backgroundPadding*(e.fontSize*nt),cornerRadius:e.backgroundCornerRadius*(e.fontSize*nt*.5)}),t.createElement(i,{ref:l,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!et,draggable:it?e.draggable&&Y:e.draggable,preventDefault:!it||Y,opacity:_?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(at.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var o;if(e.contentEditable){const n=null===(o=t.evt.changedTouches)||void 0===o?void 0:o[0];at.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{z(!0),X.current=e.height},onTransform:t=>{var o;const n=t.target,i=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),r="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,rt.current&&n.position(rt.current)),n.width(r),n.scaleX(1),s.textVerticalResizeEnabled){const t=Math.max(V,X.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let o="resize"===s.textOverflow?V:e.lineHeight*e.fontSize;const i=Math.max(o,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:i,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}rt.current=t.target.position()},onTransformEnd:t=>{z(!1),T(!0);const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*o,width:t.target.width()*o,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o})}}),t.createElement(n,{ref:l,image:d,x:e.a.x,y:e.a.y,offsetX:P,offsetY:P-ot,listening:!1,rotation:e.a.rotation,width:e.a.width+2*P,height:(e.a.width+2*P)*((null==d?void 0:d.height)/(null==d?void 0:d.width)||1),visible:!et&&!_,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled||v||et}),(et||lt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(w,{divProps:{style:{pointerEvents:"none"}}},t.createElement(j,{dangerouslySetInnerHTML:{__html:N},style:{pointerEvents:"none",opacity:e.a.opacity}}))),_&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(w,null,t.createElement(M,{html:N,element:e,onChange:t=>{const o=O({oldText:S(e.text),newText:S(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),Z(!0)},clickCoords:at.current}))))});export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:o,y:n}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(o,n)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,n);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const o=r.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(i){}t.setSelection(0,0,"api")}
|
|
15
|
+
`;let T=["bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{T=t};export const createQuill=t=>new r(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T});export const setQuillContent=(t,e)=>{var o=t.clipboard.convert("<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>");t.setContents(o),t.history.clear()};const M=({html:e,onBlur:o,onChange:n,element:i,clickCoords:s})=>{const c=t.useRef(null);t.useEffect(()=>{if(!c.current){return}const t=(i=c.current,new r(i,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));var i;return a.runInAction(()=>{quillRef.editor.instance=t}),window.__polotnoQuill=t,t.on("text-change",()=>{t.getSelection()&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()}),setTimeout(()=>{var t;const e=(null===(t=c.current)||void 0===t?void 0:t.childNodes[0]).innerHTML;n(C(e))},10)}),setQuillContent(t,e),s?setCursorFromCoords(t,s):t.setSelection(0,0,"api"),t.on("selection-change",(e,o,n)=>{e&&a.runInAction(()=>{quillRef.currentFormat=t.getFormat()})}),c.current.childNodes[0].addEventListener("blur",t=>{var e;if(null===(e=t.relatedTarget)||void 0===e?void 0:e.classList.contains("ql-clipboard")){return}const n=function(t){return!!t&&!!t.closest(".sketch-picker")}(t.relatedTarget);n||o()}),()=>{a.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={}}),delete window.__polotnoQuill}},[]),t.useEffect(()=>l(()=>i.text,()=>{var t;const o=quillRef.editor.instance;if(!o){return}const n=o.getSelection();C(null===(t=c.current)||void 0===t?void 0:t.childNodes[0].innerHTML)===i.text||(setQuillContent(o,e),n&&(o.setSelection(n.index,n.length),a.runInAction(()=>{quillRef.currentFormat=o.getFormat()})))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",o);const t=t=>{var e;(null===(e=c.current)||void 0===e?void 0:e.contains(t.target))||o()};return window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",o),window.removeEventListener("touchstart",t)}},[]);const f={color:i.fill};return i.fill.indexOf("gradient")>=0&&(f.backgroundColor=i.fill,f.backgroundImage=i.fill,f.backgroundSize="100% 100%",f.backgroundRepeat="repeat",f.webkitBackgroundClip="text",f.MozBackgroundClip="text",f.WebkitTextFillColor="transparent",f.MozTextFillColor="transparent"),t.createElement(j,{ref:c,style:Object.assign(Object.assign({},f),{fontSize:i.fontSize,fontWeight:i.fontWeight,textTransform:i.textTransform,width:i.a.width,fontFamily:'"'+i.fontFamily+'"',lineHeight:i.lineHeight,letterSpacing:i.letterSpacing*i.fontSize+"px",textAlign:i.align,opacity:Math.max(i.a.opacity,.2),textShadow:i.shadowEnabled?`${i.shadowOffsetX}px ${i.shadowOffsetY}px ${i.shadowBlur}px ${i.shadowColor}`:void 0}),dir:d(k(i.text))})};function X(t){return!function(t){const e=t.getContext("2d").getImageData(0,0,t.width,t.height).data;for(let o=0;o<e.length;o+=4){if(0!==e[o+3]){return!0}}return!1}(t)}function Y(t,{fontFamily:e="",color:o="black"}={}){let n=`color: ${o||t.fill}`;return t.fill.indexOf("gradient")>=0&&(n=`\n background-color: ${o};\n background-image: ${t.fill};\n background-size: 100% 100%;\n background-repeat: repeat;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n -webkit-text-fill-color: transparent;\n -moz-text-fill-color: transparent;\n `),`<div style="${["white-space: pre-wrap",`width: ${Math.round(t.width||100)}px`,n,`font-size: ${t.fontSize}px`,`font-family: '${e}'`,`text-align: ${t.align}`,`text-transform: ${t.textTransform}`,t.textDecoration?`text-decoration: ${t.textDecoration}; text-decoration-color: ${o||t.fill}; text-decoration-layer: over`:"",t.lineHeight?`line-height: ${t.lineHeight}`:"",t.letterSpacing?`letter-spacing: ${t.letterSpacing*t.fontSize}px`:"",t.fontStyle?`font-style: ${t.fontStyle}`:"",t.fontWeight?`font-weight: ${t.fontWeight}`:"",t.strokeWidth?`-webkit-text-stroke: ${t.strokeWidth}px ${t.stroke}`:"",t.strokeWidth?"paint-order: stroke fill":""].filter(Boolean).join("; ")}" contentEditable dir="${d(k(t.text))}">${z(t.text).replace(/\n/g,"</br>")}</div>`}const A=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);export const HTMLElement=e(({element:e,store:r})=>{const l=t.useRef(null),[d,w]=t.useState(),[v,z]=t.useState(!1),[C,T]=t.useState(!1),q=t.useRef(e.height),I=r.selectedShapes.indexOf(e)>=0&&e.selectable,P=e.fontSize/3,{textVerticalResizeEnabled:W}=s,B=h(e.fontFamily),[H]=u(r,e.fontFamily),L=e._editModeEnabled;b(l);const _=H?e.fontFamily:B!==e.fontFamily?B:"Arial",D=g(e).fill,N=Y(e,{fontFamily:_,color:D}),{width:Q,height:V}=function(e,o,n){return t.useMemo(()=>m(e),[e,o.width,n])}(N,e,H);t.useEffect(()=>{if(!H){return}if(!e.height){return void r.history.ignore(()=>{e.set({height:V})})}const{textOverflow:t}=s;if("change-font-size"!==t||v){"resize"===t&&(W&&e.height<V&&r.history.ignore(()=>{e.set({height:V})}),W||e.height===V||r.history.ignore(()=>{e.set({height:V})}))}else{const t=(t=>{let e=t.fontSize;for(let o=1;o<50;o++){const o=Y(Object.assign(Object.assign({},t.toJSON()),{fontSize:e}),{fontFamily:t.fontFamily}),{height:n}=m(o),i=t.height&&n>t.height,r=x({html:o});if(!i&&!r){break}e-=.5}return e})(e);t!==e.fontSize?r.history.ignore(()=>{e.set({fontSize:t})}):e.height!==V&&(W&&e.height<V?r.history.ignore(()=>{e.set({height:V})}):W||r.history.ignore(()=>{e.set({height:V})}))}});const J=t.useMemo(()=>{const t={lastArgs:null,lastResult:null};return async function(e){return t.lastArgs&&t.lastResult&&(o=t.lastArgs,n=e,JSON.stringify(o)===JSON.stringify(n))||(t.lastResult=await p(e),t.lastArgs=Object.assign({},e)),t.lastResult;var o,n}},[]),G=t.useRef(0),K=t.useRef(null);t.useEffect(()=>{v||L||(async()=>{G.current++;const t=G.current;let o=E(`text ${e.id} ${t}`);K.current&&K.current(),K.current=o,T(!0);let n=null;const i=A?5:1;for(let l=0;l<i;l++){const o=l>0?J:p;try{if(n=await o({skipCache:l>0,html:N,width:e.width||1,height:e.height||V||1,fontFamily:_,padding:P,pixelRatio:r._elementsPixelRatio,font:r.fonts.find(t=>t.fontFamily===_)||F.globalFonts.find(t=>t.fontFamily===_)}),t!==G.current){return}if(A&&X(n)){await new Promise(t=>setTimeout(t,50*(l+1)));continue}break}catch(a){console.error(a),S(`Error rendering rich text with id ${e.id}`);break}}n?w(n):o?(o(),o=null):console.error("Finish function is called twice!"),T(!1)})()},[N,v,V,L,_,e.height,r._elementsPixelRatio,H]);const[U,Z]=$(C,300),[tt]=$(v,300,!0),et=tt||U;t.useEffect(()=>{var t;if(!et){return a.autorun(()=>{const t=l.current;c(t,e)})}null===(t=l.current)||void 0===t||t.clearCache()},[d,et,e.shadowColor,e.shadowOffsetX,e.shadowOffsetY,e.shadowOpacity]),t.useEffect(()=>{d&&!C&&K.current&&(K.current(),K.current=null)},[d,C]),t.useEffect(()=>()=>{K.current&&K.current()},[]),t.useEffect(()=>{I||""!==k(e.text)||!e.removable||e.placeholder||r.deleteElements([e.id])},[I]);let ot=0;"middle"===e.verticalAlign&&(ot=(e.height-V)/2),"bottom"===e.verticalAlign&&(ot=e.height-V);const nt=f({fontLoaded:H,fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:e.lineHeight}),it=O(),rt=t.useRef(null),at=t.useRef(null),lt=L&&e.strokeWidth>0;return t.createElement(t.Fragment,null,t.createElement(i,{x:e.a.x,y:e.a.y,offsetX:e.backgroundPadding*(e.fontSize*nt*.5),offsetY:e.backgroundPadding*(e.fontSize*nt*.5),rotation:e.a.rotation,hideInExport:!e.showInExport,listening:!1,visible:e.backgroundEnabled,opacity:e.backgroundOpacity*e.a.opacity,fill:e.backgroundColor,width:e.a.width+e.backgroundPadding*(e.fontSize*nt),height:e.a.height+e.backgroundPadding*(e.fontSize*nt),cornerRadius:e.backgroundCornerRadius*(e.fontSize*nt*.5)}),t.createElement(i,{ref:l,name:"element",x:e.a.x,y:e.a.y,listening:e.selectable,rotation:e.a.rotation,width:e.a.width,height:e.a.height,visible:!et,draggable:it?e.draggable&&I:e.draggable,preventDefault:!it||I,opacity:L?0:e.a.opacity,hideInExport:!e.showInExport,onDragMove:t=>{e.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{e.set({x:t.target.x(),y:t.target.y()})},id:e.id,onDblClick:t=>{e.contentEditable&&(at.current={x:t.evt.clientX,y:t.evt.clientY},e.toggleEditMode(!0))},onDblTap:t=>{var o;if(e.contentEditable){const n=null===(o=t.evt.changedTouches)||void 0===o?void 0:o[0];at.current=n?{x:n.clientX,y:n.clientY}:null,e.toggleEditMode(!0)}},onTransformStart:t=>{z(!0),q.current=e.height},onTransform:t=>{var o;const n=t.target,i=(null===(o=n.getStage())||void 0===o?void 0:o.findOne("Transformer")).getActiveAnchor(),r="middle-left"===i||"middle-right"===i,a="top-center"===i||"bottom-center"===i,l=n.scaleX();if(r){const t=n.scaleX(),o=n.width()*t,i=e.fontSize;let r=o;if(o<i&&(r=i,rt.current&&n.position(rt.current)),n.width(r),n.scaleX(1),s.textVerticalResizeEnabled){const t=Math.max(V,q.current);e.set({height:t})}e.set({width:n.width(),x:n.x(),y:n.y()})}else if(a){let o="resize"===s.textOverflow?V:e.lineHeight*e.fontSize;const i=Math.max(o,t.target.height()*t.target.scaleY());n.scaleY(1),e.set({x:n.x(),y:n.y(),height:i,rotation:n.rotation()})}else{n.scaleX(1),n.scaleY(1),e.set({fontSize:e.fontSize*l,letterSpacing:e.letterSpacing,width:n.width()*l,x:n.x(),y:n.y(),rotation:n.rotation(),height:n.height()*l})}rt.current=t.target.position()},onTransformEnd:t=>{z(!1),T(!0);const o=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),e.set({fontSize:e.fontSize*o,width:t.target.width()*o,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:e.shadowBlur*o,shadowOffsetX:e.shadowOffsetX*o,shadowOffsetY:e.shadowOffsetY*o,strokeWidth:e.strokeWidth*o})}}),t.createElement(n,{ref:l,image:d,x:e.a.x,y:e.a.y,offsetX:P,offsetY:P-ot,listening:!1,rotation:e.a.rotation,width:e.a.width+2*P,height:(e.a.width+2*P)*((null==d?void 0:d.height)/(null==d?void 0:d.width)||1),visible:!et&&!L,opacity:e.a.opacity,shadowEnabled:e.shadowEnabled,shadowBlur:e.shadowBlur,shadowOffsetX:e.shadowOffsetX,shadowOffsetY:e.shadowOffsetY,shadowColor:e.shadowColor,shadowOpacity:e.shadowOpacity,hideInExport:!e.showInExport,editModeEnabled:e._editModeEnabled||v||et}),(et||lt)&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(y,{divProps:{style:{pointerEvents:"none"}}},t.createElement(j,{dangerouslySetInnerHTML:{__html:N},style:{pointerEvents:"none",opacity:e.a.opacity,textShadow:e.shadowEnabled?`${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur}px ${e.shadowColor}`:void 0}}))),L&&t.createElement(o,{x:e.a.x,y:e.a.y,rotation:e.a.rotation,offsetY:-ot},t.createElement(y,null,t.createElement(M,{html:N,element:e,onChange:t=>{const o=R({oldText:k(e.text),newText:k(t),element:e});e.set({text:t,fontSize:o})},onBlur:t=>{e.toggleEditMode(!1),Z(!0)},clickCoords:at.current}))))});export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:o,y:n}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(o,n)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(o,n);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const o=r.find(e.startContainer,!0);if(o){const n=o.offset(t.scroll)+e.startOffset;return void t.setSelection(n,0,"api")}}}catch(i){}t.setSelection(0,0,"api")}
|
package/canvas/page.d.ts
CHANGED
|
@@ -55,8 +55,11 @@ type PageProps = {
|
|
|
55
55
|
snapGuideDash?: number[];
|
|
56
56
|
transformLabelFill?: string;
|
|
57
57
|
transformLabelTextFill?: string;
|
|
58
|
+
distanceGuideStroke?: string;
|
|
59
|
+
distanceLabelFill?: string;
|
|
60
|
+
distanceLabelTextFill?: string;
|
|
58
61
|
};
|
|
59
|
-
declare const _default: (({ store, page, width, height, pageControlsEnabled, backColor, pageBorderColor, activePageBorderColor, components, bleedColor, altCloneEnabled, viewportSize, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, transformLabelFill, transformLabelTextFill, }: PageProps) => React.JSX.Element) & {
|
|
62
|
+
declare const _default: (({ store, page, width, height, pageControlsEnabled, backColor, pageBorderColor, activePageBorderColor, components, bleedColor, altCloneEnabled, viewportSize, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, }: PageProps) => React.JSX.Element) & {
|
|
60
63
|
displayName: string;
|
|
61
64
|
};
|
|
62
65
|
export default _default;
|
package/canvas/page.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as o,runInAction as r}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as h,Tag as g,Text as u,Transformer as p}from"react-konva";import f from"use-image";import b from"konva";import x from"./element.js";import{useSnap as v}from"./use-transformer-snap.js";import{useImageLoader as E}from"./image-element.js";import{getCrop as y}from"../utils/crop.js";import{isCreditVisible as w,___ as k}from"../utils/validate-key.js";import{getClientRect as Y,getTotalClientRect as X}from"../utils/math.js";import{pxToUnitRounded as S,pxToUnitString as C}from"../utils/unit.js";import{flags as A}from"../utils/flags.js";import{isTouchDevice as O}from"../utils/screen.js";import{useColor as P}from"./use-color.js";import{isGradient as R}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";const M=b.DD._drag;window.removeEventListener("mousemove",M),b.DD._drag=function(e){r(()=>{M.call(this,e)})},window.addEventListener("mousemove",b.DD._drag);const j=new b.Group,D=20;j.add(new b.Rect({width:D,height:D,fill:"white"})),j.add(new b.Path({scaleX:D/24,scaleY:D/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 I=j.toCanvas({pixelRatio:2,width:D,height:D}),T={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:I,fillPatternScaleX:t/D/2,fillPatternScaleY:t/D/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(T,e)};const W={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{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"]}};export function registerTransformerAttrs(e,t){W[e]=W[e]||t,Object.assign(W[e],t)}const B=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),F=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?y(r,{width:o.width,height:o.height},"center-middle"):{};return E(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},G=e=>{const n=P({fill:e.fill,a:{width:e.width,height:e.height}});return t.createElement(m,Object.assign({},e,n))},_=n=>{const{background:i,scale:o,borderColor:r}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!b.Util.colorToRGBA(i)||R(i),[i]),s=t.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 t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(G,Object.assign({fill:i},l)):t.createElement(F,Object.assign({url:i},l)))},z=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:o=1})=>e.visible?t.createElement(m,{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:n,stroke:i,strokeWidth:o}):null),N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a,tagFill:c,textFill:d})=>{const m=Y({x:e,y:n,width:i,height:o,rotation:b.Util.radToDeg(r)});if(void 0===l){return null}const h=(o/2+70)*Math.cos(r-Math.PI/2),p=(o/2+70)*Math.sin(r-Math.PI/2),f=S({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+S({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+h,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:Math.round(b.Util.radToDeg(r)).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:f})))}),H=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(x,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let V=null;export const registerNextDomDrop=e=>{V=e};const Z=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),K=atob("cmVk"),U=atob("djAuOS4y"),J=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:K,height:200},t.createElement(g,{fill:K}),t.createElement(u,Object.assign({},e,{fill:"white",text:Z,height:void 0,padding:10,fontSize:20}))));export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:f,backColor:x,pageBorderColor:E,activePageBorderColor:y,components:S,bleedColor:P,altCloneEnabled:R,viewportSize:M,selectionRectFill:j,selectionRectStroke:D,selectionRectStrokeWidth:I,snapGuideStroke:F,snapGuideStrokeWidth:G,snapGuideDash:Z,transformLabelFill:K,transformLabelTextFill:$})=>{const q=e.bleedVisible?n.bleed:0,Q=n.computedWidth+2*q,ee=n.computedHeight+2*q,te=(r-Q*e.scale)/2,ne=(a-ee*e.scale)/2,ie=t.useRef(null),oe=t.useRef(null),re=t.useRef(null),le=null==f||f,[ae,se]=t.useState(null),[ce,de]=t.useState({}),me=useContextMenu({store:e}),he=e.selectedElements.find(e=>e._cropModeEnabled),ge=e.selectedShapes.filter(e=>!e.resizable).length>0,ue=e.selectedShapes.filter(e=>!e.draggable).length>0,pe=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!ie.current){return}const o=ie.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>e),l=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";W[l]?(ie.current.setAttrs(Object.assign(Object.assign({},T),W[l])),"svg"!==l&&"image"!==l&&"gif"!==l||e.selectedElements[0].keepRatio||ie.current.setAttrs({enabledAnchors:T.enabledAnchors}),"text"===l&&A.textVerticalResizeEnabled&&ie.current.setAttrs({enabledAnchors:null===(n=W.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):ie.current.setAttrs(T),ge&&ie.current.enabledAnchors([]),ue&&ie.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),ie.current.nodes(r),null===(i=ie.current.getLayer())||void 0===i||i.batchDraw()},[e.selectedShapes,he,ge,pe,ue]);const fe=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),be=t.useRef(!1),xe=O(),ve=o(e=>{var t,n,i,o;if(xe){return}be.current=!1;const r=e.target.findAncestor(".elements-container"),l=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||l||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(fe.visible=!0,fe.x1=s.x,fe.y1=s.y,fe.x2=s.x,fe.y2=s.y,(null===(o=e.target.getStage())||void 0===o?void 0:o.getPointersPositions().length)>=2&&(fe.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function o(){var t;if(!e.current){return}const o=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),l=Math.max(0,r.left-o.left-100),a=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return o(),i.addEventListener("scroll",o),()=>{i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:oe,containerRef:re,viewportSize:M}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o;if(!fe.visible){return}null===(t=oe.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=oe.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=oe.current)||void 0===i?void 0:i.x(),r.y-=null===(o=oe.current)||void 0===o?void 0:o.y()):r={x:fe.x2,y:fe.y2},fe.x2=r.x,fe.y2=r.y}),n=o(()=>{if(!fe.visible){return}if(!oe.current){return}const t=oe.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];oe.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,a=null==r?void 0:r.selectable;b.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];e.selectElements(i)}fe.visible=!1,be.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 Ee=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=re.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Ee.current=!0,clearTimeout(t),t=setTimeout(()=>{Ee.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const ye=t=>{if(e.activePage!==n&&n.select(),Ee.current){return}if(be.current){return}const i=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,o=t.target.findAncestor(".elements-container"),r=t.target.findAncestor(".page-abs-container"),l=t.target.findAncestor("Transformer");if(!(i||o||l||r)){return void e.selectElements([])}const a=t.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),c=null==s?void 0:s.top,d=null==c?void 0:c.id,m=e.selectedElementsIds.indexOf(d)>=0;d&&i&&!m?e.selectElements(e.selectedElementsIds.concat([d])):d&&i&&m?e.selectElements(e.selectedElementsIds.filter(e=>e!==d)):!d||i||m||e.selectElements([d])};v(ie,e,{stroke:F,strokeWidth:G,dash:Z});const we=e.activePage===n,ke=null==S?void 0:S.PageControls,Ye=null==S?void 0:S.Tooltip,Xe=null==S?void 0:S.ContextMenu,Se=1/e.scale,Ce=0/e.scale;return t.createElement("div",{ref:re,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!oe.current){return}oe.current.setPointersPositions(t);const i=oe.current.findOne(".elements-container").getRelativePointerPosition(),o=oe.current.getPointerPosition(),r=oe.current.getAllIntersections(o).map(e=>e.findAncestor(".element",!0)).filter(Boolean),l=[...new Set(r.reverse())].map(t=>e.getElementById(t.id())),a=l[0];V&&(V(i,a,{elements:l,page:n}),V=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden"},className:"polotno-page-container"+(we?" active-page":"")},t.createElement(h,{ref:oe,width:Math.min(r,M.width+200),height:Math.min(M.height+200,a),onClick:ye,onTap:ye,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),o=null==i?void 0:i.top,r=null==o?void 0:o.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),me.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:ve,onMouseMove:t=>{if(!t.evt.altKey&&ae){return void se(null)}if(!t.evt.altKey){return}const i=t.target.findAncestor(".element",!0),o=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(o)){return}const r=X(e.selectedShapes),l=o?e.getElementById(o):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},a=Y(l),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(ae)!==JSON.stringify(s)&&se(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const o=e.getElementById(null==i?void 0:i.id()),r=null==o?void 0:o.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=ie.current)||void 0===n||n.startDrag(t))}ae&&se(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(B,{width:r,height:a,fill:x}),t.createElement(l,{x:te,y:ne,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:q,y:q},t.createElement(_,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:q,y:q,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(H,{elements:n.children,store:e})),t.createElement(m,{stroke:P,name:"bleed",strokeWidth:n.bleed,x:n.bleed/2,y:n.bleed/2,width:n.computedWidth+n.bleed,height:n.computedHeight+n.bleed,listening:!1,visible:n.bleed>0&&e.bleedVisible,hideInExport:!0}),k()===U&&t.createElement(J,{name:"hit-detection",x:-Se/2-Ce,y:-Se/2-Ce,width:Q+Se+2*Ce,height:ee+Se+2*Ce}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,te,ne,te,a-ne,r-te,a-ne,r-te,ne,te,ne],listening:!1,closed:!0,fill:x}),t.createElement(l,{x:te,y:ne,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Se/2-Ce,y:-Se/2-Ce,width:Q+Se+2*Ce,height:ee+Se+2*Ce,stroke:we&&e.pages.length>1?y:E,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:te+q*e.scale,y:ne+q*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:ie,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&R&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),se(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=ie.current.nodes(),o=i[i.length-1];if(e.target!==o){return}const r=null===(t=ie.current)||void 0===t?void 0:t.__getNodeRect(),l=null===(n=ie.current)||void 0===n?void 0:n.getActiveAnchor();de({anchor:l,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{de({}),e.history.endTransaction()},visible:!e.isPlaying}),ae&&ae.map(({points:n,distance:i,box1:o,box2:r},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},o,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:"rgb(0, 161, 255)",strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(g,{cornerRadius:5,fill:"rgb(0, 161, 255)",pointerDirection:"down"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:"white",padding:5,text:C({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:Q,height:ee,fill:"rgba(255,255,255,0.9)"}),t.createElement(u,{text:"Rendering...",fontSize:60,width:Q,height:ee,align:"center",verticalAlign:"middle"})),Ye&&t.createElement(Ye,{components:S,store:e,page:n,stageRef:oe}),Xe&&t.createElement(L,null,t.createElement(Xe,Object.assign({components:S,store:e},me.props)))),t.createElement(N,Object.assign({},ce,{store:e,tagFill:K,textFill:$})),t.createElement(z,{selection:fe,fill:j,stroke:D,strokeWidth:I}),w()&&t.createElement(u,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-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")}}),t.createElement(l,{name:"line-guides"}))),le&&ke&&t.createElement(ke,{store:e,page:n,xPadding:te,yPadding:ne}))});
|
|
1
|
+
var e=this&&this.__rest||function(e,t){var n={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(n[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(i=Object.getOwnPropertySymbols(e);o<i.length;o++){t.indexOf(i[o])<0&&Object.prototype.propertyIsEnumerable.call(e,i[o])&&(n[i[o]]=e[i[o]])}}return n};import t from"react";import{observer as n,useLocalObservable as i}from"mobx-react-lite";import{action as o,runInAction as r}from"mobx";import{Group as l,Image as a,Label as s,Layer as c,Line as d,Rect as m,Stage as h,Tag as g,Text as u,Transformer as p}from"react-konva";import f from"use-image";import x from"konva";import b from"./element.js";import{useSnap as v}from"./use-transformer-snap.js";import{useImageLoader as E}from"./image-element.js";import{getCrop as y}from"../utils/crop.js";import{isCreditVisible as w,___ as k}from"../utils/validate-key.js";import{getClientRect as Y,getTotalClientRect as S}from"../utils/math.js";import{pxToUnitRounded as X,pxToUnitString as C}from"../utils/unit.js";import{flags as A}from"../utils/flags.js";import{isTouchDevice as O}from"../utils/screen.js";import{useColor as D}from"./use-color.js";import{isGradient as P}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";const R=x.DD._drag;window.removeEventListener("mousemove",R),x.DD._drag=function(e){r(()=>{R.call(this,e)})},window.addEventListener("mousemove",x.DD._drag);const M=new x.Group,j=20;M.add(new x.Rect({width:j,height:j,fill:"white"})),M.add(new x.Path({scaleX:j/24,scaleY:j/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 I=M.toCanvas({pixelRatio:2,width:j,height:j}),T={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:I,fillPatternScaleX:t/j/2,fillPatternScaleY:t/j/2,fillPriority:"pattern",fillPatternRepeat:"no-repeat"})}}};export const setTransformerStyle=e=>{Object.assign(T,e)};const W={text:{enabledAnchors:["top-left","top-right","middle-left","bottom-left","bottom-right","middle-right"]},svg:{enabledAnchors:["top-left","top-right","bottom-left","bottom-right"]},gif:{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"]}};export function registerTransformerAttrs(e,t){W[e]=W[e]||t,Object.assign(W[e],t)}const B=e=>t.createElement(m,Object.assign({},e,{preventDefault:!1})),F=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=f(i,"anonymous"),s=r?y(r,{width:o.width,height:o.height},"center-middle"):{};return E(l,i,"page background"),t.createElement(a,Object.assign({image:r},o,s))},_=e=>{const n=D({fill:e.fill,a:{width:e.width,height:e.height}});return t.createElement(m,Object.assign({},e,n))},G=n=>{const{background:i,scale:o,borderColor:r}=n,l=e(n,["background","scale","borderColor"]),a=t.useMemo(()=>!!x.Util.colorToRGBA(i)||P(i),[i]),s=t.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 t.createElement(t.Fragment,null,t.createElement(m,Object.assign({fillPatternImage:s},l,{opacity:.1,hideInExport:!0})),a?t.createElement(_,Object.assign({fill:i},l)):t.createElement(F,Object.assign({url:i},l)))},z=n(({selection:e,fill:n="rgba(0, 161, 255, 0.3)",stroke:i="rgb(0, 161, 255)",strokeWidth:o=1})=>e.visible?t.createElement(m,{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:n,stroke:i,strokeWidth:o}):null),N=n(({x:e,y:n,width:i,height:o,rotation:r,anchor:l,store:a,tagFill:c,textFill:d})=>{const m=Y({x:e,y:n,width:i,height:o,rotation:x.Util.radToDeg(r)});if(void 0===l){return null}const h=(o/2+70)*Math.cos(r-Math.PI/2),p=(o/2+70)*Math.sin(r-Math.PI/2),f=X({unit:a.unit,dpi:a.dpi,px:i/a.scale,precious:"px"===a.unit?0:1})+" x "+X({unit:a.unit,dpi:a.dpi,px:o/a.scale,precious:"px"===a.unit?0:1})+("px"===a.unit?"":" "+a.unit);return t.createElement(t.Fragment,null,t.createElement(s,{x:(m.minX+m.maxX)/2+h,y:(m.minY+m.maxY)/2+p,offsetX:14,offsetY:14,visible:"rotater"===l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:Math.round(x.Util.radToDeg(r)).toString()+"°"})),t.createElement(s,{x:(m.minX+m.maxX)/2,y:m.maxY+20,visible:"rotater"!==l},t.createElement(g,{cornerRadius:5,fill:c||"rgb(0, 161, 255)",pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:d||"white",padding:8,text:f})))}),H=n(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),o=e.filter(e=>!e.alwaysOnTop).concat(i);return t.createElement(t.Fragment,null,o.map(e=>t.createElement(b,{key:e.id,store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}})))});export const useContextMenu=({store:e})=>{const[n,i]=t.useState(!1),[o,r]=t.useState({x:0,y:0}),l=t.useCallback(e=>{i(!0),r(e)},[]);return{open:l,close:t.useCallback(()=>{i(!1)},[]),props:{isOpen:n,offset:o,setIsOpen:i}}};let V=null;export const registerNextDomDrop=e=>{V=e};const Z=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),K=atob("cmVk"),U=atob("djAuOS4y"),J=e=>t.createElement(t.Fragment,null,t.createElement(s,{fill:K,height:200},t.createElement(g,{fill:K}),t.createElement(u,Object.assign({},e,{fill:"white",text:Z,height:void 0,padding:10,fontSize:20}))));export default n(({store:e,page:n,width:r,height:a,pageControlsEnabled:f,backColor:b,pageBorderColor:E,activePageBorderColor:y,components:X,bleedColor:D,altCloneEnabled:P,viewportSize:R,selectionRectFill:M,selectionRectStroke:j,selectionRectStrokeWidth:I,snapGuideStroke:F,snapGuideStrokeWidth:_,snapGuideDash:Z,transformLabelFill:K,transformLabelTextFill:$,distanceGuideStroke:q,distanceLabelFill:Q,distanceLabelTextFill:ee})=>{const te=e.bleedVisible?n.bleed:0,ne=n.computedWidth+2*te,ie=n.computedHeight+2*te,oe=(r-ne*e.scale)/2,re=(a-ie*e.scale)/2,le=t.useRef(null),ae=t.useRef(null),se=t.useRef(null),ce=null==f||f,[de,me]=t.useState(null),[he,ge]=t.useState({}),ue=useContextMenu({store:e}),pe=e.selectedElements.find(e=>e._cropModeEnabled),fe=e.selectedShapes.filter(e=>!e.resizable).length>0,xe=e.selectedShapes.filter(e=>!e.draggable).length>0,be=e.selectedElements.filter(e=>!e.visible).length>0;t.useLayoutEffect(()=>{var t,n,i;if(!le.current){return}const o=le.current.getStage(),r=e.selectedShapes.map(e=>e._cropModeEnabled?null:o.findOne("#"+e.id)).filter(e=>e),l=1===e.selectedElements.length&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many";if(W[l]?(le.current.setAttrs(Object.assign(Object.assign({},T),W[l])),"svg"!==l&&"image"!==l&&"gif"!==l||e.selectedElements[0].keepRatio||le.current.setAttrs({enabledAnchors:T.enabledAnchors}),"text"===l&&A.textVerticalResizeEnabled&&le.current.setAttrs({enabledAnchors:null===(n=W.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center"])})):le.current.setAttrs(T),fe&&le.current.enabledAnchors([]),xe&&le.current.rotateEnabled(!1),r.find(e=>null==e?void 0:e.isDragging())&&r.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),le.current.nodes(r),0===x.DD._dragElements.size){return}const a=[...x.DD._dragElements.entries()],s=a.find(([e,t])=>t.node instanceof x.Transformer);s&&(a.splice(a.indexOf(s),1),a.unshift(s),x.DD._dragElements.clear(),a.forEach(([e,t])=>{x.DD._dragElements.set(e,t)}),null===(i=le.current.getLayer())||void 0===i||i.batchDraw())},[e.selectedShapes,pe,fe,be,xe]);const ve=i(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),Ee=t.useRef(!1),ye=O(),we=o(e=>{var t,n,i,o;if(ye){return}Ee.current=!1;const r=e.target.findAncestor(".elements-container"),l=e.target.findAncestor("Transformer"),a=e.target.findAncestor(".page-abs-container");if(r||l||a){return}const s=null===(t=e.target.getStage())||void 0===t?void 0:t.getPointerPosition();s.x-=null===(n=e.target.getStage())||void 0===n?void 0:n.x(),s.y-=null===(i=e.target.getStage())||void 0===i?void 0:i.y(),s&&(ve.visible=!0,ve.x1=s.x,ve.y1=s.y,ve.x2=s.x,ve.y2=s.y,(null===(o=e.target.getStage())||void 0===o?void 0:o.getPointersPositions().length)>=2&&(ve.visible=!1))});(({stageRef:e,containerRef:n,viewportSize:i})=>{t.useEffect(()=>{var t;const i=null===(t=n.current)||void 0===t?void 0:t.closest(".polotno-workspace-inner");function o(){var t;if(!e.current){return}const o=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect(),l=Math.max(0,r.left-o.left-100),a=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-a}),e.current.container().style.transform=`translate(${l}px, ${a}px)`}return o(),i.addEventListener("scroll",o),()=>{i.removeEventListener("scroll",o)}},[i.width,i.height])})({stageRef:ae,containerRef:se,viewportSize:R}),t.useEffect(()=>{const t=o(e=>{var t,n,i,o;if(!ve.visible){return}null===(t=ae.current)||void 0===t||t.setPointersPositions(e);let r=null===(n=ae.current)||void 0===n?void 0:n.getPointerPosition();r?(r.x-=null===(i=ae.current)||void 0===i?void 0:i.x(),r.y-=null===(o=ae.current)||void 0===o?void 0:o.y()):r={x:ve.x2,y:ve.y2},ve.x2=r.x,ve.y2=r.y}),n=o(()=>{if(!ve.visible){return}if(!ae.current){return}const t=ae.current.findOne(".selection"),n=t?t.getClientRect():{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];ae.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,a=null==r?void 0:r.selectable;x.Util.haveIntersection(n,o)&&l&&a&&t.push(r.top.id)});const i=[...new Set(t)];e.selectElements(i)}ve.visible=!1,Ee.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 ke=t.useRef(!1);t.useEffect(()=>{var e;let t;const n=null===(e=se.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{ke.current=!0,clearTimeout(t),t=setTimeout(()=>{ke.current=!1},300)};return n.addEventListener("scroll",i),()=>{clearTimeout(t),n.removeEventListener("scroll",i)}},[]);const Ye=t=>{if(e.activePage!==n&&n.select(),ke.current){return}if(Ee.current){return}const i=t.evt.ctrlKey||t.evt.metaKey||t.evt.shiftKey,o=t.target.findAncestor(".elements-container"),r=t.target.findAncestor(".page-abs-container"),l=t.target.findAncestor("Transformer");if(!(i||o||l||r)){return void e.selectElements([])}const a=t.target.findAncestor(".element",!0),s=e.getElementById(null==a?void 0:a.id()),c=null==s?void 0:s.top,d=null==c?void 0:c.id,m=e.selectedElementsIds.indexOf(d)>=0;d&&i&&!m?e.selectElements(e.selectedElementsIds.concat([d])):d&&i&&m?e.selectElements(e.selectedElementsIds.filter(e=>e!==d)):!d||i||m||e.selectElements([d])};v(le,e,{stroke:F,strokeWidth:_,dash:Z});const Se=e.activePage===n,Xe=null==X?void 0:X.PageControls,Ce=null==X?void 0:X.Tooltip,Ae=null==X?void 0:X.ContextMenu,Oe=1/e.scale,De=0/e.scale;return t.createElement("div",{ref:se,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),!ae.current){return}ae.current.setPointersPositions(t);const i=ae.current.findOne(".elements-container").getRelativePointerPosition(),o=ae.current.getPointerPosition(),r=ae.current.getAllIntersections(o).map(e=>e.findAncestor(".element",!0)).filter(Boolean),l=[...new Set(r.reverse())].map(t=>e.getElementById(t.id())),a=l[0];V&&(V(i,a,{elements:l,page:n}),V=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden"},className:"polotno-page-container"+(Se?" active-page":"")},t.createElement(h,{ref:ae,width:Math.min(r,R.width+200),height:Math.min(R.height+200,a),onClick:Ye,onTap:Ye,onContextMenu:t=>{t.evt.preventDefault();const n=t.target.findAncestor(".element",!0),i=e.getElementById(null==n?void 0:n.id()),o=null==i?void 0:i.top,r=null==o?void 0:o.id;r?e.selectedElementsIds.indexOf(r)>=0||e.selectElements([r]):e.selectElements([]),ue.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:we,onMouseMove:t=>{if(!t.evt.altKey&&de){return void me(null)}if(!t.evt.altKey){return}const i=t.target.findAncestor(".element",!0),o=null==i?void 0:i.id();if(!e.selectedElements[0]){return}if(e.selectedElementsIds.includes(o)){return}const r=S(e.selectedShapes),l=o?e.getElementById(o):{x:0,y:0,width:n.computedWidth,height:n.computedHeight,rotation:0},a=Y(l),s=[];r.minX>a.maxX&&s.push({distance:r.minX-a.maxX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),r.maxX<a.minX&&s.push({distance:a.minX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),r.minY>a.maxY&&s.push({box1:r,box2:a,distance:r.minY-a.maxY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]}),r.maxY<a.minY&&s.push({box1:r,box2:a,distance:a.minY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),r.minX>=a.minX&&r.maxX<=a.maxX&&r.minY>=a.minY&&r.maxY<=a.maxY&&(s.push({distance:r.minX-a.minX,box1:r,box2:a,points:[{x:r.minX,y:r.minY+r.height/2},{x:a.minX,y:r.minY+r.height/2},{x:a.minX,y:a.minY+a.height/2}]}),s.push({distance:a.maxX-r.maxX,box1:r,box2:a,points:[{x:r.maxX,y:r.minY+r.height/2},{x:a.maxX,y:r.minY+r.height/2},{x:a.maxX,y:a.minY+a.height/2}]}),s.push({box1:r,box2:a,distance:r.minY-a.minY,points:[{x:r.minX+r.width/2,y:r.minY},{x:r.minX+r.width/2,y:a.minY},{x:a.minX+a.width/2,y:a.minY}]}),s.push({box1:r,box2:a,distance:a.maxY-r.maxY,points:[{x:r.minX+r.width/2,y:r.maxY},{x:r.minX+r.width/2,y:a.maxY},{x:a.minX+a.width/2,y:a.maxY}]})),JSON.stringify(de)!==JSON.stringify(s)&&me(s)},onDragStart:t=>{var n;const i=t.target.findAncestor(".element",!0);if(i){const o=e.getElementById(null==i?void 0:i.id()),r=null==o?void 0:o.top,l=null==r?void 0:r.id;!(e.selectedElementsIds.indexOf(l)>=0)&&l&&(e.selectElements([l]),t.target.stopDrag(),t.target.startDrag(t),null===(n=le.current)||void 0===n||n.startDrag(t))}de&&me(null)},pageId:n.id,style:{position:"absolute",overflow:"hidden",top:0,left:0}},t.createElement(c,null,t.createElement(B,{width:r,height:a,fill:b}),t.createElement(l,{x:oe,y:re,scaleX:e.scale,scaleY:e.scale,name:"page-container"},t.createElement(l,{name:"page-container-2"},t.createElement(l,{name:"page-background-group",x:te,y:te},t.createElement(G,{x:-n.bleed,y:-n.bleed,width:n.computedWidth+2*n.bleed,height:n.computedHeight+2*n.bleed,background:n.background,name:"page-background",preventDefault:!1,scale:e.scale})),t.createElement(l,{x:te,y:te,name:"elements-container",listening:!e.isPlaying},t.createElement(m,{name:"elements-area",width:n.computedWidth,height:n.computedHeight,listening:!1}),t.createElement(H,{elements:n.children,store:e})),t.createElement(m,{stroke:D,name:"bleed",strokeWidth:n.bleed,x:n.bleed/2,y:n.bleed/2,width:n.computedWidth+n.bleed,height:n.computedHeight+n.bleed,listening:!1,visible:n.bleed>0&&e.bleedVisible,hideInExport:!0}),k()===U&&t.createElement(J,{name:"hit-detection",x:-Oe/2-De,y:-Oe/2-De,width:ne+Oe+2*De,height:ie+Oe+2*De}))),t.createElement(d,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,oe,re,oe,a-re,r-oe,a-re,r-oe,re,oe,re],listening:!1,closed:!0,fill:b}),t.createElement(l,{x:oe,y:re,scaleX:e.scale,scaleY:e.scale},t.createElement(m,{name:"page-highlight",hideInExport:!0,x:-Oe/2-De,y:-Oe/2-De,width:ne+Oe+2*De,height:ie+Oe+2*De,stroke:Se&&e.pages.length>1?y:E,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})),t.createElement(l,{x:oe+te*e.scale,y:re+te*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container"},t.createElement(p,{ref:le,onDragStart:t=>{var i;(null===(i=t.evt)||void 0===i?void 0:i.altKey)&&P&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),i=n.children.indexOf(e);n.setElementZIndex(t.id,i)}),e.history.startTransaction()},onDragEnd:()=>{e.history.endTransaction()},onTransformStart:()=>{e.history.startTransaction(),me(null)},boundBoxFunc:(e,t)=>{const n=Math.abs(t.width)<1||Math.abs(t.height)<1,i=Math.abs(e.width)<1||Math.abs(e.height)<1;return n&&!i?e:t},onTransform:e=>{var t,n;const i=le.current.nodes(),o=i[i.length-1];if(e.target!==o){return}const r=null===(t=le.current)||void 0===t?void 0:t.__getNodeRect(),l=null===(n=le.current)||void 0===n?void 0:n.getActiveAnchor();ge({anchor:l,x:r.x,y:r.y,rotation:r.rotation,width:r.width,height:r.height})},onTransformEnd:t=>{ge({}),e.history.endTransaction()},visible:!e.isPlaying}),de&&de.map(({points:n,distance:i,box1:o,box2:r},a)=>t.createElement(l,{name:"distances-container",hideInExport:!0,key:a,listening:!1},t.createElement(m,Object.assign({},o,{stroke:q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(m,Object.assign({},r,{stroke:q,strokeWidth:1,strokeScaleEnabled:!1})),t.createElement(d,{points:[n[0].x,n[0].y,n[1].x,n[1].y],stroke:q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(d,{points:[n[1].x,n[1].y,n[2].x,n[2].y],stroke:q,strokeWidth:1,strokeScaleEnabled:!1}),t.createElement(s,{x:(n[0].x+n[1].x)/2,y:(n[0].y+n[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale},t.createElement(g,{cornerRadius:5,fill:Q,pointerDirection:"down"}),t.createElement(u,{align:"center",verticalAlign:"middle",fill:ee,padding:5,text:C({unit:e.unit,dpi:e.dpi,px:i})})))),n._rendering&&t.createElement(l,null,t.createElement(m,{width:ne,height:ie,fill:"rgba(255,255,255,0.9)"}),t.createElement(u,{text:"Rendering...",fontSize:60,width:ne,height:ie,align:"center",verticalAlign:"middle"})),Ce&&t.createElement(Ce,{components:X,store:e,page:n,stageRef:ae}),Ae&&t.createElement(L,null,t.createElement(Ae,Object.assign({components:X,store:e},ue.props)))),t.createElement(N,Object.assign({},he,{store:e,tagFill:K,textFill:$})),t.createElement(z,{selection:ve,fill:M,stroke:j,strokeWidth:I}),w()&&t.createElement(u,{text:"Powered by polotno.com",fontSize:14,fill:"rgba(0,0,0,0.6)",x:r-170,y:a-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")}}),t.createElement(l,{name:"line-guides"}))),ce&&Xe&&t.createElement(Xe,{store:e,page:n,xPadding:oe,yPadding:re}))});
|
package/canvas/tooltip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import{observer as t}from"mobx-react-lite";import{Html as n}from"react-konva-utils";import{Navbar as o,NavbarGroup as
|
|
1
|
+
import e from"react";import{observer as t}from"mobx-react-lite";import{Html as n}from"react-konva-utils";import{Navbar as o,NavbarGroup as r}from"@blueprintjs/core";import{getTotalClientRect as l}from"../utils/math.js";import{extendToolbar as i}from"../toolbar/element-container.js";import{TextAiWrite as s}from"../toolbar/text-ai-write.js";import{DuplicateButton as a}from"../toolbar/duplicate-button.js";import{RemoveButton as u}from"../toolbar/remove-button.js";import{PositionPicker as c}from"../toolbar/position-picker.js";import{GroupButton as d}from"../toolbar/group-button.js";function m(e,t){return e.classList.contains(t)?e:e.parentElement?m(e.parentElement,t):null}const f=()=>null;export const Tooltip=t(({store:t,page:p,components:v,stageRef:g})=>{var h,E;const b=t.selectedShapes.every(e=>e.page===p),k=e.useRef(null),[y,x]=e.useState(!1),C=t._hasCroppedImages;t.selectedElements.length,e.useEffect(()=>{var e,t,n;const o=()=>{x(!0)},r=()=>{x(!1)};null===(e=null==g?void 0:g.current)||void 0===e||e.on("dragstart",o),null===(t=null==g?void 0:g.current)||void 0===t||t.on("dragend",r);const l=null===(n=null==g?void 0:g.current)||void 0===n?void 0:n.findOne("Transformer");return null==l||l.on("transformstart",o),null==l||l.on("transformend",r),()=>{var e,t;null===(e=null==g?void 0:g.current)||void 0===e||e.off("dragstart",o),null===(t=null==g?void 0:g.current)||void 0===t||t.off("dragend",r),null==l||l.off("transformstart",o),null==l||l.off("transformend",r)}},[]);const[I,j]=e.useState({fit:!0,needCalculate:!1,token:Math.random()});if(e.useEffect(()=>{0!==t.selectedElements.length&&j({fit:!0,needCalculate:!0,token:Math.random()})},[t.selectedElements,y]),e.useLayoutEffect(()=>{const e=setTimeout(()=>{if(!k.current){return}if(!I.needCalculate){return}const e=m(k.current,"polotno-workspace-container");if(!e){return}const t=e.getBoundingClientRect(),n=k.current.getBoundingClientRect(),o=(n.right,t.left,n.top-t.top),r=(n.left,t.left,n.bottom-t.top);o<20&&I.fit?j({fit:!1,needCalculate:!1,token:I.token}):r-t.height>-20&&!I.fit?j({fit:!0,needCalculate:!1,token:I.token}):j({fit:I.fit,needCalculate:!1,token:I.token})},100);return()=>{clearTimeout(e)}},[I.needCalculate,k.current,I.token]),e.useEffect(()=>{const e=m(g.current.content,"polotno-workspace-inner"),n=()=>{t.selectedElements.length&&j({fit:!0,needCalculate:!0,token:Math.random()})};return null==e||e.addEventListener("scroll",n),()=>{null==e||e.removeEventListener("scroll",n)}},[]),0===t.selectedShapes.length){return null}if(y){return null}if(!b){return null}if(t.activePage!==p){return null}if(C){return null}const w=l(t.selectedShapes),N=(null==v?void 0:v.Position)||c,T=(null==v?void 0:v.Duplicate)||a,O=(null==v?void 0:v.Remove)||u,R=(null==v?void 0:v.Group)||d,S=(null==v?void 0:v.Lock)||f,M=t.selectedElements[0].type,Y=Object.assign({TextAiWrite:s},v),B=i({components:Y,type:M,usedItems:[]}),F=(null===(E=null===(h=null==g?void 0:g.current)||void 0===h?void 0:h.findOne("Transformer"))||void 0===E?void 0:E.rotation())||0;let L=30;return Math.abs(F)<30&&I.fit&&(L=80),Math.abs(F)>140&&!I.fit&&(L=80),e.createElement(n,{parentNodeFunc:({stage:e})=>{var t,n;return(null===(t=null==e?void 0:e.container())||void 0===t?void 0:t.closest(".polotno-workspace-container"))||(null===(n=null==e?void 0:e.container())||void 0===n?void 0:n.parentNode)},transformFunc:e=>{var t;const n=w.x+w.width/2,o=I.fit?w.y*e.scaleY-L:w.y*e.scaleY+w.height*e.scaleY+L,r=null===(t=null==g?void 0:g.current)||void 0===t?void 0:t.container(),l=(null==r?void 0:r.getBoundingClientRect())||{left:0,top:0,width:0,height:0,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},i=null==r?void 0:r.closest(".polotno-workspace-container"),s=(null==i?void 0:i.getBoundingClientRect())||{left:0,top:0,width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},a=l.left-s.left,u=l.top-s.top;let c=a+e.x+n*e.scaleX;const d=k.current?k.current.getBoundingClientRect().width:0;if(Number.isFinite(s.width)&&d>0){const e=8+d/2,t=s.width-8-d/2;t>=e&&(c=Math.max(e,Math.min(c,t)))}return Object.assign(Object.assign({},e),{x:c,y:u+e.y+o,scaleX:1,scaleY:1})},divProps:{style:{pointerEvents:"none",position:"absolute",visibility:I.needCalculate?"hidden":"visible",zIndex:9}}},e.createElement("div",{ref:k,style:{pointerEvents:"none"}},e.createElement(o,{style:{padding:"2px",borderRadius:"5px",height:"34px",transform:"translate(-50%, -50%)",pointerEvents:"auto"}},e.createElement(r,{style:{height:"30px"}},B.map(n=>{const o=Y[n];return e.createElement(o,{elements:t.selectedElements,element:t.selectedElements[0],store:t,key:n})}),e.createElement(R,{store:t}),e.createElement(S,{store:t}),e.createElement(T,{store:t}),e.createElement(O,{store:t}),e.createElement(N,{store:t})))))});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import t from"konva";import{getClientRect as n}from"../utils/math.js";const o={stroke:"rgb(0, 161, 255)",strokeWidth:1,dash:[4,6]};export const setSnapGuideStyle=({stroke:e,strokeWidth:t,dash:n})=>{void 0!==e&&(o.stroke=e),void 0!==t&&(o.strokeWidth=t),void 0!==n&&(o.dash=n)};let i=({targetKonvaNodes:e,guideKonvaNode:t,distance:n,snapDirection:o})=>n<5;export const setSnapFilterFunc=e=>{i=e};function r(e,t){var n=[],o=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var o=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:o,snapDirection:e.snap})&&n.push({lineGuide:e.offset,diff:o,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:n,snapDirection:e.snap})&&o.push({lineGuide:e.offset,diff:n,snap:t.snap,offset:t.offset})})});var r=[];const s=n.sort((e,t)=>e.diff-t.diff),a=o.sort((e,t)=>e.diff-t.diff);var d=s[0],f=a[0];return d&&s.filter(e=>Math.abs(e.diff-d.diff)<.1).forEach(e=>{r.push(Object.assign({orientation:"V"},e))}),f&&a.filter(e=>Math.abs(e.diff-f.diff)<.1).forEach(e=>{r.push(Object.assign({orientation:"H"},e))}),r}export function useSnap(i,d,f){const c=e.useRef(null);setSnapGuideStyle(f);const l=e=>e.hasName("element")||e.hasName("page-background")||!c.current&&e.hasName("elements-area");function u(e){var t;const n=null===(t=i.current)||void 0===t?void 0:t.getStage(),o=[],r=[];return n.find(l).forEach(t=>{if(!(e.indexOf(t)>=0)){var n=t.getClientRect({skipShadow:!0,skipStroke:!0});o.push({offset:n.x,node:t,snap:"start"},{offset:n.x+n.width,node:t,snap:"end"},{offset:n.x+n.width/2,node:t,snap:"center"}),r.push({offset:n.y,node:t,snap:"start"},{offset:n.y+n.height,node:t,snap:"end"},{offset:n.y+n.height/2,node:t,snap:"center"})}}),{vertical:o,horizontal:r}}function h(e){var n;const r=null===(n=i.current)||void 0===n?void 0:n.getLayer(),s=null==r?void 0:r.children.find(e=>"line-guides"===e.name());e.forEach(e=>{if("H"===e.orientation){var n=new t.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash});null==s||s.add(n),r.batchDraw()}else{"V"===e.orientation&&(n=new t.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash}),null==s||s.add(n))}})}const g=e=>{const o=e.target.getLayer().children.find(e=>"line-guides"===e.name());null==o||o.destroyChildren();var i=u(e.target.nodes()),s=function(e){const o=e.__getNodeRect(),i=n(Object.assign(Object.assign({},o),{rotation:t.Util.radToDeg(o.rotation)})),r=e.getAbsolutePosition();return{vertical:[{guide:i.x,offset:r.x-i.x,snap:"start",nodes:e.nodes()},{guide:i.x+i.width/2,offset:r.x-i.x-i.width/2,snap:"center",nodes:e.nodes()},{guide:i.x+i.width,offset:r.x-i.x-i.width,snap:"end",nodes:e.nodes()}],horizontal:[{guide:i.y,offset:r.y-i.y,snap:"start",nodes:e.nodes()},{guide:i.y+i.height/2,offset:r.y-i.y-i.height/2,snap:"center",nodes:e.nodes()},{guide:i.y+i.height,offset:r.y-i.y-i.height,snap:"end",nodes:e.nodes()}]}}(e.target),a=r(i,s);if(!a.length){return}h(a);const d=e.target.getAbsolutePosition(),f=(e.target.nodes().map(e=>e.getAbsolutePosition()),Object.assign({},d));a.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":f.x=e.lineGuide+e.offset;break;case"H":f.y=e.lineGuide+e.offset}}});const c=f.x-d.x,l=f.y-d.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+c,y:t.y+l})})},y=(e,t,n)=>{var o;const d=i.current,f=d.getLayer().children.find(e=>"line-guides"===e.name());if(null==f||f.destroyChildren(),"rotater"===d.getActiveAnchor()){return t}const c=d.getActiveAnchor(),l=a[c],g=null===(o=d.findOne(`.${l}`))||void 0===o?void 0:o.getAbsolutePosition();if(!g){return t}const y={x:e.x-g.x,y:e.y-g.y},p=function(e,t){const n=s(e,t)/s(t,t);return{x:n*t.x,y:n*t.y}}({x:t.x-e.x,y:t.y-e.y},y),x={x:e.x+p.x,y:e.y+p.y};var v=r(u(d.nodes()),{vertical:[{guide:x.x,offset:0,snap:"start",nodes:d.nodes()}],horizontal:[{guide:x.y,offset:0,snap:"start",nodes:d.nodes()}]});if(!v.length){return t}if(h(v),n.ctrlKey||n.metaKey){return t}const m=[];if(v.forEach(e=>{const t=function(e,t,n){if("V"===n.orientation){const o=n.lineGuide;if(Math.abs(t.x-e.x)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:o,y:i*o+(e.y-i*e.x)}}{const o=n.lineGuide;if(Math.abs(t.y-e.y)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:(o-e.y)/i+e.x,y:o}}}(x,g,{orientation:e.orientation,lineGuide:e.lineGuide});t&&m.push(t)}),m.length>0){let e=m[0],t=Math.sqrt(Math.pow(x.x-e.x,2)+Math.pow(x.y-e.y,2));if(m.forEach(n=>{const o=Math.sqrt(Math.pow(x.x-n.x,2)+Math.pow(x.y-n.y,2));o<t&&(t=o,e=n)}),t<10){return e}}return x},p=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find(e=>"line-guides"===e.name());null==n||n.destroyChildren(),t.batchDraw()};e.useEffect(()=>{i.current&&(i.current.anchorDragBoundFunc(y),i.current.on("
|
|
1
|
+
import e from"react";import t from"konva";import{getClientRect as n}from"../utils/math.js";const o={stroke:"rgb(0, 161, 255)",strokeWidth:1,dash:[4,6]};export const setSnapGuideStyle=({stroke:e,strokeWidth:t,dash:n})=>{void 0!==e&&(o.stroke=e),void 0!==t&&(o.strokeWidth=t),void 0!==n&&(o.dash=n)};let i=({targetKonvaNodes:e,guideKonvaNode:t,distance:n,snapDirection:o})=>n<5;export const setSnapFilterFunc=e=>{i=e};function r(e,t){var n=[],o=[];e.vertical.forEach(e=>{t.vertical.forEach(t=>{var o=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:o,snapDirection:e.snap})&&n.push({lineGuide:e.offset,diff:o,snap:t.snap,offset:t.offset})})}),e.horizontal.forEach(e=>{t.horizontal.forEach(t=>{var n=Math.abs(e.offset-t.guide);i({targetKonvaNodes:t.nodes,guideKonvaNode:e.node,distance:n,snapDirection:e.snap})&&o.push({lineGuide:e.offset,diff:n,snap:t.snap,offset:t.offset})})});var r=[];const s=n.sort((e,t)=>e.diff-t.diff),a=o.sort((e,t)=>e.diff-t.diff);var d=s[0],f=a[0];return d&&s.filter(e=>Math.abs(e.diff-d.diff)<.1).forEach(e=>{r.push(Object.assign({orientation:"V"},e))}),f&&a.filter(e=>Math.abs(e.diff-f.diff)<.1).forEach(e=>{r.push(Object.assign({orientation:"H"},e))}),r}export function useSnap(i,d,f){const c=e.useRef(null);setSnapGuideStyle(f);const l=e=>e.hasName("element")||e.hasName("page-background")||!c.current&&e.hasName("elements-area");function u(e){var t;const n=null===(t=i.current)||void 0===t?void 0:t.getStage(),o=[],r=[];return n.find(l).forEach(t=>{if(!(e.indexOf(t)>=0)){var n=t.getClientRect({skipShadow:!0,skipStroke:!0});o.push({offset:n.x,node:t,snap:"start"},{offset:n.x+n.width,node:t,snap:"end"},{offset:n.x+n.width/2,node:t,snap:"center"}),r.push({offset:n.y,node:t,snap:"start"},{offset:n.y+n.height,node:t,snap:"end"},{offset:n.y+n.height/2,node:t,snap:"center"})}}),{vertical:o,horizontal:r}}function h(e){var n;const r=null===(n=i.current)||void 0===n?void 0:n.getLayer(),s=null==r?void 0:r.children.find(e=>"line-guides"===e.name());e.forEach(e=>{if("H"===e.orientation){var n=new t.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash});null==s||s.add(n),r.batchDraw()}else{"V"===e.orientation&&(n=new t.Line({x:-r.getStage().x(),y:-r.getStage().y(),points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash}),null==s||s.add(n))}})}const g=e=>{const o=e.target.getLayer().children.find(e=>"line-guides"===e.name());null==o||o.destroyChildren();var i=u(e.target.nodes()),s=function(e){const o=e.__getNodeRect(),i=n(Object.assign(Object.assign({},o),{rotation:t.Util.radToDeg(o.rotation)})),r=e.getAbsolutePosition();return{vertical:[{guide:i.x,offset:r.x-i.x,snap:"start",nodes:e.nodes()},{guide:i.x+i.width/2,offset:r.x-i.x-i.width/2,snap:"center",nodes:e.nodes()},{guide:i.x+i.width,offset:r.x-i.x-i.width,snap:"end",nodes:e.nodes()}],horizontal:[{guide:i.y,offset:r.y-i.y,snap:"start",nodes:e.nodes()},{guide:i.y+i.height/2,offset:r.y-i.y-i.height/2,snap:"center",nodes:e.nodes()},{guide:i.y+i.height,offset:r.y-i.y-i.height,snap:"end",nodes:e.nodes()}]}}(e.target),a=r(i,s);if(!a.length){return}h(a);const d=e.target.getAbsolutePosition(),f=(e.target.nodes().map(e=>e.getAbsolutePosition()),Object.assign({},d));a.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":f.x=e.lineGuide+e.offset;break;case"H":f.y=e.lineGuide+e.offset}}});const c=f.x-d.x,l=f.y-d.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach(e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+c,y:t.y+l})})},y=(e,t,n)=>{var o;const d=i.current,f=d.getLayer().children.find(e=>"line-guides"===e.name());if(null==f||f.destroyChildren(),"rotater"===d.getActiveAnchor()){return t}const c=d.getActiveAnchor(),l=a[c],g=null===(o=d.findOne(`.${l}`))||void 0===o?void 0:o.getAbsolutePosition();if(!g){return t}const y={x:e.x-g.x,y:e.y-g.y},p=function(e,t){const n=s(e,t)/s(t,t);return{x:n*t.x,y:n*t.y}}({x:t.x-e.x,y:t.y-e.y},y),x={x:e.x+p.x,y:e.y+p.y};var v=r(u(d.nodes()),{vertical:[{guide:x.x,offset:0,snap:"start",nodes:d.nodes()}],horizontal:[{guide:x.y,offset:0,snap:"start",nodes:d.nodes()}]});if(!v.length){return t}if(h(v),n.ctrlKey||n.metaKey){return t}const m=[];if(v.forEach(e=>{const t=function(e,t,n){if("V"===n.orientation){const o=n.lineGuide;if(Math.abs(t.x-e.x)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:o,y:i*o+(e.y-i*e.x)}}{const o=n.lineGuide;if(Math.abs(t.y-e.y)<1e-4){return null}const i=(t.y-e.y)/(t.x-e.x);return{x:(o-e.y)/i+e.x,y:o}}}(x,g,{orientation:e.orientation,lineGuide:e.lineGuide});t&&m.push(t)}),m.length>0){let e=m[0],t=Math.sqrt(Math.pow(x.x-e.x,2)+Math.pow(x.y-e.y,2));if(m.forEach(n=>{const o=Math.sqrt(Math.pow(x.x-n.x,2)+Math.pow(x.y-n.y,2));o<t&&(t=o,e=n)}),t<10){return e}}return x},p=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find(e=>"line-guides"===e.name());null==n||n.destroyChildren(),t.batchDraw()};e.useEffect(()=>{i.current&&(i.current.anchorDragBoundFunc(y),i.current.on("dragmove",g),i.current.on("dragend",p),i.current.on("transformend",p),i.current.on("transform",e=>{var t,n;e.evt.ctrlKey||e.evt.metaKey?null===(t=i.current)||void 0===t||t.rotationSnapTolerance(0):null===(n=i.current)||void 0===n||n.rotationSnapTolerance(5)}))},[])}export function useAnchorSnap(n,i,s){const a=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area"),d=e=>{const s=e.target.getLayer().children.find(e=>"line-guides"===e.name());null==s||s.destroyChildren();var d,f=r(function(e){var t;const o=null===(t=n.current)||void 0===t?void 0:t.getStage();var i=[],r=[];return o.find(a).forEach(t=>{if(!(e.indexOf(t)>=0)){var n=t.getClientRect({skipShadow:!0,skipStroke:!0});t.hasName("line-anchor")&&(n={x:t.absolutePosition().x,y:t.absolutePosition().y,width:0,height:0}),i.push({offset:n.x,node:t,snap:"start"},{offset:n.x+n.width,node:t,snap:"end"},{offset:n.x+n.width/2,node:t,snap:"center"}),r.push({offset:n.y,node:t,snap:"start"},{offset:n.y+n.height,node:t,snap:"end"},{offset:n.y+n.height/2,node:t,snap:"center"})}}),{vertical:i,horizontal:r}}([e.target,...i.map(e=>e.current)]),{vertical:[{guide:(d=e.target).absolutePosition().x,offset:0,snap:"center",nodes:[d]}],horizontal:[{guide:d.absolutePosition().y,offset:0,snap:"center",nodes:[d]}]});if(!f.length){return}!function(e){var i;const r=null===(i=n.current)||void 0===i?void 0:i.getLayer(),s=null==r?void 0:r.children.find(e=>"line-guides"===e.name());e.forEach(e=>{if("H"===e.orientation){var n=new t.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash});null==s||s.add(n),r.batchDraw()}else{"V"===e.orientation&&(n=new t.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:o.stroke,strokeWidth:o.strokeWidth,name:"guid-line",dash:o.dash}),null==s||s.add(n))}})}(f);const c=e.target.getAbsolutePosition(),l=Object.assign({},c);f.forEach(e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":l.x=e.lineGuide+e.offset;break;case"H":l.y=e.lineGuide+e.offset}}});const u=l.x-c.x,h=l.y-c.y;if(!e.evt.ctrlKey&&!e.evt.metaKey){const t=e.target.getAbsolutePosition();e.target.absolutePosition({x:t.x+u,y:t.y+h})}},f=e=>{if(!e.target){return}const t=e.target.getLayer(),n=t.children.find(e=>"line-guides"===e.name());null==n||n.destroyChildren(),t.batchDraw()};e.useEffect(()=>{n.current&&(n.current.on("dragmove",d),n.current.on("dragend",f))},s)}function s(e,t){return e.x*t.x+e.y*t.y}const a={"top-left":"bottom-right","top-center":"bottom-center","top-right":"bottom-left","middle-right":"middle-left","bottom-right":"top-left","bottom-center":"top-center","bottom-left":"top-right","middle-left":"middle-right"};
|
|
@@ -15,6 +15,9 @@ export type WorkspaceProps = {
|
|
|
15
15
|
selectionRectStrokeWidth?: number;
|
|
16
16
|
transformLabelFill?: string;
|
|
17
17
|
transformLabelTextFill?: string;
|
|
18
|
+
distanceGuideStroke?: string;
|
|
19
|
+
distanceLabelFill?: string;
|
|
20
|
+
distanceLabelTextFill?: string;
|
|
18
21
|
components?: any;
|
|
19
22
|
onKeyDown?: (e: KeyboardEvent, store: StoreType) => void;
|
|
20
23
|
paddingX?: number;
|
|
@@ -23,7 +26,7 @@ export type WorkspaceProps = {
|
|
|
23
26
|
visiblePagesOffset?: number;
|
|
24
27
|
renderOnlyActivePage?: boolean;
|
|
25
28
|
};
|
|
26
|
-
export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, }: WorkspaceProps) => React.JSX.Element) & {
|
|
29
|
+
export declare const WorkspaceCanvas: (({ store, pageControlsEnabled, backgroundColor, pageBorderColor, activePageBorderColor, bleedColor, snapGuideStroke, snapGuideStrokeWidth, snapGuideDash, selectionRectFill, selectionRectStroke, selectionRectStrokeWidth, transformLabelFill, transformLabelTextFill, distanceGuideStroke, distanceLabelFill, distanceLabelTextFill, components, onKeyDown, paddingX, paddingY, altCloneEnabled, visiblePagesOffset, renderOnlyActivePage, }: WorkspaceProps) => React.JSX.Element) & {
|
|
27
30
|
displayName: string;
|
|
28
31
|
};
|
|
29
32
|
export default WorkspaceCanvas;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";import{observer as t}from"mobx-react-lite";import r from"./page.js";import{TopRules as n}from"./rules.js";import{AudioElement as o}from"./audio.js";import{handleHotkey as i}from"./hotkeys.js";import{t as a}from"../utils/l10n.js";const l=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,a("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},a("workspace.addPage"))),s=({width:t,height:r,xPadding:n,yPadding:o,backgroundColor:i})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:o+"px",paddingBottom:o+"px"}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),c=[4,6];export const WorkspaceCanvas=t(({store:t,pageControlsEnabled:a,backgroundColor:u,pageBorderColor:d,activePageBorderColor:h,bleedColor:g,snapGuideStroke:p,snapGuideStrokeWidth:f,snapGuideDash:m,selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,transformLabelFill:k,transformLabelTextFill:E,
|
|
1
|
+
import e from"react";import{observer as t}from"mobx-react-lite";import r from"./page.js";import{TopRules as n}from"./rules.js";import{AudioElement as o}from"./audio.js";import{handleHotkey as i}from"./hotkeys.js";import{t as a}from"../utils/l10n.js";const l=({store:t})=>e.createElement("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",textAlign:"center"}},e.createElement("p",null,a("workspace.noPages")),e.createElement("button",{onClick:()=>{t.addPage()}},a("workspace.addPage"))),s=({width:t,height:r,xPadding:n,yPadding:o,backgroundColor:i})=>e.createElement("div",{style:{width:t+"px",height:r+"px",backgroundColor:i,paddingLeft:n+"px",paddingRight:n+"px",paddingTop:o+"px",paddingBottom:o+"px"}},e.createElement("div",{style:{width:" 100%",height:"100%",backgroundColor:"white"}})),c=[4,6];export const WorkspaceCanvas=t(({store:t,pageControlsEnabled:a,backgroundColor:u,pageBorderColor:d,activePageBorderColor:h,bleedColor:g,snapGuideStroke:p,snapGuideStrokeWidth:f,snapGuideDash:m,selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,transformLabelFill:k,transformLabelTextFill:E,distanceGuideStroke:x,distanceLabelFill:y,distanceLabelTextFill:P,components:T,onKeyDown:R,paddingX:L,paddingY:C,altCloneEnabled:M=!0,visiblePagesOffset:S,renderOnlyActivePage:F})=>{var W;const O=null!=L?L:20,_=null!=C?C:55,[G,j]=e.useState({width:100,height:100}),z=e.useRef(G),B=e.useRef(null),H=e.useRef(null),D=t.bleedVisible?Math.max(0,...t.pages.map(e=>e.bleed)):0,N=Math.max(...t.pages.map(e=>e.computedWidth)),I=Math.max(...t.pages.map(e=>e.computedHeight)),K=(null===(W=t.activePage)||void 0===W?void 0:W.computedHeight)||0,Y=N+2*D,A=(F?K:I)+2*D,V=async({skipTimeout:e}={skipTimeout:!1})=>{if(e||await new Promise(e=>setTimeout(e,50)),null===B.current){return}const r=B.current.getBoundingClientRect();0!==r.width&&0!==r.height||(console.warn("Polotno warning: <Workspace /> component can not automatically detect its size.\nWidth or height of parent elements is equal 0.\nPlease make sure it has non-zero size. You may need to adjust it with your styles. <Workspace /> will automatically fit into parent container.\nFor simpler debugging here is the log of the parent element:"),console.log(B.current));const n=H.current.clientWidth||r.width,o={width:n,height:r.height};(z.current.width!==o.width||z.current.height!==o.height)&&(j(o),z.current=o);const i=(n-2*O)/Y,a=t.pages.length>1?3.1:2,l=(r.height-_*a)/A,s=t.pages.length?Math.max(Math.min(i,l),.01):1;t.scaleToFit!==s&&(t.setScale(s),t._setScaleToFit(s))};e.useLayoutEffect(()=>{V({skipTimeout:!0})},[]),e.useEffect(()=>{V()},[Y,A,C,L]),e.useLayoutEffect(()=>{V({skipTimeout:!0})},[t.openedSidePanel]),e.useEffect(()=>{t.__()},[]),e.useEffect(()=>{const e=B.current;if(window.ResizeObserver){const t=new ResizeObserver(()=>{V({skipTimeout:!0})});return t.observe(e),()=>t.unobserve(e)}{const e=setInterval(()=>{V({skipTimeout:!0})},100);return()=>clearInterval(e)}},[Y,A]);const X=Math.max(O,(G.width-Y*t.scale)/2),q=F?1:t.pages.length,J=A*t.scale*q,Q=Math.max(_,(G.height-J)/q/2);e.useEffect(()=>{const e=e=>{(R||i)(e,t)};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[]),e.useEffect(()=>{var e;const r=e=>{if(e.ctrlKey||e.metaKey){e.preventDefault();const i=Math.max(5,t.scaleToFit),a=Math.min(.1,t.scaleToFit),l=.03,s=(r=e.deltaY<0?t.scale*(1+l):t.scale/(1+l),n=a,o=i,Math.max(n,Math.min(o,r)));return void t.setScale(s)}var r,n,o};return null===(e=H.current)||void 0===e||e.addEventListener("wheel",r),()=>{var e;return null===(e=H.current)||void 0===e?void 0:e.removeEventListener("wheel",r)}},[]);const U=e.useRef(!1);((t,r,n,o,i,a)=>{const l=e.useRef({width:r,height:n}),s=e.useRef({top:0,left:0}),c=e.useRef(!1),u=e.useRef(i.pages.length);c.current=u.current!==i.pages.length,u.current=i.pages.length,e.useEffect(()=>{const e=t.current,r=t=>{s.current={top:e.scrollTop,left:e.scrollLeft}};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]),e.useLayoutEffect(()=>{if(!t.current){return}if(c.current){return}const e=t.current,o=(s.current.left+e.offsetWidth/2)/l.current.width,i=(s.current.top+e.offsetHeight/2)/l.current.height;a.current=!0,e.scrollLeft=o*r-e.offsetWidth/2,e.scrollTop=i*n-e.offsetHeight/2,l.current={width:r,height:n}},[o,r,n])})(H,Y*t.scale+2*X,A*t.scale+2*Q,t.scale,t,U);const{handleScroll:Z}=((t,r,n,o,i,a)=>{const l=e.useRef(!1),s=e.useRef(null),c=e.useRef(!1);e.useEffect(()=>{const e=t.current,r=()=>{i.current};return e.addEventListener("scroll",r),()=>{e.removeEventListener("scroll",r)}},[]);const u=n.pages.indexOf(n.activePage);return e.useLayoutEffect(()=>{if(a){return}if(!n.activePage){return}if(!t.current){return}if(l.current){return}const e=t.current,o=n.pages.indexOf(n.activePage)*r;let i=()=>{};return(Math.abs(o-e.scrollTop)>.5*r||c.current)&&(c.current=!0,i=(({element:e,scrollTop:t=0,duration:r=300,onFinish:n=()=>{}})=>{const o=e.scrollTop,i=t-o;let a=0,l=!1;if(0===r){return e.scrollTop=t,()=>{}}const s=()=>{if(l){return}a+=20;const t=c(a,o,i,r);e.scrollTop=t,a<r?setTimeout(s,20):n()},c=(e,t,r,n)=>(e/=n/2)<1?r/2*e*e+t:-r/2*(--e*(e-2)-1)+t;return s(),()=>{l=!0}})({element:e,scrollTop:o,onFinish:()=>{c.current=!1},duration:n.isPlaying?0:300})),i},[n.activePage,u,n.isPlaying,a]),{handleScroll:e=>{if(a){return}if(c.current){return}l.current=!0,clearTimeout(s.current),s.current=setTimeout(()=>{l.current=!1},300);const t=e.currentTarget.childNodes[0].offsetHeight,r=e.currentTarget.scrollTop,i=Math.floor((r+o.height/3)/t),u=n.pages[i];u&&n.activePage!==u&&u.select()}}})(H,A*t.scale+2*Q,t,G,U,F),$=G.width>=Y*t.scale+2*X,ee=u||"rgba(232, 232, 232, 0.9)",te=t.pages.indexOf(t.activePage),re=(null==T?void 0:T.NoPages)||l,ne=null!=S?S:Math.min(3,Math.max(1,Math.ceil(G.height/2/(A*t.scale))));return e.createElement("div",{ref:B,style:{width:"100%",height:"100%",position:"relative",outline:"none",flex:1,backgroundColor:ee,overflow:"hidden"},tabIndex:0,className:"polotno-workspace-container"},e.createElement("div",{ref:H,onScroll:Z,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",overflow:"auto",overflowX:$?"hidden":"auto"},className:"polotno-workspace-inner"},t.pages.map((n,o)=>{const i=n===t.activePage;if(F&&!i&&!n._exportingOrRendering&&!n._forceMount){return null}if(!(Math.abs(o-te)<=ne||n._exportingOrRendering||n._forceMount)){return e.createElement(s,{key:n.id,width:Y*t.scale+2*X,height:A*t.scale+2*Q,backgroundColor:ee,xPadding:X,yPadding:Q})}const l=e.createElement(r,{key:n.id,page:n,xPadding:X,yPadding:Q,width:Y*t.scale+2*X,height:A*t.scale+2*Q,store:t,pageControlsEnabled:a,backColor:ee,pageBorderColor:d||"lightgrey",activePageBorderColor:h||"rgb(0, 161, 255)",altCloneEnabled:M,bleedColor:g||"rgba(255, 0, 0, 0.1)",selectionRectFill:v,selectionRectStroke:w,selectionRectStrokeWidth:b,snapGuideStroke:p||"rgb(0, 161, 255)",snapGuideStrokeWidth:f||1,snapGuideDash:m||c,transformLabelFill:k,transformLabelTextFill:E,distanceGuideStroke:x||"rgb(0, 161, 255)",distanceLabelFill:y||"rgb(0, 161, 255)",distanceLabelTextFill:P||"white",components:T,viewportSize:G});return(n._exportingOrRendering||n._forceMount)&&!i&&F?e.createElement("div",{style:{display:"none"},key:n.id},l):l}),t.rulesVisible&&e.createElement(n,{store:t,xPadding:X,yPadding:Q,width:Y*t.scale+2*X,height:A*t.scale+2*Q}),0===t.pages.length&&e.createElement(re,{store:t}),t.audios.map(r=>e.createElement(o,{key:r.id,audio:r,store:t}))))});export default WorkspaceCanvas;
|
package/model/node-model.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{types as e,getParentOfType as t,getSnapshot as o,hasParentOfType as
|
|
1
|
+
import{types as e,getParentOfType as t,getSnapshot as o,hasParentOfType as n}from"mobx-state-tree";import{nanoid as r}from"nanoid";import{Store as s}from"./store.js";import{Page as i}from"./page-model.js";import{GroupElement as a,forEveryChild as l}from"./group-model.js";export const Node=e.model("Node",{id:e.identifier,type:"none",name:"",opacity:1,custom:e.frozen(),visible:!0,selectable:!0,removable:!0,alwaysOnTop:!1,showInExport:!0}).preProcessSnapshot(e=>{for(var t in e){null===e[t]&&(e[t]=void 0)}return e}).postProcessSnapshot(e=>{const t=Object.assign({},e),o={};for(var n in t){"_"!==n[0]&&(o[n]=e[n])}return o}).views(e=>({get locked(){return!(e.draggable||e.contentEditable||e.styleEditable||e.resizable)},get page(){return t(e,i)},get store(){return t(e,s)},get top(){let o=e;for(;;){if(!n(o,a)){return o}o=t(o,a)}},get parent(){if(n(e,a)){const o=t(e,a);return o&&o.children&&o.children.length,o}if(n(e,i)){const o=t(e,i);return o&&o.children&&o.children.length,o}if(n(e,s)){const o=t(e,s);return o&&o.pages&&o.pages.length,o}return null},get zIndex(){return e.parent.children.indexOf(e)}})).actions(e=>({toJSON:()=>Object.assign({},o(e))})).actions(e=>({clone(t={},{skipSelect:o=!1}={}){const n=JSON.parse(JSON.stringify(e.toJSON()));return t.id=t.id||r(10),l(n,e=>{e.id=r(10)}),Object.assign(n,t),e.page.addElement(n,{skipSelect:o})},set(t){Object.assign(e,t)},moveUp(){e.page.moveElementsUp([e.id])},moveTop(){e.page.moveElementsTop([e.id])},moveDown(){e.page.moveElementsDown([e.id])},moveBottom(){e.page.moveElementsBottom([e.id])},setZIndex(t){e.parent.setElementZIndex(e.id,t)},beforeDestroy(){}}));
|
package/model/store.d.ts
CHANGED
|
@@ -829,14 +829,16 @@ export declare const Store: import("mobx-state-tree").IModelType<{
|
|
|
829
829
|
saveAsHTML({ fileName }?: {
|
|
830
830
|
fileName?: string;
|
|
831
831
|
}): Promise<void>;
|
|
832
|
-
toSVG({ elementHook, pageId }?: {
|
|
832
|
+
toSVG({ elementHook, pageId, fontEmbedding }?: {
|
|
833
833
|
elementHook: any;
|
|
834
834
|
pageId: any;
|
|
835
|
+
fontEmbedding?: string;
|
|
835
836
|
}): Promise<string>;
|
|
836
|
-
saveAsSVG({ fileName, elementHook, pageId, }?: {
|
|
837
|
+
saveAsSVG({ fileName, elementHook, pageId, fontEmbedding, }?: {
|
|
837
838
|
fileName?: string;
|
|
838
839
|
elementHook?: Function;
|
|
839
840
|
pageId?: string;
|
|
841
|
+
fontEmbedding?: "none" | "inline";
|
|
840
842
|
}): Promise<void>;
|
|
841
843
|
saveAsPDF({ fileName, ...exportProps }?: ExportOptions & {
|
|
842
844
|
fileName?: string;
|
package/model/store.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__rest||function(e,t){var i={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++){t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(i[o[n]]=e[o[n]])}}return i};import{types as t,onSnapshot as i,applySnapshot as o,detach as n,getSnapshot as a,cast as s,destroy as r,setLivelinessChecking as l}from"mobx-state-tree";import{UndoManager as d}from"./history.js";import{nanoid as c}from"nanoid";import p from"konva";import{computed as m}from"mobx";import{downloadFile as g}from"../utils/download.js";import{getJsPDF as u}from"../utils/pdf.js";import{createGIF as f}from"../utils/gif-lib.js";import{validateKey as h}from"../utils/validate-key.js";import*as y from"../utils/fonts.js";import{flags as b}from"../utils/flags.js";import{whenLoaded as v}from"../utils/loader.js";import{pxToUnit as w}from"../utils/unit.js";import{deepEqual as P}from"../utils/deep-equal.js";import{waitTillAvailable as E}from"../utils/wait.js";import{jsonToHTML as x}from"../utils/to-html.js";import{jsonToSVG as k}from"../utils/to-svg.js";import{Page as _}from"./page-model.js";import{forEveryChild as I}from"./group-model.js";import{Audio as S}from"./audio-model.js";l("ignore");export const Font=t.model("Font",{fontFamily:t.string,url:t.optional(t.string,""),styles:t.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}));export const Store=t.model("Store",{role:"",pages:t.array(_),fonts:t.array(Font),audios:t.array(S),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,schemaVersion:2,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:t.frozen(),selectedElementsIds:t.array(t.string),animatedElementsIds:t.array(t.string),history:t.optional(d,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,"undefined"!=typeof window&&window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).views(e=>{const t=m(()=>{const t={};return I({children:e.pages},e=>(t[e.id]=e,!1)),t},{keepAlive:!0});return{get _idsMap(){return t.get()}}}).views(e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map(t=>{for(const i of e.pages){for(const e of i.children){if(e.id===t){return e}}}}).filter(e=>!!e)},get children(){return e.pages},get selectedShapes(){const t=[];return I({children:e.selectedElements},e=>{"group"!==e.type&&t.push(e)}),t},get activePage(){return e.pages.slice().find(t=>t.id===e._activePageId)||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach(e=>{t+=e.duration}),t},get _hasCroppedImages(){return e.find(e=>"image"===e.type&&e._cropModeEnabled)},find(t){let i;return I({children:e.pages},e=>{if(!i&&t(e)){return i=e,!0}}),i},getElementById:t=>e._idsMap[t]})).actions(e=>{let t=0,i=null,o=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},_togglePlaying(t=!e.isPlaying){e.isPlaying=t},play({animatedElementsIds:n=[],startTime:a=0,currentTime:r=0,endTime:l=e.duration,repeat:d=!1}={}){r&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),a=r),e.animatedElementsIds=s(n),e.currentTime=a,e.isPlaying=!0,t=Date.now(),i=l,o=d,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying){return}const n=Date.now(),a=n-t;t=n,e.currentTime+=a,e.checkActivePage();const s=i||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&o?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=s([]),e.checkActivePage()}}}).actions(t=>({__(){t._validated||(h(t._key,t._forceShowCredit),t._validated=!0)},set(e){Object.assign(t,e)},setUnit({unit:e,dpi:i}){t.unit=e||t.unit,t.dpi=i||t.dpi},setRole(e){t.role=e},addPage(e){const i=_.create(Object.assign({id:c(10)},e));return t.pages.push(i),t._activePageId=i.id,i},selectPage(e){t._activePageId=e},selectElements(e){const i=e.map(e=>t.getElementById(e)).sort((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t)).filter(e=>!!e).map(e=>e.id);t.selectedElementsIds=s(i)},toggleBleed(e){t.bleedVisible=null!=e?e:!t.bleedVisible},toggleRulers(e){t.rulesVisible=null!=e?e:!t.rulesVisible},openSidePanel(e){t.openedSidePanel!==e&&(t.previousOpenedSidePanel=t.openedSidePanel,t.openedSidePanel=e)},setScale(e){t.scale=e},_setScaleToFit(e){t.scaleToFit=e},setElementsPixelRatio(e){t._elementsPixelRatio=e},setSize(e,i,o){t.pages.forEach(t=>{t.setSize({width:e,height:i,useMagic:o,softChange:!0})}),t.width=e,t.height=i},setPageZIndex(e,i){const o=t.pages.find(t=>t.id===e);o&&(n(o),t.pages.remove(o),t.pages.splice(i,0,o))},deletePages(e){const i=t.pages.indexOf(t.activePage);e.forEach(e=>{const i=t.pages.find(t=>t.id===e);r(i)});const o=Math.min(t.pages.length-1,i),n=t.pages[o];n&&(t._activePageId=n.id),t.selectedElementsIds=s(t.selectedElementsIds.filter(e=>t.getElementById(e)))},groupElements(e,i={}){const o=e.map(e=>t.getElementById(e)),a=o[0].page;if(o.forEach(e=>{e&&n(e)}),!o.length){return}const r=Object.assign({id:c(10),children:o,type:"group"},i);return a.children.push(r),t.selectedElementsIds=s([r.id]),a.children.find(e=>e.id===r.id)},ungroupElements(e){const i=e.map(e=>t.getElementById(e)),o=[];i.forEach(e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach(e=>{o.push(e.id)}),e.children.forEach(e=>{n(e),t.children.push(e)}),t.children.splice(i,1)}}),t.selectedElementsIds=s(o)},deleteElements(e){const i=[];t.find(t=>(e.includes(t.id)&&i.push(t),!1)),i.forEach(e=>{r(e)}),t.selectedElementsIds=s(t.selectedElementsIds.filter(e=>t.getElementById(e)))},on(e,o){if("change"===e){let e=t.toJSON();return i(t,i=>{const n=t.toJSON();!P(e,n)&&(e=n,o(n))})}},async _toCanvas({pixelRatio:e,ignoreBackground:i,pageId:o,mimeType:n,includeBleed:a,_skipTimeout:s,quickMode:r=!1}={}){var l;const d=e||1;o=o||(null===(l=t.pages[0])||void 0===l?void 0:l.id);const c=t.pages.find(e=>e.id===o);if(!c){throw new Error(`No page for export with id ${o}`)}const m=t._elementsPixelRatio;d>t._elementsPixelRatio&&t.setElementsPixelRatio(d),r?null==c||c.set({_forceMount:!0}):null==c||c.set({_exporting:!0});const g=await E(()=>p.stages.find(e=>e.getAttr("pageId")===o));if(!g){throw null==c||c.set({_forceMount:!1,_exporting:!1}),t.setElementsPixelRatio(m),new Error(`Export is failed. Can not find stage for page ${o}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`)}await t.waitLoading({_skipTimeout:s});const u=g.findOne(".page-container");if(!u){throw t.setElementsPixelRatio(m),null==c||c.set({_forceMount:!1,_exporting:!1}),new Error("Export is failed. Canvas was unmounted.")}const f=g.position();g.position({x:0,y:0}),g.find("Transformer").forEach(e=>{e.setAttr("oldVisible",e.visible()),e.visible(!1)}),u.find(".page-background").forEach(e=>e.shadowEnabled(!1)),u.find(".page-background").forEach(e=>e.strokeEnabled(!1)),u.find(".highlighter").forEach(e=>e.visible(!1));const h=u.findOne(".page-background-group"),y=h.clip();h.clip({x:null,y:null,width:null,height:null});const b=u.findOne(".elements-container"),v=b.clip();b.clip({x:null,y:null,width:null,height:null});const w=u.find(e=>!e.visible()&&e.getAttr("editModeEnabled")&&!e.getAttr("hideInExport"));w.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.show()});const P=u.find(e=>e.getAttr("hideInExport"));P.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.hide()}),i&&u.find(".page-background").forEach(e=>e.hide());const x=a?c.bleed:0;let k=x;!t.bleedVisible&&a||(t.bleedVisible||a?t.bleedVisible&&a?k=0:t.bleedVisible&&!a&&(k=-c.bleed):k=0);const _=document.createElement("canvas");_.width=Math.round((c.computedWidth+2*x)*d),_.height=Math.round((c.computedHeight+2*x)*d);const I=_.getContext("2d");"image/jpeg"===n&&(I.fillStyle="white",I.fillRect(0,0,_.width,_.height));const S=u.scale();u.scale({x:1,y:1});const O=u.toCanvas({x:u.x()-k,y:u.y()-k,width:c.computedWidth+2*x,height:c.computedHeight+2*x,pixelRatio:d});return u.scale(S),I.drawImage(O,0,0,_.width,_.height),p.Util.releaseCanvas(O),i&&u.find(".page-background").forEach(e=>e.show()),P.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),w.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),u.find(".page-background").forEach(e=>e.shadowEnabled(!0)),u.find(".page-background").forEach(e=>e.strokeEnabled(!0)),g.find("Transformer").forEach(e=>{e.visible(e.getAttr("oldVisible"))}),u.find(".highlighter").forEach(e=>e.visible(!0)),h.clip(y),b.clip(v),g.position(f),null==c||c.set({_exporting:!1,_forceMount:!1}),await new Promise(e=>setTimeout(e)),t.setElementsPixelRatio(m),_},async toDataURL(i={}){var{mimeType:o,quality:n}=i,a=e(i,["mimeType","quality"]);const s=await t._toCanvas(Object.assign({mimeType:o},a)),r=s.toDataURL(o,n);return p.Util.releaseCanvas(s),r},async toBlob(i={}){var{mimeType:o,quality:n}=i,a=e(i,["mimeType","quality"]);const s=await t._toCanvas(Object.assign({mimeType:o},a)),r=await new Promise(e=>{s.toBlob(e,o,n)});return p.Util.releaseCanvas(s),r},async saveAsImage(i={}){var{fileName:o}=i,n=e(i,["fileName"]);const a=n.mimeType||"image/png",s=a.split("/")[1];g(await t.toDataURL(n),o||"polotno."+s,a)},async _toPDF(e){const i=e.dpi||t.dpi,o=e.parallel||1,n=e.unit||("px"===t.unit?"mm":t.unit),a=e.pixelRatio||1,s=e.pageIds||t.pages.map(e=>e.id),r=t.pages.filter(e=>s.includes(e.id)),l=await u(),d=e=>w({px:e,unit:n,dpi:i}),c=e.cropMarkSize||0,p=d(c),m=r[0]||{},g=e.includeBleed?m.bleed:0,f=d(m.computedWidth+2*g+2*p),h=d(m.computedHeight+2*g+2*p);var y=new l({unit:n,orientation:f>h?"landscape":"portrait",format:[f,h],compress:!0,putOnlyUsedFonts:!0});y.deletePage(1);const b=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t){i.push(e.slice(o,o+t))}return i})(r,o);let v=0;for(const u of b){const i=u.map(async i=>{const o=e.includeBleed?i.bleed:0,n=i.computedWidth+2*o+2*c,r=i.computedHeight+2*o+2*c,l=d(n),p=d(r);let m=0,g=a;for(;m<10;){m+=1,2===m&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const o=await t.toDataURL(Object.assign(Object.assign({},e),{pageId:i.id,pixelRatio:g}));if(o.length>20){return e.onProgress&&e.onProgress(++v/s.length*.9),{url:o,width:l,height:p,widthPx:n,heightPx:r}}g*=.8}});(await Promise.all(i)).forEach(({url:e,width:t,height:i,widthPx:o,heightPx:a})=>{y.addPage([t,i],t>i?"landscape":"portrait");const s=y.getCurrentPageInfo();var r;switch(n){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;case"pc":case"em":r=12;break;case"ex":r=6;break;default:throw"Invalid unit: "+n}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+g)*r,bottomLeftY:d(c+g)*r,topRightX:d(o-c-g)*r,topRightY:d(a-c-g)*r},s.pageContext.bleedBox={bottomLeftX:d(c+g)*r,bottomLeftY:d(c+g)*r,topRightX:d(o-c-g)*r,topRightY:d(a-c-g)*r},p){y.setLineWidth(d(1));const e=p+d(g);y.line(e,0,e,p),y.line(0,e,p,e),y.line(t-e,0,t-e,p),y.line(t,e,t-p,e),y.line(0,i-e,p,i-e),y.line(e,i,e,i-p),y.line(t,i-e,t-p,i-e),y.line(t-e,i,t-e,i-p)}y.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")})}return y},toPDFDataURL:async e=>(await t._toPDF(Object.assign({mimeType:"image/jpeg"},e))).output("datauristring"),async toGIFDataURL(e={}){const i=e.pixelRatio||1,o=await f({width:t.width*i,height:t.height*i}),n=1e3/(e.fps||10),a=t.duration/n;for(let s=0;s<a-1;s++){const e=s*n||1;t.setCurrentTime(e);let a=0,r="";for(const i of t.pages){if(a+=i.duration,i.set({_rendering:a>e}),a>e){r=i.id;break}}const l=await t._toCanvas({pixelRatio:i,pageId:r,_skipTimeout:!0});o.addFrame(l.getContext("2d"),{delay:n,copy:!0})}for(const s of t.pages){s.set({_rendering:!1})}return t.stop(),o.render(),new Promise(e=>{o.on("finished",function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)})})},async saveAsGIF(i={}){var{fileName:o}=i,n=e(i,["fileName"]);const a=await t.toGIFDataURL(n);g(a,o||"polotno.gif")},async toHTML({elementHook:e}={elementHook:void 0}){const i=t.toJSON();return x({json:i,elementHook:e})},async saveAsHTML({fileName:e}={}){const i=await t.toHTML(),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));g(o,e||"polotno.html")},async toSVG({elementHook:e,pageId:i}={elementHook:void 0,pageId:void 0}){var o;const n=t.toJSON();i=i||(null===(o=n.pages[0])||void 0===o?void 0:o.id);const a=n.pages.find(e=>e.id===i);return k({json:Object.assign(Object.assign({},n),{pages:a?[a]:[]}),elementHook:e})},async saveAsSVG({fileName:e,elementHook:i,pageId:o}={}){const n=await t.toSVG({elementHook:i,pageId:o}),a="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(n)));g(a,e||"polotno.svg")},async saveAsPDF(i={}){var{fileName:o}=i,n=e(i,["fileName"]);(await t._toPDF(Object.assign({mimeType:"image/jpeg"},n))).save(o||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise(e=>setTimeout(e,50)),await v()},toJSON:()=>({width:t.width,height:t.height,fonts:a(t.fonts),pages:a(t.pages),audios:a(t.audios),unit:t.unit,dpi:t.dpi,custom:t.custom,schemaVersion:t.schemaVersion}),loadJSON(e,i=!1){var n;const s=JSON.parse(JSON.stringify(e)),r=s.schemaVersion||0;r<1&&b.htmlRenderEnabled&&I({children:s.pages},e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}),r<2&&I({children:s.pages},e=>{e.filters&&Object.keys(e.filters).forEach(t=>{if(["warm","cold","natural"].includes(t)){return}const i=e.filters[t];i&&"number"==typeof i.intensity&&(i.intensity=i.intensity/100)})}),delete s.schemaVersion;const l=t.pages.indexOf(t.activePage);let d=null===(n=s.pages[l]||s.pages[0])||void 0===n?void 0:n.id;s._activePageId=d;const c=Object.assign({},a(t));Object.assign(c,s),c.history=i?t.history.toJSON():{history:[],undoIdx:-1},o(t,c)},clear({keepHistory:e=!1}={}){const i=t.pages.map(e=>e.id);t.deletePages(i),t.custom=null,e||t.history.clear()},addFont(e){t.removeFont(e.fontFamily),t.fonts.push(e),t.loadFont(e.fontFamily)},removeFont(e){t.fonts.filter(t=>t.fontFamily===e).forEach(e=>r(e))},addAudio(e){const i=S.create(Object.assign({id:c(10)},e));t.audios.push(i)},removeAudio(e){const i=t.audios.find(t=>t.id===e);i&&t.audios.remove(i)},async loadFont(e){const i=t.fonts.find(t=>t.fontFamily===e)||y.globalFonts.find(t=>t.fontFamily===e);let o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return i?(i.styles&&(o=i.styles.map(e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"}))),y.injectCustomFont(i)):y.injectGoogleFont(e),Promise.all(o.map(t=>y.loadFont(e,t.fontStyle,t.fontWeight)))},validate:e=>Store.validate(e,[{path:"",type:Store}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))}));export function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return Store.create({_forceShowCredit:t,_key:e})}export default createStore;
|
|
1
|
+
var e=this&&this.__rest||function(e,t){var i={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(i[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++){t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(i[o[n]]=e[o[n]])}}return i};import{types as t,onSnapshot as i,applySnapshot as o,detach as n,getSnapshot as a,cast as s,destroy as r,setLivelinessChecking as l}from"mobx-state-tree";import{UndoManager as d}from"./history.js";import{nanoid as c}from"nanoid";import p from"konva";import{computed as m}from"mobx";import{downloadFile as g}from"../utils/download.js";import{getJsPDF as u}from"../utils/pdf.js";import{createGIF as f}from"../utils/gif-lib.js";import{validateKey as h}from"../utils/validate-key.js";import*as b from"../utils/fonts.js";import{flags as y}from"../utils/flags.js";import{whenLoaded as v}from"../utils/loader.js";import{pxToUnit as w}from"../utils/unit.js";import{deepEqual as E}from"../utils/deep-equal.js";import{waitTillAvailable as P}from"../utils/wait.js";import{jsonToHTML as x}from"../utils/to-html.js";import{jsonToSVG as k}from"../utils/to-svg.js";import{Page as _}from"./page-model.js";import{forEveryChild as I}from"./group-model.js";import{Audio as S}from"./audio-model.js";l("ignore");export const Font=t.model("Font",{fontFamily:t.string,url:t.optional(t.string,""),styles:t.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name}));export const Store=t.model("Store",{role:"",pages:t.array(_),fonts:t.array(Font),audios:t.array(S),width:1080,height:1080,currentTime:0,isPlaying:!1,scale:1,scaleToFit:1,unit:"px",dpi:72,schemaVersion:2,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",previousOpenedSidePanel:"",custom:t.frozen(),selectedElementsIds:t.array(t.string),animatedElementsIds:t.array(t.string),history:t.optional(d,{targetPath:"../pages"}),_elementsPixelRatio:Math.min(2,"undefined"!=typeof window&&window.devicePixelRatio||1),_activePageId:"",_forceShowCredit:!1,_key:"",_validated:!1}).views(e=>{const t=m(()=>{const t={};return I({children:e.pages},e=>(t[e.id]=e,!1)),t},{keepAlive:!0});return{get _idsMap(){return t.get()}}}).views(e=>({get _bleedVisible(){return console.warn("store._bleedVisible is deprecated. Please use store.bleedVisible instead."),e.bleedVisible},get selectedElements(){return e.selectedElementsIds.map(t=>{for(const i of e.pages){for(const e of i.children){if(e.id===t){return e}}}}).filter(e=>!!e)},get children(){return e.pages},get selectedShapes(){const t=[];return I({children:e.selectedElements},e=>{"group"!==e.type&&t.push(e)}),t},get activePage(){return e.pages.slice().find(t=>t.id===e._activePageId)||(e.pages.length?e.pages[0]:null)},get duration(){let t=0;return e.pages.forEach(e=>{t+=e.duration}),t},get _hasCroppedImages(){return e.find(e=>"image"===e.type&&e._cropModeEnabled)},find(t){let i;return I({children:e.pages},e=>{if(!i&&t(e)){return i=e,!0}}),i},getElementById:t=>e._idsMap[t]})).actions(e=>{let t=0,i=null,o=!1;return{afterCreate(){e.history.canUndo},setCurrentTime(t){e.currentTime=t},_togglePlaying(t=!e.isPlaying){e.isPlaying=t},play({animatedElementsIds:n=[],startTime:a=0,currentTime:r=0,endTime:l=e.duration,repeat:d=!1}={}){r&&(console.warn("currentTime property of store.play() is deprecated. Please use startTime instead."),a=r),e.animatedElementsIds=s(n),e.currentTime=a,e.isPlaying=!0,t=Date.now(),i=l,o=d,requestAnimationFrame(e.seek)},checkActivePage(){let t=0;for(const i of e.pages){if(e.currentTime>=i.startTime&&e.currentTime<i.startTime+i.duration){e.selectPage(i.id);break}t+=i.duration}},seek(){if(!e.isPlaying){return}const n=Date.now(),a=n-t;t=n,e.currentTime+=a,e.checkActivePage();const s=i||e.duration;e.isPlaying&&e.currentTime<s?requestAnimationFrame(e.seek):e.isPlaying&&o?(e.currentTime=0,requestAnimationFrame(e.seek)):e.stop()},stop(){e.isPlaying=!1,e.currentTime=0,e.animatedElementsIds=s([]),e.checkActivePage()}}}).actions(t=>({__(){t._validated||(h(t._key,t._forceShowCredit),t._validated=!0)},set(e){Object.assign(t,e)},setUnit({unit:e,dpi:i}){t.unit=e||t.unit,t.dpi=i||t.dpi},setRole(e){t.role=e},addPage(e){const i=_.create(Object.assign({id:c(10)},e));return t.pages.push(i),t._activePageId=i.id,i},selectPage(e){t._activePageId=e},selectElements(e){const i=e.map(e=>t.getElementById(e)).sort((e,t)=>e.page.children.indexOf(e)-e.page.children.indexOf(t)).filter(e=>!!e).map(e=>e.id);t.selectedElementsIds=s(i)},toggleBleed(e){t.bleedVisible=null!=e?e:!t.bleedVisible},toggleRulers(e){t.rulesVisible=null!=e?e:!t.rulesVisible},openSidePanel(e){t.openedSidePanel!==e&&(t.previousOpenedSidePanel=t.openedSidePanel,t.openedSidePanel=e)},setScale(e){t.scale=e},_setScaleToFit(e){t.scaleToFit=e},setElementsPixelRatio(e){t._elementsPixelRatio=e},setSize(e,i,o){t.pages.forEach(t=>{t.setSize({width:e,height:i,useMagic:o,softChange:!0})}),t.width=e,t.height=i},setPageZIndex(e,i){const o=t.pages.find(t=>t.id===e);o&&(n(o),t.pages.remove(o),t.pages.splice(i,0,o))},deletePages(e){const i=t.pages.indexOf(t.activePage);e.forEach(e=>{const i=t.pages.find(t=>t.id===e);r(i)});const o=Math.min(t.pages.length-1,i),n=t.pages[o];n&&(t._activePageId=n.id),t.selectedElementsIds=s(t.selectedElementsIds.filter(e=>t.getElementById(e)))},groupElements(e,i={}){const o=e.map(e=>t.getElementById(e)),a=o[0].page;if(o.forEach(e=>{e&&n(e)}),!o.length){return}const r=Object.assign({id:c(10),children:o,type:"group"},i);return a.children.push(r),t.selectedElementsIds=s([r.id]),a.children.find(e=>e.id===r.id)},ungroupElements(e){const i=e.map(e=>t.getElementById(e)),o=[];i.forEach(e=>{if(e&&"group"===e.type){const t=e.page,i=t.children.indexOf(e);e.children.forEach(e=>{o.push(e.id)}),e.children.forEach(e=>{n(e),t.children.push(e)}),t.children.splice(i,1)}}),t.selectedElementsIds=s(o)},deleteElements(e){const i=[];t.find(t=>(e.includes(t.id)&&i.push(t),!1)),i.forEach(e=>{r(e)}),t.selectedElementsIds=s(t.selectedElementsIds.filter(e=>t.getElementById(e)))},on(e,o){if("change"===e){let e=t.toJSON();return i(t,i=>{const n=t.toJSON();!E(e,n)&&(e=n,o(n))})}},async _toCanvas({pixelRatio:e,ignoreBackground:i,pageId:o,mimeType:n,includeBleed:a,_skipTimeout:s,quickMode:r=!1}={}){var l;const d=e||1;o=o||(null===(l=t.pages[0])||void 0===l?void 0:l.id);const c=t.pages.find(e=>e.id===o);if(!c){throw new Error(`No page for export with id ${o}`)}const m=t._elementsPixelRatio;d>t._elementsPixelRatio&&t.setElementsPixelRatio(d),r?null==c||c.set({_forceMount:!0}):null==c||c.set({_exporting:!0});const g=await P(()=>p.stages.find(e=>e.getAttr("pageId")===o));if(!g){throw null==c||c.set({_forceMount:!1,_exporting:!1}),t.setElementsPixelRatio(m),new Error(`Export is failed. Can not find stage for page ${o}. Looks like <Workspace /> component is not mounted, but it is required in order to process the export.`)}await t.waitLoading({_skipTimeout:s});const u=g.findOne(".page-container");if(!u){throw t.setElementsPixelRatio(m),null==c||c.set({_forceMount:!1,_exporting:!1}),new Error("Export is failed. Canvas was unmounted.")}const f=g.position();g.position({x:0,y:0}),g.find("Transformer").forEach(e=>{e.setAttr("oldVisible",e.visible()),e.visible(!1)}),u.find(".page-background").forEach(e=>e.shadowEnabled(!1)),u.find(".page-background").forEach(e=>e.strokeEnabled(!1)),u.find(".highlighter").forEach(e=>e.visible(!1));const h=u.findOne(".page-background-group"),b=h.clip();h.clip({x:null,y:null,width:null,height:null});const y=u.findOne(".elements-container"),v=y.clip();y.clip({x:null,y:null,width:null,height:null});const w=u.find(e=>!e.visible()&&e.getAttr("editModeEnabled")&&!e.getAttr("hideInExport"));w.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.show()});const E=u.find(e=>e.getAttr("hideInExport"));E.forEach(e=>{e.setAttr("oldVisible",e.visible()),e.hide()}),i&&u.find(".page-background").forEach(e=>e.hide());const x=a?c.bleed:0;let k=x;!t.bleedVisible&&a||(t.bleedVisible||a?t.bleedVisible&&a?k=0:t.bleedVisible&&!a&&(k=-c.bleed):k=0);const _=document.createElement("canvas");_.width=Math.round((c.computedWidth+2*x)*d),_.height=Math.round((c.computedHeight+2*x)*d);const I=_.getContext("2d");"image/jpeg"===n&&(I.fillStyle="white",I.fillRect(0,0,_.width,_.height));const S=u.scale();u.scale({x:1,y:1});const O=u.toCanvas({x:u.x()-k,y:u.y()-k,width:c.computedWidth+2*x,height:c.computedHeight+2*x,pixelRatio:d});return u.scale(S),I.drawImage(O,0,0,_.width,_.height),p.Util.releaseCanvas(O),i&&u.find(".page-background").forEach(e=>e.show()),E.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),w.forEach(e=>{e.visible(e.getAttr("oldVisible"))}),u.find(".page-background").forEach(e=>e.shadowEnabled(!0)),u.find(".page-background").forEach(e=>e.strokeEnabled(!0)),g.find("Transformer").forEach(e=>{e.visible(e.getAttr("oldVisible"))}),u.find(".highlighter").forEach(e=>e.visible(!0)),h.clip(b),y.clip(v),g.position(f),null==c||c.set({_exporting:!1,_forceMount:!1}),await new Promise(e=>setTimeout(e)),t.setElementsPixelRatio(m),_},async toDataURL(i={}){var{mimeType:o,quality:n}=i,a=e(i,["mimeType","quality"]);const s=await t._toCanvas(Object.assign({mimeType:o},a)),r=s.toDataURL(o,n);return p.Util.releaseCanvas(s),r},async toBlob(i={}){var{mimeType:o,quality:n}=i,a=e(i,["mimeType","quality"]);const s=await t._toCanvas(Object.assign({mimeType:o},a)),r=await new Promise(e=>{s.toBlob(e,o,n)});return p.Util.releaseCanvas(s),r},async saveAsImage(i={}){var{fileName:o}=i,n=e(i,["fileName"]);const a=n.mimeType||"image/png",s=a.split("/")[1];g(await t.toDataURL(n),o||"polotno."+s,a)},async _toPDF(e){const i=e.dpi||t.dpi,o=e.parallel||1,n=e.unit||("px"===t.unit?"mm":t.unit),a=e.pixelRatio||1,s=e.pageIds||t.pages.map(e=>e.id),r=t.pages.filter(e=>s.includes(e.id)),l=await u(),d=e=>w({px:e,unit:n,dpi:i}),c=e.cropMarkSize||0,p=d(c),m=r[0]||{},g=e.includeBleed?m.bleed:0,f=d(m.computedWidth+2*g+2*p),h=d(m.computedHeight+2*g+2*p);var b=new l({unit:n,orientation:f>h?"landscape":"portrait",format:[f,h],compress:!0,putOnlyUsedFonts:!0});b.deletePage(1);const y=((e,t)=>{for(var i=[],o=0;o<e.length;o+=t){i.push(e.slice(o,o+t))}return i})(r,o);let v=0;for(const u of y){const i=u.map(async i=>{const o=e.includeBleed?i.bleed:0,n=i.computedWidth+2*o+2*c,r=i.computedHeight+2*o+2*c,l=d(n),p=d(r);let m=0,g=a;for(;m<10;){m+=1,2===m&&console.error("Polotno can not export PDF with current settings. Quality is automatically reduced.");const o=await t.toDataURL(Object.assign(Object.assign({},e),{pageId:i.id,pixelRatio:g}));if(o.length>20){return e.onProgress&&e.onProgress(++v/s.length*.9),{url:o,width:l,height:p,widthPx:n,heightPx:r}}g*=.8}});(await Promise.all(i)).forEach(({url:e,width:t,height:i,widthPx:o,heightPx:a})=>{b.addPage([t,i],t>i?"landscape":"portrait");const s=b.getCurrentPageInfo();var r;switch(n){case"pt":r=1;break;case"mm":r=72/25.4;break;case"cm":r=72/2.54;break;case"in":r=72;break;case"px":r=.75;break;case"pc":case"em":r=12;break;case"ex":r=6;break;default:throw"Invalid unit: "+n}if(s.pageContext.cropBox={bottomLeftX:0,bottomLeftY:0,topRightX:t*r,topRightY:i*r},s.pageContext.artBox={bottomLeftX:d(c+g)*r,bottomLeftY:d(c+g)*r,topRightX:d(o-c-g)*r,topRightY:d(a-c-g)*r},s.pageContext.bleedBox={bottomLeftX:d(c+g)*r,bottomLeftY:d(c+g)*r,topRightX:d(o-c-g)*r,topRightY:d(a-c-g)*r},p){b.setLineWidth(d(1));const e=p+d(g);b.line(e,0,e,p),b.line(0,e,p,e),b.line(t-e,0,t-e,p),b.line(t,e,t-p,e),b.line(0,i-e,p,i-e),b.line(e,i,e,i-p),b.line(t,i-e,t-p,i-e),b.line(t-e,i,t-e,i-p)}b.addImage(e,p,p,t-2*p,i-2*p,void 0,"FAST")})}return b},toPDFDataURL:async e=>(await t._toPDF(Object.assign({mimeType:"image/jpeg"},e))).output("datauristring"),async toGIFDataURL(e={}){const i=e.pixelRatio||1,o=await f({width:t.width*i,height:t.height*i}),n=1e3/(e.fps||10),a=t.duration/n;for(let s=0;s<a-1;s++){const e=s*n||1;t.setCurrentTime(e);let a=0,r="";for(const i of t.pages){if(a+=i.duration,i.set({_rendering:a>e}),a>e){r=i.id;break}}const l=await t._toCanvas({pixelRatio:i,pageId:r,_skipTimeout:!0});o.addFrame(l.getContext("2d"),{delay:n,copy:!0})}for(const s of t.pages){s.set({_rendering:!1})}return t.stop(),o.render(),new Promise(e=>{o.on("finished",function(t){!function(e,t){var i=new FileReader;i.onload=function(e){t(e.target.result)},i.readAsDataURL(e)}(t,e)})})},async saveAsGIF(i={}){var{fileName:o}=i,n=e(i,["fileName"]);const a=await t.toGIFDataURL(n);g(a,o||"polotno.gif")},async toHTML({elementHook:e}={elementHook:void 0}){const i=t.toJSON();return x({json:i,elementHook:e})},async saveAsHTML({fileName:e}={}){const i=await t.toHTML(),o="data:text/html;base64,"+window.btoa(unescape(encodeURIComponent(i)));g(o,e||"polotno.html")},async toSVG({elementHook:e,pageId:i,fontEmbedding:o="inline"}={elementHook:void 0,pageId:void 0,fontEmbedding:"inline"}){var n;const a=t.toJSON();i=i||(null===(n=a.pages[0])||void 0===n?void 0:n.id);const s=a.pages.find(e=>e.id===i);return k({json:Object.assign(Object.assign({},a),{pages:s?[s]:[]}),elementHook:e,fontEmbedding:o})},async saveAsSVG({fileName:e,elementHook:i,pageId:o,fontEmbedding:n="inline"}={}){const a=await t.toSVG({elementHook:i,pageId:o,fontEmbedding:n}),s="data:text/svg;base64,"+window.btoa(unescape(encodeURIComponent(a)));g(s,e||"polotno.svg")},async saveAsPDF(i={}){var{fileName:o}=i,n=e(i,["fileName"]);(await t._toPDF(Object.assign({mimeType:"image/jpeg"},n))).save(o||"polotno.pdf")},async waitLoading({_skipTimeout:e=!1}={}){e||await new Promise(e=>setTimeout(e,50)),await v()},toJSON:()=>({width:t.width,height:t.height,fonts:a(t.fonts),pages:a(t.pages),audios:a(t.audios),unit:t.unit,dpi:t.dpi,custom:t.custom,schemaVersion:t.schemaVersion}),loadJSON(e,i=!1){var n;const s=JSON.parse(JSON.stringify(e)),r=s.schemaVersion||0;r<1&&y.htmlRenderEnabled&&I({children:s.pages},e=>{if("text"===e.type){const t=16,i=e.letterSpacing*t;e.letterSpacing=i/e.fontSize}}),r<2&&I({children:s.pages},e=>{e.filters&&Object.keys(e.filters).forEach(t=>{if(["warm","cold","natural"].includes(t)){return}const i=e.filters[t];i&&"number"==typeof i.intensity&&(i.intensity=i.intensity/100)})}),delete s.schemaVersion;const l=t.pages.indexOf(t.activePage);let d=null===(n=s.pages[l]||s.pages[0])||void 0===n?void 0:n.id;s._activePageId=d;const c=Object.assign({},a(t));Object.assign(c,s),c.history=i?t.history.toJSON():{history:[],undoIdx:-1},o(t,c)},clear({keepHistory:e=!1}={}){const i=t.pages.map(e=>e.id);t.deletePages(i),t.custom=null,e||t.history.clear()},addFont(e){t.removeFont(e.fontFamily),t.fonts.push(e),t.loadFont(e.fontFamily)},removeFont(e){t.fonts.filter(t=>t.fontFamily===e).forEach(e=>r(e))},addAudio(e){const i=S.create(Object.assign({id:c(10)},e));t.audios.push(i)},removeAudio(e){const i=t.audios.find(t=>t.id===e);i&&t.audios.remove(i)},async loadFont(e){const i=t.fonts.find(t=>t.fontFamily===e)||b.globalFonts.find(t=>t.fontFamily===e);let o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return i?(i.styles&&(o=i.styles.map(e=>({fontStyle:e.fontStyle||"normal",fontWeight:e.fontWeight||"normal"}))),b.injectCustomFont(i)):b.injectGoogleFont(e),Promise.all(o.map(t=>b.loadFont(e,t.fontStyle,t.fontWeight)))},validate:e=>Store.validate(e,[{path:"",type:Store}]).map(e=>({path:"store"+e.context.map(e=>e.path).join("."),message:e.message}))}));export function createStore({key:e,showCredit:t}={key:"",showCredit:!1}){return Store.create({_forceShowCredit:t,_key:e})}export default createStore;
|
package/package.json
CHANGED
package/polotno-app.d.ts
CHANGED
|
@@ -1051,14 +1051,16 @@ export declare function createPolotnoApp({ container, key, showCredit, sections
|
|
|
1051
1051
|
saveAsHTML({ fileName }?: {
|
|
1052
1052
|
fileName?: string;
|
|
1053
1053
|
}): Promise<void>;
|
|
1054
|
-
toSVG({ elementHook, pageId }?: {
|
|
1054
|
+
toSVG({ elementHook, pageId, fontEmbedding }?: {
|
|
1055
1055
|
elementHook: any;
|
|
1056
1056
|
pageId: any;
|
|
1057
|
+
fontEmbedding?: string;
|
|
1057
1058
|
}): Promise<string>;
|
|
1058
|
-
saveAsSVG({ fileName, elementHook, pageId, }?: {
|
|
1059
|
+
saveAsSVG({ fileName, elementHook, pageId, fontEmbedding, }?: {
|
|
1059
1060
|
fileName?: string;
|
|
1060
1061
|
elementHook?: Function;
|
|
1061
1062
|
pageId?: string;
|
|
1063
|
+
fontEmbedding?: "none" | "inline";
|
|
1062
1064
|
}): Promise<void>;
|
|
1063
1065
|
saveAsPDF({ fileName, ...exportProps }?: import("./model/store.js").ExportOptions & {
|
|
1064
1066
|
fileName?: string;
|
|
@@ -2140,14 +2142,16 @@ export declare function createPolotnoApp({ container, key, showCredit, sections
|
|
|
2140
2142
|
saveAsHTML({ fileName }?: {
|
|
2141
2143
|
fileName?: string;
|
|
2142
2144
|
}): Promise<void>;
|
|
2143
|
-
toSVG({ elementHook, pageId }?: {
|
|
2145
|
+
toSVG({ elementHook, pageId, fontEmbedding }?: {
|
|
2144
2146
|
elementHook: any;
|
|
2145
2147
|
pageId: any;
|
|
2148
|
+
fontEmbedding?: string;
|
|
2146
2149
|
}): Promise<string>;
|
|
2147
|
-
saveAsSVG({ fileName, elementHook, pageId, }?: {
|
|
2150
|
+
saveAsSVG({ fileName, elementHook, pageId, fontEmbedding, }?: {
|
|
2148
2151
|
fileName?: string;
|
|
2149
2152
|
elementHook?: Function;
|
|
2150
2153
|
pageId?: string;
|
|
2154
|
+
fontEmbedding?: "none" | "inline";
|
|
2151
2155
|
}): Promise<void>;
|
|
2152
2156
|
saveAsPDF({ fileName, ...exportProps }?: import("./model/store.js").ExportOptions & {
|
|
2153
2157
|
fileName?: string;
|