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

refactor: pass props to edge/nodewrapper separately

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-22 01:22:27 +01:00
parent a03f658794
commit c35673c622
18 changed files with 204 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/BezierEdge.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import { getCenter, getMarkerEnd, getBezierPath } from './utils'
import EdgeText from './EdgeText.vue'
@@ -19,8 +19,8 @@ interface BezierEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean
src/components/Edges/EdgeText.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { CSSProperties, DefineComponent } from 'vue'
interface EdgeTextProps {
x: number
@@ -7,7 +7,7 @@ interface EdgeTextProps {
label?:
| string
| {
component: Component | DefineComponent
component: DefineComponent
props?: Record<string, any>
}
labelStyle?: CSSProperties
src/components/Edges/EdgeWrapper.vue
+70 -43
View File
@@ -1,12 +1,39 @@
<script lang="ts" setup>
import { CSSProperties, DefineComponent } from 'vue'
import { useHandle, useStore } from '../../composables'
import { ConnectionMode, Edge, EdgePositions, Position } from '../../types'
import { ArrowHeadType, ConnectionMode, Edge, EdgePositions, EdgeTextProps, ElementId, Position } from '../../types'
import { isEdge, getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from '../../utils'
import EdgeAnchor from './EdgeAnchor.vue'
interface EdgeWrapper {
id: ElementId
edge: Edge
type?: string
source: ElementId
target: ElementId
sourceHandle?: ElementId | null
targetHandle?: ElementId | null
selected?: boolean
sourcePosition?: Position
targetPosition?: Position
label?:
| string
| {
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: any
labelShowBg?: boolean
labelBgStyle?: any
labelBgPadding?: [number, number]
labelBgBorderRadius?: number
style?: CSSProperties | unknown
animated?: boolean
arrowHeadType?: ArrowHeadType
markerEndId?: string
data?: any
class?: string
isHidden?: boolean
edgeUpdaterRadius?: number
}
@@ -15,7 +42,7 @@ const props = withDefaults(defineProps<EdgeWrapper>(), {})
const store = useStore()
const type = computed(() => {
const t = props.edge.type ?? 'default'
const t = props.type ?? 'default'
let edge = store.getEdgeTypes[t]
if (!edge) {
edge = store.getEdgeTypes.default
@@ -53,8 +80,8 @@ const onEdgeMouseLeave = (event: MouseEvent) => store.hooks.edgeMouseLeave.trigg
const handler = useHandle()
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 ? props.target : props.source
const handleId = (isSourceHandle ? props.targetHandle : props.sourceHandle) ?? ''
const isValidConnection = () => true
const isTarget = isSourceHandle
@@ -92,11 +119,11 @@ const nodes = computed(() => {
const n = getSourceTargetNodes(props.edge, store.nodes)
if (!n.sourceNode) {
console.warn(`couldn't create edge for source id: ${props.edge.source}; edge id: ${props.edge.id}`)
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.edge.target}; edge id: ${props.edge.id}`)
console.warn(`couldn't create edge for target id: ${props.target}; edge id: ${props.id}`)
}
return n
@@ -111,17 +138,17 @@ const targetNodeHandles = computed(() =>
const sourceHandle = computed(() => {
if (nodes.value.sourceNode && nodes.value.sourceNode.__vf?.handleBounds?.source)
return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle ?? null)
return getHandle(nodes.value.sourceNode.__vf.handleBounds.source, props.sourceHandle ?? null)
else return null
})
const targetHandle = computed(() => {
if (targetNodeHandles.value) return getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null)
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 isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.edge.id) ?? false)
const isSelected = computed(() => store.selectedElements?.some((elm) => isEdge(elm) && elm.id === props.id) ?? false)
const edgePos = computed(() =>
getEdgePositions(
nodes.value.sourceNode,
@@ -141,17 +168,17 @@ export default {
</script>
<template>
<g
v-show="!props.edge.isHidden && isVisible(edgePos)"
v-show="!props.isHidden && isVisible(edgePos)"
:class="[
'vue-flow__edge',
`vue-flow__edge-${props.edge.type || 'default'}`,
`vue-flow__edge-${props.type || 'default'}`,
{
selected: isSelected,
animated: props.edge.animated,
animated: props.animated,
inactive: !elementsSelectable,
updating,
},
props.edge.class,
props.class,
]"
@click="onEdgeClick"
@dblClick="onDoubleClick"
@@ -163,20 +190,20 @@ export default {
<slot
v-if="edgePos.sourceX && edgePos.sourceY && edgePos.targetX && edgePos.targetY"
v-bind="{
id: props.edge.id,
source: props.edge.source,
target: props.edge.target,
id: props.id,
source: props.source,
target: props.target,
selected: isSelected,
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,
arrowHeadType: props.edge.arrowHeadType,
animated: props.animated,
label: props.label,
labelStyle: props.labelStyle,
labelShowBg: props.labelShowBg,
labelBgStyle: props.labelBgStyle,
labelBgPadding: props.labelBgPadding,
labelBgBorderRadius: props.labelBgBorderRadius,
data: props.data,
style: props.style,
arrowHeadType: props.arrowHeadType,
sourcePosition,
targetPosition,
sourceX: edgePos.sourceX,
@@ -184,28 +211,28 @@ export default {
targetX: edgePos.targetX,
targetY: edgePos.targetY,
markerEndId: props.markerEndId,
sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle,
sourceHandleId: props.sourceHandle,
targetHandleId: props.targetHandle,
}"
>
<component
:is="type"
v-if="typeof type !== 'boolean'"
v-bind="{
id: props.edge.id,
source: props.edge.source,
target: props.edge.target,
id: props.id,
source: props.source,
target: props.target,
selected: isSelected,
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,
arrowHeadType: props.edge.arrowHeadType,
animated: props.animated,
label: props.label,
labelStyle: props.labelStyle,
labelShowBg: props.labelShowBg,
labelBgStyle: props.labelBgStyle,
labelBgPadding: props.labelBgPadding,
labelBgBorderRadius: props.labelBgBorderRadius,
data: props.data,
style: props.style,
arrowHeadType: props.arrowHeadType,
sourcePosition,
targetPosition,
sourceX: edgePos.sourceX,
@@ -213,8 +240,8 @@ export default {
targetX: edgePos.targetX,
targetY: edgePos.targetY,
markerEndId: props.markerEndId,
sourceHandleId: props.edge.sourceHandle,
targetHandleId: props.edge.targetHandle,
sourceHandleId: props.sourceHandle,
targetHandleId: props.targetHandle,
}"
/>
</slot>
src/components/Edges/SmoothStepEdge.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getCenter, getMarkerEnd, getSmoothStepPath } from './utils'
@@ -19,8 +19,8 @@ interface SmoothStepEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean
src/components/Edges/StepEdge.vue
+5 -5
View File
@@ -1,9 +1,9 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import SmoothStepEdge from './SmoothStepEdge.vue'
export interface StepEdgeProps extends EdgeProps {
interface StepEdgeProps extends EdgeProps {
id: ElementId
source: ElementId
target: ElementId
@@ -18,8 +18,8 @@ export interface StepEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean
src/components/Edges/StraightEdge.vue
+4 -4
View File
@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { Component, CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, ElementId, Position } from '../../types'
import { CSSProperties, DefineComponent } from 'vue'
import { ArrowHeadType, EdgeProps, EdgeTextProps, ElementId, Position } from '../../types'
import EdgeText from './EdgeText.vue'
import { getMarkerEnd, getBezierPath } from './utils'
@@ -19,8 +19,8 @@ interface StraightEdgeProps extends EdgeProps {
label?:
| string
| {
component: Component | DefineComponent
props?: Record<string, any>
component: DefineComponent<EdgeTextProps>
props?: EdgeTextProps
}
labelStyle?: CSSProperties
labelShowBg?: boolean
src/components/Nodes/NodeWrapper.vue
+55 -44
View File
@@ -1,13 +1,28 @@
<script lang="ts" setup>
import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
import { CSSProperties } from 'vue'
import { useStore } from '../../composables'
import { FlowEvents, GraphNode, SnapGrid } from '../../types'
import { ElementId, FlowEvents, GraphNode, Position, SnapGrid, VFInternals, XYPosition } from '../../types'
import { NodeId } from '../../context'
interface NodeWrapperProps {
node: GraphNode
vf: VFInternals
selectNodesOnDrag?: boolean
snapGrid?: SnapGrid
id: ElementId
position: XYPosition
type?: string
class?: string
style?: CSSProperties
data?: any
targetPosition?: Position
sourcePosition?: Position
isHidden?: boolean
draggable?: boolean
selectable?: boolean
connectable?: boolean
dragHandle?: string
}
interface NodeEvents {
@@ -25,12 +40,12 @@ const props = withDefaults(defineProps<NodeWrapperProps>(), {
})
const store = useStore()
provide(NodeId, props.node.id)
provide(NodeId, props.id)
const nodeElement = templateRef<HTMLDivElement>('node-element', null)
const type = computed(() => {
const t = props.node.type ?? 'default'
const t = props.type ?? 'default'
let node = store.getNodeTypes[t]
if (!node) {
node = store.getNodeTypes.default
@@ -39,24 +54,20 @@ const type = computed(() => {
return node
})
const selectable = computed(() =>
typeof props.node.selectable === 'undefined' ? store.elementsSelectable : props.node.selectable,
)
const draggable = computed(() => (typeof props.node.draggable === 'undefined' ? store.nodesDraggable : props.node.draggable))
const connectable = computed(() =>
typeof props.node.connectable === 'undefined' ? store.nodesConnectable : props.node.connectable,
)
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(() => store.transform[2])
const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.node.id))
const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.id))
const onMouseEnterHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
const onMouseMoveHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
const onMouseLeaveHandler = () =>
props.node.__vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
props.vf.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
@@ -69,9 +80,8 @@ const onSelectNodeHandler = (event: MouseEvent) => {
store.unsetNodesSelection()
if (!selected.value) store.addSelectedElements([n])
}
store.hooks.nodeClick.trigger({ event, node: n })
}
store.hooks.elementClick.trigger({ event, element: n })
store.hooks.nodeClick.trigger({ event, node: n })
}
const onDragStart: DraggableEventListener = ({ event }) => {
@@ -95,7 +105,7 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
store.hooks.nodeDrag.trigger({ event, node: n })
store.updateNodePosDiff({
id: props.node.id,
id: props.id,
diff: {
x: data.deltaX,
y: data.deltaY,
@@ -108,11 +118,12 @@ const onDragStop: DraggableEventListener = ({ event }) => {
const n = props.node
// 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 (!props.vf.isDragging) {
if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
store.addSelectedElements([n])
}
store.hooks.nodeClick.trigger({ event, node: n })
store.hooks.elementClick.trigger({ event, element: n })
return
}
@@ -127,7 +138,7 @@ const onDragStop: DraggableEventListener = ({ event }) => {
onMounted(() => {
store.updateNodeDimensions({
id: props.node.id,
id: props.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
@@ -141,10 +152,10 @@ onMounted(() => {
}),
)
watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => {
watch([() => props.type, () => props.sourcePosition, () => props.targetPosition], () => {
nextTick(() => {
store.updateNodeDimensions({
id: props.node.id,
id: props.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
@@ -160,7 +171,7 @@ export default {
<template>
<DraggableCore
cancel=".nodrag"
:handle="props.node.dragHandle"
:handle="props.dragHandle"
:disabled="!draggable"
:scale="scale"
:grid="props.snapGrid"
@@ -173,21 +184,21 @@ export default {
ref="node-element"
:class="[
'vue-flow__node',
`vue-flow__node-${props.node.type}`,
`vue-flow__node-${props.type}`,
{
selected,
selectable: selectable,
},
props.node.class,
props.class,
]"
:style="{
zIndex: selected ? 10 : 3,
transform: `translate(${props.node.__vf?.position?.x}px,${props.node.__vf?.position?.y}px)`,
transform: `translate(${props.vf.position.x}px,${props.vf.position.y}px)`,
pointerEvents: selectable || draggable ? 'all' : 'none',
opacity: props.node.__vf?.width !== null && props.node.__vf?.height !== null ? 1 : 0,
...props.node.style,
opacity: props.vf.width !== null && props.vf.height !== null ? 1 : 0,
...props.style,
}"
:data-id="props.node.id"
:data-id="props.id"
@mouseenter="onMouseEnterHandler"
@mousemove="onMouseMoveHandler"
@mouseleave="onMouseLeaveHandler"
@@ -197,31 +208,31 @@ export default {
>
<slot
v-bind="{
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__vf?.position?.x,
yPos: props.node.__vf?.position?.y,
id: props.id,
data: props.data,
type: props.type,
xPos: props.vf.position.x,
yPos: props.vf.position.y,
selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__vf?.isDragging,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
dragging: props.vf.isDragging,
}"
>
<component
:is="type"
v-bind="{
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__vf?.position?.x,
yPos: props.node.__vf?.position?.y,
id: props.id,
data: props.data,
type: props.type,
xPos: props.vf.position.x,
yPos: props.vf.position.y,
selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__vf?.isDragging,
sourcePosition: props.sourcePosition,
targetPosition: props.targetPosition,
dragging: props.vf.isDragging,
}"
/>
</slot>