Selectively choose which dimensions to enable resizing

[shaunabanana]

It would be very useful if the NodeResizer allows resizing only horizontally or vertically, while allowing the other axis to grow based on content.

I understand that #1234 already mentioned this, but seeing that it was posted in the Q&A section and has gone unanswered so far, I hope it is okay to post this idea here as a feature request with some additional thoughts.

One case where this would be helpful is if the node contains text that needs to be shown in full. In this case, resizing on the x-axis would wrap the text, thus changing its height. The current behaviour of core VueFlow when not using NodeResizer is already the desired behaviour, with connection handles correctly moving in response as well.

Another related feature would be selectively showing/hiding the control lines/handles. This would be useful when only one axis is resizeable.

[bcakmakoglu]

You can build your own custom resizer using NodeResizeControl which is exported by the resizer pkg.
Something like this:

<script setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeResizeControl, ResizeControlVariant } from '@vue-flow/node-resizer';

defineProps(['id', 'label'])
</script>
 
<template>
  <NodeResizeControl :node-id="id" :variant="ResizeControlVariant.Line" position="left" />
  <NodeResizeControl :node-id="id" :variant="ResizeControlVariant.Line" position="right" />

  <Handle type="target" :position="Position.Left" />
  <div style="padding: 10px">{{ label }}</div>
  <Handle type="source" :position="Position.Right" />
</template>

[shaunabanana]

Thank you so much for your quick response! Sorry, I did not realize that this was available as it wasn't mentioned in the docs.

However, when I tested this approach, NodeResizer still takes control of the height and does not respond to changes, as shown below:

Compared to the default behaviour, where if I created new lines in the node content, the handles correctly snapping to the bottom edge:

Here is what I used to produce the screenshots above:

<script setup lang="ts">
import { Handle, Position } from '@vue-flow/core'
import { NodeResizeControl, ResizeControlVariant } from '@vue-flow/node-resizer';
import '@vue-flow/node-resizer/dist/style.css'

defineProps(['id', 'label'])
</script>
 
<template>
    <div>
        <NodeResizeControl :node-id="id" :variant="ResizeControlVariant.Line" position="left" />
        <NodeResizeControl :node-id="id" :variant="ResizeControlVariant.Line" position="right" />

        <Handle type="target" :position="Position.Top" />
        <div style="padding: 10px" contenteditable>{{ label }}</div>
        <Handle type="source" :position="Position.Bottom" />
    </div>
</template>

And App.vue, if relevant:

<script setup lang="ts">
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import CustomNode from './CustomNode.vue'

// some nodes and edges
const elements = ref([
  {
    id: 'test',
    type: 'custom',
    label: 'This is some long test to test if resizer allows height to grow.',
    position: { x: 400, y: 200 }
  }
])
</script>

<template>
  <VueFlow v-model="elements" fit-view-on-init>
    <template #node-custom="nodeProps">
      <CustomNode :id="nodeProps.id" :data="nodeProps.data" :label="nodeProps.label" />
    </template>
  </VueFlow>
</template>