Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add history feature #544

Merged
merged 31 commits into from
Mar 5, 2021
Merged

feat: add history feature #544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
83c1236
feat: add history element
lja1018 Dec 21, 2020
cfae1b4
feat: add history list element, event listener
lja1018 Dec 23, 2020
7717802
feat: add history, panel menu component
lja1018 Dec 23, 2020
c95d54c
test: add history component test
lja1018 Dec 24, 2020
88eb8a3
chore: remove default history
lja1018 Dec 24, 2020
584a3c6
refactor: constant classname
lja1018 Dec 28, 2020
8a74e55
feat: add history by action
lja1018 Dec 31, 2020
19c807e
feat: add multiUndo, multiRedo
lja1018 Jan 4, 2021
03ba6a3
chore: apply api review
lja1018 Jan 5, 2021
45b0e57
chore: apply detail history
lja1018 Jan 6, 2021
eeaf54f
chore: add execution command event
lja1018 Jan 7, 2021
e596768
chore: add mask history
lja1018 Jan 7, 2021
66bfe49
chore: select load image history when init history
lja1018 Jan 7, 2021
42920aa
chore: apply code review
lja1018 Jan 13, 2021
623a4ba
fix: list scroll position is bottom when list element added
lja1018 Feb 10, 2021
5a8f067
feat: add help toolbar
lja1018 Feb 16, 2021
93f8d0f
chore: add help menus const
lja1018 Feb 16, 2021
5208bd7
chore: add history icon svg file
lja1018 Feb 17, 2021
85cc5b3
chore: add toggle history menu
lja1018 Feb 17, 2021
413f87e
chore: add list, panel, item style
lja1018 Feb 17, 2021
e0350f7
chore: add history action icon
lja1018 Feb 17, 2021
f8d9ea5
chore: change history title type
lja1018 Feb 18, 2021
d1ab236
chore: add history template html
lja1018 Feb 18, 2021
2ccfe9c
chore: resolve detail history information
lja1018 Feb 18, 2021
d8062f2
chore: resolve tooltip position with helpmenubar position
lja1018 Feb 18, 2021
e30491c
test: fix broken test
lja1018 Feb 22, 2021
a384a97
chore: add 3 history icons
lja1018 Mar 4, 2021
3b9619c
refactor: apply history name constants
lja1018 Mar 4, 2021
23653e2
Merge branch 'feat/v3.13.0' into feat/history-feature
lja1018 Mar 4, 2021
817f292
chore: apply alias
lja1018 Mar 4, 2021
d0ceda2
chore: not toggle when history menu clicked
lja1018 Mar 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/image-editor/src/css/icon.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
width: 257px;
height: 26px;

.{prefix}-help-menu
.{prefix}-controls
svg > use
display: none;
Expand All @@ -21,6 +22,8 @@
display: block;
.active svg:hover > use.hover
display: none;
.opened svg > use.hover
display: block;
svg > use.normal
display: block;
.active svg > use.active
Expand Down
2 changes: 1 addition & 1 deletion apps/image-editor/src/css/main.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ body > textarea

/* BIG MENU */
.{prefix}-container
.{prefix}-menu
.{prefix}-menu, .{prefix}-help-menu
width: auto;
list-style: none;
padding: 0;
Expand Down
152 changes: 151 additions & 1 deletion apps/image-editor/src/css/position.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
width: 136px;


/* POSITION RIGIHT */
/* POSITION RIGHT */
.{prefix}-container
&.right
.{prefix}-menu
Expand Down Expand Up @@ -157,3 +157,153 @@
top: 0;
bottom: inherit;

/* HELP MENUBAR POSITION TOP */
.{prefix}-container
.{prefix}-help-menu
&.top
white-space: nowrap;
width: 340px;
height: 40px;
top: 8px;
left: 50%;
transform: translateX(-50%);
.tie-panel-history
top: 45px;
.opened .tie-panel-history:before
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-bottom: 8px solid #fff;
left: 90px;
top: -8px;
> .{prefix}-item[tooltip-content]
&:before
left: 13px;
top: 35px;
border: none;
border-bottom: 7px solid #2f2f2f;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
&:after
top: 41px;
left: -4px;
white-space: nowrap;
> .{prefix}-item[tooltip-content].opened
&:before,
&:after
content: none;

