Implemented resize functionality fix #100, #342

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

@@ -49,6 +49,16 @@
     .{prefix}-button.apply.active svg > use.active
         display: block;
 
+/* RESIZE BUTTON */
+.tie-resize-button,
+.tie-resize-preset-button
+    .{prefix}-button.apply
+        margin-right: 24px;
+    .{prefix}-button.preset.active svg > use.active
+        display: block;
+    .{prefix}-button.apply.active svg > use.active
+        display: block;
+
 
 /* SHAPE BUTTON */
 .tie-shape-button

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

@@ -11,7 +11,8 @@
         .tui-image-editor
             transition: none;
     .{prefix}-main.{prefix}-menu-flip .{prefix}-grid-visual,
-    .{prefix}-main.{prefix}-menu-rotate .{prefix}-grid-visual
+    .{prefix}-main.{prefix}-menu-rotate .{prefix}-grid-visual,
+    .{prefix}-main.{prefix}-menu-resize .{prefix}-grid-visual
         display: block;
     .{prefix}-grid-visual 
         table

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

@@ -74,7 +74,7 @@
         font-weight: lighter;
         vertical-align: baseline;
         font-family: 'Noto Sans', sans-serif;
-        margin-top: 21px;
+        margin-top: 15px;
         margin-left: 4px;
     .{prefix}-controls
         position: absolute;

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

@@ -67,6 +67,7 @@
         label > span
             width: 70px;
     .{prefix}-main.{prefix}-menu-crop .{prefix}-submenu > div.{prefix}-menu-crop,
+    .{prefix}-main.{prefix}-menu-resize .{prefix}-submenu > div.{prefix}-menu-resize,
     .{prefix}-main.{prefix}-menu-flip .{prefix}-submenu > div.{prefix}-menu-flip,
     .{prefix}-main.{prefix}-menu-rotate .{prefix}-submenu > div.{prefix}-menu-rotate,
     .{prefix}-main.{prefix}-menu-shape .{prefix}-submenu > div.{prefix}-menu-shape,
@@ -78,6 +79,7 @@
     .{prefix}-main.{prefix}-menu-zoom .{prefix}-submenu > div.{prefix}-menu-zoom
         display: table-cell;
     .{prefix}-main.{prefix}-menu-crop,
+    .{prefix}-main.{prefix}-menu-resize,
     .{prefix}-main.{prefix}-menu-flip,
     .{prefix}-main.{prefix}-menu-rotate,
     .{prefix}-main.{prefix}-menu-shape,

apps/image-editor/src/index.js

@@ -23,5 +23,6 @@ import '@/command/rotate';
 import '@/command/setObjectProperties';
 import '@/command/setObjectPosition';
 import '@/command/changeSelection';
+import '@/command/resize';
 
 module.exports = ImageEditor;

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

@@ -1,7 +1,14 @@
 import { extend } from 'tui-code-snippet';
 import Imagetracer from '@/helper/imagetracer';
 import { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone } from '@/util';
