[PE] Add gridlines settings

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

@@ -869,6 +869,18 @@ define([
                 Common.Utils.InternalSettings.set("pe-settings-showguides", value);
                 me.api.asc_setShowGuides(value);
 
+                value = Common.localStorage.getBool("pe-settings-showgrid");
+                Common.Utils.InternalSettings.set("pe-settings-showgrid", value);
+                me.api.asc_setShowGridlines(value);
+
+                value = Common.localStorage.getBool("pe-settings-snaptogrid");
+                Common.Utils.InternalSettings.set("pe-settings-snaptogrid", value);
+                me.api.asc_setSnapToGrid(value);
+
+                value = Common.localStorage.getItem("pe-settings-gridspacing");
+                Common.Utils.InternalSettings.set("pe-settings-gridspacing", value);
+                me.api.asc_setGridSpacing(value);
+
                 var application = me.getApplication();
                 var toolbarController           = application.getController('Toolbar'),
                     statusbarController         = application.getController('Statusbar'),

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

@@ -97,7 +97,12 @@ define([
                     'guides:aftershow': _.bind(this.onGuidesAfterShow, this),
                     'guides:add': _.bind(this.onGuidesAdd, this),
                     'guides:clear': _.bind(this.onGuidesClear, this),
-                    'guides:smart': _.bind(this.onGuidesSmartShow, this)
+                    'guides:smart': _.bind(this.onGuidesSmartShow, this),
+                    'gridlines:show': _.bind(this.onGridlinesShow, this),
+                    'gridlines:snap': _.bind(this.onGridlinesSnap, this),
+                    'gridlines:spacing': _.bind(this.onGridlinesSpacing, this),
+                    'gridlines:custom': _.bind(this.onGridlinesCustom, this),
+                    'gridlines:aftershow': _.bind(this.onGridlinesAfterShow, this)
                 },
                 'Toolbar': {
                     'view:compact': _.bind(function (toolbar, state) {
@@ -258,6 +263,60 @@ define([
             Common.localStorage.setBool('pe-settings-showsnaplines', state);
             Common.Utils.InternalSettings.set("pe-settings-showsnaplines", state);
             Common.NotificationCenter.trigger('edit:complete', this.view);
+        },
+
+        onGridlinesShow: function(state) {
+            this.api.asc_setShowGridlines(state);
+            Common.localStorage.setBool('pe-settings-showgrid', state);
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        },
+
+        onGridlinesSnap: function(state) {
+            this.api.asc_setSnapToGrid(state);
+            Common.localStorage.setBool('pe-settings-snaptogrid', state);
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        },
+
+        onGridlinesSpacing: function(value) {
+            this.api.asc_setGridSpacing(value);
+            Common.localStorage.setItem('pe-settings-gridspacing', value);
+            Common.NotificationCenter.trigger('edit:complete', this.view);
+        },
+
+        onGridlinesCustom: function(state) {
+            var win, props,
+                me = this;
+            win = new PE.Views.GridSettingsDialog({
+                handler: function(dlg, result) {
+                    if (result == 'ok') {
+                        props = dlg.getSettings();
+                        me.api.asc_setGridSpacing(props);
+                        Common.localStorage.setItem('pe-settings-gridspacing', props);
+                        Common.NotificationCenter.trigger('edit:complete', me.view);
+                    }
+                }
+            });
+            win.show();
+            win.setSettings(me.api.asc_getGridSpacing());
+        },
+
+        onGridlinesAfterShow: function() {
+            if (this.view) {
+                this.view.btnGridlines.menu.items[0].setChecked(this.api.asc_getShowGridlines(), true);
+                this.view.btnGridlines.menu.items[1].setChecked(this.api.asc_getSnapToGrid(), true);
+
+                var value = this.api.asc_getGridSpacing(),
+                    items = this.view.btnGridlines.menu.items;
+                for (var i=3; i<14; i++) {
+                    var item = items[i];
+                    if (item.value<1 && Math.abs(item.value - value)<0.05)
+                        item.setChecked(true);
+                    else if (item.value>=1 && Math.abs(item.value - value)<0.001)
+                        item.setChecked(true);
+                    else
+                        item.setChecked(false);
+                }
+            }
         }
 
     }, PE.Controllers.ViewTab || {}));

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

@@ -79,6 +79,7 @@ define([
                 '</div>' +
                 '<div class="group small">' +
                     '<span class="btn-slot text x-huge" id="slot-btn-guides"></span>' +
+                    '<span class="btn-slot text x-huge" id="slot-btn-gridlines"></span>' +
                 '</div>' +
                 '<div class="separator long separator-rulers"></div>' +
                 '<div class="group small">' +
@@ -132,14 +133,32 @@ define([
                         me.fireEvent('guides:add', [item.value]);
                     else if (item.value === 'clear')
                         me.fireEvent('guides:clear');
-                     else if (item.value === 'smart')
+                    else if (item.value === 'smart')
                         me.fireEvent('guides:smart', [item.isChecked()]);
-                     else
+                    else
-                        me.fireEvent('guides:show', [item.isChecked()]);
+                        me.btnGuides.toggle(item.isChecked());
                 }, me));
                 me.btnGuides.menu.on('show:after', _.bind(function(btn, state) {
                     me.fireEvent('guides:aftershow');
                 }, me));
+
+                me.btnGridlines.on('toggle', _.bind(function(btn, state) {
+                    me.fireEvent('gridlines:show', [state]);
+                }, me));
+                me.btnGridlines.menu.on('item:click', _.bind(function(menu, item) {
+                    if (item.value === 'custom')
+                        me.fireEvent('gridlines:custom');
+                    else if (item.value === 'snap')
+                        me.fireEvent('gridlines:snap', [item.isChecked()]);
+                    else if (item.value === 'show')
+                        me.btnGridlines.toggle(item.isChecked());
+                    else
+                        me.fireEvent('gridlines:spacing', [item.value]);
+
+                }, me));
+                me.btnGridlines.menu.on('show:after', _.bind(function(btn, state) {
+                    me.fireEvent('gridlines:aftershow');
+                }, me));
             },
 
             initialize: function (options) {
@@ -261,6 +280,7 @@ define([
                     lock: [_set.disableOnStart],
                     enableToggle: true,
                     allowDepress: true,
+                    pressed: Common.localStorage.getBool("pe-settings-showguides", true),
                     split: true,
                     menu: true,
                     dataHint: '1',
@@ -269,6 +289,22 @@ define([
                 });
                 this.lockedControls.push(this.btnGuides);
 
+                this.btnGridlines = new Common.UI.Button({
+                    cls: 'btn-toolbar x-huge icon-top',
+                    iconCls: 'toolbar__icon day',
+                    caption: this.textGridlines,
+                    lock: [_set.disableOnStart],
+                    enableToggle: true,
+                    allowDepress: true,
+                    pressed: Common.localStorage.getBool("pe-settings-showgrid", true),
+                    split: true,
+                    menu: true,
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintOffset: 'small'
+                });
+                this.lockedControls.push(this.btnGridlines);
+
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
@@ -292,6 +328,7 @@ define([
                 this.chRulers.render($host.find('#slot-chk-rulers'));
                 this.chNotes.render($host.find('#slot-chk-notes'));
                 this.btnGuides.render($host.find('#slot-btn-guides'));
+                this.btnGridlines.render($host.find('#slot-btn-gridlines'));
                 return this.$el;
             },
 
@@ -304,6 +341,7 @@ define([
                     me.btnFitToWidth.updateHint(me.tipFitToWidth);
                     me.btnInterfaceTheme.updateHint(me.tipInterfaceTheme);
                     me.btnGuides.updateHint(me.tipGuides);
+                    me.btnGridlines.updateHint(me.tipGridlines);
 
                     me.btnGuides.setMenu( new Common.UI.Menu({
                         items: [
@@ -317,6 +355,27 @@ define([
                         ]
                     }));
 
+                    me.btnGridlines.setMenu( new Common.UI.Menu({
+                        items: [
+                            { caption: me.textShowGridlines, value: 'show', checkable: true },
+                            { caption: me.textSnapObjects, value: 'snap', checkable: true },
+                            { caption: '--'},
+                            { caption: Common.Utils.String.format(me.textManyGrids, 8), value: 0.13, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: Common.Utils.String.format(me.textManyGrids, 6), value: 0.17, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: Common.Utils.String.format(me.textManyGrids, 5), value: 0.2, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: Common.Utils.String.format(me.textFewGrids, 4), value: 0.25, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: Common.Utils.String.format(me.textFewGrids, 3), value: 0.33, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: Common.Utils.String.format(me.textFewGrids, 2), value: 0.5, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: '1 ' + me.textCm, value: 1, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: '2 ' + me.textCm, value: 2, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: '3 ' + me.textCm, value: 3, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: '4 ' + me.textCm, value: 4, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: '5 ' + me.textCm, value: 5, checkable: true, toggleGroup: 'tb-gridlines' },
+                            { caption: '--'},
+                            { caption: me.textCustom, value: 'custom' }
+                        ]
+                    }));
+
                     if (!Common.UI.Themes.available()) {
                         me.btnInterfaceTheme.$el.closest('.group').remove();
                         me.$el.find('.separator-theme').remove();
@@ -416,7 +475,16 @@ define([
             textAddVGuides: 'Add vertical guide',
             textAddHGuides: 'Add horizontal guide',
             textSmartGuides: 'Smart Guides',
-            textClearGuides: 'Clear Guides'
+            textClearGuides: 'Clear Guides',
+            textGridlines: 'Gridlines',
+            tipGridlines: 'Show gridlines',
+            textShowGridlines: 'Show Gridlines',
+            textSnapObjects: 'Snap object to grid',
+            textCm: 'cm',
+            textCustom: 'Custom',
+            textManyGrids: '{0} grids per cm',
+            textFewGrids: '{0} grids per cm'
+
         }
     }()), PE.Views.ViewTab || {}));
 });