Implement Point onHover effect

src/app/components/point.js

@@ -2,6 +2,13 @@ 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",
@@ -51,7 +58,19 @@ export const point = (function() {
       transformEnabled: false,
       style: style,
       class: ELEMENTS_CLASS.POINT,
-      connections: []
+      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,