polotno 2.4.0 → 2.4.2

package/side-panel/elements-panel.js

@@ -5,7 +5,7 @@
   .bp5-dark & img {
     filter: invert(1);
   }
-`,limit=20,NounprojectPanel=({store:e,query:t})=>{const{data:r,isLoading:a,loadMore:i,setQuery:o}=(0,use_api_1.useInfiniteAPI)({getAPI:({page:e,query:t})=>`${api_1.API}/get-nounproject?query=${t}&offset=${20*(e-1)}&KEY=${(0,validate_key_1.getKey)()}`,getSize:e=>1});return react_1.default.useEffect((()=>{o(t)}),[t]),react_1.default.createElement(NounContainer,null,react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,images:null==r?void 0:r.map((e=>e.icons)).flat(),getPreview:e=>e.preview_url_84,isLoading:a,onSelect:async(t,r,a)=>{if(a&&"image"===a.type&&a.contentEditable){const e=await iconToSrc(t.id);return void a.set({clipSrc:e})}e.history.transaction((async()=>{var a;const i=((null==r?void 0:r.x)||e.width/2)-100,o=((null==r?void 0:r.y)||e.height/2)-100,s=null===(a=e.activePage)||void 0===a?void 0:a.addElement({type:"svg",width:200,height:200,x:i,y:o}),n=await iconToSrc(t.id);(0,mobx_state_tree_1.isAlive)(s)&&await s.set({src:n})}))},rowsNumber:4,loadMore:i}))};exports.NounprojectPanel=NounprojectPanel;const LINES=[{preview:svg_1.svgToURL`
+`,limit=50,NounprojectPanel=({store:e,query:t})=>{const{data:r,isLoading:a,loadMore:i,setQuery:o}=(0,use_api_1.useInfiniteAPI)({defaultQuery:t,getAPI:({page:e,query:t})=>`${api_1.API}/get-nounproject?query=${t}&page=${e}&limit=50&KEY=${(0,validate_key_1.getKey)()}`,getSize:e=>e.pagesNumber});return react_1.default.useEffect((()=>{o(t)}),[t]),react_1.default.createElement(NounContainer,null,react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,images:null==r?void 0:r.map((e=>e.icons)).flat(),getPreview:e=>e.preview_url_84,isLoading:a,onSelect:async(t,r,a)=>{if(a&&"image"===a.type&&a.contentEditable){const e=await iconToSrc(t.id);return void a.set({clipSrc:e})}e.history.transaction((async()=>{var a;const i=((null==r?void 0:r.x)||e.width/2)-100,o=((null==r?void 0:r.y)||e.height/2)-100,s=null===(a=e.activePage)||void 0===a?void 0:a.addElement({type:"svg",width:200,height:200,x:i,y:o}),n=await iconToSrc(t.id);(0,mobx_state_tree_1.isAlive)(s)&&await s.set({src:n})}))},rowsNumber:4,loadMore:i}))};exports.NounprojectPanel=NounprojectPanel;const LINES=[{preview:svg_1.svgToURL`
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
   <path stroke="currentColor" strokeWidth="4" d="M 1 8 L 30 8"></path>
 </svg>

