alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(core): add getIncomers, getOutgoers & getConnectedEdges as store actions

Browse Source
This commit is contained in:
braks
2023-10-06 18:00:01 +02:00
committed by Braks
parent 5e888987eb
commit edc7669b18
4 changed files with 95 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/store/actions.ts
+21 -2
View File
@@ -34,9 +34,11 @@ import {
createGraphNodes,
createNodeRemoveChange,
createSelectionChange,
getConnectedEdges,
getConnectedEdges as getConnectedEdgesBase,
getDimensions,
getHandleBounds,
getIncomers as getIncomersBase,
getOutgoers as getOutgoersBase,
getOverlappingArea,
getSelectionChanges,
isDef,
@@ -54,7 +56,9 @@ export function useActions(
hooksOn: any,
state: State,
getters: ComputedGetters,
// todo: change to a Set
nodeIds: ComputedRef<string[]>,
// todo: change to a Set
edgeIds: ComputedRef<string[]>,
): Actions {
const viewportHelper = useViewport(state, getters)
@@ -65,6 +69,18 @@ export function useActions(
state.hooks.updateNodeInternals.trigger(updateIds)
}
const getIncomers: Actions['getIncomers'] = (nodeOrId) => {
return getIncomersBase(nodeOrId, state.nodes, state.edges)
}
const getOutgoers: Actions['getOutgoers'] = (nodeOrId) => {
return getOutgoersBase(nodeOrId, state.nodes, state.edges)
}
const getConnectedEdges: Actions['getConnectedEdges'] = (nodesOrId) => {
return getConnectedEdgesBase(nodesOrId, state.edges)
}
const findNode: Actions['findNode'] = (id) => {
if (!id) {
return
@@ -519,7 +535,7 @@ export function useActions(
const edgeChanges: EdgeRemoveChange[] = []
function createEdgeRemovalChanges(nodes: Node[]) {
const connections = getConnectedEdges(nodes, state.edges).filter((edge) => (isDef(edge.deletable) ? edge.deletable : true))
const connections = getConnectedEdges(nodes).filter((edge) => (isDef(edge.deletable) ? edge.deletable : true))
edgeChanges.push(
...connections.map((connection) => createEdgeRemoveChange(connection.id, connection.source, connection.target)),
@@ -920,6 +936,9 @@ export function useActions(
setInteractive,
setState,
getIntersectingNodes,
getIncomers,
getOutgoers,
getConnectedEdges,
isNodeIntersecting,
panBy,
fitView: (params) => viewportHelper.value.fitView(params),
packages/core/src/store/state.ts
+2
View File
@@ -31,7 +31,9 @@ function defaultState(): State {
return {
vueFlowRef: null,
viewportRef: null,
// todo: change this to a Set
nodes: [],
// todo: change this to a Set
edges: [],
nodeTypes: {},
edgeTypes: {},
packages/core/src/types/store.ts
+6
View File
@@ -275,6 +275,12 @@ export interface Actions extends ViewportFunctions {
getIntersectingNodes: GetIntersectingNodes
/** check if a node is intersecting with a defined area */
isNodeIntersecting: IsNodeIntersecting
/** get a node's incomers */
getIncomers: (nodeOrId: Node | string) => GraphNode[]
/** get a node's outgoers */
getOutgoers: (nodeOrId: Node | string) => GraphNode[]
/** get a node's connected edges */
getConnectedEdges: (nodesOrId: Node[] | string) => GraphEdge[]
/** pan the viewport; return indicates if a transform has happened or not */
panBy: (delta: XYPosition) => boolean
packages/core/src/utils/graph.ts
+66 -18
View File
@@ -9,6 +9,7 @@ import type {
Dimensions,
Edge,
EdgeMarkerType,
Element,
ElementData,
Elements,
FlowElements,
@@ -151,24 +152,63 @@ export function parseEdge(edge: Edge, defaults: Partial<GraphEdge> = {}): GraphE
return Object.assign({}, defaults, edge, { id: edge.id.toString() }) as GraphEdge
}
function getConnectedElements<T extends Elements = FlowElements>(
function getConnectedElements<T extends Node = Node>(
nodeOrId: Node | { id: string } | string,
elements: T,
nodes: T[],
edges: Edge[],
dir: 'source' | 'target',
): T extends FlowElements ? GraphNode[] : Node[] {
): T[] {
const id = isString(nodeOrId) ? nodeOrId : nodeOrId.id
const connectedIds = new Set()
const origin = dir === 'source' ? 'target' : 'source'
const ids = elements.filter((e) => isEdge(e) && e[origin] === id).map((e) => isEdge(e) && e[dir])
return elements.filter((e) => ids.includes(e.id)) as T extends FlowElements ? GraphNode[] : Node[]
}
export function getOutgoers<T extends Elements = FlowElements>(nodeOrId: Node | { id: string } | string, elements: T) {
return getConnectedElements(nodeOrId, elements, 'target')
edges.forEach((edge) => {
if (edge[origin] === id) {
connectedIds.add(edge[dir])
}
})
return nodes.filter((n) => connectedIds.has(n.id))
}
export function getIncomers<T extends Elements = FlowElements>(nodeOrId: Node | { id: string } | string, elements: T) {
return getConnectedElements(nodeOrId, elements, 'source')
export function getOutgoers<N extends Node>(nodeOrId: Node | { id: string } | string, nodes: N[], edges: Edge[]): N[]
export function getOutgoers<T extends Elements>(
nodeOrId: Node | { id: string } | string,
elements: T,
): T extends FlowElements ? GraphNode[] : Node[]
export function getOutgoers(...args: any[]) {
if (args.length === 3) {
const [nodeOrId, nodes, edges] = args
return getConnectedElements(nodeOrId, nodes, edges, 'target')
}
const [nodeOrId, elements] = args
const node: Node = isString(nodeOrId) ? { id: nodeOrId } : nodeOrId
const outgoers = elements.filter((el: Element) => isEdge(el) && el.source === node.id)
return outgoers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.target))
}
export function getIncomers<N extends Node>(nodeOrId: Node | { id: string } | string, nodes: N[], edges: Edge[]): N[]
export function getIncomers<T extends Elements>(
nodeOrId: Node | { id: string } | string,
elements: T,
): T extends FlowElements ? GraphNode[] : Node[]
export function getIncomers(...args: any[]) {
if (args.length === 3) {
const [nodeOrId, nodes, edges] = args
return getConnectedElements(nodeOrId, nodes, edges, 'source')
}
const [nodeOrId, elements] = args
const node: Node = isString(nodeOrId) ? { id: nodeOrId } : nodeOrId
const incomers = elements.filter((el: Element) => isEdge(el) && el.target === node.id)
return incomers.map((edge: Edge) => elements.find((el: Element) => isNode(el) && el.id === edge.source))
}
export function getEdgeId({ source, sourceHandle, target, targetHandle }: Connection) {
@@ -364,26 +404,34 @@ export function getNodesInside(
})
}
export function getConnectedEdges<N extends Node | { id: string } | string, E extends Edge>(nodes: N[], edges: E[]) {
const nodeIds = nodes.map((node) => (isString(node) ? node : node.id))
export function getConnectedEdges<E extends Edge>(nodesOrId: Node[] | string, edges: E[]) {
const nodeIds = new Set()
return edges.filter((edge) => nodeIds.includes(edge.source) || nodeIds.includes(edge.target))
if (isString(nodesOrId)) {
nodeIds.add(nodesOrId)
} else if (nodesOrId.length >= 1) {
nodesOrId.forEach((n) => nodeIds.add(n.id))
}
return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target))
}
export function getConnectedNodes<N extends Node | { id: string } | string, E extends Edge>(nodes: N[], edges: E[]) {
const nodeIds = nodes.map((node) => (isString(node) ? node : node.id))
export function getConnectedNodes<N extends Node | { id: string } | string>(nodes: N[], edges: Edge[]) {
const nodeIds = new Set()
nodes.forEach((node) => nodeIds.add(isString(node) ? node : node.id))
const connectedNodeIds = edges.reduce((acc, edge) => {
if (nodeIds.includes(edge.source)) {
if (nodeIds.has(edge.source)) {
acc.add(edge.target)
}
if (nodeIds.includes(edge.target)) {
if (nodeIds.has(edge.target)) {
acc.add(edge.source)
}
return acc
}, new Set<string>())
}, new Set())
return nodes.filter((node) => connectedNodeIds.has(isString(node) ? node : node.id))
}