From 8274e4d3f1e5685cdb9ae3f75d930a2926762453 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Mon, 29 Mar 2021 22:33:40 +0300
Subject: [PATCH] Use applicationPixelRatio instead of devicePixelRatio

---
 .../main/lib/component/ComboBoxFonts.js       | 57 ++++++++++---------
 .../main/lib/component/ComboDataView.js       |  4 +-
 apps/common/main/lib/util/utils.js            |  3 +
 apps/common/main/lib/view/Plugins.js          |  4 +-
 4 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js
index 5d3e28991..73dd410ad 100644
--- a/apps/common/main/lib/component/ComboBoxFonts.js
+++ b/apps/common/main/lib/component/ComboBoxFonts.js
@@ -51,21 +51,36 @@ define([
     Common.UI.ComboBoxFonts = Common.UI.ComboBox.extend((function() {
         var iconWidth       = 302,
             iconHeight      = Asc.FONT_THUMBNAIL_HEIGHT || 26,
-            isRetina        = window.devicePixelRatio > 1,
             thumbCanvas     = document.createElement('canvas'),
             thumbContext    = thumbCanvas.getContext('2d'),
-            thumbPath       = '../../../../sdkjs/common/Images/fonts_thumbnail.png',
-            thumbPath2x     = '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png',
+            thumbs       = [
+                {ratio: 1,      path: '../../../../sdkjs/common/Images/fonts_thumbnail.png', width: iconWidth, height: iconHeight},
+                {ratio: 1.5,    path: '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: iconWidth * 2, height: iconHeight * 2},
+                {ratio: 2,      path: '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', width: iconWidth * 2, height: iconHeight * 2}
+            ],
+            thumbIdx = 0,
             listItemHeight  = 26,
-            spriteCols     = 1;
+            spriteCols     = 1,
+            applicationPixelRatio = Common.Utils.applicationPixelRatio();
 
         if (typeof window['AscDesktopEditor'] === 'object') {
-            thumbPath       = window['AscDesktopEditor'].getFontsSprite();
-            thumbPath2x     = window['AscDesktopEditor'].getFontsSprite(true);
+            thumbs[0].path     = window['AscDesktopEditor'].getFontsSprite();
+            thumbs[1].path = thumbs[2].path     = window['AscDesktopEditor'].getFontsSprite(true);
         }
 
-        thumbCanvas.height  = isRetina ? iconHeight * 2 : iconHeight;
-        thumbCanvas.width   = isRetina ? iconWidth  * 2 : iconWidth;
+        var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio);
+        var currentDistance = 0;
+        for (var i=1; i<thumbs.length; i++) {
+            currentDistance = Math.abs(applicationPixelRatio-thumbs[i].ratio);
+            if (currentDistance < (bestDistance - 0.0001))
+            {
+                bestDistance = currentDistance;
+                thumbIdx = i;
+            }
+        }
+
+        thumbCanvas.height  = thumbs[thumbIdx].height;
+        thumbCanvas.width   = thumbs[thumbIdx].width;
 
         return {
             template: _.template([
@@ -279,13 +294,8 @@ define([
                     return img != null ? img[0].src : undefined;
                 }
 
-                if (isRetina) {
-                    thumbContext.clearRect(0, 0, iconWidth * 2, iconHeight * 2);
-                    thumbContext.drawImage(this.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * 2 * Math.floor(opts.imgidx/spriteCols));
-                } else {
-                    thumbContext.clearRect(0, 0, iconWidth, iconHeight);
-                    thumbContext.drawImage(this.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * Math.floor(opts.imgidx/spriteCols));
-                }
+                thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
+                thumbContext.drawImage(this.spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(opts.imgidx/spriteCols));
 
                 return thumbCanvas.toDataURL();
             },
@@ -306,7 +316,7 @@ define([
                 if (callback) {
                     this.spriteThumbs = new Image();
                     this.spriteThumbs.onload = callback;
-                    this.spriteThumbs.src = isRetina ? thumbPath2x : thumbPath;
+                    this.spriteThumbs.src = thumbs[thumbIdx].path;
                 }
             },
 
@@ -314,7 +324,7 @@ define([
                 var me = this;
 
                 this.loadSprite(function() {
-                    spriteCols = Math.floor(me.spriteThumbs.width / (isRetina ? iconWidth  * 2 : iconWidth)) || 1;
+                    spriteCols = Math.floor(me.spriteThumbs.width / (thumbs[thumbIdx].width)) || 1;
                     me.store.set(store.toJSON());
 
                     me.rendered = false;
@@ -534,21 +544,16 @@ define([
                             var fontImage = document.createElement('canvas');
                             var context = fontImage.getContext('2d');
 
-                            fontImage.height = isRetina ? iconHeight * 2 : iconHeight;
-                            fontImage.width = isRetina ? iconWidth  * 2 : iconWidth;
+                            fontImage.height = thumbs[thumbIdx].height;
+                            fontImage.width = thumbs[thumbIdx].width;
 
                             fontImage.style.width = iconWidth + 'px';
                             fontImage.style.height = iconHeight + 'px';
 
                             index = Math.floor(me.store.at(j).get('imgidx')/spriteCols);
 
-                            if (isRetina) {
-                                context.clearRect(0, 0, iconWidth * 2, iconHeight * 2);
-                                context.drawImage(me.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * 2 * index);
-                            } else {
-                                context.clearRect(0, 0, iconWidth, iconHeight);
-                                context.drawImage(me.spriteThumbs, 0, -Asc.FONT_THUMBNAIL_HEIGHT * index);
-                            }
+                            context.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
+                            context.drawImage(me.spriteThumbs, 0, -thumbs[thumbIdx].height * index);
 
                             me.tiles[j] = fontImage;
                             $(listItems[j]).get(0).appendChild(fontImage);
diff --git a/apps/common/main/lib/component/ComboDataView.js b/apps/common/main/lib/component/ComboDataView.js
index 7c0d31c99..25f912a47 100644
--- a/apps/common/main/lib/component/ComboDataView.js
+++ b/apps/common/main/lib/component/ComboDataView.js
@@ -468,12 +468,12 @@ define([
 
         setItemWidth: function(width) {
             if (this.itemWidth != width)
-                this.itemWidth = window.devicePixelRatio > 1 ? width / 2 : width;
+                this.itemWidth = Common.Utils.applicationPixelRatio() > 1 ? width / 2 : width;
         },
 
         setItemHeight: function(height) {
             if (this.itemHeight != height)
-                this.itemHeight = window.devicePixelRatio > 1 ? height / 2 : height;
+                this.itemHeight = Common.Utils.applicationPixelRatio() > 1 ? height / 2 : height;
         },
 
         removeTips: function() {
diff --git a/apps/common/main/lib/util/utils.js b/apps/common/main/lib/util/utils.js
index 80df14641..393b19757 100644
--- a/apps/common/main/lib/util/utils.js
+++ b/apps/common/main/lib/util/utils.js
@@ -151,8 +151,10 @@ Common.Utils = _.extend(new(function() {
             me.zoom = scale.correct ? scale.zoom : 1;
             me.innerWidth = window.innerWidth * me.zoom;
             me.innerHeight = window.innerHeight * me.zoom;
+            me.applicationPixelRatio = scale.applicationPixelRatio || scale.devicePixelRatio;
         };
         me.zoom = 1;
+        me.applicationPixelRatio = 1;
         me.innerWidth = window.innerWidth;
         me.innerHeight = window.innerHeight;
         if ( isIE )
@@ -227,6 +229,7 @@ Common.Utils = _.extend(new(function() {
         documentSettingsType: documentSettingsType,
         importTextType: importTextType,
         zoom: function() {return me.zoom;},
+        applicationPixelRatio: function() {return me.applicationPixelRatio;},
         topOffset: 0,
         innerWidth: function() {return me.innerWidth;},
         innerHeight: function() {return me.innerHeight;},
diff --git a/apps/common/main/lib/view/Plugins.js b/apps/common/main/lib/view/Plugins.js
index 9a1296b17..9f79a2af5 100644
--- a/apps/common/main/lib/view/Plugins.js
+++ b/apps/common/main/lib/view/Plugins.js
@@ -151,7 +151,7 @@ define([
                         var modes = model.get('variations'),
                             guid = model.get('guid'),
                             icons = modes[model.get('currentVariation')].get('icons'),
-                            _icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length>2 ? 2 : 0)],
+                            _icon_url = model.get('baseUrl') + icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length>2 ? 2 : 0)],
                             btn = new Common.UI.Button({
                                 cls: 'btn-toolbar x-huge icon-top',
                                 iconImg: _icon_url,
@@ -289,7 +289,7 @@ define([
             var modes = model.get('variations'),
                 guid = model.get('guid'),
                 icons = modes[model.get('currentVariation')].get('icons'),
-                icon_url = model.get('baseUrl') + icons[((window.devicePixelRatio > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)];
+                icon_url = model.get('baseUrl') + icons[((Common.Utils.applicationPixelRatio() > 1) ? 1 : 0) + (icons.length > 2 ? 2 : 0)];
 
             var _menu_items = [];
             _.each(model.get('variations'), function(variation, index) {