Как корректно повернуть картинку при увеличенном размере?

Question

[Anton8989]

Добрый день. Есть следующий код. При увеличении картинки, она отрабатывает нормально и не заходит за границы контента и ее можно передвигать в разные стороны и посмотреть целиком. Но при повороте, начинаются проблемы и картинка вылезает за область. Может кто-нибудь подсказать как сделать чтобы отрисовка происходила корректно и картинка при повороте отрисовывалась по центру и не заходила за область. Заранее спасибо))

<template lang="pug">
div
  div(
    ref="border1" 
    class="main-border"
    @mousedown="mousedown($event)"
    @mousemove="moveAt"
    @mouseup="mouseup"
    @mouseleave="mouseleave"
    :style="{border: '1px solid #000'}"
    )
    img(
      ref="map"
      img src="@/assets/img.png"
      :style="style"
    )
  div
  br
  div 
    v-btn(@click="zoomIn") Увеличить
    v-btn(@click="zoomOut") Уменьшить
    v-btn(@click="transformImg") Поворот
    div {{changeSize}}
    div {{transform}}
</template>

<script>



export default {
  name: 'Test',
  data() {
    return {
      left: 0,
      top: 0,
      x: 0,
      y: 0,
      dragging: false,
      zoomPlus: 100,
      transform: 0,
      changeSize: false,
      changeLeft: 0,
      number: 0,
      numberNew: 0,
      first: 0,
      firstNew: 0,
      position: 'static',
      inter: false
    }
  },
  computed: {
    style () {
      return { 
        width: `${this.zoomPlus}%`, 
        position: `${this.position}`, 
        transform: `rotate(${this.transform}deg)`, 
        left: `${this.left}`, top: `${this.top}` 
      }
    }
  },
  methods: {
    mousedown (event) {
      event.preventDefault()
      this.x = event.pageX
      this.y = event.pageY
      this.dragging = true
      this.moveAt(event)  
    },
    moveAt (event) {
      if (this.dragging) {
        let block = this.$refs.map

        

        let { width: widthImg, height: heightImg } = this.$refs.map.getBoundingClientRect()
        let { width: widthCont, height: heightCont } = this.$refs.border1.getBoundingClientRect()

        let test

        if (heightImg > widthImg) {
          test = (heightImg - widthImg)/2
        }
        
        if (heightImg > heightCont) {
        block.style.top = this.changeSize 
                          ? Math.max(0 - (heightImg - heightCont - test) , Math.min(this.top + event.pageY - this.y, test)) + 'px'
                          : Math.max(0 - (heightImg - heightCont) , Math.min(this.top + event.pageY - this.y, 0)) + 'px'
        }


        if (widthImg > widthCont) {
          block.style.left = this.changeSize 
              ? Math.max(0 - (widthImg - widthCont), Math.min(this.left + event.pageX - this.x, 0)) + 'px'
              : Math.max(0 - (widthImg - widthCont) , Math.min(this.left + event.pageX - this.x, 0)) + 'px'
        }


      }
    },
    zoomIn () {
      let { left, top } = this.$refs.map.style
      this.zoomPlus += 50
      this.position = 'absolute'



      let { width: widthImg, height: heightImg } = this.$refs.map.getBoundingClientRect()
      let { width: widthCont, height: heightCont } = this.$refs.border1.getBoundingClientRect()




      this.first = widthCont/4
      this.number -= this.first
      this.left = this.number + 'px'


      this.firstNew = heightCont/4
      this.numberNew -= this.firstNew
      this.top = this.numberNew + 'px'

    },
    zoomOut () {
      let { left, top } = this.$refs.map.style
      this.zoomPlus -= 50

      
      this.number += this.first
      this.left = this.number + 'px'


      
      this.numberNew += this.firstNew
      this.top = this.numberNew + 'px'


    },
    transformImg () {
      let { left, top } = this.$refs.map.style

      
      let { width: widthImg, height: heightImg } = this.$refs.map.getBoundingClientRect()
      let { width: widthCont, height: heightCont } = this.$refs.border1.getBoundingClientRect()


      this.transform -= 90


      this.first = widthCont/4
        this.number -= this.first
        


        this.firstNew = heightCont/4
        this.numberNew -= this.firstNew
        if (this.transform === -90 || this.transform === -270) {
        this.changeSize = true

        this.left = this.numberNew + 'px'
        this.top = this.number + 'px'
        

        

        } else if (this.transform === -180){
          this.changeSize = false

          this.left = this.number + 'px'
          this.top = this.numberNew + 'px'


        } else {
          this.changeSize = false
          this.left = this.number + 'px'
          this.top = this.numberNew + 'px'
        }

      if (this.transform <= -360) this.transform = 0
 

    },
    mouseup () {
      this.dragging = false
      let block = this.$refs.map
      this.left = parseFloat(block.style.left)
      this.top = parseFloat(block.style.top)
    },
    mouseleave () {
      this.mouseup()
    }
  }
}
</script>

<style scoped lang="less">
.main-border {
  margin: auto;
  overflow: hidden;
  width: 1000px;
  height: 500px;
  border: 0px solid #663333;
  position: relative;
  display: flex;
  align-items: center;
}
.main-border img{
  height:  auto;
  width: 100%;
  margin: 0 auto;
  right: 0;
  bottom: 0;


}
</style>