-import { eventNames, historyNames, drawingModes, drawingMenuNames, zoomModes } from '@/consts';
+import {
+  eventNames,
+  historyNames,
+  drawingModes,
+  drawingMenuNames,
+  zoomModes,
+  componentNames,
+} from '@/consts';
 
 export default {
   /**
@@ -14,6 +21,7 @@ export default {
       main: this._mainAction(),
       shape: this._shapeAction(),
       crop: this._cropAction(),
+      resize: this._resizeAction(),
       flip: this._flipAction(),
       rotate: this._rotateAction(),
       text: this._textAction(),
@@ -405,6 +413,88 @@ export default {
     );
   },
 
+  /**
+   * Resize Action
+   * @returns {Object} actions for ui resize
+   * @private
+   */
+  _resizeAction() {
+    return extend(
+      {
+        getCurrentDimensions: () => {
+          return this._graphics.getComponent(componentNames.RESIZE).getCurrentDimensions();
+        },
+        preview: (actor, value, lockState) => {
+          const resizeComponent = this._graphics.getComponent(componentNames.RESIZE);
+
+          const currentDimensions = resizeComponent.getCurrentDimensions();
+          const calcAspectRatio = () => currentDimensions.width / currentDimensions.height;
+
+          let dimensions = {};
+          switch(actor) {
+            case 'width':
+              dimensions.width = value;
+              if (lockState) {
+                dimensions.height = value / calcAspectRatio();
+              } else {
+                dimensions.height = currentDimensions.height;
+              }
+              break;
+            case 'height':
+              dimensions.height = value;
+              if (lockState) {
+                dimensions.width = value * calcAspectRatio();
+              } else {
+                dimensions.width = currentDimensions.width;
+              }
+              break;
+            default:
+          }
+
+          resizeComponent.resize(dimensions).then(() => {
+            this.ui.resizeEditor();
+          });
+
+          if (lockState) {
+            this.ui.resize.setWidthValue(dimensions.width);
+            this.ui.resize.setHeightValue(dimensions.height);
+          }
+        },
+        resize: (dimensions = null) => {
+          const resizeComponent = this._graphics.getComponent(componentNames.RESIZE);
+          if (!dimensions) {
+            dimensions = resizeComponent.getCurrentDimensions();
+          }
+
+          this.resize(dimensions)
+            .then(() => {
+              resizeComponent.setOriginalDimensions(dimensions);
+              this.stopDrawingMode();
+              this.ui.resizeEditor();
+              this.ui.changeMenu('resize');
+            })
+            ['catch']((message) => Promise.reject(message));
+        },
+        reset: (standByMode = false) => {
+          const resizeComponent = this._graphics.getComponent(componentNames.RESIZE);
+          const dimensions = resizeComponent.getOriginalDimensions();
+
+          this.ui.resize.setWidthValue(dimensions.width, true);
+          this.ui.resize.setHeightValue(dimensions.height, true);
+
+          resizeComponent.resize(dimensions).then(() => {
+            if (!standByMode) {
+              this.stopDrawingMode();
+              this.ui.resizeEditor();
+              this.ui.changeMenu('resize');
+            }
+          });
+        },
+      },
+      this._commonAction()
+    );
+  },
+
   /**
    * Flip Action
    * @returns {Object} actions for ui flip
@@ -541,7 +631,7 @@ export default {
         this.activeObjectId = null;
         if (this.ui.submenu === 'text') {
           this.changeCursor('text');
-        } else if (this.ui.submenu !== 'draw' && this.ui.submenu !== 'crop') {
+        } else if (this.ui.submenu !== 'draw' && this.ui.submenu !== 'crop' && this.ui.submenu !== 'resize') {
           this.stopDrawingMode();
         }
       },
@@ -566,7 +656,7 @@ export default {
    * @private
    */
   _commonAction() {
-    const { TEXT, CROPPER, SHAPE, ZOOM } = drawingModes;
+    const { TEXT, CROPPER, SHAPE, ZOOM, RESIZE } = drawingModes;
 
     return {
       modeChange: (menu) => {
@@ -584,6 +674,9 @@ export default {
           case drawingMenuNames.ZOOM:
             this.startDrawingMode(ZOOM);
             break;
+          case drawingMenuNames.RESIZE:
+            this.startDrawingMode(RESIZE);
+            break;
           default:
             break;
         }

apps/image-editor/src/js/command/resize.js

@@ -0,0 +1,42 @@
+/**
+ * @author NHN. FE Development Team <dl_javascript@nhn.com>
+ * @fileoverview Resize an image
+ */
+import commandFactory from '@/factory/command';
+import { componentNames, commandNames } from '@/consts';
+
+const { RESIZE } = componentNames;
+
+const command = {
+  name: commandNames.RESIZE_IMAGE,
+
+  /**
+   * Resize an image
+   * @param {Graphics} graphics - Graphics instance
+   * @param {object} dimensions - Image Dimensions
+   * @returns {Promise}
+   */
+  execute(graphics, dimensions) {
+    const resizeComp = graphics.getComponent(RESIZE);
+
+    if (!this.isRedo) {
+      this.undoData.dimensions = resizeComp.getOriginalDimensions();
+    }
+
+    return resizeComp.resize(dimensions);
+  },
+
+  /**
+   * @param {Graphics} graphics - Graphics instance
+   * @returns {Promise}
+   */
+  undo(graphics) {
+    const resizeComp = graphics.getComponent(RESIZE);
+
+    return resizeComp.resize(this.undoData.dimensions);
+  },
+};
+
+commandFactory.register(command);
+
+export default command;

apps/image-editor/src/js/component/resize.js

@@ -0,0 +1,118 @@
+import Component from '@/interface/component';
+import { componentNames } from '@/consts';
+
+/**
+ * Resize components
+ * @param {Graphics} graphics - Graphics instance
+ * @extends {Component}
+ * @class Resize
+ * @ignore
+ */
+class Resize extends Component {
+  constructor(graphics) {
+    super(componentNames.RESIZE, graphics);
+
+    /**
+     * Current dimensions
+     * @type {Object}
+     * @private
+     */
+    this._dimensions = null;
+
+    /**
+     * Original dimensions
+     * @type {Object}
+     * @private
+     */
+    this._originalDimensions = null;
+
+    /**
+     * Lock aspect ratio state
+     * @type {boolean}
+     * @private
+     */
+    this._lockState = false;
+  }
+
+  /**
+   * Get current dimensions
+   * @returns {object}
+   */
+  getCurrentDimensions() {
+    if (!this._dimensions) {
+      const canvasImage = this.getCanvasImage();
+      this._dimensions = {
+        width: canvasImage.width,
+        height: canvasImage.height,
+      };
+    }
+
+    return this._dimensions;
+  }
+
+  /**
+   * Get original dimensions
+   * @returns {object}
+   */
+  getOriginalDimensions() {
+    return this._originalDimensions;
+  }
+
+  /**
+   * Set original dimensions
+   * @param {object} dimensions - Dimensions
+   */
+  setOriginalDimensions(dimensions) {
+    this._originalDimensions = dimensions;
+  }
+
+  /**
+   * Set states of lock aspect ratio
+   * @param {boolean} lockState - Lock aspect ratio state
+   */
+  setLockState(lockState) {
+    this._lockState = lockState;
+  }
+
+  /**
+   * Resize Image
+   * @param {Object} dimensions - Resize dimensions
+   * @returns {Promise}
+   * @private
+   */
+  resize(dimensions) {
+    const canvasImage = this.getCanvasImage();
+    const scaleValues = {
+      scaleX: dimensions.width ? dimensions.width / canvasImage.width : canvasImage.scaleX,
+      scaleY: dimensions.height ? dimensions.height / canvasImage.height : canvasImage.scaleY,
+    };
+
+    if (canvasImage.scaleX !== scaleValues.scaleX || canvasImage.scaleY !== scaleValues.scaleY) {
+      canvasImage.set(scaleValues).setCoords();
+
+      this._dimensions = {
+        width: canvasImage.width * canvasImage.scaleX,
+        height: canvasImage.height * canvasImage.scaleY,
+      };
+    }
+
+    this.adjustCanvasDimensionBase();
+
+    return Promise.resolve();
+  }
+
+  /**
+   * Start resizing
+   */
+  start() {
+    const dimensions = this.getCurrentDimensions();
+    this.setOriginalDimensions(dimensions);
+  }
+
+  /**
+   * End resizing
+   */
+  end() {}
+}
+
+export default Resize;