ding-image-editor 3.15.3

package/src/js/ui/resize.js

@@ -0,0 +1,241 @@
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/resize';
+import { assignmentForDestroy, toInteger } from '@/util';
+import Range from '@/ui/tools/range';
+import { defaultResizePixelValues } from '@/consts';
+
+/**
+ * Resize ui class
+ * @class
+ * @ignore
+ */
+class Resize extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'resize',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+
+    this.status = 'active';
+
+    this._lockState = false;
+
+    /**
+     * Original dimensions
+     * @type {Object}
+     * @private
+     */
+    this._originalDimensions = null;
+
+    this._els = {
+      widthRange: new Range(
+        {
+          slider: this.selector('.tie-width-range'),
+          input: this.selector('.tie-width-range-value'),
+        },
+        defaultResizePixelValues
+      ),
+      heightRange: new Range(
+        {
+          slider: this.selector('.tie-height-range'),
+          input: this.selector('.tie-height-range-value'),
+        },
+        defaultResizePixelValues
+      ),
+      lockAspectRatio: this.selector('.tie-lock-aspect-ratio'),
+      apply: this.selector('.tie-resize-button .apply'),
+      cancel: this.selector('.tie-resize-button .cancel'),
+    };
+  }
+
+  /**
+   * Executed when the menu starts.
+   */
+  changeStartMode() {
+    this.actions.modeChange('resize');
+    const dimensions = this.actions.getCurrentDimensions();
+
+    this._originalDimensions = dimensions;
+
+    this.setWidthValue(dimensions.width);
+    this.setHeightValue(dimensions.height);
+    this.setLimit({
+      minWidth: defaultResizePixelValues.min,
+      minHeight: defaultResizePixelValues.min,
+      maxWidth: dimensions.width,
+      maxHeight: dimensions.height,
+    });
+  }
+
+  /**
+   * Returns the menu to its default state.
+   */
+  changeStandbyMode() {
+    this.actions.stopDrawingMode();
+    this.actions.reset(true);
+  }
+
+  /**
+   * Set dimension limits
+   * @param {object} limits - expect dimension limits for change
+   */
+  setLimit(limits) {
+    this._els.widthRange.min = this.calcMinValue(limits.minWidth);
+    this._els.heightRange.min = this.calcMinValue(limits.minHeight);
+    this._els.widthRange.max = this.calcMaxValue(limits.maxWidth);
+    this._els.heightRange.max = this.calcMaxValue(limits.maxHeight);
+  }
+
+  /**
+   * Calculate max value
+   * @param {number} maxValue - max value
+   * @returns {number}
+   */
+  calcMaxValue(maxValue) {
+    if (maxValue <= 0) {
+      maxValue = defaultResizePixelValues.max;
+    }
+
+    return maxValue;
+  }
+
+  /**
+   * Calculate min value
+   * @param {number} minValue - min value
+   * @returns {number}
+   */
+  calcMinValue(minValue) {
+    if (minValue <= 0) {
+      minValue = defaultResizePixelValues.min;
+    }
+
+    return minValue;
+  }
+
+  /**
+   * Set width value
+   * @param {number} value - expect value for widthRange change
+   * @param {boolean} trigger - fire change event control
+   */
+  setWidthValue(value, trigger = false) {
+    this._els.widthRange.value = value;
+    if (trigger) {
+      this._els.widthRange.trigger('change');
+    }
+  }
+
+  /**
+   * Set height value
+   * @param {number} value - expect value for heightRange change
+   * @param {boolean} trigger - fire change event control
+   */
+  setHeightValue(value, trigger = false) {
+    this._els.heightRange.value = value;
+    if (trigger) {
+      this._els.heightRange.trigger('change');
+    }
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for resize
+   * @param {Object} actions - actions for resize
+   *   @param {Function} actions.resize - resize action
+   *   @param {Function} actions.preview - preview action
+   *   @param {Function} actions.getCurrentDimensions - Get current dimensions action
+   *   @param {Function} actions.modeChange - change mode
+   *   @param {Function} actions.stopDrawingMode - stop drawing mode
+   *   @param {Function} actions.lockAspectRatio - lock aspect ratio
+   *   @param {Function} actions.reset - reset action
+   */
+  addEvent(actions) {
+    this._els.widthRange.on('change', this._changeWidthRangeHandler.bind(this));
+    this._els.heightRange.on('change', this._changeHeightRangeHandler.bind(this));
+    this._els.lockAspectRatio.addEventListener('change', this._changeLockAspectRatio.bind(this));
+
+    const apply = this._applyEventHandler.bind(this);
+    const cancel = this._cancelEventHandler.bind(this);
+
+    this.eventHandler = {
+      apply,
+      cancel,
+    };
+
+    this.actions = actions;
+    this._els.apply.addEventListener('click', apply);
+    this._els.cancel.addEventListener('click', cancel);
+  }
+
+  /**
+   * Change width
+   * @param {number} value - width range value
+   * @private
+   */
+  _changeWidthRangeHandler(value) {
+    this.actions.preview('width', toInteger(value), this._lockState);
+  }
+
+  /**
+   * Change height
+   * @param {number} value - height range value
+   * @private
+   */
+  _changeHeightRangeHandler(value) {
+    this.actions.preview('height', toInteger(value), this._lockState);
+  }
+
+  /**
+   * Change lock aspect ratio state
+   * @param {Event} event - aspect ratio check event
+   * @private
+   */
+  _changeLockAspectRatio(event) {
+    this._lockState = event.target.checked;
+    this.actions.lockAspectRatio(this._lockState);
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    this._els.apply.removeEventListener('click', this.eventHandler.apply);
+    this._els.cancel.removeEventListener('click', this.eventHandler.cancel);
+  }
+
+  _applyEventHandler() {
+    this.actions.resize();
+    this._els.apply.classList.remove('active');
+  }
+
+  _cancelEventHandler() {
+    this.actions.reset();
+    this._els.cancel.classList.remove('active');
+  }
+
+  /**
+   * Change apply button status
+   * @param {Boolean} enableStatus - apply button status
+   */
+  changeApplyButtonStatus(enableStatus) {
+    if (enableStatus) {
+      this._els.apply.classList.add('active');
+    } else {
+      this._els.apply.classList.remove('active');
+    }
+  }
+}
+
+export default Resize;

