// In general, you need polyfill,
// The recommended module is 'https://github.com/juggle/resize-observer'.

// import ResizeObserver from '@juggle/resize-observer'

new Vue({
  el: '#app',
  data () {
    return {
      isOverflow: false
    }
  },
  mounted () {
    this.initInteractTextBox()
    this.observeTextBoxSize()
  },
  methods: {
    observeTextBoxSize () {
      const ro = new ResizeObserver(entries => {
        const { width, height } = entries[0].contentRect
        
        if (
          // 일반적인 경우.
          (entries[1] && height < entries[1].contentRect.height)
          // $refs.textBox의 높이만 변경될 경우 $refs.text의 크기는 변하지 않기 때문에 entries[1] is undefined,
          // getBoundingClientRect의 Reflow를 최소화.
          || (height < this.$refs.text.getBoundingClientRect().height)
        ) {
          this.isOverflow = true
        } else {
          this.isOverflow = false
        }
      })
      
      ro.observe(this.$refs.textBoxInner)
      ro.observe(this.$refs.text)
    },
    initInteractTextBox () {
      // https://interactjs.io/docs/
      interact(this.$refs.textBox)
        .resizable({
          edges: {
            right: true,
            bottom: true
          }
        })
        .on('resizemove', event => {
          event.target.style.width = `${event.rect.width}px`
          event.target.style.height = `${event.rect.height}px`
        })
    },
    unfoldDown () {
      this.$refs.textBox.style.height = `${this.$refs.text.getBoundingClientRect().height + 48}px` // 48 is $refs.textBox의 Border-box(padding + border) 크기.
    }
  }
})