let _ = {
|
MIN_LIMIT: 48, // Min size of zone
|
DECIMAL_PLACES: 4 // Hotzone positioning decimal point limit number of digits
|
}
|
|
/**
|
* Get a power result of 10 for the power of the constant
|
* @return {Number}
|
*/
|
_.getMultiple = (decimalPlaces = _.DECIMAL_PLACES) => {
|
return Math.pow(10, decimalPlaces)
|
}
|
|
/**
|
* Limit decimal places
|
* @param {Number} num
|
* @return {Number}
|
*/
|
_.decimalPoint = (val = 0) => { // 处理js小数点计算不精确问题，先放再缩小
|
return Math.round(val * _.getMultiple()) / _.getMultiple() || 0
|
}
|
|
/**
|
* Get element width and height
|
* @param {Object} elem
|
* @return {Object}
|
*/
|
_.getOffset = (elem = {}) => ({
|
width: elem.clientWidth || 0,
|
height: elem.clientHeight || 0
|
})
|
|
/**
|
* Get pageX
|
* @param {Object} e
|
* @return {Number}
|
*/
|
_.getPageX = (e) => ('pageX' in e) ? e.pageX : e.touches[0].pageX
|
|
/**
|
* Get pageY
|
* @param {Object} e
|
* @return {Number}
|
*/
|
_.getPageY = (e) => ('pageY' in e) ? e.pageY : e.touches[0].pageY
|
|
/**
|
* Gets the abscissa value of the mouse click relative to the target node
|
* @param {Object} e
|
* @param {Object} container
|
* @return {Number}
|
*/
|
_.getDistanceX = (e, container) =>
|
_.getPageX(e) - (container.getBoundingClientRect().left + window.pageXOffset)
|
|
/**
|
* Gets the ordinate value of the mouse click relative to the target node
|
* @param {Object} e
|
* @param {Object} container
|
* @return {Number}
|
*/
|
_.getDistanceY = (e, container) =>
|
_.getPageY(e) - (container.getBoundingClientRect().top + window.pageYOffset)
|
|
// 检测区域是否有碰撞 true 有碰撞交集 ,false 无碰撞
|
_.handleEgdeCollisions = (rect1, rect2) => {
|
const l1 = { left: rect1.left, top: rect1.top }
|
const r1 = { left: rect1.left + rect1.width, top: rect1.top + rect1.height }
|
const l2 = { left: rect2.left, top: rect2.top }
|
const r2 = { left: rect2.left + rect2.width, top: rect2.top + rect2.height }
|
return !(
|
l1.left > r2.left ||
|
l2.left > r1.left ||
|
l1.top > r2.top ||
|
l2.top > r1.top
|
)
|
}
|
/**
|
* Treatment of boundary conditions when changing the size of the hotzone 改变热区大小时边界条件的处理（如果要避免热区重叠，代码要加载这里）
|
* @param {Object} itemInfo
|
* @param {Object} styleInfo
|
* @param {Object} container
|
*/
|
_.dealEdgeValue = (itemInfo, styleInfo, container, zones, currentIndex = zones.length - 1) => {
|
|
if (Object.prototype.hasOwnProperty.call(styleInfo, "left") && styleInfo.left < 0) {
|
styleInfo.left = 0
|
styleInfo.width = itemInfo.width + itemInfo.left
|
}
|
|
if (Object.prototype.hasOwnProperty.call(styleInfo, "top") && styleInfo.top < 0) {
|
styleInfo.top = 0
|
styleInfo.height = itemInfo.height + itemInfo.top
|
}
|
|
if (!Object.prototype.hasOwnProperty.call(styleInfo, "left") && Object.prototype.hasOwnProperty.call(styleInfo, "width")) {
|
if (itemInfo.left + styleInfo.width > container.width) {
|
styleInfo.width = container.width - itemInfo.left
|
}
|
}
|
|
if (!Object.prototype.hasOwnProperty.call(styleInfo, "top") && Object.prototype.hasOwnProperty.call(styleInfo, "height")) {
|
if (itemInfo.top + styleInfo.height > container.height) {
|
styleInfo.height = container.height - itemInfo.top
|
}
|
}
|
// 与其他热区重叠，则修正 检测是否发生碰撞
|
if (zones.length > 1) {
|
let currentzones = JSON.parse(JSON.stringify(zones)).map((zone) => {
|
return {
|
left: (zone.leftPer || 0) * container.width,
|
top: (zone.topPer || 0) * container.height,
|
width: (zone.widthPer || 0) * container.width,
|
height: (zone.heightPer || 0) * container.height
|
}
|
})
|
let current = { ...itemInfo, ...styleInfo }
|
for (let i = 0, len = currentzones.length; i < len; i++) {
|
if (currentIndex !== i && _.handleEgdeCollisions(currentzones[i], current)) {
|
return itemInfo
|
}
|
}
|
}
|
|
return Object.assign(itemInfo, styleInfo)
|
}
|
|
/**
|
* Handle different drag points, capital letters mean: T-top，L-left，C-center，R-right，B-bottom
|
* @param {Object} itemInfo
|
* @param {Number} moveX
|
* @param {Number} moveY
|
* @return {Object}
|
*/
|
_.dealTL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let width = itemInfo.width - moveX
|
let height = itemInfo.height - moveY
|
|
if (width >= Math.min(minLimit, itemInfo.width)) {
|
Object.assign(styleInfo, {
|
width,
|
left: itemInfo.left + moveX
|
})
|
}
|
|
if (height >= Math.min(minLimit, itemInfo.height)) {
|
Object.assign(styleInfo, {
|
height,
|
top: itemInfo.top + moveY
|
})
|
}
|
|
return styleInfo
|
}
|
|
_.dealTC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let height = itemInfo.height - moveY
|
|
if (height >= Math.min(minLimit, itemInfo.height)) {
|
styleInfo = {
|
height,
|
top: itemInfo.top + moveY
|
}
|
}
|
|
return styleInfo
|
}
|
|
_.dealTR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let width = itemInfo.width + moveX
|
let height = itemInfo.height - moveY
|
|
if (width >= Math.min(minLimit, itemInfo.width)) {
|
Object.assign(styleInfo, {
|
width
|
})
|
}
|
|
if (height >= Math.min(minLimit, itemInfo.height)) {
|
Object.assign(styleInfo, {
|
height,
|
top: itemInfo.top + moveY
|
})
|
}
|
|
return styleInfo
|
}
|
|
_.dealCL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let width = itemInfo.width - moveX
|
|
if (width >= Math.min(minLimit, itemInfo.width)) {
|
Object.assign(styleInfo, {
|
width,
|
left: itemInfo.left + moveX
|
})
|
}
|
|
return styleInfo
|
}
|
|
_.dealCR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let width = itemInfo.width + moveX
|
|
if (width >= Math.min(minLimit, itemInfo.width)) {
|
Object.assign(styleInfo, {
|
width
|
})
|
}
|
|
return styleInfo
|
}
|
|
_.dealBL = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let width = itemInfo.width - moveX
|
let height = itemInfo.height + moveY
|
|
if (width >= Math.min(minLimit, itemInfo.width)) {
|
Object.assign(styleInfo, {
|
width,
|
left: itemInfo.left + moveX
|
})
|
}
|
|
if (height >= Math.min(minLimit, itemInfo.height)) {
|
Object.assign(styleInfo, {
|
height
|
})
|
}
|
|
return styleInfo
|
}
|
|
_.dealBC = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let height = itemInfo.height + moveY
|
|
if (height >= Math.min(minLimit, itemInfo.height)) {
|
Object.assign(styleInfo, {
|
height
|
})
|
}
|
|
return styleInfo
|
}
|
// 添加热区时，判定鼠标释放点满足一下条件时生效
|
_.dealBR = (itemInfo, moveX, moveY, minLimit = _.MIN_LIMIT) => {
|
let styleInfo = {}
|
let width = itemInfo.width + moveX
|
let height = itemInfo.height + moveY
|
if (width >= Math.min(minLimit, itemInfo.width)) {
|
// 改变后的宽度 >= min(之前宽度,内置的最小宽度标准)，即生效
|
Object.assign(styleInfo, {
|
width
|
})
|
}
|
|
if (height >= Math.min(minLimit, itemInfo.height)) {
|
// 改变后的高度 大于等于 Min（最小高度，之前高度）时，生效
|
Object.assign(styleInfo, {
|
height
|
})
|
}
|
|
return styleInfo
|
}
|
|
export default _
|
