Merge branch 'feature/new-model' into develop

src/app/app.js

@@ -1,16 +1,16 @@
 import { APP_STATE } from "./core/enums/app-state-enum";
-import { stages as Stages } from "./core/components/stages";
-import { objects as Objects } from "./core/components/objects";
-import { state as State } from "./core/components/state";
-import { selector as Selector } from "./core/components/selector";
-import { menu as Menu } from "./core/components/menu";
+import { stages as Stages } from "./core/application/stages";
+import { objects as Objects } from "./core/application/objects";
+import { state as State } from "./core/application/state";
+import { selector as Selector } from "./core/application/selector";
+import { menu as Menu } from "./core/application/menu";
 export const app = (function() {
   let _selectedTool = [];
   let _stage = _createStage();
   function _bootstrap() {
     configureStageEvents();
     Selector.bootstrap();
-    requireAll(require.context("./components/", true, /\.js$/));
+    requireAll(require.context("./component-registry/", true, /\.js$/));
     _refreshMenu();
   }
 
@@ -34,9 +34,11 @@ export const app = (function() {
       }
     });
     _stage.on("click tap", function(e) {
-      let tool = _getSelectedTool();
+      const tool = _getSelectedTool();
+      console.info("state", State.getCurrentState());
       if (tool != undefined) {
-        tool.draw(tool.object);
+        const fun = tool.draw.bind(tool);
+        fun();
         return;
       }
       if (e.target === _stage) {

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,107 @@
+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";
+import { DrawerAggragator } from "../../../core/drawers/drawer-aggregator";
+
+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) {
+      super.setState(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 DrawerAggragator(this, this.point));
+      super.draw(this.group);
+      super.setState(this.states[0]);
+      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();
+    });
+  }
+  update() {}
+}

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 "../components/label";
-import { menu as Menu } from "../core/components/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/application.js

@@ -0,0 +1,12 @@
+import { menu } from "../../core/application/menu";
+export class Application {
+  constructor() {
+    this.stages = [];
+    this.actions = [];
+    this.menu = menu;
+  }
+  bootstrap() {}
+  registryComponent(component) {
+    menu.add(component);
+  }
+}

src/app/core/application/menu.js

@@ -0,0 +1,29 @@
+class Menu {
+  constructor() {
+    this.tools = [];
+    $("#tools").empty();
+  }
+  add(component) {
+    this.tools.push(component);
+  }
+  refresh() {
+    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/components/selector.js

@@ -1,8 +1,9 @@
 import { APP_STATE } from "../enums/app-state-enum";
-import { stages as Stages } from "../components/stages";
-import { state as State } from "../components/state";
-import { objects as Objects } from "../components/objects";
+import { stages as Stages } from "../application/stages";
+import { state as State } from "../application/state";
+import { objects as Objects } from "../application/objects";
 import { ELEMENTS_CLASS } from "../enums/elements-class-enum";
+import { app as App } from "../../app";
 export class Selector {
   constructor() {
     this._objects = [];
@@ -67,6 +68,7 @@ export class Selector {
 
   updateDragSelector(posIn) {
     if (State.getCurrentState() != APP_STATE.NONE) return;
+    App.clearSelectedTool();
     let currentObjects = Objects.get();
     let posRect = this.reverse(this._selectorPosStart, this._selectorPosNow);
     this._selectorPosNow = { x: posIn.x, y: posIn.y };

src/app/core/components/menu.js

@@ -1,21 +0,0 @@
-class Menu {
-  constructor() {
-    this.tools = [];
-  }
-  add(tool) {
-    this.tools.push(tool);
-  }
-  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);
-      });
-    });
-  }
-}
-export const menu = new Menu();

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

@@ -0,0 +1,15 @@
+export class DrawerAggragator {
+  constructor(drawer, geometricObject) {
+    this.drawer = drawer;
+    this.genericObject = geometricObject;
+  }
+  setGeometricObject(genericObject) {
+    this.genericObject = genericObject;
+  }
+  setDrawer(drawer) {
+    this.drawer = drawer;
+  }
+  update() {
+    this.drawer.update();
+  }
+}

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

@@ -0,0 +1,21 @@
+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);
+  }
+  addAggregator(aggregator) {}
+}
+export const drawerManager = new DrawerManager();

src/app/core/drawers/drawer.js

