feat: Synchronize range bar and value with current image rotation info

src/js/action.js

@@ -36,6 +36,14 @@ export default {
  this.ui.changeMenu('crop');
  }
  };
+ const setAngleRangeBarOnAction = angle => {
+ if (this.ui.submenu === 'rotate') {
+ this.ui.rotate.setRangeBarAngle('setAngle', angle);
+ }
+ };
+ const onEndUndoRedo = result => {
+ setAngleRangeBarOnAction(result);
+ };
 
  return extend({
  initLoadImage: (imagePath, imageName) => (
@@ -49,13 +57,13 @@ export default {
  undo: () => {
  if (!this.isEmptyUndoStack()) {
  exitCropOnAction();
- this.undo();
+ this.undo().then(onEndUndoRedo);
  }
  },
  redo: () => {
  if (!this.isEmptyRedoStack()) {
  exitCropOnAction();
- this.redo();
+ this.redo().then(onEndUndoRedo);
  }
  },
  reset: () => {
@@ -272,10 +280,12 @@ export default {
  rotate: (angle, isSilent) => {
  this.rotate(angle, isSilent);
  this.ui.resizeEditor();
+ this.ui.rotate.setRangeBarAngle('rotate', angle);
  },
  setAngle: (angle, isSilent) => {
  this.setAngle(angle, isSilent);
  this.ui.resizeEditor();
+ this.ui.rotate.setRangeBarAngle('setAngle', angle);
  }
  }, this._commonAction());
  },

src/js/ui/rotate.js

@@ -30,6 +30,21 @@ class Rotate extends Submenu {
  };
  }
 
+ setRangeBarAngle(type, angle) {
+ let resultAngle = angle;
+
+ if (type === 'rotate') {
+ resultAngle = parseInt(this._els.rotateRangeValue.value, 10) + angle;
+ }
+
+ this._els.rotateRangeValue.value = resultAngle;
+ this._setRangeBarRatio(resultAngle);
+ }
+
+ _setRangeBarRatio(angle) {
+ this._els.rotateRange.value = angle;
+ }
+
  /**
  * Add event for rotate
  * @param {Object} actions - actions for crop
@@ -53,7 +68,7 @@ class Rotate extends Submenu {
  _changeRotateForRange(value, isLast) {
  const angle = toInteger(value);
  this._els.rotateRangeValue.value = angle;
- this.actions.rotate(angle - this._value, !isLast);
+ this.actions.setAngle(angle, !isLast);
  this._value = angle;
  }