fixed: shape stroke limit maxsize

src/js/action.js

@@ -24,37 +24,6 @@ export default {
  };
  },
 
- _commonAction() {
- return {
- deactivateAll: () => {
- this.deactivateAll();
- },
- changeSelectableAll: selectable => {
- this.changeSelectableAll(selectable);
- },
- discardSelection: () => {
- this.discardSelection();
- },
- modeChange: menu => {
- switch (menu) {
- case 'text':
- this._changeActivateMode('TEXT');
- break;
- case 'crop':
- this.startDrawingMode('CROPPER');
- break;
- case 'shape':
- this._changeActivateMode('SHAPE');
- this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);
- break;
- default:
- break;
- }
- },
- stopDrawingMode: this.stopDrawingMode.bind(this)
- };
- },
-
  /**
  * Main Action
  * @returns {Object} actions for ui main
@@ -425,6 +394,8 @@ export default {
  strokeWidth: obj.strokeWidth,
  fillColor: obj.fill
  });
+
+ this.ui.shape.setMaxStrokeValue(obj);
  } else if (obj.type === 'path' || obj.type === 'line') {
  this.stopDrawingMode();
  if (this.ui.submenu) {
@@ -457,9 +428,18 @@ export default {
  Promise.reject(message)
  ));
  },
+ addObjectAfter: obj => {
+ if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {
+ this.ui.shape.setMaxStrokeValue(obj);
+ }
+ },
  objectScaled: obj => {
  if (obj.type === 'i-text') {
  this.ui.text.fontSize = util.toInteger(obj.fontSize);
+ } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) >= 0) {
+ this.ui.shape._els.strokeRange.max = Math.min(obj.width, obj.height) - 1;
+ this.ui.shape.setMaxStrokeValue(obj);
+ // here job remaining
  }
  },
  selectionCleared: () => {
@@ -473,6 +453,36 @@ export default {
  });
  },
 
+ /**
+ * Common Action
+ * @returns {Object} common actions for ui
+ * @private
+ */
+ _commonAction() {
+ return {
+ modeChange: menu => {
+ switch (menu) {
+ case 'text':
+ this._changeActivateMode('TEXT');
+ break;
+ case 'crop':
+ this.startDrawingMode('CROPPER');
+ break;
+ case 'shape':
+ this._changeActivateMode('SHAPE');
+ this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);
+ break;
+ default:
+ break;
+ }
+ },
+ deactivateAll: this.deactivateAll.bind(this),
+ changeSelectableAll: this.changeSelectableAll.bind(this),
+ discardSelection: this.discardSelection.bind(this),
+ stopDrawingMode: this.stopDrawingMode.bind(this)
+ };
+ },
+
  /**
  * Mixin
  * @param {ImageEditor} ImageEditor instance

src/js/component/shape.js

@@ -370,6 +370,8 @@ class Shape extends Component {
  resizeHelper.adjustOriginToCenter(shape);
  }
 
+ this.fire(eventNames.ADD_OBJECT_AFTER, this.graphics.createObjectProperties(shape));
+
  canvas.off({
  'mouse:move': this._handlers.mousemove,
  'mouse:up': this._handlers.mouseup

src/js/consts.js

@@ -56,12 +56,14 @@ module.exports = {
  OBJECT_ACTIVATED: 'objectActivated',
  OBJECT_MOVED: 'objectMoved',
  OBJECT_SCALED: 'objectScaled',
+ OBJECT_CREATED: 'objectCreated',
  TEXT_EDITING: 'textEditing',
  TEXT_CHANGED: 'textChanged',
  ICON_CREATE_RESIZE: 'iconCreateResize',
  ICON_CREATE_END: 'iconCreateEnd',
  ADD_TEXT: 'addText',
  ADD_OBJECT: 'addObject',
+ ADD_OBJECT_AFTER: 'addObjectAfter',
  MOUSE_DOWN: 'mousedown',
  MOUSE_UP: 'mouseup',
  MOUSE_MOVE: 'mousemove',
@@ -162,7 +164,7 @@ module.exports = {
 
  defaultShapeStrokeValus: {
  realTimeEvent: true,
- min: 0,
+ min: 2,
  max: 300,
  value: 3
  },

src/js/imageEditor.js

@@ -85,6 +85,7 @@ class ImageEditor {
  createdPath: this._onCreatedPath,
  addText: this._onAddText.bind(this),
  addObject: this._onAddObject.bind(this),
+ addObjectAfter: this._onAddObjectAfter.bind(this),
  textEditing: this._onTextEditing.bind(this),
  textChanged: this._onTextChanged.bind(this),
  iconCreateResize: this._onIconCreateResize.bind(this),
@@ -234,7 +235,8 @@ class ImageEditor {
  'iconCreateResize': this._handlers.iconCreateResize,
  'iconCreateEnd': this._handlers.iconCreateEnd,
  'selectionCleared': this._handlers.selectionCleared,
- 'selectionCreated': this._handlers.selectionCreated
+ 'selectionCreated': this._handlers.selectionCreated,
+ 'addObjectAfter': this._handlers.addObjectAfter
  });
  }
 
@@ -1035,6 +1037,10 @@ class ImageEditor {
  this._pushAddObjectCommand(obj);
  }
 
+ _onAddObjectAfter(objectProps) {
+ this.fire(events.ADD_OBJECT_AFTER, objectProps);
+ }
+
  _selectionCleared() {
  this.fire(events.SELECTION_CLEARED);
  }

src/js/ui/shape.js

@@ -44,10 +44,10 @@ export default class Shape extends Submenu {
  addEvent(actions) {
  this.actions = actions;
 
- this._els.shapeSelectButton.addEventListener('click', this._changeShape.bind(this));
- this._els.strokeRange.on('change', this._changeStrokeRange.bind(this));
- this._els.fillColorpicker.on('change', this._changeFillColor.bind(this));
- this._els.strokeColorpicker.on('change', this._changeStrokeColor.bind(this));
+ this._els.shapeSelectButton.addEventListener('click', this._changeShapeHandler.bind(this));
+ this._els.strokeRange.on('change', this._changeStrokeRangeHandler.bind(this));
+ this._els.fillColorpicker.on('change', this._changeFillColorHandler.bind(this));
+ this._els.strokeColorpicker.on('change', this._changeStrokeColorHandler.bind(this));
  this._els.strokeRangeValue.value = this._els.strokeRange.value;
  this._els.strokeRangeValue.setAttribute('readonly', true);
  }
@@ -84,12 +84,20 @@ export default class Shape extends Submenu {
  this.actions.stopDrawingMode();
  }
 
+ setMaxStrokeValue(obj) {
+ let strokeMaxValue = Math.min(obj.width, obj.height);
+ if (strokeMaxValue <= 0) {
+ strokeMaxValue = defaultShapeStrokeValus.max;
+ }
+ this._els.strokeRange.max = strokeMaxValue;
+ }
+
  /**
  * Change icon color
  * @param {object} event - add button event object
  * @private
  */