@@ -0,0 +1,35 @@
+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() {}
+  setState(state) {
+    this.state = state;
+  }
+  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);
+  }
+  update() {
+    throw "Not implemented exception";
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+import { menu as Menu } from "../../application/menu";
+import { app as App } from "../../../app";
+export class Component {
+  constructor(drawer, options) {
+    this.options = options;
+    // 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.drawer.draw();
+  }
+  click() {
+    App.setSelectedTool(this);
+    this.draw();
+  }
+}

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

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

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

@@ -0,0 +1 @@
+export class GenericObject {}

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

@@ -0,0 +1,22 @@
+import { DynamicObject } from "./dynamic-object";
+
+export class GeometricObject extends DynamicObject {
+  constructor() {
+    super();
+    this.borderColor;
+    this.backgroundColor;
+    this.edgeThinckness;
+  }
+  setBorderColor(color) {
+    this.borderColor = color;
+  }
+  setBackgroundColor(color) {
+    this.backgroundColor = color;
+  }
+  setEdgeThinckness(edgeThinckness) {
+    this.edgeThinckness = edgeThinckness;
+  }
+  update() {
+    throw "not implemented exception";
+  }
+}

src/app/models/point-model.js

@@ -1 +0,0 @@
-export class Point {}

src/app/components/circumference.js

@@ -1,5 +1,5 @@
 import { app as App } from "../app";
-import { menu as Menu } from "../core/components/menu";
+import { menu as Menu } from "../core/application/menu";
 export const circumference = (function() {
   let _tool = {};
   let _states = ["center", "radius"];

src/app/components/line-segment.js

@@ -1,17 +1,16 @@
 import { app as App } from "../app";
-import { menu as Menu } from "../core/components/menu";
+import { menu as Menu } from "../core/application/menu";
 import { point as Point } from "./point";
-import { selector as Selector } from "../core/components/selector";
+import { selector as Selector } from "../core/application/selector";
 import { ELEMENTS_CLASS } from "../core/enums/elements-class-enum";
 export class LineSegment {
-
-  static get STATE_PRIMEIRO_PONTO () {
+  static get STATE_PRIMEIRO_PONTO() {
     return "primeiro_ponto";
   }
-  static get STATE_SEGUNDO_PONTO () {
+  static get STATE_SEGUNDO_PONTO() {
     return "segundo_ponto";
   }
-  
+
   constructor() {
     this._state = undefined;
     this._points = new Set();
@@ -27,24 +26,22 @@ export class LineSegment {
     this.bootstrap();
   }
 
-  draw (event) {
-    console.log("chamou o método draw()");
-    console.log("evento: ", event);
+  draw(event) {
     let _this = this;
-    if(event != null) {
+    if (event != null) {
       _this = event;
     }
-    if(_this._state == null) {
+    if (_this._state == null) {
       _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
       _this._points.clear();
       App.setStatus("Selecione o primeiro ponto no canvas");
     } else if (_this._state === LineSegment.STATE_PRIMEIRO_PONTO) {
       const pos = App.pos();
-      _this._points.add({x: pos.x, y: pos.y});
+      _this._points.add({ x: pos.x, y: pos.y });
       _this._state = LineSegment.STATE_SEGUNDO_PONTO;
     } else if (_this._state === LineSegment.STATE_SEGUNDO_PONTO) {
       const pos = App.pos();
-      _this._points.add({x: pos.x, y: pos.y});
+      _this._points.add({ x: pos.x, y: pos.y });
       _this.drawPoint(_this._points);
       _this._points.clear();
       _this._state = LineSegment.STATE_PRIMEIRO_PONTO;
@@ -72,13 +69,14 @@ export class LineSegment {
   }
 
   click(e) {
-    console.log("chamou o método click()");
     let _this = e;
     if (e == undefined) {
       _this = this;
     }
-    if (_this._state == LineSegment.STATE_PRIMEIRO_PONTO ||
-      _this._state == LineSegment.STATE_SEGUNDO_PONTO) {
+    if (
+      _this._state == LineSegment.STATE_PRIMEIRO_PONTO ||
+      _this._state == LineSegment.STATE_SEGUNDO_PONTO
+    ) {
       App.clearSelectedTool();
       _this.clearState();
       return;
@@ -91,7 +89,10 @@ export class LineSegment {
     ) {
       const layer = App.currentLayer();
       const point_groups = new Set(objects.map(object => object.parent));
-      const points_xy = objects.reduce((prev, next) => prev.concat([next.x(), next.y()]), []);
+      const points_xy = objects.reduce(
+        (prev, next) => prev.concat([next.x(), next.y()]),
+        []
+      );
       let ln = _this.createLine(points_xy);
       _this.attachPoints(ln, point_groups);
       layer.add(ln);
@@ -110,25 +111,26 @@ export class LineSegment {
     this._points.clear();
   }
 
-  drawPoint (p) {
+  drawPoint(p) {
     const points = Array.from(p).map(xy => {
       return Point.drawPoint(xy.x, xy.y, true);
     });
-    const points_xy = points.map( group => this.getPoint(group))
+    const points_xy = points
+      .map(group => this.getPoint(group))
       .reduce((prev, next) => prev.concat([next.x(), next.y()]), []);
     let ln = this.createLine(points_xy);
     let layer = App.currentLayer();
     this.attachPoints(ln, points);
     layer.add(ln);
     App.stage.draw();
-    
+
     //this.clearState();
     //App.clearSelectedTool();
     //App.setStatus("");
     return ln;
   }
 
-  createLine (points) {
+  createLine(points) {
     return new Konva.Line({
       points: points,
       stroke: "grey",
@@ -141,31 +143,31 @@ export class LineSegment {
     });
   }
 
-  getPoint (group) {
+  getPoint(group) {
     const point_collection = group.find(node => {
-      return node.getClassName() === 'Circle';
+      return node.getClassName() === "Circle";
     });
     return point_collection.toArray()[0];
   }
 
-  attachPoints (line, points) {
-    line._parents = []
-    points.forEach( (p, idx)=> {
+  attachPoints(line, points) {
+    line._parents = [];
+    points.forEach((p, idx) => {
       line._parents.push(p);
       const point = this.getPoint(p);
       point._name = idx;
-      if(!p._parents) {
+      if (!p._parents) {
         p._children = [];
       }
       p._children.push(line);
-      p.on('dragmove', () => {
+      p.on("dragmove", () => {
         App.clearSelectedTool();
         this.clearState();
         const current_points = line.points();
         const new_point = this.getPoint(p);
         const new_x = new_point.x() + p.x();
         const new_y = new_point.y() + p.y();
-        if(new_point._name == 0) {
+        if (new_point._name == 0) {
           // pos 0 ,1
           current_points[0] = new_x;
           current_points[1] = new_y;
@@ -176,7 +178,7 @@ export class LineSegment {
         line.points(current_points);
         //App.stage.draw();
       });
-    })
+    });
   }
 
   bootstrap() {