tui-image-editor - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

docs/Basic-Tutorial.md

@@ -42,2 +42,107 @@ ## Basic
 
+### 4. Localization
+ImageEditor provide feature to customize all of inscriptions. Look at example.
+
+```js
+var locale_ru_RU = { // override default English locale to your custom
+    'Crop': 'Обзрезать', // as result default English inscription will be translated into Russian
+    'Delete-all': 'Удалить всё'
+    // etc...
+};
+// Image editor
+var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+     includeUI: {
+         loadImage: {
+             path: 'img/sampleImage.jpg',
+             name: 'SampleImage'
+         },
+         locale: locale_ru_RU, // key-value object with localization
+         theme: blackTheme, // or whiteTheme
+         initMenu: 'filter',
+         menuBarPosition: 'bottom'
+     },
+    cssMaxWidth: 700,
+    cssMaxHeight: 500,
+    selectionStyle: {
+        cornerSize: 20,
+        rotatingPointOffset: 70
+    }
+});
+```
+<br>
+
+Full inscriptions list who can be replaced to custom ones:
+* 3:2
+* 4:3
+* 5:4
+* 7:5
+* 16:9
+* Apply
+* Arrow
+* Arrow-2
+* Arrow-3
+* Blend
+* Blur
+* Bold 
+* Brightness
+* Bubble
+* Cancel
+* Center 
+* Circle 
+* Color
+* Color Filter
+* Crop
+* Custom 
+* Custom icon
+* Delete
+* Delete-all
+* Distance
+* Download
+* Draw
+* Emboss
+* Fill
+* Filter
+* Flip
+* Flip X
+* Flip Y
+* Free
+* Grayscale
+* Heart
+* Icon
+* Invert
+* Italic 
+* Left 
+* Load
+* Load Mask Image 
+* Location
+* Mask
+* Multiply
+* Noise
+* Pixelate
+* Polygon
+* Range
+* Rectangle 
+* Redo
+* Remove White
+* Reset
+* Right 
+* Rotate
+* Sepia
+* Sepia2
+* Shape
+* Sharpen
+* Square 
+* Star-1
+* Star-2
+* Straight
+* Stroke
+* Text
+* Text size
+* Threshold
+* Tint
+* Triangle 
+* Underline 
+* Undo
+* Value
+
 ## More..
@@ -44,0 +149,0 @@

karma.conf.js

@@ -55,4 +55,4 @@ /* eslint-disable consts-on-top, no-process-env, require-jsdoc */
             'IE10',
-            'IE11',
-            'Edge',
+            // 'IE11',
+            // 'Edge',
             'Chrome-WebDriver',
@@ -59,0 +59,0 @@ 'Firefox-WebDriver'

makesvg.js

 const fs = require('fs');
+const mkdirp = require('mkdirp');
 const svgstore = require('svgstore');
@@ -20,7 +21,12 @@ const svgDir = './src/svg';
 
-fs.readdir('./src/svg', (err, dirs) => {
-    dirs.forEach(dir => {
-        getFileList(dir);
-    });
-})
-
+mkdirp('./dist/svg', (mkdirpErr) => {
+    if (mkdirpErr) {
+        console.error(mkdirpErr);
+    } else {
+        fs.readdir(svgDir, (err, dirs) => {
+            dirs.forEach(dir => {
+                getFileList(dir);
+            });
+        });
+    }
+});

