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

feat(edges): Add source-target-pos to graph-edge

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 600e3866c4
commit 1b206c942c
9 changed files with 143 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/EdgeWrapper.vue
+111 -84
View File
@@ -12,35 +12,37 @@ interface EdgeWrapper {
updatable?: boolean
}
const props = withDefaults(defineProps<EdgeWrapper>(), {})
const props = defineProps<EdgeWrapper>()
const emit = defineEmits(['update:edge'])
const edge = useVModel(props, 'edge', emit)
const { store } = useVueFlow()
const updating = ref<boolean>(false)
const updating = ref(false)
const handler = useHandle()
const onEdgeClick = (event: MouseEvent) => {
const data = { event, edge: props.edge }
const data = { event, edge: edge.value }
if (store.elementsSelectable) {
store.nodesSelectionActive = false
store.addSelectedEdges([props.edge])
store.addSelectedEdges([edge.value])
}
store.hooks.edgeClick.trigger(data)
}
const onEdgeContextMenu = (event: MouseEvent) => store.hooks.edgeContextMenu.trigger({ event, edge: props.edge })
const onDoubleClick = (event: MouseEvent) => store.hooks.edgeDoubleClick.trigger({ event, edge: props.edge })
const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: props.edge })
const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: props.edge })
const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: props.edge })
const onEdgeContextMenu = (event: MouseEvent) => store.hooks.edgeContextMenu.trigger({ event, edge: edge.value })
const onDoubleClick = (event: MouseEvent) => store.hooks.edgeDoubleClick.trigger({ event, edge: edge.value })
const onEdgeMouseEnter = (event: MouseEvent) => store.hooks.edgeMouseEnter.trigger({ event, edge: edge.value })
const onEdgeMouseMove = (event: MouseEvent) => store.hooks.edgeMouseMove.trigger({ event, edge: edge.value })
const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigger({ event, edge: edge.value })
const onEdgeUpdaterMouseEnter = () => (updating.value = true)
const onEdgeUpdaterMouseOut = () => (updating.value = false)
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, true)
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => handleEdgeUpdater(event, false)
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? props.edge.target : props.edge.source
const handleId = (isSourceHandle ? props.edge.targetHandle : props.edge.sourceHandle) ?? ''
const nodeId = isSourceHandle ? edge.value.target : edge.value.source
const handleId = (isSourceHandle ? edge.value.targetHandle : edge.value.sourceHandle) ?? ''
store.hooks.edgeUpdateStart.trigger({ event, edge: props.edge })
store.hooks.edgeUpdateStart.trigger({ event, edge: edge.value })
handler(
event,
handleId,
@@ -48,31 +50,57 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
isSourceHandle,
undefined,
isSourceHandle ? 'target' : 'source',
(connection) => store.hooks.edgeUpdate.trigger({ edge: props.edge, connection }),
() => store.hooks.edgeUpdateEnd.trigger({ event, edge: props.edge }),
(connection) => store.hooks.edgeUpdate.trigger({ edge: edge.value, connection }),
() => store.hooks.edgeUpdateEnd.trigger({ event, edge: edge.value }),
)
}
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() =>
store.connectionMode === ConnectionMode.Strict
? props.edge.targetNode.handleBounds.target
: props.edge.targetNode.handleBounds.target ?? props.edge.targetNode.handleBounds.source,
? edge.value.targetNode.handleBounds.target
: edge.value.targetNode.handleBounds.target ?? edge.value.targetNode.handleBounds.source,
)
const sourceHandle = computed(() => getHandle(props.edge.sourceNode.handleBounds.source, props.edge.sourceHandle))
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle))
const sourceHandle = controlledComputed(
() => edge.value.sourceNode.handleBounds,
() => getHandle(edge.value.sourceNode.handleBounds.source, edge.value.sourceHandle),
)
const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.value.targetHandle))
const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
const edgePos = computed(() =>
getEdgePositions(
props.edge.sourceNode,
sourceHandle.value,
sourcePosition.value,
props.edge.targetNode,
targetHandle.value,
targetPosition.value,
),
)
onMounted(() => {
nextTick(() => {
watch(
[
sourcePosition,
targetPosition,
() => edge.value.sourceNode.position,
() => edge.value.targetNode.position,
() => edge.value.sourceNode.computedPosition,
() => edge.value.targetNode.computedPosition,
() => edge.value.sourceNode.dimensions,
() => edge.value.targetNode.dimensions,
],
() => {
const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
edge.value.sourceNode,
sourceHandle.value,
sourcePosition.value,
edge.value.targetNode,
targetHandle.value,
targetPosition.value,
)
if (edge.value.sourceX !== sourceX) edge.value.sourceX = sourceX
if (edge.value.sourceY !== sourceY) edge.value.sourceY = sourceY
if (edge.value.targetX !== targetX) edge.value.targetX = targetX
if (edge.value.targetY !== targetY) edge.value.targetY = targetY
},
{ immediate: true, deep: true },
)
})
})
onRenderTriggered(console.log)
</script>
<script lang="ts">
export default {
@@ -83,14 +111,14 @@ export default {
<g
:class="[
'vue-flow__edge',
`vue-flow__edge-${props.edge.type || 'default'}`,
`vue-flow__edge-${edge.type || 'default'}`,
{
selected: props.edge.selected,
animated: props.edge.animated,
selected: edge.selected,
animated: edge.animated,
inactive: !props.selectable,
updating,
},
props.edge.class,
edge.class,
]"
@click="onEdgeClick"
@dblClick="onDoubleClick"
@@ -100,65 +128,64 @@ export default {
@mouseleave="onEdgeMouseLeave"
>
<slot
v-if="edgePos.sourceX && edgePos.sourceY && edgePos.targetX && edgePos.targetY"
v-bind="{
id: props.edge.id,
sourceNode: props.edge.sourceNode,
targetNode: props.edge.targetNode,
source: props.edge.source,
target: props.edge.target,
selected: props.edge.selected,
animated: props.edge.animated,
id: edge.id,
sourceNode: edge.sourceNode,
targetNode: edge.targetNode,
source: edge.source,
target: edge.target,
selected: edge.selected,
animated: edge.animated,
updatable: props.updatable,
label: props.edge.label,
labelStyle: props.edge.labelStyle,
labelShowBg: props.edge.labelShowBg,
labelBgStyle: props.edge.labelBgStyle,
labelBgPadding: props.edge.labelBgPadding,
labelBgBorderRadius: props.edge.labelBgBorderRadius,
data: props.edge.data,
style: props.edge.style,
markerStart: `url(#${getMarkerId(props.edge.markerStart)})`,
markerEnd: `url(#${getMarkerId(props.edge.markerEnd)})`,
label: edge.label,
labelStyle: edge.labelStyle,
labelShowBg: edge.labelShowBg,
labelBgStyle: edge.labelBgStyle,
labelBgPadding: edge.labelBgPadding,
labelBgBorderRadius: edge.labelBgBorderRadius,
data: edge.data,
style: edge.style,
sourceX: edge.sourceX,
sourceY: edge.sourceY,
targetX: edge.targetX,
targetY: edge.targetY,
markerStart: `url(#${getMarkerId(edge.markerStart)})`,
markerEnd: `url(#${getMarkerId(edge.markerEnd)})`,
sourcePosition,
targetPosition,
sourceX: edgePos.sourceX,
sourceY: edgePos.sourceY,
targetX: edgePos.targetX,
targetY: edgePos.targetY,
sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle,
sourceHandleId: edge.sourceHandle,
targetHandleId: edge.targetHandle,
}"
>
<component
:is="props.component ?? props.edge.type"
:is="props.component ?? edge.type"
v-bind="{
id: props.edge.id,
sourceNode: props.edge.sourceNode,
targetNode: props.edge.targetNode,
source: props.edge.source,
target: props.edge.target,
id: edge.id,
sourceNode: edge.sourceNode,
targetNode: edge.targetNode,
source: edge.source,
target: edge.target,
updatable: props.updatable,
selected: props.edge.selected,
animated: props.edge.animated,
label: props.edge.label,
labelStyle: props.edge.labelStyle,
labelShowBg: props.edge.labelShowBg,
labelBgStyle: props.edge.labelBgStyle,
labelBgPadding: props.edge.labelBgPadding,
labelBgBorderRadius: props.edge.labelBgBorderRadius,
data: props.edge.data,
style: props.edge.style,
markerStart: `url(#${getMarkerId(props.edge.markerStart)})`,
markerEnd: `url(#${getMarkerId(props.edge.markerEnd)})`,
selected: edge.selected,
animated: edge.animated,
label: edge.label,
labelStyle: edge.labelStyle,
labelShowBg: edge.labelShowBg,
labelBgStyle: edge.labelBgStyle,
labelBgPadding: edge.labelBgPadding,
labelBgBorderRadius: edge.labelBgBorderRadius,
data: edge.data,
style: edge.style,
markerStart: `url(#${getMarkerId(edge.markerStart)})`,
markerEnd: `url(#${getMarkerId(edge.markerEnd)})`,
sourcePosition,
targetPosition,
sourceX: edgePos.sourceX,
sourceY: edgePos.sourceY,
targetX: edgePos.targetX,
targetY: edgePos.targetY,
sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle,
sourceX: edge.sourceX,
sourceY: edge.sourceY,
targetX: edge.targetX,
targetY: edge.targetY,
sourceHandleId: edge.sourceHandle,
targetHandleId: edge.targetHandle,
}"
/>
</slot>
@@ -170,8 +197,8 @@ export default {
>
<EdgeAnchor
:position="sourcePosition"
:center-x="edgePos.sourceX"
:center-y="edgePos.sourceY"
:center-x="edge.sourceX"
:center-y="edge.sourceY"
:radius="props.edgeUpdaterRadius"
/>
</g>
@@ -183,8 +210,8 @@ export default {
>
<EdgeAnchor
:position="targetPosition"
:center-x="edgePos.targetX"
:center-y="edgePos.targetY"
:center-x="edge.targetX"
:center-y="edge.targetY"
:radius="props.edgeUpdaterRadius"
/>
</g>
src/components/Nodes/NodeWrapper.vue
+1 -2
View File
@@ -13,7 +13,6 @@ interface NodeWrapperProps {
draggable?: boolean
selectable?: boolean
connectable?: boolean
scale?: number
}
const props = defineProps<NodeWrapperProps>()
@@ -121,7 +120,7 @@ export default {
cancel=".nodrag"
:handle="node.dragHandle"
:disabled="!props.draggable"
:scale="props.scale"
:scale="store.transform[2]"
:grid="props.snapGrid"
:enable-user-select-hack="false"
v-bind="props.draggable"
src/container/EdgeRenderer/EdgeRenderer.vue
+4 -2
View File
@@ -32,8 +32,10 @@ const connectionLineVisible = controlledComputed(
store.connectionHandleType
),
)
const transform = computed(() => `translate(${store.transform[0]},${store.transform[1]}) scale(${store.transform[2]})`)
const groups = computed(() => groupEdgesByZLevel(store.getEdges, store.getNodes))
const groups = controlledComputed(
() => store.getEdges,
() => groupEdgesByZLevel(store.edges, store.nodes),
)
</script>
<script lang="ts">
export default {
src/container/NodeRenderer/NodeRenderer.vue
-1
View File
@@ -33,7 +33,6 @@ export default {
:connectable="typeof node.connectable === 'undefined' ? store.nodesConnectable : node.connectable"
:snap-grid="snapGrid(node)"
:select-nodes-on-drag="store.selectNodesOnDrag"
:scale="store.transform[2]"
>
<template #default="nodeProps">
<slot :name="`node-${node.type}`" v-bind="nodeProps"></slot>
src/container/TransformationPane/TransformationPane.vue
+4 -5
View File
@@ -4,13 +4,11 @@ import EdgeRenderer from '../EdgeRenderer/EdgeRenderer.vue'
import { useVueFlow } from '../../composables'
const { id, store } = useVueFlow()
const transform = computed(() => `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})`)
</script>
<template>
<div
:key="`transformation-pane-${id}`"
class="vue-flow__transformation-pane vue-flow__container"
:style="{ transform: `translate(${store.transform[0]}px,${store.transform[1]}px) scale(${store.transform[2]})` }"
>
<div :key="`transformation-pane-${id}`" class="vue-flow__transformation-pane vue-flow__container" :style="{ transform }">
<NodeRenderer :key="`node-renderer-${id}`">
<template
v-for="nodeName of Object.keys(store.getNodeTypes)"
@@ -32,5 +30,6 @@ const { id, store } = useVueFlow()
<slot name="connection-line" v-bind="customConnectionLineProps" />
</template>
</EdgeRenderer>
<slot />
</div>
</template>
src/container/VueFlow/VueFlow.vue
+1 -1
View File
@@ -58,7 +58,7 @@ export default {
</template>
<slot name="zoom-pane" />
</ZoomPane>
<slot v-bind="store" />
<slot />
</div>
</template>
<style>
src/container/ZoomPane/ZoomPane.vue
+9 -13
View File
@@ -38,11 +38,9 @@ const transform = ref({
})
const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
const d3Selection = ref()
store.transform = [transform.value.x, transform.value.y, transform.value.zoom]
const { width, height } = useElementBounding(zoomPaneEl)
onMounted(() => {
onMounted(async () => {
const d3z = d3Zoom.value!
d3Selection.value = select(zoomPaneEl.value).call(d3z)
const d3s = d3Selection.value!
@@ -170,23 +168,20 @@ onMounted(() => {
watch(
[width, height],
([newWidth, newHeight]) => {
nextTick(() => {
store.dimensions.width = newWidth
store.dimensions.height = newHeight
})
store.dimensions.width = newWidth
store.dimensions.height = newHeight
},
{ flush: 'post', immediate: true },
{ immediate: true },
)
watch(
transform,
(val) => {
const { x, y } = clampPosition(val, store.translateExtent)
nextTick(() => (store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]))
store.transform = [x, y, clamp(val.zoom, store.minZoom, store.maxZoom)]
},
{ flush: 'post', immediate: true },
{ immediate: true },
)
})
nextTick(async () => {
store.paneReady = true
// if ssr we can't wait for dimensions, they'll never really exist
@@ -222,7 +217,7 @@ export default {
</script>
<template>
<div ref="zoomPane" class="vue-flow__renderer vue-flow__container">
<TransformationPane>
<TransformationPane v-if="store.getNodes.length">
<template
v-for="nodeName of Object.keys(store.getNodeTypes)"
#[`node-${nodeName}`]="nodeProps"
@@ -240,6 +235,7 @@ export default {
<template #connection-line="customConnectionLineProps">
<slot name="connection-line" v-bind="customConnectionLineProps" />
</template>
<slot />
</TransformationPane>
<SelectionPane :key="`selection-pane-${id}`" />
</div>
src/types/edge.ts
+9 -9
View File
@@ -48,12 +48,19 @@ export interface Edge<T = any> extends Element<T> {
updatable?: boolean
}
export interface GraphEdge<T = any, N = T> extends Edge<T> {
export interface EdgePositions {
sourceX: number
sourceY: number
targetX: number
targetY: number
}
export type GraphEdge<T = any, N = T> = Edge<T> & {
sourceNode: GraphNode<N>
targetNode: GraphNode<N>
selected?: boolean
z?: number
}
} & EdgePositions
export interface EdgeProps<Data = any> {
id: string
@@ -130,13 +137,6 @@ export interface SmoothStepEdgeProps<Data = any> extends EdgeProps<Data> {
borderRadius?: number
}
export interface EdgePositions {
sourceX: number
sourceY: number
targetX: number
targetY: number
}
export interface GetCenterParams {
sourceX: number
sourceY: number
src/utils/graph.ts
+4
View File
@@ -97,6 +97,10 @@ export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge
source: edge.source.toString(),
target: edge.target.toString(),
z: typeof edge.style?.zIndex === 'string' ? parseInt(edge.style?.zIndex) : edge.style?.zIndex ?? 0,
sourceX: 0,
sourceY: 0,
targetX: 0,
targetY: 0,
...defaults,
}
: defaults