ding-image-editor 3.15.3

package/src/js/ui/template/submenu/icon.js

@@ -0,0 +1,108 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon }) => `
+    <ul class="tui-image-editor-submenu-item">
+        <li class="tie-icon-add-button">
+            <div class="tui-image-editor-button" data-icontype="icon-arrow">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-arrow', true)}
+                </div>
+                <label>
+                    ${locale.localize('Arrow')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button" data-icontype="icon-arrow-2">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-arrow-2', true)}
+                </div>
+                <label>
+                    ${locale.localize('Arrow-2')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button" data-icontype="icon-arrow-3">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-arrow-3', true)}
+                </div>
+                <label>
+                    ${locale.localize('Arrow-3')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button" data-icontype="icon-star">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-star', true)}
+                </div>
+                <label>
+                    ${locale.localize('Star-1')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button" data-icontype="icon-star-2">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-star-2', true)}
+                </div>
+                <label>
+                    ${locale.localize('Star-2')}
+                </label>
+            </div>
+
+            <div class="tui-image-editor-button" data-icontype="icon-polygon">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-polygon', true)}
+                </div>
+                <label>
+                    ${locale.localize('Polygon')}
+                </label>
+            </div>
+
+            <div class="tui-image-editor-button" data-icontype="icon-location">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-location', true)}
+                </div>
+                <label>
+                    ${locale.localize('Location')}
+                </label>
+            </div>
+
+            <div class="tui-image-editor-button" data-icontype="icon-heart">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-heart', true)}
+                </div>
+                <label>
+                    ${locale.localize('Heart')}
+                </label>
+            </div>
+
+            <div class="tui-image-editor-button" data-icontype="icon-bubble">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'icon-bubble', true)}
+                </div>
+                <label>
+                    ${locale.localize('Bubble')}
+                </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li class="tie-icon-add-button">
+            <div class="tui-image-editor-button" style="margin:0">
+                <div>
+                    <input type="file" accept="image/*" class="tie-icon-image-file">
+                    ${makeSvgIcon(['normal', 'active'], 'icon-load', true)}
+                </div>
+                <label>
+                    ${locale.localize('Custom icon')}
+                </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li>
+            <div class="tie-icon-color" title="${locale.localize('Color')}"></div>
+        </li>
+    </ul>
+`;

package/src/js/ui/template/submenu/mask.js

@@ -0,0 +1,30 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon }) => `
+    <ul class="tui-image-editor-submenu-item">
+        <li>
+            <div class="tui-image-editor-button">
+                <div>
+                    <input type="file" accept="image/*" class="tie-mask-image-file">
+                    ${makeSvgIcon(['normal', 'active'], 'mask-load', true)}
+                </div>
+                <label> ${locale.localize('Load Mask Image')} </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tie-mask-apply tui-image-editor-newline apply" style="margin-top: 22px;margin-bottom: 5px">
+            <div class="tui-image-editor-button apply">
+                ${makeSvgIcon(['normal', 'active'], 'apply')}
+                <label>
+                    ${locale.localize('Apply')}
+                </label>
+            </div>
+        </li>
+    </ul>
+`;

package/src/js/ui/template/submenu/resize.js

@@ -0,0 +1,54 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon }) => `
+    <ul class="tui-image-editor-submenu-item">
+        <li class="tui-image-editor-submenu-align">
+            <div class="tui-image-editor-range-wrap tui-image-editor-newline">
+                <label class="range">${locale.localize('Width')}&nbsp;</label>
+                <div class="tie-width-range"></div>
+                <input class="tie-width-range-value tui-image-editor-range-value" value="0" /> <label>px</label>
+                <div class="tui-image-editor-partition tui-image-editor-newline"></div>
+                <label class="range">${locale.localize('Height')}</label>
+                <div class="tie-height-range"></div>
+                <input class="tie-height-range-value tui-image-editor-range-value" value="0" /> <label>px</label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition tui-image-editor-newline"></li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-submenu-align">
+            <div class="tui-image-editor-checkbox-wrap">
+                <div class="tui-image-editor-checkbox">
+                    <label>
+                        <input type="checkbox" class="tie-lock-aspect-ratio">
+                        <span>${locale.localize('Lock Aspect Ratio')}</span>
+                    </label>
+                </div>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition tui-image-editor-newline"></li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-partition tui-image-editor-newline"></li>
+        <li class="tie-resize-button action">
+            <div class="tui-image-editor-button apply">
+                ${makeSvgIcon(['normal', 'active'], 'apply')}
+                <label>
+                    ${locale.localize('Apply')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button cancel">
+                ${makeSvgIcon(['normal', 'active'], 'cancel')}
+                <label>
+                    ${locale.localize('Cancel')}
+                </label>
+            </div>
+        </li>
+    </ul>
+`;

