Skip to content

Commit ef44b61

Browse files
lja1018lja1018
committed
Merge branch 'master' into production
# Conflicts: # apps/image-editor/package-lock.json # apps/react-image-editor/package-lock.json
2 parents 3f33ee2 + 6207dcc commit ef44b61

File tree

86 files changed

+30269
-49320
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+30269
-49320
lines changed

‎apps/image-editor/examples/js/service-basic.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,7 @@ $btnUndo.on('click', function () {
357357
$displayingSubMenu.hide();
358358

359359
if (!$(this).hasClass('disabled')) {
360+
imageEditor.discardSelection();
360361
imageEditor.undo();
361362
}
362363
});
@@ -365,6 +366,7 @@ $btnRedo.on('click', function () {
365366
$displayingSubMenu.hide();
366367

367368
if (!$(this).hasClass('disabled')) {
369+
imageEditor.discardSelection();
368370
imageEditor.redo();
369371
}
370372
});

‎apps/image-editor/package-lock.json‎

Lines changed: 28422 additions & 28422 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎apps/image-editor/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "tui-image-editor",
33
"author": "NHN. FE Development Lab <[email protected]>",
4-
"version": "3.12.0",
4+
"version": "3.13.0",
55
"license": "MIT",
66
"repository": {
77
"type": "git",

‎apps/image-editor/src/css/icon.styl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
width: 257px;
1414
height: 26px;
1515

16+
.{prefix}-help-menu
1617
.{prefix}-controls
1718
svg > use
1819
display: none;
@@ -21,6 +22,8 @@
2122
display: block;
2223
.active svg:hover > use.hover
2324
display: none;
25+
.opened svg > use.hover
26+
display: block;
2427
svg > use.normal
2528
display: block;
2629
.active svg > use.active

‎apps/image-editor/src/css/main.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ body > textarea
113113

114114
/* BIG MENU */
115115
.{prefix}-container
116-
.{prefix}-menu
116+
.{prefix}-menu, .{prefix}-help-menu
117117
width: auto;
118118
list-style: none;
119119
padding: 0;

‎apps/image-editor/src/css/position.styl‎

Lines changed: 151 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
width: 136px;
7575

7676

77-
/* POSITION RIGIHT */
77+
/* POSITION RIGHT */
7878
.{prefix}-container
7979
&.right
8080
.{prefix}-menu
@@ -157,3 +157,153 @@
157157
top: 0;
158158
bottom: inherit;
159159

160+
/* HELP MENUBAR POSITION TOP */
161+
.{prefix}-container
162+
.{prefix}-help-menu
163+
&.top
164+
white-space: nowrap;
165+
width: 340px;
166+
height: 40px;
167+
top: 8px;
168+
left: 50%;
169+
transform: translateX(-50%);
170+
.tie-panel-history
171+
top: 45px;
172+
.opened .tie-panel-history:before
173+
border-right: 8px solid transparent;
174+
border-left: 8px solid transparent;
175+
border-bottom: 8px solid #fff;
176+
left: 90px;
177+
top: -8px;
178+
> .{prefix}-item[tooltip-content]
179+
&:before
180+
left: 13px;
181+
top: 35px;
182+
border: none;
183+
border-bottom: 7px solid #2f2f2f;
184+
border-left: 7px solid transparent;
185+
border-right: 7px solid transparent;
186+
&:after
187+
top: 41px;
188+
left: -4px;
189+
white-space: nowrap;
190+
> .{prefix}-item[tooltip-content].opened
191+
&:before,
192+
&:after
193+
content: none;
194+
195+
/* HELP MENUBAR POSITION BOTTOM */
196+
.{prefix}-container
197+
.{prefix}-help-menu
198+
&.bottom
199+
white-space: nowrap;
200+
width: 340px;
201+
height: 40px;
202+
bottom: 8px;
203+
left: 50%;
204+
transform: translateX(-50%);
205+
.tie-panel-history
206+
bottom: 45px;
207+
.opened .tie-panel-history:before
208+
border-right: 8px solid transparent;
209+
border-left: 8px solid transparent;
210+
border-top: 8px solid #fff;
211+
left: 90px;
212+
bottom: -8px;
213+
> .{prefix}-item[tooltip-content]
214+
&:before
215+
left: 13px;
216+
top: auto;
217+
bottom: 36px;
218+
border: none;
219+
border-top: 7px solid #2f2f2f;
220+
border-left: 7px solid transparent;
221+
border-right: 7px solid transparent;
222+
&:after
223+
top: auto;
224+
left: -4px;
225+
bottom: 41px;
226+
white-space: nowrap;
227+
> .{prefix}-item[tooltip-content].opened
228+
&:before,
229+
&:after
230+
content: none;
231+
232+
/* HELP MENUBAR POSITION LEFT */
233+
.{prefix}-container
234+
.{prefix}-help-menu
235+
&.left
236+
white-space: inherit;
237+
width: 40px;
238+
height: 340px;
239+
left: 8px;
240+
top: 50%;
241+
transform: translateY(-50%);
242+
.tie-panel-history
243+
left: 140px;
244+
top: -4px;
245+
.opened .tie-panel-history:before
246+
border-top: 8px solid transparent;
247+
border-bottom: 8px solid transparent;
248+
border-right: 8px solid #fff;
249+
left: -8px;
250+
top: 14px;
251+
.{prefix}-item
252+
margin: 4px auto;
253+
padding: 6px 8px;
254+
> .{prefix}-item[tooltip-content]
255+
&:before
256+
left: 27px;
257+
top: 11px;
258+
border: none;
259+
border-right: 7px solid #2f2f2f;
260+
border-top: 7px solid transparent;
261+
border-bottom: 7px solid transparent;
262+
&:after
263+
top: 7px;
264+
left: 40px;
265+
white-space: nowrap;
266+
> .{prefix}-item[tooltip-content].opened
267+
&:before,
268+
&:after
269+
content: none;
270+
271+
/* HELP MENUBAR POSITION RIGHT */
272+
.{prefix}-container
273+
.{prefix}-help-menu
274+
&.right
275+
white-space: inherit;
276+
width: 40px;
277+
height: 340px;
278+
right: 8px;
279+
top: 50%;
280+
transform: translateY(-50%);
281+
.tie-panel-history
282+
right: -30px;
283+
top: -4px;
284+
.opened .tie-panel-history:before
285+
border-top: 8px solid transparent;
286+
border-bottom: 8px solid transparent;
287+
border-left: 8px solid #fff;
288+
right: -8px;
289+
top: 14px;
290+
.{prefix}-item
291+
margin: 4px auto;
292+
padding: 6px 8px;
293+
> .{prefix}-item[tooltip-content]
294+
&:before
295+
left: -6px;
296+
top: 11px;
297+
border: none;
298+
border-left: 7px solid #2f2f2f;
299+
border-top: 7px solid transparent;
300+
border-bottom: 7px solid transparent;
301+
&:after
302+
top: 7px;
303+
left: auto;
304+
right: 39px;
305+
white-space: nowrap;
306+
> .{prefix}-item[tooltip-content].opened
307+
&:before,
308+
&:after
309+
content: none;

‎apps/image-editor/src/css/range.styl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,6 @@
8686
z-index: 2;
8787
.{prefix}-icpartition
8888
display: inline-block;
89-
background-color: #282828;
89+
background-color: #444;
9090
width: 1px;
91-
height: 24px;
91+
height: 24px;

‎apps/image-editor/src/css/submenu.styl‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,77 @@
8888
.{prefix}-submenu
8989
display: table;
9090

91+
/* Help menu bar */
92+
.{prefix}-container
93+
.{prefix}-help-menu
94+
list-style: none;
95+
padding: 0;
96+
margin: 0 auto;
97+
text-align: center;
98+
vertical-align: middle;
99+
border-radius: 20px;
100+
background-color: rgba(255, 255, 255, 0.06);
101+
z-index: 2;
102+
position: absolute;
103+
.tie-panel-history
104+
display: none;
105+
background-color: #fff;
106+
color: #444;
107+
position: absolute;
108+
width: 196px;
109+
height: 276px;
110+
padding: 4px 2px;
111+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
112+
cursor: auto;
113+
transform: translateX(calc(-50% + 12px));
114+
.history-list
115+
height: 268px;
116+
padding: 0;
117+
overflow: hidden scroll;
118+
list-style: none;
119+
.history-item
120+
height: 24px;
121+
font-size: 11px;
122+
line-height: 24px;
123+
.{prefix}-history-item
124+
position: relative;
125+
height: 24px;
126+
cursor: pointer;
127+
svg
128+
width: 24px;
129+
height: 24px;
130+
span
131+
display: inline-block;
132+
width: 128px;
133+
height: 24px;
134+
text-align: left;
135+
.history-item-icon
136+
display: inline-block;
137+
width: 24px;
138+
height: 24px;
139+
position: absolute;
140+
top: 6px;
141+
left: 6px;
142+
.history-item-checkbox
143+
display: none;
144+
width: 24px;
145+
height: 24px;
146+
position: absolute;
147+
top: 5px;
148+
right: -6px;
149+
&.selected-item
150+
background-color: rgba(119, 119, 119, 0.12);
151+
.history-item-checkbox
152+
display: inline-block;
153+
&.disabled-item
154+
color: #333;
155+
opacity: 0.3;
156+
.opened .tie-panel-history
157+
display: block;
158+
&:before
159+
content: '';
160+
position: absolute;
161+
display: inline-block;
162+
margin: 0 auto;
163+
width: 0;
164+
height: 0;

‎apps/image-editor/src/js/action.js‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { extend } from 'tui-code-snippet';
22
import Imagetracer from '@/helper/imagetracer';
33
import { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone } from '@/util';
4+
import { eventNames, historyNames } from '@/consts';
45

56
export default {
67
/**
@@ -20,6 +21,7 @@ export default {
2021
draw: this._drawAction(),
2122
icon: this._iconAction(),
2223
filter: this._filterAction(),
24+
history: this._historyAction(),
2325
};
2426
},
2527

@@ -60,6 +62,7 @@ export default {
6062
this.ui.initializeImgUrl = imagePath;
6163
this.ui.resizeEditor({ imageSize: sizeValue });
6264
this.clearUndoStack();
65+
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);
6366
}),
6467
undo: () => {
6568
if (!this.isEmptyUndoStack()) {
@@ -81,6 +84,7 @@ export default {
8184
exitCropOnAction();
8285
this.ui.resizeEditor({ imageSize: sizeValue });
8386
this.clearUndoStack();
87+
this._initHistory();
8488
});
8589
},
8690
delete: () => {
@@ -107,6 +111,8 @@ export default {
107111
this.clearUndoStack();
108112
this.ui.activeMenuEvent();
109113
this.ui.resizeEditor({ imageSize: sizeValue });
114+
this._clearHistory();
115+
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);
110116
})
111117
['catch']((message) => Promise.reject(message));
112118
},
@@ -127,6 +133,9 @@ export default {
127133
w.document.body.innerHTML = `<img src='${dataURL}'>`;
128134
}
129135
},
136+
history: (event) => {
137+
this.ui.toggleHistoryMenu(event);
138+
},
130139
},
131140
this._commonAction()
132141
);
@@ -216,12 +225,14 @@ export default {
216225
_maskAction() {
217226
return extend(
218227
{
219-
loadImageFromURL: (imgUrl, file) =>
220-
this.loadImageFromURL(this.toDataURL(), 'FilterImage').then(() => {
228+
loadImageFromURL: (imgUrl, file) => {
229+
return this.loadImageFromURL(this.toDataURL(), 'FilterImage').then(() => {
221230
this.addImageObject(imgUrl).then(() => {
222231
URL.revokeObjectURL(file);
223232
});
224-
}),
233+
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_MASK_IMAGE);
234+
});
235+
},
225236
applyFilter: () => {
226237
this.applyFilter('mask', {
227238
maskObjId: this.activeObjectId,
@@ -310,6 +321,7 @@ export default {
310321
this.stopDrawingMode();
311322
this.ui.resizeEditor();
312323
this.ui.changeMenu('crop');
324+
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.CROP);
313325
})
314326
['catch']((message) => Promise.reject(message));
315327
}
@@ -493,6 +505,18 @@ export default {
493505
});
494506
},
495507

508+
/**
509+
* History Action
510+
* @returns {Object} history actions for ui
511+
* @private
512+
*/
513+
_historyAction() {
514+
return {
515+
undo: (count) => this.undo(count),
516+
redo: (count) => this.redo(count),
517+
};
518+
},
519+
496520
/**
497521
* Common Action
498522
* @returns {Object} common actions for ui

0 commit comments

Comments
 (0)