mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-26 19:44:25 +00:00
218 lines
8.2 KiB
JavaScript
Executable file
218 lines
8.2 KiB
JavaScript
Executable file
/* ***** BEGIN LICENSE BLOCK *****
|
|
* Distributed under the BSD license:
|
|
*
|
|
* Copyright (c) 2010, Ajax.org B.V.
|
|
* All rights reserved.
|
|
*
|
|
* Redistribution and use in source and binary forms, with or without
|
|
* modification, are permitted provided that the following conditions are met:
|
|
* * Redistributions of source code must retain the above copyright
|
|
* notice, this list of conditions and the following disclaimer.
|
|
* * Redistributions in binary form must reproduce the above copyright
|
|
* notice, this list of conditions and the following disclaimer in the
|
|
* documentation and/or other materials provided with the distribution.
|
|
* * Neither the name of Ajax.org B.V. nor the
|
|
* names of its contributors may be used to endorse or promote products
|
|
* derived from this software without specific prior written permission.
|
|
*
|
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
|
|
* ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
|
|
* WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
|
* DISCLAIMED. IN NO EVENT SHALL AJAX.ORG B.V. BE LIABLE FOR ANY
|
|
* DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
|
|
* (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
|
* LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
|
|
* ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
|
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
|
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
*
|
|
* ***** END LICENSE BLOCK ***** */
|
|
|
|
define(function(require, exports, module) {
|
|
"use strict";
|
|
|
|
var Range = require("../range").Range;
|
|
var dom = require("../lib/dom");
|
|
|
|
var Marker = function(parentEl) {
|
|
this.element = dom.createElement("div");
|
|
this.element.className = "ace_layer ace_marker-layer";
|
|
parentEl.appendChild(this.element);
|
|
};
|
|
|
|
(function() {
|
|
|
|
this.$padding = 0;
|
|
|
|
this.setPadding = function(padding) {
|
|
this.$padding = padding;
|
|
};
|
|
this.setSession = function(session) {
|
|
this.session = session;
|
|
};
|
|
|
|
this.setMarkers = function(markers) {
|
|
this.markers = markers;
|
|
};
|
|
|
|
this.update = function(config) {
|
|
var config = config || this.config;
|
|
if (!config)
|
|
return;
|
|
|
|
this.config = config;
|
|
|
|
|
|
var html = [];
|
|
for (var key in this.markers) {
|
|
var marker = this.markers[key];
|
|
|
|
if (!marker.range) {
|
|
marker.update(html, this, this.session, config);
|
|
continue;
|
|
}
|
|
|
|
var range = marker.range.clipRows(config.firstRow, config.lastRow);
|
|
if (range.isEmpty()) continue;
|
|
|
|
range = range.toScreenRange(this.session);
|
|
if (marker.renderer) {
|
|
var top = this.$getTop(range.start.row, config);
|
|
var left = this.$padding + range.start.column * config.characterWidth;
|
|
marker.renderer(html, range, left, top, config);
|
|
} else if (marker.type == "fullLine") {
|
|
this.drawFullLineMarker(html, range, marker.clazz, config);
|
|
} else if (marker.type == "screenLine") {
|
|
this.drawScreenLineMarker(html, range, marker.clazz, config);
|
|
} else if (range.isMultiLine()) {
|
|
if (marker.type == "text")
|
|
this.drawTextMarker(html, range, marker.clazz, config);
|
|
else
|
|
this.drawMultiLineMarker(html, range, marker.clazz, config);
|
|
} else {
|
|
this.drawSingleLineMarker(html, range, marker.clazz + " ace_start", config);
|
|
}
|
|
}
|
|
this.element = dom.setInnerHtml(this.element, html.join(""));
|
|
};
|
|
|
|
this.$getTop = function(row, layerConfig) {
|
|
return (row - layerConfig.firstRowScreen) * layerConfig.lineHeight;
|
|
};
|
|
|
|
// 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);
|
|
}
|
|
};
|
|
|
|
// Draws a multi line marker, where lines span the full width
|
|
this.drawMultiLineMarker = function(stringBuilder, range, clazz, config, extraStyle) {
|
|
// from selection start to the end of the line
|
|
var padding = this.$padding;
|
|
var height = config.lineHeight;
|
|
var top = this.$getTop(range.start.row, config);
|
|
var left = padding + range.start.column * config.characterWidth;
|
|
extraStyle = extraStyle || "";
|
|
|
|
stringBuilder.push(
|
|
"<div class='", clazz, " ace_start' style='",
|
|
"height:", height, "px;",
|
|
"right:0;",
|
|
"top:", top, "px;",
|
|
"left:", left, "px;", extraStyle, "'></div>"
|
|
);
|
|
|
|
// from start of the last line to the selection end
|
|
top = this.$getTop(range.end.row, config);
|
|
var width = range.end.column * config.characterWidth;
|
|
|
|
stringBuilder.push(
|
|
"<div class='", clazz, "' style='",
|
|
"height:", height, "px;",
|
|
"width:", width, "px;",
|
|
"top:", top, "px;",
|
|
"left:", padding, "px;", extraStyle, "'></div>"
|
|
);
|
|
|
|
// all the complete lines
|
|
height = (range.end.row - range.start.row - 1) * config.lineHeight;
|
|
if (height < 0)
|
|
return;
|
|
top = this.$getTop(range.start.row + 1, config);
|
|
|
|
stringBuilder.push(
|
|
"<div class='", clazz, "' style='",
|
|
"height:", height, "px;",
|
|
"right:0;",
|
|
"top:", top, "px;",
|
|
"left:", padding, "px;", extraStyle, "'></div>"
|
|
);
|
|
};
|
|
|
|
// Draws a marker which covers part or whole width of a single screen line
|
|
this.drawSingleLineMarker = function(stringBuilder, range, clazz, config, extraLength, extraStyle) {
|
|
var height = config.lineHeight;
|
|
var width = (range.end.column + (extraLength || 0) - range.start.column) * config.characterWidth;
|
|
|
|
var top = this.$getTop(range.start.row, config);
|
|
var left = this.$padding + range.start.column * config.characterWidth;
|
|
|
|
stringBuilder.push(
|
|
"<div class='", clazz, "' style='",
|
|
"height:", height, "px;",
|
|
"width:", width, "px;",
|
|
"top:", top, "px;",
|
|
"left:", left, "px;", extraStyle || "", "'></div>"
|
|
);
|
|
};
|
|
|
|
this.drawFullLineMarker = function(stringBuilder, range, clazz, config, extraStyle) {
|
|
var top = this.$getTop(range.start.row, config);
|
|
var height = config.lineHeight;
|
|
if (range.start.row != range.end.row)
|
|
height += this.$getTop(range.end.row, config) - top;
|
|
|
|
stringBuilder.push(
|
|
"<div class='", clazz, "' style='",
|
|
"height:", height, "px;",
|
|
"top:", top, "px;",
|
|
"left:0;right:0;", extraStyle || "", "'></div>"
|
|
);
|
|
};
|
|
|
|
this.drawScreenLineMarker = function(stringBuilder, range, clazz, config, extraStyle) {
|
|
var top = this.$getTop(range.start.row, config);
|
|
var height = config.lineHeight;
|
|
|
|
stringBuilder.push(
|
|
"<div class='", clazz, "' style='",
|
|
"height:", height, "px;",
|
|
"top:", top, "px;",
|
|
"left:0;right:0;", extraStyle || "", "'></div>"
|
|
);
|
|
};
|
|
|
|
}).call(Marker.prototype);
|
|
|
|
exports.Marker = Marker;
|
|
|
|
});
|