Set element to top of all layers in canvas

Question

I'm using KonvaJS to create a canvas which can connect 'nodes' by using 'connections'. I created 2 Layers, one NodeLayer and one ConnectionLayer. I always want to render the NodeLayer on top of the ConnectionLayer. So they're rendered as followed:

<Stage>
    <ConnectionLayer />
    <NodeLayer />
</Stage>

This makes sure that the Nodes are always rendered on top of the connections. I'm trying to add a tooltip on my connections, but because the NodeLayer is on top of the connectionLayer the tooltip wont show when it's positioned behind a node.

Is there a way to render the tooltip on top of nodes from within the connectionLayer while not changing the order of the layers?

Maybe use HTML to show the tooltip, have a notification layer, or tell the node layer to render the tooltip? — rypskar, Aug 19 '19 at 11:42

score 1 · Accepted Answer · answered Aug 19 '19 at 16:11

As mentioned in the comment, you can try to use HTML for the tooltip and position it on top of the canvas with absolute position.
Or you can create a special component for displaying the tooltip and place it on top of all components:

<Stage>
    <ConnectionLayer />
    <NodeLayer />
    {this.state.tooltip && <TooltipLayer />}
</Stage>

Or you can try to move the tooltip node MANUALLY into another top layer. That method is basically not recommended with react-konva but it may work in many cases (I used it by myself in production app).

const Tooltip = () => {

  const groupRef = React.useRef();

  // move it when the component is mounted
  React.useEffect(() => {
     const stage = groupRef.current.getStage();
     const topLayer = stage.children[stage.children.length - 1];
     groupRef.current.moveTo(topLayer);
  }, []);

  return <Group ref={groupRef} />
}

Set element to top of all layers in canvas

1 Answers1