ReactJS KonvasJS How to create 2 layers that cannot overlaps - reactjs

Question

i'm trying to create 2 layers (Images) that cannot overlap,
So they can still dragged freely, but won't showed over each other.
I've tried using zIndex or a blank Rect, but can't figure out how to make 2 draggable layers that can't overlap (Very similar to overflow: hidden behavior)
a GIF is attached to show the problem, each layer shouldn't be visible behind the divider line.
return (
<Stage width={size.width} height={size.height}>
{stateImages.map((imageConfig) => {
index++
return <Layer><Image
x={size.width/2 * index}
y={0}
image={imageConfig.image}
draggable
/>
</Layer>
})}
{stateImages.length > 1 &&
<Layer>
<Rect
x={size.width / 2}
y={0}
width={4}
height={size.height}
fill="white"
shadowBlur={10}
zIndex={2}
/>
</Layer>
}
</Stage>
)

Answer 1

You can use clip https://konvajs.org/docs/clipping/Clipping_Regions.html#page-title for that use case:
import React, { Component } from "react";
import { render } from "react-dom";
import { Stage, Layer, Image, Group } from "react-konva";
import useImage from "use-image";
// the first very simple and recommended way:
const MyImage = () => {
const [image] = useImage("https://i.imgur.com/ktWThtZ.png");
return <Image image={image} draggable />;
};
class App extends Component {
render() {
return (
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Group
clipX={0}
clipY={0}
clipWidth={window.innerWidth / 2}
clipHeight={window.innerHeight}
>
<MyImage />
</Group>
<Group
x={window.innerWidth / 2}
clipX={0}
clipY={0}
clipWidth={window.innerWidth / 2}
clipHeight={window.innerHeight}
>
<MyImage />
</Group>
</Layer>
</Stage>
);
}
}
render(<App />, document.getElementById("root"));
https://codesandbox.io/s/react-konva-clip-images-demo-onp3w?file=/src/index.js