[DE] Add crop for images

apps/common/main/lib/component/Button.js

@@ -491,6 +491,7 @@ define([
                     if (isSplit) {
                         $('[data-toggle^=dropdown]', el).on('mousedown', _.bind(menuHandler, this));
                         $('button', el).on('mousedown', _.bind(onMouseDown, this));
+                        (me.options.width>0) && $('button:first', el).css('width', me.options.width - $('[data-toggle^=dropdown]', el).outerWidth());
                     }
 
                     el.on('hide.bs.dropdown', _.bind(doSplitSelect, me, false, 'arrow'));

apps/common/main/resources/less/buttons.less

@@ -408,7 +408,7 @@
         &.open {
             box-shadow: inset 0 0 0 1px @color-gray;
 
-            button:not(.active) {
+            button:not(.active):not(.btn-text-split-default) {
                 background-color: transparent;
             }
         }
@@ -570,6 +570,39 @@
     }
 }
 
+.btn-text-split-default {
+    width: 75px;
+    height: 22px;
+    background: @input-bg;
+    border: 1px solid @input-border;
+    .border-radius(@border-radius-small);
+
+    &.dropdown-toggle {
+        width: 13px;
+    }
+
+    &:not(.dropdown-toggle) {
+        border-right: none;
+    }
+
+    &:hover:not(.disabled),
+    .over:not(.disabled) {
+        background-color: @secondary !important;
+    }
+
+    &:active:not(.disabled),
+    &.active:not(.disabled) {
+        background-color: @primary !important;
+        border-color: @primary;
+        color: white;
+    }
+
+    &[disabled],
+    &.disabled {
+        opacity: 0.65;
+    }
+}
+
 .btn-icon-default {
     width: 45px;
     height: 22px;

apps/documenteditor/main/app/template/ImageSettings.template

@@ -22,6 +22,11 @@
             <button type="button" class="btn btn-text-default" id="image-button-fit-margins" style="width:100px;"><%= scope.textFitMargins %></button>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-button-crop" style="width: 100px;"></div>
+        </td>
+    </tr>
     <tr>
         <td class="padding-small" colspan=2>
             <div class="separator horizontal"></div>

apps/documenteditor/main/app/view/ImageSettings.js

@@ -95,8 +95,10 @@ define([
 
         setApi: function(api) {
             this.api = api;
-            if (this.api)
+            if (this.api) {
                 this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this));
+                this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
+            }
             return this;
         },
 
@@ -226,11 +228,64 @@ define([
             this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
             this.lockedControls.push(this.btnFlipH);
 
+            this.btnCrop = new Common.UI.Button({
+                cls: 'btn-text-split-default',
+                caption: 'Crop',
+                split: true,
+                enableToggle: true,
+                allowDepress: true,
+                width: 100,
+                menu        : new Common.UI.Menu({
+                    style       : 'min-width: 100px;',
+                    items: [
+                        {
+                            caption: 'Crop',
+                            checkable: true,
+                            allowDepress: true,
+                            value: 0
+                        },
+                        {
+                            caption: 'Fill',
+                            value: 1
+                        },
+                        {
+                            caption: 'Fit',
+                            value: 2
+                        }]
+                })
+            });
+            this.btnCrop.render( $('#image-button-crop')) ;
+            this.btnCrop.on('click', _.bind(this.onCrop, this));
+            this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
+            this.lockedControls.push(this.btnCrop);
+
             this.linkAdvanced = $('#image-advanced-link');
             this.lblReplace = $('#image-lbl-replace');
             $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
-        
+
+        onCrop: function(btn, e) {
+            btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
+            this.fireEvent('editcomplete', this);
+        },
+
+        onCropMenu: function(menu, item) {
+            if (item.value == 1) {
+                this.api.asc_cropFill();
+            } else if (item.value == 2) {
+                this.api.asc_cropFit();
+            } else {
+                item.checked ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
+            }
+
+            this.fireEvent('editcomplete', this);
+        },
+
+        _changeCropState: function(state) {
+            this.btnCrop.toggle(state, true);
+            this.btnCrop.menu.items[0].setChecked(state, true);
+        },
+
         createDelayedElements: function() {
             this.createDelayedControls();
             this.updateMetricUnit();