konva.js transformer crop box behavior problem - html

Question

Is there any way to do the same with the cropbox action in the link below?
I am using the latest version of konva, but it seems that the link does not work after version 4.
https://codepen.io/kade87/pen/vYavQMp?editors=1011
How can I use it to work like a link in the latest version?
We must solve this problem. Or is there a javascript crop library that supports both pc and mobile? If so, please recommend. However, most of the libraries didn't work the way we wanted.
<script src="https://unpkg.com/konva#^4/konva.min.js"></script>
<div id="container"></div>
<script>
// noprotect
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
img.setAttrs({
width: stage.width(),
height: stage.height(),
opacity: 0.5
});
layer.add(img)
})
Konva.Image.fromURL('https://i.imgur.com/ktWThtZ.png', img => {
var group = new Konva.Group({
clipFunc: (ctx) => {
ctx.save();
ctx.translate(fakeShape.x(), fakeShape.y())
ctx.rotate(Konva.getAngle(fakeShape.rotation()))
ctx.rect(0, 0, fakeShape.width() * fakeShape.scaleX(), fakeShape.height() * fakeShape.scaleY());
ctx.restore()
}
})
layer.add(group);
img.setAttrs({
width: stage.width(),
height: stage.height(),
});
group.add(img);
var fakeShape = new Konva.Rect({
width: 100,
height: 100,
x: 100,
y: 100,
fill: 'rgba(0,0,0,0)',
draggable: true
})
layer.add(fakeShape);
var tr = new Konva.Transformer({
enabledAnchors: ['top-left', 'bottom-right'],
rotateEnabled: false,
keepRatio: false,
flipEnabled: true,
node: fakeShape,
boundBoxFunc: (oldBox, newBox) => {
if(newBox.width < 50) {
newBox.width = 50
// newBox.x = oldBox.x
}
if(newBox.height < 50) {
newBox.height = 50
// newBox.y = oldBox.y
}
return newBox
}
});
layer.add(tr);
layer.draw();
});
</script>