apply codereview

examples/example03-theme.html

@@ -30,11 +30,11 @@
  var imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
  includeUI: {
  loadImage: {
- path: 'img/sampleImage.jpg',
+ path: 'img/sampleImage2.png',
  name: 'SampleImage'
  },
  theme: blackTheme, // or whiteTheme
- initMenu: 'shape',
+ initMenu: 'filter',
  menuBarPosition: 'bottom'
  },
  cssMaxWidth: 700,

src/css/position.styl

@@ -65,7 +65,7 @@
  .{prefix}-checkbox-wrap.fixed-width
  width: 182px;
  white-space: normal;
- .{prefix}-range-wrap.newline label.range
+ .{prefix}-range-wrap.{prefix}-newline label.range
  display: block;
  text-align: left;
  width: 75%;

src/css/range.styl

@@ -40,7 +40,7 @@
  background-color: #ccc;
  .{prefix}-virtual-range-subbar
  background-color: #606060;
- .{prefix}-range-wrap.newline.short
+ .{prefix}-range-wrap.{prefix}-newline.short
  margin-top: 0;
  margin-left: 17px;
  label

src/css/submenu.styl

@@ -9,11 +9,11 @@
  white-space: nowrap;
  .{prefix}-button:hover svg > use.active
  display: block;
- .tui-image-editor-submenu-item
+ .{prefix}-submenu-item
  li
  display: inline-block;
  vertical-align: top;
- .newline
+ .{prefix}-newline
  display: block;
  margin-top: 14px;
  .{prefix}-button
@@ -42,7 +42,7 @@
  height: 52px;
  border-left: 1px solid #3c3c3c;
  margin: 0 12px 0 14px;
- .{prefix}-main.tui-image-editor-menu-filter .tui-image-editor-partition > div
+ .{prefix}-main.{prefix}-menu-filter .{prefix}-partition > div
  height: 108px;
  margin: 0 29px 0 0px;
  .{prefix}-submenu-align
@@ -55,25 +55,25 @@
  margin-right: 0;
  label
  width: 70px;
