nx.graphic.Topology - Next UI Toolkit

#

API Docs for: trial
Show: Inherited Protected Private Deprecated

# nx.graphic.Topology Class

Uses

- nx.graphic.Topology.Config
- nx.graphic.Topology.Projection
- nx.graphic.Topology.Graph
- nx.graphic.Topology.Event
- nx.graphic.Topology.StageMixin
- nx.graphic.Topology.NodeMixin
- nx.graphic.Topology.LinkMixin
- nx.graphic.Topology.LayerMixin
- nx.graphic.Topology.TooltipMixin
- nx.graphic.Topology.SceneMixin

Extends nx.ui.Component
Module: nx.graphic.Topology

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);

- Index
- Methods
- Properties
- Events

## 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

### Events

- afterSetData
- beforeSetData
- clickStage
- down
- dragStage
- dragStageEnd
- dragStageStart
- enter
- esc
- fit
- insertData
- left
- pressA
- pressF
- pressM
- pressR
- pressS
- pressStage
- ready
- resizeStage
- right
- space
- topologyGenerated
- up
- zoomend
- zooming

## Methods

### `activateScene`

(

- `name`

)

Inherited from nx.graphic.Topology.SceneMixin:

Activate a scene, topology only has one active scene.

#### Parameters:

- `name` String

  Scene name which be passed at registerScene

### `adaptToContainer`

()

Inherited from nx.graphic.Topology.StageMixin:

Make topology adapt to container,container should set width/height

### `addLink`

(

- `obj`
- `inOption`

)
nx.graphic.Topology.Link

Inherited from nx.graphic.Topology.LinkMixin:

Add a link to topology

#### Parameters:

- `obj` JSON
- `inOption` Config

#### Returns:

nx.graphic.Topology.Link:

### `addNode`

(

- `obj`
- `inOption`

)

Inherited from nx.graphic.Topology.NodeMixin:

Add a node to topology

#### Parameters:

- `obj` Object
- `inOption` Object

#### Returns:

:

### `addNodeSet`

(

- `obj`
- `[inOption]`
- `[parentNodeSet]`

)

Inherited from nx.graphic.Topology.NodeMixin:

Add a nodeSet

#### Parameters:

- `obj` Object
- `[inOption]` Object optional
- `[parentNodeSet]` Object optional

#### Returns:

:

### `adjustLayout`

()

Inherited from nx.graphic.Topology.StageMixin:

If enable enableSmartNode, this function will auto adjust the node's overlapping and set the nodes to right size

### `attach`

(

- `parent`
- `index`

)

Inherited from nx.ui.AbstractComponent:

Attach the component to parent.

#### Parameters:

- `parent` Object
- `index` Object

### `attachLayer`

(

- `name`
- `layer`

)

Inherited from nx.graphic.Topology.LinkMixin:

attach a layer to topology, that should be subclass of nx.graphic.Topology.Layer

#### Parameters:

- `name` String

  handler to get this layer

- `layer` Object

  <String,nx.graphic.Topology.Layer> Could be string of a layer's class name, or a reference of a layer

### `clear`

()

Clear all layer's content

### `clearBinding`

(

- `prop`

)

Inherited from nx.Observable:

Clear binding for specified property.

#### Parameters:

- `prop` Object

### ``

(

- `names`
- `handler`
- `context`

)

Inherited from nx.Observable:

#### Parameters:

- `names` Object
- `handler` Object
- `context` Object

### `deactivateScene`

()

Inherited from nx.graphic.Topology.SceneMixin:

Deactivate a certain scene

### `destroy`

()

Inherited from nx.ui.AbstractComponent:

Destroy the component.

### `detach`

()

Inherited from nx.ui.AbstractComponent:

Detach the component from parent.

### `dispose`

()

Inherited from nx.Observable

Dispose the component.

### `eachLink`

(

- `callback`
- `context`

)

Inherited from nx.graphic.Topology.LinkMixin:

Traverse each link

#### Parameters:

- `callback` Object

- `context` Object

### `eachNode`

(

- `callback`
- `context`

)

Inherited from nx.graphic.Topology.NodeMixin:

Traverse each node

#### Parameters:

- `callback` Object
- `context` Object

### `fadeOut`

(

- `[force]`
- `[callback]`
- `[context]`

)

Inherited from nx.graphic.Topology.LinkMixin:

fade out layer

#### Parameters:

- `[force]` Boolean optional

  force layer fade out and can't fade in

- `[callback]` Function optional

  callback after fade out

- `[context]` Object optional

  callback context

### `fit`

()

Inherited from nx.graphic.Topology.StageMixin:

Make topology graphic fit stage

### `getBinding`

(

- `prop`

)

Inherited from nx.Observable:

Get existing binding object for specified property.

