polotno 4.0.0-beta.40 → 4.0.0-beta.42

package/blueprint.polotno.css

@@ -232,7 +232,7 @@
   }
 }
 [data-bp-color-scheme=dark],
-.bp6-dark .bp6-scope{
+.bp6-dark{
   --bp-surface-border-color-default:#ffffff33;
   --bp-surface-border-color-strong:#ffffff4d;
   --bp-surface-shadow-0:inset 0px 0px 0px 1px rgba(255, 255, 255, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
@@ -252,7 +252,7 @@
 
 @supports (color: oklch(from var(--any-color) l c h)){
   [data-bp-color-scheme=dark],
-  .bp6-dark .bp6-scope{
+  .bp6-dark{
     --bp-surface-border-color-default:oklch(from var(--bp-palette-white) l c h / 0.2);
     --bp-surface-border-color-strong:oklch(from var(--bp-palette-white) l c h / 0.3);
     --bp-surface-color-code:oklch(from var(--bp-palette-black) l c h / 0.3);
@@ -3543,7 +3543,7 @@ a > .bp6-running-text code{
 .bp6-rtl{
   text-align:right;
 }
-.bp6-dark .bp6-scope{
+.bp6-dark{
   color:#f6f7f9;
 }
 .bp6-dark .bp6-text-muted{
@@ -3624,7 +3624,7 @@ a > .bp6-dark .bp6-running-text code{
   outline:none !important;
 }
 
-.bp6-dark .bp6-scope{
+.bp6-dark{
   color-scheme:dark;
 }
 .bp6-alert{

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/icons/registry.js

@@ -1 +1 @@
-var t=this&&this.__rest||function(t,o){var e={};for(var i in t){Object.prototype.hasOwnProperty.call(t,i)&&o.indexOf(i)<0&&(e[i]=t[i])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(t);n<i.length;n++){o.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(t,i[n])&&(e[i[n]]=t[i[n]])}}return e};import{jsx as o}from"react/jsx-runtime";import{observable as e,action as i}from"mobx";import{observer as n}from"mobx-react-lite";import{AlignCenter as a,AlignCenterHorizontal as r,AlignCenterVertical as l,AlignEndHorizontal as s,AlignEndVertical as c,AlignHorizontalSpaceAround as p,AlignJustify as d,AlignLeft as m,AlignRight as g,AlignStartHorizontal as u,AlignStartVertical as b,AlignVerticalJustifyCenter as f,AlignVerticalJustifyEnd as x,AlignVerticalJustifyStart as y,AlignVerticalSpaceAround as h,ArrowDown as v,ArrowDownLeft as w,ArrowDownRight as P,ArrowLeft as z,ArrowLeftRight as O,ArrowRight as j,ArrowUp as k,ArrowUpDown as L,ArrowUpLeft as R,ArrowUpRight as I,Ban as T,Bold as B,CaseSensitive as C,Check as D,ChevronDown as H,ChevronLeft as M,ChevronRight as F,ChevronsDown as S,ChevronsUp as U,ChevronUp as V,CloudUpload as $,Contrast as _,Copy as E,CreditCard as J,Crop as W,Edit as Z,Eye as q,EyeOff as A,Facebook as G,Files as K,FileText as N,GripVertical as Q,HelpCircle as X,Highlighter as Y,Image as tt,Instagram as ot,Italic as et,Layers as it,LayoutTemplate as nt,Linkedin as at,List as rt,ListOrdered as lt,Lock as st,MousePointer as ct,MoreHorizontal as pt,PaintBucket as dt,Palette as mt,Pause as gt,Pencil as ut,Pilcrow as bt,Pipette as ft,Play as xt,Plus as yt,Redo2 as ht,Scaling as vt,Scissors as wt,Search as Pt,Settings as zt,Shapes as Ot,Sparkles as jt,Strikethrough as kt,TextCursorInput as Lt,Timer as Rt,Trash2 as It,Twitter as Tt,Type as Bt,Underline as Ct,Undo2 as Dt,Unlock as Ht,Upload as Mt,Video as Ft,Volume2 as St,VolumeX as Ut,WandSparkles as Vt,WrapText as $t,X as _t,Youtube as Et,ZoomIn as Jt,ZoomOut as Wt}from"lucide-react";import{MoveIcon as Zt,FadeIcon as qt,ZoomIcon as At,RotateIcon as Gt,BlinkIcon as Kt,BounceIcon as Nt}from"./animation-icons.js";const Qt={"action.duplicate":E,"action.remove":It,"action.lock":st,"action.unlock":Ht,"action.undo":Dt,"action.redo":ht,"action.add":yt,"action.more":pt,"action.settings":zt,"action.search":Pt,"action.close":_t,"action.confirm":D,"action.none":T,"action.visible":q,"action.hidden":A,"action.dragHandle":Q,"action.eyeDropper":ft,"action.unmuted":St,"action.muted":Ut,"action.help":X,"ui.chevronUp":V,"ui.chevronDown":H,"ui.chevronLeft":M,"ui.chevronRight":F,"layering.menu":it,"layering.up":V,"layering.down":H,"layering.top":U,"layering.bottom":S,"text.bold":B,"text.italic":et,"text.underline":Ct,"text.strikethrough":kt,"text.alignLeft":m,"text.alignCenter":a,"text.alignRight":g,"text.alignJustify":d,"text.valignTop":y,"text.valignMiddle":f,"text.valignBottom":x,"text.uppercase":C,"text.spacing":$t,"text.bulletList":rt,"text.numberedList":lt,"text.paragraph":bt,"text.richText":Lt,"text.uploadFont":Mt,"position.alignLeft":b,"position.alignCenter":l,"position.alignRight":c,"position.alignTop":u,"position.alignMiddle":r,"position.alignBottom":s,"position.distributeVertical":h,"position.distributeHorizontal":p,"sidePanel.templates":nt,"sidePanel.text":Bt,"sidePanel.photos":tt,"sidePanel.elements":Ot,"sidePanel.upload":$,"sidePanel.background":dt,"sidePanel.pages":K,"sidePanel.layers":it,"sidePanel.resize":vt,"sidePanel.draw":ut,"sidePanel.videos":Ft,"toolbar.opacity":_,"toolbar.filters":Vt,"toolbar.aiWrite":jt,"toolbar.duration":Rt,"toolbar.trim":wt,"toolbar.flipHorizontal":O,"toolbar.flipVertical":L,"toolbar.zoomIn":Jt,"toolbar.zoomOut":Wt,"toolbar.crop":W,"download.export":Mt,"download.image":tt,"download.pdf":N,"download.video":Ft,"draw.select":ct,"draw.brush":Z,"draw.highlighter":Y,"background.colorPicker":mt,"pagesTimeline.play":xt,"pagesTimeline.pause":gt,"size.instagram":ot,"size.facebook":G,"size.youtube":Et,"size.linkedin":at,"size.twitter":Tt,"size.video":Ft,"size.print":N,"size.businessCard":J,"animation.directionRight":j,"animation.directionLeft":z,"animation.directionUp":k,"animation.directionDown":v,"animation.directionBottomRight":P,"animation.directionBottomLeft":w,"animation.directionTopRight":I,"animation.directionTopLeft":R,"animation.typeMove":Zt,"animation.typeFade":qt,"animation.typeZoom":At,"animation.typeRotate":Gt,"animation.typeBlink":Kt,"animation.typeBounce":Nt},Xt=e.map();export const setIcons=i(t=>{for(const o of Object.keys(t)){const e=t[o];null!=e&&("function"==typeof e||"object"==typeof e?Xt.set(o,e):console.warn(`polotno: setIcons('${o}') expects a React component, received ${typeof e}. Ignored.`))}});export const resetIcons=i(()=>Xt.clear());export const PolotnoIcon=n(e=>{var i,{name:n}=e,a=t(e,["name"]);const r=null!==(i=Xt.get(n))&&void 0!==i?i:Qt[n];return o(r,Object.assign({},a))});
+var t=this&&this.__rest||function(t,o){var e={};for(var i in t){Object.prototype.hasOwnProperty.call(t,i)&&o.indexOf(i)<0&&(e[i]=t[i])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(t);n<i.length;n++){o.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(t,i[n])&&(e[i[n]]=t[i[n]])}}return e};import{jsx as o}from"react/jsx-runtime";import{observable as e,action as i}from"mobx";import{observer as n}from"mobx-react-lite";import{AlignCenter as a,AlignCenterHorizontal as r,AlignCenterVertical as l,AlignEndHorizontal as c,AlignEndVertical as s,AlignHorizontalSpaceAround as p,AlignJustify as d,AlignLeft as m,AlignRight as g,AlignStartHorizontal as u,AlignStartVertical as b,AlignVerticalJustifyCenter as f,AlignVerticalJustifyEnd as x,AlignVerticalJustifyStart as y,AlignVerticalSpaceAround as h,ArrowDown as v,ArrowDownLeft as w,ArrowDownRight as P,ArrowLeft as z,ArrowLeftRight as O,ArrowRight as j,ArrowUp as k,ArrowUpDown as L,ArrowUpLeft as R,ArrowUpRight as I,Ban as T,Bold as B,CaseSensitive as C,Check as D,ChevronDown as H,ChevronLeft as M,ChevronRight as F,ChevronsDown as S,ChevronsUp as U,ChevronUp as V,CloudUpload as $,Contrast as _,Copy as E,CreditCard as J,Crop as W,Edit as Z,Eye as q,EyeOff as A,Facebook as G,Files as K,FileText as N,GripVertical as Q,HelpCircle as X,Highlighter as Y,Image as tt,Instagram as ot,Italic as et,Layers as it,LayoutTemplate as nt,Linkedin as at,List as rt,ListOrdered as lt,Lock as ct,MousePointer as st,MoreHorizontal as pt,PaintBucket as dt,Palette as mt,Pause as gt,Pencil as ut,Pilcrow as bt,Pipette as ft,Play as xt,Plus as yt,Redo2 as ht,Scaling as vt,Scissors as wt,Search as Pt,Settings as zt,Shapes as Ot,Sparkles as jt,Strikethrough as kt,TextCursorInput as Lt,Timer as Rt,Trash2 as It,Twitter as Tt,Type as Bt,Underline as Ct,Undo2 as Dt,Unlock as Ht,Upload as Mt,Video as Ft,Volume2 as St,VolumeX as Ut,WandSparkles as Vt,WrapText as $t,X as _t,Youtube as Et,ZoomIn as Jt,ZoomOut as Wt}from"lucide-react";import{MoveIcon as Zt,FadeIcon as qt,ZoomIcon as At,RotateIcon as Gt,BlinkIcon as Kt,BounceIcon as Nt}from"./animation-icons.js";const Qt={"action.duplicate":E,"action.remove":It,"action.lock":ct,"action.unlock":Ht,"action.undo":Dt,"action.redo":ht,"action.add":yt,"action.more":pt,"action.settings":zt,"action.search":Pt,"action.close":_t,"action.confirm":D,"action.none":T,"action.visible":q,"action.hidden":A,"action.dragHandle":Q,"action.eyeDropper":ft,"action.unmuted":St,"action.muted":Ut,"action.help":X,"ui.chevronUp":V,"ui.chevronDown":H,"ui.chevronLeft":M,"ui.chevronRight":F,"layering.menu":it,"layering.up":V,"layering.down":H,"layering.top":U,"layering.bottom":S,"text.bold":B,"text.italic":et,"text.underline":Ct,"text.strikethrough":kt,"text.alignLeft":m,"text.alignCenter":a,"text.alignRight":g,"text.alignJustify":d,"text.valignTop":y,"text.valignMiddle":f,"text.valignBottom":x,"text.uppercase":C,"text.spacing":$t,"text.bulletList":rt,"text.numberedList":lt,"text.paragraph":bt,"text.richText":Lt,"text.uploadFont":Mt,"position.alignLeft":b,"position.alignCenter":l,"position.alignRight":s,"position.alignTop":u,"position.alignMiddle":r,"position.alignBottom":c,"position.distributeVertical":h,"position.distributeHorizontal":p,"sidePanel.templates":nt,"sidePanel.text":Bt,"sidePanel.photos":tt,"sidePanel.elements":Ot,"sidePanel.upload":$,"sidePanel.background":dt,"sidePanel.pages":K,"sidePanel.layers":it,"sidePanel.resize":vt,"sidePanel.draw":ut,"sidePanel.videos":Ft,"toolbar.opacity":_,"toolbar.filters":Vt,"toolbar.aiWrite":jt,"toolbar.duration":Rt,"toolbar.trim":wt,"toolbar.flipHorizontal":O,"toolbar.flipVertical":L,"toolbar.zoomIn":Jt,"toolbar.zoomOut":Wt,"toolbar.crop":W,"download.export":Mt,"download.image":tt,"download.pdf":N,"download.video":Ft,"draw.select":st,"draw.brush":Z,"draw.highlighter":Y,"background.colorPicker":mt,"pagesTimeline.play":xt,"pagesTimeline.pause":gt,"size.instagram":ot,"size.facebook":G,"size.youtube":Et,"size.linkedin":at,"size.twitter":Tt,"size.video":Ft,"size.print":N,"size.businessCard":J,"animation.directionRight":j,"animation.directionLeft":z,"animation.directionUp":k,"animation.directionDown":v,"animation.directionBottomRight":P,"animation.directionBottomLeft":w,"animation.directionTopRight":I,"animation.directionTopLeft":R,"animation.typeMove":Zt,"animation.typeFade":qt,"animation.typeZoom":At,"animation.typeRotate":Gt,"animation.typeBlink":Kt,"animation.typeBounce":Nt},Xt=e.map();export const setIcons=i(t=>{for(const o of Object.keys(t)){const e=t[o];null!=e&&("function"==typeof e||"object"==typeof e?Xt.set(o,e):console.warn(`polotno: setIcons('${o}') expects a React component, received ${typeof e}. Ignored.`))}});export const resetIcons=i(()=>Xt.clear());export const PolotnoIcon=n(e=>{var i,{name:n}=e,a=t(e,["name"]);const r=null!==(i=Xt.get(n))&&void 0!==i?i:Qt[n];return o(r,Object.assign({"data-pn-icon":""},a))});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "4.0.0-beta.40",
+  "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",