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

refactor(types): Remove internal __vf field

Browse Source 
* fields are merged into the GraphNode / Node interface
* Remove passing props from VueFlow container, use injected state

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 3f0b0dbd70
commit f28e10b05a
17 changed files with 219 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ConnectionLine/ConnectionLine.vue
+16 -41
View File
@@ -1,56 +1,31 @@
<script lang="ts" setup>
import { CSSProperties } from 'vue'
import { getBezierPath, getSmoothStepPath } from '../Edges/utils'
import {
ConnectionLineType,
HandleElement,
Position,
HandleType,
XYPosition,
ConnectionMode,
Transform,
GraphNode,
} from '../../types'
import { ConnectionLineType, GraphNode, HandleElement, Position } from '../../types'
import { useStore } from '../../composables'
interface ConnectionLineProps {
sourceNode: GraphNode
connectionLineType?: ConnectionLineType
connectionLineStyle?: CSSProperties
connectionHandleId?: string
connectionNodeId?: string
connectionHandleType?: HandleType
connectionPosition?: XYPosition
connectionMode: ConnectionMode
nodes: GraphNode[]
transform: Transform
}
const props = withDefaults(defineProps<ConnectionLineProps>(), {
connectionLineType: ConnectionLineType.Bezier,
connectionLineStyle: () => ({}),
connectionPosition: () => ({ x: 0, y: 0 }),
})
const props = defineProps<ConnectionLineProps>()
const store = useStore()
const sourceHandle =
props.connectionHandleId && props.connectionHandleType
? props.sourceNode.__vf.handleBounds[props.connectionHandleType]?.find(
(d: HandleElement) => d.id === props.connectionHandleId,
)
: props.connectionHandleType && props.sourceNode.__vf.handleBounds[props.connectionHandleType ?? 'source']?.[0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__vf.width as number) / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__vf.height
store.connectionHandleId && store.connectionHandleType
? props.sourceNode.handleBounds[store.connectionHandleType]?.find((d: HandleElement) => d.id === store.connectionHandleId)
: store.connectionHandleType && props.sourceNode.handleBounds[store.connectionHandleType ?? 'source']?.[0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.width as number) / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.height
const sourceX = props.sourceNode.position.x + sourceHandleX
const sourceY = props.sourceNode.position.y + sourceHandleY
const isRightOrLeft = sourceHandle?.position === Position.Left || sourceHandle?.position === Position.Right
const targetPosition = isRightOrLeft ? Position.Left : Position.Top
const targetX = computed(() => (props.connectionPosition.x - props.transform[0]) / props.transform[2])
const targetY = computed(() => (props.connectionPosition.y - props.transform[1]) / props.transform[2])
const targetX = computed(() => (store.connectionPosition.x - store.transform[0]) / store.transform[2])
const targetY = computed(() => (store.connectionPosition.y - store.transform[1]) / store.transform[2])
const dAttr = computed(() => {
let path = `M${sourceX},${sourceY} ${targetX.value},${targetY.value}`
switch (props.connectionLineType) {
switch (store.connectionLineType) {
case ConnectionLineType.Bezier:
path = getBezierPath({
sourceX,
@@ -101,14 +76,14 @@ export default {
targetX,
targetY,
targetPosition,
connectionLineType: props.connectionLineType,
connectionLineStyle: props.connectionLineStyle,
nodes: props.nodes,
connectionLineType: store.connectionLineType,
connectionLineStyle: store.connectionLineStyle,
nodes: store.getNodes,
sourceNode: props.sourceNode,
sourceHandle,
}"
>
<path :d="dAttr" class="vue-flow__connection-path" :style="props.connectionLineStyle" />
<path :d="dAttr" class="vue-flow__connection-path" :style="store.connectionLineStyle" />
</slot>
</g>
</template>
src/components/Edges/EdgeWrapper.vue
+4 -4
View File
@@ -61,15 +61,15 @@ const handleEdgeUpdater = (event: MouseEvent, isSourceHandle: boolean) => {
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() =>
store.connectionMode === ConnectionMode.Strict
? props.edge.targetNode.__vf.handleBounds.target
: props.edge.targetNode.__vf.handleBounds.target ?? props.edge.targetNode.__vf.handleBounds.source,
? props.edge.targetNode.handleBounds.target
: props.edge.targetNode.handleBounds.target ?? props.edge.targetNode.handleBounds.source,
)
const sourceHandle = controlledComputed(
() => props.edge,
() => {
if (props.edge.sourceNode && props.edge.sourceNode.__vf.handleBounds.source)
return getHandle(props.edge.sourceNode.__vf.handleBounds.source, props.edge.sourceHandle)
if (props.edge.sourceNode && props.edge.sourceNode.handleBounds.source)
return getHandle(props.edge.sourceNode.handleBounds.source, props.edge.sourceHandle)
else return undefined
},
)
src/components/Nodes/NodeWrapper.vue
+26 -34
View File
@@ -84,24 +84,24 @@ const updateNodePosition = (node: GraphNode, { x, y }: XYPosition) => {
const position = {
x: node.position.x + x,
y: node.position.y + y,
z: node.__vf.position.z,
z: node.computedPosition.z,
}
let extent = store.nodeExtent
if (node.extent === 'parent' && node.parentNode && node.__vf.width && node.__vf.height) {
const parent = node.__vf.parentNode
if (node.extent === 'parent' && node.parentNode && node.width && node.height) {
const parent = node.parentNode
extent =
parent.__vf.width && parent.__vf.height
parent.width && parent.height
? [
[0, 0],
[parent.__vf.width - node.__vf.width, parent.__vf.height - node.__vf.height],
[parent.width - node.width, parent.height - node.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 }
if (node.parentNode || node.isParent) {
node.computedPosition = calculateXYZPosition(node, { z: position.z, ...node.position })
} else node.computedPosition = { ...node.position, z: position.z }
}
const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate) => {
@@ -110,42 +110,36 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
const doUpdate =
dimensions.width &&
dimensions.height &&
(node.value.__vf.width !== dimensions.width || node.value.__vf.height !== dimensions.height || forceUpdate)
(node.value.width !== dimensions.width || node.value.height !== dimensions.height || forceUpdate)
if (doUpdate) {
const handleBounds = getHandleBounds(nodeElement, store.transform[2], store.id)
node.value.__vf = {
...node.value.__vf,
node.value = {
...node.value,
...dimensions,
handleBounds,
}
}
}
tryOnMounted(() => {
watch([() => node.value.__vf.width, () => node.value.__vf.height], () => {
onRenderTriggered(() => console.log(node.value.id))
onMounted(() => {
nextTick(() => {
updateNodeDimensions({
id: node.value.id,
id: props.node.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
})
useResizeObserver(nodeElement, (entries) =>
entries.forEach((entry) => {
updateNodeDimensions({
id: entry.target.getAttribute('data-id') as string,
nodeElement: entry.target as HTMLDivElement,
})
}),
)
watch([() => node.value.type, () => node.value.sourcePosition, () => node.value.targetPosition], () => {
updateNodeDimensions({
id: node.value.id,
nodeElement: nodeElement.value,
forceUpdate: true,
})
useResizeObserver(nodeElement, (entries) =>
entries.forEach((entry) => {
updateNodeDimensions({
id: entry.target.getAttribute('data-id') as string,
nodeElement: entry.target as HTMLDivElement,
})
}),
)
})
})
</script>
@@ -180,10 +174,10 @@ export default {
node.class,
]"
:style="{
zIndex: node.dragging || selected ? 1000 : node.__vf.position.z,
transform: `translate(${node.__vf.position.x}px,${node.__vf.position.y}px)`,
zIndex: node.dragging || selected ? 1000 : node.computedPosition.z,
transform: `translate(${node.computedPosition.x}px,${node.computedPosition.y}px)`,
pointerEvents: props.selectable || props.draggable ? 'all' : 'none',
opacity: node.__vf.width !== null && node.__vf.height !== null ? 1 : 0,
opacity: node.width !== null && node.height !== null ? 1 : 0,
...node.style,
}"
:data-id="node.id"
@@ -200,7 +194,6 @@ export default {
data: node.data,
type: node.type,
position: node.position,
__vf: node.__vf,
selected,
connectable: props.connectable,
sourcePosition: node.sourcePosition,
@@ -217,7 +210,6 @@ export default {
data: node.data,
type: node.type,
position: node.position,
__vf: node.__vf,
selected,
connectable: props.connectable,
sourcePosition: node.sourcePosition,
src/components/NodesSelection/NodesSelection.vue
+2 -9
View File
@@ -1,16 +1,9 @@
<script lang="ts" setup>
import { Draggable, DraggableEventListener } from '@braks/revue-draggable'
import { useStore } from '../../composables'
import { FlowElements } from '../../types'
import { getRectOfNodes } from '../../utils'
interface NodesSelectionProps {
selectedElements: FlowElements
}
const store = useStore()
const props = defineProps<NodesSelectionProps>()
const selectedNodesBBox = getRectOfNodes(store.getSelectedNodes)
const innerStyle = {
width: `${selectedNodesBBox.width}px`,
@@ -27,12 +20,12 @@ const onDrag: DraggableEventListener = ({ event, data }) => {
x: node.position.x + data.deltaX,
y: node.position.y + data.deltaY,
}
node.__vf.isDragging = true
node.dragging = true
})
}
const onStop: DraggableEventListener = ({ event }) => {
store.hooks.selectionDragStop.trigger({ event, nodes: store.getSelectedNodes })
store.getSelectedNodes.forEach((node) => (node.__vf.isDragging = false))
store.getSelectedNodes.forEach((node) => (node.dragging = false))
}
const onContextMenu = (event: MouseEvent) => store.hooks.selectionContextMenu.trigger({ event, nodes: store.getSelectedNodes })