Skip to content

🐛 [BUG]: Parent node extent not enforced when used with Node Resizer #1539

@yczkhx-ths

Description

@yczkhx-ths

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

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions