polotno 4.0.0-beta.41 → 4.0.0-beta.42

package/canvas/render-tag-element.js

@@ -1 +1 @@
-import{jsx as t,Fragment as e,jsxs as r}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{Group as i,Path as a,Rect as s,Shape as l}from"react-konva";import*as h from"mobx";import{isAlive as c}from"mobx-state-tree";import{Html as d}from"react-konva-utils";import{layout as u,drawLayout as f}from"render-tag";import{layoutTextOnPath as g,drawTextOnPathLayout as m}from"render-tag/path";import{flags as p}from"../utils/flags.js";import{applyFilter as x}from"./apply-filters.js";import{getLineHeight as y,useFontFamiliesLoader as w,usePrevious as b}from"./text-element.js";import{getHtml as v,getCurvePath as E,getCurveTextHeight as z}from"../utils/text-html.js";import{useColor as k}from"./use-color.js";import{isGradient as S}from"../utils/gradient.js";import{detectSize as O}from"../utils/html2canvas.js";import{generateBackgroundShapeFromRects as M}from"../utils/background-shape.js";import{useFadeIn as j}from"./use-fadein.js";import{incrementLoader as R}from"../utils/loader.js";import{removeTags as F}from"../utils/text.js";import{isTouchDevice as T}from"../utils/screen.js";import{getLimitedFontSize as Y}from"./text-element/max-font-size.js";import{normalizeRichTextHtml as X,extractFontFamiliesFromHtml as C,scaleRichTextFontSizesInHtml as B}from"../utils/rich-text-html.js";import{RichEditor as I}from"./rich-editor.js";import{findFitFontSize as A}from"./text-element/fit-font-size.js";import{resetStyleContent as D}from"../utils/reset-style.js";const H=`<style>${D}\n/* render-tag draws list markers natively from the <ol>/<ul> tag + tree position\n   (it ignores the polotno reset's ::before + counter() markers, which only work\n   in real DOM — the Quill editor and the foreignObject rasterizer). The shared\n   reset sets list-style:none for those ::before markers, which would suppress\n   render-tag's native ones; restore the canonical marker types here so render-tag\n   paints them. element.text is canonicalized to <ul>/<ol> upstream\n   (normalizeRichTextHtml), so the tag alone selects bullet vs. number. */\nol { list-style-type: decimal; }\nul { list-style-type: disc; }\n/* Chrome's <code>/<pre> font-size UA quirk isn't reproducible on canvas — let\n   them inherit so DOM and canvas line up. */\ncode, pre, kbd, samp { font-size: inherit; }</style>`;export function wrapHtmlForRenderTag(t){return H+t}export const RenderTagElement=n(({element:n,store:D})=>{var H;const P=o.useRef(null),W=o.useRef(null),[L,q]=o.useState(!1),J=o.useRef(n.height),N=n.isSelected,V=b(N),{textVerticalResizeEnabled:$}=p,_=p.autoDeleteEmptyText,Q=b(n.fontFamily),U=o.useMemo(()=>X(n.text,{fontSize:n.fontSize,fontFamily:n.fontFamily}),[n.text,n.fontSize,n.fontFamily]),G=o.useMemo(()=>[...new Set([n.fontFamily,...C(U)])].filter(Boolean),[n.fontFamily,U]),[K]=w(D,G,n.fontStyle,n.fontWeight,n.text||n.placeholder),Z=n._editModeEnabled;j(P);const tt=K?n.fontFamily:Q&&Q!==n.fontFamily?Q:"Arial",et=k(n).fill,rt=S(n.fill),ot=S(n.stroke)&&!!n.strokeWidth,nt=!!n.strokeWidth&&(ot||rt),it="ellipsis"===p.textOverflow&&!n.curveEnabled&&!!n.height&&!nt,at=v(n,{fontFamily:tt,color:et,forEditor:!it}),st=n.width||1,lt=n.curveEnabled,ht=function(t,e,r,n){return o.useMemo(()=>{if(n){return null}try{return u({html:wrapHtmlForRenderTag(t),width:Math.max(1,e),accuracy:"performance"})}catch(r){return console.error("render-tag layout failed:",r),null}},[t,e,r,n])}(at,st,K,lt),ct=function(t,e,r){return o.useMemo(()=>{if(!e.curveEnabled){return null}const r=e.width||1,o=z(e),n=E(r,o,e.curvePower,e.fontSize);try{return g({html:wrapHtmlForRenderTag(t),path:n,align:"center",textBaseline:"middle"})}catch(i){return console.error("render-tag/path layoutTextOnPath failed:",i),null}},[r,e.curveEnabled,e.curvePower,e.fontSize,e.width,e.height,t])}(at,n,K),dt=y({fontLoaded:K,fontFamily:n.fontFamily,fontSize:n.fontSize,lineHeight:n.lineHeight}),ut=lt?0:Math.max(null!==(H=null==ht?void 0:ht.height)&&void 0!==H?H:0,n.fontSize*dt),ft=ct?ct.bounds:null,gt=o.useMemo(()=>ht?ht.lines.map(t=>({left:t.bounds.x,right:t.bounds.x+t.bounds.width,top:t.bounds.y,bottom:t.bounds.y+t.bounds.height})):[],[ht]),mt=o.useRef([]),pt=o.useRef(!0),[,xt]=o.useReducer(t=>t+1,0);o.useEffect(()=>{const t=mt.current;t.length>0&&(mt.current=[],t.forEach(t=>t()))});const yt=o.useCallback((t,e,r,o)=>{const i=R(`text ${n.id}`),a=()=>{D.history.ignore(t,e,r).then(()=>{pt.current?(mt.current.push(i),xt()):i()})};o?queueMicrotask(a):a()},[n.id,D]);o.useEffect(()=>{if(!K){return}if(!ht){return}if(!n.height){return void yt(()=>{c(n)&&(n.height||n.set({height:ut}))},void 0,void 0,!0)}if(D.isPlaying){return}const{textOverflow:t}=p,e=n.height!==ut&&(!$||n.height<ut),r=()=>yt(()=>{c(n)&&n.set({height:ut})},!1,!0);if("change-font-size"!==t||L||Z||n.curveEnabled){"resize"===t&&e&&!L&&r()}else{const t=A(n,{fontFamily:tt,color:et,forEditor:!0},t=>{try{return u({html:wrapHtmlForRenderTag(t),width:st,accuracy:"performance"}).height}catch(H){return O(t).height}});t.fontSize!==n.fontSize?yt(()=>{if(!c(n)){return}const e={fontSize:t.fontSize};void 0!==t.text&&t.text!==n.text&&(e.text=t.text),n.set(e)},!1,!0):e&&r()}}),o.useEffect(()=>()=>{pt.current=!1;const t=mt.current;t.length>0&&(mt.current=[],t.forEach(t=>t()))},[]),o.useLayoutEffect(()=>{if(!K||!n.curveEnabled||L){return}if(!ft||!ft.width){return}const t=t=>t&&$?Math.max(t,ft.height):ft.height;Math.abs(ft.width-n.width)<1&&Math.abs(t(n.height)-n.height)<1||yt(()=>{if(!c(n)){return}const e=ft.width-n.width,r=t(n.height),o=r-n.height;if(Math.abs(e)<1&&Math.abs(o)<1){return}const i=n.a.rotation*Math.PI/180,a=-e/2*Math.cos(i),s=-e/2*Math.sin(i);n.set({width:ft.width,height:r,x:n.a.x+a,y:n.a.y+s})},!1,!0,!0)},[K,n.curveEnabled,ft,L,$,yt]),o.useEffect(()=>{V&&!N&&_&&""===F(n.text)&&n.removable&&!n.placeholder&&D.deleteElements([n.id])},[_,n.placeholder,n.removable,n.text,N,V]),o.useEffect(()=>h.autorun(()=>{const t=P.current;t&&x(t,n)}),[ht,ct,n.a.width,n.a.height,n.shadowColor,n.shadowOffsetX,n.shadowOffsetY,n.shadowOpacity]);let wt=0;lt||"middle"!==n.verticalAlign?lt||"bottom"!==n.verticalAlign||(wt=n.height-ut):wt=(n.height-ut)/2;const bt=n.backgroundPadding*(n.fontSize*dt*.5),vt=n.backgroundCornerRadius*(n.fontSize*dt*.5),Et=o.useMemo(()=>!n.backgroundEnabled||n.curveEnabled||n.legacyBackground||0===gt.length?"":M({rects:gt,padding:bt,cornerRadius:vt}),[n.backgroundEnabled,n.curveEnabled,n.legacyBackground,gt,bt,vt]),zt=T(),kt=o.useRef(null),St=o.useRef(null),Ot=o.useRef(null),Mt=o.useRef(0),jt=o.useRef(0),Rt=Z&&n.strokeWidth>0&&!n.curveEnabled,Ft=n.width>0?n.a.width/n.width:1;return r(e,{children:[n.curveEnabled||n.legacyBackground?t(s,{x:n.a.x,y:n.a.y,offsetX:bt/Ft,offsetY:bt/Ft,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled,opacity:n.backgroundOpacity*n.a.opacity,fill:n.backgroundColor,width:n.width+2*bt,height:n.height+2*bt,cornerRadius:vt}):t(a,{name:"rendertag-background",x:n.a.x,y:n.a.y,offsetY:-wt/Ft,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled&&Et.length>0,opacity:n.backgroundOpacity*n.a.opacity,fill:n.backgroundColor,data:Et}),t(l,{ref:P,name:"rendertag-text",x:n.a.x,y:n.a.y,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,offsetY:Ft>0?-wt/Ft:0,width:n.width,height:Math.max(n.height,ut),listening:!1,visible:(!Z||Rt)&&!!(lt?ct:ht),opacity:n.a.opacity,shadowEnabled:n.shadowEnabled,shadowBlur:n.shadowBlur,shadowOffsetX:n.shadowOffsetX,shadowOffsetY:n.shadowOffsetY,shadowColor:n.shadowColor,shadowOpacity:n.shadowOpacity,hideInExport:!n.showInExport,sceneFunc:(t,e)=>{const r=t._context;if(r){try{if(lt){if(!ct||!ft){return}const t=(n.width-ft.width)/2-ft.x;r.save(),r.translate(t,-ft.y),m({layout:ct,ctx:r}),r.restore()}else{if(!ht){return}f({layout:ht,width:st,ctx:r,pixelRatio:1})}}catch(o){console.error("render-tag draw failed:",o)}}}}),t(s,{ref:W,name:"element",x:n.a.x,y:n.a.y,listening:n.selectable,rotation:n.a.rotation,width:n.a.width,height:n.a.height,visible:!Z,draggable:zt?n.draggable&&N:n.draggable,preventDefault:!zt||N,opacity:0,hideInExport:!0,id:n.id,onDragMove:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDblClick:t=>{n.contentEditable&&(St.current={x:t.evt.clientX,y:t.evt.clientY},n.toggleEditMode(!0))},onDblTap:t=>{var e;if(n.contentEditable){const r=null===(e=t.evt.changedTouches)||void 0===e?void 0:e[0];St.current=r?{x:r.clientX,y:r.clientY}:null,n.toggleEditMode(!0)}},onTransformStart:t=>{var e,r;q(!0),J.current=n.height;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer");Ot.current=null!==(r=null==o?void 0:o.getActiveAnchor())&&void 0!==r?r:null,Mt.current=n.a.rotation,jt.current=n.height},onTransform:t=>{var e;const r=t.target,o=(null===(e=r.getStage())||void 0===e?void 0:e.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,s=r.scaleX();if(i){const t=r.scaleX(),e=r.width()*t,o=n.fontSize;let i=e;e<o&&(i=o,kt.current&&r.position(kt.current)),r.width(i),r.scaleX(1),r.scaleY(1);let a=0;if(n.curveEnabled){a=z(Object.assign(Object.assign({},n.toJSON()),{width:i}))}else{const t=v(Object.assign(Object.assign({},n.toJSON()),{width:i}),{fontFamily:tt,color:et,forEditor:!0});try{a=u({html:wrapHtmlForRenderTag(t),width:i,accuracy:"performance"}).height}catch(l){a=O(t).height}}let s=p.textVerticalResizeEnabled?Math.max(a,J.current):a;"ellipsis"===p.textOverflow&&(s=J.current),r.height(s),n.set({width:r.width(),height:s,x:r.x(),y:r.y()})}else if(a){const t="resize"===p.textOverflow?lt?(null==ft?void 0:ft.height)||n.fontSize:ut:dt*n.fontSize,e=r.height()*r.scaleY();if(e<t){if(r.height(t),kt.current){if("top-center"===Ot.current){const e=Mt.current*Math.PI/180,o=jt.current-t;r.x(kt.current.x-o*Math.sin(e)),r.y(kt.current.y+o*Math.cos(e))}else{r.position(kt.current)}}}else{r.height(e)}r.scaleY(1),r.scaleX(1),jt.current=Math.max(t,e),n.set({x:r.x(),y:r.y(),height:r.height(),rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),n.set({fontSize:n.fontSize*s,letterSpacing:n.letterSpacing,width:r.width()*s,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*s,text:B(n.text,s)})}kt.current=t.target.position()},onTransformEnd:t=>{q(!1);const e=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),n.set({fontSize:n.fontSize*e,width:t.target.width()*e,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:n.shadowBlur*e,shadowOffsetX:n.shadowOffsetX*e,shadowOffsetY:n.shadowOffsetY*e,strokeWidth:n.strokeWidth*e,text:B(n.text,e)})}}),Z&&t(i,{x:n.a.x,y:n.a.y,rotation:n.a.rotation,offsetY:-wt,children:t(d,{divProps:{style:{zIndex:20}},children:t(I,{element:n,onChange:t=>{const e=Y({oldText:F(n.text),newText:F(t),element:n});n.set({text:t,fontSize:e})},onBlur:()=>{c(n)&&n.toggleEditMode(!1)},clickCoords:St.current})})})]})});
+import{jsx as t,Fragment as e,jsxs as r}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{Group as i,Path as a,Rect as s,Shape as l}from"react-konva";import*as h from"mobx";import{isAlive as c}from"mobx-state-tree";import{Html as d}from"react-konva-utils";import{layout as u,drawLayout as f}from"render-tag";import{layoutTextOnPath as g,drawTextOnPathLayout as m}from"render-tag/path";import{flags as p}from"../utils/flags.js";import{applyFilter as x}from"./apply-filters.js";import{getLineHeight as y,useFontFamiliesLoader as w,usePrevious as b}from"./text-element.js";import{getHtml as v,getCurvePath as E,getCurveTextHeight as z}from"../utils/text-html.js";import{useColor as k}from"./use-color.js";import{isGradient as S}from"../utils/gradient.js";import{detectSize as O}from"../utils/html2canvas.js";import{generateBackgroundShapeFromRects as M}from"../utils/background-shape.js";import{useFadeIn as j}from"./use-fadein.js";import{incrementLoader as R}from"../utils/loader.js";import{removeTags as F}from"../utils/text.js";import{isTouchDevice as T}from"../utils/screen.js";import{getLimitedFontSize as Y}from"./text-element/max-font-size.js";import{normalizeRichTextHtml as X,extractFontFamiliesFromHtml as C,scaleRichTextFontSizesInHtml as B}from"../utils/rich-text-html.js";import{RichEditor as I}from"./rich-editor.js";import{findFitFontSize as H}from"./text-element/fit-font-size.js";import{resetStyleContent as A}from"../utils/reset-style.js";const D=`<style>${A}\n/* render-tag draws list markers natively from the <ol>/<ul> tag + tree position\n   (it ignores the polotno reset's ::before + counter() markers, which only work\n   in real DOM — the Quill editor and the foreignObject rasterizer). The shared\n   reset sets list-style:none for those ::before markers, which would suppress\n   render-tag's native ones; restore the canonical marker types here so render-tag\n   paints them. element.text is canonicalized to <ul>/<ol> upstream\n   (normalizeRichTextHtml), so the tag alone selects bullet vs. number. */\nol { list-style-type: decimal; }\nul { list-style-type: disc; }\n/* Chrome's <code>/<pre> font-size UA quirk isn't reproducible on canvas — let\n   them inherit so DOM and canvas line up. */\ncode, pre, kbd, samp { font-size: inherit; }</style>`;export function wrapHtmlForRenderTag(t){return D+t}export const RenderTagElement=n(({element:n,store:A})=>{var D;const P=o.useRef(null),W=o.useRef(null),[L,q]=o.useState(!1),J=o.useRef(n.height),N=n.isSelected,V=b(N),{textVerticalResizeEnabled:$}=p,_=p.autoDeleteEmptyText,Q=b(n.fontFamily),U=o.useMemo(()=>X(n.text,{fontSize:n.fontSize,fontFamily:n.fontFamily}),[n.text,n.fontSize,n.fontFamily]),G=o.useMemo(()=>[...new Set([n.fontFamily,...C(U)])].filter(Boolean),[n.fontFamily,U]),[K]=w(A,G,n.fontStyle,n.fontWeight,n.text||n.placeholder),Z=n._editModeEnabled;j(P);const tt=K?n.fontFamily:Q&&Q!==n.fontFamily?Q:"Arial",et=k(n).fill,rt=S(n.fill),ot=S(n.stroke)&&!!n.strokeWidth,nt=!!n.strokeWidth&&(ot||rt),it="ellipsis"===p.textOverflow&&!n.curveEnabled&&!!n.height&&!nt,at=v(n,{fontFamily:tt,color:et,forEditor:!it}),st=n.width||1,lt=n.curveEnabled,ht=function(t,e,r,n){return o.useMemo(()=>{if(n){return null}try{return console.log(wrapHtmlForRenderTag(t)),u({html:wrapHtmlForRenderTag(t),width:Math.max(1,e),accuracy:"performance"})}catch(r){return console.error("render-tag layout failed:",r),null}},[t,e,r,n])}(at,st,K,lt),ct=function(t,e,r){return o.useMemo(()=>{if(!e.curveEnabled){return null}const r=e.width||1,o=z(e),n=E(r,o,e.curvePower,e.fontSize);try{return g({html:wrapHtmlForRenderTag(t),path:n,align:"center",textBaseline:"middle"})}catch(i){return console.error("render-tag/path layoutTextOnPath failed:",i),null}},[r,e.curveEnabled,e.curvePower,e.fontSize,e.width,e.height,t])}(at,n,K),dt=y({fontLoaded:K,fontFamily:n.fontFamily,fontSize:n.fontSize,lineHeight:n.lineHeight}),ut=lt?0:Math.max(null!==(D=null==ht?void 0:ht.height)&&void 0!==D?D:0,n.fontSize*dt),ft=ct?ct.bounds:null,gt=o.useMemo(()=>ht?ht.lines.map(t=>({left:t.bounds.x,right:t.bounds.x+t.bounds.width,top:t.bounds.y,bottom:t.bounds.y+t.bounds.height})):[],[ht]),mt=o.useRef([]),pt=o.useRef(!0),[,xt]=o.useReducer(t=>t+1,0);o.useEffect(()=>{const t=mt.current;t.length>0&&(mt.current=[],t.forEach(t=>t()))});const yt=o.useCallback((t,e,r,o)=>{const i=R(`text ${n.id}`),a=()=>{A.history.ignore(t,e,r).then(()=>{pt.current?(mt.current.push(i),xt()):i()})};o?queueMicrotask(a):a()},[n.id,A]);o.useEffect(()=>{if(!K){return}if(!ht){return}if(!n.height){return void yt(()=>{c(n)&&(n.height||n.set({height:ut}))},void 0,void 0,!0)}if(A.isPlaying){return}const{textOverflow:t}=p,e=n.height!==ut&&(!$||n.height<ut),r=()=>yt(()=>{c(n)&&n.set({height:ut})},!1,!0);if("change-font-size"!==t||L||Z||n.curveEnabled){"resize"===t&&e&&!L&&r()}else{const t=H(n,{fontFamily:tt,color:et,forEditor:!0},t=>{try{return u({html:wrapHtmlForRenderTag(t),width:st,accuracy:"performance"}).height}catch(D){return O(t).height}});t.fontSize!==n.fontSize?yt(()=>{if(!c(n)){return}const e={fontSize:t.fontSize};void 0!==t.text&&t.text!==n.text&&(e.text=t.text),n.set(e)},!1,!0):e&&r()}}),o.useEffect(()=>()=>{pt.current=!1;const t=mt.current;t.length>0&&(mt.current=[],t.forEach(t=>t()))},[]),o.useLayoutEffect(()=>{if(!K||!n.curveEnabled||L){return}if(!ft||!ft.width){return}const t=t=>t&&$?Math.max(t,ft.height):ft.height;Math.abs(ft.width-n.width)<1&&Math.abs(t(n.height)-n.height)<1||yt(()=>{if(!c(n)){return}const e=ft.width-n.width,r=t(n.height),o=r-n.height;if(Math.abs(e)<1&&Math.abs(o)<1){return}const i=n.a.rotation*Math.PI/180,a=-e/2*Math.cos(i),s=-e/2*Math.sin(i);n.set({width:ft.width,height:r,x:n.a.x+a,y:n.a.y+s})},!1,!0,!0)},[K,n.curveEnabled,ft,L,$,yt]),o.useEffect(()=>{V&&!N&&_&&""===F(n.text)&&n.removable&&!n.placeholder&&A.deleteElements([n.id])},[_,n.placeholder,n.removable,n.text,N,V]),o.useEffect(()=>h.autorun(()=>{const t=P.current;t&&x(t,n)}),[ht,ct,n.a.width,n.a.height,n.shadowColor,n.shadowOffsetX,n.shadowOffsetY,n.shadowOpacity]);let wt=0;lt||"middle"!==n.verticalAlign?lt||"bottom"!==n.verticalAlign||(wt=n.height-ut):wt=(n.height-ut)/2;const bt=n.backgroundPadding*(n.fontSize*dt*.5),vt=n.backgroundCornerRadius*(n.fontSize*dt*.5),Et=o.useMemo(()=>!n.backgroundEnabled||n.curveEnabled||n.legacyBackground||0===gt.length?"":M({rects:gt,padding:bt,cornerRadius:vt}),[n.backgroundEnabled,n.curveEnabled,n.legacyBackground,gt,bt,vt]),zt=T(),kt=o.useRef(null),St=o.useRef(null),Ot=o.useRef(null),Mt=o.useRef(0),jt=o.useRef(0),Rt=Z&&n.strokeWidth>0&&!n.curveEnabled,Ft=n.width>0?n.a.width/n.width:1;return r(e,{children:[n.curveEnabled||n.legacyBackground?t(s,{x:n.a.x,y:n.a.y,offsetX:bt/Ft,offsetY:bt/Ft,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled,opacity:n.backgroundOpacity*n.a.opacity,fill:n.backgroundColor,width:n.width+2*bt,height:n.height+2*bt,cornerRadius:vt}):t(a,{name:"rendertag-background",x:n.a.x,y:n.a.y,offsetY:-wt/Ft,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,hideInExport:!n.showInExport,listening:!1,visible:n.backgroundEnabled&&Et.length>0,opacity:n.backgroundOpacity*n.a.opacity,fill:n.backgroundColor,data:Et}),t(l,{ref:P,name:"rendertag-text",x:n.a.x,y:n.a.y,rotation:n.a.rotation,scaleX:Ft,scaleY:Ft,offsetY:Ft>0?-wt/Ft:0,width:n.width,height:Math.max(n.height,ut),listening:!1,visible:(!Z||Rt)&&!!(lt?ct:ht),opacity:n.a.opacity,shadowEnabled:n.shadowEnabled,shadowBlur:n.shadowBlur,shadowOffsetX:n.shadowOffsetX,shadowOffsetY:n.shadowOffsetY,shadowColor:n.shadowColor,shadowOpacity:n.shadowOpacity,hideInExport:!n.showInExport,sceneFunc:(t,e)=>{const r=t._context;if(r){try{if(lt){if(!ct||!ft){return}const t=(n.width-ft.width)/2-ft.x;r.save(),r.translate(t,-ft.y),m({layout:ct,ctx:r}),r.restore()}else{if(!ht){return}f({layout:ht,width:st,ctx:r,pixelRatio:1})}}catch(o){console.error("render-tag draw failed:",o)}}}}),t(s,{ref:W,name:"element",x:n.a.x,y:n.a.y,listening:n.selectable,rotation:n.a.rotation,width:n.a.width,height:n.a.height,visible:!Z,draggable:zt?n.draggable&&N:n.draggable,preventDefault:!zt||N,opacity:0,hideInExport:!0,id:n.id,onDragMove:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDragEnd:t=>{n.set({x:t.target.x(),y:t.target.y()})},onDblClick:t=>{n.contentEditable&&(St.current={x:t.evt.clientX,y:t.evt.clientY},n.toggleEditMode(!0))},onDblTap:t=>{var e;if(n.contentEditable){const r=null===(e=t.evt.changedTouches)||void 0===e?void 0:e[0];St.current=r?{x:r.clientX,y:r.clientY}:null,n.toggleEditMode(!0)}},onTransformStart:t=>{var e,r;q(!0),J.current=n.height;const o=null===(e=t.target.getStage())||void 0===e?void 0:e.findOne("Transformer");Ot.current=null!==(r=null==o?void 0:o.getActiveAnchor())&&void 0!==r?r:null,Mt.current=n.a.rotation,jt.current=n.height},onTransform:t=>{var e;const r=t.target,o=(null===(e=r.getStage())||void 0===e?void 0:e.findOne("Transformer")).getActiveAnchor(),i="middle-left"===o||"middle-right"===o,a="top-center"===o||"bottom-center"===o,s=r.scaleX();if(i){const t=r.scaleX(),e=r.width()*t,o=n.fontSize;let i=e;e<o&&(i=o,kt.current&&r.position(kt.current)),r.width(i),r.scaleX(1),r.scaleY(1);let a=0;if(n.curveEnabled){a=z(Object.assign(Object.assign({},n.toJSON()),{width:i}))}else{const t=v(Object.assign(Object.assign({},n.toJSON()),{width:i}),{fontFamily:tt,color:et,forEditor:!0});try{a=u({html:wrapHtmlForRenderTag(t),width:i,accuracy:"performance"}).height}catch(l){a=O(t).height}}let s=p.textVerticalResizeEnabled?Math.max(a,J.current):a;"ellipsis"===p.textOverflow&&(s=J.current),r.height(s),n.set({width:r.width(),height:s,x:r.x(),y:r.y()})}else if(a){const t="resize"===p.textOverflow?lt?(null==ft?void 0:ft.height)||n.fontSize:ut:dt*n.fontSize,e=r.height()*r.scaleY();if(e<t){if(r.height(t),kt.current){if("top-center"===Ot.current){const e=Mt.current*Math.PI/180,o=jt.current-t;r.x(kt.current.x-o*Math.sin(e)),r.y(kt.current.y+o*Math.cos(e))}else{r.position(kt.current)}}}else{r.height(e)}r.scaleY(1),r.scaleX(1),jt.current=Math.max(t,e),n.set({x:r.x(),y:r.y(),height:r.height(),rotation:r.rotation()})}else{r.scaleX(1),r.scaleY(1),n.set({fontSize:n.fontSize*s,letterSpacing:n.letterSpacing,width:r.width()*s,x:r.x(),y:r.y(),rotation:r.rotation(),height:r.height()*s,text:B(n.text,s)})}kt.current=t.target.position()},onTransformEnd:t=>{q(!1);const e=t.target.scaleX();t.target.scaleX(1),t.target.scaleY(1),n.set({fontSize:n.fontSize*e,width:t.target.width()*e,x:t.target.x(),y:t.target.y(),rotation:t.target.rotation(),shadowBlur:n.shadowBlur*e,shadowOffsetX:n.shadowOffsetX*e,shadowOffsetY:n.shadowOffsetY*e,strokeWidth:n.strokeWidth*e,text:B(n.text,e)})}}),Z&&t(i,{x:n.a.x,y:n.a.y,rotation:n.a.rotation,offsetY:-wt,children:t(d,{divProps:{style:{zIndex:20}},children:t(I,{element:n,onChange:t=>{const e=Y({oldText:F(n.text),newText:F(t),element:n});n.set({text:t,fontSize:e})},onBlur:()=>{c(n)&&n.toggleEditMode(!1)},clickCoords:St.current})})})]})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "4.0.0-beta.41",
+  "version": "4.0.0-beta.42",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [
@@ -114,7 +114,7 @@
     "react-konva-utils": "^2.0.0",
     "react-sortablejs": "6.1.4",
     "react-window": "^1.8.11",
-    "render-tag": "^0.1.10",
+    "render-tag": "^0.1.12",
     "sortablejs": "^1.15.7",
     "svg-round-corners": "^0.4.3",
     "swr": "^2.4.1",
@@ -134,9 +134,9 @@
   },
   "main": "./polotno-app.js",
   "peerDependencies": {
-    "@blueprintjs/core": "6.12.1",
-    "@blueprintjs/icons": "^6.9.1",
-    "@blueprintjs/select": "6.1.10",
+    "@blueprintjs/core": "^6.x",
+    "@blueprintjs/icons": "^6.x",
+    "@blueprintjs/select": "^6.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -167,11 +167,11 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.29.7",
+    "@babel/parser": "^7.29.7",
+    "@babel/traverse": "^7.29.7",
     "@blueprintjs/core": "6.12.1",
     "@blueprintjs/icons": "^6.9.1",
     "@blueprintjs/select": "6.1.10",
-    "@babel/parser": "^7.29.7",
-    "@babel/traverse": "^7.29.7",
     "@canvas/image": "^2.0.0",
     "@polotno/video-export": "^0.0.11",
     "@size-limit/preset-big-lib": "^12.1.0",