bcakmakoglu/vue-flow

๐Ÿ› [BUG]: Parent node extent not enforced when used with Node Resizer

Opened this issue ยท 2 comments

Is there an existing issue for this?

  • I have searched the existing issues and this is a new bug.

Current Behavior

one parent node contanis a child node(extent: 'parent'). when shrink the parent, it can not contains the child, and when drag the child, it flicker into the parent; it seems like a bug; below are the example:
image
and drag the child, it becomes into this in one second
image

Expected Behavior

it seems resize should consider child nodes inside, the min-width and min-height should contains all children;

Steps To Reproduce

code with 'https://vueflow.dev/examples/nodes/node-resizer.html'

<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import ResizableNode from './ResizableNode.vue'

const nodes = ref([
  {
    id: '1',
    type: 'resizable',
    data: { label: 'NodeResizer' },
    position: { x: 0, y: 0 },
    style: { background: '#fff', border: '2px solid black' },
  },
  {
    id: '2',
    type: 'input',
    data: { label: 'NodeResizer' },
    position: { x: 0, y: 0 },
    style: { background: '#fff', border: '2px solid black' },
    parentNode: '1',
    extent: 'parent'
    
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" fit-view-on-init>
    <template #node-resizable="resizableNodeProps">
      <ResizableNode :data="resizableNodeProps.data" />
    </template>
  </VueFlow>
</template>

Relevant log output

No response

Anything else?

No response

Thanks for the report, I'll check this and address the issue in the next patch :)

and there is a temporary solution:
use getRectOfNodes to get Rect of all children,and pass it to props<min-wdith,min-height> in NodeResizer