sdk4.0/src/Global/mouseRightMenu/index.js

/* 右键点击菜单 */
import MouseEvent from '../../Event/index'
import Tools from '../../Tools'
import { rotateAround } from '../../Global/global'
import { getSdk } from '../SplitScreen'

let eventListener = {}

function MouseRightMenu(sdk, status, callBack) {
  if (!sdk || !sdk.div_id) {
    return
  }
  let sdkD = getSdk().sdkD
  let _element = document.getElementById(sdk.div_id).getElementsByClassName('cesium-viewer')[0]
  let tools = new Tools()
  if (!eventListener[sdk.div_id]) {
    eventListener[sdk.div_id] = {}
  }
  if (eventListener[sdk.div_id].mousedown) {
    document.removeEventListener(
      'mousedown',
      eventListener[sdk.div_id].mousedown
    )
  }
  if (eventListener[sdk.div_id].click) {
    document.removeEventListener('click', eventListener[sdk.div_id].click)
  }
  if (!eventListener[sdk.div_id].callBack) {
    eventListener[sdk.div_id].callBack = callBack
  }

  if (sdk !== sdkD) {
    eventListener[sdk.div_id].mouseRightMenuEvent &&
      eventListener[sdk.div_id].mouseRightMenuEvent.destroy()
  }

  let menuElm = document.getElementById('custom-menu')
  if (menuElm) {
    _element.removeChild(menuElm)
  }
  eventListener[sdk.div_id].status = status
  if (status) {
    eventListener[sdk.div_id].mousedown = e => {
      if (
        (e.target.parentNode && e.target.parentNode.id == 'custom-menu') ||
        (e.target.parentNode &&
          e.target.parentNode.parentNode &&
          e.target.parentNode.parentNode.id == 'custom-menu')
      ) {
        return
      }
      let menuElm = document.getElementById('custom-menu')
      if (menuElm) {
        _element.removeChild(menuElm)
      }
    }
    document.addEventListener('mousedown', eventListener[sdk.div_id].mousedown)
    eventListener[sdk.div_id].click = e => {
      if (
        (e.target.parentNode && e.target.parentNode.id == 'custom-menu') ||
        (e.target.parentNode &&
          e.target.parentNode.parentNode &&
          e.target.parentNode.parentNode.id == 'custom-menu')
      ) {
        return
      }
      let menuElm = document.getElementById('custom-menu')
      if (menuElm) {
        _element.removeChild(menuElm)
      }
    }
    document.addEventListener('click', eventListener[sdk.div_id].click)

    eventListener[sdk.div_id].mouseRightMenuEvent = new MouseEvent(sdk)
    eventListener[sdk.div_id].mouseRightMenuEvent.mouse_right(
      (movement, cartesian) => {
        if (YJ.Measure.GetMeasureStatus() || sdk.viewer.trackedEntity) {
          return
        }
        let entity = sdk.viewer.entities.getById('svg-control-points_0')
        if (entity && entity.show) {
          return
        }
        let menuElm = document.getElementById('custom-menu')
        if (menuElm) {
          _element.removeChild(menuElm)
        }
        let entityId = getEntityId(movement)
        let targetId
        if (Object.prototype.toString.call(entityId) === '[object Object]') {
          targetId = entityId.id
          entityId = entityId.parentId
        }
        let addedMenu = ''
        let that = sdk.entityMap.get(entityId)
        if (!that && entityId) {
          let array = entityId.split('-')
          array.splice(array.length - 1, 1)
          entityId = array.join('-')
          that = sdk.entityMap.get(entityId)
        }

        if (that && that.picking) {
          addedMenu = `
        <span class="divider" style="display: block;border-top: 1px solid #ddd;margin: 5px;"></span>
        <ul class="added" style="list-style: none;padding: 0;margin: 0;font-size: 12px;">
          <li style="padding: 3px 10px;cursor: pointer;">属性</li>
        </ul>
        `
        }
        let position = tools.cartesian3Towgs84(cartesian, sdk.viewer)
        menuElm = document.createElement('div')
        menuElm.id = 'custom-menu'
        menuElm.style.position = 'absolute'
        menuElm.style.width = '110px'
        menuElm.style.backgroundColor = '#00000085'
        menuElm.style.color = '#ffffff'
        menuElm.style.padding = '6px 0'
        menuElm.style.boxShadow = '4px 4px 4px 0px rgba(0, 0, 0, 0.8)'
        menuElm.innerHTML = `
        <ul class="base" style="list-style: none;padding: 0;margin: 0;font-size: 12px;">
          <li style="padding: 3px 10px;cursor: pointer;">绕鼠标点旋转</li>
        </ul>
        <ul class="base" style="list-style: none;padding: 0;margin: 0;font-size: 12px;">
          <li style="padding: 3px 10px;cursor: pointer;">文本框</li>
        </ul>
        ${addedMenu}
      `
        _element.appendChild(menuElm)
        let left = movement.position.x
        let top = movement.position.y
        if (
          movement.position.x + menuElm.offsetWidth >
          _element.offsetWidth
        ) {
          left = movement.position.x - menuElm.offsetWidth
        }
        if (
          movement.position.y + menuElm.offsetHeight >
          _element.offsetHeight
        ) {
          top = movement.position.y - menuElm.offsetHeight
        }
        menuElm.style.left = left + 'px'
        menuElm.style.top = top + 'px'

        menuElm.addEventListener('contextmenu', function (event) {
          event.preventDefault()
        })
        let liElms = menuElm.getElementsByTagName('li')
        let object = {}
        for (let i = 0; i < liElms.length; i++) {
          liElms[i].addEventListener('mouseover', () => {
            liElms[i].style.backgroundColor = '#5e5e5e'
          })
          liElms[i].addEventListener('mouseout', () => {
            liElms[i].style.backgroundColor = 'unset'
          })
          liElms[i].addEventListener('click', () => {
            let key = ''
            switch (liElms[i].innerHTML) {
              case '绕鼠标点旋转':
                object.position = position
                key = 'rotateAround'
                // this.rotateAround(position)
                break
              case '属性':
                if (targetId) {
                  object.id = targetId
                  object.parentId = that.options.id
                }
                else {
                  object.id = that.options.id
                }
                key = 'attribute'
                // that.edit(true)
                // this.attribute(entityId)
                break
              case '文本框':
                object.position = position
                key = 'textBox'
                break
            }
            eventListener[sdk.div_id].callBack(key, object)
            _element.removeChild(menuElm)
          })
        }
      }
    )
  }

  function getEntityId(movement) {
    let pick = sdk.viewer.scene.pick(movement.position)
    if (pick) {
      if (pick.id) {
        if (pick.id.type && pick.id.type === 'vector' && pick.id.parentId) {
          return {
            parentId: pick.id.parentId,
            id: pick.id.id
          }
        }
        else if (pick.id.id) {
          return pick.id.id
        } else if (typeof pick.id == 'string') {
          return pick.id
        }
      } else {
        if (pick.primitive && pick.primitive.id) {
          return pick.primitive.id
        }
      }
    }
  }
}

function getMouseRightMenuStatus(sdk) {
  if (!sdk || !sdk.div_id || !eventListener[sdk.div_id]) {
    return
  }
  else {
    return eventListener[sdk.div_id].status
  }
}

export { MouseRightMenu, getMouseRightMenuStatus }