@rxap/pipes
Version:
Provides a set of Angular pipes for common data transformations, including currency formatting, string manipulation, and object property access. These pipes offer standalone functionality for easy integration into Angular templates. The package includes p
302 lines (271 loc) • 9.47 kB
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 || d.loadComponent) {
_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
});
});