stop user from dragging annotation outside the canvas

[sbaz44]

Hi. First of all thank you for creating this awesome package.
I just want to know whether I can stop the user from dragging the annotation outside the canvas,partially or fully.
If the user drags the annotation partially outside the canvas the X or Y value is negative(depending the direction).

Example:
{
mark:{
height: 219.27272727272725
type: "RECT"
width: 279.81818181818176
x: -75.09090909090902
y: 268.36363636363643
}
}

Any help would be greatly appreciated.

[ebrahimsakirmi]

@sbaz44 hey , did you found any solution regarding this please help or suggest any other libraries

[sbaz44]

@ebrahimsakirmi I converted his package from typescript to normal react( because I dont know typescript). Then I changed the code in SHAPE.js(for typescript SHAPE.ts) to the following.

`
this.onDrag = (positionX, positionY) => {

  const { width, height } = this.annotationData.mark;
  let posX = positionX - this.dragStartOffset.offsetX;
  let posY = positionY - this.dragStartOffset.offsetY;
  let totalWidth = Math.floor(posX + width);
  let totalheight = Math.floor(posY + height);
  if (positionX - this.dragStartOffset.offsetX < 0 || totalWidth > 1280) {
  } else {
    this.annotationData.mark.x = positionX - this.dragStartOffset.offsetX;
  }
  if (positionY - this.dragStartOffset.offsetY < 0 || totalheight > 720) {
  } else {
    this.annotationData.mark.y = positionY - this.dragStartOffset.offsetY;
  }
  this.onChangeCallBack();
};`

mine image size for canvas was 1280 * 720.

[ebrahimsakirmi]

@sbaz44 hey, thanks a lot for replying back, I will give it a try for it and update you, Thanks men