Merge branch 'master' into production

# Conflicts:
#	apps/image-editor/index.d.ts
#	apps/image-editor/package-lock.json
#	apps/react-image-editor/package-lock.json

Author: lja1018

apps/image-editor/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for TOAST UI Image Editor v3.13.0
+// Type definitions for TOAST UI Image Editor v3.14.0
 // TypeScript Version: 3.2.2
 
 declare namespace tuiImageEditor {

apps/image-editor/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "tui-image-editor",
   "author": "NHN. FE Development Lab <[email protected]>",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "license": "MIT",
   "repository": {
     "type": "git",

apps/image-editor/package.json

@@ -79,3 +79,14 @@
     cursor: inherit;
     left: 0;
     top: 0;
+
+
+/* FLIP BUTTON */
+.tie-zoom-button
+    &.resetFlip .{prefix}-button.resetFlip,
+    &.flipX .{prefix}-button.flipX,
+    &.flipY .{prefix}-button.flipY
+        svg > use.normal
+            display: none;
+        svg > use.active
+            display: block;

apps/image-editor/src/css/buttons.styl

@@ -22,6 +22,7 @@
             display: block;
         .active svg:hover > use.hover
             display: none;
+        .on svg > use.hover,
         .opened svg > use.hover
             display: block;
         svg > use.normal

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

@@ -162,7 +162,7 @@
     .{prefix}-help-menu
         &.top
             white-space: nowrap;
-            width: 340px;
+            width: 506px;
             height: 40px;
             top: 8px;
             left: 50%;
@@ -197,7 +197,7 @@
     .{prefix}-help-menu
         &.bottom
             white-space: nowrap;
-            width: 340px;
+            width: 506px;
             height: 40px;
             bottom: 8px;
             left: 50%;
@@ -235,7 +235,7 @@
         &.left
             white-space: inherit;
             width: 40px;
-            height: 340px;
+            height: 506px;
             left: 8px;
             top: 50%;
             transform: translateY(-50%);
@@ -274,7 +274,7 @@
         &.right
             white-space: inherit;
             width: 40px;
-            height: 340px;
+            height: 506px;
             right: 8px;
             top: 50%;
             transform: translateY(-50%);

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

@@ -74,7 +74,8 @@
     .{prefix}-main.{prefix}-menu-mask .{prefix}-submenu > div.{prefix}-menu-mask,
     .{prefix}-main.{prefix}-menu-icon .{prefix}-submenu > div.{prefix}-menu-icon,
     .{prefix}-main.{prefix}-menu-draw .{prefix}-submenu > div.{prefix}-menu-draw,
-    .{prefix}-main.{prefix}-menu-filter .{prefix}-submenu > div.{prefix}-menu-filter
+    .{prefix}-main.{prefix}-menu-filter .{prefix}-submenu > div.{prefix}-menu-filter,
+    .{prefix}-main.{prefix}-menu-zoom .{prefix}-submenu > div.{prefix}-menu-zoom
         display: table-cell;
     .{prefix}-main.{prefix}-menu-crop,
     .{prefix}-main.{prefix}-menu-flip,
@@ -84,7 +85,8 @@
     .{prefix}-main.{prefix}-menu-mask,
     .{prefix}-main.{prefix}-menu-icon,
     .{prefix}-main.{prefix}-menu-draw,
-    .{prefix}-main.{prefix}-menu-filter
+    .{prefix}-main.{prefix}-menu-filter,
+    .{prefix}-main.{prefix}-menu-zoom
       .{prefix}-submenu
         display: table;
 

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

@@ -1,7 +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';
+import { eventNames, historyNames, drawingModes, drawingMenuNames, zoomModes } from '@/consts';
 
 export default {
   /**
@@ -53,6 +53,28 @@ export default {
 
       return result;
     };
+    const toggleZoomMode = () => {
+      const zoomMode = this._graphics.getZoomMode();
+
+      this.stopDrawingMode();
+      if (zoomMode !== zoomModes.ZOOM) {
+        this.startDrawingMode(drawingModes.ZOOM);
+        this._graphics.startZoomInMode();
+      } else {
+        this._graphics.endZoomInMode();
+      }
+    };
+    const toggleHandMode = () => {
+      const zoomMode = this._graphics.getZoomMode();
+
+      this.stopDrawingMode();
+      if (zoomMode !== zoomModes.HAND) {
+        this.startDrawingMode(drawingModes.ZOOM);
+        this._graphics.startHandMode();
+      } else {
+        this._graphics.endHandMode();
+      }
+    };
 
     return extend(
       {
@@ -136,6 +158,20 @@ export default {
         history: (event) => {
           this.ui.toggleHistoryMenu(event);
         },
+        zoomIn: () => {
+          this.ui.toggleZoomButtonStatus('zoomIn');
+          this.deactivateAll();
+          toggleZoomMode();
+        },
+        zoomOut: () => {
+          this._graphics.zoomOut();
+        },
+        hand: () => {
+          this.ui.offZoomInButtonStatus();
+          this.ui.toggleZoomButtonStatus('hand');
+          this.deactivateAll();
+          toggleHandMode();
+        },
       },
       this._commonAction()
     );
@@ -523,19 +559,24 @@ export default {
    * @private
    */
   _commonAction() {
+    const { TEXT, CROPPER, SHAPE, ZOOM } = drawingModes;
+
     return {
       modeChange: (menu) => {
         switch (menu) {
-          case 'text':
-            this._changeActivateMode('TEXT');
+          case drawingMenuNames.TEXT:
+            this._changeActivateMode(TEXT);
             break;
-          case 'crop':
-            this.startDrawingMode('CROPPER');
+          case drawingMenuNames.CROP:
+            this.startDrawingMode(CROPPER);
             break;
-          case 'shape':
-            this._changeActivateMode('SHAPE');
+          case drawingMenuNames.SHAPE:
+            this._changeActivateMode(SHAPE);
             this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);
             break;
+          case drawingMenuNames.ZOOM:
+            this.startDrawingMode(ZOOM);
+            break;
           default:
             break;
         }