app.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. var app = (function() {
  2. var width = window.innerWidth;
  3. var height = window.innerHeight;
  4. var layers = [];
  5. var _layer = [];
  6. var stage = new Konva.Stage({
  7. container: "container",
  8. width: width,
  9. height: height
  10. });
  11. var screen = {
  12. width: width,
  13. height: height
  14. };
  15. function createLayer() {
  16. var sequence = 0;
  17. if (layers == null || layers.length == 0) {
  18. sequence++;
  19. } else {
  20. sequence = layers.length + 1;
  21. }
  22. var layer = { sequence: sequence, layer: new Konva.Layer() };
  23. layers.push(layer);
  24. if (currentLayer() == undefined && _layer.length == 0) {
  25. _layer = [];
  26. _layer.push(layer);
  27. }
  28. return layer;
  29. }
  30. function bootstrap() {
  31. createLayer();
  32. configureDragAndDrop();
  33. layer = currentLayer();
  34. }
  35. function currentLayer() {
  36. if (_layer[0] == undefined) return undefined;
  37. return _layer[0].layer;
  38. }
  39. function configureDragAndDrop() {
  40. stage.on("click tap", function(e) {
  41. if (e.target === stage) {
  42. stage.find("Transformer").destroy();
  43. layer.draw();
  44. return;
  45. }
  46. stage.find("Transformer").destroy();
  47. var tr = new Konva.Transformer({
  48. anchorStrokeWidth: 2
  49. });
  50. layer.add(tr);
  51. tr.attachTo(e.target);
  52. layer.draw();
  53. });
  54. }
  55. return {
  56. stage: stage,
  57. currentLayer: currentLayer,
  58. createLayer: createLayer,
  59. screen: screen,
  60. bootstrap: bootstrap,
  61. layers: layers
  62. };
  63. })();