new_era/public/static/js/CAD/loadCAD.js

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

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

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

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


    let style = document.createElement('style')
    style.innerHTML = `
      .cad {
        position: absolute;
        width: 108%;
        height: 108%;
        top: -12px;
        right: -12px;
      }

      #cad{
        width: 100%;
        height: 100%;
      }

      .cad > div >svg > g g:not(.sign){
        opacity: 0;
      }

      @media only screen and (max-width: 600px) { 
        .cad {
          width: 138%;
          height: 138%;
          transform: rotate(90deg);
          top: -24px;
          right: -30px;
          }
      }
    `

    document.documentElement.appendChild(style)
    document.documentElement.appendChild($layer)
    $parent.appendChild(style)
    $parent.appendChild($layer)
    return $layer
  }


  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,
      r: 6,
    })
  }


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

    let $layer = loadDOM($parent)

    $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: `floor/floor.json`,
  method: "GET",
  success(res) {
    grendCAD(res, document.querySelector('.cadmap'), "#248BEB", "#ffffff", "1px");
  },
});