stage.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. import { app as App } from "../../app";
  2. import { Layer } from "../drawers/layer";
  3. import { APP_STATE } from "../enums/app-state-enum";
  4. import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
  5. export class Stage {
  6. constructor() {
  7. this.layers = [];
  8. this.layer;
  9. this.konvaStage;
  10. this._bootstrap();
  11. }
  12. addAggregator(aggregator) {
  13. this.layer.addAggregator(aggregator);
  14. }
  15. setKonvaStage(stage) {
  16. this.konvaStage = stage;
  17. this.configureStageEvents(this.konvaStage);
  18. }
  19. createLayer() {
  20. let sequence = 0;
  21. if (this.layers == null || this.layers.length == 0) {
  22. sequence++;
  23. } else {
  24. sequence = this.layers.length + 1;
  25. }
  26. const layer = new Layer(sequence, new Konva.Layer());
  27. this.layers.push(layer);
  28. if (this.getCurrentLayer() == undefined && this.layers.length == 0) {
  29. this.layers = [];
  30. this.layers.push(layer);
  31. }
  32. this.layer = layer;
  33. this.konvaStage.add(this.layer.konvaLayer);
  34. return layer;
  35. }
  36. setCurrentLayer(layer) {
  37. this.layer = layer;
  38. }
  39. getCurrentLayer() {
  40. return this.layer;
  41. }
  42. getCurrentKonvaLayer() {
  43. return this.layer.getKonvaLayer();
  44. }
  45. draw(object) {
  46. if (object == undefined) this.konvaStage.draw();
  47. else {
  48. var layer = this.layer.getKonvaLayer();
  49. this.layer.getKonvaGroup().add(object);
  50. layer.draw();
  51. this.konvaStage.draw(layer);
  52. this.konvaStage.draw();
  53. }
  54. }
  55. _setState(state) {
  56. App.setState(state);
  57. }
  58. configureStageEvents(stage) {
  59. stage.on("mousedown ", this._mouseDown.bind(this));
  60. stage.on("click", this._clickTap.bind(this));
  61. }
  62. _mouseDown(e) {
  63. if (e.target === this.konvaStage) {
  64. this._setState(APP_STATE.NONE);
  65. return;
  66. }
  67. if (e.target.id != undefined) {
  68. if (
  69. e.target.attrs != undefined &&
  70. e.target.attrs.class != ELEMENTS_CLASS.CIRCUMFERENCE
  71. ) {
  72. this._setState(APP_STATE.OBJECT_SELECTED);
  73. } else {
  74. this._setState(APP_STATE.NONE);
  75. }
  76. return;
  77. }
  78. }
  79. _clickTap(e) {
  80. const tool = App.getSelectedTool();
  81. if (tool != undefined) {
  82. tool.draw.bind(tool)(e);
  83. return;
  84. }
  85. if (e.target === this.konvaStage) {
  86. this._setState(APP_STATE.NONE);
  87. return;
  88. }
  89. }
  90. _bootstrap() { }
  91. }