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

update: pass store state as props to edge-renderer and edge

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-22 13:40:25 +01:00
parent ebd0f9e738
commit 2b065b4e56
14 changed files with 152 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/EdgeWrapper.vue
+42 -79
View File
@@ -1,14 +1,16 @@
<script lang="ts" setup>
import { CSSProperties, DefineComponent } from 'vue'
import { CSSProperties } from 'vue'
import { useHandle, useStore } from '../../composables'
import { ArrowHeadType, ConnectionMode, Edge, EdgePositions, EdgeTextProps, ElementId, Position } from '../../types'
import { isEdge, getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../utils'
import { ArrowHeadType, ConnectionMode, Edge, EdgeTextProps, ElementId, SourceTargetNode, Position } from '../../types'
import { isEdge, getEdgePositions, getHandle } from '../../utils'
import EdgeAnchor from './EdgeAnchor.vue'
interface EdgeWrapper {
id: ElementId
edge: Edge
sourceTargetNodes: SourceTargetNode
type?: string
component?: any
source: ElementId
target: ElementId
sourceHandle?: ElementId | null
@@ -19,7 +21,7 @@ interface EdgeWrapper {
label?:
| string
| {
component: DefineComponent<EdgeTextProps>
component: any
props?: EdgeTextProps
}
labelStyle?: any
@@ -35,23 +37,15 @@ interface EdgeWrapper {
class?: string
isHidden?: boolean
edgeUpdaterRadius?: number
selectable?: boolean
}
const props = withDefaults(defineProps<EdgeWrapper>(), {})
const store = useStore()
const type = computed(() => {
const t = props.type ?? 'default'
let edge = store.getEdgeTypes[t]
if (!edge) {
edge = store.getEdgeTypes.default
console.warn(`Edge type "${t}" not found. Using fallback type "default".`)
}
return edge
})
const updating = ref<boolean>(false)
const handler = useHandle()
const onEdgeClick = (event: MouseEvent) => {
if (store.elementsSelectable) {
@@ -61,24 +55,24 @@ const onEdgeClick = (event: MouseEvent) => {
store.hooks.elementClick.trigger({ event, element: props.edge })
store.hooks.edgeClick.trigger({ event, edge: props.edge })
}
const onDoubleClick = (event: MouseEvent) => {
store.hooks.edgeDoubleClick.trigger({ event, edge: props.edge })
}
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 onEdgeUpdaterMouseEnter = () => (updating.value = true)
const onEdgeUpdaterMouseOut = () => (updating.value = false)
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
handleEdgeUpdater(event, true)
}
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
handleEdgeUpdater(event, false)
}
const handler = useHandle()
const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
const nodeId = isSourceHandle ? props.target : props.source
const handleId = (isSourceHandle ? props.targetHandle : props.sourceHandle) ?? ''
@@ -91,75 +85,45 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
)
}
const onEdgeUpdaterSourceMouseDown = (event: MouseEvent) => {
handleEdgeUpdater(event, true)
}
const onEdgeUpdaterTargetMouseDown = (event: MouseEvent) => {
handleEdgeUpdater(event, false)
}
const onEdgeUpdaterMouseEnter = () => (updating.value = true)
const onEdgeUpdaterMouseOut = () => (updating.value = false)
const isVisible = ({ sourceX, sourceY, targetX, targetY }: EdgePositions) => {
return store.onlyRenderVisibleElements
? isEdgeVisible({
sourcePos: { x: sourceX, y: sourceY },
targetPos: { x: targetX, y: targetY },
width: store.dimensions.width,
height: store.dimensions.height,
transform: store.transform,
})
: true
}
const nodes = computed(() => {
const n = getSourceTargetNodes(props.edge, store.nodes)
if (!n.sourceNode) {
console.warn(`couldn't create edge for source id: ${props.source}; edge id: ${props.id}`)
}
if (!n.targetNode) {
console.warn(`couldn't create edge for target id: ${props.target}; edge id: ${props.id}`)
}
return n
})
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() =>
store.connectionMode === ConnectionMode.Strict
? nodes.value.targetNode?.__vf?.handleBounds?.target
: nodes.value.targetNode?.__vf?.handleBounds?.target ?? nodes.value.targetNode?.__vf?.handleBounds?.source,
const targetNodeHandles = controlledComputed(
() => props.sourceTargetNodes,
() =>
store.connectionMode === ConnectionMode.Strict
? props.sourceTargetNodes.targetNode.__vf.handleBounds.target
: props.sourceTargetNodes.targetNode.__vf.handleBounds.target ??
props.sourceTargetNodes.targetNode.__vf.handleBounds.source,
)
const sourceHandle = computed(() => {
if (nodes.value.sourceNode && nodes.value.sourceNode.__vf?.handleBounds?.source)
return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.sourceHandle ?? null)
else return null
})
const sourceHandle = controlledComputed(
() => props.sourceTargetNodes,
() => {
if (props.sourceTargetNodes.sourceNode && props.sourceTargetNodes.sourceNode.__vf.handleBounds.source)
return getHandle(props.sourceTargetNodes.sourceNode.__vf.handleBounds.source, props.sourceHandle ?? null)
else return null
},
)
const targetHandle = computed(() => {
if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.targetHandle ?? null)
else return null
})
const sourcePosition = computed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
const targetPosition = computed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
const sourcePosition = eagerComputed(() => (sourceHandle.value ? sourceHandle.value.position : Position.Bottom))
const targetPosition = eagerComputed(() => (targetHandle.value ? targetHandle.value.position : Position.Top))
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.id) ?? false)
const isSelected = controlledComputed(
() => store.selectedElements,
() => (props.selectable && store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.id)) ?? false,
)
const edgePos = computed(() =>
getEdgePositions(
nodes.value.sourceNode,
props.sourceTargetNodes.sourceNode,
sourceHandle.value,
sourcePosition.value,
nodes.value.targetNode,
props.sourceTargetNodes.targetNode,
targetHandle.value,
targetPosition.value,
),
)
const elementsSelectable = computed(() => store.elementsSelectable)
</script>
<script lang="ts">
export default {
@@ -168,14 +132,13 @@ export default {
</script>
<template>
<g
v-show="!props.isHidden && isVisible(edgePos)"
:class="[
'vue-flow__edge',
`vue-flow__edge-${props.type || 'default'}`,
{
selected: isSelected,
animated: props.animated,
inactive: !elementsSelectable,
inactive: !props.selectable,
updating,
},
props.class,
@@ -216,7 +179,7 @@ export default {
}"
>
<component
:is="type"
:is="props.component ?? props.type"
v-if="typeof type !== 'boolean'"
v-bind="{
id: props.id,
src/components/Nodes/NodeWrapper.vue
+12 -16
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { CSSProperties } from 'vue'
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { useStore } from '../../composables'
import { ElementId, FlowEvents, GraphNode, Position, SnapGrid, VFInternals, XYPosition } from '../../types'
import { NodeId } from '../../context'
@@ -47,11 +47,7 @@ provide(NodeId, props.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const selectable = computed(() => (typeof props.selectable === 'undefined' ? store.elementsSelectable : props.selectable))
const draggable = computed(() => (typeof props.draggable === 'undefined' ? store.nodesDraggable : props.draggable))
const connectable = computed(() => (typeof props.connectable === 'undefined' ? store.nodesConnectable : props.connectable))
const scale = computed(() => props.scale)
const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.id))
const selected = computed(() => props.selectable && store.selectedElements?.some(({ id }) => id === props.id))
const onMouseEnterHandler = () =>
props.vf.isDragging &&
@@ -91,8 +87,8 @@ const onDoubleClick = () => (event: MouseEvent) => {
const onSelectNodeHandler = (event: MouseEvent) => {
const n = props.node
if (!draggable.value) {
if (selectable.value) {
if (!props.draggable) {
if (props.selectable) {
store.unsetNodesSelection()
if (!selected.value) store.addSelectedElements([n])
}
@@ -106,11 +102,11 @@ const onDragStart: DraggableEventListener = ({ event }) => {
emit('dragStart', { event, node: n })
store.hooks.nodeDragStart.trigger({ event, node: n })
if (props.selectNodesOnDrag && selectable) {
if (props.selectNodesOnDrag && props.selectable) {
store.unsetNodesSelection()
if (!selected.value) store.addSelectedElements([n])
} else if (!props.selectNodesOnDrag && !selected.value && selectable.value) {
} else if (!props.selectNodesOnDrag && !selected.value && props.selectable) {
store.unsetNodesSelection()
store.addSelectedElements([])
}
@@ -138,7 +134,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
// 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.vf.isDragging) {
if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
if (props.selectable && !props.selectNodesOnDrag && !selected.value) {
store.addSelectedElements([n])
}
store.hooks.nodeClick.trigger({ event, node: n })
@@ -193,7 +189,7 @@ export default {
cancel=".nodrag"
:handle="props.dragHandle"
:disabled="!draggable"
:scale="scale"
:scale="props.scale"
:grid="props.snapGrid"
:enable-user-select-hack="false"
@start="onDragStart"
@@ -207,14 +203,14 @@ export default {
`vue-flow__node-${props.type}`,
{
selected,
selectable: selectable,
selectable: props.selectable,
},
props.class,
]"
:style="{
zIndex: selected ? 10 : 3,
transform: `translate(${props.vf.position.x}px,${props.vf.position.y}px)`,
pointerEvents: selectable || draggable ? 'all' : 'none',
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
opacity: props.vf.width !== null && props.vf.height !== null ? 1 : 0,
...props.style,
}"
@@ -234,7 +230,7 @@ export default {
xPos: props.vf.position.x,
yPos: props.vf.position.y,
selected,
connectable,
connectable: props.connectable,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
dragging: props.vf.isDragging,
@@ -249,7 +245,7 @@ export default {
xPos: props.vf.position.x,
yPos: props.vf.position.y,
selected,
connectable,
connectable: props.connectable,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
dragging: props.vf.isDragging,