[d565449] | 1 | import Konva from "konva";
|
---|
| 2 |
|
---|
| 3 | export 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 | }
|
---|
[0c6b92a] | 8 |
|
---|
| 9 | console.log(config.x,"FFF");
|
---|
[d565449] | 10 | super(config);
|
---|
| 11 | this.layer = layer;
|
---|
| 12 | this.blockSize = blockSize;
|
---|
| 13 | this._type = "";
|
---|
| 14 | this.snappable = snap;
|
---|
| 15 | this._info = {};
|
---|
[0c6b92a] | 16 | this.eventName = "";
|
---|
[d565449] | 17 | this.infoText = null;
|
---|
[0c6b92a] | 18 | this.floorNum;
|
---|
[d565449] | 19 |
|
---|
| 20 | this.shadowForStrokeEnabled(false);
|
---|
| 21 | this.on("mouseover", () => (document.body.style.cursor = "pointer"));
|
---|
| 22 | this.on("mouseout", () => (document.body.style.cursor = "default"));
|
---|
[0c6b92a] | 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 | });
|
---|
[d565449] | 32 |
|
---|
| 33 | if (snap) {
|
---|
| 34 | this.on("dragend", this.snapToGrid.bind(this));
|
---|
[0c6b92a] | 35 | this.on('dblclick', this.snapToGrid.bind(this));
|
---|
[d565449] | 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 |
|
---|
[0c6b92a] | 44 |
|
---|
| 45 | this.on('dragmove', () => {
|
---|
[d565449] | 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 |
|
---|
[0c6b92a] | 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 |
|
---|
[d565449] | 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 |
|
---|
[0c6b92a] | 119 | updateText(shapeName){
|
---|
| 120 | this.infoText.text = shapeName;
|
---|
| 121 | console.log("Updated text to : " + shapeName)
|
---|
| 122 | }
|
---|
| 123 |
|
---|
[d565449] | 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 | });
|
---|
[0c6b92a] | 129 |
|
---|
[d565449] | 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 | } |
---|