ding-image-editor 3.15.3

package/src/js/ui/draw.js

@@ -0,0 +1,187 @@
+import Colorpicker from '@/ui/tools/colorpicker';
+import Range from '@/ui/tools/range';
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/draw';
+import { assignmentForDestroy, getRgb } from '@/util';
+import { defaultDrawRangeValues, eventNames, selectorNames } from '@/consts';
+
+const DRAW_OPACITY = 0.7;
+
+/**
+ * Draw ui class
+ * @class
+ * @ignore
+ */
+class Draw extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'draw',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+
+    this._els = {
+      lineSelectButton: this.selector('.tie-draw-line-select-button'),
+      drawColorPicker: new Colorpicker(this.selector('.tie-draw-color'), {
+        defaultColor: '#00a9ff',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+      drawRange: new Range(
+        {
+          slider: this.selector('.tie-draw-range'),
+          input: this.selector('.tie-draw-range-value'),
+        },
+        defaultDrawRangeValues
+      ),
+    };
+
+    this.type = null;
+    this.color = this._els.drawColorPicker.color;
+    this.width = this._els.drawRange.value;
+
+    this.colorPickerInputBox = this._els.drawColorPicker.colorpickerElement.querySelector(
+      selectorNames.COLOR_PICKER_INPUT_BOX
+    );
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+    this._els.drawColorPicker.destroy();
+    this._els.drawRange.destroy();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for draw
+   * @param {Object} actions - actions for crop
+   *   @param {Function} actions.setDrawMode - set draw mode
+   */
+  addEvent(actions) {
+    this.eventHandler.changeDrawType = this._changeDrawType.bind(this);
+
+    this.actions = actions;
+    this._els.lineSelectButton.addEventListener('click', this.eventHandler.changeDrawType);
+    this._els.drawColorPicker.on('change', this._changeDrawColor.bind(this));
+    this._els.drawRange.on('change', this._changeDrawRange.bind(this));
+
+    this.colorPickerInputBox.addEventListener(
+      eventNames.FOCUS,
+      this._onStartEditingInputBox.bind(this)
+    );
+    this.colorPickerInputBox.addEventListener(
+      eventNames.BLUR,
+      this._onStopEditingInputBox.bind(this)
+    );
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType);
+    this._els.drawColorPicker.off();
+    this._els.drawRange.off();
+
+    this.colorPickerInputBox.removeEventListener(
+      eventNames.FOCUS,
+      this._onStartEditingInputBox.bind(this)
+    );
+    this.colorPickerInputBox.removeEventListener(
+      eventNames.BLUR,
+      this._onStopEditingInputBox.bind(this)
+    );
+  }
+
+  /**
+   * set draw mode - action runner
+   */
+  setDrawMode() {
+    this.actions.setDrawMode(this.type, {
+      width: this.width,
+      color: getRgb(this.color, DRAW_OPACITY),
+    });
+  }
+
+  /**
+   * Returns the menu to its default state.
+   */
+  changeStandbyMode() {
+    this.type = null;
+    this.actions.stopDrawingMode();
+    this.actions.changeSelectableAll(true);
+    this._els.lineSelectButton.classList.remove('free');
+    this._els.lineSelectButton.classList.remove('line');
+  }
+
+  /**
+   * Executed when the menu starts.
+   */
+  changeStartMode() {
+    this.type = 'free';
+    this._els.lineSelectButton.classList.add('free');
+    this.setDrawMode();
+  }
+
+  /**
+   * Change draw type event
+   * @param {object} event - line select event
+   * @private
+   */
+  _changeDrawType(event) {
+    const button = event.target.closest('.tui-image-editor-button');
+    if (button) {
+      const lineType = this.getButtonType(button, ['free', 'line']);
+      this.actions.discardSelection();
+
+      if (this.type === lineType) {
+        this.changeStandbyMode();
+
+        return;
+      }
+
+      this.changeStandbyMode();
+      this.type = lineType;
+      this._els.lineSelectButton.classList.add(lineType);
+      this.setDrawMode();
+    }
+  }
+
+  /**
+   * Change drawing color
+   * @param {string} color - select drawing color
+   * @private
+   */
+  _changeDrawColor(color) {
+    this.color = color || 'transparent';
+    if (!this.type) {
+      this.changeStartMode();
+    } else {
+      this.setDrawMode();
+    }
+  }
+
+  /**
+   * Change drawing Range
+   * @param {number} value - select drawing range
+   * @private
+   */
+  _changeDrawRange(value) {
+    this.width = value;
+    if (!this.type) {
+      this.changeStartMode();
+    } else {
+      this.setDrawMode();
+    }
+  }
+}
+
+export default Draw;

