Implement git fetch.

mladen · Mar 26, 2013 · ed8f541 · ed8f541
1 parent e820242
commit ed8f541
Show file tree

Hide file tree

Showing 5 changed files with 174 additions and 10 deletions.
diff --git a/css/explaingit.css b/css/explaingit.css
@@ -23,6 +23,10 @@ a.openswitch.selected {
     display: none;
 }
 
+.playground-container {
+    position: relative;
+}
+
 span.cmd {
     background-color: #222222;
     color: #FFFFFF;
@@ -35,6 +39,19 @@ span.cmd {
     border: 1px dotted #AAA;
 }
 
+.svg-container.remote-container {
+    position: absolute;
+    top: 0px; right: 0px;
+    background-color: #EFF1FF;
+    border-left: 1px dotted #AAA;
+    border-bottom: 1px dotted #AAA;
+}
+
+.remote-name-display {
+    font-weight: bold;
+    text-align: right;
+}
+
 .control-box {
     display: inline-block;
     width: 250px;

diff --git a/index.html b/index.html
@@ -51,6 +51,7 @@ <h4>Combine Branches</h4>
     </div>
     <div class="fourcol last">
       <h4>Interacting with Remote Server</h4>
+      <a id="open-fetch" class="openswitch" href="#">git fetch</a>
     </div>
   </div>
   <div class="row">
@@ -63,6 +64,7 @@ <h4>Interacting with Remote Server</h4>
         Pretend that you already have your files staged for commit and enter <span class="cmd">git commit</span>
 		as many times as you like in the terminal box.
       </p>
+      <div class="playground-container"></div>
     </div>
     <div id="ExplainGitBranch-Container" class="twelvecol concept-container">
       <p>
@@ -72,6 +74,7 @@ <h4>Interacting with Remote Server</h4>
         Type <span class="cmd">git commit</span> and <span class="cmd">git branch</span> commands
         to your hearts desire until you understand this concept.
       </p>
+      <div class="playground-container"></div>
     </div>
     <div id="ExplainGitCheckout-Container" class="twelvecol concept-container">
       <p>
@@ -91,13 +94,15 @@ <h4>Interacting with Remote Server</h4>
         and <span class="cmd">git checkout</span> commands to your hearts desire
 		until you understand this concept.
       </p>
+      <div class="playground-container"></div>
     </div>
     <div id="ExplainGitCheckout-b-Container" class="twelvecol concept-container">
       <p>
         You can combine <span class="cmd">git branch</span> and <span class="cmd">git checkout</span>
         into a single command by typing <span class="cmd">git checkout -b branchname</span>.
         This will create the branch if it does not already exist and immediately check it out.
       </p>
+      <div class="playground-container"></div>
     </div>
     <div id="ExplainGitReset-Container" class="twelvecol concept-container">
       <p>
@@ -124,13 +129,15 @@ <h4>Interacting with Remote Server</h4>
         Note that this won't delete untracked files, you will have to delete those separately with
         the command <span class="cmd">git clean -df</span>.
       </p>
+      <div class="playground-container"></div>
     </div>
     <div id="ExplainGitBranch-d-Container" class="twelvecol concept-container">
       <p>
         <span class="cmd">git branch -d</span> is used to delete branches.
         I have pre-created a bunch of branches for you to delete in the playground below.
         Have at it.
       </p>
+      <div class="playground-container"></div>
     </div>
     <div id="ExplainGitMerge-Container" class="twelvecol concept-container">
       <p>
@@ -141,6 +148,7 @@ <h4>Interacting with Remote Server</h4>
         If there was no divergence between the two commits, git will do a "fast-forward" method merge.</br>
         To see this happen, checkout the 'ff' branch and then type <span class="cmd">git merge dev</span>.
       </p>
+      <div class="playground-container"></div>
     </div>
     <div id="ExplainGitRebase-Container" class="twelvecol concept-container">
       <p>
@@ -155,6 +163,14 @@ <h4>Interacting with Remote Server</h4>
         completely different IDs than the old commits, and leaves the old commits where they were. For this reason,
         you never want to rebase commits that have already been shared with the team you are working with.
       </p>
+      <div class="playground-container"></div>
+    </div>
+    <div id="ExplainGitFetch-Container" class="twelvecol concept-container">
+      <p>
+        <span class="cmd">git fetch</span> will update all of the "remote tracking branches" in your local repository.
+        Remote tracking branches are tagged in grey.
+      </p>
+      <div class="playground-container"></div>
     </div>
   </div>
 </div>
@@ -390,5 +406,42 @@ <h4>Interacting with Remote Server</h4>
     openSwitch.addEventListener('click', open, false);
 });
 </script>