package/src/js/ui/rotate.js

@@ -0,0 +1,123 @@
+import Range from '@/ui/tools/range';
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/rotate';
+import { toInteger, assignmentForDestroy } from '@/util';
+import { defaultRotateRangeValues } from '@/consts';
+
+const CLOCKWISE = 30;
+const COUNTERCLOCKWISE = -30;
+
+/**
+ * Rotate ui class
+ * @class
+ * @ignore
+ */
+class Rotate extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'rotate',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+    this._value = 0;
+
+    this._els = {
+      rotateButton: this.selector('.tie-rotate-button'),
+      rotateRange: new Range(
+        {
+          slider: this.selector('.tie-rotate-range'),
+          input: this.selector('.tie-rotate-range-value'),
+        },
+        defaultRotateRangeValues
+      ),
+    };
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+    this._els.rotateRange.destroy();
+
+    assignmentForDestroy(this);
+  }
+
+  setRangeBarAngle(type, angle) {
+    let resultAngle = angle;
+
+    if (type === 'rotate') {
+      resultAngle = parseInt(this._els.rotateRange.value, 10) + angle;
+    }
+
+    this._setRangeBarRatio(resultAngle);
+  }
+
+  _setRangeBarRatio(angle) {
+    this._els.rotateRange.value = angle;
+  }
+
+  /**
+   * Add event for rotate
+   * @param {Object} actions - actions for crop
+   *   @param {Function} actions.rotate - rotate action
+   *   @param {Function} actions.setAngle - set angle action
+   */
+  addEvent(actions) {
+    this.eventHandler.rotationAngleChanged = this._changeRotateForButton.bind(this);
+
+    // {rotate, setAngle}
+    this.actions = actions;
+    this._els.rotateButton.addEventListener('click', this.eventHandler.rotationAngleChanged);
+    this._els.rotateRange.on('change', this._changeRotateForRange.bind(this));
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    this._els.rotateButton.removeEventListener('click', this.eventHandler.rotationAngleChanged);
+    this._els.rotateRange.off();
+  }
+
+  /**
+   * Change rotate for range
+   * @param {number} value - angle value
+   * @param {boolean} isLast - Is last change
+   * @private
+   */
+  _changeRotateForRange(value, isLast) {
+    const angle = toInteger(value);
+    this.actions.setAngle(angle, !isLast);
+    this._value = angle;
+  }
+
+  /**
+   * Change rotate for button
+   * @param {object} event - add button event object
+   * @private
+   */
+  _changeRotateForButton(event) {
+    const button = event.target.closest('.tui-image-editor-button');
+    const angle = this._els.rotateRange.value;
+
+    if (button) {
+      const rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']);
+      const rotateAngle = {
+        clockwise: CLOCKWISE,
+        counterclockwise: COUNTERCLOCKWISE,
+      }[rotateType];
+      const newAngle = parseInt(angle, 10) + rotateAngle;
+      const isRotatable = newAngle >= -360 && newAngle <= 360;
+      if (isRotatable) {
+        this.actions.rotate(rotateAngle);
+      }
+    }
+  }
+}
+
+export default Rotate;

