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

refactor(nodes)!: change xPos yPos props to position

Browse Source 
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 106342cacf
commit 4ef58e9e99
2 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Nodes/NodeWrapper.vue
+19 -23
View File
@@ -32,7 +32,11 @@ const onMouseMoveHandler = () =>
props.node.__vf.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 = () => const onMouseLeaveHandler = () =>
props.node.__vf.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 }) const onContextMenuHandler = () => (event: MouseEvent) =>
store.hooks.nodeContextMenu.trigger({
event,
node: props.node,
})
const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: props.node }) const onDoubleClick = () => (event: MouseEvent) => store.hooks.nodeDoubleClick.trigger({ event, node: props.node })
const onSelectNodeHandler = (event: MouseEvent) => { const onSelectNodeHandler = (event: MouseEvent) => {
if (!props.draggable) { if (!props.draggable) {
@@ -92,7 +96,7 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
(props.node.__vf.width !== dimensions.width || props.node.__vf.height !== dimensions.height || forceUpdate) (props.node.__vf.width !== dimensions.width || props.node.__vf.height !== dimensions.height || forceUpdate)
if (doUpdate) { if (doUpdate) {
const handleBounds = getHandleBounds(nodeElement, store.transform[2]) const handleBounds = getHandleBounds(nodeElement, store.transform[2], store.id)
node.value.__vf = { node.value.__vf = {
...node.value.__vf, ...node.value.__vf,
@@ -103,17 +107,13 @@ const updateNodeDimensions = ({ nodeElement, forceUpdate }: NodeDimensionUpdate)
} }
tryOnMounted(() => { tryOnMounted(() => {
watch( watch([() => props.node.__vf.width, () => props.node.__vf.height], () => {
[() => props.node.__vf.width, () => props.node.__vf.height], updateNodeDimensions({
() => { id: props.node.id,
updateNodeDimensions({ nodeElement: nodeElement.value,
id: props.node.id, forceUpdate: true,
nodeElement: nodeElement.value, })
forceUpdate: true, })
})
},
{ immediate: true },
)
useResizeObserver(nodeElement, (entries) => useResizeObserver(nodeElement, (entries) =>
entries.forEach((entry) => { entries.forEach((entry) => {
updateNodeDimensions({ updateNodeDimensions({
@@ -124,12 +124,10 @@ tryOnMounted(() => {
) )
watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => { watch([() => props.node.type, () => props.node.sourcePosition, () => props.node.targetPosition], () => {
nextTick(() => { updateNodeDimensions({
updateNodeDimensions({ id: props.node.id,
id: props.node.id, nodeElement: nodeElement.value,
nodeElement: nodeElement.value, forceUpdate: true,
forceUpdate: true,
})
}) })
}) })
}) })
@@ -183,8 +181,7 @@ export default {
id: props.node.id, id: props.node.id,
data: props.node.data, data: props.node.data,
type: props.node.type, type: props.node.type,
xPos: props.node.position.x, position: node.position,
yPos: props.node.position.y,
__vf: props.node.__vf, __vf: props.node.__vf,
selected, selected,
connectable: props.connectable, connectable: props.connectable,
@@ -201,8 +198,7 @@ export default {
id: props.node.id, id: props.node.id,
data: props.node.data, data: props.node.data,
type: props.node.type, type: props.node.type,
xPos: props.node.position.x, position: node.position,
yPos: props.node.position.y,
__vf: props.node.__vf, __vf: props.node.__vf,
selected, selected,
connectable: props.connectable, connectable: props.connectable,
src/types/node.ts
+1 -2
View File
@@ -40,12 +40,11 @@ export interface GraphNode<T = any> extends Node<T> {
export interface NodeProps<T = any> extends GraphNode { export interface NodeProps<T = any> extends GraphNode {
id: ElementId id: ElementId
position: XYPosition
type?: string type?: string
data?: T data?: T
selected?: boolean selected?: boolean
connectable?: boolean connectable?: boolean
xPos?: number
yPos?: number
targetPosition?: Position targetPosition?: Position
sourcePosition?: Position sourcePosition?: Position
dragging?: boolean dragging?: boolean