in kystudio/src/directive/index.js [285:513]
inserted: function (el, binding, vnode) {
let oDiv = el
var dragInfo = binding.value
let limitObj = dragInfo.limit
let changeOption = binding.modifiers.hasOwnProperty ? binding.modifiers : {}
let boxDom = null
let boxW = 0
let boxH = 0
let callback = binding.value && binding.value.sizeChangeCb
let reverse = changeOption.hasOwnProperty('reverse')
let reverseW = changeOption.hasOwnProperty('reverseW')
let reverseH = changeOption.hasOwnProperty('reverseH')
if (changeOption.hasOwnProperty('height') || changeOption.hasOwnProperty('width')) {
el.className += ' ky-resize'
} else {
el.className += ' ky-move'
}
el.onselectstart = function () {
return false
}
regainBox()
// 盒子碰撞检测
function checkBoxCollision (changeType, size, rectifyVal) {
rectifyVal = rectifyVal || 0
// 无自定义盒子和限制
if (!dragInfo.box && !limitObj && dragInfo.allowOutOfView) {
return true
}
if (limitObj) {
let curCheckProp = limitObj[changeType]
if (curCheckProp) {
// 无自定义限制
if (curCheckProp.length > 0 && undefined !== curCheckProp[0] && size < curCheckProp[0]) {
dragInfo[changeType] = curCheckProp[0]
return false
}
if (curCheckProp.length > 1 && undefined !== curCheckProp[1] && size > curCheckProp[1]) {
dragInfo[changeType] = curCheckProp[1]
return false
}
}
}
if (dragInfo.box && !dragInfo.allowOutOfView) {
if (changeType === 'top') {
if (size + dragInfo.height > boxH) {
dragInfo.top = boxH - dragInfo.height > 0 ? boxH - dragInfo.height : 0
return false
}
if (size < 0) {
dragInfo.top = 0
return false
}
}
if (changeType === 'height') {
if (dragInfo.top + rectifyVal < 0) {
return false
}
if (rectifyVal + size + dragInfo.top > boxH) {
dragInfo.height = boxH - dragInfo.top
return false
}
}
if (changeType === 'width') {
if (!isNaN(dragInfo.left)) {
if (dragInfo.left + rectifyVal < 0) {
return false
}
if (rectifyVal + size + dragInfo.left > boxW) {
dragInfo.left = boxW - dragInfo.width
return false
}
}
if (!isNaN(dragInfo.right)) {
if (dragInfo.right + rectifyVal < 0) {
return false
}
if (size + dragInfo.right - rectifyVal > boxW) {
dragInfo.width = boxW - dragInfo.right
return false
}
}
}
if (changeType === 'right' || changeType === 'left') {
if (size + dragInfo.width > boxW) {
dragInfo[changeType] = boxW - dragInfo.width > 0 ? boxW - dragInfo.width : 0
return false
}
if (size < 0) {
dragInfo[changeType] = 0
return false
}
}
}
return true
}
function regainBox () {
if (dragInfo.box) {
boxDom = $(el).parents(dragInfo.box).eq(0)
boxW = boxDom.width()
boxH = boxDom.height()
}
}
$(window).resize(() => {
setTimeout(() => {
regainBox()
if (checkBoxCollision()) {
return
}
if (!isNaN(dragInfo['right']) || dragInfo['right'] < 0) {
if (dragInfo['right'] + dragInfo.width > boxW) {
dragInfo['right'] = 0
}
if (dragInfo['right'] < 0) {
dragInfo['right'] = boxW - dragInfo.width
}
}
if (!isNaN(dragInfo['left']) && dragInfo['left'] + dragInfo.width > boxW) {
if (dragInfo['left'] + dragInfo.width > boxW) {
dragInfo['left'] = boxW - dragInfo.width
}
if (dragInfo['left'] < 0) {
dragInfo['left'] = 0
}
}
if (!isNaN(dragInfo['top']) && dragInfo['top'] + dragInfo.height > boxH) {
if (dragInfo['top'] + dragInfo.height > boxH) {
dragInfo['top'] = boxH - dragInfo.height
}
if (dragInfo['top'] < 0) {
dragInfo['top'] = 0
}
}
callback && callback(0, 0, boxW, boxH, dragInfo)
}, 2)
})
oDiv.onmousedown = (ev) => {
let info = JSON.parse(JSON.stringify(dragInfo))
let zoom = el.getAttribute('data-zoom') || 10
ev.stopPropagation()
ev.preventDefault()
let offsetX = ev.clientX
let offsetY = ev.clientY
regainBox()
if (changeOption.hasOwnProperty('height') || changeOption.hasOwnProperty('width')) {
el.className += ' ky-resize-ing'
} else {
el.className += ' ky-move-ing'
}
document.onmousemove = (e) => {
ev.stopPropagation()
ev.preventDefault()
let x = e.clientX - offsetX
let y = e.clientY - offsetY
let parent = oDiv.parentElement
x /= zoom / 10
y /= zoom / 10
offsetX = e.clientX
offsetY = e.clientY
if (changeOption) {
for (let i in changeOption) {
if (i === 'top') {
if (checkBoxCollision(i, info['top'] + y)) {
info['top'] += y
}
}
if (i === 'right') {
if (checkBoxCollision(i, info['right'] - x)) {
info['right'] -= x
}
}
if (i === 'left') {
if (checkBoxCollision(i, info['left'] + x)) {
info['left'] += x
}
}
if (i === 'height') {
if (reverse || reverseH) {
if (checkBoxCollision(i, info['height'] - y, y)) {
info['height'] -= y
info['top'] += y
}
} else {
if (checkBoxCollision(i, info['height'] + y)) {
info['height'] += y
}
}
}
if (i === 'width') {
if (reverse || reverseW) {
let rectify = 0
if (!isNaN(info['left'])) {
rectify = x
}
if (checkBoxCollision(i, info['width'] - x, rectify)) {
info['width'] -= x
if (!isNaN(info['left'])) {
info['left'] += x
}
}
} else {
let rectify = 0
if (info['right']) {
rectify = x
}
if (checkBoxCollision(i, info['width'] + x, rectify)) {
info['width'] += x
if (!isNaN(info['right'])) {
info['right'] -= x
}
}
}
}
}
}
Object.keys(info).forEach(item => {
dragInfo[item] = info[item]
})
callback && callback(x, y, boxW, boxH, info, oDiv)
}
document.onmouseup = function () {
el.className = el.className.replace(/ky-[a-z]+-ing/g, '').replace(/\s+$/, '')
document.onmousemove = null
document.onmouseup = null
$(window).unbind('resize')
}
}
}