From dde10f63e82c2c813e87f0f54e1a8316410a35b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9E=84=EC=9E=AC=EC=96=B8?= <jaeeon.lim@nhn.com>
Date: Mon, 22 Feb 2021 12:03:34 +0900
Subject: [PATCH] fix: disappear image when apply crop [#359] (#528)

* env: fix editorconfig tabsize

* fix: image disappears when applying an empty cropzone (#359)
---
 apps/image-editor/src/js/action.js |  4 ++--
 apps/image-editor/src/js/consts.js |  7 +++++++
 apps/image-editor/src/js/util.js   | 18 +++++++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/apps/image-editor/src/js/action.js b/apps/image-editor/src/js/action.js
index 20a7139cd..dbcf37f27 100644
--- a/apps/image-editor/src/js/action.js
+++ b/apps/image-editor/src/js/action.js
@@ -1,6 +1,6 @@
 import { extend } from 'tui-code-snippet';
 import Imagetracer from '@/helper/imagetracer';
-import { isSupportFileApi, base64ToBlob, toInteger } from '@/util';
+import { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone } from '@/util';
 
 export default {
   /**
@@ -304,7 +304,7 @@ export default {
       {
         crop: () => {
           const cropRect = this.getCropzoneRect();
-          if (cropRect) {
+          if (cropRect && !isEmptyCropzone(cropRect)) {
             this.crop(cropRect)
               .then(() => {
                 this.stopDrawingMode();
diff --git a/apps/image-editor/src/js/consts.js b/apps/image-editor/src/js/consts.js
index 2dffeb6d4..e2f1fc2c9 100644
--- a/apps/image-editor/src/js/consts.js
+++ b/apps/image-editor/src/js/consts.js
@@ -291,3 +291,10 @@ export const defaultFilterRangeValues = {
     value: 0.1,
   },
 };
+
+export const emptyCropRectValues = {
+  LEFT: 0,
+  TOP: 0,
+  WIDTH: 0.5,
+  HEIGHT: 0.5,
+};
diff --git a/apps/image-editor/src/js/util.js b/apps/image-editor/src/js/util.js
index 412a0a654..180f7296d 100644
--- a/apps/image-editor/src/js/util.js
+++ b/apps/image-editor/src/js/util.js
@@ -4,7 +4,7 @@
  */
 import { forEach, sendHostname, extend, isString, pick, inArray } from 'tui-code-snippet';
 import Promise from 'core-js-pure/features/promise';
-import { SHAPE_FILL_TYPE, SHAPE_TYPE } from '@/consts';
+import { SHAPE_FILL_TYPE, SHAPE_TYPE, emptyCropRectValues } from '@/consts';
 
 const FLOATING_POINT_DIGIT = 2;
 const CSS_PREFIX = 'tui-image-editor-';
@@ -344,3 +344,19 @@ export function getFillTypeFromObject(shapeObj) {
 export function isShape(obj) {
   return inArray(obj.get('type'), SHAPE_TYPE) >= 0;
 }
+
+/**
+ * Check if cropRect is Empty.
+ * @param {Object} cropRect - cropRect object
+ *  @param {Number} cropRect.left - cropRect left position value
+ *  @param {Number} cropRect.top - cropRect top position value
+ *  @param {Number} cropRect.width - cropRect width value
+ *  @param {Number} cropRect.height - cropRect height value
+ * @returns {boolean}
+ */
+export function isEmptyCropzone(cropRect) {
+  const { left, top, width, height } = cropRect;
+  const { LEFT, TOP, WIDTH, HEIGHT } = emptyCropRectValues;
+
+  return left === LEFT && top === TOP && width === WIDTH && height === HEIGHT;
+}