document.write("<?php include 'Tutorials/conf.php';?>");
var tuto_path = "<?php echo $tutorials_path; ?>";
/**
Creates an object of the Timeline class.
@memberOf WIND
@class Creates an object of the Timeline class to be displayed on the web page.
@param {string} iddiv The ID of the Timeline object.
@param {JSON} options string in JSON format to set options for the Timeline objet.
@example var timeline = new WIND.Timeline("timeline", {'top': 100, 'left': 100, 'width': 600, 'height': 400, 'name': "timeline",'draggable': false, 'resizable' : false,'color': '#FF9900', 'border': '#FF9900 2px solid', 'header': false, 'removable': false, 'configurable': false});
*/
WIND.Timeline = function (iddiv, options) {
this.type = "timeline";
this.top = 10;
this.left = 10;
this.width = 600;
this.height = 400;
this.color = "#3366CC";
this.border = "#3366CC 2px solid";
this.name = "Timeline Displayer";
this.icon = tuto_path + "/styles/images/tivizicon.png";
// Admin action configuration for the designer
this.draggable = false;
this.resizable = false;
this.header = false;
this.removable = false;
this.configurable = false;
wind_timeline = true;
if (options.type) this.base = options.type; else this.base = "Simile";
if (options.draggable == true) this.draggable = options.draggable;
if (options.resizable == true) this.resizable = options.resizable;
if (options.header == true) this.header = options.header;
if (options.removable == true) this.removable = options.removable;
if (options.configurable == true) this.configurable = options.configurable;
if (this.draggable == true || this.removable == true || this.configurable == true) this.header = true;
var outerDiv = document.createElement("div");
outerDiv.id = iddiv + "Outer";
outerDiv.style.position = "absolute";
if (options.top) this.top = options.top;
outerDiv.style.top = this.top + "px";
if (options.left) this.left = options.left;
outerDiv.style.left = this.left + "px";
if (options.width) this.width = options.width;
outerDiv.style.width = this.width + "px";
if (options.height) this.height = options.height;
outerDiv.style.height = this.height + "px";
if (options.color) this.color = options.color;
if (options.border) this.border = options.border;
outerDiv.style.border = this.border;
if (options.parentEl) this.parentEl = options.parentEl;
if (options.name) this.name = options.name;
if (options.icon) this.icon = options.icon;
var tlDiv;
if (document.getElementById(iddiv))
tlDiv = document.getElementById(iddiv);
else {
tlDiv = document.createElement("div");
tlDiv.id = iddiv;
}
tlDiv.style.position = "absolute";
if (this.header) {
tlDiv.style.top = "20px";
tlDiv.style.height = (Number(this.height) - 22) + "px";
//tlDiv.style.height = "95%";
} else {
tlDiv.style.top = "0px";
tlDiv.style.height = "100%";
}
tlDiv.style.width = "100%";
outerDiv.appendChild(tlDiv);
if (options.parentEl) {
this.parentEl = options.parentEl;
document.getElementById(options.parentEl).appendChild(outerDiv);
} else document.body.appendChild(outerDiv);
if (this.header) {
var headerDiv = document.createElement("div");
headerDiv.id = iddiv + "Handle";
headerDiv.style.position = "absolute";
headerDiv.style.width = "100%";
headerDiv.style.height = "20px";
headerDiv.style.backgroundColor = this.color;
if (this.draggable) headerDiv.style.cursor = "move";
headerDiv.style.zIndex = 2;
var iconSpan = document.createElement("img");
iconSpan.src = this.icon;
iconSpan.alt = "[ ]";
iconSpan.title = "TimelineDisplayer";
iconSpan.style.cssFloat = "left";
headerDiv.appendChild(iconSpan);
var nameNode = document.createElement("span");
nameNode.style.color = "#FFFFFF";
nameNode.style.paddingLeft = "3px";
nameNode.appendChild(document.createTextNode(this.name));
headerDiv.appendChild(nameNode);
var configDiv = document.createElement("div");
configDiv.id = iddiv + "Configuration";
configDiv.style.position = "absolute";
configDiv.style.width = "100%";
//configDiv.style.height = "100px";
configDiv.style.marginTop = "20px";
configDiv.style.backgroundColor = "#E4E4E4";
configDiv.style.zIndex = 10;
configDiv.style.display = "none";
outerDiv.appendChild(configDiv);
var that = this;
// Name of displayer
var label1 = document.createElement("span");
label1.appendChild(document.createTextNode("Name: "));
configDiv.appendChild(label1);
//configDiv.appendChild(document.createElement("br"));
var input1 = document.createElement("input");
input1.type = "text";
input1.id = iddiv + "Configuration_Name";
input1.name = iddiv + "Configuration_Name";
input1.size = "30";
input1.value = this.name;
configDiv.appendChild(input1);
input1.onblur = function () {
var nomafficheur = document.getElementById(iddiv + "Configuration_Name").value;
if ((nomafficheur != null) && (nomafficheur != '')) {
that.name = nomafficheur;
nameNode.removeChild(nameNode.firstChild);
nameNode.appendChild(document.createTextNode(that.name));
}
that.eventConfigured.fire(that);
};
configDiv.appendChild(document.createElement("br"));
// Color of displayer
var label2 = document.createElement("span");
label2.appendChild(document.createTextNode("Color: "));
configDiv.appendChild(label2);
var input2 = document.createElement("select");
input2.id = iddiv + "Configuration_Color";
input2.name = iddiv + "Configuration_Color";
configDiv.appendChild(input2);
input2.style.background = this.color;
//var colorTab = ["#FF0000", "#B20000", "#FEBFBF", "#FE8080", "#FF3300", "#B22400", "#FECCBF", "#FE9980", "#FF6600", "#B24700", "#FED9BF", "#FEB380", "#FF8000", "#B25900", "#FEDFBF", "#FEBF80"];
var colorTab = ["#00248E", "#0033CC", "#809FFE", "#BFCFFE", "#12127D", "#1919B3", "#9191FE", "#C8C8FE", "#24006B", "#330099", "#AA80FE", "#D4BFFE", "#2D006B", "#400099", "#B580FE", "#DABFFE", "#47006B", "#660099", "#D580FE", "#EABFFE", "#6B006B", "#990099", "#FF80FE", "#FFBFFE", "#8E006B", "#CC0099", "#FE80DF", "#FEBFEF", "#A10048", "#E60066", "#FE80B9", "#FEBFDC", "#B20000", "#FF0000", "#FE8080", "#FEBFBF", "#B22400", "#FF3300", "#FE9980", "#FECCBF", "#B24700", "#FF6600", "#FEB380", "#FED9BF", "#B25900", "#FF8000", "#FEBF80", "#FEDFBF", "#B26B00", "#FF9900", "#FECC80", "#FEE6BF", "#B27D00", "#FFB200", "#FED980", "#FEECBF", "#B28F00", "#FFCC00", "#FEE680", "#FEF2BF", "#B2A100", "#FFE500", "#FEF280", "#FEF9BF", "#B2B300", "#FFFF00", "#FEFF80", "#FEFFBF", "#8FB200", "#CCFF00", "#E6FE80", "#F2FEBF", "#6BB200", "#99FF00", "#CCFE80", "#E6FEBF", "#24B200", "#33FF00", "#99FE80", "#CCFEBF", "#008E00", "#00CC00", "#80FE80", "#BFFEBF", "#007D47", "#00B366", "#80FEC8", "#BFFEE3", "#006B6B", "#009999", "#80FFFE", "#BFFFFE", "#00477D", "#0066B3", "#80C8FE", "#BFE3FE"];
for (var i = 0; i < colorTab.length; i++) {
var opt = new Option(colorTab[i], colorTab[i]);
opt.style.background = colorTab[i];
opt.style.position = "absolute";
opt.style.width = "100px";
opt.style.height = "30px";
if (colorTab[i] == this.color) opt.selected = true;
input2.add(opt);
}
input2.onchange = function () {
input2.style.background = this.options[this.selectedIndex].value;
that.color = this.options[this.selectedIndex].value;
that.border = this.options[this.selectedIndex].value + " 2px solid";
document.getElementById(iddiv + "Handle").style.backgroundColor = that.color;
document.getElementById(iddiv + "Outer").style.border = that.border;
};
configDiv.appendChild(document.createElement("br"));
this.eventConfigured = new YAHOO.util.CustomEvent("eventConfigured");
this.eventConfigured.subscribe(this.onConfigure, this, true);
// Layers
if(that.base=="Simile")
{
var label7 = document.createElement("span");
label7.appendChild(document.createTextNode("Level: "));
configDiv.appendChild(label7);
for (var i = 2; i < 8; i++) {
var levelChoice = document.createElement("input");
levelChoice.type = "radio";
levelChoice.id = iddiv + "Configuration_Level" + i;
levelChoice.name = iddiv + "Configuration_Level";
configDiv.appendChild(levelChoice);
var levelChoiceLabel = document.createElement("label");
levelChoiceLabel.appendChild(document.createTextNode(WIND.Timeline.Interval[i] + " "));
configDiv.appendChild(levelChoiceLabel);
that = this;
levelChoice.onclick = function (e) {
that.tl.getBand(0).zoom(true, 1485);
that.tl.getBand(1).zoom(true, 1485);
that.tl.layout();
};
}
}
configDiv.appendChild(document.createElement("br"));
configDiv.appendChild(document.createElement("br"));
var button2 = document.createElement("input");
button2.type = "button";
button2.id = iddiv + "Configuration_Cancel";
button2.name = iddiv + "Configuration_Cancel";
button2.value = "Close";
configDiv.appendChild(button2);
button2.onclick = function () {
configDiv.style.display = "none";
};
if (this.removable) {
this.eventRemoved = new YAHOO.util.CustomEvent("eventRemoved");
var removeSpan = document.createElement("img");
removeSpan.src = "images/close.png";
removeSpan.alt = "X";
removeSpan.title = "Delete";
removeSpan.style.backgroundColor = "#EFEFEF";
removeSpan.style.cssFloat = "right";
removeSpan.style.cursor = "pointer";
headerDiv.appendChild(removeSpan);
//var that = this;
removeSpan.onclick = function () {
if (confirm("Do you really want to delete it?")) {
that.destroy();
that.eventRemoved.fire(that);
}
};
this.eventRemoved.subscribe(this.onRemove, this, true);
}
if (this.configurable) {
var configureSpan = document.createElement("img");
configureSpan.src = tuto_path + "/styles/images/gear.png";
configureSpan.alt = "*";
configureSpan.title = "Preferences";
//configureSpan.style.backgroundColor = "#EFEFEF";
configureSpan.style.cssFloat = "right";
configureSpan.style.marginRight = "10px";
configureSpan.style.cursor = "pointer";
headerDiv.appendChild(configureSpan);
configureSpan.onclick = function () {
configDiv.style.display = "block";
};
}
outerDiv.appendChild(headerDiv);
if (this.draggable) {
var dd = new YAHOO.util.DD(iddiv + "Outer");
dd.setHandleElId(iddiv + "Handle");
this.eventDragged = new YAHOO.util.CustomEvent("eventDragged");
dd.on('endDragEvent', function (ev) {
this.eventDragged.fire(this);
}, this, true);
this.eventDragged.subscribe(this.onDrag, this, true);
if (options.parentEl) {
var region = document.getElementById(options.parentEl);
//Set left to x minus left
var left = outerDiv.offsetLeft - region.offsetLeft;
//Set right to right minus x minus width
var right = region.offsetLeft + region.offsetWidth - outerDiv.offsetLeft - outerDiv.offsetWidth;
//Set top to y minus top
var top = outerDiv.offsetTop - region.offsetTop;
//Set bottom to bottom minus y minus height
var bottom = region.offsetTop + region.offsetHeight - outerDiv.offsetTop - outerDiv.offsetHeight;
//Set the constraints based on the above calculations
dd.setXConstraint(left, right);
dd.setYConstraint(top);
} else {
var left = outerDiv.offsetLeft;
var top = outerDiv.offsetTop;
dd.setXConstraint(left);
dd.setYConstraint(top);
}
}
}
if (this.resizable) {
var newdiv = document.createElement("div");
newdiv.id = "yui-gen0";
newdiv.className = "yui-resize-handle yui-resize-handle-r";
var newindiv = document.createElement("div");
newindiv.className = "yui-resize-handle-inner-r";
newdiv.appendChild(newindiv);
outerDiv.appendChild(newdiv);
/*var newdiv = document.createElement("div");
newdiv.id = "yui-gen1";
newdiv.className = "yui-resize-handle yui-resize-handle-b";
var newindiv = document.createElement("div");
newindiv.className = "yui-resize-handle-inner-b";
newdiv.appendChild(newindiv);
outerDiv.appendChild(newdiv);
var newdiv = document.createElement("div");
newdiv.id = "yui-gen2";
newdiv.className = "yui-resize-handle yui-resize-handle-br";
var newindiv = document.createElement("div");
newindiv.className = "yui-resize-handle-inner-br";
newdiv.appendChild(newindiv);
outerDiv.appendChild(newdiv);
*/
var dd2 = new YAHOO.util.Resize(iddiv + "Outer", {
handles: ['r'],
'minWidth': 10,
'minHeight': 10,
'maxWidth': 1200,
'maxHeight': 800
});
this.eventResized = new YAHOO.util.CustomEvent("eventResized");
dd2.on('endResize', function (ev) {
this.eventResized.fire(this);
}, this, true);
this.eventResized.subscribe(this.onResize, this, true);
}
this.container = iddiv;
this.interactionList = [];
this.parts = [];
this.annotations = [];
this.parentDocument = null;
this.level = Timeline.DateTime.YEAR;
if (this.base=="Simile")
{
this.eventSource = new Timeline.DefaultEventSource();
var theme = Timeline.ClassicTheme.create();
theme.event.tape.height = 7;
theme.event.track.offset = 15;
theme.event.track.height = 30;
var bandInfos = [
Timeline.createBandInfo({
width: "70%",
intervalUnit: this.level - 1,
intervalPixels: 100,
zoomIndex: 10,
zoomSteps: new Array({
pixelsPerInterval: 100,
unit: Timeline.DateTime.DAY
}, {
pixelsPerInterval: 100,
unit: Timeline.DateTime.MONTH
}, {
pixelsPerInterval: 100,
unit: Timeline.DateTime.YEAR
}, {
pixelsPerInterval: 100,
unit: Timeline.DateTime.DECADE
}),
eventSource: this.eventSource,
theme: theme,
layout: "original"
}),
Timeline.createBandInfo({
width: "30%",
intervalUnit: this.level,
intervalPixels: 80,
zoomSteps: new Array(
{pixelsPerInterval: 80, unit: Timeline.DateTime.MONTH}
,{
pixelsPerInterval: 80,
unit: Timeline.DateTime.YEAR
}, {
pixelsPerInterval: 80,
unit: Timeline.DateTime.DECADE
}, {
pixelsPerInterval: 80,
unit: Timeline.DateTime.CENTURY
}),
eventSource: this.eventSource,
theme: theme,
layout: "overview"
})
];
bandInfos[1].highlight = true;
bandInfos[1].syncWith = 0;
this.tl = Timeline.create(tlDiv, bandInfos, Timeline.HORIZONTAL);
}
else if (this.base=="Chap")
{
if(this.header)
var options={"width": "auto", "height":"auto", "minHeight": this.height-20, "style": "box"};
else
var options={"width": "auto", "height":"auto", "minHeight": this.height, "style": "box"};
this.tl = new links.Timeline(tlDiv,options);
this.tl.setVisibleChartRange(new Date(2013, 1, 1), new Date(2016, 1, 1));
}
else alert("this type \""+this.base+"\" is not supported.")
};
WIND.Timeline.Interval = ["Second", "Minute", "Hour", "Day", "Week", "Month", "Year", "Century", "Millennium", "10Millennia", "100 Millennia", "Million", "10Millions", "100Millions", "Billion", "10Billions"];
/**
Destroys the timeline and remove it from the page.
@function
@example var timeline = new WIND.Timeline("timeline", {'top': 100, 'left': 100, 'width': 600, 'height': 400, 'name': "timeline",'draggable': false, 'resizable' : false,'color': '#FF9900', 'border': '#FF9900 2px solid', 'header': false, 'removable': false, 'configurable': false});
timeline.destroy();
**/
WIND.Timeline.prototype.destroy = function () {
var tlDiv = document.getElementById(this.container + "Outer");
if (this.parentEl) {
var newtab = [];
for (var i = 0; i < this.parentDocument.viewers.length; i++) {
if (this.parentDocument.viewers[i].container != this.container) {
newtab.push(this.parentDocument.viewers[i]);
}
}
this.parentDocument.viewers = newtab;
document.getElementById(this.parentEl).removeChild(tlDiv);
} else document.body.removeChild(tlDiv);
};
WIND.Timeline.prototype.onDrag = function () {
this.top = document.getElementById(this.container + "Outer").offsetTop;
this.left = document.getElementById(this.container + "Outer").offsetLeft;
};
WIND.Timeline.prototype.onResize = function () {
this.width = document.getElementById(this.container + "Outer").offsetWidth;
this.height = document.getElementById(this.container + "Outer").offsetHeight;
};
WIND.Timeline.prototype.onConfigure = function () {}; // to override
WIND.Timeline.prototype.onRemove = function () {}; // to override
/**
Adds an annotation objet to the timeline.
@function
@param {Annotation} annotation Annotation objet to add.
@example var timeline = new WIND.Timeline("timeline", {'top': 100, 'left': 100, 'width': 600, 'height': 400, 'name': "timeline",'draggable': false, 'resizable' : false,'color': '#FF9900', 'border': '#FF9900 2px solid', 'header': false, 'removable': false, 'configurable': false});
timeline.addAnnotation(annotation);
**/
WIND.Timeline.prototype.addAnnotation = function (annotation) {
var valid = false;
for (var i = 0; i < annotation.annotedObjects.length; i++) {
if (annotation.annotedObjects.type == "timeline") {
valid = true;
break;
}
}
this.annotations.push(annotation);
};
/**
Creates an Annotaion objet on the timeline.
@function
@param {string} sem Represents the type of the Annotation objet to add. Its value can be anything.
@param {string} entity Name of the annotated entity.
@param {string} tempoStart The starting date of the annotation expressed according to ISO 8601 standard.
@param {string} tempoEnd The ending date of the annotation expressed according to ISO 8601 standard.
@return {Annotation} returns Annotation object.
@example var timeline = new WIND.Timeline("timeline", {'top': 100, 'left': 100, 'width': 600, 'height': 400, 'name': "timeline",'draggable': false, 'resizable' : false,'color': '#FF9900', 'border': '#FF9900 2px solid', 'header': false, 'removable': false, 'configurable': false});
timeline.createAnnotation("Event","World Cup","2014-06-12","2014-07-13");
**/
WIND.Timeline.prototype.createAnnotation = function (sem, entity, tempoStart, tempoEnd, options) {
var tlpart = this.createSensiblePart(entity, tempoStart, tempoEnd, options);
var annotation = new WIND.Annotation(sem, entity, new Array(tlpart));
this.annotations.push(annotation);
if(this.base=="Chap")
this.tl.setVisibleChartRange(new Date(2013, 1, 1), new Date(2016, 1, 1));
return annotation;
};
WIND.Timeline.prototype.createSensiblePart = function (entity, tempoStart, tempoEnd, options) {
var tlp = new WIND.Timeline.Part(entity, tempoStart, tempoEnd,this.base);
tlp.viewer = this;
this.parts.push(tlp);
if(this.base=="Simile")
{
this.eventSource.add(tlp.tlEvent);
this.tl.layout();
}
else if(this.base=="Chap")
{
var aux = [];
for(var i=0;i<this.parts.length;i++)
aux=aux.concat(this.parts[i].data);
this.tl.setData(aux);
this.tl.setVisibleChartRangeAuto();
}
return tlp;
};
WIND.Timeline.prototype.getValue = function () {
return {
id: this.container,
ref: this.ref,
rdftype: "http://erozate.iutbayonne.univ-pau.fr/wind#TimelineComponent",
name: this.name,
position: {
top: this.top,
left: this.left
},
size: {
width: this.width,
height: this.height
},
style: {
color: this.color,
border: this.border,
icon: this.icon
},
annotation: this.annotation,
display: this.display,
load: this.load,
parameter: {
draggable: (this.draggable) ? "yes" : "no",
resizable: (this.resizable) ? "yes" : "no",
removable: (this.removable) ? "yes" : "no",
configurable: (this.configurable) ? "yes" : "no",
header: (this.header) ? "yes" : "no",
toolbar: "no"
}
}
};
WIND.Timeline.prototype.loadRDFFile = function (php, url) {
var xhr = createXHR();
xhr.open("GET", php + "?rdf=" + url, false);
xhr.send(null);
if (xhr.status == 200) {
var resultat = YAHOO.lang.JSON.parse(xhr.responseText);
var res = resultat.annotations;
//var jsondata = {"dateTimeFormat":"iso8601","events":[]};
var parseDateTimeFunction = this.eventSource._events.getUnit().getParser("iso8601");
for (var i = 0; i < res.length; i++) {
var evt = new Timeline.DefaultEventSource.Event({
'id': "Event " + res[i].entityName,
'start': parseDateTimeFunction(res[i].temporalInfo[0].tempoStart),
'end': parseDateTimeFunction(res[i].temporalInfo[0].tempoEnd),
//'latestStart': parseDateTimeFunction(res[i].temporalInfo[0].tempoStart),
//'earliestEnd': parseDateTimeFunction(res[i].temporalInfo[0].tempoEnd),
'instant': (res[i].temporalInfo[0].tempoStart == res[i].temporalInfo[0].tempoEnd) ? true : false,
'text': res[i].entityName,
'description': "Description for Event " + res[i].entityName,
'icon': tuto_path + "/styles/images/timeicon64.png"
});
this.eventSource.add(evt);
}
this.tl.layout();
} else {
document.getElementById(this.container).innerHTML = "Error: " + url + " " + xhr.status + " " + xhr.statusText;
}
};
/**
Creates a WIND.Timeline.Part object.
@memberOf WIND.Timeline
@class Creates a WIND.Timeline.Part object.
@param {string} eventName Name of the timeline's part.
@param {string} tempoStart The starting date of the timeline's part expressed according to ISO 8601 standard.
@param {string} tempoEnd The ending date of the timeline's part expressed according to ISO 8601 standard.
@property {Unknow} feature On sait pas
@property {Unknow} style style de la carte
@property {geoObject} geoObject Type de figure de la part avec ses coordonnées
@property {Unknown} vlayer On sait pas
@example
var part = new WIND.Timeline.Part("World Cup","2014-06-12","2014-07-13");
**/
WIND.Timeline.Part = function (eventName, tempoStart, tempoEnd, base) {
this.eventName = eventName;
this.starting = tempoStart;
this.ending = tempoEnd;
this.type = (tempoStart == tempoEnd) ? "Instant" : "Interval";
var toto = new Timeline.DefaultEventSource();
var parseDateTimeFunction = toto._events.getUnit().getParser("iso8601");
var aux = parseDateTimeFunction(tempoStart);
if(base=="Simile")
{
this.tlEvent = new Timeline.DefaultEventSource.Event({
'id': "Event " + eventName,
'start': parseDateTimeFunction(tempoStart),
'end': parseDateTimeFunction(tempoEnd),
//'latestStart': parseDateTimeFunction(tempoStart),
//'earliestEnd': parseDateTimeFunction(tempoEnd),
'instant': (tempoStart == tempoEnd) ? true : false,
'text': eventName,
'description': "Description for Event " + eventName
});
}
else if(base=="Chap")
{
this.data = [];
if(this.type=="Interval")
this.data.push({
'start': new Date(this.starting),
'end': new Date(this.ending),
'content': this.eventName
});
else
this.data.push({
'start': new Date(this.starting),
'content': this.eventName,
'type':"dot"
});
}
};
WIND.Timeline.Part.prototype.callFunction = function (func) {
switch (func) {
case "zoom":
this.zoomTo();
break;
case "focus":
this.highlight();
this.zoomTo();
break;
}
};
WIND.Timeline.Part.prototype.zoomTo = function () {
if(this.viewer.base=="Simile")
this.viewer.tl.getBand(0).setCenterVisibleDate(new Date(this.ending));
else if(this.viewer.base=="Chap")
{
var inter = (this.viewer.tl.end.valueOf()-this.viewer.tl.start.valueOf())/2;
var d = Date.parse(this.ending);
this.viewer.tl.setVisibleChartRange(new Date(d-inter),new Date(d+inter));
}
};
WIND.Timeline.Part.prototype.highlight = function () {
if(this.viewer.base=="Simile")
{
if(this.type=="Instant")
{
this.tlEvent._color="#00aa00";
this.tlEvent._icon=tuto_path+"/styles/images/green-circle.png";
}
else if(this.type=="Interval")
this.tlEvent._color="#00aa00";
this.viewer.tl.layout();
}
else if(this.viewer.base=="Chap")
{
this.data[0].className="timeline-event-highlight";
this.viewer.tl.redraw();
}
};