/* HELP MENUBAR POSITION BOTTOM */
.{prefix}-container
.{prefix}-help-menu
&.bottom
white-space: nowrap;
width: 340px;
height: 40px;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
.tie-panel-history
bottom: 45px;
.opened .tie-panel-history:before
border-right: 8px solid transparent;
border-left: 8px solid transparent;
border-top: 8px solid #fff;
left: 90px;
bottom: -8px;
> .{prefix}-item[tooltip-content]
&:before
left: 13px;
top: auto;
bottom: 36px;
border: none;
border-top: 7px solid #2f2f2f;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
&:after
top: auto;
left: -4px;
bottom: 41px;
white-space: nowrap;
> .{prefix}-item[tooltip-content].opened
&:before,
&:after
content: none;

/* HELP MENUBAR POSITION LEFT */
.{prefix}-container
.{prefix}-help-menu
&.left
white-space: inherit;
width: 40px;
height: 340px;
left: 8px;
top: 50%;
transform: translateY(-50%);
.tie-panel-history
left: 140px;
top: -4px;
.opened .tie-panel-history:before
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #fff;
left: -8px;
top: 14px;
.{prefix}-item
margin: 4px auto;
padding: 6px 8px;
> .{prefix}-item[tooltip-content]
&:before
left: 27px;
top: 11px;
border: none;
border-right: 7px solid #2f2f2f;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
&:after
top: 7px;
left: 40px;
white-space: nowrap;
> .{prefix}-item[tooltip-content].opened
&:before,
&:after
content: none;

/* HELP MENUBAR POSITION RIGHT */
.{prefix}-container
.{prefix}-help-menu
&.right
white-space: inherit;
width: 40px;
height: 340px;
right: 8px;
top: 50%;
transform: translateY(-50%);
.tie-panel-history
right: -30px;
top: -4px;
.opened .tie-panel-history:before
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #fff;
right: -8px;
top: 14px;
.{prefix}-item
margin: 4px auto;
padding: 6px 8px;
> .{prefix}-item[tooltip-content]
&:before
left: -6px;
top: 11px;
border: none;
border-left: 7px solid #2f2f2f;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
&:after
top: 7px;
left: auto;
right: 39px;
white-space: nowrap;
> .{prefix}-item[tooltip-content].opened
&:before,
&:after
content: none;
4 changes: 2 additions & 2 deletions apps/image-editor/src/css/range.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,6 @@
z-index: 2;
.{prefix}-icpartition
display: inline-block;
background-color: #282828;
background-color: #444;
width: 1px;
height: 24px;
height: 24px;
74 changes: 74 additions & 0 deletions apps/image-editor/src/css/submenu.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,77 @@
.{prefix}-submenu
display: table;

/* Help menu bar */
.{prefix}-container
.{prefix}-help-menu
list-style: none;
padding: 0;
margin: 0 auto;
text-align: center;
vertical-align: middle;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.06);
z-index: 2;
position: absolute;
.tie-panel-history
display: none;
background-color: #fff;
color: #444;
position: absolute;
width: 196px;
height: 276px;
padding: 4px 2px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
cursor: auto;
transform: translateX(calc(-50% + 12px));
.history-list
height: 268px;
padding: 0;
overflow: hidden scroll;
list-style: none;
.history-item
height: 24px;
font-size: 11px;
line-height: 24px;
.{prefix}-history-item
position: relative;
height: 24px;
cursor: pointer;
svg
width: 24px;
height: 24px;
span
display: inline-block;
width: 128px;
height: 24px;
text-align: left;
.history-item-icon
display: inline-block;
width: 24px;
height: 24px;
position: absolute;
top: 6px;
left: 6px;
.history-item-checkbox
display: none;
width: 24px;
height: 24px;
position: absolute;
top: 5px;
right: -6px;
&.selected-item
background-color: rgba(119, 119, 119, 0.12);
.history-item-checkbox
display: inline-block;
&.disabled-item
color: #333;
opacity: 0.3;
.opened .tie-panel-history
display: block;
&:before
content: '';
position: absolute;
display: inline-block;
margin: 0 auto;
width: 0;
height: 0;
30 changes: 27 additions & 3 deletions apps/image-editor/src/js/action.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { extend } from 'tui-code-snippet';
import Imagetracer from '@/helper/imagetracer';
import { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone } from '@/util';
import { eventNames, historyNames } from '@/consts';

