chore: document for svg icon setting

README.md

@@ -29,6 +29,8 @@
 * [Usage](#-usage)
  * [HTML](#html)
  * [JavaScript](#javascript)
+ * [Menu svg icon setting](#menu-svg-icon-setting)
+ * [TypeScript](#-typescript)
 * [Development](#-development)
  * [Setup](#setup)
  * [Run webpack-dev-server](#run-webpack-dev-server)
@@ -293,6 +295,15 @@ var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
 });
 ```
 
+### Menu svg icon setting
+
+#### There are two ways to set icons.
+
+1. **Use default svg built** into imageEditor without setting svg file path (Features added since version v3.9.0).
+2. There is a way to use the **actual physical svg file** and **set the file location manually**.
+
+Can find more details in [this document](https://github.com/nhn/tui.image-editor/blob/master/docs/Basic-Tutorial.md#4-menu-submenu-svg-icon-setting).
+
 ### TypeScript
 If you using TypeScript, You must `import module = require('module')` on importing.
 [`export =` and `import = require()`](https://www.typescriptlang.org/docs/handbook/modules.html#export--and-import--require)

docs/Basic-Tutorial.md

@@ -39,7 +39,87 @@ imageEditor.loadImageFromURL('img/sampleImage.jpg', 'My sample image')
 
 <br>
 
-### 4. Localization
+### 4. Menu, Submenu svg icon setting
+
+In the image below, the red and blue areas are set using the svg icon.
+
+![svgIcon](https://user-images.githubusercontent.com/35218826/75416627-1ca5e780-5972-11ea-9a55-b179686536de.png)
+
+#### Two ways to set the icon
+
+1. **Use default svg built** into imageEditor without setting svg file path (Features added since version v3.9.0).
+ * This is the default setting for Image Editor.
+ * It's easy to change the color to match the icon state as shown below, but it uses the built-in default shape so you can't change the icon's appearance.
+ ```js
+ var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+ includeUI: {
+ ...
+ theme: {
+ 'menu.normalIcon.color': '#8a8a8a',
+ 'menu.activeIcon.color': '#555555',
+ 'menu.disabledIcon.color': '#434343',
+ 'menu.hoverIcon.color': '#e9e9e9',
+ 'submenu.normalIcon.color': '#8a8a8a',
+ 'submenu.activeIcon.color': '#e9e9e9',
+ }
+ ...
+ });
+ ```
+
+2. There is a way to use the **actual physical svg file** and **set the file location manually**.
+ * This is used when you want to completely reconfigure the svg icon itself rather than the built-in icon.
+ * The disadvantage is that the color must be set by modifying the svg file directly.
+ * Need to set the path and name for each icon state as shown below.
+ ```js
+ var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
+ includeUI: {
+ ...
+ theme: {
+ 'menu.normalIcon.path': '../dist/svg/icon-d.svg',
+ 'menu.normalIcon.name': 'icon-d',
+ 'menu.activeIcon.path': '../dist/svg/icon-b.svg',
+ 'menu.activeIcon.name': 'icon-b',
+ 'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
+ 'menu.disabledIcon.name': 'icon-a',
+ 'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
+ 'menu.hoverIcon.name': 'icon-c',
+ 'submenu.normalIcon.path': '../dist/svg/icon-a.svg',
+ 'submenu.normalIcon.name': 'icon-a',
+ 'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
+ 'submenu.activeIcon.name': 'icon-c'
+ }
+ ...
+ });
+ ```
+ * How to get svg file sample
+ * In the project folder where `tui-image-editor` is installed, the file is in the path described below
+ ```bash
+ // or use cdn (https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg)
+ $ cd node_modules/tui-image-editor/dist/svg
+ ```
+ * Or just get the file via cdn.
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-a.svg
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-b.svg
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-c.svg
+ * https://uicdn.toast.com/tui-image-editor/latest/svg/icon-d.svg
+
+
+ * Don't forget to use the icon name setting of the `includeUI.theme` option to match the $ {iconName} part of the file.
+ ```svg
+ icon-a.svg file
+ submenu.activeIcon.name <-> iconName
+ ...
+ <symbol id="${iconName}-ic-apply" viewBox="0 0 24 24">
+ <g fill="none" fill-rule="evenodd">
+ <path d="M0 0h24v24H0z"/>
+ <path stroke="#434343" d="M4 12.011l5 5L20.011 6"/>
+ </g>
+ </symbol>
+ ...
+ ```
+
+
+### 5. Localization
 ImageEditor provide feature to customize all of inscriptions. Look at example.
 
 ```js

examples/js/theme/black-theme.js

@@ -26,29 +26,23 @@ var blackTheme = {
  'downloadButton.fontSize': '12px',
 
  // main icons
- 'menu.normalIcon.path': '../dist/svg/icon-d.svg',
- 'menu.normalIcon.name': 'icon-d',
- 'menu.activeIcon.path': '../dist/svg/icon-b.svg',
- 'menu.activeIcon.name': 'icon-b',
- 'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
- 'menu.disabledIcon.name': 'icon-a',
- 'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
- 'menu.hoverIcon.name': 'icon-c',
+ 'menu.normalIcon.color': '#8a8a8a',
+ 'menu.activeIcon.color': '#555555',
+ 'menu.disabledIcon.color': '#434343',
+ 'menu.hoverIcon.color': '#e9e9e9',
  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
 
- // submenu primary color
- 'submenu.backgroundColor': '#1e1e1e',
- 'submenu.partition.color': '#3c3c3c',
-
  // submenu icons
- 'submenu.normalIcon.path': '../dist/svg/icon-d.svg',
- 'submenu.normalIcon.name': 'icon-d',
- 'submenu.activeIcon.path': '../dist/svg/icon-c.svg',
- 'submenu.activeIcon.name': 'icon-c',
+ 'submenu.normalIcon.color': '#8a8a8a',
+ 'submenu.activeIcon.color': '#e9e9e9',
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',
 
+ // submenu primary color
+ 'submenu.backgroundColor': '#1e1e1e',
+ 'submenu.partition.color': '#3c3c3c',
+
  // submenu labels
  'submenu.normalLabel.color': '#8a8a8a',
  'submenu.normalLabel.fontWeight': 'lighter',

examples/js/theme/white-theme.js

@@ -26,29 +26,23 @@ var whiteTheme = {
  'downloadButton.fontSize': '12px',
 
  // main icons
- 'menu.normalIcon.path': '../dist/svg/icon-d.svg',
- 'menu.normalIcon.name': 'icon-d',
- 'menu.activeIcon.path': '../dist/svg/icon-b.svg',
- 'menu.activeIcon.name': 'icon-b',
- 'menu.disabledIcon.path': '../dist/svg/icon-a.svg',
- 'menu.disabledIcon.name': 'icon-a',
- 'menu.hoverIcon.path': '../dist/svg/icon-c.svg',
- 'menu.hoverIcon.name': 'icon-c',
+ 'menu.normalIcon.color': '#8a8a8a',
+ 'menu.activeIcon.color': '#555555',
+ 'menu.disabledIcon.color': '#434343',
+ 'menu.hoverIcon.color': '#e9e9e9',
  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
 
- // submenu primary color
- 'submenu.backgroundColor': 'transparent',
- 'submenu.partition.color': '#e5e5e5',
-
  // submenu icons
- 'submenu.normalIcon.path': '../dist/svg/icon-d.svg',
- 'submenu.normalIcon.name': 'icon-d',
- 'submenu.activeIcon.path': '../dist/svg/icon-b.svg',
- 'submenu.activeIcon.name': 'icon-b',
+ 'submenu.normalIcon.color': '#8a8a8a',
+ 'submenu.activeIcon.color': '#555555',
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',
 
+ // submenu primary color
+ 'submenu.backgroundColor': 'transparent',
+ 'submenu.partition.color': '#e5e5e5',
+
  // submenu labels
  'submenu.normalLabel.color': '#858585',
  'submenu.normalLabel.fontWeight': 'normal',

karma.conf.js

@@ -158,6 +158,9 @@ module.exports = function(config) {
  }, {
  test: /\.styl$/,
  use: ['css-loader', 'stylus-loader']
+ }, {
+ test: /\.svg$/,
+ loader: 'svg-inline-loader'
  }
  ]
  }

package.json

@@ -63,6 +63,7 @@
  "stylus": "^0.54.5",
  "stylus-loader": "^3.0.2",
  "svgstore": "^2.0.3",
+ "svg-inline-loader": "^0.8.2",
  "tslint": "^5.12.0",
  "tui-jsdoc-template": "^1.0.4",
  "typescript": "^3.2.2",

src/css/icon.styl

@@ -3,6 +3,7 @@
  .tie-icon-add-button .{prefix}-button
  min-width: 42px;
  .svg_ic-menu
+ .svg_ic-helpmenu
  width: 24px;
  height: 24px;
  .svg_ic-submenu
@@ -29,5 +30,11 @@
  .active svg > use.normal,
  .enabled svg > use.normal
  display: none;
+ .help svg > use.disabled,
+ .help.enabled svg > use.normal
+ display: block;
+ .help.enabled svg > use.disabled
+ display: none;
+
  .{prefix}-controls:hover
  z-index: 3;

src/js/ui.js

@@ -220,12 +220,12 @@ class Ui {
  this._makeMenuElement(menuName);
 
  // menu btn element
- this._buttonElements[menuName] = this._menuElement.querySelector(`#tie-btn-${menuName}`);
+ this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
 
  // submenu ui instance
  this[menuName] = new SubComponentClass(this._subMenuElement, {
  locale: this._locale,
- iconStyle: this.theme.getStyle('submenu.icon'),
+ svgIconMaker: this.theme.makeMenSvgIconSet.bind(this.theme),
  menuBarPosition: this.options.menuBarPosition,
  usageStatistics: this.options.usageStatistics
  });
@@ -253,7 +253,6 @@ class Ui {
  selectedElement.innerHTML = controls({
  locale: this._locale,
  biImage: this.theme.getStyle('common.bi'),
- iconStyle: this.theme.getStyle('menu.icon'),
  loadButtonStyle: this.theme.getStyle('loadButton'),
  downloadButtonStyle: this.theme.getStyle('downloadButton')
  }) +
@@ -275,48 +274,62 @@ class Ui {
  this._editorElement = selector('.tui-image-editor');
  this._menuElement = selector('.tui-image-editor-menu');
  this._subMenuElement = selector('.tui-image-editor-submenu');
-
  this._buttonElements = {
- 'undo': this._menuElement.querySelector('.tie-btn-undo'),
- 'redo': this._menuElement.querySelector('.tie-btn-redo'),
- 'reset': this._menuElement.querySelector('.tie-btn-reset'),
- 'delete': this._menuElement.querySelector('.tie-btn-delete'),
- 'deleteAll': this._menuElement.querySelector('.tie-btn-delete-all'),
  'download': this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'),
  'load': this._selectedElement.querySelectorAll('.tui-image-editor-load-btn')
  };
- this._makeHelpMenuTooltip();
+
+ this._addHelpMenus();
  }
 
  /**
- * Make tooltip for help menus
+ * Add help menu
  * @private
  */
- _makeHelpMenuTooltip() {
- snippet.forEach(HELP_MENUS, menuName => {
- this._addTooltipAttribute(this._buttonElements[menuName], menuName);
+ _addHelpMenus() {
+ const helpMenuWithPartition = [...HELP_MENUS.slice(0, 3), '', ...HELP_MENUS.slice(3), ''];
+
+ snippet.forEach(helpMenuWithPartition, menuName => {
+ if (!menuName) {
+ this._makeMenuPartitionElement();
+
+ return;
+ }
+
+ this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');
+ if (menuName) {
+ this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
+ }
  });
  }
 
  /**
- * Make menu ui dom element
+ * Make menu partition element
+ * @private
+ */
+ _makeMenuPartitionElement() {
+ const partitionElement = document.createElement('li');
+ const partitionInnerElement = document.createElement('div');
+ partitionElement.className = 'tui-image-editor-item';
+ partitionInnerElement.className = 'tui-image-editor-icpartition';
+ partitionElement.appendChild(partitionInnerElement);
+
+ this._menuElement.appendChild(partitionElement);
+ }
+
+ /**
+ * Make menu button element
  * @param {string} menuName - menu name
+ * @param {Array} useIconTypes - Possible values are \['normal', 'active', 'hover', 'disabled'\]
+ * @param {string} menuType - 'normal' or 'help'
  * @private
  */
- _makeMenuElement(menuName) {
+ _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {
  const btnElement = document.createElement('li');
- const {normal, active, hover} = this.theme.getStyle('menu.icon');
- const menuItemHtml = `
- <svg class="svg_ic-menu">
- <use xlink:href="${normal.path}#${normal.name}-ic-${menuName}" class="normal"/>
- <use xlink:href="${active.path}#${active.name}-ic-${menuName}" class="active"/>
- <use xlink:href="${hover.path}#${hover.name}-ic-${menuName}" class="hover"/>
- </svg>
- `;
+ const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);
 
  this._addTooltipAttribute(btnElement, menuName);
- btnElement.id = `tie-btn-${menuName}`;
- btnElement.className = 'tui-image-editor-item normal';
+ btnElement.className = `tie-btn-${menuName} tui-image-editor-item ${menuType}`;
  btnElement.innerHTML = menuItemHtml;
 
  this._menuElement.appendChild(btnElement);

src/js/ui/crop.js

@@ -9,11 +9,11 @@ import templateHtml from './template/submenu/crop';
  * @ignore
  */
 class Crop extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'crop',
- iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics

src/js/ui/draw.js

@@ -12,11 +12,11 @@ const DRAW_OPACITY = 0.7;
  * @ignore
  */
 class Draw extends Submenu {
- constructor(subMenuElement, {locale, iconStyle, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, svgIconMaker, menuBarPosition, usageStatistics}) {
  super(subMenuElement, {
  locale,
  name: 'draw',
- iconStyle,
+ svgIconMaker,
  menuBarPosition,
  templateHtml,
  usageStatistics