package/src/js/ui/shape.js

@@ -0,0 +1,265 @@
+import forEachArray from 'tui-code-snippet/collection/forEachArray';
+import Colorpicker from '@/ui/tools/colorpicker';
+import Range from '@/ui/tools/range';
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/shape';
+import { toInteger, assignmentForDestroy } from '@/util';
+import { defaultShapeStrokeValues, eventNames, selectorNames } from '@/consts';
+
+const SHAPE_DEFAULT_OPTION = {
+  stroke: '#ffbb3b',
+  fill: '',
+  strokeWidth: 3,
+};
+
+/**
+ * Shape ui class
+ * @class
+ * @ignore
+ */
+class Shape extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'shape',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+    this.type = null;
+    this.options = SHAPE_DEFAULT_OPTION;
+
+    this._els = {
+      shapeSelectButton: this.selector('.tie-shape-button'),
+      shapeColorButton: this.selector('.tie-shape-color-button'),
+      strokeRange: new Range(
+        {
+          slider: this.selector('.tie-stroke-range'),
+          input: this.selector('.tie-stroke-range-value'),
+        },
+        defaultShapeStrokeValues
+      ),
+      fillColorpicker: new Colorpicker(this.selector('.tie-color-fill'), {
+        defaultColor: '',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+      strokeColorpicker: new Colorpicker(this.selector('.tie-color-stroke'), {
+        defaultColor: '#ffbb3b',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+    };
+
+    this.colorPickerControls.push(this._els.fillColorpicker);
+    this.colorPickerControls.push(this._els.strokeColorpicker);
+
+    this.colorPickerInputBoxes = [];
+    this.colorPickerInputBoxes.push(
+      this._els.fillColorpicker.colorpickerElement.querySelector(
+        selectorNames.COLOR_PICKER_INPUT_BOX
+      )
+    );
+    this.colorPickerInputBoxes.push(
+      this._els.strokeColorpicker.colorpickerElement.querySelector(
+        selectorNames.COLOR_PICKER_INPUT_BOX
+      )
+    );
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+    this._els.strokeRange.destroy();
+    this._els.fillColorpicker.destroy();
+    this._els.strokeColorpicker.destroy();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for shape
+   * @param {Object} actions - actions for shape
+   *   @param {Function} actions.changeShape - change shape mode
+   *   @param {Function} actions.setDrawingShape - set drawing shape
+   */
+  addEvent(actions) {
+    this.eventHandler.shapeTypeSelected = this._changeShapeHandler.bind(this);
+    this.actions = actions;
+
+    this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeTypeSelected);
+    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.fillColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this));
+    this._els.strokeColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this));
+
+    forEachArray(
+      this.colorPickerInputBoxes,
+      (inputBox) => {
+        inputBox.addEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));
+        inputBox.addEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));
+      },
+      this
+    );
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    this._els.shapeSelectButton.removeEventListener('click', this.eventHandler.shapeTypeSelected);
+    this._els.strokeRange.off();
+    this._els.fillColorpicker.off();
+    this._els.strokeColorpicker.off();
+
+    forEachArray(
+      this.colorPickerInputBoxes,
+      (inputBox) => {
+        inputBox.removeEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));
+        inputBox.removeEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));
+      },
+      this
+    );
+  }
+
+  /**
+   * Set Shape status
+   * @param {Object} options - options of shape status
+   *   @param {string} strokeWidth - stroke width
+   *   @param {string} strokeColor - stroke color
+   *   @param {string} fillColor - fill color
+   */
+  setShapeStatus({ strokeWidth, strokeColor, fillColor }) {
+    this._els.strokeRange.value = strokeWidth;
+    this._els.strokeColorpicker.color = strokeColor;
+    this._els.fillColorpicker.color = fillColor;
+    this.options.stroke = strokeColor;
+    this.options.fill = fillColor;
+    this.options.strokeWidth = strokeWidth;
+
+    this.actions.setDrawingShape(this.type, { strokeWidth });
+  }
+
+  /**
+   * Executed when the menu starts.
+   */
+  changeStartMode() {
+    this.actions.stopDrawingMode();
+  }
+
+  /**
+   * Returns the menu to its default state.
+   */
+  changeStandbyMode() {
+    this.type = null;
+    this.actions.changeSelectableAll(true);
+    this._els.shapeSelectButton.classList.remove('circle');
+    this._els.shapeSelectButton.classList.remove('triangle');
+    this._els.shapeSelectButton.classList.remove('rect');
+  }
+
+  /**
+   * set range stroke max value
+   * @param {number} maxValue - expect max value for change
+   */
+  setMaxStrokeValue(maxValue) {
+    let strokeMaxValue = maxValue;
+    if (strokeMaxValue <= 0) {
+      strokeMaxValue = defaultShapeStrokeValues.max;
+    }
+    this._els.strokeRange.max = strokeMaxValue;
+  }
+
+  /**
+   * Set stroke value
+   * @param {number} value - expect value for strokeRange change
+   */
+  setStrokeValue(value) {
+    this._els.strokeRange.value = value;
+    this._els.strokeRange.trigger('change');
+  }
+
+  /**
+   * Get stroke value
+   * @returns {number} - stroke range value
+   */
+  getStrokeValue() {
+    return this._els.strokeRange.value;
+  }
+
+  /**
+   * Change icon color
+   * @param {object} event - add button event object
+   * @private
+   */
+  _changeShapeHandler(event) {
+    const button = event.target.closest('.tui-image-editor-button');
+    if (button) {
+      this.actions.stopDrawingMode();
+      this.actions.discardSelection();
+      const shapeType = this.getButtonType(button, ['circle', 'triangle', 'rect']);
+
+      if (this.type === shapeType) {
+        this.changeStandbyMode();
+
+        return;
+      }
+      this.changeStandbyMode();
+      this.type = shapeType;
+      event.currentTarget.classList.add(shapeType);
+      this.actions.changeSelectableAll(false);
+      this.actions.modeChange('shape');
+    }
+  }
+
+  /**
+   * Change stroke range
+   * @param {number} value - stroke range value
+   * @param {boolean} isLast - Is last change
+   * @private
+   */
+  _changeStrokeRangeHandler(value, isLast) {
+    this.options.strokeWidth = toInteger(value);
+    this.actions.changeShape(
+      {
+        strokeWidth: value,
+      },
+      !isLast
+    );
+
+    this.actions.setDrawingShape(this.type, this.options);
+  }
+
+  /**
+   * Change shape color
+   * @param {string} color - fill color
+   * @private
+   */
+  _changeFillColorHandler(color) {
+    color = color || 'transparent';
+    this.options.fill = color;
+    this.actions.changeShape({
+      fill: color,
+    });
+  }
+
+  /**
+   * Change shape stroke color
+   * @param {string} color - fill color
+   * @private
+   */
+  _changeStrokeColorHandler(color) {
+    color = color || 'transparent';
+    this.options.stroke = color;
+    this.actions.changeShape({
+      stroke: color,
+    });
+  }
+}
+
+export default Shape;