feat: default value for ui-tools (nhn#258)

override default values for "draw", "shape", "icon" and "text" when used with UI

src/js/ui.js

@@ -222,13 +222,16 @@ class Ui {
  // menu btn element
  this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);
 
+ // options per menu item
+ const options = this.options[menuName] || {};
+
  // submenu ui instance
  this[menuName] = new SubComponentClass(this._subMenuElement, {
  locale: this._locale,
  makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),
  menuBarPosition: this.options.menuBarPosition,
  usageStatistics: this.options.usageStatistics
- });
+ }, options);
  });
  }
 

src/js/ui/draw.js

@@ -4,6 +4,7 @@ import Range from './tools/range';
 import Submenu from './submenuBase';
 import templateHtml from './template/submenu/draw';
 import {defaultDrawRangeValus} from '../consts';
+import snippet from 'tui-code-snippet';
 const DRAW_OPACITY = 0.7;
 
 /**
@@ -12,7 +13,7 @@ const DRAW_OPACITY = 0.7;
  * @ignore
  */
 class Draw extends Submenu {
- constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}, options) {
  super(subMenuElement, {
  locale,
  name: 'draw',
@@ -25,17 +26,18 @@ class Draw extends Submenu {
  this._els = {
  lineSelectButton: this.selector('.tie-draw-line-select-button'),
  drawColorPicker: new Colorpicker(
- this.selector('.tie-draw-color'), '#00a9ff', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-draw-color'), options.color || '#00a9ff', this.toggleDirection, this.usageStatistics
  ),
  drawRange: new Range({
  slider: this.selector('.tie-draw-range'),
  input: this.selector('.tie-draw-range-value')
- }, defaultDrawRangeValus)
+ }, snippet.extend(defaultDrawRangeValus, options.range))
  };
 
  this.type = null;
  this.color = this._els.drawColorPicker.color;
  this.width = this._els.drawRange.value;
+ this.opacity = options.opacity || DRAW_OPACITY;
  }
 
  /**
@@ -79,7 +81,7 @@ class Draw extends Submenu {
  setDrawMode() {
  this.actions.setDrawMode(this.type, {
  width: this.width,
- color: getRgb(this.color, DRAW_OPACITY)
+ color: getRgb(this.color, this.opacity)
  });
  }
 

src/js/ui/icon.js

@@ -11,7 +11,7 @@ import {defaultIconPath} from '../consts';
  * @ignore
  */
 class Icon extends Submenu {
- constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}, options) {
  super(subMenuElement, {
  locale,
  name: 'icon',
@@ -28,7 +28,7 @@ class Icon extends Submenu {
  registrIconButton: this.selector('.tie-icon-image-file'),
  addIconButton: this.selector('.tie-icon-add-button'),
  iconColorpicker: new Colorpicker(
- this.selector('.tie-icon-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-icon-color'), options.color || '#ffbb3b', this.toggleDirection, this.usageStatistics
  )
  };
  }

src/js/ui/shape.js

@@ -4,6 +4,7 @@ import Submenu from './submenuBase';
 import templateHtml from './template/submenu/shape';
 import {toInteger, assignmentForDestroy} from '../util';
 import {defaultShapeStrokeValus} from '../consts';
+import snippet from 'tui-code-snippet';
 
 const SHAPE_DEFAULT_OPTION = {
  stroke: '#ffbb3b',
@@ -17,7 +18,7 @@ const SHAPE_DEFAULT_OPTION = {
  * @ignore
  */
 class Shape extends Submenu {
- constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}, options) {
  super(subMenuElement, {
  locale,
  name: 'shape',
@@ -27,7 +28,7 @@ class Shape extends Submenu {
  usageStatistics
  });
  this.type = null;
- this.options = SHAPE_DEFAULT_OPTION;
+ this.options = snippet.extend(SHAPE_DEFAULT_OPTION, options);
 
  this._els = {
  shapeSelectButton: this.selector('.tie-shape-button'),
@@ -40,7 +41,7 @@ class Shape extends Submenu {
  this.selector('.tie-color-fill'), '', this.toggleDirection, this.usageStatistics
  ),
  strokeColorpicker: new Colorpicker(
- this.selector('.tie-color-stroke'), '#ffbb3b', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-color-stroke'), options.stroke || '#ffbb3b', this.toggleDirection, this.usageStatistics
  )
  };
 

src/js/ui/text.js

@@ -4,14 +4,15 @@ import Colorpicker from './tools/colorpicker';
 import Submenu from './submenuBase';
 import templateHtml from './template/submenu/text';
 import {defaultTextRangeValus} from '../consts';
+import snippet from 'tui-code-snippet';
 
 /**
  * Crop ui class
  * @class
  * @ignore
  */
 export default class Text extends Submenu {
- constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}) {
+ constructor(subMenuElement, {locale, makeSvgIcon, menuBarPosition, usageStatistics}, options) {
  super(subMenuElement, {
  locale,
  name: 'text',
@@ -30,12 +31,12 @@ export default class Text extends Submenu {
  textEffectButton: this.selector('.tie-text-effect-button'),
  textAlignButton: this.selector('.tie-text-align-button'),
  textColorpicker: new Colorpicker(
- this.selector('.tie-text-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics
+ this.selector('.tie-text-color'), options.color || '#ffbb3b', this.toggleDirection, this.usageStatistics
  ),
  textRange: new Range({
  slider: this.selector('.tie-text-range'),
  input: this.selector('.tie-text-range-value')
- }, defaultTextRangeValus)
+ }, snippet.extend(defaultTextRangeValus, options.range))
  };
  }