Electron Adventures: 에피소드 89: 문서 기본 설정 기억

에피소드 86에서 우리는 앱이 창의 크기와 위치를 기억하도록 만들었습니다. 앱에 여러 개의 창이 있다는 점을 제외하면 이제 비슷한 작업을 수행하려고 합니다. 따라서 각 문서에 대해 하나씩 기억해야 합니다.

우리는 복잡한 작업을 수행하지 않을 것이며 기억은 문서의 전체 경로를 기반으로 할 것입니다.

이제 npm install electron-settings 코딩을 시작해 봅시다!

우리가 할 모든 코드는 백엔드에 index.js 있을 뿐이고 프런트엔드 코드에서는 아무 것도 변경하지 않을 것입니다.

앱 시작

앱을 시작하면 하나 이상의 CSV 파일을 선택할 수 있는 파일 대화 상자가 표시됩니다.

let { app, BrowserWindow, dialog } = require("electron")

async function startApp() {
  let { canceled, filePaths } = await dialog.showOpenDialog({
    properties: ["openFile", "multiSelections", "showHiddenFiles"],
    filters: [
      { name: "CSV files", extensions: ["csv"] },
      { name: "All Files", extensions: ["*"] }
    ],
    message: "Select a CSV file to open",
    defaultPath: `${__dirname}/samples`,
  })
  if (canceled) {
    app.quit()
  }
  for (let path of filePaths) {
    createWindow(path)
  }
}

app.on("ready", startApp)

app.on("window-all-closed", () => {
  app.quit()
})

여러 CSV 파일을 선택하면 각각에 대해 createWindow(path)를 호출하여 창을 만듭니다.

창 만들기

그런 다음 주어진 문서로 창을 만들어야 합니다.

let settings = require("electron-settings")

function createWindow(path) {
  let key = `windowState-${path}`
  let windowState = settings.getSync(key) || { width: 1024, height: 768 }

  let qs = new URLSearchParams({ path }).toString();
  let win = new BrowserWindow({
    ...windowState,
    webPreferences: {
      preload: `${__dirname}/preload.js`,
    },
  })

  function saveSettings() {
    windowState = win.getBounds()
    console.log("SAVING", path, windowState)
    settings.setSync(key, windowState)
  }

  win.on("resize", saveSettings)
  win.on("move", saveSettings)
  win.on("close", saveSettings)

  win.loadURL(`http://localhost:5000/?${qs}`)
}

창을 열 때 문서 경로와 일치하는 항목이 있으면 저장된 기본 설정을 확인합니다. 그렇다면 우리는 그것을 사용합니다. 그렇지 않으면 기본 창 크기를 사용하고 OS가 원할 때마다 배치하도록 합니다.

창을 이동하거나 크기를 조정할 때마다 위치와 크기를 추적하고 오른쪽 키를 사용하여 설정에 저장합니다.

제한 사항

Electron에는 백엔드와 프런트엔드 부분이 있지만 책임을 분담하는 방식은 논리적 고려 사항을 기반으로 하지 않으며 일반 브라우저가 작업을 수행하는 방식의 부작용일 뿐입니다.

프런트엔드(렌더러)가 각 창의 상태에 대한 모든 것을 관리합니다. 괜찮습니다

.

백엔드(기본) 프로세스는 각 창의 크기와 위치를 관리합니다. 정말 이상하고 어색합니다

.

그래서 우리가 한 일은 각 문서의 창 위치와 크기를 기억하는 백엔드 측 시스템을 만드는 것입니다. 그러나 우리는 각 창이 얼마나 멀리 스크롤되었는지 또는 (이를 구현한 경우) 다양한 열에 대한 정렬 순서 등과 같은 각 창의 상태에 대한 모든 것을 기억하기 위해 완전히 별도의 시스템을 만들어야 합니다.

그다지 어렵지는 않지만 Electron은 우리가 앱을 형편없이 설계하도록 강요합니다.

두 개의 완전히 분리된 시스템

을 가질 수 있습니다.

백엔드 관리 시스템을 가질 수 있습니다. 이 시스템은 프런트엔드가 시작될 때 수행할 작업을 알려주고 앱 상태 변경에 대한 메시지를 프런트엔드에서 받습니다

.

프런트엔드 관리 시스템을 사용하여 시작할 때 창을 재배치할 위치를 백엔드에 알리고(조심하지 않으면 창이 잠시 잘못된 위치에 있을 수 있음) 창 위치에 대한 메시지를 백엔드에서 받을 수 있습니다. 및 크기 변경

이 디자인 중 어느 것도 훌륭하지 않습니다.

결과

다음은 모든 문서의 크기 조정을 기억하는 결과입니다.



다음 에피소드에서는 CSV 뷰어에 더 많은 OS 통합을 추가할 것입니다.

평소와 같이 all the code for the episode is here .