Working tree viz

README.md

@@ -25,6 +25,7 @@ Type `help` in the command box to see a list of supported operations
 `pres()` = Turn on presenter mode<br>
 `undo` = Undo the last git command<br>
 `redo` = Redo the last undone git command<br>
+`edit` = Make a file edit<br>
 `mode` = Change mode (`local` or `remote`)<br>
 `clear` = Clear the history pane and reset the visualization
 
@@ -45,6 +46,8 @@ git reset
 git rev_parse
 git revert
 git tag
+git add
+git stash
 ```
 
 

css/explaingit.css

@@ -88,10 +88,21 @@ span.cmd {
   border: 1px dotted #AAA;
   position: absolute;
   top: 0;
-  bottom: 0;
   right: 0;
   left: 250px;
   margin-left: 0;
+  height: 49%;
+}
+
+#ExplainGitZen-Container .ws-container {
+  display: inline-block;
+  border: 1px dotted #AAA;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 250px;
+  margin-left: 5px;
+  height: 49%;
 }
 
 #ExplainGitZen-Container .svg-container.remote-container {
@@ -285,6 +296,27 @@ text.message-label {
   font-size: 10px;
 }
 
+g.stash > rect {
+  fill: #FFCC66;
+  stroke: #CC9900;
+  stroke-width: 2;
+}
+
+g.curr-ws > rect {
+  fill: #7FC9FF;
+  stroke: #0026FF;
+}
+
+g.index > rect {
+  fill: #CCC;
+  stroke: #888;
+}
+
+g.blob-space > rect {
+  fill: #8ce08c;
+  stroke: #339900;
+}
+
 g.branch-tag > rect {
   fill: #FFCC66;
   stroke: #CC9900;

examples/working_tree.md

@@ -0,0 +1,52 @@
+### Make local changes to the working tree
+
+Simulate file edits with the 'edit' command. No filename is required.
+
+```
+edit
+```
+
+### The Stash
+
+The stash a convenient place to store changes that aren't ready for committing.
+To move these files changes to the stash:
+
+```
+git stash
+```
+
+To move these changes back to the working tree:
+
+```
+git stash apply
+```
+OR
+```
+git stash pop
+```
+
+Applying the changes will move the changes back to the working tree and leave a copy in the stash.
+Popping the changes will move the changes back to the working tree but will remove the changes from
+the stash.
+
+### Add files to the index
+
+If files are ready for committing, they can "staged"/"added to the index".
+
+```
+git add -u
+```
+
+The `-u` flag adds all previously tracked files to the staging area
+
+### Remove files from the index
+
+If a file needs to be removed from the staging area, use 'git reset'
+
+```
+git reset -- <filename>
+```
+
+### Committing
+
+Committing files will remove them from the index and add them to the local repository.

index.html

@@ -109,9 +109,9 @@
       explainGit.reset();
 
       var savedState = null
-      if (window.localStorage) {
-        savedState = JSON.parse(window.localStorage.getItem('git-viz-snapshot') || 'null')
-      }
+      //if (window.localStorage) {
+      //  savedState = JSON.parse(window.localStorage.getItem('git-viz-snapshot') || 'null')
+      //}
 
       var initial = Object.assign(copyDemo(lastDemo), {
         name: 'Zen',

js/controlbox.js

@@ -20,6 +20,7 @@ function(_yargs, d3, demos) {
   function ControlBox(config) {
     this.historyView = config.historyView;
     this.originView = config.originView;
+    this.workspace = config.workspace;
     this.initialMessage = config.initialMessage || 'Enter git commands below.';
     this._commandHistory = [];
     this._currentCommand = -1;
@@ -85,7 +86,6 @@ function(_yargs, d3, demos) {
     },
 
     changeMode: function (mode) {
-      console.log(mode)
       if (mode === 'local' && this.historyView) {
         this.mode = 'local'
       } else if (mode === 'remote' && this.originView) {
@@ -231,6 +231,7 @@ function(_yargs, d3, demos) {
         this.info('pres() = Turn on presenter mode')
         this.info('undo = Undo the last git command')
         this.info('redo = Redo the last undone git command')
+        this.info('edit = Make a file edit')
         this.info('mode = Change mode (`local` or `remote`)')
         this.info('clear = Clear the history pane and reset the visualization')
         this.info()
@@ -250,6 +251,8 @@ function(_yargs, d3, demos) {
         this.info('`git rev_parse`')
         this.info('`git revert`')
         this.info('`git tag`')
+        this.info('`git add`')
+        this.info('`git stash`')
         return
       }
 
@@ -300,6 +303,12 @@ function(_yargs, d3, demos) {
         return
       }
 
+      if (entry.toLowerCase() === 'edit') {
+        var workspace = this.workspace;
+        workspace.addBlob(null, workspace.curr_ws);
+        return
+      }
+
       if (entry.toLowerCase() === 'clear') {
         window.resetVis()
         return
@@ -378,6 +387,7 @@ function(_yargs, d3, demos) {
           this.getRepoView().amendCommit(opts.m || this.getRepoView().getCommit('head').message)
         } else {
           this.getRepoView().commit(null, opts.m);
+          workspace.removeAllBlobs(workspace.index);
         }
       }, function(before, after) {
         var reflogMsg = 'commit: ' + msg
@@ -472,25 +482,33 @@ function(_yargs, d3, demos) {
     },
 
     checkout: function(args, opts) {
-      if (opts.b) {
-        if (opts._[0]) {
-          this.branch(null, null, opts.b + ' ' + opts._[0])
-        } else {
-          this.branch(null, null, opts.b)
+      if (args && args[0] === "--") {
+        args.shift();
+        while (args.length > 0) {
+          var arg = args.shift();
+          workspace.moveBlobByName(workspace.curr_ws, undefined, arg);
+        }
+      } else {
+        if (opts.b) {
+          if (opts._[0]) {
+            this.branch(null, null, opts.b + ' ' + opts._[0])
+          } else {
+            this.branch(null, null, opts.b)
+          }
         }
-      }
 
-      var name = opts.b || opts._[0]
+        var name = opts.b || opts._[0]
 
-      this.transact(function() {
-        this.getRepoView().checkout(name);
-      }, function(before, after) {
-        this.getRepoView().addReflogEntry(
-          'HEAD', after.commit.id,
-          'checkout: moving from ' + before.ref +
-          ' to ' + name
-        )
-      })
+        this.transact(function() {
+          this.getRepoView().checkout(name);
+        }, function(before, after) {
+          this.getRepoView().addReflogEntry(
+            'HEAD', after.commit.id,
+            'checkout: moving from ' + before.ref +
+            ' to ' + name
+          )
+        })
+      }
     },
 
     tag: function(args) {
@@ -534,33 +552,38 @@ function(_yargs, d3, demos) {
     },
 
     reset: function(args) {
+      var unstage = false;
       while (args.length > 0) {
         var arg = args.shift();
-
-        switch (arg) {
-          case '--soft':
-            this.info(
-              'The "--soft" flag works in real git, but ' +
-              'I am unable to show you how it works in this demo. ' +
-              'So I am just going to show you what "--hard" looks like instead.'
-            );
-            break;
-          case '--mixed':
-            this.info(
-              'The "--mixed" flag works in real git, but ' +
-              'I am unable to show you how it works in this demo. ' +
-              'So I am just going to show you what "--hard" looks like instead.'
-            );
-            break;
-          case '--hard':
-            this.doReset(args.join(' '));
-            args.length = 0;
-            break;
-          default:
-            var remainingArgs = [arg].concat(args);
-            args.length = 0;
-            this.info('Assuming "--hard".');
-            this.doReset(remainingArgs.join(' '));
+        if (unstage) {
+          workspace.moveBlobByName(workspace.index, workspace.curr_ws, arg);
+        } else {
+          switch (arg) {
+            case '--soft':
+              // no resetting of the index or working tree
+              this.doReset(args.join(' '));
+              args.length = 0;
+              break;
+            case '--mixed':
+              // reset just the index
+              this.doReset(args.join(' '));
+              workspace.removeAllBlobs(workspace.index);
+              args.length = 0;
+              break;
+            case '--hard':
+              this.doReset(args.join(' '));
+              // reset the index and the working tree
+              workspace.removeAllBlobs(workspace.curr_ws);
+              workspace.removeAllBlobs(workspace.index);
+              args.length = 0;
+              break;
+            case "HEAD":
+              // unstage the file (move from index to working tree)
+              unstage = true;
+              break;
+            default:
+              this.info("Invalid ref: " + arg);
+          }
         }
       }
     },
@@ -915,6 +938,48 @@ function(_yargs, d3, demos) {
         this.info("Real git reflog supports the '" + subcommand +
                   "' subcommand but this tool only supports 'show' and 'exists'")
       }
+    },
+
+    add: function(args) {
+      // Create boxes to visualize working tree, index, stash
+      var workspace = this.workspace;
+      while (args.length > 0) {
+        var arg = args.shift();
+        switch (arg) {
+          case '-u':
+          case '.':
+            workspace.addBlob(workspace.curr_ws, workspace.index, true);
+            break;
+          default:
+            workspace.moveBlobByName(workspace.curr_ws, workspace.index, arg);
+            break;
+        }
+      }
+      return;
+    },
+
+    stash: function(args) {
+      // Create boxes to visualize working tree, index, stash
+      var workspace = this.workspace;
+      var stash_id = "0";
+      if (args && args[0] === "pop") {
+        workspace.addBlob(workspace.stash, workspace.curr_ws);
+      } else if (args && args[0] === "apply") {
+        if (args[1] != undefined) {
+          stash_id = args[1];
+        }
+        workspace.moveBlobByName(workspace.stash, workspace.curr_ws, stash_id, false);
+      } else if (args && args[0] === "drop") {
+        if (args[1] != undefined) {
+          stash_id = args[1];
+        }
+        workspace.removeBlob(workspace.stash, stash_id);
+      } else if (args && args[0] === "clear") {
+        workspace.removeAllBlobs(workspace.stash);
+      } else {
+        workspace.addBlob(workspace.curr_ws, workspace.stash, true);
+      }
+      return;
     }
   };