package/src/js/ui/filter.js

@@ -0,0 +1,510 @@
+import forEach from 'tui-code-snippet/collection/forEach';
+import forEachArray from 'tui-code-snippet/collection/forEachArray';
+import isExisty from 'tui-code-snippet/type/isExisty';
+import Colorpicker from '@/ui/tools/colorpicker';
+import Range from '@/ui/tools/range';
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/filter';
+import { toInteger, toCamelCase, assignmentForDestroy } from '@/util';
+import { defaultFilterRangeValues as FILTER_RANGE, eventNames, selectorNames } from '@/consts';
+
+const PICKER_CONTROL_HEIGHT = '130px';
+const BLEND_OPTIONS = ['add', 'diff', 'subtract', 'multiply', 'screen', 'lighten', 'darken'];
+const FILTER_OPTIONS = [
+  'grayscale',
+  'invert',
+  'sepia',
+  'vintage',
+  'blur',
+  'sharpen',
+  'emboss',
+  'remove-white',
+  'brightness',
+  'noise',
+  'pixelate',
+  'color-filter',
+  'tint',
+  'multiply',
+  'blend',
+];
+const filterNameMap = {
+  grayscale: 'grayscale',
+  invert: 'invert',
+  sepia: 'sepia',
+  blur: 'blur',
+  sharpen: 'sharpen',
+  emboss: 'emboss',
+  removeWhite: 'removeColor',
+  brightness: 'brightness',
+  contrast: 'contrast',
+  saturation: 'saturation',
+  vintage: 'vintage',
+  polaroid: 'polaroid',
+  noise: 'noise',
+  pixelate: 'pixelate',
+  colorFilter: 'removeColor',
+  tint: 'blendColor',
+  multiply: 'blendColor',
+  blend: 'blendColor',
+  hue: 'hue',
+  gamma: 'gamma',
+};
+const RANGE_INSTANCE_NAMES = [
+  'removewhiteDistanceRange',
+  'colorfilterThresholdRange',
+  'pixelateRange',
+  'noiseRange',
+  'brightnessRange',
+  'tintOpacity',
+];
+const COLORPICKER_INSTANCE_NAMES = ['filterBlendColor', 'filterMultiplyColor', 'filterTintColor'];
+
+/**
+ * Filter ui class
+ * @class
+ * @ignore
+ */
+class Filter extends Submenu {
+  constructor(subMenuElement, { locale, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'filter',
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+
+    this.selectBoxShow = false;
+
+    this.checkedMap = {};
+    this._makeControlElement();
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+    this._destroyToolInstance();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Remove event for filter
+   */
+  _removeEvent() {
+    forEach(FILTER_OPTIONS, (filter) => {
+      const filterCheckElement = this.selector(`.tie-${filter}`);
+      const filterNameCamelCase = toCamelCase(filter);
+
+      filterCheckElement.removeEventListener('change', this.eventHandler[filterNameCamelCase]);
+    });
+
+    forEach([...RANGE_INSTANCE_NAMES, ...COLORPICKER_INSTANCE_NAMES], (instanceName) => {
+      this._els[instanceName].off();
+    });
+
+    this._els.blendType.removeEventListener('change', this.eventHandler.changeBlendFilter);
+    this._els.blendType.removeEventListener('click', this.eventHandler.changeBlendFilter);
+
+    forEachArray(
+      this.colorPickerInputBoxes,
+      (inputBox) => {
+        inputBox.removeEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));
+        inputBox.removeEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));
+      },
+      this
+    );
+  }
+
+  _destroyToolInstance() {
+    forEach([...RANGE_INSTANCE_NAMES, ...COLORPICKER_INSTANCE_NAMES], (instanceName) => {
+      this._els[instanceName].destroy();
+    });
+  }
+
+  /**
+   * Add event for filter
+   * @param {Object} actions - actions for crop
+   *   @param {Function} actions.applyFilter - apply filter option
+   */
+  addEvent({ applyFilter }) {
+    const changeFilterState = (filterName) =>
+      this._changeFilterState.bind(this, applyFilter, filterName);
+    const changeFilterStateForRange = (filterName) => (value, isLast) =>
+      this._changeFilterState(applyFilter, filterName, isLast);
+
+    this.eventHandler = {
+      changeBlendFilter: changeFilterState('blend'),
+      blandTypeClick: (event) => event.stopPropagation(),
+    };
+
+    forEach(FILTER_OPTIONS, (filter) => {
+      const filterCheckElement = this.selector(`.tie-${filter}`);
+      const filterNameCamelCase = toCamelCase(filter);
+      this.checkedMap[filterNameCamelCase] = filterCheckElement;
+      this.eventHandler[filterNameCamelCase] = changeFilterState(filterNameCamelCase);
+
+      filterCheckElement.addEventListener('change', this.eventHandler[filterNameCamelCase]);
+    });
+
+    this._els.removewhiteDistanceRange.on('change', changeFilterStateForRange('removeWhite'));
+    this._els.colorfilterThresholdRange.on('change', changeFilterStateForRange('colorFilter'));
+    this._els.pixelateRange.on('change', changeFilterStateForRange('pixelate'));
+    this._els.noiseRange.on('change', changeFilterStateForRange('noise'));
+    this._els.brightnessRange.on('change', changeFilterStateForRange('brightness'));
+
+    this._els.filterBlendColor.on('change', this.eventHandler.changeBlendFilter);
+    this._els.filterMultiplyColor.on('change', changeFilterState('multiply'));
+    this._els.filterTintColor.on('change', changeFilterState('tint'));
+    this._els.tintOpacity.on('change', changeFilterStateForRange('tint'));
+    this._els.filterMultiplyColor.on('changeShow', this.colorPickerChangeShow.bind(this));
+    this._els.filterTintColor.on('changeShow', this.colorPickerChangeShow.bind(this));
+    this._els.filterBlendColor.on('changeShow', this.colorPickerChangeShow.bind(this));
+
+    this._els.blendType.addEventListener('change', this.eventHandler.changeBlendFilter);
+    this._els.blendType.addEventListener('click', this.eventHandler.blandTypeClick);
+
+    forEachArray(
+      this.colorPickerInputBoxes,
+      (inputBox) => {
+        inputBox.addEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));
+        inputBox.addEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));
+      },
+      this
+    );
+  }
+
+  /**
+   * Set filter for undo changed
+   * @param {Object} changedFilterInfos - changed command infos
+   *   @param {string} type - filter type
+   *   @param {string} action - add or remove
+   *   @param {Object} options - filter options
+   */
+  setFilterState(changedFilterInfos) {
+    const { type, options, action } = changedFilterInfos;
+    const filterName = this._getFilterNameFromOptions(type, options);
+    const isRemove = action === 'remove';
+
+    if (!isRemove) {
+      this._setFilterState(filterName, options);
+    }
+
+    this.checkedMap[filterName].checked = !isRemove;
+  }
+
+  /**
+   * Init all filter's checkbox to unchecked state
+   */
+  initFilterCheckBoxState() {
+    forEach(
+      this.checkedMap,
+      (filter) => {
+        filter.checked = false;
+      },
+      this
+    );
+  }
+
+  /**
+   * Set filter for undo changed
+   * @param {string} filterName - filter name
+   * @param {Object} options - filter options
+   * @private
+   */
+  // eslint-disable-next-line complexity
+  _setFilterState(filterName, options) {
+    if (filterName === 'colorFilter') {
+      this._els.colorfilterThresholdRange.value = options.distance;
+    } else if (filterName === 'removeWhite') {
+      this._els.removewhiteDistanceRange.value = options.distance;
+    } else if (filterName === 'pixelate') {
+      this._els.pixelateRange.value = options.blocksize;
+    } else if (filterName === 'brightness') {
+      this._els.brightnessRange.value = options.brightness;
+    } else if (filterName === 'noise') {
+      this._els.noiseRange.value = options.noise;
+    } else if (filterName === 'tint') {
+      this._els.tintOpacity.value = options.alpha;
+      this._els.filterTintColor.color = options.color;
+    } else if (filterName === 'blend') {
+      this._els.filterBlendColor.color = options.color;
+    } else if (filterName === 'multiply') {
+      this._els.filterMultiplyColor.color = options.color;
+    }
+  }
+
+  /**
+   * Get filter name
+   * @param {string} type - filter type
+   * @param {Object} options - filter options
+   * @returns {string} filter name
+   * @private
+   */
+  _getFilterNameFromOptions(type, options) {
+    let filterName = type;
+
+    if (type === 'removeColor') {
+      filterName = isExisty(options.useAlpha) ? 'removeWhite' : 'colorFilter';
+    } else if (type === 'blendColor') {
+      filterName = {
+        add: 'blend',
+        multiply: 'multiply',
+        tint: 'tint',
+      }[options.mode];
+    }
+
+    return filterName;
+  }
+
+  /**
+   * Add event for filter
+   * @param {Function} applyFilter - actions for firter
+   * @param {string} filterName - filter name
+   * @param {boolean} [isLast] - Is last change
+   */
+  _changeFilterState(applyFilter, filterName, isLast = true) {
+    const apply = this.checkedMap[filterName].checked;
+    const type = filterNameMap[filterName];
+
+    const checkboxGroup = this.checkedMap[filterName].closest('.tui-image-editor-checkbox-group');
+    if (checkboxGroup) {
+      if (apply) {
+        checkboxGroup.classList.remove('tui-image-editor-disabled');
+      } else {
+        checkboxGroup.classList.add('tui-image-editor-disabled');
+      }
+    }
+    applyFilter(apply, type, this._getFilterOption(filterName), !isLast);
+  }
+
+  /**
+   * Get filter option
+   * @param {String} type - filter type
+   * @returns {Object} filter option object
+   * @private
+   */
+  // eslint-disable-next-line complexity
+  _getFilterOption(type) {
+    const option = {};
+    switch (type) {
+      case 'removeWhite':
+        option.color = '#FFFFFF';
+        option.useAlpha = false;
+        option.distance = parseFloat(this._els.removewhiteDistanceRange.value);
+        break;
+      case 'colorFilter':
+        option.color = '#FFFFFF';
+        option.distance = parseFloat(this._els.colorfilterThresholdRange.value);
+        break;
+      case 'pixelate':
+        option.blocksize = toInteger(this._els.pixelateRange.value);
+        break;
+      case 'noise':
+        option.noise = toInteger(this._els.noiseRange.value);
+        break;
+      case 'brightness':
+        option.brightness = parseFloat(this._els.brightnessRange.value);
+        break;
+      case 'blend':
+        option.mode = 'add';
+        option.color = this._els.filterBlendColor.color;
+        option.mode = this._els.blendType.value;
+        break;
+      case 'multiply':
+        option.mode = 'multiply';
+        option.color = this._els.filterMultiplyColor.color;
+        break;
+      case 'tint':
+        option.mode = 'tint';
+        option.color = this._els.filterTintColor.color;
+        option.alpha = this._els.tintOpacity.value;
+        break;
+      case 'blur':
+        option.blur = this._els.blurRange.value;
+        break;
+      default:
+        break;
+    }
+
+    return option;
+  }
+
+  /**
+   * Make submenu range and colorpicker control
+   * @private
+   */
+  _makeControlElement() {
+    this._els = {
+      removewhiteDistanceRange: new Range(
+        { slider: this.selector('.tie-removewhite-distance-range') },
+        FILTER_RANGE.removewhiteDistanceRange
+      ),
+      brightnessRange: new Range(
+        { slider: this.selector('.tie-brightness-range') },
+        FILTER_RANGE.brightnessRange
+      ),
+      noiseRange: new Range({ slider: this.selector('.tie-noise-range') }, FILTER_RANGE.noiseRange),
+      pixelateRange: new Range(
+        { slider: this.selector('.tie-pixelate-range') },
+        FILTER_RANGE.pixelateRange
+      ),
+      colorfilterThresholdRange: new Range(
+        { slider: this.selector('.tie-colorfilter-threshold-range') },
+        FILTER_RANGE.colorfilterThresholdRange
+      ),
+      filterTintColor: new Colorpicker(this.selector('.tie-filter-tint-color'), {
+        defaultColor: '#03bd9e',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+      filterMultiplyColor: new Colorpicker(this.selector('.tie-filter-multiply-color'), {
+        defaultColor: '#515ce6',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+      filterBlendColor: new Colorpicker(this.selector('.tie-filter-blend-color'), {
+        defaultColor: '#ffbb3b',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+      blurRange: FILTER_RANGE.blurFilterRange,
+    };
+
+    this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl);
+    this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl);
+
+    this.colorPickerControls.push(this._els.filterTintColor);
+    this.colorPickerControls.push(this._els.filterMultiplyColor);
+    this.colorPickerControls.push(this._els.filterBlendColor);
+
+    this.colorPickerInputBoxes = [];
+    this.colorPickerInputBoxes.push(
+      this._els.filterTintColor.colorpickerElement.querySelector(
+        selectorNames.COLOR_PICKER_INPUT_BOX
+      )
+    );
+    this.colorPickerInputBoxes.push(
+      this._els.filterMultiplyColor.colorpickerElement.querySelector(
+        selectorNames.COLOR_PICKER_INPUT_BOX
+      )
+    );
+    this.colorPickerInputBoxes.push(
+      this._els.filterBlendColor.colorpickerElement.querySelector(
+        selectorNames.COLOR_PICKER_INPUT_BOX
+      )
+    );
+  }
+
+  /**
+   * Make submenu control for picker & range mixin
+   * @param {HTMLElement} pickerControl - pickerControl dom element
+   * @returns {Range}
+   * @private
+   */
+  _pickerWithRange(pickerControl) {
+    const rangeWrap = document.createElement('div');
+    const rangeLabel = document.createElement('label');
+    const slider = document.createElement('div');
+
+    slider.id = 'tie-filter-tint-opacity';
+    rangeLabel.innerHTML = 'Opacity';
+    rangeWrap.appendChild(rangeLabel);
+    rangeWrap.appendChild(slider);
+    pickerControl.appendChild(rangeWrap);
+    pickerControl.style.height = PICKER_CONTROL_HEIGHT;
+
+    return new Range({ slider }, FILTER_RANGE.tintOpacityRange);
+  }
+
+  /**
+   * Make submenu control for picker & selectbox
+   * @param {HTMLElement} pickerControl - pickerControl dom element
+   * @returns {HTMLElement}
+   * @private
+   */
+  _pickerWithSelectbox(pickerControl) {
+    const selectlistWrap = document.createElement('div');
+    const selectlist = document.createElement('select');
+    const optionlist = document.createElement('ul');
+
+    selectlistWrap.className = 'tui-image-editor-selectlist-wrap';
+    optionlist.className = 'tui-image-editor-selectlist';
+
+    selectlistWrap.appendChild(selectlist);
+    selectlistWrap.appendChild(optionlist);
+
+    this._makeSelectOptionList(selectlist);
+
+    pickerControl.appendChild(selectlistWrap);
+    pickerControl.style.height = PICKER_CONTROL_HEIGHT;
+
+    this._drawSelectOptionList(selectlist, optionlist);
+    this._pickerWithSelectboxForAddEvent(selectlist, optionlist);
+
+    return selectlist;
+  }
+
+  /**
+   * Make selectbox option list custom style
+   * @param {HTMLElement} selectlist - selectbox element
+   * @param {HTMLElement} optionlist - custom option list item element
+   * @private
+   */
+  _drawSelectOptionList(selectlist, optionlist) {
+    const options = selectlist.querySelectorAll('option');
+    forEach(options, (option) => {
+      const optionElement = document.createElement('li');
+      optionElement.innerHTML = option.innerHTML;
+      optionElement.setAttribute('data-item', option.value);
+      optionlist.appendChild(optionElement);
+    });
+  }
+
+  /**
+   * custom selectbox custom event
+   * @param {HTMLElement} selectlist - selectbox element
+   * @param {HTMLElement} optionlist - custom option list item element
+   * @private
+   */
+  _pickerWithSelectboxForAddEvent(selectlist, optionlist) {
+    optionlist.addEventListener('click', (event) => {
+      const optionValue = event.target.getAttribute('data-item');
+      const fireEvent = document.createEvent('HTMLEvents');
+
+      selectlist.querySelector(`[value="${optionValue}"]`).selected = true;
+      fireEvent.initEvent('change', true, true);
+
+      selectlist.dispatchEvent(fireEvent);
+
+      this.selectBoxShow = false;
+      optionlist.style.display = 'none';
+    });
+
+    selectlist.addEventListener('mousedown', (event) => {
+      event.preventDefault();
+      this.selectBoxShow = !this.selectBoxShow;
+      optionlist.style.display = this.selectBoxShow ? 'block' : 'none';
+      optionlist.setAttribute('data-selectitem', selectlist.value);
+      optionlist.querySelector(`[data-item='${selectlist.value}']`).classList.add('active');
+    });
+  }
+
+  /**
+   * Make option list for select control
+   * @param {HTMLElement} selectlist - blend option select list element
+   * @private
+   */
+  _makeSelectOptionList(selectlist) {
+    forEach(BLEND_OPTIONS, (option) => {
+      const selectOption = document.createElement('option');
+      selectOption.setAttribute('value', option);
+      selectOption.innerHTML = option.replace(/^[a-z]/, ($0) => $0.toUpperCase());
+      selectlist.appendChild(selectOption);
+    });
+  }
+}
+
+export default Filter;