Export button

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:

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;

index.html

@@ -132,6 +132,10 @@
       }
     }
 
+    window.import = function () {
+      open()
+    }
+
     window.pres = function () {
       document.getElementById('last-command').style.display = 'block'
     }

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);
 

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'}
     ]
   }
 

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,