apply code review

src/js/action.js

@@ -11,7 +11,6 @@ export default {
  */
  getActions() {
  return {
-
  main: this._mainAction(),
  shape: this._shapeAction(),
  crop: this._cropAction(),
@@ -31,72 +30,76 @@ export default {
  * @private
  */
  _mainAction() {
+ const exitCropOnAction = () => {
+ if (this.ui.submenu === 'crop') {
+ this.stopDrawingMode();
+ this.ui.changeMenu('crop');
+ }
+ };
+
  return {
  initLoadImage: (imagePath, imageName) => (
  this.loadImageFromURL(imagePath, imageName).then(sizeValue => {
+ exitCropOnAction();
+ this.ui.initializeImgUrl = imagePath;
  this.ui.resizeEditor(sizeValue);
  this.clearUndoStack();
  })
  ),
  undo: () => {
  if (!this.isEmptyUndoStack()) {
+ exitCropOnAction();
  this.undo();
  }
  },
  redo: () => {
  if (!this.isEmptyRedoStack()) {
+ exitCropOnAction();
  this.redo();
  }
  },
  reset: () => {
- const undoRecursiveCall = () => {
- if (this.isEmptyUndoStack()) {
- this.clearUndoStack();
- this.clearRedoStack();
- } else {
- this.undo().then(() => {
- undoRecursiveCall();
- })['catch'](message => (
- Promise.reject(message)
- ));
- }
- };
- undoRecursiveCall();
- this.ui.resizeEditor();
+ exitCropOnAction();
+ this.loadImageFromURL(this.ui.initializeImgUrl, 'resetImage').then(sizeValue => {
+ exitCropOnAction();
+ this.ui.resizeEditor(sizeValue);
+ this.clearUndoStack();
+ });
  },
  delete: () => {
  this.ui.changeDeleteButtonEnabled(false);
  if (this.activeObjectId) {
+ exitCropOnAction();
  this.removeObject(this.activeObjectId);
  this.activeObjectId = null;
  }
  },
  deleteAll: () => {
+ exitCropOnAction();
  this.clearObjects();
  this.ui.changeDeleteButtonEnabled(false);
  this.ui.changeDeleteAllButtonEnabled(false);
  },
  load: file => {
- const supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
-
- if (!supportingFileAPI) {
+ if (!util.isSupportFileApi()) {
  alert('This browser does not support file-api');
  }
 
+ this.ui.initializeImgUrl = URL.createObjectURL(file);
  this.loadImageFromFile(file).then(() => {
+ exitCropOnAction();
  this.clearUndoStack();
  this.ui.resizeEditor();
  })['catch'](message => (
  Promise.reject(message)
  ));
  },
  download: () => {
- const supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
  const dataURL = this.toDataURL();
  let imageName = this.getImageName();
  let blob, type, w;
 
- if (supportingFileAPI) {
+ if (!util.isSupportFileApi()) {
  blob = util.base64ToBlob(dataURL);
  type = blob.type.split('/')[1];
  if (imageName.split('.').pop() !== type) {
@@ -110,6 +113,10 @@ export default {
  }
  },
  modeChange: menu => {
+ this.stopDrawingMode();
+ if (this.ui.submenu === menu) {
+ return;
+ }
  switch (menu) {
  case 'text':
  this._changeActivateMode('TEXT');
@@ -118,15 +125,13 @@ export default {
  this.startDrawingMode('CROPPER');
  break;
  case 'shape':
- this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);
- this.stopDrawingMode();
  this._changeActivateMode('SHAPE');
+ this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);
  break;
  case 'draw':
  this.ui.draw.setDrawMode();
  break;
  default:
- this.stopDrawingMode();
  break;
  }
  }
@@ -144,6 +149,7 @@ export default {
  this.changeIconColor(this.activeObjectId, color);
  },
  addIcon: iconType => {
+ this.off('mousedown');
  this.once('mousedown', (e, originPointer) => {
  this.addIcon(iconType, {
  left: originPointer.x,
@@ -319,7 +325,7 @@ export default {
  applyFilter: (applying, type, options) => {
  if (applying) {
  this.applyFilter(type, options);
- } else {
+ } else if (this.hasFilter(type)) {
  this.removeFilter(type);
  }
  }
@@ -358,38 +364,43 @@ export default {
  if (obj.type === 'cropzone') {
  this.ui.crop.changeApplyButtonStatus(true);
  } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {
+ this.ui.changeMenu('shape', false);
  this._changeActivateMode('SHAPE');
  this.ui.shape.setShapeStatus({
  strokeColor: obj.stroke,
  strokeWidth: obj.strokeWidth,
  fillColor: obj.fill
  });
  } else if (obj.type === 'text') {
+ this.ui.changeMenu('text', false);
  this._changeActivateMode('TEXT');
+ } else if (obj.type === 'icon') {
+ this.ui.changeMenu('icon', false);
+ this._changeActivateMode('ICON');
  }
  },
  addText: pos => {
  this.addText('Double Click', {
  position: pos.originPosition
  }).then(() => {
  this.changeTextStyle(this.activeObjectId, {
- fill: this.ui.text.getTextColor(),
- fontSize: parseInt(this.ui.text.getFontSize(), 10)
+ fill: this.ui.text.textColor,
+ fontSize: util.toInteger(this.ui.text.fontSize)
  });
  })['catch'](message => (
  Promise.reject(message)
  ));
  },
  objectScaled: obj => {
  if (obj.type === 'text') {
- this.ui.text.setFontSize(parseInt(obj.fontSize, 10));
+ this.ui.text.fontSize = util.toInteger(obj.fontSize);
  }
  },
  mousedown: (event, originPointer) => {
  if (this.ui.submenu && this.hasFilter('colorFilter')) {
  this.applyFilter('colorFilter', {
- x: parseInt(originPointer.x, 10),
- y: parseInt(originPointer.y, 10)
+ x: util.toInteger(originPointer.x),
+ y: util.toInteger(originPointer.y)
  });
  }
  }

src/js/component/shape.js

@@ -308,6 +308,11 @@ class Shape extends Component {
  * @private
  */
  _onFabricMouseDown(fEvent) {
+ if (!fEvent.target) {
+ this._isSelected = false;
+ this._shapeObj = false;
+ }
+
  if (!this._isSelected && !this._shapeObj) {
  const canvas = this.getCanvas();
  this._startPoint = canvas.getPointer(fEvent.e);

src/js/consts.js

@@ -123,5 +123,85 @@ module.exports = {
  unsupportedType: 'Unsupported object type',
  noObject: 'The object is not in canvas.',
  addedObject: 'The object is already added.'
+ },
+
+ /**
+ * Default icon menu svg path
+ * @type {Object.<string, string>}
+ */
+ defaultIconPath: {
+ 'icon-arrow': 'M40 12V0l24 24-24 24V36H0V12h40z',
+ 'icon-arrow-2': 'M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ',
+ 'icon-arrow-3': 'M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ',
+ 'icon-star': 'M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001 z ',
+ 'icon-star-2': 'M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83 z ',
+ 'icon-polygon': 'M3,31 L19,3 h32 l16,28 l-16,28 H19 z ',
+ 'icon-location': 'M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z',
+ 'icon-heart': 'M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285 z ',
+ 'icon-bubble': 'M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z'
+ },
+
+ defaultRotateRangeValus: {
+ min: -360,
+ max: 360,
+ value: 0,
+ realTimeEvent: true
+ },
+
+ defaultDrawRangeValus: {
+ min: 5,
+ max: 30,
+ value: 12
+ },
+
+ defaultShapeStrokeValus: {
+ realTimeEvent: true,
+ min: 0,
+ max: 300,
+ value: 3
+ },
+
+ defaultTextRangeValus: {
+ min: 10,
+ max: 100,
+ value: 50
+ },
+
+ defaultFilterRangeValus: {
+ removewhiteThresholdRange: {
+ min: 0,
+ max: 255,
+ value: 60
+ },
+ removewhiteDistanceRange: {
+ min: 0,
+ max: 255,
+ value: 10
+ },
+ gradientTransparencyRange: {
+ min: 0,
+ max: 255,
+ value: 100
+ },
+ brightnessRange: {
+ min: -255,
+ max: 255,
+ value: 100
+ },
+ noiseRange: {
+ min: 0,
+ max: 1000,
+ value: 100
+ },
+ pixelateRange: {
+ min: 2,
+ max: 20,
+ value: 4
+ },
+ colorfilterThresholeRange: {
+ min: 0,
+ max: 255,
+ value: 45
+ }
  }
 };

src/js/extension/cropzone.js

@@ -147,16 +147,9 @@ const Cropzone = fabric.util.createClass(fabric.Rect, /** @lends Cropzone.protot
  * @private
  */
  _fillInnerRect(ctx) {
- const x = [], y = [];
  const {x: outerX, y: outerY} = this._getCoordinates(ctx);
- const caculateInnerPosition = (target, outer, size) => {
- target[0] = outer[1];
- target[1] = outer[1] + size;
- target[2] = outer[1] + (size * 2);
- target[3] = outer[2];
- };
- caculateInnerPosition(x, outerX, (outerX[2] - outerX[1]) / 3);
- caculateInnerPosition(y, outerY, (outerY[2] - outerY[1]) / 3);
+ const x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3);
+ const y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3);
 
  ctx.save();
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
@@ -170,8 +163,27 @@ const Cropzone = fabric.util.createClass(fabric.Rect, /** @lends Cropzone.protot
  ctx.lineTo(x[1], y[3]);
  ctx.moveTo(x[2], y[0]);
  ctx.lineTo(x[2], y[3]);
+ ctx.closePath();
 
  ctx.stroke();
+ ctx.restore();
+ },
+
+ /**
+ * Calculate Inner Position
+ * @param {Array} outer - outer position
+ * @param {number} size - interval for calcaulate
+ * @returns {Array} - inner position
+ * @private
+ */
+ _caculateInnerPosition(outer, size) {
+ const position = [];
+ position[0] = outer[1];
+ position[1] = outer[1] + size;
+ position[2] = outer[1] + (size * 2);
+ position[3] = outer[2];
+
+ return position;
  },
 
  /**

src/js/graphics.js

@@ -292,6 +292,10 @@ class Graphics {
  this._canvas.setActiveObject(target);
  }
 
+ /**
+ * Set Crop selection style
+ * @param {Object} style - Selection styles
+ */
  setCropSelectionStyle(style) {
  this.cropSelectionStyle = style;
  }

src/js/imageEditor.js

@@ -5,7 +5,7 @@
 import snippet from 'tui-code-snippet';
 import Promise from 'core-js/library/es6/promise';
 import Invoker from './invoker';
-import Ui from './ui';
+import UI from './ui';
 import action from './action';
 import commandFactory from './factory/command';
 import Graphics from './graphics';
@@ -29,18 +29,20 @@ const {isUndefined, forEach, CustomEvents} = snippet;
 class ImageEditor {
  constructor(wrapper, option) {
  option = snippet.extend({
- includeUi: false,
+ includeUI: false,
  applyCropSelectionStyle: false,
  usageStatistics: true
  }, option);
 
  this.activeObjectId = null;
 
  /**
- * Ui instance
+ * UI instance
  * @type {Ui}
  */
- this.ui = option.includeUi ? new Ui(wrapper, option.includeUi, this.getActions()) : null;
+ if (option.includeUI) {
+ this.ui = new UI(wrapper, option.includeUI, this.getActions());
+ }
 
  /**
  * Invoker