bug 53426

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

@@ -283,7 +283,6 @@ define([
             this.btnCrop.on('click', _.bind(this.onCrop, this));
             this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
             this.lockedControls.push(this.btnCrop);
-
             this.btnChangeShape= this.btnCrop.menu.items[1];
 
             this.btnSelectImage = new Common.UI.Button({
@@ -335,18 +334,19 @@ define([
             };
             me.btnChangeShape.menu.on('show:before', onShowBefore);
         },
+
         fillAutoShapes: function() {
             var me = this,
                 recents = Common.localStorage.getItem('de-recent-shapes');
             
              var menuitem = new Common.UI.MenuItem({
-                    template: _.template('<div id="id-img-change-shape-menu-<%= options.index %>" class="menu-insertshape"></div>'),
+                    template: _.template('<div id="id-img-change-shape-menu" class="menu-insertshape"></div>'),
                     index: 0
                 });
                 me.btnChangeShape.menu.addItem(menuitem);
 
                 var shapePicker = new Common.UI.DataViewShape({
-                    el: $('#id-img-change-shape-menu-' + 0),
+                    el: $('#id-img-change-shape-menu'),
                     itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
                     groups: me.application.getCollection('ShapeGroups'),
                     parentMenu: me.btnChangeShape.menu,
@@ -423,7 +423,6 @@ define([
                     this._state.isOleObject=value;
                 }
 
-
                 if (this._state.isOleObject) {
                     var plugin = DE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
                     this.btnEditObject.setDisabled(plugin===null || plugin ===undefined || this._locked);

apps/documenteditor/main/locale/en.json

@@ -1894,6 +1894,7 @@
   "DE.Views.ImageSettings.textCrop": "Crop",
   "DE.Views.ImageSettings.textCropFill": "Fill",
   "DE.Views.ImageSettings.textCropFit": "Fit",
+  "DE.Views.ImageSettings.textCropToShape": "Crop to shape",
   "DE.Views.ImageSettings.textEdit": "Edit",
   "DE.Views.ImageSettings.textEditObject": "Edit Object",
   "DE.Views.ImageSettings.textFitMargins": "Fit to Margin",
@@ -1908,6 +1909,7 @@
   "DE.Views.ImageSettings.textHintFlipV": "Flip Vertically",
   "DE.Views.ImageSettings.textInsert": "Replace Image",
   "DE.Views.ImageSettings.textOriginalSize": "Actual Size",
+  "DE.Views.ImageSettings.textRecentlyUsed": "Recently Used",
   "DE.Views.ImageSettings.textRotate90": "Rotate 90°",
   "DE.Views.ImageSettings.textRotation": "Rotation",
   "DE.Views.ImageSettings.textSize": "Size",

apps/presentationeditor/main/app/controller/RightMenu.js

@@ -70,7 +70,7 @@ define([
         },
 
         onRightMenuAfterRender: function(rightMenu) {
-            rightMenu.shapeSettings.application = rightMenu.textartSettings.application = this.getApplication();
+            rightMenu.imageSettings.application = rightMenu.shapeSettings.application = rightMenu.textartSettings.application = this.getApplication();
 
             this._settings = [];
             this._settings[Common.Utils.documentSettingsType.Paragraph] = {panelId: "id-paragraph-settings",  panel: rightMenu.paragraphSettings,btn: rightMenu.btnText,        hidden: 1, locked: false};

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

@@ -182,6 +182,15 @@ define([
                             checked: this._state.cropMode,
                             value: 0
                         },
+                        {
+                            caption:  this.textCropToShape,
+                            menu: new Common.UI.Menu({
+                                menuAlign: 'tl-tl',
+                                cls: 'menu-shapes menu-change-shape',
+                                items: []
+                            }),
+                            value: 3
+                        },
                         {
                             caption: this.textCropFill,
                             value: 1
@@ -198,6 +207,7 @@ define([
             this.btnCrop.on('click', _.bind(this.onCrop, this));
             this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
             this.lockedControls.push(this.btnCrop);
+            this.btnChangeShape= this.btnCrop.menu.items[1];
 
             this.btnRotate270 = new Common.UI.Button({
                 parentEl: $('#image-button-270', this.$el),
@@ -258,9 +268,49 @@ define([
         createDelayedElements: function() {
             this.createDelayedControls();
             this.updateMetricUnit();
+            this.onApiAutoShapes();
             this._initSettings = false;
         },
 
+        onApiAutoShapes: function() {
+            var me = this;
+            var onShowBefore = function(menu) {
+                me.fillAutoShapes();
+                menu.off('show:before', onShowBefore);
+            };
+            me.btnChangeShape.menu.on('show:before', onShowBefore);
+        },
+
+        fillAutoShapes: function() {
+            var me = this,
+                recents = Common.localStorage.getItem('de-recent-shapes');
+
+            var menuitem = new Common.UI.MenuItem({
+                template: _.template('<div id="id-img-change-shape-menu" class="menu-insertshape"></div>'),
+                index: 0
+            });
+            me.btnChangeShape.menu.addItem(menuitem);
+
+            var shapePicker = new Common.UI.DataViewShape({
+                el: $('#id-img-change-shape-menu'),
+                itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
+                groups: me.application.getCollection('ShapeGroups'),
+                parentMenu: me.btnChangeShape.menu,
+                restoreHeight: 640,
+                textRecentlyUsed: me.textRecentlyUsed,
+                recentShapes: recents ? JSON.parse(recents) : null,
+                isFromImage: true
+            });
+            shapePicker.on('item:click', function(picker, item, record, e) {
+                if (me.api) {
+                    me.api.ChangeShapeType(record.get('data').shapeType);
+                    me.fireEvent('editcomplete', me);
+                }
+                if (e.type !== 'click')
+                    me.btnChangeShape.menu.hide();
+            });
+        },
+
         ChangeSettings: function(props) {
             if (this._initSettings)
                 this.createDelayedElements();
@@ -490,6 +540,8 @@ define([
         textCropFill: 'Fill',
         textCropFit: 'Fit',
         textFitSlide: 'Fit to Slide',
-        textFromStorage: 'From Storage'
+        textCropToShape: 'Crop to shape',
+        textFromStorage: 'From Storage',
+        textRecentlyUsed: 'Recently Used'
     }, PE.Views.ImageSettings || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1442,6 +1442,7 @@
   "PE.Views.ImageSettings.textCrop": "Crop",
   "PE.Views.ImageSettings.textCropFill": "Fill",
   "PE.Views.ImageSettings.textCropFit": "Fit",
+  "PE.Views.ImageSettings.textCropToShape": "Crop to shape",
   "PE.Views.ImageSettings.textEdit": "Edit",
   "PE.Views.ImageSettings.textEditObject": "Edit Object",
   "PE.Views.ImageSettings.textFitSlide": "Fit to Slide",
@@ -1456,6 +1457,7 @@
   "PE.Views.ImageSettings.textHintFlipV": "Flip Vertically",
   "PE.Views.ImageSettings.textInsert": "Replace Image",
   "PE.Views.ImageSettings.textOriginalSize": "Actual Size",
+  "PE.Views.ImageSettings.textRecentlyUsed": "Recently Used",
   "PE.Views.ImageSettings.textRotate90": "Rotate 90°",
   "PE.Views.ImageSettings.textRotation": "Rotation",
   "PE.Views.ImageSettings.textSize": "Size",

apps/spreadsheeteditor/main/app/controller/RightMenu.js

@@ -83,7 +83,7 @@ define([
         },
 
         onRightMenuAfterRender: function(rightMenu) {
-            rightMenu.shapeSettings.application = rightMenu.textartSettings.application = this.getApplication();
+            rightMenu.imageSettings.application = rightMenu.shapeSettings.application = rightMenu.textartSettings.application = this.getApplication();
 
             this._settings = [];
             this._settings[Common.Utils.documentSettingsType.Paragraph] = {panelId: "id-paragraph-settings",  panel: rightMenu.paragraphSettings,btn: rightMenu.btnText,        hidden: 1, locked: false};

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

@@ -239,6 +239,15 @@ define([
                             checked: this._state.cropMode,
                             value: 0
                         },
+                        {
+                            caption:  this.textCropToShape,
+                            menu: new Common.UI.Menu({
+                                menuAlign: 'tl-tl',
+                                cls: 'menu-shapes menu-change-shape',
+                                items: []
+                            }),
+                            value: 3
+                        },
                         {
                             caption: this.textCropFill,
                             value: 1
@@ -255,6 +264,7 @@ define([
             this.btnCrop.on('click', _.bind(this.onCrop, this));
             this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
             this.lockedControls.push(this.btnCrop);
+            this.btnChangeShape= this.btnCrop.menu.items[1];
 
             this.btnRotate270 = new Common.UI.Button({
                 parentEl: $('#image-button-270', me.$el),
@@ -314,6 +324,7 @@ define([
         createDelayedElements: function() {
             this.createDelayedControls();
             this.updateMetricUnit();
+            this.onApiAutoShapes();
             this._initSettings = false;
         },
 
@@ -351,6 +362,45 @@ define([
             }
         },
 
+        onApiAutoShapes: function() {
+            var me = this;
+            var onShowBefore = function(menu) {
+                me.fillAutoShapes();
+                menu.off('show:before', onShowBefore);
+            };
+            me.btnChangeShape.menu.on('show:before', onShowBefore);
+        },
+
+        fillAutoShapes: function() {
+            var me = this,
+                recents = Common.localStorage.getItem('de-recent-shapes');
+
+            var menuitem = new Common.UI.MenuItem({
+                template: _.template('<div id="id-img-change-shape-menu" class="menu-insertshape"></div>'),
+                index: 0
+            });
+            me.btnChangeShape.menu.addItem(menuitem);
+
+            var shapePicker = new Common.UI.DataViewShape({
+                el: $('#id-img-change-shape-menu'),
+                itemTemplate: _.template('<div class="item-shape" id="<%= id %>"><svg width="20" height="20" class=\"icon\"><use xlink:href=\"#svg-icon-<%= data.shapeType %>\"></use></svg></div>'),
+                groups: me.application.getCollection('ShapeGroups'),
+                parentMenu: me.btnChangeShape.menu,
+                restoreHeight: 640,
+                textRecentlyUsed: me.textRecentlyUsed,
+                recentShapes: recents ? JSON.parse(recents) : null,
+                isFromImage: true
+            });
+            shapePicker.on('item:click', function(picker, item, record, e) {
+                if (me.api) {
+                    me.api.asc_changeShapeType(record.get('data').shapeType);
+                    Common.NotificationCenter.trigger('edit:complete', me);
+                }
+                if (e.type !== 'click')
+                    me.btnChangeShape.menu.hide();
+            });
+        },
+
         ChangeSettings: function(props) {
             if (this._initSettings)
                 this.createDelayedElements();
@@ -583,6 +633,8 @@ define([
         textCrop: 'Crop',
         textCropFill: 'Fill',
         textCropFit: 'Fit',
-        textFromStorage: 'From Storage'
+        textCropToShape: 'Crop to shape',
+        textFromStorage: 'From Storage',
+        textRecentlyUsed: 'Recently Used'
     }, SSE.Views.ImageSettings || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -2412,6 +2412,7 @@
   "SSE.Views.ImageSettings.textCrop": "Crop",
   "SSE.Views.ImageSettings.textCropFill": "Fill",
   "SSE.Views.ImageSettings.textCropFit": "Fit",
+  "SSE.Views.ImageSettings.textCropToShape": "Crop to shape",
   "SSE.Views.ImageSettings.textEdit": "Edit",
   "SSE.Views.ImageSettings.textEditObject": "Edit Object",
   "SSE.Views.ImageSettings.textFlip": "Flip",
@@ -2426,6 +2427,7 @@
   "SSE.Views.ImageSettings.textInsert": "Replace Image",
   "SSE.Views.ImageSettings.textKeepRatio": "Constant proportions",
   "SSE.Views.ImageSettings.textOriginalSize": "Actual Size",
+  "SSE.Views.ImageSettings.textRecentlyUsed": "Recently Used",
   "SSE.Views.ImageSettings.textRotate90": "Rotate 90°",
   "SSE.Views.ImageSettings.textRotation": "Rotation",
   "SSE.Views.ImageSettings.textSize": "Size",