1 |
|
---|
2 | import { _registerNode } from "konva/lib/Global";
|
---|
3 | import MapNode from "../base/MapNode.js";
|
---|
4 | import {node} from "prop-types";
|
---|
5 | import draw from "../../pages/Draw/Draw.jsx";
|
---|
6 | export default class InfoPin extends MapNode {
|
---|
7 | constructor(attrs,id) {
|
---|
8 | attrs.snap = false;
|
---|
9 | super(
|
---|
10 | {
|
---|
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",
|
---|
17 | stroke: "#1b1b1b",
|
---|
18 | strokeWidth: 1,
|
---|
19 | draggable: true,
|
---|
20 | name: "mapObj",
|
---|
21 | },
|
---|
22 | attrs.layer,
|
---|
23 | attrs.blockSize,
|
---|
24 | attrs.snap
|
---|
25 | );
|
---|
26 |
|
---|
27 | this.id = id;
|
---|
28 | this.eventName = "openPinModalEvent";
|
---|
29 | this.floorNum = attrs.floorNum;
|
---|
30 |
|
---|
31 | this.type = "InfoPin";
|
---|
32 | this._info = {
|
---|
33 | name: `Pin${id} [${this.floorNum}F]`,
|
---|
34 | selectedPins: [],
|
---|
35 | description: "",
|
---|
36 | };
|
---|
37 |
|
---|
38 | this.on("mouseover", () => {
|
---|
39 | this.fill("#FFD700");
|
---|
40 | });
|
---|
41 | this.on("mouseout", () => {
|
---|
42 | this.fill("#f60000");
|
---|
43 | });
|
---|
44 |
|
---|
45 |
|
---|
46 | this.initText();
|
---|
47 | }
|
---|
48 | _sceneFunc(context, shape) {
|
---|
49 | const { radiusX, radiusY, tailHeight } = this.attrs; // attrs od konva
|
---|
50 |
|
---|
51 | context.beginPath();
|
---|
52 | context.ellipse(0, 0, radiusX, radiusY, 0, 0, Math.PI * 2);
|
---|
53 | context.closePath();
|
---|
54 | context.fillStrokeShape(shape);
|
---|
55 |
|
---|
56 | context.beginPath();
|
---|
57 | context.moveTo(-radiusX, radiusY);
|
---|
58 | context.lineTo(0, radiusY + tailHeight);
|
---|
59 | context.lineTo(radiusX, radiusY);
|
---|
60 | context.closePath();
|
---|
61 |
|
---|
62 | context.fillStrokeShape(shape);
|
---|
63 | }
|
---|
64 |
|
---|
65 |
|
---|
66 | loadInfo(attrs) {
|
---|
67 | this.info.name = attrs.obj_name;
|
---|
68 | this.info.selectedPins = attrs.connected_pins;
|
---|
69 | this.info.description = attrs.description;
|
---|
70 | this.floorNum = attrs.floor_num
|
---|
71 | }
|
---|
72 |
|
---|
73 | saveShapeDetails() {
|
---|
74 | this.setAttr("obj_name", this.info.name);
|
---|
75 | this.setAttr("connected_pins", this.info.selectedPins);
|
---|
76 | this.setAttr("description", this.info.description);
|
---|
77 | this.setAttr("floor_num",this.floorNum)
|
---|
78 | 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)
|
---|
84 | }
|
---|
85 | }
|
---|
86 |
|
---|
87 | InfoPin.prototype.className = "InfoPin";
|
---|
88 | _registerNode(InfoPin);
|
---|