Description
Is there an existing issue for this?
- I have searched the existing issues and this is a new bug.
Current Behavior
Handles are only centered on the edges of the nodes if the handles size are not changed
Expected Behavior
Handles are centered on the edges of the nodes regardless of the size of the handle
Steps To Reproduce
set up VueFlow with the additional style
.vue-flow__handle {
height: 10px;
width: 10px;
}
Observe that handles are no longer centered on the edges of the nodes.
Relevant log output
No response
Anything else?
the handle styles are all hard-coded to adjust handles by -4px in the opposite direction, instead of using translate
. For example, code like this works (to my knowledge) for all sizes of handle:
.vue-flow__handle {
/* set some width and height... */
&-bottom {
bottom: 0;
transform: translate(-50%, 50%);
}
&-top {
top: 0;
transform: translate(-50%, -50%);
}
&-left {
left: 0;
transform: translate(-50%, -50%);
}
&-right {
right: 0;
transform: translate(50%, -50%);
}
}
I would have just opened this PR myself but I'm not familiar enough with the various styles and configuration options to be sure that this doesn't break something I haven't discovered.