nx.graphic.Topology Class
Topology base class
var topologyData = {
nodes: [
{"id": 0, "x": 410, "y": 100, "name": "12K-1"},
{"id": 1, "x": 410, "y": 280, "name": "12K-2"},
{"id": 2, "x": 660, "y": 280, "name": "Of-9k-03"},
{"id": 3, "x": 660, "y": 100, "name": "Of-9k-02"},
{"id": 4, "x": 180, "y": 190, "name": "Of-9k-01"}
],
links: [
{"source": 0, "target": 1},
{"source": 1, "target": 2},
{"source": 1, "target": 3},
{"source": 4, "target": 1},
{"source": 2, "target": 3},
{"source": 2, "target": 0},
{"source": 3, "target": 0},
{"source": 3, "target": 0},
{"source": 3, "target": 0},
{"source": 0, "target": 4},
{"source": 0, "target": 4},
{"source": 0, "target": 3}
]
};
nx.define('MyTopology', nx.ui.Component, {
view: {
content: {
type: 'nx.graphic.Topology',
props: {
width: 800,
height: 800,
nodeConfig: {
label: 'model.id'
},
showIcon: true,
data: topologyData
}
}
}
});
var app = new nx.ui.Application();
var comp = new MyTopology();
comp.attach(app);
Item Index
Methods
- activateScene
- adaptToContainer
- addLink
- addNode
- addNodeSet
- adjustLayout
- attach
- attachLayer
- clear
- clearBinding
- deactivateScene
- destroy
- detach
- dispose
- eachLink
- eachNode
- fadeOut
- fit
- getBinding
- getContainer
- getData
- getLayer
- getLink
- getNode
- insertData
- insertLayerAfter
- move
- notify
- onAttach
- onChildAttach
- onChildDetach
- onDetach
- prependLayer
- register
- registerScene
- removeLink
- removeNode
- resize
- resolve
- setBinding
- setData
- unregister
- unwatch
- zoom
- zoomByBound
- zoomByNodes
Properties
- adaptive
- autoLayout
- count
- currentSceneName
- data
- dataProcessor
- enableGradualScaling
- enableSmartLabel
- enableSmartNode
- fade
- fadeActivePriority
- forceFade
- graph
- height
- identityKey
- layers
- layersMap
- linkSetInstanceClass
- model
- nodeDraggable
- nodeInstanceClass
- nodeSetInstanceClass
- owner
- padding
- parent
- scalable
- scenes
- scenesMap
- selectedNodes
- showIcon
- showNavigation
- stage
- status
- supportMultipleLink
- theme
- tooltipManager
- tooltipManagerConfig
- viewSettingPanel
- width
Methods
activateScene
-
name
Activate a scene, topology only has one active scene.
Parameters:
-
name
StringScene name which be passed at registerScene
adaptToContainer
()
Make topology adapt to container,container should set width/height
addLink
-
obj
-
inOption
Add a link to topology
Parameters:
-
obj
JSON -
inOption
Config
Returns:
addNodeSet
-
obj
-
[inOption]
-
[parentNodeSet]
Add a nodeSet
Returns:
adjustLayout
()
If enable enableSmartNode, this function will auto adjust the node's overlapping and set the nodes to right size
attachLayer
-
name
-
layer
attach a layer to topology, that should be subclass of nx.graphic.Topology.Layer
clear
()
Clear all layer's content
deactivateScene
()
Deactivate a certain scene
destroy
()
Destroy the component.
detach
()
Detach the component from parent.
dispose
()
Dispose the component.
fadeOut
-
[force]
-
[callback]
-
[context]
fade out layer
fit
()
Make topology graphic fit stage
getBinding
-
prop
Get existing binding object for specified property.
Parameters:
-
prop
Object
Returns:
getContainer
-
comp
Get the container for component.
Parameters:
-
comp
Object
Returns:
getData
()
JSON
Get topology data, recommend use topo.data()
Returns:
getLayer
-
name
Get a layer reference by name
Parameters:
-
name
StringThe name you pass to topology when you attacherLayer/prependLayer/insertLayerAfter
Returns:
Instance of a layer
insertData
-
data
Insert data to topology
Parameters:
-
data
JSONshould be {nodes:[],links:[]}
insertLayerAfter
-
name
-
layer
-
upsideLayerName
Insert a layer under a certain layer, that should be subclass of nx.graphic.Topology.Layer
move
-
x
-
y
-
[duration]
Move topology
onAttach
()
Template method for component attach.
onChildAttach
()
Template method for child component attach.
onChildDetach
()
Template method for child component detach.
onDetach
()
Template method for component detach.
prependLayer
-
name
-
layer
Prepend a layer to topology, that should be subclass of nx.graphic.Topology.Layer
register
-
name
-
value
-
force
Register a resource.
registerScene
-
name
-
inClass
Register a scene to topology
setBinding
-
prop
-
expr
-
source
Set binding for specified property.
setData
-
data
-
[callback]
-
[context]
Set data to topology, recommend use topo.data(data)
zoomByBound
-
inBound
-
[callback]
-
[context]
-
[duration]
Zoom topology by a bound
Properties
adaptive
Boolean
Set to true will adapt to topology's outside container, set to ture will ignore width/height
currentSceneName
Unknown
Current scene name
data
JSON
set/get the topology' data, data should follow Common Topology Data Definition
dataProcessor
String
Pre data processor, it could be 'force'/'quick'. It could also support register a new processor
enableGradualScaling
Boolean
Enabling gradual scaling feature when zooming, set to false will improve the performance
enableSmartLabel
Unknown
Enable smart label
fade
Unknown
Get fade status.
fadeActivePriority
Unknown
Set active priority over highlight.
forceFade
Unknown
Force layer fade.
layers
Unknown
layersMap
Unknown
linkSetInstanceClass
Unknown
LinkSet instance class name, support function
model
Any
nodeDraggable
Unknown
Set node's draggable
nodeInstanceClass
Unknown
Node instance class name, support function
nodeSetInstanceClass
Unknown
NodeSet instance class name, support function
All node's config. key is node's property, support super binding value could be a single string eg: color:'#f00' value could be a an expression eg: label :'{model.id}' value could be a function eg iconType : function (model,instance){ return 'router'} value could be a normal binding expression eg : label :'{#label}'
scenes
Unknown
scenesMap
Unknown
selectedNodes
nx.data.ObservableCollection
All selected nodes, could direct add/remove nodes to this collection
showIcon
Unknown
Show or hide node's icon
supportMultipleLink
Boolean
Is topology support Multiple link , is false will highly improve performance
tooltipManager
Unknown
get tooltip manager
tooltipManagerConfig
Unknown
Set/get the tooltip manager config
Events
afterSetData
Fired after process data
beforeSetData
Fired before start process data
Event Payload:
-
sender
ObjectTrigger instance
-
data
JSONevent object
clickStage
Fired when click the stage
down
Fired when press down arrow key
dragStage
Fired when dragging stage
dragStageEnd
Fired when drag end stage
dragStageStart
Fired when start drag stage
enter
Fired when press enter key
esc
Fired when press esc key
fit
Fired when after topology fit to stage
insertData
Fired after insert data
left
Fired when press left arrow key
pressA
Fired when press a key
pressF
Fired when press f key
pressM
Fired when press m key
pressR
Fired when press r key
pressS
Fired when press s key
pressStage
Fired when mouse press stage, this is a capture event
ready
Fired when topology appended to container with with& height
resizeStage
Fired when topology's stage changed
right
Fired when press right arrow key
space
Fired when press space key
topologyGenerated
Fired when all topology elements generated
up
Fired when press up arrow key
zoomend
Fired when end zooming