package/src/js/ui/template/submenu/rotate.js

@@ -0,0 +1,32 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon }) => `
+    <ul class="tui-image-editor-submenu-item">
+        <li class="tie-rotate-button">
+            <div class="tui-image-editor-button clockwise">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'rotate-clockwise', true)}
+                </div>
+                <label> 30 </label>
+            </div>
+            <div class="tui-image-editor-button counterclockwise">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'rotate-counterclockwise', true)}
+                </div>
+                <label> -30 </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-newline tui-image-editor-range-wrap">
+            <label class="range">${locale.localize('Range')}</label>
+            <div class="tie-rotate-range"></div>
+            <input class="tie-rotate-range-value tui-image-editor-range-value" value="0" />
+        </li>
+    </ul>
+`;

package/src/js/ui/template/submenu/shape.js

@@ -0,0 +1,45 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon }) => `
+    <ul class="tui-image-editor-submenu-item">
+        <li class="tie-shape-button">
+            <div class="tui-image-editor-button rect">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'shape-rectangle', true)}
+                </div>
+                <label> ${locale.localize('Rectangle')} </label>
+            </div>
+            <div class="tui-image-editor-button circle">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'shape-circle', true)}
+                </div>
+                <label> ${locale.localize('Circle')} </label>
+            </div>
+            <div class="tui-image-editor-button triangle">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'shape-triangle', true)}
+                </div>
+                <label> ${locale.localize('Triangle')} </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li class="tie-shape-color-button">
+            <div class="tie-color-fill" title="${locale.localize('Fill')}"></div>
+            <div class="tie-color-stroke" title="${locale.localize('Stroke')}"></div>
+        </li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-newline tui-image-editor-range-wrap">
+            <label class="range">${locale.localize('Stroke')}</label>
+            <div class="tie-stroke-range"></div>
+            <input class="tie-stroke-range-value tui-image-editor-range-value" value="0" />
+        </li>
+    </ul>
+`;

package/src/js/ui/template/submenu/text.js

@@ -0,0 +1,67 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon }) => `
+    <ul class="tui-image-editor-submenu-item">
+        <li class="tie-text-effect-button">
+            <div class="tui-image-editor-button bold">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'text-bold', true)}
+                </div>
+                <label> ${locale.localize('Bold')} </label>
+            </div>
+            <div class="tui-image-editor-button italic">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'text-italic', true)}
+                </div>
+                <label> ${locale.localize('Italic')} </label>
+            </div>
+            <div class="tui-image-editor-button underline">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'text-underline', true)}
+                </div>
+                <label> ${locale.localize('Underline')} </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li class="tie-text-align-button">
+            <div class="tui-image-editor-button left">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'text-align-left', true)}
+                </div>
+                <label> ${locale.localize('Left')} </label>
+            </div>
+            <div class="tui-image-editor-button center">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'text-align-center', true)}
+                </div>
+                <label> ${locale.localize('Center')} </label>
+            </div>
+            <div class="tui-image-editor-button right">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'text-align-right', true)}
+                </div>
+                <label> ${locale.localize('Right')} </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li>
+            <div class="tie-text-color" title="${locale.localize('Color')}"></div>
+        </li>
+        <li class="tui-image-editor-partition only-left-right">
+            <div></div>
+        </li>
+        <li class="tui-image-editor-newline tui-image-editor-range-wrap">
+            <label class="range">${locale.localize('Text size')}</label>
+            <div class="tie-text-range"></div>
+            <input class="tie-text-range-value tui-image-editor-range-value" value="0" />
+        </li>
+    </ul>
+`;

package/src/js/ui/template/submenu/zoom.js

