Merge pull request #1490 from ONLYOFFICE/feature/add-select-hand-tools

Feature/add select hand tools

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

@@ -1464,7 +1464,7 @@ define([
                 var type = /^(?:(djvu))$/.exec(this.document.fileType);
                 this.appOptions.canDownloadOrigin = this.permissions.download !== false && (type && typeof type[1] === 'string');
                 this.appOptions.canDownload       = this.permissions.download !== false && (!type || typeof type[1] !== 'string');
-                this.appOptions.canUseThumbnails = this.appOptions.canUseViwerNavigation = /^(?:(pdf|djvu|xps|oxps))$/.test(this.document.fileType);
+                this.appOptions.canUseSelectHandTools = this.appOptions.canUseThumbnails = this.appOptions.canUseViwerNavigation = /^(?:(pdf|djvu|xps|oxps))$/.test(this.document.fileType);
                 this.appOptions.canDownloadForms = this.appOptions.canLicense && this.appOptions.canDownload;
 
                 this.appOptions.fileKey = this.document.key;

apps/documenteditor/main/app/controller/Statusbar.js

@@ -119,6 +119,9 @@ define([
                 } else {
                     me.statusbar.$el.find('.el-edit, .el-review').hide();
                 }
+                if (cfg.canUseSelectHandTools) {
+                    me.statusbar.$el.find('.hide-select-tools').removeClass('hide-select-tools');
+                }
             });
 
             Common.NotificationCenter.on('app:ready', me.onAppReady.bind(me));
@@ -131,6 +134,12 @@ define([
                 resolve();
             })).then(function () {
                 me.bindViewEvents(me.statusbar, me.events);
+                if (config.canUseSelectHandTools) {
+                    me.statusbar.btnSelectTool.on('click', _.bind(me.onSelectTool, me, 'select'));
+                    me.statusbar.btnHandTool.on('click', _.bind(me.onSelectTool, me, 'hand'));
+                    me.statusbar.btnHandTool.toggle(true, true);
+                    me.api.asc_setViewerTargetType('hand');
+                }
 
                 var statusbarIsHidden = Common.localStorage.getBool("de-hidden-status");
                 if ( config.canReview && !statusbarIsHidden ) {
@@ -344,6 +353,12 @@ define([
             this.disconnectTip = null;
         },
 
+        onSelectTool: function (type, btn, e) {
+            if (this.api) {
+                this.api.asc_setViewerTargetType(type);
+            }
+        },
+
         zoomText        : 'Zoom {0}%',
         textHasChanges  : 'New changes have been tracked',
         textTrackChanges: 'The document is opened with the Track Changes mode enabled',

apps/documenteditor/main/app/template/StatusBar.template

@@ -19,6 +19,10 @@
         <div class="separator short el-edit el-lang"></div>
         <div id="btn-doc-review" class="el-edit el-review" style="display: inline-block;"></div>
         <div class="separator short el-edit el-review"></div>
+        <div class="separator short hide-select-tools"></div>
+        <button id="btn-select-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><span class="icon toolbar__icon btn-select-tool">&nbsp;</span></button>
+        <button id="btn-hand-tool" type="button" class="btn small btn-toolbar hide-select-tools" data-hint="0" data-hint-direction="top" data-hint-offset="small"><span class="icon toolbar__icon btn-hand-tool">&nbsp;</span></button>
+        <div class="separator short hide-select-tools"></div>
         <button id="btn-zoom-topage" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><span class="icon toolbar__icon btn-ic-zoomtopage">&nbsp;</span></button>
         <button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><span class="icon toolbar__icon btn-ic-zoomtowidth">&nbsp;</span></button>
         <button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><span class="icon toolbar__icon btn-zoomdown">&nbsp;</span></button>

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

@@ -79,6 +79,11 @@ define([
             me.btnZoomDown.updateHint(me.tipZoomOut + Common.Utils.String.platformKey('Ctrl+-'));
             me.btnZoomUp.updateHint(me.tipZoomIn + Common.Utils.String.platformKey('Ctrl++'));
 
+            if (config.canUseSelectHandTools) {
+                me.btnSelectTool.updateHint(me.tipSelectTool);
+                me.btnHandTool.updateHint(me.tipHandTool);
+            }
+
             if (me.btnLanguage && me.btnLanguage.cmpEl) {
                 me.btnLanguage.updateHint(me.tipSetLang);
                 me.langMenu.on('item:click', _.bind(_clickLanguage, this));
@@ -179,6 +184,18 @@ define([
                     textPageNumber: Common.Utils.String.format(this.pageIndexText, 1, 1)
                 }));
 
+                this.btnSelectTool = new Common.UI.Button({
+                    hintAnchor: 'top',
+                    toggleGroup: 'select-tools',
+                    enableToggle: true
+                });
+
+                this.btnHandTool = new Common.UI.Button({
+                    hintAnchor: 'top',
+                    toggleGroup: 'select-tools',
+                    enableToggle: true
+                });
+
                 this.btnZoomToPage = new Common.UI.Button({
                     hintAnchor: 'top',
                     toggleGroup: 'status-zoom',
@@ -292,6 +309,11 @@ define([
                     me.langMenu.prevTip = 'en';
                 }
 
+                if (config.canUseSelectHandTools) {
+                    _btn_render(me.btnSelectTool, $('#btn-select-tool', me.$layout));
+                    _btn_render(me.btnHandTool, $('#btn-hand-tool', me.$layout));
+                }
+
                 me.zoomMenu.render($('.cnt-zoom',me.$layout));
                 me.zoomMenu.cmpEl.attr({tabindex: -1});
 
@@ -394,7 +416,9 @@ define([
             tipSetLang          : 'Set Text Language',
             txtPageNumInvalid   : 'Page number invalid',
             textTrackChanges    : 'Track Changes',
-            textChangesPanel    : 'Changes panel'
+            textChangesPanel    : 'Changes panel',
+            tipSelectTool       : 'Select tool',
+            tipHandTool         : 'Hand tool'
         }, DE.Views.Statusbar || {}));
     }
 );

apps/documenteditor/main/locale/en.json

@@ -2384,6 +2384,8 @@
   "DE.Views.Statusbar.tipZoomIn": "Zoom in",
   "DE.Views.Statusbar.tipZoomOut": "Zoom out",
   "DE.Views.Statusbar.txtPageNumInvalid": "Page number invalid",
+  "DE.Views.Statusbar.tipSelectTool": "Select tool",
+  "DE.Views.Statusbar.tipHandTool": "Hand tool",
   "DE.Views.StyleTitleDialog.textHeader": "Create New Style",
   "DE.Views.StyleTitleDialog.textNextStyle": "Next paragraph style",
   "DE.Views.StyleTitleDialog.textTitle": "Title",

apps/documenteditor/main/resources/less/statusbar.less

@@ -164,4 +164,12 @@
             }
         }
     }
+
+    .hide-select-tools {
+        display: none;
+    }
+
+    #btn-select-tool {
+        margin-right: 8px;
+    }
 }