polotno 3.0.0-beta.44 → 3.0.0-beta.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/canvas/page.js CHANGED
@@ -1 +1 @@
1
- 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{jsx as t,jsxs as n,Fragment as i}from"react/jsx-runtime";import o from"react";import{observer as r,useLocalObservable as l}from"mobx-react-lite";import{action as s,runInAction as a}from"mobx";import{Group as d,Image as c,Label as m,Layer as u,Line as h,Rect as g,Stage as x,Tag as p,Text as f,Transformer as b,KonvaRenderer as v}from"react-konva";import y from"use-image";import{useWorkspaceStyle as E}from"./workspace-style.js";import{ROLES as w}from"../model/store.js";import X from"konva";import Y from"./element.js";import{DrawingLayer as S}from"./drawing-layer.js";import{ensureDragOrder as k,useSnap as A}from"./use-transformer-snap.js";import{useImageLoader as I}from"./image-element.js";import{getCrop as M}from"../utils/crop.js";import{___ as O,____ as P,isCreditVisible as R}from"../utils/validate-key.js";import{getClientRect as j,getTotalClientRect as D}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as B}from"../utils/unit.js";import{flags as T}from"../utils/flags.js";import{useColor as W}from"./use-color.js";import{isGradient as G}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";import{observerBatching as V}from"mobx-react-lite";const F=e=>v.batchedUpdates(e,null);V(e=>{v.isAlreadyRendering()?queueMicrotask(()=>F(e)):F(e)});const U=X.DD._drag;window.removeEventListener("mousemove",U),X.DD._drag=function(e){a(()=>{U.call(this,e)})},window.addEventListener("mousemove",X.DD._drag);const z={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},Z={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"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-center","top-right","middle-left","middle-right","bottom-left","bottom-center","bottom-right"]}};export function registerTransformerAttrs(e,t){Z[e]=Z[e]||t,Object.assign(Z[e],t)}const _=e=>t(g,Object.assign({},e,{preventDefault:!1})),H=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=y(i,"anonymous"),s=r?M(r,{width:o.width,height:o.height},"center-middle"):{};return I(l,i,"page background"),t(c,Object.assign({image:r},o,s))},J=e=>{const n=W({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t(g,Object.assign({},e,n))},N=i=>{const{background:r,scale:l,borderColor:s,transparencyBackgroundColor:a}=i,d=e(i,["background","scale","borderColor","transparencyBackgroundColor"]),c=o.useMemo(()=>!!X.Util.colorToRGBA(r)||G(r),[r]),m=o.useMemo(()=>{if(G(r)){return!0}const e=X.Util.colorToRGBA(r);return!e||e.a<1},[r]),u=o.useMemo(()=>{if(!m||a){return null}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},[m,a]);return n(o.Fragment,{children:[m&&t(g,a?Object.assign({fill:a},d,{hideInExport:!0}):Object.assign({fillPatternImage:u},d,{opacity:.1,hideInExport:!0})),c?t(J,Object.assign({fill:r},d)):t(H,Object.assign({url:r},d))]})},K=r(({selection:e})=>{const{selectionRectStyle:n}=E();return e.visible?t(g,{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.fill,stroke:n.stroke,strokeWidth:n.strokeWidth}):null});function $(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const Q=r(({x:e,y:o,width:r,height:l,rotation:s,anchor:a,store:d})=>{const{transformLabelStyle:c}=E();if(void 0===e||void 0===o||void 0===r||void 0===l||void 0===s||void 0===a){return null}const u=j({x:e,y:o,width:r,height:l,rotation:X.Util.radToDeg(s)}),h=(l/2+70)*Math.cos(s-Math.PI/2),g=(l/2+70)*Math.sin(s-Math.PI/2),x=C({unit:d.unit,dpi:d.dpi,px:r/d.scale,precious:"px"===d.unit?0:1})+" x "+C({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n(i,{children:[n(m,{x:(u.minX+u.maxX)/2+h,y:(u.minY+u.maxY)/2+g,offsetX:14,offsetY:14,visible:"rotater"===a,children:[t(p,{cornerRadius:5,fill:c.fill}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:$(s).toString()+"°"})]}),n(m,{x:(u.minX+u.maxX)/2,y:u.maxY+20,visible:"rotater"!==a,children:[t(p,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:x})]})]})}),q=r(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(i);return t(o.Fragment,{children:r.map(e=>t(Y,{store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})});export const useContextMenu=({store:e})=>{const[t,n]=o.useState(!1),[i,r]=o.useState({x:0,y:0}),l=o.useCallback(e=>{n(!0),r(e)},[]);return{open:l,close:o.useCallback(()=>{n(!1)},[]),props:{isOpen:t,offset:i,setIsOpen:n}}};let ee=null;export const registerNextDomDrop=e=>{ee=e};const te=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),ne=atob("I2MwMzkyYg=="),ie=atob("djAuOS4y"),oe=e=>t(i,{children:n(m,{fill:ne,height:200,children:[t(p,{fill:ne}),t(f,Object.assign({},e,{fill:"white",text:te,height:void 0,padding:10,fontSize:20}))]})}),re=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),le=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),se=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),ae=e=>{const i=1===P(),o=i?le:re,r=i?230:195;return n(d,Object.assign({},e,{listening:!1,children:[t(g,{fill:ne,width:r,height:24,cornerRadius:2}),t(f,{text:o,fill:"white",fontSize:13,fontFamily:"monospace",width:r,align:"center",y:5,listening:!1}),i&&t(f,{text:se,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1})]}))};export default r(({store:e,page:i,width:r,height:a,pageControlsEnabled:c,components:v,altCloneEnabled:y,groupSelectionMode:Y="drill",viewportSize:I,layout:M="vertical",tooltipSafeArea:C,transformerSafeArea:W})=>{const G=E(),V=G.transformerStyle,F=z,U=e.bleedVisible?i.bleed:0,H=i.computedWidth+2*U,J=i.computedHeight+2*U,$=(r-H*e.scale)/2,te=(a-J*e.scale)/2,ne=o.useRef(null),re=o.useRef(null),le=o.useRef(null),se=null==c||c,de=o.useRef(!1),[ce,me]=o.useState(null),[ue,he]=o.useState({}),[ge,xe]=o.useState(0),pe=useContextMenu({store:e}),fe=e.selectedElements.find(e=>e._cropModeEnabled),be=e.selectedElements.find(e=>e.curveEnabled),ve=e.selectedShapes.filter(e=>!e.resizable).length>0,ye=e.selectedShapes.filter(e=>!e.draggable).length>0,Ee=e.selectedElements.filter(e=>!e.visible).length>0,we=()=>{var t,n,i;const o=ne.current;if(!o){return[]}const r=o.getStage(),l=e.selectedShapes.map(e=>e._cropModeEnabled?null:r.findOne("#"+e.id)).filter(e=>!!e),s=1===e.selectedElements.length,a=s&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many",d=Z[a],c=Object.assign(Object.assign({},F),d||{});return d&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=F.enabledAnchors),"text"===a&&T.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=Z.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center","top-center"])),"text"===a&&s&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=Z.many.enabledAnchors)),o.setAttrs(Object.assign(Object.assign({},c),V)),ve&&o.enabledAnchors([]),ye&&o.rotateEnabled(!1),o.nodes(l),null===(i=o.getLayer())||void 0===i||i.batchDraw(),l};o.useLayoutEffect(()=>{const e=we();e.find(e=>null==e?void 0:e.isDragging())&&(e.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),k())},[e.selectedShapes,fe,ve,Ee,ye,be,V]);const Xe=()=>{var e,t;const n=ne.current;if(!n){return}if(!n.isTransforming()){return void he({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();he({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},Ye=o.useCallback(()=>{var e;if(null===(e=ne.current)||void 0===e?void 0:e.isTransforming()){return}const t=ne.current;if(!t||!t.nodes().length){return void xe(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,s=e.height/2,a=i*Math.PI/180,d=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let d;d=0===i||180===i?s:l;const c=Math.sin(t)*(d+n),m=-Math.cos(t)*(d+n),u=c*Math.cos(a)-m*Math.sin(a),h=c*Math.sin(a)+m*Math.cos(a);return{x:o+u,y:r+h}},c=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(c(d(0))){return 0}for(const m of[180,270,90]){if(c(d(m))){return m}}return 0}(n,{top:(null==W?void 0:W.top)||0,bottom:a-((null==W?void 0:W.bottom)||0),left:(null==W?void 0:W.left)||0,right:r-((null==W?void 0:W.right)||0)},V.rotateAnchorOffset,t.rotation());xe(i)},[W,r,a]);o.useEffect(()=>{var e;null===(e=ne.current)||void 0===e||e.update(),Xe(),Ye()},[e.scale,Ye]),o.useEffect(()=>{Ye()},[e.selectedShapes,Ye]);const Se=l(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),ke=o.useRef(!1),Ae=s(t=>{var n,i,o,r,l,s,a;if(e.role===w.VIEWER){return}ke.current=!1;const d=t.target.findAncestor(".elements-container"),c=t.target.findAncestor("Transformer"),m=t.target.findAncestor(".page-abs-container");if(d||c||m){return}const u=null===(n=t.target.getStage())||void 0===n?void 0:n.getPointerPosition();u&&(u.x-=null!==(o=null===(i=t.target.getStage())||void 0===i?void 0:i.x())&&void 0!==o?o:0,u.y-=null!==(l=null===(r=t.target.getStage())||void 0===r?void 0:r.y())&&void 0!==l?l:0,Se.visible=!0,Se.x1=u.x,Se.y1=u.y,Se.x2=u.x,Se.y2=u.y,(null!==(a=null===(s=t.target.getStage())||void 0===s?void 0:s.getPointersPositions().length)&&void 0!==a?a:0)>=2&&(Se.visible=!1))});(({stageRef:e,containerRef:t,viewportSize:n})=>{o.useEffect(()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function o(){var n;if(!e.current){return}const o=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect();if(!o||!r){return}const l=Math.max(0,r.left-o.left-100),s=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-s}),e.current.container().style.transform=`translate(${l}px, ${s}px)`}return o(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[n.width,n.height])})({stageRef:re,containerRef:le,viewportSize:I}),o.useEffect(()=>{const t=s(e=>{var t,n,i,o,r,l;if(!Se.visible){return}null===(t=re.current)||void 0===t||t.setPointersPositions(e);let s=null===(n=re.current)||void 0===n?void 0:n.getPointerPosition();s?(s.x-=null!==(o=null===(i=re.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,s.y-=null!==(l=null===(r=re.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):s={x:Se.x2,y:Se.y2},Se.x2=s.x,Se.y2=s.y}),n=s(()=>{if(!Se.visible){return}if(!re.current){return}const t=re.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];re.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;X.Util.haveIntersection(n,o)&&l&&s&&t.push(r.top.id)});const i=[...new Set(t)];ke.current=!0,e.selectElements(i)}Se.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Ie=o.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const n=D(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:i.computedWidth,height:i.computedHeight,rotation:0},r=j(o),l=[];n.minX>r.maxX&&l.push({distance:n.minX-r.maxX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),n.maxX<r.minX&&l.push({distance:r.minX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),n.minY>r.maxY&&l.push({box1:n,box2:r,distance:n.minY-r.maxY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]}),n.maxY<r.minY&&l.push({box1:n,box2:r,distance:r.minY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]});const s=n.minX>=r.minX&&n.maxX<=r.maxX&&n.minY>=r.minY&&n.maxY<=r.maxY;if(s&&(l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]}),l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]})),0===l.length&&!s){const e=n.minX<r.maxX&&n.maxX>r.minX,t=n.minY<r.maxY&&n.maxY>r.minY;if(e&&t){const e=(Math.max(n.minY,r.minY)+Math.min(n.maxY,r.maxY))/2,t=(Math.max(n.minX,r.minX)+Math.min(n.maxX,r.maxX))/2;n.minX<r.minX?l.push({distance:r.minX-n.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}):l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}),n.maxX>r.maxX?l.push({distance:n.maxX-r.maxX,box1:n,box2:r,points:[{x:r.maxX,y:e},{x:n.maxX,y:e},{x:r.maxX,y:e}]}):l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:e},{x:r.maxX,y:e},{x:r.maxX,y:e}]}),n.minY<r.minY?l.push({box1:n,box2:r,distance:r.minY-n.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}):l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}),n.maxY>r.maxY?l.push({box1:n,box2:r,distance:n.maxY-r.maxY,points:[{x:t,y:r.maxY},{x:t,y:n.maxY},{x:t,y:r.maxY}]}):l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:t,y:n.maxY},{x:t,y:r.maxY},{x:t,y:r.maxY}]})}}JSON.stringify(ce)!==JSON.stringify(l)&&me(l)},[e,i]);o.useEffect(()=>{e.selectedElements[0]&&e.distanceGuidesVisible?Ie():ce&&me(null)},[e.distanceGuidesVisible,Ie,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Me=o.useRef(!1);o.useEffect(()=>{var e;let t;const n=null===(e=le.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Me.current=!0,clearTimeout(t),t=setTimeout(()=>{Me.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),o.useEffect(()=>{const e=re.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=ne.current)||void 0===t?void 0:t.isDragging())&&ne.current.stopDrag(),null===(n=ne.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Oe=t=>{if(e.role===w.VIEWER){return}if(e.activePage!==i&&i.select(),Me.current){return}if(ke.current){return}const n=t.evt.shiftKey,o=t.evt.ctrlKey||t.evt.metaKey,r=n||o,l=t.target.findAncestor(".elements-container"),s=t.target.findAncestor(".page-abs-container"),a=t.target.findAncestor("Transformer"),d=t.target.findAncestor(".page-container",!0);if(!(r||l||a||s||d||Se.visible)){return e.selectElements([]),void e.selectPages([])}if(o&&!n){const t=re.current,n=null==t?void 0:t.getPointerPosition();if(!t||!n){return}const i=t.getAllIntersections(n),o=new Set,r=[];for(const s of[...i].reverse()){const t=s.findAncestor(".element",!0);if(!t){continue}const n=e.getElementById(t.id()),i=null==n?void 0:n.top;i&&(o.has(i.id)||(o.add(i.id),r.push(i.id)))}if(0===r.length){return}let l;if(1===e.selectedElementsIds.length){const t=e.selectedElementsIds[0],n=r.indexOf(t);l=-1===n?r[0]:r[(n+1)%r.length]}else{l=r[0]}return e.selectElements([l]),void e.selectPages([])}const c=t.target.findAncestor(".element-container",!0),m=(null==c?void 0:c.findOne(".element"))||t.target.findAncestor(".element",!0),u=e.getElementById(null==m?void 0:m.id()),h=null==u?void 0:u.top;let g;if("group"===Y){g=null==h?void 0:h.id}else if(h){const t=e.selectedElements.some(e=>{var t;return(null===(t=e.top)||void 0===t?void 0:t.id)===h.id});g=t?null==u?void 0:u.id:null==h?void 0:h.id}else{g=void 0}const x=null==u?void 0:u.id;if(x&&e.selectedElementsIds.indexOf(x)>=0&&!n){return}const p=!!g&&e.selectedElementsIds.indexOf(g)>=0,f=t.target.findAncestor(".page-container",!0);if(g&&n&&!p){const t=e.selectedElementsIds.concat([g]),n=new Set(t),i=t.filter(t=>{const i=e.getElementById(t);if(!i){return!1}for(let e=i.parent;e;e=null==e?void 0:e.parent){if(n.has(e.id)){return!1}}return!0});e.selectElements(i),e.selectPages([])}else{g&&n&&p?e.selectElements(e.selectedElementsIds.filter(e=>e!==g)):!g||n||p?g&&!n&&p||(f?(n||e.selectElements([]),e.selectPages([i.id])):e.selectPages([])):(e.selectElements([g]),e.selectPages([]))}};A(ne,e);const Pe=e.activePage===i,Re=e._selectedPagesIds.includes(i.id),je=null==v?void 0:v.PageControls,De=null==v?void 0:v.Tooltip,Ce=null==v?void 0:v.ContextMenu,Be=1/e.scale,Te=0/e.scale;return n("div",{ref:le,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),e.role===w.VIEWER){return}if(!re.current){return}re.current.setPointersPositions(t);const n=re.current.findOne(".elements-container"),o=null==n?void 0:n.getRelativePointerPosition(),r=re.current.getPointerPosition(),l=re.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),s=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),a=s[0];ee&&o&&(ee(o,a,{elements:s,page:i}),ee=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Pe?" active-page":""),children:[t(x,{ref:re,width:Math.min(r,I.width+200),height:Math.min(I.height+200,a),onClick:Oe,onTap:Oe,onContextMenu:t=>{if(t.evt.preventDefault(),e.role===w.VIEWER){return}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([]),pe.open({x:t.evt.clientX,y:t.evt.clientY})},onMouseDown:Ae,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ce&&me(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();Ie(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;if(!(i&&e.selectedElementsIds.indexOf(i.id)>=0||l&&e.selectedElementsIds.indexOf(l)>=0)&&l){e.selectElements([l]);const i=we();t.target.stopDrag(),i.forEach(e=>{e.isDragging()||e.startDrag(t)}),null===(n=ne.current)||void 0===n||n.startDrag(t),k()}}ce&&me(null)},pageId:i.id,style:{position:"absolute",overflow:"hidden",top:0,left:0},children:n(u,{children:[t(_,{width:r,height:a,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:n(d,{name:"page-container-2",children:[t(d,{name:"page-background-group",x:U,y:U,children:t(N,{x:-i.bleed,y:-i.bleed,width:i.computedWidth+2*i.bleed,height:i.computedHeight+2*i.bleed,background:i.background,transparencyBackgroundColor:G.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})}),n(d,{x:U,y:U,name:"elements-container",listening:!e.isPlaying&&e.role!==w.VIEWER,children:[t(g,{name:"elements-area",width:i.computedWidth,height:i.computedHeight,listening:!1}),t(q,{elements:i.children,store:e})]}),t(g,{stroke:G.bleedColor,name:"bleed",strokeWidth:i.bleed,x:i.bleed/2,y:i.bleed/2,width:i.computedWidth+i.bleed,height:i.computedHeight+i.bleed,listening:!1,visible:i.bleed>0&&e.bleedVisible,hideInExport:!0}),O()===ie&&t(oe,{name:"hit-detection",x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te})]})}),t(h,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,$,te,$,a-te,r-$,a-te,r-$,te,$,te],listening:!1,closed:!0,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,children:t(g,{name:"page-highlight",hideInExport:!0,x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te,stroke:Re?G.activePageBorderColor:G.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),n(d,{x:$+U*e.scale,y:te+U*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[t(b,{ref:ne,rotateAnchorAngle:ge,onDragStart:t=>{var n;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(n=t.evt)||void 0===n?void 0:n.altKey)&&y&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),n=i.children.indexOf(e);i.setElementZIndex(t.id,n)}),de.current=!0,e.history.startTransaction())},onDragEnd:()=>{de.current&&(e.history.endTransaction(),de.current=!1),Ye()},onTransformStart:()=>{e.history.startTransaction(),me(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,s=e.width*r,a=e.height*l,d=Object.assign({},n);return s<e.minWidth&&(d.width=t.width,d.x=t.x),a<e.minHeight&&(d.height=t.height,d.y=t.y),d}}return n},onTransform:e=>{const t=ne.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{Xe()},0)},onTransformEnd:t=>{he({}),e.history.endTransaction(),Ye()},visible:!e.isPlaying}),ce&&ce.map(({points:i,distance:o,box1:r,box2:l},s)=>n(d,{name:"distances-container",hideInExport:!0,listening:!1,children:[t(g,Object.assign({},r,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(g,Object.assign({},l,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(h,{points:[i[0].x,i[0].y,i[1].x,i[1].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t(h,{points:[i[1].x,i[1].y,i[2].x,i[2].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),n(m,{x:(i[0].x+i[1].x)/2,y:(i[0].y+i[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale,children:[t(p,{cornerRadius:5,fill:G.distanceGuideStyle.labelFill,pointerDirection:"down"}),t(f,{align:"center",verticalAlign:"middle",fill:G.distanceGuideStyle.labelTextFill,padding:5,text:B({unit:e.unit,dpi:e.dpi,px:o})})]})]},s)),i._rendering&&n(d,{children:[t(g,{width:H,height:J,fill:"rgba(255,255,255,0.9)"}),t(f,{text:"Rendering...",fontSize:60,width:H,height:J,align:"center",verticalAlign:"middle"})]}),De&&t(De,{components:v,store:e,page:i,stageRef:re,tooltipSafeArea:C}),Ce&&t(L,{children:t(Ce,Object.assign({components:v,store:e},pe.props))})]}),t(S,{store:e,page:i,width:r,height:a,scale:e.scale,xPadding:$,yPadding:te,bleed:U}),t(Q,Object.assign({},ue,{store:e})),t(K,{selection:Se}),P()>0&&n(d,{hideInExport:!0,children:[t(ae,{name:"cache-bounds",x:r-(1===P()?250:210),y:a-(1===P()?95:45)}),t(ae,{name:"cache-bounds-t",x:10,y:10})]}),R()&&t(f,{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","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t(d,{name:"line-guides"})]})}),se&&je&&t(je,{store:e,page:i,xPadding:$,yPadding:te,layout:M})]})});
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{jsx as t,jsxs as n,Fragment as i}from"react/jsx-runtime";import o from"react";import{observer as r,useLocalObservable as l}from"mobx-react-lite";import{action as s,runInAction as a}from"mobx";import{Group as d,Image as c,Label as m,Layer as u,Line as h,Rect as g,Stage as x,Tag as p,Text as f,Transformer as b,KonvaRenderer as v}from"react-konva";import y from"use-image";import{useWorkspaceStyle as E}from"./workspace-style.js";import{ROLES as w}from"../model/store.js";import X from"konva";import Y from"./element.js";import{DrawingLayer as S}from"./drawing-layer.js";import{ensureDragOrder as k,useSnap as A}from"./use-transformer-snap.js";import{useImageLoader as I}from"./image-element.js";import{getCrop as M}from"../utils/crop.js";import{___ as O,____ as P,isCreditVisible as R}from"../utils/validate-key.js";import{getClientRect as j,getTotalClientRect as D}from"../utils/math.js";import{pxToUnitRounded as C,pxToUnitString as B}from"../utils/unit.js";import{flags as T}from"../utils/flags.js";import{useColor as W}from"./use-color.js";import{isGradient as G}from"../utils/gradient.js";import{Html as L}from"react-konva-utils";import{observerBatching as V}from"mobx-react-lite";const F=e=>v.batchedUpdates(e,null);V(e=>{v.isAlreadyRendering()?queueMicrotask(()=>F(e)):F(e)});const U=X.DD._drag;window.removeEventListener("mousemove",U),X.DD._drag=function(e){a(()=>{U.call(this,e)})},window.addEventListener("mousemove",X.DD._drag);const z={enabledAnchors:["top-left","top-center","top-right","middle-left","bottom-left","bottom-right","bottom-center","middle-right"],rotateEnabled:!0,rotationSnaps:[0,45,90,135,180,225,270,315],ignoreStroke:!0,flipEnabled:!1,keepRatio:!0},Z={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"]},table:{keepRatio:!1,enabledAnchors:["top-left","top-center","top-right","middle-left","middle-right","bottom-left","bottom-center","bottom-right"]}};export function registerTransformerAttrs(e,t){Z[e]=Z[e]||t,Object.assign(Z[e],t)}const _=e=>t(g,Object.assign({},e,{preventDefault:!1})),H=n=>{var{url:i}=n,o=e(n,["url"]);const[r,l]=y(i,"anonymous"),s=r?M(r,{width:o.width,height:o.height},"center-middle"):{};return I(l,i,"page background"),t(c,Object.assign({image:r},o,s))},J=e=>{const n=W({a:{width:e.width,height:e.height},width:e.width,height:e.height},e.fill);return t(g,Object.assign({},e,n))},N=i=>{const{background:r,scale:l,borderColor:s,transparencyBackgroundColor:a}=i,d=e(i,["background","scale","borderColor","transparencyBackgroundColor"]),c=o.useMemo(()=>!!X.Util.colorToRGBA(r)||G(r),[r]),m=o.useMemo(()=>{if(G(r)){return!0}const e=X.Util.colorToRGBA(r);return!e||e.a<1},[r]),u=o.useMemo(()=>{if(!m||a){return null}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},[m,a]);return n(o.Fragment,{children:[m&&t(g,a?Object.assign({fill:a},d,{hideInExport:!0}):Object.assign({fillPatternImage:u},d,{opacity:.1,hideInExport:!0})),c?t(J,Object.assign({fill:r},d)):t(H,Object.assign({url:r},d))]})},K=r(({selection:e})=>{const{selectionRectStyle:n}=E();return e.visible?t(g,{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.fill,stroke:n.stroke,strokeWidth:n.strokeWidth}):null});function $(e){let t=180*e/Math.PI;return t%=360,t>180?t-=360:t<-180&&(t+=360),Math.round(t)}const Q=r(({x:e,y:o,width:r,height:l,rotation:s,anchor:a,store:d})=>{const{transformLabelStyle:c}=E();if(void 0===e||void 0===o||void 0===r||void 0===l||void 0===s||void 0===a){return null}const u=j({x:e,y:o,width:r,height:l,rotation:X.Util.radToDeg(s)}),h=(l/2+70)*Math.cos(s-Math.PI/2),g=(l/2+70)*Math.sin(s-Math.PI/2),x=C({unit:d.unit,dpi:d.dpi,px:r/d.scale,precious:"px"===d.unit?0:1})+" x "+C({unit:d.unit,dpi:d.dpi,px:l/d.scale,precious:"px"===d.unit?0:1})+("px"===d.unit?"":" "+d.unit);return n(i,{children:[n(m,{x:(u.minX+u.maxX)/2+h,y:(u.minY+u.maxY)/2+g,offsetX:14,offsetY:14,visible:"rotater"===a,children:[t(p,{cornerRadius:5,fill:c.fill}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:$(s).toString()+"°"})]}),n(m,{x:(u.minX+u.maxX)/2,y:u.maxY+20,visible:"rotater"!==a,children:[t(p,{cornerRadius:5,fill:c.fill,pointerDirection:"up",pointerHeight:0,pointerWidth:0}),t(f,{align:"center",verticalAlign:"middle",fill:c.textFill,padding:8,text:x})]})]})}),q=r(({elements:e,store:n})=>{const i=e.filter(e=>e.alwaysOnTop),r=e.filter(e=>!e.alwaysOnTop).concat(i);return t(o.Fragment,{children:r.map(e=>t(Y,{store:n,element:e,onClick:()=>{console.warn("Polotno warning: onClick callback is deprecated. Just stop using it. Polotno will do selection automatically.")}},e.id))})});export const useContextMenu=({store:e})=>{const[t,n]=o.useState(!1),[i,r]=o.useState({x:0,y:0}),l=o.useCallback(e=>{n(!0),r(e)},[]);return{open:l,close:o.useCallback(()=>{n(!1)},[]),props:{isOpen:t,offset:i,setIsOpen:n}}};let ee=null;export const registerNextDomDrop=e=>{ee=e};const te=atob("UG9sb3RubyBmcmVlIGxpY2Vuc2UgbGltaXRhdGlvbiBleGNlZWRlZCAtIFBsZWFzZSB1cGdyYWRlIHlvdXIgYWNjb3VudC4="),ne=atob("I2MwMzkyYg=="),ie=atob("djAuOS4y"),oe=e=>t(i,{children:n(m,{fill:ne,height:200,children:[t(p,{fill:ne}),t(f,Object.assign({},e,{fill:"white",text:te,height:void 0,padding:10,fontSize:20}))]})}),re=atob("RlJFRSAgVFJJQUwgIExJQ0VOU0U="),le=(atob("UG93ZXJlZCBieSBQb2xvdG5v"),atob("TElDRU5TRSAgS0VZICBJUyAgTUlTU0lORw==")),se=atob("UGxlYXNlIGFjdGl2YXRlIHlvdXIgbGljZW5zZS4KTGljZW5zZSByZWxhdGVkIHF1ZXN0aW9uczoKcG9sb3Ruby5jb20vY29udGFjdA=="),ae=e=>{const i=1===P(),o=i?le:re,r=i?230:195;return n(d,Object.assign({},e,{listening:!1,children:[t(g,{fill:ne,width:r,height:24,cornerRadius:2}),t(f,{text:o,fill:"white",fontSize:13,fontFamily:"monospace",width:r,align:"center",y:5,listening:!1}),i&&t(f,{text:se,fill:"rgba(0,0,0,0.6)",fontSize:14,y:30,listening:!1})]}))};export default r(({store:e,page:i,width:r,height:a,pageControlsEnabled:c,components:v,altCloneEnabled:y,groupSelectionMode:Y="drill",viewportSize:I,layout:M="vertical",tooltipSafeArea:C,transformerSafeArea:W})=>{const G=E(),V=G.transformerStyle,F=z,U=e.bleedVisible?i.bleed:0,H=i.computedWidth+2*U,J=i.computedHeight+2*U,$=(r-H*e.scale)/2,te=(a-J*e.scale)/2,ne=o.useRef(null),re=o.useRef(null),le=o.useRef(null),se=null==c||c,de=o.useRef(!1),[ce,me]=o.useState(null),[ue,he]=o.useState({}),[ge,xe]=o.useState(0),pe=useContextMenu({store:e}),fe=e.selectedElements.find(e=>e._cropModeEnabled),be=e.selectedElements.find(e=>e.curveEnabled),ve=e.selectedShapes.filter(e=>!e.resizable).length>0,ye=e.selectedShapes.filter(e=>!e.draggable).length>0,Ee=e.selectedElements.filter(e=>!e.visible).length>0,we=()=>{var t,n,i;const o=ne.current;if(!o){return[]}const r=o.getStage(),l=e.selectedShapes.map(e=>e._cropModeEnabled?null:r.findOne("#"+e.id)).filter(e=>!!e),s=1===e.selectedElements.length,a=s&&(null===(t=e.selectedElements[0])||void 0===t?void 0:t.type)||"many",d=Z[a],c=Object.assign(Object.assign({},F),d||{});return d&&("svg"!==a&&"image"!==a&&"gif"!==a||e.selectedElements[0].keepRatio||(c.enabledAnchors=F.enabledAnchors),"text"===a&&T.textVerticalResizeEnabled&&(c.enabledAnchors=null===(n=Z.text.enabledAnchors)||void 0===n?void 0:n.concat(["bottom-center","top-center"])),"text"===a&&s&&e.selectedElements[0].curveEnabled&&(c.enabledAnchors=Z.many.enabledAnchors)),o.setAttrs(Object.assign(Object.assign({},c),V)),ve&&o.enabledAnchors([]),ye&&o.rotateEnabled(!1),o.nodes(l),null===(i=o.getLayer())||void 0===i||i.batchDraw(),l};o.useLayoutEffect(()=>{const e=we();e.find(e=>null==e?void 0:e.isDragging())&&(e.forEach(e=>{e.isDragging()||null==e||e.startDrag()}),k())},[e.selectedShapes,fe,ve,Ee,ye,be,V]);const Xe=()=>{var e,t;const n=ne.current;if(!n){return}if(!n.isTransforming()){return void he({})}if(!n.nodes().length||!n.isTransforming()){return}const i=n.__getNodeRect(),o=null==n?void 0:n.getActiveAnchor(),r=n.getStage();he({anchor:o,x:i.x-(null!==(e=null==r?void 0:r.x())&&void 0!==e?e:0),y:i.y-(null!==(t=null==r?void 0:r.y())&&void 0!==t?t:0),rotation:i.rotation,width:i.width,height:i.height})},Ye=o.useCallback(()=>{var e;if(null===(e=ne.current)||void 0===e?void 0:e.isTransforming()){return}const t=ne.current;if(!t||!t.nodes().length){return void xe(0)}const n=t.getClientRect();if(!t.getStage()){return}const i=function(e,t,n,i=0){const o=e.x+e.width/2,r=e.y+e.height/2,l=e.width/2,s=e.height/2,a=i*Math.PI/180,d=e=>{const t=e*Math.PI/180,i=(e%360+360)%360;let d;d=0===i||180===i?s:l;const c=Math.sin(t)*(d+n),m=-Math.cos(t)*(d+n),u=c*Math.cos(a)-m*Math.sin(a),h=c*Math.sin(a)+m*Math.cos(a);return{x:o+u,y:r+h}},c=e=>e.x>=t.left&&e.x<=t.right&&e.y>=t.top&&e.y<=t.bottom;if(c(d(0))){return 0}for(const m of[180,270,90]){if(c(d(m))){return m}}return 0}(n,{top:(null==W?void 0:W.top)||0,bottom:a-((null==W?void 0:W.bottom)||0),left:(null==W?void 0:W.left)||0,right:r-((null==W?void 0:W.right)||0)},V.rotateAnchorOffset,t.rotation());xe(i)},[W,r,a]);o.useEffect(()=>{var e;null===(e=ne.current)||void 0===e||e.update(),Xe(),Ye()},[e.scale,Ye]),o.useEffect(()=>{Ye()},[e.selectedShapes,Ye]);const Se=l(()=>({visible:!1,x1:0,y1:0,x2:0,y2:0})),ke=o.useRef(!1),Ae=s(t=>{var n,i,o,r,l,s,a;if(e.role===w.VIEWER){return}ke.current=!1;const d=t.target.findAncestor(".elements-container"),c=t.target.findAncestor("Transformer"),m=t.target.findAncestor(".page-abs-container");if(d||c||m){return}const u=null===(n=t.target.getStage())||void 0===n?void 0:n.getPointerPosition();u&&(u.x-=null!==(o=null===(i=t.target.getStage())||void 0===i?void 0:i.x())&&void 0!==o?o:0,u.y-=null!==(l=null===(r=t.target.getStage())||void 0===r?void 0:r.y())&&void 0!==l?l:0,Se.visible=!0,Se.x1=u.x,Se.y1=u.y,Se.x2=u.x,Se.y2=u.y,(null!==(a=null===(s=t.target.getStage())||void 0===s?void 0:s.getPointersPositions().length)&&void 0!==a?a:0)>=2&&(Se.visible=!1))});(({stageRef:e,containerRef:t,viewportSize:n})=>{o.useEffect(()=>{var n;const i=null===(n=t.current)||void 0===n?void 0:n.closest(".polotno-workspace-inner");function o(){var n;if(!e.current){return}const o=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),r=null==i?void 0:i.getBoundingClientRect();if(!o||!r){return}const l=Math.max(0,r.left-o.left-100),s=Math.max(0,r.top-o.top-100);e.current.position({x:-l,y:-s}),e.current.container().style.transform=`translate(${l}px, ${s}px)`}return o(),null==i||i.addEventListener("scroll",o),()=>{null==i||i.removeEventListener("scroll",o)}},[n.width,n.height])})({stageRef:re,containerRef:le,viewportSize:I}),o.useEffect(()=>{const t=s(e=>{var t,n,i,o,r,l;if(!Se.visible){return}null===(t=re.current)||void 0===t||t.setPointersPositions(e);let s=null===(n=re.current)||void 0===n?void 0:n.getPointerPosition();s?(s.x-=null!==(o=null===(i=re.current)||void 0===i?void 0:i.x())&&void 0!==o?o:0,s.y-=null!==(l=null===(r=re.current)||void 0===r?void 0:r.y())&&void 0!==l?l:0):s={x:Se.x2,y:Se.y2},Se.x2=s.x,Se.y2=s.y}),n=s(()=>{if(!Se.visible){return}if(!re.current){return}const t=re.current.findOne(".selection"),n=t?t.getClientRect({skipStroke:!0}):{width:0,height:0,x:0,y:0};if(n.width&&n.height){const t=[];re.current.find(".element").forEach(i=>{const o=i.getClientRect(),r=e.getElementById(i.id()),l=null==r?void 0:r.draggable,s=null==r?void 0:r.selectable;X.Util.haveIntersection(n,o)&&l&&s&&t.push(r.top.id)});const i=[...new Set(t)];ke.current=!0,e.selectElements(i)}Se.visible=!1});return window.addEventListener("mousemove",t),window.addEventListener("touchmove",t),window.addEventListener("mouseup",n,{capture:!0}),window.addEventListener("touchend",n,{capture:!0}),()=>{window.removeEventListener("mousemove",t),window.removeEventListener("touchmove",t),window.removeEventListener("mouseup",n),window.removeEventListener("touchend",n)}},[]);const Ie=o.useCallback(t=>{if(!e.selectedElements[0]){return}if(t&&e.selectedElementsIds.includes(t)){return}const n=D(e.selectedShapes),o=t?e.getElementById(t):{x:0,y:0,width:i.computedWidth,height:i.computedHeight,rotation:0},r=j(o),l=[];n.minX>r.maxX&&l.push({distance:n.minX-r.maxX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),n.maxX<r.minX&&l.push({distance:r.minX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),n.minY>r.maxY&&l.push({box1:n,box2:r,distance:n.minY-r.maxY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]}),n.maxY<r.minY&&l.push({box1:n,box2:r,distance:r.minY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]});const s=n.minX>=r.minX&&n.maxX<=r.maxX&&n.minY>=r.minY&&n.maxY<=r.maxY;if(s&&(l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:n.minY+n.height/2},{x:r.minX,y:n.minY+n.height/2},{x:r.minX,y:r.minY+r.height/2}]}),l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:n.minY+n.height/2},{x:r.maxX,y:n.minY+n.height/2},{x:r.maxX,y:r.minY+r.height/2}]}),l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:n.minX+n.width/2,y:n.minY},{x:n.minX+n.width/2,y:r.minY},{x:r.minX+r.width/2,y:r.minY}]}),l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:n.minX+n.width/2,y:n.maxY},{x:n.minX+n.width/2,y:r.maxY},{x:r.minX+r.width/2,y:r.maxY}]})),0===l.length&&!s){const e=n.minX<r.maxX&&n.maxX>r.minX,t=n.minY<r.maxY&&n.maxY>r.minY;if(e&&t){const e=(Math.max(n.minY,r.minY)+Math.min(n.maxY,r.maxY))/2,t=(Math.max(n.minX,r.minX)+Math.min(n.maxX,r.maxX))/2;n.minX<r.minX?l.push({distance:r.minX-n.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}):l.push({distance:n.minX-r.minX,box1:n,box2:r,points:[{x:n.minX,y:e},{x:r.minX,y:e},{x:r.minX,y:e}]}),n.maxX>r.maxX?l.push({distance:n.maxX-r.maxX,box1:n,box2:r,points:[{x:r.maxX,y:e},{x:n.maxX,y:e},{x:r.maxX,y:e}]}):l.push({distance:r.maxX-n.maxX,box1:n,box2:r,points:[{x:n.maxX,y:e},{x:r.maxX,y:e},{x:r.maxX,y:e}]}),n.minY<r.minY?l.push({box1:n,box2:r,distance:r.minY-n.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}):l.push({box1:n,box2:r,distance:n.minY-r.minY,points:[{x:t,y:n.minY},{x:t,y:r.minY},{x:t,y:r.minY}]}),n.maxY>r.maxY?l.push({box1:n,box2:r,distance:n.maxY-r.maxY,points:[{x:t,y:r.maxY},{x:t,y:n.maxY},{x:t,y:r.maxY}]}):l.push({box1:n,box2:r,distance:r.maxY-n.maxY,points:[{x:t,y:n.maxY},{x:t,y:r.maxY},{x:t,y:r.maxY}]})}}JSON.stringify(ce)!==JSON.stringify(l)&&me(l)},[e,i]);o.useEffect(()=>{e.selectedElements[0]&&e.distanceGuidesVisible?Ie():ce&&me(null)},[e.distanceGuidesVisible,Ie,e.selectedShapes.map(e=>`${e.x},${e.y},${e.width},${e.height},${e.rotation}`).join("|")]);const Me=o.useRef(!1);o.useEffect(()=>{var e;let t;const n=null===(e=le.current)||void 0===e?void 0:e.closest(".polotno-workspace-inner"),i=()=>{Me.current=!0,clearTimeout(t),t=setTimeout(()=>{Me.current=!1},300)};return null==n||n.addEventListener("scroll",i),()=>{clearTimeout(t),null==n||n.removeEventListener("scroll",i)}},[]),o.useEffect(()=>{const e=re.current;if(!e){return}const t=e.container(),n=e=>{var t,n;e.touches.length>=2&&((null===(t=ne.current)||void 0===t?void 0:t.isDragging())&&ne.current.stopDrag(),null===(n=ne.current)||void 0===n||n.nodes().forEach(e=>{e.isDragging()&&e.stopDrag()}))};return t.addEventListener("touchstart",n,{passive:!0}),t.addEventListener("touchmove",n,{passive:!0}),()=>{t.removeEventListener("touchstart",n),t.removeEventListener("touchmove",n)}},[]);const Oe=t=>{if(e.role===w.VIEWER){return}if(e.activePage!==i&&i.select(),Me.current){return}if(ke.current){return}const n=t.evt.shiftKey,o=t.evt.ctrlKey||t.evt.metaKey,r=n||o,l=t.target.findAncestor(".elements-container"),s=t.target.findAncestor(".page-abs-container"),a=t.target.findAncestor("Transformer"),d=t.target.findAncestor(".page-container",!0);if(!(r||l||a||s||d||Se.visible)){return e.selectElements([]),void e.selectPages([])}if(o&&!n){const t=re.current,n=null==t?void 0:t.getPointerPosition();if(!t||!n){return}const i=t.getAllIntersections(n),o=new Set,r=[];for(const s of[...i].reverse()){const t=s.findAncestor(".element",!0);if(!t){continue}const n=e.getElementById(t.id()),i=null==n?void 0:n.top;i&&(o.has(i.id)||(o.add(i.id),r.push(i.id)))}if(0===r.length){return}let l;if(1===e.selectedElementsIds.length){const t=e.selectedElementsIds[0],n=r.indexOf(t);l=-1===n?r[0]:r[(n+1)%r.length]}else{l=r[0]}return e.selectElements([l]),void e.selectPages([])}const c=t.target.findAncestor(".element-container",!0),m=(null==c?void 0:c.findOne(".element"))||t.target.findAncestor(".element",!0),u=e.getElementById(null==m?void 0:m.id()),h=null==u?void 0:u.top;let g;if("group"===Y){g=null==h?void 0:h.id}else if(h){const t=e.selectedElements.some(e=>{var t;return(null===(t=e.top)||void 0===t?void 0:t.id)===h.id});g=t?null==u?void 0:u.id:null==h?void 0:h.id}else{g=void 0}const x=null==u?void 0:u.id;if(x&&e.selectedElementsIds.indexOf(x)>=0&&!n){return}const p=!!g&&e.selectedElementsIds.indexOf(g)>=0,f=t.target.findAncestor(".page-container",!0);if(g&&n&&!p){const t=e.selectedElementsIds.concat([g]),n=new Set(t),i=t.filter(t=>{const i=e.getElementById(t);if(!i){return!1}for(let e=i.parent;e;e=null==e?void 0:e.parent){if(n.has(e.id)){return!1}}return!0});e.selectElements(i),e.selectPages([])}else{g&&n&&p?e.selectElements(e.selectedElementsIds.filter(e=>e!==g)):!g||n||p?g&&!n&&p||(f?(n||e.selectElements([]),e.selectPages([i.id])):e.selectPages([])):(e.selectElements([g]),e.selectPages([]))}};A(ne,e);const Pe=e.activePage===i,Re=e._selectedPagesIds.includes(i.id),je=null==v?void 0:v.PageControls,De=null==v?void 0:v.Tooltip,Ce=null==v?void 0:v.ContextMenu,Be=1/e.scale,Te=0/e.scale;return n("div",{ref:le,onDragOver:e=>e.preventDefault(),onDrop:t=>{if(t.preventDefault(),e.role===w.VIEWER){return}if(!re.current){return}re.current.setPointersPositions(t);const n=re.current.findOne(".elements-container"),o=null==n?void 0:n.getRelativePointerPosition(),r=re.current.getPointerPosition(),l=re.current.getAllIntersections(r).map(e=>e.findAncestor(".element",!0)).filter(Boolean),s=[...new Set(l.reverse())].map(t=>e.getElementById(t.id())).filter(e=>!!e),a=s[0];ee&&o&&(ee(o,a,{elements:s,page:i}),ee=null)},style:{position:"relative",width:r+"px",height:a+"px",overflow:"hidden",flexShrink:0},className:"polotno-page-container"+(Pe?" active-page":""),children:[t(x,{ref:re,width:Math.min(r,I.width+200),height:Math.min(I.height+200,a),onClick:Oe,onTap:Oe,onContextMenu:t=>{var n,i,o;if(t.evt.preventDefault(),e.role===w.VIEWER){return}const r=t.target.findAncestor(".element",!0),l=e.getElementById(null==r?void 0:r.id()),s=null==l?void 0:l.top,a=null==s?void 0:s.id;if(!a){return e.selectElements([]),void pe.close()}e.selectedElementsIds.indexOf(a)>=0||e.selectElements([a]);const d=null===(n=re.current)||void 0===n?void 0:n.findOne(".page-abs-container"),c=null==d?void 0:d.getRelativePointerPosition();pe.open({x:null!==(i=null==c?void 0:c.x)&&void 0!==i?i:0,y:null!==(o=null==c?void 0:c.y)&&void 0!==o?o:0})},onMouseDown:Ae,onMouseMove:t=>{if(!e.distanceGuidesVisible&&!t.evt.altKey){return void(ce&&me(null))}const n=t.target.findAncestor(".element",!0),i=null==n?void 0:n.id();Ie(i)},onDragStart:t=>{var n;const i=t.target.getStage();if(i&&i.getPointersPositions().length>=2){return void t.target.stopDrag()}const o=t.target.findAncestor(".element",!0);if(o){const i=e.getElementById(null==o?void 0:o.id()),r=null==i?void 0:i.top,l=null==r?void 0:r.id;if(!(i&&e.selectedElementsIds.indexOf(i.id)>=0||l&&e.selectedElementsIds.indexOf(l)>=0)&&l){e.selectElements([l]);const i=we();t.target.stopDrag(),i.forEach(e=>{e.isDragging()||e.startDrag(t)}),null===(n=ne.current)||void 0===n||n.startDrag(t),k()}}ce&&me(null)},pageId:i.id,style:{position:"absolute",overflow:"hidden",top:0,left:0},children:n(u,{children:[t(_,{width:r,height:a,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,name:"page-container",children:n(d,{name:"page-container-2",children:[t(d,{name:"page-background-group",x:U,y:U,children:t(N,{x:-i.bleed,y:-i.bleed,width:i.computedWidth+2*i.bleed,height:i.computedHeight+2*i.bleed,background:i.background,transparencyBackgroundColor:G.transparencyBackgroundColor,name:"page-background",preventDefault:!1,scale:e.scale})}),n(d,{x:U,y:U,name:"elements-container",listening:!e.isPlaying&&e.role!==w.VIEWER,children:[t(g,{name:"elements-area",width:i.computedWidth,height:i.computedHeight,listening:!1}),t(q,{elements:i.children,store:e})]}),t(g,{stroke:G.bleedColor,name:"bleed",strokeWidth:i.bleed,x:i.bleed/2,y:i.bleed/2,width:i.computedWidth+i.bleed,height:i.computedHeight+i.bleed,listening:!1,visible:i.bleed>0&&e.bleedVisible,hideInExport:!0}),O()===ie&&t(oe,{name:"hit-detection",x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te})]})}),t(h,{name:"workspace-background",points:[0,0,r,0,r,a,0,a,0,0,$,te,$,a-te,r-$,a-te,r-$,te,$,te],listening:!1,closed:!0,fill:G.workspaceBackgroundColor}),t(d,{x:$,y:te,scaleX:e.scale,scaleY:e.scale,children:t(g,{name:"page-highlight",hideInExport:!0,x:-Be/2-Te,y:-Be/2-Te,width:H+Be+2*Te,height:J+Be+2*Te,stroke:Re?G.activePageBorderColor:G.pageBorderColor,strokeWidth:2,listening:!1,strokeScaleEnabled:!1})}),n(d,{x:$+U*e.scale,y:te+U*e.scale,scaleX:e.scale,scaleY:e.scale,name:"page-abs-container",children:[t(b,{ref:ne,rotateAnchorAngle:ge,onDragStart:t=>{var n;const o=t.target.getStage();o&&o.getPointersPositions().length>=2?t.target.stopDrag():((null===(n=t.evt)||void 0===n?void 0:n.altKey)&&y&&e.selectedElements.forEach(e=>{const t=e.clone({},{skipSelect:!0}),n=i.children.indexOf(e);i.setElementZIndex(t.id,n)}),de.current=!0,e.history.startTransaction())},onDragEnd:()=>{de.current&&(e.history.endTransaction(),de.current=!1),Ye()},onTransformStart:()=>{e.history.startTransaction(),me(null)},boundBoxFunc:(t,n)=>{var i;const o=Math.abs(n.width)<1||Math.abs(n.height)<1,r=Math.abs(t.width)<1||Math.abs(t.height)<1;if(o&&!r){return t}const l=e.selectedElements;if(1===l.length&&"table"===(null===(i=l[0])||void 0===i?void 0:i.type)){const e=l[0],i=Math.abs(t.width),o=Math.abs(t.height);if(i>0&&o>0){const r=Math.abs(n.width)/i,l=Math.abs(n.height)/o,s=e.width*r,a=e.height*l,d=Object.assign({},n);return s<e.minWidth&&(d.width=t.width,d.x=t.x),a<e.minHeight&&(d.height=t.height,d.y=t.y),d}}return n},onTransform:e=>{const t=ne.current.nodes(),n=t[t.length-1];e.target===n&&setTimeout(()=>{Xe()},0)},onTransformEnd:t=>{he({}),e.history.endTransaction(),Ye()},visible:!e.isPlaying}),ce&&ce.map(({points:i,distance:o,box1:r,box2:l},s)=>n(d,{name:"distances-container",hideInExport:!0,listening:!1,children:[t(g,Object.assign({},r,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(g,Object.assign({},l,{stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1})),t(h,{points:[i[0].x,i[0].y,i[1].x,i[1].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),t(h,{points:[i[1].x,i[1].y,i[2].x,i[2].y],stroke:G.distanceGuideStyle.stroke,strokeWidth:1,strokeScaleEnabled:!1}),n(m,{x:(i[0].x+i[1].x)/2,y:(i[0].y+i[1].y)/2,offsetY:-10,scaleX:1/e.scale,scaleY:1/e.scale,children:[t(p,{cornerRadius:5,fill:G.distanceGuideStyle.labelFill,pointerDirection:"down"}),t(f,{align:"center",verticalAlign:"middle",fill:G.distanceGuideStyle.labelTextFill,padding:5,text:B({unit:e.unit,dpi:e.dpi,px:o})})]})]},s)),i._rendering&&n(d,{children:[t(g,{width:H,height:J,fill:"rgba(255,255,255,0.9)"}),t(f,{text:"Rendering...",fontSize:60,width:H,height:J,align:"center",verticalAlign:"middle"})]}),De&&t(De,{components:v,store:e,page:i,stageRef:re,tooltipSafeArea:C}),Ce&&t(L,{children:t(Ce,Object.assign({components:v,store:e},pe.props))})]}),t(S,{store:e,page:i,width:r,height:a,scale:e.scale,xPadding:$,yPadding:te,bleed:U}),t(Q,Object.assign({},ue,{store:e})),t(K,{selection:Se}),P()>0&&n(d,{hideInExport:!0,children:[t(ae,{name:"cache-bounds",x:r-(1===P()?250:210),y:a-(1===P()?95:45)}),t(ae,{name:"cache-bounds-t",x:10,y:10})]}),R()&&t(f,{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","_blank","noopener")},onTap:()=>{window.open("https://polotno.com","_blank","noopener")}}),t(d,{name:"line-guides"})]})}),se&&je&&t(je,{store:e,page:i,xPadding:$,yPadding:te,layout:M})]})});
@@ -1,4 +1,4 @@
1
- import{jsx as t}from"react/jsx-runtime";import e from"react";import o from"quill";import*as n from"mobx";import{reaction as i}from"mobx";import{isAlive as r}from"mobx-state-tree";import l from"konva";import{getQuillEditorHtml as a,getDir as s}from"../utils/text-html.js";import{normalizeRichTextHtml as c,isQuillFormatMixed as d}from"../utils/rich-text-html.js";import{resetStyleContent as u}from"../utils/reset-style.js";import{removeTags as f}from"../utils/text.js";import{isGradient as p,parseColor as m}from"../utils/gradient.js";import{getOptimalCaretColor as g}from"./text-element/caret-color.js";import{registerQuillUnrestrictedFontFormats as h}from"./quill-font-formats.js";import{ALL_QUILL_MIXED_KEYS as v,setActiveTextEditor as x,updateActiveTextFormat as b,clearActiveTextEditor as S}from"../utils/text-format-state.js";import y from"../utils/styled.js";export function applyOpacityToColor(t,e){if(1===e){return t}const o=l.Util.colorToRGBA(t);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*e})`:t}export const quillRef=n.observable({enabled:!1,currentFormat:{},lastSelection:null,pendingToolbarInteraction:!1,editor:n.observable.object({instance:null},{},{deep:!1})});const w=v;export function syncQuillFormatState(t,e){const o=e?t.getFormat(e):{},i=function(t,e){const o={};if(!e||e.length<=0){return o}const n=t.getContents(e.index,e.length);for(const i of w){d(n,i)&&(o[i]=!0)}return o}(t,e);n.runInAction(()=>{quillRef.currentFormat=o}),b(o,i,e)}const C="polotno-saved-selection";function E(){const t=window.getSelection();if(!t||0===t.rangeCount||t.isCollapsed){return}if("undefined"==typeof Highlight||!CSS.highlights){return}const e=t.getRangeAt(0).cloneRange();CSS.highlights.set(C,new Highlight(e)),q()}function T(){"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.delete(C)}function q(t=20){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(C)&&(t>0&&(document.querySelector("[data-radix-popper-content-wrapper]")||k(document.activeElement))?q(t-1):T())},300)}if("undefined"!=typeof document&&"undefined"!=typeof CSS&&CSS.highlights&&!document.querySelector("[data-polotno-highlight]")){const F=document.createElement("style");F.setAttribute("data-polotno-highlight",""),F.textContent=`::highlight(${C}) { background-color: rgba(0, 100, 255, 0.3); }`,document.head.appendChild(F)}export const RichTextContainer=y("div",e.forwardRef)`
1
+ import{jsx as e}from"react/jsx-runtime";import t from"react";import n from"quill";import*as o from"mobx";import{reaction as i}from"mobx";import{isAlive as r}from"mobx-state-tree";import l from"konva";import{getQuillEditorHtml as s,getDir as a}from"../utils/text-html.js";import{normalizeRichTextHtml as d,isQuillFormatMixed as c}from"../utils/rich-text-html.js";import{resetStyleContent as u}from"../utils/reset-style.js";import{removeTags as f}from"../utils/text.js";import{isGradient as p,parseColor as m}from"../utils/gradient.js";import{getOptimalCaretColor as h}from"./text-element/caret-color.js";import{registerQuillUnrestrictedFontFormats as g}from"./quill-font-formats.js";import{ALL_QUILL_MIXED_KEYS as b,setActiveTextEditor as v,updateActiveTextFormat as x,clearActiveTextEditor as y}from"../utils/text-format-state.js";import w from"../utils/styled.js";export function applyOpacityToColor(e,t){if(1===t){return e}const n=l.Util.colorToRGBA(e);return n?`rgba(${n.r}, ${n.g}, ${n.b}, ${n.a*t})`:e}export const quillRef=o.observable({enabled:!1,currentFormat:{},lastSelection:null,pendingToolbarInteraction:!1,editor:o.observable.object({instance:null},{},{deep:!1})});const S=b;export function syncQuillFormatState(e,t){const n=t?e.getFormat(t):{},i=function(e,t){const n={};if(!t||t.length<=0){return n}const o=e.getContents(t.index,t.length);for(const i of S){c(o,i)&&(n[i]=!0)}return n}(e,t);o.runInAction(()=>{quillRef.currentFormat=n}),x(n,i,t)}const q="polotno-saved-selection";function k(){const e=window.getSelection();if(!e||0===e.rangeCount||e.isCollapsed){return}if("undefined"==typeof Highlight||!CSS.highlights){return}const t=e.getRangeAt(0).cloneRange();CSS.highlights.set(q,new Highlight(t)),E()}function C(){"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.delete(q)}function E(e=20){setTimeout(()=>{"undefined"!=typeof CSS&&CSS.highlights&&CSS.highlights.has(q)&&(e>0&&(document.querySelector("[data-radix-popper-content-wrapper]")||R(document.activeElement))?E(e-1):C())},300)}if("undefined"!=typeof document&&"undefined"!=typeof CSS&&CSS.highlights&&!document.querySelector("[data-polotno-highlight]")){const L=document.createElement("style");L.setAttribute("data-polotno-highlight",""),L.textContent=`::highlight(${q}) { background-color: rgba(0, 100, 255, 0.3); }`,document.head.appendChild(L)}export const RichTextContainer=w("div",t.forwardRef)`
2
2
  .ql-editor {
3
3
  outline: none;
4
4
  /* Element-level underline/strike — text-decoration doesn't inherit, so it is
@@ -10,6 +10,92 @@ import{jsx as t}from"react/jsx-runtime";import e from"react";import o from"quill
10
10
  opacity: 0;
11
11
  }
12
12
  ${u}
13
+
14
+ /* ===== Editor-only list markers (Quill flat-DOM hack) ======================
15
+ Quill emits a FLAT <ol> with per-item data-list + ql-indent classes (not
16
+ real nested <ul>/<ol>), so the browser's native markers can't render mixed
17
+ bullet/number items or nested numbering. The editor therefore disables
18
+ native markers and draws its own via ::before — but ONLY here, so it can't
19
+ leak into the export/canvas paths (which use native markers; see
20
+ reset-style.ts). These are tuned to match render-tag (the canvas
21
+ reference): marker sized at the item font, sitting just left of the text
22
+ inside the 2.1em indent. letter-spacing is intentionally NOT reset to
23
+ normal — numbered markers track it, like render-tag/native/Canva. */
24
+ .ql-editor ul,
25
+ .ql-editor ol {
26
+ list-style: none;
27
+ /* Editor box model is the inverse of the shared reset: the indent lives on
28
+ the <li> (not the list) so the absolutely-positioned ::before marker
29
+ below has room in the li's start-padding. (The export/canvas path puts
30
+ the indent on the list for native outside markers — see reset-style.ts.) */
31
+ padding-inline-start: 0;
32
+ }
33
+ .ql-editor .ql-ui {
34
+ display: none;
35
+ }
36
+ /* Per-LEVEL ordered counters (list-0..list-3), so a nested ordered list
37
+ restarts at 1 — matching canonical HTML and the canvas. Quill's flat DOM
38
+ expresses depth via ql-indent-N, so each ordered item increments its
39
+ level's counter and RESETS all deeper levels (counter-reset applies before
40
+ counter-increment on the same element). A single global counter would make
41
+ a nested "deep" item continue the outer numbering (e.g. show 3 instead of
42
+ 1). All levels use decimal to match render-tag (which doesn't cycle
43
+ styles). Custom counter names avoid Safari's list-item counter bug. */
44
+ .ql-editor ol {
45
+ counter-reset: list-0 list-1 list-2 list-3;
46
+ }
47
+ .ql-editor li {
48
+ position: relative; /* anchor for the absolutely-positioned ::before */
49
+ padding-inline-start: 2.1em; /* marker space + per-level indent (start side) */
50
+ }
51
+ .ql-editor li[data-list='ordered'] {
52
+ counter-increment: list-0;
53
+ counter-reset: list-1 list-2 list-3;
54
+ }
55
+ .ql-editor li.ql-indent-1[data-list='ordered'] {
56
+ counter-increment: list-1;
57
+ counter-reset: list-2 list-3;
58
+ }
59
+ .ql-editor li.ql-indent-2[data-list='ordered'] {
60
+ counter-increment: list-2;
61
+ counter-reset: list-3;
62
+ }
63
+ .ql-editor li.ql-indent-3[data-list='ordered'] {
64
+ counter-increment: list-3;
65
+ }
66
+ /* Marker box spans the 2.1em indent and right-aligns the marker against the
67
+ text with a gap, so the marker's right edge ≈ render-tag's
68
+ (contentStart − gap). line-height is inherited so the marker sits on the
69
+ item's first-line baseline (matches render-tag's number baseline; bullets
70
+ are close). */
71
+ .ql-editor li::before {
72
+ position: absolute;
73
+ inset-inline-start: 0;
74
+ top: 0;
75
+ box-sizing: border-box;
76
+ width: 2.1em;
77
+ text-align: end;
78
+ font-weight: normal;
79
+ font-style: normal;
80
+ }
81
+ .ql-editor li[data-list='ordered']::before {
82
+ content: counter(list-0) '.';
83
+ padding-inline-end: 0.32em; /* ≈ render-tag's space-width gap for numbers */
84
+ }
85
+ .ql-editor li.ql-indent-1[data-list='ordered']::before {
86
+ content: counter(list-1) '.';
87
+ }
88
+ .ql-editor li.ql-indent-2[data-list='ordered']::before {
89
+ content: counter(list-2) '.';
90
+ }
91
+ .ql-editor li.ql-indent-3[data-list='ordered']::before {
92
+ content: counter(list-3) '.';
93
+ }
94
+ .ql-editor li[data-list='bullet']::before {
95
+ content: '•';
96
+ padding-inline-end: 0.5em; /* ≈ render-tag's wider bullet gap (7px + ascent/3) */
97
+ }
98
+
13
99
  strong {
14
100
  font-weight: 700;
15
101
  }
@@ -30,4 +116,4 @@ import{jsx as t}from"react/jsx-runtime";import e from"react";import o from"quill
30
116
  -webkit-text-fill-color: transparent;
31
117
  color: transparent;
32
118
  }
33
- `;let R=["background","bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=t=>{R=t};export const createQuill=t=>(h(),new o(t,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:R}));export const setQuillContent=(t,e)=>{var o=t.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+e+"<p><br></p></div>",text:""});t.setContents(o),t.history.clear()};export const RichEditor=({onBlur:l,onChange:d,element:u,clickCoords:v})=>{var b,y,w;const C=e.useRef(null),q=e.useRef(!1);e.useLayoutEffect(()=>{let t,e=!1,i=null,s=null,f=null,p=null,m=null;const g=()=>{if(!e&&C.current){try{g=C.current,h(),t=new o(g,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:R}),n.runInAction(()=>{quillRef.editor.instance=t}),quillRef.pendingToolbarInteraction=!1,window.__polotnoQuill=t,x({instance:t,store:u.store,element:u}),t.on("text-change",()=>{const e=t.getSelection();e&&(syncQuillFormatState(t,e),n.runInAction(()=>{quillRef.lastSelection={index:e.index,length:e.length}})),setTimeout(()=>{var e;const o=t.root;if(!o||!o.isConnected){return}if(!r(u)){return}const n=o.innerHTML;q.current=!0,d(c(function(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}(n),{fontSize:u.fontSize,fontFamily:u.fontFamily}));const i=t.getContents(),l=u.fill;let a=null,s=!0;for(const t of i.ops){if("string"!=typeof t.insert||"\n"===t.insert){continue}const o=(null===(e=t.attributes)||void 0===e?void 0:e.color)||l;if(null===a){a=o}else if(o!==a){s=!1;break}}s&&a&&u.set({fill:a})},10)});const e=a(u,u.fontFamily);setQuillContent(t,e),q.current=!0;const b=C.current.closest(".polotno-workspace-inner"),S=null==b?void 0:b.scrollLeft,y=null==b?void 0:b.scrollTop;v?setCursorFromCoords(t,v):t.setSelection(0,0,"api"),b&&void 0!==S&&void 0!==y&&(b.scrollLeft=S,b.scrollTop=y),t.on("selection-change",(e,o,i)=>{e&&(syncQuillFormatState(t,e),n.runInAction(()=>{quillRef.lastSelection={index:e.index,length:e.length}}))});const w=t.root;p=t=>{const e=t.relatedTarget;(null==e?void 0:e.classList.contains("ql-clipboard"))||(k(e)||quillRef.pendingToolbarInteraction?E():setTimeout(()=>{quillRef.pendingToolbarInteraction||k(document.activeElement)?E():(T(),l())},0))},m=()=>{T()},w.addEventListener("blur",p),w.addEventListener("focus",m),i=w,s=e=>{var o,n;const i=t.getSelection();if(!i||0===i.length){return}const r=t.getText(i.index,i.length).replace(/\n$/,""),l=window.getSelection();let a="";if(l&&l.rangeCount>0){const t=l.getRangeAt(0);let e=t.cloneContents(),o=t.startContainer;o&&o.nodeType===Node.TEXT_NODE&&(o=o.parentNode);let n=t.endContainer;if(n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode),o&&o===n){let t=o;for(;t&&t!==w&&t.nodeType===Node.ELEMENT_NODE;){const o=t.tagName;if("SPAN"!==o&&"EM"!==o&&"STRONG"!==o&&"U"!==o&&"S"!==o&&"A"!==o){break}const n=t.cloneNode(!1);n.appendChild(e),e=n,t=t.parentNode}}const i=document.createElement("div");i.appendChild(e),a=i.innerHTML}if(null===(o=e.clipboardData)||void 0===o||o.setData("text/plain",r),a){const t='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; overflow-wrap: break-word;">'+a+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(n=e.clipboardData)||void 0===n||n.setData("text/html",t)}e.preventDefault()},f=e=>{s&&s(e);const o=t.getSelection();o&&o.length>0&&t.deleteText(o.index,o.length)},i.addEventListener("copy",s),i.addEventListener("cut",f)}catch(b){console.error("RichEditor init failed:",b)}}var g};return C.current?g():queueMicrotask(g),()=>{e=!0,i&&p&&i.removeEventListener("blur",p),i&&m&&i.removeEventListener("focus",m),T(),i&&s&&f&&(i.removeEventListener("copy",s),i.removeEventListener("cut",f)),n.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={},quillRef.lastSelection=null}),S(t),delete window.__polotnoQuill}},[]),e.useEffect(()=>i(()=>r(u)?`${u.text}\0${u.fontSize}\0${u.fontFamily}`:"",()=>{if(!r(u)){return}const t=quillRef.editor.instance;if(!t){return}if(q.current){return void(q.current=!1)}const e=t.getSelection();setQuillContent(t,a(u,u.fontFamily)),q.current=!0,e&&(t.setSelection(e.index,e.length),syncQuillFormatState(t,t.getSelection()))},{fireImmediately:!0}),[]),e.useEffect(()=>{window.addEventListener("blur",l);const t=t=>{var e;(null===(e=C.current)||void 0===e?void 0:e.contains(t.target))||k(t.target)||quillRef.pendingToolbarInteraction||(T(),l())};return window.addEventListener("mousedown",t),window.addEventListener("touchstart",t),()=>{window.removeEventListener("blur",l),window.removeEventListener("mousedown",t),window.removeEventListener("touchstart",t)}},[]);const F={color:u.fill};u.fill.indexOf("gradient")>=0&&(F["--polotno-gradient"]=u.fill,F.color="transparent");const L=p(u.fill)?null!==(y=null===(b=m(u.fill).stops[0])||void 0===b?void 0:b.color)&&void 0!==y?y:"#000000":g(u);return t(RichTextContainer,{ref:C,style:Object.assign(Object.assign({},F),{fontSize:u.fontSize,fontFamily:u.fontFamily,fontWeight:u.fontWeight,fontStyle:u.fontStyle,"--polotno-text-decoration":u.textDecoration||"none",textTransform:u.textTransform,width:u.a.width,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing*u.fontSize+"px",textAlign:u.align,opacity:Math.max(u.a.opacity,.2),textShadow:u.shadowEnabled?`${u.shadowOffsetX}px ${u.shadowOffsetY}px ${u.shadowBlur}px ${applyOpacityToColor(u.shadowColor,null!==(w=u.shadowOpacity)&&void 0!==w?w:1)}`:void 0,caretColor:L}),dir:s(f(u.text))})};function k(t){return!(!t||!t.closest(".sketch-picker")&&!t.closest("[data-polotno-keep-focus]")&&!t.closest("[data-radix-popper-content-wrapper]")&&!t.closest(".polotno-toolbar"))}export function setCursorFromCoords(t,e){if(!t||!e){return}const{x:n,y:i}=e;try{let e=null;if(document.caretRangeFromPoint){e=document.caretRangeFromPoint(n,i)}else if(document.caretPositionFromPoint){const t=document.caretPositionFromPoint(n,i);t&&(e=document.createRange(),e.setStart(t.offsetNode,t.offset))}if(e){const n=o.find(e.startContainer,!0);if(n){const o=n.offset(t.scroll)+e.startOffset;return void t.setSelection(o,0,"api")}}}catch(r){}t.setSelection(0,0,"api")}
119
+ `;let T=["background","bold","color","font","italic","size","strike","underline","indent","list","direction"];export const setQuillFormats=e=>{T=e};export const createQuill=e=>(g(),new n(e,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}));export const setQuillContent=(e,t)=>{var n=e.clipboard.convert({html:"<div class='ql-editor' style='outline: none;'>"+t+"<p><br></p></div>",text:""});e.setContents(n),e.history.clear()};export const RichEditor=({onBlur:l,onChange:c,element:u,clickCoords:b})=>{var x,w,S;const q=t.useRef(null),E=t.useRef(!1);t.useLayoutEffect(()=>{let e,t=!1,i=null,a=null,f=null,p=null,m=null;const h=()=>{if(!t&&q.current){try{h=q.current,g(),e=new n(h,{toolbar:!1,keyboard:!1,clipboard:{matchVisual:!1},formats:T}),o.runInAction(()=>{quillRef.editor.instance=e}),quillRef.pendingToolbarInteraction=!1,window.__polotnoQuill=e,v({instance:e,store:u.store,element:u}),e.on("text-change",()=>{const t=e.getSelection();t&&(syncQuillFormatState(e,t),o.runInAction(()=>{quillRef.lastSelection={index:t.index,length:t.length}})),setTimeout(()=>{var t;const n=e.root;if(!n||!n.isConnected){return}if(!r(u)){return}const o=n.innerHTML;E.current=!0,c(d(function(e){const t=(e||"").trim();if("<p><br></p>"===t||"<p></p>"===t){return""}if(t.startsWith("<p>")&&t.endsWith("</p>")){const e=t.slice(3,-4);if(!/(<\/?(p|div|h[1-6]|ul|ol|li|table|thead|tbody|tr|td|blockquote)\b)/i.test(e)){return e}}return e}(o),{fontSize:u.fontSize,fontFamily:u.fontFamily}));const i=e.getContents(),l=u.fill;let s=null,a=!0;for(const e of i.ops){if("string"!=typeof e.insert||"\n"===e.insert){continue}const n=(null===(t=e.attributes)||void 0===t?void 0:t.color)||l;if(null===s){s=n}else if(n!==s){a=!1;break}}a&&s&&u.set({fill:s})},10)});const t=s(u,u.fontFamily);setQuillContent(e,t),E.current=!0;const x=q.current.closest(".polotno-workspace-inner"),y=null==x?void 0:x.scrollLeft,w=null==x?void 0:x.scrollTop;b?setCursorFromCoords(e,b):e.setSelection(0,0,"api"),x&&void 0!==y&&void 0!==w&&(x.scrollLeft=y,x.scrollTop=w),e.on("selection-change",(t,n,i)=>{t&&(syncQuillFormatState(e,t),o.runInAction(()=>{quillRef.lastSelection={index:t.index,length:t.length}}))});const S=e.root;p=e=>{const t=e.relatedTarget;(null==t?void 0:t.classList.contains("ql-clipboard"))||(R(t)||quillRef.pendingToolbarInteraction?k():setTimeout(()=>{quillRef.pendingToolbarInteraction||R(document.activeElement)?k():(C(),l())},0))},m=()=>{C()},S.addEventListener("blur",p),S.addEventListener("focus",m),i=S,a=t=>{var n,o;const i=e.getSelection();if(!i||0===i.length){return}const r=e.getText(i.index,i.length).replace(/\n$/,""),l=window.getSelection();let s="";if(l&&l.rangeCount>0){const e=l.getRangeAt(0);let t=e.cloneContents(),n=e.startContainer;n&&n.nodeType===Node.TEXT_NODE&&(n=n.parentNode);let o=e.endContainer;if(o&&o.nodeType===Node.TEXT_NODE&&(o=o.parentNode),n&&n===o){let e=n;for(;e&&e!==S&&e.nodeType===Node.ELEMENT_NODE;){const n=e.tagName;if("SPAN"!==n&&"EM"!==n&&"STRONG"!==n&&"U"!==n&&"S"!==n&&"A"!==n){break}const o=e.cloneNode(!1);o.appendChild(t),t=o,e=e.parentNode}}const i=document.createElement("div");i.appendChild(t),s=i.innerHTML}if(null===(n=t.clipboardData)||void 0===n||n.setData("text/plain",r),s){const e='<!DOCTYPE html><html><head><meta charset="utf-8"></head><body>\x3c!--StartFragment--\x3e<div style="white-space: pre-wrap; overflow-wrap: break-word;">'+s+"</div>\x3c!--EndFragment--\x3e</body></html>";null===(o=t.clipboardData)||void 0===o||o.setData("text/html",e)}t.preventDefault()},f=t=>{a&&a(t);const n=e.getSelection();n&&n.length>0&&e.deleteText(n.index,n.length)},i.addEventListener("copy",a),i.addEventListener("cut",f)}catch(x){console.error("RichEditor init failed:",x)}}var h};return q.current?h():queueMicrotask(h),()=>{t=!0,i&&p&&i.removeEventListener("blur",p),i&&m&&i.removeEventListener("focus",m),C(),i&&a&&f&&(i.removeEventListener("copy",a),i.removeEventListener("cut",f)),o.runInAction(()=>{quillRef.editor.instance=null,quillRef.currentFormat={},quillRef.lastSelection=null}),y(e),delete window.__polotnoQuill}},[]),t.useEffect(()=>i(()=>r(u)?`${u.text}\0${u.fontSize}\0${u.fontFamily}`:"",()=>{if(!r(u)){return}const e=quillRef.editor.instance;if(!e){return}if(E.current){return void(E.current=!1)}const t=e.getSelection();setQuillContent(e,s(u,u.fontFamily)),E.current=!0,t&&(e.setSelection(t.index,t.length),syncQuillFormatState(e,e.getSelection()))},{fireImmediately:!0}),[]),t.useEffect(()=>{window.addEventListener("blur",l);const e=e=>{var t;(null===(t=q.current)||void 0===t?void 0:t.contains(e.target))||R(e.target)||quillRef.pendingToolbarInteraction||(C(),l())};return window.addEventListener("mousedown",e),window.addEventListener("touchstart",e),()=>{window.removeEventListener("blur",l),window.removeEventListener("mousedown",e),window.removeEventListener("touchstart",e)}},[]);const L={color:u.fill};u.fill.indexOf("gradient")>=0&&(L["--polotno-gradient"]=u.fill,L.color="transparent");const F=p(u.fill)?null!==(w=null===(x=m(u.fill).stops[0])||void 0===x?void 0:x.color)&&void 0!==w?w:"#000000":h(u);return e(RichTextContainer,{ref:q,style:Object.assign(Object.assign({},L),{fontSize:u.fontSize,fontFamily:u.fontFamily,fontWeight:u.fontWeight,fontStyle:u.fontStyle,"--polotno-text-decoration":u.textDecoration||"none",textTransform:u.textTransform,width:u.a.width,lineHeight:u.lineHeight,letterSpacing:u.letterSpacing*u.fontSize+"px",textAlign:u.align,opacity:Math.max(u.a.opacity,.2),textShadow:u.shadowEnabled?`${u.shadowOffsetX}px ${u.shadowOffsetY}px ${u.shadowBlur}px ${applyOpacityToColor(u.shadowColor,null!==(S=u.shadowOpacity)&&void 0!==S?S:1)}`:void 0,caretColor:F}),dir:a(f(u.text))})};function R(e){return!(!e||!e.closest(".sketch-picker")&&!e.closest("[data-polotno-keep-focus]")&&!e.closest("[data-radix-popper-content-wrapper]")&&!e.closest(".polotno-toolbar"))}export function setCursorFromCoords(e,t){if(!e||!t){return}const{x:o,y:i}=t;try{let t=null;if(document.caretRangeFromPoint){t=document.caretRangeFromPoint(o,i)}else if(document.caretPositionFromPoint){const e=document.caretPositionFromPoint(o,i);e&&(t=document.createRange(),t.setStart(e.offsetNode,e.offset))}if(t){const o=n.find(t.startContainer,!0);if(o){const n=o.offset(e.scroll)+t.startOffset;return void e.setSelection(n,0,"api")}}}catch(r){}e.setSelection(0,0,"api")}
package/config.d.ts CHANGED
@@ -19,7 +19,7 @@ export { setQuillFormats as unstable_setQuillFormats } from './canvas/html-eleme
19
19
  export { useDownScaling, setDownScalingEnabled } from './utils/flags.js';