#### Parameters:

- `prop` Object

#### Returns:

:

### `getContainer`

(

- `comp`

)
nx.dom.Element

Inherited from nx.ui.AbstractComponent:

Get the container for component.

#### Parameters:

- `comp` Object

#### Returns:

nx.dom.Element:

### `getData`

() JSON

Inherited from nx.graphic.Topology.Graph:

Get topology data, recommend use topo.data()

#### Returns:

JSON:

### `getLayer`

(

- `name`

)

Inherited from nx.graphic.Topology.LinkMixin:

Get a layer reference by name

#### Parameters:

- `name` String

  The name you pass to topology when you attacherLayer/prependLayer/insertLayerAfter

#### Returns:

:

Instance of a layer

### `getLink`

(

- `id`

)

Inherited from nx.graphic.Topology.LinkMixin:

Get link by link id

#### Parameters:

- `id` Object

#### Returns:

:

### `getNode`

(

- `id`

)

Inherited from nx.graphic.Topology.NodeMixin:

Get node by node id

#### Parameters:

- `id` Object

#### Returns:

:

### `insertData`

(

- `data`

)

Inherited from nx.graphic.Topology.Graph:

Insert data to topology

#### Parameters:

- `data` JSON

  should be {nodes:[],links:[]}

### `insertLayerAfter`

(

- `name`
- `layer`
- `upsideLayerName`

)

Inherited from nx.graphic.Topology.LinkMixin:

Insert a layer under a certain layer, that should be subclass of nx.graphic.Topology.Layer

#### Parameters:

- `name` String

  handler to get this layer

- `layer` Object

  <String,Object> Could be string of a layer's class name, or a reference of a layer

- `upsideLayerName` String

  name of upside layer

### `move`

(

- `x`
- `y`
- `[duration]`

)

Inherited from nx.graphic.Topology.StageMixin:

Move topology

#### Parameters:

- `x` Number
- `y` Number
- `[duration]` Number optional

  default is 0

### `notify`

(

- `names`
- `oldValue`

)

Inherited from nx.Observable:

#### Parameters:

- `names` Object
- `oldValue` Object

### `onAttach`

()

Inherited from nx.ui.AbstractComponent:

Template method for component attach.

### `onChildAttach`

()

Inherited from nx.ui.AbstractComponent:

Template method for child component attach.

### `onChildDetach`

()

Inherited from nx.ui.AbstractComponent:

Template method for child component detach.

### `onDetach`

()

Inherited from nx.ui.AbstractComponent:

Template method for component detach.

### `prependLayer`

(

- `name`
- `layer`

)

Inherited from nx.graphic.Topology.LinkMixin:

Prepend a layer to topology, that should be subclass of nx.graphic.Topology.Layer

#### Parameters:

- `name` String

  handler to get this layer

- `layer` Object

  <String,nx.graphic.Topology.Layer> Could be string of a layer's class name, or a reference of a layer

### `register`

(

- `name`
- `value`
- `force`

)

Inherited from nx.ui.AbstractComponent:

Register a resource.

#### Parameters:

- `name` Object
- `value` Object
- `force` Object

### `registerScene`

(

- `name`
- `inClass`

)

Inherited from nx.graphic.Topology.SceneMixin:

Register a scene to topology

#### Parameters:

- `name` String

  for reference to a certain scene

- `inClass` Object

  <String,Class> A scene class name or a scene class instance, which is subclass of nx.graphic.Topology.Scene

### `removeLink`

(

- `arg`

)
Boolean

Inherited from nx.graphic.Topology.LinkMixin:

Remove a link

#### Parameters:

- `arg` String

#### Returns:

Boolean:

### `removeNode`

(

- `arg`

)
Boolean

Inherited from nx.graphic.Topology.NodeMixin:

Remove a node

#### Parameters:

- `arg` Object

#### Returns:

Boolean:

### `resize`

(

- `width`
- `height`

)

Inherited from nx.graphic.Topology.StageMixin:

Resize topology

#### Parameters:

- `width` Number
- `height` Number

### `resolve`

(

- `name`

)
Any

Inherited from nx.ui.AbstractComponent:

Resolve a resource.

#### Parameters:

- `name` Object

#### Returns:

Any:

### `setBinding`

(

- `prop`
- `expr`
- `source`

)

Inherited from nx.Observable:

Set binding for specified property.

#### Parameters:

- `prop` Object
- `expr` Object
- `source` Object

### `setData`

(

- `data`
- `[callback]`
- `[context]`

)

Inherited from nx.graphic.Topology.Graph:

Set data to topology, recommend use topo.data(data)

#### Parameters:

- `data` JSON

  should be {nodes:[],links:[]}

- `[callback]` Object optional
- `[context]` Object optional

### `unregister`

