ding-image-editor 3.15.3

package/src/js/ui/flip.js

@@ -0,0 +1,87 @@
+import forEach from 'tui-code-snippet/collection/forEach';
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/flip';
+import { assignmentForDestroy } from '@/util';
+
+/**
+ * Flip ui class
+ * @class
+ * @ignore
+ */
+class Flip extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'flip',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+    this.flipStatus = false;
+
+    this._els = {
+      flipButton: this.selector('.tie-flip-button'),
+    };
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for flip
+   * @param {Object} actions - actions for flip
+   *   @param {Function} actions.flip - flip action
+   */
+  addEvent(actions) {
+    this.eventHandler.changeFlip = this._changeFlip.bind(this);
+    this._actions = actions;
+    this._els.flipButton.addEventListener('click', this.eventHandler.changeFlip);
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    this._els.flipButton.removeEventListener('click', this.eventHandler.changeFlip);
+  }
+
+  /**
+   * change Flip status
+   * @param {object} event - change event
+   * @private
+   */
+  _changeFlip(event) {
+    const button = event.target.closest('.tui-image-editor-button');
+    if (button) {
+      const flipType = this.getButtonType(button, ['flipX', 'flipY', 'resetFlip']);
+      if (!this.flipStatus && flipType === 'resetFlip') {
+        return;
+      }
+
+      this._actions.flip(flipType).then((flipStatus) => {
+        const flipClassList = this._els.flipButton.classList;
+        this.flipStatus = false;
+
+        flipClassList.remove('resetFlip');
+        forEach(['flipX', 'flipY'], (type) => {
+          flipClassList.remove(type);
+          if (flipStatus[type]) {
+            flipClassList.add(type);
+            flipClassList.add('resetFlip');
+            this.flipStatus = true;
+          }
+        });
+      });
+    }
+  }
+}
+
+export default Flip;

package/src/js/ui/history.js