- _changeShape(event) {
+ _changeShapeHandler(event) {
  const button = event.target.closest('.tui-image-editor-button');
  if (button) {
  this.actions.stopDrawingMode();
@@ -115,7 +123,7 @@ export default class Shape extends Submenu {
  * @param {number} value - stroke range value
  * @private
  */
- _changeStrokeRange(value) {
+ _changeStrokeRangeHandler(value) {
  this.options.strokeWidth = toInteger(value);
  this._els.strokeRangeValue.value = toInteger(value);
 
@@ -131,7 +139,7 @@ export default class Shape extends Submenu {
  * @param {string} color - fill color
  * @private
  */
- _changeFillColor(color) {
+ _changeFillColorHandler(color) {
  color = color || 'transparent';
  this.options.fill = color;
  this.actions.changeShape({
@@ -144,7 +152,7 @@ export default class Shape extends Submenu {
  * @param {string} color - fill color
  * @private
  */
- _changeStrokeColor(color) {
+ _changeStrokeColorHandler(color) {
  color = color || 'transparent';
  this.options.stroke = color;
  this.actions.changeShape({

src/js/ui/tools/range.js

@@ -12,9 +12,9 @@ class Range {
  this._drawRangeElement();
 
  this.rangeWidth = toInteger(window.getComputedStyle(rangeElement, null).width) - 12;
- this.min = options.min || 0;
- this.max = options.max || 100;
- this.absMax = (this.min * -1) + this.max;
+ this._min = options.min || 0;
+ this._max = options.max || 100;
+ this._absMax = (this._min * -1) + this._max;
  this.realTimeEvent = options.realTimeEvent || false;
 
  this._addClickEvent();
@@ -23,6 +23,16 @@ class Range {
  this.trigger('change');
  }
 
+ /**
+ * Set range max value and re position cursor
+ * @param {number} maxValue - max value
+ */
+ set max(maxValue) {
+ this._max = maxValue;
+ this._absMax = (this._min * -1) + this._max;
+ this.value = this._value;
+ }
+
  /**
  * Get range value
  * @returns {Number} range value
@@ -37,8 +47,8 @@ class Range {
  * @param {Boolean} fire whether fire custom event or not
  */
  set value(value) {
- const absValue = value - this.min;
- let leftPosition = (absValue * this.rangeWidth) / this.absMax;
+ const absValue = value - this._min;
+ let leftPosition = (absValue * this.rangeWidth) / this._absMax;
 
  if (this.rangeWidth < leftPosition) {
  leftPosition = this.rangeWidth;
@@ -90,7 +100,7 @@ class Range {
  }
  const touchPx = event.offsetX;
  const ratio = touchPx / this.rangeWidth;
- const value = (this.absMax * ratio) + this.min;
+ const value = (this._absMax * ratio) + this._min;
  this.pointer.style.left = `${ratio * this.rangeWidth}px`;
  this.subbar.style.right = `${(1 - ratio) * this.rangeWidth}px`;
  this._value = value;
@@ -132,7 +142,7 @@ class Range {
  this.pointer.style.left = `${touchPx}px`;
  this.subbar.style.right = `${this.rangeWidth - touchPx}px`;
  const ratio = touchPx / this.rangeWidth;
- const value = (this.absMax * ratio) + this.min;
+ const value = (this._absMax * ratio) + this._min;
 
  this._value = value;