How to limit the behavior of the transformer and prevent it from going beyond the canvas

[lush-99]

How to limit the behavior of the transformer and prevent it from going beyond the canvas

[lush-99]

link: https://codesandbox.io/p/devbox/adoring-gould-4464nk?file=%2Fsrc%2FApp.vue
image:

[lavrton]

Did you already find the solution? I see the demo has some working code.

[lush-99]

Did you already find the solution? I see the demo has some working code.

i find some code to it, but i find konva give me a error although i setting x=0
this is my solution:

    handleShapeTransform(e) {
      const currentSelectedRect = this.currentRects.find((rect) => rect.name === this.selectedRectName)
      const originX = e.target.x()
      const originY = e.target.y()
      const originScaleX = e.target.scaleX()
      const originScaleY = e.target.scaleY()
      const originWidth = e.target.width()
      const originHeight = e.target.height()
      if (originX < 0) {
        e.target.setAttrs({
          x: 0,
          scaleX: 1,
          width: currentSelectedRect.width,
        })
      }
      if (originY < 0) {
        e.target.setAttrs({
          y: 0,
          scaleY: 1,
          height: currentSelectedRect.height,
        })
      }
      if (originX + originScaleX * originWidth > this.stageConfig.width) {
        e.target.setAttrs({
          x: currentSelectedRect.x,
          scaleX: 1,
          width: this.stageConfig.width - currentSelectedRect.x,
        })
      }
      if (originY + originScaleY * originHeight > this.stageConfig.height) {
        e.target.setAttrs({
          y: currentSelectedRect.y,
          scaleY: 1,
          height: this.stageConfig.height - currentSelectedRect.y,
        })
      }
      this.currentRects = this.currentRects.map((item) => {
        if (item.name === this.selectedRectName) {
          return {
            ...item,
            x: e.target.x(),
            y: e.target.y(),
            scaleX: 1,
            scaleY: 1,
            width: e.target.width() * e.target.scaleX(),
            height: e.target.height() * e.target.scaleY(),
          }
        }
        return item
      })
    },

The problem I'm facing now is that even if I set the coordinates to 0, but e.target.x() < 0, konva gives me wrong coordinates, probably because of insufficient precision.

[lush-99]

sometimes konva give me a error x: -5.551115123125783e-17