cad_house/src/CAD/core/additional/transform.ts

import {AttachCAD} from '../index'

declare global { interface Window { opera: boolean; } }
export interface DOMTransform {
  openMouseHandle: () => void
  propsChange: () => void
  closeMouseHandle: () => void
}

// 给cad附加矩阵转换功能 如放大缩小
export const attchDOMTranform = (cad: AttachCAD) => {


  // 点击在cad上认为要平移
  const down = (dev: MouseEvent) => {
    console.log(cad.processing)
    let render = cad.processing.render
    if (dev.target !== render.svg) return;
    const left = render.props.left
    const top = render.props.top
    const move = (mev: MouseEvent) => {
      render.props.left = left - (dev.pageX - mev.pageX) * render.props.multiple
      render.props.top = top - (dev.pageY - mev.pageY) * render.props.multiple
      render.adaptLayer()
      cad.propsChange && cad.propsChange()

      mev.preventDefault()
    }
    
    const up = () => {
      document.documentElement.removeEventListener('mousemove', move, false)
      document.documentElement.removeEventListener('mouseup', up, false)
    }

    document.documentElement.addEventListener('mousemove', move, false)
    document.documentElement.addEventListener('mouseup', up, false)

    dev.preventDefault()
  }


  // 缩放
  const wheel = (ev: any) => {
    let render = cad.processing.render
    let delta = ev.wheelDelta ? //IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
      (window.opera ? -ev.wheelDelta / 120 : ev.wheelDelta / 120) : //因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
      (ev.detail ?  -ev.detail / 3 : 0); //FF浏览器使用的是detail,其值为“正负3”

    let scale = render.props.scale + (delta > 0 ? 0.08 : -0.08)
    if (scale > 0.1) {
      render.props.scale = scale
      render.adaptLayer()
      cad.propsChange && cad.propsChange()
    }
  }


  // 开启缩放模式
  cad.openMouseHandle = () => {
    let layer = cad.layer
    layer.addEventListener('mousedown', down, false)
    layer.addEventListener('mousewheel', wheel, false)
  }

  // 关闭缩放模式
  cad.closeMouseHandle = () => {
    let layer = cad.layer
    layer.removeEventListener('mousedown', down, false)
    layer.removeEventListener('mousewheel', wheel, false)
  }

  
  let destroy = cad.destroy
  cad.destroy = function(...args) {
    cad.closeMouseHandle()
    destroy.apply(this, args)
  }
}