├── .gitignore ├── .gitreview ├── .jshintrc ├── COPYRIGHT ├── LICENSE ├── Makefile ├── README.md ├── files.json ├── gruntfile.js ├── package.json ├── pom.xml └── src ├── bin ├── logo.svg ├── next-files.js ├── next-less.js ├── next-template.js ├── phantom-autotest.js ├── qunit-template.html └── yuidoc.json ├── dist ├── css │ ├── next-componentized.css │ ├── next-componentized.min.css │ ├── next.css │ └── next.min.css ├── fonts │ ├── cisco │ │ ├── CiscoSansExtraLight.otf │ │ ├── CiscoSansRegular.otf │ │ ├── ciscosansextralight-webfont.eot │ │ ├── ciscosansextralight-webfont.svg │ │ ├── ciscosansextralight-webfont.ttf │ │ ├── ciscosansextralight-webfont.woff │ │ ├── ciscosansregular-webfont.eot │ │ ├── ciscosansregular-webfont.svg │ │ ├── ciscosansregular-webfont.ttf │ │ └── ciscosansregular-webfont.woff │ ├── next-font.eot │ ├── next-font.svg │ ├── next-font.ttf │ └── next-font.woff └── js │ ├── next.js │ └── next.min.js ├── example └── topology │ ├── basic │ ├── autolayout.js │ ├── base.js │ ├── config.js │ ├── cool.js │ ├── customize.js │ ├── disable.js │ ├── highlight.js │ ├── icon.js │ ├── icons.js │ └── theme.js │ ├── demo.js │ ├── extend │ ├── abstractNode.js │ ├── link.js │ ├── node-colorful.js │ └── node.js │ ├── group │ └── base.js │ ├── index.html │ ├── layer │ ├── api.js │ └── define.js │ ├── layout │ └── force.js │ ├── lib │ ├── HighLightCode │ │ ├── beautify-html.js │ │ ├── beautify.js │ │ ├── prettify.css │ │ └── prettify.js │ └── world-50m.json │ ├── map │ ├── us.js │ └── world.js │ ├── model │ └── editNode.js │ ├── nodeset │ ├── aggregation.js │ ├── base.js │ ├── hierarchy.js │ └── temp.html │ ├── path │ ├── base.js │ ├── multiple.js │ ├── set-path-color.js │ └── traffic.js │ ├── scaling │ ├── lab-topo.json │ ├── test1.html │ ├── test2.html │ └── topo.json │ ├── scene │ └── extend.js │ ├── style.css │ └── tooltip │ ├── link.js │ └── node.js ├── js ├── core │ ├── Comparable.js │ ├── Iterable.js │ ├── Observable.js │ ├── Serializable.js │ ├── Validatable.js │ ├── base.js │ ├── class.js │ ├── data │ │ ├── Collection.js │ │ ├── Counter.js │ │ ├── Dictionary.js │ │ ├── ObservableCollection.js │ │ ├── ObservableDictionary.js │ │ ├── ObservableObject.js │ │ ├── Query.js │ │ └── SortedMap.js │ └── keyword.js ├── graphic │ ├── core │ │ ├── Component.js │ │ └── DragManager.js │ ├── data │ │ ├── Convex.js │ │ ├── DataProcessor.js │ │ ├── Edge.js │ │ ├── EdgeSet.js │ │ ├── EdgeSetCollection.js │ │ ├── EdgeSetCollections.js │ │ ├── EdgeSets.js │ │ ├── Edges.js │ │ ├── Force.js │ │ ├── Line.js │ │ ├── NeXtForce.js │ │ ├── ObservableGraph.js │ │ ├── QuadTree.js │ │ ├── UniqObservableCollection.js │ │ ├── Vertex.js │ │ ├── VertexSet.js │ │ ├── VertexSets.js │ │ ├── Vertices.js │ │ └── processor │ │ │ ├── Circle.js │ │ │ ├── Force.js │ │ │ ├── NeXtForce.js │ │ │ └── Quick.js │ ├── geometry │ │ ├── BezierCurve.js │ │ ├── Line.js │ │ ├── Math.js │ │ ├── Matrix.js │ │ ├── MatrixSupport.js │ │ └── Vector.js │ ├── svg │ │ ├── Arc.js │ │ ├── BezierCurves.js │ │ ├── Circle.js │ │ ├── Group.js │ │ ├── ICON.js │ │ ├── Icons.js │ │ ├── Image.js │ │ ├── Line.js │ │ ├── Path.js │ │ ├── Polygon.js │ │ ├── Rect.js │ │ ├── Stage.js │ │ ├── Text.js │ │ └── Triangle.js │ ├── topology │ │ ├── core │ │ │ ├── Categories.js │ │ │ ├── Config.js │ │ │ ├── Debugger.js │ │ │ ├── Event.js │ │ │ ├── Graph.js │ │ │ ├── StageMixin.js │ │ │ └── Topology.js │ │ ├── extension │ │ │ └── graphic │ │ │ │ ├── FillStage.js │ │ │ │ └── OptimizeLabel.js │ │ ├── group │ │ │ ├── CircleGroup.js │ │ │ ├── GroupItem.js │ │ │ ├── GroupsLayer.js │ │ │ ├── NodeSetPolygonGroup.js │ │ │ ├── PolygonGroup.js │ │ │ └── RectGroup.js │ │ ├── layer │ │ │ ├── AggregationLayer.js │ │ │ ├── HintLayer.js │ │ │ ├── Layer.js │ │ │ └── LayerMixin.js │ │ ├── layout │ │ │ ├── EnterpriseNetworkLayout.js │ │ │ ├── HierarchicalLayout.js │ │ │ ├── LayoutMixin.js │ │ │ ├── NeXtForceLayout.js │ │ │ ├── USMapLayout.js │ │ │ └── WorldMapLayout.js │ │ ├── link │ │ │ ├── AbstractLink.js │ │ │ ├── Link.js │ │ │ ├── LinkMixin.js │ │ │ ├── LinkSet.js │ │ │ ├── LinkSetLayer.js │ │ │ └── LinksLayer.js │ │ ├── node │ │ │ ├── AbstractNode.js │ │ │ ├── Node.js │ │ │ ├── NodeMixin.js │ │ │ ├── NodeSet.js │ │ │ ├── NodeSetLayer.js │ │ │ ├── NodeWatcher.js │ │ │ └── NodesLayer.js │ │ ├── path │ │ │ ├── BasePath.js │ │ │ ├── NodeSetPath.js │ │ │ ├── Path.js │ │ │ └── PathLayer.js │ │ ├── plugin │ │ │ ├── 3D.js │ │ │ ├── Nav.js │ │ │ ├── Route.js │ │ │ ├── Search.js │ │ │ ├── Thumbnail.js │ │ │ ├── TopologySearchInput.js │ │ │ └── TopologyTraffic.js │ │ ├── scene │ │ │ ├── DefaultScene.js │ │ │ ├── Scene.js │ │ │ ├── SceneMixin.js │ │ │ ├── SelectionNodeScene.js │ │ │ ├── SelectionScene.js │ │ │ └── ZoomBySelection.js │ │ └── tooltip │ │ │ ├── LinkSetTooltip.js │ │ │ ├── LinkTooltip.js │ │ │ ├── NodeTooltip.js │ │ │ ├── TooltipManager.js │ │ │ ├── TooltipMixin.js │ │ │ ├── TooltipPolicy.js │ │ │ └── TopologyTooltip.js │ ├── ui │ │ ├── Popover.js │ │ ├── Popup.js │ │ ├── PopupContainer.js │ │ └── ZIndexManager.js │ └── util │ │ ├── Animation.js │ │ ├── query.js │ │ └── util.js └── web │ ├── Aspect.js │ ├── Debugger.js │ ├── Env.js │ ├── HttpClient.js │ ├── Util.js │ ├── dom │ ├── Document.js │ ├── Element.js │ ├── Fragment.js │ ├── Node.js │ └── Text.js │ └── ui │ ├── AbstractComponent.js │ ├── Application.js │ ├── Behavior.js │ ├── Component.js │ ├── DraggableBehavior.js │ └── SimpleComponent.js ├── libs ├── GraphGenerator.js ├── bootstrap │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.svg │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ ├── js │ │ ├── bootstrap.js │ │ └── bootstrap.min.js │ └── less │ │ ├── alerts.less │ │ ├── badges.less │ │ ├── bootstrap.less │ │ ├── breadcrumbs.less │ │ ├── button-groups.less │ │ ├── buttons.less │ │ ├── carousel.less │ │ ├── close.less │ │ ├── code.less │ │ ├── component-animations.less │ │ ├── dropdowns.less │ │ ├── forms.less │ │ ├── glyphicons.less │ │ ├── grid.less │ │ ├── input-groups.less │ │ ├── jumbotron.less │ │ ├── labels.less │ │ ├── list-group.less │ │ ├── media.less │ │ ├── mixins.less │ │ ├── modals.less │ │ ├── navbar.less │ │ ├── navs.less │ │ ├── normalize.less │ │ ├── pager.less │ │ ├── pagination.less │ │ ├── panels.less │ │ ├── popovers.less │ │ ├── print.less │ │ ├── progress-bars.less │ │ ├── responsive-utilities.less │ │ ├── scaffolding.less │ │ ├── tables.less │ │ ├── theme.less │ │ ├── thumbnails.less │ │ ├── tooltip.less │ │ ├── type.less │ │ ├── utilities.less │ │ ├── variables.less │ │ └── wells.less └── jquery │ └── jquery-1.10.2.min.js ├── style ├── fonts │ ├── cisco │ │ ├── CiscoSansExtraLight.otf │ │ ├── CiscoSansRegular.otf │ │ ├── ciscosansextralight-webfont.eot │ │ ├── ciscosansextralight-webfont.svg │ │ ├── ciscosansextralight-webfont.ttf │ │ ├── ciscosansextralight-webfont.woff │ │ ├── ciscosansregular-webfont.eot │ │ ├── ciscosansregular-webfont.svg │ │ ├── ciscosansregular-webfont.ttf │ │ └── ciscosansregular-webfont.woff │ ├── next-font.eot │ ├── next-font.svg │ ├── next-font.ttf │ └── next-font.woff ├── topology │ ├── common.less │ ├── common │ │ ├── font.less │ │ ├── topology-3d.less │ │ ├── topology.css │ │ ├── topology.less │ │ ├── topology_loading.css │ │ ├── topology_loading.less │ │ ├── topology_nav.less │ │ ├── topology_thumbnail.less │ │ └── topology_tooltip.less │ ├── next-topology-componentized.less │ ├── next-topology.less │ └── themes │ │ ├── black-white │ │ └── variables.css │ │ ├── blue │ │ ├── blue.less │ │ └── variables.less │ │ ├── dark │ │ ├── dark.less │ │ └── variables.less │ │ ├── green │ │ ├── green.less │ │ └── variables.less │ │ ├── slate │ │ ├── slate.less │ │ └── variables.less │ │ └── yellow │ │ ├── variables.less │ │ └── yellow.less └── web │ ├── common.less │ └── themes │ ├── blue │ ├── next-componentlized.less │ ├── next.less │ ├── overrides.less │ └── variables.less │ ├── css │ ├── next.css │ └── variables.css │ ├── dark │ ├── next-componentlized.less │ ├── next.less │ ├── overrides.less │ └── variables.less │ ├── green │ ├── next-componentlized.less │ ├── next.less │ ├── overrides.less │ └── variables.less │ ├── slate │ ├── next-componentlized.less │ ├── next.less │ ├── overrides.less │ └── variables.less │ └── yellow │ ├── next-componentlized.less │ ├── next.less │ ├── overrides.less │ └── variables.less └── test ├── core ├── Comparable.js ├── Iterable.js ├── Observable.js ├── Serializable.js ├── base.js ├── binding.js ├── class.js ├── data │ ├── Collection.js │ ├── Counter.js │ ├── Dictionary.js │ ├── ObservableCollection.js │ ├── ObservableDictionary.js │ ├── Query.js │ └── SortedMap.js └── index.html ├── graphic └── index.html ├── lib ├── qunit-1.12.0.css ├── qunit-1.12.0.js └── qunit-reporter-junit.js └── web ├── ComponentBase.js ├── UIComponent.js ├── element.js ├── index.html └── test.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Maven 2 | target/ 3 | 4 | # OpenDaylight 5 | yang-gen-sal/ 6 | yang-gen-config/ 7 | 8 | .idea/ 9 | etc/ 10 | node_modules/ 11 | 12 | .DS_Store 13 | sandbox/ 14 | node/ 15 | !src/js/graphic/topology/node/ 16 | 17 | -------------------------------------------------------------------------------- /.gitreview: -------------------------------------------------------------------------------- 1 | [gerrit] 2 | host=git.opendaylight.org 3 | port=29418 4 | project=next.git 5 | defaultbranch=master 6 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | // Settings 3 | "passfail": false, // Stop on first error. 4 | "maxerr": 100, // Maximum error before stopping. 5 | "eqnull": true, 6 | 7 | "loopfunc": true, // Allow functions to be defined within loops. 8 | "expr": true 9 | 10 | } -------------------------------------------------------------------------------- /COPYRIGHT: -------------------------------------------------------------------------------- 1 | NeXt @ ODL -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NeXt UI Framework 2 | 3 | NeXt UI toolkit is an HTML5/JavaScript based toolkit for network web application. It provides a network centric topology UI component featuring high performance and rich functionality. NeXt can display large complex network topologies, aggregated network nodes, traffic/path/tunnel/group visualizations and it includes different layout algorithms, map overlays, and preset user friendly interactions. NeXt can work together with DLUX to build ODL apps. 4 | 5 | Homepage : https://wiki.opendaylight.org/view/NeXt:Main 6 | 7 | UI Toolkit Quicklook : https://www.youtube.com/watch?v=gBsUDu8aucs 8 | 9 | Current version : 0.9 10 | 11 | ## Key Features 12 | 13 | * Large complex network topologies 14 | * Aggregated network nodes 15 | * Traffic/path/tunnel/group visualizations 16 | * Different layout algorithms 17 | * Map overlays 18 | * Preset user-friendly interactions 19 | 20 | ## File structure 21 | ``` 22 | next/ 23 | |- css/ 24 | | |- next.css // next stylesheet file 25 | | |- next.min.css // minimized stylesheet file 26 | | |- next-componentized.css 27 | | |- next-componentized.min.css 28 | |- js 29 | | |- next.js // next js library 30 | | |- next.min.js // minimized js library 31 | |- fonts/ // font resources foler 32 | | doc/ //APi manual 33 | |- README.md 34 | ``` 35 | 36 | ## Quick start 37 | 38 | 1) Create a HTML file. 39 | 40 | ```HTML 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 51 | 52 | 53 | ``` 54 | 55 | 2) Edit next code 56 | 57 | ```javascript 58 | // Initialize a topology component 59 | var topo = new nx.graphic.Topology({ 60 | }); 61 | 62 | // Create new app 63 | var app = new nx.ui.Application(); 64 | 65 | // Attach topo to app 66 | topo.attach(app); 67 | ``` 68 | 69 | 3) Open html file with Chrome 70 | 71 | ### Tutorials and Sample code 72 | 73 | Tutorials : https://wiki.opendaylight.org/view/NeXt:Main 74 | 75 | Opendaylight sample code intergrate DLUX with NeXt: https://github.com/CiscoDevNet/opendaylight-sample-apps 76 | 77 | BIERMAN : https://github.com/zverevalexei/bierman-gui 78 | 79 | ## Build instructions from source code 80 | 81 | Git : https://git.opendaylight.org/gerrit/p/next 82 | 83 | ### Environment requirements 84 | 85 | [Node](https://nodejs.org/en/) 86 | 87 | ### build process 88 | * npm install 89 | * grunt 90 | 91 | ## Who's Using NeXt 92 | 93 | * Cisco 94 | * Verizon 95 | * AT&T (DIRECTV) 96 | 97 | Are you NeXt? 98 | 99 | ## Bugs 100 | 101 | [Open Bugs](https://bugs.opendaylight.org/buglist.cgi?bug_status=__open__&product=next) 102 | 103 | ## Team 104 | 105 | * Aikepaer Abuduweili (aaikepae@cisco.com) 106 | * Kang Li (lkang2@cisco.com) 107 | * Alexei Zverev (alzverev@cisco.com) 108 | * Xu Yangyang(yangyxu@cisco.com) 109 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "NeXt", 3 | "title": "NeXt", 4 | "version": "0.10.0", 5 | "description": "NeXt UI Toolkit.", 6 | "readme": "README.md", 7 | "homepage": "https://wiki.opendaylight.org/view/NeXt:Main", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://git.opendaylight.org/gerrit/p/next" 11 | }, 12 | "keywords": [ 13 | "JavaScript", 14 | "MVVM", 15 | "View Engine", 16 | "Topology" 17 | ], 18 | "bugs": { 19 | "url": "https://bugs.opendaylight.org/buglist.cgi?bug_status=__open__&product=next" 20 | }, 21 | "license": "EPL-1.0", 22 | "devDependencies": { 23 | "phantomjs-prebuilt": "~2.1.1", 24 | "grunt-cli": "^0.1.13", 25 | "grunt": "^0.4.5", 26 | "grunt-contrib": "~0.9.0", 27 | "grunt-contrib-clean": "~0.5.0", 28 | "grunt-contrib-coffee": "~0.10.0", 29 | "grunt-contrib-compass": "~0.7.0", 30 | "grunt-contrib-compress": "~0.6.1", 31 | "grunt-contrib-connect": "~0.6.0", 32 | "grunt-contrib-copy": "~0.5.0", 33 | "grunt-contrib-csslint": "~0.2.0", 34 | "grunt-contrib-cssmin": "~0.7.0", 35 | "grunt-contrib-handlebars": "~0.6.0", 36 | "grunt-contrib-htmlmin": "~0.2.0", 37 | "grunt-contrib-imagemin": "~0.4.0", 38 | "grunt-contrib-jade": "~0.10.0", 39 | "grunt-contrib-jasmine": "~0.6.0", 40 | "grunt-contrib-jst": "~0.5.1", 41 | "grunt-contrib-less": "~0.9.0", 42 | "grunt-contrib-nodeunit": "~0.3.0", 43 | "grunt-contrib-qunit": "~0.4.0", 44 | "grunt-contrib-requirejs": "~0.4.1", 45 | "grunt-contrib-sass": "~0.7.0", 46 | "grunt-contrib-stylus": "~0.12.0", 47 | "grunt-contrib-uglify": "~0.3.2", 48 | "grunt-contrib-watch": "~0.5.3", 49 | "grunt-contrib-yuidoc": "~0.5.0", 50 | "grunt-contrib-concat": "~0.3.0", 51 | "grunt-contrib-jshint": "~0.8.0", 52 | "grunt-exec": "^0.4.6", 53 | "grunt-header": "^1.0.0" 54 | } 55 | } -------------------------------------------------------------------------------- /pom.xml: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | org.opendaylight.odlparent 8 | odlparent 9 | 1.7.0-SNAPSHOT 10 | 11 | 12 | 13 | 4.0.0 14 | 15 | org.opendaylight.next 16 | next 17 | 0.10.0-SNAPSHOT 18 | pom 19 | 20 | 21 | 22 | 23 | com.github.eirslett 24 | frontend-maven-plugin 25 | 0.0.28 26 | 27 | 28 | npm 29 | 30 | install-node-and-npm 31 | npm 32 | 33 | generate-resources 34 | 35 | 36 | grunt 37 | 38 | grunt 39 | 40 | 41 | 42 | 43 | v0.12.10 44 | 3.7.1 45 | 46 | 47 | 48 | org.codehaus.mojo 49 | build-helper-maven-plugin 50 | 1.10 51 | 52 | 53 | attach-artifacts 54 | package 55 | 56 | attach-artifact 57 | 58 | 59 | 60 | 61 | target/next.zip 62 | zip 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | scm:git:ssh://git.opendaylight.org:29418/next.git 74 | scm:git:ssh://git.opendaylight.org:29418/next.git 75 | HEAD 76 | https://wiki.opendaylight.org/view/NeXt:Main 77 | 78 | 79 | -------------------------------------------------------------------------------- /src/bin/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/bin/next-files.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | var getopt = require("node-getopt").create([ 3 | ["r", "root=ROOT", "root directory"], 4 | ["h", "help", "display this help"] 5 | ]).setHelp( 6 | "Usage: node next-project.js -r ROOT_PATH MODULE_PATH" + 7 | "\n" + 8 | "[[OPTIONS]]\n" 9 | ).bindHelp(); 10 | 11 | var opt = getopt.parseSystem(); 12 | 13 | var root = opt.options.root || process.cwd(); 14 | 15 | var list = function (path) { 16 | 17 | }; 18 | -------------------------------------------------------------------------------- /src/bin/next-less.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | var path = require("path"); 3 | var less = require("less"); 4 | var getopt = require("node-getopt").create([ 5 | ["h", "help", "display this help"] 6 | ]).setHelp( 7 | "Usage: node next-less.js source.less\n" + 8 | "\n" + 9 | "[[OPTIONS]]\n" 10 | ).bindHelp(); 11 | 12 | var opt = getopt.parseSystem(); 13 | var source = opt.argv[0].toString(); 14 | 15 | less.render(fs.readFileSync(source).toString(), { 16 | filename: path.resolve(source) 17 | }, function (e, output) { 18 | console.log(output.css); 19 | }); 20 | -------------------------------------------------------------------------------- /src/bin/next-template.js: -------------------------------------------------------------------------------- 1 | var fs = require("fs"); 2 | var getopt = require("node-getopt").create([ 3 | ["c", "codes=CODES", "codes to be referenced"], 4 | ["t", "tests=TESTS", "tests to be referenced"], 5 | ["h", "help", "display this help"] 6 | ]).setHelp( 7 | "Usage: node next-template.js template.html [-c codes] [-t tests] \n" + 8 | "\n" + 9 | "[[OPTIONS]]\n" 10 | ).bindHelp(); 11 | 12 | var opt = getopt.parseSystem(); 13 | 14 | var template = fs.readFileSync(opt.argv[0]).toString(); 15 | var codes = opt.options.codes.split(/\s+/).map(function (v) { 16 | return v && (''); 17 | }); 18 | var tests = opt.options.tests.split(/\s+/).map(function (v) { 19 | return v && (''); 20 | }); 21 | 22 | template = template.replace(/\{CODES\}/, codes.join("")); 23 | template = template.replace(/\{TESTS\}/, tests.join("")); 24 | 25 | process.stdout.write(template); 26 | -------------------------------------------------------------------------------- /src/bin/qunit-template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Auto Test 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 | {CODES} 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | {TESTS} 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/bin/yuidoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Next graph", 3 | "description": "Next API docs", 4 | "version": "0.10.0", 5 | "url": "index.html", 6 | "options": { 7 | "linkNatives": "true", 8 | "attributesEmit": "true", 9 | "selleck": "true", 10 | "paths": "*/js", 11 | "outdir": "../dest/docs" 12 | } 13 | } -------------------------------------------------------------------------------- /src/dist/fonts/cisco/CiscoSansExtraLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/CiscoSansExtraLight.otf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/CiscoSansRegular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/CiscoSansRegular.otf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansextralight-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/ciscosansextralight-webfont.eot -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansextralight-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/ciscosansextralight-webfont.ttf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansextralight-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/ciscosansextralight-webfont.woff -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansregular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/ciscosansregular-webfont.eot -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansregular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/ciscosansregular-webfont.ttf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansregular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/cisco/ciscosansregular-webfont.woff -------------------------------------------------------------------------------- /src/dist/fonts/next-font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/next-font.eot -------------------------------------------------------------------------------- /src/dist/fonts/next-font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/next-font.ttf -------------------------------------------------------------------------------- /src/dist/fonts/next-font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/dist/fonts/next-font.woff -------------------------------------------------------------------------------- /src/example/topology/basic/autolayout.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | nx.define('Base.AutoLayout', nx.ui.Component, { 4 | view: { 5 | content: { 6 | name: 'topo', 7 | type: 'nx.graphic.Topology', 8 | props: { 9 | adaptive: true, 10 | nodeConfig: { 11 | label:'model.id' 12 | }, 13 | dataProcessor: 'force', 14 | identityKey: 'id', 15 | showIcon: false, 16 | enableSmartLabel: false, 17 | enableGradualScaling: false, 18 | supportMultipleLink: false 19 | }, 20 | events: { 21 | 'ready': '{#_ready}' 22 | } 23 | } 24 | }, 25 | methods: { 26 | _ready: function (sender, event) { 27 | start = new Date(); 28 | 29 | var g = new GraphGenerator(); 30 | g.generate(100); 31 | 32 | var topologyData = {nodes: g.nodes, links: g.links}; 33 | start = new Date(); 34 | console.log(new Date() - start); 35 | sender.setData(topologyData); 36 | 37 | console.log(new Date() - start); 38 | } 39 | } 40 | }); 41 | 42 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/basic/base.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 3, "target": 0}, 19 | {"source": 3, "target": 0}, 20 | {"source": 3, "target": 0}, 21 | {"source": 0, "target": 4}, 22 | {"source": 0, "target": 4}, 23 | {"source": 0, "target": 3} 24 | ] 25 | }; 26 | 27 | nx.define('Base.Base', nx.ui.Component, { 28 | view: { 29 | content: { 30 | name: 'topo', 31 | type: 'nx.graphic.Topology', 32 | props: { 33 | width: 800, 34 | height: 800, 35 | nodeConfig: { 36 | label: 'model.id', 37 | labelAngle:function(vertex){ 38 | if(vertex.id() == 2){ 39 | return 0 40 | }else{ 41 | return 270 42 | } 43 | } 44 | }, 45 | linkConfig:{ 46 | linkType:'curve' 47 | }, 48 | showIcon: true, 49 | enableSmartLabel: false, 50 | data: topologyData 51 | } 52 | } 53 | } 54 | }); 55 | 56 | })(nx, nx.global); 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/example/topology/basic/config.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 3, "target": 0}, 19 | {"source": 3, "target": 0}, 20 | {"source": 3, "target": 0}, 21 | {"source": 0, "target": 4}, 22 | {"source": 0, "target": 4}, 23 | {"source": 0, "target": 3} 24 | ] 25 | }; 26 | 27 | nx.define('Base.NodeConfig', nx.ui.Component, { 28 | properties: { 29 | icon: { 30 | value: function () { 31 | return function (vertex) { 32 | var id = vertex.get("id"); 33 | if (id > 2) { 34 | return 'router' 35 | } else { 36 | return 'camera' 37 | } 38 | } 39 | } 40 | } 41 | }, 42 | view: { 43 | content: { 44 | name: 'topo', 45 | type: 'nx.graphic.Topology', 46 | props: { 47 | adaptive: true, 48 | nodeConfig: { 49 | label: function (vertex) { 50 | return vertex.get("name") + "abu"; 51 | }, 52 | iconType: '{#icon}' 53 | }, 54 | nodeSetConfig: { 55 | iconType: 'model.deice_type' 56 | }, 57 | showIcon: true, 58 | data: topologyData 59 | } 60 | } 61 | } 62 | }); 63 | 64 | })(nx, nx.global); 65 | 66 | 67 | -------------------------------------------------------------------------------- /src/example/topology/basic/cool.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var model = [ 4 | { 5 | text: 'Enterprise Network Layout', 6 | url: '../../test/enterpriselayout.html' 7 | }, 8 | { 9 | text: 'Hierarchical Layout', 10 | url: '../../test/hierarchicalLayout.html' 11 | }, 12 | { 13 | text: 'Search Topology', 14 | url: '../../test/highight.html' 15 | }, 16 | { 17 | text: 'Topology editor', 18 | url: '../../test/add&remove.html' 19 | }, 20 | { 21 | text: 'Insert data and re-layout', 22 | url: '../../test/insertData.html' 23 | } 24 | 25 | 26 | ] 27 | 28 | nx.define("Base.Cool", nx.ui.Component, { 29 | events: [], 30 | properties: { 31 | }, 32 | view: { 33 | content: { 34 | props: { 35 | style: { 36 | 'padding': '20' 37 | } 38 | }, 39 | content: { 40 | tag: 'ul', 41 | props: { 42 | 'class': 'list-group', 43 | items: model, 44 | template: { 45 | tag: 'li', 46 | props: { 47 | 'class': 'list-group-item', 48 | }, 49 | content: { 50 | tag: 'a', 51 | props: { 52 | 53 | 'href': '{url}', 54 | 'target': '_black' 55 | }, 56 | content: '{text}' 57 | } 58 | } 59 | } 60 | } 61 | } 62 | }, 63 | methods: { 64 | 65 | } 66 | }); 67 | 68 | 69 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/basic/customize.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 3, "target": 0}, 19 | {"source": 3, "target": 0}, 20 | {"source": 3, "target": 0}, 21 | {"source": 3, "target": 0}, 22 | {"source": 3, "target": 0}, 23 | {"source": 3, "target": 0}, 24 | {"source": 0, "target": 4}, 25 | {"source": 0, "target": 4}, 26 | {"source": 0, "target": 3} 27 | ] 28 | }; 29 | var colorTable = ['#C3A5E4', '#75C6EF', '#CBDA5C', '#ACAEB1 ', '#2CC86F']; 30 | 31 | nx.define('Base.Customize', nx.ui.Component, { 32 | view: { 33 | content: { 34 | name: 'topo', 35 | type: 'nx.graphic.Topology', 36 | props: { 37 | adaptive: true, 38 | identityKey: 'id', 39 | showIcon: false, 40 | nodeConfig: { 41 | label: 'model.id', 42 | color: function (node, model) { 43 | return colorTable[Math.floor(Math.random() * 5)]; 44 | }, 45 | scale: function () { 46 | return Math.random() * 10 + 1; 47 | } 48 | }, 49 | linkConfig: { 50 | color: function (link, model) { 51 | return colorTable[Math.floor(Math.random() * 5)]; 52 | }, 53 | width: function () { 54 | return Math.random() * 10 + 1; 55 | }, 56 | linkType: 'curve', 57 | gutter: function () { 58 | return Math.random() * 2; 59 | } 60 | }, 61 | data: topologyData 62 | } 63 | } 64 | } 65 | }) 66 | 67 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/basic/disable.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 3, "target": 0}, 19 | {"source": 3, "target": 0}, 20 | {"source": 3, "target": 0}, 21 | {"source": 3, "target": 0}, 22 | {"source": 3, "target": 0}, 23 | {"source": 3, "target": 0}, 24 | {"source": 0, "target": 4}, 25 | {"source": 0, "target": 4}, 26 | {"source": 0, "target": 3} 27 | ] 28 | }; 29 | var colorTable = ['#C3A5E4', '#75C6EF', '#CBDA5C', '#ACAEB1 ', '#2CC86F']; 30 | 31 | nx.define('Base.Disable', nx.ui.Component, { 32 | view: { 33 | content: { 34 | type: 'nx.graphic.Topology', 35 | props: { 36 | width: 800, 37 | height: 600, 38 | nodeConfig: { 39 | label: 'model.id' 40 | }, 41 | showIcon: true, 42 | data: topologyData 43 | }, 44 | events: { 45 | 'topologyGenerated': '{#_setDisable}' 46 | } 47 | } 48 | }, 49 | methods: { 50 | _setDisable: function (sender, event) { 51 | var links = sender.getLayer('links').links(); 52 | var link = links[1]; 53 | link.enable(false); 54 | link.update(); 55 | 56 | 57 | sender.getNode(0).enable(false); 58 | } 59 | } 60 | }); 61 | 62 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/basic/highlight.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var g = new GraphGenerator(); 4 | g.generate(50); 5 | 6 | var topologyData = {nodes: g.nodes, links: g.links}; 7 | 8 | nx.define('Base.Highlight', nx.ui.Component, { 9 | view: { 10 | content: { 11 | name: 'topo', 12 | type: 'nx.graphic.Topology', 13 | props: { 14 | adaptive: true, 15 | dataProcessor: 'force', 16 | nodeConfig: { 17 | label: 'model.id' 18 | }, 19 | showIcon: false, 20 | data: topologyData 21 | }, 22 | events: { 23 | topologyGenerated: '{#_main}' 24 | } 25 | } 26 | }, 27 | methods: { 28 | _main: function (sender, event) { 29 | var topo = sender; 30 | 31 | 32 | //fade out all layer 33 | nx.each(topo.layers(), function (layer) { 34 | layer.fadeOut(true); 35 | }, this); 36 | 37 | 38 | //highlight related node 39 | topo.highlightRelatedNode(topo.getNode(1)); 40 | 41 | //highlight single node or nodes 42 | var nodeLayer = topo.getLayer('nodes'); 43 | var nodeLayerHighlightElements = nodeLayer.highlightedElements(); 44 | nodeLayerHighlightElements.add(topo.getNode(30)); 45 | nodeLayerHighlightElements.add(topo.getNode(20)); 46 | 47 | //highlight links 48 | var linksLayer = topo.getLayer('links'); 49 | var linksLayerHighlightElements = linksLayer.highlightedElements(); 50 | linksLayerHighlightElements.addRange(nx.util.values(topo.getNode(40).links())); 51 | 52 | 53 | } 54 | } 55 | }); 56 | 57 | })(nx, nx.global); 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/example/topology/basic/icon.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 0, "target": 1}, 14 | {"source": 0, "target": 1}, 15 | {"source": 0, "target": 1}, 16 | {"source": 0, "target": 1}, 17 | {"source": 0, "target": 1}, 18 | {"source": 0, "target": 1}, 19 | {"source": 0, "target": 1}, 20 | {"source": 0, "target": 1}, 21 | {"source": 0, "target": 1}, 22 | {"source": 1, "target": 2}, 23 | {"source": 1, "target": 3}, 24 | {"source": 4, "target": 1}, 25 | {"source": 2, "target": 3}, 26 | {"source": 2, "target": 0}, 27 | {"source": 3, "target": 0}, 28 | {"source": 3, "target": 0}, 29 | {"source": 3, "target": 0}, 30 | {"source": 3, "target": 0}, 31 | {"source": 3, "target": 0}, 32 | {"source": 3, "target": 0}, 33 | {"source": 0, "target": 4}, 34 | {"source": 0, "target": 4}, 35 | {"source": 0, "target": 3} 36 | ] 37 | }; 38 | 39 | // register icon globally 40 | nx.graphic.Icons.registerIcon("icon1", "http://10.75.161.96/trunk/next/css/futurama/img/gif/progress.gif", 32, 32); 41 | 42 | 43 | nx.define('Base.Icon', nx.ui.Component, { 44 | properties: { 45 | currentNode: { 46 | 47 | }, 48 | iconType: { 49 | get: function () { 50 | return Math.round(Math.random()) ? 'icon1' : 'icon2'; 51 | } 52 | } 53 | }, 54 | view: { 55 | content: { 56 | name: 'topo', 57 | type: 'nx.graphic.Topology', 58 | props: { 59 | adaptive: true, 60 | nodeConfig: { 61 | label: 'model.id', 62 | iconType: '{#iconType}' 63 | }, 64 | showIcon: true, 65 | data: topologyData 66 | }, 67 | events: { 68 | 'ready': '{#_ready}' 69 | } 70 | } 71 | }, 72 | methods: { 73 | _ready: function (sender, event) { 74 | var topo = this.view('topo'); 75 | //register icon to instance 76 | topo.registerIcon("icon2", "https://www.google.com/images/srpr/logo11w.png", 80, 32); 77 | } 78 | } 79 | }); 80 | 81 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/basic/theme.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 3, "target": 0}, 19 | {"source": 3, "target": 0}, 20 | {"source": 3, "target": 0}, 21 | {"source": 0, "target": 4}, 22 | {"source": 0, "target": 4}, 23 | {"source": 0, "target": 3} 24 | ] 25 | }; 26 | 27 | nx.define('Base.Theme', nx.ui.Component, { 28 | view: { 29 | content: { 30 | name: 'topo', 31 | type: 'nx.graphic.Topology', 32 | props: { 33 | adaptive: true, 34 | nodeConfig: { 35 | label: 'model.id' 36 | }, 37 | linkConfig: { 38 | linkType: 'curve' 39 | }, 40 | theme: 'yellow', 41 | showIcon: true, 42 | data: topologyData 43 | } 44 | } 45 | } 46 | }); 47 | 48 | })(nx, nx.global); 49 | 50 | 51 | -------------------------------------------------------------------------------- /src/example/topology/extend/abstractNode.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | var topologyData = { 3 | nodes: [ 4 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 5 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 6 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 7 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 8 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 9 | ], 10 | links: [ 11 | {"source": 0, "target": 1}, 12 | {"source": 1, "target": 2}, 13 | {"source": 1, "target": 3}, 14 | {"source": 4, "target": 1}, 15 | {"source": 2, "target": 3}, 16 | {"source": 2, "target": 0}, 17 | {"source": 0, "target": 4}, 18 | {"source": 0, "target": 3} 19 | ] 20 | }; 21 | 22 | 23 | nx.define('MyNode', nx.graphic.Topology.AbstractNode, { 24 | view: { 25 | type: 'nx.graphic.Group', 26 | props: { 27 | translate: '{#position}' 28 | }, 29 | content: [ 30 | { 31 | type: 'nx.graphic.Triangle', 32 | props: { 33 | width: 30, 34 | height: 30, 35 | translateX: -15, 36 | translateY: -15, 37 | fill: '#FFEB00' 38 | } 39 | }, 40 | { 41 | type: 'nx.graphic.Image', 42 | props: { 43 | width: 16, 44 | height: 16, 45 | x: 15, 46 | y: -5, 47 | src: 'https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/OK.png', 48 | visible: '{#selected}' 49 | } 50 | }, 51 | { 52 | type: 'nx.graphic.Text', 53 | props: { 54 | y: 30, 55 | text:'{name}' 56 | } 57 | } 58 | ] 59 | } 60 | }); 61 | 62 | 63 | nx.define('Extend.AbstractNode', nx.ui.Component, { 64 | view: { 65 | content: { 66 | name: 'topo', 67 | type: 'nx.graphic.Topology', 68 | props: { 69 | nodeInstanceClass: 'MyNode', 70 | data: topologyData 71 | } 72 | } 73 | } 74 | }); 75 | 76 | 77 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/extend/link.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | var Vector = nx.geometry.Vector; 3 | var Line = nx.geometry.Line; 4 | 5 | var topologyData = { 6 | "nodes": [ 7 | {"id": 0, "x": 269.2, "y": -29.599999999999994, "name": "12K-1"}, 8 | {"id": 1, "x": 513.2, "y": 298.4, "name": "12K-2"}, 9 | {"id": 2, "x": 364, "y": 472, "name": "Of-9k-03"}, 10 | {"id": 3, "x": 655.2, "y": -31.200000000000017, "name": "Of-9k-02"}, 11 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 12 | ], 13 | "links": [ 14 | {"source": 0, "target": 1}, 15 | {"source": 0, "target": 1}, 16 | {"source": 1, "target": 2}, 17 | {"source": 1, "target": 3}, 18 | {"source": 4, "target": 1}, 19 | {"source": 2, "target": 3}, 20 | {"source": 2, "target": 0}, 21 | {"source": 3, "target": 0}, 22 | {"source": 0, "target": 4}, 23 | {"source": 0, "target": 4}, 24 | {"source": 0, "target": 3} 25 | ]}; 26 | var colorTable = ['#C3A5E4', '#75C6EF', '#CBDA5C', '#ACAEB1 ', '#2CC86F']; 27 | 28 | nx.define('Extend.Link', nx.ui.Component, { 29 | properties: { 30 | drawLink: { 31 | value: function () { 32 | return function () { 33 | var line = this.line(); 34 | var n, point; 35 | var path = []; 36 | // if (link.reverse()) { 37 | // line = line.negate(); 38 | // } 39 | n = line.normal().multiply(3); 40 | point = line.center().add(n); 41 | path.push('M', line.start.x, line.start.y); 42 | path.push('C', line.start.x - 100, line.start.y + 10, line.end.x + 150, line.end.y + 30, line.end.x, line.end.y); 43 | path.push('T', line.end.x, line.end.y, line.end.x + 150, line.end.y + 30, line.start.x, line.start.y); 44 | path.push('Z'); 45 | 46 | 47 | // var line = this.line(); 48 | // var path = []; 49 | // path.push('M', line.start.x, line.start.y); 50 | // path.push('L', line.end.x, line.start.y); 51 | // path.push('L', line.end.x, line.end.y); 52 | 53 | return path.join(' '); 54 | 55 | } 56 | } 57 | } 58 | }, 59 | view: { 60 | content: { 61 | name: 'topo', 62 | type: 'nx.graphic.Topology', 63 | props: { 64 | width: 800, 65 | height: 800, 66 | nodeConfig: { 67 | label: 'model.id' 68 | }, 69 | showIcon: true, 70 | linkConfig: { 71 | drawMethod: '{#drawLink}' 72 | }, 73 | data: topologyData 74 | } 75 | } 76 | } 77 | }); 78 | 79 | 80 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

