@jtopo/core / NE

Class: NE

网元对象 (Node、Link的父类)

Hierarchy

VisualEntity
↳ NE
↳↳ Layer
↳↳ Node
↳↳ Link

Implements

Constructors

constructor

Properties

Accessors

Methods

Constructors

constructor

new NE()

Properties

afterRender

Optional afterRender: Function

渲染后回调

attributes

Readonly attributes: Record<string, any>

Since

2.6.0 存放自定义属性（用于定义节点类型，和业务数据无关）

beforeRender

Optional beforeRender: Function

渲染前回调

obj.beforeRender = function(){
   if(this.x < 0){
       this.x = 0;
   }
   //...
}

children

Readonly children: NE[]

子节点（直接下级）

classList

Readonly classList: string[]

通过addClass添加的样式名称列表

deep

deep: number = SysConf.MinDeep

层级深度, Layer为0，下面第一层子节点为1，依次类推

只读

destroyed

Readonly destroyed: boolean

是否已经被销毁

draggable

draggable: boolean

是否可拖拽

dropAllowed

dropAllowed: boolean

是否可以作为拖拽目标

Since

2.4.0

id

Optional id: string | number

id, 标识，由开发人员控制和设计

inLinks

Readonly inLinks: Link[]

所有以本对象为结束点的Link对象数组

isLayer

Optional Readonly isLayer: boolean

是否是Layer对象, 可以使用 instanceof 替代

isLink

Optional Readonly isLink: boolean

是否是Link对象, 可以使用 instanceof 替代

isNode

Readonly isNode: boolean

是否是Node对象, 可以使用 instanceof 替代

isSelected

Readonly isSelected: boolean

是否被选中了

name

Optional name: string

名称，可以在编辑时指定，运行时通过名称获取对象的引用

outLinks

Readonly outLinks: Link[]

所有以本对象为开始点的Link对象数组

ownerLayer

Optional ownerLayer: Layer

所属的Layer

Since

2.6.0

parent

Optional parent: NE

上级对象

pointerEnabled

pointerEnabled: boolean

