@ydesign/react-editor 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-6XGFXDKJ.js +151 -0
- package/dist/{chunk-SR5OYO6O.js → chunk-QALZ5CAJ.js} +1 -1
- package/dist/config.js +1 -1
- package/dist/side-panel/index.js +1 -1
- package/dist/side-panel/side-panel.js +1 -1
- package/dist/toolbar/toolbar.js +1 -1
- package/dist/topbar/create-design.d.ts +28 -0
- package/dist/topbar/create-design.js +1 -0
- package/dist/topbar/topbar.js +5 -155
- package/package.json +1 -1
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import{a as I,c as ne}from"./chunk-2AZQIJ4K.js";import{a as L}from"./chunk-EWOU5F3O.js";import{b as G,c as B}from"./chunk-5C2MNUBC.js";import{a as te,b as ie,e as oe}from"./chunk-EUTDQZKU.js";import{Modal as Be,Button as Ue,ColorPicker as Te,InputNumber as re,Select as Me,Tooltip as le,App as Re,theme as De}from"antd";import{Grid2X2 as Le,Star as We,ShoppingBag as $e,FileText as Ae,Presentation as Ee,Share2 as _e,Printer as Fe,ImagePlus as He,FolderPlus as i,LockKeyholeOpen as Ve,LockKeyhole as je}from"lucide-react";import{useRef as Oe,useState as u,useMemo as ce,useCallback as T}from"react";import A from"styled-components";import{App as ke,Modal as Se,Upload as se}from"antd";import{Inbox as Ce}from"lucide-react";import{useRef as Pe,useState as Ne}from"react";import{jsx as a,jsxs as U}from"react/jsx-runtime";var{Dragger:Ie}=se,ae=({visible:S,onClose:E})=>{let{message:b,modal:_}=ke.useApp(),[h,C]=Ne(!1),x=Pe(null),F=ne();return a(Se,{width:750,title:"\u4E0A\u4F20 PSD \u6587\u4EF6",open:S,onCancel:()=>{if(h){b.warning("\u6587\u4EF6\u6B63\u5728\u89E3\u6790\u4E2D\uFF0C\u8BF7\u7A0D\u5019...");return}E()},footer:null,mask:{closable:!h},styles:{body:{height:"calc(100% - 40px)",padding:"10px 0 0 0"},container:{height:500}},centered:!0,children:a("div",{style:{height:"100%"},children:U(Ie,{...{name:"file-psd",multiple:!1,accept:".psd",showUploadList:!1,beforeUpload(r){return r.name.toLowerCase().endsWith(".psd")?!0:(b.error("\u4EC5\u652F\u6301 .psd \u683C\u5F0F\u6587\u4EF6"),se.LIST_IGNORE)},customRequest(r){let{file:n,onSuccess:p,onError:s,onProgress:f}=r;C(!0),x.current=b.loading("PSD \u6587\u4EF6\u89E3\u6790\u4E2D\uFF0C\u8BF7\u7A0D\u5019...",0);let c=new FormData;c.append("file",n),I.post(ie().url,c,{headers:{"Content-Type":"multipart/form-data"},onUploadProgress(d){d.total&&f&&f({percent:Math.round(d.loaded/d.total*100)})}}).then(d=>{p?.(d)}).catch(d=>{s?.(d)})},async onChange(r){let{status:n}=r.file;if(console.log("info",r),n==="done"){x.current?.(),x.current=null,C(!1),b.success(`${r.file.name} \u89E3\u6790\u6210\u529F`);let p=r.file.response;console.log("PSD \u89E3\u6790\u7ED3\u679C:",p.result);let{thumbnailUrl:s,content:f,name:c,width:d,height:m,filename:V,parseUrl:v}=p.result,M={sourceResourcesId:crypto.randomUUID(),content:f,width:d,height:m,parseUrl:v,thumbnailUrl:s,filename:V,name:c};console.log("postRecord ---> ",M);let y=oe(M);console.log("postData",y);try{let w=await I.post(y.url,y.data);console.log("res ---> ",w.result);let j=w.result,P=`${F.urls.editorUrl}?id=${j.id}&type=record`;console.log("editUrl",P);let z=window.open(P,"_blank");(!z||z.closed)&&_.info({title:"\u5141\u8BB8\u663E\u793A\u5F39\u51FA\u7A97\u53E3",width:480,content:U("div",{style:{padding:"16px 0"},children:[a("p",{style:{marginBottom:8,color:"#666"},children:"\u4F60\u9700\u8981\u6388\u6743\u672C\u7AD9\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u591A\u4E2A\u7A97\u53E3\u3002"}),U("div",{style:{marginBottom:12},children:[a("p",{children:a("b",{children:"\u7B2C1\u6B65"})}),a("p",{children:"\u70B9\u51FB\u6D4F\u89C8\u5668\u53F3\u4FA7\u9876\u90E8\u5F39\u51FA\u7684\u963B\u6B62\u7A0B\u5E8F\u56FE\u6807\u3002"})]}),U("div",{style:{marginBottom:12},children:[a("p",{children:a("b",{children:"\u7B2C2\u6B65"})}),a("p",{children:"\u70B9\u51FB\u59CB\u7EC8\u5141\u8BB8\u663E\u793A\u5F39\u51FA\u5F0F\u7A97\u53E3\u548C\u8FDB\u884C\u91CD\u5B9A\u5411\u3002"})]}),U("div",{style:{marginBottom:12},children:[a("p",{children:a("b",{children:"\u7B2C3\u6B65"})}),a("p",{children:"\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\uFF0C\u5373\u53EF\u6B63\u5E38\u4F7F\u7528\u529F\u80FD\u5566~"})]})]}),okText:"\u6211\u77E5\u9053\u5566"})}catch(w){console.error(w)}}else if(n==="error"){x.current?.(),x.current=null,C(!1);let p=r.file.error?.message||"\u89E3\u6790\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5";b.error(p)}}},disabled:h,children:[a("p",{className:"flex items-center justify-center",children:a(Ce,{size:60})}),a("p",{className:"ant-upload-text",children:h?"\u89E3\u6790\u4E2D...":"\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u5904\u4E0A\u4F20\u6216\u70B9\u51FB\u4E0A\u4F20"}),a("p",{className:"ant-upload-hint",children:a("a",{href:"https://www.yuque.com/meitumcp/vvtts5/gfv8e5",target:"_blank",onClick:r=>{r.stopPropagation()},children:"PSD\u6587\u4EF6\u5BFC\u5165\u89C4\u8303"})})]})})})};import{Fragment as Ze,jsx as e,jsxs as l}from"react/jsx-runtime";var Xe=[{key:"all",label:"\u5168\u90E8",icon:Le},{key:"common",label:"\u5E38\u7528\u5C3A\u5BF8",icon:We},{key:"ecommerce",label:"\u7535\u5546\u7269\u6599",icon:$e},{key:"office",label:"\u884C\u653F\u529E\u516C",icon:Ae},{key:"presentation",label:"\u6F14\u793A\u6587\u7A3F",icon:Ee},{key:"social",label:"\u793E\u4EA4\u5A92\u4F53",icon:_e},{key:"print",label:"\u5370\u5237\u7269\u6599",icon:Fe}],de=[{key:"common",label:"\u5E38\u7528\u5C3A\u5BF8",sizes:[{icon:e(i,{size:24}),name:"\u7535\u5546\u4E3B\u56FE\uFF081:1\uFF09",desc:"1440x1440px",width:1440,height:1440,unit:"px"},{icon:e(i,{size:24}),name:"\u7535\u5546\u4E3B\u56FE\uFF081:1\uFF09",desc:"800x800px",width:800,height:800,unit:"px"},{icon:e(i,{size:24}),name:"\u624B\u673A\u6D77\u62A5",desc:"1242x2208px",width:1242,height:2208,unit:"px"},{icon:e(i,{size:24}),name:"\u5C0F\u7EA2\u4E66\u5C01\u9762",desc:"1242x1656px",width:1242,height:1656,unit:"px"},{icon:e(i,{size:24}),name:"\u7AD6\u7248\u89C6\u9891\u5C01\u9762",desc:"1080x1920px",width:1080,height:1920,unit:"px"},{icon:e(i,{size:24}),name:"PPT\uFF0816:9\uFF09",desc:"1920x1080px",width:1920,height:1080,unit:"px"}]},{key:"ecommerce",label:"\u7535\u5546\u7269\u6599",sizes:[{icon:e(i,{size:24}),name:"\u7535\u5546\u4E3B\u56FE\uFF081:1\uFF09",desc:"1440x1440px",width:1440,height:1440,unit:"px"},{icon:e(i,{size:24}),name:"\u7535\u5546\u4E3B\u56FE\uFF081:1\uFF09",desc:"800x800px",width:800,height:800,unit:"px"},{icon:e(i,{size:24}),name:"\u7535\u5546\u4E3B\u56FE\uFF083:4\uFF09",desc:"1440x1920px",width:1440,height:1920,unit:"px"},{icon:e(i,{size:24}),name:"\u7535\u5546\u4E3B\u56FE\uFF083:4\uFF09",desc:"750x1000px",width:750,height:1e3,unit:"px"},{icon:e(i,{size:24}),name:"\u76F4\u64AD\u95F4\u80CC\u666F",desc:"1242x2690px",width:1242,height:2690,unit:"px"},{icon:e(i,{size:24}),name:"\u7535\u5546\u8BE6\u60C5\u9875",desc:"750x1000px",width:750,height:1e3,unit:"px"},{icon:e(i,{size:24}),name:"\u7535\u5546\u7AD6\u7248\u6D77\u62A5",desc:"1200x1920px",width:1200,height:1920,unit:"px"}]},{key:"office",label:"\u884C\u653F\u529E\u516C",sizes:[{icon:e(i,{size:24}),name:"\u7B80\u5386",desc:"2480x3507px",width:2480,height:3507,unit:"px"},{icon:e(i,{size:24}),name:"\u5DE5\u724C\u5DE5\u4F5C\u8BC1",desc:"709x1087px",width:709,height:1087,unit:"px"},{icon:e(i,{size:24}),name:"\u5956\u72B6\u8BC1\u4E66",desc:"3437x2550px",width:3437,height:2550,unit:"px"}]},{key:"presentation",label:"\u6F14\u793A\u6587\u7A3F",sizes:[{icon:e(i,{size:24}),name:"PPT\uFF0816:9\uFF09",desc:"1920x1080px",width:1920,height:1080,unit:"px"},{icon:e(i,{size:24}),name:"PPT\uFF084:3\uFF09",desc:"1024x768px",width:1024,height:768,unit:"px"}]},{key:"social",label:"\u793E\u4EA4\u5A92\u4F53",sizes:[{icon:e(i,{size:24}),name:"\u624B\u673A\u6D77\u62A5",desc:"1242x2208px",width:1242,height:2208,unit:"px"},{icon:e(i,{size:24}),name:"\u624B\u673A\u5168\u5C4F\u6D77\u62A5",desc:"1242x2688px",width:1242,height:2688,unit:"px"},{icon:e(i,{size:24}),name:"\u7AD6\u7248\u89C6\u9891\u5C01\u9762",desc:"1080x1920px",width:1080,height:1920,unit:"px"},{icon:e(i,{size:24}),name:"\u6A2A\u7248\u89C6\u9891\u5C01\u9762",desc:"1920x1080px",width:1920,height:1080,unit:"px"},{icon:e(i,{size:24}),name:"\u5C0F\u7EA2\u4E66\u5C01\u9762",desc:"1242x1656px",width:1242,height:1656,unit:"px"},{icon:e(i,{size:24}),name:"\u6296\u97F3\u56FE\u6587\u5E26\u8D27",desc:"1242x1656px",width:1242,height:1656,unit:"px"},{icon:e(i,{size:24}),name:"\u516C\u4F17\u53F7\u9996\u56FE",desc:"900x383px",width:900,height:383,unit:"px"},{icon:e(i,{size:24}),name:"\u516C\u4F17\u53F7\u6B21\u56FE",desc:"900x800px",width:900,height:800,unit:"px"},{icon:e(i,{size:24}),name:"\u957F\u56FE\u6D77\u62A5",desc:"800x2000px",width:800,height:2e3,unit:"px"}]},{key:"print",label:"\u5370\u5237\u7269\u6599",sizes:[{icon:e(i,{size:24}),name:"\u4E00\u5BF8\u8BC1\u4EF6\u7167",desc:"23x35mm",width:25,height:35,unit:"mm"},{icon:e(i,{size:24}),name:"\u4E8C\u5BF8\u8BC1\u4EF6\u7167",desc:"35x53mm",width:35,height:53,unit:"mm"},{icon:e(i,{size:24}),name:"1.8\u7C73\u5C55\u67B6",desc:"80x180cm",width:80,height:180,unit:"cm"},{icon:e(i,{size:24}),name:"2m\u6613\u62C9\u5B9D",desc:"80x200cm",width:80,height:200,unit:"cm"},{icon:e(i,{size:24}),name:"\u540D\u7247",desc:"96x60mm",width:96,height:60,unit:"mm"},{icon:e(i,{size:24}),name:"\u4F18\u60E0\u5238",desc:"186x66mm",width:186,height:66,unit:"mm"},{icon:e(i,{size:24}),name:"\u4F20\u5355",desc:"216x291cm",width:216,height:291,unit:"cm"}]}],pe=A.div`
|
|
2
|
+
padding: 16px 24px;
|
|
3
|
+
height: 60px;
|
|
4
|
+
flex: 1;
|
|
5
|
+
display: flex;
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
align-items: center;
|
|
8
|
+
border-radius: 8px;
|
|
9
|
+
border: 1px dashed #d0d2d6;
|
|
10
|
+
&:hover {
|
|
11
|
+
background-color: rgba(0, 31, 92, 0.06);
|
|
12
|
+
}
|
|
13
|
+
span {
|
|
14
|
+
margin-left: 8px;
|
|
15
|
+
}
|
|
16
|
+
`,qe=A.div`
|
|
17
|
+
flex: 1;
|
|
18
|
+
margin-left: 14px;
|
|
19
|
+
height: 100%;
|
|
20
|
+
|
|
21
|
+
.createrContentInner {
|
|
22
|
+
margin-bottom: 16px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.scrollbars div:first-child {
|
|
26
|
+
scroll-behavior: smooth;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.Widget.categorySection[data-is-folded='false'] .categoryFoldBtn,
|
|
30
|
+
.Widget.categorySection[data-is-multi-row='false'] .categoryFoldBtn {
|
|
31
|
+
display: none;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.Widget.categorySection[data-is-folded='true'] ul {
|
|
35
|
+
height: 97px;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
}
|
|
38
|
+
`,Ge=A.div`
|
|
39
|
+
width: 100%;
|
|
40
|
+
height: 100%;
|
|
41
|
+
position: relative;
|
|
42
|
+
padding-top: 16px;
|
|
43
|
+
overflow: hidden;
|
|
44
|
+
|
|
45
|
+
display: flex;
|
|
46
|
+
flex-direction: column;
|
|
47
|
+
align-items: center;
|
|
48
|
+
|
|
49
|
+
border-radius: 8px;
|
|
50
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
51
|
+
|
|
52
|
+
.canvasSizeName {
|
|
53
|
+
color: #616366;
|
|
54
|
+
font-size: 12px;
|
|
55
|
+
font-weight: 600;
|
|
56
|
+
line-height: 16px;
|
|
57
|
+
margin-top: 8px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.canvasSizeSize {
|
|
61
|
+
height: 14px;
|
|
62
|
+
overflow: hidden;
|
|
63
|
+
width: 100%;
|
|
64
|
+
margin-top: 4px;
|
|
65
|
+
|
|
66
|
+
span {
|
|
67
|
+
color: #abadb2;
|
|
68
|
+
display: block;
|
|
69
|
+
font-size: 20px;
|
|
70
|
+
font-weight: 400;
|
|
71
|
+
height: 200%;
|
|
72
|
+
line-height: 26px;
|
|
73
|
+
text-align: center;
|
|
74
|
+
-webkit-transform: scale(0.5);
|
|
75
|
+
transform: scale(0.5);
|
|
76
|
+
-webkit-transform-origin: top left;
|
|
77
|
+
transform-origin: top left;
|
|
78
|
+
width: 200%;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.canvasSizeMask {
|
|
83
|
+
background: rgba(0, 0, 0, 0.25);
|
|
84
|
+
display: none;
|
|
85
|
+
height: 100%;
|
|
86
|
+
left: 0;
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 0;
|
|
89
|
+
width: 100%;
|
|
90
|
+
}
|
|
91
|
+
.canvasSizeMask,
|
|
92
|
+
.canvasSizeMask button {
|
|
93
|
+
justify-content: center;
|
|
94
|
+
align-items: center;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.canvasSizeMask button {
|
|
98
|
+
background-color: #fff;
|
|
99
|
+
width: 66px;
|
|
100
|
+
height: 26px;
|
|
101
|
+
display: flex;
|
|
102
|
+
padding: 0 8px;
|
|
103
|
+
outline: none;
|
|
104
|
+
line-height: 16px;
|
|
105
|
+
font-size: 12px;
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
color: #1c1d1f;
|
|
108
|
+
border-radius: 6px;
|
|
109
|
+
}
|
|
110
|
+
.canvasSizeMask button:active {
|
|
111
|
+
background-color: #f2f2f2;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:hover .canvasSizeMask {
|
|
115
|
+
display: flex;
|
|
116
|
+
}
|
|
117
|
+
`,Ke=A.div`
|
|
118
|
+
display: flex;
|
|
119
|
+
margin-top: 20px;
|
|
120
|
+
flex-wrap: wrap;
|
|
121
|
+
align-items: center;
|
|
122
|
+
position: relative;
|
|
123
|
+
|
|
124
|
+
.sizeWarning {
|
|
125
|
+
width: 100%;
|
|
126
|
+
margin-bottom: 8px;
|
|
127
|
+
padding: 4px 8px;
|
|
128
|
+
font-size: 12px;
|
|
129
|
+
color: #ff4d4f;
|
|
130
|
+
background-color: #fff2f0;
|
|
131
|
+
border: 1px solid #ffccc7;
|
|
132
|
+
border-radius: 4px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.Widget.sizeInpueBox {
|
|
136
|
+
display: flex;
|
|
137
|
+
align-items: center;
|
|
138
|
+
|
|
139
|
+
flex: 1;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.Widget.sizeInpueBox .sizeInput {
|
|
143
|
+
flex: 1;
|
|
144
|
+
}
|
|
145
|
+
.Widget.sizeInpueBox .linkIcon {
|
|
146
|
+
padding: 8px;
|
|
147
|
+
background-color: #001f5c0f;
|
|
148
|
+
border-radius: 8px;
|
|
149
|
+
margin: 0 4px;
|
|
150
|
+
}
|
|
151
|
+
`,k=72,W=130,$=8e3,gt=({project:S,visible:E,onClose:b,onConfirm:_})=>{let{message:h,modal:C}=Re.useApp(),[x,F]=u("all"),H=Oe(null),{token:r}=De.useToken(),[n,p]=u(null),[s,f]=u(null),[c,d]=u("px"),[m,V]=u(!1),[v,M]=u(1),[y,w]=u("#ffffff"),[j,P]=u(!1),z=ce(()=>n?B({unitVal:n,dpi:k,unit:c}):0,[n,c]),O=ce(()=>s?B({unitVal:s,dpi:k,unit:c}):0,[s,c]),X=n!=null&&s!=null&&n>0&&s>0,R=X&&(z>$||O>$),D=X&&(z<W||O<W),q=!X||R||D,K=R?`\u8D85\u51FA\u753B\u5E03\u5C3A\u5BF8\u9650\u5236\uFF1A${$} * ${$} px`:D?`\u4F4E\u4E8E\u753B\u5E03\u5C3A\u5BF8\u9650\u5236\uFF1A${W} * ${W} px`:"",me=T(t=>{p(t),m&&t&&t>0&&f(Math.round(t/v))},[m,v]),he=T(t=>{f(t),m&&t&&t>0&&p(Math.round(t*v))},[m,v]),ge=T(()=>{!m&&n&&s&&n>0&&s>0&&M(n/s),V(t=>!t)},[m,n,s]),ue=T(t=>{if(n){let o=B({unitVal:n,dpi:k,unit:c});p(Math.round(G({px:o,dpi:k,unit:t,precious:0})))}if(s){let o=B({unitVal:s,dpi:k,unit:c});f(Math.round(G({px:o,dpi:k,unit:t,precious:0})))}d(t)},[n,s,c]),xe=T(()=>{if(q)return;let t=JSON.stringify({bg:{backgroundColor:y}}),o=new URLSearchParams({create:"",createEmptyPoster:"true",createInfo:t,height:String(s),unit:c,width:String(n)});console.log("params \u7684\u53C2\u6570 ---> ",o.toString()),console.log("project ",S.urls.editorUrl),window.open(`${S.urls.editorUrl}?${o.toString()}`,"_blank")},[q,y,O,z,c]),fe=t=>{F(t);let o=H.current;if(!o)return;let g=o.querySelector(`[data-category-id="${t}"]`);g&&o.scrollTo({top:g.offsetTop,behavior:"smooth"})},[ye,be]=u(()=>{let t={};return de.forEach(o=>{t[o.key]=o.sizes.length>6}),t});return l(Ze,{children:[l(Be,{title:"\u521B\u5EFA\u8BBE\u8BA1",open:E,onCancel:b,footer:null,width:880,mask:{closable:!1},styles:{body:{display:"flex",flex:1,padding:"20px 0",height:"100%"},container:{height:550}},children:[e("div",{className:"createrSideBar",style:{width:140,"--sidebar-active-bg":r.colorPrimaryBg,"--sidebar-hover-bg":r.colorPrimaryBgHover},children:Xe.map(t=>l("div",{"data-active":t.key===x,className:L("createrSideBarItem","flex h-[40px] px-2 mb-2 cursor-pointer rounded-md items-center hover:bg-[var(--sidebar-hover-bg)]",{"bg-[var(--sidebar-active-bg)] hover:bg-[var(--sidebar-active-bg)]":t.key===x}),onClick:()=>fe(t.key),children:[e(t.icon,{size:16,className:"ml-2"}),e("span",{className:"ml-2",children:t.label})]},t.key))}),e(qe,{children:e("div",{className:"scrollbars",style:{position:"relative",overflow:"hidden",width:"100%",height:"100%"},children:e("div",{ref:H,style:{position:"absolute",inset:0,overflow:"scroll"},children:l("div",{className:"createrContentInner",children:[e("div",{"data-category-id":"all"}),l("div",{className:"openBtns flex",children:[l(pe,{onClick:()=>{let t=document.createElement("input");t.type="file",t.accept="image/*",t.onchange=async()=>{let o=t.files?.[0];if(o)try{h.loading("\u6B63\u5728\u4E0A\u4F20...",0);let g=te(),N=new FormData;N.append("file",o);let Z=await I.post(g.url,N,{headers:{"Content-Type":"multipart/form-data"}});console.log("res",Z);let{url:J,width:Q,height:Y}=Z.result;console.log("url",J,Q,Y);let ve=encodeURIComponent(encodeURIComponent(J)),we=new URLSearchParams({createEmptyPoster:"true",width:String(Q),height:String(Y),unit:"px"});h.destroy();let ze=`${S.urls.editorUrl}/?${we.toString()}&open=${ve}`,ee=window.open(ze,"_blank");(!ee||ee.closed)&&C.info({title:"\u5141\u8BB8\u663E\u793A\u5F39\u51FA\u7A97\u53E3",width:480,content:l("div",{style:{padding:"16px 0"},children:[e("p",{style:{marginBottom:8,color:"#666"},children:"\u4F60\u9700\u8981\u6388\u6743\u672C\u7AD9\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u591A\u4E2A\u7A97\u53E3\u3002"}),l("div",{style:{marginBottom:12},children:[e("p",{children:e("b",{children:"\u7B2C1\u6B65"})}),e("p",{children:"\u70B9\u51FB\u6D4F\u89C8\u5668\u53F3\u4FA7\u9876\u90E8\u5F39\u51FA\u7684\u963B\u6B62\u7A0B\u5E8F\u56FE\u6807\u3002"})]}),l("div",{style:{marginBottom:12},children:[e("p",{children:e("b",{children:"\u7B2C2\u6B65"})}),e("p",{children:"\u70B9\u51FB\u59CB\u7EC8\u5141\u8BB8\u663E\u793A\u5F39\u51FA\u5F0F\u7A97\u53E3\u548C\u8FDB\u884C\u91CD\u5B9A\u5411\u3002"})]}),l("div",{style:{marginBottom:12},children:[e("p",{children:e("b",{children:"\u7B2C3\u6B65"})}),e("p",{children:"\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\uFF0C\u5373\u53EF\u6B63\u5E38\u4F7F\u7528\u529F\u80FD\u5566~"})]})]}),okText:"\u6211\u77E5\u9053\u5566"})}catch(g){h.destroy();let N=g?.message||"\u4E0A\u4F20\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5";h.error(N),console.error("\u4E0A\u4F20\u5931\u8D25:",N,g)}},t.click()},children:[e(He,{style:{color:r.colorPrimary}}),e("span",{children:"\u6253\u5F00\u56FE\u7247"})]}),e(le,{title:"\u4EC5\u652F\u6301psd\u683C\u5F0F\u6587\u4EF6",children:l(pe,{style:{marginLeft:12},onClick:()=>{P(!0),console.log("\u70B9\u51FB")},children:[e(i,{style:{color:r.colorPrimary}}),e("span",{children:"\u6253\u5F00PSD"})]})})]}),de.map(t=>l("div",{className:L("Widget categorySection","mt-6"),"data-category-id":t.key,"data-is-folded":ye[t.key]??!1,"data-is-multi-row":t.sizes.length>6,children:[l("div",{className:L("categoryHeader","flex items-center justify-between"),children:[e("div",{className:"categoryTitle text-sm font-semibold",children:t.label}),e("div",{className:"categoryFoldBtn flex items-center cursor-pointer",onClick:()=>be(o=>({...o,[t.key]:!1})),children:e("span",{className:"text-[#616366]",children:"\u67E5\u770B\u66F4\u591A"})})]}),t.key==="common"&&l(Ke,{children:[K&&e("div",{className:"sizeWarning",children:K}),l("div",{className:"Widget sizeInpueBox",children:[e("div",{className:"sizeInput",children:e(re,{prefix:"\u5BBD",value:n,min:0,precision:0,status:R||D?"error":void 0,onChange:me,styles:{actions:{opacity:1,width:24}},style:{width:"100%"}})}),e(le,{title:m?"\u89E3\u9501\u6BD4\u4F8B":"\u9501\u5B9A\u6BD4\u4F8B",children:e("div",{className:"linkIcon",style:{cursor:"pointer"},onClick:ge,children:m?e(je,{size:16}):e(Ve,{size:16})})}),e("div",{className:"sizeInput",children:e(re,{prefix:"\u9AD8",value:s,min:0,precision:0,status:R||D?"error":void 0,onChange:he,styles:{actions:{opacity:1,width:24}},style:{width:"100%"}})}),e("div",{className:"sizeUnitSelect",style:{width:98,marginLeft:12},children:e(Me,{value:c,style:{width:98},onChange:ue,options:[{label:"px \u50CF\u7D20",value:"px"},{label:"cm \u5398\u7C73",value:"cm"},{label:"mm \u6BEB\u7C73",value:"mm"}]})})]}),e("div",{className:"widgets-color-picker",style:{width:98,marginLeft:12},children:e(Te,{mode:"single",format:"hex",value:y,onChange:o=>w(o.toHexString()),styles:{root:{width:98},body:{width:92}}})}),e(Ue,{type:"primary",disabled:q,style:{width:98,marginLeft:12},onClick:xe,children:"\u521B\u5EFA"})]}),e("ul",{className:"flex mt-4 flex-wrap gap-3",children:t.sizes.map((o,g)=>e("li",{style:{width:"calc((100% - 60px) / 6)",height:97},children:l(Ge,{children:[o.icon,e("div",{className:"canvasSizeName",children:o.name}),e("div",{className:"canvasSizeSize",children:e("span",{children:o.desc})}),e("div",{className:"canvasSizeMask",onClick:()=>{_({...o,bgColor:y})},children:e("button",{type:"button",children:"\u521B\u5EFA"})})]})},g))})]},t.key))]})})})})]}),e(ae,{visible:j,onClose:()=>P(!1)})]})};export{gt as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as D,b as ne,c as fe,f as pe}from"./chunk-63A6RW6Y.js";import{
|
|
1
|
+
import{a as D,b as ne,c as fe,f as pe}from"./chunk-63A6RW6Y.js";import{a as L}from"./chunk-EWOU5F3O.js";import{a as ce,b as q,c as j}from"./chunk-5C2MNUBC.js";import{d as re}from"./chunk-45NWLCOP.js";import{c as s}from"./chunk-WFMCGQ5V.js";import F from"styled-components";import{useRef as ze,useLayoutEffect as Kt}from"react";import{observer as M}from"mobx-react-lite";import Ge from"styled-components";import{theme as Ze}from"antd";import{jsx as me,jsxs as We}from"react/jsx-runtime";var Pe=Ge.div`
|
|
2
2
|
width: 100%;
|
|
3
3
|
min-width: 78px;
|
|
4
4
|
height: 72px;
|
package/dist/config.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{c as d,d as e,e as f,f as g}from"./chunk-45NWLCOP.js";import{
|
|
1
|
+
import{c as d,d as e,e as f,f as g}from"./chunk-45NWLCOP.js";import{f as c}from"./chunk-EUTDQZKU.js";import{a,b}from"./chunk-WFMCGQ5V.js";import"./chunk-O2XFH626.js";export{f as LinePoolItems,g as PathLineLibs,e as PathShapeLibs,d as ShapePathFormulasKeys,b as getTranslations,c as setAPI,a as setTranslations};
|
package/dist/side-panel/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as o,b as r,c as e,d as f,e as m,f as p,g as t,h as x,i as a,j as b,k as c}from"../chunk-
|
|
1
|
+
import{a as o,b as r,c as e,d as f,e as m,f as p,g as t,h as x,i as a,j as b,k as c}from"../chunk-QALZ5CAJ.js";import"../chunk-63A6RW6Y.js";import"../chunk-EWOU5F3O.js";import"../chunk-RVXI723F.js";import"../chunk-5C2MNUBC.js";import"../chunk-45NWLCOP.js";import"../chunk-EUTDQZKU.js";import"../chunk-WFMCGQ5V.js";import"../chunk-O2XFH626.js";export{t as BackgroundSection,b as DEFAULT_SECTIONS,x as LayersSection,f as PhotosSection,o as SectionTab,m as ShapesSection,c as SidePanel,a as SizeSection,r as TemplatesSection,e as TextSection,p as UploadSection};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a,b,c,d,e,f,g,h,i,j,k,l}from"../chunk-
|
|
1
|
+
import{a,b,c,d,e,f,g,h,i,j,k,l}from"../chunk-QALZ5CAJ.js";import"../chunk-63A6RW6Y.js";import"../chunk-EWOU5F3O.js";import"../chunk-RVXI723F.js";import"../chunk-5C2MNUBC.js";import"../chunk-45NWLCOP.js";import"../chunk-EUTDQZKU.js";import"../chunk-WFMCGQ5V.js";import"../chunk-O2XFH626.js";export{g as BackgroundSection,j as DEFAULT_SECTIONS,h as LayersSection,d as PhotosSection,a as SectionTab,e as ShapesSection,k as SidePanel,i as SizeSection,b as TemplatesSection,c as TextSection,f as UploadSection,l as default};
|
package/dist/toolbar/toolbar.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as W,e as _,g as $t}from"../chunk-63A6RW6Y.js";import{a as z,c as qt}from"../chunk-RVXI723F.js";import{a as Xt,b as Kt,d as Jt}from"../chunk-45NWLCOP.js";import{b as Qt}from"../chunk-RBRSKAZL.js";import{a as Bt}from"../chunk-YBC2DYJX.js";import{a as nt}from"../chunk-EWOU5F3O.js";import{c as i}from"../chunk-WFMCGQ5V.js";import"../chunk-EUTDQZKU.js";import"../chunk-O2XFH626.js";import jt from"styled-components";import{useRef as Sn}from"react";import{observer as U}from"mobx-react-lite";import{useEffect as tt,useState as S,useCallback as uo,useRef as oe,useMemo as go}from"react";import{ColorPicker as fo,Popover as ne,Button as R,Input as yo,InputNumber as Et,Space as bo,Slider as re,Tooltip as L}from"antd";import{cssGradient2FabricGradient as ho}from"@ydesign/core";import{ChevronDown as xo,TextAlignStart as vo,TextAlignCenter as ko,TextAlignEnd as Co,TextAlignJustify as Fo,Bold as So,Italic as To,Underline as wo,Strikethrough as Bo,ListChevronsUpDown as Ho,TextWrap as Po}from"lucide-react";import{FixedSizeList as Eo}from"react-window";import{Popover as ro,Button as no,Switch as Ht,Slider as lt,InputNumber as q,ColorPicker as Zt}from"antd";import{observer as io}from"mobx-react-lite";import{Sparkles as lo}from"lucide-react";import{useEffect as ao,useState as x}from"react";import{Fragment as Pt,jsx as f,jsxs as C}from"react/jsx-runtime";var $=(t,e,o)=>Math.max(e,Math.min(o,t)),te={display:"inline-flex",justifyContent:"space-between",width:"100%",padding:6},it={display:"flex",alignItems:"center",justifyContent:"space-between",padding:6},N=({label:t,enabled:e,visible:o=!0,onEnabledChange:l,numberValue:n,min:r,max:d,onNumberValueChange:p,step:y})=>o?C(Pt,{children:[C("div",{style:{display:"inline-flex",justifyContent:"space-between",width:"100%",padding:"6px"},children:[f("span",{children:t}),f(Ht,{checked:e,onChange:s=>{l(s)}})]}),e?C("div",{style:{display:"flex",width:"100%",justifyContent:"space-between",marginTop:10,marginBottom:10},children:[f("div",{style:{flex:1},children:f(lt,{value:n,onChange:s=>{p(s)},min:r,max:d,step:y})}),f(q,{size:"small",style:{width:60,marginLeft:10},value:n,step:y,onChange:s=>{p($(s,r,d))}})]}):null]}):null,D=io(({element:t,store:e,elements:o})=>{let n=(o||[t])[0],r=e.editor,d=n?.type==="textbox",p=n?.type==="image",y=r?.imageFiltersHandler.getFilter("blur"),s=r?.imageFiltersHandler.getFilter("brightness"),c=r?.imageFiltersHandler.getFilter("contrast"),u=r?.imageFiltersHandler.getFilter("saturation"),B=r?.imageFiltersHandler.getFilter("vibrance"),H=r?.imageFiltersHandler.getFilter("hueRotation"),I=r?.imageFiltersHandler.getFilter("noise"),P=r?.imageFiltersHandler.getFilter("pixelate"),[M,J]=x(!!y),[ft,rt]=x(y?.blur||.5),[E,yt]=x(!!s),[Le,Mt]=x(s?.brightness||.05),[Ue,bt]=x(!!c),[Ge,Wt]=x(c?.contrast||.25),[Ye,ht]=x(!!u),[Xe,_t]=x(u?.saturation||1),[Ke,xt]=x(!!B),[Je,Dt]=x(B?.vibrance||1),[qe,vt]=x(!!H),[$e,Lt]=x(H?.rotation||-.5),[Qe,kt]=x(!!I),[Ze,Ut]=x(I?.noise||30),[to,Ct]=x(!!P),[eo,Gt]=x(P?.blocksize||30),[oo,Ft]=x(n?.stroke),[St,Tt]=x(n?.strokeWidth),[T,Yt]=x({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"});ao(()=>{Ft(n?.stroke),Tt(n?.strokeWidth),Yt({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"}),J(!!y),rt(y?.blur||.5),yt(!!s),Mt(s?.brightness||.05),bt(!!c),Wt(c?.contrast||.25),ht(!!u),_t(u?.saturation||1),xt(!!B),Dt(B?.vibrance||1),vt(!!H),Lt(H?.rotation||-.5),kt(!!I),Ut(I?.noise||30),Ct(!!P),Gt(P?.blocksize||30)},[n]);let wt=a=>{r?.objectsHandler.setTextStyle(a)},A=(a,b)=>{Yt({...T,[a]:b}),r&&r.objectsHandler.setShadow({...T,[a]:b})};return f(ro,{trigger:"click",content:C("div",{style:{width:"280px",maxHeight:"calc(100vh - 150px)",overflow:"auto"},children:[f(N,{label:i("toolbar.blur"),visible:p,enabled:M,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"blur",{blur:.5}),J(!0)):(r?.imageFiltersHandler._removeFilter(b,"blur"),J(!1))},min:0,max:1,step:.1,numberValue:ft,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("blur","blur",a),rt(a)}}),f(N,{label:i("toolbar.brightness"),visible:p,enabled:E,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"brightness",{brightness:.05}),yt(!0)):(r?.imageFiltersHandler._removeFilter(b,"brightness"),yt(!1))},min:-1,max:1,step:.01,numberValue:Le,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("brightness","brightness",a),Mt(a)}}),f(N,{label:i("toolbar.contrast"),visible:p,enabled:Ue,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"contrast",{contrast:.25}),bt(!0)):(r?.imageFiltersHandler._removeFilter(b,"contrast"),bt(!1))},min:-1,max:1,step:.01,numberValue:Ge,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("contrast","contrast",a),Wt(a)}}),f(N,{label:i("toolbar.saturation"),visible:p,enabled:Ye,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"saturation",{saturation:1}),ht(!0)):(r?.imageFiltersHandler._removeFilter(b,"saturation"),ht(!1))},min:-1,max:1,step:.01,numberValue:Xe,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("saturation","saturation",a),_t(a)}}),f(N,{label:i("toolbar.vibrance"),visible:p,enabled:Ke,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"vibrance",{vibrance:1}),xt(!0)):(r?.imageFiltersHandler._removeFilter(b,"vibrance"),xt(!1))},min:-1,max:1,step:.01,numberValue:Je,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("vibrance","vibrance",a),Dt(a)}}),f(N,{label:i("toolbar.hueRotation"),visible:p,enabled:qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"hueRotation",{rotation:-.5}),vt(!0)):(r?.imageFiltersHandler._removeFilter(b,"hueRotation"),vt(!1))},min:-1,max:1,step:.01,numberValue:$e,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("hueRotation","rotation",a),Lt(a)}}),f(N,{label:i("toolbar.noise"),visible:p,enabled:Qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"noise",{noise:30}),kt(!0)):(r?.imageFiltersHandler._removeFilter(b,"noise"),kt(!1))},min:0,max:1e3,step:1,numberValue:Ze,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("noise","noise",a),Ut(a)}}),f(N,{label:i("toolbar.pixelate"),visible:p,enabled:to,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"pixelate",{blocksize:10}),Ct(!0)):(r?.imageFiltersHandler._removeFilter(b,"pixelate"),Ct(!1))},min:.01,max:100,step:.01,numberValue:eo,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("pixelate","blocksize",a),Gt(a)}}),d&&C(Pt,{children:[C("div",{style:te,children:[f("span",{children:i("toolbar.textStroke")}),f(Ht,{checked:!!St,onChange:a=>{wt({strokeWidth:a?10:0,stroke:a?"red":null}),Tt(a?10:0),Ft(a?"red":null)}})]}),!!St&&C("div",{style:{display:"flex",justifyContent:"space-between",padding:"6px"},children:[f(Zt,{value:oo,onChange:a=>{let b=a.toCssString();wt({stroke:b}),Ft(b)}}),f(q,{value:St,onChange:a=>{wt({strokeWidth:$(a,1,30)}),Tt($(a,1,30))},style:{width:60},min:1,max:Math.round(n.fontSize/2)})]})]}),C("div",{style:te,children:[f("span",{children:i("toolbar.shadow")}),f(Ht,{checked:!!T.enabled,onChange:a=>{A("enabled",a)}})]}),T.enabled&&C(Pt,{children:[C("div",{style:it,children:[f("div",{children:i("toolbar.blur")}),f("div",{children:f(q,{value:T.blur,style:{width:60},min:0,max:50,onChange:a=>{A("blur",a)}})})]}),f(lt,{value:T.blur,onChange:a=>A("blur",a),min:0,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetX")}),f("div",{children:f(q,{value:T.offsetX,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetX",$(a,-50,50))}})})]}),f(lt,{value:T.offsetX,onChange:a=>A("offsetX",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetY")}),f("div",{children:f(q,{value:T.offsetY,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetY",$(a,-50,50))}})})]}),f(lt,{value:T.offsetY,onChange:a=>A("offsetY",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.color")}),f(Zt,{defaultFormat:"rgb",value:T.color,onChange:a=>{A("color",a.toRgbString())}})]})]})]}),children:f(no,{type:"text",icon:f(lo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.effects")})})});import{observer as so}from"mobx-react-lite";import{Popover as co,Button as po}from"antd";import{Pencil as mo}from"lucide-react";import{jsx as at}from"react/jsx-runtime";var ee=so(()=>at(co,{trigger:"click",content:at("div",{children:"AI write"}),children:at(po,{type:"text",icon:at(mo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.aiText.aiWrite")})}));import{jsx as m,jsxs as Z}from"react/jsx-runtime";var{Search:Io}=yo,zo=({fontFamily:t,handleClick:e,modifiers:o,store:l,isCustom:n})=>{let[r,d]=S(!n);if(console.log("FontItem ---> ",d),tt(()=>{r||l.loadFont(t)},[t,r]),t==="_divider")return m("div",{style:{width:"100%",height:1,background:"#e8e8e8"}});let p=t;return m(R,{type:o.active?"primary":"text",block:!0,style:{justifyContent:"start"},onClick:()=>e(t),disabled:o.disabled,styles:{root:{fontFamily:'"'+t+'"'},content:{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"}},children:p})},Ro=({onChange:t,defaultValue:e})=>m(Io,{placeholder:e,allowClear:!0,onChange:o=>{t(o.target.value)},style:{width:210}}),Ao=({store:t,fonts:e,activeFont:o,activeFontLabel:l,onFontSelect:n})=>{let[r,d]=S(""),p=e.filter(y=>y.toLowerCase().includes(r.toLowerCase()));return m(ne,{content:Z("div",{children:[m(Ro,{defaultValue:"\u641C\u7D22\u5B57\u4F53",onChange:y=>d(y??"")}),m("div",{style:{paddingTop:5},children:m(Eo,{itemCount:p.length,itemSize:28,width:210,height:Math.min(400,28*p.length)+10,children:({index:y,style:s})=>{let c=p[y];return m("div",{style:{...s,display:"flex",alignItems:"center",justifyContent:"center"},children:m(zo,{fontFamily:c,modifiers:{active:o===c},handleClick:()=>n(c),store:t,isCustom:t.fonts.find(u=>u.fontFamily===c)||Bt.find(u=>u.fontFamily===c)},c)})}})})]}),trigger:"click",children:m(R,{type:"text",style:{marginRight:5,fontFamily:'"'+o+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:30,padding:"0 10px"},icon:m(xo,{size:16,style:{display:"flex"}}),iconPlacement:"end",children:l})})},st=["left","center","right","justify"],No=U(({elements:t,store:e})=>{let o=e.fonts.concat(Bt).map(d=>d.fontFamily),l=t[0].fontFamily;l.length>15&&(l=l.slice(0,15)+"...");let n=qt(e.objects),r=[...new Set(n.concat("_divider").concat(o))];return m(Ao,{fonts:r,activeFont:t[0].fontFamily,activeFontLabel:l,store:e,onFontSelect:d=>{e.editor?.objectsHandler.setTextStyle({fontFamily:d})}})}),Q=t=>t?typeof t=="string"?t:t.colorStops?JSON.stringify(t.colorStops):JSON.stringify(t):"",Vo=U(({elements:t,store:e})=>{let o=t[0],l=uo(()=>{let{selectionStart:s,selectionEnd:c}=o;if(s!==c&&s!==void 0){let u=o.getSelectionStyles(s,s+1);if(u.length>0&&u[0].fill!==void 0)return u[0].fill}return o.fill},[o]),[n,r]=S(()=>z(l())),d=oe(!1),p=oe(Q(l()));tt(()=>{let s=e.editor?.customCanvas?.canvas;if(!s)return;let c=()=>{if(!d.current){let u=l();p.current=Q(u),r(z(u))}};return s.on("text:selection:changed",c),s.on("text:editing:entered",c),s.on("text:editing:exited",c),()=>{s.off("text:selection:changed",c),s.off("text:editing:entered",c),s.off("text:editing:exited",c)}},[e.editor?.customCanvas?.canvas,l]),tt(()=>{if(!d.current){let s=l(),c=Q(s);c!==p.current&&(p.current=c,r(z(s)))}},[o,l]);let y=go(()=>n,[Q(n)]);return m(fo,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:s=>{if(d.current=s,!s){let c=l();p.current=Q(c)}},onChange:s=>{r(s)},onChangeComplete:s=>{let c=s.toCssString();if(c.includes("gradient")){let u=ho(c);e.editor?.objectsHandler.setTextStyle({fill:u})}else e.editor?.objectsHandler.setTextStyle({fill:c})}})}),Oo=U(({elements:t,store:e})=>{let[o,l]=S(t[0].fontSize);tt(()=>{l(t[0].fontSize)},[t[0]?.fontSize,e._updateFontSize]);let n=r=>{Number.isNaN(r)||(e.editor?.objectsHandler.setTextStyle({fontSize:Number(r)}),l(Number(r)))};return m(Et,{min:1,max:4*e.height,value:Math.round(o),onChange:n,style:{width:75},styles:{actions:{opacity:1,width:24}}})}),jo=U(({elements:t,store:e})=>{let o=t[0],[l,n]=S(o.textAlign),[r,d]=S(o.fontWeight),[p,y]=S(o.fontStyle),[s,c]=S(o.underline),[u,B]=S(o.linethrough),[H,I]=S(o.splitByGrapheme);return tt(()=>{n(o.textAlign),d(o.fontWeight),y(o.fontStyle),c(o.underline),B(o.linethrough),I(o.splitByGrapheme)},[o]),Z(bo.Compact,{children:[m(L,{placement:"bottom",title:i(`toolbar.text${l}`),children:m(R,{type:"text",icon:l==="left"?m(vo,{size:16,style:{display:"flex"}}):l==="center"?m(ko,{size:16,style:{display:"flex"}}):l==="right"?m(Co,{size:16,style:{display:"flex"}}):m(Fo,{size:16,style:{display:"flex"}}),onClick:()=>{let P=(st.indexOf(l)+1+st.length)%st.length,M=st[P];e.editor?.objectsHandler.setTextStyle({textAlign:M}),n(M)}})}),m(L,{placement:"bottom",title:i("toolbar.textBold"),children:m(R,{type:r==="bold"||r==="700"?"primary":"text",icon:m(So,{size:16,style:{display:"flex"}}),onClick:()=>{r==="bold"||r==="700"?(e.editor?.objectsHandler.setTextStyle({fontWeight:"normal"}),d("normal")):(e.editor?.objectsHandler.setTextStyle({fontWeight:"bold"}),d("bold"))}})}),m(L,{placement:"bottom",title:i("toolbar.textItalic"),children:m(R,{type:p==="italic"?"primary":"text",icon:m(To,{size:16,style:{display:"flex"}}),onClick:()=>{p==="italic"?(e.editor?.objectsHandler.setTextStyle({fontStyle:"normal"}),y("normal")):(e.editor?.objectsHandler.setTextStyle({fontStyle:"italic"}),y("italic"))}})}),m(L,{placement:"bottom",title:i("toolbar.textUnderline"),children:m(R,{type:s?"primary":"text",icon:m(wo,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({underline:!s}),c(!s)}})}),m(L,{placement:"bottom",title:i("toolbar.textStrikethrough"),children:m(R,{type:u?"primary":"text",icon:m(Bo,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({linethrough:!u}),B(!u)}})}),m(L,{placement:"bottom",title:i("toolbar.splitByGrapheme"),children:m(R,{type:H?"primary":"text",icon:m(Po,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({splitByGrapheme:!H}),I(!H)}})})]})}),Mo=U(({elements:t,store:e})=>{let o=t[0],l={display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},n=typeof o.lineHeight=="number"?100*o.lineHeight:120,[r,d]=S(n),[p,y]=S(o.charSpacing),s=c=>{e.editor?.objectsHandler.setTextStyle(c)};return m(ne,{trigger:"click",content:Z("div",{style:{padding:"0 6px",width:"230px"},children:[Z("div",{style:l,children:[m("div",{children:i("toolbar.lineHeight")}),m("div",{children:m(Et,{min:50,max:250,value:Math.round(r),style:{width:80},onChange:c=>{s({lineHeight:c/100}),d(c)}})})]}),m(re,{value:Math.round(r),min:50,max:250,step:1,onChange:c=>{s({lineHeight:c/100}),d(c)}}),Z("div",{style:l,children:[m("div",{children:i("toolbar.letterSpacing")}),m("div",{children:m(Et,{min:-50,max:250,value:Math.round(p/10),style:{width:80},onChange:c=>{s({charSpacing:(c??0)*10}),y((c??0)*10)}})})]}),m(re,{value:Math.round(p/10),min:-50,max:250,step:1,onChange:c=>{s({charSpacing:(c??0)*10}),y((c??0)*10)}})]}),children:m(R,{type:"text",icon:m(Ho,{size:16,style:{display:"flex"}})})})}),Wo={TextFill:Vo,TextFontFamily:No,TextFontSize:Oo,TextFontVariant:jo,TextSpacing:Mo,TextFilters:D,TextAiWrite:ee},_o=U(({store:t,components:e})=>{let o=t.selectedElements,n=W({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters","TextAiWrite"],components:e});return m(_,{items:n,itemRender:r=>{let d=e[r]||Wo[r];return d&&m(d,{elements:o,element:o[0],store:t},r)}})}),ie=_o;import{Tooltip as le,Button as ae}from"antd";import{Undo2 as Do,Redo2 as Lo}from"lucide-react";import{observer as Uo}from"mobx-react-lite";import{useEffect as Go,useState as Yo}from"react";import{jsx as G,jsxs as Xo}from"react/jsx-runtime";var se=Uo(({store:t})=>{let[e,o]=Yo({hasUndo:!1,hasRedo:!1});return Go(()=>{let l=t.editor,n=r=>{o(r)};return l&&l.on("history:changed",n),()=>{l&&l.off("history:changed",n)}},[t.editor]),Xo(It,{style:{float:"left",paddingRight:10},children:[G(le,{title:i("toolbar.undo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasUndo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.undo()},children:G(Do,{size:16})})}),G(le,{title:i("toolbar.redo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasRedo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.redo()},children:G(Lo,{size:16})})})]})});import{observer as Tn}from"mobx-react-lite";import{Layers as Ko}from"lucide-react";import{Popover as Jo,Button as F,Divider as zt}from"antd";import{observer as qo}from"mobx-react-lite";import{ChevronUp as $o,ChevronsUp as Qo,ChevronDown as Zo,ChevronsDown as tr,AlignStartVertical as er,AlignCenterVertical as or,AlignEndVertical as rr,AlignStartHorizontal as nr,AlignCenterHorizontal as ir,AlignEndHorizontal as lr,AlignVerticalSpaceAround as ar,AlignHorizontalSpaceAround as sr}from"lucide-react";import{Fragment as ce,jsx as g,jsxs as w}from"react/jsx-runtime";var de=qo(({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElementsIds,l=t.selectedElements.every(r=>r?.locked),n=!l&&t.selectedElements.length>1;return g(Jo,{styles:{container:{padding:"10px 5px"}},content:w("div",{style:{width:280},children:[g(zt,{size:"small",children:i("toolbar.layering")}),w("div",{style:{display:"flex"},children:[w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g($o,{size:16}),disabled:!t.canMoveElementsUp(o),onClick:()=>{t.moveElementsUp(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.up")})}),g(F,{type:"text",block:!0,icon:g(Qo,{size:16}),disabled:!t.canMoveElementsTop(o),onClick:()=>{t.moveElementsTop(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toForward")})})]}),w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(Zo,{size:16}),disabled:!t.canMoveElementsDown(o),onClick:()=>{t.moveElementsDown(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.down")})}),g(F,{type:"text",block:!0,icon:g(tr,{size:16}),disabled:!t.canMoveElementsBottom(o),onClick:()=>{t.moveElementsBottom(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toBottom")})})]})]}),!l&&w(ce,{children:[g(zt,{size:"small",children:i("toolbar.position")}),w("div",{style:{display:"flex"},children:[w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(er,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignLeft()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignLeft")})}),g(F,{type:"text",block:!0,icon:g(or,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignCenter()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignCenter")})}),g(F,{type:"text",block:!0,icon:g(rr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignRight()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignRight")})})]}),w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(nr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignTop()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignTop")})}),g(F,{type:"text",block:!0,icon:g(ir,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignMiddle()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignMiddle")})}),g(F,{type:"text",block:!0,icon:g(lr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignBottom()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignBottom")})})]})]})]}),n&&w(ce,{children:[g(zt,{size:"small",children:i("toolbar.spaceEvenly")}),w("div",{style:{display:"flex"},children:[g("div",{style:{width:"50%"},children:g(F,{type:"text",block:!0,icon:g(ar,{size:16}),onClick:()=>{t.editor?.alignmentHandler.yequation()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.verticalDistribution")})})}),g("div",{style:{width:"50%"},children:g(F,{type:"text",block:!0,icon:g(sr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.xequation()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.horizontalDistribution")})})})]})]})]}),trigger:"click",placement:"bottom",children:w(F,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:[g(Ko,{size:16}),i("toolbar.position")]})})});import{Blend as cr}from"lucide-react";import{Popover as dr,Tooltip as pr,Button as mr,InputNumber as ur,Slider as gr}from"antd";import{observer as fr}from"mobx-react-lite";import{useState as yr,useEffect as br}from"react";import{jsx as V,jsxs as pe}from"react/jsx-runtime";var me=fr(({store:t})=>{let e=t.selectedShapes.length>0,o=t.selectedShapes[0],[l,n]=yr(()=>Math.round(100*(o?.opacity??1)));br(()=>{o&&n(Math.round(100*(o.opacity??1)))},[o,o?.opacity]);let r=d=>{let p=Math.max(0,Math.min(d,100));n(p),t.set({opacity:p/100})};return V(pr,{title:i("toolbar.transparency"),placement:"bottom",children:V(dr,{content:pe("div",{children:[V("div",{style:{textAlign:"center",marginBottom:10},children:i("toolbar.transparency")}),pe("div",{style:{display:"flex"},children:[V("div",{style:{width:170,paddingRight:20},children:V(gr,{min:0,max:100,onChange:r,value:l})}),V(ur,{min:0,max:100,value:l,onChange:r,size:"small",styles:{root:{width:65}}})]})]}),trigger:"click",children:V(mr,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:V(cr,{size:16})})})})});import{LockKeyholeOpen as hr,LockKeyhole as xr}from"lucide-react";import{Tooltip as vr,Button as kr}from"antd";import{useCallback as ue}from"react";var ge=({store:t})=>{let e=t.selectedShapes.length>0,l=t.selectedShapes[0]?.locked;return{disabled:!e,lock:ue(()=>{t.editor?.lockHandler.lock()},[l,t]),unlock:ue(()=>{t.editor?.lockHandler.unlock()},[l,t]),locked:l}};import{observer as Cr}from"mobx-react-lite";import{jsx as Rt}from"react/jsx-runtime";var fe=Cr(({store:t})=>{let{disabled:e,locked:o,lock:l,unlock:n}=ge({store:t}),r=o?xr:hr,d=i(o?"toolbar.lockedDescription":"toolbar.unlockedDescription");return Rt(vr,{title:d,placement:"bottom",children:Rt(kr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o?n():l()},children:Rt(r,{size:16})})})});import{Copy as Sr}from"lucide-react";import{Tooltip as Tr,Button as wr}from"antd";import{observer as Br}from"mobx-react-lite";import{useCallback as Fr}from"react";var ye=({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElements.every(r=>r?.locked===!0),l=!e||o,n=Fr(()=>{t.clone()},[t]);return{disabled:l,duplicate:n}};import{jsx as At}from"react/jsx-runtime";var be=Br(({store:t})=>{let{disabled:e,duplicate:o}=ye({store:t});return At(Tr,{title:i("toolbar.duplicateElements"),placement:"bottom",children:At(wr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:At(Sr,{size:16})})})});import{Trash2 as Pr}from"lucide-react";import{Tooltip as Er,Button as Ir}from"antd";import{useCallback as Hr}from"react";var he=({store:t})=>{let e=t.selectedElements.filter(l=>!l?.locked),o=Hr(()=>{t.deleteElements(e.map(l=>l.id))},[t,e]);return{disabled:!e.length,remove:o}};import{observer as zr}from"mobx-react-lite";import{jsx as Nt}from"react/jsx-runtime";var xe=zr(({store:t})=>{let{disabled:e,remove:o}=he({store:t});return Nt(Er,{title:i("toolbar.removeElements"),placement:"bottom",children:Nt(Ir,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:Nt(Pr,{size:16})})})});import{Button as ve}from"antd";import{observer as Rr}from"mobx-react-lite";import{Fragment as Ar,jsx as ke,jsxs as Nr}from"react/jsx-runtime";var Ce=Rr(({store:t})=>{let e=t.selectedElements.length>1,o=t.selectedElements.length===1&&t.selectedElements[0]?.type==="group";return Nr(Ar,{children:[e&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.group()},children:i("toolbar.groupElements")}),o&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.ungroup()},children:i("toolbar.ungroupElements")})]})});import{observer as pt}from"mobx-react-lite";import{Button as dt,Tooltip as rn,Popover as nn}from"antd";import{Crop as ln}from"lucide-react";import an from"styled-components";import{Popover as Vr,Button as Vt}from"antd";import{Rotate3d as Or,FlipHorizontal as jr,FlipVertical as Mr}from"lucide-react";import{useState as Wr,useEffect as _r,useCallback as Fe}from"react";import{observer as Dr}from"mobx-react-lite";import{jsx as j,jsxs as Lr}from"react/jsx-runtime";var Se=Dr(({element:t,store:e})=>{let[o,l]=Wr({flipX:!1,flipY:!1}),n=Fe(()=>{e.editor?.objectsHandler.update({flipX:!o.flipX}),l({...o,flipX:!o.flipX})},[e.editor,o]),r=Fe(()=>{e.editor?.objectsHandler.update({flipY:!o.flipY}),l({...o,flipY:!o.flipY})},[e.editor,o]);return _r(()=>{t&&l({flipX:t.flipX,flipY:t.flipY})},[t]),j(Vr,{trigger:"click",content:Lr("div",{style:{width:165},children:[j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(jr,{size:16,style:{display:"flex"}}),onClick:n,children:i("toolbar.flipHorizontally")}),j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(Mr,{size:16,style:{display:"flex"}}),onClick:r,children:i("toolbar.flipVertically")})]}),children:j(Vt,{type:"text",icon:j(Or,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.flip")})})});import{Button as Ur,Modal as Gr}from"antd";import{useState as Te,useEffect as Yr}from"react";import{observer as we}from"mobx-react-lite";import{Fragment as Kr,jsx as ct,jsxs as Jr}from"react/jsx-runtime";var Xr=we(({isOpen:t,onClose:e,element:o})=>{let[l,n]=Te(o.getSrc());return Yr(()=>{n(o.getSrc())},[o.id]),ct(Gr,{title:i("toolbar.removeBackgroundTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmRemoveBackground"),cancelText:i("toolbar.cancelRemoveBackground"),children:ct("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Be=we(({element:t})=>{let[e,o]=Te(!1);return Jr(Kr,{children:[ct(Ur,{type:"text",styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.removeBackground")}),ct(Xr,{isOpen:e,onClose:()=>o(!1),element:t})]})});import{Button as qr,Modal as $r}from"antd";import{Eraser as Qr}from"lucide-react";import{useState as He,useEffect as Zr}from"react";import{observer as Pe}from"mobx-react-lite";import{Fragment as en,jsx as et,jsxs as on}from"react/jsx-runtime";var tn=Pe(({isOpen:t,onClose:e,element:o})=>{let[l,n]=He(o.getSrc());return Zr(()=>{n(o.getSrc())},[o.id]),et($r,{title:i("toolbar.eraserPenTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmEraserPen"),cancelText:i("toolbar.cancelEraserPen"),children:et("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Ee=Pe(({element:t})=>{let[e,o]=He(!1);return on(en,{children:[et(qr,{type:"text",icon:et(Qr,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.eraserPen")}),et(tn,{isOpen:e,onClose:()=>o(!1),element:t})]})});function Ie(t,e){let o=t.width/t.height,l=e.width/e.height,n,r;o>=l?(n=e.width,r=e.width/o):(n=e.height*o,r=e.height);let d=(e.width-n)/2,p=(e.height-r)/2;return{cropX:d,cropY:p,width:n,height:r}}function ze(t){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(t)))}import{jsx as v}from"react/jsx-runtime";var sn=Object.keys(Xt),cn=[{width:300,height:300,fill:"lightgray",stroke:"#0c0c0c",strokeWidth:0,url:""}],Re=[];sn.forEach(t=>{cn.forEach(e=>{Re.push(Object.assign({subType:t},e))})});Re.forEach(t=>{t.url=ze(Kt(t))});var dn=an.div`
|
|
1
|
+
import{a as Bt}from"../chunk-YBC2DYJX.js";import{d as W,e as _,g as $t}from"../chunk-63A6RW6Y.js";import{a as nt}from"../chunk-EWOU5F3O.js";import{a as z,c as qt}from"../chunk-RVXI723F.js";import{a as Xt,b as Kt,d as Jt}from"../chunk-45NWLCOP.js";import"../chunk-EUTDQZKU.js";import{b as Qt}from"../chunk-RBRSKAZL.js";import{c as i}from"../chunk-WFMCGQ5V.js";import"../chunk-O2XFH626.js";import jt from"styled-components";import{useRef as Sn}from"react";import{observer as U}from"mobx-react-lite";import{useEffect as tt,useState as S,useCallback as uo,useRef as oe,useMemo as go}from"react";import{ColorPicker as fo,Popover as ne,Button as R,Input as yo,InputNumber as Et,Space as bo,Slider as re,Tooltip as L}from"antd";import{cssGradient2FabricGradient as ho}from"@ydesign/core";import{ChevronDown as xo,TextAlignStart as vo,TextAlignCenter as ko,TextAlignEnd as Co,TextAlignJustify as Fo,Bold as So,Italic as To,Underline as wo,Strikethrough as Bo,ListChevronsUpDown as Ho,TextWrap as Po}from"lucide-react";import{FixedSizeList as Eo}from"react-window";import{Popover as ro,Button as no,Switch as Ht,Slider as lt,InputNumber as q,ColorPicker as Zt}from"antd";import{observer as io}from"mobx-react-lite";import{Sparkles as lo}from"lucide-react";import{useEffect as ao,useState as x}from"react";import{Fragment as Pt,jsx as f,jsxs as C}from"react/jsx-runtime";var $=(t,e,o)=>Math.max(e,Math.min(o,t)),te={display:"inline-flex",justifyContent:"space-between",width:"100%",padding:6},it={display:"flex",alignItems:"center",justifyContent:"space-between",padding:6},N=({label:t,enabled:e,visible:o=!0,onEnabledChange:l,numberValue:n,min:r,max:d,onNumberValueChange:p,step:y})=>o?C(Pt,{children:[C("div",{style:{display:"inline-flex",justifyContent:"space-between",width:"100%",padding:"6px"},children:[f("span",{children:t}),f(Ht,{checked:e,onChange:s=>{l(s)}})]}),e?C("div",{style:{display:"flex",width:"100%",justifyContent:"space-between",marginTop:10,marginBottom:10},children:[f("div",{style:{flex:1},children:f(lt,{value:n,onChange:s=>{p(s)},min:r,max:d,step:y})}),f(q,{size:"small",style:{width:60,marginLeft:10},value:n,step:y,onChange:s=>{p($(s,r,d))}})]}):null]}):null,D=io(({element:t,store:e,elements:o})=>{let n=(o||[t])[0],r=e.editor,d=n?.type==="textbox",p=n?.type==="image",y=r?.imageFiltersHandler.getFilter("blur"),s=r?.imageFiltersHandler.getFilter("brightness"),c=r?.imageFiltersHandler.getFilter("contrast"),u=r?.imageFiltersHandler.getFilter("saturation"),B=r?.imageFiltersHandler.getFilter("vibrance"),H=r?.imageFiltersHandler.getFilter("hueRotation"),I=r?.imageFiltersHandler.getFilter("noise"),P=r?.imageFiltersHandler.getFilter("pixelate"),[M,J]=x(!!y),[ft,rt]=x(y?.blur||.5),[E,yt]=x(!!s),[Le,Mt]=x(s?.brightness||.05),[Ue,bt]=x(!!c),[Ge,Wt]=x(c?.contrast||.25),[Ye,ht]=x(!!u),[Xe,_t]=x(u?.saturation||1),[Ke,xt]=x(!!B),[Je,Dt]=x(B?.vibrance||1),[qe,vt]=x(!!H),[$e,Lt]=x(H?.rotation||-.5),[Qe,kt]=x(!!I),[Ze,Ut]=x(I?.noise||30),[to,Ct]=x(!!P),[eo,Gt]=x(P?.blocksize||30),[oo,Ft]=x(n?.stroke),[St,Tt]=x(n?.strokeWidth),[T,Yt]=x({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"});ao(()=>{Ft(n?.stroke),Tt(n?.strokeWidth),Yt({enabled:!!n?.shadow,offsetX:n?.shadow?.offsetX||15,offsetY:n?.shadow?.offsetY||15,blur:n?.shadow?.blur||25,color:n?.shadow?.color||"rgba(0,0,0,0.45)",affectStroke:!1,nonScaling:!1,type:"shadow"}),J(!!y),rt(y?.blur||.5),yt(!!s),Mt(s?.brightness||.05),bt(!!c),Wt(c?.contrast||.25),ht(!!u),_t(u?.saturation||1),xt(!!B),Dt(B?.vibrance||1),vt(!!H),Lt(H?.rotation||-.5),kt(!!I),Ut(I?.noise||30),Ct(!!P),Gt(P?.blocksize||30)},[n]);let wt=a=>{r?.objectsHandler.setTextStyle(a)},A=(a,b)=>{Yt({...T,[a]:b}),r&&r.objectsHandler.setShadow({...T,[a]:b})};return f(ro,{trigger:"click",content:C("div",{style:{width:"280px",maxHeight:"calc(100vh - 150px)",overflow:"auto"},children:[f(N,{label:i("toolbar.blur"),visible:p,enabled:M,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"blur",{blur:.5}),J(!0)):(r?.imageFiltersHandler._removeFilter(b,"blur"),J(!1))},min:0,max:1,step:.1,numberValue:ft,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("blur","blur",a),rt(a)}}),f(N,{label:i("toolbar.brightness"),visible:p,enabled:E,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"brightness",{brightness:.05}),yt(!0)):(r?.imageFiltersHandler._removeFilter(b,"brightness"),yt(!1))},min:-1,max:1,step:.01,numberValue:Le,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("brightness","brightness",a),Mt(a)}}),f(N,{label:i("toolbar.contrast"),visible:p,enabled:Ue,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"contrast",{contrast:.25}),bt(!0)):(r?.imageFiltersHandler._removeFilter(b,"contrast"),bt(!1))},min:-1,max:1,step:.01,numberValue:Ge,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("contrast","contrast",a),Wt(a)}}),f(N,{label:i("toolbar.saturation"),visible:p,enabled:Ye,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"saturation",{saturation:1}),ht(!0)):(r?.imageFiltersHandler._removeFilter(b,"saturation"),ht(!1))},min:-1,max:1,step:.01,numberValue:Xe,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("saturation","saturation",a),_t(a)}}),f(N,{label:i("toolbar.vibrance"),visible:p,enabled:Ke,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"vibrance",{vibrance:1}),xt(!0)):(r?.imageFiltersHandler._removeFilter(b,"vibrance"),xt(!1))},min:-1,max:1,step:.01,numberValue:Je,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("vibrance","vibrance",a),Dt(a)}}),f(N,{label:i("toolbar.hueRotation"),visible:p,enabled:qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"hueRotation",{rotation:-.5}),vt(!0)):(r?.imageFiltersHandler._removeFilter(b,"hueRotation"),vt(!1))},min:-1,max:1,step:.01,numberValue:$e,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("hueRotation","rotation",a),Lt(a)}}),f(N,{label:i("toolbar.noise"),visible:p,enabled:Qe,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"noise",{noise:30}),kt(!0)):(r?.imageFiltersHandler._removeFilter(b,"noise"),kt(!1))},min:0,max:1e3,step:1,numberValue:Ze,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("noise","noise",a),Ut(a)}}),f(N,{label:i("toolbar.pixelate"),visible:p,enabled:to,onEnabledChange:a=>{let b=n;a?(r?.imageFiltersHandler._createFilter(b,"pixelate",{blocksize:10}),Ct(!0)):(r?.imageFiltersHandler._removeFilter(b,"pixelate"),Ct(!1))},min:.01,max:100,step:.01,numberValue:eo,onNumberValueChange:a=>{r?.imageFiltersHandler._changeAttr("pixelate","blocksize",a),Gt(a)}}),d&&C(Pt,{children:[C("div",{style:te,children:[f("span",{children:i("toolbar.textStroke")}),f(Ht,{checked:!!St,onChange:a=>{wt({strokeWidth:a?10:0,stroke:a?"red":null}),Tt(a?10:0),Ft(a?"red":null)}})]}),!!St&&C("div",{style:{display:"flex",justifyContent:"space-between",padding:"6px"},children:[f(Zt,{value:oo,onChange:a=>{let b=a.toCssString();wt({stroke:b}),Ft(b)}}),f(q,{value:St,onChange:a=>{wt({strokeWidth:$(a,1,30)}),Tt($(a,1,30))},style:{width:60},min:1,max:Math.round(n.fontSize/2)})]})]}),C("div",{style:te,children:[f("span",{children:i("toolbar.shadow")}),f(Ht,{checked:!!T.enabled,onChange:a=>{A("enabled",a)}})]}),T.enabled&&C(Pt,{children:[C("div",{style:it,children:[f("div",{children:i("toolbar.blur")}),f("div",{children:f(q,{value:T.blur,style:{width:60},min:0,max:50,onChange:a=>{A("blur",a)}})})]}),f(lt,{value:T.blur,onChange:a=>A("blur",a),min:0,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetX")}),f("div",{children:f(q,{value:T.offsetX,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetX",$(a,-50,50))}})})]}),f(lt,{value:T.offsetX,onChange:a=>A("offsetX",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.offsetY")}),f("div",{children:f(q,{value:T.offsetY,style:{width:60},min:-50,max:50,onChange:a=>{A("offsetY",$(a,-50,50))}})})]}),f(lt,{value:T.offsetY,onChange:a=>A("offsetY",a),min:-50,max:50}),C("div",{style:it,children:[f("div",{children:i("toolbar.color")}),f(Zt,{defaultFormat:"rgb",value:T.color,onChange:a=>{A("color",a.toRgbString())}})]})]})]}),children:f(no,{type:"text",icon:f(lo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.effects")})})});import{observer as so}from"mobx-react-lite";import{Popover as co,Button as po}from"antd";import{Pencil as mo}from"lucide-react";import{jsx as at}from"react/jsx-runtime";var ee=so(()=>at(co,{trigger:"click",content:at("div",{children:"AI write"}),children:at(po,{type:"text",icon:at(mo,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.aiText.aiWrite")})}));import{jsx as m,jsxs as Z}from"react/jsx-runtime";var{Search:Io}=yo,zo=({fontFamily:t,handleClick:e,modifiers:o,store:l,isCustom:n})=>{let[r,d]=S(!n);if(console.log("FontItem ---> ",d),tt(()=>{r||l.loadFont(t)},[t,r]),t==="_divider")return m("div",{style:{width:"100%",height:1,background:"#e8e8e8"}});let p=t;return m(R,{type:o.active?"primary":"text",block:!0,style:{justifyContent:"start"},onClick:()=>e(t),disabled:o.disabled,styles:{root:{fontFamily:'"'+t+'"'},content:{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"}},children:p})},Ro=({onChange:t,defaultValue:e})=>m(Io,{placeholder:e,allowClear:!0,onChange:o=>{t(o.target.value)},style:{width:210}}),Ao=({store:t,fonts:e,activeFont:o,activeFontLabel:l,onFontSelect:n})=>{let[r,d]=S(""),p=e.filter(y=>y.toLowerCase().includes(r.toLowerCase()));return m(ne,{content:Z("div",{children:[m(Ro,{defaultValue:"\u641C\u7D22\u5B57\u4F53",onChange:y=>d(y??"")}),m("div",{style:{paddingTop:5},children:m(Eo,{itemCount:p.length,itemSize:28,width:210,height:Math.min(400,28*p.length)+10,children:({index:y,style:s})=>{let c=p[y];return m("div",{style:{...s,display:"flex",alignItems:"center",justifyContent:"center"},children:m(zo,{fontFamily:c,modifiers:{active:o===c},handleClick:()=>n(c),store:t,isCustom:t.fonts.find(u=>u.fontFamily===c)||Bt.find(u=>u.fontFamily===c)},c)})}})})]}),trigger:"click",children:m(R,{type:"text",style:{marginRight:5,fontFamily:'"'+o+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:30,padding:"0 10px"},icon:m(xo,{size:16,style:{display:"flex"}}),iconPlacement:"end",children:l})})},st=["left","center","right","justify"],No=U(({elements:t,store:e})=>{let o=e.fonts.concat(Bt).map(d=>d.fontFamily),l=t[0].fontFamily;l.length>15&&(l=l.slice(0,15)+"...");let n=qt(e.objects),r=[...new Set(n.concat("_divider").concat(o))];return m(Ao,{fonts:r,activeFont:t[0].fontFamily,activeFontLabel:l,store:e,onFontSelect:d=>{e.editor?.objectsHandler.setTextStyle({fontFamily:d})}})}),Q=t=>t?typeof t=="string"?t:t.colorStops?JSON.stringify(t.colorStops):JSON.stringify(t):"",Vo=U(({elements:t,store:e})=>{let o=t[0],l=uo(()=>{let{selectionStart:s,selectionEnd:c}=o;if(s!==c&&s!==void 0){let u=o.getSelectionStyles(s,s+1);if(u.length>0&&u[0].fill!==void 0)return u[0].fill}return o.fill},[o]),[n,r]=S(()=>z(l())),d=oe(!1),p=oe(Q(l()));tt(()=>{let s=e.editor?.customCanvas?.canvas;if(!s)return;let c=()=>{if(!d.current){let u=l();p.current=Q(u),r(z(u))}};return s.on("text:selection:changed",c),s.on("text:editing:entered",c),s.on("text:editing:exited",c),()=>{s.off("text:selection:changed",c),s.off("text:editing:entered",c),s.off("text:editing:exited",c)}},[e.editor?.customCanvas?.canvas,l]),tt(()=>{if(!d.current){let s=l(),c=Q(s);c!==p.current&&(p.current=c,r(z(s)))}},[o,l]);let y=go(()=>n,[Q(n)]);return m(fo,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:s=>{if(d.current=s,!s){let c=l();p.current=Q(c)}},onChange:s=>{r(s)},onChangeComplete:s=>{let c=s.toCssString();if(c.includes("gradient")){let u=ho(c);e.editor?.objectsHandler.setTextStyle({fill:u})}else e.editor?.objectsHandler.setTextStyle({fill:c})}})}),Oo=U(({elements:t,store:e})=>{let[o,l]=S(t[0].fontSize);tt(()=>{l(t[0].fontSize)},[t[0]?.fontSize,e._updateFontSize]);let n=r=>{Number.isNaN(r)||(e.editor?.objectsHandler.setTextStyle({fontSize:Number(r)}),l(Number(r)))};return m(Et,{min:1,max:4*e.height,value:Math.round(o),onChange:n,style:{width:75},styles:{actions:{opacity:1,width:24}}})}),jo=U(({elements:t,store:e})=>{let o=t[0],[l,n]=S(o.textAlign),[r,d]=S(o.fontWeight),[p,y]=S(o.fontStyle),[s,c]=S(o.underline),[u,B]=S(o.linethrough),[H,I]=S(o.splitByGrapheme);return tt(()=>{n(o.textAlign),d(o.fontWeight),y(o.fontStyle),c(o.underline),B(o.linethrough),I(o.splitByGrapheme)},[o]),Z(bo.Compact,{children:[m(L,{placement:"bottom",title:i(`toolbar.text${l}`),children:m(R,{type:"text",icon:l==="left"?m(vo,{size:16,style:{display:"flex"}}):l==="center"?m(ko,{size:16,style:{display:"flex"}}):l==="right"?m(Co,{size:16,style:{display:"flex"}}):m(Fo,{size:16,style:{display:"flex"}}),onClick:()=>{let P=(st.indexOf(l)+1+st.length)%st.length,M=st[P];e.editor?.objectsHandler.setTextStyle({textAlign:M}),n(M)}})}),m(L,{placement:"bottom",title:i("toolbar.textBold"),children:m(R,{type:r==="bold"||r==="700"?"primary":"text",icon:m(So,{size:16,style:{display:"flex"}}),onClick:()=>{r==="bold"||r==="700"?(e.editor?.objectsHandler.setTextStyle({fontWeight:"normal"}),d("normal")):(e.editor?.objectsHandler.setTextStyle({fontWeight:"bold"}),d("bold"))}})}),m(L,{placement:"bottom",title:i("toolbar.textItalic"),children:m(R,{type:p==="italic"?"primary":"text",icon:m(To,{size:16,style:{display:"flex"}}),onClick:()=>{p==="italic"?(e.editor?.objectsHandler.setTextStyle({fontStyle:"normal"}),y("normal")):(e.editor?.objectsHandler.setTextStyle({fontStyle:"italic"}),y("italic"))}})}),m(L,{placement:"bottom",title:i("toolbar.textUnderline"),children:m(R,{type:s?"primary":"text",icon:m(wo,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({underline:!s}),c(!s)}})}),m(L,{placement:"bottom",title:i("toolbar.textStrikethrough"),children:m(R,{type:u?"primary":"text",icon:m(Bo,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({linethrough:!u}),B(!u)}})}),m(L,{placement:"bottom",title:i("toolbar.splitByGrapheme"),children:m(R,{type:H?"primary":"text",icon:m(Po,{size:16,style:{display:"flex"}}),onClick:()=>{e.editor?.objectsHandler.setTextStyle({splitByGrapheme:!H}),I(!H)}})})]})}),Mo=U(({elements:t,store:e})=>{let o=t[0],l={display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"},n=typeof o.lineHeight=="number"?100*o.lineHeight:120,[r,d]=S(n),[p,y]=S(o.charSpacing),s=c=>{e.editor?.objectsHandler.setTextStyle(c)};return m(ne,{trigger:"click",content:Z("div",{style:{padding:"0 6px",width:"230px"},children:[Z("div",{style:l,children:[m("div",{children:i("toolbar.lineHeight")}),m("div",{children:m(Et,{min:50,max:250,value:Math.round(r),style:{width:80},onChange:c=>{s({lineHeight:c/100}),d(c)}})})]}),m(re,{value:Math.round(r),min:50,max:250,step:1,onChange:c=>{s({lineHeight:c/100}),d(c)}}),Z("div",{style:l,children:[m("div",{children:i("toolbar.letterSpacing")}),m("div",{children:m(Et,{min:-50,max:250,value:Math.round(p/10),style:{width:80},onChange:c=>{s({charSpacing:(c??0)*10}),y((c??0)*10)}})})]}),m(re,{value:Math.round(p/10),min:-50,max:250,step:1,onChange:c=>{s({charSpacing:(c??0)*10}),y((c??0)*10)}})]}),children:m(R,{type:"text",icon:m(Ho,{size:16,style:{display:"flex"}})})})}),Wo={TextFill:Vo,TextFontFamily:No,TextFontSize:Oo,TextFontVariant:jo,TextSpacing:Mo,TextFilters:D,TextAiWrite:ee},_o=U(({store:t,components:e})=>{let o=t.selectedElements,n=W({type:"text",usedItems:["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextFilters","TextAiWrite"],components:e});return m(_,{items:n,itemRender:r=>{let d=e[r]||Wo[r];return d&&m(d,{elements:o,element:o[0],store:t},r)}})}),ie=_o;import{Tooltip as le,Button as ae}from"antd";import{Undo2 as Do,Redo2 as Lo}from"lucide-react";import{observer as Uo}from"mobx-react-lite";import{useEffect as Go,useState as Yo}from"react";import{jsx as G,jsxs as Xo}from"react/jsx-runtime";var se=Uo(({store:t})=>{let[e,o]=Yo({hasUndo:!1,hasRedo:!1});return Go(()=>{let l=t.editor,n=r=>{o(r)};return l&&l.on("history:changed",n),()=>{l&&l.off("history:changed",n)}},[t.editor]),Xo(It,{style:{float:"left",paddingRight:10},children:[G(le,{title:i("toolbar.undo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasUndo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.undo()},children:G(Do,{size:16})})}),G(le,{title:i("toolbar.redo"),placement:"bottom",children:G(ae,{type:"text",disabled:!e.hasRedo,styles:{root:{padding:"0 7px"}},onClick:()=>{t.editor?.historyHandler.redo()},children:G(Lo,{size:16})})})]})});import{observer as Tn}from"mobx-react-lite";import{Layers as Ko}from"lucide-react";import{Popover as Jo,Button as F,Divider as zt}from"antd";import{observer as qo}from"mobx-react-lite";import{ChevronUp as $o,ChevronsUp as Qo,ChevronDown as Zo,ChevronsDown as tr,AlignStartVertical as er,AlignCenterVertical as or,AlignEndVertical as rr,AlignStartHorizontal as nr,AlignCenterHorizontal as ir,AlignEndHorizontal as lr,AlignVerticalSpaceAround as ar,AlignHorizontalSpaceAround as sr}from"lucide-react";import{Fragment as ce,jsx as g,jsxs as w}from"react/jsx-runtime";var de=qo(({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElementsIds,l=t.selectedElements.every(r=>r?.locked),n=!l&&t.selectedElements.length>1;return g(Jo,{styles:{container:{padding:"10px 5px"}},content:w("div",{style:{width:280},children:[g(zt,{size:"small",children:i("toolbar.layering")}),w("div",{style:{display:"flex"},children:[w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g($o,{size:16}),disabled:!t.canMoveElementsUp(o),onClick:()=>{t.moveElementsUp(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.up")})}),g(F,{type:"text",block:!0,icon:g(Qo,{size:16}),disabled:!t.canMoveElementsTop(o),onClick:()=>{t.moveElementsTop(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toForward")})})]}),w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(Zo,{size:16}),disabled:!t.canMoveElementsDown(o),onClick:()=>{t.moveElementsDown(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.down")})}),g(F,{type:"text",block:!0,icon:g(tr,{size:16}),disabled:!t.canMoveElementsBottom(o),onClick:()=>{t.moveElementsBottom(o)},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.toBottom")})})]})]}),!l&&w(ce,{children:[g(zt,{size:"small",children:i("toolbar.position")}),w("div",{style:{display:"flex"},children:[w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(er,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignLeft()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignLeft")})}),g(F,{type:"text",block:!0,icon:g(or,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignCenter()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignCenter")})}),g(F,{type:"text",block:!0,icon:g(rr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignRight()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignRight")})})]}),w("div",{style:{width:"50%"},children:[g(F,{type:"text",block:!0,icon:g(nr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignTop()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignTop")})}),g(F,{type:"text",block:!0,icon:g(ir,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignMiddle()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignMiddle")})}),g(F,{type:"text",block:!0,icon:g(lr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.alignBottom()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.alignBottom")})})]})]})]}),n&&w(ce,{children:[g(zt,{size:"small",children:i("toolbar.spaceEvenly")}),w("div",{style:{display:"flex"},children:[g("div",{style:{width:"50%"},children:g(F,{type:"text",block:!0,icon:g(ar,{size:16}),onClick:()=>{t.editor?.alignmentHandler.yequation()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.verticalDistribution")})})}),g("div",{style:{width:"50%"},children:g(F,{type:"text",block:!0,icon:g(sr,{size:16}),onClick:()=>{t.editor?.alignmentHandler.xequation()},children:g("span",{className:"w-[70px] text-left text-xs",children:i("toolbar.horizontalDistribution")})})})]})]})]}),trigger:"click",placement:"bottom",children:w(F,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:[g(Ko,{size:16}),i("toolbar.position")]})})});import{Blend as cr}from"lucide-react";import{Popover as dr,Tooltip as pr,Button as mr,InputNumber as ur,Slider as gr}from"antd";import{observer as fr}from"mobx-react-lite";import{useState as yr,useEffect as br}from"react";import{jsx as V,jsxs as pe}from"react/jsx-runtime";var me=fr(({store:t})=>{let e=t.selectedShapes.length>0,o=t.selectedShapes[0],[l,n]=yr(()=>Math.round(100*(o?.opacity??1)));br(()=>{o&&n(Math.round(100*(o.opacity??1)))},[o,o?.opacity]);let r=d=>{let p=Math.max(0,Math.min(d,100));n(p),t.set({opacity:p/100})};return V(pr,{title:i("toolbar.transparency"),placement:"bottom",children:V(dr,{content:pe("div",{children:[V("div",{style:{textAlign:"center",marginBottom:10},children:i("toolbar.transparency")}),pe("div",{style:{display:"flex"},children:[V("div",{style:{width:170,paddingRight:20},children:V(gr,{min:0,max:100,onChange:r,value:l})}),V(ur,{min:0,max:100,value:l,onChange:r,size:"small",styles:{root:{width:65}}})]})]}),trigger:"click",children:V(mr,{type:"text",disabled:!e,styles:{root:{padding:"0 7px"}},children:V(cr,{size:16})})})})});import{LockKeyholeOpen as hr,LockKeyhole as xr}from"lucide-react";import{Tooltip as vr,Button as kr}from"antd";import{useCallback as ue}from"react";var ge=({store:t})=>{let e=t.selectedShapes.length>0,l=t.selectedShapes[0]?.locked;return{disabled:!e,lock:ue(()=>{t.editor?.lockHandler.lock()},[l,t]),unlock:ue(()=>{t.editor?.lockHandler.unlock()},[l,t]),locked:l}};import{observer as Cr}from"mobx-react-lite";import{jsx as Rt}from"react/jsx-runtime";var fe=Cr(({store:t})=>{let{disabled:e,locked:o,lock:l,unlock:n}=ge({store:t}),r=o?xr:hr,d=i(o?"toolbar.lockedDescription":"toolbar.unlockedDescription");return Rt(vr,{title:d,placement:"bottom",children:Rt(kr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o?n():l()},children:Rt(r,{size:16})})})});import{Copy as Sr}from"lucide-react";import{Tooltip as Tr,Button as wr}from"antd";import{observer as Br}from"mobx-react-lite";import{useCallback as Fr}from"react";var ye=({store:t})=>{let e=t.selectedElements.length>0,o=t.selectedElements.every(r=>r?.locked===!0),l=!e||o,n=Fr(()=>{t.clone()},[t]);return{disabled:l,duplicate:n}};import{jsx as At}from"react/jsx-runtime";var be=Br(({store:t})=>{let{disabled:e,duplicate:o}=ye({store:t});return At(Tr,{title:i("toolbar.duplicateElements"),placement:"bottom",children:At(wr,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:At(Sr,{size:16})})})});import{Trash2 as Pr}from"lucide-react";import{Tooltip as Er,Button as Ir}from"antd";import{useCallback as Hr}from"react";var he=({store:t})=>{let e=t.selectedElements.filter(l=>!l?.locked),o=Hr(()=>{t.deleteElements(e.map(l=>l.id))},[t,e]);return{disabled:!e.length,remove:o}};import{observer as zr}from"mobx-react-lite";import{jsx as Nt}from"react/jsx-runtime";var xe=zr(({store:t})=>{let{disabled:e,remove:o}=he({store:t});return Nt(Er,{title:i("toolbar.removeElements"),placement:"bottom",children:Nt(Ir,{type:"text",styles:{root:{padding:"0 7px"}},disabled:e,onClick:()=>{o()},children:Nt(Pr,{size:16})})})});import{Button as ve}from"antd";import{observer as Rr}from"mobx-react-lite";import{Fragment as Ar,jsx as ke,jsxs as Nr}from"react/jsx-runtime";var Ce=Rr(({store:t})=>{let e=t.selectedElements.length>1,o=t.selectedElements.length===1&&t.selectedElements[0]?.type==="group";return Nr(Ar,{children:[e&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.group()},children:i("toolbar.groupElements")}),o&&ke(ve,{type:"text",onClick:()=>{t.editor?.objectsHandler.ungroup()},children:i("toolbar.ungroupElements")})]})});import{observer as pt}from"mobx-react-lite";import{Button as dt,Tooltip as rn,Popover as nn}from"antd";import{Crop as ln}from"lucide-react";import an from"styled-components";import{Popover as Vr,Button as Vt}from"antd";import{Rotate3d as Or,FlipHorizontal as jr,FlipVertical as Mr}from"lucide-react";import{useState as Wr,useEffect as _r,useCallback as Fe}from"react";import{observer as Dr}from"mobx-react-lite";import{jsx as j,jsxs as Lr}from"react/jsx-runtime";var Se=Dr(({element:t,store:e})=>{let[o,l]=Wr({flipX:!1,flipY:!1}),n=Fe(()=>{e.editor?.objectsHandler.update({flipX:!o.flipX}),l({...o,flipX:!o.flipX})},[e.editor,o]),r=Fe(()=>{e.editor?.objectsHandler.update({flipY:!o.flipY}),l({...o,flipY:!o.flipY})},[e.editor,o]);return _r(()=>{t&&l({flipX:t.flipX,flipY:t.flipY})},[t]),j(Vr,{trigger:"click",content:Lr("div",{style:{width:165},children:[j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(jr,{size:16,style:{display:"flex"}}),onClick:n,children:i("toolbar.flipHorizontally")}),j(Vt,{type:"text",block:!0,style:{justifyContent:"start"},icon:j(Mr,{size:16,style:{display:"flex"}}),onClick:r,children:i("toolbar.flipVertically")})]}),children:j(Vt,{type:"text",icon:j(Or,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},children:i("toolbar.flip")})})});import{Button as Ur,Modal as Gr}from"antd";import{useState as Te,useEffect as Yr}from"react";import{observer as we}from"mobx-react-lite";import{Fragment as Kr,jsx as ct,jsxs as Jr}from"react/jsx-runtime";var Xr=we(({isOpen:t,onClose:e,element:o})=>{let[l,n]=Te(o.getSrc());return Yr(()=>{n(o.getSrc())},[o.id]),ct(Gr,{title:i("toolbar.removeBackgroundTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmRemoveBackground"),cancelText:i("toolbar.cancelRemoveBackground"),children:ct("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Be=we(({element:t})=>{let[e,o]=Te(!1);return Jr(Kr,{children:[ct(Ur,{type:"text",styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.removeBackground")}),ct(Xr,{isOpen:e,onClose:()=>o(!1),element:t})]})});import{Button as qr,Modal as $r}from"antd";import{Eraser as Qr}from"lucide-react";import{useState as He,useEffect as Zr}from"react";import{observer as Pe}from"mobx-react-lite";import{Fragment as en,jsx as et,jsxs as on}from"react/jsx-runtime";var tn=Pe(({isOpen:t,onClose:e,element:o})=>{let[l,n]=He(o.getSrc());return Zr(()=>{n(o.getSrc())},[o.id]),et($r,{title:i("toolbar.eraserPenTitle"),open:t,onOk:e,onCancel:e,width:{xs:"90%",sm:"80%",md:"70%",lg:"60%",xl:"50%",xxl:"40%"},styles:{body:{padding:"35px 0"}},okText:i("toolbar.confirmEraserPen"),cancelText:i("toolbar.cancelEraserPen"),children:et("img",{src:l,style:{width:"100%",maxHeight:"400px",objectFit:"contain"}})})}),Ee=Pe(({element:t})=>{let[e,o]=He(!1);return on(en,{children:[et(qr,{type:"text",icon:et(Qr,{size:16,style:{display:"flex"}}),styles:{root:{padding:"0 7px"}},onClick:()=>o(!0),children:i("toolbar.eraserPen")}),et(tn,{isOpen:e,onClose:()=>o(!1),element:t})]})});function Ie(t,e){let o=t.width/t.height,l=e.width/e.height,n,r;o>=l?(n=e.width,r=e.width/o):(n=e.height*o,r=e.height);let d=(e.width-n)/2,p=(e.height-r)/2;return{cropX:d,cropY:p,width:n,height:r}}function ze(t){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(t)))}import{jsx as v}from"react/jsx-runtime";var sn=Object.keys(Xt),cn=[{width:300,height:300,fill:"lightgray",stroke:"#0c0c0c",strokeWidth:0,url:""}],Re=[];sn.forEach(t=>{cn.forEach(e=>{Re.push(Object.assign({subType:t},e))})});Re.forEach(t=>{t.url=ze(Kt(t))});var dn=an.div`
|
|
2
2
|
height: 220px;
|
|
3
3
|
`,Ot={root:{padding:"0 7px"}},pn=pt(({element:t,store:e})=>{let o=e.editor;return v(dt,{type:"text",styles:Ot,onClick:async()=>{let l=e.width+2*e.bleed,n=e.height+2*e.bleed,r=t.getOriginalSize(),d={width:r.width,height:r.height},p=Ie({width:l,height:n},d);t.set({cropX:p.cropX,cropY:p.cropY,width:p.width,height:p.height,scaleX:l/p.width,scaleY:n/p.height,left:-e.bleed,top:-e.bleed}),t.setCoords(),o?.customCanvas?.canvas?.requestRenderAll(),o?.historyHandler.save("update")},children:i("toolbar.fitToBackground")})}),mn=pt(({element:t,store:e})=>v(rn,{title:i("toolbar.crop"),children:v(dt,{type:"text",styles:{root:{padding:"0 7px"}},onClick:()=>{let o=e.editor?.layerHandler.getLayer();e.editor?.imageCropHandler.cropStart(t,o,t.getSrc())},children:v(ln,{size:16})})})),un=pt(({element:t,store:e})=>{let o=Jt.reduce((n,r)=>n.concat(r.children),[]),l=Math.ceil(o.length/4)||1;return t.clipPath?v(dt,{type:"text",styles:Ot,onClick:()=>{t.set({clipPath:null}),e.editor?.customCanvas?.canvas?.requestRenderAll(),e._triggerUpdate(),e.editor?.historyHandler.save("update")},children:i("toolbar.removeClip")}):v(nn,{styles:{container:{padding:"5px 10px"}},content:v("div",{style:{maxHeight:313,overflowY:"auto"},children:v(dn,{style:{height:80*l,width:300},children:v("div",{className:nt("shape-list","flex flex-wrap content-start mb-2"),children:o.map((n,r)=>v("div",{className:nt("shape-item","w-[25%] h-0 pb-[25%] relative cursor-pointer shrink-0 mb-[1.2%]"),onClick:()=>{e.editor?.objectsHandler.createMaskElement(t,n),e._triggerUpdate()},children:v("div",{className:nt("shape-content","absolute inset-0 flex justify-center items-center"),children:v("svg",{overflow:"visible",width:"50",height:"50",children:v("g",{transform:`scale(${50/n.viewBox[0]}, ${50/n.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`,children:v("path",{className:"shape-path",d:n.path,fill:"#ccc",strokeMiterlimit:8,strokeLinecap:"butt"})})})})},r))})})}),trigger:"click",children:v(dt,{type:"text",styles:Ot,children:i("toolbar.clip")})})}),gn={ImageFlip:Se,ImageFilters:D,ImageFitToBackground:pn,ImageCrop:mn,ImageClip:un,ImageRemoveBackground:Be,ImageEraserPen:Ee},Ae=pt(({store:t,components:e})=>{let o=t.selectedElements,n=W({type:"text",usedItems:["ImageFlip","ImageFilters","ImageFitToBackground","ImageClip","ImageCrop","ImageRemoveBackground","ImageEraserPen"],components:e});return v(_,{items:n,itemRender:r=>{let d=e[r]||gn[r];return d&&v(d,{elements:o,element:o[0],store:t},r)}})});import{jsx as fn}from"react/jsx-runtime";var Ne=()=>fn("div",{});import{cssGradient2FabricGradient as je}from"@ydesign/core";import{observer as ut}from"mobx-react-lite";import{useState as Me,useRef as mt,useMemo as We}from"react";import{ColorPicker as _e,Popover as yn,Button as Y,InputNumber as Ve,Slider as Oe}from"antd";import{Logs as bn,Ban as hn}from"lucide-react";import{Fragment as Fn,jsx as h,jsxs as ot}from"react/jsx-runtime";var O=t=>t?typeof t=="string"?t:t.colorStops?JSON.stringify(t.colorStops):JSON.stringify(t):"",xn=ut(({store:t,elements:e})=>{let o=e[0],[l,n]=Me(()=>z(o.fill)),r=mt(!1),d=mt(O(o.fill)),p=O(o.fill);p!==d.current&&!r.current&&(d.current=p,n(z(o.fill)));let y=We(()=>l,[O(l)]);return h(_e,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:s=>{r.current=s,s||(d.current=O(o.fill))},onChange:s=>{n(s)},onChangeComplete:s=>{let c=s.toCssString();if(c.includes("gradient")){let u=je(c);t.editor?.objectsHandler.update({fill:u})}else t.editor?.objectsHandler.update({fill:c})}})}),vn=ut(({store:t,element:e})=>h(yn,{trigger:"click",content:ot("div",{style:{width:270},children:[ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:15},children:[h(Y,{color:e?.strokeWidth===0?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeWidth:0}),t._triggerUpdate()},children:h(hn,{size:16})}),h(Y,{color:e?.strokeWidth&&e?.strokeDashArray?.length===0?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x2:24,y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===4?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[4,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===2?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[2,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),h(Y,{color:e?.strokeWidth&&Array.isArray(e.strokeDashArray)&&e.strokeDashArray[0]===1?"primary":"default",variant:"filled",onClick:()=>{t.editor?.objectsHandler.update({strokeDashArray:[1,1],strokeWidth:e?.strokeWidth||10,stroke:e?.stroke||"#000000"}),t._triggerUpdate()},children:h("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:h("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]}),ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:5},children:[h("div",{children:i("toolbar.strokeWidth")}),h("div",{children:h(Ve,{value:e?.strokeWidth,style:{width:60},min:0,max:Math.round(Math.min(e?.width,e?.height)/2),onChange:o=>{t.editor?.objectsHandler.update({strokeWidth:o}),t._triggerUpdate()}})})]}),h(Oe,{value:e?.strokeWidth,onChange:o=>{t.editor?.objectsHandler.update({strokeWidth:o}),t._triggerUpdate()},min:0,max:Math.round(Math.min(e?.width,e?.height)/2)}),e?.type==="rect"&&ot(Fn,{children:[ot("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:15,paddingBottom:5},children:[h("div",{children:i("toolbar.cornerRadius")}),h("div",{children:h(Ve,{value:e?.rx,style:{width:60},min:0,max:Math.round(Math.min(e?.width,e?.height)/2),onChange:o=>{t.editor?.objectsHandler.update({rx:o,ry:o}),t._triggerUpdate()}})})]}),h(Oe,{value:e?.rx,onChange:o=>{t.editor?.objectsHandler.update({rx:o,ry:o}),t._triggerUpdate()},min:0,max:Math.round(Math.min(e?.width,e?.height)/2)})]})]}),children:h(Y,{type:"text",styles:{root:{padding:"0 7px"}},icon:h(bn,{size:16,style:{display:"flex"}}),children:i("toolbar.strokeSettings")})})),kn=ut(({store:t,elements:e})=>{let o=e[0],[l,n]=Me(()=>z(o?.stroke)),r=mt(!1),d=mt(O(o?.stroke)),p=O(o?.stroke);p!==d.current&&!r.current&&(d.current=p,n(z(o?.stroke)));let y=We(()=>l,[O(l)]);return o?.strokeWidth?h(_e,{value:y,allowClear:!0,mode:["single","gradient"],onOpenChange:s=>{r.current=s,s||(d.current=O(o.stroke))},onChange:s=>{n(s)},onChangeComplete:s=>{let c=s.toCssString();if(c.includes("gradient")){let u=je(c);t.editor?.objectsHandler.update({stroke:u})}else t.editor?.objectsHandler.update({stroke:c})}}):null}),Cn={FigureFill:xn,FigureStroke:kn,FigureSettings:vn,FigureFilters:D},X=ut(({store:t,components:e})=>{let o=t.selectedElements[0],n=W({type:"figure",usedItems:["FigureFill","FigureStroke","FigureSettings","FigureFilters"],components:e});return h(_,{items:n,itemRender:r=>{let d=e[r]||Cn[r];return d&&h(d,{elements:t.selectedElements,element:o,store:t},r)}})});import{Button as De,Divider as wn,Space as Bn,theme as Hn}from"antd";import{Check as Pn,X as En}from"lucide-react";import{Fragment as Nn,jsx as k,jsxs as K}from"react/jsx-runtime";var In=jt.div`
|
|
4
4
|
white-space: nowrap;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { S as StoreType } from '../store-DfmY1m2j.js';
|
|
3
|
+
import { ProjectType } from '../project.js';
|
|
4
|
+
import 'fabric';
|
|
5
|
+
import 'mobx-state-tree/dist/internal';
|
|
6
|
+
import 'mobx-state-tree';
|
|
7
|
+
import '@ydesign/core';
|
|
8
|
+
import 'react';
|
|
9
|
+
|
|
10
|
+
type Size = {
|
|
11
|
+
name: string;
|
|
12
|
+
desc: string;
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
unit: string;
|
|
16
|
+
bgColor?: string;
|
|
17
|
+
};
|
|
18
|
+
interface CreateDesignProps {
|
|
19
|
+
store: StoreType;
|
|
20
|
+
project: ProjectType;
|
|
21
|
+
visible: boolean;
|
|
22
|
+
onClose: () => void;
|
|
23
|
+
onConfirm: (size: Size) => void;
|
|
24
|
+
mode?: 'create' | 'open';
|
|
25
|
+
}
|
|
26
|
+
declare const CreateDesign: ({ project, visible, onClose, onConfirm }: CreateDesignProps) => react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
export { CreateDesign };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{a}from"../chunk-6XGFXDKJ.js";import"../chunk-2AZQIJ4K.js";import"../chunk-KERQXVBL.js";import"../chunk-YBC2DYJX.js";import"../chunk-EWOU5F3O.js";import"../chunk-5C2MNUBC.js";import"../chunk-EUTDQZKU.js";import"../chunk-O2XFH626.js";export{a as CreateDesign};
|
package/dist/topbar/topbar.js
CHANGED
|
@@ -1,154 +1,4 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
padding: 16px 24px;
|
|
3
|
-
height: 60px;
|
|
4
|
-
flex: 1;
|
|
5
|
-
display: flex;
|
|
6
|
-
cursor: pointer;
|
|
7
|
-
align-items: center;
|
|
8
|
-
border-radius: 8px;
|
|
9
|
-
border: 1px dashed #d0d2d6;
|
|
10
|
-
&:hover {
|
|
11
|
-
background-color: rgba(0, 31, 92, 0.06);
|
|
12
|
-
}
|
|
13
|
-
span {
|
|
14
|
-
margin-left: 8px;
|
|
15
|
-
}
|
|
16
|
-
`,rt=G.div`
|
|
17
|
-
flex: 1;
|
|
18
|
-
margin-left: 14px;
|
|
19
|
-
height: 100%;
|
|
20
|
-
|
|
21
|
-
.createrContentInner {
|
|
22
|
-
margin-bottom: 16px;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.scrollbars div:first-child {
|
|
26
|
-
scroll-behavior: smooth;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.Widget.categorySection[data-is-folded='false'] .categoryFoldBtn,
|
|
30
|
-
.Widget.categorySection[data-is-multi-row='false'] .categoryFoldBtn {
|
|
31
|
-
display: none;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.Widget.categorySection[data-is-folded='true'] ul {
|
|
35
|
-
height: 97px;
|
|
36
|
-
overflow: hidden;
|
|
37
|
-
}
|
|
38
|
-
`,at=G.div`
|
|
39
|
-
width: 100%;
|
|
40
|
-
height: 100%;
|
|
41
|
-
position: relative;
|
|
42
|
-
padding-top: 16px;
|
|
43
|
-
overflow: hidden;
|
|
44
|
-
|
|
45
|
-
display: flex;
|
|
46
|
-
flex-direction: column;
|
|
47
|
-
align-items: center;
|
|
48
|
-
|
|
49
|
-
border-radius: 8px;
|
|
50
|
-
background-color: rgba(0, 0, 0, 0.05);
|
|
51
|
-
|
|
52
|
-
.canvasSizeName {
|
|
53
|
-
color: #616366;
|
|
54
|
-
font-size: 12px;
|
|
55
|
-
font-weight: 600;
|
|
56
|
-
line-height: 16px;
|
|
57
|
-
margin-top: 8px;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.canvasSizeSize {
|
|
61
|
-
height: 14px;
|
|
62
|
-
overflow: hidden;
|
|
63
|
-
width: 100%;
|
|
64
|
-
margin-top: 4px;
|
|
65
|
-
|
|
66
|
-
span {
|
|
67
|
-
color: #abadb2;
|
|
68
|
-
display: block;
|
|
69
|
-
font-size: 20px;
|
|
70
|
-
font-weight: 400;
|
|
71
|
-
height: 200%;
|
|
72
|
-
line-height: 26px;
|
|
73
|
-
text-align: center;
|
|
74
|
-
-webkit-transform: scale(0.5);
|
|
75
|
-
transform: scale(0.5);
|
|
76
|
-
-webkit-transform-origin: top left;
|
|
77
|
-
transform-origin: top left;
|
|
78
|
-
width: 200%;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.canvasSizeMask {
|
|
83
|
-
background: rgba(0, 0, 0, 0.25);
|
|
84
|
-
display: none;
|
|
85
|
-
height: 100%;
|
|
86
|
-
left: 0;
|
|
87
|
-
position: absolute;
|
|
88
|
-
top: 0;
|
|
89
|
-
width: 100%;
|
|
90
|
-
}
|
|
91
|
-
.canvasSizeMask,
|
|
92
|
-
.canvasSizeMask button {
|
|
93
|
-
justify-content: center;
|
|
94
|
-
align-items: center;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.canvasSizeMask button {
|
|
98
|
-
background-color: #fff;
|
|
99
|
-
width: 66px;
|
|
100
|
-
height: 26px;
|
|
101
|
-
display: flex;
|
|
102
|
-
padding: 0 8px;
|
|
103
|
-
outline: none;
|
|
104
|
-
line-height: 16px;
|
|
105
|
-
font-size: 12px;
|
|
106
|
-
cursor: pointer;
|
|
107
|
-
color: #1c1d1f;
|
|
108
|
-
border-radius: 6px;
|
|
109
|
-
}
|
|
110
|
-
.canvasSizeMask button:active {
|
|
111
|
-
background-color: #f2f2f2;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
&:hover .canvasSizeMask {
|
|
115
|
-
display: flex;
|
|
116
|
-
}
|
|
117
|
-
`,lt=G.div`
|
|
118
|
-
display: flex;
|
|
119
|
-
margin-top: 20px;
|
|
120
|
-
flex-wrap: wrap;
|
|
121
|
-
align-items: center;
|
|
122
|
-
position: relative;
|
|
123
|
-
|
|
124
|
-
.sizeWarning {
|
|
125
|
-
width: 100%;
|
|
126
|
-
margin-bottom: 8px;
|
|
127
|
-
padding: 4px 8px;
|
|
128
|
-
font-size: 12px;
|
|
129
|
-
color: #ff4d4f;
|
|
130
|
-
background-color: #fff2f0;
|
|
131
|
-
border: 1px solid #ffccc7;
|
|
132
|
-
border-radius: 4px;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.Widget.sizeInpueBox {
|
|
136
|
-
display: flex;
|
|
137
|
-
align-items: center;
|
|
138
|
-
|
|
139
|
-
flex: 1;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
.Widget.sizeInpueBox .sizeInput {
|
|
143
|
-
flex: 1;
|
|
144
|
-
}
|
|
145
|
-
.Widget.sizeInpueBox .linkIcon {
|
|
146
|
-
padding: 8px;
|
|
147
|
-
background-color: #001f5c0f;
|
|
148
|
-
border-radius: 8px;
|
|
149
|
-
margin: 0 4px;
|
|
150
|
-
}
|
|
151
|
-
`,L=72,j=130,V=8e3,ye=({project:n,visible:s,onClose:u,onConfirm:b})=>{let{message:g,modal:v}=Ve.useApp(),[l,M]=k("all"),N=nt(null),{token:p}=Ge.useToken(),[r,x]=k(null),[c,C]=k(null),[h,f]=k("px"),[y,q]=k(!1),[T,O]=k(1),[S,I]=k("#ffffff"),[J,R]=k(!1),B=ue(()=>r?E({unitVal:r,dpi:L,unit:h}):0,[r,h]),Z=ue(()=>c?E({unitVal:c,dpi:L,unit:h}):0,[c,h]),Q=r!=null&&c!=null&&r>0&&c>0,A=Q&&(B>V||Z>V),F=Q&&(B<j||Z<j),Y=!Q||A||F,te=A?`\u8D85\u51FA\u753B\u5E03\u5C3A\u5BF8\u9650\u5236\uFF1A${V} * ${V} px`:F?`\u4F4E\u4E8E\u753B\u5E03\u5C3A\u5BF8\u9650\u5236\uFF1A${j} * ${j} px`:"",Se=$(t=>{x(t),y&&t&&t>0&&C(Math.round(t/T))},[y,T]),Pe=$(t=>{C(t),y&&t&&t>0&&x(Math.round(t*T))},[y,T]),Ne=$(()=>{!y&&r&&c&&r>0&&c>0&&O(r/c),q(t=>!t)},[y,r,c]),Te=$(t=>{if(r){let i=E({unitVal:r,dpi:L,unit:h});x(Math.round(U({px:i,dpi:L,unit:t,precious:0})))}if(c){let i=E({unitVal:c,dpi:L,unit:h});C(Math.round(U({px:i,dpi:L,unit:t,precious:0})))}f(t)},[r,c,h]),Ie=$(()=>{if(Y)return;let t=JSON.stringify({bg:{backgroundColor:S}}),i=new URLSearchParams({create:"",createEmptyPoster:"true",createInfo:t,height:String(c),unit:h,width:String(r)});console.log("params \u7684\u53C2\u6570 ---> ",i.toString()),console.log("project ",n.urls.editorUrl),window.open(`${n.urls.editorUrl}?${i.toString()}`,"_blank")},[Y,S,Z,B,h]),Be=t=>{M(t);let i=N.current;if(!i)return;let w=i.querySelector(`[data-category-id="${t}"]`);w&&i.scrollTo({top:w.offsetTop,behavior:"smooth"})},[Ue,Le]=k(()=>{let t={};return fe.forEach(i=>{t[i.key]=i.sizes.length>6}),t});return m(ct,{children:[m(Fe,{title:"\u521B\u5EFA\u8BBE\u8BA1",open:s,onCancel:u,footer:null,width:880,mask:{closable:!1},styles:{body:{display:"flex",flex:1,padding:"20px 0",height:"100%"},container:{height:550}},children:[e("div",{className:"createrSideBar",style:{width:140,"--sidebar-active-bg":p.colorPrimaryBg,"--sidebar-hover-bg":p.colorPrimaryBgHover},children:st.map(t=>m("div",{"data-active":t.key===l,className:H("createrSideBarItem","flex h-[40px] px-2 mb-2 cursor-pointer rounded-md items-center hover:bg-[var(--sidebar-hover-bg)]",{"bg-[var(--sidebar-active-bg)] hover:bg-[var(--sidebar-active-bg)]":t.key===l}),onClick:()=>Be(t.key),children:[e(t.icon,{size:16,className:"ml-2"}),e("span",{className:"ml-2",children:t.label})]},t.key))}),e(rt,{children:e("div",{className:"scrollbars",style:{position:"relative",overflow:"hidden",width:"100%",height:"100%"},children:e("div",{ref:N,style:{position:"absolute",inset:0,overflow:"scroll"},children:m("div",{className:"createrContentInner",children:[e("div",{"data-category-id":"all"}),m("div",{className:"openBtns flex",children:[m(xe,{onClick:()=>{let t=document.createElement("input");t.type="file",t.accept="image/*",t.onchange=async()=>{let i=t.files?.[0];if(i)try{g.loading("\u6B63\u5728\u4E0A\u4F20...",0);let w=ae(),D=new FormData;D.append("file",i);let oe=await W.post(w.url,D,{headers:{"Content-Type":"multipart/form-data"}});console.log("res",oe);let{url:ie,width:ne,height:se}=oe.result;console.log("url",ie,ne,se);let Me=encodeURIComponent(encodeURIComponent(ie)),Re=new URLSearchParams({createEmptyPoster:"true",width:String(ne),height:String(se),unit:"px"});g.destroy();let De=`${n.urls.editorUrl}/?${Re.toString()}&open=${Me}`,re=window.open(De,"_blank");(!re||re.closed)&&v.info({title:"\u5141\u8BB8\u663E\u793A\u5F39\u51FA\u7A97\u53E3",width:480,content:m("div",{style:{padding:"16px 0"},children:[e("p",{style:{marginBottom:8,color:"#666"},children:"\u4F60\u9700\u8981\u6388\u6743\u672C\u7AD9\u5728\u6D4F\u89C8\u5668\u6253\u5F00\u591A\u4E2A\u7A97\u53E3\u3002"}),m("div",{style:{marginBottom:12},children:[e("p",{children:e("b",{children:"\u7B2C1\u6B65"})}),e("p",{children:"\u70B9\u51FB\u6D4F\u89C8\u5668\u53F3\u4FA7\u9876\u90E8\u5F39\u51FA\u7684\u963B\u6B62\u7A0B\u5E8F\u56FE\u6807\u3002"})]}),m("div",{style:{marginBottom:12},children:[e("p",{children:e("b",{children:"\u7B2C2\u6B65"})}),e("p",{children:"\u70B9\u51FB\u59CB\u7EC8\u5141\u8BB8\u663E\u793A\u5F39\u51FA\u5F0F\u7A97\u53E3\u548C\u8FDB\u884C\u91CD\u5B9A\u5411\u3002"})]}),m("div",{style:{marginBottom:12},children:[e("p",{children:e("b",{children:"\u7B2C3\u6B65"})}),e("p",{children:"\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\uFF0C\u5373\u53EF\u6B63\u5E38\u4F7F\u7528\u529F\u80FD\u5566~"})]})]}),okText:"\u6211\u77E5\u9053\u5566"})}catch(w){g.destroy();let D=w?.message||"\u4E0A\u4F20\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5";g.error(D),console.error("\u4E0A\u4F20\u5931\u8D25:",D,w)}},t.click()},children:[e(tt,{style:{color:p.colorPrimary}}),e("span",{children:"\u6253\u5F00\u56FE\u7247"})]}),e(he,{title:"\u4EC5\u652F\u6301psd\u683C\u5F0F\u6587\u4EF6",children:m(xe,{style:{marginLeft:12},onClick:()=>{R(!0),console.log("\u70B9\u51FB")},children:[e(o,{style:{color:p.colorPrimary}}),e("span",{children:"\u6253\u5F00PSD"})]})})]}),fe.map(t=>m("div",{className:H("Widget categorySection","mt-6"),"data-category-id":t.key,"data-is-folded":Ue[t.key]??!1,"data-is-multi-row":t.sizes.length>6,children:[m("div",{className:H("categoryHeader","flex items-center justify-between"),children:[e("div",{className:"categoryTitle text-sm font-semibold",children:t.label}),e("div",{className:"categoryFoldBtn flex items-center cursor-pointer",onClick:()=>Le(i=>({...i,[t.key]:!1})),children:e("span",{className:"text-[#616366]",children:"\u67E5\u770B\u66F4\u591A"})})]}),t.key==="common"&&m(lt,{children:[te&&e("div",{className:"sizeWarning",children:te}),m("div",{className:"Widget sizeInpueBox",children:[e("div",{className:"sizeInput",children:e(ge,{prefix:"\u5BBD",value:r,min:0,precision:0,status:A||F?"error":void 0,onChange:Se,styles:{actions:{opacity:1,width:24}},style:{width:"100%"}})}),e(he,{title:y?"\u89E3\u9501\u6BD4\u4F8B":"\u9501\u5B9A\u6BD4\u4F8B",children:e("div",{className:"linkIcon",style:{cursor:"pointer"},onClick:Ne,children:y?e(it,{size:16}):e(ot,{size:16})})}),e("div",{className:"sizeInput",children:e(ge,{prefix:"\u9AD8",value:c,min:0,precision:0,status:A||F?"error":void 0,onChange:Pe,styles:{actions:{opacity:1,width:24}},style:{width:"100%"}})}),e("div",{className:"sizeUnitSelect",style:{width:98,marginLeft:12},children:e(je,{value:h,style:{width:98},onChange:Te,options:[{label:"px \u50CF\u7D20",value:"px"},{label:"cm \u5398\u7C73",value:"cm"},{label:"mm \u6BEB\u7C73",value:"mm"}]})})]}),e("div",{className:"widgets-color-picker",style:{width:98,marginLeft:12},children:e(He,{mode:"single",format:"hex",value:S,onChange:i=>I(i.toHexString()),styles:{root:{width:98},body:{width:92}}})}),e(Ke,{type:"primary",disabled:Y,style:{width:98,marginLeft:12},onClick:Ie,children:"\u521B\u5EFA"})]}),e("ul",{className:"flex mt-4 flex-wrap gap-3",children:t.sizes.map((i,w)=>e("li",{style:{width:"calc((100% - 60px) / 6)",height:97},children:m(at,{children:[i.icon,e("div",{className:"canvasSizeName",children:i.name}),e("div",{className:"canvasSizeSize",children:e("span",{children:i.desc})}),e("div",{className:"canvasSizeMask",onClick:()=>{b({...i,bgColor:S})},children:e("button",{type:"button",children:"\u521B\u5EFA"})})]})},w))})]},t.key))]})})})})]}),e(me,{visible:J,onClose:()=>R(!1)})]})};import{Fragment as bt,jsx as z,jsxs as vt}from"react/jsx-runtime";var{confirm:yt}=mt,ve=xt(({store:n,project:s})=>{let[u,b]=ft(!1),g=[{label:P("topbar.newDesign"),key:"new_design",icon:z(ht,{size:16})},{label:P("topbar.language"),key:"language",icon:z("div",{style:{height:22,display:"flex",alignItems:"center"},children:z(ut,{size:16})}),children:[{key:"en",label:"English",onClick:()=>{s.setLanguage("en")},extra:s.language==="en"?z(be,{size:16}):null},{key:"zh",label:"\u4E2D\u6587",onClick:()=>{s.setLanguage("zh")},extra:s.language==="zh"?z(be,{size:16}):null}]}];return vt(bt,{children:[z(dt,{menu:{items:g,onClick:({key:l})=>{l==="new_design"&&b(!0)}},trigger:["click"],styles:{root:{width:188}},children:z(pt,{type:"text",children:z(gt,{size:16})})}),z(ye,{visible:u,onClose:()=>b(!1),onConfirm:l=>{yt({title:"\u521B\u5EFA\u8BBE\u8BA1\u540E\uFF0C\u5C06\u65B0\u5EFA\u753B\u5E03\uFF0C\u5F53\u524D\u6D77\u62A5\u5185\u5BB9\u53EF\u5728\u4F5C\u56FE\u8BB0\u5F55\u4E2D\u67E5\u770B\u3002",okText:"\u786E\u5B9A",cancelText:"\u53D6\u6D88",onOk(){console.log("OK"),console.log("size ---> ",l);let M=JSON.stringify({bg:{backgroundColor:l.bgColor}}),N=new URLSearchParams({create:"",createEmptyPoster:"true",createInfo:M,height:String(l.height),unit:l.unit,width:String(l.width)});console.log("params \u7684\u53C2\u6570 ---> ",N.toString()),console.log("\u9700\u8981\u8DF3\u8F6C\u7684\u7F16\u8F91\u5668\u5730\u5740",s.urls.editorUrl),window.open(`${s.urls.editorUrl}?${N.toString()}`,"_blank")}})},store:n,project:s})]})});import{Input as wt,Tooltip as kt,Button as zt,theme as Ct,Divider as St}from"antd";import{CloudUpload as ke,Loader as Pt,Check as Nt}from"lucide-react";var we="https://pub-d7c4dca6f69c4b329766184b707dc826.r2.dev/images/2026-03-17/e406e8b1-eb6d-4d8a-8c22-ddd100a0a40e/1b04fb1b-7275-4123-b495-d205197c21d4/ddc303f2-0cda-4d34-9864-76df19a9e7d6.png";import{jsx as a,jsxs as ee}from"react/jsx-runtime";var Tt=X("div")`
|
|
1
|
+
import{a as u}from"../chunk-6XGFXDKJ.js";import{c as f}from"../chunk-2AZQIJ4K.js";import"../chunk-KERQXVBL.js";import"../chunk-YBC2DYJX.js";import"../chunk-EWOU5F3O.js";import{b as c}from"../chunk-5C2MNUBC.js";import"../chunk-EUTDQZKU.js";import{a as y}from"../chunk-RBRSKAZL.js";import{c as n}from"../chunk-WFMCGQ5V.js";import"../chunk-O2XFH626.js";import d from"styled-components";import{observer as k}from"mobx-react-lite";import{Dropdown as T,Button as L,Modal as N}from"antd";import{Menu as S,Plus as P,Languages as z,Check as h}from"lucide-react";import{useState as I}from"react";import{observer as B}from"mobx-react-lite";import{Fragment as M,jsx as i,jsxs as O}from"react/jsx-runtime";var{confirm:D}=N,x=B(({store:o,project:t})=>{let[l,a]=I(!1),s=[{label:n("topbar.newDesign"),key:"new_design",icon:i(P,{size:16})},{label:n("topbar.language"),key:"language",icon:i("div",{style:{height:22,display:"flex",alignItems:"center"},children:i(z,{size:16})}),children:[{key:"en",label:"English",onClick:()=>{t.setLanguage("en")},extra:t.language==="en"?i(h,{size:16}):null},{key:"zh",label:"\u4E2D\u6587",onClick:()=>{t.setLanguage("zh")},extra:t.language==="zh"?i(h,{size:16}):null}]}];return O(M,{children:[i(T,{menu:{items:s,onClick:({key:r})=>{r==="new_design"&&a(!0)}},trigger:["click"],styles:{root:{width:188}},children:i(L,{type:"text",children:i(S,{size:16})})}),i(u,{visible:l,onClose:()=>a(!1),onConfirm:r=>{D({title:"\u521B\u5EFA\u8BBE\u8BA1\u540E\uFF0C\u5C06\u65B0\u5EFA\u753B\u5E03\uFF0C\u5F53\u524D\u6D77\u62A5\u5185\u5BB9\u53EF\u5728\u4F5C\u56FE\u8BB0\u5F55\u4E2D\u67E5\u770B\u3002",okText:"\u786E\u5B9A",cancelText:"\u53D6\u6D88",onOk(){console.log("OK"),console.log("size ---> ",r);let C=JSON.stringify({bg:{backgroundColor:r.bgColor}}),m=new URLSearchParams({create:"",createEmptyPoster:"true",createInfo:C,height:String(r.height),unit:r.unit,width:String(r.width)});console.log("params \u7684\u53C2\u6570 ---> ",m.toString()),console.log("\u9700\u8981\u8DF3\u8F6C\u7684\u7F16\u8F91\u5668\u5730\u5740",t.urls.editorUrl),window.open(`${t.urls.editorUrl}?${m.toString()}`,"_blank")}})},store:o,project:t})]})});import{Input as R,Tooltip as K,Button as U,theme as _,Divider as E}from"antd";import{CloudUpload as v,Loader as F,Check as $}from"lucide-react";var b="https://pub-d7c4dca6f69c4b329766184b707dc826.r2.dev/images/2026-03-17/e406e8b1-eb6d-4d8a-8c22-ddd100a0a40e/1b04fb1b-7275-4123-b495-d205197c21d4/ddc303f2-0cda-4d34-9864-76df19a9e7d6.png";import{jsx as e,jsxs as g}from"react/jsx-runtime";var j=d("div")`
|
|
152
2
|
white-space: nowrap;
|
|
153
3
|
height: 55px;
|
|
154
4
|
padding: 0 15px;
|
|
@@ -161,18 +11,18 @@ import{a as de}from"../chunk-RBRSKAZL.js";import{a as W,c as K}from"../chunk-2AZ
|
|
|
161
11
|
overflow-y: hidden;
|
|
162
12
|
max-width: 100vw;
|
|
163
13
|
}
|
|
164
|
-
`,
|
|
14
|
+
`,A=d("div")`
|
|
165
15
|
@media screen and (max-width: 500px) {
|
|
166
16
|
display: flex;
|
|
167
17
|
}
|
|
168
|
-
`,
|
|
18
|
+
`,G=d("div")`
|
|
169
19
|
float: left;
|
|
170
20
|
display: flex;
|
|
171
21
|
align-items: center;
|
|
172
22
|
height: 55px;
|
|
173
|
-
`,
|
|
23
|
+
`,H=d("div")`
|
|
174
24
|
float: right;
|
|
175
25
|
display: flex;
|
|
176
26
|
align-items: center;
|
|
177
27
|
height: 55px;
|
|
178
|
-
`,
|
|
28
|
+
`,w={loading:{icon:e(v,{size:16,style:{display:"flex"}}),textKey:"topbar.statusLoading"},saved:{icon:e($,{size:16,style:{display:"flex",color:"#52c41a"}}),textKey:"topbar.statusSaved",color:"#52c41a"},"has-changes":{icon:e(v,{size:16,style:{display:"flex",color:"#faad14"}}),textKey:"topbar.statusHasChanges",color:"#faad14"},saving:{icon:e(F,{size:16,style:{display:"flex"}}),textKey:"topbar.statusSaving"}},J=k(({project:o})=>{let t=w[o.status]||w.saved;return e(K,{title:n(t.textKey),children:e(U,{type:"text",style:{marginLeft:14,color:t.color},icon:t.icon,onClick:()=>{(o.status==="loading"||o.status==="saved")&&o.save()},children:n(t.textKey)})})}),ge=k(({store:o,logo:t,logoUrl:l})=>{let a=f(),{token:s}=_.useToken(),p=t===void 0?e("img",{src:b,className:"h-[28px]"}):typeof t=="string"?e("img",{src:t,className:"h-[28px]"}):t,r=l?e("a",{href:l,target:"_blank",rel:"noopener noreferrer",style:{display:"flex",alignItems:"center"},children:p}):e("div",{style:{display:"flex",alignItems:"center",cursor:"pointer"},onClick:()=>window.history.back(),children:p});return e(j,{className:"topbar",style:{backgroundColor:s.colorBgContainer,color:s.colorText,borderBottom:`1px solid ${s.colorBorder}`},children:g(A,{children:[g(G,{children:[e("div",{style:{display:"flex",alignItems:"center"},children:r}),e(E,{orientation:"vertical",style:{height:"1.3em",borderColor:"#ebe6e7",marginLeft:15}}),e(x,{store:o,project:a}),e("div",{style:{paddingLeft:10,maxWidth:200},children:e(R,{placeholder:n("topbar.editableTextPlaceholder")})}),g("div",{style:{paddingLeft:16,fontSize:14},className:"text-gray-600",children:[c({px:o.width,unit:o.unit,dpi:o.dpi,precious:0})," x"," ",c({px:o.height,unit:o.unit,dpi:o.dpi,precious:0})," ",o.unit]}),e(J,{project:a})]}),e(H,{children:e(y,{store:o})})]})})});export{ge as Topbar};
|