diff --git a/README.md b/README.md index af2bb5d..d5c5c05 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,14 @@ Visualize Git ============= -Git is an amazingly powerful tool — and it can be amazingly confusing. Demystify Git commands with visualizations powered by D3. Give it a try at [http://git-school.github.io/visualizing-git/](http://git-school.github.io/visualizing-git/)! +Git is an amazingly powerful tool — and it can be amazingly confusing. Demystify Git commands with visualizations powered by D3. Give it a try at [https://git-school.ggbest.ru](https://git-school.ggbest.ru)! +[Visualize Git](https://git-school.ggbest.ru) illustrates what's going on underneath the hood when you use common Git operations. You'll see what exactly is happening to your commit graph. We aim to support all the most basic git operations, including interacting with remotes. ![By Git School](http://i.imgur.com/EiuyjJQ.png?1) -[Visualize Git](http://git-school.github.io/visualizing-git/) illustrates what's going on underneath the hood when you use common Git operations. You'll see what exactly is happening to your commit graph. We aim to support all the most basic git operations, including interacting with remotes. +## Changes in this fork +Some improvements for testing. Import/Export buttons for Load & Save current state from/to json files. HASH's of commits changed to Cn (C0, C1, C2 and etc.). + Here are some examples of the fun things you can do with it: @@ -49,5 +52,5 @@ git tag We hope you find this tool useful! Issues and pull requests are welcome! Enjoy! :sparkles: - -Based on the awesome work done by [@onlywei](https://github.com/onlywei/explain-git-with-d3) :bow: +Based on this repo: [https://github.com/git-school/visualizing-git](https://github.com/git-school/visualizing-git) and also +based on the awesome work done by [@onlywei](https://github.com/onlywei/explain-git-with-d3) :bow: diff --git a/css/explaingit.css b/css/explaingit.css index 13f9b22..a445a29 100644 --- a/css/explaingit.css +++ b/css/explaingit.css @@ -135,18 +135,20 @@ span.cmd { top: 3px; } -.control-box button { +.control-box .button { font-family: Courier New; font-size: 12px; margin-right: 5px; margin-bottom: 5px; + position: absolute; + top: 30px; } .control-box .log { overflow-y: auto; position: absolute; background: #000; - top: 30px; + top: 60px; bottom: 20px; left: 0; right: 0; diff --git a/index.html b/index.html index a87e584..6939654 100644 --- a/index.html +++ b/index.html @@ -132,6 +132,10 @@ } } + window.import = function () { + open() + } + window.pres = function () { document.getElementById('last-command').style.display = 'block' } diff --git a/js/controlbox.js b/js/controlbox.js index c9761bf..7658319 100644 --- a/js/controlbox.js +++ b/js/controlbox.js @@ -97,13 +97,13 @@ function(_yargs, d3, demos) { render: function(container) { var cBox = this, - cBoxContainer, log, input, selector; + cBoxContainer, log, input, selector, exportbtn, importbtn, btndivs; cBoxContainer = container.append('div') .classed('control-box', true); selector = cBoxContainer.append('select') - .classed('scenario-chooser', true) + .classed('scenario-chooser', true); demos.forEach(function (demo) { var opt = selector.append('option') @@ -129,6 +129,57 @@ function(_yargs, d3, demos) { } }) + btndivs = cBoxContainer.append('div') + .classed("button", true); + + exportbtn = btndivs.append('input') + .attr('type', 'button') + .attr('value', 'Export'); + + exportbtn.on('click', function () { + var text = "test", + blob = new Blob([JSON.stringify(JSON.parse(window.localStorage.getItem('git-viz-snapshot')),null, 1)], { type: 'application/json' }), + anchor = document.createElement('a'); + + anchor.download = "export.json"; + anchor.href = (window.webkitURL || window.URL).createObjectURL(blob); + anchor.dataset.downloadurl = ['application/json', anchor.download, anchor.href].join(':'); + anchor.click(); + }) + + importbtn = btndivs.append('input') + .attr('type', 'button') + .attr('value', 'Import'); + + importbtn.on('click', function () { + if (!confirm('This will erase your current progress. Continue?')) + return false; + + // "simply" read file content after selecting... + $("#file").trigger("click"); + $('#file').change(function(){ + if($(this).val() != ""){ + var myFile = $('#file').prop('files')[0]; + + var fileReader = new FileReader(); + fileReader.readAsText(myFile); + fileReader.onload = function () { + var data = fileReader.result; + + window.clean(); + window.localStorage.setItem('git-viz-snapshot', data); + window.import(); + }; + } + }); + window.location.hash = "import"; + }) + + btndivs.append('input') + .attr('type', 'file') + .attr('id', 'file') + .attr('hidden', ''); + log = cBoxContainer.append('div') .classed('log', true); diff --git a/js/demos.js b/js/demos.js index 610796d..635b31d 100644 --- a/js/demos.js +++ b/js/demos.js @@ -5,7 +5,7 @@ define([], function () { key: 'free', message: 'Have fun!', commitData: [ - {id: 'e137e9b', tags: ['master'], message: 'first commit'}, + {id: 'C0', tags: ['master'], message: 'first commit'}, ] } @@ -14,10 +14,10 @@ define([], function () { key: 'free-remote', message: 'Have fun!', commitData: [ - {id: 'e137e9b', tags: ['master', 'origin/master'], message: 'first commit'}, + {id: 'C0', tags: ['master', 'origin/master'], message: 'first commit'}, ], originData: [ - {id: 'e137e9b', tags: ['master'], message: 'first commit'} + {id: 'C0', tags: ['master'], message: 'first commit'} ] } @@ -28,37 +28,37 @@ define([], function () { currentBranch: "feature", commitData: [ { - "id": "e137e9b", + "id": "C0", "tags": [], "message": "first commit", "parent": "initial", }, { "id": "84c98fe", - "parent": "e137e9b", + "parent": "C0", "tags": [ "master", "origin/master" ], }, { "id": "1c016b6", - "parent": "e137e9b", + "parent": "C0", "tags": [ "feature", "origin/feature", "HEAD" ], } ], originData: [ { - "id": "e137e9b", + "id": "C0", "tags": [], "message": "first commit", "parent": "initial", }, { "id": "84c98fe", - "parent": "e137e9b", + "parent": "C0", "tags": [ "master", "HEAD" ], }, { "id": "1c016b6", - "parent": "e137e9b", + "parent": "C0", "tags": [], }, { @@ -76,7 +76,7 @@ define([], function () { currentBranch: "feature", commitData: [ { - "id": "e137e9b", + "id": "C0", "tags": [], "message": "first commit", "parent": "initial", @@ -86,7 +86,7 @@ define([], function () { }, { "id": "84c98fe", - "parent": "e137e9b", + "parent": "C0", "tags": [ "master", "origin/master" @@ -97,7 +97,7 @@ define([], function () { }, { "id": "1c016b6", - "parent": "e137e9b", + "parent": "C0", "tags": [], "cx": 140, "cy": 240, @@ -126,7 +126,7 @@ define([], function () { ], originData: [ { - "id": "e137e9b", + "id": "C0", "tags": [], "message": "first commit", "parent": "initial", @@ -136,7 +136,7 @@ define([], function () { }, { "id": "84c98fe", - "parent": "e137e9b", + "parent": "C0", "tags": [ "master" ], @@ -146,7 +146,7 @@ define([], function () { }, { "id": "1c016b6", - "parent": "e137e9b", + "parent": "C0", "tags": [], "cx": 140, "cy": 270, @@ -181,7 +181,7 @@ define([], function () { message: 'Oops, let\'s revert some commits', commitData: [ { - "id": "e137e9b", + "id": "C0", "tags": [], "message": "first commit", "parent": "initial", @@ -192,7 +192,7 @@ define([], function () { { "id": "dd70cfe", "tags": [], - "parent": "e137e9b", + "parent": "C0", "cx": 140, "cy": 330, "branchless": false @@ -245,7 +245,7 @@ define([], function () { message: 'Let\'s pick some commits', commitData: [ { - "id": "e137e9b", + "id": "C0", "tags": [], "message": "first commit", "parent": "initial", @@ -256,7 +256,7 @@ define([], function () { { "id": "790dd94", "tags": [], - "parent": "e137e9b", + "parent": "C0", "cx": 140, "cy": 318, "branchless": false @@ -352,7 +352,7 @@ define([], function () { key: 'rebase', message: 'Try rebasing the `feature` branch', commitData: [ - {id: 'e137e9b', tags: ['master'], message: 'first commit'} + {id: 'C0', tags: ['master'], message: 'first commit'} ] } diff --git a/js/historyview.js b/js/historyview.js index 7687ac1..ec6f88e 100644 --- a/js/historyview.js +++ b/js/historyview.js @@ -287,11 +287,15 @@ define(['d3'], function() { } } + var lastCommitID = 0; HistoryView.generateId = function() { - return Math.floor((1 + Math.random()) * 0x10000000).toString(16).substring(1); + //return Math.floor((1 + Math.random()) * 0x10000000).toString(16).substring(1); + lastCommitID++; + return "C" + lastCommitID; //this.commitData.length; //Math.floor((1 + Math.random()) * 0x10000000).toString(16).substring(1); }; HistoryView.prototype = { + serialize: function () { var data = { commitData: this.commitData,