circunferencias

app/app.js

@@ -7,7 +7,6 @@ var app = (function() {
   var menu = [];
   var layer = undefined;
   var _selectedTool = [];
-  var group = undefined;
 
   var stage = new Konva.Stage({
     container: "container",
@@ -33,14 +32,14 @@ var app = (function() {
       _layer = [];
       _layer.push(layer);
     }
+    stage.add(layer.layer);
     return layer;
   }
 
   function bootstrap() {
     createLayer();
-    configureDragAndDrop();
+    configureStageEvents();
     layer = currentLayer();
-    configureGroup();
   }
 
   function currentLayer() {
@@ -48,11 +47,12 @@ var app = (function() {
     return _layer[0].layer;
   }
 
-  function configureDragAndDrop() {
+  function configureStageEvents() {
     stage.on("click tap", function(e) {
       var tool = getSelectedTool();
-      if (tool != undefined && (e.target == undefined || e.target === stage)) {
+      if (tool != undefined) {
         tool.draw();
+        return;
       }
 
       if (e.target === stage) {
@@ -72,21 +72,21 @@ var app = (function() {
     });
   }
 
-  function configureGroup() {
-    group = new Konva.Group({
-      x: 30,
-      rotation: 10,
-      scaleX: 1.5
-    });
-    layer.add(group);
-  }
-
   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("");
   }

app/components/circumference.js

@@ -0,0 +1,89 @@
+var circunference = (function() {
+  // dashed line
+
+  var tool = {};
+
+  var states = ["center", "radius"];
+
+  var state = undefined;
+
+  var coordinates = [0, 0, 0, 0];
+
+  var points = [0, 0, 0];
+
+  function draw() {
+    if (state == undefined) {
+      state = states[0];
+      app.setStatus("Selecione o centro da Circunferência");
+    } else if (state == states[0]) {
+      var pos = app.pos();
+      coordinates[0] = pos.x;
+      coordinates[1] = pos.y;
+      state = states[1];
+      app.setStatus("Selecione o raio da Circunferência");
+    } else if (state == states[1]) {
+      var layer = app.currentLayer();
+      var pos = app.pos();
+      coordinates[2] = pos.x;
+      coordinates[3] = pos.y;
+      var legA = coordinates[2] - coordinates[0];
+      legB = coordinates[1] - coordinates[3];
+      var radius = Math.sqrt(Math.pow(legA, 2)) + Math.sqrt(Math.pow(legB, 2));
+      points = [coordinates[0], coordinates[1], radius];
+      var p = points.slice();
+      console.log(p);
+      var circle = new Konva.Circle({
+        x: p[0],
+        y: p[1],
+        radius: p[2],
+        fill: "transparent",
+        stroke: "black",
+        strokeWidth: 1,
+        strokeScaleEnabled: false
+      });
+
+      layer.add(circle);
+      app.stage.draw();
+
+      clearState();
+      app.clearSelectedTool();
+      app.setStatus("");
+    }
+  }
+
+  function bootstrap() {
+    app.tools.push(tool);
+  }
+
+  function click(id) {
+    if (state == states[0]) {
+      app.clearSelectedTool();
+      clearState();
+      return;
+    }
+    app.setSelectedTool(tool);
+    state = states[0];
+    app.setStatus("Selecione o primeiro ponto no canvas");
+  }
+
+  function clearState() {
+    state = undefined;
+  }
+
+  tool = {
+    id: "circunference",
+    title: "Circunferência",
+    icon: "line",
+    click: click,
+    draw: draw,
+    points: points,
+    coordinates: coordinates
+  };
+
+  bootstrap();
+
+  return {
+    draw: draw,
+    click: click
+  };
+})();

app/components/line.js

@@ -9,7 +9,7 @@ var line = (function() {
 
   var points = [0, 0, 0, 0];
 
-  function drawLine() {
+  function draw() {
     if (state == undefined) {
       state = states[0];
       app.setStatus("Selecione o primeiro ponto no canvas");
@@ -35,10 +35,10 @@ var line = (function() {
 
       var layer = app.currentLayer();
       layer.add(ln);
-      app.stage.add(layer);
 
       app.stage.draw();
-      state = undefined;
+      
+      clearState();
       app.clearSelectedTool();
       app.setStatus("");
     }
@@ -48,25 +48,34 @@ var line = (function() {
     app.tools.push(tool);
   }
 
-  function onClick() {
+  function click() {
+    if (state == states[0] || state == states[1]) {
+      app.clearSelectedTool();
+      clearState();
+      return;
+    }
     app.setSelectedTool(tool);
     state = states[0];
     app.setStatus("Selecione o primeiro ponto no canvas");
   }
 
+  function clearState() {
+    state = undefined;
+  }
+
   tool = {
-    id: "reta",
+    id: "line",
     title: "Reta",
     icon: "line",
-    click: onClick,
-    draw: drawLine,
+    click: click,
+    draw: draw,
     points: points
   };
 
   bootstrap();
 
   return {
-    drawLine: drawLine,
-    onClick: onClick
+    draw: draw,
+    click: click
   };
 })();

index.html

@@ -8,16 +8,24 @@
   </head>
   <body>
     <div id="tool-bar">
-      <button onclick="line.onClick()">Desenhar reta</button>
-      
+      <button id="btn-point" onclick="point.click()">Desenhar Ponto</button>
+      <button id="btn-line" onclick="line.click()">Desenhar Reta</button>
+      <button id="btn-circunference" onclick="circunference.click()">
+        Desenhar Circunferência
+      </button>
+
       <span id="status"> </span>
     </div>
     <div id="container"></div>
     <script src="https://unpkg.com/konva@3.3.3/konva.min.js"></script>
     <script src="app/app.js"></script>
     <script src="app/components/line.js"></script>
+    <script src="app/components/point.js"></script>
+    <script src="app/components/circumference.js"></script>
     <script>
       app.bootstrap();
     </script>
+
+
   </body>
 </html>