fanruan
/
plugin-bi-screen-adaptive
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Pull request #40: BI-65798 feat：新增自定义缩放比功能 

Merge in PG2/plugin-bi-screen-adaptive from ~FAY/plugin-bi-screen-adaptive:release/10.0 to release/10.0

* commit '0966b8ba01d663f9cbbf0ce50cf5f23e66461cef':
  BI-65798 feat：新增自定义缩放比功能
release/10.0
fay 5 years ago
parent
293ec9a06d 0966b8ba01
commit
3447dc64c5
3 changed files with 280 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      plugin.xml
  2. 148
      src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js
  3. 148
      src/main/resources/com/finebi/plugin/web/scripts/entry.js

3
plugin.xml
Unescape View File

@ -3,12 +3,13 @@
<id>com.finebi.plugin.screenadaptive</id> <id>com.finebi.plugin.screenadaptive</id>
<name><![CDATA[BI模板屏幕自适应]]></name> <name><![CDATA[BI模板屏幕自适应]]></name>
<active>yes</active> <active>yes</active>
<version>1.1.35</version> <version>1.1.4</version>
<env-version>10.0</env-version> <env-version>10.0</env-version>
<jartime>2020-05-01</jartime> <jartime>2020-05-01</jartime>
<vendor>fay</vendor> <vendor>fay</vendor>
<description><![CDATA[预览BI模板时，根据屏幕的宽度自适应显示模板]]></description> <description><![CDATA[预览BI模板时，根据屏幕的宽度自适应显示模板]]></description>
<change-notes><![CDATA[ <change-notes><![CDATA[
[2020-05-25]支持自定义缩放比<br/>
[2020-05-21]解决部分情况下图表模糊的情况<br/> [2020-05-21]解决部分情况下图表模糊的情况<br/>
[2020-05-09]修复IE中有空白部分的情况<br/> [2020-05-09]修复IE中有空白部分的情况<br/>
[2019-10-24]修复IE中有空白部分的情况<br/> [2019-10-24]修复IE中有空白部分的情况<br/>

148
src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js
Unescape View File

@ -1,5 +1,5 @@
!(function () { !(function () {
var scale = 1, transformY = 0, selected = true; var scale = 1, transformY = 0, selected = true, globalScaleRatio = parseFloat(BI.Cache.getItem('scaleRatio')) || null;
var html = document.getElementsByTagName('html')[0]; var html = document.getElementsByTagName('html')[0];
var wrapper = document.getElementById("wrapper"); var wrapper = document.getElementById("wrapper");
var fixedWrapper = document.createElement("div"); var fixedWrapper = document.createElement("div");
@ -52,8 +52,8 @@
} }
// 进行缩放 // 进行缩放
function transformScale() { function transformScale(ratio) {
var bounds = getScaleBounds(); var bounds = getScaleBounds(ratio);
scale = bounds.scale; scale = bounds.scale;
wrapper.style.width = bounds.width + "px"; wrapper.style.width = bounds.width + "px";
@ -66,13 +66,11 @@
wrapper.style.overflowY = "auto"; wrapper.style.overflowY = "auto";
html.style.backgroundColor = "#ffffff"; html.style.backgroundColor = "#ffffff";
document.body.style.overflowX = "hidden"; document.body.style.overflowX = globalScaleRatio ? "auto" : "hidden";
document.body.style.overflowY = "auto"; document.body.style.overflowY = "auto";
fixedWrapper.style.overflow = "hidden"; fixedWrapper.style.overflow = "hidden";
if (scale < 1) {
fixedWrapper.style.width = bounds.width * scale + "px"; fixedWrapper.style.width = bounds.width * scale + "px";
fixedWrapper.style.height = bounds.height * scale + "px"; fixedWrapper.style.height = bounds.height * scale + "px";
}
window.scale = Math.max(window.devicePixelRatio * scale, 1); window.scale = Math.max(window.devicePixelRatio * scale, 1);
} }
@ -102,7 +100,7 @@
} }
// 获取缩放倍数，原模板宽高 // 获取缩放倍数，原模板宽高
function getScaleBounds() { function getScaleBounds(ratio) {
var widgets = BI.designConfigure.widgets, var widgets = BI.designConfigure.widgets,
layoutRatio = BI.designConfigure.layoutRatio, layoutRatio = BI.designConfigure.layoutRatio,
freeLayoutRatio = BI.designConfigure.freeLayoutRatio, freeLayoutRatio = BI.designConfigure.freeLayoutRatio,
@ -135,12 +133,27 @@
var templateWidth = (Math.round((right / (layoutRatio.x || 1)) || (freeRight / (freeLayoutRatio.x || 1)))) + 60; var templateWidth = (Math.round((right / (layoutRatio.x || 1)) || (freeRight / (freeLayoutRatio.x || 1)))) + 60;
var templateHeight = (Math.round((bottom / (layoutRatio.y || 1)) || (freeBottom / (freeLayoutRatio.y || 1)))) + 30; var templateHeight = (Math.round((bottom / (layoutRatio.y || 1)) || (freeBottom / (freeLayoutRatio.y || 1)))) + 30;
var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1)); var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1));
var bHeight = html.clientHeight / scaleRatio;
var resultWidth = 0;
var resultHeight = 0;
var bHeight = 0;
if (ratio) {
scaleRatio = ratio;
bHeight = html.clientHeight / scaleRatio;
resultWidth = templateWidth;
resultHeight = Math.max(bHeight, templateHeight);
} else {
bHeight = html.clientHeight / scaleRatio;
resultWidth = html.clientWidth / scaleRatio;
resultHeight = Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight);
}
return { return {
scale: scaleRatio, scale: scaleRatio,
width: html.clientWidth / scaleRatio, width: resultWidth,
height: Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight) height: resultHeight
}; };
} }
@ -344,7 +357,7 @@
var selectHandler = BI.debounce(function () { var selectHandler = BI.debounce(function () {
selected && prepareEnv(); selected && prepareEnv();
selected ? transformScale() : removeScale(); selected ? transformScale(globalScaleRatio) : removeScale();
!selected && restoreEnv(); !selected && restoreEnv();
}, 30); }, 30);
@ -382,6 +395,119 @@
selectHandler(); selectHandler();
} }
}] }]
}, {
type: 'bi.text_value_combo',
text: '自定义缩放比例',
width: 120,
value: globalScaleRatio,
items: [
{
text: '自动',
value: null,
lgap: 10,
},
{
text: '50%',
value: 0.5,
lgap: 10,
},
{
text: '60%',
value: 0.6,
lgap: 10,
},
{
text: '70%',
value: 0.7,
lgap: 10,
},
{
lgap: 10,
text: '80%',
value: 0.8,
lgap: 10,
},
{
lgap: 10,
text: '90%',
value: 0.9,
lgap: 10,
},
{
lgap: 10,
text: '100%',
value: 1.0,
lgap: 10,
},
{
lgap: 10,
text: '110%',
value: 1.1,
lgap: 10,
},
{
lgap: 10,
text: '120%',
value: 1.2,
lgap: 10,
},
{
lgap: 10,
text: '130%',
value: 1.3,
lgap: 10,
},
{
lgap: 10,
text: '140%',
value: 1.4,
lgap: 10,
},
{
lgap: 10,
text: '150%',
value: 1.5,
lgap: 10,
},
{
lgap: 10,
text: '160%',
value: 1.6,
lgap: 10,
},
{
lgap: 10,
text: '170%',
value: 1.7,
lgap: 10,
},
{
lgap: 10,
text: '180%',
value: 1.8,
lgap: 10,
},
{
lgap: 10,
text: '190%',
value: 1.9,
lgap: 10,
},
{
lgap: 10,
text: '200%',
value: 2.0,
lgap: 10,
},
],
listeners: [{
eventName: "EVENT_CHANGE",
action: function (v) {
BI.Cache.setItem('scaleRatio', v);
globalScaleRatio = v;
selectHandler();
}
}],
}]) }])
}); });
}()); }());

