Merge pull request #724 from nightwing/multiCursor

Multi cursor polish
This commit is contained in:
Fabian Jakobs 2012-04-15 05:49:30 -07:00
commit e80a862f3e
31 changed files with 233 additions and 59 deletions

View file

@ -151,6 +151,10 @@
opacity: 0.2;
}
.ace_editor.multiselect .ace_cursor {
border-left-width: 1px;
}
.ace_line {
white-space: nowrap;
}

View file

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

View file

@ -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
);
}
@ -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;
@ -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;",

View file

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

View file

@ -77,17 +77,21 @@ var EditSession = require("./edit_session").EditSession;
* adds a range to selection entering multiselect mode if necessary
**/
this.addRange = function(range) {
if (!this.inMultiSelectMode && this.rangeCount == 0) {
var oldRange = this.toOrientedRange();
if (!range || !range.isEqual(oldRange)) {
this.rangeList.add(oldRange);
this.$onAddRange(oldRange);
}
}
if (!range)
return;
if (!this.inMultiSelectMode && this.rangeCount == 0) {
var oldRange = this.toOrientedRange();
if (range.intersects(oldRange)) {
this.fromOrientedRange(range);
return;
}
this.rangeList.add(oldRange);
this.$onAddRange(oldRange);
}
if (!range.cursor)
range.cursor = range.end;
@ -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;
@ -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;

View file

@ -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 = {
@ -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);
@ -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"]);
@ -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);
}
};

View file

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

View file

@ -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];
@ -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();
};
@ -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];

View file

@ -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 {\
@ -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);\
}\

View file

@ -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 {\
@ -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);\
}\

View file

@ -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 {\
@ -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);\
}\

View file

@ -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 {\
@ -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);\
}\

View file

@ -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,\

View file

