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
commit
3447dc64c5
  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

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

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

@ -1,5 +1,5 @@
!(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 wrapper = document.getElementById("wrapper");
var fixedWrapper = document.createElement("div");
@ -52,8 +52,8 @@
}
// 进行缩放
function transformScale() {
var bounds = getScaleBounds();
function transformScale(ratio) {
var bounds = getScaleBounds(ratio);
scale = bounds.scale;
wrapper.style.width = bounds.width + "px";
@ -66,13 +66,11 @@
wrapper.style.overflowY = "auto";
html.style.backgroundColor = "#ffffff";
document.body.style.overflowX = "hidden";
document.body.style.overflowX = globalScaleRatio ? "auto" : "hidden";
document.body.style.overflowY = "auto";
fixedWrapper.style.overflow = "hidden";
if (scale < 1) {
fixedWrapper.style.width = bounds.width * scale + "px";
fixedWrapper.style.height = bounds.height * scale + "px";
}
window.scale = Math.max(window.devicePixelRatio * scale, 1);
}
@ -102,7 +100,7 @@
}
// 获取缩放倍数,原模板宽高
function getScaleBounds() {
function getScaleBounds(ratio) {
var widgets = BI.designConfigure.widgets,
layoutRatio = BI.designConfigure.layoutRatio,
freeLayoutRatio = BI.designConfigure.freeLayoutRatio,
@ -135,12 +133,27 @@
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 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 {
scale: scaleRatio,
width: html.clientWidth / scaleRatio,
height: Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight)
width: resultWidth,
height: resultHeight
};
}
@ -344,7 +357,7 @@
var selectHandler = BI.debounce(function () {
selected && prepareEnv();
selected ? transformScale() : removeScale();
selected ? transformScale(globalScaleRatio) : removeScale();
!selected && restoreEnv();
}, 30);
@ -382,6 +395,119 @@
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

@ -1,5 +1,5 @@
!(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 wrapper = document.getElementById("wrapper");
var fixedWrapper = document.createElement("div");
@ -52,8 +52,8 @@
}
// 进行缩放
function transformScale() {
var bounds = getScaleBounds();
function transformScale(ratio) {
var bounds = getScaleBounds(ratio);
scale = bounds.scale;
wrapper.style.width = bounds.width + "px";
@ -66,13 +66,11 @@
wrapper.style.overflowY = "auto";
html.style.backgroundColor = "#ffffff";
document.body.style.overflowX = "hidden";
document.body.style.overflowX = globalScaleRatio ? "auto" : "hidden";
document.body.style.overflowY = "auto";
fixedWrapper.style.overflow = "hidden";
if (scale < 1) {
fixedWrapper.style.width = bounds.width * scale + "px";
fixedWrapper.style.height = bounds.height * scale + "px";
}
window.scale = Math.max(window.devicePixelRatio * scale, 1);
}
@ -102,7 +100,7 @@
}
// 获取缩放倍数,原模板宽高
function getScaleBounds() {
function getScaleBounds(ratio) {
var widgets = BI.designConfigure.widgets,
layoutRatio = BI.designConfigure.layoutRatio,
freeLayoutRatio = BI.designConfigure.freeLayoutRatio,
@ -135,12 +133,27 @@
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 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 {
scale: scaleRatio,
width: html.clientWidth / scaleRatio,
height: Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight)
width: resultWidth,
height: resultHeight
};
}
@ -344,7 +357,7 @@
var selectHandler = BI.debounce(function () {
selected && prepareEnv();
selected ? transformScale() : removeScale();
selected ? transformScale(globalScaleRatio) : removeScale();
!selected && restoreEnv();
}, 30);
@ -382,6 +395,119 @@
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();
}
}],
}])
});
}());
Loading…
Cancel
Save