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

chore(core): replace getNode with findNode

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-01-18 20:47:32 +01:00
committed by Braks
parent 73de601f79
commit 203b4815f8
8 changed files with 114 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Nodes/NodeWrapper.vue
+2 -2
View File
@@ -25,7 +25,7 @@ const {
nodesSelectionActive,
multiSelectionActive,
emits,
getNode,
findNode,
removeSelectedElements,
addSelectedNodes,
updateNodeDimensions,
@@ -42,7 +42,7 @@ const updateNodePositions = useUpdateNodePositions()
const node = $(useVModel(props, 'node'))
const parentNode = $computed(() => (node.parentNode ? getNode(node.parentNode) : undefined))
const parentNode = $computed(() => (node.parentNode ? findNode(node.parentNode) : undefined))
const connectedEdges = $computed(() => getConnectedEdges([node], edges))
packages/core/src/composables/useDrag.ts
+7 -7
View File
@@ -26,7 +26,7 @@ function useDrag(params: UseDragParams) {
noDragClassName,
nodes,
nodeExtent,
getNode,
findNode,
multiSelectionActive,
nodesSelectionActive,
selectNodesOnDrag,
@@ -47,7 +47,7 @@ function useDrag(params: UseDragParams) {
watch([() => disabled, () => el], () => {
if (el) {
const selection = select(el)
const node = id ? getNode(id) : undefined
const node = id ? findNode(id) : undefined
if (disabled) {
selection.on('.drag', null)
@@ -65,13 +65,13 @@ function useDrag(params: UseDragParams) {
}
const mousePos = getPointerPosition(event, snapToGrid ? snapGrid : undefined)
dragItems = getDragItems(nodes, mousePos, getNode, id)
dragItems = getDragItems(nodes, mousePos, findNode, id)
if (onStart && dragItems) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
getNode: $$(getNode),
findNode,
})
onStart(event.sourceEvent, currentNode, nodes)
}
@@ -98,7 +98,7 @@ function useDrag(params: UseDragParams) {
n,
nextPosition,
nodeExtent,
n.parentNode ? getNode(n.parentNode) : undefined,
n.parentNode ? findNode(n.parentNode) : undefined,
)
// we want to make sure that we only fire a change event when there is a changes
@@ -117,7 +117,7 @@ function useDrag(params: UseDragParams) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
getNode: $$(getNode),
findNode,
})
dragging.value = true
@@ -135,7 +135,7 @@ function useDrag(params: UseDragParams) {
const [currentNode, nodes] = getEventHandlerParams({
id,
dragItems,
getNode: $$(getNode),
findNode,
})
dragging.value = false
packages/core/src/composables/useHandle.ts
+12 -12
View File
@@ -1,6 +1,6 @@
import type { MaybeRef } from '@vueuse/core'
import { isFunction } from '@vueuse/core'
import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types'
import type { Actions, Connection, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types'
import { ConnectionMode } from '~/types'
interface Result {
@@ -30,7 +30,7 @@ export const checkElementBelowIsValid = (
isValidConnection: ValidConnectionFunc | undefined,
doc: Document,
edges: GraphEdge[],
getNode: Getters['getNode'],
findNode: Actions['findNode'],
) => {
const clientX = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientX : (event as MouseEvent).clientX
const clientY = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientY : (event as MouseEvent).clientY
@@ -73,7 +73,7 @@ export const checkElementBelowIsValid = (
result.isValid =
(isFunction(isValidConnection)
? isValidConnection(connection, { edges, sourceNode: getNode(sourceId)!, targetNode: getNode(targetId)! })
? isValidConnection(connection, { edges, sourceNode: findNode(sourceId)!, targetNode: findNode(targetId)! })
: elementBelowNodeId !== nodeId || elementBelowHandleId !== handleId) ||
!result.connection.target ||
!result.connection.source
@@ -113,7 +113,7 @@ export default function useHandle({
startConnection,
updateConnection,
endConnection,
getNode,
findNode,
vueFlowRef,
} = $(useVueFlow())
@@ -129,7 +129,7 @@ export default function useHandle({
let validConnectFunc = isValidConnection
const node = getNode(unref(nodeId))
const node = findNode(unref(nodeId))
if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
@@ -175,7 +175,7 @@ export default function useHandle({
validConnectFunc,
doc,
edges,
getNode,
findNode,
)
if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
@@ -199,7 +199,7 @@ export default function useHandle({
validConnectFunc,
doc,
edges,
getNode,
findNode,
)
const isOwnHandle = connection.source === connection.target
@@ -234,7 +234,7 @@ export default function useHandle({
let validConnectFunc = isValidConnection
const node = getNode(unref(nodeId))
const node = findNode(unref(nodeId))
if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
@@ -285,7 +285,7 @@ export default function useHandle({
validConnectFunc,
doc,
edges,
getNode,
findNode,
)
if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
@@ -309,7 +309,7 @@ export default function useHandle({
validConnectFunc,
doc,
edges,
getNode,
findNode,
)
const isOwnHandle = connection.source === connection.target
@@ -343,7 +343,7 @@ export default function useHandle({
} else {
let validConnectFunc: ValidConnectionFunc = isValidConnection ?? (() => true)
const node = getNode(unref(nodeId))
const node = findNode(unref(nodeId))
if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
@@ -362,7 +362,7 @@ export default function useHandle({
validConnectFunc,
doc,
edges,
getNode,
findNode,
)
const isOwnHandle = connection.source === connection.target
packages/core/src/store/actions.ts
+7 -7
View File
@@ -124,7 +124,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
}
const changes: NodeDimensionChange[] = updates.reduce<NodeDimensionChange[]>((res, update) => {
const node = getters.getNode.value(update.id)
const node = findNode(update.id)
if (node) {
const dimensions = getDimensions(update.nodeElement)
@@ -285,7 +285,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
if (!state.initialized && !nodes.length) return
if (!state.nodes) state.nodes = []
const curr = nodes instanceof Function ? nodes(state.nodes) : nodes
state.nodes = createGraphNodes(curr, getters.getNode.value, state.nodes, extent ?? state.nodeExtent)
state.nodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent)
}
const setEdges: Actions['setEdges'] = (edges) => {
@@ -293,8 +293,8 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
const curr = edges instanceof Function ? edges(state.edges) : edges
state.edges = curr.reduce<GraphEdge[]>((res, edge) => {
const sourceNode = getters.getNode.value(edge.source)!
const targetNode = getters.getNode.value(edge.target)!
const sourceNode = findNode(edge.source)!
const targetNode = findNode(edge.target)!
const missingSource = !sourceNode || typeof sourceNode === 'undefined'
const missingTarget = !targetNode || typeof targetNode === 'undefined'
@@ -325,7 +325,7 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
const addNodes: Actions['addNodes'] = (nodes, extent) => {
const curr = nodes instanceof Function ? nodes(state.nodes) : nodes
const graphNodes = createGraphNodes(curr, getters.getNode.value, state.nodes, extent ?? state.nodeExtent)
const graphNodes = createGraphNodes(curr, findNode, state.nodes, extent ?? state.nodeExtent)
const changes = graphNodes.map(createAdditionChange)
if (changes.length) state.hooks.nodesChange.trigger(changes)
@@ -343,8 +343,8 @@ export function useActions(state: State, getters: ComputedGetters): Actions {
state.edges,
)
if (edge) {
const sourceNode = getters.getNode.value(edge.source)!
const targetNode = getters.getNode.value(edge.target)!
const sourceNode = findNode(edge.source)!
const targetNode = findNode(edge.target)!
const missingSource = !sourceNode || typeof sourceNode === 'undefined'
const missingTarget = !targetNode || typeof targetNode === 'undefined'
packages/core/src/utils/drag.ts
+6 -20
View File
@@ -1,14 +1,6 @@
import type { Ref } from 'vue'
import { isNumber } from '@vueuse/shared'
import type {
ComputedGetters,
CoordinateExtent,
ExtendedParentExtent,
Getters,
GraphNode,
NodeDragItem,
XYPosition,
} from '~/types'
import type { Actions, CoordinateExtent, ExtendedParentExtent, GraphNode, NodeDragItem, XYPosition } from '~/types'
export function hasSelector(target: Element, selector: string, node: Ref<Element>): boolean {
let current = target
@@ -26,11 +18,11 @@ export function hasSelector(target: Element, selector: string, node: Ref<Element
export function getDragItems(
nodes: GraphNode[],
mousePos: XYPosition,
getNode: Getters['getNode'],
findNode: Actions['findNode'],
nodeId?: string,
): NodeDragItem[] {
return nodes
.filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, getNode)))
.filter((n) => (n.selected || n.id === nodeId) && (!n.parentNode || !isParentSelected(n, findNode)))
.map((n) =>
markRaw({
id: n.id,
@@ -50,19 +42,13 @@ export function getDragItems(
export function getEventHandlerParams({
id,
dragItems,
getNode,
findNode,
}: {
id?: string
dragItems: NodeDragItem[]
getNode: ComputedGetters['getNode']
findNode: Actions['findNode']
}): [GraphNode, GraphNode[]] {
const extendedDragItems: GraphNode[] = dragItems.map((n) => {
const node = getNode.value(n.id)!
return {
...node,
}
})
const extendedDragItems: GraphNode[] = dragItems.map((n) => findNode(n.id)!)
return [id ? extendedDragItems.find((n) => n.id === id)! : extendedDragItems[0], extendedDragItems]
}
packages/core/src/utils/graph.ts
+4 -4
View File
@@ -1,5 +1,6 @@
import { isString } from '@vueuse/core'
import type {
Actions,
Box,
Connection,
CoordinateExtent,
@@ -10,7 +11,6 @@ import type {
ElementData,
Elements,
FlowElement,
Getters,
GraphEdge,
GraphNode,
Node,
@@ -354,12 +354,12 @@ export const getXYZPos = (parentPos: XYZPosition, computedPosition: XYZPosition)
}
}
export const isParentSelected = (node: GraphNode, getNode: Getters['getNode']): boolean => {
export const isParentSelected = (node: GraphNode, findNode: Actions['findNode']): boolean => {
if (!node.parentNode) return false
const parent = getNode(node.parentNode)
const parent = findNode(node.parentNode)
if (!parent) return false
if (parent.selected) return true
return isParentSelected(parent, getNode)
return isParentSelected(parent, findNode)
}
export const getMarkerId = (marker: EdgeMarkerType | undefined, vueFlowId?: string): string => {
packages/core/src/utils/store.ts
+4 -4
View File
@@ -1,4 +1,4 @@
import type { Connection, CoordinateExtent, Edge, Getters, GraphEdge, GraphNode, Node } from '~/types'
import type { Actions, Connection, CoordinateExtent, Edge, GraphEdge, GraphNode, Node } from '~/types'
export const isDef = <T>(val: T): val is NonNullable<T> => typeof unref(val) !== 'undefined'
@@ -51,7 +51,7 @@ export const updateEdgeAction = (edge: GraphEdge, newConnection: Connection, edg
export const createGraphNodes = (
nodes: Node[],
getNode: Getters['getNode'],
findNode: Actions['findNode'],
currGraphNodes: GraphNode[],
extent: CoordinateExtent,
) => {
@@ -59,7 +59,7 @@ export const createGraphNodes = (
const graphNodes = nodes.map((node) => {
const parsed = parseNode(node, extent, {
...getNode(node.id),
...findNode(node.id),
parentNode: node.parentNode,
})
@@ -80,7 +80,7 @@ export const createGraphNodes = (
if (parentNodes[node.id]) {
node.isParent = true
}
const parent = node.parentNode ? getNode(node.parentNode) : undefined
const parent = node.parentNode ? findNode(node.parentNode) : undefined
if (parent) parent.isParent = true
}
})