package/toolbar/figure-toolbar.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureToolbar=exports.FigureStroke=exports.FigureSettings=exports.FigureFill=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),core_2=require("@blueprintjs/core"),ZoStrokeWidth_1=__importDefault(require("@meronex/icons/zo/ZoStrokeWidth")),color_picker_1=__importDefault(require("./color-picker")),animations_picker_1=require("./animations-picker"),filters_picker_1=require("./filters-picker"),element_container_1=require("./element-container"),l10n_1=require("../utils/l10n"),flags_1=require("../utils/flags");exports.FigureFill=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>react_1.default.createElement(color_picker_1.default,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({fill:r})}))})),store:t}))),exports.FigureSettings=(0,mobx_react_lite_1.observer)((({store:e,elements:t,element:r})=>{const a=r=>{e.history.transaction((()=>{t.forEach((e=>{e.set(r)}))}))};return react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"}},react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"15px"}},react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[]})},active:0===t[0].dash.length},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[4,1]})},active:4===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[2,1]})},active:2===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[1,1]})},active:1===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})))),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.strokeWidth")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].strokeWidth,onValueChange:e=>{a({strokeWidth:e})},style:{width:"50px"},min:0,max:Math.round(Math.min(r.width,r.height)/2),buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].strokeWidth,onChange:e=>{a({strokeWidth:e})},min:0,max:Math.round(Math.min(r.width,r.height)/2),labelRenderer:!1}),"rect"===r.subType&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"15px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.cornerRadius")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].cornerRadius,onValueChange:e=>{a({cornerRadius:e})},style:{width:"50px"},min:0,max:Math.round(Math.max(r.width,r.height)/2),buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].cornerRadius,onChange:e=>{a({cornerRadius:e})},min:0,max:Math.round(Math.max(r.width,r.height)/2),labelRenderer:!1}))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(ZoStrokeWidth_1.default,null),minimal:!0}))})),exports.FigureStroke=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>e.find((e=>e.strokeWidth))?react_1.default.createElement(color_picker_1.default,{value:e[0].stroke,style:{marginRight:"5px"},gradientEnabled:!0,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({stroke:r})}))})),store:t}):null));const PROPS_MAP={FigureFill:exports.FigureFill,FigureStroke:exports.FigureStroke,FigureSettings:exports.FigureSettings,FigureAnimations:animations_picker_1.AnimationsPicker};exports.FigureToolbar=(0,mobx_react_lite_1.observer)((({store:e,components:t})=>{const r=e.selectedElements[0],a=["FigureFill","FigureStroke","FigureSettings",flags_1.flags.animationsEnabled&&"FigureAnimations"].filter((e=>Boolean(e))),i=(0,element_container_1.extendToolbar)({type:"line",usedItems:a,components:t});return react_1.default.createElement(element_container_1.ElementContainer,{items:i,itemRender:a=>{const i=t[a]||PROPS_MAP[a];return react_1.default.createElement(i,{element:r,store:e,key:a,elements:e.selectedElements})}})})),exports.default=exports.FigureToolbar;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureToolbar=exports.FigureStroke=exports.FigureSettings=exports.FigureFill=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),icons_1=require("@blueprintjs/icons"),core_2=require("@blueprintjs/core"),ZoStrokeWidth_1=__importDefault(require("@meronex/icons/zo/ZoStrokeWidth")),color_picker_1=__importDefault(require("./color-picker")),animations_picker_1=require("./animations-picker"),filters_picker_1=require("./filters-picker"),element_container_1=require("./element-container"),l10n_1=require("../utils/l10n"),flags_1=require("../utils/flags");exports.FigureFill=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>react_1.default.createElement(color_picker_1.default,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!0,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({fill:r})}))})),store:t}))),exports.FigureSettings=(0,mobx_react_lite_1.observer)((({store:e,elements:t,element:r})=>{const i=r=>{e.history.transaction((()=>{t.forEach((e=>{e.set(r)}))}))};return react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"15px",width:"270px"}},react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"15px"}},react_1.default.createElement(core_1.Button,{onClick:()=>{i({strokeWidth:0})},active:0===t[0].strokeWidth,style:{width:"44px",height:"34px"},icon:react_1.default.createElement(icons_1.Disable,{size:20})}),react_1.default.createElement(core_1.Button,{onClick:()=>{i({dash:[],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&0===t[0].dash.length},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{i({dash:[4,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&4===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{i({dash:[2,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&2===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{i({dash:[1,1],strokeWidth:t[0].strokeWidth||10})},active:t[0].strokeWidth&&1===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})))),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.strokeWidth")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].strokeWidth,onValueChange:e=>{i({strokeWidth:e})},style:{width:"50px"},min:0,max:Math.round(Math.min(r.width,r.height)/2),buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].strokeWidth,onChange:e=>{i({strokeWidth:e})},min:0,max:Math.round(Math.min(r.width,r.height)/2),labelRenderer:!1}),"rect"===r.subType&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"15px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.cornerRadius")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].cornerRadius,onValueChange:e=>{i({cornerRadius:e})},style:{width:"50px"},min:0,max:Math.round(Math.max(r.width,r.height)/2),buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].cornerRadius,onChange:e=>{i({cornerRadius:e})},min:0,max:Math.round(Math.max(r.width,r.height)/2),labelRenderer:!1}))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(ZoStrokeWidth_1.default,null),minimal:!0}))})),exports.FigureStroke=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>e.find((e=>e.strokeWidth))?react_1.default.createElement(color_picker_1.default,{value:e[0].stroke,style:{marginRight:"5px"},gradientEnabled:!1,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({stroke:r})}))})),store:t}):null));const PROPS_MAP={FigureFill:exports.FigureFill,FigureStroke:exports.FigureStroke,FigureSettings:exports.FigureSettings,FigureAnimations:animations_picker_1.AnimationsPicker,FigureFilters:filters_picker_1.FiltersPicker};exports.FigureToolbar=(0,mobx_react_lite_1.observer)((({store:e,components:t})=>{const r=e.selectedElements[0],i=["FigureFill","FigureStroke","FigureSettings","FigureFilters",flags_1.flags.animationsEnabled&&"FigureAnimations"].filter((e=>Boolean(e))),a=(0,element_container_1.extendToolbar)({type:"line",usedItems:i,components:t});return react_1.default.createElement(element_container_1.ElementContainer,{items:a,itemRender:i=>{const a=t[i]||PROPS_MAP[i];return react_1.default.createElement(a,{element:r,store:e,key:i,elements:e.selectedElements})}})})),exports.default=exports.FigureToolbar;

package/toolbar/filters-picker.js

@@ -1 +1 @@
-"use strict";var __rest=this&&this.__rest||function(e,t){var a={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(a[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(l=Object.getOwnPropertySymbols(e);n<l.length;n++)t.indexOf(l[n])<0&&Object.prototype.propertyIsEnumerable.call(e,l[n])&&(a[l[n]]=e[l[n]])}return a},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FiltersPicker=exports.NumberInput=void 0;const react_1=__importDefault(require("react")),core_1=require("@blueprintjs/core"),core_2=require("@blueprintjs/core"),mobx_react_lite_1=require("mobx-react-lite"),color_picker_1=__importDefault(require("./color-picker")),l10n_1=require("../utils/l10n"),limit=(e,t,a)=>Math.max(t,Math.min(a,e)),NumberInput=e=>{var{value:t,onValueChange:a}=e,l=__rest(e,["value","onValueChange"]);const[n,r]=react_1.default.useState(t.toString());react_1.default.useEffect((()=>{r(t.toString())}),[t]);return react_1.default.createElement(core_1.NumericInput,Object.assign({value:n,onValueChange:(e,t)=>{r(t),Number.isNaN(e)||a(e)}},l))};exports.NumberInput=NumberInput,exports.FiltersPicker=(0,mobx_react_lite_1.observer)((({element:e,store:t,elements:a})=>{const l=a||[e],n=l[0],r="text"===n.type,o="image"===n.type,i="svg"===n.type,c=e=>{t.history.transaction((()=>{l.forEach((t=>{t.set(e)}))}))};return react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"25px",width:"230px"}},react_1.default.createElement(core_1.Switch,{checked:n.blurEnabled,label:(0,l10n_1.t)("toolbar.blur"),onChange:e=>{c({blurEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT}),n.blurEnabled&&react_1.default.createElement(core_1.Slider,{value:n.blurRadius,labelStepSize:5,onChange:e=>{c({blurRadius:e})},min:0,max:20,showTrackFill:!1}),!r&&react_1.default.createElement(core_1.Switch,{checked:n.brightnessEnabled,label:(0,l10n_1.t)("toolbar.brightness"),onChange:e=>{c({brightnessEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),n.brightnessEnabled&&react_1.default.createElement(core_1.Slider,{value:100*n.brightness+100,onChange:e=>{c({brightness:(e-100)/100})},min:0,max:200,showTrackFill:!1,labelStepSize:50}),!r&&react_1.default.createElement(core_1.Switch,{checked:n.sepiaEnabled,label:(0,l10n_1.t)("toolbar.sepia"),onChange:e=>{c({sepiaEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!r&&react_1.default.createElement(core_1.Switch,{checked:n.grayscaleEnabled,label:(0,l10n_1.t)("toolbar.grayscale"),onChange:e=>{c({grayscaleEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),r&&react_1.default.createElement(core_1.Switch,{checked:!!n.strokeWidth,label:(0,l10n_1.t)("toolbar.textStroke"),onChange:e=>{c({strokeWidth:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!n.strokeWidth&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:n.stroke,size:30,onChange:e=>{c({stroke:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:n.strokeWidth,onValueChange:e=>{c({strokeWidth:limit(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(n.fontSize/2)}))),r&&react_1.default.createElement(core_1.Switch,{checked:!!n.backgroundEnabled,label:(0,l10n_1.t)("toolbar.textBackground"),onChange:e=>{c({backgroundEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!n.backgroundEnabled&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.backgroundCornerRadius")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:100*n.backgroundCornerRadius,onValueChange:e=>{c({backgroundCornerRadius:limit(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*n.backgroundCornerRadius,onChange:e=>{c({backgroundCornerRadius:limit(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.backgroundPadding")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:Math.round(100*n.backgroundPadding),onValueChange:e=>{c({backgroundPadding:limit(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:Math.round(100*n.backgroundPadding),onChange:e=>{c({backgroundPadding:limit(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.opacity")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:Math.round(100*n.backgroundOpacity),onValueChange:e=>{c({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*n.backgroundOpacity,onChange:e=>{c({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",{style:{lineHeight:"30px"}},(0,l10n_1.t)("toolbar.color")),react_1.default.createElement(color_picker_1.default,{value:n.backgroundColor,size:30,onChange:e=>{c({backgroundColor:e})},store:t}))),(o||i)&&react_1.default.createElement(core_1.Switch,{checked:!!n.borderSize,label:(0,l10n_1.t)("toolbar.border"),onChange:e=>{c({borderSize:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!n.borderSize&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:n.borderColor,size:30,onChange:e=>{c({borderColor:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:n.borderSize,onValueChange:e=>{c({borderSize:limit(e,1,Math.min(n.width,n.height)/2)})},style:{width:"80px"},min:1,max:Math.min(n.width,n.height)/2}))),!r&&react_1.default.createElement(core_1.Switch,{checked:!!n.cornerRadius,label:(0,l10n_1.t)("toolbar.cornerRadius"),onChange:e=>{c({cornerRadius:e.target.checked?Math.min(n.width/4,n.height/4):0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!r&&!!n.cornerRadius&&react_1.default.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},react_1.default.createElement("div",{style:{width:"150px",paddingTop:"7px"}},react_1.default.createElement(core_1.Slider,{value:Math.min(n.cornerRadius,Math.round(Math.min(n.width/2,n.height/2))),onChange:e=>{c({cornerRadius:e})},min:1,max:Math.round(Math.min(n.width/2,n.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),react_1.default.createElement(core_1.NumericInput,{value:n.cornerRadius,onValueChange:e=>{c({cornerRadius:limit(e,1,Math.min(n.width,n.height)/2)})},buttonPosition:"none",style:{width:"45px",padding:"0 5px"},min:1,max:Math.round(Math.min(n.width/2,n.height/2))})),react_1.default.createElement(core_1.Switch,{checked:n.shadowEnabled,label:(0,l10n_1.t)("toolbar.shadow"),onChange:e=>{c({shadowEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),n.shadowEnabled&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.blur")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:n.shadowBlur,onValueChange:e=>{c({shadowBlur:limit(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:n.shadowBlur,onChange:e=>{c({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetX")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:n.shadowOffsetX,onValueChange:e=>{c({shadowOffsetX:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:n.shadowOffsetX,onChange:e=>{c({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetY")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:n.shadowOffsetY,onValueChange:e=>{c({shadowOffsetY:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:n.shadowOffsetY,onChange:e=>{c({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.opacity")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:Math.round(100*n.shadowOpacity),onValueChange:e=>{c({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*n.shadowOpacity,onChange:e=>{c({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",{style:{lineHeight:"30px"}},(0,l10n_1.t)("toolbar.color")),react_1.default.createElement(color_picker_1.default,{value:n.shadowColor,size:30,onChange:e=>{c({shadowColor:e})},store:t})))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:"left-join",text:(0,l10n_1.t)("toolbar.effects"),minimal:!0}))})),exports.default=exports.FiltersPicker;
+"use strict";var __rest=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},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FiltersPicker=exports.NumberInput=void 0;const react_1=__importDefault(require("react")),core_1=require("@blueprintjs/core"),core_2=require("@blueprintjs/core"),mobx_react_lite_1=require("mobx-react-lite"),color_picker_1=__importDefault(require("./color-picker")),l10n_1=require("../utils/l10n"),limit=(e,t,a)=>Math.max(t,Math.min(a,e)),NumberInput=e=>{var{value:t,onValueChange:a}=e,n=__rest(e,["value","onValueChange"]);const[l,r]=react_1.default.useState(t.toString());react_1.default.useEffect((()=>{r(t.toString())}),[t]);return react_1.default.createElement(core_1.NumericInput,Object.assign({value:l,onValueChange:(e,t)=>{r(t),Number.isNaN(e)||a(e)}},n))};exports.NumberInput=NumberInput;const EnablerNumberInput=({label:e,enabled:t,visible:a=!0,onEnabledChange:n,numberValue:l,onNumberValueChange:r,min:o,max:i})=>a?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(core_1.Switch,{checked:t,label:e,onChange:e=>{n(e.target.checked)},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),t&&react_1.default.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},react_1.default.createElement("div",{style:{paddingTop:"7px"}},react_1.default.createElement(core_1.Slider,{value:l,onChange:e=>{r(e)},min:o,max:i,labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),react_1.default.createElement(core_1.NumericInput,{value:l,onValueChange:e=>{r(limit(e,o,i))},buttonPosition:"none",style:{width:"45px",padding:"0 5px",marginLeft:"10px"},min:o,max:i}))):null;exports.FiltersPicker=(0,mobx_react_lite_1.observer)((({element:e,store:t,elements:a})=>{const n=a||[e],l=n[0],r="text"===l.type,o="image"===l.type,i="svg"===l.type,d=o||i,c=e=>{t.history.transaction((()=>{n.forEach((t=>{t.set(e)}))}))};return react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"}},react_1.default.createElement(EnablerNumberInput,{label:(0,l10n_1.t)("toolbar.blur"),enabled:l.blurEnabled,visible:d||r,onEnabledChange:e=>{c({blurEnabled:e})},numberValue:100*l.opacity,onNumberValueChange:e=>{c({opacity:e/100})},min:0,max:100}),react_1.default.createElement(EnablerNumberInput,{label:(0,l10n_1.t)("toolbar.brightness"),visible:d,enabled:l.brightnessEnabled,onEnabledChange:e=>{c({brightnessEnabled:e})},numberValue:100*l.brightness+100,onNumberValueChange:e=>{c({brightness:(e-100)/100})},min:0,max:200}),d&&react_1.default.createElement(core_1.Switch,{checked:l.sepiaEnabled,label:(0,l10n_1.t)("toolbar.sepia"),onChange:e=>{c({sepiaEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),d&&react_1.default.createElement(core_1.Switch,{checked:l.grayscaleEnabled,label:(0,l10n_1.t)("toolbar.grayscale"),onChange:e=>{c({grayscaleEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),r&&react_1.default.createElement(core_1.Switch,{checked:!!l.strokeWidth,label:(0,l10n_1.t)("toolbar.textStroke"),onChange:e=>{c({strokeWidth:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),r&&!!l.strokeWidth&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:l.stroke,size:30,onChange:e=>{c({stroke:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:l.strokeWidth,onValueChange:e=>{c({strokeWidth:limit(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(l.fontSize/2)}))),r&&react_1.default.createElement(core_1.Switch,{checked:!!l.backgroundEnabled,label:(0,l10n_1.t)("toolbar.textBackground"),onChange:e=>{c({backgroundEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!l.backgroundEnabled&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.backgroundCornerRadius")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:100*l.backgroundCornerRadius,onValueChange:e=>{c({backgroundCornerRadius:limit(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*l.backgroundCornerRadius,onChange:e=>{c({backgroundCornerRadius:limit(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.backgroundPadding")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:Math.round(100*l.backgroundPadding),onValueChange:e=>{c({backgroundPadding:limit(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:Math.round(100*l.backgroundPadding),onChange:e=>{c({backgroundPadding:limit(e,0,100)/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.opacity")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:Math.round(100*l.backgroundOpacity),onValueChange:e=>{c({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*l.backgroundOpacity,onChange:e=>{c({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",{style:{lineHeight:"30px"}},(0,l10n_1.t)("toolbar.color")),react_1.default.createElement(color_picker_1.default,{value:l.backgroundColor,size:30,onChange:e=>{c({backgroundColor:e})},store:t}))),d&&react_1.default.createElement(core_1.Switch,{checked:!!l.borderSize,label:(0,l10n_1.t)("toolbar.border"),onChange:e=>{c({borderSize:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!l.borderSize&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:l.borderColor,size:30,onChange:e=>{c({borderColor:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:l.borderSize,onValueChange:e=>{c({borderSize:limit(e,1,Math.min(l.width,l.height)/2)})},style:{width:"80px"},min:1,max:Math.min(l.width,l.height)/2}))),d&&react_1.default.createElement(core_1.Switch,{checked:!!l.cornerRadius,label:(0,l10n_1.t)("toolbar.cornerRadius"),onChange:e=>{c({cornerRadius:e.target.checked?Math.min(l.width/4,l.height/4):0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),d&&!!l.cornerRadius&&react_1.default.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},react_1.default.createElement("div",{style:{width:"150px",paddingTop:"7px"}},react_1.default.createElement(core_1.Slider,{value:Math.min(l.cornerRadius,Math.round(Math.min(l.width/2,l.height/2))),onChange:e=>{c({cornerRadius:e})},min:1,max:Math.round(Math.min(l.width/2,l.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),react_1.default.createElement(core_1.NumericInput,{value:l.cornerRadius,onValueChange:e=>{c({cornerRadius:limit(e,1,Math.min(l.width,l.height)/2)})},buttonPosition:"none",style:{width:"45px",padding:"0 5px"},min:1,max:Math.round(Math.min(l.width/2,l.height/2))})),react_1.default.createElement(core_1.Switch,{checked:l.shadowEnabled,label:(0,l10n_1.t)("toolbar.shadow"),onChange:e=>{c({shadowEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),l.shadowEnabled&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.blur")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:l.shadowBlur,onValueChange:e=>{c({shadowBlur:limit(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:l.shadowBlur,onChange:e=>{c({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetX")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:l.shadowOffsetX,onValueChange:e=>{c({shadowOffsetX:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:l.shadowOffsetX,onChange:e=>{c({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetY")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:l.shadowOffsetY,onValueChange:e=>{c({shadowOffsetY:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:l.shadowOffsetY,onChange:e=>{c({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.opacity")),react_1.default.createElement("div",null,react_1.default.createElement(exports.NumberInput,{value:Math.round(100*l.shadowOpacity),onValueChange:e=>{c({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*l.shadowOpacity,onChange:e=>{c({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",{style:{lineHeight:"30px"}},(0,l10n_1.t)("toolbar.color")),react_1.default.createElement(color_picker_1.default,{value:l.shadowColor,size:30,onChange:e=>{c({shadowColor:e})},store:t})))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:"left-join",text:(0,l10n_1.t)("toolbar.effects"),minimal:!0}))})),exports.default=exports.FiltersPicker;