|
|
|
@ -264,13 +264,64 @@ const currentStick = ref<null | string>(null); |
|
|
|
|
|
|
|
const parentElement = ref<HTMLElement | null>(null); |
|
|
|
|
|
|
|
const width = computed(() => parentWidth.value! - left.value! - right.value!); |
|
|
|
function getPointerPosition( |
|
|
|
ev: Partial<{ |
|
|
|
pageX: number; |
|
|
|
pageY: number; |
|
|
|
touches: ArrayLike<{ pageX: number; pageY: number }>; |
|
|
|
}>, |
|
|
|
): null | { pointerX: number; pointerY: number } { |
|
|
|
const touch = ev.touches?.[0]; |
|
|
|
const pointerX = ev.pageX ?? touch?.pageX; |
|
|
|
const pointerY = ev.pageY ?? touch?.pageY; |
|
|
|
|
|
|
|
const height = computed(() => parentHeight.value! - top.value! - bottom.value!); |
|
|
|
if ( |
|
|
|
pointerX === null || |
|
|
|
pointerX === undefined || |
|
|
|
pointerY === null || |
|
|
|
pointerY === undefined |
|
|
|
) { |
|
|
|
return null; |
|
|
|
} |
|
|
|
|
|
|
|
return { pointerX, pointerY }; |
|
|
|
} |
|
|
|
|
|
|
|
const width = computed(() => { |
|
|
|
const currentParentWidth = parentWidth.value; |
|
|
|
const currentLeft = left.value; |
|
|
|
const currentRight = right.value; |
|
|
|
|
|
|
|
if ( |
|
|
|
currentParentWidth === null || |
|
|
|
currentLeft === null || |
|
|
|
currentRight === null |
|
|
|
) { |
|
|
|
return 0; |
|
|
|
} |
|
|
|
|
|
|
|
return currentParentWidth - currentLeft - currentRight; |
|
|
|
}); |
|
|
|
|
|
|
|
const height = computed(() => { |
|
|
|
const currentParentHeight = parentHeight.value; |
|
|
|
const currentTop = top.value; |
|
|
|
const currentBottom = bottom.value; |
|
|
|
|
|
|
|
if ( |
|
|
|
currentParentHeight === null || |
|
|
|
currentTop === null || |
|
|
|
currentBottom === null |
|
|
|
) { |
|
|
|
return 0; |
|
|
|
} |
|
|
|
|
|
|
|
return currentParentHeight - currentTop - currentBottom; |
|
|
|
}); |
|
|
|
|
|
|
|
const rect = computed(() => ({ |
|
|
|
left: Math.round(left.value!), |
|
|
|
top: Math.round(top.value!), |
|
|
|
left: Math.round(left.value ?? 0), |
|
|
|
top: Math.round(top.value ?? 0), |
|
|
|
width: Math.round(width.value), |
|
|
|
height: Math.round(height.value), |
|
|
|
})); |
|
|
|
@ -348,36 +399,48 @@ const rectCorrectionByAspectRatio = (rect: { |
|
|
|
newTop: number; |
|
|
|
}) => { |
|
|
|
let { newLeft, newRight, newTop, newBottom } = rect; |
|
|
|
// const { parentWidth, parentHeight, currentStick, aspectFactor, dimensionsBeforeMove } = this; |
|
|
|
const currentParentWidth = parentWidth.value; |
|
|
|
const currentParentHeight = parentHeight.value; |
|
|
|
const stick = currentStick.value; |
|
|
|
const factor = aspectFactor.value; |
|
|
|
|
|
|
|
if ( |
|
|
|
currentParentWidth === null || |
|
|
|
currentParentHeight === null || |
|
|
|
!stick || |
|
|
|
factor === null |
|
|
|
) { |
|
|
|
return { newLeft, newRight, newTop, newBottom }; |
|
|
|
} |
|
|
|
|
|
|
|
let newWidth = parentWidth.value! - newLeft - newRight; |
|
|
|
let newHeight = parentHeight.value! - newTop - newBottom; |
|
|
|
let newWidth = currentParentWidth - newLeft - newRight; |
|
|
|
let newHeight = currentParentHeight - newTop - newBottom; |
|
|
|
|
|
|
|
if (currentStick.value![1] === 'm') { |
|
|
|
if (stick[1] === 'm') { |
|
|
|
const deltaHeight = newHeight - dimensionsBeforeMove.value.height; |
|
|
|
|
|
|
|
newLeft -= (deltaHeight * aspectFactor.value!) / 2; |
|
|
|
newRight -= (deltaHeight * aspectFactor.value!) / 2; |
|
|
|
} else if (currentStick.value![0] === 'm') { |
|
|
|
newLeft -= (deltaHeight * factor) / 2; |
|
|
|
newRight -= (deltaHeight * factor) / 2; |
|
|
|
} else if (stick[0] === 'm') { |
|
|
|
const deltaWidth = newWidth - dimensionsBeforeMove.value.width; |
|
|
|
|
|
|
|
newTop -= deltaWidth / aspectFactor.value! / 2; |
|
|
|
newBottom -= deltaWidth / aspectFactor.value! / 2; |
|
|
|
} else if (newWidth / newHeight > aspectFactor.value!) { |
|
|
|
newWidth = aspectFactor.value! * newHeight; |
|
|
|
newTop -= deltaWidth / factor / 2; |
|
|
|
newBottom -= deltaWidth / factor / 2; |
|
|
|
} else if (newWidth / newHeight > factor) { |
|
|
|
newWidth = factor * newHeight; |
|
|
|
|
|
|
|
if (currentStick.value![1] === 'l') { |
|
|
|
newLeft = parentWidth.value! - newRight - newWidth; |
|
|
|
if (stick[1] === 'l') { |
|
|
|
newLeft = currentParentWidth - newRight - newWidth; |
|
|
|
} else { |
|
|
|
newRight = parentWidth.value! - newLeft - newWidth; |
|
|
|
newRight = currentParentWidth - newLeft - newWidth; |
|
|
|
} |
|
|
|
} else { |
|
|
|
newHeight = newWidth / aspectFactor.value!; |
|
|
|
newHeight = newWidth / factor; |
|
|
|
|
|
|
|
if (currentStick.value![0] === 't') { |
|
|
|
newTop = parentHeight.value! - newBottom - newHeight; |
|
|
|
if (stick[0] === 't') { |
|
|
|
newTop = currentParentHeight - newBottom - newHeight; |
|
|
|
} else { |
|
|
|
newBottom = parentHeight.value! - newTop - newHeight; |
|
|
|
newBottom = currentParentHeight - newTop - newHeight; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -385,11 +448,17 @@ const rectCorrectionByAspectRatio = (rect: { |
|
|
|
}; |
|
|
|
|
|
|
|
const stickMove = (delta: { x: number; y: number }) => { |
|
|
|
const stick = currentStick.value; |
|
|
|
|
|
|
|
if (!stick) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
let newTop = dimensionsBeforeMove.value.top; |
|
|
|
let newBottom = dimensionsBeforeMove.value.bottom; |
|
|
|
let newLeft = dimensionsBeforeMove.value.left; |
|
|
|
let newRight = dimensionsBeforeMove.value.right; |
|
|
|
switch (currentStick.value![0]) { |
|
|
|
switch (stick[0]) { |
|
|
|
case 'b': { |
|
|
|
newBottom = dimensionsBeforeMove.value.bottom + delta.y; |
|
|
|
|
|
|
|
@ -419,7 +488,7 @@ const stickMove = (delta: { x: number; y: number }) => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
switch (currentStick.value![1]) { |
|
|
|
switch (stick[1]) { |
|
|
|
case 'l': { |
|
|
|
newLeft = dimensionsBeforeMove.value.left - delta.x; |
|
|
|
|
|
|
|
@ -512,89 +581,121 @@ const calcDragLimitation = () => { |
|
|
|
}; |
|
|
|
|
|
|
|
const calcResizeLimits = () => { |
|
|
|
// const { aspectFactor, width, height, bottom, top, left, right } = this; |
|
|
|
|
|
|
|
const parentLim = parentLimitation.value ? 0 : null; |
|
|
|
const currentAspectFactor = aspectFactor.value; |
|
|
|
const currentLeft = left.value; |
|
|
|
const currentRight = right.value; |
|
|
|
const currentTop = top.value; |
|
|
|
const currentBottom = bottom.value; |
|
|
|
const stick = currentStick.value; |
|
|
|
|
|
|
|
if (aspectRatio.value) { |
|
|
|
if (minw.value / minh.value > (aspectFactor.value as number)) { |
|
|
|
minh.value = minw.value / (aspectFactor.value as number); |
|
|
|
if ( |
|
|
|
currentLeft === null || |
|
|
|
currentRight === null || |
|
|
|
currentTop === null || |
|
|
|
currentBottom === null |
|
|
|
) { |
|
|
|
return { |
|
|
|
left: { min: parentLim, max: parentLim }, |
|
|
|
right: { min: parentLim, max: parentLim }, |
|
|
|
top: { min: parentLim, max: parentLim }, |
|
|
|
bottom: { min: parentLim, max: parentLim }, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
let minWidth = minw.value; |
|
|
|
let minHeight = minh.value; |
|
|
|
|
|
|
|
if (aspectRatio.value && currentAspectFactor) { |
|
|
|
if (minWidth / minHeight > currentAspectFactor) { |
|
|
|
minHeight = minWidth / currentAspectFactor; |
|
|
|
} else { |
|
|
|
minw.value = ((aspectFactor.value as number) * minh.value) as number; |
|
|
|
minWidth = currentAspectFactor * minHeight; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const limits = { |
|
|
|
left: { |
|
|
|
min: parentLim, |
|
|
|
max: (left.value as number) + (width.value - minw.value), |
|
|
|
max: currentLeft + (width.value - minWidth), |
|
|
|
}, |
|
|
|
right: { |
|
|
|
min: parentLim, |
|
|
|
max: (right.value as number) + (width.value - minw.value), |
|
|
|
max: currentRight + (width.value - minWidth), |
|
|
|
}, |
|
|
|
top: { |
|
|
|
min: parentLim, |
|
|
|
max: (top.value as number) + (height.value - minh.value), |
|
|
|
max: currentTop + (height.value - minHeight), |
|
|
|
}, |
|
|
|
bottom: { |
|
|
|
min: parentLim, |
|
|
|
max: (bottom.value as number) + (height.value - minh.value), |
|
|
|
max: currentBottom + (height.value - minHeight), |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
if (aspectRatio.value) { |
|
|
|
if (aspectRatio.value && currentAspectFactor) { |
|
|
|
const aspectLimits = { |
|
|
|
left: { |
|
|
|
min: |
|
|
|
left.value! - |
|
|
|
Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2, |
|
|
|
currentLeft - |
|
|
|
Math.min(currentTop, currentBottom) * currentAspectFactor * 2, |
|
|
|
max: |
|
|
|
left.value! + |
|
|
|
((height.value - minh.value!) / 2) * aspectFactor.value! * 2, |
|
|
|
currentLeft + |
|
|
|
((height.value - minHeight) / 2) * currentAspectFactor * 2, |
|
|
|
}, |
|
|
|
right: { |
|
|
|
min: |
|
|
|
right.value! - |
|
|
|
Math.min(top.value!, bottom.value!) * aspectFactor.value! * 2, |
|
|
|
currentRight - |
|
|
|
Math.min(currentTop, currentBottom) * currentAspectFactor * 2, |
|
|
|
max: |
|
|
|
right.value! + |
|
|
|
((height.value - minh.value!) / 2) * aspectFactor.value! * 2, |
|
|
|
currentRight + |
|
|
|
((height.value - minHeight) / 2) * currentAspectFactor * 2, |
|
|
|
}, |
|
|
|
top: { |
|
|
|
min: |
|
|
|
top.value! - |
|
|
|
(Math.min(left.value!, right.value!) / aspectFactor.value!) * 2, |
|
|
|
currentTop - |
|
|
|
(Math.min(currentLeft, currentRight) / currentAspectFactor) * 2, |
|
|
|
max: |
|
|
|
top.value! + |
|
|
|
((width.value - minw.value) / 2 / aspectFactor.value!) * 2, |
|
|
|
currentTop + ((width.value - minWidth) / 2 / currentAspectFactor) * 2, |
|
|
|
}, |
|
|
|
bottom: { |
|
|
|
min: |
|
|
|
bottom.value! - |
|
|
|
(Math.min(left.value!, right.value!) / aspectFactor.value!) * 2, |
|
|
|
currentBottom - |
|
|
|
(Math.min(currentLeft, currentRight) / currentAspectFactor) * 2, |
|
|
|
max: |
|
|
|
bottom.value! + |
|
|
|
((width.value - minw.value) / 2 / aspectFactor.value!) * 2, |
|
|
|
currentBottom + |
|
|
|
((width.value - minWidth) / 2 / currentAspectFactor) * 2, |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
|
|
|
if (currentStick.value![0] === 'm') { |
|
|
|
if (stick?.[0] === 'm') { |
|
|
|
limits.left = { |
|
|
|
min: Math.max(limits.left.min!, aspectLimits.left.min), |
|
|
|
min: Math.max( |
|
|
|
limits.left.min ?? aspectLimits.left.min, |
|
|
|
aspectLimits.left.min, |
|
|
|
), |
|
|
|
max: Math.min(limits.left.max, aspectLimits.left.max), |
|
|
|
}; |
|
|
|
limits.right = { |
|
|
|
min: Math.max(limits.right.min!, aspectLimits.right.min), |
|
|
|
min: Math.max( |
|
|
|
limits.right.min ?? aspectLimits.right.min, |
|
|
|
aspectLimits.right.min, |
|
|
|
), |
|
|
|
max: Math.min(limits.right.max, aspectLimits.right.max), |
|
|
|
}; |
|
|
|
} else if (currentStick.value![1] === 'm') { |
|
|
|
} else if (stick?.[1] === 'm') { |
|
|
|
limits.top = { |
|
|
|
min: Math.max(limits.top.min!, aspectLimits.top.min), |
|
|
|
min: Math.max( |
|
|
|
limits.top.min ?? aspectLimits.top.min, |
|
|
|
aspectLimits.top.min, |
|
|
|
), |
|
|
|
max: Math.min(limits.top.max, aspectLimits.top.max), |
|
|
|
}; |
|
|
|
limits.bottom = { |
|
|
|
min: Math.max(limits.bottom.min!, aspectLimits.bottom.min), |
|
|
|
min: Math.max( |
|
|
|
limits.bottom.min ?? aspectLimits.bottom.min, |
|
|
|
aspectLimits.bottom.min, |
|
|
|
), |
|
|
|
max: Math.min(limits.bottom.max, aspectLimits.bottom.max), |
|
|
|
}; |
|
|
|
} |
|
|
|
@ -604,9 +705,9 @@ const calcResizeLimits = () => { |
|
|
|
}; |
|
|
|
|
|
|
|
const positionStyle = computed(() => ({ |
|
|
|
top: `${top.value}px`, |
|
|
|
left: `${left.value}px`, |
|
|
|
zIndex: zIndex.value!, |
|
|
|
top: `${top.value ?? 0}px`, |
|
|
|
left: `${left.value ?? 0}px`, |
|
|
|
zIndex: zIndex.value ?? 'auto', |
|
|
|
})); |
|
|
|
|
|
|
|
const sizeStyle = computed(() => ({ |
|
|
|
@ -719,10 +820,13 @@ const stickDown = ( |
|
|
|
|
|
|
|
stickDrag.value = true; |
|
|
|
|
|
|
|
const pointerX = ev.pageX === undefined ? ev.touches[0].pageX : ev.pageX; |
|
|
|
const pointerY = ev.pageY === undefined ? ev.touches[0].pageY : ev.pageY; |
|
|
|
const pointerPosition = getPointerPosition(ev); |
|
|
|
|
|
|
|
if (!pointerPosition) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
saveDimensionsBeforeMove({ pointerX, pointerY }); |
|
|
|
saveDimensionsBeforeMove(pointerPosition); |
|
|
|
|
|
|
|
currentStick.value = stick; |
|
|
|
|
|
|
|
@ -736,13 +840,19 @@ const move = (ev: MouseEvent & TouchEvent) => { |
|
|
|
|
|
|
|
ev.stopPropagation(); |
|
|
|
|
|
|
|
// touches 兼容性代码 |
|
|
|
const pageX = ev.pageX === undefined ? ev.touches![0]!.pageX : ev.pageX; |
|
|
|
const pageY = ev.pageY === undefined ? ev.touches![0]!.pageY : ev.pageY; |
|
|
|
const pointerPosition = getPointerPosition(ev); |
|
|
|
|
|
|
|
if (!pointerPosition) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const delta = { |
|
|
|
x: (dimensionsBeforeMove.value.pointerX - pageX) / parentScaleX.value, |
|
|
|
y: (dimensionsBeforeMove.value.pointerY - pageY) / parentScaleY.value, |
|
|
|
x: |
|
|
|
(dimensionsBeforeMove.value.pointerX - pointerPosition.pointerX) / |
|
|
|
parentScaleX.value, |
|
|
|
y: |
|
|
|
(dimensionsBeforeMove.value.pointerY - pointerPosition.pointerY) / |
|
|
|
parentScaleY.value, |
|
|
|
}; |
|
|
|
|
|
|
|
if (stickDrag.value) { |
|
|
|
@ -810,12 +920,17 @@ onMounted(() => { |
|
|
|
|
|
|
|
left.value = x.value; |
|
|
|
top.value = y.value; |
|
|
|
right.value = (parentWidth.value - |
|
|
|
(w.value === 'auto' ? container.value!.scrollWidth : (w.value as number)) - |
|
|
|
left.value) as number; |
|
|
|
bottom.value = (parentHeight.value - |
|
|
|
(h.value === 'auto' ? container.value!.scrollHeight : (h.value as number)) - |
|
|
|
top.value) as number; |
|
|
|
const containerElement = container.value; |
|
|
|
const contentWidth = |
|
|
|
w.value === 'auto' |
|
|
|
? (containerElement?.scrollWidth ?? 0) |
|
|
|
: (w.value as number); |
|
|
|
const contentHeight = |
|
|
|
h.value === 'auto' |
|
|
|
? (containerElement?.scrollHeight ?? 0) |
|
|
|
: (h.value as number); |
|
|
|
right.value = (parentWidth.value ?? 0) - contentWidth - (left.value ?? 0); |
|
|
|
bottom.value = (parentHeight.value ?? 0) - contentHeight - (top.value ?? 0); |
|
|
|
|
|
|
|
addEvents(domEvents.value); |
|
|
|
|
|
|
|
@ -839,13 +954,14 @@ onMounted(() => { |
|
|
|
); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
onBeforeUnmount(() => { |
|
|
|
removeEvents(domEvents.value); |
|
|
|
}); |
|
|
|
|
|
|
|
const bodyDown = (ev: MouseEvent & TouchEvent) => { |
|
|
|
const { target, button } = ev; |
|
|
|
const targetElement = target instanceof HTMLElement ? target : null; |
|
|
|
const uid = getCurrentInstance()?.uid.toString(); |
|
|
|
|
|
|
|
if (!preventActiveBehavior.value) { |
|
|
|
active.value = true; |
|
|
|
@ -863,17 +979,13 @@ const bodyDown = (ev: MouseEvent & TouchEvent) => { |
|
|
|
|
|
|
|
if ( |
|
|
|
dragHandle.value && |
|
|
|
(target! as HTMLElement).dataset.dragHandle !== |
|
|
|
getCurrentInstance()?.uid.toString() |
|
|
|
targetElement && |
|
|
|
targetElement.dataset.dragHandle !== uid |
|
|
|
) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if ( |
|
|
|
dragCancel.value && |
|
|
|
(target! as HTMLElement).dataset.dragCancel === |
|
|
|
getCurrentInstance()?.uid.toString() |
|
|
|
) { |
|
|
|
if (dragCancel.value && targetElement?.dataset.dragCancel === uid) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
@ -889,10 +1001,13 @@ const bodyDown = (ev: MouseEvent & TouchEvent) => { |
|
|
|
bodyDrag.value = true; |
|
|
|
} |
|
|
|
|
|
|
|
const pointerX = ev.pageX === undefined ? ev.touches[0]!.pageX : ev.pageX; |
|
|
|
const pointerY = ev.pageY === undefined ? ev.touches[0]!.pageY : ev.pageY; |
|
|
|
const pointerPosition = getPointerPosition(ev); |
|
|
|
|
|
|
|
if (!pointerPosition) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
saveDimensionsBeforeMove({ pointerX, pointerY }); |
|
|
|
saveDimensionsBeforeMove(pointerPosition); |
|
|
|
|
|
|
|
if (parentLimitation.value) { |
|
|
|
limits.value = calcDragLimitation(); |
|
|
|
@ -921,8 +1036,10 @@ watch( |
|
|
|
watch( |
|
|
|
() => z.value, |
|
|
|
(val) => { |
|
|
|
if ((val as number) >= 0 || val === 'auto') { |
|
|
|
zIndex.value = val as number; |
|
|
|
if (typeof val === 'number' && val >= 0) { |
|
|
|
zIndex.value = val; |
|
|
|
} else if (val === 'auto') { |
|
|
|
zIndex.value = null; |
|
|
|
} |
|
|
|
}, |
|
|
|
{ immediate: true }, |
|
|
|
@ -931,13 +1048,22 @@ watch( |
|
|
|
watch( |
|
|
|
() => x.value, |
|
|
|
(newVal, oldVal) => { |
|
|
|
if (stickDrag.value || bodyDrag.value || newVal === left.value) { |
|
|
|
const currentLeft = left.value; |
|
|
|
const currentTop = top.value; |
|
|
|
|
|
|
|
if ( |
|
|
|
stickDrag.value || |
|
|
|
bodyDrag.value || |
|
|
|
currentLeft === null || |
|
|
|
currentTop === null || |
|
|
|
newVal === currentLeft |
|
|
|
) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const delta = oldVal - newVal; |
|
|
|
|
|
|
|
bodyDown({ pageX: left.value!, pageY: top.value! } as MouseEvent & |
|
|
|
bodyDown({ pageX: currentLeft, pageY: currentTop } as MouseEvent & |
|
|
|
TouchEvent); |
|
|
|
bodyMove({ x: delta, y: 0 }); |
|
|
|
|
|
|
|
@ -950,13 +1076,22 @@ watch( |
|
|
|
watch( |
|
|
|
() => y.value, |
|
|
|
(newVal, oldVal) => { |
|
|
|
if (stickDrag.value || bodyDrag.value || newVal === top.value) { |
|
|
|
const currentLeft = left.value; |
|
|
|
const currentTop = top.value; |
|
|
|
|
|
|
|
if ( |
|
|
|
stickDrag.value || |
|
|
|
bodyDrag.value || |
|
|
|
currentLeft === null || |
|
|
|
currentTop === null || |
|
|
|
newVal === currentTop |
|
|
|
) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const delta = oldVal - newVal; |
|
|
|
|
|
|
|
bodyDown({ pageX: left.value, pageY: top.value } as MouseEvent & |
|
|
|
bodyDown({ pageX: currentLeft, pageY: currentTop } as MouseEvent & |
|
|
|
TouchEvent); |
|
|
|
bodyMove({ x: 0, y: delta }); |
|
|
|
|
|
|
|
@ -969,16 +1104,23 @@ watch( |
|
|
|
watch( |
|
|
|
() => w.value, |
|
|
|
(newVal, oldVal) => { |
|
|
|
const currentRight = right.value; |
|
|
|
const currentTop = top.value; |
|
|
|
|
|
|
|
if (stickDrag.value || bodyDrag.value || newVal === width.value) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (currentRight === null || currentTop === null) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const stick = 'mr'; |
|
|
|
const delta = (oldVal as number) - (newVal as number); |
|
|
|
|
|
|
|
stickDown( |
|
|
|
stick, |
|
|
|
{ pageX: right.value, pageY: top.value! + height.value / 2 }, |
|
|
|
{ pageX: currentRight, pageY: currentTop + height.value / 2 }, |
|
|
|
true, |
|
|
|
); |
|
|
|
stickMove({ x: delta, y: 0 }); |
|
|
|
@ -992,16 +1134,23 @@ watch( |
|
|
|
watch( |
|
|
|
() => h.value, |
|
|
|
(newVal, oldVal) => { |
|
|
|
const currentLeft = left.value; |
|
|
|
const currentBottom = bottom.value; |
|
|
|
|
|
|
|
if (stickDrag.value || bodyDrag.value || newVal === height.value) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
if (currentLeft === null || currentBottom === null) { |
|
|
|
return; |
|
|
|
} |
|
|
|
|
|
|
|
const stick = 'bm'; |
|
|
|
const delta = (oldVal as number) - (newVal as number); |
|
|
|
|
|
|
|
stickDown( |
|
|
|
stick, |
|
|
|
{ pageX: left.value! + width.value / 2, pageY: bottom.value }, |
|
|
|
{ pageX: currentLeft + width.value / 2, pageY: currentBottom }, |
|
|
|
true, |
|
|
|
); |
|
|
|
stickMove({ x: 0, y: delta }); |
|
|
|
@ -1015,7 +1164,7 @@ watch( |
|
|
|
watch( |
|
|
|
() => parentW.value, |
|
|
|
(val) => { |
|
|
|
right.value = val - width.value - left.value!; |
|
|
|
right.value = val - width.value - (left.value ?? 0); |
|
|
|
parentWidth.value = val; |
|
|
|
}, |
|
|
|
); |
|
|
|
@ -1023,7 +1172,7 @@ watch( |
|
|
|
watch( |
|
|
|
() => parentH.value, |
|
|
|
(val) => { |
|
|
|
bottom.value = val - height.value - top.value!; |
|
|
|
bottom.value = val - height.value - (top.value ?? 0); |
|
|
|
parentHeight.value = val; |
|
|
|
}, |
|
|
|
); |
|
|
|
|
xingyu4j
2 weeks ago