BDLGScene/public/showa/js/loadCAD.js

window.grendCAD = (function grendCAD() {
  let initFloor
  let initScript
  let initDOM
  let point, dire

  window.cad = {
    setSign: function (p, d) {
      point = p
      dire = d
    }
  }

  function loadScript(cb) {
    if (initScript) return cb()

    let $script = document.createElement('script')
    $script.src = '//www.4dmodel.com/CAD/bundle.js'
    $script.onload = function () {
      initScript = true
      cb()
    }

    document.documentElement.appendChild($script)
  }

  function loadDOM($parent) {
    if (initDOM) return initDOM
    let $layer = document.createElement('div')
    let $cad = document.createElement('div')
    let $img = document.createElement('img')

    $layer.className = 'cad'
    $img.className = 'img'
    $cad.id = 'cad'
    $layer.appendChild($cad)

    let style = document.createElement('style')
    style.innerHTML = `
      .cad {
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 16px;
        width: 200px;
        height: 200px;
        background: rgba(0, 0, 0, .3);
        border-radius: 5px; 
        background-image: url('./images/map_1.png');
        path {
          opacity: 0;
        }
        g.sign>path {
          opacity: 1;
        }
      }

      .cad > div {
        width: 100%;
        height: 100%;
      }

      .img {
        display: none;
        width: 60%;
        object-fit: cover;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s ease;
      }

      @media only screen and (max-width: 600px) {
        .cad {
            position: absolute;
            left: 16px;
            top: 65px;
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, .3);
            border-radius: 5px;
            background-image: url('./images/map_1.png');
            background-size: cover;
            path {
              opacity: 0;
            }
            g.sign>path {
              opacity: 1;
            }
          }
          .img {
            width: 90%;
            z-index: 30000;
          }
        
      }
    `

    document.documentElement.appendChild(style)
    document.documentElement.appendChild($layer)
    document.documentElement.appendChild($img)
    $parent.appendChild(style)
    $parent.appendChild($layer)
    $parent.appendChild($img)
    return [$layer, $img]
  }

  function setStyle(signColor, borderColor, borderWidth) {
    cad.setDefaultPointStyle({
      fillColor: 'rgba(0,0,0,0)',
      storkeColor: 'rgba(0,0,0,0)'
    })

    console.log(borderWidth)
    cad.setDefaultLineStyle({
      width: borderWidth,
      color: borderColor
    })

    cad.setDefaultSignStyle({
      color: signColor
    })
  }

  return function (floor, $parent, signColor, borderColor, borderWidth) {
    if (initFloor) {
      console.log('cache')
      return setStyle(signColor, borderColor, borderWidth)
    }
    console.log('load')
    initFloor = floor

    loadScript(function () {
      let [$layer, $img] = loadDOM($parent)

      $layer.addEventListener('click', () => {
        console.log(12)
        $img.src = './images/map_2.png'
        $img.style.display = $img.style.display === 'block' ? 'none' : 'block'
      })

      $layer.style.visibility = 'hidden'
      window.cad = structureCAD({
        data: {
          block: [],
          column: [],
          door: [],
          hole: [],
          segment: [],
          'vertex-xy': [],
          'vertex-z': []
        },
        layer: $layer.querySelector('#cad'),
        edit: false
      })

      setStyle(signColor, borderColor, borderWidth)
      cad.hideDire()
      cad.hideGauge()

      console.log('loadData')
      cad.loadData(initFloor)
      if (point && dire) {
        window.cad.setSign(point, dire)
      }
      $layer.style.visibility = 'visible'
    })
  }
})()

$.ajax({
  url: g_Prefix + 'data/' + window.number + '/someData.json' + '?' + Date.now(),
  method: 'GET',
  success(data) {
    if (!data.showCad) return

    $.ajax({
      url: '//super.4dage.com/data/' + window.number + '/floor.json',
      method: 'GET',
      success(res) {
        grendCAD(res, document.documentElement, data.cadSignColor, data.cadBorderColor, data.cadBorderWidth)
      }
    })
  }
})