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

refactor: Destructure props with reactivity transform

Browse Source
This commit is contained in:
Braks
2022-04-24 13:34:22 +02:00
parent e722f49e6e
commit dc1d71d0bd
12 changed files with 182 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/components/ConnectionLine/ConnectionLine.vue
+8 -8
View File
@@ -8,7 +8,7 @@ interface ConnectionLineProps {
sourceNode: GraphNode
}
const props = defineProps<ConnectionLineProps>()
const { sourceNode } = defineProps<ConnectionLineProps>()
const {
getNodes,
@@ -27,14 +27,14 @@ const hasSlot = slots?.({})
const sourceHandle =
connectionHandleId && connectionHandleType
? props.sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
: connectionHandleType && props.sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
? sourceNode.handleBounds[connectionHandleType as HandleType]?.find((d: HandleElement) => d.id === connectionHandleId)
: connectionHandleType && sourceNode.handleBounds[(connectionHandleType as HandleType) ?? 'source']?.[0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : props.sourceNode.dimensions.width / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.dimensions.height
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.dimensions.width / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.dimensions.height
const sourceX = props.sourceNode.computedPosition.x + sourceHandleX
const sourceY = props.sourceNode.computedPosition.y + sourceHandleY
const sourceX = sourceNode.computedPosition.x + sourceHandleX
const sourceY = sourceNode.computedPosition.y + sourceHandleY
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
@@ -101,7 +101,7 @@ export default {
connectionLineType,
connectionLineStyle,
nodes: getNodes,
sourceNode: props.sourceNode,
sourceNode,
sourceHandle,
}"
/>
package/src/components/Edges/EdgeWrapper.vue
+56 -55
View File
@@ -15,13 +15,13 @@ interface EdgeWrapper {
updatable?: boolean
}
const props = defineProps<EdgeWrapper>()
const { id, edge, sourceNode, targetNode, selectable, updatable } = defineProps<EdgeWrapper>()
const slots = inject(Slots)
const { hooks, connectionMode, setState, addSelectedEdges, getEdgeTypes, edgeUpdaterRadius, noPanClassName } = $(useVueFlow())
const edge = $(useVModel(props, 'edge'))
const { hooks, connectionMode, edgeUpdaterRadius, noPanClassName, setState, getEdge, addSelectedEdges, getEdgeTypes } = $(
useVueFlow(),
)
let name = $ref(edge.type ?? 'default')
watch(
@@ -31,41 +31,11 @@ watch(
let updating = $ref(false)
onMounted(() => {
watch(
[
sourcePosition,
targetPosition,
() => props.sourceNode.position,
() => props.targetNode.position,
() => props.sourceNode.computedPosition,
() => props.targetNode.computedPosition,
() => props.sourceNode.dimensions,
() => props.targetNode.dimensions,
],
() => {
const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
props.sourceNode,
sourceHandle.value,
sourcePosition.value,
props.targetNode,
targetHandle.value,
targetPosition.value,
)
if (edge.sourceX !== sourceX) edge.sourceX = sourceX
if (edge.sourceY !== sourceY) edge.sourceY = sourceY
if (edge.targetX !== targetX) edge.targetX = targetX
if (edge.targetY !== targetY) edge.targetY = targetY
},
{ immediate: true },
)
})
const { onMouseDown } = useHandle()
const onEdgeClick = (event: MouseEvent) => {
const data = { event, edge }
if (props.selectable) {
if (selectable) {
setState({
nodesSelectionActive: false,
})
@@ -112,35 +82,66 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
}
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() => {
const targetNodeHandles = $computed(() => {
if (connectionMode === ConnectionMode.Strict) {
return props.targetNode.handleBounds.target
return targetNode.handleBounds.target
}
const targetBounds = props.targetNode.handleBounds.target
const sourceBounds = props.targetNode.handleBounds.source
const targetBounds = targetNode.handleBounds.target
const sourceBounds = targetNode.handleBounds.source
return targetBounds ?? sourceBounds
})
const sourceNodeHandles = computed(() => {
const sourceNodeHandles = $computed(() => {
if (connectionMode === ConnectionMode.Strict) {
return props.sourceNode.handleBounds.source
return sourceNode.handleBounds.source
}
const targetBounds = props.sourceNode.handleBounds.target
const sourceBounds = props.sourceNode.handleBounds.source
const targetBounds = sourceNode.handleBounds.target
const sourceBounds = sourceNode.handleBounds.source
return sourceBounds ?? targetBounds
})
const sourceHandle = computed(() => getHandle(sourceNodeHandles.value, edge.sourceHandle))
const sourceHandle = $computed(() => getHandle(sourceNodeHandles, edge.sourceHandle))
const targetHandle = computed(() => getHandle(targetNodeHandles.value, edge.targetHandle))
const targetHandle = $computed(() => getHandle(targetNodeHandles, edge.targetHandle))
const sourcePosition = controlledComputed(sourceHandle, () =>
sourceHandle.value ? sourceHandle.value.position : Position.Bottom,
)
const sourcePosition = $(controlledComputed($$(sourceHandle), () => (sourceHandle ? sourceHandle.position : Position.Bottom)))
const targetPosition = controlledComputed(targetHandle, () => (targetHandle.value ? targetHandle.value.position : Position.Top))
const targetPosition = $(controlledComputed($$(targetHandle), () => (targetHandle ? targetHandle.position : Position.Top)))
onMounted(() => {
watch(
[
sourcePosition,
targetPosition,
() => sourceNode.position,
() => targetNode.position,
() => sourceNode.computedPosition,
() => targetNode.computedPosition,
() => sourceNode.dimensions,
() => targetNode.dimensions,
],
() => {
const { sourceX, sourceY, targetY, targetX } = getEdgePositions(
sourceNode,
sourceHandle,
sourcePosition,
targetNode,
targetHandle,
targetPosition,
)
const edge = getEdge(id)!
if (edge.sourceX !== sourceX) edge.sourceX = sourceX
if (edge.sourceY !== sourceY) edge.sourceY = sourceY
if (edge.targetX !== targetX) edge.targetX = targetX
if (edge.targetY !== targetY) edge.targetY = targetY
},
{ immediate: true },
)
})
const type = computed(() => {
let edgeType = edge.template ?? getEdgeTypes[name]
@@ -175,7 +176,7 @@ const getClass = computed(() => {
{
selected: edge.selected,
animated: edge.animated,
inactive: !props.selectable,
inactive: !selectable,
updating,
},
extraClass,
@@ -203,11 +204,11 @@ export default {
<component
:is="type"
:id="edge.id"
:source-node="props.sourceNode"
:target-node="props.targetNode"
:source-node="sourceNode"
:target-node="targetNode"
:source="edge.source"
:target="edge.target"
:updatable="props.updatable"
:updatable="updatable"
:selected="edge.selected"
:animated="edge.animated"
:label="edge.label"
@@ -230,7 +231,7 @@ export default {
:target-handle-id="edge.targetHandle"
/>
<g
v-if="props.updatable"
v-if="updatable"
@mousedown="onEdgeUpdaterSourceMouseDown"
@mouseenter="onEdgeUpdaterMouseEnter"
@mouseout="onEdgeUpdaterMouseOut"
@@ -238,7 +239,7 @@ export default {
<EdgeAnchor :position="sourcePosition" :center-x="edge.sourceX" :center-y="edge.sourceY" :radius="edgeUpdaterRadius" />
</g>
<g
v-if="props.updatable"
v-if="updatable"
@mousedown="onEdgeUpdaterTargetMouseDown"
@mouseenter="onEdgeUpdaterMouseEnter"
@mouseout="onEdgeUpdaterMouseOut"
package/src/components/Handle/Handle.vue
+27 -18
View File
@@ -4,45 +4,47 @@ import { ConnectionMode, Position } from '../../types'
import { NodeId } from '../../context'
import type { HandleProps } from '../../types/handle'
const props = withDefaults(defineProps<HandleProps>(), {
type: 'source',
position: 'top' as Position,
connectable: true,
})
const {
type = 'source',
position = 'top' as Position,
connectable = true,
id,
isValidConnection = function () {
return true
},
} = defineProps<HandleProps>()
const { id, hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
const { hooks, connectionStartHandle, connectionMode } = $(useVueFlow())
const nodeId = inject(NodeId, '')
const handleId = $computed(
() => props.id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${props.position}`),
)
const handleId = $computed(() => id ?? (connectionMode === ConnectionMode.Strict ? null : `${nodeId}__handle-${position}`))
const { onMouseDown, onClick } = useHandle()
const onMouseDownHandler = (event: MouseEvent) => {
onMouseDown(event, handleId, nodeId, props.type === 'target', props.isValidConnection, undefined)
onMouseDown(event, handleId, nodeId, type === 'target', isValidConnection, undefined)
}
const onClickHandler = (event: MouseEvent) => {
onClick(event, handleId ?? null, nodeId, props.type, props.isValidConnection)
onClick(event, handleId ?? null, nodeId, type, isValidConnection)
}
const getClasses = computed(() => {
return [
'vue-flow__handle',
`vue-flow__handle-${props.position}`,
`vue-flow__handle-${position}`,
`vue-flow__handle-${handleId}`,
'nodrag',
{
source: props.type !== 'target',
target: props.type === 'target',
connectable: props.connectable,
source: type !== 'target',
target: type === 'target',
connectable,
connecting:
connectionStartHandle &&
connectionStartHandle.nodeId === nodeId &&
connectionStartHandle.handleId === handleId &&
connectionStartHandle.type === props.type,
connectionStartHandle.type === type,
},
]
})
@@ -56,11 +58,18 @@ export default {
<div
:data-handleid="handleId"
:data-nodeid="nodeId"
:data-handlepos="props.position"
:data-handlepos="position"
:class="getClasses"
@mousedown="onMouseDownHandler"
@click="onClickHandler"
>
<slot :node-id="nodeId" v-bind="props"></slot>
<slot
:id="id"
:node-id="nodeId"
:type="type"
:position="position"
:connectable="connectable"
:is-valid-connection="isValidConnection"
/>
</div>
</template>
package/src/components/Nodes/NodeWrapper.vue
+15 -17
View File
@@ -15,9 +15,9 @@ interface NodeWrapperProps {
snapGrid?: SnapGrid
}
const props = defineProps<NodeWrapperProps>()
const { id, node, draggable, selectable, connectable, snapGrid } = defineProps<NodeWrapperProps>()
provide(NodeId, props.id)
provide(NodeId, id)
const slots = inject(Slots)
@@ -35,8 +35,6 @@ const {
addSelectedNodes,
} = $(useVueFlow())
const node = $(useVModel(props, 'node'))
let name = $ref(node.type ?? 'default')
watch(
() => node.type,
@@ -47,8 +45,8 @@ const nodeElement = ref()
const { scale, onDrag, onDragStart, onDragStop } = useDraggableCore(nodeElement, {
handle: node.dragHandle,
disabled: !props.draggable,
grid: props.snapGrid,
disabled: !draggable,
grid: snapGrid,
cancel: `.${noDragClassName}`,
enableUserSelectHack: false,
scale: viewport.zoom,
@@ -100,12 +98,12 @@ watch(
}
if (parent) {
node.computedPosition = getXYZPos(parent, xyzPos)
getNode(id)!.computedPosition = getXYZPos(parent, xyzPos)
} else {
node.computedPosition = xyzPos
getNode(id)!.computedPosition = xyzPos
}
node.handleBounds = getHandleBounds(nodeElement.value, scale.value)
getNode(id)!.handleBounds = getHandleBounds(nodeElement.value, scale.value)
},
{ deep: true, flush: 'post' },
)
@@ -142,8 +140,8 @@ const onContextMenu = (event: MouseEvent) => {
const onDoubleClick = (event: MouseEvent) => hooks.nodeDoubleClick.trigger({ event, node })
const onSelectNode = (event: MouseEvent) => {
if (!props.draggable) {
if (props.selectable) {
if (!draggable) {
if (selectable) {
setState({
nodesSelectionActive: false,
})
@@ -182,13 +180,13 @@ onDragStart(({ event }) => {
addSelectedNodes([])
hooks.nodeDragStart.trigger({ event, node })
if (selectNodesOnDrag && props.selectable) {
if (selectNodesOnDrag && selectable) {
setState({
nodesSelectionActive: false,
})
if (!node.selected) addSelectedNodes([node])
} else if (!selectNodesOnDrag && !node.selected && props.selectable) {
} else if (!selectNodesOnDrag && !node.selected && selectable) {
setState({
nodesSelectionActive: false,
})
@@ -206,7 +204,7 @@ onDragStop(({ 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 (!node.dragging) {
if (props.selectable && !selectNodesOnDrag && !node.selected) {
if (selectable && !selectNodesOnDrag && !node.selected) {
addSelectedNodes([node])
}
hooks.nodeClick.trigger({ event, node })
@@ -225,7 +223,7 @@ const getClass = computed(() => {
{
dragging: node.dragging,
selected: node.selected,
selectable: props.selectable,
selectable,
},
extraClass,
]
@@ -241,7 +239,7 @@ const getStyle = computed(() => {
return {
zIndex: node.computedPosition.z,
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
pointerEvents: selectable || draggable ? 'all' : 'none',
...styles,
} as CSSProperties
})
@@ -271,7 +269,7 @@ export default {
:type="node.type"
:data="node.data"
:selected="!!node.selected"
:connectable="props.connectable"
:connectable="connectable"
:position="node.position"
:computed-position="node.computedPosition"
:dimensions="node.dimensions"
package/src/components/UserSelection/SelectionRect.vue
+4 -4
View File
@@ -6,7 +6,7 @@ interface SelectionRectProps {
y: number
}
const props = defineProps<SelectionRectProps>()
const { width, height, x, y } = defineProps<SelectionRectProps>()
</script>
<script lang="ts">
export default {
@@ -17,9 +17,9 @@ export default {
<div
class="vue-flow__selection"
:style="{
width: `${props.width}px`,
height: `${props.height}px`,
transform: `translate(${props.x}px, ${props.y}px)`,
width: `${width}px`,
height: `${height}px`,
transform: `translate(${x}px, ${y}px)`,
}"
/>
</template>