Merge branch 'master' into production

# Conflicts: # apps/image-editor/package-lock.json # apps/react-image-editor/package-lock.json
nhn · Mar 5, 2021 · ef44b61 · ef44b61
2 parents 3f33ee2 + 6207dcc
commit ef44b61
Show file tree

Hide file tree

Showing 86 changed files with 30,269 additions and 49,320 deletions.
diff --git a/apps/image-editor/examples/js/service-basic.js b/apps/image-editor/examples/js/service-basic.js
@@ -357,6 +357,7 @@ $btnUndo.on('click', function () {
   $displayingSubMenu.hide();
 
   if (!$(this).hasClass('disabled')) {
+    imageEditor.discardSelection();
     imageEditor.undo();
   }
 });
@@ -365,6 +366,7 @@ $btnRedo.on('click', function () {
   $displayingSubMenu.hide();
 
   if (!$(this).hasClass('disabled')) {
+    imageEditor.discardSelection();
     imageEditor.redo();
   }
 });

diff --git a/apps/image-editor/package-lock.json b/apps/image-editor/package-lock.json
diff --git a/apps/image-editor/package.json b/apps/image-editor/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tui-image-editor",
   "author": "NHN. FE Development Lab <[email protected]>",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/apps/image-editor/src/css/icon.styl b/apps/image-editor/src/css/icon.styl
@@ -13,6 +13,7 @@
         width: 257px;
         height: 26px;
 
+    .{prefix}-help-menu
     .{prefix}-controls
         svg > use
             display: none;
@@ -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

diff --git a/apps/image-editor/src/css/main.styl b/apps/image-editor/src/css/main.styl
@@ -113,7 +113,7 @@ body > textarea
 
 /* BIG MENU */
 .{prefix}-container
-    .{prefix}-menu
+    .{prefix}-menu, .{prefix}-help-menu
         width: auto;
         list-style: none;
         padding: 0;

diff --git a/apps/image-editor/src/css/position.styl b/apps/image-editor/src/css/position.styl
@@ -74,7 +74,7 @@
         width: 136px;
 
 
-/* POSITION RIGIHT */
+/* POSITION RIGHT */
 .{prefix}-container
   &.right
     .{prefix}-menu
@@ -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;
diff --git a/apps/image-editor/src/css/range.styl b/apps/image-editor/src/css/range.styl
@@ -86,6 +86,6 @@
         z-index: 2;
     .{prefix}-icpartition
         display: inline-block;
-        background-color: #282828;
+        background-color: #444;
         width: 1px;
-        height: 24px;
+        height: 24px;
diff --git a/apps/image-editor/src/css/submenu.styl b/apps/image-editor/src/css/submenu.styl
@@ -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;
diff --git a/apps/image-editor/src/js/action.js b/apps/image-editor/src/js/action.js
@@ -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 {
   /**
@@ -20,6 +21,7 @@ export default {
       draw: this._drawAction(),
       icon: this._iconAction(),
       filter: this._filterAction(),
+      history: this._historyAction(),
     };
   },
 
@@ -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()) {
@@ -81,6 +84,7 @@ export default {
             exitCropOnAction();
             this.ui.resizeEditor({ imageSize: sizeValue });
             this.clearUndoStack();
+            this._initHistory();
           });
         },
         delete: () => {
@@ -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));
         },
@@ -127,6 +133,9 @@ export default {
             w.document.body.innerHTML = `<img src='${dataURL}'>`;
           }
         },
+        history: (event) => {
+          this.ui.toggleHistoryMenu(event);
+        },
       },
       this._commonAction()
     );
@@ -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,
@@ -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));
           }
@@ -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