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

refactor: rename internal data field to __vf

Browse Source 
Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
Braks
2021-11-21 12:54:04 +01:00
parent 71ba905348
commit 0e9f8c5fc2
12 changed files with 62 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/Provider/Sidebar.vue
+1 -1
View File
@@ -19,7 +19,7 @@ const selectAll = () => {
<div class="transform">{{ [transform[0].toFixed(2), transform[1].toFixed(2), transform[2].toFixed(2)] }}</div>
<div class="title">Nodes</div>
<div v-for="node of nodes" :key="node.id">
Node {{ node.id }} - x: {{ node.__rf.position.x.toFixed(2) }}, y: {{ node.__rf.position.y.toFixed(2) }}
Node {{ node.id }} - x: {{ node.__vf.position.x.toFixed(2) }}, y: {{ node.__vf.position.y.toFixed(2) }}
</div>
<div class="selectall">
src/additional-components/MiniMap/MiniMap.vue
+8 -8
View File
@@ -92,10 +92,10 @@ const d = computed(() => {
>
<template v-for="node of nodes" :key="`mini-map-node-${node.id}`">
<slot
:x="node.__rf.position.x"
:y="node.__rf.position.y"
:width="node.__rf.width"
:height="node.__rf.height"
:x="node.__vf.position.x"
:y="node.__vf.position.y"
:width="node.__vf.width"
:height="node.__vf.height"
:style="node.style"
:class="nodeClassNameFunc(node)"
:color="nodeColorFunc(node)"
@@ -105,10 +105,10 @@ const d = computed(() => {
:shape-rendering="shapeRendering"
>
<MiniMapNode
:x="node.__rf.position.x"
:y="node.__rf.position.y"
:width="node.__rf.width"
:height="node.__rf.height"
:x="node.__vf.position.x"
:y="node.__vf.position.y"
:width="node.__vf.width"
:height="node.__vf.height"
:style="node.style"
:class="nodeClassNameFunc(node)"
:color="nodeColorFunc(node)"
src/components/ConnectionLine/ConnectionLine.vue
+6 -6
View File
@@ -19,14 +19,14 @@ const store = useStore()
const sourceHandle =
store.connectionHandleId && store.connectionHandleType
? props.sourceNode.__rf?.handleBounds[store.connectionHandleType].find(
? props.sourceNode.__vf?.handleBounds[store.connectionHandleType].find(
(d: HandleElement) => d.id === store.connectionHandleId,
)
: store.connectionHandleType && props.sourceNode.__rf?.handleBounds[store.connectionHandleType ?? 'source'][0]
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (props.sourceNode.__rf?.width as number) / 2
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : props.sourceNode.__rf?.height
const sourceX = props.sourceNode.__rf?.position?.x + sourceHandleX
const sourceY = props.sourceNode.__rf?.position?.y + sourceHandleY
: store.connectionHandleType && props.sourceNode.__vf?.handleBounds[store.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
const sourceX = props.sourceNode.__vf?.position?.x + sourceHandleX
const sourceY = props.sourceNode.__vf?.position?.y + sourceHandleY
const isRightOrLeft = sourceHandle.position === Position.Left || sourceHandle.position === Position.Right
const targetPosition = isRightOrLeft ? Position.Left : Position.Top
src/components/Edges/Edge.vue
+3 -3
View File
@@ -102,12 +102,12 @@ const nodes = computed(() => {
// when connection type is loose we can define all handles as sources
const targetNodeHandles = computed(() =>
store.connectionMode === ConnectionMode.Strict
? nodes.value.targetNode?.__rf?.handleBounds.target
: nodes.value.targetNode?.__rf?.handleBounds.target ?? nodes.value.targetNode?.__rf?.handleBounds.source,
? nodes.value.targetNode?.__vf?.handleBounds.target
: nodes.value.targetNode?.__vf?.handleBounds.target ?? nodes.value.targetNode?.__vf?.handleBounds.source,
)
const sourceHandle = computed(() => {
if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__rf?.handleBounds.source, props.edge.sourceHandle ?? null)
if (nodes.value.sourceNode) return getHandle(nodes.value.sourceNode.__vf?.handleBounds.source, props.edge.sourceHandle ?? null)
else return null
})
const targetHandle = computed(() => getHandle(targetNodeHandles.value, props.edge.targetHandle ?? null))
src/components/Nodes/Node.vue
+12 -12
View File
@@ -41,13 +41,13 @@ const scale = computed(() => store.transform[2])
const selected = computed(() => selectable.value && store.selectedElements?.some(({ id }) => id === props.node.id))
const onMouseEnterHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseEnter.trigger({ event, node: props.node }))
const onMouseMoveHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseMove.trigger({ event, node: props.node }))
const onMouseLeaveHandler = () =>
props.node.__rf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
props.node.__vf?.isDragging && ((event: MouseEvent) => store.hooks.nodeMouseLeave.trigger({ event, node: props.node }))
const onContextMenuHandler = () => (event: MouseEvent) => store.hooks.nodeContextMenu.trigger({ event, node: props.node })
@@ -97,7 +97,7 @@ 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.__rf?.isDragging) {
if (!props.node.__vf?.isDragging) {
if (selectable.value && !props.selectNodesOnDrag && !selected.value) {
store.addSelectedElements([n])
}
@@ -165,9 +165,9 @@ onMounted(() => {
]"
:style="{
zIndex: selected ? 10 : 3,
transform: `translate(${props.node.__rf?.position?.x}px,${props.node.__rf?.position?.y}px)`,
transform: `translate(${props.node.__vf?.position?.x}px,${props.node.__vf?.position?.y}px)`,
pointerEvents: selectable || draggable ? 'all' : 'none',
opacity: props.node.__rf?.width !== null && props.node.__rf?.height !== null ? 1 : 0,
opacity: props.node.__vf?.width !== null && props.node.__vf?.height !== null ? 1 : 0,
...props.node.style,
}"
:data-id="props.node.id"
@@ -182,13 +182,13 @@ onMounted(() => {
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__rf?.position?.x,
yPos: props.node.__rf?.position?.y,
xPos: props.node.__vf?.position?.x,
yPos: props.node.__vf?.position?.y,
selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__rf?.isDragging,
dragging: props.node.__vf?.isDragging,
}"
>
<component
@@ -197,13 +197,13 @@ onMounted(() => {
id: props.node.id,
data: props.node.data,
type: props.node.type,
xPos: props.node.__rf?.position?.x,
yPos: props.node.__rf?.position?.y,
xPos: props.node.__vf?.position?.x,
yPos: props.node.__vf?.position?.y,
selected,
connectable,
sourcePosition: props.node.sourcePosition,
targetPosition: props.node.targetPosition,
dragging: props.node.__rf?.isDragging,
dragging: props.node.__vf?.isDragging,
}"
/>
</slot>
src/components/NodesSelection/NodesSelection.vue
+1 -1
View File
@@ -12,7 +12,7 @@ const selectedNodes = store.selectedElements
return {
...matchingNode,
position: matchingNode?.__rf?.position,
position: matchingNode?.__vf?.position,
} as Node
})
: []
src/container/EdgeRenderer/utils.ts
+4 -4
View File
@@ -2,10 +2,10 @@ import { Edge, EdgePositions, ElementId, HandleElement, Node, Position, Transfor
import { rectToBox } from '~/utils'
export function getHandlePosition(position: Position, node: Node, handle: any | null = null): XYPosition {
const x = (handle?.x || 0) + node.__rf?.position?.x
const y = (handle?.y || 0) + node.__rf?.position?.y
const width = handle?.width || node.__rf?.width
const height = handle?.height || node.__rf?.height
const x = (handle?.x || 0) + node.__vf?.position?.x
const y = (handle?.y || 0) + node.__vf?.position?.y
const width = handle?.width || node.__vf?.width
const height = handle?.height || node.__vf?.height
switch (position) {
case Position.Top:
src/store/stateStore.ts
+15 -15
View File
@@ -91,19 +91,19 @@ export default function flowStore(
const node = this.nodes[i]
const dimensions = getDimensions(nodeElement)
if (!node.__rf) node.__rf = {}
if (!node.__vf) node.__vf = {}
const doUpdate =
dimensions.width &&
dimensions.height &&
(node.__rf.width !== dimensions.width || node.__rf.height !== dimensions.height || forceUpdate)
(node.__vf.width !== dimensions.width || node.__vf.height !== dimensions.height || forceUpdate)
if (doUpdate) {
const handleBounds = getHandleBounds(nodeElement, this.transform[2])
this.nodes.splice(i, 1, {
...node,
__rf: {
...node.__rf,
__vf: {
...node.__vf,
...dimensions,
handleBounds,
},
@@ -124,8 +124,8 @@ export default function flowStore(
this.nodes.splice(i, 1, {
...node,
__rf: {
...node.__rf,
__vf: {
...node.__vf,
position: pos,
},
})
@@ -134,16 +134,16 @@ export default function flowStore(
const update = (node: Node, i: number) => {
const updatedNode = {
...node,
__rf: {
...node.__rf,
__vf: {
...node.__vf,
isDragging,
},
}
if (diff) {
updatedNode.__rf.position = {
x: (node.__rf?.position?.x as number) + diff.x,
y: (node.__rf?.position?.y as number) + diff.y,
updatedNode.__vf.position = {
x: (node.__vf?.position?.x as number) + diff.x,
y: (node.__vf?.position?.y as number) + diff.y,
}
}
@@ -197,7 +197,7 @@ export default function flowStore(
this.selectedElements = nextSelectedElements
},
unsetUserSelection() {
const selectedNodes = this.selectedElements?.filter((node) => node && isNode(node) && node.__rf) as Node[]
const selectedNodes = this.selectedElements?.filter((node) => node && isNode(node) && node.__vf) as Node[]
this.selectionActive = false
this.userSelectionRect.draw = false
@@ -237,9 +237,9 @@ export default function flowStore(
this.nodes = this.nodes.map((node) => {
return {
...node,
__rf: {
...node.__rf,
position: node.__rf?.position && clampPosition(node.__rf.position, nodeExtent),
__vf: {
...node.__vf,
position: node.__vf?.position && clampPosition(node.__vf.position, nodeExtent),
},
}
})
src/store/utils.ts
+3 -3
View File
@@ -109,16 +109,16 @@ export const parseElements = async (elements: Elements, nodes: Node[], edges: Ed
...storeNode,
...element,
}
if (!updatedNode.__rf) updatedNode.__rf = {}
if (!updatedNode.__vf) updatedNode.__vf = {}
if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
updatedNode.__rf.position = element.position
updatedNode.__vf.position = element.position
}
if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
// we reset the elements dimensions here in order to force a re-calculation of the bounds.
// When the type of a node changes it is possible that the number or positions of handles changes too.
updatedNode.__rf.width = undefined
updatedNode.__vf.width = undefined
}
nextElements.nextNodes.push(updatedNode)
src/types/node.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export interface Node<T = any> {
id: ElementId
position: XYPosition
type?: string
__rf?:
__vf?:
| {
position?: XYPosition
isDragging?: boolean
src/utils/graph.ts
+4 -4
View File
@@ -170,7 +170,7 @@ export const parseNode = (node: Node, nodeExtent: NodeExtent): Node => ({
...node,
id: node.id.toString(),
type: node.type || 'default',
__rf: {
__vf: {
position: clampPosition(node.position, nodeExtent),
width: undefined,
height: undefined,
@@ -215,7 +215,7 @@ export const getBoundsofRects = (rect1: Rect, rect2: Rect): Rect =>
export const getRectOfNodes = (nodes: Node[]): Rect => {
const box = nodes.reduce(
(currBox, { __rf: { position, width, height } = {} }) =>
(currBox, { __vf: { position, width, height } = {} }) =>
getBoundsOfBoxes(
currBox,
rectToBox({
@@ -244,8 +244,8 @@ export const getNodesInside = (nodes: Node[], rect: Rect, [tx, ty, tScale]: Tran
})
return nodes.filter((node) => {
if (!node.__rf) return false
const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__rf
if (!node.__vf) return false
const { position = { x: 0, y: 0 }, width = 0, height = 0, isDragging = false } = node.__vf
const nBox = rectToBox({ ...position, width, height } as any)
const xOverlap = Math.max(0, Math.min(rBox.x2, nBox.x2) - Math.max(rBox.x, nBox.x))
const yOverlap = Math.max(0, Math.min(rBox.y2, nBox.y2) - Math.max(rBox.y, nBox.y))
src/workers/parseElements.ts
+4 -4
View File
@@ -13,7 +13,7 @@ export default () =>
Object.assign(node, {
id: node.id.toString(),
type: node.type || 'default',
__rf: {
__vf: {
position: clampPosition(node.position, nodeExtent),
width: undefined,
height: undefined,
@@ -49,16 +49,16 @@ export default () =>
if (storeNode) {
const updatedNode: Node = Object.assign(storeNode, element)
if (!updatedNode.__rf) updatedNode.__rf = {}
if (!updatedNode.__vf) updatedNode.__vf = {}
if (storeNode.position.x !== element.position.x || storeNode.position.y !== element.position.y) {
updatedNode.__rf.position = element.position
updatedNode.__vf.position = element.position
}
if (typeof element.type !== 'undefined' && element.type !== storeNode.type) {
// we reset the elements dimensions here in order to force a re-calculation of the bounds.
// When the type of a node changes it is possible that the number or positions of handles changes too.
updatedNode.__rf.width = undefined
updatedNode.__vf.width = undefined
}
nextElements.nextNodes.push(updatedNode)