@logicflow/core
Version:
LogicFlow, help you quickly create flowcharts
535 lines (534 loc) • 14.1 kB
TypeScript
import LogicFlow, { BaseNodeModel, BaseEdgeModel, Model, GraphModel, TransformData, TransformType } from '..';
import NodeData = LogicFlow.NodeData;
import EdgeData = LogicFlow.EdgeData;
import GraphData = LogicFlow.GraphData;
import AnchorConfig = Model.AnchorConfig;
import ClientPosition = LogicFlow.ClientPosition;
type ClickEventArgs = {
/**
* 点击后节点是否处于选中状态
*/
isSelected: boolean;
/**
* 是否为多选状态
*/
isMultiple: boolean;
};
type NodeEventArgsPick<T extends 'preData' | 'data' | 'model' | 'e' | 'position' | 'deltaX' | 'deltaY' | 'index'> = Pick<{
/**
* 上一个状态的节点数据
*/
preData: NodeData;
/**
* 节点数据
*/
data: NodeData;
/**
* 节点 model
*/
model: BaseNodeModel;
/**
* 原生鼠标事件对象
*/
e: MouseEvent;
/**
* 鼠标触发点相对于画布左上角的坐标
*/
position: ClientPosition;
/**
* 鼠标 X轴移动的距离
*/
deltaX: number;
/**
* 鼠标Y轴移动的距离
*/
deltaY: number;
/**
* Resize 时调整的是哪个控制点
*/
index: number;
}, T>;
type TextEventArgsPick<T extends 'data' | 'e' | 'model' | 'element' | 'position'> = Pick<{
data?: any;
e?: MouseEvent | FocusEvent;
model?: BaseNodeModel | BaseEdgeModel | unknown;
element?: HTMLElement | null;
position?: {
x: number;
y: number;
};
}, T>;
/**
* 节点事件
*/
interface NodeEventArgs {
/**
* 单击节点
*/
'node:click': NodeEventArgsPick<'data' | 'e' | 'position'> & ClickEventArgs;
/**
* 双击节点
*/
'node:dbclick': NodeEventArgsPick<'data' | 'e' | 'position'>;
/**
* 鼠标按下节点
*/
'node:mousedown': NodeEventArgsPick<'data' | 'e'>;
/**
* 鼠标抬起节点
*/
'node:mouseup': NodeEventArgsPick<'data' | 'e'>;
/**
* 鼠标移动节点
*/
'node:mousemove': NodeEventArgsPick<'data' | 'e' | 'deltaX' | 'deltaY'>;
/**
* 鼠标进入节点
*/
'node:mouseenter': NodeEventArgsPick<'data' | 'e'>;
/**
* 鼠标离开节点
*/
'node:mouseleave': NodeEventArgsPick<'data' | 'e'>;
/**
* 添加节点
*/
'node:add': NodeEventArgsPick<'data'>;
/**
* 删除节点
*/
'node:delete': NodeEventArgsPick<'data' | 'model'>;
/**
* 添加外部拖入节点
*/
'node:dnd-add': NodeEventArgsPick<'data'>;
/**
* 拖拽外部拖入节点
*/
'node:dnd-drag': NodeEventArgsPick<'data' | 'e'>;
/**
* 开始拖拽节点
*/
'node:dragstart': NodeEventArgsPick<'data' | 'e'>;
/**
* 拖拽节点
*/
'node:drag': NodeEventArgsPick<'data' | 'e' | 'deltaX' | 'deltaY'>;
/**
* 拖拽节点结束
*/
'node:drop': NodeEventArgsPick<'data' | 'e'>;
/**
* 右键点击节点
*/
'node:contextmenu': NodeEventArgsPick<'data' | 'e' | 'position'>;
/**
* 节点旋转
*/
'node:rotate': NodeEventArgsPick<'data' | 'e' | 'model'>;
/**
* 节点缩放
*/
'node:resize': NodeEventArgsPick<'preData' | 'data' | 'model' | 'deltaX' | 'deltaY' | 'index'>;
/**
* 元素的 properties 发生改变
*/
'node:properties-change': {
/**
* 元素的 id
*/
id: string;
/**
* 改变的 properties 的 key
*/
keys: string[];
/**
* 改变前的 properties
*/
preProperties: Record<string, any>;
/**
* 改变后的 properties
*/
properties: Record<string, any>;
};
/**
* 节点获焦
*/
'node:focus': NodeEventArgsPick<'data'>;
/**
* 节点失焦
*/
'node:blur': NodeEventArgsPick<'data'>;
}
type EdgeEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
/**
* 边数据
*/
data: EdgeData;
/**
* 原生鼠标事件对象
*/
e: MouseEvent;
/**
* 鼠标触发点相对于画布左上角的坐标
*/
position: ClientPosition;
}, T>;
/**
* 边事件
*/
interface EdgeEventArgs {
/**
* 单击边
*/
'edge:click': EdgeEventArgsPick<'data' | 'e' | 'position'>;
/**
* 双击边
*/
'edge:dbclick': EdgeEventArgsPick<'data' | 'e' | 'position'>;
/**
* 鼠标进入边
*/
'edge:mouseenter': EdgeEventArgsPick<'data' | 'e'>;
/**
* 鼠标离开边
*/
'edge:mouseleave': EdgeEventArgsPick<'data' | 'e'>;
/**
* 添加边
*/
'edge:add': EdgeEventArgsPick<'data'>;
/**
* 删除边
*/
'edge:delete': EdgeEventArgsPick<'data'>;
/**
* 右键点击边
*/
'edge:contextmenu': EdgeEventArgsPick<'data' | 'e' | 'position'>;
/**
* 拖拽调整边
*/
'edge:adjust': EdgeEventArgsPick<'data'>;
/**
* 调整边的起点/终点
*/
'edge:exchange-node': {
data: {
/**
* 新的边的数据
*/
newEdge: EdgeData;
/**
* 旧的边的数据
*/
oldEdge: EdgeData;
};
};
/**
* 边获焦
*/
'edge:focus': EdgeEventArgsPick<'data'>;
/**
* 边失焦
*/
'edge:blur': EdgeEventArgsPick<'data'>;
}
/**
* 文本事件
*/
interface TextEventArgs {
'text:mousedown': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:dragstart': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:drag': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:drop': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:click': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:dbclick': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:blur': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>;
'text:mousemove': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:mouseup': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:focus': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>;
'text:add': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:update': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:clear': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:delete': TextEventArgsPick<'data' | 'e' | 'model'>;
'text:not-allowed-add': TextEventArgsPick<'data' | 'e' | 'model'>;
}
/**
* label插件文本事件
*/
interface TextEventArgs {
'label:mousedown': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:dragstart': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:drag': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:drop': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:click': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:dbclick': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:blur': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>;
'label:mousemove': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:mouseup': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:focus': TextEventArgsPick<'data' | 'e' | 'model' | 'element'>;
'label:add': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:update': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:clear': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:delete': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:should-add': TextEventArgsPick<'data' | 'e' | 'model' | 'position'>;
'label:batch-add': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:should-update': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:should-delete': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:batch-delete': TextEventArgsPick<'data' | 'e' | 'model'>;
'label:not-allowed-add': TextEventArgsPick<'data' | 'e' | 'model'>;
}
/**
* 连线事件
*/
interface ConnectionEventArgs {
'connection:not-allowed': {
/**
* 目标节点数据
*/
data: NodeData;
/**
* 校验信息
*/
msg?: string;
};
}
/**
* 公共事件
*/
interface CommonEventArgs {
'element:click': {
/**
* 点击元素的数据（节点/边）
*/
data: NodeData | EdgeData;
/**
* 原生鼠标事件对象
*/
e: MouseEvent;
/**
* 鼠标触发点相对于画布左上角的坐标
*/
position: ClientPosition;
};
/**
* 进行画布平移或缩放等变化操作时触发
*/
'graph:transform': {
/**
* 变换操作类型
*/
type: TransformType;
/**
* 变换操作后的数据
*/
transform: TransformData;
};
/**
* 画布渲染数据后触发，即 `lf.render()` 方法被调用后触发。
*/
'graph:rendered': {
/**
* 渲染后的画布数据
*/
data: GraphData;
/**
* 渲染后的画布 model
*/
graphModel: GraphModel;
};
/**
* 画布重新更新后触发. 即 lf.render(graphData)方法被调用后或者改变画布（graphModel）上的属性后触发。
* 如果是主动修改某个特定属性导致画布更新，想要在画布更新后做一些操作，建议注册事件后在回调函数中及时注销该事件，或者使用once事件代替on事件。
* 因为其他属性也可能导致画布更新，触发该事件。
*/
'graph:updated': {
/**
* 更新后的画布数据
*/
data: GraphData;
};
/**
* 画布容器大小发生变化触发，为了性能考虑对事件做了防抖处理，间隔为16ms
*/
'graph:resize': {
/**
* 更新后的画布数据
*/
target: HTMLElement;
contentRect: DOMRectReadOnly;
};
}
type AnchorEventArgsPick<T extends 'data' | 'e' | 'nodeModel' | 'edgeModel'> = Pick<{
/**
* 锚点数据
*/
data: AnchorConfig;
/**
* 原生鼠标事件对象
*/
e: MouseEvent;
/**
* 锚点所属节点的数据
*/
nodeModel: BaseNodeModel;
/**
* 通过拖动锚点连线添加的边的数据
*/
edgeModel?: BaseEdgeModel;
}, T>;
/**
* 锚点事件
*/
interface AnchorEventArgs {
/**
* anchor 锚点 click
*/
'anchor:click': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>;
/**
* anchor 锚点 mousedown
*/
'anchor:mousedown': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>;
/**
* 开始拖拽锚点
*/
'anchor:dragstart': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>;
/**
* 拖拽锚点
*/
'anchor:drag': AnchorEventArgsPick<'data' | 'e' | 'nodeModel'>;
/**
* 拖拽锚点结束，并成功添加边。
* 只有在创建连线成功时才触发。用于区分手动创建的连线和自动创建的连线 `edge:add`
*/
'anchor:drop': AnchorEventArgsPick<'data' | 'e' | 'nodeModel' | 'edgeModel'>;
/**
* 拖拽锚点结束，不管是否成功添加边都会触发
*/
'anchor:dragend': AnchorEventArgsPick<'data' | 'e' | 'nodeModel' | 'edgeModel'>;
}
type BlankEventArgsPick<T extends 'e' | 'position'> = Pick<{
/**
* 原生鼠标事件对象
*/
e: MouseEvent;
/**
* 鼠标触发点相对于画布左上角的坐标
*/
position: ClientPosition;
}, T>;
/**
* 画布事件
*/
interface BlankEventArgs {
/**
* 鼠标按下画布
*/
'blank:mousedown': BlankEventArgsPick<'e'>;
/**
* 鼠标抬起画布
*/
'blank:mouseup': BlankEventArgsPick<'e'>;
/**
* 鼠标移动画布
*/
'blank:mousemove': BlankEventArgsPick<'e'>;
/**
* 单击画布
*/
'blank:click': BlankEventArgsPick<'e'>;
/**
* 右键点击画布
*/
'blank:contextmenu': BlankEventArgsPick<'e' | 'position'>;
/**
* 开始拖拽画布
*/
'blank:dragstart': BlankEventArgsPick<'e'>;
/**
* 拖拽画布
*/
'blank:drag': BlankEventArgsPick<'e'>;
/**
* 拖拽画布结束
*/
'blank:drop': BlankEventArgsPick<'e'>;
}
interface HistoryEventArgs {
/**
* 历史记录变化
*/
'history:change': {
/**
* 历史数据
*/
data: {
/**
* 可撤销的 graph 快照
*/
undos: GraphData[];
/**
* 可重做的 graph 快照
*/
redos: GraphData[];
/**
* 是否可以撤销
*/
undoAble: boolean;
/**
* 是否可以重做
*/
redoAble: boolean;
};
};
}
type SelectionEventArgsPick<T extends 'data' | 'e' | 'position'> = Pick<{
/**
* 选中元素的数据（节点/边）
*/
data: GraphData;
/**
* 原生鼠标事件对象
*/
e: MouseEvent;
/**
* 鼠标触发点相对于画布左上角的坐标
*/
position: ClientPosition;
}, T>;
/**
* 选区事件
*/
interface SelectionEventArgs {
/**
* 鼠标按下选区
*/
'selection:mousedown': SelectionEventArgsPick<'e'>;
/**
* 开始拖拽选区
*/
'selection:dragstart': SelectionEventArgsPick<'e'>;
/**
* 拖拽选区
*/
'selection:drag': SelectionEventArgsPick<'e'>;
/**
* 拖拽选区结束
*/
'selection:drop': SelectionEventArgsPick<'e'>;
/**
* 鼠标移动选区
*/
'selection:mousemove': SelectionEventArgsPick<'e' | 'position'>;
/**
* 鼠标抬起选区
*/
'selection:mouseup': SelectionEventArgsPick<'e'>;
/**
* 右键点击选区
*/
'selection:contextmenu': SelectionEventArgsPick<'data' | 'e' | 'position'>;
}
export type EventArgs = NodeEventArgs & EdgeEventArgs & ConnectionEventArgs & CommonEventArgs & AnchorEventArgs & BlankEventArgs & HistoryEventArgs & SelectionEventArgs & TextEventArgs;
export {};