@ydesign/react-editor 0.0.3 → 0.0.4

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.
Files changed (89) hide show
  1. package/dist/app.css +1 -1
  2. package/dist/canvas/workspace-canvas.d.ts +4 -0
  3. package/dist/canvas/workspace.d.ts +4 -0
  4. package/dist/chunk-4LUZF4CB.js +2 -0
  5. package/dist/{chunk-YVRHDXYK.js → chunk-53KFBGJB.js} +2 -2
  6. package/dist/chunk-5C2MNUBC.js +1 -0
  7. package/dist/chunk-AGNRQAPA.js +1 -0
  8. package/dist/{chunk-ZVWJRZOZ.js → chunk-APQPKBER.js} +1 -1
  9. package/dist/chunk-CMH73CYQ.js +27 -0
  10. package/dist/chunk-COQ4GO5N.js +1 -0
  11. package/dist/chunk-FXO52BV7.js +1 -0
  12. package/dist/chunk-IQ7O55C5.js +42 -0
  13. package/dist/{chunk-RFPYC6DZ.js → chunk-LCE6Z46D.js} +1 -1
  14. package/dist/chunk-MQZE5LZU.js +1 -0
  15. package/dist/chunk-OV74NBJ5.js +45 -0
  16. package/dist/chunk-Q2L6VKFI.js +9 -0
  17. package/dist/{chunk-LW2W4B2N.js → chunk-VXTF2OL2.js} +3 -3
  18. package/dist/chunk-WGX437MN.js +9 -0
  19. package/dist/{chunk-LHQI6WDJ.js → chunk-XK24AOVW.js} +2 -2
  20. package/dist/chunk-XM3RPIUS.js +9 -0
  21. package/dist/{chunk-CRTMZEJE.js → chunk-XPAHGJGK.js} +1 -1
  22. package/dist/config.js +1 -1
  23. package/dist/hooks/use-duplicate-element.d.ts +4 -0
  24. package/dist/hooks/use-lock.d.ts +4 -0
  25. package/dist/hooks/use-remove-element.d.ts +4 -0
  26. package/dist/model/store.d.ts +55 -44
  27. package/dist/model/store.js +1 -1
  28. package/dist/project.d.ts +2 -0
  29. package/dist/side-panel/background-panel.d.ts +10 -3
  30. package/dist/side-panel/background-panel.js +1 -1
  31. package/dist/side-panel/images-grid.d.ts +2 -1
  32. package/dist/side-panel/images-grid.js +1 -41
  33. package/dist/side-panel/index.d.ts +4 -0
  34. package/dist/side-panel/index.js +1 -1
  35. package/dist/side-panel/layers-panel.d.ts +8 -2
  36. package/dist/side-panel/layers-panel.js +1 -1
  37. package/dist/side-panel/photos-panel.d.ts +4 -0
  38. package/dist/side-panel/shapes-panel.d.ts +4 -0
  39. package/dist/side-panel/shapes-panel.js +1 -1
  40. package/dist/side-panel/side-panel.d.ts +4 -0
  41. package/dist/side-panel/side-panel.js +1 -1
  42. package/dist/side-panel/size-panel.d.ts +8 -2
  43. package/dist/side-panel/size-panel.js +1 -1
  44. package/dist/side-panel/tab-button.js +1 -1
  45. package/dist/side-panel/templates-panel.d.ts +8 -2
  46. package/dist/side-panel/templates-panel.js +1 -1
  47. package/dist/side-panel/text-panel.d.ts +8 -2
  48. package/dist/side-panel/text-panel.js +1 -1
  49. package/dist/side-panel/upload-panel.d.ts +4 -0
  50. package/dist/toolbar/default-toolbar.d.ts +10 -1
  51. package/dist/toolbar/default-toolbar.js +1 -1
  52. package/dist/toolbar/download-button.d.ts +4 -0
  53. package/dist/toolbar/duplicate-button.d.ts +4 -0
  54. package/dist/toolbar/figure-toolbar.d.ts +4 -0
  55. package/dist/toolbar/figure-toolbar.js +1 -1
  56. package/dist/toolbar/filters-picker.d.ts +4 -0
  57. package/dist/toolbar/flip-button.d.ts +4 -0
  58. package/dist/toolbar/group-button.d.ts +4 -0
  59. package/dist/toolbar/history-buttons.d.ts +4 -0
  60. package/dist/toolbar/history-buttons.js +1 -1
  61. package/dist/toolbar/image-toolbar.d.ts +4 -0
  62. package/dist/toolbar/image-toolbar.js +1 -1
  63. package/dist/toolbar/lock-button.d.ts +4 -0
  64. package/dist/toolbar/opacity-picker.d.ts +4 -0
  65. package/dist/toolbar/position-picker.d.ts +4 -0
  66. package/dist/toolbar/remove-button.d.ts +4 -0
  67. package/dist/toolbar/text-toolbar.d.ts +4 -0
  68. package/dist/toolbar/text-toolbar.js +1 -1
  69. package/dist/toolbar/toolbar.d.ts +4 -0
  70. package/dist/toolbar/toolbar.js +1 -1
  71. package/dist/toolbar/zoom-buttons.d.ts +4 -0
  72. package/dist/topbar/file-menu.d.ts +4 -0
  73. package/dist/topbar/file-menu.js +1 -1
  74. package/dist/topbar/topbar.d.ts +4 -0
  75. package/dist/topbar/topbar.js +5 -5
  76. package/dist/utils/text.d.ts +3 -0
  77. package/dist/utils/text.js +1 -0
  78. package/dist/utils/unit.d.ts +18 -0
  79. package/dist/utils/unit.js +1 -0
  80. package/package.json +4 -10
  81. package/dist/chunk-6BG6R2IO.js +0 -7
  82. package/dist/chunk-6LFGFFHI.js +0 -1
  83. package/dist/chunk-LCOWX5JR.js +0 -1
  84. package/dist/chunk-M33EDDXB.js +0 -1
  85. package/dist/chunk-MCBL6QAP.js +0 -1
  86. package/dist/chunk-NX3CGW6Q.js +0 -1
  87. package/dist/chunk-QJBRJELT.js +0 -1
  88. package/dist/chunk-TX4BNXQC.js +0 -1
  89. package/dist/chunk-WIM26GEM.js +0 -1
