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

feat(nodes): nested boundaries

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-12-20 19:29:52 +01:00
parent f00f34d84b
commit 3f0b0dbd70
8 changed files with 165 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Nesting/GroupNode.vue
-1
View File
@@ -19,7 +19,6 @@ store.hooks.nodeDragStop.on(({ node }) => {
node.data.label = `In ${props.id}`
node.data.group = props.id
} else if (node.data.group === props.id) {
console.log(node)
node.data.group = undefined
node.data.label = node.id
}
examples/Nesting/Nesting.vue
+8 -3
View File
@@ -3,12 +3,17 @@ import GroupNode from './GroupNode.vue'
import { VueFlow, Elements, Node, Edge, Connection, addEdge } from '~/index'
const elements = ref<Elements<{ label: string; group?: string }>>([
{ id: 'node-1', data: { label: 'node-1', group: undefined }, position: { x: 250, y: 5 } },
{
id: 'node-1',
data: { label: 'node-1', group: undefined },
position: { x: 250, y: 5 },
parentNode: 'group-a',
extent: 'parent',
},
{ id: 'node-2', data: { label: 'node-2', group: undefined }, position: { x: 50, y: 5 } },
{
id: 'group-a',
type: 'group-a',
style: { zIndex: 2 },
style: { zIndex: 2, width: '300px', height: '300px' },
selectable: false,
data: { label: 'A' },
position: { x: 50, y: 100 },
src/components/Nodes/NodeWrapper.vue
+81 -64
View File
@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { useStore } from '../../composables'
import { GraphNode, SnapGrid, Draggable, NodeDimensionUpdate } from '../../types'
import { Draggable, GraphNode, NodeDimensionUpdate, SnapGrid, XYPosition } from '../../types'
import { NodeId } from '../../context'
import { clampPosition, getDimensions, getHandleBounds } from '../../utils'
import { calculateXYZPosition, clampPosition, getDimensions, getHandleBounds, isParentSelected } from '../../utils'
interface NodeWrapperProps {
node: GraphNode
@@ -24,68 +24,84 @@ provide(NodeId, props.node.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const selected = computed(() => props.selectable && store.selectedElements?.some(({ id }) => id === props.node.id))
const selected = computed(() => props.selectable && store.selectedElements?.some(({ id }) => id === node.value.id))
const onMouseEnterHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: node.value }))
const onMouseMoveHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: node.value }))
const onMouseLeaveHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
node.value.dragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: node.value }))
const onContextMenuHandler = () => (event: MouseEvent) =>
store.hooks.nodeContextMenu.trigger({
event,
node: props.node,
node: node.value,
})
const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: props.node })
const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: node.value })
const onSelectNodeHandler = (event: MouseEvent) => {
if (!props.draggable) {
if (props.selectable) {
store.unsetNodesSelection()
if (!selected.value) store.addSelectedElements([props.node])
if (!selected.value) store.addSelectedElements([node.value])
}
store.hooks.elementClick.trigger({ event, element: props.node })
store.hooks.nodeClick.trigger({ event, node: props.node })
store.hooks.elementClick.trigger({ event, element: node.value })
store.hooks.nodeClick.trigger({ event, node: node.value })
}
}
const onDragStart: DraggableEventListener = ({ event }) => {
store.hooks.nodeDragStart.trigger({ event, node: props.node })
store.hooks.nodeDragStart.trigger({ event, node: node.value })
if (props.selectNodesOnDrag && props.selectable) {
store.unsetNodesSelection()
if (!selected.value) store.addSelectedElements([props.node])
if (!selected.value) store.addSelectedElements([node.value])
} else if (!props.selectNodesOnDrag && !selected.value && props.selectable) {
store.unsetNodesSelection()
store.addSelectedElements([])
}
}
const onDrag: DraggableEventListener = ({ event, data: { deltaY, deltaX } }) => {
const extent = node.value.extent ?? store.nodeExtent
node.value.position = clampPosition(
{
x: (node.value.position.x += deltaX),
y: (node.value.position.y += deltaY),
},
extent,
)
node.value.__vf.isDragging = true
store.hooks.nodeDrag.trigger({ event, node: props.node })
const onDrag: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
updateNodePosition(node.value, { x: deltaX, y: deltaY })
node.value.dragging = true
store.hooks.nodeDrag.trigger({ event, node: node.value })
}
const onDragStop: DraggableEventListener = ({ event }) => {
const n = props.node
const onDragStop: DraggableEventListener = ({ event, data: { deltaX, deltaY } }) => {
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
if (!props.node.__vf.isDragging) {
if (!node.value.dragging) {
if (props.selectable && !props.selectNodesOnDrag && !selected.value) {
store.addSelectedElements([n])
store.addSelectedElements([node.value])
}
store.hooks.nodeClick.trigger({ event, node: n })
store.hooks.elementClick.trigger({ event, element: n })
store.hooks.nodeClick.trigger({ event, node: node.value })
store.hooks.elementClick.trigger({ event, element: node.value })
return
}
node.value.__vf.isDragging = false
store.hooks.nodeDragStop.trigger({ event, node: n })
node.value.dragging = false
store.hooks.nodeDragStop.trigger({ event, node: node.value })
}
const updateNodePosition = (node: GraphNode, { x, y }: XYPosition) => {
const position = {
x: node.position.x + x,
y: node.position.y + y,
z: node.__vf.position.z,
}
let extent = store.nodeExtent
if (node.extent === 'parent' && node.parentNode && node.__vf.width && node.__vf.height) {
const parent = node.__vf.parentNode
extent =
parent.__vf.width && parent.__vf.height
? [
[0, 0],
[parent.__vf.width - node.__vf.width, parent.__vf.height - node.__vf.height],
]
: extent
}
node.position = clampPosition(position, extent)
if (node.parentNode || node.__vf.isParent) {
node.__vf.position = calculateXYZPosition(node, { z: position.z, ...node.position })
} else node.__vf.position = { z: position.z, ...node.position }
}
const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate) => {
@@ -94,7 +110,7 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
const doUpdate =
dimensions.width &&
dimensions.height &&
(props.node.__vf.width !== dimensions.width || props.node.__vf.height !== dimensions.height || forceUpdate)
(node.value.__vf.width !== dimensions.width || node.value.__vf.height !== dimensions.height || forceUpdate)
if (doUpdate) {
const handleBounds = getHandleBounds(nodeElement, store.transform[2], store.id)
@@ -108,9 +124,9 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
}
tryOnMounted(() => {
watch([() => props.node.__vf.width, () => props.node.__vf.height], () => {
watch([() => node.value.__vf.width, () => node.value.__vf.height], () => {
updateNodeDimensions({
id: props.node.id,
id: node.value.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
@@ -124,9 +140,9 @@ tryOnMounted(() => {
}),
)
watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => {
watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () => {
updateNodeDimensions({
id: props.node.id,
id: node.value.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
@@ -141,7 +157,7 @@ export default {
<template>
<DraggableCore
cancel=".nodrag"
:handle="props.node.dragHandle"
:handle="node.dragHandle"
:disabled="!props.draggable"
:scale="props.scale"
:grid="props.snapGrid"
@@ -155,21 +171,22 @@ export default {
ref="node-element"
:class="[
'vue-flow__node',
`vue-flow__node-${props.node.type}`,
`vue-flow__node-${node.type}`,
{
dragging: node.dragging,
selected,
selectable: props.selectable,
},
props.node.class,
node.class,
]"
:style="{
zIndex: selected ? 10 : 3,
transform: `translate(${props.node.position.x}px,${props.node.position.y}px)`,
zIndex: node.dragging || selected ? 1000 : node.__vf.position.z,
transform: `translate(${node.__vf.position.x}px,${node.__vf.position.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
opacity: props.node.__vf.width !== null && props.node.__vf.height !== null ? 1 : 0,
...props.node.style,
opacity: node.__vf.width !== null && node.__vf.height !== null ? 1 : 0,
...node.style,
}"
:data-id="props.node.id"
:data-id="node.id"
@mouseenter="onMouseEnterHandler"
@mousemove="onMouseMoveHandler"
@mouseleave="onMouseLeaveHandler"
@@ -179,35 +196,35 @@ export default {
>
<slot
v-bind="{
id: props.node.id,
data: props.node.data,
type: props.node.type,
id: node.id,
data: node.data,
type: node.type,
position: node.position,
__vf: props.node.__vf,
__vf: node.__vf,
selected,
connectable: props.connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__vf.isDragging,
isValidTargetPos: props.node.isValidTargetPos,
isValidSourcePos: props.node.isValidSourcePos,
sourcePosition: node.sourcePosition,
targetPosition: node.targetPosition,
dragging: node.dragging,
isValidTargetPos: node.isValidTargetPos,
isValidSourcePos: node.isValidSourcePos,
}"
>
<component
:is="props.component ?? props.node.type"
:is="props.component ?? node.type"
v-bind="{
id: props.node.id,
data: props.node.data,
type: props.node.type,
id: node.id,
data: node.data,
type: node.type,
position: node.position,
__vf: props.node.__vf,
__vf: node.__vf,
selected,
connectable: props.connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__vf.isDragging,
isValidTargetPos: props.node.isValidTargetPos,
isValidSourcePos: props.node.isValidSourcePos,
sourcePosition: node.sourcePosition,
targetPosition: node.targetPosition,
dragging: node.dragging,
isValidTargetPos: node.isValidTargetPos,
isValidSourcePos: node.isValidSourcePos,
}"
/>
</slot>
src/store/actions.ts
+3 -1
View File
@@ -1,5 +1,5 @@
import { Elements, FlowActions, FlowGetters, FlowState } from '~/types'
import { getConnectedEdges, getNodesInside, getRectOfNodes, parseElements, processElements } from '~/utils'
import { getConnectedEdges, getNodesInside, getRectOfNodes, isGraphNode, parseElements, processElements } from '~/utils'
export default (state: FlowState, getters: FlowGetters): FlowActions => {
const setElements: FlowActions['setElements'] = async (elements, force = true) => {
@@ -26,6 +26,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
const startX = state.userSelectionRect.startX
const startY = state.userSelectionRect.startY
state.selectedElements?.forEach((el) => isGraphNode(el) && (el.selected = undefined))
const nextUserSelectRect: FlowState['userSelectionRect'] = {
...state.userSelectionRect,
x: mousePos.x < startX ? mousePos.x : state.userSelectionRect.x,
@@ -37,6 +38,7 @@ export default (state: FlowState, getters: FlowGetters): FlowActions => {
const selectedEdges = getConnectedEdges(selectedNodes, getters.getEdges.value)
const nextSelectedElements = [...selectedNodes, ...selectedEdges]
nextSelectedElements.forEach((el) => isGraphNode(el) && (el.selected = true))
state.userSelectionRect = nextUserSelectRect
state.selectedElements = nextSelectedElements
}
src/types/flow.ts
+2
View File
@@ -37,6 +37,8 @@ export interface XYPosition {
y: number
}
export type XYZPosition = XYPosition & { z: number }
export interface Dimensions {
width: number
height: number
src/types/node.ts
+7 -5
View File
@@ -1,17 +1,17 @@
import { DraggableOptions } from '@braks/revue-draggable'
import { XYPosition, Position, SnapGrid, Element } from './flow'
import { XYPosition, Position, SnapGrid, Element, Dimensions, XYZPosition } from './flow'
import { HandleElement, ValidConnectionFunc } from './components'
export type CoordinateExtent = [[number, number], [number, number]]
export interface VFInternals {
isDragging?: boolean
width: number
height: number
export interface VFInternals extends Dimensions {
handleBounds: {
source?: HandleElement[]
target?: HandleElement[]
}
parentNode?: any
isParent?: boolean
position: XYZPosition
}
export type Draggable = Omit<DraggableOptions, 'scale' | 'grid' | 'enableUserSelectHack' | 'enableTransformFix'> | boolean
@@ -33,6 +33,8 @@ export interface Node<T = any> extends Element<T> {
export interface GraphNode<T = any> extends Node<T> {
__vf: VFInternals
selected?: boolean
dragging?: boolean
}
export interface NodeProps<T = any> extends GraphNode {
src/utils/graph.ts
+50 -23
View File
@@ -1,22 +1,23 @@
import { getSourceTargetNodes } from './edge'
import {
Node,
Edge,
Elements,
Transform,
XYPosition,
Rect,
Box,
Connection,
FlowExportObject,
CoordinateExtent,
Dimensions,
GraphNode,
Edge,
Elements,
FlowElements,
GraphEdge,
NextElements,
FlowStore,
FlowExportObject,
FlowState,
FlowStore,
GraphEdge,
GraphNode,
NextElements,
Node,
Rect,
Transform,
XYPosition,
XYZPosition,
} from '~/types'
import { useWindow } from '~/composables'
@@ -175,8 +176,12 @@ export const parseNode = (node: Node, nodeExtent: CoordinateExtent): GraphNode =
source: [],
target: [],
},
isDragging: false,
position: {
z: typeof node.style?.zIndex === 'string' ? parseInt(node.style?.zIndex) : node.style?.zIndex ?? 0,
...clampPosition(node.position, nodeExtent),
},
},
dragging: false,
position: clampPosition(node.position, nodeExtent),
})
@@ -249,14 +254,15 @@ export const getNodesInside = (nodes: GraphNode[], rect: Rect, [tx, ty, tScale]:
if (!node.__vf || node.selectable === false) return false
const {
position = { x: 0, y: 0 },
__vf: { width = 0, height = 0, isDragging = false },
__vf: { width = 0, height = 0 },
dragging = false,
} = node
const nBox = rectToBox({ ...position, width, height } as any)
const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x))
const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y))
const overlappingArea = Math.ceil(xOverlap * yOverlap)
if (width === null || height === null || isDragging) {
if (width === null || height === null || dragging) {
// nodes are initialized with width and height = null
return true
}
@@ -342,18 +348,10 @@ export const parseElement = (element: Node | Edge, prevElements: FlowElements, n
if (!isGraphNode(element)) parsed = parseNode(element, nodeExtent)
else parsed = element
if (storeNode) {
const updatedNode = {
parsed = {
...storeNode,
...parsed,
} as GraphNode
if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
// we reset the elements dimensions here in order to force a re-calculation of the bounds.
// When the type of a node changes it is possible that the number or positions of handles changes too.
updatedNode.__vf.width = 0
}
parsed = updatedNode
}
} else if (isEdge(element)) {
const storeEdge = prevElements[index]
@@ -370,6 +368,15 @@ export const parseElement = (element: Node | Edge, prevElements: FlowElements, n
return { parsed, index }
}
export function calculateXYZPosition(node: GraphNode, result: XYZPosition): XYZPosition {
if (!node.parentNode) return result
return calculateXYZPosition(node.__vf.parentNode, {
x: result.x + node.__vf.parentNode.position.x,
y: result.y + node.__vf.parentNode.position.y,
z: node.__vf.parentNode.__vf.z > node.__vf.position.z ? node.__vf.parentNode.__vf.z + 1 : node.__vf.position.z,
})
}
export const parseElements = (elements: Elements, prevElements: FlowElements, nodeExtent: CoordinateExtent) => {
const { nodes, edges }: NextElements = {
nodes: [],
@@ -382,6 +389,19 @@ export const parseElements = (elements: Elements, prevElements: FlowElements, no
else nodes.push(parsed)
}
}
nodes.forEach((n) => {
if (n.parentNode) {
const parent = nodes.find((p) => p.id === n.parentNode)
if (n.parentNode && !parent) {
console.error(`Parent node ${n.parentNode} not found`)
} else if (parent) {
n.__vf.parentNode = parent
parent.__vf.isParent = true
}
}
})
edges.forEach((edge, i, arr) => {
const { sourceNode, targetNode } = getSourceTargetNodes(edge, nodes)
if (!sourceNode) console.warn(`couldn't create edge for source id: ${edge.source}; edge id: ${edge.id}`)
@@ -395,3 +415,10 @@ export const parseElements = (elements: Elements, prevElements: FlowElements, no
})
return { nodes, edges }
}
export function isParentSelected(node: GraphNode): boolean {
if (!node.parentNode) return false
if (!node.__vf.parentNode) return false
if (node.__vf.parentNode.selected) return true
return isParentSelected(node.__vf.parentNode)
}
vite.config.ts
+14 -12
View File
@@ -36,6 +36,20 @@ export default defineConfig({
globals: {
vue: 'Vue',
},
plugins: [
replace({
__VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
preventAssignment: true,
}),
copy({
targets: [
{
src: 'src/theme-default.css',
dest: 'dist',
},
],
}),
],
},
},
},
@@ -48,18 +62,6 @@ export default defineConfig({
imports: ['vue', '@vueuse/core'],
dts: 'src/auto-imports.d.ts',
}),
replace({
__VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
preventAssignment: true,
}),
copy({
targets: [
{
src: 'src/theme-default.css',
dest: 'dist',
},
],
}),
],
optimizeDeps: {
include: ['vue', '@vueuse/core', '@braks/revue-draggable', 'd3-zoom', 'd3-selection'],