Modernize match scripts
Change-Id: Iea50c72d0ec1421d50ec4a4b7e7189f31caf934c
diff --git a/dev/js/src/match/treehierarchy.js b/dev/js/src/match/treehierarchy.js
index 9fc2480..e54ef29 100644
--- a/dev/js/src/match/treehierarchy.js
+++ b/dev/js/src/match/treehierarchy.js
@@ -16,10 +16,10 @@
// Create path for node connections
function _line (src, target) {
- var x1 = src.x,
- y1 = src.y,
- x2 = target.x,
- y2 = target.y - target.height / 2;
+ const x1 = src.x,
+ y1 = src.y,
+ x2 = target.x,
+ y2 = target.y - target.height / 2;
// c 0,0 -10,0
return 'M ' + x1 + ',' + y1 + ' ' +
@@ -36,7 +36,7 @@
*/
create : function (snippet) {
return Object.create(this).
- _init(snippet);
+ _init(snippet);
},
@@ -45,16 +45,18 @@
this._next = new Number(0);
// Create html for traversal
- var html = d.createElement("div");
+ let html = d.createElement("div");
html.innerHTML = snippet;
- var g = new dagre.graphlib.Graph({
- "directed" : true
+
+ const g = new dagre.graphlib.Graph({
+ "directed" : true
});
+
g.setGraph({
- "nodesep" : 35,
- "ranksep" : 15,
- "marginx" : 40,
- "marginy" : 10
+ "nodesep" : 35,
+ "ranksep" : 15,
+ "marginx" : 40,
+ "marginy" : 10
});
g.setDefaultEdgeLabel({});
@@ -62,8 +64,8 @@
// This is a new root
this._addNode(
- this._next++,
- { "class" : "root" }
+ this._next++,
+ { "class" : "root" }
);
// Parse nodes from root
@@ -71,7 +73,7 @@
// Root node has only one child - remove
if (g.outEdges(0).length === 1)
- g.removeNode(0);
+ g.removeNode(0);
html = undefined;
return this;
@@ -82,6 +84,7 @@
return d.createElementNS(svgNS, tag);
},
+
/**
* The number of nodes in the tree.
*/
@@ -89,6 +92,7 @@
return this._next;
},
+
// Add new node to graph
_addNode : function (id, obj) {
obj["width"] = WIDTH;
@@ -97,81 +101,84 @@
return obj;
},
+
// Add new edge to graph
_addEdge : function (src, target) {
this._graph.setEdge(src, target);
},
+
// Remove foundry and layer for labels
_clean : function (title) {
return title.replace(_TermRE, "$3");
},
+
// Parse the snippet
_parse : function (parent, children, mark) {
children.forEach(function(c) {
- // Element node
- if (c.nodeType == 1) {
+ // Element node
+ if (c.nodeType == 1) {
- // Get title from html
- if (c.getAttribute("title")) {
- var title = this._clean(c.getAttribute("title"));
+ // Get title from html
+ if (c.getAttribute("title")) {
- // Add child node
- var id = this._next++;
+ // Add child node
+ const id = this._next++;
- var obj = this._addNode(id, {
- "class" : "middle",
- "label" : title
- });
+ const obj = this._addNode(id, {
+ "class" : "middle",
+ "label" : this._clean(c.getAttribute("title"))
+ });
if (mark !== undefined) {
obj.class += ' mark';
};
- this._addEdge(parent, id);
+ this._addEdge(parent, id);
- // Check for next level
- if (c.hasChildNodes())
- this._parse(id, c.childNodes, mark);
- }
+ // Check for next level
+ if (c.hasChildNodes())
+ this._parse(id, c.childNodes, mark);
+ }
- // Step further
- else if (c.hasChildNodes()) {
+ // Step further
+ else if (c.hasChildNodes()) {
- if (c.tagName === 'MARK') {
- this._parse(parent, c.childNodes, true);
- }
- else {
- this._parse(parent, c.childNodes, mark);
- };
+ this._parse(
+ parent,
+ c.childNodes,
+ c.tagName === 'MARK' ? true : mark
+ );
};
- }
+ }
- // Text node
- else if (c.nodeType == 3)
+ // Text node
+ else if (c.nodeType == 3)
- if (c.nodeValue.match(/[-a-z0-9]/i)) {
+ if (c.nodeValue.match(/[-a-z0-9]/i)) {
+
+ // Add child node
+ const id = this._next++;
+ this._addNode(id, {
+ "class" : "leaf",
+ "label" : c.nodeValue
+ });
- // Add child node
- var id = this._next++;
- this._addNode(id, {
- "class" : "leaf",
- "label" : c.nodeValue
- });
-
- this._addEdge(parent, id);
- };
+ this._addEdge(parent, id);
+ };
}, this);
return this;
},
+
// Dummy method to be compatible with relTree
show : function () {
return;
},
+
/**
* Center the viewport of the canvas
* TODO:
@@ -179,16 +186,15 @@
*/
center : function () {
if (this._element === undefined)
- return;
+ return;
- var treeDiv = this._element.parentNode;
+ const treeDiv = this._element.parentNode;
+ const cWidth = parseFloat(window.getComputedStyle(this._element).width);
+ const treeWidth = parseFloat(window.getComputedStyle(treeDiv).width);
- var cWidth = parseFloat(window.getComputedStyle(this._element).width);
- var treeWidth = parseFloat(window.getComputedStyle(treeDiv).width);
// Reposition:
if (cWidth > treeWidth) {
- var scrollValue = (cWidth - treeWidth) / 2;
- treeDiv.scrollLeft = scrollValue;
+ treeDiv.scrollLeft = (cWidth - treeWidth) / 2;
};
},
@@ -199,11 +205,12 @@
toBase64 : function () {
// First clone element
- var svgWrapper = d.createElement('div')
+ const svgWrapper = d.createElement('div')
svgWrapper.innerHTML = this.element().outerHTML;
- var svg = svgWrapper.firstChild;
- var style = this._c('style');
+ const svg = svgWrapper.firstChild;
+ const style = this._c('style');
+
svg.getElementsByTagName('defs')[0].appendChild(style);
style.innerHTML =
@@ -217,45 +224,50 @@
return btoa(unescape(encodeURIComponent(svg.outerHTML)).replace(/ /g, ' '));
},
+
/**
* Get the dom element of the tree view.
*/
element : function () {
+
if (this._element !== undefined)
- return this._element;
+ return this._element;
- var g = this._graph;
-
+ const g = this._graph;
dagre.layout(g);
- var canvas = this._c('svg');
+ const canvas = this._c('svg');
this._element = canvas;
- var that = this;
canvas.appendChild(this._c('defs'));
-
- var height = g.graph().height;
// Create edges
+ const that = this;
+
+ let src, target, p;
+
g.edges().forEach(
function (e) {
- var src = g.node(e.v);
- var target = g.node(e.w);
- var p = that._c('path');
+ src = g.node(e.v);
+ target = g.node(e.w);
+ p = that._c('path');
p.setAttributeNS(null, "d", _line(src, target));
p.classList.add('edge');
canvas.appendChild(p);
- });
+ }
+ );
+
+ let height = g.graph().height;
// Create nodes
g.nodes().forEach(
function (v) {
v = g.node(v);
- var group = that._c('g');
+ const group = that._c('g');
group.setAttribute('class', v.class);
// Add node box
- var rect = group.appendChild(that._c('rect'));
+ const rect = group.appendChild(that._c('rect'));
rect.setAttribute('x', v.x - v.width / 2);
rect.setAttribute('y', v.y - v.height / 2);
rect.setAttribute('rx', 5);
@@ -271,18 +283,18 @@
// Add label
if (v.label !== undefined) {
- var text = group.appendChild(that._c('text'));
- var y = v.y - v.height / 2;
+ const text = group.appendChild(that._c('text'));
+ let y = v.y - v.height / 2;
text.setAttribute('y', y);
text.setAttribute(
'transform',
'translate(' + v.width/2 + ',' + ((v.height / 2) + 5) + ')'
);
- var vLabel = v.label.replace(/ /g, " ")
- .replace(/&/g, '&')
- .replace(/</g, '<')
- .replace(/>/g, '>');
+ const vLabel = v.label.replace(/ /g, " ")
+ .replace(/&/g, '&')
+ .replace(/</g, '<')
+ .replace(/>/g, '>');
if (v.class === "leaf") {
text.setAttribute('title', vLabel);
@@ -295,10 +307,12 @@
tspan = that._c('tspan');
tspan.appendChild(d.createTextNode(p));
+
if (n !== 0)
tspan.setAttribute('dy', LINEHEIGHT + 'pt');
else
n = 1;
+
tspan.setAttribute('x', v.x - v.width / 2);
y += LINEHEIGHT;
text.appendChild(tspan);
@@ -311,7 +325,7 @@
height = y;
}
else {
- var tspan = that._c('tspan');
+ const tspan = that._c('tspan');
tspan.appendChild(d.createTextNode(vLabel));
tspan.setAttribute('x', v.x - v.width / 2);
text.appendChild(tspan);
@@ -325,9 +339,9 @@
canvas.setAttribute('height', height);
return this._element;
},
-
+
downloadLink : function () {
- var a = d.createElement('a');
+ const a = d.createElement('a');
a.setAttribute('href-lang', 'image/svg+xml');
a.setAttribute('href', 'data:image/svg+xml;base64,' + this.toBase64());
a.setAttribute('download', 'tree.svg');