LightingSystemApp-serial/.svn/pristine/ef/efd5e4d308f8d919ebffef3d53b9419bc2e1a714.svn-base

<script>
import {
  deepClone
} from 'uni-shared'
import {
  initScrollBounce,
  disableScrollBounce
} from 'uni-platform/helpers/scroll'

function calc (e) {
  return Math.sqrt(e.x * e.x + e.y * e.y)
}

export default {
  name: 'MovableArea',
  props: {
    scaleArea: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      width: 0,
      height: 0,
      items: []
    }
  },
  created: function () {
    this.gapV = {
      x: null,
      y: null
    }
    this.pinchStartLen = null
  },
  mounted: function () {
    this._resize()
    initScrollBounce()
  },
  methods: {
    _resize () {
      this._getWH()
      this.items.forEach(function (item, index) {
        item.componentInstance.setParent()
      })
    },
    _find (target, items = this.items) {
      var root = this.$el

      function get (node) {
        for (let i = 0; i < items.length; i++) {
          const item = items[i]
          if (node === item.componentInstance.$el) {
            return item
          }
        }
        if (node === root || node === document.body || node === document) {
          return null
        }
        return get(node.parentNode)
      }
      return get(target)
    },
    _touchstart (t) {
      disableScrollBounce({
        disable: true
      })
      var i = t.touches
      if (i) {
        if (i.length > 1) {
          var r = {
            x: i[1].pageX - i[0].pageX,
            y: i[1].pageY - i[0].pageY
          }
          this.pinchStartLen = calc(r)
          this.gapV = r
          if (!this.scaleArea) {
            var touch0 = this._find(i[0].target)
            var touch1 = this._find(i[1].target)
            this._scaleMovableView = touch0 && touch0 === touch1 ? touch0 : null
          }
        }
      }
    },
    _touchmove (t) {
      var n = t.touches
      if (n) {
        if (n.length > 1) {
          t.preventDefault()
          var i = {
            x: n[1].pageX - n[0].pageX,
            y: n[1].pageY - n[0].pageY
          }
          if (this.gapV.x !== null && this.pinchStartLen > 0) {
            var r = calc(i) / this.pinchStartLen
            this._updateScale(r)
          }
          this.gapV = i
        }
      }
    },
    _touchend (e) {
      disableScrollBounce({
        disable: false
      })
      var t = e.touches
      if (!(t && t.length)) {
        if (e.changedTouches) {
          this.gapV.x = 0
          this.gapV.y = 0
          this.pinchStartLen = null
          if (this.scaleArea) {
            this.items.forEach(function (item) {
              item.componentInstance._endScale()
            })
          } else {
            if (this._scaleMovableView) {
              this._scaleMovableView.componentInstance._endScale()
            }
          }
        }
      }
    },
    _updateScale (e) {
      if (e && e !== 1) {
        if (this.scaleArea) {
          this.items.forEach(function (item) {
            item.componentInstance._setScale(e)
          })
        } else {
          if (this._scaleMovableView) {
            this._scaleMovableView.componentInstance._setScale(e)
          }
        }
      }
    },
    _getWH () {
      var style = window.getComputedStyle(this.$el)
      var rect = this.$el.getBoundingClientRect()
      this.width = rect.width - ['Left', 'Right'].reduce(function (all, item) {
        return all + parseFloat(style['border' + item + 'Width']) + parseFloat(style['padding' + item])
      }, 0)
      this.height = rect.height - ['Top', 'Bottom'].reduce(function (all, item) {
        return all + parseFloat(style['border' + item + 'Width']) + parseFloat(style['padding' + item])
      }, 0)
    }
  },
  render (createElement) {
    var items = []
    const $slots = this.$slots.default && deepClone(this.$slots.default, createElement)
    if ($slots) {
      $slots.forEach(vnode => {
        if (vnode.componentOptions && vnode.componentOptions.tag === 'v-uni-movable-view') {
          items.push(vnode)
        }
      })
    }
    this.items = items
    var $listeners = Object.assign({}, this.$listeners)
    var events = ['touchstart', 'touchmove', 'touchend']
    events.forEach(event => {
      var existing = $listeners[event]
      var ours = this[`_${event}`]
      $listeners[event] = existing ? [].concat(existing, ours) : ours
    })
    return createElement('uni-movable-area', {
      on: $listeners
    }, [createElement('v-uni-resize-sensor', {
      on: {
        resize: this._resize
      }
    }), $slots])
  }
}
</script>
<style>
  uni-movable-area {
    display: block;
    position: relative;
    width: 10px;
    height: 10px;
  }

  uni-movable-area[hidden] {
    display: none;
  }
</style>