@@ -0,0 +1,171 @@
+import Panel from '@/ui/panelMenu';
+import templateHtml from '@/ui/template/submenu/history';
+import { assignmentForDestroy } from '@/util';
+
+const historyClassName = 'history-item';
+const selectedClassName = 'selected-item';
+const disabledClassName = 'disabled-item';
+
+/**
+ * History ui class
+ * @class
+ * @ignore
+ */
+class History extends Panel {
+  constructor(menuElement, { locale, makeSvgIcon }) {
+    super(menuElement, { name: 'history' });
+    menuElement.classList.add('enabled');
+
+    this.locale = locale;
+    this.makeSvgIcon = makeSvgIcon;
+    this._eventHandler = {};
+    this._historyIndex = this.getListLength();
+  }
+
+  /**
+   * Add history
+   * @param {string} name - name of history
+   * @param {?string} detail - detail information of history
+   */
+  add({ name, detail }) {
+    if (this._hasDisabledItem()) {
+      this.deleteListItemElement(this._historyIndex + 1, this.getListLength());
+    }
+
+    const html = templateHtml({ locale: this.locale, makeSvgIcon: this.makeSvgIcon, name, detail });
+    const item = this.makeListItemElement(html);
+
+    this.pushListItemElement(item);
+    this._historyIndex = this.getListLength() - 1;
+    this._selectItem(this._historyIndex);
+  }
+
+  /**
+   * Init history
+   */
+  init() {
+    this.deleteListItemElement(1, this.getListLength());
+    this._historyIndex = 0;
+    this._selectItem(this._historyIndex);
+  }
+
+  /**
+   * Clear history
+   */
+  clear() {
+    this.deleteListItemElement(0, this.getListLength());
+    this._historyIndex = -1;
+  }
+
+  /**
+   * Select previous history of current selected history
+   */
+  prev() {
+    this._historyIndex -= 1;
+    this._selectItem(this._historyIndex);
+  }
+
+  /**
+   * Select next history of current selected history
+   */
+  next() {
+    this._historyIndex += 1;
+    this._selectItem(this._historyIndex);
+  }
+
+  /**
+   * Whether history menu has disabled item
+   * @returns {boolean}
+   */
+  _hasDisabledItem() {
+    return this.getListLength() - 1 > this._historyIndex;
+  }
+
+  /**
+   * Add history menu event
+   * @private
+   */
+  _addHistoryEventListener() {
+    this._eventHandler.history = (event) => this._clickHistoryItem(event);
+    this.listElement.addEventListener('click', this._eventHandler.history);
+  }
+
+  /**
+   * Remove history menu event
+   * @private
+   */
+  _removeHistoryEventListener() {
+    this.listElement.removeEventListener('click', this._eventHandler.history);
+  }
+
+  /**
+   * onClick history menu event listener
+   * @param {object} event - event object
+   * @private
+   */
+  _clickHistoryItem(event) {
+    const { target } = event;
+    const item = target.closest(`.${historyClassName}`);
+
+    if (!item) {
+      return;
+    }
+
+    const index = Number.parseInt(item.getAttribute('data-index'), 10);
+
+    if (index !== this._historyIndex) {
+      const count = Math.abs(index - this._historyIndex);
+
+      if (index < this._historyIndex) {
+        this._actions.undo(count);
+      } else {
+        this._actions.redo(count);
+      }
+    }
+  }
+
+  /**
+   * Change item's state to selected state
+   * @param {number} index - index of selected item
+   */
+  _selectItem(index) {
+    for (let i = 0; i < this.getListLength(); i += 1) {
+      this.removeClass(i, selectedClassName);
+      this.removeClass(i, disabledClassName);
+      if (i > index) {
+        this.addClass(i, disabledClassName);
+      }
+    }
+    this.addClass(index, selectedClassName);
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this.removeEvent();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for history
+   * @param {Object} actions - actions for crop
+   *   @param {Function} actions.undo - undo action
+   *   @param {Function} actions.redo - redo action
+   */
+  addEvent(actions) {
+    this._actions = actions;
+    this._addHistoryEventListener();
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  removeEvent() {
+    this._removeHistoryEventListener();
+  }
+}
+
+export default History;

package/src/js/ui/icon.js

@@ -0,0 +1,191 @@
+import forEach from 'tui-code-snippet/collection/forEach';
+import Colorpicker from '@/ui/tools/colorpicker';
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/icon';
+import { isSupportFileApi, assignmentForDestroy } from '@/util';
+import { defaultIconPath, eventNames, selectorNames } from '@/consts';
+
+/**
+ * Icon ui class
+ * @class
+ * @ignore
+ */
+class Icon extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'icon',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+
+    this.iconType = null;
+    this._iconMap = {};
+
+    this._els = {
+      registerIconButton: this.selector('.tie-icon-image-file'),
+      addIconButton: this.selector('.tie-icon-add-button'),
+      iconColorpicker: new Colorpicker(this.selector('.tie-icon-color'), {
+        defaultColor: '#ffbb3b',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+    };
+
+    this.colorPickerInputBox = this._els.iconColorpicker.colorpickerElement.querySelector(
+      selectorNames.COLOR_PICKER_INPUT_BOX
+    );
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+    this._els.iconColorpicker.destroy();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for icon
+   * @param {Object} actions - actions for icon
+   *   @param {Function} actions.registerCustomIcon - register icon
+   *   @param {Function} actions.addIcon - add icon
+   *   @param {Function} actions.changeColor - change icon color
+   */
+  addEvent(actions) {
+    const registerIcon = this._registerIconHandler.bind(this);
+    const addIcon = this._addIconHandler.bind(this);
+
+    this.eventHandler = {
+      registerIcon,
+      addIcon,
+    };
+
+    this.actions = actions;
+    this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this));
+    this._els.registerIconButton.addEventListener('change', registerIcon);
+    this._els.addIconButton.addEventListener('click', addIcon);
+
+    this.colorPickerInputBox.addEventListener(
+      eventNames.FOCUS,
+      this._onStartEditingInputBox.bind(this)
+    );
+    this.colorPickerInputBox.addEventListener(
+      eventNames.BLUR,
+      this._onStopEditingInputBox.bind(this)
+    );
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    this._els.iconColorpicker.off();
+    this._els.registerIconButton.removeEventListener('change', this.eventHandler.registerIcon);
+    this._els.addIconButton.removeEventListener('click', this.eventHandler.addIcon);
+
+    this.colorPickerInputBox.removeEventListener(
+      eventNames.FOCUS,
+      this._onStartEditingInputBox.bind(this)
+    );
+    this.colorPickerInputBox.removeEventListener(
+      eventNames.BLUR,
+      this._onStopEditingInputBox.bind(this)
+    );
+  }
+
+  /**
+   * Clear icon type
+   */
+  clearIconType() {
+    this._els.addIconButton.classList.remove(this.iconType);
+    this.iconType = null;
+  }
+
+  /**
+   * Register default icon
+   */
+  registerDefaultIcon() {
+    forEach(defaultIconPath, (path, type) => {
+      this.actions.registerDefaultIcons(type, path);
+    });
+  }
+
+  /**
+   * Set icon picker color
+   * @param {string} iconColor - rgb color string
+   */
+  setIconPickerColor(iconColor) {
+    this._els.iconColorpicker.color = iconColor;
+  }
+
+  /**
+   * Returns the menu to its default state.
+   */
+  changeStandbyMode() {
+    this.clearIconType();
+    this.actions.cancelAddIcon();
+  }
+
+  /**
+   * Change icon color
+   * @param {string} color - color for change
+   * @private
+   */
+  _changeColorHandler(color) {
+    color = color || 'transparent';
+    this.actions.changeColor(color);
+  }
+
+  /**
+   * Change icon color
+   * @param {object} event - add button event object
+   * @private
+   */
+  _addIconHandler(event) {
+    const button = event.target.closest('.tui-image-editor-button');
+
+    if (button) {
+      const iconType = button.getAttribute('data-icontype');
+      const iconColor = this._els.iconColorpicker.color;
+      this.actions.discardSelection();
+      this.actions.changeSelectableAll(false);
+      this._els.addIconButton.classList.remove(this.iconType);
+      this._els.addIconButton.classList.add(iconType);
+
+      if (this.iconType === iconType) {
+        this.changeStandbyMode();
+      } else {
+        this.actions.addIcon(iconType, iconColor);
+        this.iconType = iconType;
+      }
+    }
+  }
+
+  /**
+   * register icon
+   * @param {object} event - file change event object
+   * @private
+   */
+  _registerIconHandler(event) {
+    let imgUrl;
+
+    if (!isSupportFileApi) {
+      alert('This browser does not support file-api');
+    }
+
+    const [file] = event.target.files;
+
+    if (file) {
+      imgUrl = URL.createObjectURL(file);
+      this.actions.registerCustomIcon(imgUrl, file);
+    }
+  }
+}
+
+export default Icon;

package/src/js/ui/locale/locale.js

@@ -0,0 +1,19 @@
+/**
+ * Translate messages
+ */
+class Locale {
+  constructor(locale) {
+    this._locale = locale;
+  }
+
+  /**
+   * localize message
+   * @param {string} message - message who will be localized
+   * @returns {string}
+   */
+  localize(message) {
+    return this._locale[message] || message;
+  }
+}
+
+export default Locale;

package/src/js/ui/mask.js

@@ -0,0 +1,96 @@
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/mask';
+import { assignmentForDestroy, isSupportFileApi } from '@/util';
+
+/**
+ * Mask ui class
+ * @class
+ * @ignore
+ */
+class Mask extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'mask',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+
+    this._els = {
+      applyButton: this.selector('.tie-mask-apply'),
+      maskImageButton: this.selector('.tie-mask-image-file'),
+    };
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for mask
+   * @param {Object} actions - actions for crop
+   *   @param {Function} actions.loadImageFromURL - load image action
+   *   @param {Function} actions.applyFilter - apply filter action
+   */
+  addEvent(actions) {
+    const loadMaskFile = this._loadMaskFile.bind(this);
+    const applyMask = this._applyMask.bind(this);
+
+    this.eventHandler = {
+      loadMaskFile,
+      applyMask,
+    };
+
+    this.actions = actions;
+    this._els.maskImageButton.addEventListener('change', loadMaskFile);
+    this._els.applyButton.addEventListener('click', applyMask);
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    this._els.maskImageButton.removeEventListener('change', this.eventHandler.loadMaskFile);
+    this._els.applyButton.removeEventListener('click', this.eventHandler.applyMask);
+  }
+
+  /**
+   * Apply mask
+   * @private
+   */
+  _applyMask() {
+    this.actions.applyFilter();
+    this._els.applyButton.classList.remove('active');
+  }
+
+  /**
+   * Load mask file
+   * @param {object} event - File change event object
+   * @private
+   */
+  _loadMaskFile(event) {
+    let imgUrl;
+
+    if (!isSupportFileApi()) {
+      alert('This browser does not support file-api');
+    }
+
+    const [file] = event.target.files;
+
+    if (file) {
+      imgUrl = URL.createObjectURL(file);
+      this.actions.loadImageFromURL(imgUrl, file);
+      this._els.applyButton.classList.add('active');
+    }
+  }
+}
+
+export default Mask;

