shangyun/Web/src/hooks/use-mouse-tool.ts

import { reactive } from 'vue'
import pin2d8cf0 from '/@/assets/icons/pin-2d8cf0.svg'
import { MapDoodleType } from '/@/constants/map'
import { getRoot } from '/@/root'
import { MapDoodleEnum } from '/@/types/map-enum'
import { EFlightAreaType } from '../types/flight-area'
import { message } from 'ant-design-vue'
import { ELocalStorageKey } from '../types'
import rootStore from '/@/store'

export function useMouseTool() {
  const root = getRoot()
  const userName = localStorage.getItem(ELocalStorageKey.Username) || ''

  const state = reactive({
    currentType: '',
  })

  const getIndex = () => {
    const item: any = rootStore.state.Layers[0];
    if (!item) {
      return userName + 1;
    } else {
      return userName + (item.elements.length + 1);
    }
  }

  const flightAreaColorMap = {
    [EFlightAreaType.DFENCE]: '#19be6b',
    [EFlightAreaType.NFZ]: '#ff0000',
  }

  function drawPin(type: MapDoodleType, getDrawCallback: Function) {
    root?.$mouseTool.marker({
      title: getIndex(),
      icon: pin2d8cf0,
    })
    root?.$mouseTool.on('draw', getDrawCallback)
  }

  function drawPolyline(type: MapDoodleType, getDrawCallback: Function) {
    root?.$mouseTool.polyline({
      title: getIndex(),
      strokeColor: '#2d8cf0',
      strokeOpacity: 1,
      strokeWeight: 2,
      strokeStyle: 'solid',
    })
    root?.$mouseTool.on('draw', getDrawCallback)
  }

  function drawPolygon(type: MapDoodleType, getDrawCallback: Function) {
    root?.$mouseTool.polygon({
      title: getIndex(),
      strokeColor: '#2d8cf0',
      strokeOpacity: 1,
      strokeWeight: 2,
      fillColor: '#1791fc',
      fillOpacity: 0.4,
    })
    root?.$mouseTool.on('draw', getDrawCallback)
  }

  function drawOff(type: MapDoodleType) {
    root?.$mouseTool.close()
    root?.$mouseTool.off('draw')
  }

  function drawFlightAreaPolygon(type: EFlightAreaType, getDrawFlightAreaCallback: Function) {
    root?.$mouseTool.polygon({
      strokeColor: flightAreaColorMap[type],
      strokeOpacity: 1,
      strokeWeight: 4,
      extData: {
        type: type,
        mapType: 'polygon',
      },
      strokeStyle: 'dashed',
      strokeDasharray: EFlightAreaType.NFZ === type ? [10, 2] : [10, 1, 2],
      fillColor: flightAreaColorMap[type],
      fillOpacity: EFlightAreaType.NFZ === type ? 0.3 : 0,
    })
    root?.$mouseTool.on('draw', getDrawFlightAreaCallback)
  }

  function drawFlightAreaCircle(type: EFlightAreaType, getDrawFlightAreaCallback: Function) {
    root?.$mouseTool.circle({
      strokeColor: flightAreaColorMap[type],
      strokeOpacity: 1,
      strokeWeight: 6,
      extData: {
        type: type,
        mapType: 'circle',
      },
      strokeStyle: 'dashed',
      strokeDasharray: EFlightAreaType.NFZ === type ? [10, 2] : [10, 1, 2],
      fillColor: flightAreaColorMap[type],
      fillOpacity: EFlightAreaType.NFZ === type ? 0.3 : 0,
    })
    root?.$mouseTool.on('draw', getDrawFlightAreaCallback)
  }

  function mouseTool(type: MapDoodleType, getDrawCallback: Function, flightAreaType?: EFlightAreaType) {
    state.currentType = type
    if (flightAreaType) {
      switch (type) {
        case MapDoodleEnum.POLYGON:
          drawFlightAreaPolygon(flightAreaType, getDrawCallback)
          return
        case MapDoodleEnum.CIRCLE:
          drawFlightAreaCircle(flightAreaType, getDrawCallback)
          return
        default:
          message.error(`Invalid type: ${flightAreaType}`)
          return
      }
    }
    switch (type) {
      case MapDoodleEnum.PIN:
        drawPin(type, getDrawCallback)
        break
      case MapDoodleEnum.POLYLINE:
        drawPolyline(type, getDrawCallback)
        break
      case MapDoodleEnum.POLYGON:
        drawPolygon(type, getDrawCallback)
        break
      case MapDoodleEnum.Close:
        drawOff(type)
        break
    }
  }

  return {
    mouseTool
  }
}