import {PluginBase} from "../plugin-base"; export class SVGEdgeHoverPlugin extends PluginBase { private boundEdgeEnterFunction = this.onEdgeEnter.bind(this); private modelListener: { dispose: Function } = { dispose: () => void 0 }; afterRender(): void { this.attachEdgeHoverBehavior(); } destroy(): void { this.detachEdgeHoverBehavior(); this.modelListener.dispose(); } private attachEdgeHoverBehavior() { this.detachEdgeHoverBehavior(); this.workflow.workflow.addEventListener("mouseenter", this.boundEdgeEnterFunction, true); } private detachEdgeHoverBehavior() { this.workflow.workflow.removeEventListener("mouseenter", this.boundEdgeEnterFunction, true); } private onEdgeEnter(ev: MouseEvent) { // Ignore if we did not enter an edge if (!(ev.target! as Element).classList.contains("edge")) return; const target = ev.target as SVGGElement; let tipEl: SVGGElement; const onMouseMove = (ev: MouseEvent) => { const coords = this.workflow.transformScreenCTMtoCanvas(ev.clientX, ev.clientY); tipEl.setAttribute("x", String(coords.x)); tipEl.setAttribute("y", String(coords.y - 16)); }; const onMouseLeave = (ev: MouseEvent) => { tipEl.remove(); target.removeEventListener("mousemove", onMouseMove); target.removeEventListener("mouseleave", onMouseLeave) }; this.modelListener = this.workflow.model.on("connection.remove", (source, destination) => { if (!tipEl) return; const [tipS, tipD] = tipEl.getAttribute("data-source-destination")!.split("$!$"); if (tipS === source.connectionId && tipD === destination.connectionId) { tipEl.remove(); } }); const sourceNode = target.getAttribute("data-source-node"); const destNode = target.getAttribute("data-destination-node"); const sourcePort = target.getAttribute("data-source-port"); const destPort = target.getAttribute("data-destination-port"); const sourceConnect = target.getAttribute("data-source-connection"); const destConnect = target.getAttribute("data-destination-connection"); const sourceLabel = sourceNode === sourcePort ? sourceNode : `${sourceNode} (${sourcePort})`; const destLabel = destNode === destPort ? destNode : `${destNode} (${destPort})`; const coords = this.workflow.transformScreenCTMtoCanvas(ev.clientX, ev.clientY); const ns = "http://www.w3.org/2000/svg"; tipEl = document.createElementNS(ns, "text"); tipEl.classList.add("label"); tipEl.classList.add("label-edge"); tipEl.setAttribute("x", String(coords.x)); tipEl.setAttribute("y", String(coords.y)); tipEl.setAttribute("data-source-destination", sourceConnect + "$!$" + destConnect); tipEl.innerHTML = sourceLabel + " → " + destLabel; this.workflow.workflow.appendChild(tipEl); target.addEventListener("mousemove", onMouseMove); target.addEventListener("mouseleave", onMouseLeave); } }