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 }