package.json

 {
   "name": "tui-image-editor",
   "author": "NHNEnt FE Development Lab <[e-mail]>",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "license": "MIT",
@@ -22,2 +22,3 @@ "repository": {
   "devDependencies": {
+    "@types/jquery": "^3.3.29",
     "babel-core": "^6.18.2",
@@ -28,2 +29,3 @@ "babel-eslint": "^7.1.0",
     "css-loader": "^0.28.11",
+    "dtslint": "^0.4.2",
     "es5-shim": "^4.5.9",
@@ -51,2 +53,3 @@ "eslint": "^4.5.0",
     "karma-webpack": "^1.8.0",
+    "mkdirp": "^0.5.1",
     "safe-umd-webpack-plugin": "0.0.2",
@@ -57,3 +60,5 @@ "simulant": "^0.2.2",
     "svgstore": "^2.0.3",
+    "tslint": "^5.12.0",
     "tui-jsdoc-template": "^1.0.4",
+    "typescript": "^3.2.2",
     "webpack": "^1.13.3",
@@ -65,7 +70,9 @@ "webpack-dev-server": "^1.11.0"
     "test:ne": "KARMA_SERVER=ne karma start",
-    "bundle": "webpack && webpack -p && npm run bundle:svg",
-    "bundle:svg": "mkdir -p dist/svg && node makesvg.js",
+    "test:types": "tsc --project test/types",
+    "bundle": "webpack && webpack -p && npm run bundle:svg && node tsBannerGenerator.js",
+    "bundle:svg": "node makesvg.js",
     "serve": "webpack-dev-server --inline --hot -d",
     "cpy-dist2doc": "mkdir -p doc/dist && cp -f -r dist doc",
     "doc": "jsdoc -c jsdoc.conf.json && npm run cpy-dist2doc",
+    "tslint": "tslint index.d.ts",
     "postinstall": "npm install --no-save --no-optional fabric@~1.6.7"
@@ -72,0 +79,0 @@ },

README.md

@@ -250,2 +250,7 @@ # ![Toast UI ImageEditor](https://user-images.githubusercontent.com/35218826/40895380-0b9f4cd6-67ea-11e8-982f-18121daa3a04.png)
 var blackTheme = require('./js/theme/black-theme.js');
+var locale_ru_RU = { // override default English locale to your custom
+    'Crop': 'Обзрезать',
+    'Delete-all': 'Удалить всё'
+    // etc...
+};
 var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
@@ -257,2 +262,3 @@ includeUI: {
          },
+         locale: locale_ru_RU,
          theme: blackTheme, // or whiteTheme
@@ -259,0 +265,0 @@ initMenu: 'filter',

src/js/graphics.js

@@ -557,7 +557,6 @@ /**
      * Get cropped rect
-     * @param {Object} mode cropzone rect mode
-     * @returns {Object} rect
+     * @param {number} [mode] cropzone rect mode
      */
     setCropzoneRect(mode) {
-        return this.getComponent(components.CROPPER).setCropzoneRect(mode);
+        this.getComponent(components.CROPPER).setCropzoneRect(mode);
     }
@@ -564,0 +563,0 @@

src/js/imageEditor.js

@@ -38,2 +38,11 @@ /**
  *  @param {number} options.cssMaxHeight - Canvas css-max-height
+ *  @param {Object} [options.selectionStyle] - selection style
+ *  @param {string} [options.selectionStyle.cornerStyle] - selection corner style
+ *  @param {number} [options.selectionStyle.cornerSize] - selection corner size
+ *  @param {string} [options.selectionStyle.cornerColor] - selection corner color
+ *  @param {string} [options.selectionStyle.cornerStrokeColor] = selection corner stroke color
+ *  @param {boolean} [options.selectionStyle.transparentCorners] - selection corner transparent
+ *  @param {number} [options.selectionStyle.lineWidth] - selection line width
+ *  @param {string} [options.selectionStyle.borderColor] - selection border color
+ *  @param {number} [options.selectionStyle.rotatingPointOffset] - selection rotating point length
  *  @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false.
@@ -186,9 +195,9 @@ * @example
      * @property {string} text - text content
-     * @property {string} left - Left
-     * @property {string} top - Top
-     * @property {string} width - Width
-     * @property {string} height - Height
+     * @property {(string | number)} left - Left
+     * @property {(string | number)} top - Top
+     * @property {(string | number)} width - Width
+     * @property {(string | number)} height - Height
      * @property {string} fill - Color
      * @property {string} stroke - Stroke
-     * @property {string} strokeWidth - StrokeWidth
+     * @property {(string | number)} strokeWidth - StrokeWidth
      * @property {string} fontFamily - Font type for text
@@ -673,7 +682,6 @@ * @property {number} fontSize - Font Size
      * Set the cropping rect
-     * @param {Object} mode crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777]
-     * @returns {Object}  {{left: number, top: number, width: number, height: number}} rect
+     * @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777]
      */
     setCropzoneRect(mode) {
-        return this._graphics.setCropzoneRect(mode);
+        this._graphics.setCropzoneRect(mode);
     }
@@ -866,3 +874,3 @@
      *      @param {number} [options.top] - Shape y position
-     *      @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
+     *      @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
      * @returns {Promise<ObjectProps, ErrorMsg>}
@@ -911,3 +919,3 @@ * @example
      *      @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)
-     *      @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
+     *      @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not
      * @returns {Promise}
@@ -957,3 +965,3 @@ * @example
      *         fill: '#000',
-     *         fontSize: '20',
+     *         fontSize: 20,
      *         fontWeight: 'bold'
@@ -1164,4 +1172,4 @@ *     },
      *      @param {string} [options.fill] - Icon foreground color