+
+<script type="text/javascript">
+require(['explaingit'], function (explainGit) {
+    var openSwitch = document.getElementById('open-fetch'),
+		open;
+
+    open = function () {
+		explainGit.reset();
+        this.classList.add('selected');
+
+		explainGit.open({
+			name: 'Fetch',
+			height: 500,
+			commitData: [
+				{id: 'e137e9b', tags: ['origin/master']},
+                {id: '6ce726f', parent: 'e137e9b'},
+				{id: 'bb92e0e', parent: '6ce726f', tags: ['master']},
+                {id: '0cff760', parent: 'e137e9b', tags: ['origin/dev']},
+                {id: '4ed301d', parent: '0cff760', tags: ['dev']}
+			],
+            originData: [
+                {id: 'e137e9b'},
+                {id: '7eb7654', parent: 'e137e9b'},
+				{id: '090e2b8', parent: '7eb7654'},
+                {id: 'ee5df4b', parent: '090e2b8', tags: ['master']},
+                {id: '0cff760', parent: 'e137e9b'},
+                {id: '2f8d946', parent: '0cff760'},
+                {id: '29235ca', parent: '2f8d946', tags: ['dev']}
+            ],
+			initialMessage:
+				'Type "git fetch".'
+		});
+    };
+
+    openSwitch.addEventListener('click', open, false);
+});
+</script>
 </body>
 </html>
