polotno 2.37.0 → 2.38.0
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/html-element.js +1 -1
- package/canvas/page.d.ts +2 -1
- package/canvas/page.js +1 -1
- package/canvas/text-element.d.ts +1 -1
- package/canvas/text-element.js +1 -1
- package/canvas/tooltip.js +1 -1
- package/canvas/workspace-canvas.d.ts +2 -1
- package/canvas/workspace-canvas.js +1 -1
- package/model/store.d.ts +1 -1
- package/model/store.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +122 -124
- package/side-panel/effects-panel.js +1 -1
- package/toolbar/filters-picker.d.ts +6 -0
- package/toolbar/filters-picker.js +1 -1
- package/toolbar/sketch.js +1 -1
- package/utils/fonts.d.ts +3 -2
- package/utils/fonts.js +1 -1
- package/utils/text-html.d.ts +8 -0
- package/utils/text-html.js +1 -1
- package/utils/text.d.ts +9 -0
- package/utils/text.js +1 -1
- package/utils/to-html.js +1 -1
- package/utils/to-svg.js +1 -1
- package/utils/validate-key.js +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__rest||function(e,t){var a={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(n=Object.getOwnPropertySymbols(e);l<n.length;l++){t.indexOf(n[l])<0&&Object.prototype.propertyIsEnumerable.call(e,n[l])&&(a[n[l]]=e[n[l]])}}return a};import t from"react";import{Alignment as a,Button as n,NumericInput as l,Slider as r,Switch as o}from"@blueprintjs/core";import{observer as i}from"mobx-react-lite";import{INDEPENDENT_FILTERS as d}from"../model/shape-model.js";import s from"../toolbar/color-picker.js";import{t as c}from"../utils/l10n.js";import{Cross as u}from"@blueprintjs/icons";import{EffectCard as m}from"./effect-card.js";import{Effects as b}from"../utils/filters.js";const h=(e,t,a)=>Math.max(t,Math.min(a,e));export const NumberInput=a=>{var{value:n,onValueChange:r}=a,o=e(a,["value","onValueChange"]);const[i,d]=t.useState(n.toString());return t.useEffect(()=>{d(n.toString())},[n]),t.createElement(l,Object.assign({value:i,onValueChange:(e,t)=>{d(t),Number.isNaN(e)||r(e)}},o))};const p=({label:e,enabled:n,visible:i=!0,onEnabledChange:d,numberValue:s,onNumberValueChange:c,min:u,max:m})=>i?t.createElement(t.Fragment,null,t.createElement(o,{checked:n,label:e,onChange:e=>{d(e.target.checked)},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),n&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{paddingTop:"7px",paddingLeft:"10px",width:"calc(100% - 80px)"}},t.createElement(r,{value:s,onChange:e=>{c(e)},min:u,max:m,labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(l,{value:s,onValueChange:e=>{c(h(e,u,m))},buttonPosition:"none",style:{width:"50px",padding:"0 5px",marginLeft:"10px"},min:u,max:m}))):null;export const EffectsPanel=i(({store:e})=>{var i,g,E,v,f,x,y,C,w,k,V,I,T,j;const O=e.selectedElements,P=O[0],R=O.map(e=>e.id).join(","),M="effects"===e.openedSidePanel,S=()=>{const t=e.previousOpenedSidePanel;e.openSidePanel(t||"photos")};if(t.useEffect(()=>{M&&(P&&P.filters||S())},[M,R]),!P||!P.filters){return null}const N=(e=>"text"===e.type)(P),B=((e=>{e.type})(P),(e=>"image"===e.type)(P)),z=(e=>"svg"===e.type)(P),F=B||z,H=t=>{e.history.transaction(()=>{O.forEach(e=>{e.set(t)})})},G=(t,a)=>{e.history.transaction(()=>{O.forEach(e=>{let n=Number(a);return 0==a||a||(n=e.filters.has(t)?null:1),d.includes(t)||e.set({grayscaleEnabled:"grayscale"===t&&!!a,sepiaEnabled:"sepia"===t&&!!a}),e.setFilter(t,n)})})};return t.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"}},t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement("h3",{style:{margin:0,lineHeight:"30px"}},c("sidePanel.effects")),t.createElement(n,{minimal:!0,icon:t.createElement(u,null),onClick:()=>S()})),F&&t.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"}},t.createElement("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"}},t.createElement(m,{active:P.grayscaleEnabled,onClick:()=>{G("grayscale",!P.grayscaleEnabled)},title:c("toolbar.grayscale"),imageSrc:P.src,effect:b.grayscale}),t.createElement(m,{active:P.sepiaEnabled,onClick:()=>{G("sepia",!P.sepiaEnabled)},title:c("toolbar.sepia"),imageSrc:P.src,effect:b.sepia}),t.createElement(m,{active:P.filters.has("cold"),onClick:()=>{G("cold",P.filters.has("cold")?null:1)},title:c("toolbar.cold"),imageSrc:P.src,effect:b.cold}),t.createElement(m,{active:P.filters.has("natural"),onClick:()=>{G("natural",P.filters.has("natural")?null:1)},title:c("toolbar.natural"),imageSrc:P.src,effect:b.natural}),t.createElement(m,{active:P.filters.has("warm"),onClick:()=>{G("warm",P.filters.has("warm")?null:1)},title:c("toolbar.warm"),imageSrc:P.src,effect:b.warm}))),t.createElement(p,{label:c("toolbar.blur"),enabled:P.blurEnabled,visible:F||N,onEnabledChange:e=>{H({blurEnabled:e})},numberValue:P.blurRadius,onNumberValueChange:e=>{H({blurRadius:e})},min:0,max:100}),t.createElement(p,{label:c("toolbar.brightness"),visible:F,enabled:P.brightnessEnabled,onEnabledChange:e=>{H({brightnessEnabled:e})},numberValue:Math.round(100*P.brightness),onNumberValueChange:e=>{H({brightness:e/100})},min:-100,max:100}),t.createElement(p,{label:c("toolbar.temperature"),visible:F,enabled:P.filters.has("temperature"),onEnabledChange:e=>{G("temperature",e?0:null)},numberValue:Math.round(100*(null!==(g=null===(i=P.filters.get("temperature"))||void 0===i?void 0:i.intensity)&&void 0!==g?g:0)),onNumberValueChange:e=>{G("temperature",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.contrast"),visible:F,enabled:P.filters.has("contrast"),onEnabledChange:e=>{G("contrast",e?0:null)},numberValue:Math.round(100*(null!==(v=null===(E=P.filters.get("contrast"))||void 0===E?void 0:E.intensity)&&void 0!==v?v:0)),onNumberValueChange:e=>{G("contrast",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.shadows"),visible:F,enabled:P.filters.has("shadows"),onEnabledChange:e=>{G("shadows",e?0:null)},numberValue:Math.round(100*(null!==(x=null===(f=P.filters.get("shadows"))||void 0===f?void 0:f.intensity)&&void 0!==x?x:0)),onNumberValueChange:e=>{G("shadows",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.white"),visible:F,enabled:P.filters.has("white"),onEnabledChange:e=>{G("white",e?0:null)},numberValue:Math.round(100*(null!==(C=null===(y=P.filters.get("white"))||void 0===y?void 0:y.intensity)&&void 0!==C?C:0)),onNumberValueChange:e=>{G("white",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.black"),visible:F,enabled:P.filters.has("black"),onEnabledChange:e=>{G("black",e?0:null)},numberValue:Math.round(100*(null!==(k=null===(w=P.filters.get("black"))||void 0===w?void 0:w.intensity)&&void 0!==k?k:0)),onNumberValueChange:e=>{G("black",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.vibrance"),visible:F,enabled:P.filters.has("vibrance"),onEnabledChange:e=>{G("vibrance",e?0:null)},numberValue:Math.round(100*(null!==(I=null===(V=P.filters.get("vibrance"))||void 0===V?void 0:V.intensity)&&void 0!==I?I:0)),onNumberValueChange:e=>{G("vibrance",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.saturation"),visible:F,enabled:P.filters.has("saturation"),onEnabledChange:e=>{G("saturation",e?0:null)},numberValue:Math.round(100*(null!==(j=null===(T=P.filters.get("saturation"))||void 0===T?void 0:T.intensity)&&void 0!==j?j:0)),onNumberValueChange:e=>{G("saturation",e/100)},min:-100,max:100}),N&&t.createElement(o,{checked:!!P.curveEnabled,label:c("toolbar.curvedText")||"Curved text",onChange:e=>{H({curveEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&P.curveEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.curvePower")||"Curve"),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*P.curvePower),onValueChange:e=>{H({curvePower:h(e,-100,100)/100})},style:{width:"50px"},min:-100,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:Math.round(100*P.curvePower),onChange:e=>{H({curvePower:h(e,-100,100)/100})},min:-100,max:100,labelStepSize:50,labelRenderer:e=>0===e?"0":e.toString()}))),N&&t.createElement(o,{checked:!!P.strokeWidth,label:c("toolbar.textStroke"),onChange:e=>{H({strokeWidth:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&!!P.strokeWidth&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:P.stroke,size:30,gradientEnabled:!0,onChange:e=>{H({stroke:e})},store:e}),t.createElement(l,{defaultValue:P.strokeWidth,onValueChange:e=>{H({strokeWidth:h(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(P.fontSize/2)}))),N&&t.createElement(o,{checked:!!P.backgroundEnabled,label:c("toolbar.textBackground"),onChange:e=>{H({backgroundEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&!!P.backgroundEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundCornerRadius")),t.createElement("div",null,t.createElement(NumberInput,{value:100*P.backgroundCornerRadius,onValueChange:e=>{H({backgroundCornerRadius:h(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*P.backgroundCornerRadius,onChange:e=>{H({backgroundCornerRadius:h(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundPadding")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*P.backgroundPadding),onValueChange:e=>{H({backgroundPadding:h(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:Math.round(100*P.backgroundPadding),onChange:e=>{H({backgroundPadding:h(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*P.backgroundOpacity),onValueChange:e=>{H({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*P.backgroundOpacity,onChange:e=>{H({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:P.backgroundColor,size:30,onChange:e=>{H({backgroundColor:e})},store:e}))),F&&t.createElement(o,{checked:!!P.borderSize,label:c("toolbar.border"),onChange:e=>{H({borderSize:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),F&&!!P.borderSize&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:P.borderColor,size:30,gradientEnabled:!0,onChange:e=>{H({borderColor:e})},store:e}),t.createElement(l,{defaultValue:P.borderSize,onValueChange:e=>{H({borderSize:h(e,1,Math.min(P.width,P.height)/2)})},style:{width:"80px"},min:1,max:Math.max(1,Math.min(P.width,P.height)/2)}))),F&&t.createElement(p,{label:c("toolbar.cornerRadius"),visible:F,enabled:0!==P.cornerRadius,onEnabledChange:e=>{H({cornerRadius:e?Math.min(P.width/4,P.height/4):0})},numberValue:Math.min(P.cornerRadius,Math.round(Math.min(P.width/2,P.height/2))),onNumberValueChange:e=>{H({cornerRadius:e})},min:1,max:Math.round(Math.min(P.width/2,P.height/2))}),t.createElement(o,{checked:P.shadowEnabled,label:c("toolbar.shadow"),onChange:e=>{H({shadowEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),P.shadowEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.blur")),t.createElement("div",null,t.createElement(NumberInput,{value:P.shadowBlur,onValueChange:e=>{H({shadowBlur:h(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:P.shadowBlur,onChange:e=>{H({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetX")),t.createElement("div",null,t.createElement(NumberInput,{value:P.shadowOffsetX,onValueChange:e=>{H({shadowOffsetX:h(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:P.shadowOffsetX,onChange:e=>{H({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetY")),t.createElement("div",null,t.createElement(NumberInput,{value:P.shadowOffsetY,onValueChange:e=>{H({shadowOffsetY:h(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:P.shadowOffsetY,onChange:e=>{H({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*P.shadowOpacity),onValueChange:e=>{H({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*P.shadowOpacity,onChange:e=>{H({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:P.shadowColor,size:30,onChange:e=>{H({shadowColor:e})},store:e}))))});
|
|
1
|
+
var e=this&&this.__rest||function(e,t){var a={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(n=Object.getOwnPropertySymbols(e);l<n.length;l++){t.indexOf(n[l])<0&&Object.prototype.propertyIsEnumerable.call(e,n[l])&&(a[n[l]]=e[n[l]])}}return a};import t from"react";import{Alignment as a,Button as n,NumericInput as l,Slider as r,Switch as o}from"@blueprintjs/core";import{observer as i}from"mobx-react-lite";import{INDEPENDENT_FILTERS as d}from"../model/shape-model.js";import s from"../toolbar/color-picker.js";import{t as c}from"../utils/l10n.js";import{Cross as u}from"@blueprintjs/icons";import{EffectCard as m}from"./effect-card.js";import{Effects as b}from"../utils/filters.js";import{CurvePowerSlider as h}from"../toolbar/filters-picker.js";const p=(e,t,a)=>Math.max(t,Math.min(a,e));export const NumberInput=a=>{var{value:n,onValueChange:r}=a,o=e(a,["value","onValueChange"]);const[i,d]=t.useState(n.toString());return t.useEffect(()=>{d(n.toString())},[n]),t.createElement(l,Object.assign({value:i,onValueChange:(e,t)=>{d(t),Number.isNaN(e)||r(e)}},o))};const g=({label:e,enabled:n,visible:i=!0,onEnabledChange:d,numberValue:s,onNumberValueChange:c,min:u,max:m})=>i?t.createElement(t.Fragment,null,t.createElement(o,{checked:n,label:e,onChange:e=>{d(e.target.checked)},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),n&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{paddingTop:"7px",paddingLeft:"10px",width:"calc(100% - 80px)"}},t.createElement(r,{value:s,onChange:e=>{c(e)},min:u,max:m,labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(l,{value:s,onValueChange:e=>{c(p(e,u,m))},buttonPosition:"none",style:{width:"50px",padding:"0 5px",marginLeft:"10px"},min:u,max:m}))):null;export const EffectsPanel=i(({store:e})=>{var i,E,f,v,x,y,C,w,k,V,I,T,j,O;const R=e.selectedElements,M=R[0],P=R.map(e=>e.id).join(","),N="effects"===e.openedSidePanel,S=()=>{const t=e.previousOpenedSidePanel;e.openSidePanel(t||"photos")};if(t.useEffect(()=>{N&&(M&&M.filters||S())},[N,P]),!M||!M.filters){return null}const B=(e=>"text"===e.type)(M),z=((e=>{e.type})(M),(e=>"image"===e.type)(M)),F=(e=>"svg"===e.type)(M),H=z||F,G=t=>{e.history.transaction(()=>{R.forEach(e=>{e.set(t)})})},W=(t,a)=>{e.history.transaction(()=>{R.forEach(e=>{let n=Number(a);return 0==a||a||(n=e.filters.has(t)?null:1),d.includes(t)||e.set({grayscaleEnabled:"grayscale"===t&&!!a,sepiaEnabled:"sepia"===t&&!!a}),e.setFilter(t,n)})})};return t.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"}},t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement("h3",{style:{margin:0,lineHeight:"30px"}},c("sidePanel.effects")),t.createElement(n,{minimal:!0,icon:t.createElement(u,null),onClick:()=>S()})),H&&t.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"}},t.createElement("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"}},t.createElement(m,{active:M.grayscaleEnabled,onClick:()=>{W("grayscale",!M.grayscaleEnabled)},title:c("toolbar.grayscale"),imageSrc:M.src,effect:b.grayscale}),t.createElement(m,{active:M.sepiaEnabled,onClick:()=>{W("sepia",!M.sepiaEnabled)},title:c("toolbar.sepia"),imageSrc:M.src,effect:b.sepia}),t.createElement(m,{active:M.filters.has("cold"),onClick:()=>{W("cold",M.filters.has("cold")?null:1)},title:c("toolbar.cold"),imageSrc:M.src,effect:b.cold}),t.createElement(m,{active:M.filters.has("natural"),onClick:()=>{W("natural",M.filters.has("natural")?null:1)},title:c("toolbar.natural"),imageSrc:M.src,effect:b.natural}),t.createElement(m,{active:M.filters.has("warm"),onClick:()=>{W("warm",M.filters.has("warm")?null:1)},title:c("toolbar.warm"),imageSrc:M.src,effect:b.warm}))),t.createElement(g,{label:c("toolbar.blur"),enabled:M.blurEnabled,visible:H||B,onEnabledChange:e=>{G({blurEnabled:e})},numberValue:M.blurRadius,onNumberValueChange:e=>{G({blurRadius:e})},min:0,max:100}),t.createElement(g,{label:c("toolbar.brightness"),visible:H,enabled:M.brightnessEnabled,onEnabledChange:e=>{G({brightnessEnabled:e})},numberValue:Math.round(100*M.brightness),onNumberValueChange:e=>{G({brightness:e/100})},min:-100,max:100}),t.createElement(g,{label:c("toolbar.temperature"),visible:H,enabled:M.filters.has("temperature"),onEnabledChange:e=>{W("temperature",e?0:null)},numberValue:Math.round(100*(null!==(E=null===(i=M.filters.get("temperature"))||void 0===i?void 0:i.intensity)&&void 0!==E?E:0)),onNumberValueChange:e=>{W("temperature",e/100)},min:-100,max:100}),t.createElement(g,{label:c("toolbar.contrast"),visible:H,enabled:M.filters.has("contrast"),onEnabledChange:e=>{W("contrast",e?0:null)},numberValue:Math.round(100*(null!==(v=null===(f=M.filters.get("contrast"))||void 0===f?void 0:f.intensity)&&void 0!==v?v:0)),onNumberValueChange:e=>{W("contrast",e/100)},min:-100,max:100}),t.createElement(g,{label:c("toolbar.shadows"),visible:H,enabled:M.filters.has("shadows"),onEnabledChange:e=>{W("shadows",e?0:null)},numberValue:Math.round(100*(null!==(y=null===(x=M.filters.get("shadows"))||void 0===x?void 0:x.intensity)&&void 0!==y?y:0)),onNumberValueChange:e=>{W("shadows",e/100)},min:-100,max:100}),t.createElement(g,{label:c("toolbar.white"),visible:H,enabled:M.filters.has("white"),onEnabledChange:e=>{W("white",e?0:null)},numberValue:Math.round(100*(null!==(w=null===(C=M.filters.get("white"))||void 0===C?void 0:C.intensity)&&void 0!==w?w:0)),onNumberValueChange:e=>{W("white",e/100)},min:-100,max:100}),t.createElement(g,{label:c("toolbar.black"),visible:H,enabled:M.filters.has("black"),onEnabledChange:e=>{W("black",e?0:null)},numberValue:Math.round(100*(null!==(V=null===(k=M.filters.get("black"))||void 0===k?void 0:k.intensity)&&void 0!==V?V:0)),onNumberValueChange:e=>{W("black",e/100)},min:-100,max:100}),t.createElement(g,{label:c("toolbar.vibrance"),visible:H,enabled:M.filters.has("vibrance"),onEnabledChange:e=>{W("vibrance",e?0:null)},numberValue:Math.round(100*(null!==(T=null===(I=M.filters.get("vibrance"))||void 0===I?void 0:I.intensity)&&void 0!==T?T:0)),onNumberValueChange:e=>{W("vibrance",e/100)},min:-100,max:100}),t.createElement(g,{label:c("toolbar.saturation"),visible:H,enabled:M.filters.has("saturation"),onEnabledChange:e=>{W("saturation",e?0:null)},numberValue:Math.round(100*(null!==(O=null===(j=M.filters.get("saturation"))||void 0===j?void 0:j.intensity)&&void 0!==O?O:0)),onNumberValueChange:e=>{W("saturation",e/100)},min:-100,max:100}),B&&t.createElement(o,{checked:!!M.curveEnabled,label:c("toolbar.curvedText")||"Curved text",onChange:e=>{G({curveEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),B&&M.curveEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.curvePower")||"Curve"),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*M.curvePower),onValueChange:e=>{G({curvePower:p(e,-100,100)/100})},style:{width:"50px"},min:-100,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(h,{textEl:M,eachSet:G}))),B&&t.createElement(o,{checked:!!M.strokeWidth,label:c("toolbar.textStroke"),onChange:e=>{G({strokeWidth:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),B&&!!M.strokeWidth&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:M.stroke,size:30,gradientEnabled:!0,onChange:e=>{G({stroke:e})},store:e}),t.createElement(l,{defaultValue:M.strokeWidth,onValueChange:e=>{G({strokeWidth:p(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(M.fontSize/2)}))),B&&t.createElement(o,{checked:!!M.backgroundEnabled,label:c("toolbar.textBackground"),onChange:e=>{G({backgroundEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),B&&!!M.backgroundEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundCornerRadius")),t.createElement("div",null,t.createElement(NumberInput,{value:100*M.backgroundCornerRadius,onValueChange:e=>{G({backgroundCornerRadius:p(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*M.backgroundCornerRadius,onChange:e=>{G({backgroundCornerRadius:p(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundPadding")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*M.backgroundPadding),onValueChange:e=>{G({backgroundPadding:p(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:Math.round(100*M.backgroundPadding),onChange:e=>{G({backgroundPadding:p(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*M.backgroundOpacity),onValueChange:e=>{G({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*M.backgroundOpacity,onChange:e=>{G({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:M.backgroundColor,size:30,onChange:e=>{G({backgroundColor:e})},store:e}))),H&&t.createElement(o,{checked:!!M.borderSize,label:c("toolbar.border"),onChange:e=>{G({borderSize:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),H&&!!M.borderSize&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:M.borderColor,size:30,gradientEnabled:!0,onChange:e=>{G({borderColor:e})},store:e}),t.createElement(l,{defaultValue:M.borderSize,onValueChange:e=>{G({borderSize:p(e,1,Math.min(M.width,M.height)/2)})},style:{width:"80px"},min:1,max:Math.max(1,Math.min(M.width,M.height)/2)}))),H&&t.createElement(g,{label:c("toolbar.cornerRadius"),visible:H,enabled:0!==M.cornerRadius,onEnabledChange:e=>{G({cornerRadius:e?Math.min(M.width/4,M.height/4):0})},numberValue:Math.min(M.cornerRadius,Math.round(Math.min(M.width/2,M.height/2))),onNumberValueChange:e=>{G({cornerRadius:e})},min:1,max:Math.round(Math.min(M.width/2,M.height/2))}),t.createElement(o,{checked:M.shadowEnabled,label:c("toolbar.shadow"),onChange:e=>{G({shadowEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),M.shadowEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.blur")),t.createElement("div",null,t.createElement(NumberInput,{value:M.shadowBlur,onValueChange:e=>{G({shadowBlur:p(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:M.shadowBlur,onChange:e=>{G({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetX")),t.createElement("div",null,t.createElement(NumberInput,{value:M.shadowOffsetX,onValueChange:e=>{G({shadowOffsetX:p(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:M.shadowOffsetX,onChange:e=>{G({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetY")),t.createElement("div",null,t.createElement(NumberInput,{value:M.shadowOffsetY,onValueChange:e=>{G({shadowOffsetY:p(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:M.shadowOffsetY,onChange:e=>{G({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*M.shadowOpacity),onValueChange:e=>{G({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*M.shadowOpacity,onChange:e=>{G({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:M.shadowColor,size:30,onChange:e=>{G({shadowColor:e})},store:e}))))});
|
|
@@ -6,6 +6,12 @@ export declare const NumberInput: ({ value, onValueChange, ...props }: {
|
|
|
6
6
|
value: any;
|
|
7
7
|
onValueChange: any;
|
|
8
8
|
}) => React.JSX.Element;
|
|
9
|
+
export declare const CurvePowerSlider: (({ textEl, eachSet }: {
|
|
10
|
+
textEl: any;
|
|
11
|
+
eachSet: (attrs: any) => void;
|
|
12
|
+
}) => React.JSX.Element) & {
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
9
15
|
export declare const FiltersPicker: (({ element, store, elements, }: {
|
|
10
16
|
elements?: Array<ShapeType>;
|
|
11
17
|
element?: ShapeType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__rest||function(e,t){var n={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(a=Object.getOwnPropertySymbols(e);l<a.length;l++){t.indexOf(a[l])<0&&Object.prototype.propertyIsEnumerable.call(e,a[l])&&(n[a[l]]=e[a[l]])}}return n};import t from"react";import{Button as n,Position as a,Switch as l,Slider as r,Alignment as o,NumericInput as i}from"@blueprintjs/core";import{Popover as d}from"@blueprintjs/core";import{observer as c}from"mobx-react-lite";import{LeftJoin as s}from"@blueprintjs/icons";import m from"./color-picker.js";import{t as u}from"../utils/l10n.js";const p=(e,t,n)=>Math.max(t,Math.min(n,e));export const NumberInput=n=>{var{value:a,onValueChange:l}=n,r=e(n,["value","onValueChange"]);const[o,d]=t.useState(a.toString());return t.useEffect(()=>{d(a.toString())},[a]),t.createElement(i,Object.assign({value:o,onValueChange:(e,t)=>{d(t),Number.isNaN(e)||l(e)}},r))};const h=({label:e,enabled:n,visible:a=!0,onEnabledChange:d,numberValue:c,onNumberValueChange:s,min:m,max:u})=>a?t.createElement(t.Fragment,null,t.createElement(l,{checked:n,label:e,onChange:e=>{d(e.target.checked)},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),n&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{paddingTop:"7px"}},t.createElement(r,{value:c,onChange:e=>{s(e)},min:m,max:u,labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(i,{value:c,onValueChange:e=>{s(p(e,m,u))},buttonPosition:"none",style:{width:"45px",padding:"0 5px",marginLeft:"10px"},min:m,max:u}))):null;export const FiltersPicker=c(({element:e,store:c,elements:g})=>{const b=g||[e],E=b[0],x="text"===E.type,y="image"===E.type,v="svg"===E.type,f=y||v,w=E,C=E,k=e=>{c.history.transaction(()=>{b.forEach(t=>{t.set(e)})})};return t.createElement(d,{content:t.createElement("div",{style:{padding:"15px",paddingTop:"15px",width:"230px",maxHeight:"calc(100vh - 150px)",overflow:"auto"}},t.createElement(h,{label:u("toolbar.blur"),enabled:E.blurEnabled,visible:f||x,onEnabledChange:e=>{k({blurEnabled:e})},numberValue:E.blurRadius,onNumberValueChange:e=>{k({blurRadius:e})},min:0,max:100}),t.createElement(h,{label:u("toolbar.brightness"),visible:f,enabled:E.brightnessEnabled,onEnabledChange:e=>{k({brightnessEnabled:e})},numberValue:100*E.brightness+100,onNumberValueChange:e=>{k({brightness:(e-100)/100})},min:0,max:200}),f&&t.createElement(l,{checked:E.sepiaEnabled,label:u("toolbar.sepia"),onChange:e=>{k({sepiaEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),f&&t.createElement(l,{checked:E.grayscaleEnabled,label:u("toolbar.grayscale"),onChange:e=>{k({grayscaleEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),x&&t.createElement(l,{checked:!!w.curveEnabled,label:u("toolbar.curvedText")||"Curved text",onChange:e=>{k({curveEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),x&&w.curveEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.curvePower")||"Curve"),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*w.curvePower),onValueChange:e=>{k({curvePower:p(e,-100,100)/100})},style:{width:"50px"},min:-100,max:100,buttonPosition:"none"}))),t.createElement(r,{value:100*w.curvePower,onChange:e=>{k({curvePower:p(e,-100,100)/100})},min:-100,max:100,labelStepSize:50,labelRenderer:e=>0===e?"0":e.toString()})),x&&t.createElement(l,{checked:!!w.strokeWidth,label:u("toolbar.textStroke"),onChange:e=>{k({strokeWidth:e.target.checked?2:0})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),x&&!!w.strokeWidth&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(m,{value:w.stroke,size:30,onChange:e=>{k({stroke:e})},store:c}),t.createElement(i,{defaultValue:w.strokeWidth,onValueChange:e=>{k({strokeWidth:p(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(w.fontSize/2)}))),x&&t.createElement(l,{checked:!!w.backgroundEnabled,label:u("toolbar.textBackground"),onChange:e=>{k({backgroundEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),!!w.backgroundEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.backgroundCornerRadius")),t.createElement("div",null,t.createElement(NumberInput,{value:100*w.backgroundCornerRadius,onValueChange:e=>{k({backgroundCornerRadius:p(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:100*w.backgroundCornerRadius,onChange:e=>{k({backgroundCornerRadius:p(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.backgroundPadding")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*w.backgroundPadding),onValueChange:e=>{k({backgroundPadding:p(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:Math.round(100*w.backgroundPadding),onChange:e=>{k({backgroundPadding:p(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*w.backgroundOpacity),onValueChange:e=>{k({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:100*w.backgroundOpacity,onChange:e=>{k({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},u("toolbar.color")),t.createElement(m,{value:w.backgroundColor,size:30,onChange:e=>{k({backgroundColor:e})},store:c}))),f&&t.createElement(l,{checked:!!C.borderSize,label:u("toolbar.border"),onChange:e=>{k({borderSize:e.target.checked?2:0})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),!!C.borderSize&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(m,{value:C.borderColor,size:30,onChange:e=>{k({borderColor:e})},store:c}),t.createElement(i,{defaultValue:C.borderSize,onValueChange:e=>{k({borderSize:p(e,1,Math.min(E.width,E.height)/2)})},style:{width:"80px"},min:1,max:Math.max(1,Math.min(E.width,E.height)/2)}))),f&&t.createElement(l,{checked:!!C.cornerRadius,label:u("toolbar.cornerRadius"),onChange:e=>{k({cornerRadius:e.target.checked?Math.min(E.width/4,E.height/4):0})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),f&&!!C.cornerRadius&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{width:"150px",paddingTop:"7px"}},t.createElement(r,{value:Math.min(C.cornerRadius,Math.round(Math.min(E.width/2,E.height/2))),onChange:e=>{k({cornerRadius:e})},min:1,max:Math.round(Math.min(E.width/2,E.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(i,{value:C.cornerRadius,onValueChange:e=>{k({cornerRadius:p(e,1,Math.min(E.width,E.height)/2)})},buttonPosition:"none",style:{width:"45px",padding:"0 5px"},min:1,max:Math.round(Math.min(E.width/2,E.height/2))})),t.createElement(l,{checked:E.shadowEnabled,label:u("toolbar.shadow"),onChange:e=>{k({shadowEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),E.shadowEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.blur")),t.createElement("div",null,t.createElement(NumberInput,{value:E.shadowBlur,onValueChange:e=>{k({shadowBlur:p(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),t.createElement(r,{value:E.shadowBlur,onChange:e=>{k({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.offsetX")),t.createElement("div",null,t.createElement(NumberInput,{value:E.shadowOffsetX,onValueChange:e=>{k({shadowOffsetX:p(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement(r,{value:E.shadowOffsetX,onChange:e=>{k({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.offsetY")),t.createElement("div",null,t.createElement(NumberInput,{value:E.shadowOffsetY,onValueChange:e=>{k({shadowOffsetY:p(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement(r,{value:E.shadowOffsetY,onChange:e=>{k({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,u("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*E.shadowOpacity),onValueChange:e=>{k({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:100*E.shadowOpacity,onChange:e=>{k({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},u("toolbar.color")),t.createElement(m,{value:E.shadowColor,size:30,onChange:e=>{k({shadowColor:e})},store:c})))),position:a.BOTTOM},t.createElement(n,{icon:t.createElement(s,null),text:u("toolbar.effects"),minimal:!0}))});export const EffectsPicker=c(({element:e,store:a})=>e.contentEditable?t.createElement(n,{minimal:!0,icon:t.createElement(s,null),text:u("toolbar.effects"),onClickCapture:e=>{e.stopPropagation(),a.openSidePanel("effects")}}):null);export default EffectsPicker;
|
|
1
|
+
var e=this&&this.__rest||function(e,t){var n={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(a=Object.getOwnPropertySymbols(e);l<a.length;l++){t.indexOf(a[l])<0&&Object.prototype.propertyIsEnumerable.call(e,a[l])&&(n[a[l]]=e[a[l]])}}return n};import t from"react";import{Button as n,Position as a,Switch as l,Slider as r,Alignment as o,NumericInput as i}from"@blueprintjs/core";import{Popover as d}from"@blueprintjs/core";import{observer as c}from"mobx-react-lite";import{LeftJoin as s}from"@blueprintjs/icons";import u from"./color-picker.js";import{t as m}from"../utils/l10n.js";const p=(e,t,n)=>Math.max(t,Math.min(n,e));export const NumberInput=n=>{var{value:a,onValueChange:l}=n,r=e(n,["value","onValueChange"]);const[o,d]=t.useState(a.toString());return t.useEffect(()=>{d(a.toString())},[a]),t.createElement(i,Object.assign({value:o,onValueChange:(e,t)=>{d(t),Number.isNaN(e)||l(e)}},r))};const h=({label:e,enabled:n,visible:a=!0,onEnabledChange:d,numberValue:c,onNumberValueChange:s,min:u,max:m})=>a?t.createElement(t.Fragment,null,t.createElement(l,{checked:n,label:e,onChange:e=>{d(e.target.checked)},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),n&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{paddingTop:"7px"}},t.createElement(r,{value:c,onChange:e=>{s(e)},min:u,max:m,labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(i,{value:c,onValueChange:e=>{s(p(e,u,m))},buttonPosition:"none",style:{width:"45px",padding:"0 5px",marginLeft:"10px"},min:u,max:m}))):null;export const CurvePowerSlider=c(({textEl:e,eachSet:n})=>{const[a,l]=t.useState(null),o=t.useRef(0),i=t.useRef(null),d=null!=a?a:100*e.curvePower,c=e=>{n({curvePower:e/100}),o.current=Date.now()};return t.createElement(r,{value:d,onChange:e=>{const t=p(e,-100,100);l(t),i.current&&clearTimeout(i.current);const n=Date.now()-o.current;n>=300?c(t):i.current=setTimeout(()=>{c(t)},300-n)},onRelease:e=>{i.current&&clearTimeout(i.current),l(null),c(p(e,-100,100))},min:-100,max:100,labelStepSize:50,labelRenderer:e=>0===e?"0":e.toString()})});export const FiltersPicker=c(({element:e,store:c,elements:g})=>{const b=g||[e],E=b[0],x="text"===E.type,y="image"===E.type,v="svg"===E.type,f=y||v,w=E,C=E,k=e=>{c.history.transaction(()=>{b.forEach(t=>{t.set(e)})})};return t.createElement(d,{content:t.createElement("div",{style:{padding:"15px",paddingTop:"15px",width:"230px",maxHeight:"calc(100vh - 150px)",overflow:"auto"}},t.createElement(h,{label:m("toolbar.blur"),enabled:E.blurEnabled,visible:f||x,onEnabledChange:e=>{k({blurEnabled:e})},numberValue:E.blurRadius,onNumberValueChange:e=>{k({blurRadius:e})},min:0,max:100}),t.createElement(h,{label:m("toolbar.brightness"),visible:f,enabled:E.brightnessEnabled,onEnabledChange:e=>{k({brightnessEnabled:e})},numberValue:100*E.brightness+100,onNumberValueChange:e=>{k({brightness:(e-100)/100})},min:0,max:200}),f&&t.createElement(l,{checked:E.sepiaEnabled,label:m("toolbar.sepia"),onChange:e=>{k({sepiaEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),f&&t.createElement(l,{checked:E.grayscaleEnabled,label:m("toolbar.grayscale"),onChange:e=>{k({grayscaleEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),x&&t.createElement(l,{checked:!!w.curveEnabled,label:m("toolbar.curvedText")||"Curved text",onChange:e=>{k({curveEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),x&&w.curveEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.curvePower")||"Curve"),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*w.curvePower),onValueChange:e=>{k({curvePower:p(e,-100,100)/100})},style:{width:"50px"},min:-100,max:100,buttonPosition:"none"}))),t.createElement(CurvePowerSlider,{textEl:w,eachSet:k})),x&&t.createElement(l,{checked:!!w.strokeWidth,label:m("toolbar.textStroke"),onChange:e=>{k({strokeWidth:e.target.checked?2:0})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),x&&!!w.strokeWidth&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(u,{value:w.stroke,size:30,onChange:e=>{k({stroke:e})},store:c}),t.createElement(i,{defaultValue:w.strokeWidth,onValueChange:e=>{k({strokeWidth:p(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(w.fontSize/2)}))),x&&t.createElement(l,{checked:!!w.backgroundEnabled,label:m("toolbar.textBackground"),onChange:e=>{k({backgroundEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),!!w.backgroundEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.backgroundCornerRadius")),t.createElement("div",null,t.createElement(NumberInput,{value:100*w.backgroundCornerRadius,onValueChange:e=>{k({backgroundCornerRadius:p(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:100*w.backgroundCornerRadius,onChange:e=>{k({backgroundCornerRadius:p(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.backgroundPadding")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*w.backgroundPadding),onValueChange:e=>{k({backgroundPadding:p(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:Math.round(100*w.backgroundPadding),onChange:e=>{k({backgroundPadding:p(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*w.backgroundOpacity),onValueChange:e=>{k({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:100*w.backgroundOpacity,onChange:e=>{k({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},m("toolbar.color")),t.createElement(u,{value:w.backgroundColor,size:30,onChange:e=>{k({backgroundColor:e})},store:c}))),f&&t.createElement(l,{checked:!!C.borderSize,label:m("toolbar.border"),onChange:e=>{k({borderSize:e.target.checked?2:0})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),!!C.borderSize&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(u,{value:C.borderColor,size:30,onChange:e=>{k({borderColor:e})},store:c}),t.createElement(i,{defaultValue:C.borderSize,onValueChange:e=>{k({borderSize:p(e,1,Math.min(E.width,E.height)/2)})},style:{width:"80px"},min:1,max:Math.max(1,Math.min(E.width,E.height)/2)}))),f&&t.createElement(l,{checked:!!C.cornerRadius,label:m("toolbar.cornerRadius"),onChange:e=>{k({cornerRadius:e.target.checked?Math.min(E.width/4,E.height/4):0})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),f&&!!C.cornerRadius&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{width:"150px",paddingTop:"7px"}},t.createElement(r,{value:Math.min(C.cornerRadius,Math.round(Math.min(E.width/2,E.height/2))),onChange:e=>{k({cornerRadius:e})},min:1,max:Math.round(Math.min(E.width/2,E.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(i,{value:C.cornerRadius,onValueChange:e=>{k({cornerRadius:p(e,1,Math.min(E.width,E.height)/2)})},buttonPosition:"none",style:{width:"45px",padding:"0 5px"},min:1,max:Math.round(Math.min(E.width/2,E.height/2))})),t.createElement(l,{checked:E.shadowEnabled,label:m("toolbar.shadow"),onChange:e=>{k({shadowEnabled:e.target.checked})},alignIndicator:o.RIGHT,style:{marginTop:"20px"}}),E.shadowEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.blur")),t.createElement("div",null,t.createElement(NumberInput,{value:E.shadowBlur,onValueChange:e=>{k({shadowBlur:p(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),t.createElement(r,{value:E.shadowBlur,onChange:e=>{k({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.offsetX")),t.createElement("div",null,t.createElement(NumberInput,{value:E.shadowOffsetX,onValueChange:e=>{k({shadowOffsetX:p(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement(r,{value:E.shadowOffsetX,onChange:e=>{k({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.offsetY")),t.createElement("div",null,t.createElement(NumberInput,{value:E.shadowOffsetY,onValueChange:e=>{k({shadowOffsetY:p(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement(r,{value:E.shadowOffsetY,onChange:e=>{k({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,m("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*E.shadowOpacity),onValueChange:e=>{k({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement(r,{value:100*E.shadowOpacity,onChange:e=>{k({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},m("toolbar.color")),t.createElement(u,{value:E.shadowColor,size:30,onChange:e=>{k({shadowColor:e})},store:c})))),position:a.BOTTOM},t.createElement(n,{icon:t.createElement(s,null),text:m("toolbar.effects"),minimal:!0}))});export const EffectsPicker=c(({element:e,store:a})=>e.contentEditable?t.createElement(n,{minimal:!0,icon:t.createElement(s,null),text:m("toolbar.effects"),onClickCapture:e=>{e.stopPropagation(),a.openSidePanel("effects")}}):null);export default EffectsPicker;
|
package/toolbar/sketch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import e from"react";import{ReactCSS as t}from"reactcss";import r from"lodash/merge.js";import{Button as o}from"@blueprintjs/core";import n from"@meronex/icons/cg/CgColorPicker.js";import i from"konva";import{ColorWrap as a,Saturation as s,Hue as l,Alpha as c,Checkboard as d}from"react-color/lib/components/common/index.js";import{SketchFields as p}from"react-color/lib/components/sketch/SketchFields.js";import{SketchPresetColors as m}from"react-color/lib/components/sketch/SketchPresetColors.js";const u=t=>{const r=e.useRef(t);return r.current=t,e.useCallback((...e)=>r.current(...e),[])};export const Sketch=({width:a=200,rgb:h,hex:g,hsv:x,hsl:f,onChange:v,onSwatchHover:b,disableAlpha:E=!1,presetColors:w=["#D0021B","#F5A623","#F8E71C","#8B572A","#7ED321","#417505","#BD10E0","#9013FE","#4A90E2","#50E3C2","#B8E986","#000000","#4A4A4A","#9B9B9B","#FFFFFF"],renderers:C,styles:k={},className:y=""})=>{const A=t(r({default:Object.assign({picker:{width:a,padding:"10px 10px 0",boxSizing:"initial",background:"#fff",borderRadius:"4px",boxShadow:"0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)"},saturation:{width:"100%",paddingBottom:"75%",position:"relative",overflow:"hidden"},Saturation:{radius:"3px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},controls:{display:"flex"},sliders:{padding:"4px 0",flex:"1"},color:{width:"24px",height:"24px",position:"relative",marginTop:"4px",marginLeft:"4px",borderRadius:"3px"},activeColor:{absolute:"0px 0px 0px 0px",borderRadius:"2px",background:`rgba(${h.r},${h.g},${h.b},${h.a})`,boxShadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},hue:{position:"relative",height:"10px",overflow:"hidden"},Hue:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"},alpha:{position:"relative",height:"10px",marginTop:"4px",overflow:"hidden"},Alpha:{radius:"2px",shadow:"inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)"}},k),disableAlpha:{color:{height:"10px"},hue:{height:"10px"},alpha:{display:"none"}}},k),{disableAlpha:E}),[S,B]=e.useState(!1),F=e.useRef(null),R=u(e=>{var t;if(S){const r=null===(t=F.current)||void 0===t?void 0:t.fill();r&&v(i.Util.colorToRGBA(r)),j(),function(e){let t=e.target;for(;t;){if(t.classList.contains("color-picker-button")){return!0}t=t.parentElement}return!1}(e)||B(!1),e.stopPropagation(),e.stopImmediatePropagation()}}),L=u(e=>{if(!S){return}const t=i.stages.find(t=>{var r;const o=null===(r=t.getContent().parentElement)||void 0===r?void 0:r.parentElement;if(!o){return!1}const n=o.getBoundingClientRect();return n.left<e.clientX&&n.left+n.width>e.clientX&&n.top<e.clientY&&n.top+n.height>e.clientY});if(!t){return void j()}const r=t.getContent().getBoundingClientRect(),o=e.clientX-r.left,n=e.clientY-r.top,a=t.children[0],s=a.getNativeCanvasElement(),l=a.getCanvas().getPixelRatio(),{data:c}=s.getContext("2d").getImageData(o*l,n*l,1,1),d=t.findOne(".line-guides");d.findOne(".picker")||(F.current&&F.current.destroy(),F.current=new i.Circle({name:"picker",radius:14,stroke:"black",strokeWidth:1}),d.add(F.current)),F.current.setAbsolutePosition({x:o-15,y:n-15}),F.current.fill("rgb("+c[0]+","+c[1]+","+c[2]+")")});e.useEffect(()=>(window.addEventListener("mousemove",L),window.addEventListener("mousedown",R,!0),window.addEventListener("touchstart",R,!0),()=>{window.removeEventListener("mousemove",L),window.removeEventListener("mousedown",R,!0),window.removeEventListener("touchstart",R,!0),j()}),[]),e.useEffect(()=>{S||j()},[S]),e.useEffect(()=>(S&&(document.body.style.cursor="crosshair"),()=>{document.body.style.cursor="default"}),[S]);const j=u(()=>{F.current&&(F.current.destroy(),F.current=null)});return e.createElement("div",{style:A.picker,className:`sketch-picker ${y}`},e.createElement("div",{style:A.saturation},e.createElement(s,{style:A.Saturation,hsl:f,hsv:x,onChange:v})),e.createElement("div",{style:A.controls,className:"flexbox-fix"},e.createElement("div",{style:A.sliders},e.createElement("div",{style:A.hue},e.createElement(l,{style:A.Hue,hsl:f,onChange:v})),e.createElement("div",{style:A.alpha},e.createElement(c,{style:A.Alpha,rgb:h,hsl:f,renderers:C,onChange:v}))),e.createElement("div",{style:A.color},e.createElement(d,{size:8,white:"transparent",grey:"rgba(0,0,0,.08)"}),e.createElement("div",{style:A.activeColor})),e.createElement("div",{style:A.color},e.createElement(o,{icon:e.createElement(n,null),className:"color-picker-button",minimal:!0,style:{width:"24px",height:"24px",minWidth:"24px",minHeight:"24px",padding:0,margin:0},active:S,onClickCapture:e=>{B(e=>!e),e.stopPropagation()}}))),e.createElement(p,{rgb:h,hsl:f,hex:g,onChange:v,disableAlpha:E}),e.createElement(m,{colors:w,onClick:v,onSwatchHover:b}))};export default a(Sketch);
|
package/utils/fonts.d.ts
CHANGED
|
@@ -6,10 +6,11 @@ export declare const globalFonts: mobx.IObservableArray<FONT>;
|
|
|
6
6
|
export declare function addGlobalFont(font: FONT): void;
|
|
7
7
|
export declare function removeGlobalFont(fontFamily: string): void;
|
|
8
8
|
export declare function replaceGlobalFonts(fonts: Array<FONT>): void;
|
|
9
|
-
export declare function
|
|
9
|
+
export declare function _getFontProbeTextForTesting(sampleText?: string): string;
|
|
10
|
+
export declare function measureFontDom(fontName: string, fallback?: string, fontStyle?: string, fontWeight?: string, text?: string): number;
|
|
10
11
|
export declare const isFontLoaded: (fontName: string, fontStyle?: string, fontWeight?: string) => boolean;
|
|
11
12
|
export declare function _setFontLoadedForTesting(key: string, value: boolean): void;
|
|
12
|
-
export declare function loadFont(fontName: string, fontStyle: string, fontWeight: string): Promise<void>;
|
|
13
|
+
export declare function loadFont(fontName: string, fontStyle: string, fontWeight: string, sampleText?: string): Promise<void>;
|
|
13
14
|
export declare function setGoogleFontsVariants(variants: string): void;
|
|
14
15
|
export declare function getGoogleFontsVariants(): string;
|
|
15
16
|
export declare function getGoogleFontsUrl(fontName: string): string;
|
package/utils/fonts.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as t from"mobx";import{triggerLoadError as e,getFontLoadTimeout as o}from"./loader.js";let
|
|
1
|
+
import*as t from"mobx";import{triggerLoadError as e,getFontLoadTimeout as o}from"./loader.js";import{removeTags as n}from"./text.js";let r=t.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),s=t.observable({value:!1});export function isGoogleFontChanged(){return s.value}export function setGoogleFonts(t){"default"!==t?(s.value=!0,r.splice(0,r.length),r.push(...t)):s.value=!1}export function getFontsList(){return r}export const globalFonts=t.observable([]);export function addGlobalFont(t){globalFonts.push(t)}export function removeGlobalFont(t){const e=globalFonts.findIndex(e=>e.fontFamily===t);-1!==e&&globalFonts.splice(e,1)}export function replaceGlobalFonts(t){globalFonts.replace(t)}const l="BESbswy 0123456789 Il1Ww";function a(t){const e=function(t=""){const e=n(t).replace(/\s+/g," ").trim();return e?Array.from(e).slice(0,10).join(""):""}(t);return e?`${l} ${e}`:l}export function _getFontProbeTextForTesting(t){return a(t)}let i;function c(t,e="sans-serif",o="normal",n="normal",r=l){i||(i=document.createElement("canvas"));var s=i.getContext("2d");return s.font=`${o} ${n} 40px '${t}', ${e}`,s.measureText(r).width}export function measureFontDom(t,e="sans-serif",o="normal",n="normal",r=l){if("undefined"==typeof document||!document.body){return 0}const s=document.createElement("span");s.textContent=r,s.style.cssText=`\n position:absolute;\n visibility:hidden;\n white-space:nowrap;\n top:-9999px;\n left:-9999px;\n font:${o} ${n} 90px '${t}', ${e};\n `,document.body.appendChild(s);const a=s.getBoundingClientRect().width;return s.remove(),a}const u={Arial:!0};export const isFontLoaded=(t,e,o)=>e&&o?!!u[`${t}_${e}_${o}`]:Object.keys(u).some(e=>e.startsWith(t+"_"))||!!u[t];export function _setFontLoadedForTesting(t,e){e?u[t]=!0:delete u[t]}export async function loadFont(t,n,r,s){var f;const m=`${t}_${n}_${r}`;if(u[m]){return}const d=!!(null===(f=document.fonts)||void 0===f?void 0:f.load),p=a(s),g=function(t="normal",e="normal",o=l){i||(i=document.createElement("canvas"));var n=i.getContext("2d");return n.font=`${t} ${e} 40px sans-serif`,n.measureText(o).width}(n,r,p);if(d){try{await document.fonts.load(`${n} ${r} 16px '${t}'`,p);if(g!==c(t,"sans-serif",n,r,p)){return void(u[m]=!0)}}catch(F){}}const x=function(t="normal",e="normal",o=l){i||(i=document.createElement("canvas"));var n=i.getContext("2d");return n.font=`${t} ${e} 40px serif`,n.measureText(o).width}(n,r,p),$=c(t,"sans-serif",n,r,p),y=Math.min(6e3,o())/60;for(let e=0;e<y;e++){const e=c(t,"sans-serif",n,r,p),o=c(t,"serif",n,r,p);if(e!==$||e!==g||o!==x){return await new Promise(t=>setTimeout(t,100)),void(u[m]=!0)}await new Promise(t=>setTimeout(t,60))}console.warn(`Timeout for loading font "${t}". Looks like polotno can't load it. Is it a correct font family?`),e(`Timeout for loading font "${t}"`)}const f={};let m="400,400italic,700,700italic";export function setGoogleFontsVariants(t){m=t}export function getGoogleFontsVariants(){return m}export function getGoogleFontsUrl(t){return`https://fonts.googleapis.com/css?family=${t.replace(/ /g,"+")}:${m}`}export function injectGoogleFont(t){if(f[t]){return}const e=getGoogleFontsUrl(t),o=document.createElement("link");o.type="text/css",o.href=e,o.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(o),f[t]=!0}const d={};let p;export function injectCustomFont(t){const e=t.fontFamily;if(d[e]){return}if(!t.url&&!t.styles){return}const o=t.styles||(t.url?[{src:`url("${t.url}")`}]:[]),n=(p||(p=document.getElementById("polotno-font-style"),p||(p=document.createElement("style"),p.id="polotno-font-style",document.head.appendChild(p)),p)).sheet;o.forEach(t=>{n.insertRule(`\n @font-face{\n font-family:'${e}';\n src:${t.src};\n font-style:${t.fontStyle||"normal"};\n font-weight:${t.fontWeight||"normal"};\n font-display:swap; /* optional but recommended */\n }`,n.cssRules.length)}),d[t.fontFamily]=!0}
|
package/utils/text-html.d.ts
CHANGED
|
@@ -1,8 +1,16 @@
|
|
|
1
|
+
import { StyledSegment } from './text.js';
|
|
1
2
|
import { TextElementLike } from './text-types.js';
|
|
2
3
|
export declare function getDir(string: string): "rtl" | "ltr";
|
|
3
4
|
export declare function getCurvePath(width: number, height: number, power: number, absLineHeight: number): string;
|
|
4
5
|
export declare function createSVGGradientDef(gradientColor: string, id: string, width?: number, height?: number): string;
|
|
5
6
|
export declare function getCurveTextHeight(element: TextElementLike): number;
|
|
7
|
+
export declare function segmentsToTspans(segments: StyledSegment[], defaults: {
|
|
8
|
+
fontWeight: string;
|
|
9
|
+
fontStyle: string;
|
|
10
|
+
fill: string;
|
|
11
|
+
}, options?: {
|
|
12
|
+
omitColors?: boolean;
|
|
13
|
+
}): string;
|
|
6
14
|
export interface GetHtmlOptions {
|
|
7
15
|
fontFamily?: string;
|
|
8
16
|
color?: string;
|
package/utils/text-html.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import t from"konva";import*as e from"./gradient.js";import{removeTags as n,sanitizeHtml as i}from"./text.js";import{flags as
|
|
1
|
+
import t from"konva";import*as e from"./gradient.js";import{removeTags as n,sanitizeHtml as o,parseHtmlToSegments as i}from"./text.js";import{flags as r}from"./flags.js";import{applyTextDefaults as l}from"./text-types.js";function a(t){var e="֑-߿יִ-﷽ﹰ-ﻼ";return new RegExp("^[^"+e+"]*?["+e+"]").test(t)}export function getDir(t){return function(t){t=t.replace(/\s/g,"");let e=0;for(var n=0;n<t.length;n++){a(t[n])&&(e+=1)}return e>t.length/2}(t)?"rtl":"ltr"}export function getCurvePath(t,e,n,o){const i=Math.max(-.9999,Math.min(.9999,n));if(Math.abs(i)<1e-4){return`M 0 ${e/2} L ${t} ${e/2}`}const r=5*o/(2*Math.abs(i))-o,l=t/2;if(i>0){const t=2*r+o/2;return[`M ${l} ${t}`,`A ${r} ${r} 0 1 1 ${l} ${t-2*r}`,`A ${r} ${r} 0 1 1 ${l} ${t}`].join(" ")}{const t=-(2*r-Math.round(e))-o/2;return[`M ${l} ${t}`,`A ${r} ${r} 0 1 0 ${l} ${t+2*r}`,`A ${r} ${r} 0 1 0 ${l} ${t}`].join(" ")}}export function createSVGGradientDef(t,n,o,i){if(!e.isGradient(t)){return""}const{stops:r,rotation:l}=e.parseColor(t),a=l*Math.PI/180;return`<linearGradient id="${n}" x1="${100*(.5-.5*Math.sin(a))}%" y1="${100*(.5+.5*Math.cos(a))}%" x2="${100*(.5+.5*Math.sin(a))}%" y2="${100*(.5-.5*Math.cos(a))}%">${r.map(({offset:t,color:e})=>`<stop offset="${100*t}%" stop-color="${e}" />`).join("")}</linearGradient>`}export function getCurveTextHeight(e){var o,i,r,a;const s=e.a?e.a:e,f=l(e),c=null!==(o=s.fontSize)&&void 0!==o?o:f.fontSize,d=new t.TextPath({data:getCurvePath(null!==(i=s.width)&&void 0!==i?i:f.width,null!==(a=null!==(r=s.height)&&void 0!==r?r:f.height)&&void 0!==a?a:0,f.curvePower,c),align:"center",textBaseline:"middle",text:n(f.text),fontSize:c,fontFamily:f.fontFamily,fontWeight:f.fontWeight,fontStyle:f.fontStyle,letterSpacing:f.letterSpacing*c,fill:f.fill}),$=d.getSelfRect().height||c;return d.destroy(),$}function s(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}export function segmentsToTspans(t,e,n){return t.map(t=>{const o=[];t.bold&&"bold"!==e.fontWeight&&o.push('font-weight="bold"'),t.italic&&"italic"!==e.fontStyle&&o.push('font-style="italic"'),t.underline&&o.push('text-decoration="underline"'),t.strike&&o.push('text-decoration="line-through"'),!(null==n?void 0:n.omitColors)&&t.color&&t.color!==e.fill&&o.push(`fill="${s(t.color)}"`);const i=s(t.text);return 0===o.length?i:`<tspan ${o.join(" ")}>${i}</tspan>`}).join("")}export function getHtml(t,{fontFamily:a="",color:s="black",forEditor:f=!1}={}){const c=l(t),d=a||c.fontFamily,$=e.isGradient(c.fill),h=e.isGradient(c.stroke),p="ellipsis"===r.textOverflow&&!f&&!c.curveEnabled&&!!c.height,g=(()=>{if(!p){return[]}const t=Math.max(1,Math.round(c.height)),e="number"==typeof c.lineHeight?c.lineHeight:1.2,n=Math.max(1,e*c.fontSize),o=Math.max(1,Math.floor(t/n));return[`max-height: ${t}px`,"overflow: hidden","display: -webkit-box","-webkit-box-orient: vertical",`-webkit-line-clamp: ${o}`,`line-clamp: ${o}`]})(),x=t=>`\n background-image: ${t};\n background-size: 100% 100%;\n background-repeat: repeat;\n -webkit-background-clip: text;\n -moz-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n color: transparent\n `.trim();let u=`color: ${s||c.fill}`,m="";h&&c.strokeWidth?(u=`color: ${s||c.fill}; ${x(c.stroke)}`,m=`-webkit-text-stroke: ${c.strokeWidth}px transparent`):$&&(u=x(c.fill));const k=["white-space: pre-wrap","word-break: break-word",`width: ${Math.round(c.width||100)}px`,...g,u,`font-size: ${c.fontSize}px`,`font-family: '${d}'`,`text-align: ${c.align}`,`text-transform: ${c.textTransform}`,c.textDecoration?`text-decoration: ${c.textDecoration}; text-decoration-color: ${s||c.fill}; text-decoration-layer: over`:"",c.lineHeight?`line-height: ${c.lineHeight}`:"",c.letterSpacing?`letter-spacing: ${c.letterSpacing*c.fontSize}px`:"",c.fontStyle?`font-style: ${c.fontStyle}`:"",c.fontWeight?`font-weight: ${c.fontWeight}`:"",m||(c.strokeWidth?`-webkit-text-stroke: ${c.strokeWidth}px ${c.stroke}`:""),c.strokeWidth&&!h?"paint-order: stroke fill":""].filter(Boolean).join("; ");if(c.curveEnabled&&!f){const e=getCurveTextHeight(t),n=Math.round(c.width||100),o=getCurvePath(n,e,c.curvePower,c.fontSize),r=i(c.text),l={fontWeight:c.fontWeight||"normal",fontStyle:c.fontStyle||"normal",fill:s||c.fill||"black"},a=segmentsToTspans(r,l),f=segmentsToTspans(r,l,{omitColors:!0}),p=`curve-${c.id||"temp"}`,g=c.strokeWidth&&(h||$&&!h);let x=`<svg xmlns="http://www.w3.org/2000/svg" width="${n}" height="${e}">\n <defs>\n <path id="${p}" d="${o}" fill="none" />`;if($){const t=`curve-fill-grad-${c.id||"temp"}`;x+=createSVGGradientDef(c.fill,t,n,e)}if(h&&c.strokeWidth){const t=`curve-stroke-grad-${c.id||"temp"}`;x+=createSVGGradientDef(c.stroke,t,n,e)}if(x+="</defs>",g){const t=`\n font-family="'${d}'"\n font-size="${c.fontSize}"\n font-weight="${c.fontWeight}"\n font-style="${c.fontStyle}"\n text-anchor="middle"\n dominant-baseline="central"\n letter-spacing="${c.letterSpacing*c.fontSize}px"${c.textDecoration?` text-decoration="${c.textDecoration}"`:""}`,e=h?`url(#curve-stroke-grad-${c.id||"temp"})`:c.stroke;x+=`\n <text ${t} fill="${e}" stroke="${e}" stroke-width="${c.strokeWidth}">\n <textPath href="#${p}" startOffset="50%">${f}</textPath>\n </text>`,x+=`\n <text ${t} fill="${$?`url(#curve-fill-grad-${c.id||"temp"})`:s}">\n <textPath href="#${p}" startOffset="50%">${a}</textPath>\n </text>`}else{const t=$?`url(#curve-fill-grad-${c.id||"temp"})`:s,e=h?`url(#curve-stroke-grad-${c.id||"temp"})`:c.stroke;x+=`\n <text\n font-family="'${d}'"\n font-size="${c.fontSize}"\n font-weight="${c.fontWeight}"\n font-style="${c.fontStyle}"\n fill="${t}"\n text-anchor="middle"\n dominant-baseline="central"\n letter-spacing="${c.letterSpacing*c.fontSize}px"${c.textDecoration?` text-decoration="${c.textDecoration}"`:""}${c.strokeWidth?` stroke="${e}" stroke-width="${c.strokeWidth}" paint-order="stroke fill"`:""}>\n <textPath href="#${p}" startOffset="50%">${a}</textPath>\n </text>`}return x+="</svg>",x}if(c.strokeWidth&&(h||$&&!h)&&!f){const t=o(c.text).replace(/\n/g,"<br/>"),e=Math.round(c.width||100),i=["white-space: pre-wrap","word-break: break-word",`width: ${e}px`,...g,`font-size: ${c.fontSize}px`,`font-family: '${d}'`,`text-align: ${c.align}`,`text-transform: ${c.textTransform}`,c.textDecoration?`text-decoration: ${c.textDecoration}; text-decoration-color: ${s||c.fill}; text-decoration-layer: over`:"",c.lineHeight?`line-height: ${c.lineHeight}`:"",c.letterSpacing?`letter-spacing: ${c.letterSpacing*c.fontSize}px`:"",c.fontStyle?`font-style: ${c.fontStyle}`:"",c.fontWeight?`font-weight: ${c.fontWeight}`:""].filter(Boolean).join("; ");let r;return r=h?`${i}; ${x(c.stroke)}; -webkit-text-stroke: ${c.strokeWidth}px transparent`:`${i}; color: transparent; -webkit-text-stroke: ${c.strokeWidth}px ${c.stroke}`,`\n <div style="position: relative; width: ${e}px;">\n <div style="${r}; position: absolute; top: 0; left: 0; pointer-events: none;" aria-hidden="true">${t}</div>\n <div style="${i}; ${$?x(c.fill):`color: ${s||c.fill}`}; position: relative;" contentEditable dir="${getDir(n(c.text))}">${t}</div>\n </div>\n `}return`<div style="${k}" contentEditable dir="${getDir(n(c.text))}">${o(c.text).replace(/\n/g,"</br>")}</div>`}export function resolveLineHeight({fontFamily:t,fontSize:e,lineHeight:n}){if("number"==typeof n){return n}const o=document.createElement("div");o.style.fontFamily=t,o.style.fontSize=e+"px",o.style.lineHeight=n,o.innerText="Test text",document.body.appendChild(o);const i=o.offsetHeight;return document.body.removeChild(o),i/e}
|
package/utils/text.d.ts
CHANGED
|
@@ -1,2 +1,11 @@
|
|
|
1
1
|
export declare function removeTags(str?: string): string;
|
|
2
|
+
export interface StyledSegment {
|
|
3
|
+
text: string;
|
|
4
|
+
bold?: boolean;
|
|
5
|
+
italic?: boolean;
|
|
6
|
+
color?: string;
|
|
7
|
+
underline?: boolean;
|
|
8
|
+
strike?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export declare function parseHtmlToSegments(html: string): StyledSegment[];
|
|
2
11
|
export declare function sanitizeHtml(html: string): string;
|
package/utils/text.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export function removeTags(e=""){return(e.match(/<\/p>/gi)||[]).length>1&&(e=e.replace(/<\/p>/gi,(e,
|
|
1
|
+
export function removeTags(e=""){return(e.match(/<\/p>/gi)||[]).length>1&&(e=e.replace(/<\/p>/gi,(e,t,o)=>(o.slice(t+e.length).match(/<\/p>/gi)||[]).length>0?"\n":e)),e.replace(/(<([^>]+)>)/gi,"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,'"').replace(/'/g,"'").replace(/ /g," ")}function e(e,t){return!!e.bold==!!t.bold&&!!e.italic==!!t.italic&&!!e.underline==!!t.underline&&!!e.strike==!!t.strike&&(e.color||"")===(t.color||"")}export function parseHtmlToSegments(t){if(!t){return[]}const o=(new DOMParser).parseFromString(t,"text/html"),n=[],r=o.body.querySelectorAll("p");function l(e,t){if(e.nodeType===Node.TEXT_NODE){const o=e.textContent||"";return void(o&&n.push(function(e,t){const o={text:e};return t.bold&&(o.bold=!0),t.italic&&(o.italic=!0),t.underline&&(o.underline=!0),t.strike&&(o.strike=!0),t.color&&(o.color=t.color),o}(o,t)))}if(e.nodeType!==Node.ELEMENT_NODE){return}const o=e,r=o.tagName.toLowerCase(),i=Object.assign({},t);"strong"!==r&&"b"!==r||(i.bold=!0),"em"!==r&&"i"!==r||(i.italic=!0),"u"===r&&(i.underline=!0),"s"===r&&(i.strike=!0);const c=o.style;c.color&&(i.color=c.color),("bold"===c.fontWeight||parseInt(c.fontWeight)>=700)&&(i.bold=!0),"italic"===c.fontStyle&&(i.italic=!0);const a=c.textDecoration||c.textDecorationLine||"";a.includes("underline")&&(i.underline=!0),a.includes("line-through")&&(i.strike=!0);for(const n of Array.from(o.childNodes)){l(n,i)}}r.length>0?r.forEach((e,t)=>{l(e,{}),t<r.length-1&&n.push({text:" "})}):l(o.body,{});const i=[];for(const c of n){if(!c.text){continue}const t=i[i.length-1];t&&e(t,c)?t.text+=c.text:i.push(c)}return i}export function sanitizeHtml(e){return e?/<[a-z][a-z0-9]*(\s[^>]*)?>[^<]*<\/[a-z][a-z0-9]*>/i.test(e)?e=(e=e.replace(/<(?![a-z/!])/gi,"<")).replace(/([^a-z0-9"'\s/])>/gi,"$1>"):e.replace(/</g,"<").replace(/>/g,">"):""}
|
package/utils/to-html.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__rest||function(e,t){var o={};for(var i in e){Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(o[i]=e[i])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(e);r<i.length;r++){t.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(e,i[r])&&(o[i[r]]=e[i[r]])}}return o};import{getCrop as t,loadImage as o}from"./image.js";import*as i from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{resetStyleContent as n}from"./reset-style.js";import{Effects as s,shapeFilterToCSS as a}from"./filters.js";import{getVideoSize as l}from"./video.js";import{getGoogleFontsUrl as d}from"./fonts.js";import{forEveryNode as c}from"../model/group-model.js";import{getCurvePath as p}from"../canvas/text-element.js";import{removeTags as g}from"./text.js";import f from"konva";import*as b from"./gradient.js";import{createSVGGradientDef as u}from"./text-html.js";export const h=(e,t,...o)=>({type:e,props:t,children:o||[]});function m(e){return b.isGradient(e),e}export function fixRatio(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");return t.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(t)}const y=async({element:e,page:t,store:r})=>{let{src:n}=e;if("svg"===e.type){let t=await i.urlToString(n);t=fixRatio(t),n=Object.keys(e.colorsReplace).length?i.replaceColors(t,new Map(Object.entries(e.colorsReplace))):i.svgToURL(t)}let s="";e.flipX&&(s+="scaleX(-1)"),e.flipY&&(s+="scaleY(-1)"),s||(s="none");const a={};if("svg"===e.type&&e.maskSrc){const t=await i.urlToBase64(n);a["mask-image"]=`url(${t})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${t})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat",n=e.maskSrc}else if(e.clipSrc){const t=e.clipSrc,o=await i.urlToBase64(t);a["mask-image"]=`url(${o})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${o})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat"}const l=await o(n),d=l.width*e.cropWidth,c=l.height*e.cropHeight,p=e.width/e.height;let g,f;const u=d/c,y="svg"===e.type||e.stretchEnabled;y?(g=d,f=c):p>=u?(g=d,f=d/p):(g=c*p,f=c);const k=g/l.width,x=f/l.height,w=g/f>e.width/e.height?e.height/f:e.width/g,$=y?e.width/g:w,v=y?e.height/f:w,j=g*$/k,O=f*v/x;let S=e.cropX*$*l.width,z=e.cropY*v*l.height;e.flipX&&(S=(1-e.cropX-e.cropWidth)*$*l.width),e.flipY&&(z=(1-e.cropY-e.cropHeight)*v*l.height);const H=e.borderSize&&b.isGradient(e.borderColor),T=H?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,W=h("div",{style:Object.assign(Object.assign({},a),{width:"100%",height:"100%",borderRadius:T+"px",border:e.borderSize&&!H?`${e.borderSize}px solid ${e.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${n})`,transform:s,backgroundSize:`${Math.round(j)}px ${Math.round(O)}px`,backgroundPositionX:-Math.round(S)+"px",backgroundPositionY:-Math.round(z)+"px"})});return H?h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},W):W},k=({element:e,type:t})=>{const o={"stroke-width":e.height,stroke:e.color,"stroke-linecap":"round","stroke-linejoin":"round",opacity:e.opacity},i=Object.assign(Object.assign({},o),{fill:e.color}),r=Object.assign(Object.assign({},o),{fill:"none"});return"arrow"===t?h("polyline",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},r)):"triangle"===t?h("polygon",Object.assign({points:`${3*e.height},${2*-e.height} 0,0 ${3*e.height},${2*e.height}`},i)):"bar"===t?h("polyline",Object.assign({points:`0,${2*-e.height} 0,${2*e.height}`},r)):"circle"===t?h("circle",Object.assign({cx:2*e.height,cy:0,r:2*e.height},i)):"square"===t?h("polygon",Object.assign({points:`0,${2*-e.height} ${4*e.height},${2*-e.height} ${4*e.height},${2*e.height} 0,${2*e.height}`},i)):null},x={image:y,svg:y,text:async({element:e,page:t,store:o})=>{const i=b.isGradient(e.fill),r=b.isGradient(e.stroke);if(e.curveEnabled){const t=p(e.width,e.height,e.curvePower,e.fontSize),o=g(e.text).replace(/\n/g," ");let n=`\n <svg xmlns="http://www.w3.org/2000/svg" width="${e.width}" height="${e.height}" style="display: block;">\n <defs>\n <path id="curve-${e.id}" d="${t}" fill="none" />`;if(i){const t=`curve-fill-grad-${e.id}`;n+=u(e.fill,t)}if(r&&e.strokeWidth){const t=`curve-stroke-grad-${e.id}`;n+=u(e.stroke,t)}n+=`</defs>\n <text\n font-family="'${e.fontFamily}'"\n font-size="${e.fontSize}"\n font-weight="${e.fontWeight}"\n font-style="${e.fontStyle}"\n fill="${i?`url(#curve-fill-grad-${e.id})`:e.fill}"\n text-anchor="middle"\n dominant-baseline="central"\n letter-spacing="${e.letterSpacing*e.fontSize}px"${e.textDecoration?` text-decoration="${e.textDecoration}"`:""}${e.strokeWidth?` stroke="${r?`url(#curve-stroke-grad-${e.id})`:e.stroke}" stroke-width="${e.strokeWidth}" paint-order="stroke fill"`:""}>\n <textPath href="#curve-${e.id}" startOffset="50%">\n ${o}\n </textPath>\n </text>\n </svg>`;const s=e.backgroundPadding*(e.fontSize*e.lineHeight),a=e.backgroundEnabled&&h("div",{style:{position:"absolute",top:-s/2+"px",left:-s/2+"px",width:e.width+s+"px",height:e.height+s+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}}),l=h("div",{style:{width:"100%",height:"100%",position:"absolute",top:0,left:0},innerHTML:n});return h("div",{style:{position:"relative",width:"100%",height:"100%"}},a,l)}const s=e=>({backgroundImage:e,backgroundSize:"100% 100%",backgroundRepeat:"repeat",WebkitBackgroundClip:"text",MozBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",MozTextFillColor:"transparent",color:"transparent"});let a={top:0,left:0};i&&(a=Object.assign(Object.assign({},a),s(e.fill)));const l=e.backgroundPadding*(e.fontSize*e.lineHeight),d=h("div",{style:{position:"absolute",top:-l/2+"px",left:-l/2+"px",display:e.backgroundEnabled?"block":"none",width:e.width+l+"px",height:e.height+l+"px",backgroundColor:e.backgroundColor,opacity:e.backgroundOpacity,borderRadius:e.backgroundCornerRadius*(e.fontSize*e.lineHeight*.5)+"px"}});"middle"===e.verticalAlign?(a.top="50%",a.transform="translateY(-50%)"):"bottom"===e.verticalAlign&&(a.bottom=0);const c=/<[a-z][\s\S]*>/i.test(e.text),f=c?e.text:e.text.split("\n").join("<br />");if(e.strokeWidth&&(r||i&&!r)){const t=Object.assign({position:"absolute",width:e.width+"px",whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight},a),o=r?Object.assign(Object.assign(Object.assign({},t),s(e.stroke)),{WebkitTextStroke:`${e.strokeWidth}px transparent`}):Object.assign(Object.assign({},t),{color:"transparent",WebkitTextStroke:`${e.strokeWidth}px ${e.stroke}`}),l=i?Object.assign(Object.assign({},t),s(e.fill)):Object.assign(Object.assign({},t),{color:e.fill}),p="el-"+e.id,g=c?`<style>#${p} {${n}}</style>`:"",b=h("div",{style:Object.assign(Object.assign({},o),{position:"absolute",top:0,left:0,pointerEvents:"none"}),"aria-hidden":"true",innerHTML:c?`${g}${f}`:f}),u=h("div",Object.assign(Object.assign({style:Object.assign(Object.assign({},l),{position:"relative"})},c?{id:p}:{}),{innerHTML:c?`${g}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,h("div",{style:{position:"relative",width:e.width+"px"}},b,u))}const m=Object.assign(Object.assign({},a),{position:"absolute",width:e.width+"px",color:e.fill,whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:e.fontSize+"px",textAlign:e.align,fontFamily:`'${e.fontFamily}'`,textDecoration:e.textDecoration||"none",textDecorationColor:e.textDecoration?e.fill:void 0,textTransform:e.textTransform||"none",lineHeight:e.lineHeight,letterSpacing:e.letterSpacing*e.fontSize+"px",fontStyle:e.fontStyle,fontWeight:e.fontWeight,WebkitTextStroke:e.strokeWidth?`${e.strokeWidth}px ${e.stroke}`:void 0,paintOrder:e.strokeWidth?"stroke fill":void 0}),y="el-"+e.id,k=c?{id:y}:{},x=`<style>#${y} {${n}}</style>`,w=h("div",Object.assign(Object.assign({style:m},k),{innerHTML:c?`${x}${f}`:f}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,w)},line:async({element:e,page:t,store:o})=>h("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},h("line",{x1:0,y1:e.height/2,x2:e.width,y2:e.height/2,stroke:e.color,"stroke-width":e.height,"stroke-dasharray":e.dash&&e.dash.length?e.dash.map(t=>t*e.height).join(" "):void 0}),h("g",{transform:`translate(0 ${e.height/2})`},k({element:e,type:e.startHead})),h("g",{transform:`translate(${e.width} ${e.height/2}) rotate(180)`},k({element:e,type:e.endHead}))),figure:async({element:e,page:t,store:o,elementHook:i})=>{let n=r(e);if(e.strokeWidth&&b.isGradient(e.stroke)){const t=`figure-stroke-grad-${e.id}`,o=u(e.stroke,t);n=n.replace(new RegExp(`stroke="${e.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`stroke="url(#${t})"`),n=n.replace("</defs>",`${o}</defs>`)}if(b.isGradient(e.fill)){const t=`figure-fill-grad-${e.id}`,o=u(e.fill,t);n=n.replace(new RegExp(`fill="${e.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`fill="url(#${t})"`),n=n.replace("</defs>",`${o}</defs>`)}const s=h("div",{innerHTML:n});return i&&i({dom:s,element:e})||s},group:async({element:e,page:t,store:o,elementHook:i})=>{const r=await Promise.all(e.children.map(e=>w({element:e,page:t,store:o,elementHook:i}))),n=h("div",{style:{transformOrigin:"top left",opacity:e.opacity}},...r);return i&&i({dom:n,element:e})||n},video:async({element:e,page:t,store:o,elementHook:i})=>{const{cropX:r,cropY:n,cropWidth:s,cropHeight:a}=e,d=await l(e.src),c=d.width*s,p=d.height*a,g=e.width/e.height;let f,u;g>=c/p?(f=c,u=c/g):(f=p*g,u=p);const y=f/s,k=u/a,x=r*d.width,w=n*d.height,$=Math.max(e.width/d.width,e.height/d.height),v={position:"absolute",width:`${Math.round(y*$)}px`,height:`${Math.round(k*$)}px`,left:-Math.round(x*$)+"px",top:-Math.round(w*$)+"px",objectFit:"fill"},j=`video-${e.id}`,O=e.borderSize&&b.isGradient(e.borderColor),S=O?Math.max(0,e.cornerRadius-e.borderSize):e.cornerRadius,z=h("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:S+"px",border:e.borderSize&&!O?`${e.borderSize}px solid ${e.borderColor}`:"none"}},h("video",{id:j,src:e.src,style:v,controls:!0,playsInline:!0,muted:!0,volume:e.volume}));if(O){const t=h("div",{style:{width:"100%",height:"100%",borderRadius:e.cornerRadius+"px",background:m(e.borderColor),padding:e.borderSize+"px",boxSizing:"border-box"}},z);return i&&i({dom:t,element:e})||t}return i&&i({dom:z,element:e})||z},gif:y,table:async({element:e})=>{const t=e.rows,o=e.cols,i=e.colWidths,r=e.rowHeights,n=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],s=(e.cells||[]).map(t=>{if(!t){return t}const o=Object.assign({},t);for(const i of n){void 0===o[i]&&(o[i]=e[i])}return o}),a=[];for(let d=0;d<t;d++){const t=[];for(let i=0;i<o;i++){const n=s[d*o+i];if(!n||n.mergedInto){continue}const a=n.cellPadding||4,l=n.colSpan||1,c=n.rowSpan||1,p=t=>{var o,i,r,s,a;const l=null===(o=n.borders)||void 0===o?void 0:o[t];return`${null!==(i=null==l?void 0:l.width)&&void 0!==i?i:e.borderWidth}px ${null!==(s=null!==(r=null==l?void 0:l.style)&&void 0!==r?r:e.borderStyle)&&void 0!==s?s:"solid"} ${null!==(a=null==l?void 0:l.color)&&void 0!==a?a:e.borderColor}`},f={style:{padding:a+"px",background:n.cellBackground||"transparent",fontSize:(n.fontSize||12)+"px",fontFamily:`'${n.fontFamily||"Roboto"}'`,fontWeight:n.fontWeight||"normal",fontStyle:n.fontStyle||"normal",color:n.fill||"black",textAlign:n.align||"left",verticalAlign:n.verticalAlign||"top",lineHeight:String(n.lineHeight||1.2),letterSpacing:n.letterSpacing?n.letterSpacing*(n.fontSize||12)+"px":void 0,textDecoration:n.textDecoration||"none",textTransform:n.textTransform||"none",borderTop:p("top"),borderRight:p("right"),borderBottom:p("bottom"),borderLeft:p("left"),overflow:"hidden",wordBreak:"break-word",whiteSpace:"pre-wrap",height:r[d]*e.height+"px"}};l>1&&(f.colspan=String(l)),c>1&&(f.rowspan=String(c)),t.push(h("td",f,g(n.text||"")))}a.push(h("tr",{},...t))}const l=i.map(e=>h("col",{style:{width:100*e+"%"}}));return h("table",{style:{width:"100%",height:"100%",borderCollapse:"collapse",tableLayout:"fixed"}},h("colgroup",{},...l),h("tbody",{},...a))}};async function w({element:e,page:t,store:o,elementHook:i}){var r;let n=await x[e.type];if(n||(n=()=>h("div",{}),console.error(`HTML export does not support ${e.type} type...`)),!e.visible){return null}const l=await n({element:e,page:t,store:o}),d=[],c=[];if(e.blurEnabled&&d.push(`blur(${e.blurRadius/2}px)`),e.brightnessEnabled&&d.push(`brightness(${100*e.brightness+100}%)`),e.sepiaEnabled&&d.push("sepia()"),e.grayscaleEnabled&&d.push("grayscale()"),e.filters){for(const[g,f]of Object.entries(e.filters)){const e=a(s[g],f.intensity);e&&(d.push(e.filter),e.html&&c.push(e.html))}}if(e.shadowEnabled){const t=function(e,t){if(1===t){return e}const o=f.Util.colorToRGBA(e);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*t})`:e}(e.shadowColor,null!==(r=e.shadowOpacity)&&void 0!==r?r:1);d.push(`drop-shadow(${e.shadowOffsetX}px ${e.shadowOffsetY}px ${e.shadowBlur/2}px ${t})`)}const p=h("div",{id:e.id,style:{position:"absolute",left:e.x+"px",top:e.y+"px",width:e.width+"px",height:e.height+"px",transform:`rotate(${e.rotation}deg)`,transformOrigin:"top left",opacity:e.opacity,display:e.visible&&e.showInExport?"block":"none",filter:d.join(" ")||"none"}},l,...c);return i&&i({dom:p,element:e})||p}export async function jsonToDOM({json:e,elementHook:i}){const r=await Promise.all(e.pages.map(r=>async function({page:e,store:i,elementHook:r}){const n=await Promise.all(e.children.map(t=>w({element:t,page:e,store:i,elementHook:r}))),s="auto"===e.width?i.width:e.width,a="auto"===e.height?i.height:e.height;let l={};if(e.background.indexOf("url")>=0||e.background.indexOf("http")>=0||e.background.indexOf(".jpg")>=0||e.background.indexOf(".png")>=0||e.background.indexOf(".jpeg")>=0){const{width:r,height:l}=await o(e.background),d=await y({element:Object.assign({x:0,y:0,width:s,height:a,src:e.background,cornerRadius:0},t({width:s,height:a},{width:r,height:l})),page:e,store:i});n.unshift(d)}else{l=Object.assign(Object.assign({},l),{backgroundColor:e.background})}return h("div",{className:"page",id:e.id,style:Object.assign(Object.assign({},l),{width:s+"px",height:a+"px",overflow:"hidden",position:"relative"})},...n)}({page:r,store:e,elementHook:i}))),n=[];c({children:e.pages},e=>{"text"!==e.type&&"tablecell"!==e.type&&"table"!==e.type||!e.fontFamily||-1!==n.indexOf(e.fontFamily)||n.push(e.fontFamily)});const s=n.map(t=>{const o=e.fonts.find(e=>e.fontFamily===t);if(o){const e=(o.styles||(o.url?[{src:`url("${o.url}")`}]:[])).map(e=>`\n @font-face {\n font-family: '${o.fontFamily}';\n src: ${e.src};\n font-style: ${e.fontStyle||"normal"};\n font-weight: ${e.fontWeight||"normal"};\n font-display: swap;\n }`).join("\n");return h("style",{},e)}return h("link",{href:d(t),rel:"stylesheet"})});return h("div",{className:"design"},...s,...r)}const $=({dom:t})=>{if("string"==typeof t){return t}if(!t){return""}const o=t.props,{innerHTML:i}=o,r=e(o,["innerHTML"]),n=Object.keys(r).map(e=>"style"===e&&"object"==typeof r[e]?`style="${Object.keys(r[e]).filter(t=>null!=r[e][t]).map(t=>`${t.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}: ${r[e][t]}`).join("; ")}"`:((e,t)=>null==t||""===t?"":"object"==typeof t?`${e}="${Object.keys(t).map(e=>`${e.replace(/-([a-z])/g,e=>e[1].toUpperCase())}:${t[e]};`).join(" ")}"`:`${e}="${t}"`)(e,r[e])).filter(e=>e&&e.trim().length>0).join(" ");return`<${t.type} ${n}>${i||t.children.map(e=>$({dom:e})).join("")}</${t.type}>`};export async function jsonToHTML({json:e,elementHook:t}){const o=await jsonToDOM({json:e,elementHook:t});return $({dom:o})}
|
|
1
|
+
var t=this&&this.__rest||function(t,e){var o={};for(var i in t){Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(o[i]=t[i])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(i=Object.getOwnPropertySymbols(t);r<i.length;r++){e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(o[i[r]]=t[i[r]])}}return o};import{getCrop as e,loadImage as o}from"./image.js";import*as i from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{resetStyleContent as n}from"./reset-style.js";import{Effects as s,shapeFilterToCSS as a}from"./filters.js";import{getVideoSize as l}from"./video.js";import{getGoogleFontsUrl as d}from"./fonts.js";import{forEveryNode as c}from"../model/group-model.js";import{getCurvePath as p}from"../canvas/text-element.js";import{removeTags as g,parseHtmlToSegments as f}from"./text.js";import b from"konva";import*as u from"./gradient.js";import{createSVGGradientDef as m,segmentsToTspans as y}from"./text-html.js";export const h=(t,e,...o)=>({type:t,props:e,children:o||[]});function k(t){return u.isGradient(t),t}export function fixRatio(t){var e=(new DOMParser).parseFromString(t,"image/svg+xml");return e.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(e)}const x=async({element:t,page:e,store:r})=>{let{src:n}=t;if("svg"===t.type){let e=await i.urlToString(n);e=fixRatio(e),n=Object.keys(t.colorsReplace).length?i.replaceColors(e,new Map(Object.entries(t.colorsReplace))):i.svgToURL(e)}let s="";t.flipX&&(s+="scaleX(-1)"),t.flipY&&(s+="scaleY(-1)"),s||(s="none");const a={};if("svg"===t.type&&t.maskSrc){const e=await i.urlToBase64(n);a["mask-image"]=`url(${e})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${e})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat",n=t.maskSrc}else if(t.clipSrc){const e=t.clipSrc,o=await i.urlToBase64(e);a["mask-image"]=`url(${o})`,a["mask-size"]="100% 100%",a["mask-position"]="0 0",a["mask-repeat"]="no-repeat",a["-webkit-mask-image"]=`url(${o})`,a["-webkit-mask-size"]="100% 100%",a["-webkit-mask-position"]="0 0",a["-webkit-mask-repeat"]="no-repeat"}const l=await o(n),d=l.width*t.cropWidth,c=l.height*t.cropHeight,p=t.width/t.height;let g,f;const b=d/c,m="svg"===t.type||t.stretchEnabled;m?(g=d,f=c):p>=b?(g=d,f=d/p):(g=c*p,f=c);const y=g/l.width,x=f/l.height,w=g/f>t.width/t.height?t.height/f:t.width/g,$=m?t.width/g:w,v=m?t.height/f:w,j=g*$/y,S=f*v/x;let O=t.cropX*$*l.width,z=t.cropY*v*l.height;t.flipX&&(O=(1-t.cropX-t.cropWidth)*$*l.width),t.flipY&&(z=(1-t.cropY-t.cropHeight)*v*l.height);const H=t.borderSize&&u.isGradient(t.borderColor),W=H?Math.max(0,t.cornerRadius-t.borderSize):t.cornerRadius,T=h("div",{style:Object.assign(Object.assign({},a),{width:"100%",height:"100%",borderRadius:W+"px",border:t.borderSize&&!H?`${t.borderSize}px solid ${t.borderColor}`:"none",backgroundRepeat:"no-repeat",backgroundImage:`url(${n})`,transform:s,backgroundSize:`${Math.round(j)}px ${Math.round(S)}px`,backgroundPositionX:-Math.round(O)+"px",backgroundPositionY:-Math.round(z)+"px"})});return H?h("div",{style:{width:"100%",height:"100%",borderRadius:t.cornerRadius+"px",background:k(t.borderColor),padding:t.borderSize+"px",boxSizing:"border-box"}},T):T},w=({element:t,type:e})=>{const o={"stroke-width":t.height,stroke:t.color,"stroke-linecap":"round","stroke-linejoin":"round",opacity:t.opacity},i=Object.assign(Object.assign({},o),{fill:t.color}),r=Object.assign(Object.assign({},o),{fill:"none"});return"arrow"===e?h("polyline",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},r)):"triangle"===e?h("polygon",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},i)):"bar"===e?h("polyline",Object.assign({points:`0,${2*-t.height} 0,${2*t.height}`},r)):"circle"===e?h("circle",Object.assign({cx:2*t.height,cy:0,r:2*t.height},i)):"square"===e?h("polygon",Object.assign({points:`0,${2*-t.height} ${4*t.height},${2*-t.height} ${4*t.height},${2*t.height} 0,${2*t.height}`},i)):null},$={image:x,svg:x,text:async({element:t,page:e,store:o})=>{const i=u.isGradient(t.fill),r=u.isGradient(t.stroke);if(t.curveEnabled){const e=p(t.width,t.height,t.curvePower,t.fontSize),o=f(t.text),n={fontWeight:t.fontWeight||"normal",fontStyle:t.fontStyle||"normal",fill:t.fill||"black"},s=y(o,n);let a=`\n <svg xmlns="http://www.w3.org/2000/svg" width="${t.width}" height="${t.height}" style="display: block;">\n <defs>\n <path id="curve-${t.id}" d="${e}" fill="none" />`;if(i){const e=`curve-fill-grad-${t.id}`;a+=m(t.fill,e)}if(r&&t.strokeWidth){const e=`curve-stroke-grad-${t.id}`;a+=m(t.stroke,e)}a+=`</defs>\n <text\n font-family="'${t.fontFamily}'"\n font-size="${t.fontSize}"\n font-weight="${t.fontWeight}"\n font-style="${t.fontStyle}"\n fill="${i?`url(#curve-fill-grad-${t.id})`:t.fill}"\n text-anchor="middle"\n dominant-baseline="central"\n letter-spacing="${t.letterSpacing*t.fontSize}px"${t.textDecoration?` text-decoration="${t.textDecoration}"`:""}${t.strokeWidth?` stroke="${r?`url(#curve-stroke-grad-${t.id})`:t.stroke}" stroke-width="${t.strokeWidth}" paint-order="stroke fill"`:""}>\n <textPath href="#curve-${t.id}" startOffset="50%">${s}</textPath>\n </text>\n </svg>`;const l=t.backgroundPadding*(t.fontSize*t.lineHeight),d=t.backgroundEnabled&&h("div",{style:{position:"absolute",top:-l/2+"px",left:-l/2+"px",width:t.width+l+"px",height:t.height+l+"px",backgroundColor:t.backgroundColor,opacity:t.backgroundOpacity,borderRadius:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5)+"px"}}),c=h("div",{style:{width:"100%",height:"100%",position:"absolute",top:0,left:0},innerHTML:a});return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,c)}const s=t=>({backgroundImage:t,backgroundSize:"100% 100%",backgroundRepeat:"repeat",WebkitBackgroundClip:"text",MozBackgroundClip:"text",backgroundClip:"text",WebkitTextFillColor:"transparent",MozTextFillColor:"transparent",color:"transparent"});let a={top:0,left:0};i&&(a=Object.assign(Object.assign({},a),s(t.fill)));const l=t.backgroundPadding*(t.fontSize*t.lineHeight),d=h("div",{style:{position:"absolute",top:-l/2+"px",left:-l/2+"px",display:t.backgroundEnabled?"block":"none",width:t.width+l+"px",height:t.height+l+"px",backgroundColor:t.backgroundColor,opacity:t.backgroundOpacity,borderRadius:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5)+"px"}});"middle"===t.verticalAlign?(a.top="50%",a.transform="translateY(-50%)"):"bottom"===t.verticalAlign&&(a.bottom=0);const c=/<[a-z][\s\S]*>/i.test(t.text),g=c?t.text:t.text.split("\n").join("<br />");if(t.strokeWidth&&(r||i&&!r)){const e=Object.assign({position:"absolute",width:t.width+"px",whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:t.fontSize+"px",textAlign:t.align,fontFamily:`'${t.fontFamily}'`,textDecoration:t.textDecoration||"none",textDecorationColor:t.textDecoration?t.fill:void 0,textTransform:t.textTransform||"none",lineHeight:t.lineHeight,letterSpacing:t.letterSpacing*t.fontSize+"px",fontStyle:t.fontStyle,fontWeight:t.fontWeight},a),o=r?Object.assign(Object.assign(Object.assign({},e),s(t.stroke)),{WebkitTextStroke:`${t.strokeWidth}px transparent`}):Object.assign(Object.assign({},e),{color:"transparent",WebkitTextStroke:`${t.strokeWidth}px ${t.stroke}`}),l=i?Object.assign(Object.assign({},e),s(t.fill)):Object.assign(Object.assign({},e),{color:t.fill}),p="el-"+t.id,f=c?`<style>#${p} {${n}}</style>`:"",b=h("div",{style:Object.assign(Object.assign({},o),{position:"absolute",top:0,left:0,pointerEvents:"none"}),"aria-hidden":"true",innerHTML:c?`${f}${g}`:g}),u=h("div",Object.assign(Object.assign({style:Object.assign(Object.assign({},l),{position:"relative"})},c?{id:p}:{}),{innerHTML:c?`${f}${g}`:g}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,h("div",{style:{position:"relative",width:t.width+"px"}},b,u))}const b=Object.assign(Object.assign({},a),{position:"absolute",width:t.width+"px",color:t.fill,whiteSpace:"pre-wrap",wordBreak:"break-word",fontSize:t.fontSize+"px",textAlign:t.align,fontFamily:`'${t.fontFamily}'`,textDecoration:t.textDecoration||"none",textDecorationColor:t.textDecoration?t.fill:void 0,textTransform:t.textTransform||"none",lineHeight:t.lineHeight,letterSpacing:t.letterSpacing*t.fontSize+"px",fontStyle:t.fontStyle,fontWeight:t.fontWeight,WebkitTextStroke:t.strokeWidth?`${t.strokeWidth}px ${t.stroke}`:void 0,paintOrder:t.strokeWidth?"stroke fill":void 0}),k="el-"+t.id,x=c?{id:k}:{},w=`<style>#${k} {${n}}</style>`,$=h("div",Object.assign(Object.assign({style:b},x),{innerHTML:c?`${w}${g}`:g}));return h("div",{style:{position:"relative",width:"100%",height:"100%"}},d,$)},line:async({element:t,page:e,store:o})=>h("svg",{style:{width:"100%",height:"100%",contain:"layout style size",overflow:"visible"}},h("line",{x1:0,y1:t.height/2,x2:t.width,y2:t.height/2,stroke:t.color,"stroke-width":t.height,"stroke-dasharray":t.dash&&t.dash.length?t.dash.map(e=>e*t.height).join(" "):void 0}),h("g",{transform:`translate(0 ${t.height/2})`},w({element:t,type:t.startHead})),h("g",{transform:`translate(${t.width} ${t.height/2}) rotate(180)`},w({element:t,type:t.endHead}))),figure:async({element:t,page:e,store:o,elementHook:i})=>{let n=r(t);if(t.strokeWidth&&u.isGradient(t.stroke)){const e=`figure-stroke-grad-${t.id}`,o=m(t.stroke,e);n=n.replace(new RegExp(`stroke="${t.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`stroke="url(#${e})"`),n=n.replace("</defs>",`${o}</defs>`)}if(u.isGradient(t.fill)){const e=`figure-fill-grad-${t.id}`,o=m(t.fill,e);n=n.replace(new RegExp(`fill="${t.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}"`,"g"),`fill="url(#${e})"`),n=n.replace("</defs>",`${o}</defs>`)}const s=h("div",{innerHTML:n});return i&&i({dom:s,element:t})||s},group:async({element:t,page:e,store:o,elementHook:i})=>{const r=await Promise.all(t.children.map(t=>v({element:t,page:e,store:o,elementHook:i}))),n=h("div",{style:{transformOrigin:"top left",opacity:t.opacity}},...r);return i&&i({dom:n,element:t})||n},video:async({element:t,page:e,store:o,elementHook:i})=>{const{cropX:r,cropY:n,cropWidth:s,cropHeight:a}=t,d=await l(t.src),c=d.width*s,p=d.height*a,g=t.width/t.height;let f,b;g>=c/p?(f=c,b=c/g):(f=p*g,b=p);const m=f/s,y=b/a,x=r*d.width,w=n*d.height,$=Math.max(t.width/d.width,t.height/d.height),v={position:"absolute",width:`${Math.round(m*$)}px`,height:`${Math.round(y*$)}px`,left:-Math.round(x*$)+"px",top:-Math.round(w*$)+"px",objectFit:"fill"},j=`video-${t.id}`,S=t.borderSize&&u.isGradient(t.borderColor),O=S?Math.max(0,t.cornerRadius-t.borderSize):t.cornerRadius,z=h("div",{style:{position:"relative",width:"100%",height:"100%",overflow:"hidden",borderRadius:O+"px",border:t.borderSize&&!S?`${t.borderSize}px solid ${t.borderColor}`:"none"}},h("video",{id:j,src:t.src,style:v,controls:!0,playsInline:!0,muted:!0,volume:t.volume}));if(S){const e=h("div",{style:{width:"100%",height:"100%",borderRadius:t.cornerRadius+"px",background:k(t.borderColor),padding:t.borderSize+"px",boxSizing:"border-box"}},z);return i&&i({dom:e,element:t})||e}return i&&i({dom:z,element:t})||z},gif:x,table:async({element:t})=>{const e=t.rows,o=t.cols,i=t.colWidths,r=t.rowHeights,n=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],s=(t.cells||[]).map(e=>{if(!e){return e}const o=Object.assign({},e);for(const i of n){void 0===o[i]&&(o[i]=t[i])}return o}),a=[];for(let d=0;d<e;d++){const e=[];for(let i=0;i<o;i++){const n=s[d*o+i];if(!n||n.mergedInto){continue}const a=n.cellPadding||4,l=n.colSpan||1,c=n.rowSpan||1,p=e=>{var o,i,r,s,a;const l=null===(o=n.borders)||void 0===o?void 0:o[e];return`${null!==(i=null==l?void 0:l.width)&&void 0!==i?i:t.borderWidth}px ${null!==(s=null!==(r=null==l?void 0:l.style)&&void 0!==r?r:t.borderStyle)&&void 0!==s?s:"solid"} ${null!==(a=null==l?void 0:l.color)&&void 0!==a?a:t.borderColor}`},f={style:{padding:a+"px",background:n.cellBackground||"transparent",fontSize:(n.fontSize||12)+"px",fontFamily:`'${n.fontFamily||"Roboto"}'`,fontWeight:n.fontWeight||"normal",fontStyle:n.fontStyle||"normal",color:n.fill||"black",textAlign:n.align||"left",verticalAlign:n.verticalAlign||"top",lineHeight:String(n.lineHeight||1.2),letterSpacing:n.letterSpacing?n.letterSpacing*(n.fontSize||12)+"px":void 0,textDecoration:n.textDecoration||"none",textTransform:n.textTransform||"none",borderTop:p("top"),borderRight:p("right"),borderBottom:p("bottom"),borderLeft:p("left"),overflow:"hidden",wordBreak:"break-word",whiteSpace:"pre-wrap",height:r[d]*t.height+"px"}};l>1&&(f.colspan=String(l)),c>1&&(f.rowspan=String(c)),e.push(h("td",f,g(n.text||"")))}a.push(h("tr",{},...e))}const l=i.map(t=>h("col",{style:{width:100*t+"%"}}));return h("table",{style:{width:"100%",height:"100%",borderCollapse:"collapse",tableLayout:"fixed"}},h("colgroup",{},...l),h("tbody",{},...a))}};async function v({element:t,page:e,store:o,elementHook:i}){var r;let n=await $[t.type];if(n||(n=()=>h("div",{}),console.error(`HTML export does not support ${t.type} type...`)),!t.visible){return null}const l=await n({element:t,page:e,store:o}),d=[],c=[];if(t.blurEnabled&&d.push(`blur(${t.blurRadius/2}px)`),t.brightnessEnabled&&d.push(`brightness(${100*t.brightness+100}%)`),t.sepiaEnabled&&d.push("sepia()"),t.grayscaleEnabled&&d.push("grayscale()"),t.filters){for(const[g,f]of Object.entries(t.filters)){const t=a(s[g],f.intensity);t&&(d.push(t.filter),t.html&&c.push(t.html))}}if(t.shadowEnabled){const e=function(t,e){if(1===e){return t}const o=b.Util.colorToRGBA(t);return o?`rgba(${o.r}, ${o.g}, ${o.b}, ${o.a*e})`:t}(t.shadowColor,null!==(r=t.shadowOpacity)&&void 0!==r?r:1);d.push(`drop-shadow(${t.shadowOffsetX}px ${t.shadowOffsetY}px ${t.shadowBlur/2}px ${e})`)}const p=h("div",{id:t.id,style:{position:"absolute",left:t.x+"px",top:t.y+"px",width:t.width+"px",height:t.height+"px",transform:`rotate(${t.rotation}deg)`,transformOrigin:"top left",opacity:t.opacity,display:t.visible&&t.showInExport?"block":"none",filter:d.join(" ")||"none"}},l,...c);return i&&i({dom:p,element:t})||p}export async function jsonToDOM({json:t,elementHook:i}){const r=await Promise.all(t.pages.map(r=>async function({page:t,store:i,elementHook:r}){const n=await Promise.all(t.children.map(e=>v({element:e,page:t,store:i,elementHook:r}))),s="auto"===t.width?i.width:t.width,a="auto"===t.height?i.height:t.height;let l={};if(t.background.indexOf("url")>=0||t.background.indexOf("http")>=0||t.background.indexOf(".jpg")>=0||t.background.indexOf(".png")>=0||t.background.indexOf(".jpeg")>=0){const{width:r,height:l}=await o(t.background),d=await x({element:Object.assign({x:0,y:0,width:s,height:a,src:t.background,cornerRadius:0},e({width:s,height:a},{width:r,height:l})),page:t,store:i});n.unshift(d)}else{l=Object.assign(Object.assign({},l),{backgroundColor:t.background})}return h("div",{className:"page",id:t.id,style:Object.assign(Object.assign({},l),{width:s+"px",height:a+"px",overflow:"hidden",position:"relative"})},...n)}({page:r,store:t,elementHook:i}))),n=[];c({children:t.pages},t=>{"text"!==t.type&&"tablecell"!==t.type&&"table"!==t.type||!t.fontFamily||-1!==n.indexOf(t.fontFamily)||n.push(t.fontFamily)});const s=n.map(e=>{const o=t.fonts.find(t=>t.fontFamily===e);if(o){const t=(o.styles||(o.url?[{src:`url("${o.url}")`}]:[])).map(t=>`\n @font-face {\n font-family: '${o.fontFamily}';\n src: ${t.src};\n font-style: ${t.fontStyle||"normal"};\n font-weight: ${t.fontWeight||"normal"};\n font-display: swap;\n }`).join("\n");return h("style",{},t)}return h("link",{href:d(e),rel:"stylesheet"})});return h("div",{className:"design"},...s,...r)}const j=({dom:e})=>{if("string"==typeof e){return e}if(!e){return""}const o=e.props,{innerHTML:i}=o,r=t(o,["innerHTML"]),n=Object.keys(r).map(t=>"style"===t&&"object"==typeof r[t]?`style="${Object.keys(r[t]).filter(e=>null!=r[t][e]).map(e=>`${e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}: ${r[t][e]}`).join("; ")}"`:((t,e)=>null==e||""===e?"":"object"==typeof e?`${t}="${Object.keys(e).map(t=>`${t.replace(/-([a-z])/g,t=>t[1].toUpperCase())}:${e[t]};`).join(" ")}"`:`${t}="${e}"`)(t,r[t])).filter(t=>t&&t.trim().length>0).join(" ");return`<${e.type} ${n}>${i||e.children.map(t=>j({dom:t})).join("")}</${e.type}>`};export async function jsonToHTML({json:t,elementHook:e}){const o=await jsonToDOM({json:t,elementHook:e});return j({dom:o})}
|
package/utils/to-svg.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var t=this&&this.__rest||function(t,e){var i={};for(var o in t){Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(i[o]=t[o])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(t);n<o.length;n++){e.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(t,o[n])&&(i[o[n]]=t[o[n]])}}return i};import{cropImage as e,getCrop as i,loadImage as o}from"./image.js";import*as n from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{Effects as l,shapeFilterToCSS as s}from"./filters.js";import{removeTags as a}from"./text.js";import{getCurvePath as h}from"../canvas/text-element.js";import*as c from"./gradient.js";export const forEveryNode=(t,e)=>{if(t.children){for(const i of t.children){if(!0===e(i)){break}forEveryNode(i,e)}}if(t.cells){for(const i of t.cells){if(!0===e(i)){break}}}};const d=(t,e,...i)=>({type:t,props:e,children:i||[]});function g(t,e){if(!c.isGradient(t)){return null}const{stops:i,rotation:o}=c.parseColor(t),n=o*Math.PI/180,r=.5-.5*Math.sin(n),l=.5+.5*Math.cos(n),s=.5+.5*Math.sin(n),a=.5-.5*Math.cos(n),h=i.map(({offset:t,color:e})=>d("stop",{offset:100*t+"%","stop-color":e}));return d("linearGradient",{id:e,x1:100*r+"%",y1:100*l+"%",x2:100*s+"%",y2:100*a+"%"},...h)}export function fixRatio(t){var e=(new DOMParser).parseFromString(t,"image/svg+xml");return e.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(e)}const f=async t=>{try{const e=await fetch(t);if("undefined"!=typeof Buffer){const t=await e.arrayBuffer(),i=Buffer.from(t).toString("base64");return`data:${e.headers.get("content-type")||"image/png"};base64,${i}`}{const t=await e.blob();return new Promise((e,i)=>{const o=new FileReader;o.onloadend=()=>e(o.result),o.onerror=i,o.readAsDataURL(t)})}}catch(e){return console.error("Error converting URL to data URL:",e),t}},p=async({element:t,page:e,store:i})=>{let{src:r}=t;if("svg"===t.type){const e=await n.urlToString(r);r=n.replaceColors(e,new Map(Object.entries(t.colorsReplace)))}else{r=await f(r)}let l,s,a,h,p="";if(t.flipX||t.flipY){const e=t.flipX?-1:1,i=t.flipY?-1:1,o=t.width/2,n=t.height/2;p=`translate(${o}, ${n}) scale(${e}, ${i}) translate(${-o}, ${-n})`}t.clipSrc&&(l=`clip-img-mask-${t.id}`,s=await f(t.clipSrc)),t.maskSrc&&(a=`mask-img-${t.id}`,h=await f(t.maskSrc));const u=await o(r),m=u.width*t.cropWidth,y=u.height*t.cropHeight,w=t.width/t.height;let x,k;const b=m/y,$="boolean"==typeof t.stretchEnabled&&t.stretchEnabled||"svg"===t.type;$?(x=m,k=y):w>=b?(x=m,k=m/w):(x=y*w,k=y);const v=x/u.width,j=k/u.height,O=x/k>t.width/t.height?t.height/k:t.width/x,S=$?t.width/x:O,H=$?t.height/k:O,M=x*S/v,E=k*H/j;let W=t.cropX*u.width*S,P=t.cropY*u.height*H;t.flipX&&(W=(1-t.cropX-t.cropWidth)*u.width*S),t.flipY&&(P=(1-t.cropY-t.cropHeight)*u.height*H);const R=`clip-${t.id}`,T=t.cornerRadius||0,z=r.replace(/&/g,"&"),C={x:-W,y:-P,width:M,height:E,preserveAspectRatio:"none","clip-path":`url(#${R})`},L=[d("clipPath",{id:R},d("rect",{x:0,y:0,width:t.width,height:t.height,rx:T||void 0,ry:T||void 0}))];l&&s&&L.push(d("mask",{id:l,maskUnits:"userSpaceOnUse","mask-type":"alpha"},d("image",{href:s.replace(/&/g,"&"),x:0,y:0,width:t.width,height:t.height,preserveAspectRatio:"none"}))),a&&L.push(d("mask",{id:a,maskUnits:"userSpaceOnUse","mask-type":"alpha"},d("image",Object.assign({href:z},C))));let F=z;const B={};a&&h&&(F=h.replace(/&/g,"&"),B.mask=`url(#${a})`);const A={};l&&(A.mask=`url(#${l})`);const U=t.borderSize||0,D=U>0&&c.isGradient(t.borderColor),G=D?`border-grad-${t.id}`:null;if(D){const e=g(t.borderColor,G);e&&L.push(e)}const N=U>0?d("rect",{x:U/2,y:U/2,width:Math.max(0,t.width-U),height:Math.max(0,t.height-U),fill:"none",stroke:D?`url(#${G})`:t.borderColor,"stroke-width":U,rx:Math.max(0,T-U)||void 0,ry:Math.max(0,T-U)||void 0}):null,X=d("g",{},d("defs",{},...L),d("image",Object.assign(Object.assign({href:F},C),B)),N);return d("g",A,p?d("g",{transform:p},X):X)},u=({element:t,type:e})=>{const i={"stroke-width":t.height,stroke:t.color,"stroke-linecap":"round","stroke-linejoin":"round"},o=Object.assign(Object.assign({},i),{fill:t.color}),n=Object.assign(Object.assign({},i),{fill:"none"});return"arrow"===e?d("polyline",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},n)):"triangle"===e?d("polygon",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},o)):"bar"===e?d("polyline",Object.assign({points:`0,${2*-t.height} 0,${2*t.height}`},n)):"circle"===e?d("circle",Object.assign({cx:2*t.height,cy:0,r:2*t.height},o)):"square"===e?d("polygon",Object.assign({points:`0,${2*-t.height} ${4*t.height},${2*-t.height} ${4*t.height},${2*t.height} 0,${2*t.height}`},o)):null},m={image:p,svg:p,text:async({element:t,page:e,store:i})=>{const o=c.isGradient(t.fill),n=c.isGradient(t.stroke);if(t.curveEnabled){const e=h(t.width,t.height,t.curvePower,t.fontSize),i=`curve-path-${t.id}`,r=a(t.text).replace(/\n/g," "),l=t.backgroundPadding*(t.fontSize*t.lineHeight*.5),s=t.backgroundEnabled?d("rect",{x:-l,y:-l,width:t.width+2*l,height:t.height+2*l,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5),ry:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5)}):null,c=[d("path",{id:i,d:e,fill:"none"})],f=t.strokeWidth&&(n||o&&!n);if(o){const e=`curve-fill-grad-${t.id}`,i=g(t.fill,e);i&&c.push(i)}if(n&&t.strokeWidth){const e=`curve-stroke-grad-${t.id}`,i=g(t.stroke,e);i&&c.push(i)}if(f){const e={"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px"},l=n?`url(#curve-stroke-grad-${t.id})`:t.stroke,a=d("text",Object.assign(Object.assign({},e),{fill:l,"stroke-width":t.strokeWidth,stroke:l}),d("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:r})),h=o?`url(#curve-fill-grad-${t.id})`:t.fill,g=d("text",Object.assign(Object.assign({},e),{fill:h}),d("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:r}));return d("g",{},s,d("defs",{},...c),a,g)}return d("g",{},s,d("defs",{},...c),d("text",{fill:o?`url(#curve-fill-grad-${t.id})`:t.fill,"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?n?`url(#curve-stroke-grad-${t.id})`:t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},d("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:r})))}const r=(t,e,i,o,n,r=0)=>{const l=document.createElement("canvas").getContext("2d");return l.font=`${n} ${o} ${e}px ${i}`,l.measureText(t).width+Math.max(0,(t?t.length:0)-1)*r*e},l=(t,e,i,o,n,l,s=0)=>{const a=[];return t.split("\n").forEach(t=>{const h=t.split(" ");let c="";for(let d=0;d<h.length;d++){const t=c+h[d]+" ";r(t,i,o,n,l,s)>e+.5&&d>0?(a.push(c.trim()),c=h[d]+" "):c=t}a.push(c.trim())}),a};let s=a(t.text);"uppercase"==t.textTransform&&(s=s.toUpperCase());let f=t.fontSize,p=[];for(;;){p=l(s,t.width,f,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing);const e=Math.max(...p.map(e=>r(e,f,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing))),i=p.length*f*t.lineHeight;if(e<=t.width&&i<=t.height){break}if(f-=1,f<4){break}}const u=f*t.lineHeight,m=p.length*u;let y=f;"middle"===t.verticalAlign?y=(t.height-m)/2+f:"bottom"===t.verticalAlign&&(y=t.height-m+f);const w="center"===t.align?"middle":"right"===t.align?"end":"start",x=p.map((e,i)=>d("tspan",{x:"center"===t.align?t.width/2:"right"===t.align?t.width:0,dy:0===i?0:u,innerHTML:e})),k=t.backgroundPadding*(f*t.lineHeight*.5),b=t.backgroundEnabled?d("rect",{x:-k,y:-k,width:t.width+2*k,height:t.height+2*k,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(f*t.lineHeight*.5),ry:t.backgroundCornerRadius*(f*t.lineHeight*.5)}):null,$=[],v=t.strokeWidth&&(n||o&&!n);if(o){const e=`text-fill-grad-${t.id}`,i=g(t.fill,e);i&&$.push(i)}if(n&&t.strokeWidth){const e=`text-stroke-grad-${t.id}`,i=g(t.stroke,e);i&&$.push(i)}if(v){const e={y,"font-size":f+"px","text-anchor":w,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*f+"px"},i=n?`url(#text-stroke-grad-${t.id})`:t.stroke,r=d("text",Object.assign(Object.assign({},e),{fill:i,"stroke-width":t.strokeWidth,stroke:i}),...x.map(t=>d("tspan",t.props,t.props.innerHTML))),l=o?`url(#text-fill-grad-${t.id})`:t.fill,s=d("text",Object.assign(Object.assign({},e),{fill:l}),...x.map(t=>d("tspan",t.props,t.props.innerHTML)));return d("g",{},b,$.length>0?d("defs",{},...$):null,r,s)}return d("g",{},b,$.length>0?d("defs",{},...$):null,d("text",{fill:o?`url(#text-fill-grad-${t.id})`:t.fill,y,"font-size":f+"px","text-anchor":w,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*f+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},...x))},line:async({element:t,page:e,store:i})=>d("g",{},d("line",{x1:0,y1:t.height/2,x2:t.width,y2:t.height/2,stroke:t.color,"stroke-width":t.height,"stroke-dasharray":t.dash&&t.dash.length?t.dash.map(e=>e*t.height).join(" "):void 0}),d("g",{transform:`translate(0 ${t.height/2})`},u({element:t,type:t.startHead})),d("g",{transform:`translate(${t.width} ${t.height/2}) rotate(180)`},u({element:t,type:t.endHead}))),figure:async({element:t,page:e,store:i,elementHook:o})=>{let n=function(t){let e=t.replace(/<svg[^>]*>/,"");return e=e.replace(/<\/svg>/,""),e}(r(t));const l=[];if(t.strokeWidth&&c.isGradient(t.stroke)){const e=`figure-stroke-grad-${t.id}`,i=g(t.stroke,e);if(i){l.push(i);const o=t.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");n=n.replace(new RegExp(`stroke="${o}"`,"g"),`stroke="url(#${e})"`)}}if(c.isGradient(t.fill)){const e=`figure-fill-grad-${t.id}`,i=g(t.fill,e);if(i){l.push(i);const o=t.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");n=n.replace(new RegExp(`fill="${o}"`,"g"),`fill="url(#${e})"`)}}if(l.length>0){const e=d("g",{},d("defs",{},...l),d("g",{innerHTML:n}));return o&&o({dom:e,element:t})||e}const s=d("g",{innerHTML:n});return o&&o({dom:s,element:t})||s},group:async({element:t,page:e,store:i,elementHook:o})=>{const n=await Promise.all(t.children.map(t=>y({element:t,page:e,store:i,elementHook:o}))),r=d("g",{style:{"transform-origin":"top left"}},...n);return o&&o({dom:r,element:t})||r},gif:p,table:async({element:t})=>{t.rows;const e=t.cols,i=t.colWidths,o=t.rowHeights,n=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],r=(t.cells||[]).map((i,o)=>{const r=Object.assign(Object.assign({},i),{row:Math.floor(o/e),col:o%e});for(const e of n){void 0===r[e]&&(r[e]=t[e])}return r}),l=[],s=(e,n,r,l)=>{let s=0;for(let o=0;o<n;o++){s+=i[o]*t.width}let a=0;for(let i=0;i<e;i++){a+=o[i]*t.height}let h=0;for(let o=n;o<n+l;o++){h+=(i[o]||0)*t.width}let c=0;for(let i=e;i<e+r;i++){c+=(o[i]||0)*t.height}return{x:s,y:a,width:h,height:c}};for(const a of r){if(!a.mergedInto&&a.cellBackground&&"transparent"!==a.cellBackground){s(a.row,a.col,a.colSpan||1,a.colSpan||1);const{x:t,y:e,width:i,height:o}=s(a.row,a.col,a.rowSpan||1,a.colSpan||1);l.push(d("rect",{x:t,y:e,width:i,height:o,fill:a.cellBackground}))}}const h=(t,e)=>"dashed"===t?`${4*e},${2*e}`:"dotted"===t?`${e},${e}`:void 0,c=(e,i)=>{var o,n,r,l,s;const a=null===(o=e.borders)||void 0===o?void 0:o[i];return{width:null!==(n=null==a?void 0:a.width)&&void 0!==n?n:t.borderWidth,style:null!==(l=null!==(r=null==a?void 0:a.style)&&void 0!==r?r:t.borderStyle)&&void 0!==l?l:"solid",color:null!==(s=null==a?void 0:a.color)&&void 0!==s?s:t.borderColor}};for(const a of r){if(a.mergedInto){continue}const t=s(a.row,a.col,a.rowSpan||1,a.colSpan||1);if(0===a.row){const e=c(a,"top");"none"!==e.style&&e.width>0&&l.push(d("line",{x1:t.x,y1:t.y+e.width/2,x2:t.x+t.width,y2:t.y+e.width/2,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}if(0===a.col){const e=c(a,"left");"none"!==e.style&&e.width>0&&l.push(d("line",{x1:t.x+e.width/2,y1:t.y,x2:t.x+e.width/2,y2:t.y+t.height,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}{const e=c(a,"bottom");"none"!==e.style&&e.width>0&&l.push(d("line",{x1:t.x,y1:t.y+t.height-e.width/2,x2:t.x+t.width,y2:t.y+t.height-e.width/2,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}{const e=c(a,"right");"none"!==e.style&&e.width>0&&l.push(d("line",{x1:t.x+t.width-e.width/2,y1:t.y,x2:t.x+t.width-e.width/2,y2:t.y+t.height,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}}for(const g of r){if(g.mergedInto){continue}let e=a(g.text||"");if(!e){continue}"uppercase"===g.textTransform&&(e=e.toUpperCase());const n=g.cellPadding||4;let r=0;for(let o=0;o<g.col;o++){r+=i[o]*t.width}let s=0;for(let i=0;i<g.row;i++){s+=o[i]*t.height}const h=i[g.col]*t.width,c=o[g.row]*t.height,f=g.fontSize||12,p=g.align||"left";let u=r+n,m="start";"center"===p?(u=r+h/2,m="middle"):"right"===p&&(u=r+h-n,m="end");let y=s+n+f;const w=g.verticalAlign||"top";"middle"===w?y=s+c/2+f/3:"bottom"===w&&(y=s+c-n),l.push(d("text",{x:u,y,"font-size":f,"font-family":g.fontFamily||"Roboto","font-weight":g.fontWeight||"normal","font-style":g.fontStyle||"normal",fill:g.fill||"black","text-anchor":m,"text-decoration":g.textDecoration||"none","letter-spacing":g.letterSpacing?g.letterSpacing*f+"px":void 0},e))}return d("g",{},...l)}};async function y({element:t,page:e,store:i,elementHook:o}){var n;let r=await m[t.type];r||(r=()=>d("g",{}),console.error(`SVG export does not support ${t.type} type...`));const a=await r({element:t,page:e,store:i}),h=[],c=[];if(t.blurEnabled&&h.push(`blur(${t.blurRadius/2}px)`),t.brightnessEnabled&&h.push(`brightness(${100*t.brightness+100}%)`),t.sepiaEnabled&&h.push("sepia()"),t.grayscaleEnabled&&h.push("grayscale()"),t.shadowEnabled&&h.push(`drop-shadow(${t.shadowOffsetX}px ${t.shadowOffsetY}px ${t.shadowBlur}px ${t.shadowColor})`),t.filters){for(const[d,f]of Object.entries(t.filters)){const t=s(l[d],f.intensity);if(t&&(h.push(t.filter),t.html)){const e=t.html.replace(/<svg([^>]*)>/,"<g$1>").replace(/<\/svg>/,"</g>");c.push(e)}}}const g=d("g",{className:"element",id:t.id,transform:"group"!==t.type?`translate(${t.x}, ${t.y}) rotate(${t.rotation})`:void 0,display:null===(n=t.visible)||void 0===n||n?void 0:"none",opacity:t.opacity,style:{"transform-origin":"top left",filter:h.join(" ")}},a,...c);return o&&o({dom:g,element:t})||g}async function w(t){try{const e=await fetch(t),i=e.headers.get("content-type")||"font/ttf",o=await e.arrayBuffer();return`data:${i};base64,${"undefined"!=typeof Buffer?Buffer.from(o).toString("base64"):function(t){const e=new Uint8Array(t);let i="";for(let o=0;o<e.length;o+=32768){const t=e.subarray(o,o+32768);i+=String.fromCharCode(...t)}if("undefined"!=typeof btoa){return btoa(i)}if("undefined"!=typeof Buffer){return Buffer.from(e).toString("base64")}throw new Error("No base64 encoder available in this environment")}(o)}`}catch(e){return console.error("Error embedding font:",e),t}}export async function jsonToDOM({json:t,elementHook:n,fontEmbedding:r="inline"}){const l=[];forEveryNode({children:t.pages},t=>{"text"!==t.type&&"tablecell"!==t.type&&"table"!==t.type||!t.fontFamily||-1!==l.indexOf(t.fontFamily)||l.push(t.fontFamily)});const s="inline"===r?await async function(t,e){return await Promise.all(t.map(async t=>{var i,o;if("Arial"===t){return null}const n=e.find(e=>e.fontFamily===t);if(n){const e=await w(n.url);return d("style",{},`@font-face { font-family: ${t}; src: url(${e}); }`)}{const e=`https://fonts.googleapis.com/css?family=${t}:bi,normal,i,b`;try{const n=await fetch(e),r=await n.text(),l=null===(o=null===(i=r.match(/url\((.*?)\)/g))||void 0===i?void 0:i.map(t=>t.replace(/url\((.*?)\)/,"$1")))||void 0===o?void 0:o.filter(t=>t.startsWith("https"));if(!(null==l?void 0:l.length)){throw new Error("No font URLs found")}const s=await Promise.all(l.map(async e=>{const i=await w(e),o=r.match(/font-style:\s*(.*?);/),n=r.match(/font-weight:\s*(.*?);/),l=o?o[1]:"normal",s=n?n[1]:"normal";return`@font-face {\n font-family: ${t};\n font-style: ${l};\n font-weight: ${s};\n src: url(${i});\n }`}));return d("style",{},s.join("\n"))}catch(r){return console.error("Error embedding Google Font:",r),d("defs",{},d("style",{type:"text/css",innerHTML:`@import url('${e}');`.replace(/&/g,"&")}))}}}))}(l,t.fonts):[],a=await Promise.all(t.pages.map(r=>async function({page:t,store:n,elementHook:r}){const l=await Promise.all(t.children.map(e=>y({element:e,page:t,store:n,elementHook:r}))),s=t.background.indexOf("url")>=0||t.background.indexOf("http")>=0||t.background.indexOf(".jpg")>=0||t.background.indexOf(".png")>=0||t.background.indexOf(".jpeg")>=0;let a;if(s){const r=await o(t.background);a=await e(t.background,Object.assign({width:n.width,height:n.height,x:0,y:0},i({width:n.width,height:n.height},{width:r.width,height:r.height})))}return d("g",{className:"page",style:{}},s?d("image",{"xlink:href":a,x:0,y:0,width:n.width,height:n.height,preserveAspectRatio:"none"}):d("rect",{x:0,y:0,width:n.width,height:n.height,fill:s?void 0:t.background}),...l)}({page:r,store:t,elementHook:n})));return d("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${t.width} ${t.height}`,width:t.width,height:t.height},...s,...a)}const x=({dom:e,nestLevel:i=0})=>{if("string"==typeof e){return e}if(!e){return""}const o=e.props,{innerHTML:n}=o,r=t(o,["innerHTML"]),l=Object.keys(r).map(t=>((t,e)=>"object"==typeof e?`${t}="${Object.keys(e).map(t=>`${t}:${e[t]};`).join(" ")}"`:null==e||""===e?"":`${t}="${e}"`)(t,r[t])).filter(t=>t&&t.trim().length>0).join(" "),s=" ".repeat(i);return`${s}<${e.type}${l?" "+l:""}>${n||"\n"+e.children.map(t=>x({dom:t,nestLevel:i+1})).join("")}${s}</${e.type}>\n`};export async function jsonToSVG({json:t,elementHook:e,fontEmbedding:i="inline"}){const o=await jsonToDOM({json:t,elementHook:e,fontEmbedding:i});return x({dom:o})}
|
|
1
|
+
var t=this&&this.__rest||function(t,e){var i={};for(var o in t){Object.prototype.hasOwnProperty.call(t,o)&&e.indexOf(o)<0&&(i[o]=t[o])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(t);n<o.length;n++){e.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(t,o[n])&&(i[o[n]]=t[o[n]])}}return i};import{cropImage as e,getCrop as i,loadImage as o}from"./image.js";import*as n from"./svg.js";import{figureToSvg as r}from"./figure-to-svg.js";import{Effects as l,shapeFilterToCSS as s}from"./filters.js";import{removeTags as a,parseHtmlToSegments as h}from"./text.js";import{segmentsToTspans as c}from"./text-html.js";import{getCurvePath as d}from"../canvas/text-element.js";import*as g from"./gradient.js";export const forEveryNode=(t,e)=>{if(t.children){for(const i of t.children){if(!0===e(i)){break}forEveryNode(i,e)}}if(t.cells){for(const i of t.cells){if(!0===e(i)){break}}}};const f=(t,e,...i)=>({type:t,props:e,children:i||[]});function p(t,e){if(!g.isGradient(t)){return null}const{stops:i,rotation:o}=g.parseColor(t),n=o*Math.PI/180,r=.5-.5*Math.sin(n),l=.5+.5*Math.cos(n),s=.5+.5*Math.sin(n),a=.5-.5*Math.cos(n),h=i.map(({offset:t,color:e})=>f("stop",{offset:100*t+"%","stop-color":e}));return f("linearGradient",{id:e,x1:100*r+"%",y1:100*l+"%",x2:100*s+"%",y2:100*a+"%"},...h)}export function fixRatio(t){var e=(new DOMParser).parseFromString(t,"image/svg+xml");return e.documentElement.setAttribute("preserveAspectRatio","none"),(new XMLSerializer).serializeToString(e)}const u=async t=>{try{const e=await fetch(t);if("undefined"!=typeof Buffer){const t=await e.arrayBuffer(),i=Buffer.from(t).toString("base64");return`data:${e.headers.get("content-type")||"image/png"};base64,${i}`}{const t=await e.blob();return new Promise((e,i)=>{const o=new FileReader;o.onloadend=()=>e(o.result),o.onerror=i,o.readAsDataURL(t)})}}catch(e){return console.error("Error converting URL to data URL:",e),t}},m=async({element:t,page:e,store:i})=>{let{src:r}=t;if("svg"===t.type){const e=await n.urlToString(r);r=n.replaceColors(e,new Map(Object.entries(t.colorsReplace)))}else{r=await u(r)}let l,s,a,h,c="";if(t.flipX||t.flipY){const e=t.flipX?-1:1,i=t.flipY?-1:1,o=t.width/2,n=t.height/2;c=`translate(${o}, ${n}) scale(${e}, ${i}) translate(${-o}, ${-n})`}t.clipSrc&&(l=`clip-img-mask-${t.id}`,s=await u(t.clipSrc)),t.maskSrc&&(a=`mask-img-${t.id}`,h=await u(t.maskSrc));const d=await o(r),m=d.width*t.cropWidth,y=d.height*t.cropHeight,w=t.width/t.height;let x,k;const b=m/y,$="boolean"==typeof t.stretchEnabled&&t.stretchEnabled||"svg"===t.type;$?(x=m,k=y):w>=b?(x=m,k=m/w):(x=y*w,k=y);const v=x/d.width,S=k/d.height,j=x/k>t.width/t.height?t.height/k:t.width/x,O=$?t.width/x:j,H=$?t.height/k:j,W=x*O/v,M=k*H/S;let E=t.cropX*d.width*O,P=t.cropY*d.height*H;t.flipX&&(E=(1-t.cropX-t.cropWidth)*d.width*O),t.flipY&&(P=(1-t.cropY-t.cropHeight)*d.height*H);const R=`clip-${t.id}`,T=t.cornerRadius||0,z=r.replace(/&/g,"&"),C={x:-E,y:-P,width:W,height:M,preserveAspectRatio:"none","clip-path":`url(#${R})`},L=[f("clipPath",{id:R},f("rect",{x:0,y:0,width:t.width,height:t.height,rx:T||void 0,ry:T||void 0}))];l&&s&&L.push(f("mask",{id:l,maskUnits:"userSpaceOnUse","mask-type":"alpha"},f("image",{href:s.replace(/&/g,"&"),x:0,y:0,width:t.width,height:t.height,preserveAspectRatio:"none"}))),a&&L.push(f("mask",{id:a,maskUnits:"userSpaceOnUse","mask-type":"alpha"},f("image",Object.assign({href:z},C))));let F=z;const B={};a&&h&&(F=h.replace(/&/g,"&"),B.mask=`url(#${a})`);const A={};l&&(A.mask=`url(#${l})`);const U=t.borderSize||0,D=U>0&&g.isGradient(t.borderColor),G=D?`border-grad-${t.id}`:null;if(D){const e=p(t.borderColor,G);e&&L.push(e)}const N=U>0?f("rect",{x:U/2,y:U/2,width:Math.max(0,t.width-U),height:Math.max(0,t.height-U),fill:"none",stroke:D?`url(#${G})`:t.borderColor,"stroke-width":U,rx:Math.max(0,T-U)||void 0,ry:Math.max(0,T-U)||void 0}):null,X=f("g",{},f("defs",{},...L),f("image",Object.assign(Object.assign({href:F},C),B)),N);return f("g",A,c?f("g",{transform:c},X):X)},y=({element:t,type:e})=>{const i={"stroke-width":t.height,stroke:t.color,"stroke-linecap":"round","stroke-linejoin":"round"},o=Object.assign(Object.assign({},i),{fill:t.color}),n=Object.assign(Object.assign({},i),{fill:"none"});return"arrow"===e?f("polyline",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},n)):"triangle"===e?f("polygon",Object.assign({points:`${3*t.height},${2*-t.height} 0,0 ${3*t.height},${2*t.height}`},o)):"bar"===e?f("polyline",Object.assign({points:`0,${2*-t.height} 0,${2*t.height}`},n)):"circle"===e?f("circle",Object.assign({cx:2*t.height,cy:0,r:2*t.height},o)):"square"===e?f("polygon",Object.assign({points:`0,${2*-t.height} ${4*t.height},${2*-t.height} ${4*t.height},${2*t.height} 0,${2*t.height}`},o)):null},w={image:m,svg:m,text:async({element:t,page:e,store:i})=>{const o=g.isGradient(t.fill),n=g.isGradient(t.stroke);if(t.curveEnabled){const e=d(t.width,t.height,t.curvePower,t.fontSize),i=`curve-path-${t.id}`,r=(a(t.text).replace(/\n/g," "),h(t.text)),l={fontWeight:t.fontWeight||"normal",fontStyle:t.fontStyle||"normal",fill:t.fill||"black"},s=c(r,l),g=c(r,l,{omitColors:!0}),u=t.backgroundPadding*(t.fontSize*t.lineHeight*.5),m=t.backgroundEnabled?f("rect",{x:-u,y:-u,width:t.width+2*u,height:t.height+2*u,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5),ry:t.backgroundCornerRadius*(t.fontSize*t.lineHeight*.5)}):null,y=[f("path",{id:i,d:e,fill:"none"})],w=t.strokeWidth&&(n||o&&!n);if(o){const e=`curve-fill-grad-${t.id}`,i=p(t.fill,e);i&&y.push(i)}if(n&&t.strokeWidth){const e=`curve-stroke-grad-${t.id}`,i=p(t.stroke,e);i&&y.push(i)}if(w){const e={"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px"},r=n?`url(#curve-stroke-grad-${t.id})`:t.stroke,l=f("text",Object.assign(Object.assign({},e),{fill:r,"stroke-width":t.strokeWidth,stroke:r}),f("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:g})),a=o?`url(#curve-fill-grad-${t.id})`:t.fill,h=f("text",Object.assign(Object.assign({},e),{fill:a}),f("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:s}));return f("g",{},m,f("defs",{},...y),l,h)}return f("g",{},m,f("defs",{},...y),f("text",{fill:o?`url(#curve-fill-grad-${t.id})`:t.fill,"font-size":t.fontSize+"px","text-anchor":"middle","dominant-baseline":"central","font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration||void 0,"letter-spacing":t.letterSpacing*t.fontSize+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?n?`url(#curve-stroke-grad-${t.id})`:t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},f("textPath",{href:`#${i}`,startOffset:"50%",innerHTML:s})))}const r=(t,e,i,o,n,r=0)=>{const l=document.createElement("canvas").getContext("2d");return l.font=`${n} ${o} ${e}px ${i}`,l.measureText(t).width+Math.max(0,(t?t.length:0)-1)*r*e},l=(t,e,i,o,n,l,s=0)=>{const a=[];return t.split("\n").forEach(t=>{const h=t.split(" ");let c="";for(let d=0;d<h.length;d++){const t=c+h[d]+" ";r(t,i,o,n,l,s)>e+.5&&d>0?(a.push(c.trim()),c=h[d]+" "):c=t}a.push(c.trim())}),a};let s=a(t.text);"uppercase"==t.textTransform&&(s=s.toUpperCase());let u=t.fontSize,m=[];for(;;){m=l(s,t.width,u,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing);const e=Math.max(...m.map(e=>r(e,u,t.fontFamily,t.fontWeight,t.fontStyle,t.letterSpacing))),i=m.length*u*t.lineHeight;if(e<=t.width&&i<=t.height){break}if(u-=1,u<4){break}}const y=u*t.lineHeight,w=m.length*y;let x=u;"middle"===t.verticalAlign?x=(t.height-w)/2+u:"bottom"===t.verticalAlign&&(x=t.height-w+u);const k="center"===t.align?"middle":"right"===t.align?"end":"start",b=m.map((e,i)=>f("tspan",{x:"center"===t.align?t.width/2:"right"===t.align?t.width:0,dy:0===i?0:y,innerHTML:e})),$=t.backgroundPadding*(u*t.lineHeight*.5),v=t.backgroundEnabled?f("rect",{x:-$,y:-$,width:t.width+2*$,height:t.height+2*$,fill:t.backgroundColor,opacity:t.backgroundOpacity,rx:t.backgroundCornerRadius*(u*t.lineHeight*.5),ry:t.backgroundCornerRadius*(u*t.lineHeight*.5)}):null,S=[],j=t.strokeWidth&&(n||o&&!n);if(o){const e=`text-fill-grad-${t.id}`,i=p(t.fill,e);i&&S.push(i)}if(n&&t.strokeWidth){const e=`text-stroke-grad-${t.id}`,i=p(t.stroke,e);i&&S.push(i)}if(j){const e={y:x,"font-size":u+"px","text-anchor":k,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*u+"px"},i=n?`url(#text-stroke-grad-${t.id})`:t.stroke,r=f("text",Object.assign(Object.assign({},e),{fill:i,"stroke-width":t.strokeWidth,stroke:i}),...b.map(t=>f("tspan",t.props,t.props.innerHTML))),l=o?`url(#text-fill-grad-${t.id})`:t.fill,s=f("text",Object.assign(Object.assign({},e),{fill:l}),...b.map(t=>f("tspan",t.props,t.props.innerHTML)));return f("g",{},v,S.length>0?f("defs",{},...S):null,r,s)}return f("g",{},v,S.length>0?f("defs",{},...S):null,f("text",{fill:o?`url(#text-fill-grad-${t.id})`:t.fill,y:x,"font-size":u+"px","text-anchor":k,"font-family":t.fontFamily,"font-style":t.fontStyle,"font-weight":t.fontWeight,"text-decoration":t.textDecoration,"line-height":t.lineHeight,"letter-spacing":t.letterSpacing*u+"px","stroke-width":t.strokeWidth||void 0,stroke:t.strokeWidth?t.stroke:void 0,"paint-order":t.strokeWidth?"stroke fill":void 0},...b))},line:async({element:t,page:e,store:i})=>f("g",{},f("line",{x1:0,y1:t.height/2,x2:t.width,y2:t.height/2,stroke:t.color,"stroke-width":t.height,"stroke-dasharray":t.dash&&t.dash.length?t.dash.map(e=>e*t.height).join(" "):void 0}),f("g",{transform:`translate(0 ${t.height/2})`},y({element:t,type:t.startHead})),f("g",{transform:`translate(${t.width} ${t.height/2}) rotate(180)`},y({element:t,type:t.endHead}))),figure:async({element:t,page:e,store:i,elementHook:o})=>{let n=function(t){let e=t.replace(/<svg[^>]*>/,"");return e=e.replace(/<\/svg>/,""),e}(r(t));const l=[];if(t.strokeWidth&&g.isGradient(t.stroke)){const e=`figure-stroke-grad-${t.id}`,i=p(t.stroke,e);if(i){l.push(i);const o=t.stroke.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");n=n.replace(new RegExp(`stroke="${o}"`,"g"),`stroke="url(#${e})"`)}}if(g.isGradient(t.fill)){const e=`figure-fill-grad-${t.id}`,i=p(t.fill,e);if(i){l.push(i);const o=t.fill.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");n=n.replace(new RegExp(`fill="${o}"`,"g"),`fill="url(#${e})"`)}}if(l.length>0){const e=f("g",{},f("defs",{},...l),f("g",{innerHTML:n}));return o&&o({dom:e,element:t})||e}const s=f("g",{innerHTML:n});return o&&o({dom:s,element:t})||s},group:async({element:t,page:e,store:i,elementHook:o})=>{const n=await Promise.all(t.children.map(t=>x({element:t,page:e,store:i,elementHook:o}))),r=f("g",{style:{"transform-origin":"top left"}},...n);return o&&o({dom:r,element:t})||r},gif:m,table:async({element:t})=>{t.rows;const e=t.cols,i=t.colWidths,o=t.rowHeights,n=["fontSize","fontFamily","fontWeight","fontStyle","textDecoration","textTransform","fill","align","verticalAlign","lineHeight","letterSpacing","strokeWidth","stroke","cellBackground","cellPadding"],r=(t.cells||[]).map((i,o)=>{const r=Object.assign(Object.assign({},i),{row:Math.floor(o/e),col:o%e});for(const e of n){void 0===r[e]&&(r[e]=t[e])}return r}),l=[],s=(e,n,r,l)=>{let s=0;for(let o=0;o<n;o++){s+=i[o]*t.width}let a=0;for(let i=0;i<e;i++){a+=o[i]*t.height}let h=0;for(let o=n;o<n+l;o++){h+=(i[o]||0)*t.width}let c=0;for(let i=e;i<e+r;i++){c+=(o[i]||0)*t.height}return{x:s,y:a,width:h,height:c}};for(const a of r){if(!a.mergedInto&&a.cellBackground&&"transparent"!==a.cellBackground){s(a.row,a.col,a.colSpan||1,a.colSpan||1);const{x:t,y:e,width:i,height:o}=s(a.row,a.col,a.rowSpan||1,a.colSpan||1);l.push(f("rect",{x:t,y:e,width:i,height:o,fill:a.cellBackground}))}}const h=(t,e)=>"dashed"===t?`${4*e},${2*e}`:"dotted"===t?`${e},${e}`:void 0,c=(e,i)=>{var o,n,r,l,s;const a=null===(o=e.borders)||void 0===o?void 0:o[i];return{width:null!==(n=null==a?void 0:a.width)&&void 0!==n?n:t.borderWidth,style:null!==(l=null!==(r=null==a?void 0:a.style)&&void 0!==r?r:t.borderStyle)&&void 0!==l?l:"solid",color:null!==(s=null==a?void 0:a.color)&&void 0!==s?s:t.borderColor}};for(const a of r){if(a.mergedInto){continue}const t=s(a.row,a.col,a.rowSpan||1,a.colSpan||1);if(0===a.row){const e=c(a,"top");"none"!==e.style&&e.width>0&&l.push(f("line",{x1:t.x,y1:t.y+e.width/2,x2:t.x+t.width,y2:t.y+e.width/2,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}if(0===a.col){const e=c(a,"left");"none"!==e.style&&e.width>0&&l.push(f("line",{x1:t.x+e.width/2,y1:t.y,x2:t.x+e.width/2,y2:t.y+t.height,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}{const e=c(a,"bottom");"none"!==e.style&&e.width>0&&l.push(f("line",{x1:t.x,y1:t.y+t.height-e.width/2,x2:t.x+t.width,y2:t.y+t.height-e.width/2,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}{const e=c(a,"right");"none"!==e.style&&e.width>0&&l.push(f("line",{x1:t.x+t.width-e.width/2,y1:t.y,x2:t.x+t.width-e.width/2,y2:t.y+t.height,stroke:e.color,"stroke-width":e.width,"stroke-dasharray":h(e.style,e.width)}))}}for(const d of r){if(d.mergedInto){continue}let e=a(d.text||"");if(!e){continue}"uppercase"===d.textTransform&&(e=e.toUpperCase());const n=d.cellPadding||4;let r=0;for(let o=0;o<d.col;o++){r+=i[o]*t.width}let s=0;for(let i=0;i<d.row;i++){s+=o[i]*t.height}const h=i[d.col]*t.width,c=o[d.row]*t.height,g=d.fontSize||12,p=d.align||"left";let u=r+n,m="start";"center"===p?(u=r+h/2,m="middle"):"right"===p&&(u=r+h-n,m="end");let y=s+n+g;const w=d.verticalAlign||"top";"middle"===w?y=s+c/2+g/3:"bottom"===w&&(y=s+c-n),l.push(f("text",{x:u,y,"font-size":g,"font-family":d.fontFamily||"Roboto","font-weight":d.fontWeight||"normal","font-style":d.fontStyle||"normal",fill:d.fill||"black","text-anchor":m,"text-decoration":d.textDecoration||"none","letter-spacing":d.letterSpacing?d.letterSpacing*g+"px":void 0},e))}return f("g",{},...l)}};async function x({element:t,page:e,store:i,elementHook:o}){var n;let r=await w[t.type];r||(r=()=>f("g",{}),console.error(`SVG export does not support ${t.type} type...`));const a=await r({element:t,page:e,store:i}),h=[],c=[];if(t.blurEnabled&&h.push(`blur(${t.blurRadius/2}px)`),t.brightnessEnabled&&h.push(`brightness(${100*t.brightness+100}%)`),t.sepiaEnabled&&h.push("sepia()"),t.grayscaleEnabled&&h.push("grayscale()"),t.shadowEnabled&&h.push(`drop-shadow(${t.shadowOffsetX}px ${t.shadowOffsetY}px ${t.shadowBlur}px ${t.shadowColor})`),t.filters){for(const[g,f]of Object.entries(t.filters)){const t=s(l[g],f.intensity);if(t&&(h.push(t.filter),t.html)){const e=t.html.replace(/<svg([^>]*)>/,"<g$1>").replace(/<\/svg>/,"</g>");c.push(e)}}}const d=f("g",{className:"element",id:t.id,transform:"group"!==t.type?`translate(${t.x}, ${t.y}) rotate(${t.rotation})`:void 0,display:null===(n=t.visible)||void 0===n||n?void 0:"none",opacity:t.opacity,style:{"transform-origin":"top left",filter:h.join(" ")}},a,...c);return o&&o({dom:d,element:t})||d}async function k(t){try{const e=await fetch(t),i=e.headers.get("content-type")||"font/ttf",o=await e.arrayBuffer();return`data:${i};base64,${"undefined"!=typeof Buffer?Buffer.from(o).toString("base64"):function(t){const e=new Uint8Array(t);let i="";for(let o=0;o<e.length;o+=32768){const t=e.subarray(o,o+32768);i+=String.fromCharCode(...t)}if("undefined"!=typeof btoa){return btoa(i)}if("undefined"!=typeof Buffer){return Buffer.from(e).toString("base64")}throw new Error("No base64 encoder available in this environment")}(o)}`}catch(e){return console.error("Error embedding font:",e),t}}export async function jsonToDOM({json:t,elementHook:n,fontEmbedding:r="inline"}){const l=[];forEveryNode({children:t.pages},t=>{"text"!==t.type&&"tablecell"!==t.type&&"table"!==t.type||!t.fontFamily||-1!==l.indexOf(t.fontFamily)||l.push(t.fontFamily)});const s="inline"===r?await async function(t,e){return await Promise.all(t.map(async t=>{var i,o;if("Arial"===t){return null}const n=e.find(e=>e.fontFamily===t);if(n){const e=await k(n.url);return f("style",{},`@font-face { font-family: ${t}; src: url(${e}); }`)}{const e=`https://fonts.googleapis.com/css?family=${t}:bi,normal,i,b`;try{const n=await fetch(e),r=await n.text(),l=null===(o=null===(i=r.match(/url\((.*?)\)/g))||void 0===i?void 0:i.map(t=>t.replace(/url\((.*?)\)/,"$1")))||void 0===o?void 0:o.filter(t=>t.startsWith("https"));if(!(null==l?void 0:l.length)){throw new Error("No font URLs found")}const s=await Promise.all(l.map(async e=>{const i=await k(e),o=r.match(/font-style:\s*(.*?);/),n=r.match(/font-weight:\s*(.*?);/),l=o?o[1]:"normal",s=n?n[1]:"normal";return`@font-face {\n font-family: ${t};\n font-style: ${l};\n font-weight: ${s};\n src: url(${i});\n }`}));return f("style",{},s.join("\n"))}catch(r){return console.error("Error embedding Google Font:",r),f("defs",{},f("style",{type:"text/css",innerHTML:`@import url('${e}');`.replace(/&/g,"&")}))}}}))}(l,t.fonts):[],a=await Promise.all(t.pages.map(r=>async function({page:t,store:n,elementHook:r}){const l=await Promise.all(t.children.map(e=>x({element:e,page:t,store:n,elementHook:r}))),s=t.background.indexOf("url")>=0||t.background.indexOf("http")>=0||t.background.indexOf(".jpg")>=0||t.background.indexOf(".png")>=0||t.background.indexOf(".jpeg")>=0;let a;if(s){const r=await o(t.background);a=await e(t.background,Object.assign({width:n.width,height:n.height,x:0,y:0},i({width:n.width,height:n.height},{width:r.width,height:r.height})))}return f("g",{className:"page",style:{}},s?f("image",{"xlink:href":a,x:0,y:0,width:n.width,height:n.height,preserveAspectRatio:"none"}):f("rect",{x:0,y:0,width:n.width,height:n.height,fill:s?void 0:t.background}),...l)}({page:r,store:t,elementHook:n})));return f("svg",{xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",viewBox:`0 0 ${t.width} ${t.height}`,width:t.width,height:t.height},...s,...a)}const b=({dom:e,nestLevel:i=0})=>{if("string"==typeof e){return e}if(!e){return""}const o=e.props,{innerHTML:n}=o,r=t(o,["innerHTML"]),l=Object.keys(r).map(t=>((t,e)=>"object"==typeof e?`${t}="${Object.keys(e).map(t=>`${t}:${e[t]};`).join(" ")}"`:null==e||""===e?"":`${t}="${e}"`)(t,r[t])).filter(t=>t&&t.trim().length>0).join(" "),s=" ".repeat(i);return`${s}<${e.type}${l?" "+l:""}>${n||"\n"+e.children.map(t=>b({dom:t,nestLevel:i+1})).join("")}${s}</${e.type}>\n`};export async function jsonToSVG({json:t,elementHook:e,fontEmbedding:i="inline"}){const o=await jsonToDOM({json:t,elementHook:e,fontEmbedding:i});return b({dom:o})}
|
package/utils/validate-key.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;const i=e.observable({value:0});export const ____=()=>i.value;export const isCreditVisible=()=>n.value;const r=e.action(()=>{n.value=!0});let s="";export const getKey=()=>s||"";let l="undefined"!=typeof window?window.location.origin:"";const c="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===l&&c&&(l="headless"),"file://"===l&&d&&(l="electron");const p=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${l}" here: https://polotno.com/cabinet`;let u=fetch;export const __=e=>{u=e};export async function isKeyPaid(n){for(let s=0;s<5;s++){try{const r=await u(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"2.
|
|
1
|
+
import*as e from"mobx";import{getAPI as o}from"./api.js";import{setRemoveBackgroundEnabled as t}from"./flags.js";const n=e.observable({value:!1}),a=e.observable({value:"v1"});export const ___=()=>a.value;const i=e.observable({value:0});export const ____=()=>i.value;export const isCreditVisible=()=>n.value;const r=e.action(()=>{n.value=!0});let s="";export const getKey=()=>s||"";let l="undefined"!=typeof window?window.location.origin:"";const c="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Headless")>-1,d="undefined"!=typeof navigator&&navigator.userAgent.indexOf("Electron")>-1;"file://"===l&&c&&(l="headless"),"file://"===l&&d&&(l="electron");const p=`%cPolotno error! Current domain is not allowed. It may lead to unexpected behavior and stop working. Please add "${l}" here: https://polotno.com/cabinet`;let u=fetch;export const __=e=>{u=e};export async function isKeyPaid(n){for(let s=0;s<5;s++){try{const r=await u(o()+"/validate-key",{method:"POST",body:JSON.stringify({key:n,site:location.host,skdVersion:"2.38.0"})});if(e.runInAction(()=>{a.value=r.headers.get("x-api-version")||""}),!n){return console.error("Polotno API is initialized without API key. It may lead to unexpected behavior and stop working. Please create API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1}),!1}if(200!==r.status){await new Promise(e=>setTimeout(e,3e3));continue}const s=await r.json();return s.is_valid||(console.error("Polotno API key is not valid. Please get new API key here: https://polotno.com/cabinet"),e.runInAction(()=>{i.value=1})),s.is_paid||(console.log("%cPolotno Free Version. For development usage only. https://polotno.com/","background: rgb(0, 161, 255); color: white; padding: 5px; margin: 5px;"),e.runInAction(()=>{0===i.value&&(i.value=2)})),s.is_domain_valid||console.log(p,"background: rgba(247, 101, 68, 1); color: white; padding: 5px; margin: 5px;"),t(s.remove_background_enabled),s.is_paid||!1}catch(r){await new Promise(e=>setTimeout(e,3e3))}}return console.error("Can not validate Polotno API key. Please report to anton@polotno.com immediately."),!0}export async function validateKey(e,o){s=e,await isKeyPaid(e)&&!o||r()}
|