-     *      @param {string} [options.left] - Icon x position
-     *      @param {string} [options.top] - Icon y position
+     *      @param {number} [options.left] - Icon x position
+     *      @param {number} [options.top] - Icon y position
      * @returns {Promise<ObjectProps, ErrorMsg>}
@@ -1168,0 +1176,0 @@ * @example

src/js/ui.js

@@ -16,2 +16,3 @@ import snippet from 'tui-code-snippet';
 import Filter from './ui/filter';
+import Locale from './ui/locale/locale';
 
@@ -49,3 +50,2 @@ const SUB_UI_COMPONENT = {
         this.options = this._initializeOption(options);
-
         this._actions = actions;
@@ -55,2 +55,3 @@ this.submenu = false;
         this.uiSize = {};
+        this._locale = new Locale(this.options.locale);
         this.theme = new Theme(this.options.theme);
@@ -237,2 +238,3 @@
             },
+            locale: {},
             menuIconPath: '',
@@ -278,2 +280,3 @@ menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
             this[menuName] = new SubComponentClass(this._subMenuElement, {
+                locale: this._locale,
                 iconStyle: this.theme.getStyle('submenu.icon'),
@@ -306,2 +309,3 @@ menuBarPosition: this.options.menuBarPosition
         selectedElement.innerHTML = controls({
+            locale: this._locale,
             biImage: this.theme.getStyle('common.bi'),
@@ -313,2 +317,3 @@ iconStyle: this.theme.getStyle('menu.icon'),
         mainContainer({
+            locale: this._locale,
             biImage: this.theme.getStyle('common.bi'),
@@ -350,3 +355,3 @@ commonStyle: this.theme.getStyle('common'),
         btnElement.className = 'tui-image-editor-item normal';
-        btnElement.title = menuName.replace(/^[a-z]/g, $0 => $0.toUpperCase());
+        btnElement.title = this._locale.localize(menuName.replace(/^[a-z]/g, $0 => $0.toUpperCase()));
         btnElement.innerHTML = menuItemHtml;
@@ -353,0 +358,0 @@

src/js/ui/crop.js

@@ -11,4 +11,5 @@ import snippet from 'tui-code-snippet';
 class Crop extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'crop',
@@ -15,0 +16,0 @@ iconStyle,

src/js/ui/draw.js

@@ -15,4 +15,5 @@ import util from '../util';
 class Draw extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'draw',
@@ -19,0 +20,0 @@ iconStyle,

src/js/ui/filter.js

@@ -36,4 +36,5 @@ import snippet from 'tui-code-snippet';
 class Filter extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'filter',
@@ -40,0 +41,0 @@ iconStyle,

src/js/ui/flip.js

@@ -11,4 +11,5 @@ import snippet from 'tui-code-snippet';
 class Flip extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'flip',
@@ -15,0 +16,0 @@ iconStyle,

src/js/ui/icon.js

@@ -14,4 +14,5 @@ import snippet from 'tui-code-snippet';
 class Icon extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'icon',
@@ -18,0 +19,0 @@ iconStyle,

src/js/ui/mask.js

@@ -11,4 +11,5 @@ import Submenu from './submenuBase';
 class Mask extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'mask',
@@ -15,0 +16,0 @@ iconStyle,

src/js/ui/rotate.js

@@ -16,4 +16,5 @@ import Range from './tools/range';
 class Rotate extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'rotate',
@@ -20,0 +21,0 @@ iconStyle,

src/js/ui/shape.js

@@ -20,4 +20,5 @@ import Colorpicker from './tools/colorpicker';
 class Shape extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'shape',
@@ -24,0 +25,0 @@ iconStyle,

src/js/ui/submenuBase.js

@@ -7,3 +7,11 @@ /**
 class Submenu {
-    constructor(subMenuElement, {name, iconStyle, menuBarPosition, templateHtml}) {
+    /**
+     * @param {HTMLElement} subMenuElement - submenu dom element
+     * @param {Locale} locale - translate text
+     * @param {string} name - name of sub menu
+     * @param {Object} iconStyle - style of icon
+     * @param {string} menuBarPosition - position of menu
+     * @param {*} templateHtml - template for SubMenuElement
+     */
+    constructor(subMenuElement, {locale, name, iconStyle, menuBarPosition, templateHtml}) {
         this.selector = str => subMenuElement.querySelector(str);
@@ -14,2 +22,3 @@ this.menuBarPosition = menuBarPosition;
         this._makeSubMenuElement(subMenuElement, {
+            locale,
             name,
@@ -64,10 +73,16 @@ iconStyle,
      * Make submenu dom element
-     * @param {HTMLElement} subMenuElement - subment dom element
+     * @param {HTMLElement} subMenuElement - submenu dom element
+     * @param {Locale} locale - translate text
+     * @param {string} name - submenu name
      * @param {Object} iconStyle -  icon style
+     * @param {*} templateHtml - template for SubMenuElement
      * @private
      */
-    _makeSubMenuElement(subMenuElement, {name, iconStyle, templateHtml}) {
+    _makeSubMenuElement(subMenuElement, {locale, name, iconStyle, templateHtml}) {
         const iconSubMenu = document.createElement('div');
         iconSubMenu.className = `tui-image-editor-menu-${name}`;
-        iconSubMenu.innerHTML = templateHtml({iconStyle});
+        iconSubMenu.innerHTML = templateHtml({
+            locale,
+            iconStyle
+        });
 
@@ -74,0 +89,0 @@ subMenuElement.appendChild(iconSubMenu);

src/js/ui/template/controls.js

@@ -1,2 +0,2 @@
-export default ({biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle, downloadButtonStyle}) => (`
+export default ({locale, biImage, iconStyle: {normal, hover, disabled}, loadButtonStyle, downloadButtonStyle}) => (`
     <div class="tui-image-editor-controls">
@@ -7,3 +7,3 @@ <div class="tui-image-editor-controls-logo">
         <ul class="tui-image-editor-menu">
-            <li id="tie-btn-undo" class="tui-image-editor-item" title="Undo">
+            <li id="tie-btn-undo" class="tui-image-editor-item" title="${locale.localize('Undo')}">
                 <svg class="svg_ic-menu">
@@ -15,3 +15,3 @@ <use xlink:href="${normal.path}#${normal.name}-ic-undo" class="enabled"/>
             </li>
-            <li id="tie-btn-redo" class="tui-image-editor-item" title="Redo">
+            <li id="tie-btn-redo" class="tui-image-editor-item" title="${locale.localize('Redo')}">
                 <svg class="svg_ic-menu">
@@ -23,3 +23,3 @@ <use xlink:href="${normal.path}#${normal.name}-ic-redo" class="enabled"/>
             </li>
-            <li id="tie-btn-reset" class="tui-image-editor-item" title="Reset">
+            <li id="tie-btn-reset" class="tui-image-editor-item" title="${locale.localize('Reset')}">
                 <svg class="svg_ic-menu">
@@ -34,3 +34,3 @@ <use xlink:href="${normal.path}#${normal.name}-ic-reset" class="enabled"/>
             </li>
-            <li id="tie-btn-delete" class="tui-image-editor-item" title="Delete">
+            <li id="tie-btn-delete" class="tui-image-editor-item" title="${locale.localize('Delete')}">
                 <svg class="svg_ic-menu">
@@ -42,3 +42,3 @@ <use xlink:href="${normal.path}#${normal.name}-ic-delete" class="enabled"/>
             </li>
-            <li id="tie-btn-delete-all" class="tui-image-editor-item" title="Delete-all">
+            <li id="tie-btn-delete-all" class="tui-image-editor-item" title="${locale.localize('Delete-all')}">
                 <svg class="svg_ic-menu">
@@ -57,7 +57,7 @@ <use xlink:href="${normal.path}#${normal.name}-ic-delete-all" class="enabled"/>
             <button style="${loadButtonStyle}">
-                Load
+                ${locale.localize('Load')}
                 <input type="file" class="tui-image-editor-load-btn" />
             </button>
             <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
-                Download
+                ${locale.localize('Download')}
             </button>
@@ -64,0 +64,0 @@ </div>

src/js/ui/template/mainContainer.js

@@ -1,2 +0,2 @@
-export default ({biImage, commonStyle, headerStyle, loadButtonStyle, downloadButtonStyle, submenuStyle}) => (`
+export default ({locale, biImage, commonStyle, headerStyle, loadButtonStyle, downloadButtonStyle, submenuStyle}) => (`
     <div class="tui-image-editor-main-container" style="${commonStyle}">
@@ -9,7 +9,7 @@ <div class="tui-image-editor-header" style="${headerStyle}">
                 <button style="${loadButtonStyle}">
-                    Load
+                    ${locale.localize('Load')}
                     <input type="file" class="tui-image-editor-load-btn" />
                 </button>
                 <button class="tui-image-editor-download-btn" style="${downloadButtonStyle}">
-                    Download
+                    ${locale.localize('Download')}
                 </button>
@@ -16,0 +16,0 @@ </div>

src/js/ui/template/submenu/crop.js

@@ -1,3 +0,8 @@
-
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -14,3 +19,3 @@ <li id="tie-crop-preset-button">
                 </div>
-                <label> Custom </label>
+                <label> ${locale.localize('Custom')} </label>
             </div>
@@ -26,3 +31,3 @@ <div class="tui-image-editor-button preset preset-square">
                 </div>
-                <label> Square </label>
+                <label> ${locale.localize('Square')} </label>
             </div>
@@ -38,3 +43,3 @@ <div class="tui-image-editor-button preset preset-3-2">
                 </div>
-                <label> 3:2 </label>
+                <label> ${locale.localize('3:2')} </label>
             </div>
@@ -50,3 +55,3 @@ <div class="tui-image-editor-button preset preset-4-3">
                 </div>
-                <label> 4:3 </label>
+                <label> ${locale.localize('4:3')} </label>
             </div>
@@ -62,3 +67,3 @@ <div class="tui-image-editor-button preset preset-5-4">
                 </div>
-                <label> 5:4 </label>
+                <label> ${locale.localize('5:4')} </label>
             </div>
@@ -74,3 +79,3 @@ <div class="tui-image-editor-button preset preset-7-5">
                 </div>
-                <label> 7:5 </label>
+                <label> ${locale.localize('7:5')} </label>
             </div>
@@ -86,3 +91,3 @@ <div class="tui-image-editor-button preset preset-16-9">
                 </div>
-                <label> 16:9 </label>
+                <label> ${locale.localize('16:9')} </label>
             </div>
@@ -102,3 +107,3 @@ </li>
                 <label>
-                    Apply
+                    ${locale.localize('Apply')}
                 </label>
@@ -112,3 +117,3 @@ </div>
                 <label>
-                    Cancel
+                    ${locale.localize('Cancel')}
                 </label>
@@ -115,0 +120,0 @@ </div>

src/js/ui/template/submenu/draw.js

@@ -1,2 +0,8 @@
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -12,3 +18,3 @@ <li id="tie-draw-line-select-button">
                 <label>
-                    Free
+                    ${locale.localize('Free')}
                 </label>
@@ -24,3 +30,3 @@ </div>
                 <label>
-                    Straight
+                    ${locale.localize('Straight')}
                 </label>
@@ -33,3 +39,3 @@ </div>
         <li>
-            <div id="tie-draw-color" title="Color"></div>
+            <div id="tie-draw-color" title="${locale.localize('Color')}"></div>
         </li>
@@ -40,3 +46,3 @@ <li class="tui-image-editor-partition only-left-right">
         <li class="tui-image-editor-newline tui-image-editor-range-wrap">
-            <label class="range">Range</label>
+            <label class="range">${locale.localize('Range')}</label>
             <div id="tie-draw-range"></div>
@@ -43,0 +49,0 @@ <input id="tie-draw-range-value" class="tui-image-editor-range-value" value="0" />

src/js/ui/template/submenu/filter.js

@@ -1,2 +0,6 @@
-export default () => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @returns {string}
+ */
+export default ({locale}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -7,27 +11,27 @@ <li class="tui-image-editor-submenu-align">
                     <input type="checkbox" id="tie-grayscale">
-                    <label for="tie-grayscale">Grayscale</label>
+                    <label for="tie-grayscale">${locale.localize('Grayscale')}</label>
                 </div>
                 <div class="tui-image-editor-checkbox">
                     <input type="checkbox" id="tie-invert">
-                    <label for="tie-invert">Invert</label>
+                    <label for="tie-invert">${locale.localize('Invert')}</label>
                 </div>
                 <div class="tui-image-editor-checkbox">
                     <input type="checkbox" id="tie-sepia">
-                    <label for="tie-sepia">Sepia</label>
+                    <label for="tie-sepia">${locale.localize('Sepia')}</label>
                 </div>
                 <div class="tui-image-editor-checkbox">
                     <input type="checkbox" id="tie-sepia2">
-                    <label for="tie-sepia2">Sepia2</label>
+                    <label for="tie-sepia2">${locale.localize('Sepia2')}</label>
                 </div>
                 <div class="tui-image-editor-checkbox">
                     <input type="checkbox" id="tie-blur">
-                    <label for="tie-blur">Blur</label>
+                    <label for="tie-blur">${locale.localize('Blur')}</label>
                 </div>
                 <div class="tui-image-editor-checkbox">
                     <input type="checkbox" id="tie-sharpen">
-                    <label for="tie-sharpen">Sharpen</label>
+                    <label for="tie-sharpen">${locale.localize('Sharpen')}</label>
                 </div>
                 <div class="tui-image-editor-checkbox">
                     <input type="checkbox" id="tie-emboss">
-                    <label for="tie-emboss">Emboss</label>
+                    <label for="tie-emboss">${locale.localize('Emboss')}</label>
                 </div>
@@ -44,11 +48,11 @@ </div>
                         <input type="checkbox" id="tie-remove-white">
-                        <label for="tie-remove-white">Remove White</label>
+                        <label for="tie-remove-white">${locale.localize('Remove White')}</label>
                     </div>
                 </div>
                 <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
-                    <label>Threshold</label>
+                    <label>${locale.localize('Threshold')}</label>
                     <div id="tie-removewhite-threshold-range"></div>
                 </div>
                 <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
-                    <label>Distance</label>
+                    <label>${locale.localize('Distance')}</label>
                     <div id="tie-removewhite-distance-range"></div>
@@ -61,7 +65,7 @@ </div>
                         <input type="checkbox" id="tie-gradient-transparency">
-                        <label for="tie-gradient-transparency">Grayscale</label>
+                        <label for="tie-gradient-transparency">${locale.localize('Grayscale')}</label>
                     </div>
                 </div>
                 <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
-                    <label>Value</label>
+                    <label>${locale.localize('Value')}</label>
                     <div id="tie-gradient-transparency-range"></div>
@@ -78,3 +82,3 @@ </div>
                     <input type="checkbox" id="tie-brightness">
-                    <label for="tie-brightness">Brightness</label>
+                    <label for="tie-brightness">${locale.localize('Brightness')}</label>
                 </div>
@@ -88,3 +92,3 @@ <div class="tui-image-editor-range-wrap short">
                     <input type="checkbox" id="tie-noise">
-                    <label for="tie-noise">Noise</label>
+                    <label for="tie-noise">${locale.localize('Noise')}</label>
                 </div>
@@ -99,3 +103,3 @@ <div class="tui-image-editor-range-wrap short">
                     <input type="checkbox" id="tie-pixelate">
-                    <label for="tie-pixelate">Pixelate</label>
+                    <label for="tie-pixelate">${locale.localize('Pixelate')}</label>
                 </div>
@@ -110,7 +114,7 @@ <div class="tui-image-editor-range-wrap short">
                         <input type="checkbox" id="tie-color-filter">
-                        <label for="tie-color-filter">Color Filter</label>
+                        <label for="tie-color-filter">${locale.localize('Color Filter')}</label>
                     </div>
                 </div>
                 <div class="tui-image-editor-newline tui-image-editor-range-wrap short">
-                    <label>Threshold</label>
+                    <label>${locale.localize('Threshold')}</label>
                     <div id="tie-colorfilter-threshole-range"></div>
@@ -125,3 +129,3 @@ </div>
             <div class="filter-color-item">
-                <div id="tie-filter-tint-color" title="Tint"></div>
+                <div id="tie-filter-tint-color" title="${locale.localize('Tint')}"></div>
                 <div class="tui-image-editor-checkbox">
@@ -133,3 +137,3 @@ <input type="checkbox" id="tie-tint">
             <div class="filter-color-item">
-                <div id="tie-filter-multiply-color" title="Multiply"></div>
+                <div id="tie-filter-multiply-color" title="${locale.localize('Multiply')}"></div>
                 <div class="tui-image-editor-checkbox">
@@ -141,3 +145,3 @@ <input type="checkbox" id="tie-multiply">
             <div class="filter-color-item">
-                <div id="tie-filter-blend-color" title="Blend"></div>
+                <div id="tie-filter-blend-color" title="${locale.localize('Blend')}"></div>
                 <div class="tui-image-editor-checkbox">
@@ -144,0 +148,0 @@ <input type="checkbox" id="tie-blend">

src/js/ui/template/submenu/flip.js

@@ -1,2 +0,8 @@
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul id="tie-flip-button" class="tui-image-editor-submenu-item">
@@ -12,3 +18,3 @@ <li>
                 <label>
-                    Flip X
+                    ${locale.localize('Flip X')}
                 </label>
@@ -24,3 +30,3 @@ </div>
                 <label>
-                    Flip Y
+                    ${locale.localize('Flip Y')}
                 </label>
@@ -43,3 +49,3 @@ </div>
                 <label>
-                    Reset
+                    ${locale.localize('Reset')}
                 </label>
@@ -46,0 +52,0 @@ </div>

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

@@ -1,2 +0,8 @@
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -14,3 +20,3 @@ <li id="tie-icon-add-button">
                 <label>
-                    Arrow
+                    ${locale.localize('Arrow')}
                 </label>
@@ -28,3 +34,3 @@ </div>
                 <label>
-                    Arrow-2
+                    ${locale.localize('Arrow-2')}
                 </label>
@@ -42,3 +48,3 @@ </div>
                 <label>
-                    Arrow-3
+                    ${locale.localize('Arrow-3')}
                 </label>
@@ -54,3 +60,3 @@ </div>
                 <label>
-                    Star-1
+                    ${locale.localize('Star-1')}
                 </label>
@@ -68,3 +74,3 @@ </div>
                 <label>
-                    Star-2
+                    ${locale.localize('Star-2')}
                 </label>
@@ -83,3 +89,3 @@ </div>
                 <label>
-                    Polygon
+                    ${locale.localize('Polygon')}
                 </label>
@@ -98,3 +104,3 @@ </div>
                 <label>
-                    Location
+                    ${locale.localize('Location')}
                 </label>
@@ -113,3 +119,3 @@ </div>
                 <label>
-                    Heart
+                    ${locale.localize('Heart')}
                 </label>
@@ -128,3 +134,3 @@ </div>
                 <label>
-                    Bubble
+                    ${locale.localize('Bubble')}
                 </label>
@@ -146,3 +152,3 @@ </div>
                 <label>
-                    Custom icon
+                    ${locale.localize('Custom icon')}
                 </label>
@@ -155,5 +161,5 @@ </div>
         <li>
-            <div id="tie-icon-color" title="Color"></div>
+            <div id="tie-icon-color" title="${locale.localize('Color')}"></div>
         </li>
     </ul>
 `);

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

@@ -1,2 +0,8 @@
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -12,3 +18,3 @@ <li>
                 </div>
-                <label> Load Mask Image </label>
+                <label> ${locale.localize('Load Mask Image')} </label>
             </div>
@@ -26,3 +32,3 @@ </li>
                 <label>
-                    Apply
+                    ${locale.localize('Apply')}
                 </label>
@@ -29,0 +35,0 @@ </div>

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

@@ -1,2 +0,8 @@
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -31,3 +37,3 @@ <li id="tie-retate-button">
         <li class="tui-image-editor-newline tui-image-editor-range-wrap">
-            <label class="range">Range</label>
+            <label class="range">${locale.localize('Range')}</label>
             <div id="tie-rotate-range"></div>
@@ -34,0 +40,0 @@ <input id="tie-ratate-range-value" class="tui-image-editor-range-value" value="0" />

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

@@ -1,2 +0,8 @@
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -13,3 +19,3 @@ <li id="tie-shape-button">
                 </div>
-                <label> Rectangle </label>
+                <label> ${locale.localize('Rectangle')} </label>
             </div>
@@ -25,3 +31,3 @@ <div class="tui-image-editor-button circle">
                 </div>
-                <label> Circle </label>
+                <label> ${locale.localize('Circle')} </label>
             </div>
@@ -37,3 +43,3 @@ <div class="tui-image-editor-button triangle">
                 </div>
-                <label> Triangle </label>
+                <label> ${locale.localize('Triangle')} </label>
             </div>
@@ -45,4 +51,4 @@ </li>
         <li id="tie-shape-color-button">
-            <div id="tie-color-fill" title="Fill"></div>
-            <div id="tie-color-stroke" title="Stroke"></div>
+            <div id="tie-color-fill" title="${locale.localize('Fill')}"></div>
+            <div id="tie-color-stroke" title="${locale.localize('Stroke')}"></div>
         </li>
@@ -53,3 +59,3 @@ <li class="tui-image-editor-partition only-left-right">
         <li class="tui-image-editor-newline tui-image-editor-range-wrap">
-            <label class="range">Stroke</label>
+            <label class="range">${locale.localize('Stroke')}</label>
             <div id="tie-stroke-range"></div>
@@ -56,0 +62,0 @@ <input id="tie-stroke-range-value" class="tui-image-editor-range-value" value="0" />

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

@@ -1,2 +0,8 @@
-export default ({iconStyle: {normal, active}}) => (`
+/**
+ * @param {Locale} locale - Translate text
+ * @param {Object} normal - iconStyle
+ * @param {Object} active - iconStyle
+ * @returns {string}
+ */
+export default ({locale, iconStyle: {normal, active}}) => (`
     <ul class="tui-image-editor-submenu-item">
@@ -11,3 +17,3 @@ <li id="tie-text-effect-button">
                 </div>
-                <label> Bold </label>
+                <label> ${locale.localize('Bold')} </label>
             </div>
@@ -21,3 +27,3 @@ <div class="tui-image-editor-button italic">
                 </div>
-                <label> Italic </label>
+                <label> ${locale.localize('Italic')} </label>
             </div>
@@ -33,3 +39,3 @@ <div class="tui-image-editor-button underline">
                 </div>
-                <label> Underline </label>
+                <label> ${locale.localize('Underline')} </label>
             </div>
@@ -50,3 +56,3 @@ </li>
                 </div>
-                <label> Left </label>
+                <label> ${locale.localize('Left')} </label>
             </div>
@@ -62,3 +68,3 @@ <div class="tui-image-editor-button center">
                 </div>
-                <label> Center </label>
+                <label> ${locale.localize('Center')} </label>
             </div>
@@ -74,3 +80,3 @@ <div class="tui-image-editor-button right">
                 </div>
-                <label> Right </label>
+                <label> ${locale.localize('Right')} </label>
             </div>
@@ -82,3 +88,3 @@ </li>
         <li>
-            <div id="tie-text-color" title="Color"></div>
+            <div id="tie-text-color" title="${locale.localize('Color')}"></div>
         </li>
@@ -89,3 +95,3 @@ <li class="tui-image-editor-partition only-left-right">
         <li class="tui-image-editor-newline tui-image-editor-range-wrap">
-            <label class="range">Text size</label>
+            <label class="range">${locale.localize('Text size')}</label>
             <div id="tie-text-range"></div>
@@ -92,0 +98,0 @@ <input id="tie-text-range-value" class="tui-image-editor-range-value" value="0" />

src/js/ui/text.js

@@ -14,4 +14,5 @@ import Range from './tools/range';
 class Text extends Submenu {
-    constructor(subMenuElement, {iconStyle, menuBarPosition}) {
+    constructor(subMenuElement, {locale, iconStyle, menuBarPosition}) {
         super(subMenuElement, {
+            locale,
             name: 'text',
@@ -18,0 +19,0 @@ iconStyle,

src/js/util.js

@@ -10,2 +10,3 @@ /**
 module.exports = {
+
     /**
@@ -12,0 +13,0 @@ * Clamp value

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4750932

increased by0.74%

Number of package files

352

increased by1.73%

Lines of code

37941

increased by2.31%

Number of lines in readme file

346

increased by1.76%

Number of low supply chain risk alerts

4

decreased by-20%

Worsened metrics

Dev dependency count

40

increased by14.29%

No dependency changes