@solostylist/image-editor 1.0.13 → 1.0.15
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 +2 -1
- package/lib/actions/enable-text-content-edit.js +2 -1
- package/lib/actions/set-canvas-size.d.ts.map +1 -1
- package/lib/actions/set-crop.js +6 -1
- package/lib/actions/set-shown-image-dimensions.js +3 -2
- package/lib/components/app/index.d.ts.map +1 -1
- package/lib/components/app/index.js +111 -41
- package/lib/components/assembly-point/index.d.ts +1 -2
- package/lib/components/assembly-point/index.d.ts.map +1 -1
- package/lib/components/assembly-point/index.js +1 -5
- package/lib/components/common/annotation-options/index.js +3 -3
- package/lib/components/common/annotation-options/shadow-fields.js +2 -2
- package/lib/components/common/color-picker-modal/index.js +1 -1
- package/lib/components/common/icon-wrapper/index.js +1 -1
- package/lib/components/common/image-preview-tile/index.js +1 -1
- package/lib/components/common/slider/index.js +4 -4
- package/lib/components/feedback-popup/index.js +2 -2
- package/lib/components/layers/design-layer/index.d.ts.map +1 -1
- package/lib/components/layers/design-layer/index.js +11 -8
- package/lib/components/layers/transformers-layer/crop-transformer.js +3 -2
- package/lib/components/layers/transformers-layer/index.js +3 -2
- package/lib/components/main-canvas/canvas-node.d.ts.map +1 -1
- package/lib/components/main-canvas/canvas-node.js +8 -6
- package/lib/components/main-canvas/index.d.ts.map +1 -1
- package/lib/components/main-canvas/index.js +135 -33
- package/lib/components/main-canvas/touch-zooming-events.js +3 -2
- package/lib/components/node-controls/index.d.ts.map +1 -1
- package/lib/components/node-controls/index.js +4 -3
- package/lib/components/tabs/index.d.ts.map +1 -1
- package/lib/components/tabs/index.js +165 -23
- package/lib/components/tabs-drawer/index.d.ts +3 -3
- package/lib/components/tabs-drawer/index.d.ts.map +1 -1
- package/lib/components/tabs-drawer/index.js +66 -43
- package/lib/components/tools/crop/crop.d.ts.map +1 -1
- package/lib/components/tools/crop/crop.js +3 -3
- package/lib/components/tools/filters/filter-item.d.ts +4 -3
- package/lib/components/tools/filters/filter-item.d.ts.map +1 -1
- package/lib/components/tools/filters/filter-item.js +4 -1
- package/lib/components/tools/filters/filters.constants.d.ts +2 -2
- package/lib/components/tools/filters/filters.constants.d.ts.map +1 -1
- package/lib/components/tools/filters/filters.d.ts +4 -1
- package/lib/components/tools/filters/filters.d.ts.map +1 -1
- package/lib/components/tools/filters/filters.js +9 -3
- package/lib/components/tools/image/image-options.js +5 -4
- package/lib/components/tools/image/images-gallery.js +1 -1
- package/lib/components/tools/pen/pen-options.js +4 -3
- package/lib/components/tools/resize/resize.d.ts +1 -1
- package/lib/components/tools/resize/resize.d.ts.map +1 -1
- package/lib/components/tools/resize/resize.js +5 -2
- package/lib/components/tools/rotate/rotate-options.js +1 -1
- package/lib/components/tools/text/text-options/handle-text-change-area.d.ts.map +1 -1
- package/lib/components/tools/text/text-options/text-alignment-fields.js +1 -1
- package/lib/components/tools/text/text-options/text-controls.js +8 -6
- package/lib/components/tools/tools.constants.d.ts +2 -2
- package/lib/components/tools/tools.constants.d.ts.map +1 -1
- package/lib/components/tools/watermark/watermark-padding.js +2 -1
- package/lib/components/tools/watermark/watermark.js +9 -8
- package/lib/components/tools-bar/index.d.ts.map +1 -1
- package/lib/components/tools-bar/index.js +47 -22
- package/lib/components/tools-bar/tools-bar-item-button.d.ts.map +1 -1
- package/lib/components/tools-bar/tools-bar-item-button.js +8 -3
- package/lib/components/topbar/canvas-zooming.d.ts.map +1 -1
- package/lib/components/topbar/canvas-zooming.js +5 -5
- package/lib/components/topbar/confirmation-modal.js +2 -2
- package/lib/components/topbar/image-dimensions-and-display-toggle.d.ts.map +1 -1
- package/lib/components/topbar/image-dimensions-and-display-toggle.js +8 -6
- package/lib/components/topbar/index.d.ts.map +1 -1
- package/lib/components/topbar/index.js +33 -24
- package/lib/components/topbar/redo-button.js +1 -1
- package/lib/components/topbar/reset-button.js +1 -1
- package/lib/components/topbar/save-button.js +9 -6
- package/lib/components/topbar/topbar-action-buttons.d.ts +3 -0
- package/lib/components/topbar/topbar-action-buttons.d.ts.map +1 -0
- package/lib/components/topbar/topbar-action-buttons.js +27 -0
- package/lib/components/topbar/undo-button.js +1 -1
- package/lib/context/app-provider.d.ts.map +1 -1
- package/lib/context/app-provider.js +8 -6
- package/lib/context/app-reducer.js +2 -1
- package/lib/context/default-config.d.ts.map +1 -1
- package/lib/context/default-config.js +1 -1
- package/lib/context/default-translations.d.ts +1 -0
- package/lib/context/default-translations.d.ts.map +1 -1
- package/lib/context/default-translations.js +465 -113
- package/lib/context/get-initial-app-state.js +4 -4
- package/lib/custom/filters/moon.d.ts.map +1 -1
- package/lib/demo/app.d.ts.map +1 -1
- package/lib/demo/app.js +62 -18
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/index.d.ts.map +1 -1
- package/lib/hooks/index.js +2 -1
- package/lib/hooks/use-annotation/get-new-annotation-preview.js +2 -2
- package/lib/hooks/use-annotation/index.d.ts.map +1 -1
- package/lib/hooks/use-annotation/index.js +15 -2
- package/lib/hooks/use-annotation-events.d.ts.map +1 -1
- package/lib/hooks/use-app-reducer.d.ts.map +1 -1
- package/lib/hooks/use-app-reducer.js +2 -1
- package/lib/hooks/use-image-editor-actions.d.ts +16 -0
- package/lib/hooks/use-image-editor-actions.d.ts.map +1 -0
- package/lib/hooks/use-image-editor-actions.js +147 -0
- package/lib/hooks/use-resize-observer.d.ts.map +1 -1
- package/lib/hooks/use-resize-observer.js +2 -3
- package/lib/hooks/use-transformed-img-data.d.ts +1 -1
- package/lib/hooks/use-transformed-img-data.d.ts.map +1 -1
- package/lib/hooks/use-transformed-img-data.js +13 -9
- package/lib/types/actions.d.ts +0 -7
- package/lib/types/actions.d.ts.map +1 -1
- package/lib/types/config.d.ts +52 -3
- package/lib/types/config.d.ts.map +1 -1
- package/lib/types/state.d.ts +1 -1
- package/lib/types/state.d.ts.map +1 -1
- package/lib/utils/calculate-zoom-data.js +5 -4
- package/lib/utils/crop-image.d.ts +3 -1
- package/lib/utils/crop-image.d.ts.map +1 -1
- package/lib/utils/crop-image.js +10 -4
- package/lib/utils/extract-current-design-state.js +3 -2
- package/lib/utils/filter-str-to-class.js +2 -1
- package/lib/utils/finetunes-strs-to-classes.js +2 -1
- package/lib/utils/get-file-full-name.d.ts.map +1 -1
- package/lib/utils/get-file-full-name.js +3 -3
- package/lib/utils/get-pointer-offset-position-bounded-to-object.js +2 -1
- package/lib/utils/get-proper-dimensions.js +3 -2
- package/lib/utils/is-same-image.d.ts +1 -1
- package/lib/utils/is-same-image.d.ts.map +1 -1
- package/lib/utils/load-image.d.ts +1 -1
- package/lib/utils/load-image.d.ts.map +1 -1
- package/lib/utils/load-image.js +1 -3
- package/lib/utils/restrict-number.js +2 -2
- package/lib/utils/serialize-design-state.js +5 -3
- package/lib/utils/translator.d.ts +4 -1
- package/lib/utils/translator.d.ts.map +1 -1
- package/lib/utils/translator.js +11 -2
- package/package.json +14 -5
package/lib/demo/app.js
CHANGED
|
@@ -5,10 +5,10 @@ import '@fontsource/outfit/500.css';
|
|
|
5
5
|
import '@fontsource/outfit/600.css';
|
|
6
6
|
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
|
|
7
7
|
import { Box, Typography } from '@mui/material';
|
|
8
|
-
import { SButton, SCheckbox, SFlexBox, SThemeProvider } from '@solostylist/ui-kit
|
|
8
|
+
import { SButton, SCheckbox, SFlexBox, SThemeProvider } from '@solostylist/ui-kit';
|
|
9
9
|
import { useCallback, useRef, useState } from 'react';
|
|
10
10
|
import ImageEditorComponent, { TABS } from '..';
|
|
11
|
-
import SLazyImage from '@solostylist/ui-kit/s-lazy-image
|
|
11
|
+
import SLazyImage from '@solostylist/ui-kit/s-lazy-image';
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
var DEFAULT_IMAGES = ['_(1).png', '_(2).png', '_(3).png', '_(4).png'];
|
|
14
14
|
var ALL_TABS = [TABS.ADJUST, TABS.FINETUNE, TABS.FILTERS, TABS.WATERMARK, TABS.ANNOTATE, TABS.RESIZE];
|
|
@@ -46,24 +46,26 @@ var DemoApp = function DemoApp() {
|
|
|
46
46
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
47
47
|
imageSrcs = _useState4[0],
|
|
48
48
|
setImageSrcs = _useState4[1];
|
|
49
|
-
var _useState5 = useState(
|
|
49
|
+
var _useState5 = useState(''),
|
|
50
50
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
51
51
|
activeImageSrc = _useState6[0],
|
|
52
52
|
setActiveImageSrc = _useState6[1];
|
|
53
53
|
var fileInputRef = useRef(null);
|
|
54
|
+
var updateTabSelection = useCallback(function (prev, tab, checked) {
|
|
55
|
+
if (checked) {
|
|
56
|
+
return prev.includes(tab) ? prev : [].concat(_toConsumableArray(prev), [tab]);
|
|
57
|
+
}
|
|
58
|
+
return prev.length === 1 ? prev : prev.filter(function (t) {
|
|
59
|
+
return t !== tab;
|
|
60
|
+
});
|
|
61
|
+
}, []);
|
|
54
62
|
var handleTabToggle = useCallback(function (tab) {
|
|
55
63
|
return function (e) {
|
|
56
64
|
setSelectedTabs(function (prev) {
|
|
57
|
-
|
|
58
|
-
return prev.includes(tab) ? prev : [].concat(_toConsumableArray(prev), [tab]);
|
|
59
|
-
}
|
|
60
|
-
if (prev.length === 1) return prev;
|
|
61
|
-
return prev.filter(function (t) {
|
|
62
|
-
return t !== tab;
|
|
63
|
-
});
|
|
65
|
+
return updateTabSelection(prev, tab, e.target.checked);
|
|
64
66
|
});
|
|
65
67
|
};
|
|
66
|
-
}, []);
|
|
68
|
+
}, [updateTabSelection]);
|
|
67
69
|
var handleImageClick = useCallback(function (src) {
|
|
68
70
|
setActiveImageSrc(src);
|
|
69
71
|
}, []);
|
|
@@ -100,6 +102,9 @@ var DemoApp = function DemoApp() {
|
|
|
100
102
|
children: _jsxs(SFlexBox, {
|
|
101
103
|
width: "100%",
|
|
102
104
|
gap: 3,
|
|
105
|
+
sx: {
|
|
106
|
+
height: '100vh'
|
|
107
|
+
},
|
|
103
108
|
children: [_jsxs(Box, {
|
|
104
109
|
children: [_jsx(Typography, {
|
|
105
110
|
variant: "subtitle1",
|
|
@@ -148,6 +153,17 @@ var DemoApp = function DemoApp() {
|
|
|
148
153
|
mb: 3
|
|
149
154
|
},
|
|
150
155
|
children: "Add Image"
|
|
156
|
+
}), _jsx(SButton, {
|
|
157
|
+
variant: "outlined",
|
|
158
|
+
startIcon: _jsx(AddPhotoAlternateIcon, {}),
|
|
159
|
+
onClick: function onClick() {
|
|
160
|
+
return setActiveImageSrc('');
|
|
161
|
+
},
|
|
162
|
+
fullWidth: true,
|
|
163
|
+
sx: {
|
|
164
|
+
mb: 3
|
|
165
|
+
},
|
|
166
|
+
children: "Reset"
|
|
151
167
|
}), _jsx(Typography, {
|
|
152
168
|
variant: "subtitle1",
|
|
153
169
|
children: "Tabs"
|
|
@@ -173,13 +189,41 @@ var DemoApp = function DemoApp() {
|
|
|
173
189
|
})
|
|
174
190
|
})]
|
|
175
191
|
})]
|
|
176
|
-
}), _jsx(
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
192
|
+
}), _jsx(Box, {
|
|
193
|
+
sx: {
|
|
194
|
+
flex: 1,
|
|
195
|
+
minHeight: 0,
|
|
196
|
+
maxHeight: '100%',
|
|
197
|
+
overflow: 'auto'
|
|
198
|
+
},
|
|
199
|
+
children: _jsx(ImageEditorComponent, {
|
|
200
|
+
source: activeImageSrc,
|
|
201
|
+
tabsIds: selectedTabs,
|
|
202
|
+
defaultTabId: TABS.ADJUST,
|
|
203
|
+
observePluginContainerSize: true,
|
|
204
|
+
onSave: handleSave,
|
|
205
|
+
rootSx: {
|
|
206
|
+
backgroundColor: 'var(--s-palette-background-default)'
|
|
207
|
+
},
|
|
208
|
+
resetOnImageSourceChange: true,
|
|
209
|
+
containerHeight: "100vh",
|
|
210
|
+
canvasAreaHeight: "100vh",
|
|
211
|
+
language: "vi",
|
|
212
|
+
cropTopOffset: 20,
|
|
213
|
+
renderEmptyState: function renderEmptyState() {
|
|
214
|
+
return _jsx(SFlexBox, {
|
|
215
|
+
sx: {
|
|
216
|
+
height: '100%',
|
|
217
|
+
justifyContent: 'center',
|
|
218
|
+
alignItems: 'center'
|
|
219
|
+
},
|
|
220
|
+
children: _jsx(Typography, {
|
|
221
|
+
variant: "h6",
|
|
222
|
+
children: "No image selected"
|
|
223
|
+
})
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
})
|
|
183
227
|
})]
|
|
184
228
|
})
|
|
185
229
|
});
|
package/lib/hooks/index.d.ts
CHANGED
|
@@ -10,4 +10,5 @@ export { default as useDrag } from './use-drag';
|
|
|
10
10
|
export { default as usePhoneScreen } from './use-phone-screen';
|
|
11
11
|
export { default as useTransformedImgData } from './use-transformed-img-data';
|
|
12
12
|
export { default as usePopover } from './use-popover';
|
|
13
|
+
export { default as useImageEditorActions } from './use-image-editor-actions';
|
|
13
14
|
//# sourceMappingURL=index.d.ts.map
|
package/lib/hooks/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAE3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,4BAA4B,CAAC"}
|
package/lib/hooks/index.js
CHANGED
|
@@ -9,4 +9,5 @@ export { default as useStore } from "./use-store";
|
|
|
9
9
|
export { default as useDrag } from "./use-drag";
|
|
10
10
|
export { default as usePhoneScreen } from "./use-phone-screen";
|
|
11
11
|
export { default as useTransformedImgData } from "./use-transformed-img-data";
|
|
12
|
-
export { default as usePopover } from "./use-popover";
|
|
12
|
+
export { default as usePopover } from "./use-popover";
|
|
13
|
+
export { default as useImageEditorActions } from "./use-image-editor-actions";
|
|
@@ -9,7 +9,7 @@ var annotationsNamesToKonvaClasses = _defineProperty(_defineProperty(_defineProp
|
|
|
9
9
|
var ANNOTATIONS_WITH_POINTS = [TOOLS_IDS.LINE, TOOLS_IDS.ARROW];
|
|
10
10
|
export var NO_WIDTH_HEIGHT_ANNOTATIONS = [].concat(ANNOTATIONS_WITH_POINTS, [TOOLS_IDS.ELLIPSE, TOOLS_IDS.POLYGON]);
|
|
11
11
|
var getNewAnnotationPreview = function getNewAnnotationPreview(annotation) {
|
|
12
|
-
var _annotation$opacity, _annotation$x, _annotation$y;
|
|
12
|
+
var _annotation$opacity, _annotation$x, _annotation$y, _annotation$stroke;
|
|
13
13
|
return new annotationsNamesToKonvaClasses[annotation.name](_objectSpread(_objectSpread({}, annotation), {}, {
|
|
14
14
|
opacity: (_annotation$opacity = annotation.opacity) !== null && _annotation$opacity !== void 0 ? _annotation$opacity : 0.7,
|
|
15
15
|
x: (_annotation$x = annotation.x) !== null && _annotation$x !== void 0 ? _annotation$x : 0,
|
|
@@ -17,7 +17,7 @@ var getNewAnnotationPreview = function getNewAnnotationPreview(annotation) {
|
|
|
17
17
|
width: Math.abs(annotation.width) || 0,
|
|
18
18
|
height: Math.abs(annotation.height) || 0
|
|
19
19
|
}, ANNOTATIONS_WITH_POINTS.includes(annotation.name) ? {
|
|
20
|
-
stroke: annotation.stroke
|
|
20
|
+
stroke: (_annotation$stroke = annotation.stroke) !== null && _annotation$stroke !== void 0 ? _annotation$stroke : '#000000'
|
|
21
21
|
} : {}));
|
|
22
22
|
};
|
|
23
23
|
export var dimensToProperAnnotationDimens = function dimensToProperAnnotationDimens(currentDimensions, annotationName, isShiftKeyPressed) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-annotation/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-annotation/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -83,9 +83,10 @@ var useAnnotation = function useAnnotation() {
|
|
|
83
83
|
}, [annotationDefaults, annotation]);
|
|
84
84
|
var saveAnnotationNoDebounce = useCallback(function (newAnnotationData) {
|
|
85
85
|
setTmpAnnotation(function (latest) {
|
|
86
|
-
var
|
|
86
|
+
var _newAnnotationData$na, _newAnnotationData$id, _newAnnotationData$na2;
|
|
87
|
+
var initialProps = getAnnotationInitialProps(latest, (_newAnnotationData$na = newAnnotationData.name) !== null && _newAnnotationData$na !== void 0 ? _newAnnotationData$na : annotation.name);
|
|
87
88
|
return _objectSpread(_objectSpread(_objectSpread({}, initialProps), newAnnotationData), {}, {
|
|
88
|
-
id: newAnnotationData.id
|
|
89
|
+
id: (_newAnnotationData$id = newAnnotationData.id) !== null && _newAnnotationData$id !== void 0 ? _newAnnotationData$id : randomId((_newAnnotationData$na2 = newAnnotationData.name) !== null && _newAnnotationData$na2 !== void 0 ? _newAnnotationData$na2 : latest.name),
|
|
89
90
|
shouldSave: true,
|
|
90
91
|
neverSave: false
|
|
91
92
|
});
|
|
@@ -121,9 +122,21 @@ var useAnnotation = function useAnnotation() {
|
|
|
121
122
|
var stopAnnotationEventsListening = null;
|
|
122
123
|
if (canvas && enablePreview) {
|
|
123
124
|
var annotationInitialProps = getAnnotationInitialProps(tmpAnnotation, annotation.name);
|
|
125
|
+
console.log('[useAnnotation] attach preview events', {
|
|
126
|
+
hasCanvas: Boolean(canvas),
|
|
127
|
+
hasPreviewGroup: Boolean(previewGroup),
|
|
128
|
+
annotationName: annotation.name
|
|
129
|
+
});
|
|
124
130
|
stopAnnotationEventsListening = previewThenCallAnnotationAdding(canvas, _objectSpread(_objectSpread({}, annotationInitialProps), {}, {
|
|
125
131
|
name: annotation.name
|
|
126
132
|
}), previewGroup, saveAnnotationNoDebounce);
|
|
133
|
+
} else {
|
|
134
|
+
console.log('[useAnnotation] skip preview events', {
|
|
135
|
+
hasCanvas: Boolean(canvas),
|
|
136
|
+
enablePreview: enablePreview,
|
|
137
|
+
hasPreviewGroup: Boolean(previewGroup),
|
|
138
|
+
annotationName: annotation.name
|
|
139
|
+
});
|
|
127
140
|
}
|
|
128
141
|
return function () {
|
|
129
142
|
if (stopAnnotationEventsListening) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-annotation-events.d.ts","sourceRoot":"","sources":["../../src/hooks/use-annotation-events.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOlD,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,QAAA,MAAM,mBAAmB,QAAO,
|
|
1
|
+
{"version":3,"file":"use-annotation-events.d.ts","sourceRoot":"","sources":["../../src/hooks/use-annotation-events.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAOlD,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;IACjE,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,QAAA,MAAM,mBAAmB,QAAO,uBAkH/B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-app-reducer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-app-reducer.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAc,OAAO,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAgBjD;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"use-app-reducer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-app-reducer.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAc,OAAO,EAAE,MAAM,OAAO,CAAC;AAK5C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAgBjD;;;;GAIG;AACH,QAAA,MAAM,aAAa,GACjB,SAAS,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,EAClC,cAAc,QAAQ,EACtB,eAAc,OAAO,CAAC,iBAAiB,CAAM,KAC5C,CAAC,QAAQ,EAAE,QAAQ,CAmDrB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -25,7 +25,8 @@ var useAppReducer = function useAppReducer(reducer, initialState) {
|
|
|
25
25
|
hasUndo: false
|
|
26
26
|
});
|
|
27
27
|
var undoRedoResetReducer = function undoRedoResetReducer(state, action) {
|
|
28
|
-
var
|
|
28
|
+
var _reducer;
|
|
29
|
+
var newPresentState = (_reducer = reducer(state, action)) !== null && _reducer !== void 0 ? _reducer : initialStateWithUndoRedo;
|
|
29
30
|
if ([UNDO, REDO, RESET].includes(action.type)) {
|
|
30
31
|
applyModifyFn(passedConfig.onModify, newPresentState);
|
|
31
32
|
return newPresentState;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface ImageFileInfo {
|
|
2
|
+
name?: string;
|
|
3
|
+
extension?: string;
|
|
4
|
+
quality?: number;
|
|
5
|
+
size?: {
|
|
6
|
+
width?: number;
|
|
7
|
+
height?: number;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
declare const useImageEditorActions: () => {
|
|
11
|
+
saveImage: (imageFileInfo?: Partial<ImageFileInfo> | string) => Promise<void>;
|
|
12
|
+
resetImage: () => void;
|
|
13
|
+
getDefaultImageFileInfo: () => ImageFileInfo;
|
|
14
|
+
};
|
|
15
|
+
export default useImageEditorActions;
|
|
16
|
+
//# sourceMappingURL=use-image-editor-actions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-image-editor-actions.d.ts","sourceRoot":"","sources":["../../src/hooks/use-image-editor-actions.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C;AAED,QAAA,MAAM,qBAAqB;gCA4EA,OAAO,CAAC,aAAa,CAAC,GAAG,MAAM;;mCAfR,aAAa;CAuF9D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
5
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
|
+
import { useCallback } from 'react';
|
|
7
|
+
import { RESET, SET_FEEDBACK, SET_SAVING } from "../actions";
|
|
8
|
+
import { useStore, useTransformedImgData } from "./index";
|
|
9
|
+
import { DEFAULT_SAVE_QUALITY, ELLIPSE_CROP, SUPPORTED_IMAGE_TYPES } from "../utils/constants";
|
|
10
|
+
import getDefaultSaveQuality from "../utils/get-default-save-quality";
|
|
11
|
+
import getFileFullName from "../utils/get-file-full-name";
|
|
12
|
+
import randomId from "../utils/random-id";
|
|
13
|
+
var useImageEditorActions = function useImageEditorActions() {
|
|
14
|
+
var _useStore = useStore(),
|
|
15
|
+
dispatch = _useStore.dispatch,
|
|
16
|
+
originalImage = _useStore.originalImage,
|
|
17
|
+
resize = _useStore.resize,
|
|
18
|
+
haveNotSavedChanges = _useStore.haveNotSavedChanges,
|
|
19
|
+
_useStore$adjustments = _useStore.adjustments,
|
|
20
|
+
_useStore$adjustments2 = _useStore$adjustments === void 0 ? {} : _useStore$adjustments,
|
|
21
|
+
crop = _useStore$adjustments2.crop,
|
|
22
|
+
t = _useStore.t,
|
|
23
|
+
_useStore$config = _useStore.config,
|
|
24
|
+
onClose = _useStore$config.onClose,
|
|
25
|
+
closeAfterSave = _useStore$config.closeAfterSave,
|
|
26
|
+
onSave = _useStore$config.onSave,
|
|
27
|
+
forceToPngInEllipticalCrop = _useStore$config.forceToPngInEllipticalCrop,
|
|
28
|
+
defaultSavedImageName = _useStore$config.defaultSavedImageName,
|
|
29
|
+
defaultSavedImageType = _useStore$config.defaultSavedImageType,
|
|
30
|
+
_useStore$config$defa = _useStore$config.defaultSavedImageQuality,
|
|
31
|
+
defaultSavedImageQuality = _useStore$config$defa === void 0 ? DEFAULT_SAVE_QUALITY : _useStore$config$defa,
|
|
32
|
+
savedImageNamePrefix = _useStore$config.savedImageNamePrefix;
|
|
33
|
+
var transformImgFn = useTransformedImgData();
|
|
34
|
+
var getFileNameAndExtension = useCallback(function () {
|
|
35
|
+
var nameFromSource = defaultSavedImageName !== null && defaultSavedImageName !== void 0 ? defaultSavedImageName : originalImage === null || originalImage === void 0 ? void 0 : originalImage.title;
|
|
36
|
+
var resolvedName = nameFromSource && nameFromSource.length > 0 ? nameFromSource : savedImageNamePrefix ? function () {
|
|
37
|
+
var now = new Date();
|
|
38
|
+
var day = String(now.getDate()).padStart(2, '0');
|
|
39
|
+
var month = String(now.getMonth() + 1).padStart(2, '0');
|
|
40
|
+
var year = String(now.getFullYear());
|
|
41
|
+
var dateStamp = "".concat(day, "-").concat(month, "-").concat(year);
|
|
42
|
+
var uuid = typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : randomId();
|
|
43
|
+
return "".concat(savedImageNamePrefix, "_").concat(dateStamp, "-").concat(uuid);
|
|
44
|
+
}() : undefined;
|
|
45
|
+
return getFileFullName(resolvedName, forceToPngInEllipticalCrop && (crop === null || crop === void 0 ? void 0 : crop.ratio) === ELLIPSE_CROP ? 'png' : SUPPORTED_IMAGE_TYPES.includes(defaultSavedImageType === null || defaultSavedImageType === void 0 ? void 0 : defaultSavedImageType.toLowerCase()) && defaultSavedImageType || undefined);
|
|
46
|
+
}, [defaultSavedImageName, originalImage, savedImageNamePrefix, forceToPngInEllipticalCrop, crop === null || crop === void 0 ? void 0 : crop.ratio, defaultSavedImageType]);
|
|
47
|
+
var getDefaultImageFileInfo = useCallback(function () {
|
|
48
|
+
var _getFileNameAndExtens = getFileNameAndExtension(),
|
|
49
|
+
name = _getFileNameAndExtens.name,
|
|
50
|
+
extension = _getFileNameAndExtens.extension;
|
|
51
|
+
return {
|
|
52
|
+
name: name,
|
|
53
|
+
extension: extension,
|
|
54
|
+
quality: getDefaultSaveQuality(defaultSavedImageQuality),
|
|
55
|
+
size: {
|
|
56
|
+
width: resize === null || resize === void 0 ? void 0 : resize.width,
|
|
57
|
+
height: resize === null || resize === void 0 ? void 0 : resize.height
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
}, [getFileNameAndExtension, defaultSavedImageQuality, resize]);
|
|
61
|
+
var saveImage = useCallback(function () {
|
|
62
|
+
var _ref = _asyncToGenerator(_regeneratorRuntime.mark(function _callee(imageFileInfo) {
|
|
63
|
+
var normalizedInfo, mergedFileInfo, transformedData, savingResult;
|
|
64
|
+
return _regeneratorRuntime.wrap(function (_context) {
|
|
65
|
+
while (1) switch (_context.prev = _context.next) {
|
|
66
|
+
case 0:
|
|
67
|
+
if (!(typeof onSave !== 'function')) {
|
|
68
|
+
_context.next = 1;
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
throw new Error('Please provide onSave function handler.');
|
|
72
|
+
case 1:
|
|
73
|
+
normalizedInfo = typeof imageFileInfo === 'string' ? {
|
|
74
|
+
name: imageFileInfo
|
|
75
|
+
} : imageFileInfo !== null && imageFileInfo !== void 0 ? imageFileInfo : {};
|
|
76
|
+
mergedFileInfo = _objectSpread(_objectSpread(_objectSpread({}, getDefaultImageFileInfo()), normalizedInfo), {}, {
|
|
77
|
+
size: _objectSpread(_objectSpread({}, getDefaultImageFileInfo().size), normalizedInfo.size)
|
|
78
|
+
});
|
|
79
|
+
if (!(!mergedFileInfo.name || !mergedFileInfo.extension)) {
|
|
80
|
+
_context.next = 2;
|
|
81
|
+
break;
|
|
82
|
+
}
|
|
83
|
+
dispatch({
|
|
84
|
+
type: SET_FEEDBACK,
|
|
85
|
+
payload: {
|
|
86
|
+
feedback: {
|
|
87
|
+
message: t('nameIsRequired')
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
return _context.abrupt("return");
|
|
92
|
+
case 2:
|
|
93
|
+
dispatch({
|
|
94
|
+
type: SET_SAVING,
|
|
95
|
+
payload: {
|
|
96
|
+
isSaving: true
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
transformedData = transformImgFn(mergedFileInfo, false, true);
|
|
100
|
+
savingResult = onSave(transformedData.imageData, transformedData.designState);
|
|
101
|
+
_context.prev = 3;
|
|
102
|
+
if (!(savingResult instanceof Promise)) {
|
|
103
|
+
_context.next = 4;
|
|
104
|
+
break;
|
|
105
|
+
}
|
|
106
|
+
_context.next = 4;
|
|
107
|
+
return savingResult;
|
|
108
|
+
case 4:
|
|
109
|
+
_context.prev = 4;
|
|
110
|
+
dispatch({
|
|
111
|
+
type: SET_SAVING,
|
|
112
|
+
payload: {
|
|
113
|
+
isSaving: false
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
return _context.finish(4);
|
|
117
|
+
case 5:
|
|
118
|
+
if (closeAfterSave && onClose) {
|
|
119
|
+
onClose('after_save', haveNotSavedChanges);
|
|
120
|
+
}
|
|
121
|
+
case 6:
|
|
122
|
+
case "end":
|
|
123
|
+
return _context.stop();
|
|
124
|
+
}
|
|
125
|
+
}, _callee, null, [[3,, 4, 5]]);
|
|
126
|
+
}));
|
|
127
|
+
return function (_x) {
|
|
128
|
+
return _ref.apply(this, arguments);
|
|
129
|
+
};
|
|
130
|
+
}(), [closeAfterSave, dispatch, getDefaultImageFileInfo, haveNotSavedChanges, onClose, onSave, t, transformImgFn]);
|
|
131
|
+
var resetImage = useCallback(function () {
|
|
132
|
+
dispatch({
|
|
133
|
+
type: RESET,
|
|
134
|
+
payload: {
|
|
135
|
+
config: {
|
|
136
|
+
onClose: onClose
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
});
|
|
140
|
+
}, [dispatch, onClose]);
|
|
141
|
+
return {
|
|
142
|
+
saveImage: saveImage,
|
|
143
|
+
resetImage: resetImage,
|
|
144
|
+
getDefaultImageFileInfo: getDefaultImageFileInfo
|
|
145
|
+
};
|
|
146
|
+
};
|
|
147
|
+
export default useImageEditorActions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-resize-observer.ts"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,gBAAgB,GAAG,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAE3D,KAAK,gBAAgB,GAAG,CACtB,OAAO,EAAE,OAAO,EAChB,mBAAmB,CAAC,EAAE,gBAAgB,KACnC,IAAI,CAAC;AACV,KAAK,kBAAkB,GAAG,CACxB,OAAO,EAAE,OAAO,EAChB,mBAAmB,CAAC,EAAE,gBAAgB,KACnC,IAAI,CAAC;AACV,KAAK,wBAAwB,GAAG,CAAC,mBAAmB,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAEhF,QAAA,MAAM,iBAAiB,GACrB,WAAU,gBAA2B,KACpC,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,wBAAwB,
|
|
1
|
+
{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../src/hooks/use-resize-observer.ts"],"names":[],"mappings":"AAGA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,mBAAmB,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,gBAAgB,GAAG,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;AAE3D,KAAK,gBAAgB,GAAG,CACtB,OAAO,EAAE,OAAO,EAChB,mBAAmB,CAAC,EAAE,gBAAgB,KACnC,IAAI,CAAC;AACV,KAAK,kBAAkB,GAAG,CACxB,OAAO,EAAE,OAAO,EAChB,mBAAmB,CAAC,EAAE,gBAAgB,KACnC,IAAI,CAAC;AACV,KAAK,wBAAwB,GAAG,CAAC,mBAAmB,EAAE,gBAAgB,KAAK,IAAI,CAAC;AAEhF,QAAA,MAAM,iBAAiB,GACrB,WAAU,gBAA2B,KACpC,CAAC,gBAAgB,EAAE,kBAAkB,EAAE,wBAAwB,CA4EjE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -21,9 +21,8 @@ var useResizeObserver = function useResizeObserver() {
|
|
|
21
21
|
onResizeCallback.current = newOnResizeCallback;
|
|
22
22
|
}, []);
|
|
23
23
|
var initObserver = useCallback(function () {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
24
|
+
var _resizeObserver$curre;
|
|
25
|
+
(_resizeObserver$curre = resizeObserver.current) !== null && _resizeObserver$curre !== void 0 ? _resizeObserver$curre : resizeObserver.current = new ResizeObserver(observerCallback);
|
|
27
26
|
}, []);
|
|
28
27
|
var observeElement = useCallback(function (element, newOnResizeCallback) {
|
|
29
28
|
if (element) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-transformed-img-data.d.ts","sourceRoot":"","sources":["../../src/hooks/use-transformed-img-data.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAY/C,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C;AAED,UAAU,oBAAoB;IAC5B,SAAS,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"use-transformed-img-data.d.ts","sourceRoot":"","sources":["../../src/hooks/use-transformed-img-data.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAY/C,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C;AAED,UAAU,oBAAoB;IAC5B,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,gBAAgB,CAAC;IAC9B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,KAAK,oBAAoB,GAAG,CAC1B,aAAa,CAAC,EAAE,aAAa,EAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,EAC7B,uBAAuB,CAAC,EAAE,OAAO,KAC9B,oBAAoB,CAAC;AAE1B,QAAA,MAAM,qBAAqB,QAAO,oBAsLjC,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -30,9 +30,13 @@ var useTransformedImgData = function useTransformedImgData() {
|
|
|
30
30
|
forceToPngInEllipticalCrop = _state$config.forceToPngInEllipticalCrop,
|
|
31
31
|
defaultSavedImageType = _state$config.defaultSavedImageType;
|
|
32
32
|
var getTransformedImgData = function getTransformedImgData() {
|
|
33
|
+
var _x, _y, _width, _height, _mappedCropBox$x, _mappedCropBox$y, _size$width, _size$height;
|
|
33
34
|
var imageFileInfo = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
34
35
|
var pixelRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
35
36
|
var keepLoadingSpinnerShown = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
37
|
+
if (!originalImage) {
|
|
38
|
+
throw new Error('No image loaded');
|
|
39
|
+
}
|
|
36
40
|
var currentImgFileInfo = _objectSpread({
|
|
37
41
|
size: resize
|
|
38
42
|
}, imageFileInfo);
|
|
@@ -67,7 +71,7 @@ var useTransformedImgData = function useTransformedImgData() {
|
|
|
67
71
|
scaleX: preparedDesignLayerScale.x,
|
|
68
72
|
scaleY: preparedDesignLayerScale.y
|
|
69
73
|
});
|
|
70
|
-
var _ref = _objectSpread(_objectSpread({}, (!currentImgFileInfo.name || !currentImgFileInfo.extension) && getFileFullName(originalImage.
|
|
74
|
+
var _ref = _objectSpread(_objectSpread({}, (!currentImgFileInfo.name || !currentImgFileInfo.extension) && getFileFullName(originalImage.title, forceToPngInEllipticalCrop && crop.ratio === ELLIPSE_CROP ? 'png' : SUPPORTED_IMAGE_TYPES.includes(defaultSavedImageType === null || defaultSavedImageType === void 0 ? void 0 : defaultSavedImageType.toLowerCase()) && defaultSavedImageType || undefined)), currentImgFileInfo),
|
|
71
75
|
name = _ref.name,
|
|
72
76
|
extension = _ref.extension,
|
|
73
77
|
_ref$quality = _ref.quality,
|
|
@@ -79,15 +83,15 @@ var useTransformedImgData = function useTransformedImgData() {
|
|
|
79
83
|
x: 0,
|
|
80
84
|
y: 0
|
|
81
85
|
} : {
|
|
82
|
-
x: crop.x
|
|
83
|
-
y: crop.y
|
|
84
|
-
width: crop.width
|
|
85
|
-
height: crop.height
|
|
86
|
+
x: (_x = crop.x) !== null && _x !== void 0 ? _x : clipX,
|
|
87
|
+
y: (_y = crop.y) !== null && _y !== void 0 ? _y : clipY,
|
|
88
|
+
width: (_width = crop.width) !== null && _width !== void 0 ? _width : clipWidth,
|
|
89
|
+
height: (_height = crop.height) !== null && _height !== void 0 ? _height : clipHeight
|
|
86
90
|
}, shownImageDimensions, preparedCanvas.attrs);
|
|
87
91
|
var rotatedCropBox = getSizeAfterRotation(mappedCropBox.width, mappedCropBox.height, rotation);
|
|
88
92
|
preparedCanvas.setAttrs({
|
|
89
|
-
offsetX: mappedCropBox.width / 2 + (mappedCropBox.x
|
|
90
|
-
offsetY: mappedCropBox.height / 2 + (mappedCropBox.y
|
|
93
|
+
offsetX: mappedCropBox.width / 2 + ((_mappedCropBox$x = mappedCropBox.x) !== null && _mappedCropBox$x !== void 0 ? _mappedCropBox$x : 0),
|
|
94
|
+
offsetY: mappedCropBox.height / 2 + ((_mappedCropBox$y = mappedCropBox.y) !== null && _mappedCropBox$y !== void 0 ? _mappedCropBox$y : 0),
|
|
91
95
|
width: rotatedCropBox.width,
|
|
92
96
|
height: rotatedCropBox.height,
|
|
93
97
|
x: rotatedCropBox.width / 2,
|
|
@@ -125,8 +129,8 @@ var useTransformedImgData = function useTransformedImgData() {
|
|
|
125
129
|
mimeType: "image/".concat(extension),
|
|
126
130
|
imageCanvas: finalCanvas,
|
|
127
131
|
imageBase64: finalImgBase64,
|
|
128
|
-
width: size.width
|
|
129
|
-
height: size.height
|
|
132
|
+
width: (_size$width = size.width) !== null && _size$width !== void 0 ? _size$width : mappedCropBox.width,
|
|
133
|
+
height: (_size$height = size.height) !== null && _size$height !== void 0 ? _size$height : mappedCropBox.height
|
|
130
134
|
}, isQualityAcceptable ? {
|
|
131
135
|
quality: quality
|
|
132
136
|
} : {});
|
package/lib/types/actions.d.ts
CHANGED
|
@@ -111,10 +111,8 @@ export type Action = {
|
|
|
111
111
|
payload: SetFeedbackPayload;
|
|
112
112
|
} | {
|
|
113
113
|
type: typeof SHOW_LOADER;
|
|
114
|
-
payload?: undefined;
|
|
115
114
|
} | {
|
|
116
115
|
type: typeof HIDE_LOADER;
|
|
117
|
-
payload?: undefined;
|
|
118
116
|
} | {
|
|
119
117
|
type: typeof CHANGE_POINTER_ICON;
|
|
120
118
|
payload: ChangePointerIconPayload;
|
|
@@ -123,10 +121,8 @@ export type Action = {
|
|
|
123
121
|
payload: SelectAnnotationPayload;
|
|
124
122
|
} | {
|
|
125
123
|
type: typeof CLEAR_ANNOTATIONS_SELECTIONS;
|
|
126
|
-
payload?: undefined;
|
|
127
124
|
} | {
|
|
128
125
|
type: typeof TOGGLE_ORIGINAL_IMAGE_DISPLAY;
|
|
129
|
-
payload?: undefined;
|
|
130
126
|
} | {
|
|
131
127
|
type: typeof SELECT_TAB;
|
|
132
128
|
payload: SelectTabPayload;
|
|
@@ -183,13 +179,10 @@ export type Action = {
|
|
|
183
179
|
payload: DuplicateAnnotationsPayload;
|
|
184
180
|
} | {
|
|
185
181
|
type: typeof UNDO;
|
|
186
|
-
payload?: undefined;
|
|
187
182
|
} | {
|
|
188
183
|
type: typeof REDO;
|
|
189
|
-
payload?: undefined;
|
|
190
184
|
} | {
|
|
191
185
|
type: typeof RESET;
|
|
192
|
-
payload?: undefined;
|
|
193
186
|
} | {
|
|
194
187
|
type: typeof SET_SAVED;
|
|
195
188
|
payload: SetSavedPayload;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/types/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EACL,QAAQ,EACR,UAAU,EACV,cAAc,EACd,YAAY,EACZ,UAAU,EACX,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGxD,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AACzC,eAAO,MAAM,WAAW,gBAAgB,CAAC;AACzC,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AACzD,eAAO,MAAM,iBAAiB,sBAAsB,CAAC;AACrD,eAAO,MAAM,4BAA4B,iCAAiC,CAAC;AAC3E,eAAO,MAAM,6BAA6B,kCAAkC,CAAC;AAC7E,eAAO,MAAM,UAAU,eAAe,CAAC;AACvC,eAAO,MAAM,WAAW,gBAAgB,CAAC;AACzC,eAAO,MAAM,WAAW,gBAAgB,CAAC;AACzC,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AACvE,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AACnE,eAAO,MAAM,gBAAgB,qBAAqB,CAAC;AACnD,eAAO,MAAM,mBAAmB,wBAAwB,CAAC;AACzD,eAAO,MAAM,UAAU,eAAe,CAAC;AACvC,eAAO,MAAM,UAAU,eAAe,CAAC;AACvC,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAC3C,eAAO,MAAM,cAAc,mBAAmB,CAAC;AAC/C,eAAO,MAAM,QAAQ,aAAa,CAAC;AACnC,eAAO,MAAM,eAAe,oBAAoB,CAAC;AACjD,eAAO,MAAM,WAAW,gBAAgB,CAAC;AACzC,eAAO,MAAM,UAAU,eAAe,CAAC;AACvC,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,qBAAqB,0BAA0B,CAAC;AAC7D,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,IAAI,SAAS,CAAC;AAC3B,eAAO,MAAM,KAAK,UAAU,CAAC;AAC7B,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAG3C,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,gBAAgB,CAAC;IAChC,uBAAuB,CAAC,EAAE,UAAU,CAAC;CACtC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,MAAM,WAAW,wBAAwB;IACvC,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,uBAAuB;IACtC,YAAY,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAEpD,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,8BAA8B,GAAG,gBAAgB,CAAC;AAE9D,MAAM,WAAW,4BAA4B;IAC3C,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,GAAG,cAAc,CAAC;CACxC;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,UAAU,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,GAAG,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;AAErD,MAAM,WAAW,wBAAwB;IACvC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,2BAA2B;IAC1C,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;AAGnD,MAAM,MAAM,MAAM,GACd;IAAE,IAAI,EAAE,OAAO,kBAAkB,CAAC;IAAC,OAAO,EAAE,uBAAuB,CAAA;CAAE,GACrE;IAAE,IAAI,EAAE,OAAO,YAAY,CAAC;IAAC,OAAO,EAAE,kBAAkB,CAAA;CAAE,GAC1D;IAAE,IAAI,EAAE,OAAO,WAAW,
|
|
1
|
+
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/types/actions.ts"],"names":[],"mappings":"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"}
|
package/lib/types/config.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode, RefObject } from 'react';
|
|
2
|
+
import type { SxProps, Theme } from '@mui/material/styles';
|
|
2
3
|
import { TextAnnotation, ImageAnnotation, RectAnnotation, PolygonAnnotation, PenAnnotation, LineAnnotation, ArrowAnnotation, EllipseAnnotation, AnnotationsCommon } from './annotations';
|
|
3
4
|
import { CropPresetItem, SavedImageData } from './common';
|
|
4
5
|
import { ImageDesignState } from './state';
|
|
@@ -75,7 +76,7 @@ export type GetCurrentImgDataFunction = (imageFileInfo: {
|
|
|
75
76
|
hideLoadingSpinner: () => void;
|
|
76
77
|
};
|
|
77
78
|
export interface ImageEditorConfig {
|
|
78
|
-
source
|
|
79
|
+
source?: string | HTMLImageElement;
|
|
79
80
|
annotationsCommon?: AnnotationsCommon;
|
|
80
81
|
Text?: Partial<TextAnnotation> & {
|
|
81
82
|
fonts?: (string | {
|
|
@@ -119,7 +120,8 @@ export interface ImageEditorConfig {
|
|
|
119
120
|
defaultSavedImageQuality?: number;
|
|
120
121
|
forceToPngInEllipticalCrop?: boolean;
|
|
121
122
|
translations?: Record<string, any>;
|
|
122
|
-
language?: 'en' | '
|
|
123
|
+
language?: 'en' | 'vi' | 'zh' | 'fr';
|
|
124
|
+
supportedLanguages?: Array<'en' | 'vi' | 'zh' | 'fr'>;
|
|
123
125
|
avoidChangesNotSavedAlertOnLeave?: boolean;
|
|
124
126
|
loadableDesignState?: ImageDesignState;
|
|
125
127
|
getCurrentImgDataFnRef?: RefObject<GetCurrentImgDataFunction> | {
|
|
@@ -140,5 +142,52 @@ export interface ImageEditorConfig {
|
|
|
140
142
|
resetOnImageSourceChange?: boolean;
|
|
141
143
|
backgroundColor?: string;
|
|
142
144
|
backgroundImage?: HTMLImageElement;
|
|
145
|
+
/** Height of the root container (e.g. '100%', 'calc(100vh - 72px)'). When set, root uses this instead of minHeight: 100vh. */
|
|
146
|
+
containerHeight?: string | number;
|
|
147
|
+
/** Height of the entire editor. Controls root, canvas, and toolbar layout. */
|
|
148
|
+
editorHeight?: string | number;
|
|
149
|
+
/** Height of the toolbar area. Defaults to 120px via CSS variable. */
|
|
150
|
+
toolbarHeight?: string | number;
|
|
151
|
+
/** Prefix for auto-generated saved image name (e.g. prefix-tool-uuid). */
|
|
152
|
+
savedImageNamePrefix?: string;
|
|
153
|
+
/** MUI sx applied to the root element (.FIE_root). */
|
|
154
|
+
rootSx?: SxProps<Theme>;
|
|
155
|
+
/** Extra class name(s) for the root element. */
|
|
156
|
+
rootClassName?: string;
|
|
157
|
+
/** Height of the canvas wrapper (MainCanvas container). Replaces hardcoded calc(100vh - ...). */
|
|
158
|
+
canvasAreaHeight?: string | number;
|
|
159
|
+
/** Background of the canvas area. String as CSS background; object as MUI sx on wrapper div around Stage. */
|
|
160
|
+
canvasBackground?: string | SxProps<Theme>;
|
|
161
|
+
/** Debug helper: show canvas center crosshair/dot. */
|
|
162
|
+
showCanvasCenter?: boolean;
|
|
163
|
+
/** Extra top padding for the canvas when crop is active (avoids topbar overlap). */
|
|
164
|
+
cropTopOffset?: number;
|
|
165
|
+
/** Optional empty-state component shown when there is no image. */
|
|
166
|
+
renderEmptyState?: (props: {
|
|
167
|
+
onUpload: (files: FileList | File[] | null) => void;
|
|
168
|
+
}) => ReactNode;
|
|
169
|
+
/**
|
|
170
|
+
* Optional render prop to wrap the floating toolbar (tool buttons + tool options).
|
|
171
|
+
* When provided, the editor passes { toolButtons, toolOptions } so the consumer
|
|
172
|
+
* can render them inside a custom UI (e.g. SAiToolBar with centerContent).
|
|
173
|
+
*/
|
|
174
|
+
renderFloatingToolbar?: (props: {
|
|
175
|
+
toolButtons: ReactNode;
|
|
176
|
+
toolOptions: ReactNode;
|
|
177
|
+
t: (key: string, defaultValue?: string) => string;
|
|
178
|
+
onDownload: () => void;
|
|
179
|
+
language?: ImageEditorConfig['language'];
|
|
180
|
+
}) => ReactNode;
|
|
181
|
+
/**
|
|
182
|
+
* Pass an SAiToolBar (or any React element) directly.
|
|
183
|
+
* The editor clones it and injects:
|
|
184
|
+
* - customActionButtons = tool icon buttons for the active tab
|
|
185
|
+
* - centerContent = options panel for the selected tool
|
|
186
|
+
* Takes priority over renderFloatingToolbar when both are provided.
|
|
187
|
+
*/
|
|
188
|
+
toolBarNode?: ReactElement<{
|
|
189
|
+
customActionButtons?: ReactNode;
|
|
190
|
+
centerContent?: ReactNode;
|
|
191
|
+
}>;
|
|
143
192
|
}
|
|
144
193
|
//# sourceMappingURL=config.d.ts.map
|