[Electron] contextmenu 만드는 방법

[Electron] contextmenu 만드는 방법

---

Contextmenu? 마우스 오른쪽 버튼 눌렀을 때 생성되는 메뉴.

 

먼저, menu 관련 electron api 추가한다.

const electron = require('electron');
const { remote } = electron;
const { Menu, MenuItem } = remote;

 

사용할 메뉴를 정의한다.

    ex. 마우스 오른쪽 클릭할 경우 표시될 menu를 만들 예정이기 때문에 menu 이름을 `rcMenu`라 정의했다.

// 메뉴 생성
const rcMenu = new Menu();

 

append 함수를 이용하여 메뉴에 아이템(옵션)들을 추가한다.

// 일반 메뉴 아이템
rcMenu.append(new MenuItem({
    label: 'item01',
    click() {
        // 이벤트
        alert('item01');
    }
}))
// 구분자
rcMenu.append(new MenuItem({
    type: 'separator'
}))
// 체크박스를 갖는 메뉴 아이템
rcMenu.append(new MenuItem({
    label: 'Item02',
    type: 'checkbox',
    checked: true,
    click() {
        // 이벤트
        alert('item02');
    }
}))

 

이제 윈도우에서 마우스 오른쪽을 클릭할 경우 menu가 표시될 수 있도록 이벤트를 생성한다.

기본적으로, 윈도우에 마우스 오른쪽 클릭 이벤트는 다음과 같다.

window.addEventListener('contextmenu', (e) => {
    e.preventDefault()
}, false);

 

특정 영역에서만 menu가 표시되도록 설정하고 싶다면

다음과 같이 조건을 추가하면 된다.

    ex. 마우스 오른쪽 클릭한 위치의 요소가 "mouse" 클래스를 갖는 경우에만 이벤트 발생

window.addEventListener('contextmenu', (e) => {
    e.preventDefault()
    
    if (e.target.classList.contains("mouse")) {
        rcMenu.popup({
            window: remote.getCurrentWindow()
        })
    }

}, false)

 

 

만약, 마우스 오른쪽 클릭할 경우 메뉴가 표시되며 해당 요소에 특정 css 같은 이벤트를 넣고 싶은 경우

    ex. 마우스 오른쪽 눌렀을 때 해당 요소에 `activated` 클래스 추가하면서 메뉴 표시

/* css */
.activated {
    backgroun-color: red;
}

// javascript
window.addEventListener('contextmenu', (e) => {
    e.preventDefault()

    if (e.target.classList.contains("mouse")) {
        e.target.classList.add("activated");

        // 메뉴 표시
        rcMenu.popup({
            window: remote.getCurrentWindow()
        })
    }

}, false)

하지만, 위와 같이 입력할 경우 메뉴가 표시된 후 메뉴가 닫히면 `activated`클래스의 css 가 반영된다.

( * 2019.04.05 : 찾아보니, popup 부분이 비동기라 그런것 같다. )

그래서 `activated`의 css가 실행된 후 menu가 표시되도록 `setTimeout`을 걸어 눈속임을 주어

동시에 표시되는 것처럼 구현했다.

window.addEventListener('contextmenu', (e) => {
    e.preventDefault()

    if (e.target.classList.contains("mouse")) {
        e.target.classList.add("activated");

        // 메뉴 표시
        setTimeout(function () {
            rcMenu.popup({
                window: remote.getCurrentWindow()
            })
        }, 100);
    }

}, false)

 

결과 화면

 

 

 

 

 

---

[참고] Electron Documentation - Menu