Index: imaps-frontend/src/scripts/shapes/Entrance.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Entrance.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/scripts/shapes/Entrance.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,58 +1,88 @@
-import Konva from "konva";
-import MapShape from "./MapShape";
-import { _registerNode } from "konva/lib/Global";
-export default class Entrance extends MapShape {
-  constructor(mousePos, blockSize, layer, rotation, snap,id,scaleX = 1, scaleY = 1) {
-    super(
-      {
-        x: mousePos.x,
-        y: mousePos.y,
-        width: blockSize * scaleX,
-        height: blockSize * 2 * scaleY,
-        fill: "#0051ff",
-        stroke: "grey",
-        strokeWidth: 1,
-        opacity: 0.7,
-        name: "mapObj",
-        draggable: true,
-        rotation: rotation,
-        zIndex: 1,
-      },
-      layer,
-      blockSize,
-      snap
-    );
-    this.type = "Entrance";
-    this.modalEventName = "openEntranceModalEvent";
+import {_registerNode} from "konva/lib/Global";
+import MapNode from "../base/MapNode.js";
+import {node} from "prop-types";
 
-    this.id = id;
+export default class Entrance extends MapNode {
 
-    this._info = {
-      name: `Entrance ${id}`,
-      connectedRoom: "",
-      description: "",
-      isMainEntrance: false,
-      selectedPin: "",
-      selectedPins: [],
-    };
+    constructor(attrs, id) {
 
-    this.initText();
-  }
+        if (!attrs.fromLoad) {
+            attrs.height *= 2;
+        }
+        super(
+            {
+                x: attrs.position.x,
+                y: attrs.position.y,
+                width: attrs.width,
+                height: attrs.height,
+                fill: "rgb(126,238,167)",
+                stroke: "#252627",
+                strokeWidth: 1,
+                opacity: 0.9,
+                name: "mapObj",
+                draggable: true,
+                rotation: attrs.rotation,
+                zIndex: 1,
+            },
+            attrs.layer,
+            attrs.blockSize,
+            attrs.snap
+        );
+        this.type = "Entrance";
+        this.eventName = "openEntranceModalEvent";
+        this.floorNum = attrs.floorNum
 
-  loadInfo(attrs) {
-    this.info.name = attrs.obj_name;
-    this.info.connectedRoom = attrs.connected_room;
-    this.info.description = attrs.description;
-    this.info.isMainEntrance = attrs.is_main_entrance;
-    this.info.selectedPins = attrs.connected_pins;
-  }
+        this.id = id;
 
-  saveShapeDetails() {
-    this.setAttr("connected_pins", this.info.selectedPins);
-    this.setAttr("obj_name", this.info.name);
-    this.setAttr("description", this.info.description);
-    this.setAttr("is_main_entrance", this.info.isMainEntrance);
-    this.setAttr("connected_room", this.info.connectedRoom);
-  }
+        this._info = {
+            name: `Entrance${id} [${this.floorNum}F]`,
+            connectedRoom: "",
+            description: "",
+            isMainEntrance: false,
+            selectedPin: "",
+            selectedPins: [],
+        };
+
+        this.initText();
+        this.moveToTop();
+    }
+
+    loadInfo(attrs) {
+        this.info.name = attrs.obj_name;
+        this.info.connectedRoom = attrs.connected_room;
+        this.info.description = attrs.description;
+        this.info.isMainEntrance = attrs.is_main_entrance;
+        this.info.selectedPins = attrs.connected_pins;
+        this.floorNum = attrs.floor_num;
+    }
+
+    saveShapeDetails() {
+        console.info("fnum entrance",this.attrs.floorNum)
+
+        this.setAttr("connected_pins", this.info.selectedPins);
+        this.setAttr("obj_name", this.info.name);
+        this.setAttr("description", this.info.description);
+        this.setAttr("is_main_entrance", this.info.isMainEntrance);
+        this.setAttr("connected_room", this.info.connectedRoom);
+        this.setAttr("floor_num",this.floorNum);
+    }
+
+    connect(node, draw = true) {
+        if(this.floorNum !== node.floorNum) return;
+
+        super.connect(node)
+    }
+
+    setInfo(infoObj) {
+        console.log("SA VIKNA SETINFO")
+        this.info = infoObj;
+        if(this.info.connectedRoom == null || this.info.connectedRoom === "" ){
+            this.strokeWidth(2);
+            this.stroke("#a10114")
+        }else{
+            this.strokeWidth(1)
+            this.stroke("black")
+        }
+    }
 }
 
Index: imaps-frontend/src/scripts/shapes/InfoPin.js
===================================================================
--- imaps-frontend/src/scripts/shapes/InfoPin.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/scripts/shapes/InfoPin.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,32 +1,35 @@
-import Konva from "konva";
-import MapShape from "./MapShape";
-import Factory from "../util/Factory";
+
 import { _registerNode } from "konva/lib/Global";
-export default class InfoPin extends MapShape {
-  constructor(mousePos, blockSize, layer, snappable,id) {
+import MapNode from "../base/MapNode.js";
+import {node} from "prop-types";
+import draw from "../../pages/Draw/Draw.jsx";
+export default class InfoPin extends MapNode {
+  constructor(attrs,id) {
+    attrs.snap = false;
     super(
       {
-        x: mousePos.x,
-        y: mousePos.y,
-        radiusX: blockSize * 0.5,
-        radiusY: blockSize * 0.7,
-        tailHeight: blockSize * 1.2,
-        fill: "#d70113",
+        x: attrs.position.x,
+        y: attrs.position.y,
+        radiusX: attrs.blockSize * 0.5,
+        radiusY: attrs.blockSize * 0.7,
+        tailHeight: attrs.blockSize * 1.2,
+        fill: "#f60000",
         stroke: "#1b1b1b",
-        strokeWidth: 0.2,
+        strokeWidth: 1,
         draggable: true,
         name: "mapObj",
       },
-      layer,
-      blockSize,
-      snappable
+      attrs.layer,
+      attrs.blockSize,
+      attrs.snap
     );
 
     this.id = id;
+    this.eventName = "openPinModalEvent";
+    this.floorNum = attrs.floorNum;
 
-    this.modalEventName = "openPinModalEvent";
     this.type = "InfoPin";
     this._info = {
-      name: `Pin ${id}`,
+      name: `Pin${id} [${this.floorNum}F]`,
       selectedPins: [],
       description: "",
@@ -34,14 +37,15 @@
 
     this.on("mouseover", () => {
-      this.fill("yellow");
+      this.fill("#FFD700");
     });
     this.on("mouseout", () => {
-      this.fill("red");
+      this.fill("#f60000");
     });
+
 
     this.initText();
   }
   _sceneFunc(context, shape) {
-    const { radiusX, radiusY, tailHeight } = this.attrs;
+    const { radiusX, radiusY, tailHeight } = this.attrs; // attrs od konva
 
     context.beginPath();
@@ -59,8 +63,10 @@
   }
 
+
   loadInfo(attrs) {
     this.info.name = attrs.obj_name;
     this.info.selectedPins = attrs.connected_pins;
     this.info.description = attrs.description;
+    this.floorNum = attrs.floor_num
   }
 
@@ -69,5 +75,11 @@
     this.setAttr("connected_pins", this.info.selectedPins);
     this.setAttr("description", this.info.description);
+    this.setAttr("floor_num",this.floorNum)
     console.log(this.info, "vnatre vo info");
+  }
+
+  connect(node, draw = true) {
+    if(this.floorNum !== node.floorNum) return;
+    super.connect(node)
   }
 }
Index: imaps-frontend/src/scripts/shapes/MapShape.js
===================================================================
--- imaps-frontend/src/scripts/shapes/MapShape.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,123 +1,0 @@
-import Konva from "konva";
-
-export default class MapShape extends Konva.Shape {
-    constructor(config, layer, blockSize, snap) {
-        if (new.target === MapShape) {
-            throw new Error("Cannot instantiate abstract class BaseShape directly.");
-        }
-        super(config);
-        this.layer = layer;
-        this.blockSize = blockSize;
-        this._type = "";
-        this.snappable = snap;
-        this._info = {};
-        this.modalEventName = "";
-        this.infoText = null;
-
-        this.shadowForStrokeEnabled(false);
-        this.on("mouseover", () => (document.body.style.cursor = "pointer"));
-        this.on("mouseout", () => (document.body.style.cursor = "default"));
-        // this.on("dblclick", (e) => {
-        //   this.moveToTop();
-        //   this.getLayer()
-        //     .find("Transformer")
-        //     .forEach((t) => t.moveToTop());
-        // });
-
-        if (snap) {
-            this.on("dragend", this.snapToGrid.bind(this));
-            this.on('dblclick', this.snapToGrid.bind(this))
-        }
-
-        this.on("transform", () => {
-            const scaleX = this.scaleX();
-            const scaleY = this.scaleY();
-            this.strokeWidth(1 / Math.max(scaleX, scaleY));
-        });
-
-        this.on('dragend', () => {
-            if (this.infoText) {
-                this.updateTextPosition();
-            }
-        });
-
-    }
-
-    loadInfo(attrs) {
-        console.log("Abstract function");
-    }
-
-
-    initText() {
-        this.textOffsetX = 0;
-        this.textOffsetY = -30;
-        this.infoText = new Konva.Text({
-            x: this.x() + this.textOffsetX,
-            y: this.y() + this.textOffsetY,
-            text: this._info.name,
-            fontSize: 12,
-            fontFamily: 'Verdana',
-            fill: 'white',
-        });
-    }
-
-    updateTextPosition() {
-        if (this.infoText) {
-            this.infoText.x(this.x() + this.textOffsetX);
-            this.infoText.y(this.y() + this.textOffsetY);
-        }
-    }
-
-    displayName(layer) {
-        if (this.infoText) {
-            this.infoText.text(this._info.name);
-            layer.add(this.infoText);
-        }
-    }
-
-    _sceneFunc(context) {
-        let width = this.width();
-        let height = this.height();
-        context.beginPath();
-        context.rect(0, 0, width, height)
-        context.closePath();
-        context.fillStrokeShape(this);
-    }
-
-    clearText() {
-        if (this.infoText !== null) {
-            this.infoText.remove()
-            console.log("cleared text")
-        }
-
-    }
-
-    snapToGrid() {
-        this.position({
-            x: Math.round(this.x() / this.blockSize) * this.blockSize,
-            y: Math.round(this.y() / this.blockSize) * this.blockSize,
-        });
-    }
-
-    saveShapeDetails() {
-        console.log("This shape does not contain information");
-    }
-
-
-    get info() {
-        return this._info;
-    }
-
-    set info(formData) {
-        this._info = formData;
-    }
-
-    get type() {
-        return this._type;
-    }
-
-    set type(type) {
-        this._type = type
-    }
-
-}
Index: imaps-frontend/src/scripts/shapes/Room.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Room.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/scripts/shapes/Room.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,27 +1,36 @@
 import Konva from "konva";
-import MapShape from "./MapShape";
+import MapShape from "../base/MapShape.js";
 import { _registerNode } from "konva/lib/Global";
 export default class Room extends MapShape {
-  constructor(mousePos, blockSize, layer, rotation, snap, id, scaleX = 1, scaleY = 1){
+  constructor(attrs,id){
+
+      if(!attrs.fromLoad){
+          attrs.width *= 12;
+          attrs.height *= 8;
+      }
+
+      console.log(attrs.position,"hehe")
     super(
       {
-        x: mousePos.x,
-        y: mousePos.y,
-        width: blockSize * 8 * scaleX,
-        height: blockSize * 4 * scaleY,
-        fill: "#DDE0F8",
+        x: attrs.position.x,
+        y: attrs.position.y,
+        width: attrs.width * attrs.scaleX,
+        height: attrs.height * attrs.scaleY,
+        fill: "rgb(86,168,253)",
         stroke: "grey",
         strokeWidth: 1,
         name: "mapObj",
-        rotation: rotation,
+        rotation: attrs.rotation,
         draggable: true,
       },
-      layer,
-      blockSize,
-      snap
+        attrs.layer,
+        attrs.blockSize,
+        attrs.snap
     );
 
+      this.floorNum = attrs.floorNum;
+
     this._info = {
-      name: `Room ${id}`,
+      name: `Room${id} [${this.floorNum}F]`,
       type: "",
       description: "",
@@ -29,5 +38,5 @@
 
     this.type = "Room";
-    this.modalEventName = "openRoomModalEvent";
+    this.eventName = "openRoomModalEvent";
     this.id = id;
 
@@ -39,4 +48,5 @@
     this.info.type = attrs.room_type;
     this.info.description = attrs.description;
+    this.floorNum = attrs.floor_num;
   }
 
@@ -45,4 +55,5 @@
     this.setAttr("room_type", this.info.type);
     this.setAttr("description", this.info.description);
+    this.setAttr("floor_num",this.floorNum);
   }
 }
Index: imaps-frontend/src/scripts/shapes/Stairs.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Stairs.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/scripts/shapes/Stairs.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,4 +1,78 @@
 import Konva from "konva";
-import { MapShape } from "./MapShape";
+import MapNode from "../base/MapNode.js";
+import {_registerNode} from "konva/lib/Global.js";
+import Room from "./Room.js";
+export default class Stairs extends MapNode{
+    constructor(attrs,id) {
 
+        if(!attrs.fromLoad){
+            attrs.width *= 4;
+        }
+
+        super({
+                x: attrs.position.x,
+                y: attrs.position.y,
+                width: attrs.width * attrs.scaleX,
+                height: attrs.height * attrs.scaleY,
+                fill: "rgb(225,213,124)",
+                stroke: "rgb(16,15,15)",
+                strokeWidth: 1,
+                name: "mapObj",
+                rotation: attrs.rotation,
+                draggable: true
+            },
+            attrs.layer,
+            attrs.blockSize,
+            attrs.snap
+        );
+
+        this.floorNum = attrs.floorNum;
+
+        this.type = "Stairs"
+        this._info = {
+            name: `Stairs${id} [${this.floorNum}F]`,
+            description: "",
+            selectedPins: []
+        };
+
+        this.id = id;
+        this.eventName = "openStairsModalEvent";
+        this.initText();
+    }
+
+
+    _sceneFunc(context, shape) {
+        const { width, height} = this.attrs;
+
+        let steps = 5;
+        context.beginPath()
+        for(let i = 0; i < steps; i++){
+            context.rect((-this.blockSize) * i,(this.blockSize * 0.6) * i,width * 0.86,height/2)
+            context.fillStrokeShape(shape);
+        }
+        context.closePath()
+    }
+
+    loadInfo(attrs) {
+        this.info.name = attrs.obj_name;
+        this.info.description = attrs.description;
+        this.info.selectedPins = attrs.connected_pins;
+        this.floorNum = attrs.floor_num;
+    }
+
+    saveShapeDetails() {
+        this.setAttr("connected_pins", this.info.selectedPins);
+        this.setAttr("obj_name", this.info.name);
+        this.setAttr("description", this.info.description);
+        this.setAttr("floor_num",this.floorNum)
+    }
+    connect(node,draw = true) {
+        let canDraw = this.floorNum === node.floorNum;
+        super.connect(node,canDraw);
+    }
+
+}
+
+Stairs.prototype.className = "Stairs";
+_registerNode(Stairs);
 //TODO
Index: imaps-frontend/src/scripts/shapes/Wall.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Wall.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/scripts/shapes/Wall.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,29 +1,43 @@
 import Konva from "konva";
-import MapShape from "./MapShape";
+import MapShape from "../base/MapShape.js";
 import { _registerNode } from 'konva/lib/Global';
 export default class Wall extends MapShape {
-    constructor(mousePos, blockSize, layer, rotation,snap, draggable = true,scaleX = 1, scaleY = 1){
+    constructor(attrs){
+        if(!attrs.fromLoad){
+            attrs.height *= 8;
+        }
+
+
       super(
         {
-          x: mousePos.x,
-          y: mousePos.y,
-          width: blockSize * scaleX,
-          height: blockSize * 8 * scaleY,
-          fill: "#DDE0F8",
+          x: attrs.position.x,
+          y: attrs.position.y,
+          width: attrs.width * attrs.scaleX,
+          height: attrs.height * attrs.scaleY,
+          fill: "#d3d3d3",
           stroke: "grey",
           strokeWidth: 1,
           name: "mapObj",
-          draggable: draggable,
-          rotation: rotation,
+          draggable: true,
+          rotation: attrs.rotation,
           zIndex: 0,
         },
-        layer,
-        blockSize,
-        snap,
+        attrs.layer,
+        attrs.blockSize,
+        attrs.snap,
       );
-  
       this.type = "Wall";
+
+        this.floorNum = attrs.floorNum;
     }
-  }
+
+    loadInfo(attrs) {
+        this.floorNum = attrs.floor_num;
+    }
+
+    saveShapeDetails() {
+        this.setAttr("floor_num",this.floorNum)
+    }
+}
 
   Wall.prototype.className = 'Wall'
