show & select branch list

psmuler commented 1 year ago

プルダウンメニューを作成し、.git管理フォルダのブランチ一覧を表示するようにしましょう

psmuler commented 1 year ago

プルダウンメニューを作成し、.git管理フォルダのブランチ一覧を表示するには、以下の手順でindex.htmlとrenderer.jsファイルを更新してください。

index.htmlファイルを更新:

ブランチ一覧を表示するための<select>要素を追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello, Electron!</h1>
    <button id="file-btn">Open</button>
    <button id="save-btn">Save</button>
    <button id="git-init-btn">Git Init</button>
    <span id="git-status" style="margin-left: 10px;"></span>
    <span id="folder-path" style="margin-left: 10px;"></span>
    <br />
    <select id="branch-select" style="margin-top: 10px;"></select>
    <br />
    <textarea id="text-editor" rows="20" cols="80"></textarea>

    <script src="renderer.js"></script>
  </body>
</html>

renderer.jsファイルを更新:

フォルダが選択されたときに、ブランチ一覧を取得し、プルダウンメニューに表示する処理を追加します。

const { ipcRenderer } = require('electron');
const fs = require('fs');
const { exec } = require('child_process');

const fileBtn = document.getElementById('file-btn');
const saveBtn = document.getElementById('save-btn');
const gitInitBtn = document.getElementById('git-init-btn');
const textEditor = document.getElementById('text-editor');
const folderPathSpan = document.getElementById('folder-path');
const gitStatusSpan = document.getElementById('git-status');
const branchSelect = document.getElementById('branch-select');

// ... (fileBtn, saveBtn, gitInitBtn, ipcRendererのイベントリスナーは省略) ...

function updateBranchList(folderPath) {
  exec(`git -C "${folderPath}" branch`, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`Stderr: ${stderr}`);
      return;
    }

    const branches = stdout.split('\n').filter(branch => branch.trim() !== '').map(branch => branch.trim());
    branchSelect.innerHTML = '';

    branches.forEach(branch => {
      const option = document.createElement('option');
      option.text = branch;
      branchSelect.add(option);
    });
  });
}

ipcRenderer.on('selected-folder', (event, folderPath) => {
  // フォルダパスを表示
  folderPathSpan.textContent = folderPath;

  fs.access(`${folderPath}/.git`, fs.constants.F_OK, (err) => {
    if (err) {
      // ... (.gitフォルダが存在しない場合の処理は省略) ...
    } else {
      // .gitフォルダが存在する場合
      gitStatusSpan.innerHTML = '<span style="color: blue;">&#11044;</span>';

      // ブランチ一覧を更新
      updateBranchList(folderPath);
    }
  });
});

psmuler commented 1 year ago

フォルダを選択した後、ブランチの一覧がうまく取得できていないようです。

psmuler commented 1 year ago

すみません、問題があったようです。ブランチの一覧取得に問題がある場合、git branchコマンドが期待通りに動作していない可能性があります。ここでは、代わりにgit for-each-refコマンドを使用してブランチの一覧を取得する方法を提案します。

renderer.jsファイルのupdateBranchList関数を以下のように変更してみてください。

// ... (他のコードは省略) ...

function updateBranchList(folderPath) {
  exec(`git -C "${folderPath}" for-each-ref --format="%(refname:short)" refs/heads/`, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`Stderr: ${stderr}`);
      return;
    }

    const branches = stdout.split('\n').filter(branch => branch.trim() !== '').map(branch => branch.trim());
    branchSelect.innerHTML = '';

    // "Create new branch"の項目を追加
    const createNewBranchOption = document.createElement('option');
    createNewBranchOption.text = 'Create new branch';
    branchSelect.add(createNewBranchOption);

    branches.forEach(branch => {
      const option = document.createElement('option');
      option.text = branch;
      branchSelect.add(option);
    });
  });
}

// ... (他のコードは省略) ...

git for-each-refコマンドは、リポジトリ内の各リファレンス（ブランチやタグなど）に対して繰り返し処理を行うコマンドです。ここでは、--formatオプションでブランチ名のみを出力するよう指定し、refs/heads/でローカルブランチに限定しています。

この変更により、ブランチの一覧が正しく取得されることを期待しています。再度お試しください。

psmuler commented 1 year ago

フォルダを選択した後、.gitがない場合にgit initしたときに同時にmainブランチを作るようにしましょう

psmuler commented 1 year ago

