Skip to content

@jtopo/core / Node

Class: Node

节点对象

核心属性:坐标(x,y)和尺寸(width, height)

创建一个节点, 通常有以下几种形式:

js
// 留意: 要先引入Node,因浏览器有一个同名的Node对象,忘记导入会出错
import Node from '@jtopo/core';

// 示例:
let node = new Node();
let node = new Node('name');

let node = new Node('name', x, y);
let node = new Node('name', 10, 10);

let node = new Node('name', x, y, width, height);
let node = new Node('name', 10, 10, 30, 30);

let node = new Node(null, x, y, width, height);

// 尺寸
node.resize(40, 40);

// 等价于
node.width = 40;
node.height = 40;

// 位置 (x、y代表了节点的中心在父节点的坐标)
node.setXY(100, 100);

// 和setXY完全等价,可看作是translate的简写
node.translate(100, 100);

// 单独设置x坐标
node.x = 100;
// 单独设置y坐标
node.y = 100;

// 也可以通过left、bottom、top、right设置节点位置(会根据宽度自动计算出x、y)
node.left = 0;
node.bottom = 0;
node.top = 0;
node.right = 0;

Hierarchy

Implements

Table of contents

Constructors

Properties

Accessors

Methods

Constructors

constructor

new Node(text?, x?, y?, w?, h?)

所有参数可以为空,通过其他方法按需设置

Parameters

NameTypeDefault valueDescription
text?stringundefined文本
xnumber0坐标x
ynumber0坐标y
wnumber1-
hnumber1-

Overrides

NE.constructor

Properties

afterRender

Optional afterRender: Function

渲染后回调

Inherited from

NE.afterRender


attributes

Readonly attributes: Object

Since

2.6.0 存放自定义属性(用于定义节点类型,和业务数据无关)

Index signature

▪ [key: string]: any

Inherited from

NE.attributes


beforeRender

Optional beforeRender: Function

渲染前回调

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

Inherited from

NE.beforeRender


children

Readonly children: NE[]

子节点(直接下级)

Inherited from

NE.children


classList

Readonly classList: string[]

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

Inherited from

NE.classList


className

Readonly className: string

Overrides

NE.className


data

Optional data: any

通常存放业务含义的数据

为了安全考虑,防止与对象属性冲突,用户最好使用该对象 用户附加到该对象的自定义属性

Since

2.4.0

Inherited from

NE.data


deep

deep: number

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

只读

Inherited from

NE.deep


destroyed

Readonly destroyed: boolean

是否已经被销毁

Inherited from

NE.destroyed


draggable

draggable: boolean

是否可拖拽

Inherited from

NE.draggable


dropAllowed

dropAllowed: boolean

是否可以作为拖拽目标

Since

2.4.0

Inherited from

NE.dropAllowed


id

Optional id: string | number

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

Inherited from

NE.id


Readonly inLinks: Link[]

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

Inherited from

NE.inLinks


isLayer

Optional Readonly isLayer: boolean

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

Inherited from

NE.isLayer


Optional Readonly isLink: boolean

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

Inherited from

NE.isLink


isNode

isNode: boolean

是否是Node类的对象, 主要用于和Link区分

Overrides

NE.isNode


isSelected

Readonly isSelected: boolean

是否被选中了

Inherited from

NE.isSelected


name

Optional name: string

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

Inherited from

NE.name


originPosition

Readonly originPosition: RectPositionType = 'center'

原点位置


Readonly outLinks: Link[]

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

Inherited from

NE.outLinks


ownerLayer

Optional ownerLayer: Layer

所属的Layer

Since

2.6.0

Inherited from

NE.ownerLayer


parent

Optional parent: NE

上级对象

Inherited from

NE.parent


pointerEnabled

pointerEnabled: boolean

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

Since

2.6.0

Inherited from

NE.pointerEnabled


rotateWithParent

rotateWithParent: boolean

是否跟随父节点旋转


selectedStyle

Optional selectedStyle: NodeSelectedStyleOptionsType | LinkSelectedStyleOptionsType

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

Inherited from

NE.selectedStyle


serializeable

serializeable: boolean

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

Inherited from

NE.serializeable


showSelected

showSelected: boolean

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

Inherited from

NE.showSelected


style

Readonly style: Style

样式

Inherited from

NE.style


title

Optional title: string

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

Inherited from

NE.title


type

Optional type: string

类型,自定义类型

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

比用data属性更方便一点

Inherited from

NE.type

Accessors

bottom

get bottom(): number

Since

2.4.0

Returns

number

Inherited from

NE.bottom

