butterfly Edges and Endpoints don't show up properly at the right position.

zte4gxcn  于 5个月前  发布在  Perl
关注(0)|答案(3)|浏览(124)

I am facing this very strange problem where I had perfectly working code a week ago and I didn't make any updates to the code related to the rendering of the nodes groups and edges but now I see that it is totally broken and only readjusts to normal when vue hotreload triggers a rebuild.

Is there a way for me to retrigger a rebuild like how hot reload does in order to fix this ?

Your environment(such as: Butterfly version、Browser version、OS and so on)

<img width="627" alt="Screenshot 2022-01-17 at 11 28 36 AM" src=" https://user-images.githubusercontent.com/2786378/1

49708165-9bce029f-8f22-4f17-b1d7-b2c398e1ac6d.png">

What are possible reasons usually for this to happen. I don't see any errors in the logs as well

Right now I am on
"butterfly-dag": "^4.1.22",
"butterfly-vue": "^1.0.10",

Steps To Reproduce, Maybe you can provide a simple demo.

This is my canvas Config

canvasConfig: {
      linkable: false,
      draggable: true,
      zoomable: true,
      moveable: true,
      preventOverlap: true,
      condense: false,
      theme: {
        group: {
          type: 'normal', // Node group type: normal (drag in and drag out), inner (can only be dragged in and not out)
          dragGroupZIndex: 50, // Node group z-index: (optional, Default:50)
        },
        autoFixCanvas: { // auto expand canvas when drag nodes or edges near the edge of canvas.
          enable: true,
          autoMovePadding: [20, 20, 20, 20],
        },
        node: {
          dragNodeZIndex: 250, // node z-index/2 (optional, Default:250)
        },
        edge: {
        //  dragEdgeZindex: 499,
        },
        endpoint: {
          position: [], // limit endpoint position ['Top', 'Bottom', 'Left', 'Right'],
          linkableHighlight: true, // point.linkable method is triggered when connecting, can be highlighted
          limitNum: 4, // limit the number of anchor connections
          expandArea: { // when the anchor point is too small, the connection hot zone can be expanded.
            left: 10,
            right: 10,
            top: 10,
            bottom: 10,
          },
        },
      },
    },
    ```
tp5buhyn

tp5buhyn1#

You can try whether the upgrade of Vue version causes this problem.

There may be a problem with the version I recently provided.
Thank you for your feedback after the test

uubf1zoe

uubf1zoe2#

The issue with the css. Changing the css for the butterfly-svg class fixed the issue for me.

.butterfly-svg {
    position: absolute !important;
}
xeufq47z

xeufq47z3#

Thank you for helping find the bug.
This should be a bug. I have also found this problem in other cases.
When I determine the error, I will release a new version to fix it.

相关问题