AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-19 12:49:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: box组件在缩放后不会超出屏幕

Browse Source
This commit is contained in:
unanmed 2024-11-19 17:13:03 +08:00
parent 3bbb502fd7
commit 4e21f60696
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/box.vue
View File

@ -51,7 +51,8 @@ import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
import { ArrowsAltOutlined, DragOutlined } from '@ant-design/icons-vue'; import { ArrowsAltOutlined, DragOutlined } from '@ant-design/icons-vue';
import { isMobile, useDrag, cancelGlobalDrag } from '../plugin/use'; import { isMobile, useDrag, cancelGlobalDrag } from '../plugin/use';
import { has, requireUniqueSymbol } from '../plugin/utils'; import { has, requireUniqueSymbol } from '../plugin/utils';
import { sleep } from 'mutate-animate';
// todo: 重写
const props = defineProps<{ const props = defineProps<{
dragable?: boolean; dragable?: boolean;
@ -81,11 +82,10 @@ let bottomB: HTMLDivElement;
let drag: HTMLElement; let drag: HTMLElement;
let size: HTMLElement; let size: HTMLElement;
const maxWidth = window.innerWidth; const width = ref(
const maxHeight = window.innerHeight; isMobile ? window.innerWidth - 100 : window.innerHeight * 0.175
);
const width = ref(isMobile ? maxWidth - 100 : maxHeight * 0.175); const height = ref(isMobile ? 250 : window.innerHeight - 100);
const height = ref(isMobile ? 250 : maxHeight - 100);
const left = ref(isMobile ? 30 : 50); const left = ref(isMobile ? 30 : 50);
const top = ref(isMobile ? 30 : 50); const top = ref(isMobile ? 30 : 50);
@ -106,14 +106,14 @@ let lastY = 0;
function clampX(x: number) { function clampX(x: number) {
if (x < 16) x = 16; if (x < 16) x = 16;
const mx = maxWidth - 16 - main.offsetWidth; const mx = window.innerWidth - 16 - main.offsetWidth;
if (x > mx) x = mx; if (x > mx) x = mx;
return x; return x;
} }
function clampY(y: number) { function clampY(y: number) {
if (y < 16) y = 16; if (y < 16) y = 16;
const my = maxHeight - 16 - main.offsetHeight; const my = window.innerHeight - 16 - main.offsetHeight;
if (y > my) y = my; if (y > my) y = my;
return y; return y;
} }
@ -124,14 +124,14 @@ function clampPos(x: number, y: number) {
function clampWidth(w: number) { function clampWidth(w: number) {
if (w < 16) w = 16; if (w < 16) w = 16;
const mw = maxWidth - 16 - main.offsetLeft; const mw = window.innerWidth - 16 - main.offsetLeft;
if (w > mw) w = mw; if (w > mw) w = mw;
return w; return w;
} }
function clampHeight(h: number) { function clampHeight(h: number) {
if (h < 16) h = 16; if (h < 16) h = 16;
const mh = maxHeight - 16 - main.offsetTop; const mh = window.innerHeight - 16 - main.offsetTop;
if (h > mh) h = mh; if (h > mh) h = mh;
return h; return h;
} }
@ -141,13 +141,11 @@ function clampSize(w: number, h: number) {
} }
function dragFn(x: number, y: number) { function dragFn(x: number, y: number) {
const { x: tx, y: ty } = clampPos(x, y); const { x: tx, y: ty } = clampPos(x + 8, y + 8);
left.value = tx; left.value = tx;
top.value = ty; top.value = ty;
main.style.left = `${tx}px`; main.style.left = `${tx}px`;
main.style.top = `${ty}px`; main.style.top = `${ty}px`;
moveSelected.value = true;
clearTimeout(moveTimeout); clearTimeout(moveTimeout);
lastX = x; lastX = x;
lastY = y; lastY = y;
@ -184,7 +182,7 @@ function bottomDrag(x: number, y: number) {
} }
function resizeBox(x: number, y: number) { function resizeBox(x: number, y: number) {
const { w, h } = clampSize(x - main.offsetLeft, y - main.offsetTop); const { w, h } = clampSize(x - main.offsetLeft - 8, y - main.offsetTop - 8);
width.value = w; width.value = w;
height.value = h; height.value = h;
main.style.width = `${w}px`; main.style.width = `${w}px`;
@ -202,15 +200,20 @@ function resize() {
if (!main) return; if (!main) return;
if (has(props.left)) left.value = props.left;
if (has(props.top)) top.value = props.top;
if (has(props.width)) width.value = props.width; if (has(props.width)) width.value = props.width;
if (has(props.height)) height.value = props.height; if (has(props.height)) height.value = props.height;
if (has(props.left)) left.value = props.left;
if (has(props.top)) top.value = props.top;
main.style.left = `${left.value}px`; width.value = clampWidth(width.value);
main.style.top = `${top.value}px`; height.value = clampHeight(height.value);
main.style.width = `${width.value}px`; main.style.width = `${width.value}px`;
main.style.height = `${height.value}px`; main.style.height = `${height.value}px`;
left.value = clampX(left.value);
top.value = clampY(top.value);
main.style.left = `${left.value}px`;
main.style.top = `${top.value}px`;
} }
onUpdated(resize); onUpdated(resize);
@ -260,9 +263,11 @@ onMounted(async () => {
useDrag(bottomB, bottomDrag, void 0, void 0, true); useDrag(bottomB, bottomDrag, void 0, void 0, true);
useDrag(size, resizeBox, void 0, void 0, true); useDrag(size, resizeBox, void 0, void 0, true);
} }
window.addEventListener('resize', resize);
}); });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('resize', resize);
if (props.dragable) cancelGlobalDrag(dragFn); if (props.dragable) cancelGlobalDrag(dragFn);
if (props.resizable) { if (props.resizable) {
cancelGlobalDrag(leftDrag); cancelGlobalDrag(leftDrag);