igeom/app/app.js

var app = (function() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  var layers = [];
  var _layer = [];
  var tools = [];
  var menu = [];
  var layer = undefined;
  var _selectedTool = [];

  var stage = new Konva.Stage({
    container: "container",
    width: width,
    height: height
  });

  var screen = {
    width: width,
    height: height
  };

  function createLayer() {
    var sequence = 0;
    if (layers == null || layers.length == 0) {
      sequence++;
    } else {
      sequence = layers.length + 1;
    }
    var layer = { sequence: sequence, layer: new Konva.Layer() };
    layers.push(layer);
    if (currentLayer() == undefined && _layer.length == 0) {
      _layer = [];
      _layer.push(layer);
    }
    stage.add(layer.layer);
    return layer;
  }

  function bootstrap() {
    createLayer();
    configureStageEvents();
    layer = currentLayer();
  }

  function currentLayer() {
    if (_layer[0] == undefined) return undefined;
    return _layer[0].layer;
  }

  function configureStageEvents() {
    stage.on("click tap", function(e) {
      var tool = getSelectedTool();
      if (tool != undefined) {
        tool.draw();
        return;
      }

      if (e.target === stage) {
        stage.find("Transformer").destroy();
        layer.draw();
        return;
      }

      stage.find("Transformer").destroy();

      var tr = new Konva.Transformer({
        anchorStrokeWidth: 2
      });
      layer.add(tr);
      tr.attachTo(e.target);
      layer.draw();
    });
  }

  function setSelectedTool(tool) {
    clearSelectedTool();
    if (tool.id != undefined) {
      document.getElementById("btn-" + tool.id).disabled = true;
    }
    _selectedTool.push(tool);
  }

  function clearSelectedTool() {
    var tool = getSelectedTool();
    if (tool != undefined) {
      if (tool.id != undefined) {
        document.getElementById("btn-" + tool.id).disabled = false;
      }
    }
    _selectedTool = [];
    setStatus("");
  }

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

  function getRelativePointerPosition() {
    return stage.getPointerPosition();
  }

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

  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
  };
})();