Electron에서 특정 범위를 드래그 할 수 있도록 설정할 수 있습니다.
Custom draggable region
드래그 가능 영역을 지정하는 방법은 CSS에서 -webkit-app-region: drag로 지정할 수 있습니다.
/* style.css */
body {
-webkit-app-region: drag;
}그리고 드래그 할 수 없는 영역도 다음과 같이 지정할 수 있습니다.
/* style.css */
button {
-webkit-app-region: no-drag;
}이슈 발생
커스텀 제목 표시줄을 생성하여 해당 영역을 위의 방법으로 드래그 가능하도록 설정했습니다.
그리고 드래그 영역이 클릭/드래그 상태일 경우 제목 표시줄의 색이 변하여 드래그 활성화 상태임을 나타내고자 했습니다.
드래그 활성화 상태임을 나타내기 위해 아래와 같이 간단한 CSS 코드를 설정했습니다.
const Container = styled.div`
background-color: white;
-webkit-app-region: drag;
:active {
background-color: red;
}
`윈도우 환경에서 해당 동작이 정상적으로 수행되는지 확인해보았습니다.
드래그 영역은 문제없이 동작하지만, :active 내부의 스타일 코드는 동작하지 않았습니다.
하지만 맥에서는 제가 의도한대로 동작합니다.
윈도우 환경의 사용자를 타겟으로 한 기능이기 때문에 맥에서 동작해봤자 의미가 없습니다.. 또르르
원인
링크의 내용을 보면 -webkit-app-region: drag가 원도우에서 마우스 이벤트나 스크롤 이벤트 등을 동작하지 못하게 하는데, 그 외에도 여러 동작들을 못하게 막습니다.
해결 방법 중 하나는 상단 제목 표시줄을 다른 방법으로 생성하는 것인데 이 방법은 현재 상태에서 수정하기 어려울 것 같아 시도해보지 않았습니다.
그 외에 제가 시도해본 방법을 공유합니다.
시도해본 방법
윈도우에서는 전부 정상적으로 동작하지 않았던 코드입니다.
드래그는 정상적으로 동작하나 스타일 코드나 마우스/터치 이벤트는 정상적으로 동작하지 않았습니다.
:active또는:hover로 스타일 적용하기
⇒ 각 상태에 배경색 변경되지 않음
export const DragArea = () => {
return <Container />;
}
const Contaienr = styled.div`
width: 100%;
height: 30px;
-webkit-app-region: drag;
:active {
background-color: #fff;
}
// 또는
// :hover {
// background-color: #fff;
// }
`1-1. 혹시 코드의 순서가 영향이 있을까 싶어서 -webkit-app-region: drag;를 해당 컴포넌트 스타일 최하단에 적용
export const DragArea = () => {
return <Container />;
}
const Contaienr = styled.div`
width: 100%;
height: 30px;
:active {
background-color: #fff;
}
// 또는
// :hover {
// background-color: #fff;
// }
-webkit-app-region: drag;
`- 드래그 여부를 boolean 값으로 두어 마우스 이벤트나 터치 이벤트가 발생했을 경우 드래그 상태 값을 변경하여 각 상태에 따른 스타일 코드 적용하기
export const DragArea = () => {
const [isDraggable, setIsDraggable] = useState<boolean>(false);
const handleDragStart = () => {
setIsDraggable(true);
};
const handleDragEnd = () => {
setIsDraggable(false);
};
return (
<Container
onMouseDown={handleDragStart}
onMouseUp={handleDragEnd}
onTouchStart={handleDragStart}
onTouchEnd={handleDragEnd}
/>
);
}
const Contaienr = styled.div<{ isDraggable: boolean }>`
width: 100%;
height: 30px;
background-color: ${({ isDraggable }) => (isDraggable ? #fff : 'transparent')};
// 이 방법도 시도해 봄
// ${({ isDragged }) => isDragged && 'background-color: #fff'}
`-webkit-app-region: drag;스타일이 적용되지 않은 다른 요소에 드래그 시 스타일 적용하기
⇒ 위의 방법1, 2를 drag 요소가 아닌 각 부모 요소, 형제 요소, 자식 요소를 생성하여 드래그 상태에 따라 스타일을 적용했으나 정상적으로 동작하지 않았습니다.
마무리
- 아직도 해결을 못한 상태지만 저와 같은 문제에 직면한 분들이 있을거라 생각하고 글을 작성하게 되었습니다.
- 혹시 커스텀 드래그 영역에서 마우스 이벤트를 동작시킬 수 있는 방법이 있다면 알려주세요..ㅜㅜ
참고