(

- `name`

)

Inherited from nx.ui.AbstractComponent:

Unregister a resource.

#### Parameters:

- `name` Object

### `unwatch`

(

- `names`
- `handler`
- `context`

)

Inherited from nx.Observable:

#### Parameters:

- `names` Object
- `handler` Object
- `context` Object

### `zoom`

(

- `value`

)

Inherited from nx.graphic.Topology.StageMixin:

Zoom topology

#### Parameters:

- `value` Number

### `zoomByBound`

(

- `inBound`
- `[callback]`
- `[context]`
- `[duration]`

)

Inherited from nx.graphic.Topology.StageMixin:

Zoom topology by a bound

#### Parameters:

- `inBound` Object

  e.g {left:Number,top:Number,width:Number,height:Number}

- `[callback]` Function optional

  callback function

- `[context]` Object optional

  callback context

- `[duration]` Number optional

  set the transition time, unit is second

### `zoomByNodes`

(

- `[callback]`
- `[context]`
- `nodes`

)

Inherited from nx.graphic.Topology.NodeMixin:

Zoom topology to let the passing nodes just visible at the screen

#### Parameters:

- `[callback]` Function optional

  callback function

- `[context]` Object optional

  callback context

- `nodes` Array

  nodes collection

## Properties

### `adaptive`

Boolean

Inherited from nx.graphic.Topology.StageMixin:

Set to true will adapt to topology's outside container, set to ture will ignore width/height

### `autoLayout`

Boolean

Inherited from nx.graphic.Topology.Graph:

Set the use force layout, recommand use dataProcessor:'force'

### `count`

nx.data.Collection

Inherited from nx.ui.AbstractComponent:

### `currentSceneName`

Unknown

Inherited from nx.graphic.Topology.SceneMixin:

Current scene name

### `data`

JSON

Inherited from nx.graphic.Topology.Graph:

set/get the topology' data, data should follow Common Topology Data Definition

### `dataProcessor`

String

Inherited from nx.graphic.Topology.Graph:

Pre data processor, it could be 'force'/'quick'. It could also support register a new processor

### `enableGradualScaling`

Boolean

Inherited from nx.graphic.Topology.Event:

Enabling gradual scaling feature when zooming, set to false will improve the performance

### `enableSmartLabel`

Unknown

Inherited from nx.graphic.Topology.NodeMixin:

Enable smart label

### `enableSmartNode`

Boolean

Inherited from nx.graphic.Topology.StageMixin:

Enabling the smart node feature, set to false will improve the performance

### `fade`

Unknown

Inherited from nx.graphic.Topology.LinkMixin:

Get fade status.

### `fadeActivePriority`

Unknown

Inherited from nx.graphic.Topology.LinkMixin:

Set active priority over highlight.

### `forceFade`

Unknown

Inherited from nx.graphic.Topology.LinkMixin:

Force layer fade.

### `graph`

nx.data.ObservableGraph

Inherited from nx.graphic.Topology.Graph:

Topology graph object

### `height`

Number

Inherited from nx.graphic.Topology.StageMixin:

height Set/get topology's height.

### `identityKey`

String

Inherited from nx.graphic.Topology.Graph:

Identity the node and link mapping key, default is index

### `layers`

Unknown

Inherited from nx.graphic.Topology.LinkMixin:

### `layersMap`

Unknown

Inherited from nx.graphic.Topology.LinkMixin:

### `linkSetInstanceClass`

Unknown

Inherited from nx.graphic.Topology.LinkMixin:

LinkSet instance class name, support function

### `model`

Any

Inherited from nx.ui.AbstractComponent:

### `nodeDraggable`

Unknown

Inherited from nx.graphic.Topology.NodeMixin:

Set node's draggable

### `nodeInstanceClass`

Unknown

Inherited from nx.graphic.Topology.LinkMixin

Node instance class name, support function

### `nodeSetInstanceClass`

Unknown

Inherited from nx.graphic.Topology.NodeMixin:

NodeSet instance class name, support function

### `owner`

nx.ui.AbstractComponent

Inherited from nx.ui.AbstractComponent:

### `padding`

Number

Inherited from nx.graphic.Topology.StageMixin:

Set/get stage's padding.

### `parent`

nx.ui.AbstractComponent

Inherited from nx.ui.AbstractComponent:

### ``

NodeConfig

Inherited from nx.graphic.Topology.LinkMixin

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}'

### `scalable`

Boolean

Inherited from nx.graphic.Topology.StageMixin:

Set/get topology's scalability

### `scenes`

Unknown

Inherited from nx.graphic.Topology.SceneMixin:

### `scenesMap`

Unknown

Inherited from nx.graphic.Topology.SceneMixin:

### `selectedNodes`

nx.data.ObservableCollection

