search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.6k stars 1.17k forks source link

Can links become visible above node? #749

Closed agarwalishan closed 3 years ago

agarwalishan commented 3 years ago

Hey, When we make links then they appear by default below node. Is there any way by which we can show them above nodes like in pic below? image

renato-bohler commented 3 years ago

You can add z-index: 1 to the svg element inside react-diagrams.

agarwalishan commented 3 years ago

@renato-bohler Thank you very much it's working perfectly. But could you please explain how it worked, I don't understand the reason?

renato-bohler commented 3 years ago

Sure. So this is how react-diagrams looks in the DOM:

image

Where:

  1. Is the react-diagrams container
  2. Is the link layer. Every link is rendered inside this svg.
  3. Is the node layer. Every node is rendered inside this div.

Both the link and node layer have position: absolute but no z-index. Because div comes after svg, the nodes are rendered above the links as default. When you set z-index to 1, you are telling the browser that all links should be rendered above the nodes.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

agarwalishan commented 3 years ago

@renato-bohler Thank you very much for explaining, I got it. Could you please tell me if there is any event that fires when we click on canvas?

renato-bohler commented 3 years ago

Hmmm I think there isn't. Not sure why you need that, but you could maybe addEventListener('click') on the canvas. If you need more information of where the click happened or anything like that, you'll probably need to implement a custom state which fires this event.

agarwalishan commented 3 years ago

@renato-bohler Ok, Is there a way to deregister default registered state? Actually I want Undo/Redo on moving items and I saw your code of logossim for implementing where you have made a custom MoveItemsState. I also want to implement like this but the problem is I have not made a Custom Diagram Engine like yours rather I am using default engine that react-diagrams provides and which comes with some states already registered in it as mentioned here.

https://github.com/projectstorm/react-diagrams/tree/3e69dafef9a0b4bc9aa0d1be5c93ef542ad32aa7/packages/react-canvas-core/src/states

So how can I de-register existing MoveItemsState and register my new custom inplace of it?

renato-bohler commented 3 years ago

You just need to call engine.getStateMachine().pushState() with your custom State class. Here's how I did it.

agarwalishan commented 3 years ago

@renato-bohler Ok thanks, your logossim project helped me a lot

sinanyaman95 commented 3 years ago

You can add z-index: 1 to the svg element inside react-diagrams.

It seems like I can't link two ports now, as they are behind the link element. Any workaround for that?

agarwalishan commented 3 years ago

You can add z-index: 1 to the svg element inside react-diagrams.

It seems like I can't link two ports now, as they are behind the link element. Any workaround for that?

Sorry but I am not using drag and drop feature for making link. I am connecting links programmatically. Aren't you even able to create atleast one link?

vivekshah-zymr commented 2 years ago

You can add z-index: 1 to the svg element inside react-diagrams.

It seems like I can't link two ports now, as they are behind the link element. Any workaround for that?

Hi @sinanyaman95 , did you find any workaround for this? I am getting the exact same issue. @renato-bohler Please help

renato-bohler commented 2 years ago

Uhh crap... well, you could add z-index: 2 specifically on the ports, but that would make the browser render them on top of links.

I guess a hacky solution you could try is separating the port element into two: one visual and one invisible, making the invisible have the same size and position as the visible, but with z-index: 2... not sure if that would introduce any other issues.

If that's not desirable, I think the only alternative is changing how react-diagrams handles click with a custom state, trying to figure out what element the user is trying to click in (instead of using getModelForEvent). That can be complex, tough...

vivekshah-zymr commented 2 years ago

@renato-bohler After setting svg z-index to 1, I have already tried to add z-index of higher number to the port, but it's not working, as the main(parent) div for that port is having z-index 0 by default. So we are not able to pull the link from that port. And if set main/parent port z-index higher than the arrows get hide due to same or lesser z-index of svg tag.

With Z-index value 0 for svg zindex0

With Z-index value 1 for svg zindex1 So any better solution you are suggesting?

vivekshah-zymr commented 2 years ago

Also @renato-bohler, We are working on Nodes which can have multiple ports, so we have added scroll view inside our custom nodes. But when we have links between two ports of two different nodes or two ports of the same node. So while scrolling the ports inside node, links remains on the same position even if that port gets scrolled up.(See the attachment.)

scroll-issue

Is there anything that you can suggest here to achieve this?

renato-bohler commented 2 years ago

@renato-bohler After setting svg z-index to 1, I have already tried to add z-index of higher number to the port, but it's not working, as the main(parent) div for that port is having z-index 0 by default. So we are not able to pull the link from that port. And if set main/parent port z-index higher than the arrows get hide due to same or lesser z-index of svg tag.

Hmm yeah, that really shouldn't work because of how stacking context works :confused:

Other thing you could try is removing all layers using CanvasModel getLayers and removeLayer, and then adding them in reverse order using addLayer, similarly to DiagramModel:

https://github.com/projectstorm/react-diagrams/blob/3d0521cc934b1430d6c8f3b109d9ec6d0b19f3e2/packages/react-diagrams-core/src/models/DiagramModel.ts#L32-L33

Again, I'm not sure if that would work, since I never needed to do this. It would most likely just end up having the same problem.

Also @renato-bohler, We are working on Nodes which can have multiple ports, so we have added scroll view inside our custom nodes. But when we have links between two ports of two different nodes or two ports of the same node. So while scrolling the ports inside node, links remains on the same position even if that port gets scrolled up.(See the attachment.)

This one I have no clue on how to implement, honestly... it looks very complex, I never succeeded handling port position changing when I tried to make a generic node rotation feature for my project.