From a7380f4a948c9001e132c765b58875d665dd63d4 Mon Sep 17 00:00:00 2001 From: svgr44 Date: Sat, 22 Feb 2020 00:08:04 +0300 Subject: [PATCH 1/4] Export button --- css/explaingit.css | 6 ++++-- js/controlbox.js | 21 +++++++++++++++++++-- 2 files changed, 23 insertions(+), 4 deletions(-) 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/js/controlbox.js b/js/controlbox.js index c9761bf..a399734 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; 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,23 @@ function(_yargs, d3, demos) { } }) + exportbtn = cBoxContainer.append('input') + .attr('type', 'button') + .attr('value', 'Export') + .classed("button", true); + + + exportbtn.on('click', function () { + var text = "test", + blob = new Blob([window.localStorage.getItem('git-viz-snapshot')], { type: 'text/plain' }), + anchor = document.createElement('a'); + + anchor.download = "export.json"; + anchor.href = (window.webkitURL || window.URL).createObjectURL(blob); + anchor.dataset.downloadurl = ['text/plain', anchor.download, anchor.href].join(':'); + anchor.click(); + }) + log = cBoxContainer.append('div') .classed('log', true); From 939f268fb0708c8395ddbabe7da5ab83268bc6c6 Mon Sep 17 00:00:00 2001 From: svgr44 Date: Sat, 22 Feb 2020 10:55:44 +0300 Subject: [PATCH 2/4] Commit Hash-to-Name --- js/demos.js | 40 ++++++++++++++++++++-------------------- js/historyview.js | 6 +++++- 2 files changed, 25 insertions(+), 21 deletions(-) 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, From 0d9106266631e43dd6b7a23a13df5ee84b35cec5 Mon Sep 17 00:00:00 2001 From: svgr44 Date: Sat, 22 Feb 2020 19:47:02 +0300 Subject: [PATCH 3/4] Import button --- index.html | 4 ++++ js/controlbox.js | 48 +++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 45 insertions(+), 7 deletions(-) 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 a399734..7658319 100644 --- a/js/controlbox.js +++ b/js/controlbox.js @@ -97,7 +97,7 @@ function(_yargs, d3, demos) { render: function(container) { var cBox = this, - cBoxContainer, log, input, selector, exportbtn; + cBoxContainer, log, input, selector, exportbtn, importbtn, btndivs; cBoxContainer = container.append('div') .classed('control-box', true); @@ -129,23 +129,57 @@ function(_yargs, d3, demos) { } }) - exportbtn = cBoxContainer.append('input') - .attr('type', 'button') - .attr('value', 'Export') + 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([window.localStorage.getItem('git-viz-snapshot')], { type: 'text/plain' }), + 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 = ['text/plain', anchor.download, anchor.href].join(':'); + 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); From 3cd1180070dc1a0cf338ed7f8bc0e5fba00c3f7b Mon Sep 17 00:00:00 2001 From: svgr44 Date: Sat, 22 Feb 2020 21:05:39 +0300 Subject: [PATCH 4/4] Readme update --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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: