experiment

2014-10-11 19:06:08 +04:00
26 changed files with 51 additions and 47 deletions
--- a/lib/ace/css/editor.css
+++ b/lib/ace/css/editor.css
@ -420,3 +420,26 @@
    position: absolute;
    z-index: 8;
 }
+
+/*x = []
+for (var i = 1; i < 16; i++) {
+x.push(".ace_br" + i + "{" +
+(["top-left", "top-right", "bottom-right", "bottom-left"]).map(function(x, j) {return i & (1<<j) ? "border-" + x + "-radius: 3px;" : "" }).filter(Boolean).join(" ")
+ "}")
+}
+x.join("\n")*/
+.ace_br1 {border-top-left-radius    : 3px;}
+.ace_br2 {border-top-right-radius   : 3px;}
+.ace_br3 {border-top-left-radius    : 3px; border-top-right-radius:    3px;}
+.ace_br4 {border-bottom-right-radius: 3px;}
+.ace_br5 {border-top-left-radius    : 3px; border-bottom-right-radius: 3px;}
+.ace_br6 {border-top-right-radius   : 3px; border-bottom-right-radius: 3px;}
+.ace_br7 {border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-right-radius: 3px;}
+.ace_br8 {border-bottom-left-radius : 3px;}
+.ace_br9 {border-top-left-radius    : 3px; border-bottom-left-radius:  3px;}
+.ace_br10{border-top-right-radius   : 3px; border-bottom-left-radius:  3px;}
+.ace_br11{border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-left-radius:  3px;}
+.ace_br12{border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}
+.ace_br13{border-top-left-radius    : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}
+.ace_br14{border-top-right-radius   : 3px; border-bottom-right-radius: 3px; border-bottom-left-radius:  3px;}
+.ace_br15{border-top-left-radius    : 3px; border-top-right-radius:    3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px;}
--- a/lib/ace/layer/marker.js
+++ b/lib/ace/layer/marker.js
@ -90,7 +90,7 @@ var Marker = function(parentEl) {
                else
                    this.drawMultiLineMarker(html, range, marker.clazz, config);
            } else {
-                this.drawSingleLineMarker(html, range, marker.clazz + " ace_start", config);
+                this.drawSingleLineMarker(html, range, marker.clazz + " ace_start" + " ace_br15", config);
            }
        }
        this.element.innerHTML = html.join("");
@ -100,27 +100,30 @@ var Marker = function(parentEl) {
        return (row - layerConfig.firstRowScreen) * layerConfig.lineHeight;
    };

+    function getBorderClass(tl, tr, br, bl) {
+        return (tl ? 1 : 0) | (tr ? 2 : 0) | (br ? 4 : 0) | (bl ? 8 : 0);
+    }
    // Draws a marker, which spans a range of text on multiple lines 
    this.drawTextMarker = function(stringBuilder, range, clazz, layerConfig, extraStyle) {
-        // selection start
-        var row = range.start.row;
-
-        var lineRange = new Range(
-            row, range.start.column,
-            row, this.session.getScreenLastRowColumn(row)
-        );
-        this.drawSingleLineMarker(stringBuilder, lineRange, clazz + " ace_start", layerConfig, 1, extraStyle);
-
-        // selection end
-        row = range.end.row;
-        lineRange = new Range(row, 0, row, range.end.column);
-        this.drawSingleLineMarker(stringBuilder, lineRange, clazz, layerConfig, 0, extraStyle);
-
-        for (row = range.start.row + 1; row < range.end.row; row++) {
-            lineRange.start.row = row;
-            lineRange.end.row = row;
-            lineRange.end.column = this.session.getScreenLastRowColumn(row);
-            this.drawSingleLineMarker(stringBuilder, lineRange, clazz, layerConfig, 1, extraStyle);
+        var session = this.session;                
+        var start = range.start.row;
+        var end = range.end.row;
+        var row = start;
+        var prev = 0; 
+        var curr = 0;
+        var next = session.getScreenLastRowColumn(row);
+        var lineRange = new Range(row, range.start.column, row, curr);
+        for (; row <= end; row++) {
+            lineRange.start.row = lineRange.end.row = row;
+            lineRange.start.column = row == start ? range.start.column : 0;
+            lineRange.end.column = next;
+            prev = curr;
+            curr = next;
+            next = row + 1 < end ? session.getScreenLastRowColumn(row + 1) : row == end ? 0 : range.end.column;
+            this.drawSingleLineMarker(stringBuilder, lineRange, 
+                clazz + (row == start  ? " ace_start" : "") + " ace_br"
+                    + getBorderClass(row == start || row == start + 1 && range.start.column, prev < curr, curr > next, row == end),
+                layerConfig, row == end ? 0 : 1, extraStyle);
        }
    };

@ -134,7 +137,7 @@ var Marker = function(parentEl) {
        extraStyle = extraStyle || "";

        stringBuilder.push(
-            "<div class='", clazz, " ace_start' style='",
+            "<div class='", clazz, " ace_br1 ace_start' style='",
            "height:", height, "px;",
            "right:0;",
            "top:", top, "px;",
@ -146,7 +149,7 @@ var Marker = function(parentEl) {
        var width = range.end.column * config.characterWidth;

        stringBuilder.push(
-            "<div class='", clazz, "' style='",
+            "<div class='", clazz, " ace_br12' style='",
            "height:", height, "px;",
            "width:", width, "px;",
            "top:", top, "px;",
@ -158,9 +161,11 @@ var Marker = function(parentEl) {
        if (height < 0)
            return;
        top = this.$getTop(range.start.row + 1, config);
+        
+        var radiusClass = (range.start.column ? 1 : 0) | (range.end.column ? 0 : 8);

        stringBuilder.push(
-            "<div class='", clazz, "' style='",
+            "<div class='", clazz, (radiusClass ? " ace_br" + radiusClass : ""), "' style='",
            "height:", height, "px;",
            "right:0;",
            "top:", top, "px;",
--- a/lib/ace/theme/clouds.css
+++ b/lib/ace/theme/clouds.css
@ -23,7 +23,6 @@

 .ace-clouds.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #FFFFFF;
-  border-radius: 2px
 }

 .ace-clouds .ace_marker-layer .ace_step {
--- a/lib/ace/theme/clouds_midnight.css
+++ b/lib/ace/theme/clouds_midnight.css
@ -23,7 +23,6 @@

 .ace-clouds-midnight.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #191919;
-  border-radius: 2px
 }

 .ace-clouds-midnight .ace_marker-layer .ace_step {
--- a/lib/ace/theme/cobalt.css
+++ b/lib/ace/theme/cobalt.css
@ -23,7 +23,6 @@

 .ace-cobalt.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #002240;
-  border-radius: 2px
 }

 .ace-cobalt .ace_marker-layer .ace_step {
--- a/lib/ace/theme/dawn.css
+++ b/lib/ace/theme/dawn.css
@ -23,7 +23,6 @@

 .ace-dawn.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #F9F9F9;
-  border-radius: 2px
 }

 .ace-dawn .ace_marker-layer .ace_step {
--- a/lib/ace/theme/idle_fingers.css
+++ b/lib/ace/theme/idle_fingers.css
@ -23,7 +23,6 @@

 .ace-idle-fingers.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #323232;
-  border-radius: 2px
 }

 .ace-idle-fingers .ace_marker-layer .ace_step {
--- a/lib/ace/theme/katzenmilch.css
+++ b/lib/ace/theme/katzenmilch.css
@ -31,7 +31,6 @@

 .ace-katzenmilch.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #f3f2f3;
-  border-radius: 2px
 }

 .ace-katzenmilch .ace_marker-layer .ace_step {
--- a/lib/ace/theme/kr_theme.css
+++ b/lib/ace/theme/kr_theme.css
@ -23,7 +23,6 @@

 .ace-kr-theme.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #0B0A09;
-  border-radius: 2px
 }

 .ace-kr-theme .ace_marker-layer .ace_step {
--- a/lib/ace/theme/merbivore.css
+++ b/lib/ace/theme/merbivore.css
@ -23,7 +23,6 @@

 .ace-merbivore.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #161616;
-  border-radius: 2px
 }

 .ace-merbivore .ace_marker-layer .ace_step {
--- a/lib/ace/theme/merbivore_soft.css
+++ b/lib/ace/theme/merbivore_soft.css
@ -23,7 +23,6 @@

 .ace-merbivore-soft.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #1C1C1C;
-  border-radius: 2px
 }

 .ace-merbivore-soft .ace_marker-layer .ace_step {
--- a/lib/ace/theme/mono_industrial.css
+++ b/lib/ace/theme/mono_industrial.css
@ -23,7 +23,6 @@

 .ace-mono-industrial.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #222C28;
-  border-radius: 2px
 }

 .ace-mono-industrial .ace_marker-layer .ace_step {
--- a/lib/ace/theme/monokai.css
+++ b/lib/ace/theme/monokai.css
@ -23,7 +23,6 @@

 .ace-monokai.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #272822;
-  border-radius: 2px
 }

 .ace-monokai .ace_marker-layer .ace_step {
--- a/lib/ace/theme/pastel_on_dark.css
+++ b/lib/ace/theme/pastel_on_dark.css
@ -23,7 +23,6 @@

 .ace-pastel-on-dark.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #2C2828;
-  border-radius: 2px
 }

 .ace-pastel-on-dark .ace_marker-layer .ace_step {
--- a/lib/ace/theme/solarized_dark.css
+++ b/lib/ace/theme/solarized_dark.css
@ -30,7 +30,6 @@

 .ace-solarized-dark.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #002B36;
-  border-radius: 2px
 }

 .ace-solarized-dark .ace_marker-layer .ace_step {
--- a/lib/ace/theme/solarized_light.css
+++ b/lib/ace/theme/solarized_light.css
@ -23,7 +23,6 @@

 .ace-solarized-light.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #FDF6E3;
-  border-radius: 2px
 }

 .ace-solarized-light .ace_marker-layer .ace_step {
--- a/lib/ace/theme/terminal.css
+++ b/lib/ace/theme/terminal.css
@ -23,7 +23,6 @@

 .ace-terminal-theme.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px black;
-  border-radius: 2px
 }

 .ace-terminal-theme .ace_marker-layer .ace_step {
--- a/lib/ace/theme/textmate.css
+++ b/lib/ace/theme/textmate.css
@ -122,7 +122,6 @@
 }
 .ace-tm.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px white;
-  border-radius: 2px;
 }
 .ace-tm .ace_marker-layer .ace_step {
  background: rgb(252, 255, 0);
--- a/lib/ace/theme/tomorrow.css
+++ b/lib/ace/theme/tomorrow.css
@ -23,7 +23,6 @@

 .ace-tomorrow.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #FFFFFF;
-  border-radius: 2px
 }

 .ace-tomorrow .ace_marker-layer .ace_step {
--- a/lib/ace/theme/tomorrow_night.css
+++ b/lib/ace/theme/tomorrow_night.css
@ -23,7 +23,6 @@

 .ace-tomorrow-night.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #1D1F21;
-  border-radius: 2px
 }

 .ace-tomorrow-night .ace_marker-layer .ace_step {
--- a/lib/ace/theme/tomorrow_night_blue.css
+++ b/lib/ace/theme/tomorrow_night_blue.css
@ -24,7 +24,6 @@

 .ace-tomorrow-night-blue.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #002451;
-  border-radius: 2px
 }

 .ace-tomorrow-night-blue .ace_marker-layer .ace_step {
--- a/lib/ace/theme/tomorrow_night_bright.css
+++ b/lib/ace/theme/tomorrow_night_bright.css
@ -23,7 +23,6 @@

 .ace-tomorrow-night-bright.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #000000;
-  border-radius: 2px
 }

 .ace-tomorrow-night-bright .ace_marker-layer .ace_step {
--- a/lib/ace/theme/tomorrow_night_eighties.css
+++ b/lib/ace/theme/tomorrow_night_eighties.css
@ -24,7 +24,6 @@

 .ace-tomorrow-night-eighties.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #2D2D2D;
-  border-radius: 2px
 }

 .ace-tomorrow-night-eighties .ace_marker-layer .ace_step {
--- a/lib/ace/theme/twilight.css
+++ b/lib/ace/theme/twilight.css
@ -23,7 +23,6 @@

 .ace-twilight.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #141414;
-  border-radius: 2px
 }

 .ace-twilight .ace_marker-layer .ace_step {
--- a/lib/ace/theme/vibrant_ink.css
+++ b/lib/ace/theme/vibrant_ink.css
@ -23,7 +23,6 @@

 .ace-vibrant-ink.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #0F0F0F;
-  border-radius: 2px
 }

 .ace-vibrant-ink .ace_marker-layer .ace_step {
--- a/lib/ace/theme/xcode.css
+++ b/lib/ace/theme/xcode.css
@ -25,7 +25,6 @@

 .ace-xcode.ace_multiselect .ace_selection.ace_start {
  box-shadow: 0 0 3px 0px #FFFFFF;
-  border-radius: 2px
 }

 .ace-xcode .ace_marker-layer .ace_step {