source: imaps-frontend/src/scripts/base/MapShape.js@ 0c6b92a

main
Last change on this file since 0c6b92a was 0c6b92a, checked in by stefan toskovski <stefantoska84@…>, 5 weeks ago

Pred finalna verzija

  • Property mode set to 100644
File size: 3.5 KB
Line 
1import Konva from "konva";
2
3export default class MapShape extends Konva.Shape {
4 constructor(config, layer, blockSize, snap) {
5 if (new.target === MapShape) {
6 throw new Error("Cannot instantiate abstract class BaseShape directly.");
7 }
8
9 console.log(config.x,"FFF");
10 super(config);
11 this.layer = layer;
12 this.blockSize = blockSize;
13 this._type = "";
14 this.snappable = snap;
15 this._info = {};
16 this.eventName = "";
17 this.infoText = null;
18 this.floorNum;
19
20 this.shadowForStrokeEnabled(false);
21 this.on("mouseover", () => (document.body.style.cursor = "pointer"));
22 this.on("mouseout", () => (document.body.style.cursor = "default"));
23 this.on("click", (e) => {
24 if(e.evt.altKey){
25 this.moveToTop();
26 this.getLayer()
27 .find("Transformer")
28 .forEach((t) => t.moveToTop());
29 }
30
31 });
32
33 if (snap) {
34 this.on("dragend", this.snapToGrid.bind(this));
35 this.on('dblclick', this.snapToGrid.bind(this));
36 }
37
38 this.on("transform", () => {
39 const scaleX = this.scaleX();
40 const scaleY = this.scaleY();
41 this.strokeWidth(1 / Math.max(scaleX, scaleY));
42 });
43
44
45 this.on('dragmove', () => {
46 if (this.infoText) {
47 this.updateTextPosition();
48 }
49 });
50
51 }
52
53 loadInfo(attrs) {
54 console.log("Abstract function");
55 }
56
57
58 initText() {
59 this.textOffsetX = 0;
60 this.textOffsetY = -30;
61 this.infoText = new Konva.Text({
62 x: this.x() + this.textOffsetX,
63 y: this.y() + this.textOffsetY,
64 text: this._info.name,
65 fontSize: 12,
66 fontFamily: 'Verdana',
67 fill: 'white',
68 });
69 }
70
71 updateTextPosition() {
72 if (this.infoText) {
73 this.infoText.x(this.x() + this.textOffsetX);
74 this.infoText.y(this.y() + this.textOffsetY);
75 }
76 }
77
78 displayName(layer) {
79 if (this.infoText) {
80 this.infoText.text(this._info.name);
81 layer.add(this.infoText);
82 }
83 }
84
85
86 destroy() {
87 super.destroy();
88 if (this.infoText !== null) {
89 this.infoText.remove()
90 console.log("cleared text")
91 }
92 }
93
94 setInfo(infoObj){
95 this.info = infoObj;
96 }
97
98 load(){
99 console.log("Abstract function")
100 }
101
102 _sceneFunc(context) {
103 let width = this.width();
104 let height = this.height();
105 context.beginPath();
106 context.rect(0, 0, width, height)
107 context.closePath();
108 context.fillStrokeShape(this);
109 }
110
111 clearText() {
112 if (this.infoText !== null) {
113 this.infoText.remove()
114 console.log("cleared text")
115 }
116
117 }
118
119 updateText(shapeName){
120 this.infoText.text = shapeName;
121 console.log("Updated text to : " + shapeName)
122 }
123
124 snapToGrid() {
125 this.position({
126 x: Math.round(this.x() / this.blockSize) * this.blockSize,
127 y: Math.round(this.y() / this.blockSize) * this.blockSize,
128 });
129
130 }
131
132 saveShapeDetails() {
133 console.log("This shape does not contain information");
134 }
135
136
137 get info() {
138 return this._info;
139 }
140
141 set info(formData) {
142 this._info = formData;
143 }
144
145 get type() {
146 return this._type;
147 }
148
149 set type(type) {
150 this._type = type
151 }
152
153}
Note: See TracBrowser for help on using the repository browser.