275 lines
7.1 KiB
JavaScript
275 lines
7.1 KiB
JavaScript
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 _
|