79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import { MouseEvent as ReactMouseEvent } from 'react';
|
|
import { StoreApi } from 'zustand';
|
|
|
|
import { Edge, MarkerType, ReactFlowState } from '../../types';
|
|
|
|
export const getMarkerEnd = (markerType?: MarkerType, markerEndId?: string): string => {
|
|
if (typeof markerEndId !== 'undefined' && markerEndId) {
|
|
return `url(#${markerEndId})`;
|
|
}
|
|
|
|
return typeof markerType !== 'undefined' ? `url(#react-flow__${markerType})` : 'none';
|
|
};
|
|
|
|
export function getMouseHandler(
|
|
id: string,
|
|
getState: StoreApi<ReactFlowState>['getState'],
|
|
handler?: (event: ReactMouseEvent<SVGGElement, MouseEvent>, edge: Edge) => void
|
|
) {
|
|
return handler === undefined
|
|
? handler
|
|
: (event: ReactMouseEvent<SVGGElement, MouseEvent>) => {
|
|
const edge = getState().edges.find((e) => e.id === id);
|
|
|
|
if (edge) {
|
|
handler(event, { ...edge });
|
|
}
|
|
};
|
|
}
|
|
|
|
// this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB)
|
|
export function getEdgeCenter({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
}: {
|
|
sourceX: number;
|
|
sourceY: number;
|
|
targetX: number;
|
|
targetY: number;
|
|
}): [number, number, number, number] {
|
|
const xOffset = Math.abs(targetX - sourceX) / 2;
|
|
const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
|
|
|
|
const yOffset = Math.abs(targetY - sourceY) / 2;
|
|
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
|
|
|
|
return [centerX, centerY, xOffset, yOffset];
|
|
}
|
|
|
|
export function getBezierEdgeCenter({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourceControlX,
|
|
sourceControlY,
|
|
targetControlX,
|
|
targetControlY,
|
|
}: {
|
|
sourceX: number;
|
|
sourceY: number;
|
|
targetX: number;
|
|
targetY: number;
|
|
sourceControlX: number;
|
|
sourceControlY: number;
|
|
targetControlX: number;
|
|
targetControlY: number;
|
|
}): [number, number, number, number] {
|
|
// cubic bezier t=0.5 mid point, not the actual mid point, but easy to calculate
|
|
// https://stackoverflow.com/questions/67516101/how-to-find-distance-mid-point-of-bezier-curve
|
|
const centerX = sourceX * 0.125 + sourceControlX * 0.375 + targetControlX * 0.375 + targetX * 0.125;
|
|
const centerY = sourceY * 0.125 + sourceControlY * 0.375 + targetControlY * 0.375 + targetY * 0.125;
|
|
const offsetX = Math.abs(centerX - sourceX);
|
|
const offsetY = Math.abs(centerY - sourceY);
|
|
|
|
return [centerX, centerY, offsetX, offsetY];
|
|
}
|