moveAndZoom.js 1.08 KB
Newer Older
wangdanlei's avatar
wangdanlei committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

const panzoom = require('panzoom')

// 初始化panzoom插件
export function panZoom(instance) {
  const mainContainer = instance._container
  const mainContainerWrap = mainContainer.parentNode
  const pan = panzoom(mainContainer, {
    smoothScroll: false,
    bounds: true,
    // autocenter: true,
    zoomDoubleClickSpeed: 1,
    minZoom: 0.5,
    maxZoom: 100
  })
  instance.mainContainerWrap = mainContainerWrap
  instance.pan = pan
  // 缩放时设置jsPlumb的缩放比率
  pan.on('zoom', (e) => {
    const { scale } = e.getTransform()
    instance.get('canvas').zoom(scale)
    instance.get('canvas').zoom('fit-viewport', 'auto')
  })

  // 平移时设置鼠标样式
  mainContainerWrap.style.cursor = 'grab'
  mainContainerWrap.addEventListener('mousedown', function wrapMousedown() {
    this.style.cursor = 'grabbing'
    // mainContainerWrap.addEventListener('mouseout', function wrapMouseout() {
    //   this.style.cursor = 'grab'
    // })
  })
  mainContainerWrap.addEventListener('mouseup', function wrapMouseup() {
    this.style.cursor = 'grab'
  })
}

export default {
  panZoom
}