@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.
- package/lib/actions/add-filter.js +11 -1
- package/lib/actions/change-pointer-icon.js +10 -1
- package/lib/actions/change-rotation.js +13 -1
- package/lib/actions/clear-annotations-selections.js +10 -1
- package/lib/actions/duplicate-annotations.js +26 -1
- package/lib/actions/enable-text-content-edit.js +10 -1
- package/lib/actions/hide-loader.js +10 -1
- package/lib/actions/index.js +36 -1
- package/lib/actions/redo.js +27 -1
- package/lib/actions/remove-annotations.js +27 -1
- package/lib/actions/reset.js +26 -1
- package/lib/actions/select-annotation.js +27 -1
- package/lib/actions/select-tab.js +16 -1
- package/lib/actions/select-tool.js +11 -1
- package/lib/actions/set-annotation.js +28 -1
- package/lib/actions/set-canvas-size.js +31 -1
- package/lib/actions/set-crop.js +25 -1
- package/lib/actions/set-feedback.js +11 -1
- package/lib/actions/set-finetune.js +13 -1
- package/lib/actions/set-latest-color.js +10 -1
- package/lib/actions/set-original-image.js +13 -1
- package/lib/actions/set-resize.js +14 -1
- package/lib/actions/set-saved.js +10 -1
- package/lib/actions/set-saving.js +11 -1
- package/lib/actions/set-show-tabs-menu.js +10 -1
- package/lib/actions/set-shown-image-dimensions.js +12 -1
- package/lib/actions/show-loader.js +10 -1
- package/lib/actions/toggle-flip.js +13 -1
- package/lib/actions/toggle-original-image-display.js +10 -1
- package/lib/actions/undo.js +27 -1
- package/lib/actions/update-state.js +7 -1
- package/lib/actions/zoom-canvas.js +37 -1
- package/lib/components/app/index.js +283 -1
- package/lib/components/assembly-point/index.js +23 -1
- package/lib/components/common/annotation-options/annotation-options.constants.js +10 -1
- package/lib/components/common/annotation-options/index.js +140 -1
- package/lib/components/common/annotation-options/opacity-field.js +23 -1
- package/lib/components/common/annotation-options/position-fields.js +39 -1
- package/lib/components/common/annotation-options/shadow-fields.js +62 -1
- package/lib/components/common/annotation-options/stroke-fields.js +33 -1
- package/lib/components/common/button-with-menu/index.js +86 -1
- package/lib/components/common/color-input/index.js +101 -1
- package/lib/components/common/color-picker-modal/index.js +70 -1
- package/lib/components/common/hidden-upload-input/index.js +17 -1
- package/lib/components/common/icon-wrapper/index.js +40 -1
- package/lib/components/common/image-preview-tile/index.js +57 -1
- package/lib/components/common/slider/index.js +38 -1
- package/lib/components/feedback-popup/index.js +41 -1
- package/lib/components/layers/design-layer/annotation-nodes/annotation-nodes.constants.js +10 -1
- package/lib/components/layers/design-layer/annotation-nodes/arrow-node.js +62 -1
- package/lib/components/layers/design-layer/annotation-nodes/ellipse-node.js +64 -1
- package/lib/components/layers/design-layer/annotation-nodes/image-node.js +78 -1
- package/lib/components/layers/design-layer/annotation-nodes/index.js +22 -1
- package/lib/components/layers/design-layer/annotation-nodes/line-node.js +60 -1
- package/lib/components/layers/design-layer/annotation-nodes/memoized-annotation.js +16 -1
- package/lib/components/layers/design-layer/annotation-nodes/polygon-node.js +63 -1
- package/lib/components/layers/design-layer/annotation-nodes/rect-node.js +65 -1
- package/lib/components/layers/design-layer/annotation-nodes/text-node.js +80 -1
- package/lib/components/layers/design-layer/index.js +202 -1
- package/lib/components/layers/design-layer/nodes-common-prop-types.js +16 -1
- package/lib/components/layers/design-layer/preview-group.js +9 -1
- package/lib/components/layers/index.js +2 -1
- package/lib/components/layers/transformers-layer/crop-transformer.js +248 -1
- package/lib/components/layers/transformers-layer/index.js +16 -1
- package/lib/components/layers/transformers-layer/nodes-transformer.js +73 -1
- package/lib/components/layers/transformers-layer/transformers-layer.utils.js +93 -1
- package/lib/components/main-canvas/canvas-node.js +177 -1
- package/lib/components/main-canvas/index.js +51 -1
- package/lib/components/main-canvas/touch-zooming-events.js +69 -1
- package/lib/components/node-controls/index.js +79 -1
- package/lib/components/tabs/index.js +66 -1
- package/lib/components/tabs/tabs.constants.js +27 -1
- package/lib/components/tabs-drawer/index.js +109 -1
- package/lib/components/tools/arrow/arrow-button.js +17 -1
- package/lib/components/tools/arrow/arrow-options.js +19 -1
- package/lib/components/tools/arrow/index.js +2 -1
- package/lib/components/tools/blur/blur-options.js +35 -1
- package/lib/components/tools/blur/blur.js +17 -1
- package/lib/components/tools/blur/index.js +2 -1
- package/lib/components/tools/brightness/brightness-options.js +36 -1
- package/lib/components/tools/brightness/brightness.js +17 -1
- package/lib/components/tools/brightness/index.js +2 -1
- package/lib/components/tools/contrast/contrast-options.js +35 -1
- package/lib/components/tools/contrast/contrast.js +17 -1
- package/lib/components/tools/contrast/index.js +2 -1
- package/lib/components/tools/crop/crop.constants.js +31 -1
- package/lib/components/tools/crop/crop.js +122 -1
- package/lib/components/tools/crop/index.js +1 -1
- package/lib/components/tools/ellipse/ellipse-button.js +17 -1
- package/lib/components/tools/ellipse/ellipse-options.js +17 -1
- package/lib/components/tools/ellipse/index.js +2 -1
- package/lib/components/tools/filters/filter-item.js +77 -1
- package/lib/components/tools/filters/filters.constants.js +139 -1
- package/lib/components/tools/filters/filters.js +74 -1
- package/lib/components/tools/filters/index.js +1 -1
- package/lib/components/tools/flip/flip-x.js +48 -1
- package/lib/components/tools/flip/flip-y.js +50 -1
- package/lib/components/tools/flip/index.js +2 -1
- package/lib/components/tools/hsv/hsv.js +17 -1
- package/lib/components/tools/hsv/hsvoptions.js +60 -1
- package/lib/components/tools/hsv/index.js +2 -1
- package/lib/components/tools/image/image-button.js +17 -1
- package/lib/components/tools/image/image-controls.js +12 -1
- package/lib/components/tools/image/image-options.js +162 -1
- package/lib/components/tools/image/images-gallery.js +55 -1
- package/lib/components/tools/image/index.js +2 -1
- package/lib/components/tools/line/index.js +2 -1
- package/lib/components/tools/line/line-button.js +17 -1
- package/lib/components/tools/line/line-options.js +19 -1
- package/lib/components/tools/pen/index.js +2 -1
- package/lib/components/tools/pen/pen-button.js +17 -1
- package/lib/components/tools/pen/pen-options.js +120 -1
- package/lib/components/tools/polygon/index.js +2 -1
- package/lib/components/tools/polygon/polygon-button.js +17 -1
- package/lib/components/tools/polygon/polygon-options.js +22 -1
- package/lib/components/tools/polygon/polygon-sides-field.js +23 -1
- package/lib/components/tools/polygon/polygon.constants.js +10 -1
- package/lib/components/tools/rect/index.js +2 -1
- package/lib/components/tools/rect/rect-button.js +17 -1
- package/lib/components/tools/rect/rect-corner-field.js +24 -1
- package/lib/components/tools/rect/rect-options.js +21 -1
- package/lib/components/tools/rect/rect.constants.js +10 -1
- package/lib/components/tools/resize/index.js +1 -1
- package/lib/components/tools/resize/resize.js +141 -1
- package/lib/components/tools/rotate/index.js +2 -1
- package/lib/components/tools/rotate/rotate-button.js +17 -1
- package/lib/components/tools/rotate/rotate-options.js +97 -1
- package/lib/components/tools/text/index.js +2 -1
- package/lib/components/tools/text/text-button.js +17 -1
- package/lib/components/tools/text/text-options/handle-text-change-area.js +122 -1
- package/lib/components/tools/text/text-options/index.js +17 -1
- package/lib/components/tools/text/text-options/text-alignment-fields.js +38 -1
- package/lib/components/tools/text/text-options/text-controls.js +147 -1
- package/lib/components/tools/text/text-options/text-options.constants.js +16 -1
- package/lib/components/tools/text/text-options/text-spacings-fields.js +34 -1
- package/lib/components/tools/tools.constants.js +98 -1
- package/lib/components/tools/warmth/index.js +2 -1
- package/lib/components/tools/warmth/warmth-options.js +35 -1
- package/lib/components/tools/warmth/warmth.js +17 -1
- package/lib/components/tools/watermark/index.js +1 -1
- package/lib/components/tools/watermark/watermark-padding.js +59 -1
- package/lib/components/tools/watermark/watermark.js +221 -1
- package/lib/components/tools/watermark/watermarks-gallery.js +77 -1
- package/lib/components/tools-bar/index.js +113 -1
- package/lib/components/tools-bar/tools-bar-item-button.js +39 -1
- package/lib/components/topbar/canvas-zooming.js +119 -1
- package/lib/components/topbar/confirmation-modal.js +53 -1
- package/lib/components/topbar/image-dimensions-and-display-toggle.js +68 -1
- package/lib/components/topbar/index.js +47 -1
- package/lib/components/topbar/redo-button.js +25 -1
- package/lib/components/topbar/reset-button.js +21 -1
- package/lib/components/topbar/save-button.js +251 -1
- package/lib/components/topbar/topbar.constants.js +31 -1
- package/lib/components/topbar/undo-button.js +27 -1
- package/lib/context/app-context.js +3 -1
- package/lib/context/app-provider-overriden-value.js +9 -1
- package/lib/context/app-provider.js +48 -1
- package/lib/context/app-reducer.js +5 -1
- package/lib/context/default-config.js +75 -1
- package/lib/context/default-translations.js +115 -1
- package/lib/context/get-initial-app-state.js +61 -1
- package/lib/context/index.js +4 -1
- package/lib/custom/filters/aden.js +8 -1
- package/lib/custom/filters/amaro.js +8 -1
- package/lib/custom/filters/ashby.js +8 -1
- package/lib/custom/filters/base-filters.js +82 -1
- package/lib/custom/filters/black-and-white.js +11 -1
- package/lib/custom/filters/brannan.js +8 -1
- package/lib/custom/filters/brooklyn.js +8 -1
- package/lib/custom/filters/charmes.js +8 -1
- package/lib/custom/filters/clarendon.js +9 -1
- package/lib/custom/filters/crema.js +8 -1
- package/lib/custom/filters/dogpatch.js +8 -1
- package/lib/custom/filters/earlybird.js +7 -1
- package/lib/custom/filters/gingham.js +8 -1
- package/lib/custom/filters/ginza.js +8 -1
- package/lib/custom/filters/hefe.js +8 -1
- package/lib/custom/filters/helena.js +8 -1
- package/lib/custom/filters/hudson.js +9 -1
- package/lib/custom/filters/index.js +40 -1
- package/lib/custom/filters/juno.js +8 -1
- package/lib/custom/filters/kelvin.js +9 -1
- package/lib/custom/filters/lark.js +9 -1
- package/lib/custom/filters/lo-fi.js +8 -1
- package/lib/custom/filters/ludwig.js +8 -1
- package/lib/custom/filters/maven.js +9 -1
- package/lib/custom/filters/mayfair.js +8 -1
- package/lib/custom/filters/moon.js +7 -1
- package/lib/custom/filters/nashville.js +8 -1
- package/lib/custom/filters/ninteen-seventy-seven.js +8 -1
- package/lib/custom/filters/perpetua.js +7 -1
- package/lib/custom/filters/reyes.js +9 -1
- package/lib/custom/filters/rise.js +9 -1
- package/lib/custom/filters/sierra.js +8 -1
- package/lib/custom/filters/skyline.js +8 -1
- package/lib/custom/filters/slumber.js +8 -1
- package/lib/custom/filters/stinson.js +8 -1
- package/lib/custom/filters/sutro.js +8 -1
- package/lib/custom/filters/toaster.js +8 -1
- package/lib/custom/filters/valencia.js +9 -1
- package/lib/custom/filters/vesper.js +9 -1
- package/lib/custom/filters/walden.js +8 -1
- package/lib/custom/filters/willow.js +8 -1
- package/lib/custom/filters/xpro2.js +9 -1
- package/lib/custom/finetunes/custom-threshold.js +19 -1
- package/lib/custom/finetunes/index.js +2 -1
- package/lib/custom/finetunes/warmth.js +15 -1
- package/lib/demo/app.js +175 -1
- package/lib/demo/index.js +1 -1
- package/lib/hooks/index.js +12 -1
- package/lib/hooks/use-annotation/get-bounding-rect-un-scaled.js +14 -1
- package/lib/hooks/use-annotation/get-new-annotation-preview.js +83 -1
- package/lib/hooks/use-annotation/index.js +138 -1
- package/lib/hooks/use-annotation/preview-then-call-annotation-adding.js +159 -1
- package/lib/hooks/use-annotation-events.js +83 -1
- package/lib/hooks/use-app-reducer.js +53 -1
- package/lib/hooks/use-debounced-callback.js +7 -1
- package/lib/hooks/use-drag.js +37 -1
- package/lib/hooks/use-filter.js +20 -1
- package/lib/hooks/use-finetune.js +31 -1
- package/lib/hooks/use-phone-screen.js +5 -1
- package/lib/hooks/use-popover.js +27 -1
- package/lib/hooks/use-resize-observer.js +60 -1
- package/lib/hooks/use-store.js +6 -1
- package/lib/hooks/use-transformed-img-data.js +156 -1
- package/lib/hooks/use-update-effect.js +18 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +4 -1
- package/lib/types/actions.js +31 -1
- package/lib/types/annotations.js +42 -1
- package/lib/types/common.js +1 -1
- package/lib/types/config.js +34 -1
- package/lib/types/index.js +5 -1
- package/lib/types/state.js +1 -1
- package/lib/utils/assign-finetune-names-to-konva.js +7 -1
- package/lib/utils/calculate-zoom-data.js +36 -1
- package/lib/utils/compare-ratios.js +5 -1
- package/lib/utils/constants.js +84 -1
- package/lib/utils/crop-image.js +10 -1
- package/lib/utils/debounce.js +19 -1
- package/lib/utils/deep-merge.js +26 -1
- package/lib/utils/extract-current-design-state.js +15 -1
- package/lib/utils/extract-name-from-url.js +5 -1
- package/lib/utils/filter-str-to-class.js +9 -1
- package/lib/utils/finetunes-strs-to-classes.js +13 -1
- package/lib/utils/get-center-rotated-point.js +34 -1
- package/lib/utils/get-default-save-quality.js +5 -1
- package/lib/utils/get-dimensions-minimal-ratio.js +6 -1
- package/lib/utils/get-elem-document-coords.js +24 -1
- package/lib/utils/get-file-full-name.js +21 -1
- package/lib/utils/get-pointer-offset-position-bounded-to-object.js +26 -1
- package/lib/utils/get-proper-dimensions.js +21 -1
- package/lib/utils/get-proper-image-to-canvas-spacing.js +6 -1
- package/lib/utils/get-scroll-offset.js +13 -1
- package/lib/utils/get-size-after-rotation.js +31 -1
- package/lib/utils/get-zoom-fit-factor.js +5 -1
- package/lib/utils/image-to-base64.js +12 -1
- package/lib/utils/is-default-zero-values-only.js +6 -1
- package/lib/utils/is-same-image.js +4 -1
- package/lib/utils/load-image.js +19 -1
- package/lib/utils/map-crop-box.js +16 -1
- package/lib/utils/map-number.js +4 -1
- package/lib/utils/map-position-string-to-point.js +92 -1
- package/lib/utils/random-id.js +5 -1
- package/lib/utils/restrict-number.js +7 -1
- package/lib/utils/serialize-design-state.js +62 -1
- package/lib/utils/to-precised-float.js +5 -1
- package/lib/utils/translator.js +14 -1
- package/package.json +1 -1
|
@@ -1 +1,9 @@
|
|
|
1
|
-
import BaseFilters from"./base-filters";
|
|
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
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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";
|
|
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
|
|
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";
|
|
1
|
+
export { default as Warmth } from "./warmth";
|
|
2
|
+
export { default as CustomThreshold } from "./custom-threshold";
|
|
@@ -1 +1,15 @@
|
|
|
1
|
-
import Konva from
|
|
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";
|
|
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";
|
package/lib/hooks/index.js
CHANGED
|
@@ -1 +1,12 @@
|
|
|
1
|
-
export
|
|
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(
|
|
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;
|