@solostylist/image-editor 1.0.8 → 1.0.10

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 (270) hide show
  1. package/lib/actions/add-filter.js +11 -1
  2. package/lib/actions/change-pointer-icon.js +10 -1
  3. package/lib/actions/change-rotation.js +13 -1
  4. package/lib/actions/clear-annotations-selections.js +10 -1
  5. package/lib/actions/duplicate-annotations.js +26 -1
  6. package/lib/actions/enable-text-content-edit.js +10 -1
  7. package/lib/actions/hide-loader.js +10 -1
  8. package/lib/actions/index.js +36 -1
  9. package/lib/actions/redo.js +27 -1
  10. package/lib/actions/remove-annotations.js +27 -1
  11. package/lib/actions/reset.js +26 -1
  12. package/lib/actions/select-annotation.js +27 -1
  13. package/lib/actions/select-tab.js +16 -1
  14. package/lib/actions/select-tool.js +11 -1
  15. package/lib/actions/set-annotation.js +28 -1
  16. package/lib/actions/set-canvas-size.js +31 -1
  17. package/lib/actions/set-crop.js +25 -1
  18. package/lib/actions/set-feedback.js +11 -1
  19. package/lib/actions/set-finetune.js +13 -1
  20. package/lib/actions/set-latest-color.js +10 -1
  21. package/lib/actions/set-original-image.js +13 -1
  22. package/lib/actions/set-resize.js +14 -1
  23. package/lib/actions/set-saved.js +10 -1
  24. package/lib/actions/set-saving.js +11 -1
  25. package/lib/actions/set-show-tabs-menu.js +10 -1
  26. package/lib/actions/set-shown-image-dimensions.js +12 -1
  27. package/lib/actions/show-loader.js +10 -1
  28. package/lib/actions/toggle-flip.js +13 -1
  29. package/lib/actions/toggle-original-image-display.js +10 -1
  30. package/lib/actions/undo.js +27 -1
  31. package/lib/actions/update-state.js +7 -1
  32. package/lib/actions/zoom-canvas.js +37 -1
  33. package/lib/components/app/index.js +283 -1
  34. package/lib/components/assembly-point/index.js +23 -1
  35. package/lib/components/common/annotation-options/annotation-options.constants.js +10 -1
  36. package/lib/components/common/annotation-options/index.js +140 -1
  37. package/lib/components/common/annotation-options/opacity-field.js +23 -1
  38. package/lib/components/common/annotation-options/position-fields.js +39 -1
  39. package/lib/components/common/annotation-options/shadow-fields.js +62 -1
  40. package/lib/components/common/annotation-options/stroke-fields.js +33 -1
  41. package/lib/components/common/button-with-menu/index.js +86 -1
  42. package/lib/components/common/color-input/index.js +101 -1
  43. package/lib/components/common/color-picker-modal/index.js +70 -1
  44. package/lib/components/common/hidden-upload-input/index.js +17 -1
  45. package/lib/components/common/icon-wrapper/index.js +40 -1
  46. package/lib/components/common/image-preview-tile/index.js +57 -1
  47. package/lib/components/common/slider/index.js +38 -1
  48. package/lib/components/feedback-popup/index.js +41 -1
  49. package/lib/components/layers/design-layer/annotation-nodes/annotation-nodes.constants.js +10 -1
  50. package/lib/components/layers/design-layer/annotation-nodes/arrow-node.js +62 -1
  51. package/lib/components/layers/design-layer/annotation-nodes/ellipse-node.js +64 -1
  52. package/lib/components/layers/design-layer/annotation-nodes/image-node.js +78 -1
  53. package/lib/components/layers/design-layer/annotation-nodes/index.js +22 -1
  54. package/lib/components/layers/design-layer/annotation-nodes/line-node.js +60 -1
  55. package/lib/components/layers/design-layer/annotation-nodes/memoized-annotation.js +16 -1
  56. package/lib/components/layers/design-layer/annotation-nodes/polygon-node.js +63 -1
  57. package/lib/components/layers/design-layer/annotation-nodes/rect-node.js +65 -1
  58. package/lib/components/layers/design-layer/annotation-nodes/text-node.js +80 -1
  59. package/lib/components/layers/design-layer/index.js +202 -1
  60. package/lib/components/layers/design-layer/nodes-common-prop-types.js +16 -1
  61. package/lib/components/layers/design-layer/preview-group.js +9 -1
  62. package/lib/components/layers/index.js +2 -1
  63. package/lib/components/layers/transformers-layer/crop-transformer.js +248 -1
  64. package/lib/components/layers/transformers-layer/index.js +16 -1
  65. package/lib/components/layers/transformers-layer/nodes-transformer.js +73 -1
  66. package/lib/components/layers/transformers-layer/transformers-layer.utils.js +93 -1
  67. package/lib/components/main-canvas/canvas-node.js +177 -1
  68. package/lib/components/main-canvas/index.js +51 -1
  69. package/lib/components/main-canvas/touch-zooming-events.js +69 -1
  70. package/lib/components/node-controls/index.js +79 -1
  71. package/lib/components/tabs/index.js +66 -1
  72. package/lib/components/tabs/tabs.constants.js +27 -1
  73. package/lib/components/tabs-drawer/index.js +109 -1
  74. package/lib/components/tools/arrow/arrow-button.js +17 -1
  75. package/lib/components/tools/arrow/arrow-options.js +19 -1
  76. package/lib/components/tools/arrow/index.js +2 -1
  77. package/lib/components/tools/blur/blur-options.js +35 -1
  78. package/lib/components/tools/blur/blur.js +17 -1
  79. package/lib/components/tools/blur/index.js +2 -1
  80. package/lib/components/tools/brightness/brightness-options.js +36 -1
  81. package/lib/components/tools/brightness/brightness.js +17 -1
  82. package/lib/components/tools/brightness/index.js +2 -1
  83. package/lib/components/tools/contrast/contrast-options.js +35 -1
  84. package/lib/components/tools/contrast/contrast.js +17 -1
  85. package/lib/components/tools/contrast/index.js +2 -1
  86. package/lib/components/tools/crop/crop.constants.js +31 -1
  87. package/lib/components/tools/crop/crop.js +122 -1
  88. package/lib/components/tools/crop/index.js +1 -1
  89. package/lib/components/tools/ellipse/ellipse-button.js +17 -1
  90. package/lib/components/tools/ellipse/ellipse-options.js +17 -1
  91. package/lib/components/tools/ellipse/index.js +2 -1
  92. package/lib/components/tools/filters/filter-item.js +77 -1
  93. package/lib/components/tools/filters/filters.constants.js +139 -1
  94. package/lib/components/tools/filters/filters.js +74 -1
  95. package/lib/components/tools/filters/index.js +1 -1
  96. package/lib/components/tools/flip/flip-x.js +48 -1
  97. package/lib/components/tools/flip/flip-y.js +50 -1
  98. package/lib/components/tools/flip/index.js +2 -1
  99. package/lib/components/tools/hsv/hsv.js +17 -1
  100. package/lib/components/tools/hsv/hsvoptions.js +60 -1
  101. package/lib/components/tools/hsv/index.js +2 -1
  102. package/lib/components/tools/image/image-button.js +17 -1
  103. package/lib/components/tools/image/image-controls.js +12 -1
  104. package/lib/components/tools/image/image-options.js +162 -1
  105. package/lib/components/tools/image/images-gallery.js +55 -1
  106. package/lib/components/tools/image/index.js +2 -1
  107. package/lib/components/tools/line/index.js +2 -1
  108. package/lib/components/tools/line/line-button.js +17 -1
  109. package/lib/components/tools/line/line-options.js +19 -1
  110. package/lib/components/tools/pen/index.js +2 -1
  111. package/lib/components/tools/pen/pen-button.js +17 -1
  112. package/lib/components/tools/pen/pen-options.js +120 -1
  113. package/lib/components/tools/polygon/index.js +2 -1
  114. package/lib/components/tools/polygon/polygon-button.js +17 -1
  115. package/lib/components/tools/polygon/polygon-options.js +22 -1
  116. package/lib/components/tools/polygon/polygon-sides-field.js +23 -1
  117. package/lib/components/tools/polygon/polygon.constants.js +10 -1
  118. package/lib/components/tools/rect/index.js +2 -1
  119. package/lib/components/tools/rect/rect-button.js +17 -1
  120. package/lib/components/tools/rect/rect-corner-field.js +24 -1
  121. package/lib/components/tools/rect/rect-options.js +21 -1
  122. package/lib/components/tools/rect/rect.constants.js +10 -1
  123. package/lib/components/tools/resize/index.js +1 -1
  124. package/lib/components/tools/resize/resize.js +141 -1
  125. package/lib/components/tools/rotate/index.js +2 -1
  126. package/lib/components/tools/rotate/rotate-button.js +17 -1
  127. package/lib/components/tools/rotate/rotate-options.js +97 -1
  128. package/lib/components/tools/text/index.js +2 -1
  129. package/lib/components/tools/text/text-button.js +17 -1
  130. package/lib/components/tools/text/text-options/handle-text-change-area.js +122 -1
  131. package/lib/components/tools/text/text-options/index.js +17 -1
  132. package/lib/components/tools/text/text-options/text-alignment-fields.js +38 -1
  133. package/lib/components/tools/text/text-options/text-controls.js +147 -1
  134. package/lib/components/tools/text/text-options/text-options.constants.js +16 -1
  135. package/lib/components/tools/text/text-options/text-spacings-fields.js +34 -1
  136. package/lib/components/tools/tools.constants.js +98 -1
  137. package/lib/components/tools/warmth/index.js +2 -1
  138. package/lib/components/tools/warmth/warmth-options.js +35 -1
  139. package/lib/components/tools/warmth/warmth.js +17 -1
  140. package/lib/components/tools/watermark/index.js +1 -1
  141. package/lib/components/tools/watermark/watermark-padding.js +59 -1
  142. package/lib/components/tools/watermark/watermark.js +221 -1
  143. package/lib/components/tools/watermark/watermarks-gallery.js +77 -1
  144. package/lib/components/tools-bar/index.js +113 -1
  145. package/lib/components/tools-bar/tools-bar-item-button.js +39 -1
  146. package/lib/components/topbar/canvas-zooming.js +119 -1
  147. package/lib/components/topbar/confirmation-modal.js +53 -1
  148. package/lib/components/topbar/image-dimensions-and-display-toggle.js +68 -1
  149. package/lib/components/topbar/index.js +47 -1
  150. package/lib/components/topbar/redo-button.js +25 -1
  151. package/lib/components/topbar/reset-button.js +21 -1
  152. package/lib/components/topbar/save-button.js +251 -1
  153. package/lib/components/topbar/topbar.constants.js +31 -1
  154. package/lib/components/topbar/undo-button.js +27 -1
  155. package/lib/context/app-context.js +3 -1
  156. package/lib/context/app-provider-overriden-value.js +9 -1
  157. package/lib/context/app-provider.js +48 -1
  158. package/lib/context/app-reducer.js +5 -1
  159. package/lib/context/default-config.js +75 -1
  160. package/lib/context/default-translations.js +115 -1
  161. package/lib/context/get-initial-app-state.js +61 -1
  162. package/lib/context/index.js +4 -1
  163. package/lib/custom/filters/aden.js +8 -1
  164. package/lib/custom/filters/amaro.js +8 -1
  165. package/lib/custom/filters/ashby.js +8 -1
  166. package/lib/custom/filters/base-filters.js +82 -1
  167. package/lib/custom/filters/black-and-white.js +11 -1
  168. package/lib/custom/filters/brannan.js +8 -1
  169. package/lib/custom/filters/brooklyn.js +8 -1
  170. package/lib/custom/filters/charmes.js +8 -1
  171. package/lib/custom/filters/clarendon.js +9 -1
  172. package/lib/custom/filters/crema.js +8 -1
  173. package/lib/custom/filters/dogpatch.js +8 -1
  174. package/lib/custom/filters/earlybird.js +7 -1
  175. package/lib/custom/filters/gingham.js +8 -1
  176. package/lib/custom/filters/ginza.js +8 -1
  177. package/lib/custom/filters/hefe.js +8 -1
  178. package/lib/custom/filters/helena.js +8 -1
  179. package/lib/custom/filters/hudson.js +9 -1
  180. package/lib/custom/filters/index.js +40 -1
  181. package/lib/custom/filters/juno.js +8 -1
  182. package/lib/custom/filters/kelvin.js +9 -1
  183. package/lib/custom/filters/lark.js +9 -1
  184. package/lib/custom/filters/lo-fi.js +8 -1
  185. package/lib/custom/filters/ludwig.js +8 -1
  186. package/lib/custom/filters/maven.js +9 -1
  187. package/lib/custom/filters/mayfair.js +8 -1
  188. package/lib/custom/filters/moon.js +7 -1
  189. package/lib/custom/filters/nashville.js +8 -1
  190. package/lib/custom/filters/ninteen-seventy-seven.js +8 -1
  191. package/lib/custom/filters/perpetua.js +7 -1
  192. package/lib/custom/filters/reyes.js +9 -1
  193. package/lib/custom/filters/rise.js +9 -1
  194. package/lib/custom/filters/sierra.js +8 -1
  195. package/lib/custom/filters/skyline.js +8 -1
  196. package/lib/custom/filters/slumber.js +8 -1
  197. package/lib/custom/filters/stinson.js +8 -1
  198. package/lib/custom/filters/sutro.js +8 -1
  199. package/lib/custom/filters/toaster.js +8 -1
  200. package/lib/custom/filters/valencia.js +9 -1
  201. package/lib/custom/filters/vesper.js +9 -1
  202. package/lib/custom/filters/walden.js +8 -1
  203. package/lib/custom/filters/willow.js +8 -1
  204. package/lib/custom/filters/xpro2.js +9 -1
  205. package/lib/custom/finetunes/custom-threshold.js +19 -1
  206. package/lib/custom/finetunes/index.js +2 -1
  207. package/lib/custom/finetunes/warmth.js +15 -1
  208. package/lib/demo/app.js +175 -1
  209. package/lib/demo/index.js +1 -1
  210. package/lib/hooks/index.js +12 -1
  211. package/lib/hooks/use-annotation/get-bounding-rect-un-scaled.js +14 -1
  212. package/lib/hooks/use-annotation/get-new-annotation-preview.js +83 -1
  213. package/lib/hooks/use-annotation/index.js +138 -1
  214. package/lib/hooks/use-annotation/preview-then-call-annotation-adding.js +159 -1
  215. package/lib/hooks/use-annotation-events.js +83 -1
  216. package/lib/hooks/use-app-reducer.js +53 -1
  217. package/lib/hooks/use-debounced-callback.js +7 -1
  218. package/lib/hooks/use-drag.js +37 -1
  219. package/lib/hooks/use-filter.js +20 -1
  220. package/lib/hooks/use-finetune.js +31 -1
  221. package/lib/hooks/use-phone-screen.js +5 -1
  222. package/lib/hooks/use-popover.js +27 -1
  223. package/lib/hooks/use-resize-observer.js +60 -1
  224. package/lib/hooks/use-store.js +6 -1
  225. package/lib/hooks/use-transformed-img-data.js +156 -1
  226. package/lib/hooks/use-update-effect.js +18 -1
  227. package/lib/index.d.ts +2 -2
  228. package/lib/index.d.ts.map +1 -1
  229. package/lib/index.js +4 -1
  230. package/lib/types/actions.js +31 -1
  231. package/lib/types/annotations.js +42 -1
  232. package/lib/types/common.js +1 -1
  233. package/lib/types/config.js +34 -1
  234. package/lib/types/index.js +5 -1
  235. package/lib/types/state.js +1 -1
  236. package/lib/utils/assign-finetune-names-to-konva.js +7 -1
  237. package/lib/utils/calculate-zoom-data.js +36 -1
  238. package/lib/utils/compare-ratios.js +5 -1
  239. package/lib/utils/constants.js +84 -1
  240. package/lib/utils/crop-image.js +10 -1
  241. package/lib/utils/debounce.js +19 -1
  242. package/lib/utils/deep-merge.js +26 -1
  243. package/lib/utils/extract-current-design-state.js +15 -1
  244. package/lib/utils/extract-name-from-url.js +5 -1
  245. package/lib/utils/filter-str-to-class.js +9 -1
  246. package/lib/utils/finetunes-strs-to-classes.js +13 -1
  247. package/lib/utils/get-center-rotated-point.js +34 -1
  248. package/lib/utils/get-default-save-quality.js +5 -1
  249. package/lib/utils/get-dimensions-minimal-ratio.js +6 -1
  250. package/lib/utils/get-elem-document-coords.js +24 -1
  251. package/lib/utils/get-file-full-name.js +21 -1
  252. package/lib/utils/get-pointer-offset-position-bounded-to-object.js +26 -1
  253. package/lib/utils/get-proper-dimensions.js +21 -1
  254. package/lib/utils/get-proper-image-to-canvas-spacing.js +6 -1
  255. package/lib/utils/get-scroll-offset.js +13 -1
  256. package/lib/utils/get-size-after-rotation.js +31 -1
  257. package/lib/utils/get-zoom-fit-factor.js +5 -1
  258. package/lib/utils/image-to-base64.js +12 -1
  259. package/lib/utils/is-default-zero-values-only.js +6 -1
  260. package/lib/utils/is-same-image.js +4 -1
  261. package/lib/utils/load-image.js +19 -1
  262. package/lib/utils/map-crop-box.js +16 -1
  263. package/lib/utils/map-number.js +4 -1
  264. package/lib/utils/map-position-string-to-point.js +92 -1
  265. package/lib/utils/random-id.js +5 -1
  266. package/lib/utils/restrict-number.js +7 -1
  267. package/lib/utils/serialize-design-state.js +62 -1
  268. package/lib/utils/to-precised-float.js +5 -1
  269. package/lib/utils/translator.js +14 -1
  270. package/package.json +1 -1
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var ADJUST_RGB_CONST=[1,1,1.25],CONTRAST_CONST=.1,BRIGHTNESS_CONST=.15;function Hudson(a){BaseFilters.apply(a,BaseFilters.adjustRGB(ADJUST_RGB_CONST),BaseFilters.contrast(CONTRAST_CONST),BaseFilters.brightness(BRIGHTNESS_CONST))}Hudson.filterName="Hudson";export default Hudson;
1
+ import BaseFilters from "./base-filters";
2
+ var ADJUST_RGB_CONST = [1, 1, 1.25];
3
+ var CONTRAST_CONST = 0.1;
4
+ var BRIGHTNESS_CONST = 0.15;
5
+ function Hudson(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.adjustRGB(ADJUST_RGB_CONST), BaseFilters.contrast(CONTRAST_CONST), BaseFilters.brightness(BRIGHTNESS_CONST));
7
+ }
8
+ Hudson.filterName = 'Hudson';
9
+ export default Hudson;
@@ -1 +1,40 @@
1
- export{default as BlackAndWhite}from"./black-and-white";export{default as Clarendon}from"./clarendon";export{default as Gingham}from"./gingham";export{default as Moon}from"./moon";export{default as Lark}from"./lark";export{default as Reyes}from"./reyes";export{default as Juno}from"./juno";export{default as Slumber}from"./slumber";export{default as Crema}from"./crema";export{default as Ludwig}from"./ludwig";export{default as Aden}from"./aden";export{default as Perpetua}from"./perpetua";export{default as Amaro}from"./amaro";export{default as Mayfair}from"./mayfair";export{default as Rise}from"./rise";export{default as Hudson}from"./hudson";export{default as Valencia}from"./valencia";export{default as XPro2}from"./xpro2";export{default as Sierra}from"./sierra";export{default as Willow}from"./willow";export{default as LoFi}from"./lo-fi";export{default as Hefe}from"./hefe";export{default as Nashville}from"./nashville";export{default as Stinson}from"./stinson";export{default as Vesper}from"./vesper";export{default as Earlybird}from"./earlybird";export{default as Brannan}from"./brannan";export{default as Sutro}from"./sutro";export{default as Toaster}from"./toaster";export{default as Walden}from"./walden";export{default as NinteenSeventySeven}from"./ninteen-seventy-seven";export{default as Kelvin}from"./kelvin";export{default as Maven}from"./maven";export{default as Ginza}from"./ginza";export{default as Skyline}from"./skyline";export{default as Dogpatch}from"./dogpatch";export{default as Brooklyn}from"./brooklyn";export{default as Helena}from"./helena";export{default as Ashby}from"./ashby";export{default as Charmes}from"./charmes";
1
+ export { default as BlackAndWhite } from "./black-and-white";
2
+ export { default as Clarendon } from "./clarendon";
3
+ export { default as Gingham } from "./gingham";
4
+ export { default as Moon } from "./moon";
5
+ export { default as Lark } from "./lark";
6
+ export { default as Reyes } from "./reyes";
7
+ export { default as Juno } from "./juno";
8
+ export { default as Slumber } from "./slumber";
9
+ export { default as Crema } from "./crema";
10
+ export { default as Ludwig } from "./ludwig";
11
+ export { default as Aden } from "./aden";
12
+ export { default as Perpetua } from "./perpetua";
13
+ export { default as Amaro } from "./amaro";
14
+ export { default as Mayfair } from "./mayfair";
15
+ export { default as Rise } from "./rise";
16
+ export { default as Hudson } from "./hudson";
17
+ export { default as Valencia } from "./valencia";
18
+ export { default as XPro2 } from "./xpro2";
19
+ export { default as Sierra } from "./sierra";
20
+ export { default as Willow } from "./willow";
21
+ export { default as LoFi } from "./lo-fi";
22
+ export { default as Hefe } from "./hefe";
23
+ export { default as Nashville } from "./nashville";
24
+ export { default as Stinson } from "./stinson";
25
+ export { default as Vesper } from "./vesper";
26
+ export { default as Earlybird } from "./earlybird";
27
+ export { default as Brannan } from "./brannan";
28
+ export { default as Sutro } from "./sutro";
29
+ export { default as Toaster } from "./toaster";
30
+ export { default as Walden } from "./walden";
31
+ export { default as NinteenSeventySeven } from "./ninteen-seventy-seven";
32
+ export { default as Kelvin } from "./kelvin";
33
+ export { default as Maven } from "./maven";
34
+ export { default as Ginza } from "./ginza";
35
+ export { default as Skyline } from "./skyline";
36
+ export { default as Dogpatch } from "./dogpatch";
37
+ export { default as Brooklyn } from "./brooklyn";
38
+ export { default as Helena } from "./helena";
39
+ export { default as Ashby } from "./ashby";
40
+ export { default as Charmes } from "./charmes";
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var ADJUST_RGB_CONST=[1.01,1.04,1],SATURATION_CONST=.3;function Juno(a){BaseFilters.apply(a,BaseFilters.adjustRGB(ADJUST_RGB_CONST),BaseFilters.saturation(SATURATION_CONST))}Juno.filterName="Juno";export default Juno;
1
+ import BaseFilters from "./base-filters";
2
+ var ADJUST_RGB_CONST = [1.01, 1.04, 1];
3
+ var SATURATION_CONST = 0.3;
4
+ function Juno(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.adjustRGB(ADJUST_RGB_CONST), BaseFilters.saturation(SATURATION_CONST));
6
+ }
7
+ Juno.filterName = 'Juno';
8
+ export default Juno;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[255,140,0,.1],ADJUST_RGB_CONST=[1.15,1.05,1],SATURATION_CONST=.35;function Kelvin(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.adjustRGB(ADJUST_RGB_CONST),BaseFilters.saturation(SATURATION_CONST))}Kelvin.filterName="Kelvin";export default Kelvin;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [255, 140, 0, 0.1];
3
+ var ADJUST_RGB_CONST = [1.15, 1.05, 1];
4
+ var SATURATION_CONST = 0.35;
5
+ function Kelvin(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.adjustRGB(ADJUST_RGB_CONST), BaseFilters.saturation(SATURATION_CONST));
7
+ }
8
+ Kelvin.filterName = 'Kelvin';
9
+ export default Kelvin;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var BRIGHTNESS_CONST=.08,ADJUST_RGB_CONST=[1,1.03,1.05],SATURATION_CONST=.12;function Lark(a){BaseFilters.apply(a,BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.adjustRGB(ADJUST_RGB_CONST),BaseFilters.saturation(SATURATION_CONST))}Lark.filterName="Lark";export default Lark;
1
+ import BaseFilters from "./base-filters";
2
+ var BRIGHTNESS_CONST = 0.08;
3
+ var ADJUST_RGB_CONST = [1, 1.03, 1.05];
4
+ var SATURATION_CONST = 0.12;
5
+ function Lark(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.adjustRGB(ADJUST_RGB_CONST), BaseFilters.saturation(SATURATION_CONST));
7
+ }
8
+ Lark.filterName = 'Lark';
9
+ export default Lark;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var CONTRAST_CONST=.15,SATURATION_CONST=.2;function LoFi(a){BaseFilters.apply(a,BaseFilters.contrast(CONTRAST_CONST),BaseFilters.saturation(SATURATION_CONST))}LoFi.filterName="LoFi";export default LoFi;
1
+ import BaseFilters from "./base-filters";
2
+ var CONTRAST_CONST = 0.15;
3
+ var SATURATION_CONST = 0.2;
4
+ function LoFi(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.contrast(CONTRAST_CONST), BaseFilters.saturation(SATURATION_CONST));
6
+ }
7
+ LoFi.filterName = 'LoFi';
8
+ export default LoFi;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var BRIGHTNESS_CONST=.05,SATURATION_CONST=-.03;function Ludwig(a){BaseFilters.apply(a,BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.saturation(SATURATION_CONST))}Ludwig.filterName="Ludwig";export default Ludwig;
1
+ import BaseFilters from "./base-filters";
2
+ var BRIGHTNESS_CONST = 0.05;
3
+ var SATURATION_CONST = -0.03;
4
+ function Ludwig(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.saturation(SATURATION_CONST));
6
+ }
7
+ Ludwig.filterName = 'Ludwig';
8
+ export default Ludwig;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[225,240,0,.1],SATURATION_CONST=.25,CONTRAST_CONST=.05;function Maven(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.saturation(SATURATION_CONST),BaseFilters.contrast(CONTRAST_CONST))}Maven.filterName="Maven";export default Maven;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [225, 240, 0, 0.1];
3
+ var SATURATION_CONST = 0.25;
4
+ var CONTRAST_CONST = 0.05;
5
+ function Maven(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.saturation(SATURATION_CONST), BaseFilters.contrast(CONTRAST_CONST));
7
+ }
8
+ Maven.filterName = 'Maven';
9
+ export default Maven;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[230,115,108,.05],SATURATION_CONST=.15;function Mayfair(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.saturation(SATURATION_CONST))}Mayfair.filterName="Mayfair";export default Mayfair;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [230, 115, 108, 0.05];
3
+ var SATURATION_CONST = 0.15;
4
+ function Mayfair(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.saturation(SATURATION_CONST));
6
+ }
7
+ Mayfair.filterName = 'Mayfair';
8
+ export default Mayfair;
@@ -1 +1,7 @@
1
- import BaseFilters from"./base-filters";var BRIGHTNESS_CONST=.1;function Moon(a){BaseFilters.apply(a,BaseFilters.grayscale(),BaseFilters.brightness(BRIGHTNESS_CONST))}Moon.filterName="Moon";export default Moon;
1
+ import BaseFilters from "./base-filters";
2
+ var BRIGHTNESS_CONST = 0.1;
3
+ function Moon(imageData) {
4
+ BaseFilters.apply(imageData, BaseFilters.grayscale(), BaseFilters.brightness(BRIGHTNESS_CONST));
5
+ }
6
+ Moon.filterName = 'Moon';
7
+ export default Moon;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[220,115,188,.12],CONTRAST_CONST=-.05;function Nashville(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.contrast(CONTRAST_CONST))}Nashville.filterName="Nashville";export default Nashville;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [220, 115, 188, 0.12];
3
+ var CONTRAST_CONST = -0.05;
4
+ function Nashville(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.contrast(CONTRAST_CONST));
6
+ }
7
+ Nashville.filterName = 'Nashville';
8
+ export default Nashville;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[255,25,0,.15],BRIGHTNESS_CONST=.1;function NinteenSeventySeven(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.brightness(BRIGHTNESS_CONST))}NinteenSeventySeven.filterName="NinteenSeventySeven";export default NinteenSeventySeven;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [255, 25, 0, 0.15];
3
+ var BRIGHTNESS_CONST = 0.1;
4
+ function NinteenSeventySeven(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.brightness(BRIGHTNESS_CONST));
6
+ }
7
+ NinteenSeventySeven.filterName = 'NinteenSeventySeven';
8
+ export default NinteenSeventySeven;
@@ -1 +1,7 @@
1
- import BaseFilters from"./base-filters";var ADJUST_RGB_CONST=[1.05,1.1,1];function Perpetua(a){BaseFilters.apply(a,BaseFilters.adjustRGB(ADJUST_RGB_CONST))}Perpetua.filterName="Perpetua";export default Perpetua;
1
+ import BaseFilters from "./base-filters";
2
+ var ADJUST_RGB_CONST = [1.05, 1.1, 1];
3
+ function Perpetua(imageData) {
4
+ BaseFilters.apply(imageData, BaseFilters.adjustRGB(ADJUST_RGB_CONST));
5
+ }
6
+ Perpetua.filterName = 'Perpetua';
7
+ export default Perpetua;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var SEPIA_CONST=.4,BRIGHTNESS_CONST=.13,CONTRAST_CONST=-.05;function Reyes(a){BaseFilters.apply(a,BaseFilters.sepia(SEPIA_CONST),BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.contrast(CONTRAST_CONST))}Reyes.filterName="Reyes";export default Reyes;
1
+ import BaseFilters from "./base-filters";
2
+ var SEPIA_CONST = 0.4;
3
+ var BRIGHTNESS_CONST = 0.13;
4
+ var CONTRAST_CONST = -0.05;
5
+ function Reyes(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.sepia(SEPIA_CONST), BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.contrast(CONTRAST_CONST));
7
+ }
8
+ Reyes.filterName = 'Reyes';
9
+ export default Reyes;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[255,170,0,.1],BRIGHTNESS_CONST=.09,SATURATION_CONST=.1;function Rise(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.saturation(SATURATION_CONST))}Rise.filterName="Rise";export default Rise;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [255, 170, 0, 0.1];
3
+ var BRIGHTNESS_CONST = 0.09;
4
+ var SATURATION_CONST = 0.1;
5
+ function Rise(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.saturation(SATURATION_CONST));
7
+ }
8
+ Rise.filterName = 'Rise';
9
+ export default Rise;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var CONTRAST_CONST=-.15,SATURATION_CONST=.1;function Sierra(a){BaseFilters.apply(a,BaseFilters.contrast(CONTRAST_CONST),BaseFilters.saturation(SATURATION_CONST))}Sierra.filterName="Sierra";export default Sierra;
1
+ import BaseFilters from "./base-filters";
2
+ var CONTRAST_CONST = -0.15;
3
+ var SATURATION_CONST = 0.1;
4
+ function Sierra(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.contrast(CONTRAST_CONST), BaseFilters.saturation(SATURATION_CONST));
6
+ }
7
+ Sierra.filterName = 'Sierra';
8
+ export default Sierra;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var SATURATION_CONST=.35,BRIGHTNESS_CONST=.1;function Skyline(a){BaseFilters.apply(a,BaseFilters.saturation(SATURATION_CONST),BaseFilters.brightness(BRIGHTNESS_CONST))}Skyline.filterName="Skyline";export default Skyline;
1
+ import BaseFilters from "./base-filters";
2
+ var SATURATION_CONST = 0.35;
3
+ var BRIGHTNESS_CONST = 0.1;
4
+ function Skyline(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.saturation(SATURATION_CONST), BaseFilters.brightness(BRIGHTNESS_CONST));
6
+ }
7
+ Skyline.filterName = 'Skyline';
8
+ export default Skyline;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var BRIGHTNESS_CONST=.1,SATURATION_CONST=-.5;function Slumber(a){BaseFilters.apply(a,BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.saturation(SATURATION_CONST))}Slumber.filterName="Slumber";export default Slumber;
1
+ import BaseFilters from "./base-filters";
2
+ var BRIGHTNESS_CONST = 0.1;
3
+ var SATURATION_CONST = -0.5;
4
+ function Slumber(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.saturation(SATURATION_CONST));
6
+ }
7
+ Slumber.filterName = 'Slumber';
8
+ export default Slumber;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var BRIGHTNESS_CONST=.1,SEPIA_CONST=.3;function Stinson(a){BaseFilters.apply(a,BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.sepia(SEPIA_CONST))}Stinson.filterName="Stinson";export default Stinson;
1
+ import BaseFilters from "./base-filters";
2
+ var BRIGHTNESS_CONST = 0.1;
3
+ var SEPIA_CONST = 0.3;
4
+ function Stinson(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.sepia(SEPIA_CONST));
6
+ }
7
+ Stinson.filterName = 'Stinson';
8
+ export default Stinson;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var BRIGHTNESS_CONST=-.1,SATURATION_CONST=-.1;function Sutro(a){BaseFilters.apply(a,BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.saturation(SATURATION_CONST))}Sutro.filterName="Sutro";export default Sutro;
1
+ import BaseFilters from "./base-filters";
2
+ var BRIGHTNESS_CONST = -0.1;
3
+ var SATURATION_CONST = -0.1;
4
+ function Sutro(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.saturation(SATURATION_CONST));
6
+ }
7
+ Sutro.filterName = 'Sutro';
8
+ export default Sutro;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var SEPIA_CONST=.1,COLOR_FILTER_CONST=[255,145,0,.2];function Toaster(a){BaseFilters.apply(a,BaseFilters.sepia(SEPIA_CONST),BaseFilters.colorFilter(COLOR_FILTER_CONST))}Toaster.filterName="Toaster";export default Toaster;
1
+ import BaseFilters from "./base-filters";
2
+ var SEPIA_CONST = 0.1;
3
+ var COLOR_FILTER_CONST = [255, 145, 0, 0.2];
4
+ function Toaster(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.sepia(SEPIA_CONST), BaseFilters.colorFilter(COLOR_FILTER_CONST));
6
+ }
7
+ Toaster.filterName = 'Toaster';
8
+ export default Toaster;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[255,225,80,.08],SATURATION_CONST=.1,CONTRAST_CONST=.05;function Valencia(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.saturation(SATURATION_CONST),BaseFilters.contrast(CONTRAST_CONST))}Valencia.filterName="Valencia";export default Valencia;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [255, 225, 80, 0.08];
3
+ var SATURATION_CONST = 0.1;
4
+ var CONTRAST_CONST = 0.05;
5
+ function Valencia(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.saturation(SATURATION_CONST), BaseFilters.contrast(CONTRAST_CONST));
7
+ }
8
+ Valencia.filterName = 'Valencia';
9
+ export default Valencia;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[255,225,0,.05],BRIGHTNESS_CONST=.06,CONTRAST_CONST=.06;function Vesper(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.contrast(CONTRAST_CONST))}Vesper.filterName="Vesper";export default Vesper;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [255, 225, 0, 0.05];
3
+ var BRIGHTNESS_CONST = 0.06;
4
+ var CONTRAST_CONST = 0.06;
5
+ function Vesper(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.contrast(CONTRAST_CONST));
7
+ }
8
+ Vesper.filterName = 'Vesper';
9
+ export default Vesper;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var BRIGHTNESS_CONST=.1,COLOR_FILTER_CONST=[255,255,0,.2];function Walden(a){BaseFilters.apply(a,BaseFilters.brightness(BRIGHTNESS_CONST),BaseFilters.colorFilter(COLOR_FILTER_CONST))}Walden.filterName="Walden";export default Walden;
1
+ import BaseFilters from "./base-filters";
2
+ var BRIGHTNESS_CONST = 0.1;
3
+ var COLOR_FILTER_CONST = [255, 255, 0, 0.2];
4
+ function Walden(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.brightness(BRIGHTNESS_CONST), BaseFilters.colorFilter(COLOR_FILTER_CONST));
6
+ }
7
+ Walden.filterName = 'Walden';
8
+ export default Walden;
@@ -1 +1,8 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[100,28,210,.03],BRIGHTNESS_CONST=.1;function Willow(a){BaseFilters.apply(a,BaseFilters.grayscale(),BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.brightness(BRIGHTNESS_CONST))}Willow.filterName="Willow";export default Willow;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [100, 28, 210, 0.03];
3
+ var BRIGHTNESS_CONST = 0.1;
4
+ function Willow(imageData) {
5
+ BaseFilters.apply(imageData, BaseFilters.grayscale(), BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.brightness(BRIGHTNESS_CONST));
6
+ }
7
+ Willow.filterName = 'Willow';
8
+ export default Willow;
@@ -1 +1,9 @@
1
- import BaseFilters from"./base-filters";var COLOR_FILTER_CONST=[255,255,0,.07],SATURATION_CONST=.2,CONTRAST_CONST=.15;function XPro2(a){BaseFilters.apply(a,BaseFilters.colorFilter(COLOR_FILTER_CONST),BaseFilters.saturation(SATURATION_CONST),BaseFilters.contrast(CONTRAST_CONST))}XPro2.filterName="XPro2";export default XPro2;
1
+ import BaseFilters from "./base-filters";
2
+ var COLOR_FILTER_CONST = [255, 255, 0, 0.07];
3
+ var SATURATION_CONST = 0.2;
4
+ var CONTRAST_CONST = 0.15;
5
+ function XPro2(imageData) {
6
+ BaseFilters.apply(imageData, BaseFilters.colorFilter(COLOR_FILTER_CONST), BaseFilters.saturation(SATURATION_CONST), BaseFilters.contrast(CONTRAST_CONST));
7
+ }
8
+ XPro2.filterName = 'XPro2';
9
+ export default XPro2;
@@ -1 +1,19 @@
1
- import Konva from"konva";import{Factory as KonvaFactory}from"konva/lib/Factory";import{getNumberValidator as konvaGetNumberValidator}from"konva/lib/Validators";function CustomThreshold(a){for(var b=this.threshold(),c=a.data,d=c.length,e=0;e<d;e+=4)0===b||(c[e]=c[e]>=b?255:0,c[e+1]=c[e+1]>=b?255:0,c[e+2]=c[e+2]>=b?255:0)}CustomThreshold.finetuneName="CustomThreshold";export default CustomThreshold;KonvaFactory.addGetterSetter(Konva.Image,"threshold",0,konvaGetNumberValidator(),KonvaFactory.afterSetFilter);
1
+ import Konva from 'konva';
2
+ import { Factory as KonvaFactory } from 'konva/lib/Factory';
3
+ import { getNumberValidator as konvaGetNumberValidator } from 'konva/lib/Validators';
4
+ function CustomThreshold(imageData) {
5
+ var thresholdValue = this.threshold();
6
+ var isZeroThreshold = thresholdValue === 0;
7
+ var pixels = imageData.data;
8
+ var len = pixels.length;
9
+ for (var i = 0; i < len; i += 4) {
10
+ if (!isZeroThreshold) {
11
+ pixels[i] = pixels[i] >= thresholdValue ? 255 : 0;
12
+ pixels[i + 1] = pixels[i + 1] >= thresholdValue ? 255 : 0;
13
+ pixels[i + 2] = pixels[i + 2] >= thresholdValue ? 255 : 0;
14
+ }
15
+ }
16
+ }
17
+ CustomThreshold.finetuneName = 'CustomThreshold';
18
+ export default CustomThreshold;
19
+ KonvaFactory.addGetterSetter(Konva.Image, 'threshold', 0, konvaGetNumberValidator(), KonvaFactory.afterSetFilter);
@@ -1 +1,2 @@
1
- export{default as Warmth}from"./warmth";export{default as CustomThreshold}from"./custom-threshold";
1
+ export { default as Warmth } from "./warmth";
2
+ export { default as CustomThreshold } from "./custom-threshold";
@@ -1 +1,15 @@
1
- import Konva from"konva";import{Factory as KonvaFactory}from"konva/lib/Factory";import{getNumberValidator as konvaGetNumberValidator}from"konva/lib/Validators";function Warmth(a){for(var b=this.warmth(),c=a.data,d=c.length,e=0;e<d;e+=4)c[e]+=b,c[e+2]-=b}Warmth.finetuneName="Warmth";export default Warmth;KonvaFactory.addGetterSetter(Konva.Image,"warmth",0,konvaGetNumberValidator(),KonvaFactory.afterSetFilter);
1
+ import Konva from 'konva';
2
+ import { Factory as KonvaFactory } from 'konva/lib/Factory';
3
+ import { getNumberValidator as konvaGetNumberValidator } from 'konva/lib/Validators';
4
+ function Warmth(imageData) {
5
+ var warmthValue = this.warmth();
6
+ var pixels = imageData.data;
7
+ var len = pixels.length;
8
+ for (var i = 0; i < len; i += 4) {
9
+ pixels[i] += warmthValue;
10
+ pixels[i + 2] -= warmthValue;
11
+ }
12
+ }
13
+ Warmth.finetuneName = 'Warmth';
14
+ export default Warmth;
15
+ KonvaFactory.addGetterSetter(Konva.Image, 'warmth', 0, konvaGetNumberValidator(), KonvaFactory.afterSetFilter);
package/lib/demo/app.js CHANGED
@@ -1 +1,175 @@
1
- import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import"@fontsource/outfit/400.css";import"@fontsource/outfit/500.css";import"@fontsource/outfit/600.css";import AddPhotoAlternateIcon from"@mui/icons-material/AddPhotoAlternate";import{Box,Typography}from"@mui/material";import{SButton,SCheckbox,SFlexBox,SThemeProvider}from"@solostylist/ui-kit/core";import{useCallback,useRef,useState}from"react";import ImageEditorComponent,{TABS}from"..";import SLazyImage from"@solostylist/ui-kit/s-lazy-image/s-lazy-image";var DEFAULT_IMAGES=["_(1).png","_(2).png","_(3).png","_(4).png"],ALL_TABS=[TABS.ADJUST,TABS.FINETUNE,TABS.FILTERS,TABS.WATERMARK,TABS.ANNOTATE,TABS.RESIZE],TAB_OPTIONS=[{id:"adjust",label:"Adjust",tab:TABS.ADJUST},{id:"finetune",label:"Finetune",tab:TABS.FINETUNE},{id:"filters",label:"Filters",tab:TABS.FILTERS},{id:"watermark",label:"Watermark",tab:TABS.WATERMARK},{id:"annotate",label:"Draw",tab:TABS.ANNOTATE},{id:"resize",label:"Resize",tab:TABS.RESIZE}],DemoApp=function(){var a=useState([].concat(ALL_TABS)),b=_slicedToArray(a,2),c=b[0],d=b[1],e=useState([].concat(DEFAULT_IMAGES)),f=_slicedToArray(e,2),g=f[0],h=f[1],i=useState(DEFAULT_IMAGES[0]),j=_slicedToArray(i,2),k=j[0],l=j[1],m=useRef(null),n=useCallback(function(a){return function(b){d(function(c){return b.target.checked?c.includes(a)?c:[].concat(_toConsumableArray(c),[a]):1===c.length?c:c.filter(function(b){return b!==a})})}},[]),o=useCallback(function(a){l(a)},[]),p=useCallback(function(){var a;null===(a=m.current)||void 0===a||a.click()},[]),q=useCallback(function(a){var b=a.target.files;if(b&&0!==b.length){var c=URL.createObjectURL(b[0]);h(function(a){return[].concat(_toConsumableArray(a),[c])}),l(c),a.target.value=""}},[]),r=useCallback(function(a){var b,c=a.imageBase64,d=null!==(b=a.fullName)&&void 0!==b?b:"image",e=document.createElement("a");e.href=null!==c&&void 0!==c?c:"",e.download=d,e.style.cssText="position:absolute;z-index:-111;visibility:none;",document.body.appendChild(e),e.click(),document.body.removeChild(e)},[]),s=TAB_OPTIONS.slice(0,3),t=TAB_OPTIONS.slice(3);return React.createElement(SThemeProvider,{defaultMode:"dark"},React.createElement(SFlexBox,{width:"100%",gap:3},React.createElement(Box,null,React.createElement(Typography,{variant:"subtitle1"},"Images"),React.createElement(Box,{display:"flex",flexWrap:"wrap",gap:1,mb:2},g.map(function(a){return React.createElement(Box,{key:a,sx:{width:56,height:56,cursor:"pointer",border:"2px solid",borderRadius:1,borderColor:a===k?"primary.main":"divider",transition:"border-color 0.2s","&:hover":{borderColor:"primary.main"}}},React.createElement(SLazyImage,{onClick:function(){return o(a)},src:a}))})),React.createElement("input",{ref:m,type:"file",accept:"image/*",onChange:q,style:{display:"none"}}),React.createElement(SButton,{variant:"outlined",startIcon:React.createElement(AddPhotoAlternateIcon,null),onClick:p,fullWidth:!0,sx:{mb:3}},"Add Image"),React.createElement(Typography,{variant:"subtitle1"},"Tabs"),React.createElement(SFlexBox,{sx:{gap:2}},React.createElement(Box,null,s.map(function(a){return React.createElement(SCheckbox,{key:a.id,checked:c.includes(a.tab),onChange:n(a.tab),content:a.label})})),React.createElement(Box,null,t.map(function(a){return React.createElement(SCheckbox,{key:a.id,checked:c.includes(a.tab),onChange:n(a.tab),content:a.label})})))),React.createElement(ImageEditorComponent,{source:k,tabsIds:c,defaultTabId:TABS.ADJUST,observePluginContainerSize:!0,onSave:r,resetOnImageSourceChange:!0})))};export default DemoApp;
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import '@fontsource/outfit/400.css';
4
+ import '@fontsource/outfit/500.css';
5
+ import '@fontsource/outfit/600.css';
6
+ import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
7
+ import { Box, Typography } from '@mui/material';
8
+ import { SButton, SCheckbox, SFlexBox, SThemeProvider } from '@solostylist/ui-kit/core';
9
+ import { useCallback, useRef, useState } from 'react';
10
+ import ImageEditorComponent, { TABS } from '..';
11
+ import SLazyImage from '@solostylist/ui-kit/s-lazy-image/s-lazy-image';
12
+ var DEFAULT_IMAGES = ['_(1).png', '_(2).png', '_(3).png', '_(4).png'];
13
+ var ALL_TABS = [TABS.ADJUST, TABS.FINETUNE, TABS.FILTERS, TABS.WATERMARK, TABS.ANNOTATE, TABS.RESIZE];
14
+ var TAB_OPTIONS = [{
15
+ id: 'adjust',
16
+ label: 'Adjust',
17
+ tab: TABS.ADJUST
18
+ }, {
19
+ id: 'finetune',
20
+ label: 'Finetune',
21
+ tab: TABS.FINETUNE
22
+ }, {
23
+ id: 'filters',
24
+ label: 'Filters',
25
+ tab: TABS.FILTERS
26
+ }, {
27
+ id: 'watermark',
28
+ label: 'Watermark',
29
+ tab: TABS.WATERMARK
30
+ }, {
31
+ id: 'annotate',
32
+ label: 'Draw',
33
+ tab: TABS.ANNOTATE
34
+ }, {
35
+ id: 'resize',
36
+ label: 'Resize',
37
+ tab: TABS.RESIZE
38
+ }];
39
+ var DemoApp = function DemoApp() {
40
+ var _useState = useState([].concat(ALL_TABS)),
41
+ _useState2 = _slicedToArray(_useState, 2),
42
+ selectedTabs = _useState2[0],
43
+ setSelectedTabs = _useState2[1];
44
+ var _useState3 = useState([].concat(DEFAULT_IMAGES)),
45
+ _useState4 = _slicedToArray(_useState3, 2),
46
+ imageSrcs = _useState4[0],
47
+ setImageSrcs = _useState4[1];
48
+ var _useState5 = useState(DEFAULT_IMAGES[0]),
49
+ _useState6 = _slicedToArray(_useState5, 2),
50
+ activeImageSrc = _useState6[0],
51
+ setActiveImageSrc = _useState6[1];
52
+ var fileInputRef = useRef(null);
53
+ var handleTabToggle = useCallback(function (tab) {
54
+ return function (e) {
55
+ setSelectedTabs(function (prev) {
56
+ if (e.target.checked) {
57
+ return prev.includes(tab) ? prev : [].concat(_toConsumableArray(prev), [tab]);
58
+ }
59
+ if (prev.length === 1) return prev;
60
+ return prev.filter(function (t) {
61
+ return t !== tab;
62
+ });
63
+ });
64
+ };
65
+ }, []);
66
+ var handleImageClick = useCallback(function (src) {
67
+ setActiveImageSrc(src);
68
+ }, []);
69
+ var handleUploadClick = useCallback(function () {
70
+ var _fileInputRef$current;
71
+ (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 || _fileInputRef$current.click();
72
+ }, []);
73
+ var handleFileChange = useCallback(function (e) {
74
+ var files = e.target.files;
75
+ if (!files || files.length === 0) return;
76
+ var objectUrl = URL.createObjectURL(files[0]);
77
+ setImageSrcs(function (prev) {
78
+ return [].concat(_toConsumableArray(prev), [objectUrl]);
79
+ });
80
+ setActiveImageSrc(objectUrl);
81
+ e.target.value = '';
82
+ }, []);
83
+ var handleSave = useCallback(function (imageInfo) {
84
+ var _imageInfo$fullName;
85
+ var url = imageInfo.imageBase64;
86
+ var fileName = (_imageInfo$fullName = imageInfo.fullName) !== null && _imageInfo$fullName !== void 0 ? _imageInfo$fullName : 'image';
87
+ var tmpLink = document.createElement('a');
88
+ tmpLink.href = url !== null && url !== void 0 ? url : '';
89
+ tmpLink.download = fileName;
90
+ tmpLink.style.cssText = 'position:absolute;z-index:-111;visibility:none;';
91
+ document.body.appendChild(tmpLink);
92
+ tmpLink.click();
93
+ document.body.removeChild(tmpLink);
94
+ }, []);
95
+ var leftColumn = TAB_OPTIONS.slice(0, 3);
96
+ var rightColumn = TAB_OPTIONS.slice(3);
97
+ return React.createElement(SThemeProvider, {
98
+ defaultMode: "dark"
99
+ }, React.createElement(SFlexBox, {
100
+ width: "100%",
101
+ gap: 3
102
+ }, React.createElement(Box, null, React.createElement(Typography, {
103
+ variant: "subtitle1"
104
+ }, "Images"), React.createElement(Box, {
105
+ display: "flex",
106
+ flexWrap: "wrap",
107
+ gap: 1,
108
+ mb: 2
109
+ }, imageSrcs.map(function (src) {
110
+ return React.createElement(Box, {
111
+ key: src,
112
+ sx: {
113
+ width: 56,
114
+ height: 56,
115
+ cursor: 'pointer',
116
+ border: '2px solid',
117
+ borderRadius: 1,
118
+ borderColor: src === activeImageSrc ? 'primary.main' : 'divider',
119
+ transition: 'border-color 0.2s',
120
+ '&:hover': {
121
+ borderColor: 'primary.main'
122
+ }
123
+ }
124
+ }, React.createElement(SLazyImage, {
125
+ onClick: function onClick() {
126
+ return handleImageClick(src);
127
+ },
128
+ src: src
129
+ }));
130
+ })), React.createElement("input", {
131
+ ref: fileInputRef,
132
+ type: "file",
133
+ accept: "image/*",
134
+ onChange: handleFileChange,
135
+ style: {
136
+ display: 'none'
137
+ }
138
+ }), React.createElement(SButton, {
139
+ variant: "outlined",
140
+ startIcon: React.createElement(AddPhotoAlternateIcon, null),
141
+ onClick: handleUploadClick,
142
+ fullWidth: true,
143
+ sx: {
144
+ mb: 3
145
+ }
146
+ }, "Add Image"), React.createElement(Typography, {
147
+ variant: "subtitle1"
148
+ }, "Tabs"), React.createElement(SFlexBox, {
149
+ sx: {
150
+ gap: 2
151
+ }
152
+ }, React.createElement(Box, null, leftColumn.map(function (opt) {
153
+ return React.createElement(SCheckbox, {
154
+ key: opt.id,
155
+ checked: selectedTabs.includes(opt.tab),
156
+ onChange: handleTabToggle(opt.tab),
157
+ content: opt.label
158
+ });
159
+ })), React.createElement(Box, null, rightColumn.map(function (opt) {
160
+ return React.createElement(SCheckbox, {
161
+ key: opt.id,
162
+ checked: selectedTabs.includes(opt.tab),
163
+ onChange: handleTabToggle(opt.tab),
164
+ content: opt.label
165
+ });
166
+ })))), React.createElement(ImageEditorComponent, {
167
+ source: activeImageSrc,
168
+ tabsIds: selectedTabs,
169
+ defaultTabId: TABS.ADJUST,
170
+ observePluginContainerSize: true,
171
+ onSave: handleSave,
172
+ resetOnImageSourceChange: true
173
+ })));
174
+ };
175
+ export default DemoApp;
package/lib/demo/index.js CHANGED
@@ -1 +1 @@
1
- export{default}from"./app";
1
+ export { default } from "./app";
@@ -1 +1,12 @@
1
- export{default as useFinetune}from"./use-finetune";export{default as useFilter}from"./use-filter";export{default as useAnnotation}from"./use-annotation";export{default as useAppReducer}from"./use-app-reducer";export{default as useAnnotationEvents}from"./use-annotation-events";export{default as useResizeObserver}from"./use-resize-observer";export{default as useDebouncedCallback}from"./use-debounced-callback";export{default as useStore}from"./use-store";export{default as useDrag}from"./use-drag";export{default as usePhoneScreen}from"./use-phone-screen";export{default as useTransformedImgData}from"./use-transformed-img-data";export{default as usePopover}from"./use-popover";
1
+ export { default as useFinetune } from "./use-finetune";
2
+ export { default as useFilter } from "./use-filter";
3
+ export { default as useAnnotation } from "./use-annotation";
4
+ export { default as useAppReducer } from "./use-app-reducer";
5
+ export { default as useAnnotationEvents } from "./use-annotation-events";
6
+ export { default as useResizeObserver } from "./use-resize-observer";
7
+ export { default as useDebouncedCallback } from "./use-debounced-callback";
8
+ export { default as useStore } from "./use-store";
9
+ export { default as useDrag } from "./use-drag";
10
+ export { default as usePhoneScreen } from "./use-phone-screen";
11
+ export { default as useTransformedImgData } from "./use-transformed-img-data";
12
+ export { default as usePopover } from "./use-popover";
@@ -1 +1,14 @@
1
- var getBoundingRectUnScaled=function(a,b,c){var d=a||{},e=b||{},f={},g=c.parent.attrs;return f.x=Math.min(d.offsetX,e.startedX)-g.xPadding||0,f.y=Math.min(d.offsetY,e.startedY)-g.yPadding||0,f.width=d.offsetX-e.startedX,f.height=d.offsetY-e.startedY,f.startedX=e.startedX-g.xPadding||0,f.startedY=e.startedY-g.yPadding||0,f};export default getBoundingRectUnScaled;
1
+ var getBoundingRectUnScaled = function getBoundingRectUnScaled(pointerOffsetsProp, pointerDownProp, previewGroup) {
2
+ var pointerOffsets = pointerOffsetsProp || {};
3
+ var pointerDown = pointerDownProp || {};
4
+ var boundingRect = {};
5
+ var parentAttrs = previewGroup.parent.attrs;
6
+ boundingRect.x = Math.min(pointerOffsets.offsetX, pointerDown.startedX) - parentAttrs.xPadding || 0;
7
+ boundingRect.y = Math.min(pointerOffsets.offsetY, pointerDown.startedY) - parentAttrs.yPadding || 0;
8
+ boundingRect.width = pointerOffsets.offsetX - pointerDown.startedX;
9
+ boundingRect.height = pointerOffsets.offsetY - pointerDown.startedY;
10
+ boundingRect.startedX = pointerDown.startedX - parentAttrs.xPadding || 0;
11
+ boundingRect.startedY = pointerDown.startedY - parentAttrs.yPadding || 0;
12
+ return boundingRect;
13
+ };
14
+ export default getBoundingRectUnScaled;