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