1 | import Konva from "konva";
|
---|
2 | import config from "../net/netconfig.js";
|
---|
3 |
|
---|
4 | export default class RenderedMapShape extends Konva.Shape {
|
---|
5 | constructor(config) {
|
---|
6 | if (new.target === RenderedMapShape) {
|
---|
7 | throw new Error("Cannot instantiate abstract class RenderedMapShape directly.");
|
---|
8 | }
|
---|
9 |
|
---|
10 | super(config);
|
---|
11 |
|
---|
12 | this.info = {
|
---|
13 | name: "",
|
---|
14 | description: "",
|
---|
15 | type: "",
|
---|
16 | };
|
---|
17 | this.class = "Rect";
|
---|
18 | this.infoText = null;
|
---|
19 | this.textOffsetX = 0;
|
---|
20 | this.textOffsetY = 0;
|
---|
21 |
|
---|
22 | this.eventName = "";
|
---|
23 |
|
---|
24 | }
|
---|
25 |
|
---|
26 | initText() {
|
---|
27 | const rectWidth = this.width();
|
---|
28 | const rectHeight = this.height();
|
---|
29 |
|
---|
30 | this.infoText = new Konva.Text({
|
---|
31 | x: this.x(),
|
---|
32 | y: this.y(),
|
---|
33 | text: this.info.name || "no name",
|
---|
34 | fontSize: 10,
|
---|
35 | fontFamily: "Exo",
|
---|
36 | fill: "black",
|
---|
37 | align: "center",
|
---|
38 | verticalAlign: "middle",
|
---|
39 | });
|
---|
40 |
|
---|
41 | this.infoText.offsetX(this.infoText.width() / 2);
|
---|
42 | this.infoText.offsetY(this.infoText.height() / 2);
|
---|
43 |
|
---|
44 | this.infoText.x(this.x() + rectWidth / 2);
|
---|
45 | this.infoText.y(this.y() + rectHeight / 2);
|
---|
46 | this.infoText.rotation(this.rotation());
|
---|
47 | }
|
---|
48 |
|
---|
49 |
|
---|
50 | updateTextPosition() {
|
---|
51 | if (this.infoText) {
|
---|
52 | this.infoText.x(this.x() + this.textOffsetX);
|
---|
53 | this.infoText.y(this.y() + this.textOffsetY);
|
---|
54 | }
|
---|
55 | }
|
---|
56 |
|
---|
57 | clearText() {
|
---|
58 | if (this.infoText !== null) {
|
---|
59 | this.infoText.remove()
|
---|
60 | console.log("cleared text")
|
---|
61 | }
|
---|
62 |
|
---|
63 | }
|
---|
64 | _sceneFunc(context) {
|
---|
65 |
|
---|
66 | let width = this.width();
|
---|
67 | let height = this.height();
|
---|
68 |
|
---|
69 | const cornerRadius = this.attrs.cornerRadius;
|
---|
70 |
|
---|
71 | context.beginPath();
|
---|
72 |
|
---|
73 | if(!cornerRadius){
|
---|
74 | context.rect(0, 0, width, height)
|
---|
75 | } else {
|
---|
76 | Konva.Util.drawRoundedRectPath(context,width,height,cornerRadius)
|
---|
77 | }
|
---|
78 |
|
---|
79 | context.closePath();
|
---|
80 | context.fillStrokeShape(this);
|
---|
81 | }
|
---|
82 |
|
---|
83 |
|
---|
84 | displayName(layer) {
|
---|
85 | if (this.infoText != null) {
|
---|
86 | layer.add(this.infoText);
|
---|
87 | }
|
---|
88 | }
|
---|
89 | }
|
---|