mirror/pcottle.learnGitBranching
1
0
Fork 0
mirror of https://github.com/pcottle/learnGitBranching.git synced 2025-06-28 08:50:06 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Resolves #411 -- huge overhaul of cursor rendering and logic, zoom friendly now

Browse source
This commit is contained in:
Peter Cottle 2017-03-10 19:48:16 -08:00
parent 398a9af0b6
commit 7dfacd7ede
2 changed files with 40 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/js/views/commandViews.js
View file

@ -14,7 +14,6 @@ var CommandPromptView = Backbone.View.extend({
this.index = -1; this.index = -1;
this.commandParagraph = this.$('#prompt p.command')[0]; this.commandParagraph = this.$('#prompt p.command')[0];
this.commandCursor = this.$('#prompt span.cursor')[0];
this.focus(); this.focus();
Main.getEvents().on('rollupCommands', this.rollupCommands, this); Main.getEvents().on('rollupCommands', this.rollupCommands, this);
@ -46,7 +45,7 @@ var CommandPromptView = Backbone.View.extend({
}, },
toggleCursor: function(state) { toggleCursor: function(state) {
$(this.commandCursor).toggleClass('shown', state); $(this.commandParagraph).toggleClass('showCursor', state);
}, },
onKeyDown: function(e) { onKeyDown: function(e) {
@ -96,42 +95,38 @@ var CommandPromptView = Backbone.View.extend({
// try.github.com also has this, so I'm assuming those engineers gave up as // try.github.com also has this, so I'm assuming those engineers gave up as
// well... // well...
var text = $('#commandTextField').val(); var text = $('#commandTextField').val();
var val = this.badHtmlEncode(text);
this.commandParagraph.innerHTML = val;
// now mutate the cursor... // Alright so we have our initial value for what we want the
this.cursorUpdate(text.length, el.selectionStart, el.selectionEnd); // command line to contain. We need to next split into the
// and scroll down due to some weird bug // parse with the cursor and without
Main.getEvents().trigger('commandScrollDown'); var selectionStart = el.selectionStart;
}, var selectionEnd = el.selectionEnd;
if (!text.length) {
cursorUpdate: function(commandLength, selectionStart, selectionEnd) { text = ' ';
if (selectionStart === undefined || selectionEnd === undefined) { selectionStart = 0;
selectionStart = Math.max(commandLength - 1, 0); selectionEnd = 1;
selectionEnd = commandLength; } else if (selectionStart === selectionEnd) {
// Lets pretend they have selected the end character to make the cursor
// shown
text += ' ';
selectionEnd += 1;
} else if (selectionStart === undefined || selectionEnd === undefined) {
// I donno what this is for
selectionStart = Math.max(text.length - 1, 0);
selectionEnd = text.length;
} }
// 10px for monospaced font at "1" zoom var before = text.substring(0, selectionStart);
var zoom = require('../util/zoomLevel').detectZoom(); var middle = text.substring(selectionStart, selectionEnd);
var widthPerChar = 9.65 * zoom; var end = text.substring(selectionEnd, text.length);
var heightPerRow = 22 * zoom;
var widthOfParagraph = $(this.commandParagraph).width(); // Then just make three spans and slap it in.
var numCharsPerLine = widthOfParagraph / widthPerChar; var finalHTML = '<span>' + this.badHtmlEncode(before) + '</span>' +
'<span class="commandCursor">' + this.badHtmlEncode(middle) + '</span>' +
var numCharsSelected = Math.min(Math.max(1, selectionEnd - selectionStart), numCharsPerLine); '<span>' + this.badHtmlEncode(end) + '</span>';
var widthOfSelection = String(numCharsSelected * widthPerChar) + 'px'; this.commandParagraph.innerHTML = finalHTML;
// and scroll down due to some weird bug
// now for positioning Main.getEvents().trigger('commandScrollDown');
var leftOffset = String(widthPerChar * (selectionStart % numCharsPerLine)) + 'px';
var topOffset = String(Math.floor(selectionStart / numCharsPerLine) * heightPerRow) + 'px';
// one reflow? :D
$(this.commandCursor).css({
width: widthOfSelection,
left: leftOffset,
top: topOffset
});
}, },
commandSelectChange: function(delta) { commandSelectChange: function(delta) {

16
src/style/main.css
View file

@ -579,13 +579,19 @@ p.commandLine span.prompt {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
border: 0px; border: 0px;
position: absolute;
} }
#prompt span.cursor { #prompt span.promptSign {
background: #DDD; position: absolute;
opacity: 0; bottom: 0px;
margin-left: 12px; }
#prompt span.commandCursor {
background: #424242;
}
#prompt p.command.showCursor span.commandCursor {
background: #AEAEAE;
} }
#prompt span.cursor.shown { #prompt span.cursor.shown {