@ -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 {\
@ -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);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-kr-theme .ace_cursor {\
border-left: 1px solid #FF9900;\
border-left: 2px solid #FF9900;\
}\
\
.ace-kr-theme .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: rgba(170, 0, 255, 0.45);\
}\
\
.ace-kr-theme.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #0B0A09;\
border-radius: 2px;\
}\
\
.ace-kr-theme .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-merbivore .ace_cursor {\
border-left: 1px solid #FFFFFF;\
border-left: 2px solid #FFFFFF;\
}\
\
.ace-merbivore .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #454545;\
}\
\
.ace-merbivore.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #161616;\
border-radius: 2px;\
}\
\
.ace-merbivore .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-merbivore-soft .ace_cursor {\
border-left: 1px solid #FFFFFF;\
border-left: 2px solid #FFFFFF;\
}\
\
.ace-merbivore-soft .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #494949;\
}\
\
.ace-merbivore-soft.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #1C1C1C;\
border-radius: 2px;\
}\
\
.ace-merbivore-soft .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-mono-industrial .ace_cursor {\
border-left: 1px solid #FFFFFF;\
border-left: 2px solid #FFFFFF;\
}\
\
.ace-mono-industrial .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: rgba(145, 153, 148, 0.40);\
}\
\
.ace-mono-industrial.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #222C28;\
border-radius: 2px;\
}\
\
.ace-mono-industrial .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-monokai .ace_cursor {\
border-left: 1px solid #F8F8F0;\
border-left: 2px solid #F8F8F0;\
}\
\
.ace-monokai .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #49483E;\
}\
\
.ace-monokai.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #272822;\
border-radius: 2px;\
}\
\
.ace-monokai .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-pastel-on-dark .ace_cursor {\
border-left: 1px solid #A7A7A7;\
border-left: 2px solid #A7A7A7;\
}\
\
.ace-pastel-on-dark .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: rgba(221, 240, 255, 0.20);\
}\
\
.ace-pastel-on-dark.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #2C2828;\
border-radius: 2px;\
}\
\
.ace-pastel-on-dark .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-solarized-dark .ace_cursor {\
border-left: 1px solid #D30102;\
border-left: 2px solid #D30102;\
}\
\
.ace-solarized-dark .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #073642;\
}\
\
.ace-solarized-dark.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #002B36;\
border-radius: 2px;\
}\
\
.ace-solarized-dark .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-solarized-light .ace_cursor {\
border-left: 1px solid #000000;\
border-left: 2px solid #000000;\
}\
\
.ace-solarized-light .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #073642;\
}\
\
.ace-solarized-light.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #FDF6E3;\
border-radius: 2px;\
}\
\
.ace-solarized-light .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -67,7 +67,7 @@ exports.cssText = ".ace-tm .ace_editor {\
}\
\
.ace-tm .ace_cursor {\
border-left: 1px solid black;\
border-left: 2px solid black;\
}\
\
.ace-tm .ace_cursor.ace_overwrite {\
@ -169,7 +169,10 @@ exports.cssText = ".ace-tm .ace_editor {\
.ace-tm .ace_marker-layer .ace_selection {\
background: rgb(181, 213, 255);\
}\
\
.ace-tm.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px white;\
border-radius: 2px;\
}\
.ace-tm .ace_marker-layer .ace_step {\
background: rgb(252, 255, 0);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-tomorrow .ace_cursor {\
border-left: 1px solid #AEAFAD;\
border-left: 2px solid #AEAFAD;\
}\
\
.ace-tomorrow .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #D6D6D6;\
}\
\
.ace-tomorrow.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #FFFFFF;\
border-radius: 2px;\
}\
\
.ace-tomorrow .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-tomorrow-night .ace_cursor {\
border-left: 1px solid #AEAFAD;\
border-left: 2px solid #AEAFAD;\
}\
\
.ace-tomorrow-night .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #373B41;\
}\
\
.ace-tomorrow-night.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #1D1F21;\
border-radius: 2px;\
}\
\
.ace-tomorrow-night .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-tomorrow-night-blue .ace_cursor {\
border-left: 1px solid #FFFFFF;\
border-left: 2px solid #FFFFFF;\
}\
\
.ace-tomorrow-night-blue .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #003F8E;\
}\
\
.ace-tomorrow-night-blue.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #002451;\
border-radius: 2px;\
}\
\
.ace-tomorrow-night-blue .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-tomorrow-night-bright .ace_cursor {\
border-left: 1px solid #9F9F9F;\
border-left: 2px solid #9F9F9F;\
}\
\
.ace-tomorrow-night-bright .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #424242;\
}\
\
.ace-tomorrow-night-bright.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #000000;\
border-radius: 2px;\
}\
\
.ace-tomorrow-night-bright .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-tomorrow-night-eighties .ace_cursor {\
border-left: 1px solid #CCCCCC;\
border-left: 2px solid #CCCCCC;\
}\
\
.ace-tomorrow-night-eighties .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #515151;\
}\
\
.ace-tomorrow-night-eighties.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #2D2D2D;\
border-radius: 2px;\
}\
\
.ace-tomorrow-night-eighties .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-twilight .ace_cursor {\
border-left: 1px solid #A7A7A7;\
border-left: 2px solid #A7A7A7;\
}\
\
.ace-twilight .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: rgba(221, 240, 255, 0.20);\
}\
\
.ace-twilight.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #141414;\
border-radius: 2px;\
}\
\
.ace-twilight .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -68,7 +68,7 @@ exports.cssText = "\
}\
\
.ace-vibrant-ink .ace_cursor {\
border-left: 1px solid #FFFFFF;\
border-left: 2px solid #FFFFFF;\
}\
\
.ace-vibrant-ink .ace_cursor.ace_overwrite {\
@ -80,6 +80,11 @@ exports.cssText = "\
background: #6699CC;\
}\
\
.ace-vibrant-ink.multiselect .ace_selection.start {\
box-shadow: 0 0 3px 0px #0F0F0F;\
border-radius: 2px;\
}\
\
.ace-vibrant-ink .ace_marker-layer .ace_step {\
background: rgb(198, 219, 174);\
}\

View file

@ -27,7 +27,7 @@
}
.%cssClass% .ace_cursor {
border-left: 1px solid %cursor%;
border-left: 2px solid %cursor%;
}
.%cssClass% .ace_cursor.ace_overwrite {
@ -39,6 +39,11 @@
background: %selection%;
}
.%cssClass%.multiselect .ace_selection.start {
box-shadow: 0 0 3px 0px %background%;
border-radius: 2px;
}
.%cssClass% .ace_marker-layer .ace_step {
background: %step%;
}