package/src/js/ui/panelMenu.js

@@ -0,0 +1,130 @@
+/**
+ * Menu Panel Class
+ * @class
+ * @ignore
+ */
+
+class Panel {
+  /**
+   * @param {HTMLElement} menuElement - menu dom element
+   * @param {Object} options - menu options
+   *   @param {string} options.name - name of panel menu
+   */
+  constructor(menuElement, { name }) {
+    this.name = name;
+    this.items = [];
+
+    this.panelElement = this._makePanelElement();
+    this.listElement = this._makeListElement();
+
+    this.panelElement.appendChild(this.listElement);
+    menuElement.appendChild(this.panelElement);
+  }
+
+  /**
+   * Make Panel element
+   * @returns {HTMLElement}
+   */
+  _makePanelElement() {
+    const panel = document.createElement('div');
+
+    panel.className = `tie-panel-${this.name}`;
+
+    return panel;
+  }
+
+  /**
+   * Make list element
+   * @returns {HTMLElement} list element
+   * @private
+   */
+  _makeListElement() {
+    const list = document.createElement('ol');
+
+    list.className = `${this.name}-list`;
+
+    return list;
+  }
+
+  /**
+   * Make list item element
+   * @param {string} html - history list item html
+   * @returns {HTMLElement} list item element
+   */
+  makeListItemElement(html) {
+    const listItem = document.createElement('li');
+
+    listItem.innerHTML = html;
+    listItem.className = `${this.name}-item`;
+    listItem.setAttribute('data-index', this.items.length);
+
+    return listItem;
+  }
+
+  /**
+   * Push list item element
+   * @param {HTMLElement} item - list item element to add to the list
+   */
+  pushListItemElement(item) {
+    this.listElement.appendChild(item);
+    this.listElement.scrollTop += item.offsetHeight;
+    this.items.push(item);
+  }
+
+  /**
+   * Delete list item element
+   * @param {number} start - start index to delete
+   * @param {number} end - end index to delete
+   */
+  deleteListItemElement(start, end) {
+    const { items } = this;
+
+    for (let i = start; i < end; i += 1) {
+      this.listElement.removeChild(items[i]);
+    }
+    items.splice(start, end - start + 1);
+  }
+
+  /**
+   * Get list's length
+   * @returns {number}
+   */
+  getListLength() {
+    return this.items.length;
+  }
+
+  /**
+   * Add class name of item
+   * @param {number} index - index of item
+   * @param {string} className - class name to add
+   */
+  addClass(index, className) {
+    if (this.items[index]) {
+      this.items[index].classList.add(className);
+    }
+  }
+
+  /**
+   * Remove class name of item
+   * @param {number} index - index of item
+   * @param {string} className - class name to remove
+   */
+  removeClass(index, className) {
+    if (this.items[index]) {
+      this.items[index].classList.remove(className);
+    }
+  }
+
+  /**
+   * Toggle class name of item
+   * @param {number} index - index of item
+   * @param {string} className - class name to remove
+   */
+  toggleClass(index, className) {
+    if (this.items[index]) {
+      this.items[index].classList.toggle(className);
+    }
+  }
+}
+
+export default Panel;