├── COPYRIGHT ├── src ├── style │ ├── topology │ │ ├── common │ │ │ ├── topology.css │ │ │ ├── topology_loading.css │ │ │ ├── topology_thumbnail.less │ │ │ ├── topology_tooltip.less │ │ │ └── topology-3d.less │ │ ├── themes │ │ │ ├── black-white │ │ │ │ └── variables.css │ │ │ ├── yellow │ │ │ │ └── yellow.less │ │ │ ├── slate │ │ │ │ └── slate.less │ │ │ ├── dark │ │ │ │ └── dark.less │ │ │ ├── green │ │ │ │ └── green.less │ │ │ └── blue │ │ │ │ └── blue.less │ │ ├── common.less │ │ ├── next-topology.less │ │ └── next-topology-componentized.less │ ├── web │ │ ├── themes │ │ │ ├── css │ │ │ │ └── variables.css │ │ │ ├── dark │ │ │ │ ├── next.less │ │ │ │ ├── next-componentlized.less │ │ │ │ └── overrides.less │ │ │ ├── green │ │ │ │ ├── next.less │ │ │ │ ├── next-componentlized.less │ │ │ │ └── overrides.less │ │ │ ├── slate │ │ │ │ ├── next.less │ │ │ │ ├── next-componentlized.less │ │ │ │ └── overrides.less │ │ │ ├── yellow │ │ │ │ ├── next.less │ │ │ │ ├── next-componentlized.less │ │ │ │ └── overrides.less │ │ │ └── blue │ │ │ │ ├── next.less │ │ │ │ ├── next-componentlized.less │ │ │ │ └── overrides.less │ │ └── common.less │ └── fonts │ │ ├── next-font.eot │ │ ├── next-font.ttf │ │ ├── next-font.woff │ │ └── cisco │ │ ├── CiscoSansRegular.otf │ │ ├── CiscoSansExtraLight.otf │ │ ├── ciscosansregular-webfont.eot │ │ ├── ciscosansregular-webfont.ttf │ │ ├── ciscosansregular-webfont.woff │ │ ├── ciscosansextralight-webfont.eot │ │ ├── ciscosansextralight-webfont.ttf │ │ └── ciscosansextralight-webfont.woff ├── test │ ├── web │ │ ├── test.js │ │ └── index.html │ └── core │ │ ├── Iterable.js │ │ ├── Comparable.js │ │ ├── Serializable.js │ │ ├── data │ │ ├── Counter.js │ │ └── Dictionary.js │ │ └── index.html ├── dist │ └── fonts │ │ ├── next-font.eot │ │ ├── next-font.ttf │ │ ├── next-font.woff │ │ └── cisco │ │ ├── CiscoSansRegular.otf │ │ ├── CiscoSansExtraLight.otf │ │ ├── ciscosansregular-webfont.eot │ │ ├── ciscosansregular-webfont.ttf │ │ ├── ciscosansregular-webfont.woff │ │ ├── ciscosansextralight-webfont.eot │ │ ├── ciscosansextralight-webfont.ttf │ │ └── ciscosansextralight-webfont.woff ├── js │ ├── web │ │ ├── ui │ │ │ ├── Behavior.js │ │ │ ├── DraggableBehavior.js │ │ │ ├── Application.js │ │ │ └── SimpleComponent.js │ │ ├── dom │ │ │ ├── Text.js │ │ │ └── Fragment.js │ │ ├── Debugger.js │ │ ├── Aspect.js │ │ └── HttpClient.js │ ├── graphic │ │ ├── data │ │ │ ├── processor │ │ │ │ ├── Circle.js │ │ │ │ ├── Quick.js │ │ │ │ ├── Force.js │ │ │ │ └── NeXtForce.js │ │ │ ├── UniqObservableCollection.js │ │ │ ├── DataProcessor.js │ │ │ ├── EdgeSet.js │ │ │ ├── Convex.js │ │ │ └── EdgeSetCollection.js │ │ ├── svg │ │ │ ├── Line.js │ │ │ ├── Path.js │ │ │ ├── Rect.js │ │ │ ├── Circle.js │ │ │ ├── Group.js │ │ │ ├── Text.js │ │ │ ├── Image.js │ │ │ ├── Triangle.js │ │ │ └── Polygon.js │ │ ├── ui │ │ │ ├── ZIndexManager.js │ │ │ ├── PopupContainer.js │ │ │ └── Popover.js │ │ ├── topology │ │ │ ├── scene │ │ │ │ ├── Scene.js │ │ │ │ └── ZoomBySelection.js │ │ │ ├── tooltip │ │ │ │ ├── TopologyTooltip.js │ │ │ │ ├── TooltipMixin.js │ │ │ │ ├── TooltipPolicy.js │ │ │ │ ├── LinkTooltip.js │ │ │ │ ├── LinkSetTooltip.js │ │ │ │ └── NodeTooltip.js │ │ │ ├── core │ │ │ │ └── Config.js │ │ │ ├── path │ │ │ │ ├── PathLayer.js │ │ │ │ └── BasePath.js │ │ │ └── extension │ │ │ │ └── graphic │ │ │ │ └── FillStage.js │ │ └── geometry │ │ │ └── Math.js │ └── core │ │ ├── Validatable.js │ │ ├── Comparable.js │ │ ├── Serializable.js │ │ ├── data │ │ └── ObservableObject.js │ │ └── Iterable.js ├── libs │ └── bootstrap │ │ ├── fonts │ │ ├── glyphicons-halflings-regular.eot │ │ ├── glyphicons-halflings-regular.ttf │ │ └── glyphicons-halflings-regular.woff │ │ └── less │ │ ├── breadcrumbs.less │ │ ├── component-animations.less │ │ ├── wells.less │ │ ├── thumbnails.less │ │ ├── close.less │ │ ├── utilities.less │ │ ├── jumbotron.less │ │ ├── media.less │ │ ├── pager.less │ │ ├── badges.less │ │ ├── labels.less │ │ ├── bootstrap.less │ │ ├── code.less │ │ ├── alerts.less │ │ ├── print.less │ │ ├── pagination.less │ │ ├── progress-bars.less │ │ ├── list-group.less │ │ ├── scaffolding.less │ │ ├── grid.less │ │ └── tooltip.less ├── bin │ ├── yuidoc.json │ ├── next-files.js │ ├── next-less.js │ ├── qunit-template.html │ ├── next-template.js │ └── logo.svg └── example │ └── topology │ ├── style.css │ ├── index.html │ ├── layout │ └── force.js │ ├── basic │ ├── autolayout.js │ ├── theme.js │ ├── highlight.js │ ├── cool.js │ ├── base.js │ ├── disable.js │ ├── config.js │ ├── customize.js │ └── icon.js │ ├── lib │ └── HighLightCode │ │ └── prettify.css │ ├── scaling │ ├── test1.html │ └── test2.html │ ├── path │ ├── base.js │ ├── multiple.js │ ├── set-path-color.js │ ├── traffic.js │ └── source-node.js │ ├── extend │ ├── abstractNode.js │ └── link.js │ ├── nodeset │ └── base.js │ └── scene │ └── extend.js ├── .gitreview ├── .gitignore ├── .jshintrc ├── bower.json.tpl ├── package.json ├── update-bower.js └── pom.xml /COPYRIGHT: -------------------------------------------------------------------------------- 1 | NeXt @ ODL -------------------------------------------------------------------------------- /src/style/topology/common/topology.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/web/themes/css/variables.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/topology/common/topology_loading.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/style/topology/themes/black-white/variables.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/test/web/test.js: -------------------------------------------------------------------------------- 1 | var app = new nx.ui.Application(); 2 | -------------------------------------------------------------------------------- /src/test/core/Iterable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by mars on 11/28/13. 3 | */ 4 | -------------------------------------------------------------------------------- /src/test/core/Comparable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by mars on 11/28/13. 3 | */ 4 | -------------------------------------------------------------------------------- /src/test/core/Serializable.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by mars on 11/28/13. 3 | */ 4 | -------------------------------------------------------------------------------- /src/dist/fonts/next-font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/next-font.eot -------------------------------------------------------------------------------- /src/dist/fonts/next-font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/next-font.ttf -------------------------------------------------------------------------------- /src/dist/fonts/next-font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/next-font.woff -------------------------------------------------------------------------------- /src/style/fonts/next-font.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/next-font.eot -------------------------------------------------------------------------------- /src/style/fonts/next-font.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/next-font.ttf -------------------------------------------------------------------------------- /src/style/fonts/next-font.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/next-font.woff -------------------------------------------------------------------------------- /.gitreview: -------------------------------------------------------------------------------- 1 | [gerrit] 2 | host=git.opendaylight.org 3 | port=29418 4 | project=next.git 5 | defaultbranch=master 6 | -------------------------------------------------------------------------------- /src/js/web/ui/Behavior.js: -------------------------------------------------------------------------------- 1 | (function (nx) { 2 | nx.define('nx.ui.Behavior', nx.ui.AbstractComponent, { 3 | }); 4 | })(nx); -------------------------------------------------------------------------------- /src/dist/fonts/cisco/CiscoSansRegular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/CiscoSansRegular.otf -------------------------------------------------------------------------------- /src/style/fonts/cisco/CiscoSansRegular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/CiscoSansRegular.otf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/CiscoSansExtraLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/CiscoSansExtraLight.otf -------------------------------------------------------------------------------- /src/style/fonts/cisco/CiscoSansExtraLight.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/CiscoSansExtraLight.otf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansregular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/ciscosansregular-webfont.eot -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansregular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/ciscosansregular-webfont.ttf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansregular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/ciscosansregular-webfont.woff -------------------------------------------------------------------------------- /src/style/fonts/cisco/ciscosansregular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/ciscosansregular-webfont.eot -------------------------------------------------------------------------------- /src/style/fonts/cisco/ciscosansregular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/ciscosansregular-webfont.ttf -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansextralight-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/ciscosansextralight-webfont.eot -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansextralight-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/ciscosansextralight-webfont.ttf -------------------------------------------------------------------------------- /src/style/fonts/cisco/ciscosansregular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/ciscosansregular-webfont.woff -------------------------------------------------------------------------------- /src/dist/fonts/cisco/ciscosansextralight-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/dist/fonts/cisco/ciscosansextralight-webfont.woff -------------------------------------------------------------------------------- /src/style/fonts/cisco/ciscosansextralight-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/ciscosansextralight-webfont.eot -------------------------------------------------------------------------------- /src/style/fonts/cisco/ciscosansextralight-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/ciscosansextralight-webfont.ttf -------------------------------------------------------------------------------- /src/style/fonts/cisco/ciscosansextralight-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/style/fonts/cisco/ciscosansextralight-webfont.woff -------------------------------------------------------------------------------- /src/libs/bootstrap/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/libs/bootstrap/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /src/libs/bootstrap/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/libs/bootstrap/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /src/libs/bootstrap/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/opendaylight/next/HEAD/src/libs/bootstrap/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /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/style/web/themes/dark/next.less: -------------------------------------------------------------------------------- 1 | @import "../../../bootstrap/less/bootstrap.less"; 2 | @import "../../common.less"; 3 | @import "variables.less"; 4 | @import "overrides.less"; 5 | @import "../../../bootstrap/less/utilities.less"; -------------------------------------------------------------------------------- /src/style/web/themes/green/next.less: -------------------------------------------------------------------------------- 1 | @import "../../../bootstrap/less/bootstrap.less"; 2 | @import "../../common.less"; 3 | @import "variables.less"; 4 | @import "overrides.less"; 5 | @import "../../../bootstrap/less/utilities.less"; -------------------------------------------------------------------------------- /src/style/web/themes/slate/next.less: -------------------------------------------------------------------------------- 1 | @import "../../../bootstrap/less/bootstrap.less"; 2 | @import "../../common.less"; 3 | @import "variables.less"; 4 | @import "overrides.less"; 5 | @import "../../../bootstrap/less/utilities.less"; -------------------------------------------------------------------------------- /src/style/web/themes/yellow/next.less: -------------------------------------------------------------------------------- 1 | @import "../../../bootstrap/less/bootstrap.less"; 2 | @import "../../common.less"; 3 | @import "variables.less"; 4 | @import "overrides.less"; 5 | @import "../../../bootstrap/less/utilities.less"; -------------------------------------------------------------------------------- /src/style/web/themes/blue/next.less: -------------------------------------------------------------------------------- 1 | @import "../../libs/bootstrap/less/bootstrap.less"; 2 | @import "../../common.less"; 3 | @import "variables.less"; 4 | @import "overrides.less"; 5 | @import "../../libs/bootstrap/less/utilities.less"; -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /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/style/web/themes/blue/next-componentlized.less: -------------------------------------------------------------------------------- 1 | .nx { 2 | @import "../../../bootstrap/less/bootstrap.less"; 3 | @import "../../common.less"; 4 | @import "variables.less"; 5 | @import "overrides.less"; 6 | @import "../../../bootstrap/less/utilities.less"; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/style/web/themes/dark/next-componentlized.less: -------------------------------------------------------------------------------- 1 | .nx { 2 | @import "../../../bootstrap/less/bootstrap.less"; 3 | @import "../../common.less"; 4 | @import "variables.less"; 5 | @import "overrides.less"; 6 | @import "../../../bootstrap/less/utilities.less"; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/style/web/themes/green/next-componentlized.less: -------------------------------------------------------------------------------- 1 | .nx { 2 | @import "../../../bootstrap/less/bootstrap.less"; 3 | @import "../../common.less"; 4 | @import "variables.less"; 5 | @import "overrides.less"; 6 | @import "../../../bootstrap/less/utilities.less"; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/style/web/themes/slate/next-componentlized.less: -------------------------------------------------------------------------------- 1 | .nx { 2 | @import "../../../bootstrap/less/bootstrap.less"; 3 | @import "../../common.less"; 4 | @import "variables.less"; 5 | @import "overrides.less"; 6 | @import "../../../bootstrap/less/utilities.less"; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/style/web/themes/blue/overrides.less: -------------------------------------------------------------------------------- 1 | .navbar-brand { 2 | font-family: @headings-font-family; 3 | font-size: 24px; 4 | } 5 | 6 | .dropdown-menu { 7 | > li > a { 8 | &:hover { 9 | color: #fff; 10 | background: @brand-primary; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /src/style/web/themes/green/overrides.less: -------------------------------------------------------------------------------- 1 | .navbar-brand { 2 | font-family: @headings-font-family; 3 | font-size: 24px; 4 | } 5 | 6 | .dropdown-menu { 7 | > li > a { 8 | &:hover { 9 | color: #fff; 10 | background: @brand-primary; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /src/style/web/themes/yellow/next-componentlized.less: -------------------------------------------------------------------------------- 1 | .nx { 2 | @import "../../../bootstrap/less/bootstrap.less"; 3 | @import "../../common.less"; 4 | @import "variables.less"; 5 | @import "overrides.less"; 6 | @import "../../../bootstrap/less/utilities.less"; 7 | } 8 | 9 | -------------------------------------------------------------------------------- /src/bin/yuidoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Next graph", 3 | "description": "Next API docs", 4 | "version": "1.0.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/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/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/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/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/style/web/themes/dark/overrides.less: -------------------------------------------------------------------------------- 1 | .navbar-brand { 2 | font-family: @headings-font-family; 3 | font-size: 24px; 4 | } 5 | 6 | .dropdown-menu { 7 | background-color: #353535; 8 | 9 | > li > a { 10 | color: #ccc; 11 | &:hover { 12 | color: #fff; 13 | background: @brand-primary; 14 | } 15 | } 16 | } 17 | 18 | .help-block { 19 | color: #808080; 20 | } -------------------------------------------------------------------------------- /src/style/web/themes/slate/overrides.less: -------------------------------------------------------------------------------- 1 | .navbar-brand { 2 | font-family: @headings-font-family; 3 | font-size: 24px; 4 | } 5 | 6 | .dropdown-menu { 7 | background-color: #404e5c; 8 | 9 | > li > a { 10 | color: #ccc; 11 | &:hover { 12 | color: #000; 13 | background: @brand-primary; 14 | } 15 | } 16 | } 17 | 18 | .help-block { 19 | color: #808080; 20 | } -------------------------------------------------------------------------------- /src/style/web/themes/yellow/overrides.less: -------------------------------------------------------------------------------- 1 | .navbar-brand { 2 | font-family: @headings-font-family; 3 | font-size: 24px; 4 | } 5 | 6 | .dropdown-menu { 7 | background-color: #353535; 8 | 9 | > li > a { 10 | color: #ccc; 11 | &:hover { 12 | color: #fff; 13 | background: @brand-primary; 14 | } 15 | } 16 | } 17 | 18 | .help-block { 19 | color: #808080; 20 | } -------------------------------------------------------------------------------- /src/style/topology/themes/yellow/yellow.less: -------------------------------------------------------------------------------- 1 | .n-topology.n-topology-yellow{ 2 | @import "variables"; 3 | .n-topology(@brand-primary,@brand-info,@body-bg,@component-active-color,@brand-warning,@gray-dark,@gray) ; 4 | .n-topology-nav(lighten(@body-bg, 20%),lighten(@body-bg, 25%),darken(@text-color,40%),lighten(@body-bg, 30%),darken(@text-color,10%),darken(@text-color,10%),@brand-primary,@body-bg); 5 | .n-topology-loading(@brand-primary); 6 | } -------------------------------------------------------------------------------- /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/style/topology/themes/slate/slate.less: -------------------------------------------------------------------------------- 1 | .n-topology.n-topology-slate{ 2 | @import "variables"; 3 | .n-topology(@brand-primary,@brand-info,@body-bg,@component-active-color,@brand-warning,lighten(@brand-primary, 50%),lighten(@gray, 60%)) ; 4 | .n-topology-nav(lighten(@body-bg, 20%),lighten(@body-bg, 25%),darken(@text-color,40%),lighten(@body-bg, 30%),darken(@text-color,10%),darken(@text-color,10%),@brand-primary,@body-bg); 5 | .n-topology-loading(@brand-primary); 6 | } -------------------------------------------------------------------------------- /src/style/topology/themes/dark/dark.less: -------------------------------------------------------------------------------- 1 | .n-topology.n-topology-dark{ 2 | @import "variables"; 3 | .n-topology(@brand-primary,@brand-info,@body-bg,@component-active-color,@brand-warning,lighten(@brand-primary, 50%),lighten(@brand-primary, 42%)) ; 4 | .n-topology-nav(lighten(@body-bg, 20%),lighten(@body-bg, 25%),darken(@text-color,40%),lighten(@body-bg, 30%),darken(@text-color,10%),darken(@text-color,10%),@brand-primary,@body-bg); 5 | .n-topology-loading(@brand-primary); 6 | } -------------------------------------------------------------------------------- /src/style/topology/themes/green/green.less: -------------------------------------------------------------------------------- 1 | .n-topology.n-topology-green{ 2 | @import "variables"; 3 | .n-topology(@brand-primary,@brand-info,@body-bg,@gray-lighter,@brand-warning,lighten(@brand-primary, 50%),lighten(@brand-primary, 42%)) ; 4 | .n-topology-nav(darken(@body-bg, 8.1%),darken(@body-bg, 15.5%),lighten(@text-color,40%),darken(@body-bg, 15.1%),lighten(@text-color,30%),lighten(@text-color,10%),@brand-primary,@body-bg); 5 | .n-topology-loading(@brand-primary); 6 | } -------------------------------------------------------------------------------- /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/style/topology/themes/blue/blue.less: -------------------------------------------------------------------------------- 1 | .n-topology.n-topology-blue { 2 | @import "variables"; 3 | .n-topology(@brand-primary, @brand-info, @body-bg, @gray-lighter, @brand-warning,lighten(@brand-primary, 50%),lighten(@brand-primary, 42%)); 4 | .n-topology-nav(darken(@body-bg, 8.1%),darken(@body-bg, 15.5%),lighten(@text-color,40%),darken(@body-bg, 15.1%),lighten(@text-color,30%),lighten(@text-color,10%),@brand-primary,@body-bg); 5 | .n-topology-loading(@brand-primary); 6 | } 7 | 8 | -------------------------------------------------------------------------------- /bower.json.tpl: -------------------------------------------------------------------------------- 1 | { 2 | "name": "next-bower", 3 | "homepage": "http://next-ui.com", 4 | "authors": [ 5 | "Aikepaer Abuduweili " 6 | ], 7 | "description": "NeXt UI Toolkit bower and npm distribution.", 8 | "main": [ 9 | "js/next.js", 10 | "css/next.css" 11 | ], 12 | "moduleType": [], 13 | "keywords": [ 14 | "NeXt", 15 | "topology", 16 | "SDN" 17 | ], 18 | "ignore": [], 19 | "version": "{{version}}", 20 | "license": "EPL-1.0" 21 | } -------------------------------------------------------------------------------- /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/style/topology/common/topology_thumbnail.less: -------------------------------------------------------------------------------- 1 | .n-topology-thumbnail { 2 | position: absolute; 3 | border: solid 1px #ccc; 4 | box-shadow: 0px 0px 10px #ccc; 5 | margin-top: -10px; 6 | margin-left: -10px; 7 | z-index: 100; 8 | background: #fff; 9 | &-container { 10 | position: relative; 11 | } 12 | &-win { 13 | position: absolute; 14 | border: solid 1px #f00; 15 | } 16 | 17 | &-svg { 18 | border: solid 1px #c4c4c4; 19 | background: #fff; 20 | } 21 | .handler { 22 | position: absolute; 23 | bottom: 0px; 24 | right: 0px; 25 | cursor: pointer; 26 | } 27 | 28 | } -------------------------------------------------------------------------------- /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/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/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/wells.less: -------------------------------------------------------------------------------- 1 | // 2 | // Wells 3 | // -------------------------------------------------- 4 | 5 | 6 | // Base class 7 | .well { 8 | min-height: 20px; 9 | padding: 19px; 10 | margin-bottom: 20px; 11 | background-color: @well-bg; 12 | border: 1px solid darken(@well-bg, 7%); 13 | border-radius: @border-radius-base; 14 | .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); 15 | blockquote { 16 | border-color: #ddd; 17 | border-color: rgba(0,0,0,.15); 18 | } 19 | } 20 | 21 | // Sizes 22 | .well-lg { 23 | padding: 24px; 24 | border-radius: @border-radius-large; 25 | } 26 | .well-sm { 27 | padding: 9px; 28 | border-radius: @border-radius-small; 29 | } 30 | -------------------------------------------------------------------------------- /src/style/topology/common.less: -------------------------------------------------------------------------------- 1 | .n-userselect, 2 | .n-userselect * { 3 | .user-select(none); 4 | } 5 | 6 | .n-transition { 7 | -webkit-transition: all 0.4 !important; /* For Safari 3.1 to 6.0 */ 8 | transition: all 0.4s !important; 9 | } 10 | 11 | .n-moveCursor { 12 | cursor: move !important; 13 | } 14 | 15 | .n-dragCursor { 16 | cursor: pointer; 17 | } 18 | 19 | .n-crosshairCursor, 20 | .n-crosshairCursor * { 21 | cursor: crosshair !important; 22 | } 23 | 24 | .n-zoomInCursor { 25 | cursor: -webkit-zoom-in; 26 | cursor: zoom-in; 27 | } 28 | 29 | .n-waitCursor { 30 | cursor: wait; 31 | } 32 | 33 | .n-blockEvent, 34 | .n-blockEvent * { 35 | pointer-events: none; 36 | } 37 | 38 | .n-hidden { 39 | display: none !important; 40 | } -------------------------------------------------------------------------------- /src/libs/bootstrap/less/thumbnails.less: -------------------------------------------------------------------------------- 1 | // 2 | // Thumbnails 3 | // -------------------------------------------------- 4 | 5 | 6 | // Mixin and adjust the regular image class 7 | .thumbnail { 8 | .img-thumbnail(); 9 | display: block; // Override the inline-block from `.img-thumbnail` 10 | margin-bottom: @line-height-computed; 11 | 12 | > img { 13 | .img-responsive(); 14 | margin-left: auto; 15 | margin-right: auto; 16 | } 17 | 18 | // Add a hover state for linked versions only 19 | a&:hover, 20 | a&:focus, 21 | a&.active { 22 | border-color: @link-color; 23 | } 24 | 25 | // Image captions 26 | .caption { 27 | padding: @thumbnail-caption-padding; 28 | color: @thumbnail-caption-color; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /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/style/topology/next-topology.less: -------------------------------------------------------------------------------- 1 | @import "../../libs/bootstrap/less/mixins"; 2 | @import "common/font.less"; 3 | @import "common/topology.less"; 4 | @import "themes/blue/blue.less"; 5 | @import "themes/dark/dark.less"; 6 | @import "themes/green/green.less"; 7 | @import "themes/slate/slate.less"; 8 | @import "themes/yellow/yellow.less"; 9 | @import "common/topology_tooltip.less"; 10 | @import "common/topology_nav.less"; 11 | @import "common/topology_loading.less"; 12 | @import "common/topology_thumbnail.less"; 13 | @import "common.less"; 14 | @import "themes/blue/variables.less"; 15 | @import "../../libs/bootstrap/less/utilities.less"; 16 | @import "../../libs/bootstrap/less/buttons.less"; 17 | @import "../../libs/bootstrap/less/button-groups.less"; 18 | @import "../../libs/bootstrap/less/popovers.less"; 19 | -------------------------------------------------------------------------------- /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/style/topology/next-topology-componentized.less: -------------------------------------------------------------------------------- 1 | .next{ 2 | @import "../../libs/bootstrap/less/mixins.less"; 3 | @import "common/font.less"; 4 | @import "common/topology.less"; 5 | @import "themes/blue/blue.less"; 6 | @import "themes/dark/dark.less"; 7 | @import "themes/green/green.less"; 8 | @import "themes/slate/slate.less"; 9 | @import "themes/yellow/yellow.less"; 10 | @import "common/topology_tooltip.less"; 11 | @import "common/topology_nav.less"; 12 | @import "common/topology_loading.less"; 13 | @import "common/topology_thumbnail.less"; 14 | @import "common.less"; 15 | @import "themes/blue/variables.less"; 16 | @import "../../libs/bootstrap/less/utilities.less"; 17 | @import "../../libs/bootstrap/less/buttons.less"; 18 | @import "../../libs/bootstrap/less/button-groups.less"; 19 | @import "../../libs/bootstrap/less/popovers.less"; 20 | } -------------------------------------------------------------------------------- /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/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/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/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/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/style/web/common.less: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Cisco Sans Extra Light"; 3 | src: ~"url('../fonts/cisco/ciscosansextralight-webfont.eot')"; 4 | src: ~"url('../fonts/cisco/ciscosansextralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cisco/ciscosansextralight-webfont.woff') format('woff'), url('../fonts/cisco/ciscosansextralight-webfont.ttf') format('truetype'), url('../fonts/cisco/ciscosansextralight-webfont.svg#CiscoSansExtraLight') format('svg')"; 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | @font-face { 10 | font-family: "Cisco Sans Reg"; 11 | src: ~"url('../fonts/cisco/ciscosansregular-webfont.eot')"; 12 | src: ~"url('../fonts/cisco/ciscosansregular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/cisco/ciscosansregular-webfont.woff') format('woff'), url('../fonts/cisco/ciscosansregular-webfont.ttf') format('truetype'), url('../fonts/cisco/ciscosansregular-webfont.svg#CiscoSansReg') format('svg')"; 13 | font-weight: normal; 14 | font-style: normal; 15 | } -------------------------------------------------------------------------------- /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/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/libs/bootstrap/less/utilities.less: -------------------------------------------------------------------------------- 1 | // 2 | // Utility classes 3 | // -------------------------------------------------- 4 | 5 | 6 | // Floats 7 | // ------------------------- 8 | 9 | .clearfix { 10 | .clearfix(); 11 | } 12 | .center-block { 13 | .center-block(); 14 | } 15 | .pull-right { 16 | float: right !important; 17 | } 18 | .pull-left { 19 | float: left !important; 20 | } 21 | 22 | 23 | // Toggling content 24 | // ------------------------- 25 | 26 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 27 | .hide { 28 | display: none !important; 29 | } 30 | .show { 31 | display: block !important; 32 | } 33 | .invisible { 34 | visibility: hidden; 35 | } 36 | .text-hide { 37 | .text-hide(); 38 | } 39 | 40 | 41 | // Hide from screenreaders and browsers 42 | // 43 | // Credit: HTML5 Boilerplate 44 | 45 | .hidden { 46 | display: none !important; 47 | visibility: hidden !important; 48 | } 49 | 50 | 51 | // For Affix plugin 52 | // ------------------------- 53 | 54 | .affix { 55 | position: fixed; 56 | } 57 | -------------------------------------------------------------------------------- /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/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/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/style/topology/common/topology_tooltip.less: -------------------------------------------------------------------------------- 1 | @tooltipArrowsize: 8px; 2 | @tootipWidth: 200px; 3 | .n-topology-tooltip { 4 | padding: 0px; 5 | opacity: 0.8 !important; 6 | max-height: 450px; 7 | &-header { 8 | min-width: 160px; 9 | line-height: 24px; 10 | position: relative; 11 | border-bottom: dotted 1px #ccc; 12 | 13 | &-actions { 14 | float: right; 15 | 16 | i { 17 | cursor: pointer; 18 | } 19 | 20 | } 21 | &-text { 22 | line-height: 24px; 23 | color: #333; 24 | font-size: 14px; 25 | font-weight: bold; 26 | } 27 | 28 | } 29 | &-content { 30 | margin-bottom: 6px; 31 | padding: 3px; 32 | min-height: 30px; 33 | 34 | label { 35 | display: inline-block; 36 | margin-right: 8px; 37 | font-weight: bold; 38 | } 39 | 40 | ul { 41 | margin: 0; 42 | padding: 0px; 43 | } 44 | li { 45 | list-style: none; 46 | } 47 | 48 | } 49 | 50 | &:after { 51 | display: none; 52 | } 53 | 54 | .popover-content { 55 | padding: 5px 10px; 56 | } 57 | 58 | } -------------------------------------------------------------------------------- /src/libs/bootstrap/less/media.less: -------------------------------------------------------------------------------- 1 | // Media objects 2 | // Source: http://stubbornella.org/content/?p=497 3 | // -------------------------------------------------- 4 | 5 | 6 | // Common styles 7 | // ------------------------- 8 | 9 | // Clear the floats 10 | .media, 11 | .media-body { 12 | overflow: hidden; 13 | zoom: 1; 14 | } 15 | 16 | // Proper spacing between instances of .media 17 | .media, 18 | .media .media { 19 | margin-top: 15px; 20 | } 21 | .media:first-child { 22 | margin-top: 0; 23 | } 24 | 25 | // For images and videos, set to block 26 | .media-object { 27 | display: block; 28 | } 29 | 30 | // Reset margins on headings for tighter default spacing 31 | .media-heading { 32 | margin: 0 0 5px; 33 | } 34 | 35 | 36 | // Media image alignment 37 | // ------------------------- 38 | 39 | .media { 40 | > .pull-left { 41 | margin-right: 10px; 42 | } 43 | > .pull-right { 44 | margin-left: 10px; 45 | } 46 | } 47 | 48 | 49 | // Media list variation 50 | // ------------------------- 51 | 52 | // Undo default ul/ol styles 53 | .media-list { 54 | padding-left: 0; 55 | list-style: none; 56 | } 57 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/pager.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pager pagination 3 | // -------------------------------------------------- 4 | 5 | 6 | .pager { 7 | padding-left: 0; 8 | margin: @line-height-computed 0; 9 | list-style: none; 10 | text-align: center; 11 | .clearfix(); 12 | li { 13 | display: inline; 14 | > a, 15 | > span { 16 | display: inline-block; 17 | padding: 5px 14px; 18 | background-color: @pagination-bg; 19 | border: 1px solid @pagination-border; 20 | border-radius: @pager-border-radius; 21 | } 22 | 23 | > a:hover, 24 | > a:focus { 25 | text-decoration: none; 26 | background-color: @pagination-hover-bg; 27 | } 28 | } 29 | 30 | .next { 31 | > a, 32 | > span { 33 | float: right; 34 | } 35 | } 36 | 37 | .previous { 38 | > a, 39 | > span { 40 | float: left; 41 | } 42 | } 43 | 44 | .disabled { 45 | > a, 46 | > a:hover, 47 | > a:focus, 48 | > span { 49 | color: @pager-disabled-color; 50 | background-color: @pagination-bg; 51 | cursor: not-allowed; 52 | } 53 | } 54 | 55 | } 56 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/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/bin/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/test/core/data/Counter.js: -------------------------------------------------------------------------------- 1 | module("Counter"); 2 | 3 | test("Storage test", function () { 4 | var counter = new nx.data.Counter(); 5 | var map = { 6 | "Null": null, 7 | "Undefined": undefined, 8 | "String0": "", 9 | "String": "hello", 10 | "BooleanTrue": true, 11 | "BooleanFalse": false, 12 | "Number0": 0, 13 | "Number": 100, 14 | "Object": {}, 15 | "Array": [], 16 | "NXObject": new nx.Observable() 17 | }; 18 | nx.each(map, function (value, key) { 19 | ok(counter.getCount(value) === 0, "Initial count correct for " + key); 20 | counter.setCount(value, 100); 21 | ok(counter.getCount(value) === 100, "Set count correct for " + key); 22 | counter.setCount(value, -100); 23 | ok(counter.getCount(value) === -100, "Set negative count correct for " + key); 24 | counter.increase(value); 25 | ok(counter.getCount(value) === -99, "Increase count correct for " + key); 26 | counter.increase(value, 0); 27 | ok(counter.getCount(value) === -99, "Increase count 0 correct for " + key); 28 | counter.increase(value, 100); 29 | ok(counter.getCount(value) === 1, "Increase count 100 correct for " + key); 30 | counter.decrease(value); 31 | ok(counter.getCount(value) === 0, "Decrease count correct for " + key); 32 | counter.decrease(value, 0); 33 | ok(counter.getCount(value) === 0, "Decrease count 0 correct for " + key); 34 | counter.decrease(value, 100); 35 | ok(counter.getCount(value) === -100, "Decrease count 100 correct for " + key); 36 | }); 37 | }); 38 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/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/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); -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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/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/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/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/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/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/test/core/data/Dictionary.js: -------------------------------------------------------------------------------- 1 | module("Dictionary.js"); 2 | 3 | var MyDictionary = nx.define(nx.data.Dictionary, {}); 4 | 5 | test('init dict', function () { 6 | var dict1 = new nx.data.Dictionary(); 7 | var dict2 = new nx.data.Dictionary({ 8 | a: 1, 9 | b: 2 10 | }); 11 | var dict3 = new nx.data.Dictionary(dict2); 12 | var dict5 = new nx.data.Dictionary(new MyDictionary({ 13 | x: "x", 14 | y: "y", 15 | z: "z" 16 | })); 17 | var dict6 = new MyDictionary(dict2); 18 | 19 | ok(dict1.count() === 0, 'init an empty Dictionary'); 20 | ok(dict2.count() === 2, 'init a Dictionary by object'); 21 | ok(dict3.count() === 2, 'init a Dictionary by Dictionary'); 22 | ok(dict5.count() === 3, 'init a Dictionary by custom Dictionary'); 23 | ok(dict6.count() === 2, 'init a custom Dictionary by Dictionary'); 24 | }); 25 | 26 | test('change dict', function () { 27 | var dict1 = new nx.data.Dictionary({ 28 | a: 1, 29 | b: 2 30 | }); 31 | // add 32 | var item = dict1.setItem("map", { 33 | x: 1, 34 | y: 2, 35 | z: 3 36 | }); 37 | deepEqual(dict1.getItem("map"), { 38 | x: 1, 39 | y: 2, 40 | z: 3 41 | }, "add value"); 42 | deepEqual(item.value(), { 43 | x: 1, 44 | y: 2, 45 | z: 3 46 | }, "add item value"); 47 | // remove 48 | item = dict1.removeItem("b"); 49 | equal(dict1.getItem("b"), undefined, "removed successful"); 50 | equal(item.key(), "b", "removed item key"); 51 | equal(item.value(), 2, "removed item value"); 52 | equal(item._dict, null, "removed item references nothing"); 53 | // set 54 | item = dict1.setItem("a", 3); 55 | equal(dict1.getItem("a"), 3, "set value"); 56 | equal(item.value(), 3, "set item value"); 57 | // clear 58 | var items = dict1.clear(); 59 | equal(items.length, 2, "item count"); 60 | equal(items[0]._dict, null, "cleared item references nothing"); 61 | equal(items[0].key(), "a", "cleared item key"); 62 | equal(items[0].value(), 3, "cleared item value"); 63 | equal(dict1.count(), 0, "clear successful"); 64 | }); 65 | -------------------------------------------------------------------------------- /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/libs/bootstrap/less/print.less: -------------------------------------------------------------------------------- 1 | // 2 | // Basic print styles 3 | // -------------------------------------------------- 4 | // Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 5 | 6 | @media print { 7 | 8 | * { 9 | text-shadow: none !important; 10 | color: #000 !important; // Black prints faster: h5bp.com/s 11 | background: transparent !important; 12 | box-shadow: none !important; 13 | } 14 | 15 | a, 16 | a:visited { 17 | text-decoration: underline; 18 | } 19 | 20 | a[href]:after { 21 | content: " (" attr(href) ")"; 22 | } 23 | 24 | abbr[title]:after { 25 | content: " (" attr(title) ")"; 26 | } 27 | 28 | // Don't show links for images, or javascript/internal links 29 | a[href^="javascript:"]:after, 30 | a[href^="#"]:after { 31 | content: ""; 32 | } 33 | 34 | pre, 35 | blockquote { 36 | border: 1px solid #999; 37 | page-break-inside: avoid; 38 | } 39 | 40 | thead { 41 | display: table-header-group; // h5bp.com/t 42 | } 43 | 44 | tr, 45 | img { 46 | page-break-inside: avoid; 47 | } 48 | 49 | img { 50 | max-width: 100% !important; 51 | } 52 | 53 | @page { 54 | margin: 2cm .5cm; 55 | } 56 | 57 | p, 58 | h2, 59 | h3 { 60 | orphans: 3; 61 | widows: 3; 62 | } 63 | 64 | h2, 65 | h3 { 66 | page-break-after: avoid; 67 | } 68 | 69 | // Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 70 | // Once fixed, we can just straight up remove this. 71 | select { 72 | background: #fff !important; 73 | } 74 | 75 | // Bootstrap components 76 | .navbar { 77 | display: none; 78 | } 79 | .table { 80 | td, 81 | th { 82 | background-color: #fff !important; 83 | } 84 | } 85 | .btn, 86 | .dropup > .btn { 87 | > .caret { 88 | border-top-color: #000 !important; 89 | } 90 | } 91 | .label { 92 | border: 1px solid #000; 93 | } 94 | 95 | .table { 96 | border-collapse: collapse !important; 97 | } 98 | .table-bordered { 99 | th, 100 | td { 101 | border: 1px solid #ddd !important; 102 | } 103 | } 104 | 105 | } 106 | -------------------------------------------------------------------------------- /src/libs/bootstrap/less/pagination.less: -------------------------------------------------------------------------------- 1 | // 2 | // Pagination (multiple pages) 3 | // -------------------------------------------------- 4 | .pagination { 5 | display: inline-block; 6 | padding-left: 0; 7 | margin: @line-height-computed 0; 8 | border-radius: @border-radius-base; 9 | 10 | > li { 11 | display: inline; // Remove list-style and block-level defaults 12 | > a, 13 | > span { 14 | position: relative; 15 | float: left; // Collapse white-space 16 | padding: @padding-base-vertical @padding-base-horizontal; 17 | line-height: @line-height-base; 18 | text-decoration: none; 19 | background-color: @pagination-bg; 20 | border: 1px solid @pagination-border; 21 | margin-left: -1px; 22 | } 23 | &:first-child { 24 | > a, 25 | > span { 26 | margin-left: 0; 27 | .border-left-radius(@border-radius-base); 28 | } 29 | } 30 | &:last-child { 31 | > a, 32 | > span { 33 | .border-right-radius(@border-radius-base); 34 | } 35 | } 36 | } 37 | 38 | > li > a, 39 | > li > span { 40 | &:hover, 41 | &:focus { 42 | background-color: @pagination-hover-bg; 43 | } 44 | } 45 | 46 | > .active > a, 47 | > .active > span { 48 | &, 49 | &:hover, 50 | &:focus { 51 | z-index: 2; 52 | color: @pagination-active-color; 53 | background-color: @pagination-active-bg; 54 | border-color: @pagination-active-bg; 55 | cursor: default; 56 | } 57 | } 58 | 59 | > .disabled { 60 | > span, 61 | > span:hover, 62 | > span:focus, 63 | > a, 64 | > a:hover, 65 | > a:focus { 66 | color: @pagination-disabled-color; 67 | background-color: @pagination-bg; 68 | border-color: @pagination-border; 69 | cursor: not-allowed; 70 | } 71 | } 72 | } 73 | 74 | // Sizing 75 | // -------------------------------------------------- 76 | 77 | // Large 78 | .pagination-lg { 79 | .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large); 80 | } 81 | 82 | // Small 83 | .pagination-sm { 84 | .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small); 85 | } 86 | -------------------------------------------------------------------------------- /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/libs/bootstrap/less/progress-bars.less: -------------------------------------------------------------------------------- 1 | // 2 | // Progress bars 3 | // -------------------------------------------------- 4 | 5 | 6 | // Bar animations 7 | // ------------------------- 8 | 9 | // WebKit 10 | @-webkit-keyframes progress-bar-stripes { 11 | from { background-position: 40px 0; } 12 | to { background-position: 0 0; } 13 | } 14 | 15 | // Firefox 16 | @-moz-keyframes progress-bar-stripes { 17 | from { background-position: 40px 0; } 18 | to { background-position: 0 0; } 19 | } 20 | 21 | // Opera 22 | @-o-keyframes progress-bar-stripes { 23 | from { background-position: 0 0; } 24 | to { background-position: 40px 0; } 25 | } 26 | 27 | // Spec and IE10+ 28 | @keyframes progress-bar-stripes { 29 | from { background-position: 40px 0; } 30 | to { background-position: 0 0; } 31 | } 32 | 33 | 34 | 35 | // Bar itself 36 | // ------------------------- 37 | 38 | // Outer container 39 | .progress { 40 | overflow: hidden; 41 | height: @line-height-computed; 42 | margin-bottom: @line-height-computed; 43 | background-color: @progress-bg; 44 | border-radius: @border-radius-base; 45 | .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); 46 | } 47 | 48 | // Bar of progress 49 | .progress-bar { 50 | float: left; 51 | width: 0%; 52 | height: 100%; 53 | font-size: @font-size-small; 54 | line-height: @line-height-computed; 55 | color: @progress-bar-color; 56 | text-align: center; 57 | background-color: @progress-bar-bg; 58 | .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); 59 | .transition(width .6s ease); 60 | } 61 | 62 | // Striped bars 63 | .progress-striped .progress-bar { 64 | #gradient > .striped(); 65 | background-size: 40px 40px; 66 | } 67 | 68 | // Call animation for the active one 69 | .progress.active .progress-bar { 70 | .animation(progress-bar-stripes 2s linear infinite); 71 | } 72 | 73 | 74 | 75 | // Variations 76 | // ------------------------- 77 | 78 | .progress-bar-success { 79 | .progress-bar-variant(@progress-bar-success-bg); 80 | } 81 | 82 | .progress-bar-info { 83 | .progress-bar-variant(@progress-bar-info-bg); 84 | } 85 | 86 | .progress-bar-warning { 87 | .progress-bar-variant(@progress-bar-warning-bg); 88 | } 89 | 90 | .progress-bar-danger { 91 | .progress-bar-variant(@progress-bar-danger-bg); 92 | } 93 | -------------------------------------------------------------------------------- /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/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/libs/bootstrap/less/list-group.less: -------------------------------------------------------------------------------- 1 | // 2 | // List groups 3 | // -------------------------------------------------- 4 | 5 | // Base class 6 | // 7 | // Easily usable on