JFlow

Class: JFlow

JFlow

new JFlow(configs)

JFlow 对象 JFlow 是 canvas 上面封装的一个顶层对象，具有处理事件和绘制的功能

Parameters:
Name Type Description
configs JFlow~JFlowLayoutConfigs

配置项
Mixes In:

Members

_layout

Properties:
Type Description
Layout

布局对象
Mixes In:

_linkStack

Properties:
Type Description
InstanceStack

连线栈
Mixes In:

_stack

Properties:
Type Description
InstanceStack

对象栈
Mixes In:

canvas :Element

canvas 元素

Type:
  • Element

ctx :Context2d

Context2d 对象

Type:
  • Context2d

dpr :number

设备DPR

Type:
  • number

initialPosition :setInitialPosition

初始位置计算

Type:
  • setInitialPosition

initialZoom :number

初始缩放

Type:
  • number

instances

Properties:
Type Description
Array.<Node>

对象数组
Mixes In:
Properties:
Type Description
Array.<BaseLink>

连线数组
Mixes In:

maxZoom :number

最大缩放

Type:
  • number

minZoom :number

最小缩放

Type:
  • number

padding :number

内边距

Type:
  • number

scale :number

缩放

Type:
  • number

Methods

$mount(dom)

在 Document 元素上初始化实例

Parameters:
Name Type Description
dom Element

__render()

绘制画布

addToLinkStack(instance)

加入连线对象

Parameters:
Name Type Description
instance BaseLink

连线对象
Mixes In:

addToStack(instance)

加入节点对象

Parameters:
Name Type Description
instance Node

节点对象
Mixes In:

allowDefaultDragging()

开启默认对象拖动效果

clickHanlder(offsetX, offsetY, event)

菜单弹出处理函数

Parameters:
Name Type Description
offsetX Number

事件对象与canvas的内填充边（padding edge）在 X 轴方向上的偏移量。
offsetY Number

事件对象与canvas的内填充边（padding edge）在 Y 轴方向上的偏移量。
event Number

原生事件

consumeMessage()

接收消息

Mixes In:
Returns:

msg - 消息体

Type
Object

contextMenuHanlder(offsetX, offsetY, event)

菜单弹出处理函数

Parameters:
Name Type Description
offsetX Number

事件对象与canvas的内填充边（padding edge）在 X 轴方向上的偏移量。
offsetY Number

事件对象与canvas的内填充边（padding edge）在 Y 轴方向上的偏移量。
event Number

原生事件

focusOn(node)

移动画布到以目标绘图节点为中心的位置上

Parameters:
Name Type Description
node Node

绘图节点

initLayout(configs)

初始化布局

Parameters:
Name Type Description
configs LayoutMixin~LayoutConfigs

配置
Mixes In:

initStack(configs)

初始化对象栈

Parameters:
Name Type Description
configs JflowConfigs

配置
Mixes In:

interateNodeStack()

循环当前栈中节点

Properties:
Name Type Description
循环访问栈中每个节点 stackIteratorCallback
Mixes In:

panHandler(deltaX, deltaY, event)

平移画布操作处理函数

Parameters:
Name Type Description
deltaX Number

水平滚动量
deltaY Number

垂直滚动量
event Number

原生事件

pressMoveHandler(offsetX, offsetY, event)

按压中处理函数

Parameters:
Name Type Description
offsetX Number

事件对象与canvas的内填充边（padding edge）在 X 轴方向上的偏移量。
offsetY Number

事件对象与canvas的内填充边（padding edge）在 Y 轴方向上的偏移量。
event Number

原生事件

pressStartHandler(offsetX, offsetY, event)

开始按压处理函数

Parameters:
Name Type Description
offsetX Number

事件对象与canvas的内填充边（padding edge）在 X 轴方向上的偏移量。
offsetY Number

事件对象与canvas的内填充边（padding edge）在 Y 轴方向上的偏移量。
event Number

原生事件

pressUpHanlder(isDocument, event)

