bcakmakoglu / vue-flow

A highly customizable Flowchart component for Vue 3. Features seamless zoom & pan 🔎, additional components like a Minimap 🗺 and utilities to interact with state and graph.
https://vueflow.dev/
MIT License
4.02k stars 258 forks source link

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

Open yczkhx-ths opened 3 months ago

yczkhx-ths commented 3 months ago

Is there an existing issue for this?

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

bcakmakoglu commented 3 months ago

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

yczkhx-ths commented 3 months ago

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