polotno 2.4.6 → 2.4.7

package/toolbar/filters-picker.js

@@ -1 +1 @@
-"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;
+"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,c=o||i,d=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",maxHeight:"calc(100vh - 150px)",overflow:"auto"}},react_1.default.createElement(EnablerNumberInput,{label:(0,l10n_1.t)("toolbar.blur"),enabled:l.blurEnabled,visible:c||r,onEnabledChange:e=>{d({blurEnabled:e})},numberValue:100*l.opacity,onNumberValueChange:e=>{d({opacity:e/100})},min:0,max:100}),react_1.default.createElement(EnablerNumberInput,{label:(0,l10n_1.t)("toolbar.brightness"),visible:c,enabled:l.brightnessEnabled,onEnabledChange:e=>{d({brightnessEnabled:e})},numberValue:100*l.brightness+100,onNumberValueChange:e=>{d({brightness:(e-100)/100})},min:0,max:200}),c&&react_1.default.createElement(core_1.Switch,{checked:l.sepiaEnabled,label:(0,l10n_1.t)("toolbar.sepia"),onChange:e=>{d({sepiaEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),c&&react_1.default.createElement(core_1.Switch,{checked:l.grayscaleEnabled,label:(0,l10n_1.t)("toolbar.grayscale"),onChange:e=>{d({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=>{d({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=>{d({stroke:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:l.strokeWidth,onValueChange:e=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({backgroundColor:e})},store:t}))),c&&react_1.default.createElement(core_1.Switch,{checked:!!l.borderSize,label:(0,l10n_1.t)("toolbar.border"),onChange:e=>{d({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=>{d({borderColor:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:l.borderSize,onValueChange:e=>{d({borderSize:limit(e,1,Math.min(l.width,l.height)/2)})},style:{width:"80px"},min:1,max:Math.min(l.width,l.height)/2}))),c&&react_1.default.createElement(core_1.Switch,{checked:!!l.cornerRadius,label:(0,l10n_1.t)("toolbar.cornerRadius"),onChange:e=>{d({cornerRadius:e.target.checked?Math.min(l.width/4,l.height/4):0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),c&&!!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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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=>{d({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;