Your IP : 18.219.40.177


Current Path : /usr/local/mgr5/skins/orion/src/
Upload File :
Current File : //usr/local/mgr5/skins/orion/src/App.Map.js

/**
 *  Map module
 *
 *  SVG DCMap wrapper
 *
 */
var App = App || {};
App.Map = (function (window, $, EventMgr, App) {
  "use strict";
  var init = function() {
      EventMgr.bind('appendMap', loadMap);
      EventMgr.bind('savedMapData', savedMapDataHandler);
      EventMgr.obind($(window), 'resize', resizeMapHandler);
      EventMgr.one('loadMapScript', loadScript);
      EventMgr.bind('spaceKeyUp', spaceKeyUpHandler);
      EventMgr.bind('upKeyUp, downKeyUp, leftKeyUp, rightKeyUp', arrowKeyUpHandler);
    },

    baseUrl = pageInfo.url,

    racks = {},

    selectHandler = function(elems, self) {
      var i = 0,
        tabId = 'cont-' + self.tabId,
        sElems = [], curElem;
      /* jslint forin:true */
      for (var keyVar in elems) {
        i++;
        curElem = {};
        curElem.elid = elems[keyVar].elid;
        curElem.name = elems[keyVar].name;
        sElems.push(curElem);
      }
      if (i === 1) {
        EventMgr.trigger("mapSelect", { tabId: tabId });
      } else if (i === 0) {
        EventMgr.trigger("mapUnSelect", { tabId: tabId });
      } else if (i > 1) {
        EventMgr.trigger("mapMultiSelect", { tabId: tabId });
      }
      EventMgr.trigger('updateSelectedElems', { elems: sElems, tabId: self.tabId });
    },

    saveRackData = function(elems, tabId) {
      var elemsArray = [],
        elemObject,
        elem;
      for (var key in elems) {
        if (elems[key].state) {
          elem = elems[key];
          if (elem) {
            elemObject = {
              elid: elem.elid,
              name: elem.type,
              position: elem.position
            };
            if (elem.parent) {
              elemObject.plid = elem.parent.elid;
            }
            elemsArray.push(elemObject);
          }
        }
      }

      var data = JSON.stringify(elemsArray);

      var param = {
        func: racks[tabId].saveAction,
        data: data
      };

      EventMgr.trigger('ajaxRequest', {
        url: baseUrl,
        param: param,
        invar: { tabId: tabId },
        type: 'get',
        outtype: 'json',
        trfunc: 'savedMapData',
        failfunc: 'failSavedMapData',
        queue: 'noqueue' });

      EventMgr.trigger('tabLoading', { tabId: tabId });
    },

    saveData = function(elems, tabId) {
      var elemsArray = [],
        elemObject,
        elem;
      /* jslint forin:true */
      for (var key in elems) {
        elem = elems[key];
        if (elems[key]) {
          elemObject = {
            elid: elem.elid,
            direction: Math.round(elem.curDirect),
            top: elem.curY,
            left: elem.curX,
            name: elem.name
          };
          elemsArray.push(elemObject);
        }
      }

      var data = JSON.stringify(elemsArray);

      var param = {
        func: maps[tabId].saveAction,
        data: data
      };

      EventMgr.trigger('ajaxRequest', {
          url: baseUrl,
          param: param,
          invar: { tabId: tabId },
          type: 'get',
          outtype: 'json',
          trfunc: 'savedMapData',
          failfunc: 'failSavedMapData',
          queue: 'noqueue' });

      EventMgr.trigger('tabLoading', { tabId: tabId });
    },

    savedMapDataHandler = function(e, data) {
      EventMgr.trigger('tabLoadingHide', { tabId: data.tabId });
    },

    selectNodeHandler = function(elems, tabId) {
      if (elems) {
        var l = elems.length,
          len = l,
          ctabId = 'cont-' + tabId,
          sElems = [], curElem;
        while (l--) {
          curElem = {};
          curElem.elid = elems[l].elid;
          curElem.name = elems[l].type;
          sElems.push(curElem);
        }
        if (len === 1) {
          EventMgr.trigger("mapSelect", { tabId: ctabId });
        } else if (len === 0) {
          EventMgr.trigger("mapUnSelect", { tabId: ctabId });
        } else if (len > 1) {
          EventMgr.trigger("mapMultiSelect", { tabId: ctabId });
        }
        EventMgr.trigger('updateSelectedElems', { elems: sElems, tabId: tabId });

      }
    },

    dblclickNodeHandler = function(elem, tabId) {
      var sElems = [
        {
          'elid': elem.elid,
          'name': elem.type
        }
      ],
        ctabId = 'cont-' + tabId;
      EventMgr.trigger("mapSelect", { tabId: ctabId });
      EventMgr.trigger('updateSelectedElems', { elems: sElems, tabId: tabId });
      $('#toolbar-' + tabId + ' .action.default').trigger('click');
    },

    setHeightRack = function(tabId) {
      var windowHeight = $(window).height(),
        top =  $('#menu-items-wr').offset().top,
        rackHeight = windowHeight - top;

      $('.tab-content')
        .height(rackHeight);
      var rackWrapper = $('#tcw-' + tabId + ' .topBar');
      if (rackWrapper.length > 0) {
        var topRack =  rackWrapper[0].offsetHeight,
          availableHeight = rackHeight - topRack;
        $('#' + tabId + '-map').height(availableHeight);
        EventMgr.trigger('updateScroll', { id: tabId + '-map' });
      }
    },

    renderRack = function(data) {
      var rack = new Rack('wrapper');
      rack.setData(data);
      rack.render();
      rack.onSaveData(saveRackData);
      rack.onSelect(selectNodeHandler);
      rack.onDblclick(dblclickNodeHandler);
      rack.saveAction = data.map.action;
      racks[data.tabId] = rack;
      setTimeout(function() {
        setHeightRack(data.tabId);
      }, 150);

      EventMgr.trigger('appendMapDone', data);
    },

    renderMap = function(e, data) {
      if (data.map.type === 'rack') {
        renderRack(data);
        return;
      }

      var tabId = data.tabId,
        dataMap = data.map,
        mapWrapper = AppDom.byId(tabId + '-map'),
        svgWrapper = doc.createElement('div'),
        id = 'svg-map-' + tabId,
        scale = dataMap.scale || 1,
        $mapWrapper,
        width = dataMap.width,
        height = dataMap.height;
      if (!mapWrapper) { return; }

      svgWrapper.setAttribute('class', 'svg-wrapper');
      svgWrapper.setAttribute('id', id);
      mapWrapper.appendChild(svgWrapper);
      var map = new window.DCMap(id);
      map.init({ width: width, height: height, scale: scale, edit: dataMap.edit, msg: dataMap.msg });
      map.onDblClick(mapDblClickHandler);
      map.renderWorkarea();
      map.renderLayers(dataMap);
      maps[tabId] = map;
      map.saveAction = dataMap.action;
      map.onSave(saveData);
      map.onSelect(selectHandler);

      map.tabId = tabId;
      resizeTimeId = setTimeout(function() {
        resizeMap();
      }, 100);
    },

    mapDblClickHandler = function(e, ee) {
      e.preventDefault();
      var curElem = {},
        sElems = [],
        tabId = this.papper.master.tabId;
      curElem.elid = this.elid;
      curElem.name = this.name;
      sElems.push(curElem);
      EventMgr.trigger('updateSelectedElems', { elems: sElems, tabId: tabId });
      $('#toolbar-' + tabId + ' .action.default').trigger('click');
    },

    mapQueue = [],

    loadMap = function(e, data) {
      if (typeof window.DCMap !== 'undefined') {
        renderMap.apply(window, [e, data]);
      } else {
        mapQueue.push(data);
        EventMgr.trigger('loadMapScript');
      }
    },

    loadScript = function() {
      var file = '/manimg/orion/dcmap.min.js';
      App.Common.required(file, runQueue);
    },

    runQueue = function() {
      var l = mapQueue.length;
      while(l--) {
        renderMap.apply(window, [{}, mapQueue[l]]);
      }
    },

    AppDom = App.Dom,

    doc = document,
    //@todo remove map when close tab
    maps = {},

    resizeTimeId,

    //@todo resize when menu hide
    resizeMapHandler = function() {
      clearTimeout(resizeTimeId);
      resizeTimeId = setTimeout(function() {
        resizeMap();
      }, 50);
    },

    resizeMap = function() {
      var actTab = $('.tab-content_st_active'),
        tabType = actTab.attr('data-tab-type'),
        tabId = actTab.attr('data-tabid'),
        mapWrapper, top, width, docHeight, avHeight, map;
      if (tabType === 'map' && maps[tabId]) {
        mapWrapper = $('#' + tabId + '-map');
        width = mapWrapper[0].offsetWidth - 20;
        top = mapWrapper.offset().top;
        docHeight = document.body.offsetHeight;
        avHeight = docHeight - top - 20;
        map = maps[tabId];
        map.resize({ width: width, height: avHeight });
      } else if (tabType === 'map') {
        setHeightRack(tabId);
      }
    },

    spaceKeyUpHandler = function() {
      var actTab = $('.tab-content_st_active'),
        tabId = actTab.attr('data-tabid');
      if (maps[tabId]) {
        maps[tabId].forceRotate();
      }
    },

    direction = {
      '38': 'up',
      '40': 'down',
      '37': 'left',
      '39': 'right'
    },

    arrowKeyUpHandler = function(e, data) {
      var actTab = $('.tab-content_st_active'),
        tabId = actTab.attr('data-tabid'),
        dir = direction[data.codeKey];
      if (maps[tabId]) {
        maps[tabId].forceMove(dir);
      }
    }
    ;


  return {
    init: init
  };

}(window, $, EventMgr, App));