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

feat(core,nodes): pass node intersections when dragging a single node

Browse Source
This commit is contained in:
braks
2022-11-04 23:44:11 +01:00
committed by Braks
parent 8a51391c31
commit 632fa93272
4 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Nodes/NodeWrapper.vue
+50 -51
View File
@@ -31,6 +31,7 @@ const {
addSelectedNodes,
updateNodeDimensions,
onUpdateNodeInternals,
getIntersectingNodes,
} = $(useVueFlow())
const node = $(useVModel(props, 'node'))
@@ -50,36 +51,30 @@ const dragging = useDrag({
el: nodeElement,
disabled: computed(() => !draggable),
onStart(event, node, nodes) {
emit.dragStart({ event, node, nodes })
emit.dragStart({ event, node, nodes, intersections: getIntersectingNodes(node) })
},
onDrag(event, node, nodes) {
emit.drag({ event, node, nodes })
emit.drag({ event, node, nodes, intersections: getIntersectingNodes(node) })
},
onStop(event, node, nodes) {
emit.dragStop({ event, node, nodes })
emit.dragStop({ event, node, nodes, intersections: getIntersectingNodes(node) })
},
})
const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
if (parentPos) {
node.computedPosition = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
} else {
node.computedPosition = nodePos
}
}
const getClass = computed(() => (node.class instanceof Function ? node.class(node) : node.class))
const updateInternals = () => {
if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
const getStyle = computed(() => {
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
updatePosition(
{
x: node.position.x,
y: node.position.y,
z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
},
parentNode ? { ...parentNode.computedPosition } : undefined,
)
}
const width = node.width instanceof Function ? node.width(node) : node.width
const height = node.height instanceof Function ? node.height(node) : node.height
if (width) styles.width = typeof width === 'string' ? width : `${width}px`
if (height) styles.height = typeof height === 'string' ? height : `${height}px`
return styles
})
onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(id)) {
@@ -100,6 +95,10 @@ onMounted(() => {
props.resizeObserver.observe(nodeElement.value)
})
onBeforeUnmount(() => {
props.resizeObserver.unobserve(nodeElement.value)
})
watch(
[() => node.type, () => node.sourcePosition, () => node.targetPosition],
() => {
@@ -131,60 +130,60 @@ watch(
{ flush: 'post' },
)
onBeforeUnmount(() => {
props.resizeObserver.unobserve(nodeElement.value)
})
function updatePosition(nodePos: XYZPosition, parentPos?: XYZPosition) {
if (parentPos) {
node.computedPosition = getXYZPos({ x: parentPos.x, y: parentPos.y, z: parentPos.z! }, nodePos)
} else {
node.computedPosition = nodePos
}
}
const onMouseEnter = (event: MouseEvent) => {
function updateInternals() {
if (nodeElement.value) updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
updatePosition(
{
x: node.position.x,
y: node.position.y,
z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
},
parentNode ? { ...parentNode.computedPosition } : undefined,
)
}
function onMouseEnter(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseEnter({ event, node, connectedEdges })
}
}
const onMouseMove = (event: MouseEvent) => {
function onMouseMove(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseMove({ event, node, connectedEdges })
}
}
const onMouseLeave = (event: MouseEvent) => {
function onMouseLeave(event: MouseEvent) {
if (!dragging?.value) {
emit.mouseLeave({ event, node, connectedEdges })
}
}
const onContextMenu = (event: MouseEvent) => {
emit.contextMenu({
event,
node,
connectedEdges: getConnectedEdges([node], edges),
})
function onContextMenu(event: MouseEvent) {
return emit.contextMenu({ event, node, connectedEdges })
}
const onDoubleClick = (event: MouseEvent) => {
emit.doubleClick({ event, node, connectedEdges: getConnectedEdges([node], edges) })
function onDoubleClick(event: MouseEvent) {
return emit.doubleClick({ event, node, connectedEdges })
}
const onSelectNode = (event: MouseEvent) => {
function onSelectNode(event: MouseEvent) {
if (selectable && (!selectNodesOnDrag || !draggable)) {
handleNodeClick(node, multiSelectionActive, addSelectedNodes, removeSelectedElements, $$(nodesSelectionActive))
}
emit.click({ event, node, connectedEdges: getConnectedEdges([node], edges) })
emit.click({ event, node, connectedEdges })
}
const getClass = computed(() => {
return node.class instanceof Function ? node.class(node) : node.class
})
const getStyle = computed(() => {
const styles = (node.style instanceof Function ? node.style(node) : node.style) || {}
const width = node.width instanceof Function ? node.width(node) : node.width
const height = node.height instanceof Function ? node.height(node) : node.height
if (width) styles.width = typeof width === 'string' ? width : `${width}px`
if (height) styles.height = typeof height === 'string' ? height : `${height}px`
return styles
})
</script>
<script lang="ts">
packages/core/src/store/actions.ts
+7 -10
View File
@@ -467,18 +467,15 @@ export default (state: State, getters: ComputedGetters): Actions => {
if (!nodeRect) return []
return (
nodes ||
state.nodes.filter((n) => {
if (!isRect && (n.id === node!.id || !n.computedPosition)) return false
return (nodes || state.nodes).filter((n) => {
if (!isRect && (n.id === node!.id || !n.computedPosition)) return false
const currNodeRect = nodeToRect(n)
const overlappingArea = getOverlappingArea(currNodeRect, nodeRect)
const partiallyVisible = partially && overlappingArea > 0
const currNodeRect = nodeToRect(n)
const overlappingArea = getOverlappingArea(currNodeRect, nodeRect)
const partiallyVisible = partially && overlappingArea > 0
return partiallyVisible || overlappingArea >= Number(nodeOrRect.width) * Number(nodeOrRect.height)
})
)
return partiallyVisible || overlappingArea >= Number(nodeOrRect.width) * Number(nodeOrRect.height)
})
}
const isNodeIntersecting: Actions['isNodeIntersecting'] = (nodeOrRect, area, partially = true) => {
packages/core/src/types/hooks.ts
+1
View File
@@ -20,6 +20,7 @@ export interface NodeDragEvent {
event: MouseEvent
node: GraphNode
nodes: GraphNode[]
intersections?: GraphNode[]
}
export interface EdgeMouseEvent {
packages/core/src/types/store.ts
+20 -9
View File
@@ -120,40 +120,51 @@ export interface State extends Omit<FlowOptions, 'id' | 'modelValue'> {
}
export type SetElements = (elements: Elements | ((elements: FlowElements) => Elements), extent?: CoordinateExtent) => void
export type SetNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void
export type SetEdges = (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void
export type AddNodes = (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void
export type RemoveNodes = (
nodes: (Node[] | string[]) | ((nodes: GraphNode[]) => Node[] | string[]),
removeConnectedEdges?: boolean,
) => void
export type RemoveEdges = (edges: (Edge[] | string[]) | ((edges: GraphEdge[]) => Edge[] | string[])) => void
export type AddEdges = (edgesOrConnections: (Edge | Connection)[] | ((edges: GraphEdge[]) => (Edge | Connection)[])) => void
export type UpdateEdge = (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false
export type SetState = (
state:
| Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>
| ((state: State) => Partial<FlowOptions & Omit<State, 'nodes' | 'edges' | 'modelValue'>>),
) => void
export type UpdateNodePosition = (dragItems: NodeDragItem[], changed: boolean, dragging: boolean) => void
export type UpdateNodeDimensions = (updates: UpdateNodeDimensionsParams[]) => void
export type UpdateNodeInternals = (nodeIds: string[]) => void
export type FindNode = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
id: string,
) => GraphNode<Data, CustomEvents> | undefined
export type FindEdge = <Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
id: string,
) => GraphEdge<Data, CustomEvents> | undefined
export type GetIntersectingNodes<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> = (
node: (Partial<Node<Data, CustomEvents>> & { id: Node['id'] }) | Rect,
export type GetIntersectingNodes = (
node: (Partial<Node> & { id: Node['id'] }) | Rect,
partially?: boolean,
nodes?: Node<Data, CustomEvents>[],
) => Node<Data, CustomEvents>[]
export type IsNodeIntersecting<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any> = (
node: (Partial<Node<Data, CustomEvents>> & { id: Node['id'] }) | Rect,
area: Rect,
partially?: boolean,
) => boolean
nodes?: GraphNode[],
) => GraphNode[]
export type IsNodeIntersecting = (node: (Partial<Node> & { id: Node['id'] }) | Rect, area: Rect, partially?: boolean) => boolean
export interface Actions extends ViewportFunctions {
/** parses elements (nodes + edges) and re-sets the state */