@@ -0,0 +1,41 @@
+/**
+ * @param {Object} submenuInfo - submenu info for make template
+ *   @param {Locale} locale - Translate text
+ *   @param {Function} makeSvgIcon - svg icon generator
+ * @returns {string}
+ */
+export default ({ locale, makeSvgIcon }) => `
+    <ul class="tie-zoom-button tui-image-editor-submenu-item">
+        <li>
+            <div class="tui-image-editor-button zoomIn">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'zoom-in', true)}
+                </div>
+                <label>
+                    ${locale.localize('Zoom In')}
+                </label>
+            </div>
+            <div class="tui-image-editor-button zoomOut">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'zoom-out', true)}
+                </div>
+                <label>
+                    ${locale.localize('Zoom Out')}
+                </label>
+            </div>
+        </li>
+        <li class="tui-image-editor-partition">
+            <div></div>
+        </li>
+        <li>
+            <div class="tui-image-editor-button hand">
+                <div>
+                    ${makeSvgIcon(['normal', 'active'], 'zoom-hand', true)}
+                </div>
+                <label>
+                    ${locale.localize('Hand')}
+                </label>
+            </div>
+        </li>
+    </ul>
+`;

package/src/js/ui/text.js

@@ -0,0 +1,279 @@
+import Range from '@/ui/tools/range';
+import Colorpicker from '@/ui/tools/colorpicker';
+import Submenu from '@/ui/submenuBase';
+import templateHtml from '@/ui/template/submenu/text';
+import { assignmentForDestroy } from '@/util';
+import { defaultTextRangeValues, eventNames, selectorNames } from '@/consts';
+
+/**
+ * Crop ui class
+ * @class
+ * @ignore
+ */
+class Text extends Submenu {
+  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {
+    super(subMenuElement, {
+      locale,
+      name: 'text',
+      makeSvgIcon,
+      menuBarPosition,
+      templateHtml,
+      usageStatistics,
+    });
+    this.effect = {
+      bold: false,
+      italic: false,
+      underline: false,
+    };
+    this.align = 'tie-text-align-left';
+    this._els = {
+      textEffectButton: this.selector('.tie-text-effect-button'),
+      textAlignButton: this.selector('.tie-text-align-button'),
+      textColorpicker: new Colorpicker(this.selector('.tie-text-color'), {
+        defaultColor: '#ffbb3b',
+        toggleDirection: this.toggleDirection,
+        usageStatistics: this.usageStatistics,
+      }),
+      textRange: new Range(
+        {
+          slider: this.selector('.tie-text-range'),
+          input: this.selector('.tie-text-range-value'),
+        },
+        defaultTextRangeValues
+      ),
+    };
+
+    this.colorPickerInputBox = this._els.textColorpicker.colorpickerElement.querySelector(
+      selectorNames.COLOR_PICKER_INPUT_BOX
+    );
+  }
+
+  /**
+   * Destroys the instance.
+   */
+  destroy() {
+    this._removeEvent();
+    this._els.textColorpicker.destroy();
+    this._els.textRange.destroy();
+
+    assignmentForDestroy(this);
+  }
+
+  /**
+   * Add event for text
+   * @param {Object} actions - actions for text
+   *   @param {Function} actions.changeTextStyle - change text style
+   */
+  addEvent(actions) {
+    const setTextEffect = this._setTextEffectHandler.bind(this);
+    const setTextAlign = this._setTextAlignHandler.bind(this);
+
+    this.eventHandler = {
+      setTextEffect,
+      setTextAlign,
+    };
+
+    this.actions = actions;
+    this._els.textEffectButton.addEventListener('click', setTextEffect);
+    this._els.textAlignButton.addEventListener('click', setTextAlign);
+    this._els.textRange.on('change', this._changeTextRnageHandler.bind(this));
+    this._els.textColorpicker.on('change', this._changeColorHandler.bind(this));
+
+    this.colorPickerInputBox.addEventListener(
+      eventNames.FOCUS,
+      this._onStartEditingInputBox.bind(this)
+    );
+    this.colorPickerInputBox.addEventListener(
+      eventNames.BLUR,
+      this._onStopEditingInputBox.bind(this)
+    );
+  }
+
+  /**
+   * Remove event
+   * @private
+   */
+  _removeEvent() {
+    const { setTextEffect, setTextAlign } = this.eventHandler;
+
+    this._els.textEffectButton.removeEventListener('click', setTextEffect);
+    this._els.textAlignButton.removeEventListener('click', setTextAlign);
+    this._els.textRange.off();
+    this._els.textColorpicker.off();
+
+    this.colorPickerInputBox.removeEventListener(
+      eventNames.FOCUS,
+      this._onStartEditingInputBox.bind(this)
+    );
+    this.colorPickerInputBox.removeEventListener(
+      eventNames.BLUR,
+      this._onStopEditingInputBox.bind(this)
+    );
+  }
+
+  /**
+   * Returns the menu to its default state.
+   */
+  changeStandbyMode() {
+    this.actions.stopDrawingMode();
+  }
+
+  /**
+   * Executed when the menu starts.
+   */
+  changeStartMode() {
+    this.actions.modeChange('text');
+  }
+
+  /**
+   * Get text color
+   * @returns {string} - text color
+   */
+  get textColor() {
+    return this._els.textColorpicker.color;
+  }
+
+  set textColor(color) {
+    this._els.textColorpicker.color = color;
+  }
+
+  /**
+   * Get text size
+   * @returns {string} - text size
+   */
+  get fontSize() {
+    return this._els.textRange.value;
+  }
+
+  /**
+   * Set text size
+   * @param {Number} value - text size
+   */
+  set fontSize(value) {
+    this._els.textRange.value = value;
+  }
+
+  /**
+   * get font style
+   * @returns {string} - font style
+   */
+  get fontStyle() {
+    return this.effect.italic ? 'italic' : 'normal';
+  }
+
+  /**
+   * get font weight
+   * @returns {string} - font weight
+   */
+  get fontWeight() {
+    return this.effect.bold ? 'bold' : 'normal';
+  }
+
+  /**
+   * get text underline text underline
+   * @returns {boolean} - true or false
+   */
+  get underline() {
+    return this.effect.underline;
+  }
+
+  setTextStyleStateOnAction(textStyle = {}) {
+    const { fill, fontSize, fontStyle, fontWeight, textDecoration, textAlign } = textStyle;
+
+    this.textColor = fill;
+    this.fontSize = fontSize;
+    this.setEffectState('italic', fontStyle);
+    this.setEffectState('bold', fontWeight);
+    this.setEffectState('underline', textDecoration);
+    this.setAlignState(`tie-text-align-${textAlign}`);
+  }
+
+  setEffectState(effectName, value) {
+    const effectValue = value === 'italic' || value === 'bold' || value === 'underline';
+    const button = this._els.textEffectButton.querySelector(
+      `.tui-image-editor-button.${effectName}`
+    );
+
+    this.effect[effectName] = effectValue;
+
+    button.classList[effectValue ? 'add' : 'remove']('active');
+  }
+
+  setAlignState(value) {
+    const button = this._els.textAlignButton;
+    button.classList.remove(this.align);
+    button.classList.add(value);
+    this.align = value;
+  }
+
+  /**
+   * text effect set handler
+   * @param {object} event - add button event object
+   * @private
+   */
+  _setTextEffectHandler(event) {
+    const button = event.target.closest('.tui-image-editor-button');
+    if (button) {
+      const [styleType] = button.className.match(/(bold|italic|underline)/);
+      const styleObj = {
+        bold: { fontWeight: 'bold' },
+        italic: { fontStyle: 'italic' },
+        underline: { textDecoration: 'underline' },
+      }[styleType];
+
+      this.effect[styleType] = !this.effect[styleType];
+      button.classList.toggle('active');
+      this.actions.changeTextStyle(styleObj);
+    }
+  }
+
+  /**
+   * text effect set handler
+   * @param {object} event - add button event object
+   * @private
+   */
+  _setTextAlignHandler(event) {
+    const button = event.target.closest('.tui-image-editor-button');
+    if (button) {
+      const styleType = this.getButtonType(button, ['left', 'center', 'right']);
+      const styleTypeAlias = `tie-text-align-${styleType}`;
+
+      event.currentTarget.classList.remove(this.align);
+      if (this.align !== styleTypeAlias) {
+        event.currentTarget.classList.add(styleTypeAlias);
+      }
+      this.actions.changeTextStyle({ textAlign: styleType });
+
+      this.align = styleTypeAlias;
+    }
+  }
+
+  /**
+   * text align set handler
+   * @param {number} value - range value
+   * @param {boolean} isLast - Is last change
+   * @private
+   */
+  _changeTextRnageHandler(value, isLast) {
+    this.actions.changeTextStyle(
+      {
+        fontSize: value,
+      },
+      !isLast
+    );
+  }
+
+  /**
+   * change color handler
+   * @param {string} color - change color string
+   * @private
+   */
+  _changeColorHandler(color) {
+    color = color || 'transparent';
+    this.actions.changeTextStyle({
+      fill: color,
+    });
+  }
+}
+
+export default Text;