export default {
/**
Expand All @@ -20,6 +21,7 @@ export default {
draw: this._drawAction(),
icon: this._iconAction(),
filter: this._filterAction(),
history: this._historyAction(),
};
},

Expand Down Expand Up @@ -60,6 +62,7 @@ export default {
this.ui.initializeImgUrl = imagePath;
this.ui.resizeEditor({ imageSize: sizeValue });
this.clearUndoStack();
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);
}),
undo: () => {
if (!this.isEmptyUndoStack()) {
Expand All @@ -81,6 +84,7 @@ export default {
exitCropOnAction();
this.ui.resizeEditor({ imageSize: sizeValue });
this.clearUndoStack();
this._initHistory();
});
},
delete: () => {
Expand All @@ -107,6 +111,8 @@ export default {
this.clearUndoStack();
this.ui.activeMenuEvent();
this.ui.resizeEditor({ imageSize: sizeValue });
this._clearHistory();
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);
})
['catch']((message) => Promise.reject(message));
},
Expand All @@ -127,6 +133,9 @@ export default {
w.document.body.innerHTML = `<img src='${dataURL}'>`;
}
},
history: (event) => {
this.ui.toggleHistoryMenu(event);
},
},
this._commonAction()
);
Expand Down Expand Up @@ -216,12 +225,14 @@ export default {
_maskAction() {
return extend(
{
loadImageFromURL: (imgUrl, file) =>
this.loadImageFromURL(this.toDataURL(), 'FilterImage').then(() => {
loadImageFromURL: (imgUrl, file) => {
return this.loadImageFromURL(this.toDataURL(), 'FilterImage').then(() => {
this.addImageObject(imgUrl).then(() => {
URL.revokeObjectURL(file);
});
}),
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_MASK_IMAGE);
});
},
applyFilter: () => {
this.applyFilter('mask', {
maskObjId: this.activeObjectId,
Expand Down Expand Up @@ -310,6 +321,7 @@ export default {
this.stopDrawingMode();
this.ui.resizeEditor();
this.ui.changeMenu('crop');
this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.CROP);
})
['catch']((message) => Promise.reject(message));
}
Expand Down Expand Up @@ -493,6 +505,18 @@ export default {
});
},

/**
* History Action
* @returns {Object} history actions for ui
* @private
*/
_historyAction() {
return {
undo: (count) => this.undo(count),
redo: (count) => this.redo(count),
};
},

/**
* Common Action
* @returns {Object} common actions for ui
Expand Down
4 changes: 3 additions & 1 deletion apps/image-editor/src/js/command/addShape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ const command = {
const shapeComp = graphics.getComponent(SHAPE);

return shapeComp.add(type, options).then((objectProps) => {
this.undoData.object = graphics.getObject(objectProps.id);
const { id } = objectProps;

this.undoData.object = graphics.getObject(id);

return objectProps;
});
Expand Down
3 changes: 1 addition & 2 deletions apps/image-editor/src/js/command/addText.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,8 @@ const command = {

return textComp.add(text, options).then((objectProps) => {
const { id } = objectProps;
const textObject = graphics.getObject(id);

this.undoData.object = textObject;
this.undoData.object = graphics.getObject(id);

return objectProps;
});
Expand Down
Loading