Skip to content

Commit

Permalink
Merge pull request ajaxorg#724 from nightwing/multiCursor
Browse files Browse the repository at this point in the history 
Multi cursor polish
  • Loading branch information
@fjakobs
fjakobs committed Apr 15, 2012
2 parents ce891c2 + 31a6da4 commit e80a862
Show file tree
Hide file tree
Showing 31 changed files with 230 additions and 56 deletions.
4 changes: 4 additions & 0 deletions lib/ace/css/editor.css
View file
Expand Up @@ -151,6 +151,10 @@
opacity: 0.2;
}

.ace_editor.multiselect .ace_cursor {
border-left-width: 1px;
}

.ace_line {
white-space: nowrap;
}
Expand Down
6 changes: 3 additions & 3 deletions lib/ace/layer/cursor.js
View file
Expand Up @@ -107,11 +107,11 @@ var Cursor = function(parentEl) {
if (!this.isVisible)
return;

var element = this.element;
var element = this.cursors.length == 1 ? this.cursor : this.element;
this.blinkId = setInterval(function() {
element.style.visibility = "hidden";
setTimeout(function() {
element.style.visibility = "visible";
element.style.visibility = "";
}, 400);
}, 1000);
};
Expand Down Expand Up @@ -141,7 +141,7 @@ var Cursor = function(parentEl) {
this.update = function(config) {
this.config = config;

if (this.session.selectionMarkerCount > 1) {
if (this.session.selectionMarkerCount > 0) {
var selections = this.session.$selectionMarkers;
var i = 0, sel, cursorIndex = 0;

Expand Down
6 changes: 3 additions & 3 deletions lib/ace/layer/marker.js
View file
Expand Up @@ -99,7 +99,7 @@ var Marker = function(parentEl) {
}
else {
this.drawSingleLineMarker(
html, range, marker.clazz, config,
html, range, marker.clazz + " start", config,
null, marker.type
);
}
Expand All @@ -122,7 +122,7 @@ var Marker = function(parentEl) {
row, range.start.column,
row, this.session.getScreenLastRowColumn(row)
);
this.drawSingleLineMarker(stringBuilder, lineRange, clazz, layerConfig, 1, "text");
this.drawSingleLineMarker(stringBuilder, lineRange, clazz + " start", layerConfig, 1, "text");

// selection end
row = range.end.row;
Expand Down Expand Up @@ -152,7 +152,7 @@ var Marker = function(parentEl) {
);

stringBuilder.push(
"<div class='", clazz, "' style='",
"<div class='", clazz, " start' style='",
"height:", height, "px;",
"width:", width, "px;",
"top:", top, "px;",
Expand Down
14 changes: 10 additions & 4 deletions lib/ace/mouse/multi_select_handler.js
View file
Expand Up @@ -111,9 +111,10 @@ function onMouseDown(e) {
if (!isMultiSelect && inSelection)
return; // dragging

if (!isMultiSelect)
selection.addRange(selection.toOrientedRange());

if (!isMultiSelect) {
var range = selection.toOrientedRange();
editor.addSelectionMarker(range);
}

var oldRange = selection.rangeList.rangeAtPoint(pos);

Expand All @@ -122,8 +123,13 @@ function onMouseDown(e) {

if (oldRange && tmpSel.isEmpty() && isSamePoint(oldRange.cursor, tmpSel.cursor))
selection.substractPoint(tmpSel.cursor);
else
else {
if (range) {
editor.removeSelectionMarkers([range]);
selection.addRange(range);
}
selection.addRange(tmpSel);
}
});

} else if (!shift && alt && button == 0) {
Expand Down
43 changes: 37 additions & 6 deletions lib/ace/multi_select.js
View file
Expand Up @@ -77,16 +77,20 @@ var EditSession = require("./edit_session").EditSession;
* adds a range to selection entering multiselect mode if necessary
**/
this.addRange = function(range) {
if (!range)
return;

if (!this.inMultiSelectMode && this.rangeCount == 0) {
var oldRange = this.toOrientedRange();
if (!range || !range.isEqual(oldRange)) {
this.rangeList.add(oldRange);
this.$onAddRange(oldRange);
if (range.intersects(oldRange)) {
this.fromOrientedRange(range);
return;
}

this.rangeList.add(oldRange);
this.$onAddRange(oldRange);
}

if (!range)
return;

if (!range.cursor)
range.cursor = range.end;
Expand All @@ -98,7 +102,7 @@ var EditSession = require("./edit_session").EditSession;
if (removed.length)
this.$onRemoveRange(removed);

if (this.rangeCount > 0 && !this.inMultiSelectMode) {
if (this.rangeCount > 1 && !this.inMultiSelectMode) {
this._emit("multiSelect");
this.inMultiSelectMode = true;
this.session.$undoSelect = false;
Expand Down Expand Up @@ -623,6 +627,33 @@ function MultiSelect(editor) {

editor.on("mousedown", onMouseDown);
editor.commands.addCommands(exports.commands.defaultCommands);

addAltCursorListeners(editor);
}

function addAltCursorListeners(editor){
var el = editor.textInput.getElement();
var altCursor = false;
var contentEl = editor.renderer.content;
el.addEventListener("keydown", function(e) {
if (e.keyCode == 18 && !(e.ctrlKey || e.shiftKey || e.metaKey)) {
if (!altCursor) {
contentEl.style.cursor = "crosshair";
altCursor = true;
}
} else if (altCursor) {
contentEl.style.cursor = "";
}
});

el.addEventListener("keyup", reset);
el.addEventListener("blur", reset);
function reset() {
if (altCursor) {
contentEl.style.cursor = "";
altCursor = false;
}
}
}

exports.MultiSelect = MultiSelect;
Expand Down
41 changes: 33 additions & 8 deletions lib/ace/multi_select_test.js
View file
Expand Up @@ -57,7 +57,7 @@ var exec = function(name, times, args) {
} while(times --> 1)
};
var testRanges = function(str) {
assert.equal(editor.selection.getAllRanges()+"", str);
assert.equal(editor.selection.getAllRanges() + "", str + "");
}

module.exports = {
Expand All @@ -78,8 +78,8 @@ module.exports = {
assert.ok(editor.inMultiSelectMode);
assert.equal(editor.selection.getAllRanges().length, 4);

var newLine = editor.session.getDocument().getNewLineCharacter();
var copyText = "wwww".split("").join(newLine);
var newLine = editor.session.getDocument().getNewLineCharacter();
var copyText = "wwww".split("").join(newLine);
assert.equal(editor.getCopyText(), copyText);
exec("insertstring", 1, "a");
exec("backspace", 2);
Expand Down Expand Up @@ -120,14 +120,11 @@ module.exports = {
" wtt.w",
" wtt.w"
]);
var editor = new Editor(new MockRenderer(), doc);
editor = new Editor(new MockRenderer(), doc);
MultiSelect(editor);

editor.selectMoreLines(1)
assert.equal(
editor.selection.getAllRanges()+"",
"Range: [0/0] -> [0/0],Range: [1/0] -> [1/0]"
);
testRanges("Range: [0/0] -> [0/0],Range: [1/0] -> [1/0]");
assert.ok(editor.inMultiSelectMode);

var doc2 = new EditSession(["w1"]);
Expand All @@ -136,6 +133,34 @@ module.exports = {

editor.setSession(doc);
assert.ok(editor.inMultiSelectMode);
},

"test: multiselect addRange": function() {
var doc = new EditSession([
"w1.w2",
" wtt.w",
" wtt.w"
]);
editor = new Editor(new MockRenderer(), doc);
MultiSelect(editor);
var selection = editor.selection;

var range1 = new Range(0, 2, 0, 4);
editor.selection.fromOrientedRange(range1);

var range2 = new Range(0, 3, 0, 4);
selection.addRange(range2);
assert.ok(!editor.inMultiSelectMode);
assert.ok(range2.isEqual(editor.selection.getRange()));

var range3 = new Range(0, 1, 0, 1);
selection.addRange(range3);
assert.ok(editor.inMultiSelectMode);
testRanges([range3, range2]);

var range4 = new Range(0, 0, 4, 0);
selection.addRange(range4);
assert.ok(!editor.inMultiSelectMode);
}
};

Expand Down
2 changes: 1 addition & 1 deletion lib/ace/range.js
View file
Expand Up @@ -117,7 +117,7 @@ var Range = function(startRow, startColumn, endRow, endColumn) {
return this.comparePoint(range.start) == 0 && this.comparePoint(range.end) == 0;
}

this.intersectsRange = function(range) {
this.intersects = function(range) {
var cmp = this.compareRange(range);
return (cmp == -1 || cmp == 0 || cmp == 1);
}
Expand Down
14 changes: 7 additions & 7 deletions lib/ace/split.js
View file
Expand Up @@ -56,7 +56,7 @@ var Split = function(container, theme, splits) {
this.$splits = 0;
this.$editorCSS = "";
this.$editors = [];
this.$oriantation = this.BESIDE;
this.$orientation = this.BESIDE;

this.setSplits(splits || 1);
this.$cEditor = this.$editors[0];
Expand Down Expand Up @@ -213,15 +213,15 @@ var Split = function(container, theme, splits) {
return session;
};

this.getOriantation = function() {
return this.$oriantation;
this.getOrientation = function() {
return this.$orientation;
};

this.setOriantation = function(oriantation) {
if (this.$oriantation == oriantation) {
this.setOrientation = function(orientation) {
if (this.$orientation == orientation) {
return;
}
this.$oriantation = oriantation;
this.$orientation = orientation;
this.resize();
};

Expand All @@ -230,7 +230,7 @@ var Split = function(container, theme, splits) {
var height = this.$container.clientHeight;
var editor;

if (this.$oriantation == this.BESIDE) {
if (this.$orientation == this.BESIDE) {
var editorWidth = width / this.$splits;
for (var i = 0; i < this.$splits; i++) {
editor = this.$editors[i];
Expand Down
7 changes: 6 additions & 1 deletion lib/ace/theme/clouds.js
View file
Expand Up @@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-clouds .ace_cursor {\
border-left: 1px solid #000000;\
border-left: 2px solid #000000;\
}\
\
.ace-clouds .ace_cursor.ace_overwrite {\
Expand All @@ -80,6 +80,11 @@ exports.cssText = "\
background: #BDD5FC;\
}\
\
.ace-clouds.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #FFFFFF;\
border-radius: 2px;\
}\
\
.ace-clouds .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\
Expand Down
7 changes: 6 additions & 1 deletion lib/ace/theme/clouds_midnight.js
View file
Expand Up @@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-clouds-midnight .ace_cursor {\
border-left: 1px solid #7DA5DC;\
border-left: 2px solid #7DA5DC;\
}\
\
.ace-clouds-midnight .ace_cursor.ace_overwrite {\
Expand All @@ -80,6 +80,11 @@ exports.cssText = "\
background: #000000;\
}\
\
.ace-clouds-midnight.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #191919;\
border-radius: 2px;\
}\
\
.ace-clouds-midnight .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\
Expand Down
7 changes: 6 additions & 1 deletion lib/ace/theme/cobalt.js
View file
Expand Up @@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-cobalt .ace_cursor {\
border-left: 1px solid #FFFFFF;\
border-left: 2px solid #FFFFFF;\
}\
\
.ace-cobalt .ace_cursor.ace_overwrite {\
Expand All @@ -80,6 +80,11 @@ exports.cssText = "\
background: rgba(179, 101, 57, 0.75);\
}\
\
.ace-cobalt.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #002240;\
border-radius: 2px;\
}\
\
.ace-cobalt .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\
Expand Down
7 changes: 6 additions & 1 deletion lib/ace/theme/dawn.js
View file
Expand Up @@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-dawn .ace_cursor {\
border-left: 1px solid #000000;\
border-left: 2px solid #000000;\
}\
\
.ace-dawn .ace_cursor.ace_overwrite {\
Expand All @@ -80,6 +80,11 @@ exports.cssText = "\
background: rgba(39, 95, 255, 0.30);\
}\
\
.ace-dawn.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #F9F9F9;\
border-radius: 2px;\
}\
\
.ace-dawn .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\
Expand Down
2 changes: 1 addition & 1 deletion lib/ace/theme/eclipse.js
View file
Expand Up @@ -67,7 +67,7 @@ exports.cssText = ".ace-eclipse .ace_editor {\
}\
\
.ace-eclipse .ace_cursor {\
border-left: 1px solid black;\
border-left: 2px solid black;\
}\
\
.ace-eclipse .ace_line .ace_storage,\
Expand Down
7 changes: 6 additions & 1 deletion lib/ace/theme/idle_fingers.js
View file
Expand Up @@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-idle-fingers .ace_cursor {\
border-left: 1px solid #91FF00;\
border-left: 2px solid #91FF00;\
}\
\
.ace-idle-fingers .ace_cursor.ace_overwrite {\
Expand All @@ -80,6 +80,11 @@ exports.cssText = "\
background: rgba(90, 100, 126, 0.88);\
}\
\
.ace-idle-fingers.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #323232;\
border-radius: 2px;\
}\
\
.ace-idle-fingers .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\
Expand Down

0 comments on commit e80a862

Please sign in to comment.