[SSE] Add cell snapping settings for Image/Shape/Chart

apps/spreadsheeteditor/main/app/template/ChartSettingsDlg.template

@@ -422,6 +422,27 @@
         </table>
     </div>
 </div>
+<div id="id-chart-settings-dlg-snap" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1">
+            <tr>
+                <td class="padding-small">
+                    <div id="chart-dlg-radio-twocell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="chart-dlg-radio-onecell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="chart-dlg-radio-absolute"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-chart-settings-dlg-alttext" class="settings-panel">
     <div class="inner-content">
         <table cols="1" width="100%">

apps/spreadsheeteditor/main/app/template/ImageSettingsAdvanced.template

@@ -24,6 +24,27 @@
         </table>
     </div>
 </div>
+<div id="id-adv-image-snap" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1">
+            <tr>
+                <td class="padding-small">
+                    <div id="image-advanced-radio-twocell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="image-advanced-radio-onecell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="image-advanced-radio-absolute"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-adv-image-alttext" class="settings-panel active">
     <div class="inner-content">
         <table cols="1" width="100%">

apps/spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.template

@@ -138,6 +138,27 @@
         </table>
     </div>
 </div>
+<div id="id-adv-shape-snap" class="settings-panel">
+    <div class="inner-content">
+        <table cols="1">
+            <tr>
+                <td class="padding-small">
+                    <div id="shape-radio-twocell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="shape-radio-onecell"></div>
+                </td>
+            </tr>
+            <tr>
+                <td class="padding-small">
+                    <div id="shape-radio-absolute"></div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
 <div id="id-adv-shape-alttext" class="settings-panel">
     <div class="inner-content">
         <table cols="1" width="100%">

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

@@ -64,6 +64,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                     {panelId: 'id-chart-settings-dlg-hor',          panelCaption: this.textHorAxis},
                     {panelId: 'id-spark-settings-dlg-style',        panelCaption: this.textTypeData},
                     {panelId: 'id-spark-settings-dlg-axis',         panelCaption: this.textAxisOptions},
+                    {panelId: 'id-chart-settings-dlg-snap',         panelCaption: this.textSnap},
                     {panelId: 'id-chart-settings-dlg-alttext',      panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
@@ -87,6 +88,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
             };
             this._noApply = true;
             this._changedProps = null;
+            this._changedImageProps = null;
 
             this.api = this.options.api;
             this.chartSettings = this.options.chartSettings;
@@ -980,6 +982,31 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 }
             }, this));
 
+            // Snapping
+            this.radioTwoCell = new Common.UI.RadioBox({
+                el: $('#chart-dlg-radio-twocell'),
+                name: 'asc-radio-snap',
+                labelText: this.textTwoCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorTwoCell
+            });
+            this.radioTwoCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioOneCell = new Common.UI.RadioBox({
+                el: $('#chart-dlg-radio-onecell'),
+                name: 'asc-radio-snap',
+                labelText: this.textOneCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorOneCell
+            });
+            this.radioOneCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioAbsolute = new Common.UI.RadioBox({
+                el: $('#chart-dlg-radio-absolute'),
+                name: 'asc-radio-snap',
+                labelText: this.textAbsolute,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorAbsolute
+            });
+            this.radioAbsolute.on('change', _.bind(this.onRadioSnapChange, this));
+
             // Alt Text
 
             this.inputAltTitle = new Common.UI.InputField({
@@ -1016,6 +1043,7 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 this.btnsCategory[2].setVisible(false);
                 this.btnsCategory[3].setVisible(false);
                 this.btnsCategory[6].setVisible(false);
+                this.btnsCategory[7].setVisible(false);
             }
 
             if (this.storageName) {
@@ -1366,6 +1394,19 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
 
                         value = this.imageSettings.asc_getDescription();
                         this.textareaAltDescription.val(value ? value : '');
+
+                        value = this.imageSettings.asc_getAnchor();
+                        switch (value) {
+                            case AscCommon.c_oAscCellAnchorType.cellanchorTwoCell:
+                                this.radioTwoCell.setValue(true, true);
+                                break;
+                            case AscCommon.c_oAscCellAnchorType.cellanchorOneCell:
+                                this.radioOneCell.setValue(true, true);
+                                break;
+                            case AscCommon.c_oAscCellAnchorType.cellanchorAbsolute:
+                                this.radioAbsolute.setValue(true, true);
+                                break;
+                        }
                     }
                 } else { // sparkline
                     this._state.SparkType = props.asc_getType();
@@ -1474,19 +1515,29 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
                 this.chartSettings.putVertAxisProps(this.vertAxisProps);
                 this.chartSettings.putHorAxisProps(this.horAxisProps);
 
-                var imagesettings = (this.isAltTitleChanged || this.isAltDescChanged) ? new Asc.asc_CImgProperty() : null;
+                if ((this.isAltTitleChanged || this.isAltDescChanged) && !this._changedImageProps)
+                    this._changedImageProps = new Asc.asc_CImgProperty();
+
                 if (this.isAltTitleChanged)
-                    imagesettings.asc_putTitle(this.inputAltTitle.getValue());
+                    this._changedImageProps.asc_putTitle(this.inputAltTitle.getValue());
 
                 if (this.isAltDescChanged)
-                    imagesettings.asc_putDescription(this.textareaAltDescription.val());
+                    this._changedImageProps.asc_putDescription(this.textareaAltDescription.val());
 
-                return { chartSettings: this.chartSettings, imageSettings: imagesettings};
+                return { chartSettings: this.chartSettings, imageSettings: this._changedImageProps};
             } else {
                 return { chartSettings: this._changedProps };
             }
         },
 