按压结束处理函数

Parameters:
Name Type Description
isDocument Boolean

是否为 document 触发
event Number

原生事件

preventDefaultDragging()

关闭默认对象拖动效果

recalculate()

重新计算布局，相当于浏览器里面重排，并重算当前布局下的最小外接矩形

Mixes In:

recalculateUp()

从当前层出发，向上层递归重排

Mixes In:

reflow()

重新计算布局，相当于浏览器里面重排

Mixes In:

removeFromLinkStack(target)

删除连线对象

Parameters:
Name Type Description
target Node

连线对象
Mixes In:

removeFromStack(target)

删除节点对象

Parameters:
Name Type Description
target Node

节点对象
Mixes In:

removeTempDraggingInstance()

取消当前拖动的 JFlow 对象

Returns:

point - JFlow 坐标

Type
Array.<number>

replaceFromStack(target, instance)

替换对象

Parameters:
Name Type Description
target Instance

被替换的对象
instance Instance

替换对象
Mixes In:

resetChildrenPosition()

重置当前栈中对象的位置

Mixes In:

连线模式下，重连回临时鼠标节点

resizeCanvas()

外层容器大小变化后，调用此方法可以改变当前canvas的状态

sendMessage(msg)

发送消息

Parameters:
Name Type Description
msg Object

消息体
Mixes In:

连线模式下，设置当前临时连线的属性

Parameters:
Name Type Description
configs BaseLink~Configs

当前连线的出发原始数据

setLinkingMode(source, linkGen)

设置Jflow进入连线模式

Parameters:
Name Type Description
source Object

当前连线的出发原始数据
linkGen linkGen

生成连线单元的方法

setMovingTargets(targets)

设置当前拖动的 JFlow 对象

Parameters:
Name Type Description
targets Array.<Object>

具有 anchor 属性的对象

setTempDraggingInstance(instance)

设置当前拖动的 JFlow 对象

Parameters:
Name Type Description
instance Instance

JFlow 对象

staticCheck(instance)

布局静态检查

Parameters:
Name Type Description
instance Instance

检查单元
Mixes In:
Returns:
  • 检查结果
Type
Boolean

zoomHandler(offsetX, offsetY, deltaX, deltaY, event)

缩放操作处理函数

Parameters:
Name Type Description
offsetX Number

事件对象与canvas的内填充边（padding edge）在 X 轴方向上的偏移量。
offsetY Number

事件对象与canvas的内填充边（padding edge）在 Y 轴方向上的偏移量。
deltaX Number

水平滚动量
deltaY Number

垂直滚动量
event Number

原生事件

Type Definitions

JFlowConfigs

Type:
  • object
Properties:
Name Type Description
allowDrop Boolean

是否允许 dragdrop
maxZoom Number

最大缩放
minZoom Number

最小缩放
initialZoom number

初始缩放比
eventAdapter EventAdapter~pluginDef

JFlowLayoutConfigs

Type:

Events

canvasmousemove

canvas mousemove 原生事件

Type: object
Properties:
Name Type Description
event Event

原始事件
jflow JFlow

当前JFlow对象

contextclick

点击事件

Type: object
Properties:
Name Type Description
event Event

原始事件
jflow JFlow

当前JFlow对象
topLayerPoint Array.<number>

jflow坐标系上的位置

contextclick

右键事件

Type: object
Properties:
Name Type Description
event Event

原始事件
jflow JFlow

当前JFlow对象
topLayerPoint Array.<number>

jflow坐标系上的位置

drop

丢在主图上事件

Type: object
Properties:
Name Type Description
event Event

原始事件
instance Object

拖动的对象
jflow JFlow

当前JFlow对象
point Array.<number>

已经计算到绘图栈对应坐标系下的坐标

pressEnd

拖动后放置到主图上的事件

Type: object
Properties:
Name Type Description
event Event

原始事件
instance Instance

拖动的对象
jflow JFlow

当前JFlow对象

zoompan

缩放平移事件