Debug opening/moving/resizing menus, dialogs, tips and others (using mouse...

Debug opening/moving/resizing menus, dialogs, tips and others (using mouse events), when browser zoom != 100%.

apps/common/main/lib/component/DataView.js

@@ -676,7 +676,7 @@ define([
                             ? this.parentMenu.cmpEl
                             : this.parentMenu.cmpEl.find('[role=menu]'),
                 innerEl = $(this.el).find('.inner').andSelf().filter('.inner'),
-                docH = $(document).height(),
+                docH = Common.Utils.innerHeight(),
                 menuH = menuRoot.outerHeight(),
                 top = parseInt(menuRoot.css('top'));
 

apps/common/main/lib/component/DimensionPicker.js

@@ -58,8 +58,8 @@ define([
 
         var onMouseMove = function(event){
             me.setTableSize(
-                Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX) / me.itemSize),
-                Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY) / me.itemSize),
+                Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX*Common.Utils.zoom()) / me.itemSize),
+                Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY*Common.Utils.zoom()) / me.itemSize),
                 event
             );
         };

apps/common/main/lib/component/HSBColorPicker.js

@@ -134,8 +134,8 @@ define([
             var onSBAreaMouseMove = function(event, element, eOpts){
                 if (arrowSatBrightness.length>0 && areaSatBrightness.length>0) {
                     var pos = [
-                        Math.max(0, Math.min(100, (parseInt((event.pageX - areaSatBrightness.offset().left) / areaSatBrightness.width() * 100)))),
-                        Math.max(0, Math.min(100, (parseInt((event.pageY - areaSatBrightness.offset().top) / areaSatBrightness.height() * 100))))
+                        Math.max(0, Math.min(100, (parseInt((event.pageX*Common.Utils.zoom() - areaSatBrightness.offset().left) / areaSatBrightness.width() * 100)))),
+                        Math.max(0, Math.min(100, (parseInt((event.pageY*Common.Utils.zoom() - areaSatBrightness.offset().top) / areaSatBrightness.height() * 100))))
                     ];
 
                     arrowSatBrightness.css('left', pos[0] + '%');
@@ -154,7 +154,7 @@ define([
 
             var onHueAreaMouseMove = function(event, element, eOpts){
                 if (arrowHue&& areaHue) {
-                    var pos = Math.max(0, Math.min(100, (parseInt((event.pageY - areaHue.offset().top) / areaHue.height() * 100))));
+                    var pos = Math.max(0, Math.min(100, (parseInt((event.pageY*Common.Utils.zoom() - areaHue.offset().top) / areaHue.height() * 100))));
                     arrowHue.css('top', pos + '%');
 
                     hueVal = parseInt(360 * pos / 100.0);

apps/common/main/lib/component/Layout.js

@@ -249,24 +249,25 @@ define([
             if (e.data.type == 'vertical') {
                 this.resize.height  = parseInt(this.resize.$el.css('height'));
                 this.resize.max     = (panel.maxpos > 0 ? panel.maxpos : this.resize.$el.parent().height() + panel.maxpos) - this.resize.height;
-                this.resize.inity   = e.pageY - parseInt(e.currentTarget.style.top);
+                this.resize.inity   = e.pageY*Common.Utils.zoom() - parseInt(e.currentTarget.style.top);
             } else
             if (e.data.type == 'horizontal') {
                 this.resize.width   = parseInt(this.resize.$el.css('width'));
                 this.resize.max     = (panel.maxpos > 0 ? panel.maxpos : this.resize.$el.parent().height() + panel.maxpos) - this.resize.width;
-                this.resize.initx   = e.pageX - parseInt(e.currentTarget.style.left);
+                this.resize.initx   = e.pageX*Common.Utils.zoom() - parseInt(e.currentTarget.style.left);
             }
             Common.NotificationCenter.trigger('layout:resizestart');
         },
 
         resizeMove: function(e) {
+            var zoom = (e instanceof jQuery.Event) ? Common.Utils.zoom() : 1;
             if (this.resize.type == 'vertical') {
                 var prop    = 'top',
-                    value   = e.pageY - this.resize.inity;
+                    value   = e.pageY*zoom - this.resize.inity;
             } else
             if (this.resize.type == 'horizontal') {
                 prop        = 'left';
-                value       = e.pageX - this.resize.initx;
+                value       = e.pageX*zoom - this.resize.initx;
             }
 
             if (this.resize.fmin && this.resize.fmax) {
@@ -296,13 +297,14 @@ define([
 
             if (!this.resize.$el) return;
 
+            var zoom = (e instanceof jQuery.Event) ? Common.Utils.zoom() : 1;
             if (this.resize.type == 'vertical') {
                 var prop = 'height';
-                var value = e.pageY - this.resize.inity;
+                var value = e.pageY*zoom - this.resize.inity;
             } else
             if (this.resize.type == 'horizontal') {
                 prop = 'width';
-                value = e.pageX - this.resize.initx;
+                value = e.pageX*zoom - this.resize.initx;
             }
 
             if (this.resize.fmin && this.resize.fmax) {

apps/common/main/lib/component/Menu.js

@@ -531,8 +531,8 @@ define([
                     menuParent  = this.menuAlignEl || menuRoot.parent(),
                     m           = this.menuAlign.match(/^([a-z]+)-([a-z]+)/),
                     offset      = menuParent.offset(),
-                    docW        = Math.min($(document).width(), $('body').width()),
-                    docH        = $(document).height() - 10, // Yep, it's magic number
+                    docW        = Common.Utils.innerWidth(),
+                    docH        = Common.Utils.innerHeight() - 10, // Yep, it's magic number
                     menuW       = menuRoot.outerWidth(),
                     menuH       = menuRoot.outerHeight(),
                     parentW     = menuParent.outerWidth(),

apps/common/main/lib/component/Slider.js

@@ -146,7 +146,7 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
 
-                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
                 me.setThumbPosition(pos);
 
                 me.lastValue = me.value;
@@ -167,7 +167,7 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
 
-                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
                 me.setThumbPosition(pos);
 
                 me.lastValue = me.value;
@@ -179,7 +179,7 @@ define([
 
             var onMouseDown = function (e) {
                 if ( me.disabled ) return;
-                me._dragstart = e.pageX - me.thumb.offset().left - 7;
+                me._dragstart = e.pageX*Common.Utils.zoom() - me.thumb.offset().left - 7;
 
                 me.thumb.addClass('active');
                 $(document).on('mouseup',   onMouseUp);
@@ -192,7 +192,7 @@ define([
             var onTrackMouseDown = function (e) {
                 if ( me.disabled ) return;
 
-                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left) / me.width * 100))));
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100))));
                 me.setThumbPosition(pos);
 
                 me.lastValue = me.value;
@@ -342,7 +342,7 @@ define([
                     lastValue = me.thumbs[index].value,
                     minValue = (index-1<0) ? 0 : me.thumbs[index-1].position,
                     maxValue = (index+1<me.thumbs.length) ? me.thumbs[index+1].position : 100,
-                    pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
+                    pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
                     value = pos/me.delta + me.minValue;
 
                 me.setThumbPosition(index, pos);
@@ -366,7 +366,7 @@ define([
                     lastValue = me.thumbs[index].value,
                     minValue = (index-1<0) ? 0 : me.thumbs[index-1].position,
                     maxValue = (index+1<me.thumbs.length) ? me.thumbs[index+1].position : 100,
-                    pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
+                    pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
                     value = pos/me.delta + me.minValue;
 
                 me.setThumbPosition(index, pos);
@@ -382,7 +382,7 @@ define([
                 var index = e.data,
                     thumb = me.thumbs[index].thumb;
 
-                me._dragstart = e.pageX - thumb.offset().left - thumb.width()/2;
+                me._dragstart = e.pageX*Common.Utils.zoom() - thumb.offset().left - thumb.width()/2;
                 me.setActiveThumb(index);
 
                 _.each(me.thumbs, function (item, idx) {
@@ -396,7 +396,7 @@ define([
             var onTrackMouseDown = function (e) {
                 if ( me.disabled ) return;
 
-                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left) / me.width * 100)))),
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX*Common.Utils.zoom() - me.cmpEl.offset().left) / me.width * 100)))),
                     index = findThumb(pos),
                     lastValue = me.thumbs[index].value,
                     value = pos/me.delta + me.minValue;

apps/common/main/lib/component/Switcher.js

@@ -111,7 +111,7 @@ define([
                 $(document).off('mouseup.switcher',   onMouseUp);
                 $(document).off('mousemove.switcher', onMouseMove);
 
-                var pos = Math.round((e.pageX - me._dragstart));
+                var pos = Math.round((e.pageX*Common.Utils.zoom() - me._dragstart));
                 me.value = (me.value) ? (pos > -me.delta) : (pos > me.delta);
                 me.cmpEl.toggleClass('on', me.value);
                 me.thumb.css({left: '', right: ''});
@@ -127,7 +127,7 @@ define([
                 e.preventDefault();
                 e.stopPropagation();
 
-                var pos = Math.round((e.pageX - me._dragstart));
+                var pos = Math.round((e.pageX*Common.Utils.zoom() - me._dragstart));
                 if (me.value) {
                     me.thumb.css({right: (pos<1) ? Math.min(me.width-me.thumbWidth - 2, -pos) : 0, left: 'auto'});
                 } else {
@@ -138,7 +138,7 @@ define([
 
             var onMouseDown = function (e) {
                 if ( me.disabled ) return;
-                me._dragstart = e.pageX;
+                me._dragstart = e.pageX*Common.Utils.zoom();
                 me._isMouseMove = false;
                 
                 $(document).on('mouseup.switcher',   onMouseUp);

apps/common/main/lib/component/SynchronizeTip.js

@@ -95,7 +95,7 @@ define([
 
             applyPlacement: function () {
                 var showxy = this.target.offset();
-                (this.placement == 'top') ? tipEl.css({bottom : $(document).height() - showxy.top + 'px', right: $(document).width() - showxy.left - this.target.width()/2 + 'px'})
+                (this.placement == 'top') ? tipEl.css({bottom : Common.Utils.innerHeight() - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'})
                                          : tipEl.css({top : showxy.top + this.target.height()/2 + 'px', left: showxy.left + this.target.width() + 'px'});
             },
 

apps/common/main/lib/component/TabBar.js

@@ -234,8 +234,8 @@ define([
 
                     function dragMove (e) {
                         if (!_.isUndefined(me.drag)) {
-                            me.drag.moveX = e.clientX;
-                            var leftPos = Math.max(e.clientX - me.drag.anchorX - me.tabBarLeft - me.scrollLeft, 0);
+                            me.drag.moveX = e.clientX*Common.Utils.zoom();
+                            var leftPos = Math.max(me.drag.moveX - me.drag.anchorX - me.tabBarLeft - me.scrollLeft, 0);
                             leftPos = Math.min(leftPos, me.tabBarRight - me.tabBarLeft - me.drag.tabWidth - me.scrollLeft);
 
                             me.drag.tab.$el.css('left', leftPos + 'px');
@@ -250,16 +250,17 @@ define([
                     }
 
                     if (!_.isUndefined(bar) && !_.isUndefined(tab) && bar.tabs.length > 1) {
-                        var index   = bar.tabs.indexOf(tab);
+                        var index   = bar.tabs.indexOf(tab),
+                            _clientX = e.clientX*Common.Utils.zoom();
                         me.bar      = bar;
                         me.drag     = {tab: tab, index: index};
 
                         this.calculateBounds();
                         this.setAbsTabs();
 
-                        me.drag.moveX       = e.clientX;
-                        me.drag.mouseX      = e.clientX;
-                        me.drag.anchorX     = e.clientX - this.bounds[index].left;
+                        me.drag.moveX       = _clientX;
+                        me.drag.mouseX      = _clientX;
+                        me.drag.anchorX     = _clientX - this.bounds[index].left;
                         me.drag.tabWidth    = this.bounds[index].width;
 
                         document.addEventListener('dragstart',dragDropText);

apps/common/main/lib/component/TableStyler.js

@@ -144,8 +144,8 @@ define([
 
                 this.cmpEl.on('click', function(event){
                     var pos = {
-                        x: event.pageX - me.cmpEl.offset().left,
-                        y: event.pageY - me.cmpEl.offset().top
+                        x: event.pageX*Common.Utils.zoom() - me.cmpEl.offset().left,
+                        y: event.pageY*Common.Utils.zoom() - me.cmpEl.offset().top
                     };
 
                     var ptInPoly = function(npol, xp, yp, x, y) {

apps/common/main/lib/component/Window.js

@@ -211,8 +211,8 @@ define([
                 var main_width  = document.documentElement.offsetWidth;
                 var main_height = document.documentElement.offsetHeight;
             } else {
-                main_width  = window.innerWidth;
-                main_height = window.innerHeight;
+                main_width  = Common.Utils.innerWidth();
+                main_height = Common.Utils.innerHeight();
             }
 
             if (this.initConfig.height == 'auto') {
@@ -244,16 +244,17 @@ define([
         function _dragstart(event) {
             if ( $(event.target).hasClass('close') ) return;
             Common.UI.Menu.Manager.hideAll();
+            var zoom = (event instanceof jQuery.Event) ? Common.Utils.zoom() : 1;
             this.dragging.enabled = true;
-            this.dragging.initx = event.pageX - parseInt(this.$window.css('left'));
-            this.dragging.inity = event.pageY - parseInt(this.$window.css('top'));
+            this.dragging.initx = event.pageX*zoom - parseInt(this.$window.css('left'));
+            this.dragging.inity = event.pageY*zoom - parseInt(this.$window.css('top'));
 
             if (window.innerHeight == undefined) {
                 var main_width  = document.documentElement.offsetWidth;
                 var main_height = document.documentElement.offsetHeight;
             } else {
-                main_width  = window.innerWidth;
-                main_height = window.innerHeight;
+                main_width  = Common.Utils.innerWidth();
+                main_height = Common.Utils.innerHeight();
             }
 
             this.dragging.maxx  = main_width - parseInt(this.$window.css("width"));
@@ -280,8 +281,9 @@ define([
 
         function _mousemove(event) {
             if (this.dragging.enabled) {
-                var left    = event.pageX - this.dragging.initx,
-                    top     = event.pageY - this.dragging.inity;
+                var zoom = (event instanceof jQuery.Event) ? Common.Utils.zoom() : 1,
+                    left    = event.pageX*zoom - this.dragging.initx,
+                    top     = event.pageY*zoom - this.dragging.inity;
 
                 left < 0 ? (left = 0) : left > this.dragging.maxx && (left = this.dragging.maxx);
                 top < 0 ? (top = 0) : top > this.dragging.maxy && (top = this.dragging.maxy);
@@ -298,16 +300,16 @@ define([
                 top = parseInt(this.$window.css('top'));
 
             this.resizing.enabled = true;
-            this.resizing.initpage_x = event.pageX;
-            this.resizing.initpage_y = event.pageY;
-            this.resizing.initx = event.pageX - left;
-            this.resizing.inity = event.pageY - top;
+            this.resizing.initpage_x = event.pageX*Common.Utils.zoom();
+            this.resizing.initpage_y = event.pageY*Common.Utils.zoom();
+            this.resizing.initx = this.resizing.initpage_x - left;
+            this.resizing.inity = this.resizing.initpage_y - top;
             this.resizing.initw = parseInt(this.$window.css("width"));
             this.resizing.inith = parseInt(this.$window.css("height"));
             this.resizing.type = [el.hasClass('left') ? -1 : (el.hasClass('right') ? 1 : 0), el.hasClass('top') ? -1 : (el.hasClass('bottom') ? 1 : 0)];
 
-            var main_width  = (window.innerHeight == undefined) ? document.documentElement.offsetWidth : window.innerWidth,
-                main_height = (window.innerHeight == undefined) ? document.documentElement.offsetHeight : window.innerHeight,
+            var main_width  = (window.innerHeight == undefined) ? document.documentElement.offsetWidth : Common.Utils.innerWidth(),
+                main_height = (window.innerHeight == undefined) ? document.documentElement.offsetHeight : Common.Utils.innerHeight(),
                 maxwidth = (this.initConfig.maxwidth) ? this.initConfig.maxwidth : main_width,
                 maxheight = (this.initConfig.maxheight) ? this.initConfig.maxheight : main_height;
 
@@ -337,17 +339,20 @@ define([
 
         function _resize(event) {
             if (this.resizing.enabled) {
-                var resized = false;
-                if (this.resizing.type[0] && event.pageX<this.resizing.maxx && event.pageX>this.resizing.minx) {
+                var resized = false,
+                    zoom = (event instanceof jQuery.Event) ? Common.Utils.zoom() : 1,
+                    pageX = event.pageX*zoom,
+                    pageY = event.pageY*zoom;
+                if (this.resizing.type[0] && pageX<this.resizing.maxx && pageX>this.resizing.minx) {
                     if (this.resizing.type[0]<0)
-                        this.$window.css({left: event.pageX - this.resizing.initx});
-                    this.setWidth(this.resizing.initw + (event.pageX - this.resizing.initpage_x) * this.resizing.type[0]);
+                        this.$window.css({left: pageX - this.resizing.initx});
+                    this.setWidth(this.resizing.initw + (pageX - this.resizing.initpage_x) * this.resizing.type[0]);
                     resized = true;
                 }
-                if (this.resizing.type[1] && event.pageY<this.resizing.maxy && event.pageY>this.resizing.miny) {
+                if (this.resizing.type[1] && pageY<this.resizing.maxy && pageY>this.resizing.miny) {
                     if (this.resizing.type[1]<0)
-                        this.$window.css({top: event.pageY - this.resizing.inity});
-                    this.setHeight(this.resizing.inith + (event.pageY - this.resizing.initpage_y) * this.resizing.type[1]);
+                        this.$window.css({top: pageY - this.resizing.inity});
+                    this.setHeight(this.resizing.inith + (pageY - this.resizing.initpage_y) * this.resizing.type[1]);
                     resized = true;
                 }
                 if (resized) this.fireEvent('resizing');

apps/common/main/lib/controller/ExternalDiagramEditor.js

@@ -97,9 +97,10 @@ define([
                             externalEditor.serviceCommand('window:drag', state == 'start');
                         },this),
                         'show': _.bind(function(cmp){
-                            var h = this.diagramEditorView.getHeight();
-                            if (window.innerHeight>h && h<700 || window.innerHeight<h) {
-                                h = Math.min(window.innerHeight, 700);
+                            var h = this.diagramEditorView.getHeight(),
+                                innerHeight = Common.Utils.innerHeight();
+                            if (innerHeight>h && h<700 || innerHeight<h) {
+                                h = Math.min(innerHeight, 700);
                                 this.diagramEditorView.setHeight(h);
                             }
 

apps/common/main/lib/controller/ExternalMergeEditor.js

@@ -97,9 +97,10 @@ define([
                             externalEditor.serviceCommand('window:drag', state == 'start');
                         },this),
                         'show': _.bind(function(cmp){
-                            var h = this.mergeEditorView.getHeight();
-                            if (window.innerHeight>h && h<700 || window.innerHeight<h) {
-                                h = Math.min(window.innerHeight, 700);
+                            var h = this.mergeEditorView.getHeight(),
+                                innerHeight = Common.Utils.innerHeight();
+                            if (innerHeight>h && h<700 || innerHeight<h) {
+                                h = Math.min(innerHeight, 700);
                                 this.mergeEditorView.setHeight(h);
                             }
 

apps/common/main/lib/controller/Plugins.js

@@ -292,16 +292,16 @@ define([
                 if (this.pluginDlg.binding.dragStop) this.pluginDlg.binding.dragStop();
                 if (this.pluginDlg.binding.resizeStop) this.pluginDlg.binding.resizeStop();
             } else
-                Common.NotificationCenter.trigger('frame:mouseup', jQuery.Event("mouseup", { pageX: x+this._moveOffset.x, pageY: y+this._moveOffset.y } ));
+                Common.NotificationCenter.trigger('frame:mouseup', { pageX: x*Common.Utils.zoom()+this._moveOffset.x, pageY: y*Common.Utils.zoom()+this._moveOffset.y });
         },
         
         onPluginMouseMove: function(x, y) {
             if (this.pluginDlg) {
                 var offset = this.pluginContainer.offset();
-                if (this.pluginDlg.binding.drag) this.pluginDlg.binding.drag(jQuery.Event("mousemove", { pageX: x+offset.left, pageY: y+offset.top } ));
-                if (this.pluginDlg.binding.resize) this.pluginDlg.binding.resize(jQuery.Event("mousemove", { pageX: x+offset.left, pageY: y+offset.top } ));
+                if (this.pluginDlg.binding.drag) this.pluginDlg.binding.drag({ pageX: x*Common.Utils.zoom()+offset.left, pageY: y*Common.Utils.zoom()+offset.top });
+                if (this.pluginDlg.binding.resize) this.pluginDlg.binding.resize({ pageX: x*Common.Utils.zoom()+offset.left, pageY: y*Common.Utils.zoom()+offset.top });
             } else
-                Common.NotificationCenter.trigger('frame:mousemove', jQuery.Event("mousemove", { pageX: x+this._moveOffset.x, pageY: y+this._moveOffset.y } ));
+                Common.NotificationCenter.trigger('frame:mousemove', { pageX: x*Common.Utils.zoom()+this._moveOffset.x, pageY: y*Common.Utils.zoom()+this._moveOffset.y });
         }
 
     }, Common.Controllers.Plugins || {}));

apps/common/main/lib/util/Tip.js

@@ -115,7 +115,7 @@
         },
 
         mousemove: function (e) {
-            this.targetXY = [e.clientX, e.clientY];
+            this.targetXY = [e.clientX*Common.Utils.zoom(), e.clientY*Common.Utils.zoom()];
         },
 
         leave: function(obj) {
@@ -153,10 +153,11 @@
                         $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element);
 
                     if (typeof at == 'object') { 
-                        var tp = {top: at[1] + 15, left: at[0] + 18};
+                        var tp = {top: at[1] + 15, left: at[0] + 18},
+                            innerWidth = Common.Utils.innerWidth();
 
-                        if (tp.left + $tip.width() > window.innerWidth) {
-                            tp.left = window.innerWidth - $tip.width() - 30;
+                        if (tp.left + $tip.width() > innerWidth) {
+                            tp.left = innerWidth - $tip.width() - 30;
                         }
 
                         $tip.offset(tp).addClass('in');

apps/common/main/lib/util/utils.js

@@ -101,7 +101,21 @@ Common.Utils = _.extend(new(function() {
             Chart      : 6,
             MailMerge  : 7,
             TextArt    : 8
+        },
+        me = this,
+        checkSize = function() {
+            if (isChrome && !isOpera && document && document.firstElementChild && document.body) {
+                document.firstElementChild.style.zoom = "reset";
+                me.zoom = document.body.clientWidth / window.innerWidth;
+            }
+            me.innerWidth = window.innerWidth * me.zoom;
+            me.innerHeight = window.innerHeight * me.zoom;
         };
+        me.zoom = 1;
+        me.innerWidth = window.innerWidth;
+        me.innerHeight = window.innerHeight;
+        checkSize();
+        $(window).on('resize', checkSize);
 
     return {
         userAgent: userAgent,
@@ -162,7 +176,10 @@ Common.Utils = _.extend(new(function() {
         emailStrongRe: emailStrongRe,
         ipStrongRe: ipStrongRe,
         hostnameStrongRe: hostnameStrongRe,
-        documentSettingsType: documentSettingsType
+        documentSettingsType: documentSettingsType,
+        zoom: function() {return me.zoom;},
+        innerWidth: function() {return me.innerWidth;},
+        innerHeight: function() {return me.innerHeight;}
     }
 })(), Common.Utils || {});
 

apps/common/main/lib/view/ExternalDiagramEditor.js

@@ -48,7 +48,7 @@ define([
             _.extend(_options,  {
                 title: this.textTitle,
                 width: 910,
-                height: (window.innerHeight-700)<0 ? window.innerHeight: 700,
+                height: (Common.Utils.innerHeight()-700)<0 ? Common.Utils.innerHeight(): 700,
                 cls: 'advanced-settings-dlg',
                 header: true,
                 toolclose: 'hide',
@@ -134,8 +134,8 @@ define([
                 this.$window.find('> .body').css('height', height-header_height);
                 this.$window.find('> .body > .box').css('height', height-85);
 
-                var top  = ((parseInt(window.innerHeight) - parseInt(height)) / 2) * 0.9;
-                var left = (parseInt(window.innerWidth) - parseInt(this.initConfig.width)) / 2;
+                var top  = ((Common.Utils.innerHeight() - parseInt(height)) / 2) * 0.9;
+                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
 
                 this.$window.css('left',left);
                 this.$window.css('top',top);

apps/common/main/lib/view/ExternalMergeEditor.js

@@ -48,7 +48,7 @@ define([
             _.extend(_options,  {
                 title: this.textTitle,
                 width: 910,
-                height: (window.innerHeight-700)<0 ? window.innerHeight: 700,
+                height: (Common.Utils.innerHeight()-700)<0 ? Common.Utils.innerHeight(): 700,
                 cls: 'advanced-settings-dlg',
                 header: true,
                 toolclose: 'hide',
@@ -134,8 +134,8 @@ define([
                 this.$window.find('> .body').css('height', height-header_height);
                 this.$window.find('> .body > .box').css('height', height-85);
 
-                var top  = ((parseInt(window.innerHeight) - parseInt(height)) / 2) * 0.9;
-                var left = (parseInt(window.innerWidth) - parseInt(this.initConfig.width)) / 2;
+                var top  = ((Common.Utils.innerHeight() - parseInt(height)) / 2) * 0.9;
+                var left = (Common.Utils.innerWidth() - parseInt(this.initConfig.width)) / 2;
 
                 this.$window.css('left',left);
                 this.$window.css('top',top);

apps/common/main/lib/view/Header.js

@@ -194,7 +194,7 @@ define([
             if (e.which == 3) { // right button click
                 Common.UI.Menu.Manager.hideAll();
                 var me = this,
-                    showPoint = [e.pageX, e.pageY],
+                    showPoint = [e.pageX*Common.Utils.zoom(), e.pageY*Common.Utils.zoom()],
                     menuContainer = $(this.el).find(Common.Utils.String.format('#menu-container-{0}',  this.gotoDocsMenu.id));
                 if (!this.gotoDocsMenu.rendered) {
                     // Prepare menu container

apps/common/main/lib/view/Plugins.js

@@ -202,9 +202,9 @@ define([
             }, options);
 
             var header_footer = (_options.buttons && _.size(_options.buttons)>0) ? 85 : 34;
-            _options.width = (window.innerWidth-_options.width)<0 ? window.innerWidth: _options.width,
+            _options.width = (Common.Utils.innerWidth()-_options.width)<0 ? Common.Utils.innerWidth(): _options.width,
             _options.height += header_footer;
-            _options.height = (window.innerHeight-_options.height)<0 ? window.innerHeight: _options.height;
+            _options.height = (Common.Utils.innerHeight()-_options.height)<0 ? Common.Utils.innerHeight(): _options.height;
 
             this.template = [
                 '<div id="id-plugin-container" class="box" style="height:' + (_options.height-header_footer) + 'px;">',
@@ -268,8 +268,8 @@ define([
         },
 
         setInnerSize: function(width, height) {
-            var maxHeight = parseInt(window.innerHeight),
-                maxWidth = parseInt(window.innerWidth),
+            var maxHeight = Common.Utils.innerHeight(),
+                maxWidth = Common.Utils.innerWidth(),
                 borders_width = (parseInt(this.$window.css('border-left-width')) + parseInt(this.$window.css('border-right-width')));
             if (maxHeight<height + this._headerFooterHeight)
                 height = maxHeight - this._headerFooterHeight;

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

@@ -1759,11 +1759,11 @@ define([
             menu.items[3].setDisabled(isAllDefailtNotModifaed);
             menu.items[4].setDisabled(isAllCustomDeleted);
 
-            var top = e.clientY;
+            var top = e.clientY*Common.Utils.zoom();
             if ($('#header-container').is(":visible")) {
                 top -= $('#header-container').height()
             }
-            showPoint = [e.clientX, top];
+            showPoint = [e.clientX*Common.Utils.zoom(), top];
 
             if (record != undefined) {
                 //itemMenu

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

@@ -784,7 +784,7 @@ define([
                     });
                 }).on('show:after', function(btn, e) {
                     var mnu = $(this.el).find('.dropdown-menu '),
-                        docH = $(document).height(),
+                        docH = Common.Utils.innerHeight(),
                         menuH = mnu.outerHeight(),
                         top = parseInt(mnu.css('top'));
 

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

@@ -791,7 +791,7 @@ define([
                     });
                 }).on('show:after', function(btn, e) {
                     var mnu = $(this.el).find('.dropdown-menu '),
-                        docH = $(document).height(),
+                        docH = Common.Utils.innerHeight(),
                         menuH = mnu.outerHeight(),
                         top = parseInt(mnu.css('top'));
 

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

@@ -1001,9 +1001,8 @@ define([
                     rect = config.asc_getCellCoord(),
                     x = rect.asc_getX() + rect.asc_getWidth() +offset.left,
                     y = rect.asc_getY() + rect.asc_getHeight() + offset.top;
-                var doc = $(document),
-                    docwidth = doc.width(),
-                    docheight = doc.height();
+                var docwidth = Common.Utils.innerWidth(),
+                    docheight = Common.Utils.innerHeight();
                 if (x+me.dlgFilter.options.width > docwidth)
                     x = docwidth - me.dlgFilter.options.width - 5;
                 if (y+me.dlgFilter.options.height > docheight)
@@ -1339,7 +1338,7 @@ define([
 
                 var me                  = this,
                     documentHolderView  = me.documentHolder,
-                    showPoint           = [event.pageX - documentHolderView.cmpEl.offset().left, event.pageY - documentHolderView.cmpEl.offset().top],
+                    showPoint           = [event.pageX*Common.Utils.zoom() - documentHolderView.cmpEl.offset().left, event.pageY*Common.Utils.zoom() - documentHolderView.cmpEl.offset().top],
                     menuContainer       = documentHolderView.cmpEl.find(Common.Utils.String.format('#menu-container-{0}', menu.id));
 
                 if (!menu.rendered) {

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

@@ -806,7 +806,7 @@ define([
                         })
                         .mousemove($.proxy(function(e){
                             if (this.isDiagramDrag) {
-                                Common.Gateway.internalMessage('processMouse', {event: 'mouse:move', pagex: e.pageX, pagey: e.pageY});
+                                Common.Gateway.internalMessage('processMouse', {event: 'mouse:move', pagex: e.pageX*Common.Utils.zoom(), pagey: e.pageY*Common.Utils.zoom()});
                             }
                         },this));
                 }

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

@@ -976,8 +976,10 @@ define([
 
                 if (target.length) {
                     bound = target.get(0).getBoundingClientRect();
-                    if (bound.left < event.clientX && event.clientX < bound.right &&
-                        bound.top < event.clientY && event.clientY < bound.bottom) {
+                    var _clientX = event.clientX*Common.Utils.zoom(),
+                        _clientY = event.clientY*Common.Utils.zoom();
+                    if (bound.left < _clientX && _clientX < bound.right &&
+                        bound.top < _clientY && _clientY < bound.bottom) {
                         isLabel = true;
                     }
                 }

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

@@ -130,8 +130,8 @@ define([
                     main_width = document.documentElement.offsetWidth;
                     main_height = document.documentElement.offsetHeight;
                 } else {
-                    main_width = window.innerWidth;
-                    main_height = window.innerHeight;
+                    main_width = Common.Utils.innerWidth();
+                    main_height = Common.Utils.innerHeight();
                 }
 
                 top = ((parseInt(main_height, 10) - parseInt(win_height, 10)) / 2) * 0.9;

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

@@ -1204,7 +1204,7 @@ define([
                     });
                 }).on('show:after', function(btn, e) {
                     var mnu = $(this.el).find('.dropdown-menu '),
-                        docH = $(document).height(),
+                        docH = Common.Utils.innerHeight(),
                         menuH = mnu.outerHeight(),
                         top = parseInt(mnu.css('top'));