/**
* Simple draggable tool, just for demo or testing.
* Use jquery.
*/
(function (global) {
var BORDER_WIDTH = 4;
var $ = global.jQuery;
global.draggable = {
/**
* @param {HTMLElement} mainEl
* @param {module:echarts/echarts~EChart} chart
* @param {Object} [opt] {width: ..., height: ...}
* @param {number} [opt.width] If not specified, use mainEl current width.
* @param {number} [opt.height] If not specified, use mainEl current height.
* @param {boolean} [opt.lockX=false]
* @param {boolean} [opt.lockY=false]
* @param {number} [opt.throttle=false]
* @return {type} description
*/
init: function (mainEl, chart, opt) {
opt = opt || {};
var chartResize = chart ? $.proxy(chart.resize, chart) : function () {};
if (opt.throttle) {
chartResize = throttle(chartResize, opt.throttle, true, false);
}
var mainEl = $(mainEl);
$('.draggable-control').remove();
var controlEl = $(
'
DRAG
'
);
controlEl.css({
'position': 'absolute',
'border-radius': '30px',
'width': '60px',
'height': '60px',
'line-height': '60px',
'text-align': 'center',
'background': '#333',
'color': '#fff',
'cursor': 'pointer',
'font-size': '18px',
'box-shadow': '0 0 5px #333',
'-webkit-user-select': 'none',
'user-select': 'none'
});
var label = controlEl.find('.draggable-label');
label.css({
'display': 'block',
'position': 'absolute',
'color': '#000',
'font-size': '12px',
'text-align': 'center',
'left': 0,
'top': '65px',
'width': '60px',
'line-height': 1
});
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',
'border-color': '#ddd',
'border-width': BORDER_WIDTH + 'px',
'padding': 0,
'margin': 0
});
mainEl.parent().append(controlEl);
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 () {
dragging = true;
});
$(document).on('mousemove', function (e) {
if (dragging) {
resize(e.pageX, e.pageY);
}
});
$(document).on('mouseup', function () {
dragging = false;
});
function resize(x, y, isInit) {
var mainOffset = mainEl.offset();
var mainPosition = mainEl.position();
var mainContentWidth = x - mainOffset.left - BORDER_WIDTH;
var mainContentHeight = y - mainOffset.top - BORDER_WIDTH;
if (isInit || !opt.lockX) {
controlEl.css(
'left',
(mainPosition.left + mainContentWidth + BORDER_WIDTH - controlSize / 2) + 'px'
);
mainEl.css(
'width',
(mainContentWidth + borderBoxBroder) + 'px'
);
}
if (isInit || !opt.lockY) {
controlEl.css(
'top',
(mainPosition.top + mainContentHeight + BORDER_WIDTH - controlSize / 2) + 'px'
);
mainEl.css(
'height',
(mainContentHeight + borderBoxBroder) + 'px'
);
}
label.text(Math.round(mainContentWidth) + ' x ' + Math.round(mainContentHeight));
chartResize();
}
}
};
function throttle(fn, delay, trailing, debounce) {
var currCall = (new Date()).getTime();
var lastCall = 0;
var lastExec = 0;
var timer = null;
var diff;
var scope;
var args;
var isSingle = typeof fn === 'function';
delay = delay || 0;
if (isSingle) {
return createCallback();
}
else {
var ret = [];
for (var i = 0; i < fn.length; i++) {
ret[i] = createCallback(i);
}
return ret;
}
function createCallback(index) {
function exec() {
lastExec = (new Date()).getTime();
timer = null;
(isSingle ? fn : fn[index]).apply(scope, args || []);
}
var cb = function () {
currCall = (new Date()).getTime();
scope = this;
args = arguments;
diff = currCall - (debounce ? lastCall : lastExec) - delay;
clearTimeout(timer);
if (debounce) {
if (trailing) {
timer = setTimeout(exec, delay);
}
else if (diff >= 0) {
exec();
}
}
else {
if (diff >= 0) {
exec();
}
else if (trailing) {
timer = setTimeout(exec, -diff);
}
}
lastCall = currCall;
};
/**
* Clear throttle.
* @public
*/
cb.clear = function () {
if (timer) {
clearTimeout(timer);
timer = null;
}
};
return cb;
}
}
})(window);