148
src/main/resources/com/finebi/plugin/web/scripts/entry.js
Unescape View File

@ -1,5 +1,5 @@
!(function () { !(function () {
var scale = 1, transformY = 0, selected = true; var scale = 1, transformY = 0, selected = true, globalScaleRatio = parseFloat(BI.Cache.getItem('scaleRatio')) || null;
var html = document.getElementsByTagName('html')[0]; var html = document.getElementsByTagName('html')[0];
var wrapper = document.getElementById("wrapper"); var wrapper = document.getElementById("wrapper");
var fixedWrapper = document.createElement("div"); var fixedWrapper = document.createElement("div");
@ -52,8 +52,8 @@
} }
// 进行缩放 // 进行缩放
function transformScale() { function transformScale(ratio) {
var bounds = getScaleBounds(); var bounds = getScaleBounds(ratio);
scale = bounds.scale; scale = bounds.scale;
wrapper.style.width = bounds.width + "px"; wrapper.style.width = bounds.width + "px";
@ -66,13 +66,11 @@
wrapper.style.overflowY = "auto"; wrapper.style.overflowY = "auto";
html.style.backgroundColor = "#ffffff"; html.style.backgroundColor = "#ffffff";
document.body.style.overflowX = "hidden"; document.body.style.overflowX = globalScaleRatio ? "auto" : "hidden";
document.body.style.overflowY = "auto"; document.body.style.overflowY = "auto";
fixedWrapper.style.overflow = "hidden"; fixedWrapper.style.overflow = "hidden";
if (scale < 1) {
fixedWrapper.style.width = bounds.width * scale + "px"; fixedWrapper.style.width = bounds.width * scale + "px";
fixedWrapper.style.height = bounds.height * scale + "px"; fixedWrapper.style.height = bounds.height * scale + "px";
}
window.scale = Math.max(window.devicePixelRatio * scale, 1); window.scale = Math.max(window.devicePixelRatio * scale, 1);
} }
@ -102,7 +100,7 @@
} }
// 获取缩放倍数，原模板宽高 // 获取缩放倍数，原模板宽高
function getScaleBounds() { function getScaleBounds(ratio) {
var widgets = BI.designConfigure.widgets, var widgets = BI.designConfigure.widgets,
layoutRatio = BI.designConfigure.layoutRatio, layoutRatio = BI.designConfigure.layoutRatio,
freeLayoutRatio = BI.designConfigure.freeLayoutRatio, freeLayoutRatio = BI.designConfigure.freeLayoutRatio,
@ -135,12 +133,27 @@
var templateWidth = (Math.round((right / (layoutRatio.x || 1)) || (freeRight / (freeLayoutRatio.x || 1)))) + 60; var templateWidth = (Math.round((right / (layoutRatio.x || 1)) || (freeRight / (freeLayoutRatio.x || 1)))) + 60;
var templateHeight = (Math.round((bottom / (layoutRatio.y || 1)) || (freeBottom / (freeLayoutRatio.y || 1)))) + 30; var templateHeight = (Math.round((bottom / (layoutRatio.y || 1)) || (freeBottom / (freeLayoutRatio.y || 1)))) + 30;
var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1)); var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1));
var bHeight = html.clientHeight / scaleRatio;
var resultWidth = 0;
var resultHeight = 0;
var bHeight = 0;
if (ratio) {
scaleRatio = ratio;
bHeight = html.clientHeight / scaleRatio;
resultWidth = templateWidth;
resultHeight = Math.max(bHeight, templateHeight);
} else {
bHeight = html.clientHeight / scaleRatio;
resultWidth = html.clientWidth / scaleRatio;
resultHeight = Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight);
}
return { return {
scale: scaleRatio, scale: scaleRatio,
width: html.clientWidth / scaleRatio, width: resultWidth,
height: Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight) height: resultHeight
}; };
} }
@ -344,7 +357,7 @@
var selectHandler = BI.debounce(function () { var selectHandler = BI.debounce(function () {
selected && prepareEnv(); selected && prepareEnv();
selected ? transformScale() : removeScale(); selected ? transformScale(globalScaleRatio) : removeScale();
!selected && restoreEnv(); !selected && restoreEnv();
}, 30); }, 30);
@ -382,6 +395,119 @@
selectHandler(); selectHandler();
} }
}] }]
}, {
type: 'bi.text_value_combo',
text: '自定义缩放比例',
width: 120,
value: globalScaleRatio,
items: [
{
text: '自动',
value: null,
lgap: 10,
},
{
text: '50%',
value: 0.5,
lgap: 10,
},
{
text: '60%',
value: 0.6,
lgap: 10,
},
{
text: '70%',
value: 0.7,
lgap: 10,
},
{
lgap: 10,
text: '80%',
value: 0.8,
lgap: 10,
},
{
lgap: 10,
text: '90%',
value: 0.9,
lgap: 10,
},
{
lgap: 10,
text: '100%',
value: 1.0,
lgap: 10,
},
{
lgap: 10,
text: '110%',
value: 1.1,
lgap: 10,
},
{
lgap: 10,
text: '120%',
value: 1.2,
lgap: 10,
},
{
lgap: 10,
text: '130%',
value: 1.3,
lgap: 10,
},
{
lgap: 10,
text: '140%',
value: 1.4,
lgap: 10,
},
{
lgap: 10,
text: '150%',
value: 1.5,
lgap: 10,
},
{
lgap: 10,
text: '160%',
value: 1.6,
lgap: 10,
},
{
lgap: 10,
text: '170%',
value: 1.7,
lgap: 10,
},
{
lgap: 10,
text: '180%',
value: 1.8,
lgap: 10,
},
{
lgap: 10,
text: '190%',
value: 1.9,
lgap: 10,
},
{
lgap: 10,
text: '200%',
value: 2.0,
lgap: 10,
},
],
listeners: [{
eventName: "EVENT_CHANGE",
action: function (v) {
BI.Cache.setItem('scaleRatio', v);
globalScaleRatio = v;
selectHandler();
}
}],
}]) }])
}); });
}()); }());
Write Preview
Loading…
Cancel
Save