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:
@@ -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>
|
||||
|
||||
2
packages/vue-flow/src/env.d.ts
vendored
2
packages/vue-flow/src/env.d.ts
vendored
@@ -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
|
||||
}
|
||||
|
||||
@@ -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<{
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user