Topology

37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/example/topology/layout/force.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | nx.define('Layout.Force', nx.ui.Component, { 4 | view: { 5 | content: { 6 | name: 'topo', 7 | type: 'nx.graphic.Topology', 8 | props: { 9 | adaptive: true, 10 | nodeConfig: { 11 | label: 'model.id' 12 | }, 13 | dataProcessor: 'quick', 14 | showIcon: false, 15 | enableSmartLabel: false, 16 | enableGradualScaling: false, 17 | layoutType: 'force' 18 | }, 19 | events: { 20 | 'ready': '{#_ready}' 21 | } 22 | } 23 | }, 24 | methods: { 25 | _ready: function (sender, event) { 26 | start = new Date(); 27 | 28 | var g = new GraphGenerator(); 29 | g.generate(100); 30 | 31 | var topologyData = {nodes: g.nodes, links: g.links}; 32 | start = new Date(); 33 | console.log(new Date() - start); 34 | sender.setData(topologyData); 35 | 36 | console.log(new Date() - start); 37 | } 38 | } 39 | }); 40 | 41 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/lib/HighLightCode/prettify.css: -------------------------------------------------------------------------------- 1 | /* Pretty printing styles. Used with prettify.js. */ 2 | /* Vim sunburst theme by David Leibovic */ 3 | 4 | pre .str, code .str { color: #65B042; } /* string - green */ 5 | pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */ 6 | pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */ 7 | pre .typ, code .typ { color: #89bdff; } /* type - light blue */ 8 | pre .lit, code .lit { color: #3387CC; } /* literal - blue */ 9 | pre .pun, code .pun { color: #fff; } /* punctuation - white */ 10 | pre .pln, code .pln { color: #fff; } /* plaintext - white */ 11 | pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */ 12 | pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */ 13 | pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */ 14 | pre .dec, code .dec { color: #3387CC; } /* decimal - blue */ 15 | 16 | pre.prettyprint, code.prettyprint { 17 | background-color: #000; 18 | line-height: 18px !important; 19 | margin: 0px; 20 | padding: 6px; 21 | white-space: pre-wrap; 22 | } 23 | 24 | 25 | /* Specify class=linenums on a pre to get line numbering */ 26 | ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */ 27 | li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none } 28 | /* Alternate shading for lines */ 29 | li.L1,li.L3,li.L5,li.L7,li.L9 { } 30 | 31 | @media print { 32 | pre .str, code .str { color: #060; } 33 | pre .kwd, code .kwd { color: #006; font-weight: bold; } 34 | pre .com, code .com { color: #600; font-style: italic; } 35 | pre .typ, code .typ { color: #404; font-weight: bold; } 36 | pre .lit, code .lit { color: #044; } 37 | pre .pun, code .pun { color: #440; } 38 | pre .pln, code .pln { color: #000; } 39 | pre .tag, code .tag { color: #006; font-weight: bold; } 40 | pre .atn, code .atn { color: #404; } 41 | pre .atv, code .atv { color: #060; } 42 | } 43 | -------------------------------------------------------------------------------- /src/example/topology/nodeset/base.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 0, "target": 4}, 19 | {"source": 0, "target": 3}, 20 | {"source": 0, "target": 3}, 21 | {"source": 0, "target": 3}, 22 | {"source": 0, "target": 3}, 23 | {"source": 0, "target": 3}, 24 | {"source": 0, "target": 3}, 25 | {"source": 0, "target": 3}, 26 | {"source": 0, "target": 3}, 27 | {"source": 0, "target": 3}, 28 | {"source": 0, "target": 3}, 29 | {"source": 0, "target": 3} 30 | ], 31 | nodeSet: [ 32 | {id: 5, type: 'nodeSet', nodes: [2, 3], root: '2', "x": 660, "y": 190, "name": "Node set 1", iconType: 'router'}, 33 | {id: 6, type: 'nodeSet', nodes: [1, 5], root: '1', "x": 410, "y": 190, "name": "Node set 2", iconType: 'groupS'}, 34 | {id: 7, type: 'nodeSet', nodes: [6, 0], root: '0', "x": 410, "y": 280, "name": "Node set 3", iconType: 'groupM'}, 35 | {id: 8, type: 'nodeSet', nodes: [7, 4], root: '4', "x": 410, "y": 280, "name": "Node set 4", iconType: 'groupL'} 36 | ] 37 | }; 38 | 39 | 40 | nx.define('NodeSet.Base', nx.ui.Component, { 41 | view: { 42 | content: { 43 | name: 'topo', 44 | type: 'nx.graphic.Topology', 45 | props: { 46 | adaptive: true, 47 | identityKey: 'id', 48 | nodeConfig: { 49 | label: 'model.name', 50 | iconType: 'model.iconType' 51 | }, 52 | nodeSetConfig: { 53 | label: 'model.id', 54 | iconType: 'model.iconType' 55 | }, 56 | showIcon: true, 57 | data: topologyData 58 | } 59 | } 60 | } 61 | }); 62 | 63 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/path/base.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1, id: 0}, 13 | {"source": 0, "target": 1, id: 1}, 14 | {"source": 1, "target": 0, id: 2}, 15 | {"source": 1, "target": 2, id: 3}, 16 | {"source": 1, "target": 3, id: 4}, 17 | {"source": 4, "target": 1, id: 5}, 18 | {"source": 4, "target": 1, id: 6}, 19 | {"source": 2, "target": 3, id: 7}, 20 | {"source": 2, "target": 3, id: 8}, 21 | {"source": 2, "target": 0, id: 9}, 22 | {"source": 0, "target": 4, id: 10}, 23 | {"source": 0, "target": 4, id: 11}, 24 | {"source": 0, "target": 3, id: 12}, 25 | {"source": 0, "target": 1, id: 13}, 26 | ] 27 | }; 28 | var colorTable = ['#C3A5E4', '#75C6EF', '#CBDA5C', '#ACAEB1 ', '#2CC86F']; 29 | 30 | nx.define('Path.Base', nx.ui.Component, { 31 | view: { 32 | content: { 33 | name: 'topo', 34 | type: 'nx.graphic.Topology', 35 | props: { 36 | width: 800, 37 | height: 800, 38 | nodeConfig: { 39 | label: 'model.id' 40 | }, 41 | showIcon: true, 42 | data: topologyData 43 | }, 44 | events: { 45 | 'topologyGenerated': '{#_path}' 46 | } 47 | } 48 | }, 49 | methods: { 50 | _path: function (sender, events) { 51 | var pathLayer = sender.getLayer("paths"); 52 | 53 | 54 | var links1 = [sender.getLink(2)]; 55 | 56 | var path1 = new nx.graphic.Topology.Path({ 57 | links: links1, 58 | arrow: 'end' 59 | }); 60 | 61 | pathLayer.addPath(path1); 62 | } 63 | } 64 | }); 65 | 66 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/path/multiple.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1, id: 0}, 13 | {"source": 0, "target": 1, id: 1}, 14 | {"source": 1, "target": 0, id: 2}, 15 | {"source": 1, "target": 2, id: 3}, 16 | {"source": 1, "target": 3, id: 4}, 17 | {"source": 4, "target": 1, id: 5}, 18 | {"source": 4, "target": 1, id: 6}, 19 | {"source": 2, "target": 3, id: 7}, 20 | {"source": 2, "target": 3, id: 8}, 21 | {"source": 2, "target": 0, id: 9}, 22 | {"source": 0, "target": 4, id: 10}, 23 | {"source": 0, "target": 4, id: 11}, 24 | {"source": 0, "target": 3, id: 12}, 25 | {"source": 0, "target": 1, id: 13}, 26 | ] 27 | }; 28 | var colorTable = ['#C3A5E4', '#75C6EF', '#CBDA5C', '#ACAEB1 ', '#2CC86F']; 29 | 30 | nx.define('Path.Multiple', nx.ui.Component, { 31 | view: { 32 | content: { 33 | name: 'topo', 34 | type: 'nx.graphic.Topology', 35 | props: { 36 | width: 800, 37 | height: 800, 38 | nodeConfig: { 39 | label: 'model.id' 40 | }, 41 | showIcon: true, 42 | data: topologyData 43 | }, 44 | events: { 45 | 'topologyGenerated': '{#_path}' 46 | } 47 | } 48 | }, 49 | methods: { 50 | _path: function (sender, events) { 51 | var pathLayer = sender.getLayer("paths"); 52 | 53 | 54 | var links1 = [topo.getLink(0), topo.getLink(3), topo.getLink(7)]; 55 | 56 | var path1 = new nx.graphic.Topology.Path({ 57 | links: links1, 58 | arrow: 'cap' 59 | }); 60 | 61 | 62 | pathLayer.addPath(path1); 63 | 64 | 65 | 66 | 67 | var links2 = [topo.getLink(9), topo.getLink(10), topo.getLink(6)]; 68 | 69 | var path2 = new nx.graphic.Topology.Path({ 70 | links: links2, 71 | arrow: 'end' 72 | }); 73 | pathLayer.addPath(path2); 74 | } 75 | } 76 | }); 77 | 78 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/path/set-path-color.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1, id: 0}, 13 | {"source": 0, "target": 1, id: 1}, 14 | {"source": 1, "target": 0, id: 2}, 15 | {"source": 1, "target": 2, id: 3}, 16 | {"source": 1, "target": 3, id: 4}, 17 | {"source": 4, "target": 1, id: 5}, 18 | {"source": 4, "target": 1, id: 6}, 19 | {"source": 2, "target": 3, id: 7}, 20 | {"source": 2, "target": 3, id: 8}, 21 | {"source": 2, "target": 0, id: 9}, 22 | {"source": 0, "target": 4, id: 10}, 23 | {"source": 0, "target": 4, id: 11}, 24 | {"source": 0, "target": 3, id: 12}, 25 | {"source": 0, "target": 1, id: 13} 26 | ] 27 | }; 28 | 29 | nx.define('Path.SetColor', nx.ui.Component, { 30 | view: { 31 | content: [ 32 | { 33 | 34 | content: [ 35 | { 36 | tag: 'input', 37 | name: 'pathColor', 38 | props: { 39 | 'class': 'form-control', 40 | 'style': 'width: 200px', 41 | 'placeholder': 'Enter color', 42 | 'value': '{#pathColor}' 43 | } 44 | }, 45 | { 46 | tag: 'button', 47 | content: 'Set color', 48 | events: { 49 | 'click': '{#_setColor}' 50 | } 51 | } 52 | ] 53 | }, 54 | { 55 | content: { 56 | name: 'topo', 57 | type: 'nx.graphic.Topology', 58 | props: { 59 | width: 800, 60 | height: 800, 61 | nodeConfig: { 62 | label: 'model.id' 63 | }, 64 | showIcon: true, 65 | data: topologyData 66 | }, 67 | events: { 68 | 'topologyGenerated': '{#_path}' 69 | } 70 | } 71 | } 72 | ] 73 | }, 74 | properties: { 75 | pathColor: '', 76 | pathObj: null 77 | }, 78 | methods: { 79 | _path: function (sender, events) { 80 | var pathLayer = sender.getLayer("paths"); 81 | 82 | 83 | var links1 = [sender.getLink(2)]; 84 | 85 | var path1 = new nx.graphic.Topology.Path({ 86 | links: links1, 87 | arrow: 'end', 88 | color: '#b2e47f' // this sets color to the path (option 1) 89 | }); 90 | 91 | this.pathColor(path1.pathColor()); 92 | 93 | this.pathObj(path1); 94 | 95 | pathLayer.addPath(path1); 96 | }, 97 | _setColor: function(){ 98 | this.pathObj().pathColor(this.pathColor()); 99 | } 100 | } 101 | }); 102 | 103 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/path/traffic.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1, id: 0}, 13 | {"source": 0, "target": 1, id: 1}, 14 | {"source": 1, "target": 0, id: 2}, 15 | {"source": 1, "target": 2, id: 3}, 16 | {"source": 1, "target": 3, id: 4}, 17 | {"source": 4, "target": 1, id: 5}, 18 | {"source": 4, "target": 1, id: 6}, 19 | {"source": 2, "target": 3, id: 7}, 20 | {"source": 2, "target": 3, id: 8}, 21 | {"source": 2, "target": 0, id: 9}, 22 | {"source": 0, "target": 4, id: 10}, 23 | {"source": 0, "target": 4, id: 11}, 24 | {"source": 0, "target": 3, id: 12}, 25 | {"source": 0, "target": 1, id: 13}, 26 | ] 27 | }; 28 | var colorTable = ['#C3A5E4', '#75C6EF', '#CBDA5C', '#ACAEB1 ', '#2CC86F']; 29 | 30 | nx.define('Path.Traffic', nx.ui.Component, { 31 | view: { 32 | content: { 33 | name: 'topo', 34 | type: 'nx.graphic.Topology', 35 | props: { 36 | width: 800, 37 | height: 800, 38 | nodeConfig: { 39 | label: 'model.id' 40 | }, 41 | showIcon: true, 42 | data: topologyData 43 | }, 44 | events: { 45 | 'topologyGenerated': '{#_path}' 46 | } 47 | } 48 | }, 49 | methods: { 50 | _path: function (sender, events) { 51 | var pathLayer = sender.getLayer("paths"); 52 | 53 | 54 | var links1 = [topo.getLink(8)]; 55 | 56 | var path1 = new nx.graphic.Topology.Path({ 57 | pathPadding: [20, '50%'], 58 | pathWidth: 10, 59 | links: links1, 60 | arrow: 'end' 61 | }); 62 | 63 | var path2 = new nx.graphic.Topology.Path({ 64 | pathPadding: [20, '50%'], 65 | pathWidth: 10, 66 | links: links1, 67 | reverse: true, 68 | arrow: 'end' 69 | }); 70 | 71 | 72 | pathLayer.addPath(path1); 73 | pathLayer.addPath(path2); 74 | } 75 | } 76 | }); 77 | 78 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/example/topology/scaling/test1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/example/topology/scaling/test2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 21 | 22 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /src/example/topology/scene/extend.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 3, "target": 0}, 19 | {"source": 3, "target": 0}, 20 | {"source": 3, "target": 0}, 21 | {"source": 0, "target": 4}, 22 | {"source": 0, "target": 4}, 23 | {"source": 0, "target": 3} 24 | ] 25 | }; 26 | 27 | 28 | nx.define('MyScene', nx.graphic.Topology.DefaultScene, { 29 | 30 | methods: { 31 | clickNode: function (sender, node) { 32 | alert(node.id()); 33 | }, 34 | enterNode: function (sender, node) { 35 | this.inherited(sender, node); 36 | console.log(node.getLinks()); 37 | }, 38 | enterLink: function (sender, link) { 39 | this.inherited(sender, link); 40 | link.color('#f00'); 41 | }, 42 | leaveLink: function (sender, link) { 43 | this.inherited(sender, link); 44 | link.color(null); 45 | } 46 | } 47 | 48 | }); 49 | 50 | 51 | nx.define('Scene.Extend', nx.ui.Component, { 52 | view: { 53 | content: { 54 | name: 'topo', 55 | type: 'nx.graphic.Topology', 56 | props: { 57 | width: 800, 58 | height: 800, 59 | nodeConfig: { 60 | label: 'model.id' 61 | }, 62 | linkConfig: { 63 | linkType: 'curve' 64 | }, 65 | showIcon: true, 66 | data: topologyData 67 | }, 68 | events: { 69 | 'topologyGenerated': '{#_main}' 70 | } 71 | } 72 | }, 73 | methods: { 74 | _main: function (sender, event) { 75 | var topo = sender; 76 | topo.registerScene("myscene", "MyScene"); 77 | topo.activateScene('myscene'); 78 | } 79 | } 80 | }); 81 | 82 | })(nx, nx.global); 83 | 84 | 85 | -------------------------------------------------------------------------------- /src/example/topology/style.css: -------------------------------------------------------------------------------- 1 | 2 | .itemsList { 3 | height: 100%; 4 | overflow: auto; 5 | } 6 | .row { 7 | position: relative; 8 | height: 100%; 9 | } 10 | .prev {} .prev { 11 | height: 100%; 12 | } 13 | .demoContainer, 14 | .codeContainer { 15 | height: 100%; 16 | } 17 | .codeContainer > pre, 18 | .demoContainer > div { 19 | min-height: 100%; 20 | } 21 | .codeContainer { 22 | display: none; 23 | } 24 | .iconlist li { 25 | list-style: none; 26 | border-radius: 4px; 27 | border: solid 1px #ccc; 28 | padding: 10px; 29 | display: inline-block; 30 | margin: 10px; 31 | width: 190px; 32 | height: 140px; 33 | float: left; 34 | } 35 | .iconlist li label { 36 | width: 170px; 37 | font-size: 18px; 38 | color: #333; 39 | border-bottom: dotted 1px #ccc; 40 | } 41 | .iconlist li p { 42 | text-align: center; 43 | } 44 | .iconlist li svg { 45 | margin-top: 12px; 46 | display: inline-block; 47 | } 48 | .demoContainer { 49 | border: solid 1px #DDD; 50 | border-top-width: 0px; 51 | } -------------------------------------------------------------------------------- /src/example/topology/tooltip/link.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var topologyData = { 4 | nodes: [ 5 | {"id": 0, "x": 410, "y": 100, "name": "12K-1"}, 6 | {"id": 1, "x": 410, "y": 280, "name": "12K-2"}, 7 | {"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"}, 8 | {"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"}, 9 | {"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"} 10 | ], 11 | links: [ 12 | {"source": 0, "target": 1}, 13 | {"source": 1, "target": 2}, 14 | {"source": 1, "target": 3}, 15 | {"source": 4, "target": 1}, 16 | {"source": 2, "target": 3}, 17 | {"source": 2, "target": 0}, 18 | {"source": 3, "target": 0}, 19 | {"source": 3, "target": 0}, 20 | {"source": 3, "target": 0}, 21 | {"source": 0, "target": 4}, 22 | {"source": 0, "target": 4}, 23 | {"source": 0, "target": 3} 24 | ] 25 | }; 26 | 27 | 28 | var mainModel = { 29 | username: 'root' 30 | }; 31 | 32 | 33 | nx.define('MyLinkTooltip', nx.ui.Component, { 34 | properties: { 35 | link: {}, 36 | topology: {} 37 | }, 38 | view: { 39 | content: [ 40 | { 41 | tag: 'p', 42 | content: [ 43 | { 44 | tag: 'label', 45 | content: 'Source' 46 | }, 47 | { 48 | tag: 'span', 49 | content: '{#link.sourceNodeID}' 50 | }, 51 | { 52 | tag: 'label', 53 | content: 'Target' 54 | }, 55 | { 56 | tag: 'span', 57 | content: '{#link.targetNodeID}' 58 | } 59 | ] 60 | }, 61 | { 62 | tag: 'p', 63 | content: '{#topology.width}' 64 | } 65 | ] 66 | } 67 | }); 68 | 69 | nx.define('Tooltip.Link', nx.ui.Component, { 70 | view: { 71 | content: { 72 | name: 'topo', 73 | type: 'nx.graphic.Topology', 74 | props: { 75 | adaptive: true, 76 | nodeConfig: { 77 | label: 'model.id' 78 | }, 79 | linkConfig: { 80 | linkType: 'curve' 81 | }, 82 | tooltipManagerConfig: { 83 | linkTooltipContentClass: 'MyLinkTooltip' 84 | }, 85 | showIcon: true, 86 | data: topologyData 87 | } 88 | } 89 | }, 90 | methods: { 91 | attach: function (args) { 92 | this.inherited(args); 93 | this.model(mainModel); 94 | } 95 | } 96 | }); 97 | 98 | })(nx, nx.global); 99 | 100 | 101 | -------------------------------------------------------------------------------- /src/js/core/Comparable.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | /** 4 | * @class Comparable 5 | * @namespace nx 6 | */ 7 | var Comparable = nx.define('nx.Comparable', { 8 | methods: { 9 | /** 10 | * Compare with the source. 11 | * @method compare 12 | * @param source 13 | * @returns {Number} 14 | */ 15 | compare: function (source) { 16 | if (this === source) { 17 | return 0; 18 | } 19 | else if (this > source) { 20 | return 1; 21 | } 22 | else if (this < source) { 23 | return -1; 24 | } 25 | 26 | return 1; 27 | }, 28 | __compare__: function (source) { 29 | return this.compare(source); 30 | } 31 | } 32 | }); 33 | })(nx); -------------------------------------------------------------------------------- /src/js/core/Iterable.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | /** 4 | * @class Iterable 5 | * @namespace nx 6 | */ 7 | var Iterable = nx.define('nx.Iterable', { 8 | statics: { 9 | /** 10 | * Get the iteration function from an iterable object. 11 | * @method getIterator 12 | * @static 13 | * @param iter {Object|Array|nx.Iterable} 14 | * @returns {Function} 15 | */ 16 | getIterator: function (iter) { 17 | if (nx.is(iter, Iterable)) { 18 | return function (callback, context) { 19 | iter.each(callback, context); 20 | }; 21 | } 22 | else { 23 | return function (callback, context) { 24 | nx.each(iter, callback, context); 25 | }; 26 | } 27 | }, 28 | /** 29 | * Convert the iterable object to an array. 30 | * @method toArray 31 | * @static 32 | * @param iter {Object|Array|nx.Iterable} 33 | * @returns {Array} 34 | */ 35 | toArray: function (iter) { 36 | if (nx.is(iter, Iterable)) { 37 | return iter.toArray(); 38 | } 39 | else if (nx.is(iter, 'Array')) { 40 | return iter.slice(0); 41 | } 42 | else { 43 | var result = []; 44 | nx.each(iter, function (item) { 45 | result.push(item); 46 | }); 47 | 48 | return result; 49 | } 50 | } 51 | }, 52 | properties: { 53 | /** 54 | * @property count {Number} 55 | */ 56 | count: { 57 | get: function () { 58 | return this.toArray().length; 59 | } 60 | } 61 | }, 62 | methods: { 63 | /** 64 | * @method each 65 | * @param callback 66 | * @param context 67 | */ 68 | each: function (callback, context) { 69 | throw new Error('Not Implemented.'); 70 | }, 71 | /** 72 | * @method toArray 73 | * @returns {Array} 74 | */ 75 | toArray: function () { 76 | var result = []; 77 | this.each(function (item) { 78 | result.push(item); 79 | }); 80 | 81 | return result; 82 | }, 83 | __each__: function (callback, context) { 84 | return this.each(callback, context); 85 | } 86 | } 87 | }); 88 | })(nx); -------------------------------------------------------------------------------- /src/js/core/Serializable.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | /** 3 | * @class Serializable 4 | * @namespace nx 5 | */ 6 | var Serializable = nx.define('nx.Serializable', { 7 | methods: { 8 | /** 9 | * @method serialize 10 | * @returns {any} 11 | */ 12 | serialize: function () { 13 | var result = {}; 14 | nx.each(this.__properties__, function (name) { 15 | var prop = this[name]; 16 | var value = prop.call(this); 17 | 18 | if (prop.getMeta('serializable') !== false) { 19 | if (nx.is(value, Serializable)) { 20 | result[name] = value.serialize(); 21 | } 22 | else { 23 | result[name] = value; 24 | } 25 | } 26 | }, this); 27 | 28 | return result; 29 | } 30 | } 31 | }); 32 | })(nx); -------------------------------------------------------------------------------- /src/js/core/Validatable.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | nx.define('nx.Validatable', { 3 | events:['error'], 4 | methods: { 5 | getError: function () { 6 | 7 | }, 8 | setError: function () { 9 | 10 | }, 11 | validate: function () { 12 | 13 | } 14 | } 15 | }); 16 | })(nx); -------------------------------------------------------------------------------- /src/js/core/data/ObservableObject.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | /** 4 | * @class ObservableObject 5 | * @namespace nx.data 6 | * @extends nx.Observable 7 | */ 8 | nx.define('nx.data.ObservableObject', nx.Observable, { 9 | methods: { 10 | init: function (data) { 11 | this.inherited(); 12 | this._data = data || {}; 13 | }, 14 | /** 15 | * Dispose current object. 16 | * @method dispose 17 | */ 18 | dispose: function () { 19 | this.inherited(); 20 | this._data = null; 21 | }, 22 | /** 23 | * Check whether current object has specified property. 24 | * @method has 25 | * @param name {String} 26 | * @returns {Boolean} 27 | */ 28 | has: function (name) { 29 | var member = this[name]; 30 | return (member && member.__type__ == 'property') || (name in this._data); 31 | }, 32 | /** 33 | * Get specified property value. 34 | * @method get 35 | * @param name {String} 36 | * @returns {*} 37 | */ 38 | get: function (name) { 39 | var member = this[name]; 40 | if (member === undefined) { 41 | return this._data[name]; 42 | } 43 | else if (member.__type__ == 'property') { 44 | return member.call(this); 45 | } 46 | }, 47 | /** 48 | * Set specified property value. 49 | * @method set 50 | * @param name {String} 51 | * @param value {*} 52 | */ 53 | set: function (name, value) { 54 | var member = this[name]; 55 | if (member === undefined) { 56 | if (this._data[name] !== value) { 57 | this._data[name] = value; 58 | this.notify(name); 59 | return true; 60 | } 61 | } 62 | else if (member.__type__ == 'property') { 63 | return member.call(this, value); 64 | } 65 | }, 66 | /** 67 | * Get all properties. 68 | * @method gets 69 | * @returns {Object} 70 | */ 71 | gets: function () { 72 | var result = nx.clone(this._data); 73 | nx.each(this.__properties__, function (name) { 74 | result[name] = this.get(name); 75 | }, this); 76 | 77 | return result; 78 | } 79 | } 80 | }); 81 | })(nx); -------------------------------------------------------------------------------- /src/js/graphic/data/Convex.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * Convex algorithm 4 | * @class nx.data.Convex 5 | * @static 6 | */ 7 | nx.define('nx.data.Convex', { 8 | static: true, 9 | methods: { 10 | multiply: function (p1, p2, p0) { 11 | return((p1.x - p0.x) * (p2.y - p0.y) - (p2.x - p0.x) * (p1.y - p0.y)); 12 | }, 13 | dis: function (p1, p2) { 14 | return(Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y))); 15 | }, 16 | /** 17 | * Process given node array 18 | * @method process 19 | * @param inPointArray {Array} Each item should be a object, which include x&y attribute 20 | * @returns {Array} 21 | */ 22 | process: function (inPointArray) { 23 | var stack = []; 24 | var count = inPointArray.length; 25 | var i, j, k = 0, top = 2; 26 | var tmp; 27 | 28 | //找到最下且偏左的那个点 29 | for (i = 1; i < count; i++) { 30 | if ((inPointArray[i].y < inPointArray[k].y) || ((inPointArray[i].y === inPointArray[k].y) && (inPointArray[i].x < inPointArray[k].x))) { 31 | k = i; 32 | } 33 | } 34 | //将这个点指定为PointSet[0] 35 | tmp = inPointArray[0]; 36 | inPointArray[0] = inPointArray[k]; 37 | inPointArray[k] = tmp; 38 | 39 | //按极角从小到大,距离偏短进行排序 40 | for (i = 1; i < count - 1; i++) { 41 | k = i; 42 | for (j = i + 1; j < count; j++) 43 | if ((this.multiply(inPointArray[j], inPointArray[k], inPointArray[0]) > 0) || 44 | ((this.multiply(inPointArray[j], inPointArray[k], inPointArray[0]) === 0) && 45 | (this.dis(inPointArray[0], inPointArray[j]) < this.dis(inPointArray[0], inPointArray[k])))) 46 | k = j;//k保存极角最小的那个点,或者相同距离原点最近 47 | tmp = inPointArray[i]; 48 | inPointArray[i] = inPointArray[k]; 49 | inPointArray[k] = tmp; 50 | } 51 | //第三个点先入栈 52 | stack[0] = inPointArray[0]; 53 | stack[1] = inPointArray[1]; 54 | stack[2] = inPointArray[2]; 55 | //判断与其余所有点的关系 56 | for (i = 3; i < count; i++) { 57 | //不满足向左转的关系,栈顶元素出栈 58 | while (top > 0 && this.multiply(inPointArray[i], stack[top], stack[top - 1]) >= 0) { 59 | top--; 60 | stack.pop(); 61 | } 62 | //当前点与栈内所有点满足向左关系,因此入栈. 63 | stack[++top] = inPointArray[i]; 64 | } 65 | return stack; 66 | } 67 | } 68 | }); 69 | 70 | 71 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/data/DataProcessor.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var DataProcessor = nx.define("nx.data.ObservableGraph.DataProcessor", { 4 | statics: { 5 | dataProcessor: { 6 | 'nextforce': new nx.data.ObservableGraph.NeXtForceProcessor(), 7 | 'force': new nx.data.ObservableGraph.ForceProcessor(), 8 | 'quick': new nx.data.ObservableGraph.QuickProcessor(), 9 | 'circle': new nx.data.ObservableGraph.CircleProcessor() 10 | }, 11 | /** 12 | * Register graph data processor, 13 | * @static 14 | * @method registerDataProcessor 15 | * @param {String} name data processor name 16 | * @param {Object} cls processor instance, instance should have a process method 17 | */ 18 | registerDataProcessor: function (name, cls) { 19 | GRAPH.dataProcessor[name] = cls; 20 | } 21 | }, 22 | properties: { 23 | /** 24 | * Set pre data processor,it could be 'force'/'quick' 25 | * @property dataProcessor 26 | * @default undefined 27 | */ 28 | dataProcessor: {}, 29 | width: { 30 | value: 100 31 | }, 32 | height: { 33 | value: 100 34 | } 35 | }, 36 | methods: { 37 | processData: function (data) { 38 | var identityKey = this._identityKey; 39 | var dataProcessor = this._dataProcessor; 40 | 41 | //TODO data validation 42 | 43 | if (dataProcessor) { 44 | var processor = DataProcessor.dataProcessor[dataProcessor]; 45 | if (processor) { 46 | return processor.process(data, identityKey, this); 47 | } else { 48 | return data; 49 | } 50 | } else { 51 | return data; 52 | } 53 | } 54 | } 55 | }); 56 | 57 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/data/EdgeSet.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * Edge set clas 5 | * @class nx.data.EdgeSet 6 | * @extend nx.data.Edge 7 | * @module nx.data 8 | */ 9 | 10 | nx.define('nx.data.EdgeSet', nx.data.Edge, { 11 | properties: { 12 | /** 13 | * All child edges 14 | * @property edges {Object} 15 | */ 16 | edges: { 17 | value: function () { 18 | return {}; 19 | } 20 | }, 21 | /** 22 | * Edge's type 23 | * @property type {String} 24 | * @default 'edgeSet' 25 | */ 26 | type: { 27 | value: 'edgeSet' 28 | }, 29 | activated: { 30 | get: function () { 31 | return this._activated !== undefined ? this._activated : true; 32 | }, 33 | set: function (value) { 34 | var graph = this.graph(); 35 | nx.each(this.edges(), function (edge,id) { 36 | if (value) { 37 | graph.removeEdge(id, false); 38 | } else { 39 | graph.generateEdge(edge); 40 | } 41 | }, this); 42 | this._activated = value; 43 | } 44 | } 45 | }, 46 | methods: { 47 | /** 48 | * Add child edge 49 | * @method addEdge 50 | * @param edge {nx.data.Edge} 51 | */ 52 | addEdge: function (edge) { 53 | var edges = this.edges(); 54 | edges[edge.id()] = edge; 55 | }, 56 | /** 57 | * Remove child edge 58 | * @method removeEdge 59 | * @param id {String} 60 | */ 61 | removeEdge: function (id) { 62 | var edges = this.edges(); 63 | delete edges[id]; 64 | } 65 | } 66 | 67 | }); 68 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/data/EdgeSetCollection.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * Edge set collection class 4 | * @class nx.data.EdgeSetCollection 5 | * @extend nx.data.Edge 6 | * @module nx.data 7 | */ 8 | 9 | nx.define('nx.data.EdgeSetCollection', nx.data.Edge, { 10 | properties: { 11 | /** 12 | * All child edgeset 13 | * @property edgeSets {Object} 14 | */ 15 | edgeSets: { 16 | value: function () { 17 | return {}; 18 | } 19 | }, 20 | edges: { 21 | get: function () { 22 | var edges = {}; 23 | nx.each(this.edgeSets(), function (edgeSet) { 24 | nx.extend(edges, edgeSet.edges()); 25 | }); 26 | return edges; 27 | } 28 | }, 29 | /** 30 | * Edge's type 31 | * @property type {String} 32 | * @default 'edgeSet' 33 | */ 34 | type: { 35 | value: 'edgeSetCollection' 36 | }, 37 | activated: { 38 | get: function () { 39 | return this._activated !== undefined ? this._activated : true; 40 | }, 41 | set: function (value) { 42 | var graph = this.graph(); 43 | nx.each(this.edgeSets(),function(edgeSet){ 44 | edgeSet.activated(value, { 45 | force: true 46 | }); 47 | }); 48 | //this.eachEdge(function (edge) { 49 | // if (edge.type() == 'edge') { 50 | // if (value) { 51 | // graph.fire('removeEdge', edge); 52 | // } else { 53 | // graph.fire('addEdge', edge); 54 | // } 55 | // } else if (edge.type() == 'edgeSet') { 56 | // if (value) { 57 | // graph.fire('removeEdgeSet', edge); 58 | // } else { 59 | // graph.fire('addEdgeSet', edge); 60 | // } 61 | // } 62 | //}, this); 63 | this._activated = value; 64 | } 65 | } 66 | }, 67 | methods: { 68 | /** 69 | * Add child edgeSet 70 | * @method addEdgeSet 71 | * @param edgeSet {nx.data.EdgeSet} 72 | */ 73 | addEdgeSet: function (edgeSet) { 74 | var edgeSets = this.edgeSets(); 75 | edgeSets[edgeSet.linkKey()] = edgeSet; 76 | }, 77 | /** 78 | * Remove child edgeSet 79 | * @method removeEdgeSet 80 | * @param linkKey {String} 81 | */ 82 | removeEdgeSet: function (linkKey) { 83 | var edgeSets = this.edgeSets(); 84 | delete edgeSets[linkKey]; 85 | } 86 | } 87 | 88 | }); 89 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/data/UniqObservableCollection.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | nx.define("nx.data.UniqObservableCollection", nx.data.ObservableCollection, { 4 | methods: { 5 | add: function (item) { 6 | if (item == null || this.contains(item)) { 7 | return false; 8 | } 9 | return this.inherited(item); 10 | }, 11 | addRange: function (iter) { 12 | if (nx.is(iter, Array)) { 13 | var items = nx.util.uniq(iter.slice()); 14 | var i = 0; 15 | while (i < items.length) { 16 | var item = items[i]; 17 | if (item == null || this.contains(item)) { 18 | items.splice(i, 1); 19 | } 20 | i++; 21 | } 22 | return this.inherited(items); 23 | } else { 24 | return this.inherited(iter); 25 | } 26 | 27 | 28 | }, 29 | insert: function (item, index) { 30 | if (item == null || this.contains(item)) { 31 | return false; 32 | } 33 | return this.inherited(item, index); 34 | }, 35 | insertRange: function (iter, index) { 36 | if (nx.is(iter, Array)) { 37 | var items = iter.slice(); 38 | var i = 0; 39 | while (i < items.length) { 40 | var item = items[i]; 41 | if (item == null || this.contains(item)) { 42 | items.splice(i, 1); 43 | } 44 | i++; 45 | } 46 | return this.inherited(items); 47 | } else { 48 | return this.inherited(iter); 49 | } 50 | } 51 | } 52 | }); 53 | 54 | 55 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/data/processor/Circle.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | nx.define("nx.data.ObservableGraph.CircleProcessor", { 3 | methods: { 4 | process: function (data) { 5 | 6 | } 7 | } 8 | }); 9 | 10 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/data/processor/Force.js: -------------------------------------------------------------------------------- 1 | (function (nx, global, logger) { 2 | /** 3 | * Force layout processor 4 | * @class nx.data.ObservableGraph.ForceProcessor 5 | * @module nx.data 6 | */ 7 | nx.define("nx.data.ObservableGraph.ForceProcessor", { 8 | methods: { 9 | /** 10 | * Process graph data 11 | * @param data {JSON} standard graph data 12 | * @param [key] 13 | * @param [model] 14 | * @returns {JSON} {JSON} standard graph data 15 | */ 16 | process: function (data, key, model) { 17 | var forceStartDate = new Date(); 18 | var _data; 19 | 20 | _data = {nodes: data.nodes, links: []}; 21 | var nodeIndexMap = {}; 22 | nx.each(data.nodes, function (node, index) { 23 | nodeIndexMap[node[key]] = index; 24 | }); 25 | 26 | 27 | // if source and target is not number, force will search node 28 | nx.each(data.links, function (link) { 29 | if (!nx.is(link.source, 'Object') && nodeIndexMap[link.source] !== undefined && !nx.is(link.target, 'Object') && nodeIndexMap[link.target] !== undefined) { 30 | if (key == 'ixd') { 31 | _data.links.push({ 32 | source: link.source, 33 | target: link.target 34 | }); 35 | } else { 36 | _data.links.push({ 37 | source: nodeIndexMap[link.source], 38 | target: nodeIndexMap[link.target] 39 | }); 40 | } 41 | 42 | } 43 | }); 44 | var force = new nx.data.Force(); 45 | force.nodes(_data.nodes); 46 | force.links(_data.links); 47 | force.start(); 48 | while (force.alpha()) { 49 | force.tick(); 50 | } 51 | force.stop(); 52 | 53 | return data; 54 | } 55 | } 56 | }); 57 | 58 | })(nx, nx.global, nx.logger); -------------------------------------------------------------------------------- /src/js/graphic/data/processor/NeXtForce.js: -------------------------------------------------------------------------------- 1 | (function (nx, global, logger) { 2 | /** 3 | * Force layout processor 4 | * @class nx.data.ObservableGraph.ForceProcessor 5 | * @module nx.data 6 | */ 7 | nx.define("nx.data.ObservableGraph.NeXtForceProcessor", { 8 | methods: { 9 | /** 10 | * Process graph data 11 | * @param data {JSON} standard graph data 12 | * @param [key] 13 | * @param [model] 14 | * @returns {JSON} {JSON} standard graph data 15 | */ 16 | process: function (data, key, model) { 17 | var forceStartDate = new Date(); 18 | 19 | var _data = {nodes: data.nodes, links: []}; 20 | var nodeIndexMap = {}; 21 | nx.each(data.nodes, function (node, index) { 22 | nodeIndexMap[node[key]] = index; 23 | }); 24 | 25 | _data.links = []; 26 | nx.each(data.links, function (link) { 27 | if (!nx.is(link.source, 'Object') && nodeIndexMap[link.source] !== undefined && !nx.is(link.target, 'Object') && nodeIndexMap[link.target] !== undefined) { 28 | _data.links.push({ 29 | source: nodeIndexMap[link.source], 30 | target: nodeIndexMap[link.target] 31 | }); 32 | } 33 | }); 34 | 35 | // force 36 | var force = new nx.data.NextForce(); 37 | force.setData(data); 38 | console.log(_data.nodes.length); 39 | if (_data.nodes.length < 50) { 40 | while (true) { 41 | force.tick(); 42 | if (force.maxEnergy < _data.nodes.length * 0.1) { 43 | break; 44 | } 45 | } 46 | } else { 47 | var step = 0; 48 | while (++step < 900) { 49 | force.tick(); 50 | } 51 | } 52 | 53 | console.log(force.maxEnergy); 54 | 55 | return data; 56 | } 57 | } 58 | }); 59 | 60 | })(nx, nx.global, nx.logger); -------------------------------------------------------------------------------- /src/js/graphic/data/processor/Quick.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | nx.define("nx.data.ObservableGraph.QuickProcessor", { 3 | methods: { 4 | process: function (data, key, model) { 5 | nx.each(data.nodes, function (node) { 6 | node.x = Math.floor(Math.random() * model.width()); 7 | node.y = Math.floor(Math.random() * model.height()); 8 | // node.x = Math.floor(Math.random() * 100); 9 | // node.y = Math.floor(Math.random() * 100); 10 | }); 11 | return data; 12 | } 13 | } 14 | }); 15 | 16 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/geometry/Math.js: -------------------------------------------------------------------------------- 1 | (function (nx, ui, global) { 2 | /** 3 | * @class Math 4 | * @namespace nx.geometry 5 | */ 6 | var EXPORT = nx.define("nx.geometry.Math", nx.Observable, { 7 | statics: (function () { 8 | function precised(f) { 9 | return function (param) { 10 | var v = f(param); 11 | return EXPORT.approximate(v, 0) ? 0 : v; 12 | }; 13 | } 14 | 15 | return { 16 | approximate: function (a, b) { 17 | var v = a - b; 18 | return v < 1e-10 && v > -1e-10; 19 | }, 20 | sin: precised(Math.sin), 21 | cos: precised(Math.cos), 22 | tan: precised(Math.tan), 23 | cot: function (a) { 24 | var tan = Math.tan(a); 25 | if (tan > 1e10 || tan < -1e10) { 26 | return 0; 27 | } 28 | return 1 / tan; 29 | } 30 | }; 31 | })() 32 | }); 33 | })(nx, nx.ui, window); 34 | -------------------------------------------------------------------------------- /src/js/graphic/svg/Circle.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | /** 3 | * SVG circle component 4 | * @class nx.graphic.Circle 5 | * @extend nx.graphic.Component 6 | * @module nx.graphic 7 | */ 8 | nx.define("nx.graphic.Circle", nx.graphic.Component, { 9 | view: { 10 | tag: 'svg:circle' 11 | 12 | } 13 | }); 14 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Group.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * SVG group component 5 | * @class nx.graphic.Group 6 | * @extend nx.graphic.Component 7 | * @module nx.graphic 8 | */ 9 | nx.define("nx.graphic.Group", nx.graphic.Component, { 10 | properties: { 11 | 'data-id': { 12 | set: function (value) { 13 | nx.each(this.content(), function (item) { 14 | item.set('data-id', value); 15 | }); 16 | this.view().set('data-id', value); 17 | this['_data-id'] = value; 18 | } 19 | } 20 | }, 21 | view: { 22 | tag: 'svg:g' 23 | }, 24 | methods: { 25 | move: function (x, y) { 26 | var translate = this.translate(); 27 | this.setTransform(x + translate.x, y + translate.y); 28 | } 29 | } 30 | }); 31 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Image.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | 3 | var xlink = 'http://www.w3.org/1999/xlink'; 4 | 5 | /** 6 | * SVG image component 7 | * @class nx.graphic.Image 8 | * @extend nx.graphic.Component 9 | * @module nx.graphic 10 | */ 11 | nx.define("nx.graphic.Image", nx.graphic.Component, { 12 | properties: { 13 | /** 14 | * Set/get image src 15 | * @property src 16 | */ 17 | src: { 18 | get: function () { 19 | return this._src !== undefined ? this._src : 0; 20 | }, 21 | set: function (value) { 22 | if (this._src !== value) { 23 | this._src = value; 24 | if (this.view() && value !== undefined) { 25 | var el = this.view().dom().$dom; 26 | el.setAttributeNS(xlink, 'href', value); 27 | } 28 | return true; 29 | } else { 30 | return false; 31 | } 32 | } 33 | } 34 | }, 35 | view: { 36 | tag: 'svg:image' 37 | } 38 | }); 39 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Line.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | /** 3 | * SVG line component 4 | * @class nx.graphic.Line 5 | * @extend nx.graphic.Component 6 | * @module nx.graphic 7 | */ 8 | nx.define("nx.graphic.Line", nx.graphic.Component, { 9 | view: { 10 | tag: 'svg:line' 11 | } 12 | }); 13 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Path.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | /** 3 | * SVG path component 4 | * @class nx.graphic.Path 5 | * @extend nx.graphic.Component 6 | * @module nx.graphic 7 | */ 8 | 9 | nx.define("nx.graphic.Path", nx.graphic.Component, { 10 | view: { 11 | tag: 'svg:path' 12 | } 13 | }); 14 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Polygon.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | /** 3 | * SVG polygon component 4 | * @class nx.graphic.Polygon 5 | * @extend nx.graphic.Path 6 | * @module nx.graphic 7 | */ 8 | 9 | nx.define("nx.graphic.Polygon", nx.graphic.Path, { 10 | properties: { 11 | nodes: { 12 | /** 13 | * Set/get point array to generate a polygon shape 14 | * @property nodes 15 | */ 16 | get: function () { 17 | return this._nodes || []; 18 | }, 19 | set: function (value) { 20 | this._nodes = value; 21 | var vertices = value; 22 | if (vertices.length !== 0) { 23 | if (vertices.length == 1) { 24 | var point = vertices[0]; 25 | vertices.push({x: point.x - 1, y: point.y - 1}); 26 | vertices.push({x: point.x + 1, y: point.y - 1}); 27 | } else if (vertices.length == 2) { 28 | vertices.push([vertices[0].x + 1, vertices[0].y + 1]); 29 | vertices.push(vertices[1]); 30 | } 31 | 32 | var nodes = nx.data.Convex.process(vertices); 33 | var path = []; 34 | path.push('M ', nodes[0].x, ' ', nodes[0].y); 35 | for (var i = 1; i < nodes.length; i++) { 36 | if (!nx.is(nodes[i], 'Array')) { 37 | path.push(' L ', nodes[i].x, ' ', nodes[i].y); 38 | } 39 | 40 | } 41 | path.push(' Z'); 42 | this.set("d", path.join('')); 43 | } 44 | 45 | } 46 | } 47 | } 48 | }); 49 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Rect.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | /** 3 | * SVG rect component 4 | * @class nx.graphic.Rect 5 | * @extend nx.graphic.Component 6 | * @module nx.graphic 7 | */ 8 | 9 | nx.define("nx.graphic.Rect", nx.graphic.Component, { 10 | view: { 11 | tag: 'svg:rect' 12 | } 13 | }); 14 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Text.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * SVG text component 4 | * @class nx.graphic.Text 5 | * @extend nx.graphic.Component 6 | * @module nx.graphic 7 | */ 8 | nx.define("nx.graphic.Text", nx.graphic.Component, { 9 | properties: { 10 | /** 11 | * Set/get text 12 | * @property text 13 | */ 14 | text: { 15 | get: function () { 16 | return this._text !== undefined ? this._text : 0; 17 | }, 18 | set: function (value) { 19 | if (this._text !== value && value !== undefined) { 20 | this._text = value; 21 | var el = this.view().dom().$dom; 22 | if (el.firstChild) { 23 | el.removeChild(el.firstChild); 24 | } 25 | el.appendChild(document.createTextNode(value)); 26 | return true; 27 | } else { 28 | return false; 29 | } 30 | } 31 | } 32 | }, 33 | view: { 34 | tag: 'svg:text' 35 | } 36 | }); 37 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/svg/Triangle.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | /** 3 | * SVG triangle component 4 | * @class nx.graphic.Triangle 5 | * @extend nx.graphic.Path 6 | * @module nx.graphic 7 | */ 8 | nx.define("nx.graphic.Triangle", nx.graphic.Path, { 9 | properties: { 10 | width: { 11 | get: function () { 12 | return this._width !== undefined ? this._width : 0; 13 | }, 14 | set: function (value) { 15 | if (this._width !== value) { 16 | this._width = value; 17 | this._draw(); 18 | return true; 19 | } else { 20 | return false; 21 | } 22 | } 23 | }, 24 | height: { 25 | get: function () { 26 | return this._height !== undefined ? this._height : 0; 27 | }, 28 | set: function (value) { 29 | if (this._height !== value) { 30 | this._height = value; 31 | this._draw(); 32 | return true; 33 | } else { 34 | return false; 35 | } 36 | } 37 | } 38 | }, 39 | methods: { 40 | _draw: function () { 41 | if (this._width && this._height) { 42 | var path = []; 43 | path.push('M ', this._width / 2, ' ', 0); 44 | path.push(' L ', this._width, ' ', this._height); 45 | path.push(' L ', 0, ' ', this._height); 46 | path.push(' Z'); 47 | this.set("d", path.join('')); 48 | } 49 | 50 | 51 | } 52 | } 53 | }); 54 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/core/Config.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * Topology's base config 5 | * @class nx.graphic.Topology.Config 6 | * @module nx.graphic.Topology 7 | */ 8 | nx.define("nx.graphic.Topology.Config", { 9 | events: [], 10 | properties: { 11 | /** 12 | * Topology status, it could be initializing/appended/ready 13 | * @property status {String} 14 | */ 15 | status: { 16 | value: 'initializing', 17 | binding: { 18 | direction: "<>" 19 | } 20 | }, 21 | /** 22 | * topology's theme, it could be blue/green/dark/slate/yellow 23 | * @property theme {String} 24 | */ 25 | theme: { 26 | get: function () { 27 | return this._theme || 'blue'; 28 | }, 29 | set: function (value) { 30 | this._theme = value; 31 | this.notify('themeClass'); 32 | } 33 | }, 34 | themeClass: { 35 | get: function () { 36 | return 'n-topology-' + this.theme(); 37 | } 38 | }, 39 | /** 40 | * Set the navigation visibility 41 | * @property showNavigation {Boolean} 42 | */ 43 | showNavigation: { 44 | value: true 45 | }, 46 | showThumbnail: { 47 | value: false 48 | }, 49 | /** 50 | * Get the setting panel component instance for extend user setting 51 | * @property viewSettingPanel {nx.ui.Component} 52 | * @readonly 53 | */ 54 | viewSettingPanel: { 55 | get: function () { 56 | return this.view("nav").view("customize"); 57 | } 58 | }, 59 | viewSettingPopover: { 60 | get: function () { 61 | return this.view("nav").view("settingPopover"); 62 | } 63 | } 64 | }, 65 | methods: { 66 | } 67 | }); 68 | 69 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/extension/graphic/FillStage.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | var FillStage = nx.define({ 4 | methods: { 5 | fillStage: function () { 6 | this.fit(null, null, false); 7 | 8 | var width = this.width(); 9 | var height = this.height(); 10 | var padding = this.padding() / 3; 11 | var graphicBound = this.getBoundByNodes(); 12 | 13 | //scale 14 | var xRate = (width - padding * 2) / graphicBound.width; 15 | var yRate = (height - padding * 2) / graphicBound.height; 16 | 17 | 18 | var topoMatrix = this.matrix(); 19 | var stageScale = topoMatrix.scale(); 20 | 21 | 22 | this.graph().vertexSets().each(function (item) { 23 | var vs = item.value(); 24 | if (vs.generated() && vs.activated()) { 25 | var position = vs.position(); 26 | var absolutePosition = { 27 | x: position.x * stageScale + topoMatrix.x(), 28 | y: position.y * stageScale + topoMatrix.y() 29 | }; 30 | 31 | vs.position({ 32 | x: ((absolutePosition.x - graphicBound.left) * xRate + padding - topoMatrix.x()) / stageScale, 33 | y: ((absolutePosition.y - graphicBound.top) * yRate + padding - topoMatrix.y()) / stageScale 34 | }); 35 | } 36 | }); 37 | 38 | 39 | this.graph().vertices().each(function (item) { 40 | var vertex = item.value(); 41 | if (vertex.parentVertexSet() == null || !(vertex.parentVertexSet().generated() && vertex.parentVertexSet().activated())) { 42 | var position = vertex.position(); 43 | var absolutePosition = { 44 | x: position.x * stageScale + topoMatrix.x(), 45 | y: position.y * stageScale + topoMatrix.y() 46 | }; 47 | 48 | vertex.position({ 49 | x: ((absolutePosition.x - graphicBound.left) * xRate + padding - topoMatrix.x()) / stageScale, 50 | y: ((absolutePosition.y - graphicBound.top) * yRate + padding - topoMatrix.y()) / stageScale 51 | }); 52 | } 53 | }); 54 | 55 | 56 | this.fit(null, null, false); 57 | 58 | } 59 | } 60 | }); 61 | 62 | 63 | nx.graphic.Topology.registerExtension(FillStage); 64 | 65 | 66 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/path/BasePath.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * Base path class. 5 | * @class nx.graphic.Topology.BasePath 6 | * @extend nx.graphic.BasePath 7 | * @module nx.graphic.Topology 8 | */ 9 | 10 | nx.define("nx.graphic.Topology.BasePath", nx.graphic.Component, { 11 | events: [], 12 | properties: { 13 | /** 14 | * nodes to over path 15 | * @property nodes 16 | */ 17 | nodes: {}, 18 | /** 19 | * path 'd' generator function 20 | * @property pathGenerator 21 | */ 22 | pathGenerator: { 23 | value: function () { 24 | return function () { 25 | 26 | }; 27 | } 28 | }, 29 | /** 30 | * path style object 31 | * @property path style 32 | * 33 | */ 34 | pathStyle: { 35 | value: function () { 36 | return { 37 | 'stroke': '#666', 38 | 'stroke-width': 2, 39 | fill: 'none' 40 | }; 41 | } 42 | }, 43 | /** 44 | * topology reference 45 | * @property topology 46 | */ 47 | topology: {} 48 | }, 49 | view: { 50 | type: 'nx.graphic.Group', 51 | content: { 52 | name: 'path', 53 | type: 'nx.graphic.Path', 54 | props: { 55 | 56 | } 57 | } 58 | }, 59 | methods: { 60 | attach: function (parent) { 61 | this.inherited(parent); 62 | var watcher = this._nodesWatcher = new nx.graphic.Topology.NodeWatcher(); 63 | watcher.observePosition(true); 64 | watcher.topology(this.topology()); 65 | watcher.updater(this._draw.bind(this)); 66 | watcher.nodes(this.nodes()); 67 | 68 | //watcher 69 | this.view("path").dom().setStyles(this.pathStyle()); 70 | }, 71 | _draw: function () { 72 | var pathEL = this.view('path'); 73 | var nodes = this._nodesWatcher.getNodes(); 74 | if (nodes.length == this.nodes().length) { 75 | var topo = this.topology(); 76 | var pathStyle = this.pathStyle(); 77 | var d = this.pathGenerator().call(this); 78 | if (d) { 79 | pathEL.set('d', d); 80 | pathEL.visible(true); 81 | var strokeWidth = parseInt(pathStyle['stroke-width'], 10) || 1; 82 | pathEL.dom().setStyle('stroke-width', strokeWidth * topo.stageScale()); 83 | } 84 | } else { 85 | pathEL.visible(false); 86 | } 87 | 88 | 89 | }, 90 | draw: function () { 91 | this._draw(); 92 | } 93 | } 94 | }); 95 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/path/PathLayer.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | var util = nx.util; 3 | /** 4 | * Path layer class 5 | Could use topo.getLayer("pathLayer") get this 6 | * @class nx.graphic.Topology.PathLayer 7 | * @extend nx.graphic.Topology.Layer 8 | * @module nx.graphic.Topology 9 | */ 10 | nx.define("nx.graphic.Topology.PathLayer", nx.graphic.Topology.Layer, { 11 | properties: { 12 | 13 | /** 14 | * Path array 15 | * @property paths 16 | */ 17 | paths: { 18 | value: function () { 19 | return []; 20 | } 21 | } 22 | }, 23 | methods: { 24 | attach: function (args) { 25 | this.attach.__super__.apply(this, arguments); 26 | var topo = this.topology(); 27 | topo.on('zoomend', this._draw, this); 28 | topo.watch('revisionScale', this._draw, this); 29 | 30 | }, 31 | _draw: function () { 32 | nx.each(this.paths(), function (path) { 33 | path.draw(); 34 | }); 35 | }, 36 | /** 37 | * Add a path to topology 38 | * @param path {nx.graphic.Topology.Path} 39 | * @method addPath 40 | */ 41 | addPath: function (path) { 42 | this.paths().push(path); 43 | path.topology(this.topology()); 44 | path.attach(this); 45 | path.draw(); 46 | }, 47 | /** 48 | * Remove a path 49 | * @method removePath 50 | * @param path 51 | */ 52 | removePath: function (path) { 53 | this.paths().splice(this.paths().indexOf(path), 1); 54 | path.dispose(); 55 | }, 56 | clear: function () { 57 | nx.each(this.paths(), function (path) { 58 | path.dispose(); 59 | }); 60 | this.paths([]); 61 | this.inherited(); 62 | }, 63 | dispose: function () { 64 | this.clear(); 65 | var topo = this.topology(); 66 | topo.off('zoomend', this._draw, this); 67 | topo.unwatch('revisionScale', this._draw, this); 68 | this.inherited(); 69 | } 70 | } 71 | }); 72 | 73 | 74 | })(nx, nx.global); 75 | -------------------------------------------------------------------------------- /src/js/graphic/topology/scene/Scene.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * Basic scene class 5 | * @class nx.graphic.Topology.Scene 6 | * @extend nx.data.ObservableObject 7 | */ 8 | nx.define("nx.graphic.Topology.Scene", nx.data.ObservableObject, { 9 | properties: { 10 | topology: { 11 | value: null 12 | } 13 | }, 14 | methods: { 15 | init: function (args) { 16 | this.sets(args); 17 | }, 18 | /** 19 | * Factory function ,entry of a scene 20 | * @method activate 21 | */ 22 | activate: function () { 23 | 24 | }, 25 | /** 26 | * Deactivate a scene 27 | * @method deactivate 28 | */ 29 | deactivate: function () { 30 | 31 | } 32 | } 33 | }); 34 | 35 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/scene/ZoomBySelection.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * Zoom by selection scene 5 | * @class nx.graphic.Topology.ZoomBySelection 6 | * @extend nx.graphic.Topology.SelectionScene 7 | */ 8 | nx.define("nx.graphic.Topology.ZoomBySelection", nx.graphic.Topology.SelectionScene, { 9 | events: ['finish'], 10 | properties: { 11 | }, 12 | methods: { 13 | activate: function (args) { 14 | this.inherited(args); 15 | nx.dom.Document.html().addClass('n-zoomInCursor'); 16 | }, 17 | deactivate: function () { 18 | this.inherited(); 19 | nx.dom.Document.html().removeClass('n-zoomInCursor'); 20 | }, 21 | dragStageEnd: function (sender, event) { 22 | var bound = this.rect.getBound(); 23 | this.inherited(sender, event); 24 | 25 | this.fire('finish', bound); 26 | }, 27 | esc: function () { 28 | this.fire('finish'); 29 | } 30 | } 31 | }); 32 | 33 | 34 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/tooltip/LinkSetTooltip.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * @class nx.graphic.LinkSetTooltipContent 4 | * @extend nx.ui.Component 5 | * @module nx.graphic.Topology 6 | */ 7 | nx.define("nx.graphic.Topology.LinkSetTooltipContent", nx.ui.Component, { 8 | properties: { 9 | linkSet: { 10 | set: function (value) { 11 | var items = []; 12 | nx.each(value.model().edges(), function (edge) { 13 | items.push({ 14 | item: "Source:" + edge.sourceID() + " Target :" + edge.targetID(), 15 | edge: edge}); 16 | }); 17 | this.view("list").items(items); 18 | } 19 | }, 20 | topology: {} 21 | }, 22 | view: [ 23 | { 24 | props: { 25 | style: { 26 | 'maxHeight': '247px', 27 | 'overflow': 'auto', 28 | 'overflow-x': 'hidden' 29 | } 30 | }, 31 | content: { 32 | name: 'list', 33 | props: { 34 | 'class': 'list-group', 35 | style: 'width:200px', 36 | template: { 37 | tag: 'a', 38 | props: { 39 | 'class': 'list-group-item' 40 | }, 41 | content: '{item}', 42 | events: { 43 | 'click': '{#_click}' 44 | } 45 | } 46 | } 47 | } 48 | } 49 | ], 50 | methods: { 51 | _click: function (sender, events) { 52 | var link = sender.model().edge; 53 | // this.topology().fire('clickLink', link); 54 | } 55 | } 56 | }); 57 | 58 | 59 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/tooltip/LinkTooltip.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * @class nx.graphic.LinkTooltipContent 4 | * @extend nx.ui.Component 5 | * @module nx.graphic.Topology 6 | */ 7 | nx.define("nx.graphic.Topology.LinkTooltipContent", nx.ui.Component, { 8 | properties: { 9 | link: { 10 | set: function (value) { 11 | var model = value.model(); 12 | this.view('list').set('items', new nx.data.Dictionary(model.getData())); 13 | } 14 | }, 15 | topology: {}, 16 | tooltipmanager: {} 17 | }, 18 | view: { 19 | content: { 20 | props: { 21 | 'class': 'n-topology-tooltip-content n-list' 22 | }, 23 | content: [ 24 | { 25 | name: 'list', 26 | tag: 'ul', 27 | props: { 28 | 'class': 'n-list-wrap', 29 | template: { 30 | tag: 'li', 31 | props: { 32 | 'class': 'n-list-item-i', 33 | role: 'listitem' 34 | }, 35 | content: [ 36 | { 37 | tag: 'label', 38 | content: '{key}: ' 39 | }, 40 | { 41 | tag: 'span', 42 | content: '{value}' 43 | } 44 | ] 45 | 46 | } 47 | } 48 | } 49 | ] 50 | } 51 | } 52 | }); 53 | 54 | 55 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/tooltip/NodeTooltip.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * Node tooltip content class 4 | * @class nx.graphic.NodeTooltipContent 5 | * @extend nx.ui.Component 6 | * @module nx.graphic.Topology 7 | */ 8 | 9 | nx.define('nx.graphic.Topology.NodeTooltipContent', nx.ui.Component, { 10 | properties: { 11 | node: { 12 | set: function (value) { 13 | var model = value.model(); 14 | this.view('list').set('items', new nx.data.Dictionary(model.getData())); 15 | this.title(value.label()); 16 | } 17 | }, 18 | topology: {}, 19 | title: {} 20 | }, 21 | view: { 22 | content: [ 23 | { 24 | name: 'header', 25 | props: { 26 | 'class': 'n-topology-tooltip-header' 27 | }, 28 | content: [ 29 | { 30 | tag: 'span', 31 | props: { 32 | 'class': 'n-topology-tooltip-header-text' 33 | }, 34 | name: 'title', 35 | content: '{#title}' 36 | } 37 | ] 38 | }, 39 | { 40 | name: 'content', 41 | props: { 42 | 'class': 'n-topology-tooltip-content n-list' 43 | }, 44 | content: [ 45 | { 46 | name: 'list', 47 | tag: 'ul', 48 | props: { 49 | 'class': 'n-list-wrap', 50 | template: { 51 | tag: 'li', 52 | props: { 53 | 'class': 'n-list-item-i', 54 | role: 'listitem' 55 | }, 56 | content: [ 57 | { 58 | tag: 'label', 59 | content: '{key}: ' 60 | }, 61 | { 62 | tag: 'span', 63 | content: '{value}' 64 | } 65 | ] 66 | 67 | } 68 | } 69 | } 70 | ] 71 | } 72 | ] 73 | }, 74 | methods: { 75 | init: function (args) { 76 | this.inherited(args); 77 | this.sets(args); 78 | } 79 | } 80 | }); 81 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/tooltip/TooltipMixin.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * Tooltip mixin class 5 | * @class nx.graphic.Topology.TooltipMixin 6 | * 7 | */ 8 | 9 | nx.define("nx.graphic.Topology.TooltipMixin", { 10 | events: [], 11 | properties: { 12 | /** 13 | * Set/get the tooltip manager config 14 | * @property tooltipManagerConfig 15 | */ 16 | tooltipManagerConfig: { 17 | get: function () { 18 | return this._tooltipManagerConfig || {}; 19 | }, 20 | set: function (value) { 21 | var tooltipManager = this.tooltipManager(); 22 | if (tooltipManager) { 23 | tooltipManager.sets(value); 24 | } 25 | this._tooltipManagerConfig = value; 26 | } 27 | }, 28 | /** 29 | * get tooltip manager 30 | * @property tooltipManager 31 | */ 32 | tooltipManager: { 33 | value: function () { 34 | var config = this.tooltipManagerConfig(); 35 | return new nx.graphic.Topology.TooltipManager(nx.extend({}, {topology: this}, config)); 36 | } 37 | } 38 | }, 39 | methods: { 40 | 41 | } 42 | }); 43 | 44 | 45 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/tooltip/TooltipPolicy.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * Topology tooltip policy 4 | * @class nx.graphic.Topology.TooltipPolicy 5 | */ 6 | 7 | nx.define("nx.graphic.Topology.TooltipPolicy", { 8 | events: [], 9 | properties: { 10 | topology: {}, 11 | tooltipManager: {} 12 | }, 13 | methods: { 14 | init: function (args) { 15 | this.inherited(args); 16 | this.sets(args); 17 | this._tm = this.tooltipManager(); 18 | }, 19 | pressStage: function () { 20 | this._tm.closeAll(); 21 | }, 22 | zoomstart: function () { 23 | this._tm.closeAll(); 24 | }, 25 | clickNode: function (node) { 26 | this._tm.openNodeTooltip(node); 27 | }, 28 | clickLinkSetNumber: function (linkSet) { 29 | this._tm.openLinkSetTooltip(linkSet); 30 | }, 31 | dragStageStart: function () { 32 | this._tm.closeAll(); 33 | }, 34 | clickLink: function (link) { 35 | this._tm.openLinkTooltip(link); 36 | }, 37 | resizeStage: function () { 38 | this._tm.closeAll(); 39 | }, 40 | fitStage: function () { 41 | this._tm.closeAll(); 42 | }, 43 | deleteNode: function () { 44 | this._tm.closeAll(); 45 | }, 46 | deleteNodeSet: function () { 47 | this._tm.closeAll(); 48 | } 49 | } 50 | }); 51 | 52 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/topology/tooltip/TopologyTooltip.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | /** 3 | * Basic tooltip class for topology 4 | * @class nx.graphic.Topology.Tooltip 5 | * @extend nx.ui.Popover 6 | */ 7 | nx.define("nx.graphic.Topology.Tooltip", nx.ui.Popover, { 8 | properties: { 9 | /** 10 | * Lazy closing a tooltip 11 | * @type Boolean 12 | * @property lazyClose 13 | */ 14 | lazyClose: { 15 | value: false 16 | }, 17 | /** 18 | * Pin a tooltip 19 | * @type Boolean 20 | * @property pin 21 | */ 22 | pin: { 23 | value: false 24 | }, 25 | /** 26 | * Is tooltip response to resize event 27 | * @type Boolean 28 | * @property listenWindow 29 | */ 30 | listenWindow: { 31 | value: true 32 | } 33 | } 34 | }); 35 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/ui/Popover.js: -------------------------------------------------------------------------------- 1 | (function (nx, global) { 2 | 3 | /** 4 | * UI popover class 5 | * @class nx.ui.Popover 6 | * @extend nx.ui.Popup 7 | */ 8 | nx.define("nx.ui.Popover", nx.ui.Popup, { 9 | properties: { 10 | /** 11 | * Popover's title 12 | */ 13 | title: { 14 | get: function () { 15 | return this._title; 16 | }, 17 | set: function (value) { 18 | if (value) { 19 | this.view("title").dom().setStyle("display", "block"); 20 | 21 | } else { 22 | this.view("title").dom().setStyle("display", "none"); 23 | } 24 | if (this._title != value) { 25 | this._title = value; 26 | return true; 27 | } else { 28 | return false; 29 | } 30 | } 31 | }, 32 | location: { 33 | value: "tooltip" 34 | } 35 | }, 36 | view: { 37 | props: { 38 | 'class': 'popover fade', 39 | style: { 40 | outline: "none" 41 | }, 42 | tabindex: -1 43 | }, 44 | events: { 45 | blur: function (sender, evt) { 46 | // this.close(); 47 | } 48 | }, 49 | content: [{ 50 | props: { 51 | 'class': 'arrow' 52 | } 53 | }, { 54 | tag: 'h3', 55 | name: 'title', 56 | props: { 57 | 'class': 'popover-title', 58 | style: { 59 | display: 'none' 60 | } 61 | }, 62 | content: "{#title}" 63 | }, { 64 | name: 'body', 65 | props: { 66 | 'class': 'popover-content' 67 | } 68 | }] 69 | }, 70 | methods: { 71 | getContainer: function () { 72 | return this.view('body').dom(); 73 | } 74 | } 75 | }); 76 | 77 | 78 | })(nx, nx.global); 79 | -------------------------------------------------------------------------------- /src/js/graphic/ui/PopupContainer.js: -------------------------------------------------------------------------------- 1 | (function(nx, global) { 2 | var Container; 3 | (function() { 4 | if (nx && nx.ui && !Container) { 5 | Container = nx.define(nx.ui.Component, { 6 | view: { 7 | props: { 8 | 'class': 'nx n-popupContainer', 9 | style: { 10 | 'position': 'absolute', 11 | 'top': '0px', 12 | 'left': '0px' 13 | 14 | } 15 | } 16 | } 17 | }); 18 | 19 | /** 20 | * Popup container 21 | * @class nx.ui.PopupContainer 22 | * @static 23 | */ 24 | 25 | nx.define("nx.ui.PopupContainer", { 26 | static: true, 27 | properties: { 28 | container: { 29 | value: function() { 30 | return new Container(); 31 | } 32 | } 33 | }, 34 | methods: { 35 | addPopup: function(popup) { 36 | this.container().view().dom().appendChild(popup.view().dom()); 37 | } 38 | } 39 | }); 40 | } 41 | 42 | if (document.body && nx && nx.ui) { 43 | if (document.body.firstChild) { 44 | document.body.insertBefore(nx.ui.PopupContainer.container().view().dom().$dom, document.body.firstChild); 45 | } else { 46 | document.body.appendChild(nx.ui.PopupContainer.container().view().dom().$dom); 47 | } 48 | } else { 49 | setTimeout(arguments.callee, 10); 50 | } 51 | })(); 52 | 53 | 54 | })(nx, nx.global); -------------------------------------------------------------------------------- /src/js/graphic/ui/ZIndexManager.js: -------------------------------------------------------------------------------- 1 | (function (nx,global) { 2 | var zIndex = 1000; 3 | /** 4 | * Popup z-index mamager 5 | * @class nx.widget.ZIndexManager 6 | * @static 7 | */ 8 | nx.define('nx.widget.ZIndexManager',null,{ 9 | static: true, 10 | methods: { 11 | getIndex: function () { 12 | return zIndex++; 13 | } 14 | } 15 | }); 16 | }(nx,nx.global)); -------------------------------------------------------------------------------- /src/js/web/Aspect.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | var slice = Array.prototype.slice; 4 | 5 | var Aspect = nx.Aspect = nx.define({ 6 | static: true, 7 | methods: { 8 | before: function (target, name, func) { 9 | Aspect.around(target, name, function (origFunc, origArgs) { 10 | func.apply(this, origArgs); 11 | origFunc.apply(this, origArgs); 12 | }); 13 | }, 14 | after: function (target, name, func) { 15 | Aspect.around(target, name, function (origFunc, origArgs) { 16 | origFunc.apply(this, origArgs); 17 | func.apply(this, origArgs); 18 | }); 19 | }, 20 | around: function (target, name, func) { 21 | var context = target; 22 | 23 | if (nx.is(target, 'Function')) { 24 | context = target.prototype; 25 | } 26 | 27 | if (context && nx.is(context[name], 'Function')) { 28 | var origFunc = context[name]; 29 | 30 | context[name] = function () { 31 | func.call(context, origFunc, slice.call(arguments)); 32 | } 33 | } 34 | else { 35 | throw new Error('Method "' + name + '" is not found.'); 36 | } 37 | } 38 | } 39 | }); 40 | })(nx); -------------------------------------------------------------------------------- /src/js/web/Debugger.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | var Debugger = nx.Debugger = nx.define({ 4 | static: true, 5 | methods: { 6 | log: function () { 7 | console.log(arguments); 8 | }, 9 | warn: function () { 10 | console.warn(arguments); 11 | }, 12 | error: function () { 13 | console.error(arguments); 14 | }, 15 | diagnose: function () { 16 | nx.each(nx.classes, function (c) { 17 | var id = c.__classId__; 18 | var p = c.prototype; 19 | var n = c.__className__; 20 | var s = c.__super__; 21 | 22 | if (s === nx.ui.Component && p.init && p.init.toString().indexOf('this.inherited') === -1) { 23 | console.warn('The constructor(init) of UI Component [' + id + ']' + n + ' is missing "this.inherited()" calling.'); 24 | } 25 | 26 | }); 27 | } 28 | } 29 | }); 30 | 31 | })(nx); -------------------------------------------------------------------------------- /src/js/web/HttpClient.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | /** 3 | * Ajax http client 4 | * @class nx.HttpClient 5 | * @constructor 6 | */ 7 | var HttpClient = nx.define('nx.HttpClient',{ 8 | static: true, 9 | methods: { 10 | /** 11 | * Ajax send. 12 | * @method send 13 | * @param options 14 | */ 15 | send: function (options) { 16 | var xhr = new XMLHttpRequest(); 17 | var callback = options.callback || function () { 18 | }; 19 | 20 | xhr.open( 21 | options.method || 'GET', 22 | options.url, 23 | true 24 | ); 25 | 26 | xhr.onreadystatechange = function () { 27 | if (xhr.readyState == 4) { 28 | var type = xhr.getResponseHeader('Content-Type'); 29 | var result = (type.indexOf('application/json') >= 0) ? JSON.parse(xhr.responseText) : xhr.responseText; 30 | callback(result); 31 | } 32 | }; 33 | 34 | xhr.setRequestHeader('Content-Type','application/json'); 35 | xhr.send(nx.is(options.data,'Object') ? JSON.stringify(options.data) : options.data); 36 | }, 37 | /** 38 | * Get request 39 | * @method GET 40 | * @param url 41 | * @param callback 42 | * @constructor 43 | */ 44 | GET: function (url,callback) { 45 | this.send({ 46 | url: url, 47 | method: 'GET', 48 | callback: callback 49 | }); 50 | }, 51 | /** 52 | * Post request 53 | * @method POST 54 | * @param url 55 | * @param data 56 | * @param callback 57 | * @constructor 58 | */ 59 | POST: function (url,data,callback) { 60 | this.send({ 61 | url: url, 62 | method: 'POST', 63 | data: data, 64 | callback: callback 65 | }); 66 | }, 67 | /** 68 | * Put request 69 | * @method PUT 70 | * @param url 71 | * @param data 72 | * @param callback 73 | * @constructor 74 | */ 75 | PUT: function (url,data,callback) { 76 | this.send({ 77 | url: url, 78 | method: 'PUT', 79 | data: data, 80 | callback: callback 81 | }); 82 | }, 83 | /** 84 | * Delete request 85 | * @method DELETE 86 | * @param url 87 | * @param callback 88 | * @constructor 89 | */ 90 | DELETE: function (url,callback) { 91 | this.send({ 92 | url: url, 93 | method: 'DELETE', 94 | callback: callback 95 | }); 96 | } 97 | } 98 | }); 99 | })(nx); -------------------------------------------------------------------------------- /src/js/web/dom/Fragment.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | var Collection = nx.data.Collection; 4 | /** 5 | * Dom Fragment 6 | * @class nx.dom.Fragment 7 | * @constructor 8 | */ 9 | nx.define('nx.dom.Fragment', nx.dom.Node, { 10 | methods: { 11 | /** 12 | * Get collection child nodes. 13 | * @returns {nx.data.Collection} 14 | */ 15 | children: function () { 16 | var result = new Collection(); 17 | nx.each(this.$dom.childNodes, function (child) { 18 | result.add(new this.constructor(child)); 19 | }, this); 20 | return result; 21 | } 22 | } 23 | }); 24 | })(nx); -------------------------------------------------------------------------------- /src/js/web/dom/Text.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | /** 3 | * Text Node 4 | * @class nx.dom.Text 5 | * @constructor 6 | */ 7 | nx.define('nx.dom.Text', nx.dom.Node); 8 | })(nx); -------------------------------------------------------------------------------- /src/js/web/ui/Application.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | var global = nx.global; 3 | var Document = nx.dom.Document; 4 | 5 | /** 6 | * @class Application 7 | * @namespace nx.ui 8 | * @extends nx.ui.AbstractComponent 9 | */ 10 | nx.define('nx.ui.Application', nx.ui.AbstractComponent, { 11 | properties: { 12 | container: {} 13 | }, 14 | methods: { 15 | init: function () { 16 | this.inherited(); 17 | var startFn = this.start; 18 | var stopFn = this.stop; 19 | var self = this; 20 | this.start = function (options) { 21 | Document.ready(function () { 22 | nx.app = self; 23 | startFn.call(self, options); 24 | }); 25 | return this; 26 | }; 27 | 28 | this.stop = function () { 29 | nx.app = null; 30 | stopFn.call(self); 31 | }; 32 | 33 | this._globalListeners = {}; 34 | }, 35 | /** 36 | * Start the application. 37 | * @method start 38 | */ 39 | start: function () { 40 | throw new Error('Method "start" is not implemented'); 41 | }, 42 | /** 43 | * Stop the application. 44 | * @method stop 45 | */ 46 | stop: function () { 47 | throw new Error('Method "stop" is not implemented'); 48 | }, 49 | getContainer: function () { 50 | if (this.container()) { 51 | return new nx.dom.Element(this.container()); 52 | } else { 53 | return Document.body(); 54 | } 55 | 56 | }, 57 | on: function (name, handler, context) { 58 | if (!this.can(name)) { 59 | this._attachGlobalListeners(name); 60 | } 61 | 62 | return this.inherited(name, handler, context); 63 | }, 64 | upon: function (name, handler, context) { 65 | if (!this.can(name)) { 66 | this._attachGlobalListeners(name); 67 | } 68 | 69 | this.inherited(name, handler, context); 70 | }, 71 | _attachGlobalListeners: function (name) { 72 | var globalListeners = this._globalListeners; 73 | if (!(name in globalListeners)) { 74 | var self = this; 75 | var listener = globalListeners[name] = function (event) { 76 | self.fire(name, event); 77 | }; 78 | 79 | window.addEventListener(name, listener); 80 | } 81 | } 82 | } 83 | }); 84 | })(nx); 85 | -------------------------------------------------------------------------------- /src/js/web/ui/Behavior.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | nx.define('nx.ui.Behavior', nx.ui.AbstractComponent, { 3 | }); 4 | })(nx); -------------------------------------------------------------------------------- /src/js/web/ui/DraggableBehavior.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | nx.define('nx.ui.DraggableBehavior', nx.ui.Behavior, { 4 | methods: { 5 | onAttach: function (parent, index) { 6 | parent.on('mousedown', this._onMouseDown, this); 7 | nx.app.on('mousemove', this._onMouseMove, this); 8 | parent.on('mouseup', this._onMouseUp, this); 9 | }, 10 | onDetach: function () { 11 | this.parent().off('mousedown', this._onMouseDown, this); 12 | nx.app.off('mousemove', this._onMouseMove, this); 13 | this.parent().off('mouseup', this._onMouseUp, this); 14 | }, 15 | _onMouseDown: function (sender, event) { 16 | this._captured = true; 17 | this._target = sender.resolve('@root').$dom; 18 | this._startX = event.pageX; 19 | this._startY = event.pageY; 20 | }, 21 | _onMouseMove: function (sender, event) { 22 | if (this._captured) { 23 | var offsetX = event.pageX - this._startX; 24 | var offsetY = event.pageY - this._startY; 25 | 26 | this._target.style.webkitTransform = 'translate(' + offsetX + 'px,' + offsetY + 'px)'; 27 | } 28 | }, 29 | _onMouseUp: function (sender, event) { 30 | this._captured = false; 31 | } 32 | } 33 | }); 34 | })(nx); -------------------------------------------------------------------------------- /src/js/web/ui/SimpleComponent.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | 3 | var Document = nx.dom.Document; 4 | 5 | function createElement(tag, text) { 6 | var tokens = tag.split(':'); 7 | if (tokens.length === 2) { 8 | var ns = tokens[0]; 9 | tag = tokens[1]; 10 | return Document.createElementNS(ns, tag); 11 | } 12 | else if (tag === 'text') { 13 | return Document.createText(text); 14 | } 15 | else if (tag === 'fragment') { 16 | return Document.createFragment(); 17 | } 18 | else { 19 | return Document.createElement(tag); 20 | } 21 | } 22 | 23 | function createComponent(view, owner) { 24 | var comp = null; 25 | if (view) { 26 | if (nx.is(view, 'Array')) { 27 | comp = createElement('fragment'); 28 | 29 | nx.each(view, function (v) { 30 | comp.appendChild(createComponent(v, owner)); 31 | }); 32 | } 33 | else if (nx.is(view, 'Object')) { 34 | comp = createElement(view.tag || 'div'); 35 | } 36 | else if (nx.is(view, 'String')) { 37 | comp = createElement('text', view); 38 | } 39 | 40 | nx.each(view.events, function (value, name) { 41 | comp.addEventListener(name, function (e) { 42 | value.call(owner, comp, e); 43 | }); 44 | }); 45 | 46 | nx.each(view.props, function (value, name) { 47 | comp.set(name, value); 48 | }); 49 | 50 | if (view.content !== undefined) { 51 | comp.appendChild(createComponent(view.content, owner)); 52 | } 53 | } 54 | 55 | return comp; 56 | } 57 | 58 | var SimpleComponent = nx.define('nx.ui.SimpleComponent', { 59 | properties: { 60 | owner: null, 61 | dom: null 62 | }, 63 | methods: { 64 | init: function () { 65 | var view = this['@view']; 66 | if (view) { 67 | this.dom(createComponent(view, this)); 68 | } 69 | }, 70 | attach: function (parent, index) { 71 | var container = parent.getContainer(this); 72 | var dom = this.dom(); 73 | if (container && dom) { 74 | if (index >= 0) { 75 | container.insertChild(dom); 76 | } 77 | else { 78 | container.appendChild(dom); 79 | } 80 | } 81 | }, 82 | detach: function () { 83 | var container = parent.getContainer(this); 84 | var dom = this.dom(); 85 | if (container && dom) { 86 | container.removeChild(dom); 87 | } 88 | } 89 | } 90 | }); 91 | })(nx); -------------------------------------------------------------------------------- /src/libs/bootstrap/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/libs/bootstrap/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /src/libs/bootstrap/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/libs/bootstrap/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /src/libs/bootstrap/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CiscoDevNet/NeXt/90e66b73437fd1f3deea07109d8fb065b2ff975b/src/libs/bootstrap/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /src/libs/bootstrap/less/alerts.less: -------------------------------------------------------------------------------- 1 | // 2 | // Alerts 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base styles 7 | // ------------------------- 8 | 9 | .alert { 10 | padding: @alert-padding; 11 | margin-bottom: @line-height-computed; 12 | border: 1px solid transparent; 13 | border-radius: @alert-border-radius; 14 | 15 | // Headings for larger alerts 16 | h4 { 17 | margin-top: 0; 18 | // Specified for the h4 to prevent conflicts of changing @headings-color 19 | color: inherit; 20 | } 21 | // Provide class for links that match alerts 22 | .alert-link { 23 | font-weight: @alert-link-font-weight; 24 | } 25 | 26 | // Improve alignment and spacing of inner content 27 | > p, 28 | > ul { 29 | margin-bottom: 0; 30 | } 31 | > p + p { 32 | margin-top: 5px; 33 | } 34 | } 35 | 36 | // Dismissable alerts 37 | // 38 | // Expand the right padding and account for the close button's positioning. 39 | 40 | .alert-dismissable { 41 | padding-right: (@alert-padding + 20); 42 | 43 | // Adjust close link position 44 | .close { 45 | position: relative; 46 | top: -2px; 47 | right: -21px; 48 | color: inherit; 49 | } 50 | } 51 | 52 | // Alternate styles 53 | // 54 | // Generate contextual modifier classes for colorizing the alert. 55 | 56 | .alert-success { 57 | .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); 58 | } 59 | .alert-info { 60 | .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); 61 | } 62 | .alert-warning { 63 | .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); 64 | } 65 | .alert-danger { 66 | .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); 67 | } 68 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/badges.less: -------------------------------------------------------------------------------- 1 | // 2 | // Badges 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base classes 7 | .badge { 8 | display: inline-block; 9 | min-width: 10px; 10 | padding: 3px 7px; 11 | font-size: @font-size-small; 12 | font-weight: @badge-font-weight; 13 | color: @badge-color; 14 | line-height: @badge-line-height; 15 | vertical-align: baseline; 16 | white-space: nowrap; 17 | text-align: center; 18 | background-color: @badge-bg; 19 | border-radius: @badge-border-radius; 20 | 21 | // Empty badges collapse automatically (not available in IE8) 22 | &:empty { 23 | display: none; 24 | } 25 | } 26 | 27 | // Hover state, but only for links 28 | a.badge { 29 | &:hover, 30 | &:focus { 31 | color: @badge-link-hover-color; 32 | text-decoration: none; 33 | cursor: pointer; 34 | } 35 | } 36 | 37 | // Quick fix for labels/badges in buttons 38 | .btn .badge { 39 | position: relative; 40 | top: -1px; 41 | } 42 | 43 | // Account for counters in navs 44 | a.list-group-item.active > .badge, 45 | .nav-pills > .active > a > .badge { 46 | color: @badge-active-color; 47 | background-color: @badge-active-bg; 48 | } 49 | .nav-pills > li > a > .badge { 50 | margin-left: 3px; 51 | } 52 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/bootstrap.less: -------------------------------------------------------------------------------- 1 | // Core variables and mixins 2 | @import "variables.less"; 3 | @import "mixins.less"; 4 | 5 | // Reset 6 | @import "normalize.less"; 7 | @import "print.less"; 8 | 9 | // Core CSS 10 | @import "scaffolding.less"; 11 | @import "type.less"; 12 | @import "code.less"; 13 | @import "grid.less"; 14 | @import "tables.less"; 15 | @import "forms.less"; 16 | @import "buttons.less"; 17 | 18 | // Components 19 | @import "component-animations.less"; 20 | @import "glyphicons.less"; 21 | @import "dropdowns.less"; 22 | @import "button-groups.less"; 23 | @import "input-groups.less"; 24 | @import "navs.less"; 25 | @import "navbar.less"; 26 | @import "breadcrumbs.less"; 27 | @import "pagination.less"; 28 | @import "pager.less"; 29 | @import "labels.less"; 30 | @import "badges.less"; 31 | @import "jumbotron.less"; 32 | @import "thumbnails.less"; 33 | @import "alerts.less"; 34 | @import "progress-bars.less"; 35 | @import "media.less"; 36 | @import "list-group.less"; 37 | @import "panels.less"; 38 | @import "wells.less"; 39 | @import "close.less"; 40 | 41 | // Components w/ JavaScript 42 | @import "modals.less"; 43 | @import "tooltip.less"; 44 | @import "popovers.less"; 45 | @import "carousel.less"; 46 | 47 | // Utility classes 48 | @import "utilities.less"; 49 | @import "responsive-utilities.less"; 50 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/breadcrumbs.less: -------------------------------------------------------------------------------- 1 | // 2 | // Breadcrumbs 3 | // -------------------------------------------------- 4 | 5 | 6 | .breadcrumb { 7 | padding: 8px 15px; 8 | margin-bottom: @line-height-computed; 9 | list-style: none; 10 | background-color: @breadcrumb-bg; 11 | border-radius: @border-radius-base; 12 | > li { 13 | display: inline-block; 14 | + li:before { 15 | content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space 16 | padding: 0 5px; 17 | color: @breadcrumb-color; 18 | } 19 | } 20 | > .active { 21 | color: @breadcrumb-active-color; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/close.less: -------------------------------------------------------------------------------- 1 | // 2 | // Close icons 3 | // -------------------------------------------------- 4 | 5 | 6 | .close { 7 | float: right; 8 | font-size: (@font-size-base * 1.5); 9 | font-weight: @close-font-weight; 10 | line-height: 1; 11 | color: @close-color; 12 | text-shadow: @close-text-shadow; 13 | .opacity(.2); 14 | 15 | &:hover, 16 | &:focus { 17 | color: @close-color; 18 | text-decoration: none; 19 | cursor: pointer; 20 | .opacity(.5); 21 | } 22 | 23 | // Additional properties for button version 24 | // iOS requires the button element instead of an anchor tag. 25 | // If you want the anchor version, it requires `href="#"`. 26 | button& { 27 | padding: 0; 28 | cursor: pointer; 29 | background: transparent; 30 | border: 0; 31 | -webkit-appearance: none; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/code.less: -------------------------------------------------------------------------------- 1 | // 2 | // Code (inline and block) 3 | // -------------------------------------------------- 4 | 5 | 6 | // Inline and block code styles 7 | code, 8 | kbd, 9 | pre, 10 | samp { 11 | font-family: @font-family-monospace; 12 | } 13 | 14 | // Inline code 15 | code { 16 | padding: 2px 4px; 17 | font-size: 90%; 18 | color: @code-color; 19 | background-color: @code-bg; 20 | white-space: nowrap; 21 | border-radius: @border-radius-base; 22 | } 23 | 24 | // Blocks of code 25 | pre { 26 | display: block; 27 | padding: ((@line-height-computed - 1) / 2); 28 | margin: 0 0 (@line-height-computed / 2); 29 | font-size: (@font-size-base - 1); // 14px to 13px 30 | line-height: @line-height-base; 31 | word-break: break-all; 32 | word-wrap: break-word; 33 | color: @pre-color; 34 | background-color: @pre-bg; 35 | border: 1px solid @pre-border-color; 36 | border-radius: @border-radius-base; 37 | 38 | // Account for some code outputs that place code tags in pre tags 39 | code { 40 | padding: 0; 41 | font-size: inherit; 42 | color: inherit; 43 | white-space: pre-wrap; 44 | background-color: transparent; 45 | border-radius: 0; 46 | } 47 | } 48 | 49 | // Enable scrollable blocks of code 50 | .pre-scrollable { 51 | max-height: @pre-scrollable-max-height; 52 | overflow-y: scroll; 53 | } 54 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/component-animations.less: -------------------------------------------------------------------------------- 1 | // 2 | // Component animations 3 | // -------------------------------------------------- 4 | 5 | // Heads up! 6 | // 7 | // We don't use the `.opacity()` mixin here since it causes a bug with text 8 | // fields in IE7-8. Source: https://github.com/twitter/bootstrap/pull/3552. 9 | 10 | .fade { 11 | opacity: 0; 12 | .transition(opacity .15s linear); 13 | &.in { 14 | opacity: 1; 15 | } 16 | } 17 | 18 | .collapse { 19 | display: none; 20 | &.in { 21 | display: block; 22 | } 23 | } 24 | .collapsing { 25 | position: relative; 26 | height: 0; 27 | overflow: hidden; 28 | .transition(height .35s ease); 29 | } 30 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/grid.less: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | 5 | // Set the container width, and override it for fixed navbars in media queries 6 | .container { 7 | .container-fixed(); 8 | } 9 | 10 | // mobile first defaults 11 | .row { 12 | .make-row(); 13 | } 14 | 15 | // Common styles for small and large grid columns 16 | .make-grid-columns(); 17 | 18 | 19 | // Extra small grid 20 | // 21 | // Grid classes for extra small devices like smartphones. No offset, push, or 22 | // pull classes are present here due to the size of the target. 23 | // 24 | // Note that `.col-xs-12` doesn't get floated on purpose--there's no need since 25 | // it's full-width. 26 | 27 | .make-grid-columns-float(xs); 28 | .make-grid(@grid-columns, xs, width); 29 | .make-grid(@grid-columns, xs, pull); 30 | .make-grid(@grid-columns, xs, push); 31 | .make-grid(@grid-columns, xs, offset); 32 | 33 | 34 | // Small grid 35 | // 36 | // Columns, offsets, pushes, and pulls for the small device range, from phones 37 | // to tablets. 38 | // 39 | // Note that `.col-sm-12` doesn't get floated on purpose--there's no need since 40 | // it's full-width. 41 | 42 | @media (min-width: @screen-sm-min) { 43 | .container { 44 | width: @container-sm; 45 | } 46 | 47 | .make-grid-columns-float(sm); 48 | .make-grid(@grid-columns, sm, width); 49 | .make-grid(@grid-columns, sm, pull); 50 | .make-grid(@grid-columns, sm, push); 51 | .make-grid(@grid-columns, sm, offset); 52 | } 53 | 54 | 55 | // Medium grid 56 | // 57 | // Columns, offsets, pushes, and pulls for the desktop device range. 58 | // 59 | // Note that `.col-md-12` doesn't get floated on purpose--there's no need since 60 | // it's full-width. 61 | 62 | @media (min-width: @screen-md-min) { 63 | .container { 64 | width: @container-md; 65 | } 66 | 67 | .make-grid-columns-float(md); 68 | .make-grid(@grid-columns, md, width); 69 | .make-grid(@grid-columns, md, pull); 70 | .make-grid(@grid-columns, md, push); 71 | .make-grid(@grid-columns, md, offset); 72 | } 73 | 74 | 75 | // Large grid 76 | // 77 | // Columns, offsets, pushes, and pulls for the large desktop device range. 78 | // 79 | // Note that `.col-lg-12` doesn't get floated on purpose--there's no need since 80 | // it's full-width. 81 | 82 | @media (min-width: @screen-lg-min) { 83 | .container { 84 | width: @container-lg; 85 | } 86 | 87 | .make-grid-columns-float(lg); 88 | .make-grid(@grid-columns, lg, width); 89 | .make-grid(@grid-columns, lg, pull); 90 | .make-grid(@grid-columns, lg, push); 91 | .make-grid(@grid-columns, lg, offset); 92 | } 93 | 94 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/jumbotron.less: -------------------------------------------------------------------------------- 1 | // 2 | // Jumbotron 3 | // -------------------------------------------------- 4 | 5 | 6 | .jumbotron { 7 | padding: @jumbotron-padding; 8 | margin-bottom: @jumbotron-padding; 9 | font-size: @jumbotron-font-size; 10 | font-weight: 200; 11 | line-height: (@line-height-base * 1.5); 12 | color: @jumbotron-color; 13 | background-color: @jumbotron-bg; 14 | 15 | h1 { 16 | line-height: 1; 17 | color: @jumbotron-heading-color; 18 | } 19 | p { 20 | line-height: 1.4; 21 | } 22 | 23 | .container & { 24 | border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container 25 | } 26 | 27 | @media screen and (min-width: @screen-sm-min) { 28 | padding-top: (@jumbotron-padding * 1.6); 29 | padding-bottom: (@jumbotron-padding * 1.6); 30 | 31 | .container & { 32 | padding-left: (@jumbotron-padding * 2); 33 | padding-right: (@jumbotron-padding * 2); 34 | } 35 | 36 | h1 { 37 | font-size: (@font-size-base * 4.5); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/labels.less: -------------------------------------------------------------------------------- 1 | // 2 | // Labels 3 | // -------------------------------------------------- 4 | 5 | .label { 6 | display: inline; 7 | padding: .2em .6em .3em; 8 | font-size: 75%; 9 | font-weight: bold; 10 | line-height: 1; 11 | color: @label-color; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: .25em; 16 | 17 | // Add hover effects, but only for links 18 | &[href] { 19 | &:hover, 20 | &:focus { 21 | color: @label-link-hover-color; 22 | text-decoration: none; 23 | cursor: pointer; 24 | } 25 | } 26 | 27 | // Empty labels collapse automatically (not available in IE8) 28 | &:empty { 29 | display: none; 30 | } 31 | } 32 | 33 | // Colors 34 | // Contextual variations (linked labels get darker on :hover) 35 | 36 | .label-default { 37 | .label-variant(@label-default-bg); 38 | } 39 | 40 | .label-primary { 41 | .label-variant(@label-primary-bg); 42 | } 43 | 44 | .label-success { 45 | .label-variant(@label-success-bg); 46 | } 47 | 48 | .label-info { 49 | .label-variant(@label-info-bg); 50 | } 51 | 52 | .label-warning { 53 | .label-variant(@label-warning-bg); 54 | } 55 | 56 | .label-danger { 57 | .label-variant(@label-danger-bg); 58 | } 59 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/list-group.less: -------------------------------------------------------------------------------- 1 | // 2 | // List groups 3 | // -------------------------------------------------- 4 | 5 | // Base class 6 | // 7 | // Easily usable on