Skip to content

🐛 [BUG]: default handle styles don't correctly adjust handle positions to center on borders if handle size is changed #690

Closed
@snoozbuster

Description

@snoozbuster

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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingrefactorRefactor existing features

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions