How can a user resize a node (if is tagged as 'resizable')?

[ulissepress]

The use case flow:

1. The user select a node
2. The user can resize the node using the mouse (using for example the bottom right corner,
   that will display some kind of handle)

How this can be implemented ?

[bcakmakoglu]

To implement a "resizable" node you would have to create a custom node that can support the resizing on a corner click.
Or you could check the onClick event for nodes and calculate where the click happened etc. but that seems more complicated than adding a custom node 😅

But generally you can change a node's size by applying styles to it, so an example implementation could look like this.

<script setup>
import { VueFlow } from '@braks/vue-flow'
import CustomNode from './CustomNode.vue'

const elements = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  {
    id: '2',
	type: 'custom',
    label: 'Node 2',
    position: { x: 100, y: 100 },
    style: { backgroundColor: 'rgba(255, 0, 255, 0.7)', height: '150px', width: '270px' },
  },
])

const onResize = (size) => {
	const node = elements.value.find((el) => el.id === '2')
	if (node) node.style = { ...node.style, ...size }
}
</script>
<template>
	<VueFlow v-model="elements">
		<template #node-custom="props">
			<CustomNode v-bind="props" @resize="onResize" />
		</template>
	</VueFlow>
</template>

<script setup>
// CustomNode

const emit = defineEmits(['resize'])
const onResize = () => {
	emit('resize', size)
}
</script>
<template>
	<div>...</div>
</template>

In 0.4.0 you could actually manipulate the dimensions of a node directly instead of applying styles but the above example would work in 0.3.x or 0.4.0-x.

[ghiscoding]

Thanks, the findNode is cleaner than using straight up query selector, but I'm not exactly sure what you mean about the dragHandle, now the updated code I have is this

document.body.onclick = () => changeNodeSelection(false);

function cardClicked(e: Event) {
    e.stopImmediatePropagation();
    changeNodeSelection(true);
}

function changeNodeSelection(selected: boolean) {
    const node = findNode(props.id);
    if (node) {
        node.selected = selected;
    }
}

[bcakmakoglu]

You can specify a drag handle for your nodes, which will enable the drag handler when the mouse is over that element.

const nodes = [
	{
		id: '1',
		label: 'Node 1',
		position: { x: 0, y: 0 },
		type: 'custom',
		dragHandle: '.node-drag-handle'
	}
]

<template>
	<div>
		<Handle .. />
		<div class="node-drag-handle">
			Drag me
		</div>
		<Handle ... />
	</div>
</template>

[ghiscoding]

hmm ok but unless I get the naming confused again, isn't a Handle just where we connect the lines, how is that going to help with Custom Node dragging?

[ghiscoding]

I see what you mean now, however the custom handle wasn't necessary. I just added a div on top of the node with that text and styled it a bit. I also use the div wrapper with ".resize-node" css class but made it's border and background color as transparent, so user can drag the node from anywhere around the node (the padding area between the node and its wrapper).

<div class="drag-handle">Drag me <q-icon name="drag_indicator" /></div>

.drag-handle {
    background-color: lightgray;
    border-radius: 4px 4px 0 0;
    width: fit-content;
    padding: 0 5px;
    position: absolute;
    right: 12px;
    top: -12px;
}

it's not too bad but still wish to find a better alternative that would allow me to drag the node from anywhere and still keep the resize. I'll probably stick with that for now until someone else comes with a better solution. Thanks

[bcakmakoglu]

The naming could be confusing but a drag handle and the Handle component are two different things.
A drag handle is just used for dragging - by default the whole node is basically the drag handle. But it can be any element in your node.
It's completely unrelated to Handle which is related to connecting nodes, not dragging ^^

Currently I am working on something else but I should have some free time soon and I'll go look into doing some improvements to the Resize-Rotate-Node. Just can't promise when it'll be done and to what extend I can improve it 😅