Inherited from nx.graphic.Topology.NodeMixin:

All selected nodes, could direct add/remove nodes to this collection

### `showIcon`

Unknown

Inherited from nx.graphic.Topology.NodeMixin:

Show or hide node's icon

### `showNavigation`

Boolean

Inherited from nx.graphic.Topology.Config:

Set the navigation visibility

### `stage`

nx.graphic.Component

Inherited from nx.graphic.Topology.StageMixin:

Get the topology's stage component

### `status`

String

Inherited from nx.graphic.Topology.Config:

Topology status, it could be initializing/appended/ready

### `supportMultipleLink`

Boolean

Inherited from nx.graphic.Topology.LinkMixin:

Is topology support Multiple link , is false will highly improve performance

### `theme`

String

Inherited from nx.graphic.Topology.Config:

topology's theme, it could be blue/green/dark/slate/yellow

### `tooltipManager`

Unknown

Inherited from nx.graphic.Topology.TooltipMixin:

get tooltip manager

### `tooltipManagerConfig`

Unknown

Inherited from nx.graphic.Topology.TooltipMixin:

Set/get the tooltip manager config

### `viewSettingPanel`

nx.ui.Component

Inherited from nx.graphic.Topology.Config:

Get the setting panel component instance for extend user setting

### `width`

Number

Inherited from nx.graphic.Topology.StageMixin:

Set/get topology's width.

## Events

### `afterSetData`

Inherited from nx.graphic.Topology.Graph:

Fired after process data

#### Event Payload:

- `sender` Object

  trigger instance

- `event` Object

  original event object

### `beforeSetData`

Inherited from nx.graphic.Topology.Graph:

Fired before start process data

#### Event Payload:

- `sender` Object

  Trigger instance

- `data` JSON

  event object

### `clickStage`

Inherited from nx.graphic.Topology.Event:

Fired when click the stage

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `down`

Inherited from nx.graphic.Topology.Event:

Fired when press down arrow key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `dragStage`

Inherited from nx.graphic.Topology.Event:

Fired when dragging stage

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `dragStageEnd`

Inherited from nx.graphic.Topology.Event:

Fired when drag end stage

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `dragStageStart`

Inherited from nx.graphic.Topology.Event:

Fired when start drag stage

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `enter`

Inherited from nx.graphic.Topology.Event:

Fired when press enter key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `esc`

Inherited from nx.graphic.Topology.Event:

Fired when press esc key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `fit`

Inherited from nx.graphic.Topology.StageMixin:

Fired when after topology fit to stage

#### Event Payload:

- `sender` Object

  trigger instance

- `event` Object

  original event object

### `insertData`

Inherited from nx.graphic.Topology.Graph:

Fired after insert data

#### Event Payload:

- `sender` Object

  trigger instance

- `event` Object

  original event object

### `left`

Inherited from nx.graphic.Topology.Event:

Fired when press left arrow key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `pressA`

Inherited from nx.graphic.Topology.Event:

Fired when press a key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `pressF`

Inherited from nx.graphic.Topology.Event:

Fired when press f key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `pressM`

Inherited from nx.graphic.Topology.Event:

Fired when press m key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `pressR`

Inherited from nx.graphic.Topology.Event:

Fired when press r key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `pressS`

Inherited from nx.graphic.Topology.Event:

Fired when press s key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `pressStage`

Inherited from nx.graphic.Topology.Event:

Fired when mouse press stage, this is a capture event

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `ready`

Inherited from nx.graphic.Topology.StageMixin:

Fired when topology appended to container with with& height

#### Event Payload:

- `sender` Object

  trigger instance

- `event` Object

  original event object

### `resizeStage`

Inherited from nx.graphic.Topology.StageMixin:

Fired when topology's stage changed

#### Event Payload:

- `sender` Object

  trigger instance

- `event` Object

  original event object

### `right`

Inherited from nx.graphic.Topology.Event:

Fired when press right arrow key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `space`

Inherited from nx.graphic.Topology.Event:

Fired when press space key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `topologyGenerated`

Inherited from nx.graphic.Topology.Graph:

Fired when all topology elements generated

#### Event Payload:

- `sender` Object

  trigger instance

- `event` Object

  original event object

### `up`

Inherited from nx.graphic.Topology.Event:

Fired when press up arrow key

#### Event Payload:

- `sender` Object

  Trigger instance

- `event` Object

  original event object

### `zoomend`

Inherited from nx.graphic.Topology.Event:

Fired when end zooming

#### Event Payload:

- `sender` Object

  trigger instance

- `event` Object

  original event object

### `zooming`

Inherited from nx.graphic.Topology.Event:

Fired when zooming stage

#### Event Payload:

- `sender` Object

  trigger instance

- `scale` Number

  stage current scale