フォルダを選択した後、.gitがない場合にgit initしたときに同時にmainブランチを作成するようにするには、gitInit関数内でgit initコマンドを実行した後に、git checkout -b mainコマンドを実行するように変更します。renderer.jsファイルを以下のように更新してください。

// ... (他のコードは省略) ...

function gitInit(folderPath) {
  exec(`git init "${folderPath}"`, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`Stderr: ${stderr}`);
      return;
    }
    console.log(`Git initialized: ${stdout}`);

    // mainブランチを作成
    exec(`git -C "${folderPath}" checkout -b main`, (error, stdout, stderr) => {
      if (error) {
        console.error(`Error: ${error.message}`);
        return;
      }
      if (stderr) {
        console.error(`Stderr: ${stderr}`);
        return;
      }
      console.log(`Main branch created: ${stdout}`);

      // .gitフォルダが存在することを表示
      gitStatusSpan.innerHTML = '<span style="color: blue;">&#11044;</span>';

      // ブランチ一覧を更新
      updateBranchList(folderPath);
    });
  });
}

// ... (他のコードは省略) ...

これで、フォルダを選択した後、.gitがない場合にgit initしたときに同時にmainブランチが作成されます。

psmuler commented 1 year ago

updateBranchListでリストを更新したあと、適切に現在のbranchを取得しプルダウンリストに表示しましょう

psmuler commented 1 year ago

updateBranchList 関数内で git branch コマンドを実行し、現在のブランチを取得し、それをプルダウンリストに表示することができます。以下のように updateBranchList 関数を修正してください。

function updateBranchList(folderPath) {
  // ブランチの一覧を取得する
  exec(`git -C "${folderPath}" branch`, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`Stderr: ${stderr}`);
      return;
    }

    const branches = stdout.split('\n').map(branch => branch.trim());
    const currentBranch = branches.find(branch => branch.startsWith('*')).slice(1).trim();

    // プルダウンメニューをクリア
    branchSelect.innerHTML = '';

    // 新しいオプションを追加する
    branches.forEach(branch => {
      const option = document.createElement('option');
      option.value = branch.replace('*', '').trim();
      option.textContent = option.value;

      if (branch.startsWith('*')) {
        option.selected = true;
      }

      branchSelect.appendChild(option);
    });

    // 'Create new branch' オプションを追加
    const createNewBranchOption = document.createElement('option');
    createNewBranchOption.value = 'create-new-branch';
    createNewBranchOption.textContent = 'Create new branch';
    branchSelect.appendChild(createNewBranchOption);
  });
}

この修正により、updateBranchList 関数は現在のブランチを適切に取得し、プルダウンリストに表示するようになります。exec 関数で git branch コマンドを実行し、現在のブランチにアスタリスク（*）が付いていることを検出しています。その後、選択されたオプションとして現在のブランチを設定します。

psmuler commented 1 year ago

branchListに謎の空白が表示されます。

psmuler commented 1 year ago

空白が表示される原因は、git branch コマンドの出力に余分な空行が含まれていることです。これを解決するために、空白行を除外してからブランチ一覧を更新しましょう。以下のように updateBranchList 関数を修正してください。

function updateBranchList(folderPath) {
  // ブランチの一覧を取得する
  exec(`git -C "${folderPath}" branch`, (error, stdout, stderr) => {
    if (error) {
      console.error(`Error: ${error.message}`);
      return;
    }
    if (stderr) {
      console.error(`Stderr: ${stderr}`);
      return;
    }

    // 余分な空行を除去してからブランチを取得
    const branches = stdout.split('\n').filter(line => line.trim() !== '').map(branch => branch.trim());
    const currentBranch = branches.find(branch => branch.startsWith('*')).slice(1).trim();

    // プルダウンメニューをクリア
    branchSelect.innerHTML = '';

    // 新しいオプションを追加する
    branches.forEach(branch => {
      const option = document.createElement('option');
      option.value = branch.replace('*', '').trim();
      option.textContent = option.value;

      if (branch.startsWith('*')) {
        option.selected = true;
      }

      branchSelect.appendChild(option);
    });

    // 'Create new branch' オプションを追加
    const createNewBranchOption = document.createElement('option');
    createNewBranchOption.value = 'create-new-branch';
    createNewBranchOption.textContent = 'Create new branch';
    branchSelect.appendChild(createNewBranchOption);
  });
}

この修正により、updateBranchList 関数は空白行を除去してからブランチ一覧を更新するようになります。空白行をフィルタリングするために、filter 関数を使用して空白行を除去しています。これで、branchList に空白が表示されなくなります。

Escher-js / SkimmedMilk

show & select branch list #11