From 0966b8ba01d663f9cbbf0ce50cf5f23e66461cef Mon Sep 17 00:00:00 2001 From: fay Date: Mon, 25 May 2020 10:32:16 +0800 Subject: [PATCH] =?UTF-8?q?BI-65798=20feat=EF=BC=9A=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BC=A9=E6=94=BE=E6=AF=94=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- plugin.xml | 3 +- .../plugin/web/plugin.screen_adaptive.js | 152 ++++++++++++++++-- .../com/finebi/plugin/web/scripts/entry.js | 152 ++++++++++++++++-- 3 files changed, 280 insertions(+), 27 deletions(-) diff --git a/plugin.xml b/plugin.xml index 1a9d6fd..970e4c9 100644 --- a/plugin.xml +++ b/plugin.xml @@ -3,12 +3,13 @@ com.finebi.plugin.screenadaptive yes - 1.1.35 + 1.1.4 10.0 2020-05-01 fay [2020-05-21]解决部分情况下图表模糊的情况
[2020-05-09]修复IE中有空白部分的情况
[2019-10-24]修复IE中有空白部分的情况
diff --git a/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js b/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js index 60fc9f3..384f1e2 100644 --- a/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js +++ b/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"; - } + 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(); + } + }], }]) }); }()); \ No newline at end of file diff --git a/src/main/resources/com/finebi/plugin/web/scripts/entry.js b/src/main/resources/com/finebi/plugin/web/scripts/entry.js index 60fc9f3..384f1e2 100644 --- a/src/main/resources/com/finebi/plugin/web/scripts/entry.js +++ b/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"; - } + 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(); + } + }], }]) }); }()); \ No newline at end of file