是否响应(鼠标、触摸屏指针），为false的时候，不响应动作

Since

2.6.0

selectedStyle

Optional selectedStyle: NodeSelectedStyleOptionsType | LinkSelectedStyleOptionsType

选中时的样式，如果不设置将使用默认的

serializeable

serializeable: boolean

是否可序列化，默认true 如果为false，序列化时将跳过该对象

showSelected

showSelected: boolean

是否显示选中的效果，默认显示

style

Readonly style: Style

样式

title

Optional title: string

鼠标指向时显示的提示信息，和HTML中dom元素的title属性作用相同

type

Optional type: string

类型，自定义类型

可用于自定义节点，区分节点类型

比用data属性更方便一点

Accessors

bottom

get bottom(): number

Since

2.4.0

Returns

number

set bottom(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

data

get data(): Record<string, any>

Returns

Record<string, any>

set data(v): void

Parameters

Name	Type
`v`	`Record`<`string`, `any`>

Returns

void

height

get height(): number

Returns

number

set height(v): void

设置高度

注意：高度不能为0

Parameters

Name	Type
`v`	`number`

Returns

void

left

get left(): number

Since

2.4.0

Returns

number

set left(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

nextSibling

get nextSibling(): NE

获取下一个兄弟节点

Returns

NE

下一个兄弟节点

previousSibling

get previousSibling(): NE

获取前一个兄弟节点

Returns

NE

前一个兄弟节点

right

get right(): number

Since

2.4.0

Returns

number

set right(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

rotation

get rotation(): number

旋转角度 (弧度)

Returns

number

set rotation(v): void

设置旋转角度 (弧度)

Parameters

Name	Type
`v`	`number`

Returns

void

scaleX

get scaleX(): number

Returns

number

set scaleX(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

scaleY

get scaleY(): number

Returns

number

set scaleY(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

skewX

get skewX(): number

Returns

number

set skewX(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

skewY

get skewY(): number

Returns

number

set skewY(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

top

get top(): number

Since

2.4.0

Returns

number

set top(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

visible

get visible(): boolean

Returns

boolean

set visible(v): void

Parameters

Name	Type
`v`	`boolean`

Returns

void

width

get width(): number

Returns

number

set width(v): void

设置宽度

注意：宽度不能为0

Parameters

Name	Type
`v`	`number`

Returns

void

x

get x(): number

Returns

number

set x(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

y

get y(): number

Returns

number

set y(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

z

get z(): number

Returns

number

set z(v): void

Parameters

Name	Type
`v`	`number`

Returns

void

zIndex

get zIndex(): number

Deprecated

请使用 sortChildren 或者 NEHelper.raiseToTop、NEHelper.lowerToBottom等方法代替

Returns

number

set zIndex(v): void

设置zIndex 相同父节点下的兄弟节点之间才有意义

通常情况下不要修改

Deprecated

请使用 sortChildren 或者 NEHelper.raiseToTop、NEHelper.lowerToBottom等方法代替

Parameters

Name	Type
`v`	`number`

Returns

void

Methods

addChild

addChild(child): NE

增加子对象

Parameters

Name	Type
`child`	`NE`

Returns

NE

addChildren

addChildren(childs): NE

一次性增加多个对象, 比单个增加速度快很多，数量越多越明显！

注意：避免互为子节点、重复添加

Parameters

Name	Type
`childs`	`NE`[]

Returns

NE

addClass

addClass(styleName): NE

增加一个样式

obj.addClass('.focus');

Parameters

Name	Type
`styleName`	`string`

Returns

NE

addEventListener

addEventListener(type, callback): () => {}

Parameters

Name	Type
`type`	`NEEventType`
`callback`	(`e`: `any`) => `void`

Returns

fn

(): Object

Returns

Object

append

append(...childs): NE

一次性若干个对象，比单个增加速度快很多，数量越多越明显！

数量有上限(大于10万), 请使用 addChildren 代替

注意：避免互为子节点、重复添加

parent.append(node1, node2, node3, ...);

Since

2.6.17*

Parameters

Name	Type
`...childs`	`NE`[]

Returns

NE

appendChild

appendChild(child): NE

添加一个子对象

Parameters

Name	Type
`child`	`NE`

Returns

NE

changeParent

Abstract changeParent(newParent): NE

修改父对象但保持屏幕坐标不变

Parameters

Name	Type
`newParent`	`NE`

Returns

NE

clearStyles

clearStyles(): NE

清除通过css或setStyles定义的所有样式

Returns

NE

contains

contains(targe): boolean

方法返回一个布尔值，表示一个对象是否是给定节点的后代，即该节点本身、其直接子节点（children）、子节点的直接子节点等。备注：节点包含在自身内部。

Parameters

Name	Type
`targe`	`NE`

Returns

boolean

destroy

destroy(): void

销毁，释放相关的资源引用,一旦销毁，对象不能再被访问，访问就会报错。

注意：销毁后，所有事件回调、动画、定时器等均不能再访问，否则会报错。

Returns

void

dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

Name	Type
`event`	`Object`

Returns

void

draw

Abstract draw(ctx): any

Parameters

Name	Type
`ctx`	`CanvasRenderingContext2D`

Returns

any

getAABB

getAABB(recursive?): Rectangle

获取对象在Layer中的aabb包围盒 (世界坐标系)

Parameters

Name	Type	Description
`recursive?`	`boolean`	是否将子节点包含在内

Returns

Rectangle

getAttribute

getAttribute(name, defaultValue?): any

读取某个属性值

// 例如:
let v1 = obj.getAttribute('foo');       //如果foo属性不存在，则返回undefined
let v2 = obj.getAttribute('bar', 123);  //如果bar属性不存在，则返回123

Parameters

Name	Type	Description
`name`	`string`
`defaultValue?`	`any`	如果属性值为空时的默认替代

Returns

any

getChildren

getChildren(): NE[]

获取所有子对象

Returns

NE[]

getComputedStyle

getComputedStyle(): Style

获取：主题、自定义样式类、css方法三者层叠后的样式结果

(只读，不要修改返回的对象)

Returns

Style

getConnectAutoPoint

getConnectAutoPoint(worldPoint): PointLike

Parameters

Name	Type
`worldPoint`	`PointLike`

Returns

PointLike

getInLinks

getInLinks(): Link[]

Returns

Link[]

getIndex

getIndex(): number

获取节点在父节点中的索引

Returns

number

节点在父节点中的索引

getLinks

getLinks(): Link[]

获取所有连接到本对象的Link

Returns

Link[]

getLocalPoint

getLocalPoint(t, segIndex?): PointLike

获取对象上某一点(本地坐标系)

Parameters

Name	Type	Description
`t`	`number`	[0-1] 在线段上的比例
`segIndex?`	`number`	线段索引(Node是矩形，有4条线段，索引：[0-3]）可选项

Returns

PointLike

getOutLinks

getOutLinks(): Link[]

Returns

Link[]

getPoint

getPoint(t, segIndex?): PointLike

获取对象上某一点

Parameters

Name	Type	Description
`t`	`number`	[0-1] 在线段上的比例
`segIndex?`	`number`	线段索引(矩形，有4条线段，索引：[0-3]）可选项

Returns

PointLike

getRoot

getRoot(): NE

获取'root'对象, 沿着parent一直向上追溯 , 直到parent为null或Layer对象结束

Returns

NE

getShape

getShape(): Shape

获取形状对象

Returns

Shape

getStyle

getStyle(name): any

读取某个样式的值

Parameters

Name	Type
`name`	`string`

Returns

any

getWorldTransform

getWorldTransform(): Transform

获取世界坐标系变换

Returns

Transform

hasChild

hasChild(child): boolean

是否拥有某个下级子对象

Parameters

Name	Type
`child`	`NE`

Returns

boolean

hasChildren

hasChildren(): boolean

是否拥有子对象

Returns

boolean

hasClass

hasClass(styleName): boolean

检测是否拥有某个样式类

node.hasClass('.focus');

Since

2.4.0

Parameters

Name	Type
`styleName`	`string`

Returns

boolean

hasListener

hasListener(type): boolean

Parameters

Name	Type
`type`	`NEEventType`

Returns

boolean

hide

hide(): NE

隐藏

Returns

NE

hideAllChildren

hideAllChildren(): NE

隐藏所有下级节点

Returns

NE

isConnected

isConnected(): boolean

是否被任意Link连接到

Since

2.4.0

Returns

boolean

isVisible

isVisible(): boolean

判断是否可见

Returns

boolean

localToWorldXY

localToWorldXY(x, y): Object

将一个本地坐标转到世界坐标系

Since

2.5.0

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Object

Name	Type
`x`	`number`
`y`	`number`

markMatrixDirty

markMatrixDirty(): void

标记矩阵脏, 需要重新计算触发重绘

Returns

void

on

on(type, callback): () => {}

Parameters

Name	Type
`type`	`NEEventType`
`callback`	(`e`: `any`) => `void`

Returns

fn

(): Object

Returns

Object

onUnmounted

onUnmounted(): void

当从Layer对象树中删除时

Returns

void

pickable

pickable(): boolean

是否可被拾取到，默认返回：pointerEnabled 属性

pickable() {
   return this.pointerEnabled;
}

Returns

boolean

prepend

prepend(...childs): NE

在最前面添加对象

注意：避免互为子节点、重复添加

parent.prepend(node1, node2, node3, ...);

Since

2.6.17

Parameters

Name	Type
`...childs`	`NE`[]

Returns

NE

querySelector

querySelector(querySelector): NE

功能类似querySelectorAll,但只返回第一个满足条件的对象或者null

Parameters

Name	Type
`querySelector`	`string` \| (`child`: `Node` \| `Link`) => `boolean`

Returns

NE

querySelectorAll

querySelectorAll(querySelector?): NE[]

对象选择器

语法兼容DOM的Selector API标准（并不支持标准里的所有语法）

支持的语法形式如下：

// 最灵活的查询方式 (推荐)
let arr = layer.querySelectorAll(obj => obj.x > 20 && obj.y < 100);
let activeNodes = layer.querySelectorAll(obj => obj.hasClass('.active'));

//obj.querySelector(类名称)， 例如:
let ellipseNodes = layer.querySelectorAll('EllipseNode');
let links = layer.querySelector('Link');

//obj.querySelector(样式名称)，例如:
let serverNodes = layer.querySelectorAll('.server');
let activedObjs = layer.querySelectorAll('.active');

//obj.querySelector(ID);
let obj = layer.querySelectorAll('#123')[0];

//obj.querySelector([属性名称=""]); 
let arr = layer.querySelectorAll('[text="abc"]');
let arr2 = layer.querySelectorAll('[draggable=true]');

// obj.querySelector(类名称|样式名称[属性名称=""]); 
let obj = layer.querySelector('TextNode[x<=-200]');
let obj2 = layer.querySelector('.server[text="X86"]');

Parameters

Name	Type
`querySelector?`	`string` \| (`child`: `Node` \| `Link`) => `boolean`

Returns

NE[]

removeAllChildren

removeAllChildren(): NE

移除所有子对象

Returns

NE

removeAllClass

removeAllClass(): NE

移除所有通过addClass添加的样式

obj.removeAllClass();

Returns

NE

removeAttribute

removeAttribute(name): void

移除一个属性

// 例如:
obj.removeAttribute('foo');

Parameters

Name	Type
`name`	`string`

Returns

void

removeChild

removeChild(child): NE

移除一个子对象

Parameters

Name	Type
`child`	`NE`

Returns

NE

removeChildren

removeChildren(childs): NE

移除多个子对象, 比单个移除速度快很多，数量越多越明显！

Parameters

Name	Type
`childs`	`NE`[]

Returns

NE

removeClass

removeClass(styleName): void

移除一个样式

obj.removeClass('.focus');

Parameters

Name	Type
`styleName`	`string`

Returns

void

removeEventListener

removeEventListener(type, callback): void

Parameters

Name	Type
`type`	`NEEventType`
`callback`	(`e`: `any`) => `void`

Returns

void

removeFromParent

removeFromParent(): NE

从父容器中移除

// 等价于：
if (this.parent) {
this.parent.removeChild(this);
}

Returns

NE

rotate

rotate(angle): NE

Parameters

Name	Type
`angle`	`number`

Returns

NE

scale

scale(x, y): NE

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

NE

setAttribute

setAttribute(name, value): void

设置自定义属性

Parameters

Name	Type
`name`	`string`
`value`	`any`

Returns

void

setAttributes

setAttributes(attrs): NE

一次性设置多个属性

// 一次性设置多个属性
obj.setAttributes({
foo: 'abc',
bar: false
});

Parameters

Name	Type
`attrs`	`string` \| { `[key: string]`: `any`; }

Returns

NE

setStyle

setStyle(styleName, value): NE

设置某一个样式

Parameters

Name	Type
`styleName`	`StyleKeyType`
`value`	`any`

Returns

NE

setStyles

setStyles(styles): NE

背景和边框的设置语法参考css样式, 图形绘制的语法使用cavnas属性设置，如下:

node.setStyles({
   // 用类似css语法设置节点的：边框、字体、背景 的属性
   border: '10px gray',
   borderRadius: 10,
   font: 'bold 20px serif',
   color: 'gray',
   backgroundColor: "rgba(128,128,128,0.2)",

   // 内边距（边框和图形的间距）
   padding: 10,

   // 用Canvas绘图属性来设置节点内图形的：填充、画笔粗细、颜色、字体位置
   strokeStyle: 'gray',
   fillStyle: 'rgba(0,0,255,0.2)',
   lineWidth: 3, 
   textPosition: 'center',
   textBaseline: 'middle',
});

Parameters

Name	Type
`styles`	`PartStyleOptionType`

Returns

NE

setZIndex

setZIndex(index): void

设置zIndex

Deprecated

请使用 sortChildren 或者 NEHelper.raiseToTop、NEHelper.lowerToBottom等方法代替

Parameters

Name	Type	Description
`index`	`number`	建议范围 [1, 999]

Returns

void

show

show(): NE

显示

Returns

NE

showAllChildren

showAllChildren(): NE

显示所有下级节点

Returns

NE

sortChildren

sortChildren(sortFn): NE

对子对象进行排序

Since

2.6.17

Parameters

Name	Type	Description
`sortFn`	(`a`: `NE`, `b`: `NE`) => `number`	排序函数

Returns

NE

toJSON

toJSON(): any

Returns

any

translate

translate(x, y): NE

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

NE

translateWith

Abstract translateWith(dx, dy): NE

Parameters

Name	Type
`dx`	`number`
`dy`	`number`

Returns

NE

update

update(): void

请求更新画面

Returns

void

updateMatrix

updateMatrix(): NE

Returns

NE

updateZIndex

updateZIndex(): NE

更新直接下级子对象的zIndex

Deprecated

请使用 sortChildren 或者 NEHelper.raiseToTop、NEHelper.lowerToBottom等方法代替

Returns

NE

worldToLocalXY

worldToLocalXY(x, y): Object

将一个世界坐标转到本地坐标系

Since

2.6.0

Parameters

Name	Type
`x`	`number`
`y`	`number`

Returns

Object

Name	Type
`x`	`number`
`y`	`number`

Class: NE ​

Hierarchy ​

Implements ​

Table of contents ​

Constructors ​

Properties ​

Accessors ​

Methods ​

Constructors ​

constructor ​

Properties ​

afterRender ​

attributes ​

beforeRender ​

children ​

classList ​

deep ​

destroyed ​

draggable ​

dropAllowed ​

id ​

inLinks ​

isLayer ​

isLink ​

isNode ​

isSelected ​

name ​

outLinks ​

ownerLayer ​

parent ​

pointerEnabled ​

selectedStyle ​

serializeable ​

showSelected ​

style ​

title ​

type ​

Accessors ​

bottom ​

Returns ​

Parameters ​

Returns ​

data ​

Returns ​

Parameters ​

Returns ​

height ​

Returns ​

Parameters ​

Returns ​

left ​

Returns ​

Parameters ​

Returns ​

nextSibling ​

Returns ​

previousSibling ​

Returns ​

right ​

Returns ​

Parameters ​

Returns ​

rotation ​

Returns ​

Parameters ​

Returns ​

scaleX ​

Returns ​

Parameters ​

Returns ​

scaleY ​

Returns ​

Parameters ​

Returns ​

skewX ​

Returns ​

Parameters ​

Returns ​

skewY ​

Returns ​

Class: NE

Hierarchy

Implements

Table of contents

Constructors

Properties

Accessors

Methods

Constructors

constructor

Properties

afterRender

attributes

beforeRender

children

classList

deep

destroyed

draggable

dropAllowed

id

inLinks

isLayer

isLink

isNode

isSelected

name

outLinks

ownerLayer

parent

pointerEnabled

selectedStyle

serializeable

showSelected

style

title

type

Accessors

bottom

Returns

Parameters

Returns

data

Returns

Parameters

Returns

height

Returns

Parameters

Returns

left

Returns

Parameters

Returns

nextSibling

Returns

previousSibling

Returns

right

Returns

Parameters

Returns

rotation

Returns

Parameters

Returns

scaleX

Returns

Parameters

Returns

scaleY

Returns

Parameters

Returns

skewX

Returns

Parameters

Returns

skewY

Returns