Установить элемент поверх всех слоев холста

Question

Я использую KonvaJS для создания холста, который может соединять "узлы" с помощью "соединений". Я создал 2 Layers, один NodeLayer и один ConnectionLayer, Я всегда хочу сделать NodeLayer на вершине ConnectionLayer, Итак, они отображаются следующим образом:

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

Это гарантирует, что узлы всегда отображаются поверх соединений. Я пытаюсь добавить всплывающую подсказку о моих соединениях, но потому что NodeLayer находится на вершине connectionLayer подсказка не будет отображаться, когда она расположена за узлом.

Есть ли способ визуализации всплывающей подсказки поверх узлов из connectionLayer при этом не меняя порядок слоев?

Answer 1

1. Как уже упоминалось в комментарии, вы можете попытаться использовать HTML для всплывающей подсказки и расположить ее сверху холста с абсолютной позицией.

2. Или вы можете создать специальный компонент для отображения всплывающей подсказки и поместить его поверх всех компонентов:

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

3. Или вы можете попытаться переместить узел всплывающей подсказки ВРУЧНУЮ на другой верхний слой. Этот метод в основном не рекомендуется с react-konva но это может работать во многих случаях (я использовал это сам в производственном приложении).

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} />
}