Search code examples
reactjsreact-konva

Clip function is not working with HTML component from react-konva-utils library

I have used the HTML component from react-konva-utils library along with react-konva.

When applying clip functionality to the react-konva Group, it does not affect the HTML component inside the Group But it is working for other elements inside the group which are from to react-konva

<Group key={i} x={0} y={g.y} 
  height={GROUP_HEIGHT} 
  width={summaryWidth} 
  clipX={0} 
  clipY={0} 
  clipWidth={maxViewPortWidth} 
  clipHeight={maxViewPortHeight}
>
  <Html divProps={{ style: { width: summaryWidth } }}>
    <Summary summary={summary} />
  </Html>
  <Line
    x={0}
    y={GROUP_HEIGHT}
    points={[0, 0, width, 0]}
    stroke={"black"}
    opacity={0.6}
    strokeWidth={1}
  />
</Group>
Solution

  • <Html /> is isolated from canvas rendering because it is just some DOM elements on top of the canvas.

    As for now, react-konva-utils doesn't support such a use case.