set bottom(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.bottom


height

get height(): number

Returns

number

Inherited from

NE.height

set height(v): void

设置高度

注意:高度不能为0

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.height


left

get left(): number

Since

2.4.0

Returns

number

Inherited from

NE.left

set left(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.left


get right(): number

Since

2.4.0

Returns

number

Inherited from

NE.right

set right(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.right


rotation

get rotation(): number

旋转角度 (弧度)

Returns

number

Inherited from

NE.rotation

set rotation(v): void

设置旋转角度 (弧度)

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.rotation


scaleX

get scaleX(): number

Returns

number

Inherited from

NE.scaleX

set scaleX(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.scaleX


scaleY

get scaleY(): number

Returns

number

Inherited from

NE.scaleY

set scaleY(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.scaleY


skewX

get skewX(): number

Returns

number

Inherited from

NE.skewX

set skewX(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.skewX


skewY

get skewY(): number

Returns

number

Inherited from

NE.skewY

set skewY(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.skewY


text

get text(): string

Returns

string

set text(v): void

Parameters

NameType
vstring

Returns

void


top

get top(): number

Since

2.4.0

Returns

number

Inherited from

NE.top

set top(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.top


visible

get visible(): boolean

Returns

boolean

Inherited from

NE.visible

set visible(v): void

Parameters

NameType
vboolean

Returns

void

Inherited from

NE.visible


width

get width(): number

Returns

number

Inherited from

NE.width

set width(v): void

设置宽度

注意:宽度不能为0

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.width


x

get x(): number

Returns

number

Inherited from

NE.x

set x(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.x


y

get y(): number

Returns

number

Inherited from

NE.y

set y(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.y


z

get z(): number

Returns

number

Inherited from

NE.z

set z(v): void

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.z


zIndex

get zIndex(): number

Returns

number

Inherited from

NE.zIndex

set zIndex(v): void

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

Parameters

NameType
vnumber

Returns

void

Inherited from

NE.zIndex

Methods

addChild

addChild(child): Node

增加子对象

  • 父对象和zIndex均相同的情况下,后来add的会显示在上面
  • 默认情况下所有对象的 zIndex是 1

Parameters

NameType
childNE

Returns

Node

Inherited from

NE.addChild


addChildren

addChildren(childs): Node

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

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

Parameters

NameType
childsNE[]

Returns

Node

Inherited from

NE.addChildren


addClass

addClass(styleName): Node

增加一个样式

js
obj.addClass('.focus');

Parameters

NameType
styleNamestring

Returns

Node

Inherited from

NE.addClass


addEventListener

addEventListener(type, callback): void

Parameters

NameType
typestring
callbackFunction

Returns

void

Inherited from

NE.addEventListener


changeParent

changeParent(newParent): Node

修改父对象但保持世界坐标不变

Parameters

NameType
newParentNE

Returns

Node

Overrides

NE.changeParent


clearStyles

clearStyles(): Node

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

Returns

Node

Inherited from

NE.clearStyles


contains

contains(targe): boolean

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

Parameters

NameType
targeNE

Returns

boolean

Inherited from

NE.contains


destroy

destroy(): void

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

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

Returns

void

Overrides

NE.destroy


dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

NameType
eventEvent | EventBase

Returns

void

Inherited from

NE.dispatchEvent


draw

draw(ctx): void

Parameters

NameType
ctxCanvasRenderingContext2D

Returns

void

Overrides

NE.draw


getAABB

getAABB(recursive?): Rectangle

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

Parameters

NameTypeDescription
recursive?boolean是否将子节点包含在内

Returns

Rectangle

Inherited from

NE.getAABB


getAnchor

getAnchor(name): AnchorProxy

根据名称获取并生成一个 ‘锚点‘

Parameters

NameType
namestring

Returns

AnchorProxy


getAttribute

getAttribute(name, defaultValue?): any

读取某个属性值

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

Parameters

NameTypeDescription
namestring
defaultValue?any如果属性值为空时的默认替代

Returns

any

Inherited from

NE.getAttribute


getChildren

getChildren(): NE[]

获取所有子对象

Returns

NE[]

Inherited from

NE.getChildren


getComputedStyle

getComputedStyle(): Style

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

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

Returns

Style

Inherited from

NE.getComputedStyle


getInLinks(): Link[]

Returns

Link[]

Inherited from

NE.getInLinks


getLinks(): Link[]

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

Returns

Link[]

Inherited from

NE.getLinks


getLocalPoint

getLocalPoint(t, segIndex?): PointLike

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

Parameters

NameTypeDescription
tnumber[0-1] 在线段上的比例
segIndex?number线段索引(Node是矩形,有4条线段,索引:[0-3])可选项

Returns

PointLike

Inherited from

NE.getLocalPoint


getOutLinks(): Link[]

Returns

Link[]

Inherited from

NE.getOutLinks


getPoint

getPoint(t, segIndex?): PointLike

获取对象上某一点

Parameters

NameTypeDescription
tnumber[0-1] 在线段上的比例
segIndex?number线段索引(矩形,有4条线段,索引:[0-3])可选项

Returns

PointLike

Inherited from

NE.getPoint


getPointAnchor

getPointAnchor(x, y): AnchorProxy

根据本地坐标并生成一个 ’锚点‘

Parameters

NameType
xnumber
ynumber

Returns

AnchorProxy


getRoot

getRoot(): Node

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

Returns

Node

Inherited from

NE.getRoot


getSegmentAnchor

getSegmentAnchor(t, segIndex): AnchorProxy

获取并生成线段上某个位置的 ’锚点’

Parameters

NameType
tnumber
segIndexnumber

Returns

AnchorProxy


getShape

getShape(): Shape

获取形状对象

Returns

Shape

Inherited from

NE.getShape


getStyle

getStyle(name): any

读取某个样式的值

Parameters

NameType
namestring

Returns

any

Inherited from

NE.getStyle


getWorldTransform

getWorldTransform(): Transform

获取世界坐标系变换

Returns

Transform

Inherited from

NE.getWorldTransform


hasChild

hasChild(child): boolean

是否拥有某个下级子对象

Parameters

NameType
childNE

Returns

boolean

Inherited from

NE.hasChild


hasChildren

hasChildren(): boolean

是否拥有子对象

Returns

boolean

Inherited from

NE.hasChildren


hasClass

hasClass(styleName): boolean

检测是否拥有某个样式类

js
node.hasClass('.focus');

Since

2.4.0

Parameters

NameType
styleNamestring

Returns

boolean

Inherited from

NE.hasClass


hasListener

hasListener(type): boolean

是否有该类型的监听

Parameters

NameType
typestring

Returns

boolean

Inherited from

NE.hasListener


hide

hide(): Node

隐藏

Returns

Node

Inherited from

NE.hide


hideAllChildren

hideAllChildren(): Node

隐藏所有下级节点

Returns

Node

Inherited from

NE.hideAllChildren


hitTest

hitTest(x, y): boolean

判断给定的坐标(世界坐标系)是否在对象内部

Parameters

NameType
xnumber
ynumber

Returns

boolean


isConnected

isConnected(): boolean

是否被任意Link连接到

Since

2.4.0

Returns

boolean

Inherited from

NE.isConnected


isVisible

isVisible(): boolean

判断是否可见

Returns

boolean

Inherited from

NE.isVisible


localToWorldXY

localToWorldXY(x, y): Object

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

Since

2.5.0

Parameters

NameType
xnumber
ynumber

Returns

Object

NameType
xnumber
ynumber

Inherited from

NE.localToWorldXY


markDirty

markDirty(): void

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

Returns

void

Inherited from

NE.markDirty


pickable

pickable(): boolean

是否可被拾取到,默认返回:pointerEnabled 属性

js
pickable() {
   return this.pointerEnabled;
}

Returns

boolean

Inherited from

NE.pickable


querySelector

querySelector(querySelector): NE

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

Parameters

NameType
querySelectorstring | (child: Node | Link) => boolean

Returns

NE

Inherited from

NE.querySelector


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

NameType
querySelector?string | (child: Node | Link) => boolean

Returns

NE[]

Inherited from

NE.querySelectorAll


removeAllChildren

removeAllChildren(): Node

移除所有子对象

Returns

Node

Inherited from

NE.removeAllChildren


removeAllClass

removeAllClass(): Node

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

js
obj.removeAllClass();

Returns

Node

Inherited from

NE.removeAllClass


removeAttribute

removeAttribute(name): void

移除一个属性

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

Parameters

NameType
namestring

Returns

void

Inherited from

NE.removeAttribute


removeChild

removeChild(child): Node

移除一个子对象

Parameters

NameType
childNE

Returns

Node

Inherited from

NE.removeChild


removeChildren

removeChildren(childs): Node

Parameters

NameType
childsNE[]

Returns

Node

Inherited from

NE.removeChildren


removeClass

removeClass(styleName): void

移除一个样式

js
obj.removeClass('.focus');

Parameters

NameType
styleNamestring

Returns

void

Inherited from

NE.removeClass


removeEventListener

removeEventListener(type, callback): void

Parameters

NameType
typestring
callbackFunction

Returns

void

Inherited from

NE.removeEventListener


removeFromParent

removeFromParent(): Node

从父容器中移除

Returns

Node

Inherited from

NE.removeFromParent


resize

resize(width, height): Node

设置尺寸

Parameters

NameTypeDescription
widthnumber宽度
heightnumber高度

Returns

Node


resizeWith

resizeWith(w, h): Node

原有尺寸基础上增加

Parameters

NameType
wnumber
hnumber

Returns

Node


rotate

rotate(angle): Node

旋转

Parameters

NameTypeDescription
anglenumber旋转角度(弧度)

Returns

Node

Implementation of

Transformable.rotate

Overrides

NE.rotate


rotateWith

rotateWith(dAngle): Node

旋转-增量性

Parameters

NameTypeDescription
dAnglenumber旋转角度的增量(弧度制)

Returns

Node


scale

scale(x, y): Node

缩放

Parameters

NameType
xnumber
ynumber

Returns

Node

Implementation of

Transformable.scale

Overrides

NE.scale


scaleBy

scaleBy(x, y): Node

按系数缩放, 在当前缩放的基础上再乘以指定缩放系数

Parameters

NameType
xnumber
ynumber

Returns

Node


setAttribute

setAttribute(name, value): void

设置自定义属性

Parameters

NameType
namestring
valueany

Returns

void

Inherited from

NE.setAttribute


setAttributes

setAttributes(attrs): Node

一次性设置多个属性

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

Parameters

NameType
attrsstring | { [key: string]: any; }

Returns

Node

Inherited from

NE.setAttributes


setOriginOnLink(t, lineSegmentIndex?): Node

将节点定位到连线的某个位置上,该位置随连线变化而变

Parameters

NameTypeDefault valueDescription
tnumberundefined位置百分比
lineSegmentIndexanynull线段索引(默认是null,表示中间的线段)

Returns

Node


setOriginPosition

setOriginPosition(position): Node

Parameters

NameType
positionRectPositionType

Returns

Node


setSize

setSize(width, height): Node

设置尺寸, 与resize完全等价

Parameters

NameTypeDescription
widthnumber宽度
heightnumber高度

Returns

Node


setStyle

setStyle(styleName, value): Node

设置某一个样式

Parameters

NameType
styleNameStyleKeyType
valueany

Returns

Node

Inherited from

NE.setStyle


setStyles

setStyles(styles): Node

背景和边框的设置语法参考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

NameType
stylesPartStyleOptionType

Returns

Node

Inherited from

NE.setStyles


setText

setText(v): void

Parameters

NameType
vstring

Returns

void


setXY

setXY(x, y): Node

设置坐标, translate的简写

Parameters

NameType
xnumber
ynumber

Returns

Node


setZIndex

setZIndex(index): void

设置zIndex

当两个同⽗元素z-index相同时,后⾯的元素显⽰在上⾯

Parameters

NameTypeDescription
indexnumber建议范围 [1, 999]

Returns

void

Inherited from

NE.setZIndex


show

show(): Node

显示

Returns

Node

Inherited from

NE.show


showAllChildren

showAllChildren(): Node

显示所有下级节点

Returns

Node

Inherited from

NE.showAllChildren


skew

skew(skewX, skewY): Node

错切

Parameters

NameType
skewXnumber
skewYnumber

Returns

Node


toJSON

toJSON(): any

Returns

any

Inherited from

NE.toJSON


translate

translate(x, y): Node

平移对象,与setXY()完全等价

只是从图形的语义上平移更接近本质:有相对性的意识

Parameters

NameType
xnumber
ynumber

Returns

Node

Implementation of

Transformable.translate

Overrides

NE.translate


translateTo

translateTo(x, y): Node

平移对象到指定位置(x,y)

Deprecated

Parameters

NameType
xnumber
ynumber

Returns

Node


translateWith

translateWith(x, y): Node

增量平移对象, 在对象原有的坐标基础上,增加偏移(dx,dy)。相当于: x += dx; y += dy。

Parameters

NameType
xnumber
ynumber

Returns

Node

Overrides

NE.translateWith


update

update(): void

请求更新画面

Returns

void

Inherited from

NE.update


updateMatrix

updateMatrix(): Node

Returns

Node

Inherited from

NE.updateMatrix


updateZIndex

updateZIndex(): Node

更新直接下级子对象的zIndex

Returns

Node

Inherited from

NE.updateZIndex


worldToLocalXY

worldToLocalXY(x, y): Object

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

Since

2.6.0

Parameters

NameType
xnumber
ynumber

Returns

Object

NameType
xnumber
ynumber

Inherited from

NE.worldToLocalXY