js 网站测速,仿做网站可以整站下载器吧,dedecms能制作几个网站,大型网站建设制作公司一、视图交互事件 通过鼠标、键盘或者各种可交互的组件与应用产生交互时触发的事件#xff0c;如单击节点 ‘node:click’ 等。 1、鼠标事件
事件cell 节点/边node 节点edge 边blank 画布空白区域单击cell:clicknode:clickedge:clickblank:click双击cell:dblclicknode:dblcli…一、视图交互事件 通过鼠标、键盘或者各种可交互的组件与应用产生交互时触发的事件如单击节点 ‘node:click’ 等。 1、鼠标事件
事件cell 节点/边node 节点edge 边blank 画布空白区域单击cell:clicknode:clickedge:clickblank:click双击cell:dblclicknode:dblclickedge:dblclickblank:dblclick右键cell:contextmenunode:contextmenuedge:contextmenublank:contextmenu鼠标按下cell:mousedownnode:mousedownedge:mousedownblank:mousedown移动鼠标cell:mousemovenode:mousemoveedge:mousemoveblank:mousemove鼠标抬起cell:mouseupnode:mouseupedge:mouseupblank:mouseup鼠标滚轮cell:mousewheelnode:mousewheeledge:mousewheelblank:mousewheel鼠标进入cell:mouseenternode:mouseenteredge:mouseenterblank:mouseenter鼠标离开cell:mouseleavenode:mouseleaveedge:mouseleaveblank:mouseleave 需要注意的是这里的 mousemove 事件和通常的鼠标移动事件有所区别它需要在鼠标按下后移动鼠标才能触发。 除了 mouseenter 和 mouseleave 外事件回调函数的参数都包含鼠标相对于画布的位置 x、y 和鼠标事件对象 e 等参数。
graph.on(cell:click, ({ e, x, y, cell, view }) {});
graph.on(node:click, ({ e, x, y, node, view }) {});
graph.on(edge:click, ({ e, x, y, edge, view }) {});
graph.on(blank:click, ({ e, x, y }) {});graph.on(cell:mouseenter, ({ e, cell, view }) {});
graph.on(node:mouseenter, ({ e, node, view }) {});
graph.on(edge:mouseenter, ({ e, edge, view }) {});
graph.on(graph:mouseenter, ({ e }) {});2. 自定义点击事件
可以在节点/边的 DOM 元素上添加自定义属性 event 或 data-event 来监听该元素的点击事件例如
node.attr({// 表示一个删除按钮点击时删除该节点image: {event: node:delete,xlinkHref: trash.png,width: 20,height: 20,},
});可以通过绑定的事件名 node:delete 或通用的 cell:customevent、node:customevent、edge:customevent 事件名来监听。
graph.on(node:delete, ({ view, e }) {e.stopPropagation();view.cell.remove();
});graph.on(node:customevent, ({ name, view, e }) {if (name node:delete) {e.stopPropagation();view.cell.remove();}
});功能演示 3. 画布缩放/平移
事件名回调参数说明scale{ sx: number; sy: number; ox: number; oy: number }缩放画布时触发sx 和 sy 是缩放比例ox 和 oy 是缩放中心。resize{ width: number; height: number }改变画布大小时触发width 和 height 是画布大小。translate{ tx: number; ty: number }平移画布时触发tx 和 ty 分别是 X 和 Y 轴的偏移量。
graph.on(scale, ({ sx, sy, ox, oy }) {});
graph.on(resize, ({ width, height }) {});
graph.on(translate, ({ tx, ty }) {});4. 节点或边缩放/平移/旋转
事件名回调参数说明node:move{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始移动节点时触发。node:moving{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }移动节点时触发。node:moved{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }移动节点后触发。edge:move{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始移动边时触发。edge:moving{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }移动边时触发。edge:moved{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }移动边后触发。node:resize{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始调整节点大小时触发。node:resizing{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }调整节点大小时触发。node:resized{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }调整节点大小后触发。node:rotate{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }开始旋转节点时触发。node:rotating{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }旋转节点时触发。node:rotated{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }旋转节点后触发。
参数中的 x 和 y 是鼠标相对于画布的坐标。
graph.on(node:moved, ({ e, x, y, node, view }) {});
graph.on(node:resized, ({ e, x, y, node, view }) {});
graph.on(node:rotated, ({ e, x, y, node, view }) {});5. 节点嵌入
事件名回调参数说明node:embed{ e: JQuery.MouseDownEvent; x: number; y: number; node: Node; view: NodeView, currentParent: Node }开启嵌入在开始拖动节点时触发。node:embedding{ e: JQuery.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView, currentParent: Node, candidateParent: Node }寻找目标节点过程中触发。node:embedded{ e: JQuery.MouseUpEvent; x: number; y: number; node: Node; view: NodeView, previousParent: Node, currentParent: Node }完成节点嵌入后触发。
6. 边连接/取消连接
当拖动边的起始/终止箭头将边连接到节点/边或者将边从节点/边上分离后触发 edge:connected回调函数的参数如下。
interface Args {e: JQuery.MouseUpEvent // 鼠标事件对象edge: Edge // 边view: EdgeView // 边的视图isNew: boolean // 是否是新创建的边type: Edge.TerminalType // 操作的是起始箭头还是终止箭头source | targetpreviousCell?: Cell | null // 交互前连接到的节点/边previousView?: CellView | null // 交互前连接到的节点/边的视图previousPort?: string | null // 交互前连接到的链接桩 IDpreviousPoint?: Point.PointLike | null // 交互前连接到的点将边的终端从空白处拖动到节点/边上时记录起始终端的位置previousMagnet?: Element | null // 交互前连接到的元素currentCell?: Cell | null // 交互后连接到的节点/边currentView?: CellView | null // 交互后连接到的节点/边的视图currentPort?: string | null // 交互后连接到的链接桩 IDcurrentPoint?: Point.PointLike | null // 交互后连接到的点将边的终端从节点/边上拖动到空白处时记录拖动后终端的位置currentMagnet?: Element | null // 交互后连接到的元素
}一、节点/边
1. 添加/删除/修改 当节点/边被添加到画布时触发以下事件 addedcell:addednode:added仅当 cell 是节点时才触发edge:added仅当 cell 是边时才触发 当节点/边被移除时触发以下事件 removedcell:removednode:removed仅当 cell 是节点时才触发edge:removed仅当 cell 是边时才触发 当节点/边发生任何改变时触发以下事件 changedcell:changednode:changed仅当 cell 是节点时才触发edge:changed仅当 cell 是边时才触发
可以在节点/边上监听
cell.on(added, ({ cell, index, options }) {});
cell.on(removed, ({ cell, index, options }) {});
cell.on(changed, ({ cell, options }) {});或者在 Graph 上监听
graph.on(cell:added, ({ cell, index, options }) {});
graph.on(cell:removed, ({ cell, index, options }) {});
graph.on(cell:changed, ({ cell, options }) {});graph.on(node:added, ({ node, index, options }) {});
graph.on(node:removed, ({ node, index, options }) {});
graph.on(node:changed, ({ node, options }) {});graph.on(edge:added, ({ edge, index, options }) {});
graph.on(edge:removed, ({ edge, index, options }) {});
graph.on(edge:changed, ({ edge, options }) {});2. change:xxx
当调用 setXxx(val, options) 和 removeXxx(options) 方法去改变节点/边的数据时并且 options.silent 不为 true 时都将触发对应的 chang 事件并触发节点/边重绘。例如
cell.setZIndex(2);
cell.setZIndex(2, { silent: false });
cell.setZIndex(2, { anyKey: anyValue });将触发 Cell 上的以下事件
change:*change:zIndex
和 Graph 上的以下事件
cell:change:*node:change:*仅当 cell 是节点时才触发edge:change:*仅当 cell 是边时才触发cell:change:zIndexnode:change:zIndex仅当 cell 是节点时才触发edge:change:zIndex仅当 cell 是边时才触发
可以在节点/边上监听
// 当 cell 发生任何改变时都将被触发可以通过 key 来确定改变项
cell.on(change:*, (args: {cell: Cellkey: string // 通过 key 来确定改变项current: any // 当前值previous: any // 改变之前的值options: any // 透传的 options
}) {if (key zIndex) {//}
})cell.on(change:zIndex, (args: {cell: Cellcurrent?: number // 当前值previous?: number // 改变之前的值options: any // 透传的 options
}) { })或者在 Graph 上监听
graph.on(cell:change:*, (args: {cell: Cellkey: string // 通过 key 来确定改变项current: any // 当前值类型根据 key 指代的类型确定previous: any // 改变之前的值类型根据 key 指代的类型确定options: any // 透传的 options
}) { })// 当 cell 为节点时触发
graph.on(node:change:*, (args: {cell: Cellnode: Nodekey: string // 通过 key 来确定改变项current: any // 当前值类型根据 key 指代的类型确定previous: any // 改变之前的值类型根据 key 指代的类型确定options: any // 透传的 options
}) { })// 当 cell 为边时触发
graph.on(edge:change:*, (args: {cell: Celledge: Edgekey: string // 通过 key 来确定改变项current: any // 当前值类型根据 key 指代的类型确定previous: any // 改变之前的值类型根据 key 指代的类型确定options: any // 透传的 options
}) { })graph.on(cell:change:zIndex, (args: {cell: Cellcurrent?: number // 当前值previous?: number // 改变之前的值options: any // 透传的 options
}) { })// 当 cell 为节点时触发
graph.on(node:change:zIndex, (args: {cell: Cellnode: Nodecurrent?: number // 当前值previous?: number // 改变之前的值options: any // 透传的 options
}) { })// 当 cell 为边时触发
graph.on(edge:change:zIndex, (args: {cell: Celledge: Edgecurrent?: number // 当前值previous?: number // 改变之前的值options: any // 透传的 options
}) { })其他 change 事件如下列表回调函数的参数与上面提到的 change:zIndex 的参数结构一致。 Cell change:*change:attrschange:zIndexchange:markupchange:visiblechange:parentchange:childrenchange:viewchange:data Node change:sizechange:anglechange:positionchange:portschange:portMarkupchange:portLabelMarkupchange:portContainerMarkupports:addedports:removed Edge change:sourcechange:targetchange:terminalchange:routerchange:connectorchange:verticeschange:labelschange:defaultLabelchange:toolMarkupchange:doubleToolMarkupchange:vertexMarkupchange:arrowheadMarkupvertexs:addedvertexs:removedlabels:addedlabels:removed
除了上述这些内置的 Key我们也支持监听自定义的 Key例如
cell.on(change:custom, ({ cell, current, previous, options }) {console.log(current);
});当通过 cell.prop(‘custom’, ‘any data’) 方法修改 custom 属性的值时将触发 change:custom 事件。
3. 动画
‘transition:start’ 动画开始时触发‘transition:progress’ 动画过程中触发‘transition:complete’ 动画完成时触发‘transition:stop’ 动画被停止时触发‘transition:finish’ 动画完成或被停止时触发
cell.on(transition:start, (args: Animation.CallbackArgs) {})
cell.on(transition:progress, (args: Animation.ProgressArgs) {})
cell.on(transition:complete, (args: Animation.CallbackArgs) {})
cell.on(transition:stop, (args: Animation.StopArgs) {})
cell.on(transition:finish, (args: Animation.CallbackArgs) {})graph.on(cell:transition:start, (args: Animation.CallbackArgs) {})
graph.on(cell:transition:progress, (args: Animation.ProgressArgs) {})
graph.on(cell:transition:complete, (args: Animation.CallbackArgs) {})
graph.on(cell:transition:stop, (args: Animation.StopArgs) {})
graph.on(cell:transition:finish, (args: Animation.CallbackArgs) {})graph.on(node:transition:start, (args: Animation.CallbackArgs) {})
graph.on(node:transition:progress, (args: Animation.ProgressArgs) {})
graph.on(node:transition:complete, (args: Animation.CallbackArgs) {})
graph.on(node:transition:stop, (args: Animation.StopArgs) {})
graph.on(node:transition:finish, (args: Animation.CallbackArgs) {})graph.on(edge:transition:start, (args: Animation.CallbackArgs) {})
graph.on(edge:transition:progress, (args: Animation.ProgressArgs) {})
graph.on(edge:transition:complete, (args: Animation.CallbackArgs) {})
graph.on(edge:transition:stop, (args: Animation.StopArgs) {})
graph.on(edge:transition:finish, (args: Animation.CallbackArgs) {})
