LoginSignup
8

More than 5 years have passed since last update.

posted at

updated at

Organization

Gitgraph.js をラップしてコマンドっぽく使えるようにした

Git のコミットグラフを簡単に作成できる Gitgraph.js を使っていて、「git のコマンドを入力している感じで実装したいなぁ」と思ったので作ってみた。

gitgraph.png

こんなのを描こうと思った場合、 Gitgraph.js をそのまま使うと

var gitGraph = new GitGraph({orientation: 'vertical-reverse'});

// master ブランチ作成
var master = gitGraph.branch({
    name: 'master',
    color: 'red',
    commitDefaultOptions: {
        color: 'red'
    }
});
master.commit().tag('v0.0.0');

// develop ブランチ作成
var develop = gitGraph.branch({
    name: 'develop',
    color: 'deepskyblue',
    commitDefaultOptions: {
        color: 'deepskyblue'
    }
});
develop.commit();

// topic1 ブランチ作成
var topic1 = develop.branch('topic1');
topic1.commit().commit();

// topic2 ブランチ作成
var topic2 = develop.branch('topic2');
topic2.commit();

// topic1 を develop にマージ
topic1.merge(develop);

// develop を topic2 にマージ
develop.merge(topic2);
// topic2 を develop にマージ
topic2.commit().merge(develop);

// develop を master にマージ
develop.merge(master);
master.tag('v1.0.0')

// 孤立ブランチを作成して master にマージ
var orphan = gitGraph.orphanBranch({
    name: 'orphan',
    color: 'purple',
    commitDefaultOptions: {
        color: 'purple'
    }
});
orphan.commit().commit().merge(master);
master.tag('v2.0.0');

こんな感じになる。

これが、

new GitGraphWrapperExtention({orientation: 'vertical-reverse', elementId: 'gitGraphWrapperExtention'})
    .defaultOptions({
        branch: {
            master: {
                color: 'red',
                commitDefaultOptions: {
                    color: 'red'
                }
            },
            develop: {
                color: 'deepskyblue',
                commitDefaultOptions: {
                    color: 'deepskyblue'
                }
            },
            orphan: {
                color: 'purple',
                commitDefaultOptions: {
                    color: 'purple'
                }
            }
        }
    })

    // master ブランチを作成
    .branch('master')
    .commit()
    .tag('v0.0.0')

    // develop ブランチを作成
    .branch('develop')
    .commit()

    // topic1 ブランチを作成
    .branch('topic1')
    .commit()
    .commit()

    // develop ブランチから topic2 ブランチを作成
    .branch('topic2', 'develop')
    .commit()

    // develop に移動して topic1 をマージ
    .checkout('develop')
    .merge('topic1')

    // topic2 に移動して develop をマージ
    .checkout('topic2')
    .merge('develop')
    .commit()
    // topic2 を develop にマージ
    .checkout('develop')
    .merge('topic2')

    // develop を master にマージ
    .checkout('master')
    .merge('develop')
    .tag('v1.0.0')

    // 孤立ブランチを作成して master にマージ
    .orphanBranch('orphan')
    .commit()
    .commit()
    .checkout('master')
    .merge('orphan')
    .tag('v2.0.0')
;

こんな感じで書けるようになる。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8