[PE][SSE] Add crop for images

apps/presentationeditor/main/app/template/ImageSettings.template

@@ -17,6 +17,11 @@
             <button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></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/presentationeditor/main/app/view/ImageSettings.js

@@ -93,6 +93,9 @@ define([
 
         setApi: function(api) {
             this.api = api;
+            if (this.api) {
+                this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
+            }
             return this;
         },
 
@@ -139,6 +142,37 @@ define([
                 this.fireEvent('editcomplete', this);
             }, this));
 
+            this.btnCrop = new Common.UI.Button({
+                cls: 'btn-text-split-default',
+                caption: this.textCrop,
+                split: true,
+                enableToggle: true,
+                allowDepress: true,
+                width: 100,
+                menu        : new Common.UI.Menu({
+                    style       : 'min-width: 100px;',
+                    items: [
+                        {
+                            caption: this.textCrop,
+                            checkable: true,
+                            allowDepress: true,
+                            value: 0
+                        },
+                        {
+                            caption: this.textCropFill,
+                            value: 1
+                        },
+                        {
+                            caption: this.textCropFit,
+                            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.btnRotate270 = new Common.UI.Button({
                 cls: 'btn-toolbar',
                 iconCls: 'rotate-270',
@@ -312,6 +346,31 @@ define([
             }
         },
 
+        _changeCropState: function(state) {
+            this.btnCrop.toggle(state, true);
+            this.btnCrop.menu.items[0].setChecked(state, true);
+        },
+
+        onCrop: function(btn, e) {
+            if (this.api) {
+                btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
+        onCropMenu: function(menu, item) {
+            if (this.api) {
+                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);
+        },
+
         onBtnRotateClick: function(btn) {
             var properties = new Asc.asc_CImgProperty();
             properties.asc_putRotAdd((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
@@ -343,6 +402,7 @@ define([
                 });
                 this.linkAdvanced.toggleClass('disabled', disable);
             }
+            this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop());
         },
 
         textSize:       'Size',
@@ -361,7 +421,10 @@ define([
         textHint270: 'Rotate 90° Counterclockwise',
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
-        textHintFlipH: 'Flip Horizontally'
+        textHintFlipH: 'Flip Horizontally',
+        textCrop: 'Crop',
+        textCropFill: 'Fill',
+        textCropFit: 'Fit'
 
     }, PE.Views.ImageSettings || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1240,6 +1240,9 @@
   "PE.Views.ImageSettings.textRotation": "Rotation",
   "PE.Views.ImageSettings.textSize": "Size",
   "PE.Views.ImageSettings.textWidth": "Width",
+  "PE.Views.ImageSettings.textCrop": "Crop",
+  "PE.Views.ImageSettings.textCropFill": "Fill",
+  "PE.Views.ImageSettings.textCropFit": "Fit",
   "PE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel",
   "PE.Views.ImageSettingsAdvanced.okButtonText": "OK",
   "PE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",

apps/spreadsheeteditor/main/app/template/ImageSettings.template

@@ -24,6 +24,11 @@
             <button type="button" class="btn btn-text-default" id="image-button-original-size" style="width:100px;"><%= scope.textOriginalSize %></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/spreadsheeteditor/main/app/view/ImageSettings.js

@@ -97,6 +97,9 @@ define([
         setApi: function(api) {
             if ( api == undefined ) return;
             this.api = api;
+            if (this.api) {
+                this.api.asc_registerCallback('asc_ChangeCropState', _.bind(this._changeCropState, this));
+            }
             return this;
         },
 
@@ -195,6 +198,37 @@ define([
 
             this.lblReplace = $('#image-lbl-replace');
 
+            this.btnCrop = new Common.UI.Button({
+                cls: 'btn-text-split-default',
+                caption: this.textCrop,
+                split: true,
+                enableToggle: true,
+                allowDepress: true,
+                width: 100,
+                menu        : new Common.UI.Menu({
+                    style       : 'min-width: 100px;',
+                    items: [
+                        {
+                            caption: this.textCrop,
+                            checkable: true,
+                            allowDepress: true,
+                            value: 0
+                        },
+                        {
+                            caption: this.textCropFill,
+                            value: 1
+                        },
+                        {
+                            caption: this.textCropFit,
+                            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.btnRotate270 = new Common.UI.Button({
                 cls: 'btn-toolbar',
                 iconCls: 'rotate-270',
@@ -410,6 +444,31 @@ define([
             })).show();
         },
 
+        _changeCropState: function(state) {
+            this.btnCrop.toggle(state, true);
+            this.btnCrop.menu.items[0].setChecked(state, true);
+        },
+
+        onCrop: function(btn, e) {
+            if (this.api) {
+                btn.pressed ? this.api.asc_startEditCrop() : this.api.asc_endEditCrop();
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
+        onCropMenu: function(menu, item) {
+            if (this.api) {
+                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);
+        },
+
         onBtnRotateClick: function(btn) {
             var properties = new Asc.asc_CImgProperty();
             properties.asc_putRotAdd((btn.options.value==1 ? 90 : 270) * 3.14159265358979 / 180);
@@ -441,6 +500,7 @@ define([
                 });
                 this.linkAdvanced.toggleClass('disabled', disable);
             }
+            this.btnCrop.setDisabled(disable || !this.api.asc_canEditCrop());
         },
 
         textKeepRatio: 'Constant Proportions',
@@ -460,6 +520,9 @@ define([
         textHint270: 'Rotate 90° Counterclockwise',
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
-        textHintFlipH: 'Flip Horizontally'
+        textHintFlipH: 'Flip Horizontally',
+        textCrop: 'Crop',
+        textCropFill: 'Fill',
+        textCropFit: 'Fit'
     }, SSE.Views.ImageSettings || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1605,6 +1605,9 @@
   "SSE.Views.ImageSettings.textRotation": "Rotation",
   "SSE.Views.ImageSettings.textSize": "Size",
   "SSE.Views.ImageSettings.textWidth": "Width",
+  "SSE.Views.ImageSettings.textCrop": "Crop",
+  "SSE.Views.ImageSettings.textCropFill": "Fill",
+  "SSE.Views.ImageSettings.textCropFit": "Fit",
   "SSE.Views.ImageSettingsAdvanced.cancelButtonText": "Cancel",
   "SSE.Views.ImageSettingsAdvanced.okButtonText": "Ok",
   "SSE.Views.ImageSettingsAdvanced.textAlt": "Alternative Text",