- .{prefix}-main.tui-image-editor-menu-crop .{prefix}-submenu > div.tui-image-editor-menu-crop,
- .{prefix}-main.tui-image-editor-menu-flip .{prefix}-submenu > div.tui-image-editor-menu-flip,
- .{prefix}-main.tui-image-editor-menu-rotate .{prefix}-submenu > div.tui-image-editor-menu-rotate,
- .{prefix}-main.tui-image-editor-menu-shape .{prefix}-submenu > div.tui-image-editor-menu-shape,
- .{prefix}-main.tui-image-editor-menu-text .{prefix}-submenu > div.tui-image-editor-menu-text,
- .{prefix}-main.tui-image-editor-menu-mask .{prefix}-submenu > div.tui-image-editor-menu-mask,
- .{prefix}-main.tui-image-editor-menu-icon .{prefix}-submenu > div.tui-image-editor-menu-icon,
- .{prefix}-main.tui-image-editor-menu-draw .{prefix}-submenu > div.tui-image-editor-menu-draw,
- .{prefix}-main.tui-image-editor-menu-filter .{prefix}-submenu > div.tui-image-editor-menu-filter
+ .{prefix}-main.{prefix}-menu-crop .{prefix}-submenu > div.{prefix}-menu-crop,
+ .{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,
+ .{prefix}-main.{prefix}-menu-text .{prefix}-submenu > div.{prefix}-menu-text,
+ .{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
  display: table-cell;
- .{prefix}-main.tui-image-editor-menu-crop,
- .{prefix}-main.tui-image-editor-menu-flip,
- .{prefix}-main.tui-image-editor-menu-rotate,
- .{prefix}-main.tui-image-editor-menu-shape,
- .{prefix}-main.tui-image-editor-menu-text,
- .{prefix}-main.tui-image-editor-menu-mask,
- .{prefix}-main.tui-image-editor-menu-icon,
- .{prefix}-main.tui-image-editor-menu-draw,
- .{prefix}-main.tui-image-editor-menu-filter
+ .{prefix}-main.{prefix}-menu-crop,
+ .{prefix}-main.{prefix}-menu-flip,
+ .{prefix}-main.{prefix}-menu-rotate,
+ .{prefix}-main.{prefix}-menu-shape,
+ .{prefix}-main.{prefix}-menu-text,
+ .{prefix}-main.{prefix}-menu-mask,
+ .{prefix}-main.{prefix}-menu-icon,
+ .{prefix}-main.{prefix}-menu-draw,
+ .{prefix}-main.{prefix}-menu-filter
  .{prefix}-submenu
  display: table;
 

src/js/component/icon.js

@@ -39,7 +39,11 @@ class Icon extends Component {
  * @type {Object}
  */
  this._pathMap = pathMap;
- // this.useDragAddIcon = graphics.useDragAddIcon;
+
+ /**
+ * Option to add icon to drag.
+ * @type {boolean}
+ */
  this.useDragAddIcon = graphics.useDragAddIcon;
  }
 

src/js/graphics.js

@@ -51,7 +51,12 @@ const backstoreOnly = {
  * @ignore
  */
 class Graphics {
- constructor(element, {cssMaxWidth, cssMaxHeight, useItext = false, useDragAddIcon = false} = {}) {
+ constructor(element, {
+ cssMaxWidth,
+ cssMaxHeight,
+ useItext = false,
+ useDragAddIcon = false
+ } = {}) {
  /**
  * Fabric image instance
  * @type {fabric.Image}
@@ -72,13 +77,13 @@ class Graphics {
 
  /**
  * Use Itext mode for text component
- * @type {number}
+ * @type {boolean}
  */
  this.useItext = useItext;
 
  /**
  * Use add drag icon mode for icon component
- * @type {number}
+ * @type {boolean}
  */
  this.useDragAddIcon = useDragAddIcon;
 
@@ -986,9 +991,7 @@ class Graphics {
  * @private
  */
  _onSelectionCreated(fEvent) {
- const {target} = fEvent;
-
- this.fire(events.SELECTION_CREATED, target);
+ this.fire(events.SELECTION_CREATED, fEvent.target);
  }
 
  /**
@@ -1007,11 +1010,7 @@ class Graphics {
  changeSelectableAll(selectable) {
  this._canvas.forEachObject(obj => {
  obj.selectable = selectable;
- if (selectable) {
- obj.hoverCursor = 'move';
- } else {
- obj.hoverCursor = 'crosshair';
- }
+ obj.hoverCursor = selectable ? 'move' : 'crosshair';
  });
  }
 

src/js/imageEditor.js

@@ -307,7 +307,7 @@ class ImageEditor {
  * @private
  */
  _removeObjectStream(targetObjects) {
- if (targetObjects.length === 0) {
+ if (!targetObjects.length) {
  return true;
  }
 

src/js/ui.js

@@ -26,6 +26,8 @@ const SUB_UI_COMPONENT = {
  Filter
 };
 
+const BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';
+
 /**
  * Ui class
  * @class
@@ -123,11 +125,12 @@ export default class Ui {
  this._editorElementWrap.style.top = `${top}px`;
  this._editorElementWrap.style.left = `${left}px`;
  this._editorElementWrap.style.width = `calc(100% - ${right}px)`;
+ const selectElementClassList = this._selectedElement.classList;
 
- if (menuBarPosition === 'top' && this._selectedElement.offsetWidth < 1235) {
- this._selectedElement.classList.add('tui-image-editor-top-optimization');
+ if (menuBarPosition === 'top' && this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION) {
+ selectElementClassList.add('tui-image-editor-top-optimization');
  } else {
- this._selectedElement.classList.remove('tui-image-editor-top-optimization');
+ selectElementClassList.remove('tui-image-editor-top-optimization');
  }
  }
 
@@ -226,8 +229,9 @@ export default class Ui {
  * @private
  */
  _setUiSize(uiSize = this.options.uiSize) {
- this._selectedElement.style.width = uiSize.width;
- this._selectedElement.style.height = uiSize.height;
+ const elementDimension = this._selectedElement.style;
+ elementDimension.width = uiSize.width;
+ elementDimension.height = uiSize.height;
  }
 
  /**

src/js/ui/template/style.js

@@ -42,7 +42,7 @@ export default ({
  ${subMenuLabelActive}
  }
  .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,
- .tui-image-editor-container .tui-image-editor-range-wrap.newline.short label {
+ .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {
  ${subMenuLabelNormal}
  }
  .tui-image-editor-container .tui-image-editor-range-wrap label {

src/js/ui/template/submenu/draw.js

@@ -33,7 +33,7 @@ export default ({iconStyle: {normal, active}}) => (`
  <li class="tui-image-editor-partition only-left-right">
  <div></div>
  </li>
- <li class="newline tui-image-editor-range-wrap">
+ <li class="tui-image-editor-newline tui-image-editor-range-wrap">
  <label class="range">Range</label>
  <div id="tie-draw-range"></div>
  <input id="tie-draw-range-value" class="tui-image-editor-range-value" value="0" />

src/js/ui/template/submenu/filter.js

@@ -43,23 +43,23 @@ export default () => (`
  <label for="tie-remove-white">Remove White</label>
  </div>
  </div>
- <div class="newline tui-image-editor-range-wrap short">
+ <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
  <label>Threshold</label>
  <div id="tie-removewhite-threshold-range"></div>
  </div>
- <div class="newline tui-image-editor-range-wrap short">
+ <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
  <label>Distance</label>
  <div id="tie-removewhite-distance-range"></div>
  </div>
  </div>
  <div>
- <div class="newline tui-image-editor-checkbox-wrap">
+ <div class="tui-image-editor-newline tui-image-editor-checkbox-wrap">
  <div class="tui-image-editor-checkbox">
  <input type="checkbox" id="tie-gradient-transparency">
  <label for="tie-gradient-transparency">Grayscale</label>
  </div>
  </div>
- <div class="newline tui-image-editor-range-wrap short">
+ <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
  <label>Value</label>
  <div id="tie-gradient-transparency-range"></div>
  </div>
@@ -98,13 +98,13 @@ export default () => (`
  </div>
  </div>
  <div>
- <div class="newline tui-image-editor-checkbox-wrap">
+ <div class="tui-image-editor-newline tui-image-editor-checkbox-wrap">
  <div class="tui-image-editor-checkbox">
  <input type="checkbox" id="tie-color-filter">
  <label for="tie-color-filter">Color Filter</label>
  </div>
  </div>
- <div class="newline tui-image-editor-range-wrap short">
+ <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
  <label>Threshold</label>
  <div id="tie-colorfilter-threshole-range"></div>
  </div>

src/js/ui/template/submenu/mask.js

@@ -15,7 +15,7 @@ export default ({iconStyle: {normal, active}}) => (`
  <li class="tui-image-editor-partition only-left-right">
  <div></div>
  </li>
- <li id="tie-mask-apply" class="newline apply">
+ <li id="tie-mask-apply" class="tui-image-editor-newline apply">
  <div class="tui-image-editor-button apply">
  <svg class="svg_ic-menu">
  <use xlink:href="${normal.path}#${normal.name}-ic-apply" class="normal"/>

src/js/ui/template/submenu/rotate.js

@@ -27,7 +27,7 @@ export default ({iconStyle: {normal, active}}) => (`
  <li class="tui-image-editor-partition only-left-right">
  <div></div>
  </li>
- <li class="newline tui-image-editor-range-wrap">
+ <li class="tui-image-editor-newline tui-image-editor-range-wrap">
  <label class="range">Range</label>
  <div id="tie-rotate-range"></div>
  <input id="tie-ratate-range-value" class="tui-image-editor-range-value" value="0" />

src/js/ui/template/submenu/text.js

@@ -78,7 +78,7 @@ export default ({iconStyle: {normal, active}}) => (`
  <li class="tui-image-editor-partition only-left-right">
  <div></div>
  </li>
- <li class="newline tui-image-editor-range-wrap">
+ <li class="tui-image-editor-newline tui-image-editor-range-wrap">
  <label class="range">Text size</label>
  <div id="tie-text-range"></div>
  <input id="tie-text-range-value" class="tui-image-editor-range-value" value="0" />