diff --git a/js/controlbox.js b/js/controlbox.js
@@ -7,6 +7,7 @@ define(['d3'], function () {
      */
     function ControlBox(config) {
         this.historyView = config.historyView;
+        this.originView = config.originView;
         this.initialMessage = config.initialMessage || 'Enter git commands below.';
         this._commandHistory = [];
         this._currentCommand = -1;
@@ -250,6 +251,66 @@ define(['d3'], function () {
             if (result === 'Fast-Forward') {
                 this.info('Fast-forwarded to ' + ref + '.');
             }
+        },
+
+        fetch: function () {
+            if (!this.originView) {
+                throw new Error('There is no remote server to fetch from.');
+            }
+
+            var origin = this.originView,
+                local = this.historyView,
+                remotePattern = /^origin\/([^\/]+)$/,
+                rtb, isRTB, fb,
+                fetchBranches = {},
+                fetchIds = [], // just to make sure we don't fetch the same commit twice
+                fetchCommits = [], fetchCommit;
+
+            // determine which branches to fetch
+            for (rtb = 0; rtb < local.branches.length; rtb++) {
+                isRTB = remotePattern.exec(local.branches[rtb]);
+                if (isRTB) {
+                    fetchBranches[isRTB[1]] = 0;
+                }
+            }
+
+            // determine which commits the local repo is missing from the origin
+            for (fb in fetchBranches) {
+                if (origin.branches.indexOf(fb) > -1) {
+                    fetchCommit = origin.getCommit(fb);
+
+                    var notInLocal = local.getCommit(fetchCommit.id) === null;
+                    while (notInLocal) {
+                        if (fetchIds.indexOf(fetchCommit.id) === -1) {
+                            fetchCommits.unshift(fetchCommit);
+                            fetchIds.unshift(fetchCommit.id);
+                        }
+                        fetchBranches[fb] += 1;
+                        fetchCommit = origin.getCommit(fetchCommit.parent);
+                        notInLocal = local.getCommit(fetchCommit.id) === null;
+                    }
+                }
+            }
+
+            // add the fetched commits to the local commit data
+            for (var fc = 0; fc < fetchCommits.length; fc++) {
+                fetchCommit = fetchCommits[fc];
+                local.commitData.push({
+                    id: fetchCommit.id,
+                    parent: fetchCommit.parent,
+                    tags: []
+                });
+            }
+
+            // update the remote tracking branch tag locations
+            for (fb in fetchBranches) {
+                if (origin.branches.indexOf(fb) > -1) {
+                    var remoteLoc = origin.getCommit(fb).id;
+                    local._moveTag('origin/' + fb, remoteLoc);
+                }
+            }
+
+            local._renderCommits();
         }
     };
 

diff --git a/js/explaingit.js b/js/explaingit.js
@@ -9,21 +9,36 @@ define(['historyview', 'controlbox', 'd3'], function (HistoryView, ControlBox, d
         var name = prefix + args.name,
             containerId = name + '-Container',
             container = d3.select('#' + containerId),
-            historyView,
+            playground = container.select('.playground-container'),
+            historyView, originView = null,
             controlBox;
 
         container.style('display', 'block');
 
         args.name = name;
         historyView = new HistoryView(args);
 
+        if (args.originData) {
+            originView = new HistoryView({
+                name: name + '-Origin',
+                width: 300,
+                height: 225,
+                commitRadius: 15,
+                remoteName: 'origin',
+                commitData: args.originData
+            });
+
+            originView.render(playground);
+        }
+
         controlBox = new ControlBox({
             historyView: historyView,
+            originView: originView,
             initialMessage: args.initialMessage
         });
 
-        controlBox.render(container);
-        historyView.render(container);
+        controlBox.render(playground);
+        historyView.render(playground);
 
         openSandBoxes.push({
             hv: historyView,

diff --git a/js/historyview.js b/js/historyview.js
@@ -234,10 +234,13 @@ define(['d3'], function () {
 
         this.width = config.width || 886;
         this.height = config.height || 400;
-        this.baseLine = this.height * (config.baseLine || 0.7);
+        this.baseLine = this.height * (config.baseLine || 0.6);
 
         this.commitRadius = config.commitRadius || 20;
         this.pointerMargin = this.commitRadius * 1.3;
+
+        this.isRemote = typeof config.remoteName === 'string';
+        this.remoteName = config.remoteName;
 
         this.initialCommit = {
 			id: 'initial',
@@ -331,24 +334,39 @@ define(['d3'], function () {
             var svgContainer, svg;
 
 			svgContainer = container.append('div')
-                .classed('svg-container', true);
+                .classed('svg-container', true)
+                .classed('remote-container', this.isRemote);
 
             svg = svgContainer.append('svg:svg');
 
             svg.attr('id', this.name)
                 .attr('width', this.width)
                 .attr('height', this.height);
 
+            if (this.isRemote) {
+                svg.append('svg:text')
+                    .classed('remote-name-display', true)
+                    .text(this.remoteName)
+                    .attr('x', 10)
+                    .attr('y', 25);
+            } else {
+                svg.append('svg:text')
+                    .classed('remote-name-display', true)
+                    .text('Local Repository')
+                    .attr('x', 10)
+                    .attr('y', 25);
+
+                svg.append('svg:text')
+                    .classed('current-branch-display', true)
+                    .attr('x', 10)
+                    .attr('y', 45);
+            }
+
             this.svgContainer = svgContainer;
             this.svg = svg;
 
             this._renderCommits();
 
-            svg.append('svg:text')
-                .classed('current-branch-display', true)
-                .attr('x', 10)
-                .attr('y', 25);
-
             this._setCurrentBranch(this.currentBranch);
         },