pontos

app/app.js

@@ -55,7 +55,15 @@ var app = (function() {
         return;
       }
 
-      if (e.target === stage) {
+      var transformEnabled = true;
+
+      if (
+        e.target.attrs.transformEnabled != undefined &&
+        e.target.attrs.transformEnabled == false
+      ) {
+        transformEnabled = false;
+      }
+      if (e.target === stage || !transformEnabled) {
         stage.find("Transformer").destroy();
         layer.draw();
         return;

app/components/circumference.js

@@ -31,7 +31,6 @@ var circunference = (function() {
       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],
@@ -40,7 +39,7 @@ var circunference = (function() {
         stroke: "black",
         strokeWidth: 1,
         strokeScaleEnabled: false,
-        draggable: true,
+        draggable: true
       });
 
       layer.add(circle);

app/components/point.js

@@ -0,0 +1,127 @@
+var point = (function() {
+  // dashed line
+
+  var tool = {};
+
+  var states = ["center"];
+
+  var state = undefined;
+
+  var points = [0, 0];
+
+  var labels = [
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r",
+    "s",
+    "t",
+    "u",
+    "v",
+    "w",
+    "x",
+    "y",
+    "z"
+  ];
+
+  var usedLabels = [];
+
+  function draw() {
+    if (state == undefined) {
+      state = states[0];
+      app.setStatus("Selecione o centro do Ponto");
+    } else if (state == states[0]) {
+      var layer = app.currentLayer();
+      var pos = app.pos();
+      points[0] = pos.x;
+      points[1] = pos.y;
+      var p = points.slice();
+      var label = labels[usedLabels.length];
+      usedLabels.push(label);
+      var group = new Konva.Group({
+        draggable: true,
+        resizeEnabled: false
+      });
+      var circle = new Konva.Circle({
+        x: p[0],
+        y: p[1],
+        radius: 5,
+        fill: "#42f572",
+        stroke: "#33a351",
+        strokeWidth: 1,
+        strokeScaleEnabled: false,
+        draggable: false,
+        resizeEnabled: false,
+        transformEnabled: false
+      });
+      var text = new Konva.Text({
+        x: p[0] + 10,
+        y: p[1] - 10,
+        text: label.toUpperCase(),
+        fontSize: 12,
+        fontFamily: "Calibri",
+        fill: "#434a45",
+        draggable: false,
+        resizeEnabled: false,
+        transformEnabled: false
+      });
+      group.add(circle);
+      group.add(text);
+      layer.add(group);
+      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 centro da Ponto");
+  }
+
+  function clearState() {
+    state = undefined;
+  }
+
+  tool = {
+    id: "point",
+    title: "Ponto",
+    icon: "point",
+    click: click,
+    draw: draw,
+    points: points
+  };
+
+  bootstrap();
+
+  return {
+    draw: draw,
+    click: click
+  };
+})();