Appearance
@jtopo/core / TipNode
Class: TipNode
提示、角标节点, 通常用于告警、提示。 节点的原点(0,0)默认是最下方居中位置
Hierarchy
↳
TipNode
Table of contents
Constructors
Properties
- afterRender
- arrowsSize
- attributes
- autoDirection
- beforeRender
- children
- classList
- className
- data
- deep
- destroyed
- draggable
- dropAllowed
- id
- inLinks
- isLayer
- isLink
- isNode
- isSelected
- name
- originPosition
- outLinks
- ownerLayer
- parent
- pointerEnabled
- rotateWithParent
- selectedStyle
- serializeable
- showSelected
- style
- title
- type
Accessors
Methods
- addChild
- addChildren
- addClass
- addEventListener
- changeParent
- clearStyles
- contains
- destroy
- dispatchEvent
- draw
- getAABB
- getAnchor
- getAttribute
- getChildren
- getComputedStyle
- getInLinks
- getLinks
- getLocalPoint
- getOutLinks
- getPoint
- getPointAnchor
- getRoot
- getSegmentAnchor
- getShape
- getStyle
- getWorldTransform
- hasChild
- hasChildren
- hasClass
- hasListener
- hide
- hideAllChildren
- hitTest
- isConnected
- isVisible
- localToWorldXY
- markDirty
- pickable
- querySelector
- querySelectorAll
- removeAllChildren
- removeAllClass
- removeAttribute
- removeChild
- removeChildren
- removeClass
- removeEventListener
- removeFromParent
- resize
- resizeWith
- rotate
- rotateWith
- scale
- scaleBy
- setAttribute
- setAttributes
- setOriginOnLink
- setOriginPosition
- setSize
- setStyle
- setStyles
- setText
- setXY
- setZIndex
- show
- showAllChildren
- skew
- toJSON
- translate
- translateTo
- translateWith
- update
- updateZIndex
- worldToLocalXY
Constructors
constructor
new TipNode(text?
, x?
, y?
, w?
, h?
)
Parameters
Name | Type | Default value |
---|---|---|
text? | string | undefined |
x | number | 0 |
y | number | 0 |
w | number | 1 |
h | number | 1 |
Overrides
Properties
afterRender
Optional
afterRender: Function
渲染后回调
Inherited from
arrowsSize
arrowsSize: number
attributes
Readonly
attributes: Object
Since
2.6.0 存放自定义属性(用于定义节点类型,和业务数据无关)
Index signature
▪ [key: string
]: any
Inherited from
autoDirection
autoDirection: boolean
= true
自动调整方向,防止文字头向下
Inherited from
beforeRender
Optional
beforeRender: Function
渲染前回调
js
obj.beforeRender = function(){
if(this.x < 0){
this.x = 0;
}
//...
}
Inherited from
children
Readonly
children: NE
[]
子节点(直接下级)
Inherited from
classList
Readonly
classList: string
[]
通过addClass添加的样式名称列表
Inherited from
className
Readonly
className: any
Overrides
data
Optional
data: any
通常存放业务含义的数据
为了安全考虑,防止与对象属性冲突,用户最好使用该对象 用户附加到该对象的自定义属性
Since
2.4.0
Inherited from
deep
deep: number
层级深度, Layer为0,下面第一层子节点为1,依次类推
只读
Inherited from
destroyed
Readonly
destroyed: boolean
是否已经被销毁
Inherited from
draggable
draggable: boolean
是否可拖拽
Inherited from
dropAllowed
dropAllowed: boolean
是否可以作为拖拽目标
Since
2.4.0
Inherited from
id
Optional
id: string
| number
id, 标识,由开发人员控制和设计
Inherited from
inLinks
Readonly
inLinks: Link
[]
所有以本对象为结束点的Link对象数组
Inherited from
isLayer
Optional
Readonly
isLayer: boolean
是否是Layer对象, 可以使用 instanceof 替代
Inherited from
isLink
Optional
Readonly
isLink: boolean
是否是Link对象, 可以使用 instanceof 替代
Inherited from
isNode
isNode: boolean
是否是Node类的对象, 主要用于和Link区分
Inherited from
isSelected
Readonly
isSelected: boolean
是否被选中了
Inherited from
name
Optional
name: string
名称,可以在编辑时指定,运行时通过名称获取对象的引用
Inherited from
originPosition
originPosition: RectPositionType
= 'cb'
原点位置
Overrides
outLinks
Readonly
outLinks: Link
[]
所有以本对象为开始点的Link对象数组
Inherited from
ownerLayer
Optional
ownerLayer: Layer
所属的Layer
Since
2.6.0
Inherited from
parent
Optional
parent: NE
上级对象
Inherited from
pointerEnabled
pointerEnabled: boolean
是否响应(鼠标、触摸屏指针),为false的时候,不响应动作
Since
2.6.0
Inherited from
rotateWithParent
rotateWithParent: boolean
是否跟随父节点旋转
Inherited from
selectedStyle
Optional
selectedStyle: NodeSelectedStyleOptionsType
| LinkSelectedStyleOptionsType
选中时的样式,如果不设置将使用默认的
Inherited from
serializeable
serializeable: boolean
是否可序列化,默认true 如果为false,序列化时将跳过该对象
Inherited from
showSelected
showSelected: boolean
是否显示选中的效果,默认显示
Inherited from
style
Readonly
style: Style
样式
Inherited from
title
Optional
title: string
鼠标指向时显示的提示信息,和HTML中dom元素的title属性作用相同
Inherited from
type
Optional
type: string
类型,自定义类型
可用于自定义节点,区分节点类型
比用data属性更方便一点
Inherited from
Accessors
autoSize
get
autoSize(): boolean
尺寸是否自动适应文本
Returns
boolean
Inherited from
TextNode.autoSize
set
autoSize(v
): void
Parameters
Name | Type |
---|---|
v | boolean |
Returns
void
Inherited from
TextNode.autoSize
bottom
get
bottom(): number
Since
2.4.0
Returns
number
Inherited from
TextNode.bottom
set
bottom(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.bottom
height
get
height(): number
Returns
number
Inherited from
TextNode.height
set
height(v
): void
设置高度
注意:高度不能为0
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.height
left
get
left(): number
Since
2.4.0
Returns
number
Inherited from
TextNode.left
set
left(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.left
right
get
right(): number
Since
2.4.0
Returns
number
Inherited from
TextNode.right
set
right(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.right
rotation
get
rotation(): number
旋转角度 (弧度)
Returns
number
Inherited from
TextNode.rotation
set
rotation(v
): void
设置旋转角度 (弧度)
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.rotation
scaleX
get
scaleX(): number
Returns
number
Inherited from
TextNode.scaleX
set
scaleX(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.scaleX
scaleY
get
scaleY(): number
Returns
number
Inherited from
TextNode.scaleY
set
scaleY(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.scaleY
skewX
get
skewX(): number
Returns
number
Inherited from
TextNode.skewX
set
skewX(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.skewX
skewY
get
skewY(): number
Returns
number
Inherited from
TextNode.skewY
set
skewY(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.skewY
text
get
text(): string
Returns
string
Inherited from
TextNode.text
set
text(v
): void
Parameters
Name | Type |
---|---|
v | string |
Returns
void
Inherited from
TextNode.text
top
get
top(): number
Since
2.4.0
Returns
number
Inherited from
TextNode.top
set
top(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.top
visible
get
visible(): boolean
Returns
boolean
Inherited from
TextNode.visible
set
visible(v
): void
Parameters
Name | Type |
---|---|
v | boolean |
Returns
void
Inherited from
TextNode.visible
width
get
width(): number
Returns
number
Inherited from
TextNode.width
set
width(v
): void
设置宽度
注意:宽度不能为0
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.width
x
get
x(): number
Returns
number
Inherited from
TextNode.x
set
x(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.x
y
get
y(): number
Returns
number
Inherited from
TextNode.y
set
y(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.y
z
get
z(): number
Returns
number
Inherited from
TextNode.z
set
z(v
): void
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.z
zIndex
get
zIndex(): number
Returns
number
Inherited from
TextNode.zIndex
set
zIndex(v
): void
设置zInde 相同父节点下的兄弟节点之间才有意义
Parameters
Name | Type |
---|---|
v | number |
Returns
void
Inherited from
TextNode.zIndex
Methods
addChild
addChild(child
): TipNode
增加子对象
- 父对象和zIndex均相同的情况下,后来add的会显示在上面
- 默认情况下所有对象的 zIndex是 1
Parameters
Name | Type |
---|---|
child | NE |
Returns
Inherited from
addChildren
addChildren(childs
): TipNode
一次性增加多个对象, 比单个增加速度快很多,数量越多越明显!
注意:避免互为子节点、重复添加。
Parameters
Name | Type |
---|---|
childs | NE [] |
Returns
Inherited from
addClass
addClass(styleName
): TipNode
增加一个样式
js
obj.addClass('.focus');
Parameters
Name | Type |
---|---|
styleName | string |
Returns
Inherited from
addEventListener
addEventListener(type
, callback
): void
Parameters
Name | Type |
---|---|
type | string |
callback | Function |
Returns
void
Inherited from
changeParent
changeParent(newParent
): TipNode
修改父对象但保持世界坐标不变
Parameters
Name | Type |
---|---|
newParent | NE |
Returns
Inherited from
clearStyles
clearStyles(): TipNode
清除通过css或setStyles定义的所有样式
Returns
Inherited from
contains
contains(targe
): boolean
方法返回一个布尔值,表示一个对象是否是给定节点的后代,即该节点本身、其直接子节点(children)、子节点的直接子节点等。 备注: 节点包含在自身内部。
Parameters
Name | Type |
---|---|
targe | NE |
Returns
boolean
Inherited from
destroy
destroy(): void
销毁,释放相关的资源引用,一旦销毁,对象不能再被访问,访问就会报错。
注意:销毁后,所有事件回调、动画、定时器等均不能再访问,否则会报错。
Returns
void
Inherited from
dispatchEvent
dispatchEvent(event
): void
分发事件
Parameters
Name | Type |
---|---|
event | Event | EventBase |
Returns
void
Inherited from
draw
draw(ctx
): void
Parameters
Name | Type |
---|---|
ctx | CanvasRenderingContext2D |
Returns
void
Inherited from
getAABB
getAABB(recursive?
): Rectangle
获取对象在Layer中的aabb包围盒 (包围盒是世界坐标系)
Parameters
Name | Type | Description |
---|---|---|
recursive? | boolean | 是否将子节点包含在内 |
Returns
Inherited from
getAnchor
getAnchor(name
): AnchorProxy
根据名称获取并生成一个 ‘锚点‘
Parameters
Name | Type |
---|---|
name | string |
Returns
Inherited from
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
Inherited from
getChildren
getChildren(): NE
[]
获取所有子对象
Returns
NE
[]
Inherited from
getComputedStyle
getComputedStyle(): Style
获取:主题、自定义样式类、css方法三者层叠后的样式结果
(只读,不要修改返回的对象)
Returns
Inherited from
getInLinks
getInLinks(): Link
[]
Returns
Link
[]
Inherited from
getLinks
getLinks(): Link
[]
获取所有连接到本对象的Link
Returns
Link
[]
Inherited from
getLocalPoint
getLocalPoint(t
, segIndex?
): PointLike
获取对象上某一点(本地坐标系)
Parameters
Name | Type | Description |
---|---|---|
t | number | [0-1] 在线段上的比例 |
segIndex? | number | 线段索引(Node是矩形,有4条线段,索引:[0-3])可选项 |
Returns
Inherited from
getOutLinks
getOutLinks(): Link
[]
Returns
Link
[]
Inherited from
getPoint
getPoint(t
, segIndex?
): PointLike
获取对象上某一点
Parameters
Name | Type | Description |
---|---|---|
t | number | [0-1] 在线段上的比例 |
segIndex? | number | 线段索引(矩形,有4条线段,索引:[0-3])可选项 |
Returns
Inherited from
getPointAnchor
getPointAnchor(x
, y
): AnchorProxy
根据本地坐标并生成一个 ’锚点‘
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Inherited from
getRoot
getRoot(): TipNode
获取'root'对象, 沿着parent一直向上追溯 , 直到parent为null或Layer对象结束
Returns
Inherited from
getSegmentAnchor
getSegmentAnchor(t
, segIndex
): AnchorProxy
获取并生成线段上某个位置的 ’锚点’
Parameters
Name | Type |
---|---|
t | number |
segIndex | number |
Returns
Inherited from
getShape
getShape(): Shape
获取形状对象
Returns
Inherited from
getStyle
getStyle(name
): any
读取某个样式的值
Parameters
Name | Type |
---|---|
name | string |
Returns
any
Inherited from
getWorldTransform
getWorldTransform(): Transform
获取世界坐标系变换
Returns
Transform
Inherited from
hasChild
hasChild(child
): boolean
是否拥有某个下级子对象
Parameters
Name | Type |
---|---|
child | NE |
Returns
boolean
Inherited from
hasChildren
hasChildren(): boolean
是否拥有子对象
Returns
boolean
Inherited from
hasClass
hasClass(styleName
): boolean
检测是否拥有某个样式类
js
node.hasClass('.focus');
Since
2.4.0
Parameters
Name | Type |
---|---|
styleName | string |
Returns
boolean
Inherited from
hasListener
hasListener(type
): boolean
是否有该类型的监听
Parameters
Name | Type |
---|---|
type | string |
Returns
boolean
Inherited from
hide
hide(): TipNode
隐藏
Returns
Inherited from
hideAllChildren
hideAllChildren(): TipNode
隐藏所有下级节点
Returns
Inherited from
hitTest
hitTest(x
, y
): boolean
判断给定的坐标(世界坐标系)是否在对象内部
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
boolean
Inherited from
isConnected
isConnected(): boolean
是否被任意Link连接到
Since
2.4.0
Returns
boolean
Inherited from
isVisible
isVisible(): boolean
判断是否可见
Returns
boolean
Inherited from
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
markDirty
markDirty(): void
标记矩阵脏, 需要重新计算触发重绘
Returns
void
Inherited from
pickable
pickable(): boolean
是否可被拾取到,默认返回:pointerEnabled 属性
js
pickable() {
return this.pointerEnabled;
}
Returns
boolean
Inherited from
querySelector
querySelector(querySelector
): NE
功能类似querySelectorAll,但只返回第一个满足条件的对象或者null
Parameters
Name | Type |
---|---|
querySelector | string | (child : Node | Link ) => boolean |
Returns
Inherited from
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
[]
Inherited from
removeAllChildren
removeAllChildren(): TipNode
移除所有子对象
Returns
Inherited from
removeAllClass
removeAllClass(): TipNode
移除所有通过addClass添加的样式
js
obj.removeAllClass();
Returns
Inherited from
removeAttribute
removeAttribute(name
): void
移除一个属性
js
// 例如:
obj.removeAttribute('foo');
Parameters
Name | Type |
---|---|
name | string |
Returns
void
Inherited from
removeChild
removeChild(child
): TipNode
移除一个子对象
Parameters
Name | Type |
---|---|
child | NE |
Returns
Inherited from
removeChildren
removeChildren(childs
): TipNode
Parameters
Name | Type |
---|---|
childs | NE [] |
Returns
Inherited from
removeClass
removeClass(styleName
): void
移除一个样式
js
obj.removeClass('.focus');
Parameters
Name | Type |
---|---|
styleName | string |
Returns
void
Inherited from
removeEventListener
removeEventListener(type
, callback
): void
Parameters
Name | Type |
---|---|
type | string |
callback | Function |
Returns
void
Inherited from
removeFromParent
removeFromParent(): TipNode
从父容器中移除
Returns
Inherited from
resize
resize(width
, height
): TipNode
设置尺寸
Parameters
Name | Type | Description |
---|---|---|
width | number | 宽度 |
height | number | 高度 |
Returns
Inherited from
resizeWith
resizeWith(w
, h
): TipNode
原有尺寸基础上增加
Parameters
Name | Type |
---|---|
w | number |
h | number |
Returns
Inherited from
rotate
rotate(angle
): TipNode
旋转
Parameters
Name | Type | Description |
---|---|---|
angle | number | 旋转角度(弧度) |
Returns
Inherited from
rotateWith
rotateWith(dAngle
): TipNode
旋转-增量性
Parameters
Name | Type | Description |
---|---|---|
dAngle | number | 旋转角度的增量(弧度制) |
Returns
Inherited from
scale
scale(x
, y
): TipNode
缩放
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Inherited from
scaleBy
scaleBy(x
, y
): TipNode
按系数缩放, 在当前缩放的基础上再乘以指定缩放系数
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Inherited from
setAttribute
setAttribute(name
, value
): void
设置自定义属性
Parameters
Name | Type |
---|---|
name | string |
value | any |
Returns
void
Inherited from
setAttributes
setAttributes(attrs
): TipNode
一次性设置多个属性
js
// 一次性设置多个属性
obj.setAttributes({
foo: 'abc',
bar: false
});
Parameters
Name | Type |
---|---|
attrs | string | { [key: string] : any ; } |
Returns
Inherited from
setOriginOnLink
setOriginOnLink(t
, lineSegmentIndex?
): TipNode
将节点定位到连线的某个位置上,该位置随连线变化而变
Parameters
Name | Type | Default value | Description |
---|---|---|---|
t | number | undefined | 位置百分比 |
lineSegmentIndex | any | null | 线段索引(默认是null,表示中间的线段) |
Returns
Inherited from
setOriginPosition
setOriginPosition(position
): TipNode
Parameters
Name | Type |
---|---|
position | RectPositionType |
Returns
Inherited from
setSize
setSize(width
, height
): TipNode
设置尺寸, 与resize完全等价
Parameters
Name | Type | Description |
---|---|---|
width | number | 宽度 |
height | number | 高度 |
Returns
Inherited from
setStyle
setStyle(styleName
, value
): TipNode
设置某一个样式
Parameters
Name | Type |
---|---|
styleName | StyleKeyType |
value | any |
Returns
Inherited from
setStyles
setStyles(styles
): TipNode
背景和边框的设置语法参考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
Inherited from
setText
setText(v
): void
Parameters
Name | Type |
---|---|
v | string |
Returns
void
Inherited from
setXY
setXY(x
, y
): TipNode
设置坐标, translate的简写
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Inherited from
setZIndex
setZIndex(index
): void
设置zIndex
当两个同⽗元素z-index相同时,后⾯的元素显⽰在上⾯
Parameters
Name | Type | Description |
---|---|---|
index | number | 建议范围 [1, 999] |
Returns
void
Inherited from
show
show(): TipNode
显示
Returns
Inherited from
showAllChildren
showAllChildren(): TipNode
显示所有下级节点
Returns
Inherited from
skew
skew(skewX
, skewY
): TipNode
错切
Parameters
Name | Type |
---|---|
skewX | number |
skewY | number |
Returns
Inherited from
toJSON
toJSON(): any
Returns
any
Inherited from
translate
translate(x
, y
): TipNode
平移对象,与setXY()完全等价
只是从图形的语义上平移更接近本质:有相对性的意识
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Inherited from
translateTo
translateTo(x
, y
): TipNode
平移对象到指定位置(x,y)
Deprecated
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Inherited from
translateWith
translateWith(x
, y
): TipNode
增量平移对象, 在对象原有的坐标基础上,增加偏移(dx,dy)。相当于: x += dx; y += dy。
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Inherited from
update
update(): void
请求更新画面
Returns
void
Inherited from
updateZIndex
updateZIndex(): TipNode
更新直接下级子对象的zIndex
Returns
Inherited from
worldToLocalXY
worldToLocalXY(x
, y
): Object
将一个世界坐标转到本地坐标系
Since
2.6.0
Parameters
Name | Type |
---|---|
x | number |
y | number |
Returns
Object
Name | Type |
---|---|
x | number |
y | number |