Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Use applicationPixelRatio instead of devicePixelRatio

Browse source
This commit is contained in:
Julia Radzhabova 2021-03-29 22:33:40 +03:00
parent 6ac5a3372b
commit 8274e4d3f1
4 changed files with 38 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
apps/common/main/lib/component/ComboBoxFonts.js
View file

@ -51,21 +51,36 @@ define([
Common.UI.ComboBoxFonts = Common.UI.ComboBox.extend((function() { Common.UI.ComboBoxFonts = Common.UI.ComboBox.extend((function() {
var iconWidth = 302, var iconWidth = 302,
iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 26, iconHeight = Asc.FONT_THUMBNAIL_HEIGHT || 26,
isRetina = window.devicePixelRatio > 1,
thumbCanvas = document.createElement('canvas'), thumbCanvas = document.createElement('canvas'),
thumbContext = thumbCanvas.getContext('2d'), thumbContext = thumbCanvas.getContext('2d'),
thumbPath = '../../../../sdkjs/common/Images/fonts_thumbnail.png', thumbs = [
thumbPath2x = '../../../../sdkjs/common/Images/fonts_thumbnail@2x.png', {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, listItemHeight = 26,
spriteCols = 1; spriteCols = 1,
applicationPixelRatio = Common.Utils.applicationPixelRatio();
if (typeof window['AscDesktopEditor'] === 'object') { if (typeof window['AscDesktopEditor'] === 'object') {
thumbPath = window['AscDesktopEditor'].getFontsSprite(); thumbs[0].path = window['AscDesktopEditor'].getFontsSprite();
thumbPath2x = window['AscDesktopEditor'].getFontsSprite(true); thumbs[1].path = thumbs[2].path = window['AscDesktopEditor'].getFontsSprite(true);
} }
thumbCanvas.height = isRetina ? iconHeight * 2 : iconHeight; var bestDistance = Math.abs(applicationPixelRatio-thumbs[0].ratio);
thumbCanvas.width = isRetina ? iconWidth * 2 : iconWidth; 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 { return {
template: _.template([ template: _.template([
@ -279,13 +294,8 @@ define([
return img != null ? img[0].src : undefined; return img != null ? img[0].src : undefined;
} }
if (isRetina) { thumbContext.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
thumbContext.clearRect(0, 0, iconWidth * 2, iconHeight * 2); thumbContext.drawImage(this.spriteThumbs, 0, -thumbs[thumbIdx].height * Math.floor(opts.imgidx/spriteCols));
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));
}
return thumbCanvas.toDataURL(); return thumbCanvas.toDataURL();
}, },
@ -306,7 +316,7 @@ define([
if (callback) { if (callback) {
this.spriteThumbs = new Image(); this.spriteThumbs = new Image();
this.spriteThumbs.onload = callback; this.spriteThumbs.onload = callback;
this.spriteThumbs.src = isRetina ? thumbPath2x : thumbPath; this.spriteThumbs.src = thumbs[thumbIdx].path;
} }
}, },
@ -314,7 +324,7 @@ define([
var me = this; var me = this;
this.loadSprite(function() { 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.store.set(store.toJSON());
me.rendered = false; me.rendered = false;
@ -534,21 +544,16 @@ define([
var fontImage = document.createElement('canvas'); var fontImage = document.createElement('canvas');
var context = fontImage.getContext('2d'); var context = fontImage.getContext('2d');
fontImage.height = isRetina ? iconHeight * 2 : iconHeight; fontImage.height = thumbs[thumbIdx].height;
fontImage.width = isRetina ? iconWidth * 2 : iconWidth; fontImage.width = thumbs[thumbIdx].width;
fontImage.style.width = iconWidth + 'px'; fontImage.style.width = iconWidth + 'px';
fontImage.style.height = iconHeight + 'px'; fontImage.style.height = iconHeight + 'px';
index = Math.floor(me.store.at(j).get('imgidx')/spriteCols); index = Math.floor(me.store.at(j).get('imgidx')/spriteCols);
if (isRetina) { context.clearRect(0, 0, thumbs[thumbIdx].width, thumbs[thumbIdx].height);
context.clearRect(0, 0, iconWidth * 2, iconHeight * 2); context.drawImage(me.spriteThumbs, 0, -thumbs[thumbIdx].height * index);
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);
}
me.tiles[j] = fontImage; me.tiles[j] = fontImage;
$(listItems[j]).get(0).appendChild(fontImage); $(listItems[j]).get(0).appendChild(fontImage);

4
apps/common/main/lib/component/ComboDataView.js
View file

@ -468,12 +468,12 @@ define([
setItemWidth: function(width) { setItemWidth: function(width) {
if (this.itemWidth != 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) { setItemHeight: function(height) {
if (this.itemHeight != height) if (this.itemHeight != height)
this.itemHeight = window.devicePixelRatio > 1 ? height / 2 : height; this.itemHeight = Common.Utils.applicationPixelRatio() > 1 ? height / 2 : height;
}, },
removeTips: function() { removeTips: function() {

3
apps/common/main/lib/util/utils.js
View file

@ -151,8 +151,10 @@ Common.Utils = _.extend(new(function() {
me.zoom = scale.correct ? scale.zoom : 1; me.zoom = scale.correct ? scale.zoom : 1;
me.innerWidth = window.innerWidth * me.zoom; me.innerWidth = window.innerWidth * me.zoom;
me.innerHeight = window.innerHeight * me.zoom; me.innerHeight = window.innerHeight * me.zoom;
me.applicationPixelRatio = scale.applicationPixelRatio || scale.devicePixelRatio;
}; };
me.zoom = 1; me.zoom = 1;
me.applicationPixelRatio = 1;
me.innerWidth = window.innerWidth; me.innerWidth = window.innerWidth;
me.innerHeight = window.innerHeight; me.innerHeight = window.innerHeight;
if ( isIE ) if ( isIE )
@ -227,6 +229,7 @@ Common.Utils = _.extend(new(function() {
documentSettingsType: documentSettingsType, documentSettingsType: documentSettingsType,
importTextType: importTextType, importTextType: importTextType,
zoom: function() {return me.zoom;}, zoom: function() {return me.zoom;},
applicationPixelRatio: function() {return me.applicationPixelRatio;},
topOffset: 0, topOffset: 0,
innerWidth: function() {return me.innerWidth;}, innerWidth: function() {return me.innerWidth;},
innerHeight: function() {return me.innerHeight;}, innerHeight: function() {return me.innerHeight;},

4
apps/common/main/lib/view/Plugins.js
View file

@ -151,7 +151,7 @@ define([
var modes = model.get('variations'), var modes = model.get('variations'),
guid = model.get('guid'), guid = model.get('guid'),
icons = modes[model.get('currentVariation')].get('icons'), 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({ btn = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconImg: _icon_url, iconImg: _icon_url,
@ -289,7 +289,7 @@ define([
var modes = model.get('variations'), var modes = model.get('variations'),
guid = model.get('guid'), guid = model.get('guid'),
icons = modes[model.get('currentVariation')].get('icons'), 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 = []; var _menu_items = [];
_.each(model.get('variations'), function(variation, index) { _.each(model.get('variations'), function(variation, index) {