UNPKG

photoeditorsdk

Version:

The most comprehensive photo editor SDK for HTML5

img.ly

imgly/pesdk-html5-build

92 lines (89 loc) • 36.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import{A as Io,B as go,D as yo,H as vo,I as F,J as xo,K as Uo,M as ko,N as Fo,O as Lo,P as Ao,Q as wo,R as Oo,S as V,T as e,a as l,b as fo,c as u,d as uo,q as To,r as C,u as m,v as ho,w as So,x as Bo,y as T,z as Y}from"./chunk-CV3QEYL2.js";import{Ta as k,Xa as S,Ya as bo,c as D}from"./chunk-UDNMGV4K.js";import eo from"react";import{ThemeProvider as zt}from"styled-components";import U from"react";import $t from"styled-components";import G from"react";var Eo=l(function o(){const{config:r,active:t,custom:n}=m();const{tools:i}=r;const a=t.tool;const s=d=>{const I=r.state.config[d];if("icon"in I){const no=I.icon;return G.createElement(no,null)}const j=So[d];return G.createElement(j,null)||null};const c=d=>{return r.locale[d].title};const p=(d,I)=>d&&G.createElement(e.Toolbar.Item,{onClick:()=>t.selectTool(d),key:d,label:c(d),isActive:a===d,isDisabled:!(t.image||d==="library"||d==="customTool")},s(d))||G.createElement(e.Toolbar.Separator,{key:d+I,active:!!a});const b=n.getBasicToolbar();if(!b){return null}return G.createElement(b,{show:!!a},i.map(p))});import h from"react";import P from"react";import wr from"styled-components";var Or=wr(e.ControlsbarContainer)` > div { grid-template-columns: 1fr 5fr minmax(56px, 1fr); } `;var Er=({adjustmentsTool:o,custom:r})=>{const t=o.selectedAdjustmentType.toLowerCase();const n=o[t];const i=r.getButton("toolControlBarSecondaryButton");return P.createElement(Or,{show:Boolean(t)},i&&P.createElement("div",null,P.createElement(i,{tool:"adjustment",ariaLabel:o.locale.controls.buttonReset,onClick:o.reset,icon:P.createElement(T.reset,null),label:o.locale.controls.buttonReset})),P.createElement(e.Other.ControlsWrapper,null,P.createElement(C.Spacer,{count:2}),P.createElement(e.Slider,{identifier:o.selectedAdjustmentType,tool:"adjustment","aria-hidden":!t,adjust:true,label:o.selectedOptionLabel,value:n,onChange:a=>{o.editAdjustments({type:t,value:a})},onMouseUp:()=>o.toolSnapshot(),onTouchEnd:()=>o.toolSnapshot(),snap:0}),P.createElement(C.Spacer,{count:2})),P.createElement(e.BarSeparator,null))};var Do=u("adjustmentsTool","custom")(l(Er));import g from"react";import Pr from"styled-components";import R from"react";var Mo=l(()=>{const{brushTool:o}=m();const{colorList:r,locale:t,localeColor:n}=o;const i=t.controls;const a=n.colorPicker;return R.createElement(R.Fragment,null,R.createElement(C.Input.Selection,{showLabel:false,label:i.selectColor},R.createElement(F,{tool:"brush",activeColor:o.color,colors:r,labelsColor:a,colorPickerDirection:"top",onChange:o.changeColor})))});import Dr from"react";var Po=l(()=>{const{brushTool:o}=m();const{locale:r}=o;const t=r.controls;return Dr.createElement(e.Slider,{identifier:"brush-hardness",tool:"brush","data-test":k.BrushHardness,showLabel:false,label:t.sliderHardness,value:o.hardness,min:0,max:1,onChange:o.changeHardness})});import Mr from"react";var $o=l(()=>{const{brushTool:o}=m();const{locale:r}=o;const t=r.controls;return Mr.createElement(e.Slider,{identifier:"brush-size",tool:"brush","data-test":k.BrushSize,showLabel:false,label:t.sliderSize,value:o.relativeSize,min:1,max:100,divider:1,onChange:o.changeRelativeSize})});var $r=e.ResponsiveTabWrapper;var{Tab:io}=e;var Wr=Pr(e.ControlsbarContainer)` > div { grid-template-columns: 1fr 5fr minmax(56px, 1fr); } `;var Wo=l(()=>{const{brushTool:o,custom:r}=m();const{locale:t,config:n}=o;const{basicUIToolControlBarTabsOrder:i}=n;const a=t.controls;const s=r.getButton("toolControlBarSecondaryButton");const c=p=>{switch(p){case"brushColor":return g.createElement(io,{key:p,label:a.tabColor},g.createElement(Mo,null));case"brushSize":return g.createElement(io,{key:p,label:a.tabSize},g.createElement($o,null));case"brushHardness":return g.createElement(io,{key:p,label:a.tabHardness},g.createElement(Po,null));default:return null}};return g.createElement(Wr,{style:{justifyContent:"center"},show:true},s&&g.createElement("div",null,g.createElement(s,{tool:"brush",ariaLabel:a.buttonReset,onClick:o.reset,icon:g.createElement(T.reset,null),isDisabled:!o.isDirty,label:a.buttonReset})),g.createElement(e.Other.ControlsWrapper,null,g.createElement(C.Input.Form,null,g.createElement($r,null,i.map(p=>c(p))))))});import X from"react";import zr from"styled-components";import oo from"react";var zo=l(()=>{const{filterTool:o}=m();const{state:r}=o;const t=o.locale.controls;const n=()=>{o.toolSnapshot()};return oo.createElement(e.Other.ControlsWrapper,null,oo.createElement(C.Spacer,{count:2}),oo.createElement(e.Slider,{identifier:"filter-intensity",tool:"filter","aria-hidden":!o.isOptionSelected,label:t.sliderIntensity,value:r.intensity,min:0,max:1,onMouseUp:n,onTouchEnd:n,onChange:o.changeIntensity,snap:r.isDuotone?.5:null}),oo.createElement(C.Spacer,{count:2}))});var Hr=zr(e.ControlsbarContainer)` > div { grid-template-columns: 1fr 5fr minmax(56px, 1fr); } `;var Ho=l(()=>{const{filterTool:o,custom:r}=m();const{config:t}=o;const{basicUIToolControlBarTabsOrder:n}=t;const i=r.getButton("toolControlBarSecondaryButton");const a=s=>{switch(s){case"filterIntensity":return X.createElement(zo,{key:s});default:return null}};return X.createElement(Hr,{show:o.isOptionSelected},i&&X.createElement("div",null,X.createElement(i,{tool:"filter",ariaLabel:o.locale.controls.buttonReset,onClick:o.reset,icon:X.createElement(T.reset,null),label:o.locale.controls.buttonReset})),n.map(s=>a(s)),X.createElement(e.BarSeparator,null))});import $ from"react";import Nr from"styled-components";var jr=Nr(e.ControlsbarContainer)` > div { grid-template-columns: 1fr 5fr minmax(56px, 1fr); } `;var No=l(()=>{const{focusTool:o,custom:r}=m();const t=o.locale.controls;const n=r.getButton("toolControlBarSecondaryButton");const i=()=>{o.toolSnapshot(t.sliderIntensity)};return $.createElement(jr,{show:o.isOptionSelected},n&&$.createElement("div",null,$.createElement(n,{tool:"focus",ariaLabel:t.buttonReset,onClick:o.reset,icon:$.createElement(T.reset,null),label:t.buttonReset})),$.createElement(e.Other.ControlsWrapper,null,$.createElement(C.Spacer,{count:2}),$.createElement(e.Slider,{identifier:"focus-intensity",tool:"focus","aria-hidden":!o.isOptionSelected,label:t.sliderIntensity,value:o.relativeIntensity,min:0,max:100,divider:1,onChange:o.changeRelativeIntensity,onMouseUp:i,onTouchEnd:i}),$.createElement(C.Spacer,{count:2})),$.createElement(e.BarSeparator,null))});import y from"react";import Yr from"styled-components";import jo from"react";var Vo=l(()=>{const{frameTool:o}=m();const r=o.locale.controls;const t=o.localeColor.colorPicker;const{colorList:n}=o;return jo.createElement(C.Input.Selection,{label:r.selectColor,showLabel:false},jo.createElement(F,{tool:"frame",activeColor:o.color,colors:n,labelsColor:t,colorPickerDirection:"top",onChange:o.changeColor,onAddSnapshot:o.colorSnapshot}))});import Vr from"react";var Xo=l(()=>{const{frameTool:o}=m();const r=o.locale.controls;const t=()=>{o.toolSnapshot(r.sliderOpacity)};return Vr.createElement(e.Slider,{identifier:"frame-opacity",tool:"frame","aria-hidden":!o.isOptionSelected,showLabel:false,label:r.sliderOpacity,value:o.opacity,min:0,max:1,onChange:o.changeOpacity,onMouseUp:t,onTouchEnd:t})});import Xr from"react";var Yo=l(()=>{const{frameTool:o}=m();const r=o.locale.controls;const t=()=>{o.toolSnapshot(r.sliderSize)};return Xr.createElement(e.Slider,{identifier:"frame-size",tool:"frame","aria-hidden":!o.isOptionSelected,showLabel:false,label:r.sliderSize,value:o.size,min:o.minSize,max:o.maxSize,divider:1,onChange:o.changeWidth,onMouseUp:t,onTouchEnd:t})});var Gr=e.TabWrapper;var{Tab:so}=e;var _r=Yr(e.ControlsbarContainer)` > div { grid-template-columns: 1fr 5fr minmax(56px, 1fr); } `;var Go=l(()=>{const{frameTool:o,custom:r}=m();const t=o.locale.controls;const{tintable:n,config:i}=o;const{basicUIToolControlBarTabsOrder:a}=i;const s=r.getButton("toolControlBarSecondaryButton");const c=p=>{switch(p){case"frameOpacity":return y.createElement(so,{key:p,label:t.tabOpacity},y.createElement(Xo,null));case"frameSize":return y.createElement(so,{key:p,label:t.tabSize},y.createElement(Yo,null));case"frameColor":return n&&y.createElement(so,{key:p,label:t.tabColor},y.createElement(Vo,null));default:return null}};return y.createElement(_r,{show:o.isOptionSelected},s&&y.createElement("div",null,y.createElement(s,{tool:"frame",ariaLabel:t.buttonReset,onClick:o.reset,icon:y.createElement(T.reset,null),label:t.buttonReset})),y.createElement(e.Other.ControlsWrapper,null,y.createElement(Gr,null,a.map(p=>c(p)))),y.createElement(e.BarSeparator,null))});import w from"react";import _o,{css as Kr}from"styled-components";var Jr=_o(e.ControlsbarContainer)` ${o=>o.firstChildMargin&&Kr` > :first-child { margin-right: 16px; } `} `;var qr=_o(e.Other.ControlsWrapper)` grid-column-start: 2; align-self: center; `;var Qr=({library:o,active:r,custom:t})=>{const n=o.locale.controls.placeholderSearch;const{config:i}=o;const a=t.getButton("toolControlBarPrimaryButton");const s=d=>{o.fetchImages(d)};const c=d=>{const{files:I}=d.target;if(I.length){const j=new FileReader;j.onload=no=>{r.newImage(no.target.result)};j.readAsDataURL(I[0])}};const p=()=>{r.selectWebcam(true)};const b=()=>{const d=document.getElementById("fileUpload");if(d){d.click()}};return w.createElement(Jr,{firstChildMargin:i.enableWebcam&&!o.libraryProvider,show:true},i.enableUpload&&a&&w.createElement("div",null,w.createElement(a,{tool:"library","data-test":k.LibraryUploadButton,ariaLabel:o.locale.controls.buttonUpload,onClick:b,icon:w.createElement(T.uploadImage,null),label:o.locale.controls.buttonUpload},w.createElement(C.Input.File,{onChange:c}))),o.libraryProvider&&w.createElement(qr,null,w.createElement(C.Input.Search,{onChange:s,placeholder:n})),i.enableWebcam&&w.createElement("div",null,w.createElement(Oo,{tool:"library",onClick:p,icon:w.createElement(T.openWebcam,null),label:o.locale.controls.buttonWebcamOpen})),w.createElement(e.BarSeparator,null))};var Ko=u("library","active","custom")(l(Qr));import O from"react";import Zr from"react";var Jo=l(()=>{const{overlayTool:o}=m();const r=o.locale.controls;const{blendMode:t,allBlendModes:n}=o;const i=a=>{o.changeBlendMode(a)};return Zr.createElement(C.Input.CarouselSlider,{showLabel:false,label:r.carouselBlendMode,defaultIdentifier:t,onSelect:i,list:n})});import Rr from"react";var qo=l(()=>{const{overlayTool:o}=m();const r=o.locale.controls;const{state:t}=o;const n=()=>{o.toolSnapshot()};return Rr.createElement(e.Slider,{identifier:"overlay-opacity",tool:"overlay","aria-hidden":!o.isOptionSelected,showLabel:false,label:r.sliderOpacity,value:t.opacity,min:0,max:1,onChange:o.changeOpacity,onMouseUp:n,onTouchEnd:n})});var ot=e.TabWrapper;var{Tab:Qo}=e;var Zo=l(()=>{const{overlayTool:o,custom:r}=m();const{config:t}=o;const{basicUIToolControlBarTabsOrder:n}=t;const i=o.locale.controls;const a=r.getButton("toolControlBarSecondaryButton");const s=c=>{switch(c){case"overlayBlendMode":return O.createElement(Qo,{key:c,label:i.tabBlendMode},O.createElement(Jo,null));case"overlayOpacity":return O.createElement(Qo,{key:c,label:i.tabOpacity},O.createElement(qo,null));default:return null}};return O.createElement(e.ControlsbarContainer,{show:o.isOptionSelected},a&&O.createElement("div",null,O.createElement(a,{tool:"overlay",ariaLabel:i.buttonReset,onClick:o.reset,icon:O.createElement(T.reset,null),label:i.buttonReset})),O.createElement(e.Other.ControlsWrapper,null,O.createElement(ot,null,n.map(c=>s(c)))),O.createElement(e.BarSeparator,null))});import L from"react";import tr from"styled-components";import ro from"react";var Ro=l(()=>{const{stickerTool:o}=m();const r=o.locale.controls;const t=o.localeColor.colorPicker;const{colorList:n}=o;return ro.createElement(ro.Fragment,null,ro.createElement(C.Input.Selection,{isDisabled:!o.isStickerSelected,showLabel:false,label:r.selectColor},ro.createElement(F,{tool:"sticker",activeSprite:o.id,activeColor:o.tintColor,colors:n,labelsColor:t,isDisabled:!o.isStickerSelected,colorPickerDirection:"top",onChange:o.changeTintColor,onAddSnapshot:o.tintColorSnapshot})))});import rt from"react";var or=l(()=>{const{stickerTool:o}=m();const r=o.locale.controls;const t=()=>{o.toolSnapshot()};return rt.createElement(e.Slider,{identifier:"sticker-opacity",tool:"sticker",isDisabled:!o.isStickerSelected,showLabel:false,label:r.sliderOpacity,value:o.opacity,min:0,max:1,onMouseUp:t,onTouchEnd:t,onChange:o.changeOpacity})});var tt=e.TabWrapper;var{Tab:rr}=e;var et=tr.input.attrs({type:"file",id:"fileUpload",accept:"image/*",multiple:true})` ${To.VisuallyHidden} `;var nt=tr(e.ControlsbarContainer)` > div { grid-template-columns: 1fr 5fr minmax(56px, 1fr); } `;var er=l(()=>{const{stickerTool:o,custom:r}=m();const{config:t}=o;const{basicUIToolControlBarTabsOrder:n}=t;const i=o.locale.controls;const a=r.getButton("toolControlBarPrimaryButton");const s=()=>{const d=document.getElementById("fileUpload");if(d){d.value=null;d.click()}};const c=d=>{const{files:I}=d.target;o.addFiles(I)};const p=d=>{switch(d){case"stickerColor":if(!o.tintable)return null;return L.createElement(rr,{key:d,label:i.tabColor},L.createElement(Ro,null));case"stickerOpacity":return L.createElement(rr,{key:d,label:i.tabOpacity},L.createElement(or,null));default:return null}};const b=()=>{if(o.isCustomStickerEnabled&&a){return L.createElement("div",null,L.createElement(a,{tool:"sticker",ariaLabel:i.buttonUpload,onClick:s,icon:L.createElement(T.uploadImage,null),label:i.buttonUpload},L.createElement(et,{onChange:c})))}return null};return L.createElement(nt,{show:true},b(),L.createElement(e.Other.ControlsWrapper,null,L.createElement(tt,null,n.map(d=>p(d)))),L.createElement(e.BarSeparator,null))});import B from"react";import mt from"styled-components";import nr from"react";var ir=l(()=>{const{textTool:o}=m();const{backgroundColorList:r}=o;const t=o.locale.controls;const n=o.localeColor.colorPicker;return nr.createElement(C.Input.Selection,{isDisabled:!o.isTextSelected,showLabel:false,label:t.selectBackgroundColor},nr.createElement(F,{tool:"text",activeSprite:o.id,activeColor:o.backgroundColor,colors:r,labelsColor:n,colorPickerDirection:"top",isDisabled:!o.isTextSelected,onChange:o.changeBackgroundColor,onAddSnapshot:o.backgroundColorSnapshot}))});import it from"react";import st from"styled-components";var at=st(C.Input.NumericInput)` max-width: 55px; > div > input { text-align: center; } `;var sr=l(()=>{var n;const{textTool:o}=m();const{locale:r}=o;const t=i=>{const a=i?parseFloat(i):0;o.setFontSize(Math.max(10,Math.min(690,a)))};return it.createElement(at,{id:"photoeditorsdk-text-font-size-input",value:o.fontSize.toFixed(0),onSubmit:t,isDisabled:!o.isTextSelected,label:(n=r.controls)==null?void 0:n.textFontSize,showLabel:false})});import lt from"react";var ar=l(()=>{const{textTool:o}=m();const r=o.locale.controls;const t=()=>{o.toolSnapshot()};return lt.createElement(e.Slider,{identifier:"text-line-spacing",tool:"text",isDisabled:!o.isTextSelected,showLabel:false,label:r.sliderLineSpacing,value:o.lineHeight,min:.5,max:3,onChange:o.changeLineHeight,onMouseUp:t,onTouchEnd:t,snap:1,divider:1,decimal:1})});import ao from"react";var lr=l(()=>{const{textTool:o,custom:r}=m();const t=o.locale.controls;const n=["left","center","right"];const i=r.getButton("textAlignment");return ao.createElement(C.Input.Selection,{isDisabled:!o.isTextSelected,showLabel:false,label:t.selectAlignment,"data-test":k.TextAlignment},n.map(a=>{const s=Bo[a];return ao.createElement(i,{tool:a,isDisabled:!o.isTextSelected,ariaLabel:`Align ${a}`,isActive:a===o.alignment,key:a,icon:ao.createElement(s,null),onClick:()=>o.changeAlignment(a)})}))});import mr from"react";var cr=l(()=>{const{textTool:o}=m();const{colorList:r}=o;const t=o.locale.controls;const n=o.localeColor.colorPicker;return mr.createElement(C.Input.Selection,{isDisabled:!o.isTextSelected,showLabel:false,label:t.selectFontColor},mr.createElement(F,{tool:"text",activeSprite:o.id,activeColor:o.textColor,colors:r,labelsColor:n,colorPickerDirection:"top",isDisabled:!o.isTextSelected,onChange:o.changeColor,onAddSnapshot:o.colorSnapshot}))});var ct=e.ResponsiveTabWrapper;var pt=mt(e.ControlsbarContainer)` > div { grid-template-columns: 1fr 5fr minmax(56px, 1fr); } `;var pr=l(()=>{const{textTool:o,custom:r}=m();const{config:t}=o;const{basicUIToolControlBarTabsOrder:n}=t;const i=o.locale.controls;const a=r.getButton("toolControlBarPrimaryButton");const s=c=>{switch(c){case"fontSize":return B.createElement(V,{key:c,label:i.tabFontSize},B.createElement(sr,null));case"textAlignment":return B.createElement(V,{key:c,label:i.tabAlignment},B.createElement(lr,null));case"textColor":return B.createElement(V,{key:c,label:i.tabColor},B.createElement(cr,null));case"backgroundColor":return B.createElement(V,{key:c,label:i.tabBgColor},B.createElement(ir,null));case"lineSpacing":return B.createElement(V,{key:c,label:i.tabLineHeight},B.createElement(ar,null));default:return null}};return B.createElement(pt,{show:true},B.createElement("div",null,B.createElement(a,{tool:"text",ariaLabel:i.buttonNew,onClick:o.add,icon:B.createElement(T.addText,null),label:i.buttonNew})),B.createElement(e.Other.ControlsWrapper,null,B.createElement(ct,null,n.map(c=>s(c)))),B.createElement(e.BarSeparator,null))});import E from"react";import Ct from"styled-components";var dt=Ct(F)` height: 40px; `;var ft=({textDesignTool:o,custom:r})=>{const t=o.locale.controls;const n=o.localeColor.colorPicker;const{colorList:i}=o;const a=r.getButton("toolControlBarSecondaryButton");const s=r.getButton("toolControlBarPrimaryButton");return E.createElement(e.ControlsbarContainer,{show:true},s&&E.createElement("div",null,E.createElement(s,{tool:"textdesign",ariaLabel:t.buttonNew,onClick:o.add,icon:E.createElement(T.addText,null),label:t.buttonNew})),E.createElement(e.Other.ControlsWrapper,null,E.createElement(C.Input.Selection,{isDisabled:!o.isTextDesignSelected,label:t.selectColor},E.createElement(dt,{tool:"textdesign",activeSprite:o.id,activeColor:o.color,colors:i,labelsColor:n,colorPickerDirection:"top",isDisabled:!o.isTextDesignSelected,onChange:o.changeColor,onAddSnapshot:o.colorSnapshot}))),a&&E.createElement("div",null,E.createElement(a,{tool:"textdesign",ariaLabel:t.buttonShuffle,onClick:o.changeSeed,icon:E.createElement(T.shuffle,null),label:t.buttonShuffle})),E.createElement(e.BarSeparator,null))};var Cr=u("textDesignTool","custom")(l(ft));import v,{useContext as ht}from"react";import St,{css as Bt}from"styled-components";import ut from"react";var dr=l(()=>{const{transformTool:o}=m();const r=o.locale.controls;const{forceDimensions:t}=o;return ut.createElement(Lo,{isDisabled:t,showLabel:false,valueHeight:o.localOutputHeight,valueWidth:o.localOutputWidth,onSubmitWidth:o.onPixelWidth,onSubmitHeight:o.onPixelHeight,label:r.inputCropSize,labelHeight:r.inputHeight,labelWidth:r.inputWidth,ariaLabelHeight:r.inputHeightAriaLabel,ariaLabelWidth:r.inputWidthAriaLabel})});import bt from"react";var fr=()=>bt.createElement(xo,null);import Tt from"react";var ur=l(()=>{const{transformTool:o,custom:r}=m();const t=o.locale.controls;const{forceDimensions:n}=o;const i=r.getCheckbox();if(!i){return null}return Tt.createElement(i,{tool:"transform",isDisabled:n,style:{paddingTop:"5px",justifyContent:"center"},value:o.lockResolution,checkMarkPosition:"left",label:t.checkboxKeepResolution,onClick:o.changeLockResolution})});var It=e.ResponsiveTabWrapper;var{Tab:lo}=e;var br=Bt` min-width: unset; `;var gt=St(e.Other.ControlsWrapper)` min-width: 365px; ${o=>o.smallContainer&&br} @media all and (min-width: 0) and (max-width: 599px) { ${br} } `;var Tr=l(()=>{const{transformTool:o,custom:r}=m();const{rect:t}=ht(uo);const{config:n}=o;const{basicUIToolControlBarTabsOrder:i}=n;const a=o.locale.controls;const s=r.getButton("toolControlBarSecondaryButton");const c=p=>{switch(p){case"flipRotate":return v.createElement(lo,{key:p,label:a.tabFlipAndRotate},v.createElement(fr,null));case"resolution":return v.createElement(lo,{key:p,label:a.tabResolution},v.createElement(ur,null));case"cropSize":return v.createElement(lo,{key:p,label:a.tabCropSize},v.createElement(dr,null));default:return null}};return v.createElement(e.ControlsbarContainer,{show:true},s&&v.createElement("div",null,v.createElement(s,{tool:"transform",ariaLabel:o.locale.controls.buttonReset,onClick:o.reset,icon:v.createElement(T.reset,null),label:o.locale.controls.buttonReset})),v.createElement(gt,{smallContainer:!!t&&t.width<600},v.createElement(It,null,i.map(p=>c(p)))),v.createElement(e.BarSeparator,null))});var hr=l(function o(){const{active:r,custom:t}=m();const n=r.tool;const i=t.getBasicToolControlBar();if(!i){return null}return h.createElement(i,{show:!!n,tool:n},h.createElement(C.Switch.Index,{type:n},h.createElement(C.Switch.Case,{value:"filter"},h.createElement(Ho,null)),h.createElement(C.Switch.Case,{value:"focus"},h.createElement(No,null)),h.createElement(C.Switch.Case,{value:"adjustment"},h.createElement(Do,null)),h.createElement(C.Switch.Case,{value:"overlay"},h.createElement(Zo,null)),h.createElement(C.Switch.Case,{value:"sticker"},h.createElement(er,null)),h.createElement(C.Switch.Case,{value:"text"},h.createElement(pr,null)),h.createElement(C.Switch.Case,{value:"textdesign"},h.createElement(Cr,null)),h.createElement(C.Switch.Case,{value:"library"},h.createElement(Ko,null)),h.createElement(C.Switch.Case,{value:"frame"},h.createElement(Go,null)),h.createElement(C.Switch.Case,{value:"brush"},h.createElement(Wo,null)),h.createElement(C.Switch.Case,{value:"transform"},h.createElement(Tr,null))))});import A,{useMemo as Pt}from"react";import _ from"react";import yt from"styled-components";var vt=yt.div` position: relative; top: -8px; color: ${o=>o.theme.card.foreground}; `;var xt=({adjustmentsTool:o})=>{const r=(t,n)=>{const i=Io[t.identifier];return _.createElement(e.Card,{"data-test":t.identifier,tool:"adjustment",type:"medium",onClick:()=>o.toggleOptionSelection(t.identifier),isActive:t.identifier===o.selectedAdjustmentType,key:`${t.identifier}-${n}`,label:t.name,style:{animationDelay:`${S(n)}s`}},_.createElement(vt,null,_.createElement(i,null)),_.createElement(e.CardLabel,null,o.locale.items[t.identifier]||t.name))};return _.createElement(e.CardContainer,null,o.items.map(r))};var Sr=u("adjustmentsTool")(l(xt));import Ut from"react";var Br=()=>{const{config:o}=m();const r=o.state.config["customTool"].toolControlBar;return Ut.createElement(r,{language:o.state.locale["customTool"]})};import z from"react";var K=class extends z.Component{constructor(){super(...arguments);this.onCategoryClick=r=>{const{filterTool:t}=this.props;t.toggleCategorySelection(r)};this.renderItem=(r,t)=>{var a,s;const{filterTool:n}=this.props;const i=(s=(a=n.locale)==null?void 0:a.controls)==null?void 0:s.itemAriaLabel;return z.createElement(e.Card,{tool:"filter",type:"medium",onClick:()=>n.selectFilter(r.identifier,r.defaultIntensity),isActive:n.identifier===r.identifier,key:`${r.identifier}-${t}`,image:r.thumbnailURI,label:r.name,"aria-label":i==null?void 0:i.replace(`\${label}`,r.name),style:{animationDelay:`${S(t)}s`}},z.createElement(e.CardLabel,{withBackground:true},n.locale.categories[r.identifier]||n.locale.items[r.identifier]||r.name))};this.renderCategory=(r,t)=>{var p;const{filterTool:n}=this.props;const{selectedCategoryIdentifier:i,locale:a}=n;const s=(p=a.controls)==null?void 0:p.categoryAriaLabel;const c=i===r.identifier;if(!r.items)return null;return z.createElement(e.CategoryContainer,{key:r.identifier},z.createElement(e.Card,{role:"button","aria-expanded":c,"aria-label":s==null?void 0:s.replace(`\${label}`,r.name),tool:"filter",type:"large",onClick:()=>this.onCategoryClick(r.identifier),image:r.thumbnailURI,label:r.name,style:{animationDelay:`${S(t)}s`}},z.createElement(e.CardLabel,{withBackground:true},r.name)),z.createElement(e.ExpandableContainer,{show:c},r.items.map(this.renderItem)))}}render(){const{filterTool:r}=this.props;const{categories:t,config:n,items:i}=r;if(n.flattenCategories)return z.createElement(e.CardContainer,null,i.map(this.renderItem));return z.createElement(e.CardContainer,null,t.map(this.renderCategory))}};K=D([u("filterTool","active"),l],K);import mo from"react";var kt=({focusTool:o})=>{var i,a;const r=(a=(i=o.locale)==null?void 0:i.controls)==null?void 0:a.itemAriaLabel;const t=s=>{o.selectFocus(s)};const n=(s,c)=>mo.createElement(e.Card,{isActive:s.identifier===o.identifier,tool:"focus",type:"medium",onClick:()=>t(s.identifier),key:`${s.identifier}-${c}`,image:s.thumbnailURI,label:s.name,"aria-label":r==null?void 0:r.replace(`\${label}`,s.name),style:{animationDelay:`${S(c)}s`}},mo.createElement(e.CardLabel,{withBackground:true},o.locale.items[s.identifier]||s.name));return mo.createElement(e.CardContainer,null,o.items.map(n))};var Ir=u("focusTool")(l(kt));import co from"react";var Ft=({frameTool:o})=>{var i,a;const r=o.identifier;const t=(a=(i=o.locale)==null?void 0:i.controls)==null?void 0:a.itemAriaLabel;const n=(s,c)=>co.createElement(e.Card,{tool:"frame",type:"medium",onClick:()=>o.selectFrame(s.identifier),isActive:s.identifier===r,key:`${s.identifier}-${c}`,image:s.thumbnailURI,label:s.name,"aria-label":t==null?void 0:t.replace(`\${label}`,s.name),style:{animationDelay:`${S(c)}s`,backgroundSize:"60%"}}," ",co.createElement(e.CardLabel,{hidden:true},o.locale.items[s.identifier]||s.name));return co.createElement(e.CardContainer,null,o.items.map(n))};var gr=u("frameTool")(l(Ft));import M from"react";import Lt from"styled-components";var yr=Lt.p` height: ${o=>o.theme.measurements.basicUIToolControlBar.itemsBarHeight}px; `;var J=class extends M.Component{constructor(){super(...arguments);this.onCategoryClick=r=>{const{library:t}=this.props;t.toggleCategorySelection(r)};this.renderItem=(r,t)=>{var s,c;const{active:n,library:i}=this.props;const a=(c=(s=i.locale)==null?void 0:s.controls)==null?void 0:c.itemAriaLabel;return M.createElement(e.Card,{tool:"library",type:"medium",onClick:()=>n.newImage(r.rawUrl),key:`${r.identifier}-${t}`,image:r.thumbnailURI,label:r.name,"aria-label":a==null?void 0:a.replace(`\${label}`,r.name),style:{animationDelay:`${S(t)}s`}})};this.renderCategory=(r,t)=>{var p;const{library:n}=this.props;const{selectedCategoryIdentifier:i,locale:a}=n;const s=(p=a.controls)==null?void 0:p.categoryAriaLabel;const c=i===r.identifier;if(!r.items)return null;return M.createElement(e.CategoryContainer,{key:r.identifier},M.createElement(e.Card,{role:"button","aria-expanded":c,"aria-label":s==null?void 0:s.replace(`\${label}`,r.name),tool:"library",type:"large",onClick:()=>this.onCategoryClick(r.identifier),image:r.thumbnailURI,label:r.name,style:{animationDelay:`${S(t)}s`}},M.createElement(e.CardLabel,{withBackground:true},r.name)),M.createElement(e.ExpandableContainer,{show:c},r.items.map(this.renderItem)))}}render(){const{library:r}=this.props;const{query:t,categories:n,items:i,locale:a,config:s}=r;if(t){return i.length?M.createElement(e.CardContainer,null,i.map(this.renderItem)):M.createElement(yr,{"data-test":k.NoResult},a.controls.noResults)}if(s.flattenCategories)return M.createElement(e.CardContainer,null,i.map(this.renderItem));return M.createElement(e.CardContainer,null,n.map(this.renderCategory))}};J=D([u("library","active"),l],J);import po from"react";var At=({overlayTool:o})=>{var c;const{identifier:r,items:t,selectOverlay:n,locale:i}=o;const a=(c=i.controls)==null?void 0:c.itemAriaLabel;const s=(p,b)=>po.createElement(e.Card,{tool:"overlay",type:"medium",onClick:()=>n(p.identifier),isActive:p.identifier===r,key:`${p.identifier}-${b}`,image:p.thumbnailURI,label:p.name,"aria-label":a==null?void 0:a.replace(`\${label}`,p.name),style:{animationDelay:`${S(b)}s`}},po.createElement(e.CardLabel,{withBackground:true},i.items[p.identifier]||p.name));return po.createElement(e.CardContainer,null,t.map(s))};var vr=u("overlayTool")(l(At));import H from"react";var q=class extends H.Component{constructor(){super(...arguments);this.onCategoryClick=r=>{const{stickerTool:t}=this.props;t.toggleCategorySelection(r)};this.renderItem=(r,t)=>{var a,s;const{stickerTool:n}=this.props;const i=(s=(a=n.locale)==null?void 0:a.controls)==null?void 0:s.itemAriaLabel;return H.createElement(e.Card,{tool:"sticker",type:"medium",onClick:()=>n.add(r.identifier),key:`${r.identifier}-${t}`,image:r.thumbnailURI,label:r.name,"aria-label":i==null?void 0:i.replace(`\${label}`,r.name),style:{backgroundSize:"55%",animationDelay:`${bo(t)}s`}},H.createElement(e.CardLabel,{hidden:true},n.locale.items[r.identifier]||r.name))};this.renderCategory=(r,t)=>{var p;const{stickerTool:n}=this.props;const{selectedCategoryIdentifier:i,locale:a}=n;const s=(p=a.controls)==null?void 0:p.categoryAriaLabel;const c=i===r.identifier;if(!r.items)return null;return H.createElement(e.CategoryContainer,{key:r.identifier},H.createElement(e.Card,{role:"button","aria-expanded":c,"aria-label":s==null?void 0:s.replace(`\${label}`,r.name),tool:"sticker",type:"large",onClick:()=>this.onCategoryClick(r.identifier),image:r.thumbnailURI,label:r.name,style:{animationDelay:`${S(t)}s`}},H.createElement(e.CardLabel,{withBackground:true},a.categories[r.identifier]||r.name)),H.createElement(e.ExpandableContainer,{show:c},r.items.map(this.renderItem)))}}render(){const{stickerTool:r}=this.props;const{categories:t,items:n,config:i}=r;if(i.flattenCategories)return H.createElement(e.CardContainer,null,n.map(this.renderItem));return H.createElement(e.CardContainer,null,t.map(this.renderCategory))}};q=D([u("stickerTool","active"),l],q);import to from"react";import wt from"styled-components";var Ot=wt.div` font-size: 20px; position: absolute; left: 50%; top: 50%; transform-origin: left top; `;var xr=class extends to.Component{constructor(){super(...arguments);this.getWidth=({fontFamily:r,fontStyle:t,fontWeight:n},i)=>{const a=document.createElement("canvas");const s=a.getContext("2d");s.font=`${t} ${n} 20px ${r}`;s.fillText(i,0,0);return s.measureText(i).width};this.renderItem=(r,t)=>{const{config:n,textTool:i}=this.props;const{fontFamily:a,fontWeight:s,fontStyle:c,identifier:p}=r;const b=`${r.fontFamily} ${yo.getDisplayFontStyle(r)}`;const d=this.getWidth(r,b);const I=(n.measurements.basicCard.medium.width-20)/d;return to.createElement(e.Card,{tool:"text",type:"medium",onClick:()=>i.changeFont(p),isDisabled:!this.textTool.isTextSelected,isActive:i.identifier===p,key:`${r.identifier}-${t}`,label:b,style:{animationDelay:`${S(t)}s`}},to.createElement(Ot,{style:{transform:`scale(${I}) translate(-50%, -50%)`,fontFamily:a,fontStyle:c,fontWeight:s}},b))}}get textTool(){return this.props.textTool}render(){const{textTool:r}=this.props;const{fontsLoaded:t,fontFamilies:n}=r;if(!t)return null;return to.createElement(e.CardContainer,null,n.map(this.renderItem))}};var Ur=u("textTool","config")(l(xr));import Co from"react";var Et=({textDesignTool:o})=>{var p;const{items:r,changeIdentifier:t,isTextDesignSelected:n,identifier:i,locale:a}=o;const s=(p=a.controls)==null?void 0:p.itemAriaLabel;const c=(b,d)=>{return Co.createElement(e.Card,{tool:"textdesign",type:"medium",onClick:()=>t(b.identifier),isDisabled:!n,isActive:i===b.identifier,key:`${b.identifier}-${d}`,image:b.thumbnailURI,label:b.name,"aria-label":s==null?void 0:s.replace(`\${label}`,b.name),style:{animationDelay:`${S(d)}s`,backgroundSize:"60%"}},Co.createElement(e.CardLabel,{hidden:true},b.name))};return Co.createElement(e.CardContainer,null,r.map(c))};var kr=u("textDesignTool")(l(Et));import x from"react";import Fr from"styled-components";var Dt=Fr.div` svg { margin-bottom: 12px; } `;var Mt=Fr.div` svg { width: ${o=>o.theme.measurements.basicCard.medium.height}px; height: ${o=>o.theme.measurements.basicCard.medium.height}px; } ${ho} { width: ${o=>o.theme.measurements.basicCard.medium.width-32}px; height: ${o=>o.theme.measurements.basicCard.medium.height-32}px; padding: 6px 0px 24px; } `;var Q=class extends x.Component{constructor(){super(...arguments);this.onCategoryClick=r=>{const{transformTool:t}=this.props;t.toggleCategorySelection(r)};this.renderItem=(r,t)=>{var j;const{transformTool:n,config:i}=this.props;const{locale:a,identifier:s}=n;const c=(j=a.controls)==null?void 0:j.itemAriaLabel;const p=n.checkIfTransformThumbnailExits(r.thumbnailURI);const b=Y.crops[r.identifier]||Y.crops.imgly_transform_common_custom;const d=x.createElement(e.CardLabel,null,a.items[r.identifier]||r.name);const I=p?d:x.createElement(Mt,null,x.createElement(b,{main:i.theme.transform.crops.main,highlight:i.theme.transform.crops.highlight,shadow:i.theme.transform.crops.shadow}),d);return x.createElement(e.Card,{tool:"transform",type:"medium",onClick:()=>n.changeIdentifier(r.identifier,true),key:`${r.identifier}-${t}`,image:r.thumbnailURI,label:r.name,"aria-label":c==null?void 0:c.replace(`\${label}`,r.name),isActive:r.identifier===s,style:{backgroundSize:"55%",animationDelay:`${S(t)}s`}},I)};this.renderCategory=(r,t)=>{var I;const{transformTool:n}=this.props;const{selectedCategoryIdentifier:i,locale:a}=n;const s=(I=a.controls)==null?void 0:I.categoryAriaLabel;const c=i===r.identifier;if(!r.items)return null;const p=n.checkIfTransformThumbnailExits(r.thumbnailURI);const b=x.createElement(e.CardLabel,null,a.categories[r.identifier]||r.name);const d=p?b:x.createElement(Dt,null,Y.categories[r.identifier]&&x.createElement(Y.categories[r.identifier]),b);return x.createElement(e.CategoryContainer,{key:r.identifier},x.createElement(e.Card,{role:"button","aria-expanded":c,"aria-label":s==null?void 0:s.replace(`\${label}`,r.name),tool:"transform",type:"large",onClick:()=>this.onCategoryClick(r.identifier),image:p?r.thumbnailURI:"",label:r.name,style:{animationDelay:`${S(t)}s`}},d),x.createElement(e.ExpandableContainer,{show:c},r.items.map(this.renderItem)))}}render(){const{transformTool:r}=this.props;const{categories:t,config:n,items:i}=r;if(n.flattenCategories)return x.createElement(e.CardContainer,null,i.map(this.renderItem));return x.createElement(e.CardContainer,null,t.map(this.renderCategory))}};Q=D([u("transformTool","config"),l],Q);var Lr=l(function o(){const{active:r,library:t,custom:n}=m();const i=r.tool;const a=Pt(()=>{switch(i){case"library":return A.createElement(J,null);case"filter":return A.createElement(K,null);case"focus":return A.createElement(Ir,null);case"adjustment":return A.createElement(Sr,null);case"overlay":return A.createElement(vr,null);case"sticker":return A.createElement(q,null);case"text":return A.createElement(Ur,null);case"textdesign":return A.createElement(kr,null);case"frame":return A.createElement(gr,null);case"transform":return A.createElement(Q,null);case"customTool":return A.createElement(Br,null);default:return null}},[i]);const s=n.getBasicToolItemsBar();if(!s||i==="brush"||i==="library"&&!t.libraryProvider){return null}return A.createElement(s,{show:!!i},a)});var Wt=$t.div` position: absolute; width: 100%; height: ${o=>o.theme.measurements.basicUIToolControlBar.maxHeight}px; bottom: 0; left: 0; background: ${o=>o.theme.webcam.backdrop}; z-index: ${o=>o.theme.measurements.zIndex.disable}; `;var Z=class extends U.Component{static getDerivedStateFromError(r){console.error(r);return{hasError:true}}render(){const{active:r,custom:t}=this.props;const n=t.getWindowContainer();return U.createElement(C.Container,{"data-test":k.EditorContainer},r.isWebcam?U.createElement(Wt,null):null,U.createElement(Fo,null),U.createElement(go,null,U.createElement(vo,null),n&&U.createElement(n,{tool:r.tool},U.createElement(wo,null,r.isWebcam?U.createElement(Ao,null):null,r.image&&U.createElement(Uo,null))),U.createElement(hr,null),U.createElement(Lr,null),U.createElement(Eo,null)))}};Z=D([u("active","custom"),l],Z);var Ar=class extends eo.Component{constructor(){super(...arguments);this.componentWillUnmount=()=>{this.editor.cleanUpCanvasMemory()}}componentDidMount(){const{editor:r,storeProps:t}=this.props;this.editor=r;this.storeProps=t;const n=new ko(this.editor.configStore.config.custom.components,{basicUIToolbar:e.Toolbar.Index,basicUIToolControlBar:e.Controlsbar,basicUIToolItemsBar:e.Itemsbar});const i={getDialog:n.getDialog,getButton:n.getButton,getColorItem:n.getColorItem,getCheckbox:n.getCheckbox,getSlider:n.getSlider,getBasicToolbar:n.getBasicToolbar,getBasicToolControlBar:n.getBasicToolControlBar,getBasicToolItemsBar:n.getBasicToolItemsBar,getWindowContainer:n.getWindowContainer};this.storeProps.custom=i;this.forceUpdate()}render(){return this.storeProps?eo.createElement(fo,{...this.storeProps},eo.createElement(zt,{theme:{...this.editor.configStore.theme,measurements:this.editor.configStore.measurements}},eo.createElement(Z,null))):null}};export{Ar as default};