20
20
  export { useRemoveBackground as unstable_setRemoveBackgroundEnabled, setRemoveBackgroundEnabled, } from './utils/flags.js';
21
21
  export { useHtmlTextRender as unstable_useHtmlTextRender, setRichTextEnabled, } from './utils/flags.js';
22
- export { setRenderTagTextEnabled, setRenderTagTextEnabled as unstable_setRenderTagTextEnabled, } from './utils/flags.js';
22
+ export { setLegacuRichTextEnabled } from './utils/flags.js';
23
23
  export { setForceTextFit as unstable_setForceTextFit } from './utils/flags.js';
24
24
  export { setTextSplitAllowed as unstable_setTextSplitAllowed } from './utils/flags.js';
25
25
  export { setTextOverflow as unstable_setTextOverflow, setTextOverflow, } from './utils/flags.js';
package/config.js CHANGED
@@ -1 +1 @@
1
- export{setGoogleFonts,addGlobalFont,removeGlobalFont,replaceGlobalFonts,setGoogleFontsVariants}from"./utils/fonts.js";export{setUploadFunc}from"./side-panel/upload-panel.js";export{setFontUploadFunc}from"./side-panel/text-panel.js";export{toggleFadeInAnimation}from"./canvas/use-fadein.js";export{setTransformerStyle,setHighlighterStyle,setInnerImageCropTransformerStyle,setOuterImageCropTransformerStyle}from"./canvas/workspace-style.js";export{setImageLoaderHook as unstable_setImageLoaderHook}from"./canvas/image-element.js";export{registerShapeModel as unstable_registerShapeModel}from"./model/group-model.js";export{registerShapeComponent as unstable_registerShapeComponent}from"./canvas/element.js";export{registerTransformerAttrs as unstable_registerTransformerAttrs}from"./canvas/page.js";export{registerToolbarComponent as unstable_registerToolbarComponent}from"./toolbar/toolbar.js";export{onLoadError,setAssetLoadTimeout,setFontLoadTimeout}from"./utils/loader.js";export{setSnapFilterFunc as unstable_setSnapFilterFunc}from"./canvas/use-transformer-snap.js";export{setTranslations,getTranslations}from"./utils/l10n.js";export{setIcons}from"./icons/registry.js";export{registerNextDomDrop as unstable_registerNextDomDrop}from"./canvas/page.js";export{getGoogleFontsListAPI,getGoogleFontImage,setAPI}from"./utils/api.js";export{setColorsPresetFunc}from"./toolbar/color-picker.js";export{setQuillFormats as unstable_setQuillFormats}from"./canvas/html-element.js";export{useDownScaling,setDownScalingEnabled}from"./utils/flags.js";export{useRemoveBackground as unstable_setRemoveBackgroundEnabled,setRemoveBackgroundEnabled}from"./utils/flags.js";export{useHtmlTextRender as unstable_useHtmlTextRender,setRichTextEnabled}from"./utils/flags.js";export{setRenderTagTextEnabled,setRenderTagTextEnabled as unstable_setRenderTagTextEnabled}from"./utils/flags.js";export{setForceTextFit as unstable_setForceTextFit}from"./utils/flags.js";export{setTextSplitAllowed as unstable_setTextSplitAllowed}from"./utils/flags.js";export{setTextOverflow as unstable_setTextOverflow,setTextOverflow}from"./utils/flags.js";export{setTextVerticalResizeEnabled as unstable_setTextVerticalResizeEnabled,setTextVerticalResizeEnabled}from"./utils/flags.js";export{setAnimationsEnabled as unstable_setAnimationsEnabled,setAnimationsEnabled}from"./utils/flags.js";export{setAiTextEnabled}from"./utils/flags.js";export{setAutoDeleteEmptyText}from"./utils/flags.js";
1
+ export{setGoogleFonts,addGlobalFont,removeGlobalFont,replaceGlobalFonts,setGoogleFontsVariants}from"./utils/fonts.js";export{setUploadFunc}from"./side-panel/upload-panel.js";export{setFontUploadFunc}from"./side-panel/text-panel.js";export{toggleFadeInAnimation}from"./canvas/use-fadein.js";export{setTransformerStyle,setHighlighterStyle,setInnerImageCropTransformerStyle,setOuterImageCropTransformerStyle}from"./canvas/workspace-style.js";export{setImageLoaderHook as unstable_setImageLoaderHook}from"./canvas/image-element.js";export{registerShapeModel as unstable_registerShapeModel}from"./model/group-model.js";export{registerShapeComponent as unstable_registerShapeComponent}from"./canvas/element.js";export{registerTransformerAttrs as unstable_registerTransformerAttrs}from"./canvas/page.js";export{registerToolbarComponent as unstable_registerToolbarComponent}from"./toolbar/toolbar.js";export{onLoadError,setAssetLoadTimeout,setFontLoadTimeout}from"./utils/loader.js";export{setSnapFilterFunc as unstable_setSnapFilterFunc}from"./canvas/use-transformer-snap.js";export{setTranslations,getTranslations}from"./utils/l10n.js";export{setIcons}from"./icons/registry.js";export{registerNextDomDrop as unstable_registerNextDomDrop}from"./canvas/page.js";export{getGoogleFontsListAPI,getGoogleFontImage,setAPI}from"./utils/api.js";export{setColorsPresetFunc}from"./toolbar/color-picker.js";export{setQuillFormats as unstable_setQuillFormats}from"./canvas/html-element.js";export{useDownScaling,setDownScalingEnabled}from"./utils/flags.js";export{useRemoveBackground as unstable_setRemoveBackgroundEnabled,setRemoveBackgroundEnabled}from"./utils/flags.js";export{useHtmlTextRender as unstable_useHtmlTextRender,setRichTextEnabled}from"./utils/flags.js";export{setLegacuRichTextEnabled}from"./utils/flags.js";export{setForceTextFit as unstable_setForceTextFit}from"./utils/flags.js";export{setTextSplitAllowed as unstable_setTextSplitAllowed}from"./utils/flags.js";export{setTextOverflow as unstable_setTextOverflow,setTextOverflow}from"./utils/flags.js";export{setTextVerticalResizeEnabled as unstable_setTextVerticalResizeEnabled,setTextVerticalResizeEnabled}from"./utils/flags.js";export{setAnimationsEnabled as unstable_setAnimationsEnabled,setAnimationsEnabled}from"./utils/flags.js";export{setAiTextEnabled}from"./utils/flags.js";export{setAutoDeleteEmptyText}from"./utils/flags.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "3.0.0-beta.44",
3
+ "version": "3.0.0-beta.45",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [
@@ -114,7 +114,7 @@
114
114
  "react-konva-utils": "^2.0.0",
115
115
  "react-sortablejs": "6.1.4",
116
116
  "react-window": "^1.8.11",
117
- "render-tag": "^0.1.13",
117
+ "render-tag": "^0.1.14",
118
118
  "sortablejs": "^1.15.7",
119
119
  "svg-round-corners": "^0.4.3",
120
120
  "swr": "^2.4.1",
@@ -169,9 +169,9 @@
169
169
  "@babel/core": "^7.29.7",
170
170
  "@babel/parser": "^7.29.7",
171
171
  "@babel/traverse": "^7.29.7",
172
- "@blueprintjs/core": "6.15.1",
173
- "@blueprintjs/icons": "^6.10.0",
174
- "@blueprintjs/select": "6.2.2",
172
+ "@blueprintjs/core": "6.16.0",
173
+ "@blueprintjs/icons": "^6.11.0",
174
+ "@blueprintjs/select": "6.3.0",
175
175
  "@canvas/image": "^2.0.0",
176
176
  "@polotno/video-export": "^0.0.11",
177
177
  "@size-limit/preset-big-lib": "^12.1.0",