@@ -0,0 +1,9 @@
1
+ import{a as t}from"./chunk-APQPKBER.js";import{a as w}from"./chunk-IQ7O55C5.js";import{observable as f}from"mobx";import{observer as a}from"mobx-react-lite";import M from"styled-components";import{jsx as o,jsxs as s}from"react/jsx-runtime";var l=["https://images.unsplash.com/photo-1579546929518-9e396f3cc809?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxfHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1635776062360-af423602aff3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyfHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1604079628040-94301bb21b91?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwzfHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1604076913837-52ab5629fba9?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw0fHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1579547621706-1a9c79d5c9f1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw1fHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1635776062127-d379bfcba9f8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw2fHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1508614999368-9260051292e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw3fHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw4fHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1579546928937-641f7ac9bced?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHw5fHxncmFkaWVudHxlbnwwfHx8fDE3NjAwMzAwMjJ8MA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1604076850742-4c7221f3101b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxMHx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1618397746666-63405ce5d015?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxMXx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1557683316-973673baf926?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxMnx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1554034483-04fda0d3507b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxM3x8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1579548122080-c35fd6820ecb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNHx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNXx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1644426358812-879f02d1d867?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxNnx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1550859492-d5da9d8e45f3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxN3x8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1579546929662-711aa81148cf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxOHx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1589810264340-0ce27bfbf751?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxOXx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400","https://images.unsplash.com/photo-1569982175971-d92b01cf8694?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwyMHx8Z3JhZGllbnR8ZW58MHx8fHwxNzYwMDMwMDIyfDA&ixlib=rb-4.1.0&q=80&w=400"],r=f(["white","rgb(82, 113, 255)","rgb(255, 145, 77)","rgb(126, 217, 87)","rgb(255, 222, 89)","rgb(203, 108, 230)","rgba(0, 0, 0, 0)"]),n=M.div`
2
+ display: inline-block;
3
+ width: 30px;
4
+ height: 30px;
5
+ border-radius: 3px;
6
+ cursor: pointer;
7
+ box-shadow: 0 0 2px rgba(16, 22, 26, 0.3);
8
+ overflow: hidden;
9
+ `,e=x=>{let{color:i,children:p}=x;return o(n,{...x,style:{background:`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E")`},children:o("div",{style:{width:"100%",height:"100%",background:i},children:p})})},h=x=>{r.replace(x)},d=a(({store:x})=>s("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:[s("div",{style:{display:"flex",justifyContent:"space-around",paddingBottom:10,alignItems:"center"},children:[o(t,{store:x}),r.map(i=>o(e,{color:i,onClick:()=>{}},i))]}),o(w,{images:l,isLoading:!1,getPreview:i=>i,loadMore:!1,onSelect:i=>{console.log(i)}})]}));export{h as a,d as b};
@@ -1,4 +1,4 @@
1
- import{a as T}from"./chunk-MCBL6QAP.js";import{a as x}from"./chunk-WIM26GEM.js";import{a as o}from"./chunk-LW2W4B2N.js";import{a as P}from"./chunk-QJBRJELT.js";import{a as u}from"./chunk-6LFGFFHI.js";import{a as h}from"./chunk-DBQHEZPG.js";import{a as m}from"./chunk-TX4BNXQC.js";import{c as l,d as S}from"./chunk-WCHGSVUC.js";import{a as y}from"./chunk-M33EDDXB.js";import{a as f}from"./chunk-DJBTBRPS.js";import a from"styled-components";import{useRef as g,useLayoutEffect as C}from"react";import{observer as i}from"mobx-react-lite";import{LayoutTemplate as z,TypeOutline as L,Image as N,Shapes as M,Upload as B,Wallpaper as H,Layers as I,ImageUpscale as E}from"lucide-react";import{clsx as R}from"clsx";import{jsx as n,jsxs as p}from"react/jsx-runtime";var U=a.div`
1
+ import{a as T}from"./chunk-XM3RPIUS.js";import{a as x}from"./chunk-Q2L6VKFI.js";import{a as o}from"./chunk-VXTF2OL2.js";import{a as P}from"./chunk-OV74NBJ5.js";import{a as u}from"./chunk-CMH73CYQ.js";import{a as h}from"./chunk-DBQHEZPG.js";import{b as S}from"./chunk-WGX437MN.js";import{c as l,d as m}from"./chunk-WCHGSVUC.js";import{a as y}from"./chunk-AGNRQAPA.js";import{a as f}from"./chunk-DJBTBRPS.js";import a from"styled-components";import{useRef as g,useLayoutEffect as C}from"react";import{observer as i}from"mobx-react-lite";import{LayoutTemplate as z,TypeOutline as L,Image as N,Shapes as M,Upload as B,Wallpaper as H,Layers as I,ImageUpscale as E}from"lucide-react";import{clsx as R}from"clsx";import{jsx as n,jsxs as p}from"react/jsx-runtime";var U=a.div`
2
2
  display: flex;
3
3
  height: 100% !important;
4
4
  padding: 0px !important;
@@ -51,4 +51,4 @@ import{a as T}from"./chunk-MCBL6QAP.js";import{a as x}from"./chunk-WIM26GEM.js";
51
51
  ${l(`
52
52
  display: none;
53
53
  `)}
54
- `,A=({onClick:e})=>n(W,{onClick:e,children:n("div",{children:p("button",{className:"grid relative justify-center arrow cursor-pointer",children:[p("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 13 96",width:"13",height:"96",fill:"none",children:[n("path",{d:"M0,0 h1 c0,20,12,12,12,32 v32 c0,20,-12,12,-12,32 H0 z",className:"fill-white dark:fill-[#0b0809]"}),n("path",{d:"M0.5,0 c0,20,12,12,12,32 v32 c0,20,-12,12,-12,32",className:"fill-white stroke-gray-200 dark:fill-[#0b0809] dark:stroke-[#0b0809]"})]}),n("div",{className:"absolute self-center",children:n("span",{className:"w-3 h-3 text-block inline-flex items-center box-border dark:text-white",children:n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",children:n("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.25",d:"M7 3.17 4.88 5.3a1 1 0 0 0 0 1.42L7 8.83"})})})})]})})}),_={name:"templates",Tab:i(e=>n(o,{name:"templates",...e,children:n(z,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(P,{store:e})},j={name:"text",Tab:i(e=>n(o,{name:"text",...e,children:n(L,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(u,{store:e})},q={name:"photos",Tab:i(e=>n(o,{name:"photos",...e,children:n(N,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(f,{store:e})},G={name:"shapes",Tab:i(e=>n(o,{name:"shapes",...e,children:n(M,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(T,{store:e})},J={name:"upload",Tab:i(e=>n(o,{name:"upload",...e,children:n(B,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(h,{store:e})},K={name:"background",Tab:i(e=>n(o,{name:"background",...e,children:n(H,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(m,{store:e})},Q={name:"layers",Tab:i(e=>n(o,{name:"layers",...e,children:n(I,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(y,{store:e})},V={name:"size",Tab:i(e=>n(o,{name:"size",...e,children:n(E,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(x,{store:e})},X=[_,j,q,G,J,K,Q,V],Y=i(({store:e,sections:v,defaultSection:c="templates"})=>{(()=>{let t=g(!0);t.current&&(t.current=!1,e.openSidePanel(c))})();let r=S();C(()=>{r?e.openSidePanel(""):e.openSidePanel(c)},[r]);let d=[...v||X].filter(t=>t.visibleInList!==!1),b=d.find(t=>t.name===e.openedSidePanel)?.Panel,k=g(null);return p(U,{className:`bp5-navbar design-side-panel ${e.openedSidePanel?"":"collapsed"}`,children:[n($,{className:"design-side-tabs-container border-r-1 border-gray-200 dark:border-gray-800",ref:k,children:n(D,{className:"design-side-tabs-inner",children:d.map(({name:t,Tab:s})=>n(s,{name:t,onClick:()=>{t===e.openedSidePanel?e.openSidePanel(""):e.openSidePanel(t)},active:e.openedSidePanel===t},t))})}),b&&n(F,{className:R("bp5-navbar design-panel-container","border-r-1 border-gray-200 dark:border-gray-800"),onClick:t=>{let s=t.target.closest(".design-close-panel"),w=t.target.closest(".design-mobile");s&&(r||w)&&e.openSidePanel("")},children:n(b,{store:e})}),e.openedSidePanel&&n(O,{onClick:()=>e.openSidePanel("")}),e.openedSidePanel&&n(A,{onClick:()=>e.openSidePanel("")})]})}),Pe=Y;export{_ as a,j as b,q as c,G as d,J as e,K as f,Q as g,V as h,X as i,Y as j,Pe as k};
54
+ `,A=({onClick:e})=>n(W,{onClick:e,children:n("div",{children:p("button",{className:"grid relative justify-center arrow cursor-pointer",children:[p("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 13 96",width:"13",height:"96",fill:"none",children:[n("path",{d:"M0,0 h1 c0,20,12,12,12,32 v32 c0,20,-12,12,-12,32 H0 z",className:"fill-white dark:fill-[#0b0809]"}),n("path",{d:"M0.5,0 c0,20,12,12,12,32 v32 c0,20,-12,12,-12,32",className:"fill-white stroke-gray-200 dark:fill-[#0b0809] dark:stroke-[#0b0809]"})]}),n("div",{className:"absolute self-center",children:n("span",{className:"w-3 h-3 text-block inline-flex items-center box-border dark:text-white",children:n("svg",{xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",children:n("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeWidth:"1.25",d:"M7 3.17 4.88 5.3a1 1 0 0 0 0 1.42L7 8.83"})})})})]})})}),_={name:"templates",Tab:i(e=>n(o,{name:"templates",...e,children:n(z,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(P,{store:e})},j={name:"text",Tab:i(e=>n(o,{name:"text",...e,children:n(L,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(u,{store:e})},q={name:"photos",Tab:i(e=>n(o,{name:"photos",...e,children:n(N,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(f,{store:e})},G={name:"shapes",Tab:i(e=>n(o,{name:"shapes",...e,children:n(M,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(T,{store:e})},J={name:"upload",Tab:i(e=>n(o,{name:"upload",...e,children:n(B,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(h,{store:e})},K={name:"background",Tab:i(e=>n(o,{name:"background",...e,children:n(H,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(S,{store:e})},Q={name:"layers",Tab:i(e=>n(o,{name:"layers",...e,children:n(I,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(y,{store:e})},V={name:"size",Tab:i(e=>n(o,{name:"size",...e,children:n(E,{style:{display:"inline-block"},size:20})})),Panel:({store:e})=>n(x,{store:e})},X=[_,j,q,G,J,K,Q,V],Y=i(({store:e,sections:v,defaultSection:c="templates"})=>{(()=>{let t=g(!0);t.current&&(t.current=!1,e.openSidePanel(c))})();let r=m();C(()=>{r?e.openSidePanel(""):e.openSidePanel(c)},[r]);let d=[...v||X].filter(t=>t.visibleInList!==!1),b=d.find(t=>t.name===e.openedSidePanel)?.Panel,k=g(null);return p(U,{className:`bp5-navbar design-side-panel ${e.openedSidePanel?"":"collapsed"}`,children:[n($,{className:"design-side-tabs-container border-r-1 border-gray-200 dark:border-gray-800",ref:k,children:n(D,{className:"design-side-tabs-inner",children:d.map(({name:t,Tab:s})=>n(s,{name:t,onClick:()=>{t===e.openedSidePanel?e.openSidePanel(""):e.openSidePanel(t)},active:e.openedSidePanel===t},t))})}),b&&n(F,{className:R("bp5-navbar design-panel-container","border-r-1 border-gray-200 dark:border-gray-800"),onClick:t=>{let s=t.target.closest(".design-close-panel"),w=t.target.closest(".design-mobile");s&&(r||w)&&e.openSidePanel("")},children:n(b,{store:e})}),e.openedSidePanel&&n(O,{onClick:()=>e.openSidePanel("")}),e.openedSidePanel&&n(A,{onClick:()=>e.openSidePanel("")})]})}),Pe=Y;export{_ as a,j as b,q as c,G as d,J as e,K as f,Q as g,V as h,X as i,Y as j,Pe as k};
@@ -0,0 +1,9 @@
1
+ import{a}from"./chunk-MXZ6RXT3.js";import{b as l}from"./chunk-MQZE5LZU.js";import{jsx as e,jsxs as s}from"react/jsx-runtime";var h=({store:r})=>{let i=t=>{r.editor?.objectsHandler.createPathElement(t.path)},n=t=>{r.editor?.objectsHandler.createShapeElement(t.type)};return s("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"},className:"no-scrollbar",children:[e("style",{children:`
2
+ .no-scrollbar::-webkit-scrollbar {
3
+ display: none;
4
+ }
5
+ .no-scrollbar {
6
+ -ms-overflow-style: none;
7
+ scrollbar-width: none;
8
+ }
9
+ `}),l.map((t,c)=>s("div",{className:"category",children:[e("div",{className:a("category-name","text-base px-2 mt-2"),children:t.name},t.name),e("div",{className:a("shape-list","flex flex-wrap content-start mb-2"),children:t.children.map((o,m)=>e("div",{className:a("shape-item","w-[25%] h-0 pb-[25%] relative cursor-pointer shrink-0 mb-[1.2%]"),onClick:()=>{o.type?n(o):i(o)},children:e("div",{className:a("shape-content","absolute inset-0 flex justify-center items-center"),children:e("svg",{overflow:"visible",width:"50",height:"50",children:e("g",{transform:`scale(${50/o.viewBox[0]}, ${50/o.viewBox[1]}) translate(0,0) matrix(1,0,0,1,0,0)`,children:e("path",{className:"shape-path",d:o.path,fill:"#ccc",strokeMiterlimit:8,strokeLinecap:"butt"})})})})},m))})]},c))]})};export{h as a};
@@ -1 +1 @@
1
- import{a as C,b as m}from"./chunk-YRJUN267.js";import{a as w}from"./chunk-4HEMGHOQ.js";import{a as u}from"./chunk-RVXI723F.js";import{cssGradient2FabricGradient as W}from"@ydesign/core";import{observer as y}from"mobx-react-lite";import{useState as F,useRef as k,useMemo as P}from"react";import{ColorPicker as S,Popover as B,Button as g,InputNumber as x,Slider as b}from"antd";import{Logs as j,Ban as A}from"lucide-react";import{Fragment as _,jsx as e,jsxs as h}from"react/jsx-runtime";var n=r=>r?typeof r=="string"?r:r.colorStops?JSON.stringify(r.colorStops):JSON.stringify(r):"",D=y(({store:r,elements:t})=>{let o=t[0],[c,d]=F(()=>u(o.fill)),a=k(!1),s=k(n(o.fill)),p=n(o.fill);p!==s.current&&!a.current&&(s.current=p,d(u(o.fill)));let f=P(()=>c,[n(c)]);return e(S,{value:f,allowClear:!0,mode:["single","gradient"],onOpenChange:i=>{a.current=i,i||(s.current=n(o.fill))},onChange:i=>{d(i)},onChangeComplete:i=>{let l=i.toCssString();if(l.includes("gradient")){let v=W(l);r.editor?.objectsHandler.update({fill:v})}else r.editor?.objectsHandler.update({fill:l})}})}),H=y(({store:r,element:t})=>(console.log("element ---> ",t),e(B,{trigger:"click",content:h("div",{style:{width:270},children:[h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:15},children:[e(g,{color:t?.strokeWidth===0?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeWidth:0}),r._triggerUpdate()},children:e(A,{size:16})}),e(g,{color:t?.strokeWidth&&t?.strokeDashArray?.length===0?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x2:24,y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),e(g,{color:t?.strokeWidth&&Array.isArray(t.strokeDashArray)&&t.strokeDashArray[0]===4?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[4,1],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),e(g,{color:t?.strokeWidth&&Array.isArray(t.strokeDashArray)&&t.strokeDashArray[0]===2?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[2,1],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),e(g,{color:t?.strokeWidth&&Array.isArray(t.strokeDashArray)&&t.strokeDashArray[0]===1?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[1,1],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]}),h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:5},children:[e("div",{children:"Stroke Width"}),e("div",{children:e(x,{value:t?.strokeWidth,style:{width:60},min:0,max:Math.round(Math.min(t?.width,t?.height)/2),onChange:o=>{r.editor?.objectsHandler.update({strokeWidth:o}),r._triggerUpdate()}})})]}),e(b,{value:t?.strokeWidth,onChange:o=>{r.editor?.objectsHandler.update({strokeWidth:o}),r._triggerUpdate()},min:0,max:Math.round(Math.min(t?.width,t?.height)/2)}),t?.type==="rect"&&h(_,{children:[h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:15,paddingBottom:5},children:[e("div",{children:"Corner Radius"}),e("div",{children:e(x,{value:t?.rx,style:{width:60},min:0,max:Math.round(Math.min(t?.width,t?.height)/2),onChange:o=>{r.editor?.objectsHandler.update({rx:o,ry:o}),r._triggerUpdate()}})})]}),e(b,{value:t?.rx,onChange:o=>{r.editor?.objectsHandler.update({rx:o,ry:o}),r._triggerUpdate()},min:0,max:Math.round(Math.min(t?.width,t?.height)/2)})]})]}),children:e(g,{type:"text",styles:{root:{padding:"0 7px"}},icon:e(j,{size:16,style:{display:"flex"}}),children:"Stroke settings"})}))),R=y(({store:r,elements:t})=>{let o=t[0],[c,d]=F(()=>u(o?.stroke)),a=k(!1),s=k(n(o?.stroke)),p=n(o?.stroke);p!==s.current&&!a.current&&(s.current=p,d(u(o?.stroke)));let f=P(()=>c,[n(c)]);return o?.strokeWidth?e(S,{value:f,allowClear:!0,mode:["single","gradient"],onOpenChange:i=>{a.current=i,i||(s.current=n(o.stroke))},onChange:i=>{d(i)},onChangeComplete:i=>{let l=i.toCssString();if(l.includes("gradient")){let v=W(l);r.editor?.objectsHandler.update({stroke:v})}else r.editor?.objectsHandler.update({stroke:l})}}):null}),M={FigureFill:D,FigureStroke:R,FigureSettings:H,FigureFilters:w},L=y(({store:r,components:t})=>{let o=r.selectedElements[0],d=C({type:"figure",usedItems:["FigureFill","FigureStroke","FigureSettings","FigureFilters"],components:t});return e(m,{items:d,itemRender:a=>{let s=t[a]||M[a];return s&&e(s,{elements:r.selectedElements,element:o,store:r},a)}})});export{n as a,D as b,H as c,R as d,L as e};
1
+ import{a as w}from"./chunk-4HEMGHOQ.js";import{a as C,b as m}from"./chunk-YRJUN267.js";import{a as u}from"./chunk-RVXI723F.js";import{cssGradient2FabricGradient as W}from"@ydesign/core";import{observer as y}from"mobx-react-lite";import{useState as F,useRef as k,useMemo as P}from"react";import{ColorPicker as S,Popover as B,Button as g,InputNumber as x,Slider as b}from"antd";import{Logs as j,Ban as A}from"lucide-react";import{Fragment as _,jsx as e,jsxs as h}from"react/jsx-runtime";var n=r=>r?typeof r=="string"?r:r.colorStops?JSON.stringify(r.colorStops):JSON.stringify(r):"",D=y(({store:r,elements:t})=>{let o=t[0],[c,d]=F(()=>u(o.fill)),a=k(!1),s=k(n(o.fill)),p=n(o.fill);p!==s.current&&!a.current&&(s.current=p,d(u(o.fill)));let f=P(()=>c,[n(c)]);return e(S,{value:f,allowClear:!0,mode:["single","gradient"],onOpenChange:i=>{a.current=i,i||(s.current=n(o.fill))},onChange:i=>{d(i)},onChangeComplete:i=>{let l=i.toCssString();if(l.includes("gradient")){let v=W(l);r.editor?.objectsHandler.update({fill:v})}else r.editor?.objectsHandler.update({fill:l})}})}),H=y(({store:r,element:t})=>(console.log("element ---> ",t),e(B,{trigger:"click",content:h("div",{style:{width:270},children:[h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:15},children:[e(g,{color:t?.strokeWidth===0?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeWidth:0}),r._triggerUpdate()},children:e(A,{size:16})}),e(g,{color:t?.strokeWidth&&t?.strokeDashArray?.length===0?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x2:24,y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"})})}),e(g,{color:t?.strokeWidth&&Array.isArray(t.strokeDashArray)&&t.strokeDashArray[0]===4?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[4,1],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"})})}),e(g,{color:t?.strokeWidth&&Array.isArray(t.strokeDashArray)&&t.strokeDashArray[0]===2?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[2,1],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"})})}),e(g,{color:t?.strokeWidth&&Array.isArray(t.strokeDashArray)&&t.strokeDashArray[0]===1?"primary":"default",variant:"filled",onClick:()=>{r.editor?.objectsHandler.update({strokeDashArray:[1,1],strokeWidth:t?.strokeWidth||10,stroke:t?.stroke||"#000000"}),r._triggerUpdate()},children:e("svg",{width:16,height:16,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:e("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})})})]}),h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:5},children:[e("div",{children:"Stroke Width"}),e("div",{children:e(x,{value:t?.strokeWidth,style:{width:60},min:0,max:Math.round(Math.min(t?.width,t?.height)/2),onChange:o=>{r.editor?.objectsHandler.update({strokeWidth:o}),r._triggerUpdate()}})})]}),e(b,{value:t?.strokeWidth,onChange:o=>{r.editor?.objectsHandler.update({strokeWidth:o}),r._triggerUpdate()},min:0,max:Math.round(Math.min(t?.width,t?.height)/2)}),t?.type==="rect"&&h(_,{children:[h("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:15,paddingBottom:5},children:[e("div",{children:"Corner Radius"}),e("div",{children:e(x,{value:t?.rx,style:{width:60},min:0,max:Math.round(Math.min(t?.width,t?.height)/2),onChange:o=>{r.editor?.objectsHandler.update({rx:o,ry:o}),r._triggerUpdate()}})})]}),e(b,{value:t?.rx,onChange:o=>{r.editor?.objectsHandler.update({rx:o,ry:o}),r._triggerUpdate()},min:0,max:Math.round(Math.min(t?.width,t?.height)/2)})]})]}),children:e(g,{type:"text",styles:{root:{padding:"0 7px"}},icon:e(j,{size:16,style:{display:"flex"}}),children:"Stroke settings"})}))),R=y(({store:r,elements:t})=>{let o=t[0],[c,d]=F(()=>u(o?.stroke)),a=k(!1),s=k(n(o?.stroke)),p=n(o?.stroke);p!==s.current&&!a.current&&(s.current=p,d(u(o?.stroke)));let f=P(()=>c,[n(c)]);return o?.strokeWidth?e(S,{value:f,allowClear:!0,mode:["single","gradient"],onOpenChange:i=>{a.current=i,i||(s.current=n(o.stroke))},onChange:i=>{d(i)},onChangeComplete:i=>{let l=i.toCssString();if(l.includes("gradient")){let v=W(l);r.editor?.objectsHandler.update({stroke:v})}else r.editor?.objectsHandler.update({stroke:l})}}):null}),M={FigureFill:D,FigureStroke:R,FigureSettings:H,FigureFilters:w},L=y(({store:r,components:t})=>{let o=r.selectedElements[0],d=C({type:"figure",usedItems:["FigureFill","FigureStroke","FigureSettings","FigureFilters"],components:t});return e(m,{items:d,itemRender:a=>{let s=t[a]||M[a];return s&&e(s,{elements:r.selectedElements,element:o,store:r},a)}})});export{n as a,D as b,H as c,R as d,L as e};
package/dist/config.js CHANGED
@@ -1 +1 @@
1
- import{a,b,c,d}from"./chunk-NX3CGW6Q.js";import"./chunk-7NNOHYKX.js";import"./chunk-O2XFH626.js";export{c as LinePoolItems,d as PathLineLibs,b as PathShapeLibs,a as ShapePathFormulasKeys};
1
+ import{a,b,c,d}from"./chunk-MQZE5LZU.js";import"./chunk-7NNOHYKX.js";import"./chunk-O2XFH626.js";export{c as LinePoolItems,d as PathLineLibs,b as PathShapeLibs,a as ShapePathFormulasKeys};
@@ -1,6 +1,10 @@
1
1
  import { StoreType } from '../model/store.js';
2
+ import 'fabric';
3
+ import 'mobx-state-tree/dist/internal';
2
4
  import 'mobx-state-tree';
3
5
  import '@ydesign/core';
6
+ import '../utils/fonts.js';
7
+ import 'mobx';
4
8
 
5
9
  declare const useDuplicateElement: ({ store }: {
6
10
  store: StoreType;
@@ -1,6 +1,10 @@
1
1
  import { StoreType } from '../model/store.js';
2
+ import 'fabric';
3
+ import 'mobx-state-tree/dist/internal';
2
4
  import 'mobx-state-tree';
3
5
  import '@ydesign/core';
6
+ import '../utils/fonts.js';
7
+ import 'mobx';
4
8
 
5
9
  declare const useLock: ({ store }: {
6
10
  store: StoreType;
@@ -1,6 +1,10 @@
1
1
  import { StoreType } from '../model/store.js';
2
+ import 'fabric';
3
+ import 'mobx-state-tree/dist/internal';
2
4
  import 'mobx-state-tree';
3
5
  import '@ydesign/core';
6
+ import '../utils/fonts.js';
7
+ import 'mobx';
4
8
 
5
9
  declare const useRemoveElement: ({ store }: {
6
10
  store: StoreType;
@@ -1,6 +1,10 @@
1
+ import * as fabric from 'fabric';
2
+ import * as mobx_state_tree_dist_internal from 'mobx-state-tree/dist/internal';
1
3
  import * as mobx_state_tree from 'mobx-state-tree';
2
4
  import { Instance } from 'mobx-state-tree';
3
- import { Editor } from '@ydesign/core';
5
+ import { Editor, FabricObject } from '@ydesign/core';
6
+ import { FONT } from '../utils/fonts.js';
7
+ import 'mobx';
4
8
 
5
9
  interface ExportOptions {
6
10
  multiplier: number;
@@ -13,24 +17,7 @@ interface ExportOptions {
13
17
  height?: number;
14
18
  filter?: (object: any) => boolean;
15
19
  }
16
- interface BaseElement {
17
- id: string;
18
- type: string;
19
- locked?: boolean;
20
- [key: string]: any;
21
- }
22
- type ElementType = (BaseElement & {
23
- type: 'textbox';
24
- text: string;
25
- }) | (BaseElement & {
26
- type: 'image';
27
- src: string;
28
- }) | (BaseElement & {
29
- type: 'group';
30
- objects: ElementsArray;
31
- }) | BaseElement;
32
- type ElementsArray = ElementType[];
33
- declare const forEveryChild: (e: any, callback: (e: ElementType) => boolean | void) => void;
20
+ declare const forEveryChild: (node: any, cb: any) => void;
34
21
  declare const Font: mobx_state_tree.IModelType<{
35
22
  fontFamily: mobx_state_tree.ISimpleType<string>;
36
23
  name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -64,6 +51,7 @@ declare const Store: mobx_state_tree.IModelType<{
64
51
  rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
65
52
  openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
66
53
  selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
54
+ backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
67
55
  fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
68
56
  fontFamily: mobx_state_tree.ISimpleType<string>;
69
57
  name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -79,32 +67,39 @@ declare const Store: mobx_state_tree.IModelType<{
79
67
  }>, mobx_state_tree._NotCustomized>>;
80
68
  editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
81
69
  custom: mobx_state_tree.IType<any, any, any>;
82
- objects: mobx_state_tree.IType<any, any, any>;
70
+ objects: mobx_state_tree.IType<any[] | null | undefined, any[], any[]>;
83
71
  _key: mobx_state_tree.IType<string | undefined, string, string>;
84
72
  _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
85
73
  _updateHistory: mobx_state_tree.IType<number | undefined, number, number>;
86
74
  _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
87
75
  }, {
88
- readonly selectedElements: ElementType[];
76
+ readonly selectedElements: FabricObject[];
89
77
  } & {
90
- readonly selectedShapes: ElementType[];
78
+ readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
79
+ find(callback: (e: any) => boolean): any;
80
+ getElementById(): void;
91
81
  } & {
92
82
  _setEditor(editor: Editor): void;
93
83
  _triggerUpdate(): void;
94
84
  _historyUpdate(): void;
95
85
  _fontSizeUpdate(): void;
96
86
  } & {
87
+ set(e: FabricObject, options: any): void;
88
+ setUnit({ unit, dpi }: {
89
+ unit: any;
90
+ dpi: any;
91
+ }): void;
97
92
  setObjects(objects: any): void;
98
93
  selectElements(ids: string[]): void;
99
94
  openSidePanel(t: string): void;
100
95
  deleteElements(ids: string[]): void;
101
96
  setScale(scale: number): void;
102
97
  clone(): void;
103
- addElement(): void;
104
- setSize({ width, height, isClear }: {
98
+ addElement(options: any): void;
99
+ setSize({ width, height, useMagic }: {
105
100
  width: number;
106
101
  height: number;
107
- isClear?: boolean;
102
+ useMagic?: boolean;
108
103
  }): void;
109
104
  setupEditorListeners(): void;
110
105
  } & {
@@ -131,8 +126,8 @@ declare const Store: mobx_state_tree.IModelType<{
131
126
  loadJSON: (data: any) => Promise<void>;
132
127
  clear(): void;
133
128
  } & {
134
- addFont(): void;
135
- removeFont(): void;
129
+ removeFont(fontFamily: string): void;
130
+ addFont(font: FONT): void;
136
131
  /**
137
132
  * 加载字体(注入 CSS 并等待字体可用)
138
133
  * @param fontFamily - 字体名称
@@ -156,6 +151,7 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
156
151
  rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
157
152
  openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
158
153
  selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
154
+ backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
159
155
  fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
160
156
  fontFamily: mobx_state_tree.ISimpleType<string>;
161
157
  name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -171,32 +167,39 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
171
167
  }>, mobx_state_tree._NotCustomized>>;
172
168
  editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
173
169
  custom: mobx_state_tree.IType<any, any, any>;
174
- objects: mobx_state_tree.IType<any, any, any>;
170
+ objects: mobx_state_tree.IType<any[] | null | undefined, any[], any[]>;
175
171
  _key: mobx_state_tree.IType<string | undefined, string, string>;
176
172
  _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
177
173
  _updateHistory: mobx_state_tree.IType<number | undefined, number, number>;
178
174
  _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
179
175
  }> & {
180
- readonly selectedElements: ElementType[];
176
+ readonly selectedElements: FabricObject[];
181
177
  } & {
182
- readonly selectedShapes: ElementType[];
178
+ readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
179
+ find(callback: (e: any) => boolean): any;
180
+ getElementById(): void;
183
181
  } & {
184
182
  _setEditor(editor: Editor): void;
185
183
  _triggerUpdate(): void;
186
184
  _historyUpdate(): void;
187
185
  _fontSizeUpdate(): void;
188
186
  } & {
187
+ set(e: FabricObject, options: any): void;
188
+ setUnit({ unit, dpi }: {
189
+ unit: any;
190
+ dpi: any;
191
+ }): void;
189
192
  setObjects(objects: any): void;
190
193
  selectElements(ids: string[]): void;
191
194
  openSidePanel(t: string): void;
192
195
  deleteElements(ids: string[]): void;
193
196
  setScale(scale: number): void;
194
197
  clone(): void;
195
- addElement(): void;
196
- setSize({ width, height, isClear }: {
198
+ addElement(options: any): void;
199
+ setSize({ width, height, useMagic }: {
197
200
  width: number;
198
201
  height: number;
199
- isClear?: boolean;
202
+ useMagic?: boolean;
200
203
  }): void;
201
204
  setupEditorListeners(): void;
202
205
  } & {
@@ -223,8 +226,8 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
223
226
  loadJSON: (data: any) => Promise<void>;
224
227
  clear(): void;
225
228
  } & {
226
- addFont(): void;
227
- removeFont(): void;
229
+ removeFont(fontFamily: string): void;
230
+ addFont(font: FONT): void;
228
231
  /**
229
232
  * 加载字体(注入 CSS 并等待字体可用)
230
233
  * @param fontFamily - 字体名称
@@ -243,6 +246,7 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
243
246
  rulesVisible: mobx_state_tree.IType<boolean | undefined, boolean, boolean>;
244
247
  openedSidePanel: mobx_state_tree.IType<string | undefined, string, string>;
245
248
  selectedElementsIds: mobx_state_tree.IArrayType<mobx_state_tree.ISimpleType<string>>;
249
+ backgroundColor: mobx_state_tree.IOptionalIType<mobx_state_tree_dist_internal.IUnionType<[mobx_state_tree.ISimpleType<string>, mobx_state_tree.IType<Record<string, any>, Record<string, any>, Record<string, any>>]>, [undefined]>;
246
250
  fonts: mobx_state_tree.IArrayType<mobx_state_tree.IModelType<{
247
251
  fontFamily: mobx_state_tree.ISimpleType<string>;
248
252
  name: mobx_state_tree.IOptionalIType<mobx_state_tree.ISimpleType<string>, [undefined]>;
@@ -258,32 +262,39 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
258
262
  }>, mobx_state_tree._NotCustomized>>;
259
263
  editor: mobx_state_tree.IType<Editor | null | undefined, Editor | null, Editor | null>;
260
264
  custom: mobx_state_tree.IType<any, any, any>;
261
- objects: mobx_state_tree.IType<any, any, any>;
265
+ objects: mobx_state_tree.IType<any[] | null | undefined, any[], any[]>;
262
266
  _key: mobx_state_tree.IType<string | undefined, string, string>;
263
267
  _updateTrigger: mobx_state_tree.IType<number | undefined, number, number>;
264
268
  _updateHistory: mobx_state_tree.IType<number | undefined, number, number>;
265
269
  _updateFontSize: mobx_state_tree.IType<number | undefined, number, number>;
266
270
  }, {
267
- readonly selectedElements: ElementType[];
271
+ readonly selectedElements: FabricObject[];
268
272
  } & {
269
- readonly selectedShapes: ElementType[];
273
+ readonly selectedShapes: FabricObject<Partial<fabric.FabricObjectProps>, fabric.SerializedObjectProps, fabric.ObjectEvents>[];
274
+ find(callback: (e: any) => boolean): any;
275
+ getElementById(): void;
270
276
  } & {
271
277
  _setEditor(editor: Editor): void;
272
278
  _triggerUpdate(): void;
273
279
  _historyUpdate(): void;
274
280
  _fontSizeUpdate(): void;
275
281
  } & {
282
+ set(e: FabricObject, options: any): void;
283
+ setUnit({ unit, dpi }: {
284
+ unit: any;
285
+ dpi: any;
286
+ }): void;
276
287
  setObjects(objects: any): void;
277
288
  selectElements(ids: string[]): void;
278
289
  openSidePanel(t: string): void;
279
290
  deleteElements(ids: string[]): void;
280
291
  setScale(scale: number): void;
281
292
  clone(): void;
282
- addElement(): void;
283
- setSize({ width, height, isClear }: {
293
+ addElement(options: any): void;
294
+ setSize({ width, height, useMagic }: {
284
295
  width: number;
285
296
  height: number;
286
- isClear?: boolean;
297
+ useMagic?: boolean;
287
298
  }): void;
288
299
  setupEditorListeners(): void;
289
300
  } & {
@@ -310,8 +321,8 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
310
321
  loadJSON: (data: any) => Promise<void>;
311
322
  clear(): void;
312
323
  } & {
313
- addFont(): void;
314
- removeFont(): void;
324
+ removeFont(fontFamily: string): void;
325
+ addFont(font: FONT): void;
315
326
  /**
316
327
  * 加载字体(注入 CSS 并等待字体可用)
317
328
  * @param fontFamily - 字体名称
@@ -319,4 +330,4 @@ declare function createStore({ key }: StoreProps): mobx_state_tree.ModelInstance
319
330
  loadFont(fontFamily: string): Promise<void[]>;
320
331
  }, mobx_state_tree._NotCustomized, mobx_state_tree._NotCustomized>>;
321
332
 
322
- export { type BaseElement, type ElementType, type ElementsArray, type ExportOptions, Font, Store, type StoreProps, type StoreType, createStore, createStore as default, forEveryChild };
333
+ export { type ExportOptions, Font, Store, type StoreProps, type StoreType, createStore, createStore as default, forEveryChild };
@@ -1 +1 @@
1
- import{a as g}from"../chunk-P5I43V7X.js";import{a as c,h as l,i as p,m}from"../chunk-WJT6VPDR.js";import"../chunk-O2XFH626.js";import{types as i,cast as u,flow as E}from"mobx-state-tree";var y=(e,t)=>{if(e?.objects)for(let r of e.objects){if(t(r)===!0)break;y(r,t)}},f=i.model("Font",{fontFamily:i.string,name:i.optional(i.string,""),url:i.optional(i.string,""),img:i.optional(i.string,""),styles:i.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name})),b=i.model("Store",{name:"yitu-design",width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,bleed:0,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:i.array(i.string),fonts:i.array(f),editor:i.frozen(null),custom:i.frozen(),objects:i.frozen(),_key:"",_updateTrigger:0,_updateHistory:0,_updateFontSize:0}).views(e=>({get selectedElements(){let t=e._updateTrigger;return console.log("_trigger\u90FD\u53D8\u5316\u662F\u89E6\u53D1\u805A\u7126\u5143\u7D20\u7684\u5237\u65B0 ---> ",t,e.selectedElementsIds.toJSON()),e.selectedElementsIds.map(r=>e.editor?.objectsHandler.findOneById(r))}})).views(e=>({get selectedShapes(){let t=[];return y({objects:e.selectedElements},r=>{r?.type!=="group"&&t.push(r)}),t}})).actions(e=>({_setEditor(t){e.editor=t},_triggerUpdate(){e._updateTrigger=e._updateTrigger+1},_historyUpdate(){e._updateHistory=e._updateHistory+1},_fontSizeUpdate(){e._updateFontSize=e._updateFontSize+1}})).actions(e=>({setObjects(t){e.objects=t},selectElements(t){e.selectedElementsIds=u(t)},openSidePanel(t){e.openedSidePanel!==t&&(e.openedSidePanel=t)},deleteElements(t){t.forEach(r=>{e.editor?.objectsHandler.remove(r)})},setScale(t){e.scale=t},clone(){e.editor?.objectsHandler.clone()},addElement(){},setSize({width:t,height:r,isClear:a}){e.width=t,e.height=r,e.editor?.workareaHandler.setSize({width:t,height:r,isClear:a})},setupEditorListeners(){e.editor&&(e.editor.on("object:modified",()=>{e._triggerUpdate()}),e.editor.on("history:change",()=>{e._historyUpdate()}),e.editor.on("textbox:modified",()=>{e._fontSizeUpdate()}))}})).actions(e=>({_forEachElementUp(t,r){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(n=>({id:n,index:a.findIndex(d=>d.id===n)}));o.sort((n,d)=>d.index-n.index);for(let{index:n}of o){if(n==-1)continue;let d=n<a.length-1&&a[n+1],s=t.indexOf(d?.id)>=0;n===a.length-1||s||r(n)}},_forEachElementDown(t,r){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(n=>({id:n,index:a.findIndex(d=>d.id===n)}));o.sort((n,d)=>d.index-n.index);for(let{index:n}of o){if(n==-1)continue;let d=n>0&&a[n-1],s=t.indexOf(d?.id)>=0;n===0||s||r(n)}return!1}})).actions(e=>({canMoveElementsUp(t){let r=!1;return e._forEachElementUp(t,()=>{r=!0}),r},moveElementsUp(t){if(!e.editor)return;let r=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:r.findIndex(n=>n.id===o)})).filter(o=>o.index!==-1).sort((o,n)=>n.index-o.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.bringForward(o)}),e._triggerUpdate()},canMoveElementsTop(t){return this.canMoveElementsUp(t)},moveElementsTop(t){e.editor&&(t.forEach(r=>{e.editor?.layerHandler.bringToFront(r)}),e._triggerUpdate())},canMoveElementsDown(t){let r=!1;return e._forEachElementDown(t,()=>{r=!0}),r},moveElementsDown(t){if(!e.editor)return;let r=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:r.findIndex(n=>n.id===o)})).filter(o=>o.index!==-1).sort((o,n)=>o.index-n.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.sendBackwards(o)}),e._triggerUpdate()},canMoveElementsBottom(t){return this.canMoveElementsDown(t)},moveElementsBottom(t){e.editor&&(t.forEach(r=>{e.editor?.layerHandler.sendToBack(r)}),e._triggerUpdate())},setElementZIndex(){}})).actions(e=>({async toDataURL(t){return e.editor?.rendererHandler.toDataURL(t)},async toBlob(t){return e.editor?.rendererHandler.toBlob(t)},async saveAsImage(t){if(!e.editor)return;let{fileName:r,...a}=t||{multiplier:1},o=await e.editor.rendererHandler.toBlob(a);o&&g(o,r||"yitu."+a.format)},toJSON(){return e.editor?.rendererHandler.toJSON()},toObject(){return e.editor?.rendererHandler.toObject()},loadJSON:E(function*(t){if(!e.editor)return;let r=yield e.editor.sceneHandler.importFromJSON(t);r&&(e.width=r.width,e.height=r.height)}),clear(){}})).actions(e=>({addFont(){},removeFont(){},async loadFont(t){let r=e.fonts.find(n=>n.fontFamily===t)||c.find(n=>n.fontFamily===t),o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return r?(r.styles&&(o=r.styles.map(n=>({fontStyle:n.fontStyle||"normal",fontWeight:n.fontWeight||"normal"}))),p(r)):m(t),Promise.all(o.map(n=>l(t,n.fontStyle,n.fontWeight)))}}));function h({key:e}){return b.create({_key:e})}var j=h;export{f as Font,b as Store,h as createStore,j as default,y as forEveryChild};
1
+ import{a as u}from"../chunk-P5I43V7X.js";import{a as l,h as p,i as m,m as g}from"../chunk-WJT6VPDR.js";import"../chunk-O2XFH626.js";import{types as i,cast as y,flow as b,destroy as f}from"mobx-state-tree";var c=(e,t)=>{if(e?.objects)for(let r of e.objects){if(t(r)===!0)break;c(r,t)}},E=i.model("Font",{fontFamily:i.string,name:i.optional(i.string,""),url:i.optional(i.string,""),img:i.optional(i.string,""),styles:i.frozen()}).preProcessSnapshot(e=>Object.assign(Object.assign({},e),{fontFamily:e.fontFamily||e.name})),h=i.model("Store",{name:"yitu-design",width:1080,height:1080,scale:1,scaleToFit:1,unit:"px",dpi:72,bleed:0,bleedVisible:!1,rulesVisible:!1,openedSidePanel:"",selectedElementsIds:i.array(i.string),backgroundColor:i.optional(i.union(i.string,i.frozen()),"#fff"),fonts:i.array(E),editor:i.frozen(null),custom:i.frozen(),objects:i.frozen([]),_key:"",_updateTrigger:0,_updateHistory:0,_updateFontSize:0}).views(e=>({get selectedElements(){let t=e._updateTrigger;return console.log("_trigger\u90FD\u53D8\u5316\u662F\u89E6\u53D1\u805A\u7126\u5143\u7D20\u7684\u5237\u65B0 ---> ",t,e.selectedElementsIds.toJSON()),e.selectedElementsIds.map(r=>e.editor?.objectsHandler.findOneById(r))}})).views(e=>({get selectedShapes(){let t=[];return c({objects:e.selectedElements},r=>{r?.type!=="group"&&t.push(r)}),t},find(t){let r,a=e.editor?.customCanvas.canvas.getObjects();if(a)return c({objects:a},o=>{if(!r&&t(o))return r=o,!0}),r},getElementById(){}})).actions(e=>({_setEditor(t){e.editor=t},_triggerUpdate(){e._updateTrigger=e._updateTrigger+1},_historyUpdate(){e._updateHistory=e._updateHistory+1},_fontSizeUpdate(){e._updateFontSize=e._updateFontSize+1}})).actions(e=>({set(t,r){e.editor?.objectsHandler.update(r,t.id)},setUnit({unit:t,dpi:r}){e.unit=t||e.unit,e.dpi=r||e.dpi},setObjects(t){e.objects=t},selectElements(t){e.selectedElementsIds=y(t)},openSidePanel(t){e.openedSidePanel!==t&&(e.openedSidePanel=t)},deleteElements(t){t.forEach(r=>{e.editor?.objectsHandler.remove(r)})},setScale(t){e.scale=t},clone(){e.editor?.objectsHandler.clone()},addElement(t){console.log("\u6DFB\u52A0json\u6570\u636E",t),e.editor?.objectsHandler.addJson(t)},setSize({width:t,height:r,useMagic:a}){console.log("\u8BBE\u7F6E\u753B\u5E03\u5C3A\u5BF8: ---> ",t,r,a),e.width=t,e.height=r,e.editor?.workareaHandler.setSize({width:t,height:r})},setupEditorListeners(){e.editor&&(e.editor.on("object:modified",()=>{e._triggerUpdate()}),e.editor.on("history:change",()=>{e._historyUpdate()}),e.editor.on("textbox:modified",()=>{e._fontSizeUpdate()}))}})).actions(e=>({_forEachElementUp(t,r){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(n=>({id:n,index:a.findIndex(d=>d.id===n)}));o.sort((n,d)=>d.index-n.index);for(let{index:n}of o){if(n==-1)continue;let d=n<a.length-1&&a[n+1],s=t.indexOf(d?.id)>=0;n===a.length-1||s||r(n)}},_forEachElementDown(t,r){if(!e.editor)return;let a=e.editor.layerHandler.getEffectiveLayers(),o=t.map(n=>({id:n,index:a.findIndex(d=>d.id===n)}));o.sort((n,d)=>d.index-n.index);for(let{index:n}of o){if(n==-1)continue;let d=n>0&&a[n-1],s=t.indexOf(d?.id)>=0;n===0||s||r(n)}return!1}})).actions(e=>({canMoveElementsUp(t){let r=!1;return e._forEachElementUp(t,()=>{r=!0}),r},moveElementsUp(t){if(!e.editor)return;let r=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:r.findIndex(n=>n.id===o)})).filter(o=>o.index!==-1).sort((o,n)=>n.index-o.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.bringForward(o)}),e._triggerUpdate()},canMoveElementsTop(t){return this.canMoveElementsUp(t)},moveElementsTop(t){e.editor&&(t.forEach(r=>{e.editor?.layerHandler.bringToFront(r)}),e._triggerUpdate())},canMoveElementsDown(t){let r=!1;return e._forEachElementDown(t,()=>{r=!0}),r},moveElementsDown(t){if(!e.editor)return;let r=e.editor.layerHandler.getEffectiveLayers();[...t].map(o=>({id:o,index:r.findIndex(n=>n.id===o)})).filter(o=>o.index!==-1).sort((o,n)=>o.index-n.index).map(o=>o.id).forEach(o=>{e.editor?.layerHandler.sendBackwards(o)}),e._triggerUpdate()},canMoveElementsBottom(t){return this.canMoveElementsDown(t)},moveElementsBottom(t){e.editor&&(t.forEach(r=>{e.editor?.layerHandler.sendToBack(r)}),e._triggerUpdate())},setElementZIndex(){}})).actions(e=>({async toDataURL(t){return e.editor?.rendererHandler.toDataURL(t)},async toBlob(t){return e.editor?.rendererHandler.toBlob(t)},async saveAsImage(t){if(!e.editor)return;let{fileName:r,...a}=t||{multiplier:1},o=await e.editor.rendererHandler.toBlob(a);o&&u(o,r||"yitu."+a.format)},toJSON(){return e.editor?.rendererHandler.toJSON()},toObject(){return e.editor?.rendererHandler.toObject()},loadJSON:b(function*(t){if(!e.editor)return;let r=yield e.editor.sceneHandler.importFromJSON(t);r&&(e.width=r.width,e.height=r.height,e.backgroundColor=r.fill)}),clear(){}})).actions(e=>({removeFont(t){e.fonts.filter(r=>r.fontFamily===t).forEach(r=>{f(r)})},addFont(t){this.removeFont(t.fontFamily),e.fonts.push(t),this.loadFont(t.fontFamily)},async loadFont(t){let r=e.fonts.find(n=>n.fontFamily===t)||l.find(n=>n.fontFamily===t),o=[{fontStyle:"normal",fontWeight:"normal"},{fontStyle:"normal",fontWeight:"bold"}];return r?(r.styles&&(o=r.styles.map(n=>({fontStyle:n.fontStyle||"normal",fontWeight:n.fontWeight||"normal"}))),m(r)):g(t),Promise.all(o.map(n=>p(t,n.fontStyle,n.fontWeight)))}}));function x({key:e}){return h.create({_key:e})}var v=x;export{E as Font,h as Store,x as createStore,v as default,c as forEveryChild};
package/dist/project.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import * as react from 'react';
2
2
  import { StoreType } from './model/store.js';
3
3
  import { FONT } from './utils/fonts.js';
4
+ import 'fabric';
5
+ import 'mobx-state-tree/dist/internal';
4
6
  import 'mobx-state-tree';
5
7
  import '@ydesign/core';
6
8
  import 'mobx';
@@ -1,10 +1,17 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { StoreType } from '../model/store.js';
3
+ import 'fabric';
4
+ import 'mobx-state-tree/dist/internal';
3
5
  import 'mobx-state-tree';
4
6
  import '@ydesign/core';
7
+ import '../utils/fonts.js';
8
+ import 'mobx';
5
9
 
6
- declare const BackgroundPanel: ({ store }: {
10
+ declare const setBackgroundColorsPreset: (newColors: string[]) => void;
11
+ declare const BackgroundPanel: (({ store }: {
7
12
  store: StoreType;
8
- }) => react_jsx_runtime.JSX.Element;
13
+ }) => react_jsx_runtime.JSX.Element) & {
14
+ displayName: string;
15
+ };
9
16
 
10
- export { BackgroundPanel };
17
+ export { BackgroundPanel, setBackgroundColorsPreset };
@@ -1 +1 @@
1
- import{a}from"../chunk-TX4BNXQC.js";import"../chunk-O2XFH626.js";export{a as BackgroundPanel};
1
+ import{a,b}from"../chunk-WGX437MN.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{b as BackgroundPanel,a as setBackgroundColorsPreset};
@@ -16,9 +16,10 @@ type Props<ImageType> = {
16
16
  crossOrigin?: string;
17
17
  shadowEnabled?: boolean;
18
18
  itemHeight?: number;
19
+ spacing?: number;
19
20
  error?: any;
20
21
  hideNoResults?: boolean;
21
22
  };
22
- declare const ImagesGrid: <ImageType>({ images, rowsNumber, isLoading, getPreview, getCredit, getImageClassName, onSelect, crossOrigin, shadowEnabled, itemHeight, error, hideNoResults, }: Props<ImageType>) => react_jsx_runtime.JSX.Element;
23
+ declare const ImagesGrid: <ImageType>({ images, rowsNumber, isLoading, getPreview, getCredit, getImageClassName, onSelect, crossOrigin, shadowEnabled, itemHeight, error, hideNoResults, spacing, }: Props<ImageType>) => react_jsx_runtime.JSX.Element;
23
24
 
24
25
  export { ImagesGrid };
@@ -1,41 +1 @@
1
- import{c as w}from"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";import a from"styled-components";import{useRef as v,useEffect as O}from"react";import{Spin as $}from"antd";import{jsx as o,jsxs as u}from"react/jsx-runtime";var D=a.div`
2
- height: 100%;
3
- overflow: auto;
4
- `,W=a.div`
5
- width: 33%;
6
- float: left;
7
- `,j=a.div`
8
- padding: 6px;
9
- width: 100%;
10
- &:hover .credit {
11
- opacity: 1;
12
- }
13
- ${w(".credit {opacity: 1;}")}
14
- `,P=a.div`
15
- border-radius: 5px;
16
- position: relative;
17
- overflow: hidden;
18
- box-shadow: ${e=>e.$dataShadowenabled?"0 0 5px rgba(16, 22, 26, 0.3)":""};
19
- `,z=a.img`
20
- width: 100%;
21
- cursor: pointer;
22
- display: block;
23
- max-height: 300px;
24
- min-height: 50px;
25
- object-fit: contain;
26
- `,F=a.div`
27
- position: absolute;
28
- bottom: 0px;
29
- left: 0px;
30
- font-size: 10px;
31
- padding: 3px;
32
- padding-top: 10px;
33
- text-align: center;
34
- background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
35
- width: 100%;
36
- opacity: 0;
37
- color: white;
38
- `,I=a.p`
39
- text-align: center;
40
- padding: 30px;
41
- `,H=({url:e,onSelect:d,shadowEnabled:i,className:g,itemHeight:r,crossOrigin:s,onLoad:m,credit:l})=>o(j,{className:"ydesign-close-panel",onClick:d,children:u(P,{$dataShadowenabled:i,children:[o(z,{className:g,style:{height:r??"auto "},src:e,draggable:!0,loading:"lazy",crossOrigin:s,onLoad:m}),l&&o(F,{className:"credit",children:l})]})}),B=({images:e,rowsNumber:d,isLoading:i,getPreview:g,getCredit:r,getImageClassName:s,onSelect:m,crossOrigin:l="anonymous",shadowEnabled:x,itemHeight:N,error:b,hideNoResults:S=!1})=>{let p=d||2,T=v(null),y=[];for(let t=0;t<p;t++)y.push((e||[]).filter((h,n)=>n%p===t));let c=v(null),f=()=>{},R=()=>{f()};return O(()=>(f(),()=>{c.current&&(window.clearTimeout(c.current),c.current=null)}),[e?.length,i]),u(D,{ref:T,onScroll:t=>{console.log(t)},children:[y.map((t,h)=>u(W,{style:{width:100/p+"%"},children:[t.map((n,C)=>o(H,{image:n,url:g(n),onSelect:(L,k,E)=>{m(n,L,k,E)},credit:r&&r(n),crossOrigin:l,shadowEnabled:x,itemHeight:N,className:s&&s(n),onLoad:R},C)),i&&o("div",{style:{padding:30},children:o($,{})})]},h)),!i&&(!e||!e.length)&&!b&&!S&&o(I,{children:"No results found"}),b&&o(I,{children:"Loading is failed..."})]})};export{B as ImagesGrid};
1
+ import{a}from"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-O2XFH626.js";export{a as ImagesGrid};
@@ -1,6 +1,10 @@
1
1
  export { BackgroundSection, DEFAULT_SECTIONS, LayersSection, PhotosSection, Section, ShapesSection, default as SidePanel, SizeSection, TemplatesSection, TextSection, UploadSection } from './side-panel.js';
2
2
  export { SectionTab } from './tab-button.js';
3
3
  import '../model/store.js';
4
+ import 'fabric';
5
+ import 'mobx-state-tree/dist/internal';
4
6
  import 'mobx-state-tree';
5
7
  import '@ydesign/core';
8
+ import '../utils/fonts.js';
9
+ import 'mobx';
6
10
  import 'react/jsx-runtime';
@@ -1 +1 @@
1
- import{a as r,b as e,c as f,d as m,e as p,f as t,g as x,h as a,i as b,j as c}from"../chunk-LHQI6WDJ.js";import"../chunk-MCBL6QAP.js";import"../chunk-WIM26GEM.js";import{a as o}from"../chunk-LW2W4B2N.js";import"../chunk-QJBRJELT.js";import"../chunk-6LFGFFHI.js";import"../chunk-DBQHEZPG.js";import"../chunk-MXZ6RXT3.js";import"../chunk-TX4BNXQC.js";import"../chunk-WCHGSVUC.js";import"../chunk-M33EDDXB.js";import"../chunk-DJBTBRPS.js";import"../chunk-NX3CGW6Q.js";import"../chunk-7NNOHYKX.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
+ import{a as r,b as e,c as f,d as m,e as p,f as t,g as x,h as a,i as b,j as c}from"../chunk-XK24AOVW.js";import"../chunk-XM3RPIUS.js";import"../chunk-Q2L6VKFI.js";import"../chunk-5C2MNUBC.js";import{a as o}from"../chunk-VXTF2OL2.js";import"../chunk-OV74NBJ5.js";import"../chunk-CMH73CYQ.js";import"../chunk-DBQHEZPG.js";import"../chunk-MXZ6RXT3.js";import"../chunk-WGX437MN.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-AGNRQAPA.js";import"../chunk-4LUZF4CB.js";import"../chunk-DJBTBRPS.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.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,10 +1,16 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { StoreType } from '../model/store.js';
3
+ import 'fabric';
4
+ import 'mobx-state-tree/dist/internal';
3
5
  import 'mobx-state-tree';
4
6
  import '@ydesign/core';
7
+ import '../utils/fonts.js';
8
+ import 'mobx';
5
9
 
6
- declare const LayersPanel: ({ store }: {
10
+ declare const LayersPanel: (({ store }: {
7
11
  store: StoreType;
8
- }) => react_jsx_runtime.JSX.Element;
12
+ }) => react_jsx_runtime.JSX.Element) & {
13
+ displayName: string;
14
+ };
9
15
 
10
16
  export { LayersPanel };
@@ -1 +1 @@
1
- import{a}from"../chunk-M33EDDXB.js";import"../chunk-O2XFH626.js";export{a as LayersPanel};
1
+ import{a}from"../chunk-AGNRQAPA.js";import"../chunk-4LUZF4CB.js";import"../chunk-O2XFH626.js";export{a as LayersPanel};
@@ -1,7 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { StoreType } from '../model/store.js';
3
+ import 'fabric';
4
+ import 'mobx-state-tree/dist/internal';
3
5
  import 'mobx-state-tree';
4
6
  import '@ydesign/core';
7
+ import '../utils/fonts.js';
8
+ import 'mobx';
5
9
 
6
10
  declare const PhotosPanel: ({ store }: {
7
11
  store: StoreType;
@@ -1,7 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { StoreType } from '../model/store.js';
3
+ import 'fabric';
4
+ import 'mobx-state-tree/dist/internal';
3
5
  import 'mobx-state-tree';
4
6
  import '@ydesign/core';
7
+ import '../utils/fonts.js';
8
+ import 'mobx';
5
9
 
6
10
  declare const ShapesPanel: ({ store }: {
7
11
  store: StoreType;
@@ -1 +1 @@
1
- import{a}from"../chunk-MCBL6QAP.js";import"../chunk-MXZ6RXT3.js";import"../chunk-NX3CGW6Q.js";import"../chunk-7NNOHYKX.js";import"../chunk-O2XFH626.js";export{a as ShapesPanel};
1
+ import{a}from"../chunk-XM3RPIUS.js";import"../chunk-MXZ6RXT3.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.js";import"../chunk-O2XFH626.js";export{a as ShapesPanel};
@@ -1,7 +1,11 @@
1
1
  import { StoreType } from '../model/store.js';
2
2
  export { SectionTab } from './tab-button.js';
3
+ import 'fabric';
4
+ import 'mobx-state-tree/dist/internal';
3
5
  import 'mobx-state-tree';
4
6
  import '@ydesign/core';
7
+ import '../utils/fonts.js';
8
+ import 'mobx';
5
9
  import 'react/jsx-runtime';
6
10
 
7
11
  interface SectionTabProps {
@@ -1 +1 @@
1
- import{a as b,b as c,c as d,d as e,e as f,f as g,g as h,h as i,i as j,j as k,k as l}from"../chunk-LHQI6WDJ.js";import"../chunk-MCBL6QAP.js";import"../chunk-WIM26GEM.js";import{a}from"../chunk-LW2W4B2N.js";import"../chunk-QJBRJELT.js";import"../chunk-6LFGFFHI.js";import"../chunk-DBQHEZPG.js";import"../chunk-MXZ6RXT3.js";import"../chunk-TX4BNXQC.js";import"../chunk-WCHGSVUC.js";import"../chunk-M33EDDXB.js";import"../chunk-DJBTBRPS.js";import"../chunk-NX3CGW6Q.js";import"../chunk-7NNOHYKX.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};
1
+ import{a as b,b as c,c as d,d as e,e as f,f as g,g as h,h as i,i as j,j as k,k as l}from"../chunk-XK24AOVW.js";import"../chunk-XM3RPIUS.js";import"../chunk-Q2L6VKFI.js";import"../chunk-5C2MNUBC.js";import{a}from"../chunk-VXTF2OL2.js";import"../chunk-OV74NBJ5.js";import"../chunk-CMH73CYQ.js";import"../chunk-DBQHEZPG.js";import"../chunk-MXZ6RXT3.js";import"../chunk-WGX437MN.js";import"../chunk-APQPKBER.js";import"../chunk-OQ6HU62L.js";import"../chunk-YRJUN267.js";import"../chunk-RVXI723F.js";import"../chunk-IQ7O55C5.js";import"../chunk-WCHGSVUC.js";import"../chunk-AGNRQAPA.js";import"../chunk-4LUZF4CB.js";import"../chunk-DJBTBRPS.js";import"../chunk-MQZE5LZU.js";import"../chunk-7NNOHYKX.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};
@@ -1,10 +1,16 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { StoreType } from '../model/store.js';
3
+ import 'fabric';
4
+ import 'mobx-state-tree/dist/internal';
3
5
  import 'mobx-state-tree';
4
6
  import '@ydesign/core';
7
+ import '../utils/fonts.js';
8
+ import 'mobx';
5
9
 
6
- declare const SizePanel: ({ store }: {
10
+ declare const SizePanel: (({ store }: {
7
11
  store: StoreType;
8
- }) => react_jsx_runtime.JSX.Element;
12
+ }) => react_jsx_runtime.JSX.Element) & {
13
+ displayName: string;
14
+ };
9
15
 
10
16
  export { SizePanel };
@@ -1 +1 @@
1
- import{a}from"../chunk-WIM26GEM.js";import"../chunk-O2XFH626.js";export{a as SizePanel};
1
+ import{a}from"../chunk-Q2L6VKFI.js";import"../chunk-5C2MNUBC.js";import"../chunk-O2XFH626.js";export{a as SizePanel};