You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2019/11/06 21:19:33 UTC
[incubator-echarts] 02/03: fix: fix test case. When draggable tool
is used and the page layout will be changed,
the draggable area should sync with the placeholder.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch fix/release-chore
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit f469db21fe3ec52f52e8f93cb87704a61c741937
Author: SHUANG SU <su...@gmail.com>
AuthorDate: Thu Nov 7 01:59:50 2019 +0800
fix: fix test case. When draggable tool is used and the page layout will be changed, the draggable area should sync with the placeholder.
---
test/lib/draggable.js | 93 ++++++++++++++++++++++++++++++++++----------------
test/lib/testHelper.js | 2 +-
2 files changed, 64 insertions(+), 31 deletions(-)
diff --git a/test/lib/draggable.js b/test/lib/draggable.js
index 2eb3b78..c5bf49d 100644
--- a/test/lib/draggable.js
+++ b/test/lib/draggable.js
@@ -38,7 +38,6 @@
* @param {boolean} [opt.lockX=false]
* @param {boolean} [opt.lockY=false]
* @param {number} [opt.throttle=false]
- * @param {boolean} [opt.addPlaceholder=false]
* @param {Function} [opt.onDrag]
* @return {type} description
*/
@@ -55,17 +54,23 @@
var mainEl = $(mainEl);
var id = mainEl.attr('data-draggable-id');
- if (opt.addPlaceholder) {
- var width = mainEl.outerWidth();
- var height = mainEl.outerHeight();
- $('<div></div>').css({
- width: width,
- height: height,
- margin: 0,
- padding: 0,
- visibility: 'hidden'
- }).insertAfter(mainEl);
- }
+ var width = mainEl.outerWidth();
+ var height = mainEl.outerHeight();
+ var mainStyle = mainEl[0].style;
+ var placeholder = $('<div></div>').css({
+ position: mainStyle.position,
+ width: width,
+ height: height,
+ top: mainStyle.top,
+ bottom: mainStyle.bottom,
+ left: mainStyle.left,
+ right: mainStyle.right,
+ borderWidth: 0,
+ margin: 0,
+ padding: 0,
+ visibility: 'hidden'
+ });
+ placeholder.insertAfter(mainEl);
if (id == null) {
id = +Math.random();
@@ -111,8 +116,6 @@
mainEl.css({
'position': 'absolute',
- 'left': mainEl[0].offsetLeft + 'px',
- 'top': mainEl[0].offsetTop + 'px',
'width': mainEl[0].offsetWidth + 'px',
'height': mainEl[0].offsetHeight + 'px',
'border-style': 'solid',
@@ -124,21 +127,8 @@
mainEl.parent().append(controlEl);
+ var locationMaker = createLocationMaker(mainEl);
var controlSize = controlEl[0].offsetWidth;
-
- var boxSizing = mainEl.css('box-sizing');
-
- var borderBoxBroder = boxSizing === 'border-box' ? 2 * BORDER_WIDTH : 0;
- var mainContentWidth = opt.width || (mainEl.width() + borderBoxBroder);
- var mainContentHeight = opt.height || (mainEl.height() + borderBoxBroder);
-
- var mainOffset = mainEl.offset();
- resize(
- mainOffset.left + mainContentWidth + BORDER_WIDTH,
- mainOffset.top + mainContentHeight + BORDER_WIDTH,
- true
- );
-
var dragging = false;
controlEl.on('mousedown', function () {
@@ -155,7 +145,31 @@
dragging = false;
});
+ relocate(opt.width, opt.height);
+ // A temporarily way to handle the reflow.
+ // Where the position should be sync to the placeholder.
+ $(function () {
+ setTimeout(function () {
+ relocate();
+ }, 0);
+ });
+
+ function relocate(width, height) {
+ mainEl.css({
+ 'left': locationMaker.left(placeholder[0].offsetLeft) + 'px',
+ 'top': locationMaker.top(placeholder[0].offsetTop) + 'px',
+ });
+ var mainContentWidth = width != null ? width : locationMaker.width(mainEl.width());
+ var mainContentHeight = height != null ? height : locationMaker.height(mainEl.height());
+
+ var mainOffset = mainEl.offset();
+ resize(
+ mainOffset.left + mainContentWidth + BORDER_WIDTH,
+ mainOffset.top + mainContentHeight + BORDER_WIDTH,
+ true
+ );
+ }
function resize(x, y, isInit) {
var mainOffset = mainEl.offset();
@@ -170,7 +184,7 @@
);
mainEl.css(
'width',
- (mainContentWidth + borderBoxBroder) + 'px'
+ locationMaker.width(mainContentWidth) + 'px'
);
}
@@ -181,7 +195,7 @@
);
mainEl.css(
'height',
- (mainContentHeight + borderBoxBroder) + 'px'
+ locationMaker.height(mainContentHeight) + 'px'
);
}
@@ -192,6 +206,25 @@
}
};
+ function createLocationMaker(mainEl) {
+ var isBorderBox = mainEl.css('box-sizing') === 'border-box';
+
+ return {
+ width: function (w) {
+ return w + (isBorderBox ? 2 * BORDER_WIDTH : 0);
+ },
+ height: function (h) {
+ return h + (isBorderBox ? 2 * BORDER_WIDTH : 0);
+ },
+ left: function (l) {
+ return l - (isBorderBox ? 0: BORDER_WIDTH);
+ },
+ top: function (t) {
+ return t - (isBorderBox ? 0: BORDER_WIDTH);
+ }
+ };
+ }
+
function throttle(fn, delay, trailing, debounce) {
var currCall = (new Date()).getTime();
diff --git a/test/lib/testHelper.js b/test/lib/testHelper.js
index e0ca0d2..d8fb5a3 100644
--- a/test/lib/testHelper.js
+++ b/test/lib/testHelper.js
@@ -239,7 +239,7 @@
+ '<script src="lib/draggable.js"></script>'
);
}
- window.draggable.init(dom, chart, {throttle: 70, addPlaceholder: true});
+ window.draggable.init(dom, chart, {throttle: 70});
}
option && chart.setOption(option, {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org