create point with new model

src/app/app.js

@@ -10,7 +10,7 @@ export const app = (function() {
   function _bootstrap() {
     configureStageEvents();
     Selector.bootstrap();
-    requireAll(require.context("./components/", true, /\.js$/));
+    requireAll(require.context("./component-registry/", true, /\.js$/));
     _refreshMenu();
   }
 

src/app/component-registry/point-component.js

@@ -0,0 +1,15 @@
+import { Component } from "../core/models/components/component";
+import { ComponentOptions } from "../core/models/components/component-options";
+import { PointDrawer } from "../components/point-component/drawers/point-drawer";
+class PointComponent extends Component {
+  constructor() {
+    const options = new ComponentOptions(
+      "3c36afc9b5624ea4b05bdc9fb9912ebe",
+      "Point",
+      "point"
+    );
+    super(new PointDrawer(), options);
+  }
+}
+
+export const pointComponent = new PointComponent();

src/app/components/point-component/drawers/point-drawer.js

@@ -0,0 +1,104 @@
+import { Drawer } from "../../../core/drawers/drawer";
+import { ELEMENTS_CLASS } from "../../../core/enums/elements-class-enum";
+import { label as Label } from "../../../component-registry/label";
+import { app as App } from "../../../app";
+import { PointModel } from "../models/point-model";
+const HOVER_STYLE = {
+  fill: "#9bc364",
+  strokeWidth: 2,
+  stroke: "#FF0000"
+};
+const STYLE = {
+  fill: "#9bc364",
+  strokeWidth: 1,
+  stroke: "#9bc364"
+};
+export class PointDrawer extends Drawer {
+  constructor() {
+    super();
+    this.point;
+    this.group;
+    this.label;
+    this.text;
+    this.states = ["center"];
+  }
+  setPoint(point, useLabel) {
+    this.point = point;
+    this.group = this._createGroup();
+    this.circle = this._getCircle(point);
+    this.label = Label.draw();
+    this.text = this._createText(point);
+    this.group.add(this.circle);
+    if (useLabel != undefined && useLabel) {
+      this.group.add(this.text);
+    }
+    this._configureCircleEvents(this.circle);
+  }
+  draw() {
+    if (this.state == undefined) {
+      this.state = this.states[0];
+      App.setStatus("Selecione o centro do Ponto");
+      return;
+    } else if (this.state == this.states[0]) {
+      let pos = App.pos();
+      this.point = new PointModel(pos.x, pos.y);
+      this.setPoint(this.point, true);
+      //   super.addAggregator(new DrawerAggregator(this, this.point));
+      super.draw(this.group);
+      this.clear();
+      return this.group;
+    }
+  }
+  _createGroup() {
+    this.group = new Konva.Group({
+      draggable: true,
+      resizeEnabled: false
+    });
+    return this.group;
+  }
+  _createText(point) {
+    this.text = new Konva.Text({
+      x: point.posX + 10,
+      y: point.posY - 10,
+      text: this.label,
+      fontSize: 12,
+      fontFamily: "Calibri",
+      fill: "#434a45",
+      draggable: false,
+      resizeEnabled: false,
+      transformEnabled: false,
+      selectable: false
+    });
+    return this.text;
+  }
+  _getCircle(point) {
+    return new Konva.Circle({
+      x: point.posX,
+      y: point.posY,
+      radius: 5,
+      fill: STYLE.fill,
+      stroke: STYLE.fill,
+      strokeWidth: 1,
+      strokeScaleEnabled: false,
+      draggable: false,
+      resizeEnabled: false,
+      transformEnabled: false,
+      style: STYLE,
+      class: ELEMENTS_CLASS.POINT,
+      connections: [],
+      listening: true
+    });
+  }
+  _configureCircleEvents(circle) {
+    circle.on("mouseover", function() {
+      this.strokeWidth(HOVER_STYLE.strokeWidth);
+      this.stroke(HOVER_STYLE.stroke);
+      App.stage.draw();
+    });
+    circle.on("mouseout", function() {
+      this.strokeWidth(STYLE.strokeWidth);
+      this.stroke(STYLE.stroke);
+      App.stage.draw();
+    });
+  }
+}

src/app/components/point-component/models/point-model.js

@@ -0,0 +1,10 @@
+import { GeometricObject } from "../../../core/models/objects/geometric-object";
+export class PointModel extends GeometricObject {
+  constructor(posX, posY, label) {
+    super();
+    this.posX = posX;
+    this.posY = posY;
+    this.setLabel(label);
+  }
+  update() {}
+}

src/app/components/point.js

@@ -1,133 +0,0 @@
-import { app as App } from "../app";
-import { label as Label } from "./label";
-import { menu as Menu } from "../core/application/menu";
-import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
-
-const HOVER_STYLE = {
-  fill: "#9bc364",
-  strokeWidth: 2,
-  stroke: "#FF0000"
-};
-
-export const point = (function() {
-  let style = {
-    fill: "#9bc364",
-    strokeWidth: 1,
-    stroke: "#9bc364"
-  };
-  let _tool = {};
-  let states = ["center"];
-  let state = undefined;
-  let points = [0, 0];
-
-  function _draw(e) {
-    if (state == undefined) {
-      state = states[0];
-      App.setStatus("Selecione o centro do Ponto");
-    } else if (state == states[0]) {
-      let pos = App.pos();
-      this.points[0] = pos.x;
-      this.points[1] = pos.y;
-      let p = this.points.slice();
-      this.drawPoint(p[0], p[1], true);
-      state = undefined;
-      App.clearSelectedTool();
-      App.setStatus("");
-    }
-  }
-
-  function _bootstrap() {
-    Menu.add(_tool);
-  }
-
-  function _drawPoint(x, y, useLabel) {
-    let group = new Konva.Group({
-      draggable: true,
-      resizeEnabled: false
-    });
-    let circle = new Konva.Circle({
-      x: x,
-      y: y,
-      radius: 5,
-      fill: "#9bc364",
-      stroke: "#9bc364",
-      strokeWidth: 1,
-      strokeScaleEnabled: false,
-      draggable: false,
-      resizeEnabled: false,
-      transformEnabled: false,
-      style: style,
-      class: ELEMENTS_CLASS.POINT,
-      connections: [],
-      listening: true
-    });
-    // mouse over event
-    circle.on("mouseover", function() {
-      this.strokeWidth(HOVER_STYLE.strokeWidth);
-      this.stroke(HOVER_STYLE.stroke);
-      App.stage.draw();
-    });
-    circle.on("mouseout", function() {
-      this.strokeWidth(style.strokeWidth);
-      this.stroke(style.stroke);
-      App.stage.draw();
-    });
-    let text = new Konva.Text({
-      x: x + 10,
-      y: y - 10,
-      text: Label.draw(),
-      fontSize: 12,
-      fontFamily: "Calibri",
-      fill: "#434a45",
-      draggable: false,
-      resizeEnabled: false,
-      transformEnabled: false,
-      selectable: false
-    });
-    group.add(circle);
-    if (useLabel != undefined && useLabel) {
-      group.add(text);
-    }
-
-    let layer = App.currentLayer();
-    layer.add(group);
-    App.stage.draw();
-
-    App.pushObject(group);
-
-    return group;
-  }
-
-  function _click(e) {
-    if (state == states[0]) {
-      App.clearSelectedTool();
-      _clearState();
-      return;
-    }
-    App.setSelectedTool(_tool);
-    state = states[0];
-    App.setStatus("Selecione o centro da Ponto");
-  }
-
-  function _clearState() {
-    state = undefined;
-  }
-
-  _tool = {
-    id: "point",
-    title: "Ponto",
-    icon: "point",
-    click: _click,
-    draw: _draw,
-    drawPoint: _drawPoint,
-    points: points
-  };
-
-  _bootstrap();
-
-  return {
-    draw: _draw,
-    click: _click,
-    drawPoint: _drawPoint
-  };
-})();

src/app/core/application/menu.js

@@ -1,21 +1,29 @@
 class Menu {
   constructor() {
     this.tools = [];
+    $("#tools").empty();
   }
-  add(tool) {
-    this.tools.push(tool);
+  add(component) {
+    this.tools.push(component);
   }
   refresh() {
-    $("#tools").empty();
-    this.tools.forEach(tool => {
-      $("#tools").append(`<button
-      id="btn-${tool.id}"
-      class="tool icon icon-${tool.id}">
-      <span> ${tool.title} </span></button>`);
-      $("body").on("click", `#btn-${tool.id}`, () => {
-        tool.click(tool.object);
+    this.tools
+      .filter(component => {
+        return component.created == undefined;
+      })
+      .forEach(component => {
+        if (component != undefined && component.created) return;
+        component.created = true;
+        const options = component.options;
+        $("#tools").append(`<button id="btn-${options.id}"
+          class="tool icon icon-${options.icon}">
+          <span> ${options.title} </span></button>`);
+        $("body").on(
+          "click",
+          `#btn-${options.id}`,
+          component.click.bind(component)
+        );
       });
-    });
   }
 }
 export const menu = new Menu();

src/app/core/models/drawers/drawer-aggregator.js

@@ -1,12 +1,12 @@
 export class DrawerAggragator {
-  constructor() {
-    this.geometricObject;
-    this.konvaObject;
+  constructor(drawer, geometricObject) {
+    this.drawer = drawer;
+    this.geometricObject = geometricObject;
   }
   setGeometricObject(geometricObject) {
     this.geometricObject = geometricObject;
   }
-  setKonvaObject(konvaObject) {
+  setDrawer(konvaObject) {
     this.konvaObject = konvaObject;
   }
 }

src/app/core/drawers/drawer-manager.js

@@ -0,0 +1,20 @@
+import { Stage } from "../drawers/stage";
+
+class DrawerManager {
+  constructor() {
+    this.currentStage = this.newStage();
+    this.stages = [this.currentStage];
+  }
+  newStage() {
+    const stage = new Stage();
+    stage.newStage();
+    return stage;
+  }
+  getStages() {
+    this.stages;
+  }
+  draw(object) {
+    this.currentStage.draw(object);
+  }
+}
+export const drawerManager = new DrawerManager();

src/app/core/drawers/drawer.js

@@ -0,0 +1,29 @@
+import { drawerManager as DrawerManager } from "./drawer-manager";
+import { app as App } from "../../app";
+export class Drawer {
+  constructor() {
+    this.component;
+    this.drawerManager = DrawerManager;
+    this.drawing = false;
+    this.states = [];
+    this.state = undefined;
+  }
+  onDragMove() {}
+  clearState() {
+    this.state = undefined;
+  }
+  setStatus(status) {
+    App.setStatus(status);
+  }
+  clear() {
+    this.clearState();
+    App.clearSelectedTool();
+    this.setStatus("");
+  }
+  addAggregator(aggregator) {
+    this.drawerManager.addAggregator(aggregator);
+  }
+  draw(object) {
+    this.drawerManager.draw(object);
+  }
+}

src/app/core/drawers/stage.js

@@ -0,0 +1,33 @@
+import { stages as Stages } from "../application/stages";
+import { app as App } from "../../app";
+export class Stage {
+  constructor() {
+    this.konvaLayer;
+    this.konvaStage;
+    this.aggregators = [];
+    this._bootstrap();
+  }
+  addAggregator(aggregator) {
+    this.aggregators.push(aggregator);
+  }
+  setStage(stage) {
+    this.konvaStage = stage;
+  }
+  newStage() {
+    this.konvaStage = Stages.getCurrentStage();
+    this.konvaLayer = Stages.getCurrentLayer();
+    return this.konvaStage;
+  }
+  draw(object) {
+    if (object == undefined) this.konvaStage.draw();
+    else {
+      this.konvaLayer.add(object);
+      this.konvaStage.draw(this.konvaLayer);
+      //todo: remove this from Drawer delegate to Stages
+      App.pushObject(object);
+    }
+  }
+  _bootstrap() {
+    this.newStage();
+  }
+}

src/app/core/models/components/component-options.js

@@ -1,8 +1,8 @@
 export class ComponentOptions {
-  constructor(id) {
+  constructor(id, title, icon) {
     this.id = id;
-    this.title;
+    this.title = title;
+    this.icon = icon;
     this.description;
-    this.icon;
   }
 }

src/app/core/models/components/component.js

@@ -1,11 +1,26 @@
+import { menu as Menu } from "../../application/menu";
+import { app as App } from "../../../app";
 export class Component {
-  constructor(options) {
+  constructor(drawer, options) {
     this.options = options;
-    this.geometricObject;
+    // this.genericObject;
     this.states;
     this.drawer;
+    this.setDrawer(drawer);
+    this._bootstrap();
+  }
+  _bootstrap() {
+    if (this.options == undefined) return;
+    Menu.add(this);
+  }
+  setDrawer(drawer) {
+    this.drawer = drawer;
   }
   draw() {
-    this.drawe.draw();
+    this.drawer.draw();
+  }
+  click() {
+    App.setSelectedTool(this);
+    this.draw();
   }
 }

src/app/core/models/drawers/drawer-manager.js

@@ -1,8 +0,0 @@
-import { Stage } from "../drawers/stage";
-
-export class DrawerManager {
-  constructor() {
-    this.stage = new Stage();
-    this.stage.newStage();
-  }
-}

src/app/core/models/drawers/drawer.js

@@ -1,10 +0,0 @@
-import { DrawerManager } from "./drawer-manager";
-
-export class Drawer {
-  constructor() {
-    this.component;
-    this.drawerManager = new DrawerManager();
-    this.drawing = false;
-  }
-  onDragMove() {}
-}

src/app/core/models/drawers/stage.js

@@ -1,12 +0,0 @@
-export class Stage {
-  constructor() {
-    this.currentLayer;
-    this.stage;
-  }
-  setStage(stage) {
-    this.stage = stage;
-  }
-  static newStage() {
-    throw "not implemented exceptio";
-  }
-}

src/app/core/models/objects/dynamic-object.js

@@ -2,8 +2,16 @@ import { GenericObject } from "./generic-object";
 
 export class DynamicObject extends GenericObject {
   constructor() {
+    super();
     this.label;
     this.dependencies = [];
   }
-  setLabel()
+  setLabel(label) {
+    if (label != undefined) {
+      this.label = label;
+    }
+  }
+  addDependency(dynamicObject) {
+    this.dependencies = dynamicObject;
+  }
 }

src/app/core/models/objects/geometric-object.js

@@ -2,6 +2,7 @@ import { DynamicObject } from "./dynamic-object";
 
 export class GeometricObject extends DynamicObject {
   constructor() {
+    super();
     this.borderColor;
     this.backgroundColor;
     this.edgeThinckness;

src/app/components/line-segment.js

@@ -27,8 +27,6 @@ export class LineSegment {
   }
 
   draw(event) {
-    console.log("chamou o método draw()");
-    console.log("evento: ", event);
     let _this = this;
     if (event != null) {
       _this = event;
@@ -71,7 +69,6 @@ export class LineSegment {
   }
 
   click(e) {
-    console.log("chamou o método click()");
     let _this = e;
     if (e == undefined) {
       _this = this;