feat(nodes): allow node internals to be updated by event

# What's changed?

* add listener for `update-node-internals` on node component
* update internals when event is emitted
This commit is contained in:
bcakmakoglu
2022-06-25 23:11:06 +02:00
committed by Braks
parent f8be3cb843
commit 2a8f4a16f5
4 changed files with 18 additions and 13 deletions

View File

@@ -71,18 +71,22 @@ const updatePosition = (nodePos: XYZPosition, parentPos?: XYZPosition) => {
}
}
const updateInternals = () => {
updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
updatePosition(
{
x: node.position.x,
y: node.position.y,
z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
},
parentNode ? { ...parentNode.computedPosition } : undefined,
)
}
onUpdateNodeInternals((updateIds) => {
if (updateIds.includes(id)) {
updateNodeDimensions([{ id, nodeElement: nodeElement.value, forceUpdate: true }])
updatePosition(
{
x: node.position.x,
y: node.position.y,
z: node.computedPosition.z ? node.computedPosition.z : node.selected ? 1000 : 0,
},
parentNode ? { ...parentNode.computedPosition } : undefined,
)
updateInternals()
}
})
@@ -234,6 +238,7 @@ export default {
:source-position="node.sourcePosition"
:label="node.label"
:drag-handle="node.dragHandle"
@update-node-internals="updateInternals"
/>
</div>
</template>

View File

@@ -4,7 +4,7 @@
declare module '*.vue' {
import type { DefineComponent } from 'vue'
// eslint-disable-next-line @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>
export default component
}

View File

@@ -44,6 +44,7 @@ export interface FlowEvents {
nodeDragStart: NodeDragEvent
nodeDrag: NodeDragEvent
nodeDragStop: NodeDragEvent
updateNodeInternals: string[]
miniMapNodeClick: NodeMouseEvent
miniMapNodeDoubleClick: NodeMouseEvent
miniMapNodeMouseEnter: NodeMouseEvent
@@ -75,7 +76,6 @@ export interface FlowEvents {
edgeUpdateStart: EdgeMouseEvent
edgeUpdate: EdgeUpdateEvent
edgeUpdateEnd: EdgeMouseEvent
updateNodeInternals: string[]
}
export type FlowHooks = Readonly<{

View File

@@ -1,6 +1,6 @@
import type { Ref } from 'vue'
import { getDimensions } from './graph'
import type { Actions, GraphNode, HandleElement, Position } from '~/types'
import { Ref } from "vue";
export const getHandleBoundsByHandleType = (
selector: string,