@jtopo/core / Layer

Class: Layer

只用作展示的层，每个层对应一个Canvas. 只有加入到Layer中的对象(Node、Link及其子类的实例），才可能被绘制并显示出来.

// 创建
let layer = new Layer('myLayer');
stage.addLayer(layer);

// 常用方法

// 添加对象
layer.addChild(node);
layer.addChildren([node1, node2, link1, link2, node3]);

// 查找对象
let node = layer.querySelector('Node[name="node1"]');
let nodes = layer.querySelectorAll('.myClass');
let link = layer.querySelector('[text="myLink"]');

// 设置背景
// 颜色
layer.setStyles({
   background: 'gray'
});

Hierarchy

• NE

  ↳ Layer

Table of contents

Constructors

• constructor

Properties

• afterRender
• attributes
• beforeRender
• canvas
• children
• classList
• className
• data
• deep
• destroyed
• displayList
• draggable
• dropAllowed
• id
• inLinks
• isLayer
• isLink
• isNode
• isSelected
• name
• outLinks
• parent
• pointerEnabled
• selectedStyle
• serializeable
• showSelected
• stage
• style
• title
• type

Accessors

• background
• bottom
• height
• left
• right
• rotation
• scaleX
• scaleY
• skewX
• skewY
• top
• visible
• width
• x
• y
• z
• zIndex

Methods

• addChild
• addChildren
• addClass
• addEventListener
• clearStyles
• contains
• destroy
• dispatchEvent
• draw
• endLoopRender
• getAABB
• getAllLinks
• getAllNodes
• getAttribute
• getChildren
• getComputedStyle
• getConnectAutoPoint
• getInLinks
• getLinks
• getLocalPoint
• getOutLinks
• getPoint
• getRoot
• getShape
• getStyle
• getWorldTransform
• hasChild
• hasChildren
• hasClass
• hasListener
• hide
• hideAllChildren
• isConnected
• isVisible
• localToWorldXY
• loopRender
• markDirty
• pickable
• querySelector
• querySelectorAll
• removeAllChildren
• removeAllClass
• removeAttribute
• removeChild
• removeChildren
• removeClass
• removeEventListener
• removeFromParent
• rotate
• scale
• setAttribute
• setAttributes
• setBackground
• setStyle
• setStyles
• show
• showAllChildren
• toJSON
• translate
• update
• updateMatrix
• updateZIndex
• useDarkGridBackground
• useLightGridBackground
• worldToLocalXY

Constructors

constructor

new Layer(stage?)

Parameters

Name	Type
stage?	Stage

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

渲染前回调

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

Inherited from

NE.beforeRender

---

canvas

canvas: HTMLCanvasElement

Since

2.4.0

---

children

Readonly children: NE[]

子节点（直接下级）

Inherited from

NE.children

---

classList

Readonly classList: string[]

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

Inherited from

NE.classList

---

className

Readonly className: any

Overrides

NE.className

---

data

Optional data: any

通常存放业务含义的数据

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

Since

2.4.0

Inherited from

NE.data

---

deep

Readonly deep: number

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

Overrides

NE.deep

---

destroyed

Readonly destroyed: boolean

是否已经被销毁

Inherited from

NE.destroyed

---

displayList

Readonly displayList: (Node | Link)[] = []

绘制在当前画布上对象列表

---

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

---

inLinks

Readonly inLinks: Link[]

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

Inherited from

NE.inLinks

---

isLayer

Readonly isLayer: boolean

Overrides

NE.isLayer

---

isLink

Optional Readonly isLink: boolean

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

Inherited from

NE.isLink

---

isNode

Readonly isNode: boolean

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

Inherited from

NE.isNode

---

isSelected

Readonly isSelected: boolean

是否被选中了

Inherited from

NE.isSelected

---

name

Optional name: string

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

Inherited from

NE.name

---

outLinks

Readonly outLinks: Link[]

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

Inherited from

NE.outLinks

---

parent

Optional parent: NE

上级对象

Inherited from

NE.parent

---

pointerEnabled

pointerEnabled: boolean

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

Since

2.6.0

Inherited from

NE.pointerEnabled

---

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

---

stage

Readonly stage: Stage

---

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

background

get background(): Object

Returns

Object

Name	Type
background?	string
backgroundRepeat?	string
backgroundSize?	string
backgroundPosition?	string

set background(v): void

Parameters

Name	Type
v	Object
v.background?	string
v.backgroundRepeat?	string
v.backgroundSize?	string
v.backgroundPosition?	string

Returns

void

---

bottom

get bottom(): number

Since

2.4.0

Returns

number

Inherited from

NE.bottom

set bottom(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.bottom

---

height

get height(): number

Returns

number

Inherited from

NE.height

set height(v): void

设置高度

注意：高度不能为0

Parameters

Name	Type
v	number

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

Name	Type
v	number

Returns

void

Inherited from

NE.left

---

right

get right(): number

Since

2.4.0

Returns

number

Inherited from

NE.right

set right(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.right

---

rotation

get rotation(): number

旋转角度 (弧度)

Returns

number

Inherited from

NE.rotation

set rotation(v): void

设置旋转角度 (弧度)

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.rotation

---

scaleX

get scaleX(): number

Returns

number

Inherited from

NE.scaleX

set scaleX(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.scaleX

---

scaleY

get scaleY(): number

Returns

number

Inherited from

NE.scaleY

set scaleY(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.scaleY

---

skewX

get skewX(): number

Returns

number

Inherited from

NE.skewX

set skewX(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.skewX

---

skewY

get skewY(): number

Returns

number

Inherited from

NE.skewY

set skewY(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.skewY

---

top

get top(): number

Since

2.4.0

Returns

number

Inherited from

NE.top

set top(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.top

---

visible

get visible(): boolean

Returns

boolean

Inherited from

NE.visible

set visible(v): void

Parameters

Name	Type
v	boolean

Returns

void

Inherited from

NE.visible

---

width

get width(): number

Returns

number

Inherited from

NE.width

set width(v): void

设置宽度

注意：宽度不能为0

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.width

---

x

get x(): number

Returns

number

Inherited from

NE.x

set x(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.x

---

y

get y(): number

Returns

number

Inherited from

NE.y

set y(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.y

---

z

get z(): number

Returns

number

Inherited from

NE.z

set z(v): void

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.z

---

zIndex

get zIndex(): number

Returns

number

Inherited from

NE.zIndex

set zIndex(v): void

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

Parameters

Name	Type
v	number

Returns

void

Inherited from

NE.zIndex

Methods

addChild

addChild(child): Layer

增加子对象

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

Parameters

Name	Type
child	NE

Returns

Layer

Overrides

NE.addChild

---

addChildren

addChildren(childs): Layer

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

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

Parameters

Name	Type
childs	NE[]

Returns

Layer

Overrides

NE.addChildren

---

addClass

addClass(styleName): Layer

增加一个样式

obj.addClass('.focus');

Parameters

Name	Type
styleName	string

Returns

Layer

Inherited from

NE.addClass

---

addEventListener

addEventListener(type, callback): void

Parameters

Name	Type
type	string
callback	Function

Returns

void

Inherited from

NE.addEventListener

---

clearStyles

clearStyles(): Layer

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

Returns

Layer

Inherited from

NE.clearStyles

---

contains

contains(targe): boolean

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

Parameters

Name	Type
targe	NE

Returns

boolean

Inherited from

NE.contains

---

destroy

destroy(): void

销毁

Returns

void

Overrides

NE.destroy

---

dispatchEvent

dispatchEvent(event): void

分发事件

Parameters

Name	Type
event	Event | EventBase

Returns

void

Inherited from

NE.dispatchEvent

---

draw

draw(ctx): void

Parameters

Name	Type
ctx	any

Returns

void

Overrides

NE.draw

---

endLoopRender

endLoopRender(): void

停止渲染循环

Returns

void

---

getAABB

getAABB(): Rectangle

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

Returns

Rectangle

Overrides

NE.getAABB

---

getAllLinks

getAllLinks(): Link[]

递归式 获取所有连线对象

Returns

Link[]

所有连线对象

---

getAllNodes

getAllNodes(): NE[]

递归式 获取所有节点对象

Returns

NE[]

所有节点对象

---

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

Inherited from

NE.getAttribute

---

getChildren

getChildren(): NE[]

获取所有子对象

Returns

NE[]

Inherited from

NE.getChildren

---

getComputedStyle

getComputedStyle(): Style

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

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

Returns

Style

Inherited from

NE.getComputedStyle

---

getConnectAutoPoint

getConnectAutoPoint(worldPoint): PointLike

Parameters

Name	Type
worldPoint	PointLike

Returns

PointLike

Inherited from

NE.getConnectAutoPoint

---

getInLinks

getInLinks(): Link[]

Returns

Link[]

Inherited from

NE.getInLinks

---

getLinks

getLinks(): Link[]

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

Returns

Link[]

Inherited from

NE.getLinks

---

getLocalPoint

getLocalPoint(t, segIndex?): PointLike

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

Parameters

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

Returns

PointLike

Inherited from

NE.getLocalPoint

---

getOutLinks

getOutLinks(): Link[]

Returns

Link[]

Inherited from

NE.getOutLinks

---

getPoint

getPoint(t, segIndex?): PointLike

获取对象上某一点

Parameters

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

Returns

PointLike

Inherited from

NE.getPoint

---

getRoot

getRoot(): Layer

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

Returns

Layer

Inherited from

NE.getRoot

---

getShape

getShape(): Shape

获取形状对象

Returns

Shape

Inherited from

NE.getShape

---

getStyle

getStyle(name): any

读取某个样式的值

Parameters

Name	Type
name	string

Returns

any

Inherited from

NE.getStyle

---

getWorldTransform

getWorldTransform(): Transform

获取世界坐标系变换

Returns

Transform

Inherited from

NE.getWorldTransform

---

hasChild

hasChild(child): boolean

是否拥有某个下级子对象

Parameters

Name	Type
child	NE

Returns

boolean

Inherited from

NE.hasChild

---

hasChildren

hasChildren(): boolean

是否拥有子对象

Returns

boolean

Inherited from

NE.hasChildren

---

hasClass

hasClass(styleName): boolean

检测是否拥有某个样式类

node.hasClass('.focus');

Since

2.4.0

Parameters

Name	Type
styleName	string

Returns

boolean

Inherited from

NE.hasClass

---

hasListener

hasListener(type): boolean

是否有该类型的监听

Parameters

Name	Type
type	string

Returns

boolean

Inherited from

NE.hasListener

---

hide

hide(): Layer

隐藏

Returns

Layer

Overrides

NE.hide

---

hideAllChildren

hideAllChildren(): Layer

隐藏所有下级节点

Returns

Layer

Inherited from

NE.hideAllChildren

---

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

Name	Type
x	number
y	number

Returns

Object

Name	Type
x	number
y	number

Inherited from

NE.localToWorldXY

---

loopRender

loopRender(frames?): void

开启渲染循环, 定时刷新画面（最高60帧）

如果不开启渲染循环, 有鼠标动作 和 动画时才会重绘画面

Parameters

Name	Type	Default value	Description
frames	number	60	使用固定帧率，默认60

Returns

void

---

markDirty

markDirty(): void

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

Returns

void

Inherited from

NE.markDirty

---

pickable

pickable(): boolean

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

pickable() {
   return this.pointerEnabled;
}

Returns

boolean

Inherited from

NE.pickable

---

querySelector

querySelector(querySelector): Node | Link

查询符合条件的第一个对象

Parameters

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

Returns

Node | Link

Overrides

NE.querySelector

---

querySelectorAll

querySelectorAll(querySelector?): (Node | Link)[]

查询所有符合条件的对象

Parameters

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

Returns

(Node | Link)[]

Overrides

NE.querySelectorAll

---

removeAllChildren

removeAllChildren(): Layer

移除所有子对象

Returns

Layer

Inherited from

NE.removeAllChildren

---

removeAllClass

removeAllClass(): Layer

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

obj.removeAllClass();

Returns

Layer

Inherited from

NE.removeAllClass

---

removeAttribute

removeAttribute(name): void

移除一个属性

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

Parameters

Name	Type
name	string

Returns

void

Inherited from

NE.removeAttribute

---

removeChild

removeChild(child): Layer

移除一个子对象

Parameters

Name	Type
child	NE

Returns

Layer

Inherited from

NE.removeChild

---

removeChildren

removeChildren(childs): Layer

Parameters

Name	Type
childs	NE[]

Returns

Layer

Inherited from

NE.removeChildren

---

removeClass

removeClass(styleName): void

移除一个样式

obj.removeClass('.focus');

Parameters

Name	Type
styleName	string

Returns

void

Inherited from

NE.removeClass

---

removeEventListener

removeEventListener(type, callback): void

Parameters

Name	Type
type	string
callback	Function

Returns

void

Inherited from

NE.removeEventListener

---

removeFromParent

removeFromParent(): Layer

从父容器中移除

Returns

Layer

Inherited from

NE.removeFromParent

---

rotate

rotate(angle): Layer

Parameters

Name	Type
angle	number

Returns

Layer

Inherited from

NE.rotate

---

scale

scale(x, y): Layer

Parameters

Name	Type
x	number
y	number

Returns

Layer

Inherited from

NE.scale

---

setAttribute

setAttribute(name, value): void

设置自定义属性

Parameters

Name	Type
name	string
value	any

Returns

void

Inherited from

NE.setAttribute

---

setAttributes

setAttributes(attrs): Layer

一次性设置多个属性

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

Parameters

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

Returns

Layer

Inherited from

NE.setAttributes

---

setBackground

setBackground(styleOption): Layer

设置样式，对于Layer只支持设置背景

Parameters

Name	Type
styleOption	Object
styleOption.background?	string
styleOption.backgroundImage?	string
styleOption.backgroundRepeat?	string
styleOption.backgroundPosition?	string
styleOption.backgroundSize?	string

Returns

Layer

---

setStyle

setStyle(styleName, value): Layer

设置某一个样式

Parameters

Name	Type
styleName	StyleKeyType
value	any

Returns

Layer

Inherited from

NE.setStyle

---

setStyles

setStyles(styleOption): Layer

设置样式，对于Layer只支持设置背景,

Deprecated

请使用语义setBackground方法

Parameters

Name	Type
styleOption	PartStyleOptionType

Returns

Layer

Overrides

NE.setStyles

---

show

show(): Layer

显示

Returns

Layer

Overrides

NE.show

---

showAllChildren

showAllChildren(): Layer

显示所有下级节点

Returns

Layer

Inherited from

NE.showAllChildren

---

toJSON

toJSON(): any

Returns

any

Inherited from

NE.toJSON

---

translate

translate(x, y): Layer

Parameters

Name	Type
x	number
y	number

Returns

Layer

Inherited from

NE.translate

---

update

update(): void

请求更新画面

Returns

void

Overrides

NE.update

---

updateMatrix

updateMatrix(): Layer

Returns

Layer

Inherited from

NE.updateMatrix

---

updateZIndex

updateZIndex(): Layer

更新直接下级子对象的zIndex

Returns

Layer

Inherited from

NE.updateZIndex

---

useDarkGridBackground

useDarkGridBackground(): void

使用暗色网格背景

Returns

void

---

useLightGridBackground

useLightGridBackground(): void

使用亮色网格背景

Returns

void

---

worldToLocalXY

worldToLocalXY(x, y): Object

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

Since

2.6.0

Parameters

Name	Type
x	number
y	number

Returns

Object

Name	Type
x	number
y	number

Inherited from

NE.worldToLocalXY