+        onRadioSnapChange: function(field, newValue, eOpts) {
+            if (newValue) {
+                if (!this._changedImageProps)
+                    this._changedImageProps = new Asc.asc_CImgProperty();
+                this._changedImageProps.asc_putAnchor(field.options.value);
+            }
+        },
+
         isRangeValid: function() {
             if (this.isChart) {
                 var isvalid;
@@ -1759,7 +1810,11 @@ define([    'text!spreadsheeteditor/main/app/template/ChartSettingsDlg.template'
         textAltDescription: 'Description',
         textAltTip: 'The alternative text-based representation of the visual object information, which will be read to the people with vision or cognitive impairments to help them better understand what information there is in the image, autoshape, chart or table.',
         textSurface: 'Surface',
-        errorMaxPoints: 'ERROR! The maximum number of points in series per chart is 4096.'
+        errorMaxPoints: 'ERROR! The maximum number of points in series per chart is 4096.',
+        textSnap: 'Cell Snapping',
+        textAbsolute: 'Don\'t move or size with cells',
+        textOneCell: 'Move but don\'t size with cells',
+        textTwoCell: 'Move and size with cells'
 
     }, SSE.Views.ChartSettingsDlg || {}));
 });

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

@@ -60,6 +60,7 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
                 title: this.textTitle,
                 items: [
                     {panelId: 'id-adv-image-rotate',     panelCaption: this.textRotation},
+                    {panelId: 'id-adv-image-snap',       panelCaption: this.textSnap},
                     {panelId: 'id-adv-image-alttext',    panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
@@ -98,6 +99,31 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
                 labelText: this.textVertically
             });
 
