281 lines
9.2 KiB
JavaScript
281 lines
9.2 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
|
||
|
|
function htmlEntities(str) {
|
||
|
|
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||
|
|
}
|
||
|
|
|
||
|
|
function foundLazyModuleWithPath(path) {
|
||
|
|
//path is like app/customers/customers.module#CustomersModule
|
||
|
|
var split = path.split('#'),
|
||
|
|
lazyModulePath = split[0],
|
||
|
|
lazyModuleName = split[1];
|
||
|
|
return lazyModuleName;
|
||
|
|
}
|
||
|
|
|
||
|
|
function getBB(selection) {
|
||
|
|
selection.each(function(d){d.bbox = this.getBBox();})
|
||
|
|
}
|
||
|
|
|
||
|
|
var test_cases,
|
||
|
|
test_case,
|
||
|
|
test_case_num,
|
||
|
|
engine;
|
||
|
|
|
||
|
|
var tree = ROUTES_INDEX;
|
||
|
|
|
||
|
|
function cleanStringChildren(obj) {
|
||
|
|
for (var property in obj) {
|
||
|
|
if (obj.hasOwnProperty(property)) {
|
||
|
|
if (property === 'children' && typeof obj[property] === 'object') {
|
||
|
|
for (var i = obj[property].length - 1; i >= 0 ; i--) {
|
||
|
|
if (typeof obj[property][i] === 'string') {
|
||
|
|
obj[property].splice(i, 1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (typeof obj[property] === 'object') {
|
||
|
|
cleanStringChildren(obj[property]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
cleanStringChildren(tree);
|
||
|
|
|
||
|
|
engine = d3.layout.tree().setNodeSizes(true);
|
||
|
|
|
||
|
|
engine.spacing(function(a, b) {
|
||
|
|
return a.parent == b.parent ?
|
||
|
|
0 : engine.rootXSize();
|
||
|
|
})
|
||
|
|
|
||
|
|
engine.nodeSize(function(d) {
|
||
|
|
return [document.getElementById(d.id).getBBox()["height"] + 70, document.getElementById(d.id).getBBox()["width"] + 30];
|
||
|
|
});
|
||
|
|
|
||
|
|
var nodes = d3.layout.hierarchy()(tree),
|
||
|
|
|
||
|
|
svg = d3.select("#body-routes").append('svg'),
|
||
|
|
svg_g = svg.append("g"),
|
||
|
|
svg_p = svg.append("g"),
|
||
|
|
last_id = 0,
|
||
|
|
|
||
|
|
node = svg_g.selectAll(".node")
|
||
|
|
.data(nodes, function(d) {
|
||
|
|
return d.id || (d.id = ++last_id);
|
||
|
|
})
|
||
|
|
.enter().append("g")
|
||
|
|
.attr("class", "node");
|
||
|
|
|
||
|
|
svg
|
||
|
|
.attr('id', 'main')
|
||
|
|
|
||
|
|
svg_g
|
||
|
|
.attr("transform", "translate(20,0)")
|
||
|
|
.attr('id', 'main-group')
|
||
|
|
|
||
|
|
svg_p
|
||
|
|
.attr("transform", "translate(20,0)")
|
||
|
|
.attr('id', 'paths')
|
||
|
|
|
||
|
|
var infos_group = node.append("g")
|
||
|
|
.attr({
|
||
|
|
"id": function(d) {
|
||
|
|
return d.id;
|
||
|
|
},
|
||
|
|
dx: 0,
|
||
|
|
dy: 0,
|
||
|
|
})
|
||
|
|
|
||
|
|
//Node icon
|
||
|
|
infos_group.append("text")
|
||
|
|
.attr('font-family', 'Ionicons')
|
||
|
|
.attr("y", 5)
|
||
|
|
.attr("x", 0)
|
||
|
|
.attr('class', function(d) {
|
||
|
|
return d.children || d._children
|
||
|
|
? "icon has-children"
|
||
|
|
: "icon";
|
||
|
|
})
|
||
|
|
.attr('font-size', function(d) {
|
||
|
|
return '15px'
|
||
|
|
}).text(function(d) {
|
||
|
|
return '\uf183'
|
||
|
|
});
|
||
|
|
|
||
|
|
//node infos
|
||
|
|
infos_group.append("svg:text")
|
||
|
|
.attr("x", function(d) {
|
||
|
|
return 0;
|
||
|
|
})
|
||
|
|
.attr("y", function(d) {
|
||
|
|
return 10;
|
||
|
|
})
|
||
|
|
.attr("dy", ".35em")
|
||
|
|
.attr('class', 'text')
|
||
|
|
.attr("text-anchor", function(d) {
|
||
|
|
return "start";
|
||
|
|
}).html(function(d) {
|
||
|
|
// if kind === module name + module
|
||
|
|
// if kind === component component + path
|
||
|
|
var _name = '';
|
||
|
|
if (d.kind === 'module') {
|
||
|
|
if (d.module) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em"><a href="./modules/' + d.module + '.html">' + d.module + '</a></tspan>';
|
||
|
|
if (d.name) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">' + d.name + '</tspan>';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">' + htmlEntities(d.name) + '</tspan>';
|
||
|
|
}
|
||
|
|
} else if (d.kind === 'component') {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">' + d.path + '</tspan>'
|
||
|
|
_name += '<tspan x="0" dy="1.4em"><a href="./components/' + d.component + '.html">' + d.component + '</a></tspan>'
|
||
|
|
if (d.outlet) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em"><outlet> : ' + d.outlet + '</tspan>'
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">/' + d.path + '</tspan>'
|
||
|
|
if (d.component) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em"><a href="./components/' + d.component + '.html">' + d.component + '</a></tspan>'
|
||
|
|
}
|
||
|
|
if (d.loadChildren) {
|
||
|
|
var moduleName = foundLazyModuleWithPath(d.loadChildren);
|
||
|
|
_name += '<tspan x="0" dy="1.4em"><a href="./modules/' + moduleName + '.html">' + moduleName + '</a></tspan>'
|
||
|
|
}
|
||
|
|
if (d.canActivate) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">✓ canActivate</tspan>'
|
||
|
|
}
|
||
|
|
if (d.canDeactivate) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">× canDeactivate</tspan>'
|
||
|
|
}
|
||
|
|
if (d.canActivateChild) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">✓ canActivateChild</tspan>'
|
||
|
|
}
|
||
|
|
if (d.canLoad) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">→ canLoad</tspan>'
|
||
|
|
}
|
||
|
|
if (d.redirectTo) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">→ ' + d.redirectTo + '</tspan>'
|
||
|
|
}
|
||
|
|
if (d.pathMatch) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em">> ' + d.pathMatch + '</tspan>'
|
||
|
|
}
|
||
|
|
if (d.outlet) {
|
||
|
|
_name += '<tspan x="0" dy="1.4em"><outlet> : ' + d.outlet + '</tspan>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _name;
|
||
|
|
})
|
||
|
|
.call(getBB);
|
||
|
|
|
||
|
|
//
|
||
|
|
// Node lazy loaded ?
|
||
|
|
//
|
||
|
|
infos_group.append('svg:text')
|
||
|
|
.attr("y", function(d) {
|
||
|
|
return 45;
|
||
|
|
})
|
||
|
|
.attr("x", function(d) {
|
||
|
|
return -18;
|
||
|
|
})
|
||
|
|
.attr('font-family', 'Ionicons')
|
||
|
|
.attr('class', function(d) {
|
||
|
|
return "icon";
|
||
|
|
})
|
||
|
|
.attr('font-size', function(d) {
|
||
|
|
return '15px'
|
||
|
|
}).text(function(d) {
|
||
|
|
var _text = '';
|
||
|
|
if (d.loadChildren) {
|
||
|
|
_text = '\uf4c1';
|
||
|
|
}
|
||
|
|
if (d.guarded) {
|
||
|
|
_text = '\uf1b0';
|
||
|
|
}
|
||
|
|
return _text;
|
||
|
|
});
|
||
|
|
|
||
|
|
//Node text background
|
||
|
|
infos_group.insert("rect","text")
|
||
|
|
.attr("width", function(d){
|
||
|
|
return d.bbox.width;
|
||
|
|
})
|
||
|
|
.attr("height", function(d){
|
||
|
|
return d.bbox.height;
|
||
|
|
})
|
||
|
|
.attr("y", function(d) {
|
||
|
|
return 15;
|
||
|
|
})
|
||
|
|
.style("fill", "white")
|
||
|
|
.style("fill-opacity", 0.75);
|
||
|
|
|
||
|
|
nodes = engine.nodes(tree);
|
||
|
|
|
||
|
|
function node_extents(n) {
|
||
|
|
return [n.x - n.x_size / 2, n.y,
|
||
|
|
n.x + n.x_size / 2, n.y + n.y_size
|
||
|
|
];
|
||
|
|
}
|
||
|
|
var root_extents = node_extents(nodes[0]);
|
||
|
|
var xmin = root_extents[0],
|
||
|
|
ymin = root_extents[1],
|
||
|
|
xmax = root_extents[2],
|
||
|
|
ymax = root_extents[3],
|
||
|
|
area_sum = (xmax - xmin) * (ymax - ymin),
|
||
|
|
x_size_min = nodes[0].x_size,
|
||
|
|
y_size_min = nodes[0].y_size;
|
||
|
|
|
||
|
|
nodes.slice(1).forEach(function(n) {
|
||
|
|
var ne = node_extents(n);
|
||
|
|
xmin = Math.min(xmin, ne[0]);
|
||
|
|
ymin = Math.min(ymin, ne[1]);
|
||
|
|
xmax = Math.max(xmax, ne[2]);
|
||
|
|
ymax = Math.max(ymax, ne[3]);
|
||
|
|
area_sum += (ne[2] - ne[0]) * (ne[3] - ne[1]);
|
||
|
|
x_size_min = Math.min(x_size_min, n.x_size);
|
||
|
|
y_size_min = Math.min(y_size_min, n.y_size);
|
||
|
|
});
|
||
|
|
|
||
|
|
var area_ave = area_sum / nodes.length;
|
||
|
|
var scale = 80 / Math.sqrt(area_ave);
|
||
|
|
|
||
|
|
function svg_x(node_y) {
|
||
|
|
return (node_y - ymin);
|
||
|
|
}
|
||
|
|
|
||
|
|
function svg_y(node_x) {
|
||
|
|
return (node_x - xmin) * scale;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var nodebox_right_margin = Math.min(x_size_min * scale, 10);
|
||
|
|
var nodebox_vertical_margin = Math.min(y_size_min * scale, 3);
|
||
|
|
|
||
|
|
node.attr("transform", function(d) {
|
||
|
|
return "translate(" + svg_x(d.y) + "," + svg_y(d.x) + ")";
|
||
|
|
})
|
||
|
|
|
||
|
|
var diagonal = d3.svg.diagonal()
|
||
|
|
.projection(function(d) {
|
||
|
|
return [svg_x(d.y), svg_y(d.x)];
|
||
|
|
});
|
||
|
|
|
||
|
|
var links = engine.links(nodes);
|
||
|
|
var links = svg_p.selectAll(".link")
|
||
|
|
.data(links)
|
||
|
|
.enter().append("path")
|
||
|
|
.attr("class", "link")
|
||
|
|
.attr("d", diagonal);
|
||
|
|
|
||
|
|
var _svg = document.getElementById('main'),
|
||
|
|
main_g = _svg.childNodes[0]
|
||
|
|
|
||
|
|
_svg.removeChild(main_g);
|
||
|
|
_svg.appendChild(main_g);
|
||
|
|
|
||
|
|
svg.attr({
|
||
|
|
width: document.getElementById('main-group').getBBox()['width'] + 30,
|
||
|
|
height: document.getElementById('main-group').getBBox()['height'] + 50,
|
||
|
|
});
|
||
|
|
});
|