Appearance
@jtopo/core / NE
Class: NE
网元对象 (Node、Link的父类)
Hierarchy
Implements
Table of contents
Constructors
Properties
- afterRender
- attributes
- beforeRender
- children
- classList
- data
- deep
- destroyed
- draggable
- dropAllowed
- id
- inLinks
- isLayer
- isLink
- isNode
- isSelected
- name
- outLinks
- ownerLayer
- parent
- pointerEnabled
- selectedStyle
- serializeable
- showSelected
- style
- title
- type
Accessors
Methods
- addChild
- addChildren
- addClass
- addEventListener
- changeParent
- clearStyles
- contains
- destroy
- dispatchEvent
- draw
- getAABB
- getAttribute
- getChildren
- getComputedStyle
- getConnectAutoPoint
- getInLinks
- getLinks
- getLocalPoint
- getOutLinks
- getPoint
- getRoot
- getShape
- getStyle
- getWorldTransform
- hasChild
- hasChildren
- hasClass
- hasListener
- hide
- hideAllChildren
- isConnected
- isVisible
- localToWorldXY
- markDirty
- pickable
- querySelector
- querySelectorAll
- removeAllChildren
- removeAllClass
- removeAttribute
- removeChild
- removeChildren
- removeClass
- removeEventListener
- removeFromParent
- rotate
- scale
- setAttribute
- setAttributes
- setStyle
- setStyles
- setZIndex
- show
- showAllChildren
- toJSON
- translate
- translateWith
- update
- updateMatrix
- updateZIndex
- worldToLocalXY
Constructors
constructor
new NE()
Overrides
VisualEntity.constructor
Properties
afterRender
Optional
afterRender: Function
渲染后回调
Inherited from
VisualEntity.afterRender
attributes
Readonly
attributes: Object
Since
2.6.0 存放自定义属性(用于定义节点类型,和业务数据无关)
Index signature
▪ [key: string
]: any
beforeRender
Optional
beforeRender: Function
渲染前回调
js
obj.beforeRender = function(){
if(this.x < 0){
this.x = 0;
}
//...
}
Inherited from
VisualEntity.beforeRender
children
Readonly
children: NE
[]
子节点(直接下级)
classList
Readonly
classList: string
[]
通过addClass添加的样式名称列表
data
Optional
data: any
通常存放业务含义的数据
为了安全考虑,防止与对象属性冲突,用户最好使用该对象 用户附加到该对象的自定义属性
Since
2.4.0
deep
deep: number
层级深度, Layer为0,下面第一层子节点为1,依次类推
只读
destroyed
Readonly
destroyed: boolean
是否已经被销毁
Inherited from
VisualEntity.destroyed
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
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
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
Inherited from
VisualEntity.visible
set
visible(v
): void
Parameters
Name | Type |
---|---|
v | boolean |
Returns
void
Inherited from
VisualEntity.visible
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
Returns
number
set
zIndex(v
): void
设置zInde 相同父节点下的兄弟节点之间才有意义
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Methods
addChild
addChild(child
): NE
增加子对象
- 父对象和zIndex均相同的情况下,后来add的会显示在上面
- 默认情况下所有对象的 zIndex是 1
Parameters
Name | Type |
---|---|
child | NE |
Returns
Implementation of
addChildren
addChildren(childs
): NE
一次性增加多个对象, 比单个增加速度快很多,数量越多越明显!
注意:避免互为子节点、重复添加。
Parameters
Name | Type |
---|---|
childs | NE [] |
Returns
addClass
addClass(styleName
): NE
增加一个样式
js
obj.addClass('.focus');
Parameters
Name | Type |
---|---|
styleName | string |
Returns
addEventListener
addEventListener(type
, callback
): void
Parameters
Name | Type |
---|---|
type | string |
callback | Function |
Returns
void
Overrides
VisualEntity.addEventListener
changeParent
Abstract
changeParent(newParent
): NE
修改父对象但保持屏幕坐标不变
Parameters
Name | Type |
---|---|
newParent | NE |
Returns
clearStyles
clearStyles(): NE
清除通过css或setStyles定义的所有样式
Returns
contains
contains(targe
): boolean
方法返回一个布尔值,表示一个对象是否是给定节点的后代,即该节点本身、其直接子节点(children)、子节点的直接子节点等。 备注: 节点包含在自身内部。
Parameters
Name | Type |
---|---|
targe | NE |
Returns
boolean
Implementation of
destroy
destroy(): void
销毁,释放相关的资源引用,一旦销毁,对象不能再被访问,访问就会报错。
注意:销毁后,所有事件回调、动画、定时器等均不能再访问,否则会报错。
Returns
void
Overrides
VisualEntity.destroy
dispatchEvent
dispatchEvent(event
): void
分发事件
Parameters
Name | Type |
---|---|
event | Event | EventBase |
Returns
void
Inherited from
VisualEntity.dispatchEvent
draw
Abstract
draw(ctx
): any
Parameters
Name | Type |
---|---|
ctx | CanvasRenderingContext2D |
Returns
any
Inherited from
VisualEntity.draw
getAABB
getAABB(recursive?
): Rectangle
获取对象在Layer中的aabb包围盒 (包围盒是世界坐标系)
Parameters
Name | Type | Description |
---|---|---|
recursive? | boolean | 是否将子节点包含在内 |
Returns
getAttribute
getAttribute(name
, defaultValue?
): any
读取某个属性值
js
// 例如:
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
[]
Implementation of
getComputedStyle
getComputedStyle(): Style
获取:主题、自定义样式类、css方法三者层叠后的样式结果
(只读,不要修改返回的对象)
Returns
getConnectAutoPoint
getConnectAutoPoint(worldPoint
): PointLike
Parameters
Name | Type |
---|---|
worldPoint | PointLike |
Returns
getInLinks
getInLinks(): Link
[]
Returns
Link
[]
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
getOutLinks
getOutLinks(): Link
[]
Returns
Link
[]
getPoint
getPoint(t
, segIndex?
): PointLike
获取对象上某一点
Parameters
Name | Type | Description |
---|---|---|
t | number | [0-1] 在线段上的比例 |
segIndex? | number | 线段索引(矩形,有4条线段,索引:[0-3])可选项 |
Returns
getRoot
getRoot(): NE
获取'root'对象, 沿着parent一直向上追溯 , 直到parent为null或Layer对象结束
Returns
getShape
getShape(): Shape
获取形状对象
Returns
getStyle
getStyle(name
): any
读取某个样式的值
Parameters
Name | Type |
---|---|
name | string |
Returns
any
getWorldTransform
getWorldTransform(): Transform
获取世界坐标系变换
Returns
Transform
Inherited from
VisualEntity.getWorldTransform
hasChild
hasChild(child
): boolean
是否拥有某个下级子对象
Parameters
Name | Type |
---|---|
child | NE |
Returns
boolean
Implementation of
hasChildren
hasChildren(): boolean
是否拥有子对象
Returns
boolean
hasClass
hasClass(styleName
): boolean
检测是否拥有某个样式类
js
node.hasClass('.focus');
Since
2.4.0
Parameters
Name | Type |
---|---|
styleName | string |
Returns
boolean
hasListener
hasListener(type
): boolean
是否有该类型的监听
Parameters
Name | Type |
---|---|
type | string |
Returns
boolean
Inherited from
VisualEntity.hasListener
hide
hide(): NE
隐藏
Returns
Inherited from
VisualEntity.hide
hideAllChildren
hideAllChildren(): NE
隐藏所有下级节点
Returns
isConnected
isConnected(): boolean
是否被任意Link连接到
Since
2.4.0
Returns
boolean
isVisible
isVisible(): boolean
判断是否可见
Returns
boolean
Inherited from
VisualEntity.isVisible
localToWorldXY
localToWorldXY(x
, y
): Object
将一个本地坐标转到世界坐标系
Since
2.5.0
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Object
Name | Type |
---|---|
x | number |
y | number |
markDirty
markDirty(): void
标记矩阵脏, 需要重新计算触发重绘
Returns
void
Inherited from
VisualEntity.markDirty
pickable
pickable(): boolean
是否可被拾取到,默认返回:pointerEnabled 属性
js
pickable() {
return this.pointerEnabled;
}
Returns
boolean
querySelector
querySelector(querySelector
): NE
功能类似querySelectorAll,但只返回第一个满足条件的对象或者null
Parameters
Name | Type |
---|---|
querySelector | string | (child : Node | Link ) => boolean |
Returns
querySelectorAll
querySelectorAll(querySelector?
): NE
[]
对象选择器
语法兼容DOM的Selector API标准(并不支持标准里的所有语法)
支持的语法形式如下:
js
//obj.querySelector(类名称), 例如:
let ellipseNodes = layer.querySelectorAll('EllipseNode');
let links = layer.querySelector('Link');
//obj.querySelector(样式名称),例如:
let serverNodes = layer.querySelectorAll('.server');
let activedObjs = layer.querySelectorAll('.active');
let arr = layer.querySelectorAll(obj => obj.x > 20 && obj.y < 100);
//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
Implementation of
removeAllClass
removeAllClass(): NE
移除所有通过addClass添加的样式
js
obj.removeAllClass();
Returns
removeAttribute
removeAttribute(name
): void
移除一个属性
js
// 例如:
obj.removeAttribute('foo');
Parameters
Name | Type |
---|---|
name | string |
Returns
void
removeChild
removeChild(child
): NE
移除一个子对象
Parameters
Name | Type |
---|---|
child | NE |
Returns
Implementation of
removeChildren
removeChildren(childs
): NE
Parameters
Name | Type |
---|---|
childs | NE [] |
Returns
removeClass
removeClass(styleName
): void
移除一个样式
js
obj.removeClass('.focus');
Parameters
Name | Type |
---|---|
styleName | string |
Returns
void
removeEventListener
removeEventListener(type
, callback
): void
Parameters
Name | Type |
---|---|
type | string |
callback | Function |
Returns
void
Overrides
VisualEntity.removeEventListener
removeFromParent
removeFromParent(): NE
从父容器中移除
Returns
rotate
rotate(angle
): NE
Parameters
Name | Type |
---|---|
angle | number |
Returns
Overrides
VisualEntity.rotate
scale
scale(x
, y
): NE
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Overrides
VisualEntity.scale
setAttribute
setAttribute(name
, value
): void
设置自定义属性
Parameters
Name | Type |
---|---|
name | string |
value | any |
Returns
void
setAttributes
setAttributes(attrs
): NE
一次性设置多个属性
js
// 一次性设置多个属性
obj.setAttributes({
foo: 'abc',
bar: false
});
Parameters
Name | Type |
---|---|
attrs | string | { [key: string] : any ; } |
Returns
setStyle
setStyle(styleName
, value
): NE
设置某一个样式
Parameters
Name | Type |
---|---|
styleName | StyleKeyType |
value | any |
Returns
setStyles
setStyles(styles
): NE
背景和边框的设置语法参考css样式, 图形绘制的语法使用cavnas属性设置,如下:
js
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
setZIndex
setZIndex(index
): void
设置zIndex
当两个同⽗元素z-index相同时,后⾯的元素显⽰在上⾯
Parameters
Name | Type | Description |
---|---|---|
index | number | 建议范围 [1, 999] |
Returns
void
show
show(): NE
显示
Returns
Inherited from
VisualEntity.show
showAllChildren
showAllChildren(): NE
显示所有下级节点
Returns
toJSON
toJSON(): any
Returns
any
translate
translate(x
, y
): NE
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Overrides
VisualEntity.translate
translateWith
Abstract
translateWith(dx
, dy
): NE
Parameters
Name | Type |
---|---|
dx | number |
dy | number |
Returns
update
update(): void
请求更新画面
Returns
void
updateMatrix
updateMatrix(): NE
Returns
updateZIndex
updateZIndex(): NE
更新直接下级子对象的zIndex
Returns
worldToLocalXY
worldToLocalXY(x
, y
): Object
将一个世界坐标转到本地坐标系
Since
2.6.0
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Object
Name | Type |
---|---|
x | number |
y | number |