* Load required Grunt tasks. These are installed based on the versions listed\r
* in `package.json` when you do `npm install` in this directory.\r
*/\r
- grunt.loadNpmTasks('grunt-browserify');\r
grunt.loadNpmTasks('grunt-contrib-clean');\r
grunt.loadNpmTasks('grunt-contrib-copy');\r
grunt.loadNpmTasks('grunt-contrib-jshint');\r
]\r
}\r
},\r
- browserify: {\r
- dist: {\r
- src: ['src/app/graph/index.js'],\r
- dest: 'src/assets/js/graphRenderer.js',\r
- options: {\r
- browserifyOptions: {\r
- standalone: 'DLUX'\r
- }\r
- }\r
- }\r
- },\r
\r
/**\r
* `grunt concat` concatenates multiple source files into a single file.\r
*/\r
grunt.registerTask( 'common', [\r
'clean', 'html2js', 'jshint', 'less:development',\r
- 'concat:build_css', 'browserify:dist', 'copy:build_app_assets', 'copy:build_vendor_assets',\r
+ 'concat:build_css', 'copy:build_app_assets', 'copy:build_vendor_assets',\r
'copy:build_appjs', 'copy:copy_template', 'copy:build_vendorimages', 'copy:build_vendorjs', 'copy:build_vendorcss', 'karmaconfig', 'index:build'\r
]);\r
\r
"angular-translate-loader-static-files": "2.2.0",
"vis": "2.0.0",
"sigma": "https://github.com/jacomyal/sigma.js/releases/download/v1.0.3/release-v1.0.3.zip",
- "ng-slider": "2.2.2",
- "pixi": "~2.2.5"
+ "ng-slider": "2.2.2"
},
"devDependencies": {
"angular": "~1.4.0",
\r
html: [ 'src/index.html'],\r
less: 'src/less/main.less',\r
- graph_path: 'src/app/graph',\r
- graph_entry_point: 'index.js',\r
templates: ['src/**/*.tpl.html']\r
},\r
\r
'vendor/sigma/plugins/sigma.parsers.gexf.min.js',\r
'vendor/sigma/plugins/sigma.layout.forceAtlas2.min.js',\r
'vendor/sigma/plugins/sigma.plugins.dragNodes.min.js',\r
- 'vendor/sigma/plugins/sigma.renderers.customShapes.min.js',\r
- 'vendor/pixi/bin/pixi.js'\r
+ 'vendor/sigma/plugins/sigma.renderers.customShapes.min.js'\r
],\r
css: [\r
'vendor/ng-grid/ng-grid.min.css',\r
"karma":"~0.12.0",
"grunt": "~0.4.5",
"grunt-cli": "~0.1.13",
- "grunt-browserify": "^3.4.0",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-coffee": "~0.7.0",
"karma-coverage": "~0.2.6",
"karma-phantomjs-launcher": "~0.1.4",
"angular-mocks": "~1.2.22",
- "jasmine": "~2.0.1",
- "ngraph.graph": "~0.0.8",
- "ngraph.forcelayout": "~0.0.16",
- "ngraph.fromjson": "^0.1.4",
- "ngraph.merge": "~0.0.1",
- "ngraph.physics.simulator": "~0.0.10",
- "transformatrix": "^1.1.1"
+ "jasmine": "~2.0.1"
},
"engines": {
"node": ">=0.8.0"
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
- Copyright (c) 2014 Inocybe Technologies, and others. All rights reserved.
-
- This program and the accompanying materials are made available under the
- terms of the Eclipse Public License v1.0 which accompanies this distribution,
- and is available at http://www.eclipse.org/legal/epl-v10.html
--->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
- <modelVersion>4.0.0</modelVersion>
- <parent>
- <groupId>org.opendaylight.dlux</groupId>
- <artifactId>dlux-parent</artifactId>
- <version>0.3.0-SNAPSHOT</version>
- <relativePath>../../</relativePath>
- </parent>
-
- <artifactId>dlux.graph.resources</artifactId>
- <name>${project.artifactId}</name>
- <description>Graph Module Resources</description>
- <version>${graph.resources.version}</version>
- <packaging>jar</packaging>
-
-</project>
+++ /dev/null
-// Math.sign is used a lot here and outdated brownser don't have it.
-if (typeof Math.sign !== 'function') {
- Math.sign = function(value) {
- return value ? value < 0 ? -1 : 1 : 0;
- };
-}
-
-module.exports = function(stage, graph) {
- // constant TODO: change to use settings
- var MAX_SCALE = 2.0;
- var MIN_SCALE = 0.1;
- //------//
-
- // pointer options
- var POINTER_DEFAULT = 'auto';
- var POINTER_DRAG = 'all-scroll';
-
- var event = require('events');
- var emitter = new event.EventEmitter();
- var mouseDown = false;
- var draggedNode = null;
-
- var camera = stage.camera;
- var oldPos = new PIXI.Point(0, 0);
-
- // Start dragging the node
- stage.interactionManager.onMouseDown = function(e) {
- mouseDown = true;
- oldPos.set(-1, -1);
-
- draggedNode = graph.getNodeAt(e.layerX, e.layerY);
-
- if (draggedNode) {
- emitter.emit('nodeDown', draggedNode);
- }
- };
-
- // If the node is dragged, update the position
- // otherwise emit a callable event
- stage.interactionManager.onMouseMove = function(e) {
- if (draggedNode) { // drag node
- setPointerStyle(POINTER_DRAG);
- var realPos = camera.transform.inverse().transformPoint(e.layerX, e.layerY);
- draggedNode.pos.x = realPos[0];
- draggedNode.pos.y = realPos[1];
- }
- else if (mouseDown) { // do a pan
- setPointerStyle(POINTER_DRAG);
- if (oldPos.x == -1 && oldPos.y == -1) {
- oldPos.set(e.layerX, e.layerY);
- }
-
- var pos = new PIXI.Point(0,0);
- var deltaX = e.layerX - oldPos.x;
- var deltaY = e.layerY - oldPos.y;
-
- pos.set(
- Math.sign(deltaX) * Math.abs(deltaX),
- Math.sign(deltaY) * Math.abs(deltaY)
- );
-
- oldPos.set(e.layerX, e.layerY);
- camera.transform.translate(pos.x, pos.y);
- }
- else {
- var node = graph.getNodeAt(e.layerX, e.layerY);
-
- if (node) {
- emitter.emit('nodeOver', node);
- return;
- }
-
- emitter.emit('mouseMove', e);
- }
- };
-
- // Stop dragging the node
- stage.interactionManager.onMouseUp = function(e) {
- mouseDown = false;
- setPointerStyle(POINTER_DEFAULT);
-
- if (draggedNode) {
- emitter.emit('nodeUp', draggedNode);
- draggedNode = null;
- }
- };
-
- // Release drag or pan if out of the canvas
- stage.interactionManager.onMouseOut = function(e) {
- mouseDown = false;
- draggedNode = null;
- setPointerStyle(POINTER_DEFAULT);
- };
-
- function setPointerStyle(style) {
- if (document.body.style.cursor != style) {
- document.body.style.cursor = style;
- }
- }
-
- function zoom(e) {
-
- // stop scrolling while zooming
- e.preventDefault();
-
- /* Each brownser on each platform
- * set the wheel distance a different value. That's why the arbitrary value
- */
- var factor = 0.10;
- var sign = Math.sign(e.detail || e.wheelDelta);
-
- var currentScale = camera.scaleFactor;
- var scale = currentScale + (sign * factor);
-
- if (scale > MAX_SCALE) {
- scale = MAX_SCALE;
- }
- else if (scale < MIN_SCALE) {
- scale = MIN_SCALE;
- }
- camera.scaleFactor = scale;
- }
-
- // Mouse wheel to Zoom
- document.getElementById(stage.containerId).addEventListener('mousewheel', zoom, false); // chrome, safari
- document.getElementById(stage.containerId).addEventListener('DOMMouseScroll', zoom, false); // firefox
-
- return emitter;
-};
+++ /dev/null
-module.exports = function() {
- var Graph = require('ngraph.graph');
- var GraphRenderer = require('./renderer.js');
- var topology = null;
-
- function _load(nodes, links) {
- nodes.forEach(function (node) {
- topology.addNode(node.id, {
- title:node.title,
- group:node.group,
- label:node.label,
- value:node.value
- });
- });
- links.forEach(function (link) {
- topology.addLink(link.from, link.to, {
- id: link.id,
- title: link.title
- });
- });
- }
-
- // public API
- return {
- start : function(id) {
- try {
- if (!topology) {
- throw new Error('Cannot create a graph, you need to load one first');
- }
-
- renderer = new GraphRenderer(id, topology);
- renderer.run();
- } catch(e) {
- console.error(e.name, e.message);
- }
- },
- refresh: function(nodes, links) {
- //tmp
- topology.clear();
- _load(nodes, links);
- renderer.refresh(topology);
- },
- loadGraph: function(nodes, links) {
- topology = new Graph();
- _load(nodes, links);
- }
- };
-};
+++ /dev/null
-var defaultConfig = {
- width: 800,
- height: 600,
- switch: {
- src : '../assets/images/Device_switch_3062_unknown_64.png',
- width: 64,
- height: 64
- },
- host: {
- src : '../assets/images/Device_pc_3045_default_64.png',
- width: 64,
- height: 64
- }
-};
-module.exports = function(id, graph, config) {
- var merge = require('ngraph.merge');
- var Matrix = require('transformatrix');
- var container = validateContainer(id);
-
- // merge current config with default
- config = merge(config, defaultConfig);
-
- var stage = new PIXI.Stage(0xFFFFFF, true);
-
- // use to keep a reference of the node
- // and not always search in the layout.
- var nodes = {}, links = {};
-
- var width = config.width;
- var height = config.height;
-
- var renderer = PIXI.autoDetectRenderer(width, height);
- stage['containerId'] = id;
- stage['camera'] = {
- transform :new Matrix(),
- scaleFactor: 1
- };
-
- container.appendChild(renderer.view);
-
- var emitter = require('./eventListener.js')(stage, graph);
- var switchTexture = new PIXI.Texture.fromImage(config.switch.src);
- var hostTexture = new PIXI.Texture.fromImage(config.host.src);
-
- // add a physic layout to place the node in the screen
- var layoutCreator = require('ngraph.forcelayout');
-
- var layout = layoutCreator(graph, {
- springLength: 100,
- springCoeff: 0.0008,
- dragCoeff: 0.001,
- gravity: -1.8,
- theta: 1
- });
-
- // link renderer
- var graphics = new PIXI.Graphics();
-
- graph.forEachNode(initializeNode);
- graph.forEachLink(initializeLink);
-
- // loop into the graph to find a node with his position.
- // certainly a better way to do it
- graph.getNodeAt = function(x, y) {
- var half = config.switch.width * 0.5 * stage.camera.scaleFactor;
- for (var key in nodes) {
- if (nodes.hasOwnProperty(key)) {
- var node = nodes[key];
- var pos = stage.camera.transform.transformPoint(node.pos.x, node.pos.y);
- var inside = pos[0] - half < x && x < pos[0] + half &&
- pos[1] - half < y && y < pos[1] + half;
- if (inside) {
- return nodes[key];
- }
- }
- }
- };
-
- function clearGraph() {
- stage.camera.transform.reset();
- stage.removeChildren();
- nodes = {};
- links = {};
- }
-
- function displayGraph() {
- // step the layout to make a good looking graph
- // remove after cause it's heavy for nothing
- for (var i = 0; i < 1000; ++i) {
- layout.step();
- }
- centerGraph();
- }
-
- // public API
- return {
- run : function() {
- displayGraph();
- requestAnimFrame(loop);
- },
- refresh: function(topology) {
- cancelAnimationFrame(loop);
- clearGraph();
- topology.forEachNode(initializeNode);
- topology.forEachLink(initializeLink);
- displayGraph();
- requestAnimFrame(loop);
- }
- };
-
- // add the node sprite to the stage
- // and add it to the ref array
- function initializeNode(node) {
- var nodeSprite = null;
-
- if (node.data.group === 'switch') {
- nodeSprite = new PIXI.Sprite(switchTexture);
- } else if (node.data.group === 'host') {
- nodeSprite = new PIXI.Sprite(hostTexture);
- }
-
- var textOffset = 10;
- var text = new PIXI.Text(node.data.label, {
- font : '11px Arial'
- });
-
- nodeSprite.anchor.set(0.5, 0.5);
-
- layout.setNodePosition(node.id, Math.random(), Math.random());
-
- // text is a child of the sprite, we don't need to apply a transform
- text.anchor.set(0.5, 0.5);
-
- text.position.y = config.switch.width * 0.5 + textOffset;
-
- nodes[node.id] = {
- sprite: nodeSprite,
- pos: layout.getNodePosition(node.id)
- };
-
- nodeSprite.addChild(text);
- stage.addChild(nodeSprite);
- }
-
- // set the link into the ref array
- function initializeLink(link) {
- links[link.id] = {
- from: layout.getNodePosition(link.fromId),
- to : layout.getNodePosition(link.toId)
- };
- stage.addChild(graphics);
- }
-
- // update node position
- function updateNode(node) {
- var transPos = stage.camera.transform.transformPoint(node.pos.x, node.pos.y);
- var scale = stage.camera.scaleFactor;
- node.sprite.position.set(transPos[0], transPos[1]);
- node.sprite.scale.set(scale, scale);
- }
-
- // draw the link
- function updateLink(link) {
- var transFrom = stage.camera.transform.transformPoint(link.from.x, link.from.y);
- var transTo = stage.camera.transform.transformPoint(link.to.x, link.to.y);
- graphics.lineStyle(1, 0x000000, 1);
- graphics.moveTo(transFrom[0], transFrom[1]);
- graphics.lineTo(transTo[0], transTo[1]);
- }
-
- // render loop
- function loop() {
- graphics.clear();
- var key;
-
- // update link
- for (key in links) {
- if (links.hasOwnProperty(key)) {
- updateLink(links[key]);
- }
- }
-
- // update positions
- for (key in nodes) {
- if (nodes.hasOwnProperty(key)) {
- updateNode(nodes[key]);
- }
- }
-
- // render everything
- renderer.render(stage);
-
- // loop
- requestAnimFrame(loop);
- }
-
- // Move the graph near the center.
- function centerGraph() {
- var rect = layout.getGraphRect();
- var size = [rect.x2 - rect.x1, rect.y2 - rect.y1];
- var moveX = Math.abs(config.width - size[0]) * 0.5 - rect.x1;
- var moveY = Math.abs(config.height - size[1]) * 0.5 - rect.y1;
- stage.camera.transform.translate(moveX, moveY);
- }
-
- // check if the given id exist
- function validateContainer(id) {
- var container = document.getElementById(id);
- if (!container) {
- throw new NotFoundException('No container found for the givent id ' + id);
- }
- return container;
- }
-
- // custom exception
- // TODO : Move to another file
- function NotFoundException(message) {
- this.message = message;
- this.name = 'NotFoundException';
- }
-
-};
<module>topology-resources</module>
<module>loader-resources</module>
<module>connection_manager-resources</module>
- <module>graph-resources</module>
<module>core-resources</module>
<module>common-topbar-resources</module>
</modules>
Code Review / dlux.git / commitdiff