Ignore:
Timestamp:
12/12/24 17:06:06 (5 weeks ago)
Author:
stefan toskovski <stefantoska84@…>
Branches:
main
Parents:
d565449
Message:

Pred finalna verzija

Location:
imaps-frontend/src/scripts/shapes
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • imaps-frontend/src/scripts/shapes/Entrance.js

    rd565449 r0c6b92a  
    1 import Konva from "konva";
    2 import MapShape from "./MapShape";
    3 import { _registerNode } from "konva/lib/Global";
    4 export default class Entrance extends MapShape {
    5   constructor(mousePos, blockSize, layer, rotation, snap,id,scaleX = 1, scaleY = 1) {
    6     super(
    7       {
    8         x: mousePos.x,
    9         y: mousePos.y,
    10         width: blockSize * scaleX,
    11         height: blockSize * 2 * scaleY,
    12         fill: "#0051ff",
    13         stroke: "grey",
    14         strokeWidth: 1,
    15         opacity: 0.7,
    16         name: "mapObj",
    17         draggable: true,
    18         rotation: rotation,
    19         zIndex: 1,
    20       },
    21       layer,
    22       blockSize,
    23       snap
    24     );
    25     this.type = "Entrance";
    26     this.modalEventName = "openEntranceModalEvent";
     1import {_registerNode} from "konva/lib/Global";
     2import MapNode from "../base/MapNode.js";
     3import {node} from "prop-types";
    274
    28     this.id = id;
     5export default class Entrance extends MapNode {
    296
    30     this._info = {
    31       name: `Entrance ${id}`,
    32       connectedRoom: "",
    33       description: "",
    34       isMainEntrance: false,
    35       selectedPin: "",
    36       selectedPins: [],
    37     };
     7    constructor(attrs, id) {
    388
    39     this.initText();
    40   }
     9        if (!attrs.fromLoad) {
     10            attrs.height *= 2;
     11        }
     12        super(
     13            {
     14                x: attrs.position.x,
     15                y: attrs.position.y,
     16                width: attrs.width,
     17                height: attrs.height,
     18                fill: "rgb(126,238,167)",
     19                stroke: "#252627",
     20                strokeWidth: 1,
     21                opacity: 0.9,
     22                name: "mapObj",
     23                draggable: true,
     24                rotation: attrs.rotation,
     25                zIndex: 1,
     26            },
     27            attrs.layer,
     28            attrs.blockSize,
     29            attrs.snap
     30        );
     31        this.type = "Entrance";
     32        this.eventName = "openEntranceModalEvent";
     33        this.floorNum = attrs.floorNum
    4134
    42   loadInfo(attrs) {
    43     this.info.name = attrs.obj_name;
    44     this.info.connectedRoom = attrs.connected_room;
    45     this.info.description = attrs.description;
    46     this.info.isMainEntrance = attrs.is_main_entrance;
    47     this.info.selectedPins = attrs.connected_pins;
    48   }
     35        this.id = id;
    4936
    50   saveShapeDetails() {
    51     this.setAttr("connected_pins", this.info.selectedPins);
    52     this.setAttr("obj_name", this.info.name);
    53     this.setAttr("description", this.info.description);
    54     this.setAttr("is_main_entrance", this.info.isMainEntrance);
    55     this.setAttr("connected_room", this.info.connectedRoom);
    56   }
     37        this._info = {
     38            name: `Entrance${id} [${this.floorNum}F]`,
     39            connectedRoom: "",
     40            description: "",
     41            isMainEntrance: false,
     42            selectedPin: "",
     43            selectedPins: [],
     44        };
     45
     46        this.initText();
     47        this.moveToTop();
     48    }
     49
     50    loadInfo(attrs) {
     51        this.info.name = attrs.obj_name;
     52        this.info.connectedRoom = attrs.connected_room;
     53        this.info.description = attrs.description;
     54        this.info.isMainEntrance = attrs.is_main_entrance;
     55        this.info.selectedPins = attrs.connected_pins;
     56        this.floorNum = attrs.floor_num;
     57    }
     58
     59    saveShapeDetails() {
     60        console.info("fnum entrance",this.attrs.floorNum)
     61
     62        this.setAttr("connected_pins", this.info.selectedPins);
     63        this.setAttr("obj_name", this.info.name);
     64        this.setAttr("description", this.info.description);
     65        this.setAttr("is_main_entrance", this.info.isMainEntrance);
     66        this.setAttr("connected_room", this.info.connectedRoom);
     67        this.setAttr("floor_num",this.floorNum);
     68    }
     69
     70    connect(node, draw = true) {
     71        if(this.floorNum !== node.floorNum) return;
     72
     73        super.connect(node)
     74    }
     75
     76    setInfo(infoObj) {
     77        console.log("SA VIKNA SETINFO")
     78        this.info = infoObj;
     79        if(this.info.connectedRoom == null || this.info.connectedRoom === "" ){
     80            this.strokeWidth(2);
     81            this.stroke("#a10114")
     82        }else{
     83            this.strokeWidth(1)
     84            this.stroke("black")
     85        }
     86    }
    5787}
    5888

  • imaps-frontend/src/scripts/shapes/InfoPin.js

    rd565449 r0c6b92a  
    1 import Konva from "konva";
    2 import MapShape from "./MapShape";
    3 import Factory from "../util/Factory";
     1
    42import { _registerNode } from "konva/lib/Global";
    5 export default class InfoPin extends MapShape {
    6   constructor(mousePos, blockSize, layer, snappable,id) {
     3import MapNode from "../base/MapNode.js";
     4import {node} from "prop-types";
     5import draw from "../../pages/Draw/Draw.jsx";
     6export default class InfoPin extends MapNode {
     7  constructor(attrs,id) {
     8    attrs.snap = false;
    79    super(
    810      {
    9         x: mousePos.x,
    10         y: mousePos.y,
    11         radiusX: blockSize * 0.5,
    12         radiusY: blockSize * 0.7,
    13         tailHeight: blockSize * 1.2,
    14         fill: "#d70113",
     11        x: attrs.position.x,
     12        y: attrs.position.y,
     13        radiusX: attrs.blockSize * 0.5,
     14        radiusY: attrs.blockSize * 0.7,
     15        tailHeight: attrs.blockSize * 1.2,
     16        fill: "#f60000",
    1517        stroke: "#1b1b1b",
    16         strokeWidth: 0.2,
     18        strokeWidth: 1,
    1719        draggable: true,
    1820        name: "mapObj",
    1921      },
    20       layer,
    21       blockSize,
    22       snappable
     22      attrs.layer,
     23      attrs.blockSize,
     24      attrs.snap
    2325    );
    2426
    2527    this.id = id;
     28    this.eventName = "openPinModalEvent";
     29    this.floorNum = attrs.floorNum;
    2630
    27     this.modalEventName = "openPinModalEvent";
    2831    this.type = "InfoPin";
    2932    this._info = {
    30       name: `Pin ${id}`,
     33      name: `Pin${id} [${this.floorNum}F]`,
    3134      selectedPins: [],
    3235      description: "",
    … …  
    3437
    3538    this.on("mouseover", () => {
    36       this.fill("yellow");
     39      this.fill("#FFD700");
    3740    });
    3841    this.on("mouseout", () => {
    39       this.fill("red");
     42      this.fill("#f60000");
    4043    });
     44
    4145
    4246    this.initText();
    4347  }
    4448  _sceneFunc(context, shape) {
    45     const { radiusX, radiusY, tailHeight } = this.attrs;
     49    const { radiusX, radiusY, tailHeight } = this.attrs; // attrs od konva
    4650
    4751    context.beginPath();
    … …  
    5963  }
    6064
     65
    6166  loadInfo(attrs) {
    6267    this.info.name = attrs.obj_name;
    6368    this.info.selectedPins = attrs.connected_pins;
    6469    this.info.description = attrs.description;
     70    this.floorNum = attrs.floor_num
    6571  }
    6672
    … …  
    6975    this.setAttr("connected_pins", this.info.selectedPins);
    7076    this.setAttr("description", this.info.description);
     77    this.setAttr("floor_num",this.floorNum)
    7178    console.log(this.info, "vnatre vo info");
     79  }
     80
     81  connect(node, draw = true) {
     82    if(this.floorNum !== node.floorNum) return;
     83    super.connect(node)
    7284  }
    7385}

  • imaps-frontend/src/scripts/shapes/Room.js

    rd565449 r0c6b92a  
    11import Konva from "konva";
    2 import MapShape from "./MapShape";
     2import MapShape from "../base/MapShape.js";
    33import { _registerNode } from "konva/lib/Global";
    44export default class Room extends MapShape {
    5   constructor(mousePos, blockSize, layer, rotation, snap, id, scaleX = 1, scaleY = 1){
     5  constructor(attrs,id){
     6
     7      if(!attrs.fromLoad){
     8          attrs.width *= 12;
     9          attrs.height *= 8;
     10      }
     11
     12      console.log(attrs.position,"hehe")
    613    super(
    714      {
    8         x: mousePos.x,
    9         y: mousePos.y,
    10         width: blockSize * 8 * scaleX,
    11         height: blockSize * 4 * scaleY,
    12         fill: "#DDE0F8",
     15        x: attrs.position.x,
     16        y: attrs.position.y,
     17        width: attrs.width * attrs.scaleX,
     18        height: attrs.height * attrs.scaleY,
     19        fill: "rgb(86,168,253)",
    1320        stroke: "grey",
    1421        strokeWidth: 1,
    1522        name: "mapObj",
    16         rotation: rotation,
     23        rotation: attrs.rotation,
    1724        draggable: true,
    1825      },
    19       layer,
    20       blockSize,
    21       snap
     26        attrs.layer,
     27        attrs.blockSize,
     28        attrs.snap
    2229    );
    2330
     31      this.floorNum = attrs.floorNum;
     32
    2433    this._info = {
    25       name: `Room ${id}`,
     34      name: `Room${id} [${this.floorNum}F]`,
    2635      type: "",
    2736      description: "",
    … …  
    2938
    3039    this.type = "Room";
    31     this.modalEventName = "openRoomModalEvent";
     40    this.eventName = "openRoomModalEvent";
    3241    this.id = id;
    3342
    … …  
    3948    this.info.type = attrs.room_type;
    4049    this.info.description = attrs.description;
     50    this.floorNum = attrs.floor_num;
    4151  }
    4252
    … …  
    4555    this.setAttr("room_type", this.info.type);
    4656    this.setAttr("description", this.info.description);
     57    this.setAttr("floor_num",this.floorNum);
    4758  }
    4859}

  • imaps-frontend/src/scripts/shapes/Stairs.js

    rd565449 r0c6b92a  
    11import Konva from "konva";
    2 import { MapShape } from "./MapShape";
     2import MapNode from "../base/MapNode.js";
     3import {_registerNode} from "konva/lib/Global.js";
     4import Room from "./Room.js";
     5export default class Stairs extends MapNode{
     6    constructor(attrs,id) {
    37
     8        if(!attrs.fromLoad){
     9            attrs.width *= 4;
     10        }
     11
     12        super({
     13                x: attrs.position.x,
     14                y: attrs.position.y,
     15                width: attrs.width * attrs.scaleX,
     16                height: attrs.height * attrs.scaleY,
     17                fill: "rgb(225,213,124)",
     18                stroke: "rgb(16,15,15)",
     19                strokeWidth: 1,
     20                name: "mapObj",
     21                rotation: attrs.rotation,
     22                draggable: true
     23            },
     24            attrs.layer,
     25            attrs.blockSize,
     26            attrs.snap
     27        );
     28
     29        this.floorNum = attrs.floorNum;
     30
     31        this.type = "Stairs"
     32        this._info = {
     33            name: `Stairs${id} [${this.floorNum}F]`,
     34            description: "",
     35            selectedPins: []
     36        };
     37
     38        this.id = id;
     39        this.eventName = "openStairsModalEvent";
     40        this.initText();
     41    }
     42
     43
     44    _sceneFunc(context, shape) {
     45        const { width, height} = this.attrs;
     46
     47        let steps = 5;
     48        context.beginPath()
     49        for(let i = 0; i < steps; i++){
     50            context.rect((-this.blockSize) * i,(this.blockSize * 0.6) * i,width * 0.86,height/2)
     51            context.fillStrokeShape(shape);
     52        }
     53        context.closePath()
     54    }
     55
     56    loadInfo(attrs) {
     57        this.info.name = attrs.obj_name;
     58        this.info.description = attrs.description;
     59        this.info.selectedPins = attrs.connected_pins;
     60        this.floorNum = attrs.floor_num;
     61    }
     62
     63    saveShapeDetails() {
     64        this.setAttr("connected_pins", this.info.selectedPins);
     65        this.setAttr("obj_name", this.info.name);
     66        this.setAttr("description", this.info.description);
     67        this.setAttr("floor_num",this.floorNum)
     68    }
     69    connect(node,draw = true) {
     70        let canDraw = this.floorNum === node.floorNum;
     71        super.connect(node,canDraw);
     72    }
     73
     74}
     75
     76Stairs.prototype.className = "Stairs";
     77_registerNode(Stairs);
    478//TODO

  • imaps-frontend/src/scripts/shapes/Wall.js

    rd565449 r0c6b92a  
    11import Konva from "konva";
    2 import MapShape from "./MapShape";
     2import MapShape from "../base/MapShape.js";
    33import { _registerNode } from 'konva/lib/Global';
    44export default class Wall extends MapShape {
    5     constructor(mousePos, blockSize, layer, rotation,snap, draggable = true,scaleX = 1, scaleY = 1){
     5    constructor(attrs){
     6        if(!attrs.fromLoad){
     7            attrs.height *= 8;
     8        }
     9
     10
    611      super(
    712        {
    8           x: mousePos.x,
    9           y: mousePos.y,
    10           width: blockSize * scaleX,
    11           height: blockSize * 8 * scaleY,
    12           fill: "#DDE0F8",
     13          x: attrs.position.x,
     14          y: attrs.position.y,
     15          width: attrs.width * attrs.scaleX,
     16          height: attrs.height * attrs.scaleY,
     17          fill: "#d3d3d3",
    1318          stroke: "grey",
    1419          strokeWidth: 1,
    1520          name: "mapObj",
    16           draggable: draggable,
    17           rotation: rotation,
     21          draggable: true,
     22          rotation: attrs.rotation,
    1823          zIndex: 0,
    1924        },
    20         layer,
    21         blockSize,
    22         snap,
     25        attrs.layer,
     26        attrs.blockSize,
     27        attrs.snap,
    2328      );
    24  
    2529      this.type = "Wall";
     30
     31        this.floorNum = attrs.floorNum;
    2632    }
    27   }
     33
     34    loadInfo(attrs) {
     35        this.floorNum = attrs.floor_num;
     36    }
     37
     38    saveShapeDetails() {
     39        this.setAttr("floor_num",this.floorNum)
     40    }
     41}
    2842
    2943  Wall.prototype.className = 'Wall'
Note: See TracChangeset for help on using the changeset viewer.