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

fix(nodes,drag): update xyz on select

Browse Source
This commit is contained in:
Braks
2022-05-27 23:36:01 +02:00
parent cec8f4d77e
commit b63d3da0c0
4 changed files with 43 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vue-flow/src/components/Nodes/NodeWrapper.vue
+1
View File
@@ -78,6 +78,7 @@ onMounted(() => {
() => parentNode?.computedPosition.x,
() => parentNode?.computedPosition.y,
() => parentNode?.computedPosition.z,
() => node.selected,
],
([newX, newY, parentX, parentY, parentZ]) => {
const xyzPos = {
packages/vue-flow/src/composables/useDrag.ts
-2
View File
@@ -100,8 +100,6 @@ function useDrag(params: UseDragParams) {
.on('drag', (event: UseDragEvent) => {
const mousePos = getMousePosition(event)
console.log(node?.label)
// skip events without movement
if ((lastPos.x !== mousePos.x || lastPos.y !== mousePos.y) && dragItems) {
lastPos = mousePos
packages/vue-flow/src/types/changes.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import type { Dimensions, ElementData, XYPosition } from './flow'
import type { GraphNode, NodeHandleBounds } from './node'
import type { GraphNode, Node, NodeHandleBounds } from './node'
import type { GraphEdge } from './edge'
export interface NodeDragItem {
packages/vue-flow/src/utils/changes.ts
+41 -51
View File
@@ -7,7 +7,6 @@ import type {
ElementChange,
FlowElement,
FlowElements,
Getters,
GraphEdge,
GraphNode,
Node,
@@ -16,8 +15,7 @@ import type {
NodeSelectionChange,
} from '~/types'
function handleParentExpand(updateItem: GraphNode, curr: GraphNode[]) {
const parent = updateItem.parentNode ? curr.find((el) => el.id === updateItem.parentNode) : undefined
function handleParentExpand(updateItem: GraphNode, parent: GraphNode) {
if (parent) {
const extendWidth = updateItem.position.x + updateItem.dimensions.width - parent.dimensions.width
const extendHeight = updateItem.position.y + updateItem.dimensions.height - parent.dimensions.height
@@ -92,50 +90,48 @@ export const applyChanges = <
): T[] => {
let elementIds = elements.map((el) => el.id)
changes.forEach((change) => {
nextTick(() => {
if (change.type === 'add') {
const item = <T>change.item
return elements.push(item)
}
if (change.type === 'add') {
const item = <T>change.item
return elements.push(item)
}
const i = elementIds.indexOf((<any>change).id)
const el = elements[i]
switch (change.type) {
case 'select':
if (isGraphNode(el) || isGraphEdge(el)) el.selected = change.selected
break
case 'position':
if (isGraphNode(el)) {
if (typeof change.position !== 'undefined') el.position = change.position
if (el.expandParent && el.parentNode) {
const parent = elements.find((parent) => parent.id === el.parentNode)
const i = elementIds.indexOf((<any>change).id)
const el = elements[i]
switch (change.type) {
case 'select':
if (isGraphNode(el) || isGraphEdge(el)) el.selected = change.selected
break
case 'position':
if (isGraphNode(el)) {
if (typeof change.position !== 'undefined') el.position = change.position
if (el.expandParent && el.parentNode) {
const parent = elements.find((parent) => parent.id === el.parentNode)
if (parent && isGraphNode(parent)) {
handleParentExpand(el, parent)
}
if (parent && isGraphNode(parent)) {
handleParentExpand(el, parent)
}
}
break
case 'dimensions':
if (isGraphNode(el)) {
if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
if (el.expandParent && el.parentNode) {
const parent = elements.find((parent) => parent.id === el.parentNode)
}
break
case 'dimensions':
if (isGraphNode(el)) {
if (typeof change.dimensions !== 'undefined') el.dimensions = change.dimensions
if (el.expandParent && el.parentNode) {
const parent = elements.find((parent) => parent.id === el.parentNode)
if (parent && isGraphNode(parent)) {
handleParentExpand(el, parent)
}
if (parent && isGraphNode(parent)) {
handleParentExpand(el, parent)
}
}
break
case 'remove':
if (elementIds.includes(change.id)) {
elements.splice(i, 1)
elementIds = elements.map((el) => el.id)
}
break
}
})
}
break
case 'remove':
if (elementIds.includes(change.id)) {
elements.splice(i, 1)
elementIds = elements.map((el) => el.id)
}
break
}
})
return elements
@@ -153,7 +149,7 @@ export const createSelectionChange = (id: string, selected: boolean): NodeSelect
export const createAdditionChange = <
T extends GraphNode | GraphEdge = GraphNode,
C extends NodeAddChange | EdgeAddChange = T extends GraphNode ? NodeAddChange : EdgeAddChange,
>(
>(
item: T,
): C =>
<C>{
@@ -161,21 +157,15 @@ export const createAdditionChange = <
type: 'add',
}
const isParentSelected = (node: GraphNode, selectedIds: string[], getNode: Getters['getNode']): boolean => {
const parent = node.parentNode ? getNode(node.parentNode) : undefined
if (!node.parentNode || !parent) return false
if (selectedIds.includes(node.parentNode)) return true
return isParentSelected(parent, selectedIds, getNode)
}
export const getSelectionChanges = (items: FlowElements, selectedIds: string[], getNode: Getters['getNode']) => {
export const getSelectionChanges = (items: FlowElements, selectedIds: string[]) => {
return items.reduce((res, item) => {
const willBeSelected =
selectedIds.includes(item.id) || !!(isGraphNode(item) && item.parentNode && isParentSelected(item, selectedIds, getNode))
const willBeSelected = selectedIds.includes(item.id)
if (!item.selected && willBeSelected) {
item.selected = true
res.push(createSelectionChange(item.id, true))
} else if (item.selected && !willBeSelected) {
item.selected = false
res.push(createSelectionChange(item.id, false))
}