image-beautifier 1.0.1 → 1.0.3

package/lib/style.css

@@ -0,0 +1,9 @@
+/*!
+ * Cropper.js v1.6.2
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2024-04-21T07:43:02.731Z
+ */.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cropper-container img{backface-visibility:hidden;display:block;height:100%;image-orientation:0deg;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-wrap-box,.cropper-canvas,.cropper-drag-box,.cropper-crop-box,.cropper-modal{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-wrap-box,.cropper-canvas{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:#3399ffbf;overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:calc(100% / 3);left:0;top:calc(100% / 3);width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:calc(100% / 3);top:0;width:calc(100% / 3)}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:before,.cropper-center:after{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width: 768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width: 992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width: 1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}@layer tailwind-base,antd;@layer tailwind-base{*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}#shoteasy-container,.shoteasy-components{--c-wb: #c2c2c2;--c-wc: #fcfcfc;--c-bg: #fbfbfb;--c-br: #cecece;--c-se: #1900ff94;--c-scroll: #d9d9d9;--c-scroll-hover: #bbbbbb}#shoteasy-container[data-mode=dark],.shoteasy-components.dark-mode,.shoteasy-components [data-mode=dark]{--c-wb: #444;--c-wc: #222;--c-bg: #2b2b2b;--c-br: #5e5e5e;--c-se: #5947fc;--c-scroll: #464646;--c-scroll-hover: #595858}#shoteasy-container ::-webkit-scrollbar,.shoteasy-components ::-webkit-scrollbar{height:.375rem;width:.375rem}#shoteasy-container ::-webkit-scrollbar-thumb,.shoteasy-components ::-webkit-scrollbar-thumb{border-radius:.375rem;background-color:var(--c-scroll)}#shoteasy-container ::-webkit-scrollbar-thumb:hover,.shoteasy-components ::-webkit-scrollbar-thumb:hover{background-color:var(--c-scroll-hover)}#shoteasy-container ::-webkit-scrollbar-track,.shoteasy-components ::-webkit-scrollbar-track{background-color:var(--c-bg)}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}@media (min-width: 1400px){.container{max-width:1400px}}.polka{background-image:radial-gradient(var(--c-wb) .7px,var(--c-wc) 1px);background-size:14px 14px}.ant-radio-wrapper-checked .h-8{box-shadow:0 0 0 1px #fff,0 0 0 3px var(--c-se)}.position-block{position:relative}.ant-radio-wrapper-checked .position-block:after{content:var(--tw-content);box-shadow:0 0 0 1px #fff,0 0 0 3px var(--c-se)}.position-block:after{position:absolute;z-index:10;display:block;height:2rem;width:2rem;border-radius:.375rem;border-width:1px;--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity));content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.position-block.top-left:after{top:0;content:var(--tw-content);left:0}.position-block.top:after{top:0;content:var(--tw-content);left:2rem}.position-block.top-right:after{top:0;content:var(--tw-content);right:0}.position-block.right:after{top:2rem;content:var(--tw-content);right:0}.position-block.bottom-right:after{bottom:0;content:var(--tw-content);right:0}.position-block.bottom:after{bottom:0;content:var(--tw-content);left:2rem}.position-block.bottom-left:after{bottom:0;content:var(--tw-content);left:0}.position-block.left:after{top:2rem;content:var(--tw-content);left:0}.position-block.center:after{top:2rem;content:var(--tw-content);left:2rem}.bg-transparent{background-image:linear-gradient(45deg,rgba(0,0,0,.4) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.4) 75%),linear-gradient(45deg,rgba(0,0,0,.4) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.4) 75%);background-position:0 0,5px 5px;background-size:10px 10px}@keyframes shake{0%{transform:translate(0)}25%{transform:translate(.5rem)}75%{transform:translate(-.5rem)}to{transform:translate(0)}}.invalid{animation:shake .2s ease-in-out 0s 2}.absolute{position:absolute}.relative{position:relative}.bottom-4{bottom:1rem}.right-4{right:1rem}.z-0{z-index:0}.z-10{z-index:10}.z-\[11\]{z-index:11}.m-0{margin:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-top:.5rem;margin-bottom:.5rem}.-ml-1{margin-left:-.25rem}.-mt-1{margin-top:-.25rem}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.me-\[-1px\]{margin-inline-end:-1px}.ml-3{margin-left:.75rem}.mr-0{margin-right:0}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-\[3px\]{margin-top:3px}.block{display:block}.flex{display:flex}.grid{display:grid}.h-0{height:0px}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-3{height:.75rem}.h-4{height:1rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[100vh\]{height:100vh}.h-\[1px\]{height:1px}.h-\[2px\]{height:2px}.h-\[4px\]{height:4px}.h-\[6px\]{height:6px}.h-\[8px\]{height:8px}.h-auto{height:auto}.h-full{height:100%}.max-h-12{max-height:3rem}.w-0{width:0px}.w-0\.5{width:.125rem}.w-12{width:3rem}.w-24{width:6rem}.w-4{width:1rem}.w-8{width:2rem}.w-\[85\%\]{width:85%}.w-full{width:100%}.max-w-\[600px\]{max-width:600px}.flex-1{flex:1 1 0%}.flex-\[33\%\]{flex:33%}.shrink-0{flex-shrink:0}.origin-center{transform-origin:center}.-rotate-45{--tw-rotate: -45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0px}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-\[1px\]{gap:1px}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-3{row-gap:.75rem}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.rounded-ee-none{border-end-end-radius:0px}.rounded-es-none{border-end-start-radius:0px}.rounded-se-none{border-start-end-radius:0px}.rounded-ss-none{border-start-start-radius:0px}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-dotted{border-style:dotted}.border-\[var\(--c-br\)\]{border-color:var(--c-br)}.border-black{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.border-black\/40{border-color:#0006}.border-black\/50{border-color:#00000080}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity))}.border-white\/80{border-color:#fffc}.border-b-gray-50{--tw-border-opacity: 1;border-bottom-color:rgb(249 250 251 / var(--tw-border-opacity))}.border-l-gray-50{--tw-border-opacity: 1;border-left-color:rgb(249 250 251 / var(--tw-border-opacity))}.border-l-white\/30{border-left-color:#ffffff4d}.border-r-white\/30{border-right-color:#ffffff4d}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity))}.bg-black\/10{background-color:#0000001a}.bg-black\/5{background-color:#0000000d}.bg-black\/90{background-color:#000000e6}.bg-blue-400{--tw-bg-opacity: 1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.bg-cyan-400{--tw-bg-opacity: 1;background-color:rgb(34 211 238 / var(--tw-bg-opacity))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity))}.bg-fuchsia-400{--tw-bg-opacity: 1;background-color:rgb(232 121 249 / var(--tw-bg-opacity))}.bg-gray-300\/30{background-color:#d1d5db4d}.bg-gray-400{--tw-bg-opacity: 1;background-color:rgb(156 163 175 / var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity))}.bg-indigo-400{--tw-bg-opacity: 1;background-color:rgb(129 140 248 / var(--tw-bg-opacity))}.bg-lime-400{--tw-bg-opacity: 1;background-color:rgb(163 230 53 / var(--tw-bg-opacity))}.bg-orange-400{--tw-bg-opacity: 1;background-color:rgb(251 146 60 / var(--tw-bg-opacity))}.bg-pink-400{--tw-bg-opacity: 1;background-color:rgb(244 114 182 / var(--tw-bg-opacity))}.bg-purple-400{--tw-bg-opacity: 1;background-color:rgb(192 132 252 / var(--tw-bg-opacity))}.bg-red-400{--tw-bg-opacity: 1;background-color:rgb(248 113 113 / var(--tw-bg-opacity))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity))}.bg-sky-100\/50{background-color:#e0f2fe80}.bg-sky-400{--tw-bg-opacity: 1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.bg-slate-300\/40{background-color:#cbd5e166}.bg-slate-400{--tw-bg-opacity: 1;background-color:rgb(148 163 184 / var(--tw-bg-opacity))}.bg-slate-600{--tw-bg-opacity: 1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.bg-stone-400{--tw-bg-opacity: 1;background-color:rgb(168 162 158 / var(--tw-bg-opacity))}.bg-teal-400{--tw-bg-opacity: 1;background-color:rgb(45 212 191 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-violet-400{--tw-bg-opacity: 1;background-color:rgb(167 139 250 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-white\/90{background-color:#ffffffe6}.bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity))}.bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-\[\#4284DB\]{--tw-gradient-from: #4284DB var(--tw-gradient-from-position);--tw-gradient-to: rgb(66 132 219 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#69eacb\]{--tw-gradient-from: #69eacb var(--tw-gradient-from-position);--tw-gradient-to: rgb(105 234 203 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#eeddf3\]{--tw-gradient-from: #eeddf3 var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 221 243 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#f9f047\]{--tw-gradient-from: #f9f047 var(--tw-gradient-from-position);--tw-gradient-to: rgb(249 240 71 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#fc00ff\]{--tw-gradient-from: #fc00ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(252 0 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-\[\#ff6432\]{--tw-gradient-from: #ff6432 var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 100 50 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-orange-400{--tw-gradient-from: #fb923c var(--tw-gradient-from-position);--tw-gradient-to: rgb(251 146 60 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-red-500{--tw-gradient-from: #ef4444 var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 68 68 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-violet-800{--tw-gradient-from: #5b21b6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(91 33 182 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-0\%{--tw-gradient-from-position: 0%}.via-\[\#eaccf8\]{--tw-gradient-to: rgb(234 204 248 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #eaccf8 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#ee92b1\]{--tw-gradient-to: rgb(238 146 177 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #ee92b1 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-\[\#ff0065\]{--tw-gradient-to: rgb(255 0 101 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #ff0065 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-pink-500{--tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #ec4899 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-pink-600{--tw-gradient-to: rgb(219 39 119 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #db2777 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-\[\#00dbde\]{--tw-gradient-to: #00dbde var(--tw-gradient-to-position)}.to-\[\#0fd850\]{--tw-gradient-to: #0fd850 var(--tw-gradient-to-position)}.to-\[\#29EAC4\]{--tw-gradient-to: #29EAC4 var(--tw-gradient-to-position)}.to-\[\#6330b4\]{--tw-gradient-to: #6330b4 var(--tw-gradient-to-position)}.to-\[\#6654f1\]{--tw-gradient-to: #6654f1 var(--tw-gradient-to-position)}.to-\[\#7b2eff\]{--tw-gradient-to: #7b2eff var(--tw-gradient-to-position)}.to-orange-500{--tw-gradient-to: #f97316 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-rose-400{--tw-gradient-to: #fb7185 var(--tw-gradient-to-position)}.to-violet-500{--tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position)}.to-100\%{--tw-gradient-to-position: 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.p-1{padding:.25rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-0\.5{padding-left:.125rem;padding-right:.125rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-2{padding-bottom:.5rem}.pl-2{padding-left:.5rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.text-\[\#1677ff\]{--tw-text-opacity: 1;color:rgb(22 119 255 / var(--tw-text-opacity))}.text-\[\#1a79ff\]{--tw-text-opacity: 1;color:rgb(26 121 255 / var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.shadow{--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.before\:block:before{content:var(--tw-content);display:block}.before\:h-0:before{content:var(--tw-content);height:0px}.before\:h-0\.5:before{content:var(--tw-content);height:.125rem}.before\:w-0:before{content:var(--tw-content);width:0px}.before\:w-0\.5:before{content:var(--tw-content);width:.125rem}.before\:rounded-full:before{content:var(--tw-content);border-radius:9999px}.before\:bg-red-500:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.after\:h-0:after{content:var(--tw-content);height:0px}.after\:h-0\.5:after{content:var(--tw-content);height:.125rem}.after\:w-0:after{content:var(--tw-content);width:0px}.after\:w-0\.5:after{content:var(--tw-content);width:.125rem}.after\:bg-green-500:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity))}.hover\:z-\[1\]:hover{z-index:1}.hover\:border-blue-500:hover{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.hover\:bg-\[var\(--c-wb\)\]:hover{background-color:var(--c-wb)}.hover\:bg-sky-100:hover{--tw-bg-opacity: 1;background-color:rgb(224 242 254 / var(--tw-bg-opacity))}.hover\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.hover\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity))}.hover\:px-1:hover{padding-left:.25rem;padding-right:.25rem}.hover\:px-1\.5:hover{padding-left:.375rem;padding-right:.375rem}.hover\:text-\[\#1677ff\]:hover{--tw-text-opacity: 1;color:rgb(22 119 255 / var(--tw-text-opacity))}.hover\:text-\[\#1a79ff\]:hover{--tw-text-opacity: 1;color:rgb(26 121 255 / var(--tw-text-opacity))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:border-blue-500:disabled{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity))}.disabled\:bg-blue-500\/5:disabled{background-color:#3b82f60d}.disabled\:text-black:disabled{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}@media (min-width: 768px){.md\:w-0{width:0px}.md\:w-\[340px\]{width:340px}.md\:flex-1{flex:1 1 0%}.md\:flex-row{flex-direction:row}.md\:items-stretch{align-items:stretch}}.dark\:divide-gray-700:where([data-mode=dark],[data-mode=dark] *)>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(55 65 81 / var(--tw-divide-opacity))}.dark\:border-gray-700:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:border-gray-800:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity))}.dark\:border-white:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}.dark\:border-white\/40:where([data-mode=dark],[data-mode=dark] *){border-color:#fff6}.dark\:border-b-gray-700:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity: 1;border-bottom-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:border-l-gray-700:where([data-mode=dark],[data-mode=dark] *){--tw-border-opacity: 1;border-left-color:rgb(55 65 81 / var(--tw-border-opacity))}.dark\:bg-black:where([data-mode=dark],[data-mode=dark] *){--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.dark\:bg-white\/20:where([data-mode=dark],[data-mode=dark] *){background-color:#fff3}.dark\:text-gray-300:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.dark\:text-gray-400:where([data-mode=dark],[data-mode=dark] *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:hover\:bg-gray-900:hover:where([data-mode=dark],[data-mode=dark] *){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.dark\:hover\:bg-slate-700:hover:where([data-mode=dark],[data-mode=dark] *){--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity))}.\[\&_\.ant-drawer-body\]\:p-0 .ant-drawer-body{padding:0}.\[\&_\.ant-popover-content\]\:h-full .ant-popover-content,.\[\&_\.ant-popover-inner\]\:h-full .ant-popover-inner{height:100%}.\[\&_\.ant-popover-inner\]\:overflow-y-auto .ant-popover-inner{overflow-y:auto}.\[\&_\.ant-popover-inner\]\:overflow-x-hidden .ant-popover-inner{overflow-x:hidden}.\[\&_\.ant-radio-wrapper_span\]\:p-0 .ant-radio-wrapper span{padding:0}.\[\&_\.ant-radio-wrapper_span\]\:px-1 .ant-radio-wrapper span{padding-left:.25rem;padding-right:.25rem}.\[\&_\.ant-radio\]\:hidden .ant-radio{display:none}.\[\&_\.ant-segmented-item\]\:w-\[33\%\] .ant-segmented-item{width:33%}.\[\&_\.ant-segmented\]\:w-full .ant-segmented{width:100%}.\[\&_\.border\]\:border-\[\#1a79ff\] .border{--tw-border-opacity: 1;border-color:rgb(26 121 255 / var(--tw-border-opacity))}.\[\&_\.border\]\:hover\:text-\[\#1a79ff\]:hover .border{--tw-text-opacity: 1;color:rgb(26 121 255 / var(--tw-text-opacity))}.\[\&_label\]\:text-sm label{font-size:.875rem;line-height:1.25rem}.\[\&_label\]\:text-xs label{font-size:.75rem;line-height:1rem}.\[\&_label\]\:font-semibold label{font-weight:600}.\[\&_span\]\:mr-0 span{margin-right:0}.\[\&_span\]\:block span{display:block}.\[\&_span\]\:w-full span{width:100%}.\[\&_span\]\:p-0 span{padding:0}.\[\&_span\]\:ps-0 span{padding-inline-start:0px}.\[\&_svg\]\:hover\:text-blue-500:hover svg{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity))}

package/package.json

@@ -1,16 +1,30 @@
 {
   "name": "image-beautifier",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "Used to beautify image share display, add beautiful background, rounded corners, shadows, etc...",
-  "main": "src/index.js",
+  "keywords": [
+    "react",
+    "image-beautifier",
+    "LeaferJs"
+  ],
+  "module": "lib/image-beautifier.es.js",
+  "main": "lib/image-beautifier.es.js",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:lib": "NODE_TYPE=lib vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "release": "npm publish"
   },
+  "files": [
+    "lib",
+    "license",
+    "README.md"
+  ],
   "dependencies": {
+    "@ant-design/cssinjs": "^1.21.0",
     "@ctrl/tinycolor": "^4.1.0",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",

package/.eslintrc.cjs

@@ -1,25 +0,0 @@
-export default {
-  root: true,
-  env: {
-    browser: true,
-    es2020: true
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react/prop-types': 0,
-    'react/jsx-no-target-blank': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}

package/favicon.svg

@@ -1,20 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 510 510" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_i_40_60)">
-<path d="M60.1774 83.172C64.1232 61.4358 84.9426 47.0139 106.679 50.9598L271.777 80.9308C293.513 84.8767 307.935 105.696 303.989 127.432L247.462 438.817C243.516 460.553 222.696 474.975 200.96 471.029L35.8623 441.058C14.1261 437.112 -0.295702 416.293 3.65017 394.557L60.1774 83.172Z" fill="#812BED"/>
-<path d="M179.201 136.846C173.053 115.627 185.269 93.4418 206.488 87.2932L367.654 40.5909C388.872 34.4423 411.058 46.6588 417.206 67.8773L505.29 371.846C511.438 393.065 499.222 415.25 478.003 421.399L316.837 468.101C295.619 474.25 273.433 462.033 267.285 440.815L179.201 136.846Z" fill="#0DB7FF"/>
-<path d="M206.488 87.2932C185.269 93.4418 173.053 115.627 179.201 136.846L254.874 397.986L303.989 127.432C307.935 105.696 293.513 84.8767 271.777 80.9308L245.134 76.0943L206.488 87.2932Z" fill="#EC83FD"/>
-<path d="M401 404C401 416.703 390.703 427 378 427C365.297 427 355 416.703 355 404C355 391.297 365.297 381 378 381C390.703 381 401 391.297 401 404Z" fill="#0D97D3"/>
-<path d="M144 404C144 416.703 133.703 427 121 427C108.297 427 98 416.703 98 404C98 391.297 108.297 381 121 381C133.703 381 144 391.297 144 404Z" fill="#6616CB"/>
-</g>
-<defs>
-<filter id="filter0_i_40_60" x="3" y="39" width="503.881" height="432.679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-2"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.7 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_40_60"/>
-</filter>
-</defs>
-</svg>

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Image Beautifier</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
-  </body>
-</html>

package/jsconfig.json

@@ -1,12 +0,0 @@
-{
-    "compilerOptions": {
-        "baseUrl": "./src",
-        "paths": {
-            "@components/*": ["./components/*"],
-            "@assets/*": ["./assets/*"],
-            "@stores": ["./stores/index.js"],
-            "@utils/*": ["./utils/*"],
-            "@hooks/*": ["./hooks/*"]
-        }
-    }
-}

package/postcss.config.mjs

@@ -1,6 +0,0 @@
-import tailwindcss from 'tailwindcss';
-import autoprefixer from 'autoprefixer';
-
-export default {
-    plugins: [tailwindcss('./tailwind.config.mjs'), autoprefixer],
-};

package/public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.jsx

@@ -1,29 +0,0 @@
-import { useEffect } from 'react';
-import { message } from 'antd';
-import { observer } from 'mobx-react-lite';
-import Header from '@components/header/Header';
-import Editor from '@components/editor/Editor';
-import SideBar from '@components/sideBar/SideBar';
-import Init from '@components/init/Init';
-import stores from '@stores';
-import '@style/main.css';
-
-export default observer(() => {
-  const workplace = stores.editor.img?.src ? <Editor /> : <Init />
-  const [messageApi, contextHolder] = message.useMessage();
-  useEffect(() => {
-    stores.editor.setMessage(messageApi);
-  }, [messageApi]);
-  return (
-    <>
-      {contextHolder}
-      <div className="polka flex flex-col overflow-hidden antialiased w-full h-[100vh]">
-        <Header />
-        <div className="flex flex-col flex-1 h-0 md:flex-row md:items-stretch">
-          {workplace}
-          <SideBar />
-        </div>
-      </div>
-    </>
-  )
-});

package/src/assets/blur.svg

@@ -1,8 +0,0 @@
-<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
-      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
-    </filter>
-  </defs>
-  <image width="100" height="100" filter="url(#f1)" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" />
-</svg>

package/src/assets/color.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="M311.296 428.544V40.96C186.368 94.208 87.552 195.072 36.864 321.024l274.432 274.432V428.544z" fill="#37C15C"></path><path d="M428.544 311.296l274.432-274.432C642.048 12.288 577.536 0 512 0 440.832 0 372.736 14.848 311.296 40.96v387.584l117.248-117.248z" fill="#A9E247"></path><path d="M983.04 311.296h-387.584l117.248 117.248 274.432 274.432c24.576-60.416 36.864-125.44 36.864-190.976 0-71.168-14.848-139.264-40.96-200.704z" fill="#FF7D12"></path><path d="M712.704 595.456V983.04c124.928-53.248 223.744-154.112 274.432-280.064l-274.432-274.432v166.912z" fill="#F93B21"></path><path d="M595.456 712.704l-274.432 274.432c60.928 24.576 125.44 36.864 190.976 36.864 71.168 0 139.264-14.848 200.704-40.96v-387.584l-117.248 117.248z" fill="#846FEF"></path><path d="M428.544 712.704H40.96c53.248 124.928 154.112 223.744 280.064 274.432l274.432-274.432H428.544z" fill="#1E95FF"></path><path d="M311.296 595.456L36.864 321.024C12.288 381.952 0 446.464 0 512c0 71.168 14.848 139.264 40.96 200.704h387.584l-117.248-117.248z" fill="#14EFEF"></path><path d="M595.456 311.296H983.04c-53.248-124.928-154.112-223.744-280.064-274.432L428.544 311.296h166.912z" fill="#FFC931"></path></svg>

package/src/components/ColorPicker.jsx

@@ -1,27 +0,0 @@
-import { ColorPicker, Button } from 'antd';
-import { TinyColor } from '@ctrl/tinycolor';
-import Icon from '@components/Icon';
-
-export default (props) => {
-    const useDropper = () => {
-        if (!window.EyeDropper) return;
-        const eyeDropper = new EyeDropper();
-        eyeDropper.open().then((result) => {
-            const color = result.sRGBHex;
-            props?.onChange && props.onChange(new TinyColor(color));
-        }).catch((e) => {
-            console.log(e);
-        });
-    }
-    return <ColorPicker
-        {...props}
-        panelRender={(panel) => (
-            <>
-                {window.EyeDropper && <div className="mb-1">
-                    <Button type="text" shape="circle" size="small" icon={<Icon.Pipette size={16} />} onClick={useDropper} />
-                </div>}
-                {panel}
-            </>
-        )}
-    />
-};

package/src/components/Icon.jsx

@@ -1,81 +0,0 @@
-import {
-    Camera,
-    Check,
-    Square,
-    Circle,
-    Slash,
-    MoveDownLeft,
-    Pencil,
-    Smile,
-    Undo,
-    Redo,
-    ChevronRight,
-    ChevronDown,
-    ChevronUp,
-    RotateCcw,
-    ZoomIn,
-    ZoomOut,
-    Hand,
-    Crop,
-    FlipHorizontal2,
-    FlipVertical2,
-    Sunset,
-    Box,
-    LayoutGrid,
-    ImagePlus,
-    Type,
-    CodeXml,
-    ClipboardPaste,
-    ImagePlay,
-    Maximize,
-    ListCollapse,
-    ArrowUpRight,
-    ArrowDownRight,
-    ImageDown,
-    Copy,
-    Settings2,
-    ChevronLeft,
-    Pipette,
-    Trash2
-} from 'lucide-react';
-
-export default {
-    Camera,
-    Check,
-    Square,
-    Circle,
-    Slash,
-    MoveDownLeft,
-    Pencil,
-    Smile,
-    Undo,
-    Redo,
-    ChevronRight,
-    ChevronDown,
-    ChevronUp,
-    RotateCcw,
-    ZoomIn,
-    ZoomOut,
-    Hand,
-    Crop,
-    FlipHorizontal2,
-    FlipVertical2,
-    Sunset,
-    Box,
-    LayoutGrid,
-    ImagePlus,
-    Type,
-    CodeXml,
-    ClipboardPaste,
-    ImagePlay,
-    Maximize,
-    ListCollapse,
-    ArrowUpRight,
-    ArrowDownRight,
-    ImageDown,
-    Copy,
-    Settings2,
-    ChevronLeft,
-    Pipette,
-    Trash2
-};

package/src/components/editor/Editor.jsx

@@ -1,19 +0,0 @@
-import { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import View from './View';
-import Zoom from './Zoom';
-
-export default observer(() => {
-    const [target, setTarget] = useState(null);
-
-    return (
-        <div className='md:w-0 md:flex-1 overflow-hidden select-none relative'>
-            <div className="w-full h-full relative z-0" ref={
-                (node) => setTarget(node)
-            }>
-                {target && <View target={target} />}
-            </div>
-            <Zoom />
-        </div>
-    );
-});

package/src/components/editor/HotKeys.jsx

@@ -1,48 +0,0 @@
-import { useEffect } from "react"
-import { tinykeys } from "tinykeys"
-import { observer } from 'mobx-react-lite';
-import stores from '@stores';
-
-export default observer(() => {
-    useEffect(() => {
-        const deleteItem = event => {
-            // event.preventDefault();
-            const { list } = stores.editor.app?.editor;
-            if (list?.length) {
-                for (let item of list) {
-                    item.remove();
-                    stores.editor.removeShape(item);
-                }
-                stores.editor.app.editor.cancel();
-            }
-        };
-        const handleZoom = type => {
-            if (type === 'fit') {
-                stores.editor.app?.tree.zoom(type, 100);
-            } else {
-                stores.editor.app?.tree.zoom(type);
-            }
-            stores.editor.setScale(stores.editor.app.tree.scale);
-        }
-        const unsubscribe = tinykeys(window, {
-            'Backspace': deleteItem,
-            'Delete': deleteItem,
-            '$mod+Minus': event => {
-                event.preventDefault();
-                handleZoom('out');
-            },
-            '$mod+Equal': event => {
-                event.preventDefault();
-                handleZoom('in');
-            },
-            '$mod+Digit0': event => {
-                event.preventDefault();
-                handleZoom('fit');
-            }
-        });
-        return () => {
-            unsubscribe();
-        }
-    }, [window]);
-    return null;
-});

package/src/components/editor/View.jsx

@@ -1,167 +0,0 @@
-import { useEffect } from 'react';
-import { observer } from 'mobx-react-lite';
-import { App, ResizeEvent, ZoomEvent, DragEvent, Cursor } from 'leafer-ui';
-import debounce from 'lodash/debounce';
-import { addListener, removeListener } from 'resize-detector';
-import rotatePng from '@assets/rotate.png';
-import pencilPng from '@assets/pencil.png';
-import stores from '@stores';
-import FrameBox from './layers/FrameBox';
-import Screenshot from './layers/Screenshot';
-import Watermark from './layers/Watermark';
-import ShapeLine from './layers/ShapeLine';
-import { ScrollBar } from '@leafer-in/scroll'
-import { nanoid } from '@utils/utils';
-import HotKeys from './HotKeys';
-import '@leafer-in/editor';
-import '@leafer-in/view';
-
-Cursor.set('pencil', { url: pencilPng });
-
-export default observer(({target}) => {
-    useEffect(() => {
-        const app = new App({
-            view: target,
-            editor: {
-                lockRatio: 'corner',
-                stroke: '#3f99f7',
-                skewable: false,
-                hover: false,
-                middlePoint: { cornerRadius: 100, width: 20, height: 6 },
-                rotatePoint: {
-                    width: 20,
-                    height: 20,
-                    fill: {
-                        type: 'image',
-                        url: rotatePng,
-                    },
-                },
-            },
-            tree: {
-                usePartRender: true,
-            },
-            sky: {
-                type: 'draw',
-                usePartRender: true,
-            },
-        });
-        new ScrollBar(app);
-
-        stores.editor.setApp(app);
-
-        app.tree.on(ZoomEvent.ZOOM, () => {
-            stores.editor.setScale(app.tree.scale);
-        });
-        app.tree.on(ResizeEvent.RESIZE, () => {
-            stores.editor.setScale(app.tree.scale);
-        });
-
-        let shapeId = null;
-        app.tree.on(DragEvent.START, (arg) => {
-            if (!stores.editor.useTool) return;
-            const { target } = arg;
-            const shape = stores.editor.getShape(target.id);
-            if (shape) return;
-            shapeId = nanoid();
-            const size = arg.getPageBounds();
-            const type = stores.editor.useTool;
-            const newShape = {
-                id: shapeId,
-                type,
-                fill: stores.editor.annotateColor,
-                strokeWidth: stores.editor.strokeWidth,
-                zIndex: stores.editor.shapes.size + 1,
-                ...size
-            };
-            if (['Slash', 'MoveDownLeft', 'Pencil'].includes(type)) {
-                newShape.points = [size.x, size.y];
-            }
-            stores.editor.addShape(newShape);
-        });
-        app.tree.on(DragEvent.DRAG, (arg) => {
-            if (!stores.editor.useTool) return;
-            if (!shapeId) return;
-            const shape = stores.editor.getShape(shapeId);
-            if (!shape) return;
-            const size = arg.getPageBounds();
-            const newShape = Object.assign({}, shape, size);
-            const { points, type } = newShape;
-            if (points && points.length) {
-                const { x, y } = arg.getInnerTotal();
-                const newX = x > 0 ? size.x + x : size.x;
-                const newY = y > 0 ? size.y + y : size.y;
-                if (type === 'Pencil') {
-                    newShape.points = [...points, newX, newY];
-                } else {
-                    newShape.points = [points[0], points[1], newX, newY];
-                }
-            }
-            stores.editor.addShape(newShape);
-        });
-        app.tree.on(DragEvent.END, () => {
-            if (!stores.editor.useTool) return;
-            if (!shapeId) return;
-            const shape = stores.editor.getShape(shapeId);
-            if (shape) {
-                if ((shape.width === 0 || shape.height === 0) && !['Slash', 'MoveDownLeft', 'Pencil'].includes(shape.type)) {
-                    stores.editor.removeShape(shape);
-                } else {
-                    stores.editor.addShape(Object.assign({}, shape, {editable: true}));
-                }
-            }
-            shapeId = null;
-            if (stores.editor.useTool !== 'Pencil') stores.editor.setUseTool(null);
-        });
-
-        // 监听容器变化
-        const onResize = debounce(() => {
-            const { width, height } = target.getBoundingClientRect();
-            app.tree.zoom('fit', 100);
-            if (stores.option.frameConf.width < width && stores.option.frameConf.height < height) {
-                app.tree.zoom(1);
-            }
-        }, 10);
-
-        addListener(target, onResize);
-    
-        // setTimeout(() => {
-        //     const { width, height } = target.getBoundingClientRect();
-        //     app.tree.zoom('fit', 100);
-        //     if (stores.option.frameConf.width < width && stores.option.frameConf.height < height) {
-        //         app.tree.zoom(1);
-        //     }
-        //     stores.editor.setScale(app.tree.scale);
-        // }, 10);
-
-        return (() => {
-            removeListener(target, onResize);
-            stores.editor.destroy();
-        });
-    }, [target]);
-
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            const { width, height } = target.getBoundingClientRect();
-            stores.editor.app.tree.zoom('fit', 100);
-            if (stores.option.frameConf.width < width && stores.option.frameConf.height < height) {
-                stores.editor.app.tree.zoom(1);
-            }
-            stores.editor.setScale(stores.editor.app.tree.scale);
-        }, 20);
-        return (() => {
-            clearTimeout(timer);
-        })
-    }, [stores.option.frameConf.width, stores.option.frameConf.height]);
-
-    if (!stores.editor.app?.tree) return null;
-    return (<>
-        <FrameBox parent={stores.editor.app.tree} cursor={stores.editor.cursor} {...stores.option.frameConf}>
-                {stores.editor.shapesList.map((item) => (
-                    <ShapeLine key={item.id} {...item} />
-                ))}
-                {stores.editor.img?.src && <Screenshot />}
-                {stores.option.waterImg && <Watermark />}
-        </FrameBox>
-        <HotKeys />
-    </>);
-});

package/src/components/editor/Zoom.jsx

@@ -1,54 +0,0 @@
-import { useState } from 'react';
-import { observer } from 'mobx-react-lite';
-import Icon from '@components/Icon';
-import { Button, Dropdown } from 'antd';
-import stores from '@stores';
-
-const items = [
-    {
-        key: 0.5,
-        label: '50%'
-    },
-    {
-        key: 1,
-        label: '100%'
-    },
-    {
-        key: 1.5,
-        label: '150%'
-    },
-    {
-        key: 2,
-        label: '200%'
-    }
-];
-
-export default observer(() => {
-    const handleZoom = (key) => {
-        stores.editor.app?.tree.zoom(key);
-        stores.editor.setScale(stores.editor.app.tree.scale);
-    }
-    const handleMenuClick = (item) => {
-        const num = Number(item.key);
-        if (num === 4) {
-            stores.editor.app?.tree.zoom('fit', 100);
-        } else {
-            stores.editor.app?.tree.zoom(num);
-        }
-        stores.editor.setScale(stores.editor.app.tree.scale);
-    }
-    return (
-        <div className="absolute z-10 bottom-4 gap-2 right-4 flex items-center ">
-            <div className="flex bg-white overflow-hidden rounded-full shadow-md">
-                <Button type="text" icon={<Icon.ZoomIn size={16} />} onClick={() => handleZoom('in')} />
-                <Dropdown menu={{ items, onClick: handleMenuClick }} placement="top">
-                    <Button type="text">{stores.editor.scale}%</Button>
-                </Dropdown>
-                <Button type="text" icon={<Icon.ZoomOut size={16} />} onClick={() => handleZoom('out')} />
-            </div>
-            <div className="rounded-full bg-white shadow-md overflow-hidden">
-                <Button type="text" icon={<Icon.Maximize size={16} />} onClick={() => handleMenuClick({key: 4})} />
-            </div>
-        </div>
-    )
-});