feat: Adds crop selection presets (square, 3:2, 4:3, 5:4, 7:5, 16:9) (n…

…hn#54) * crop presets * reset state * added test cases for preset cropzone functions
EveryMundo · Jul 2, 2020 · 0f9401c · 0f9401c
1 parent 39cfb7d
commit 0f9401c
Show file tree

Hide file tree

Showing 8 changed files with 310 additions and 6 deletions.
diff --git a/src/css/buttons.styl b/src/css/buttons.styl
@@ -30,18 +30,20 @@
  display: none;
  svg > use.active
  display: block;
- 
+
 /* MASK BUTTON */
 #tie-mask-apply.apply.active .{prefix}-button.apply
  label
  color: #fff;
  svg > use.active
  display: block;
- 
+
 /* CROP BUTTON */
 #tie-crop-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;
 
@@ -50,7 +52,7 @@
 #tie-shape-button
  &.rect .{prefix}-button.rect,
  &.circle .{prefix}-button.circle,
- &.triangle .{prefix}-button.triangle 
+ &.triangle .{prefix}-button.triangle
  svg > use.normal
  display: none;
  svg > use.active
@@ -74,4 +76,4 @@
  border: 1px solid green;
  cursor: inherit;
  left: 0;
- top: 0;
+ top: 0;
diff --git a/src/js/action.js b/src/js/action.js
@@ -320,6 +320,28 @@ export default {
  cancel: () => {
  this.stopDrawingMode();
  this.ui.changeMenu('crop');
+ },
+ 'preset-none': () => {
+ this.setCropzoneRect();
+ this.ui.crop.changeApplyButtonStatus(false);
+ },
+ 'preset-square': () => {
+ this.setCropzoneRect(1 / 1);
+ },
+ 'preset-3-2': () => {
+ this.setCropzoneRect(3 / 2);
+ },
+ 'preset-4-3': () => {
+ this.setCropzoneRect(4 / 3);
+ },
+ 'preset-5-4': () => {
+ this.setCropzoneRect(5 / 4);
+ },
+ 'preset-7-5': () => {
+ this.setCropzoneRect(7 / 5);
+ },
+ 'preset-16-9': () => {
+ this.setCropzoneRect(16 / 9);
  }
  }, this._commonAction());
  },

diff --git a/src/js/component/cropper.js b/src/js/component/cropper.js
@@ -277,6 +277,57 @@ class Cropper extends Component {
  };
  }
 
+ /*
+ * Set a cropzone square
+ */
+ setCropzoneRect(factor) {
+ const canvas = this.getCanvas();
+ canvas.deactivateAll();
+ canvas.selection = false;
+
+ const cropzone = this._cropzone;
+ cropzone.remove();
+
+ if (!factor) {
+ return;
+ }
+
+ const canvasImage = this.getCanvasImage();
+ const oWidth = canvasImage ? canvasImage.getOriginalSize().width : 800;
+ const oHeight = canvasImage ? canvasImage.getOriginalSize().height : 600;
+
+ let width = (10000 * factor);
+ let height = 10000;
+ let scale = 1;
+
+ if (width > oWidth) {
+ scale = (oWidth / width);
+ width = (width * scale);
+ height = (height * scale);
+ }
+
+ if (height > oHeight) {
+ scale = (oHeight / height);
+ width = (width * scale);
+ height = (height * scale);
+ }
+
+ const top = 0;
+ const left = 0;
+
+ cropzone.set({
+ top,
+ left,
+ height,
+ width
+ });
+
+ canvas.add(cropzone);
+ canvas.centerObject(cropzone);
+ canvas.setActiveObject(cropzone);
+ canvas.selection = true;
+ }
+
  /**
  * Keydown event handler
  * @param {KeyboardEvent} e - Event object

diff --git a/src/js/graphics.js b/src/js/graphics.js
@@ -552,6 +552,15 @@ class Graphics {
  return this.getComponent(components.CROPPER).getCropzoneRect();
  }
 
+ /**
+ * Get cropped rect
+ * @param {Object} mode cropzone rect mode
+ * @returns {Object} rect
+ */
+ setCropzoneRect(mode) {
+ return this.getComponent(components.CROPPER).setCropzoneRect(mode);
+ }
+
  /**
  * Get cropped image data
  * @param {Object} cropRect cropzone rect

diff --git a/src/js/imageEditor.js b/src/js/imageEditor.js
@@ -666,6 +666,15 @@ class ImageEditor {
  return this._graphics.getCropzoneRect();
  }
 
+ /**
+ * Set the cropping rect
+ * @param {Object} mode crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777]
+ * @returns {Object} {{left: number, top: number, width: number, height: number}} rect
+ */
+ setCropzoneRect(mode) {
+ return this._graphics.setCropzoneRect(mode);
+ }
+
  /**
  * Flip
  * @returns {Promise}

diff --git a/src/js/ui/crop.js b/src/js/ui/crop.js
@@ -18,7 +18,14 @@ class Crop extends Submenu {
  this.status = 'active';
  this._els = {
  apply: this.selector('#tie-crop-button .apply'),
- cancel: this.selector('#tie-crop-button .cancel')
+ cancel: this.selector('#tie-crop-button .cancel'),
+ 'preset-none': this.selector('#tie-crop-button .preset-none'),
+ 'preset-square': this.selector('#tie-crop-button .preset-square'),
+ 'preset-3-2': this.selector('#tie-crop-button .preset-3-2'),
+ 'preset-4-3': this.selector('#tie-crop-button .preset-4-3'),
+ 'preset-5-4': this.selector('#tie-crop-button .preset-5-4'),
+ 'preset-7-5': this.selector('#tie-crop-button .preset-7-5'),
+ 'preset-16-9': this.selector('#tie-crop-button .preset-16-9')
  };
  }
 
@@ -39,6 +46,41 @@ class Crop extends Submenu {
  this.actions.cancel();
  this._els.apply.classList.remove('active');
  });
+
+ this._els['preset-none'].addEventListener('click', () => {
+ this.setPresetButtonActive('preset-none');
+ this.actions['preset-none']();
+ });
+
+ this._els['preset-square'].addEventListener('click', () => {
+ this.setPresetButtonActive('preset-square');
+ this.actions['preset-square']();
+ });
+
+ this._els['preset-3-2'].addEventListener('click', () => {
+ this.setPresetButtonActive('preset-3-2');
+ this.actions['preset-3-2']();
+ });
+
+ this._els['preset-4-3'].addEventListener('click', () => {
+ this.setPresetButtonActive('preset-4-3');
+ this.actions['preset-4-3']();
+ });
+
+ this._els['preset-5-4'].addEventListener('click', () => {
+ this.setPresetButtonActive('preset-5-4');
+ this.actions['preset-5-4']();
+ });
+
+ this._els['preset-7-5'].addEventListener('click', () => {
+ this.setPresetButtonActive('preset-7-5');
+ this.actions['preset-7-5']();
+ });
+
+ this._els['preset-16-9'].addEventListener('click', () => {
+ this.setPresetButtonActive('preset-16-9');
+ this.actions['preset-16-9']();
+ });
  }
 
  /**
@@ -53,6 +95,7 @@ class Crop extends Submenu {
  */
  changeStandbyMode() {
  this.actions.stopDrawingMode();
+ this.setPresetButtonActive();
  }
 
  /**
@@ -66,6 +109,22 @@ class Crop extends Submenu {
  this._els.apply.classList.remove('active');
  }
  }
+
+ /**
+ * Set preset button to active status
+ * @param {String} preset - preset name
+ */
+ setPresetButtonActive(preset) {
+ const excludeList = [preset, 'apply', 'cancel'];
+ Object.keys(this._els).forEach(key => {
+ if (!excludeList.includes(key)) {
+ this._els[key].classList.remove('active');
+ }
+ });
+ if (preset) {
+ this._els[preset].classList.add('active');
+ }
+ }
 }
 
 export default Crop;
