fixed: submenu transition and mask apply hidden

examples/js/theme/black-theme.js

@@ -30,7 +30,7 @@ var blackTheme = {
  'menu.activeIcon.name': 'icon-a',
 
  // submenu primary color
- 'submenu.backgroundColor': 'transparent',
+ 'submenu.backgroundColor': '#1e1e1e',
  'submenu.partition.color': '#858585',
 
  // submenu icons

src/css/buttons.styl

@@ -1,84 +1,77 @@
 /* ICON BUTTON */
-.{prefix}-container
- #tie-icon-add-button
- &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active,
- &.icon-heart .{prefix}-button[data-icontype="icon-heart"] svg > use.active,
- &.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active,
- &.icon-polygon .{prefix}-button[data-icontype="icon-polygon"] svg > use.active,
- &.icon-star .{prefix}-button[data-icontype="icon-star"] svg > use.active,
- &.icon-arrow-3 .{prefix}-button[data-icontype="icon-arrow-3"] svg > use.active,
- &.icon-arrow-2 .{prefix}-button[data-icontype="icon-arrow-2"] svg > use.active,
- &.icon-arrow .{prefix}-button[data-icontype="icon-arrow"] svg > use.active,
- &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active
- display: block;
+#tie-icon-add-button
+ &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active,
+ &.icon-heart .{prefix}-button[data-icontype="icon-heart"] svg > use.active,
+ &.icon-location .{prefix}-button[data-icontype="icon-location"] svg > use.active,
+ &.icon-polygon .{prefix}-button[data-icontype="icon-polygon"] svg > use.active,
+ &.icon-star .{prefix}-button[data-icontype="icon-star"] svg > use.active,
+ &.icon-arrow-3 .{prefix}-button[data-icontype="icon-arrow-3"] svg > use.active,
+ &.icon-arrow-2 .{prefix}-button[data-icontype="icon-arrow-2"] svg > use.active,
+ &.icon-arrow .{prefix}-button[data-icontype="icon-arrow"] svg > use.active,
+ &.icon-bubble .{prefix}-button[data-icontype="icon-bubble"] svg > use.active
+ display: block;
 
 /* DRAW BUTTON */
-.{prefix}-container
- #tie-draw-line-select-button
- &.line .{prefix}-button.line svg > use.normal,
- &.free .{prefix}-button.free svg > use.normal
- display: none;
+#tie-draw-line-select-button
+ &.line .{prefix}-button.line svg > use.normal,
+ &.free .{prefix}-button.free svg > use.normal
+ display: none;
 
-  &.line .{prefix}-button.line svg > use.active,
-  &.free .{prefix}-button.free svg > use.active
-  display: block;
+ &.line .{prefix}-button.line svg > use.active,
+ &.free .{prefix}-button.free svg > use.active
+ display: block;
 
 /* FLIP BUTTON */
-.{prefix}-container
- #tie-flip-button
- &.resetFlip .{prefix}-button.resetFlip,
- &.flipX .{prefix}-button.flipX,
- &.flipY .{prefix}-button.flipY
- svg > use.normal
- display: none;
- svg > use.active
- display: block;
+#tie-flip-button
+ &.resetFlip .{prefix}-button.resetFlip,
+ &.flipX .{prefix}-button.flipX,
+ &.flipY .{prefix}-button.flipY
+ svg > use.normal
+ display: none;
+ svg > use.active
+ display: block;
 
 /* MASK BUTTON */
-.{prefix}-container
- #tie-mask-apply.apply.active .{prefix}-button.apply
- label
- color: #fff;
- svg > use.active
- display: block;
+#tie-mask-apply.apply.active .{prefix}-button.apply
+ label
+ color: #fff;
+ svg > use.active
+ display: block;
 
 /* CROP BUTTON */
-.{prefix}-container
- #tie-crop-button
- .{prefix}-button.apply
- margin-right: 24px;
- .{prefix}-button.apply.active svg > use.active
- display: block;
+#tie-crop-button
+ .{prefix}-button.apply
+ margin-right: 24px;
+ .{prefix}-button.apply.active svg > use.active
+ display: block;
 
 
 /* SHAPE BUTTON */
-.{prefix}-container
- #tie-shape-button
- &.rect .{prefix}-button.rect,
- &.circle .{prefix}-button.circle,
- &.triangle .{prefix}-button.triangle 
- svg > use.normal
- display: none;
- svg > use.active
- display: block;
+#tie-shape-button
+ &.rect .{prefix}-button.rect,
+ &.circle .{prefix}-button.circle,
+ &.triangle .{prefix}-button.triangle 
+ svg > use.normal
+ display: none;
+ svg > use.active
+ display: block;
 
 /* TEXT BUTTON */
-.{prefix}-container
- #tie-text-effect-button
- .{prefix}-button.active svg > use.active
- display: block;
- #tie-text-align-button
- &.left .{prefix}-button.left svg > use.active,
- &.center .{prefix}-button.center svg > use.active,
- &.right .{prefix}-button.right svg > use.active
- display: block;
- #tie-mask-image-file,
- #tie-icon-image-file
- opacity: 0;
- position: absolute;
- width: 100%;
- height: 100%;
- border: 1px solid green;
- cursor: inherit;
- left: 0;
- top: 0;
+#tie-text-effect-button
+ .{prefix}-button.active svg > use.active
+ display: block;
+#tie-text-align-button
+ &.left .{prefix}-button.left svg > use.active,
+ &.center .{prefix}-button.center svg > use.active,
+ &.right .{prefix}-button.right svg > use.active
+ display: block;
+#tie-mask-image-file,
+#tie-icon-image-file
+ opacity: 0;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border: 1px solid green;
+ cursor: inherit;
+ left: 0;
+ top: 0;

src/css/main.styl

@@ -93,10 +93,10 @@ body > textarea
  bottom: 150px;
  width: 100%;
  overflow: auto;
+ transition: all .3s ease;
  .
- position: absolute;
+ position: static;
  display: inline-block;
- transition: all .3s ease;
 
 
 /* BIG MENU */

src/css/submenu.styl

@@ -64,4 +64,16 @@
  .{prefix}-main.tui-image-editor-menu-icon .{prefix}-submenu > div.tui-image-editor-menu-icon,
  .{prefix}-main.tui-image-editor-menu-draw .{prefix}-submenu > div.tui-image-editor-menu-draw,
  .{prefix}-main.tui-image-editor-menu-filter .{prefix}-submenu > div.tui-image-editor-menu-filter
- display: table-cell;
+ display: table-cell;
+ .{prefix}-main.tui-image-editor-menu-crop,
+ .{prefix}-main.tui-image-editor-menu-flip,
+ .{prefix}-main.tui-image-editor-menu-rotate,
+ .{prefix}-main.tui-image-editor-menu-shape,
+ .{prefix}-main.tui-image-editor-menu-text,
+ .{prefix}-main.tui-image-editor-menu-mask,
+ .{prefix}-main.tui-image-editor-menu-icon,
+ .{prefix}-main.tui-image-editor-menu-draw,
+ .{prefix}-main.tui-image-editor-menu-filter
+ .{prefix}-submenu
+ display: table;
+

src/js/action.js

@@ -437,9 +437,15 @@ export default {
  if (obj.type === 'i-text') {
  this.ui.text.fontSize = util.toInteger(obj.fontSize);
  } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) >= 0) {
- this.ui.shape._els.strokeRange.max = Math.min(obj.width, obj.height) - 1;
- this.ui.shape.setMaxStrokeValue(obj);
- // here job remaining
+ const {width, height} = obj;
+ const strokeValue = this.ui.shape.getStrokeValue();
+
+ if (width < strokeValue) {
+ this.ui.shape.setStrokeValue(width);
+ }
+ if (height < strokeValue) {
+ this.ui.shape.setStrokeValue(height);
+ }
  }
  },
  selectionCleared: () => {

src/js/consts.js

@@ -163,7 +163,7 @@ module.exports = {
  },
 
  defaultShapeStrokeValus: {
- realTimeEvent: true,
+ realTimeEvent: false,
  min: 2,
  max: 300,
  value: 3

src/js/ui.js

@@ -128,14 +128,6 @@ export default class Ui {
  this._editorElementWrap.style.top = `${top}px`;
  this._editorElementWrap.style.left = `${left}px`;
  this._editorElementWrap.style.width = `calc(100% - ${right}px)`;
-
- const {offsetWidth, offsetHeight} = this._editorElementWrap;
-
- const editortop = (offsetHeight > height) ? (offsetHeight - height) / 2 : 0;
- const editorleft = (offsetWidth - width) / 2;
-
- this._editorElement.style.top = `${editortop}px`;
- this._editorElement.style.left = `${editorleft}px`;
  }
 
  /**
@@ -460,7 +452,6 @@ export default class Ui {
  this[this.submenu].changeStartMode();
  }
 
- this._subMenuElement.style.display = this.submenu ? 'table' : 'none';
  this.resizeEditor();
  }
 

src/js/ui/shape.js

@@ -92,6 +92,15 @@ export default class Shape extends Submenu {
  this._els.strokeRange.max = strokeMaxValue;
  }
 
+ getStrokeValue() {
+ return this._els.strokeRange.value;
+ }
+
+ setStrokeValue(value) {
+ this._els.strokeRange.value = value;
+ this._els.strokeRange.trigger('change');
+ }
+
  /**
  * Change icon color
  * @param {object} event - add button event object

src/js/ui/template/mainContainer.js

@@ -18,7 +18,11 @@ export default ({biImage, commonStyle, headerStyle, loadButtonStyle, downloadBut
  <div class="tui-image-editor-submenu" style="${submenuStyle}">
  </div>
  <div class="tui-image-editor-wrap">
- <div class="tui-image-editor"></div>
+ <div style="display: table;vertical-align: middle; width: 100%; height: 100%">
+ <div style="display: table-cell;vertical-align: middle;">
+ <div class="tui-image-editor"></div>
+ </div>
+ </div>
  </div>
  </div>
  </div>

src/js/ui/template/style.js

@@ -34,6 +34,7 @@ export default ({
  #tie-text-align-button.left .tui-image-editor-button.left label,
  #tie-text-align-button.center .tui-image-editor-button.center label,
  #tie-text-align-button.right .tui-image-editor-button.right label,
+ #tie-mask-apply.apply.active .tui-image-editor-button.apply label,
  .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,
  .tui-image-editor-container .tui-image-editor-checkbox input + label {
  ${subMenuLabelActive}

src/js/ui/tools/range.js

@@ -33,6 +33,10 @@ class Range {
  this.value = this._value;
  }
 
+ get max() {
+ return this._max;
+ }
+
  /**
  * Get range value
  * @returns {Number} range value