poc-igeom/app/app.js

var app = (function() {
  let _width = $("#content").width();
  let _height =
    $("#sidebar").height() - $("#header").height() - $("#files").height() - 2;
  let _screen = {
    width: _width,
    height: _height
  };
  let _layers = [];
  let _currentLayers = [];
  let _tools = [];
  let _menu = [];
  let _layer = undefined;
  let _selectedTool = [];
  let _objects = [];
  let _stage = new Konva.Stage({
    container: "container",
    width: _width,
    height: _height
  });
  let _state = APP_STATE.NONE;

  function _createLayer() {
    let sequence = 0;
    if (_layers == null || _layers.length == 0) {
      sequence++;
    } else {
      sequence = _layers.length + 1;
    }
    let layer = { sequence: sequence, layer: new Konva.Layer() };
    _layers.push(layer);
    if (_currentLayer() == undefined && _currentLayers.length == 0) {
      _currentLayers = [];
      _currentLayers.push(layer);
    }
    _stage.add(layer.layer);
    return layer;
  }

  function _bootstrap() {
    _createLayer();
    configureStageEvents();
    _layer = _currentLayer();
    selector.bootstrap();
  }

  function _currentLayer() {
    if (_currentLayers[0] == undefined) return undefined;
    return _currentLayers[0].layer;
  }

  function configureStageEvents() {
    _stage.on("mousedown ", function(e) {
      if (e.target === _stage) {
        _setState(APP_STATE.NONE);
        return;
      }
      if (e.target.id != undefined) {
        _setState(APP_STATE.OBJECT_SELECTED);
        return;
      }
    });
    _stage.on("click tap", function(e) {
      let tool = _getSelectedTool();
      if (tool != undefined) {
        tool.draw();
        return;
      }
      if (e.target === _stage) {
        _setState(APP_STATE.NONE);
        return;
      }
    });
  }

  function _setSelectedTool(tool) {
    _clearSelectedTool();
    _setState(APP_STATE.TOOL_SELECTED);
    if (tool.id != undefined) {
      document.getElementById("btn-" + tool.id).disabled = true;
    }
    _selectedTool.push(tool);
  }

  function _clearSelectedTool() {
    let tool = _getSelectedTool();
    if (tool != undefined) {
      if (tool.id != undefined) {
        document.getElementById("btn-" + tool.id).disabled = false;
      }
    }
    _selectedTool = [];
    _setStatus("");
    _setState(APP_STATE.NONE);
  }

  function _getSelectedTool() {
    if (_selectedTool.length > 0) return _selectedTool[0];
    return undefined;
  }

  function _getRelativePointerPosition() {
    return _stage.getPointerPosition();
  }

  function _setStatus(status) {
    document.getElementById("status").innerHTML = status;
  }

  function _pushObject(object) {
    _objects.push(object);
  }

  function _getObjects() {
    return _objects;
  }

  function _setState(state) {
    _state = state;
  }
  function _getState() {
    return _state;
  }
  function _menuClick(e) {
    _setState(APP_STATE.TOOL_SELECTED);
    if (e.click());
  }
  return {
    stage: _stage,
    currentLayer: _currentLayer,
    createLayer: _createLayer,
    screen: _screen,
    bootstrap: _bootstrap,
    layers: _layers,
    tools: _tools,
    setSelectedTool: _setSelectedTool,
    clearSelectedTool: _clearSelectedTool,
    getSelectedTool: _getSelectedTool,
    pos: _getRelativePointerPosition,
    setStatus: _setStatus,
    pushObject: _pushObject,
    getObjects: _getObjects,
    setState: _setState,
    getState: _getState,
    menuClick: _menuClick
  };
})();