Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#885][3.0] Window 버그 수정 1차 #896

Merged
merged 2 commits into from
Sep 23, 2021
Merged

[#885][3.0] Window 버그 수정 1차 #896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c9a0e60
[#885][3.0] Window 버그 수정 1차
exemfe3 Sep 23, 2021
8edb328
[#885][3.0] body 클래스 제거 코드 추가
exemfe3 Sep 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/views/window/api/window.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
| ---- | ------- | ---- |
| mousedown | clickedInfo | 드래그 및 리사이즈를 위한 mousedown 이벤트 감지 |
| mousedown-mouseup | MouseEvent 객체 | 드래그 및 리사이즈를 위한 mouseup 이벤트 감지 |
| mousedown-mousemove | clickedInfo | 드래그 및 리사이즈를 위한 mousemove 이벤트 감지 |
| mousedown-mousemove | MouseEvent 객체 | 드래그 및 리사이즈를 위한 mousemove 이벤트 감지 |
| resize | MouseEvent 객체, positionInfo | 리사이즈를 위한 mousemove 이벤트 감지 |

##### clickedInfo
Expand Down
14 changes: 11 additions & 3 deletions src/components/window/Window.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
...baseStyle,
...dragStyle,
}"
@mousedown.prevent="startDrag"
@mousemove.prevent="moveMouse"
@mousedown="startDrag"
@mousemove="moveMouse"
>
<div
v-if="$slots.header || iconClass || title"
Expand Down Expand Up @@ -205,7 +205,15 @@ export default {
}
.ev-window-scroll-allow {
position: relative !important;
overflow-x: hidden !important;
&.horizontal-hide {
overflow-x: hidden !important;
}
&.vertical-hide {
overflow-y: hidden !important;
}
&.hide {
overflow: hidden !important;
}
}
.ev-window-dim-layer {
position: fixed;
Expand Down
83 changes: 66 additions & 17 deletions src/components/window/uses.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,23 @@ import {
getCurrentInstance, ref, computed, reactive, watch, nextTick,
} from 'vue';

// 세로 스크롤 너비
const getVScrollWidth = () => window.innerWidth - document.documentElement.clientWidth;
// 가로 스크롤 너비
const getHScrollWidth = () => window.innerHeight - document.documentElement.clientHeight;
// 전체 문서 너비
const getDocumentWidth = () => Math.max(
document.body.scrollWidth, document.documentElement.scrollWidth,
document.body.offsetWidth, document.documentElement.offsetWidth,
document.body.clientWidth, document.documentElement.clientWidth,
);
// 전체 문서 높이
const getDocumentHeight = () => Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight,
);

const useModel = () => {
const { props, emit } = getCurrentInstance();

Expand Down Expand Up @@ -112,33 +129,50 @@ const useModel = () => {
emit('update:visible', false);
};

// props.hideScroll === true 시, body 우측 padding & overflow hidden class 추가
const getScrollWidth = () => window.innerWidth - document.documentElement.clientWidth;
const changeBodyCls = (isVisible) => {
const hideScrollWindowCnt = root?.getElementsByClassName('scroll-lock')?.length;
const allowScrollWindowCnt = root?.getElementsByClassName('scroll-allow')?.length;
const bodyElem = document.body;

if (isVisible) {
if (props.hideScroll) {
// props.hideScroll === true 시,
// body 우측 padding 추가 & overflow hidden class 추가
if (!hideScrollWindowCnt) {
const scrollWidth = getScrollWidth();
const scrollWidth = getVScrollWidth();
bodyElem.style.paddingRight = `${scrollWidth}px`;
}
bodyElem.classList.add('ev-window-scroll-lock');
} else if (!props.hideScroll && !props.isModal) {
bodyElem.classList.add('ev-window-scroll-allow');
// !props.hideScroll && !props.isModal 시,
// body에 position: relative 추가, 스크롤 여부에 따라 overflow-x or y hidden 처리
const vScrollWidth = getVScrollWidth();
const hScrollWidth = getHScrollWidth();
const bodyClassName = ['ev-window-scroll-allow'];
if (vScrollWidth > 0 && hScrollWidth === 0) {
// 세로 스크롤만 있을 경우 - 가로 스크롤 막음
bodyClassName.push('horizontal-hide');
} else if (vScrollWidth === 0 && hScrollWidth > 0) {
// 가로 스크롤만 있을 경우 - 세로 스크롤 막음
bodyClassName.push('vertical-hide');
} else if (vScrollWidth === 0 && hScrollWidth === 0) {
// 둘다 없을 경우 - 가로&세로 스크롤 막음
bodyClassName.push('hide');
}

bodyElem.classList.add(...bodyClassName);
}
} else {
if (hideScrollWindowCnt === 1) {
bodyElem.style.removeProperty('padding-right');
bodyElem.classList.remove('ev-window-scroll-lock');
}
if (allowScrollWindowCnt === 1) {
bodyElem.classList.remove('ev-window-scroll-allow');
bodyElem.classList.remove('ev-window-scroll-allow', 'horizontal-hide', 'vertical-hide', 'hide');
}
}
};
setBasePosition();

watch(
() => props.visible,
Expand Down Expand Up @@ -174,9 +208,11 @@ const useMouseEvent = (param) => {
removeUnit,
} = param;

const draggingMinSize = 30;
const draggingMinSize = 50;
const grabbingBorderSize = 5;
const dragStyle = reactive({});
const documentWidth = ref(0);
const documentHeight = ref(0);
const clickedInfo = reactive({
state: '',
pressedSpot: '',
Expand Down Expand Up @@ -376,26 +412,39 @@ const useMouseEvent = (param) => {

// mousedown > mousemove: 마우스 드래그 중
const dragging = (e) => {
e.preventDefault();
clickedInfo.state = 'mousedown-mousemove';

// window header를 통해 mouseMove 됐을 경우
if (props.draggable && clickedInfo.pressedSpot === 'header') {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const diffTop = clickedInfo.clientY - e.clientY;
const diffLeft = clickedInfo.clientX - e.clientX;
// 전체 문서 너비&높이 세팅 - mount 때와 드래그 시 수치 다르게 측정되기 때문에 드래그 초기 한번만 세팅
if (!documentWidth.value) {
documentWidth.value = getDocumentWidth();
}
if (!documentHeight.value) {
documentHeight.value = getDocumentHeight();
}

// 스크롤 있을 경우 전체 문서 기준, 없을 경우 clientWidth, Height 기준
const windowWidth = props.hideScroll || props.isModal
? document.documentElement.clientWidth : documentWidth.value;
const windowHeight = props.hideScroll || props.isModal
? document.documentElement.clientHeight : documentHeight.value;
const diffTop = e.clientY - clickedInfo.clientY;
const diffLeft = e.clientX - clickedInfo.clientX;

let tempTop = clickedInfo.top + -diffTop;
let tempLeft = clickedInfo.left + -diffLeft;
let tempTop = clickedInfo.top + diffTop;
let tempLeft = clickedInfo.left + diffLeft;

if (tempTop < 0) {
if (tempTop < 0) { // 상
tempTop = 0;
} else if (tempTop > windowHeight - draggingMinSize) {
} else if (tempTop > windowHeight - draggingMinSize) { // 하
tempTop = Math.floor(windowHeight - draggingMinSize);
}

if (tempLeft < -(clickedInfo.width - draggingMinSize)) {
if (tempLeft < -(clickedInfo.width - draggingMinSize)) { // 좌
tempLeft = -Math.floor(clickedInfo.width - draggingMinSize);
} else if (tempLeft > windowWidth - draggingMinSize) {
} else if (tempLeft > windowWidth - draggingMinSize) { // 우
tempLeft = Math.floor(windowWidth - draggingMinSize);
}

Expand All @@ -407,7 +456,7 @@ const useMouseEvent = (param) => {
resizeWindow(e);
}

emit('mousedown-mousemove', { ...clickedInfo });
emit('mousedown-mousemove', e);
};

// mousedown > mouseup: 마우스 드래그 종료
Expand Down