diff --git a/src/js/ui/template/submenu/crop.js b/src/js/ui/template/submenu/crop.js
@@ -1,6 +1,87 @@
 export default ({iconStyle: {normal, active}}) => (`
  <ul class="tui-image-editor-submenu-item">
- <li id="tie-crop-button" class="apply">
+ <li id="tie-crop-button">
+ <div class="tui-image-editor-button preset preset-none active">
+ <div>
+ <svg class="svg_ic-submenu">
+ <use xlink:href="${normal.path}#${normal.name}-ic-shape-rectangle"
+ class="normal"/>
+ <use xlink:href="${active.path}#${active.name}-ic-shape-rectangle"
+ class="active"/>
+ </svg>
+ </div>
+ <label> Custom </label>
+ </div>
+ <div class="tui-image-editor-button preset preset-square">
+ <div>
+ <svg class="svg_ic-submenu">
+ <use xlink:href="${normal.path}#${normal.name}-ic-crop"
+ class="normal"/>
+ <use xlink:href="${active.path}#${active.name}-ic-crop"
+ class="active"/>
+ </svg>
+ </div>
+ <label> Square </label>
+ </div>
+ <div class="tui-image-editor-button preset preset-3-2">
+ <div>
+ <svg class="svg_ic-submenu">
+ <use xlink:href="${normal.path}#${normal.name}-ic-crop"
+ class="normal"/>
+ <use xlink:href="${active.path}#${active.name}-ic-crop"
+ class="active"/>
+ </svg>
+ </div>
+ <label> 3:2 </label>
+ </div>
+ <div class="tui-image-editor-button preset preset-4-3">
+ <div>
+ <svg class="svg_ic-submenu">
+ <use xlink:href="${normal.path}#${normal.name}-ic-crop"
+ class="normal"/>
+ <use xlink:href="${active.path}#${active.name}-ic-crop"
+ class="active"/>
+ </svg>
+ </div>
+ <label> 4:3 </label>
+ </div>
+ <div class="tui-image-editor-button preset preset-5-4">
+ <div>
+ <svg class="svg_ic-submenu">
+ <use xlink:href="${normal.path}#${normal.name}-ic-crop"
+ class="normal"/>
+ <use xlink:href="${active.path}#${active.name}-ic-crop"
+ class="active"/>
+ </svg>
+ </div>
+ <label> 5:4 </label>
+ </div>
+ <div class="tui-image-editor-button preset preset-7-5">
+ <div>
+ <svg class="svg_ic-submenu">
+ <use xlink:href="${normal.path}#${normal.name}-ic-crop"
+ class="normal"/>
+ <use xlink:href="${active.path}#${active.name}-ic-crop"
+ class="active"/>
+ </svg>
+ </div>
+ <label> 7:5 </label>
+ </div>
+ <div class="tui-image-editor-button preset preset-16-9">
+ <div>
+ <svg class="svg_ic-submenu">
+ <use xlink:href="${normal.path}#${normal.name}-ic-crop"
+ class="normal"/>
+ <use xlink:href="${active.path}#${active.name}-ic-crop"
+ class="active"/>
+ </svg>
+ </div>
+ <label> 16:9 </label>
+ </div>
+ </li>
+ <li class="tui-image-editor-partition tui-image-editor-newline">
+ </li>
+ <li id="tie-crop-button" class="action">
  <div class="tui-image-editor-button apply">
  <svg class="svg_ic-menu">
  <use xlink:href="${normal.path}#${normal.name}-ic-apply" class="normal"/>