+            // Snapping
+            this.radioTwoCell = new Common.UI.RadioBox({
+                el: $('#image-advanced-radio-twocell'),
+                name: 'asc-radio-snap',
+                labelText: this.textTwoCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorTwoCell
+            });
+            this.radioTwoCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioOneCell = new Common.UI.RadioBox({
+                el: $('#image-advanced-radio-onecell'),
+                name: 'asc-radio-snap',
+                labelText: this.textOneCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorOneCell
+            });
+            this.radioOneCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioAbsolute = new Common.UI.RadioBox({
+                el: $('#image-advanced-radio-absolute'),
+                name: 'asc-radio-snap',
+                labelText: this.textAbsolute,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorAbsolute
+            });
+            this.radioAbsolute.on('change', _.bind(this.onRadioSnapChange, this));
+
             // Alt Text
 
             this.inputAltTitle = new Common.UI.InputField({
@@ -120,6 +146,12 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
             this.afterRender();
         },
 
+        onRadioSnapChange: function(field, newValue, eOpts) {
+            if (newValue && this._changedProps) {
+                this._changedProps.asc_putAnchor(field.options.value);
+            }
+        },
+
         afterRender: function() {
             this._setDefaults(this._originalProps);
             if (this.storageName) {
@@ -141,6 +173,19 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
                 this.chFlipHor.setValue(props.asc_getFlipH());
                 this.chFlipVert.setValue(props.asc_getFlipV());
 
+                value = props.asc_getAnchor();
+                switch (value) {
+                    case AscCommon.c_oAscCellAnchorType.cellanchorTwoCell:
+                        this.radioTwoCell.setValue(true, true);
+                        break;
+                    case AscCommon.c_oAscCellAnchorType.cellanchorOneCell:
+                        this.radioOneCell.setValue(true, true);
+                        break;
+                    case AscCommon.c_oAscCellAnchorType.cellanchorAbsolute:
+                        this.radioAbsolute.setValue(true, true);
+                        break;
+                }
+
                 var pluginGuid = props.asc_getPluginGuid();
                 this.btnsCategory[0].setVisible(pluginGuid === null || pluginGuid === undefined); // Rotation
 
@@ -171,7 +216,11 @@ define([    'text!spreadsheeteditor/main/app/template/ImageSettingsAdvanced.temp
         textAngle: 'Angle',
         textFlipped: 'Flipped',
         textHorizontally: 'Horizontally',
-        textVertically: 'Vertically'
+        textVertically: 'Vertically',
+        textSnap: 'Cell Snapping',
+        textAbsolute: 'Don\'t move or size with cells',
+        textOneCell: 'Move but don\'t size with cells',
+        textTwoCell: 'Move and size with cells'
 
     }, SSE.Views.ImageSettingsAdvanced || {}));
 });

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

@@ -699,8 +699,8 @@ define([
                     var elType, elValue;
                     for (var i = selectedElements.length - 1; i >= 0; i--) {
                         elType = selectedElements[i].asc_getObjectType();
-                        if (Asc.c_oAscTypeSelectElement.Image == elType) {
                         elValue = selectedElements[i].asc_getObjectValue();
+                        if (Asc.c_oAscTypeSelectElement.Image == elType && elValue.asc_getShapeProperties()) {
                             (new SSE.Views.ShapeSettingsAdvanced(
                                 {
                                     shapeProps: elValue,

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

@@ -66,6 +66,7 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                     {panelId: 'id-adv-shape-shape',      panelCaption: this.textWeightArrows},
                     {panelId: 'id-adv-shape-margins',    panelCaption: this.strMargins},
                     {panelId: 'id-adv-shape-columns',    panelCaption: this.strColumns},
+                    {panelId: 'id-adv-shape-snap',       panelCaption: this.textSnap},
                     {panelId: 'id-adv-shape-alttext',    panelCaption: this.textAlt}
                 ],
                 contentTemplate: _.template(contentTemplate)({
@@ -503,6 +504,31 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
             }, this));
             this.spinners.push(this.spnSpacing);
 
+            // Snapping
+            this.radioTwoCell = new Common.UI.RadioBox({
+                el: $('#shape-radio-twocell'),
+                name: 'asc-radio-snap',
+                labelText: this.textTwoCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorTwoCell
+            });
+            this.radioTwoCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioOneCell = new Common.UI.RadioBox({
+                el: $('#shape-radio-onecell'),
+                name: 'asc-radio-snap',
+                labelText: this.textOneCell,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorOneCell
+            });
+            this.radioOneCell.on('change', _.bind(this.onRadioSnapChange, this));
+
+            this.radioAbsolute = new Common.UI.RadioBox({
+                el: $('#shape-radio-absolute'),
+                name: 'asc-radio-snap',
+                labelText: this.textAbsolute,
+                value: AscCommon.c_oAscCellAnchorType.cellanchorAbsolute
+            });
+            this.radioAbsolute.on('change', _.bind(this.onRadioSnapChange, this));
+
             // Alt Text
 
             this.inputAltTitle = new Common.UI.InputField({
@@ -585,6 +611,19 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
                 this.chFlipHor.setValue(props.asc_getFlipH());
                 this.chFlipVert.setValue(props.asc_getFlipV());
 
+                value = props.asc_getAnchor();
+                switch (value) {
+                    case AscCommon.c_oAscCellAnchorType.cellanchorTwoCell:
+                        this.radioTwoCell.setValue(true, true);
+                        break;
+                    case AscCommon.c_oAscCellAnchorType.cellanchorOneCell:
+                        this.radioOneCell.setValue(true, true);
+                        break;
+                    case AscCommon.c_oAscCellAnchorType.cellanchorAbsolute:
+                        this.radioAbsolute.setValue(true, true);
+                        break;
+                }
+
                 this._changedProps = new Asc.asc_CImgProperty();
             }
         },
@@ -779,6 +818,12 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
             this._selectStyleItem(this.btnEndSize, record);
         },
 
+        onRadioSnapChange: function(field, newValue, eOpts) {
+            if (newValue && this._changedProps) {
+                this._changedProps.asc_putAnchor(field.options.value);
+            }
+        },
+
         textTop:        'Top',
         textLeft:       'Left',
         textBottom:     'Bottom',
@@ -814,7 +859,11 @@ define([    'text!spreadsheeteditor/main/app/template/ShapeSettingsAdvanced.temp
         textAngle: 'Angle',
         textFlipped: 'Flipped',
         textHorizontally: 'Horizontally',
-        textVertically: 'Vertically'
+        textVertically: 'Vertically',
+        textSnap: 'Cell Snapping',
+        textAbsolute: 'Don\'t move or size with cells',
+        textOneCell: 'Move but don\'t size with cells',
+        textTwoCell: 'Move and size with cells'
 
     }, SSE.Views.ShapeSettingsAdvanced || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1336,6 +1336,10 @@
   "SSE.Views.ChartSettingsDlg.textYAxisTitle": "Y Axis Title",
   "SSE.Views.ChartSettingsDlg.textZero": "Zero",
   "SSE.Views.ChartSettingsDlg.txtEmpty": "This field is required",
+  "SSE.Views.ChartSettingsDlg.textSnap": "Cell Snapping",
+  "SSE.Views.ChartSettingsDlg.textAbsolute": "Don't move or size with cells",
+  "SSE.Views.ChartSettingsDlg.textOneCell": "Move but don't size with cells",
+  "SSE.Views.ChartSettingsDlg.textTwoCell": "Move and size with cells",
   "SSE.Views.DataTab.capBtnGroup": "Group",
   "SSE.Views.DataTab.capBtnTextToCol": "Text to Columns",
   "SSE.Views.DataTab.capBtnUngroup": "Ungroup",
@@ -1713,6 +1717,10 @@
   "SSE.Views.ImageSettingsAdvanced.textRotation": "Rotation",
   "SSE.Views.ImageSettingsAdvanced.textTitle": "Image - Advanced Settings",
   "SSE.Views.ImageSettingsAdvanced.textVertically": "Vertically",
+  "SSE.Views.ImageSettingsAdvanced.textSnap": "Cell Snapping",
+  "SSE.Views.ImageSettingsAdvanced.textAbsolute": "Don't move or size with cells",
+  "SSE.Views.ImageSettingsAdvanced.textOneCell": "Move but don't size with cells",
+  "SSE.Views.ImageSettingsAdvanced.textTwoCell": "Move and size with cells",
   "SSE.Views.LeftMenu.tipAbout": "About",
   "SSE.Views.LeftMenu.tipChat": "Chat",
   "SSE.Views.LeftMenu.tipComments": "Comments",
@@ -2019,6 +2027,10 @@
   "SSE.Views.ShapeSettingsAdvanced.textVertically": "Vertically",
   "SSE.Views.ShapeSettingsAdvanced.textWeightArrows": "Weights & Arrows",
   "SSE.Views.ShapeSettingsAdvanced.textWidth": "Width",
+  "SSE.Views.ShapeSettingsAdvanced.textSnap": "Cell Snapping",
+  "SSE.Views.ShapeSettingsAdvanced.textAbsolute": "Don't move or size with cells",
+  "SSE.Views.ShapeSettingsAdvanced.textOneCell": "Move but don't size with cells",
+  "SSE.Views.ShapeSettingsAdvanced.textTwoCell": "Move and size with cells",
   "SSE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "SSE.Views.SignatureSettings.strDelete": "Remove Signature",
   "SSE.Views.SignatureSettings.strDetails": "Signature Details",