source: imaps-frontend/node_modules/konva/lib/shapes/Label.js

main
Last change on this file was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 6.4 KB
Line 
1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.Tag = exports.Label = void 0;
4const Factory_1 = require("../Factory");
5const Shape_1 = require("../Shape");
6const Group_1 = require("../Group");
7const Validators_1 = require("../Validators");
8const Global_1 = require("../Global");
9var ATTR_CHANGE_LIST = [
10 'fontFamily',
11 'fontSize',
12 'fontStyle',
13 'padding',
14 'lineHeight',
15 'text',
16 'width',
17 'height',
18 'pointerDirection',
19 'pointerWidth',
20 'pointerHeight',
21], CHANGE_KONVA = 'Change.konva', NONE = 'none', UP = 'up', RIGHT = 'right', DOWN = 'down', LEFT = 'left', attrChangeListLen = ATTR_CHANGE_LIST.length;
22class Label extends Group_1.Group {
23 constructor(config) {
24 super(config);
25 this.on('add.konva', function (evt) {
26 this._addListeners(evt.child);
27 this._sync();
28 });
29 }
30 getText() {
31 return this.find('Text')[0];
32 }
33 getTag() {
34 return this.find('Tag')[0];
35 }
36 _addListeners(text) {
37 var that = this, n;
38 var func = function () {
39 that._sync();
40 };
41 for (n = 0; n < attrChangeListLen; n++) {
42 text.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, func);
43 }
44 }
45 getWidth() {
46 return this.getText().width();
47 }
48 getHeight() {
49 return this.getText().height();
50 }
51 _sync() {
52 var text = this.getText(), tag = this.getTag(), width, height, pointerDirection, pointerWidth, x, y, pointerHeight;
53 if (text && tag) {
54 width = text.width();
55 height = text.height();
56 pointerDirection = tag.pointerDirection();
57 pointerWidth = tag.pointerWidth();
58 pointerHeight = tag.pointerHeight();
59 x = 0;
60 y = 0;
61 switch (pointerDirection) {
62 case UP:
63 x = width / 2;
64 y = -1 * pointerHeight;
65 break;
66 case RIGHT:
67 x = width + pointerWidth;
68 y = height / 2;
69 break;
70 case DOWN:
71 x = width / 2;
72 y = height + pointerHeight;
73 break;
74 case LEFT:
75 x = -1 * pointerWidth;
76 y = height / 2;
77 break;
78 }
79 tag.setAttrs({
80 x: -1 * x,
81 y: -1 * y,
82 width: width,
83 height: height,
84 });
85 text.setAttrs({
86 x: -1 * x,
87 y: -1 * y,
88 });
89 }
90 }
91}
92exports.Label = Label;
93Label.prototype.className = 'Label';
94(0, Global_1._registerNode)(Label);
95class Tag extends Shape_1.Shape {
96 _sceneFunc(context) {
97 var width = this.width(), height = this.height(), pointerDirection = this.pointerDirection(), pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), cornerRadius = this.cornerRadius();
98 let topLeft = 0;
99 let topRight = 0;
100 let bottomLeft = 0;
101 let bottomRight = 0;
102 if (typeof cornerRadius === 'number') {
103 topLeft =
104 topRight =
105 bottomLeft =
106 bottomRight =
107 Math.min(cornerRadius, width / 2, height / 2);
108 }
109 else {
110 topLeft = Math.min(cornerRadius[0] || 0, width / 2, height / 2);
111 topRight = Math.min(cornerRadius[1] || 0, width / 2, height / 2);
112 bottomRight = Math.min(cornerRadius[2] || 0, width / 2, height / 2);
113 bottomLeft = Math.min(cornerRadius[3] || 0, width / 2, height / 2);
114 }
115 context.beginPath();
116 context.moveTo(topLeft, 0);
117 if (pointerDirection === UP) {
118 context.lineTo((width - pointerWidth) / 2, 0);
119 context.lineTo(width / 2, -1 * pointerHeight);
120 context.lineTo((width + pointerWidth) / 2, 0);
121 }
122 context.lineTo(width - topRight, 0);
123 context.arc(width - topRight, topRight, topRight, (Math.PI * 3) / 2, 0, false);
124 if (pointerDirection === RIGHT) {
125 context.lineTo(width, (height - pointerHeight) / 2);
126 context.lineTo(width + pointerWidth, height / 2);
127 context.lineTo(width, (height + pointerHeight) / 2);
128 }
129 context.lineTo(width, height - bottomRight);
130 context.arc(width - bottomRight, height - bottomRight, bottomRight, 0, Math.PI / 2, false);
131 if (pointerDirection === DOWN) {
132 context.lineTo((width + pointerWidth) / 2, height);
133 context.lineTo(width / 2, height + pointerHeight);
134 context.lineTo((width - pointerWidth) / 2, height);
135 }
136 context.lineTo(bottomLeft, height);
137 context.arc(bottomLeft, height - bottomLeft, bottomLeft, Math.PI / 2, Math.PI, false);
138 if (pointerDirection === LEFT) {
139 context.lineTo(0, (height + pointerHeight) / 2);
140 context.lineTo(-1 * pointerWidth, height / 2);
141 context.lineTo(0, (height - pointerHeight) / 2);
142 }
143 context.lineTo(0, topLeft);
144 context.arc(topLeft, topLeft, topLeft, Math.PI, (Math.PI * 3) / 2, false);
145 context.closePath();
146 context.fillStrokeShape(this);
147 }
148 getSelfRect() {
149 var x = 0, y = 0, pointerWidth = this.pointerWidth(), pointerHeight = this.pointerHeight(), direction = this.pointerDirection(), width = this.width(), height = this.height();
150 if (direction === UP) {
151 y -= pointerHeight;
152 height += pointerHeight;
153 }
154 else if (direction === DOWN) {
155 height += pointerHeight;
156 }
157 else if (direction === LEFT) {
158 x -= pointerWidth * 1.5;
159 width += pointerWidth;
160 }
161 else if (direction === RIGHT) {
162 width += pointerWidth * 1.5;
163 }
164 return {
165 x: x,
166 y: y,
167 width: width,
168 height: height,
169 };
170 }
171}
172exports.Tag = Tag;
173Tag.prototype.className = 'Tag';
174(0, Global_1._registerNode)(Tag);
175Factory_1.Factory.addGetterSetter(Tag, 'pointerDirection', NONE);
176Factory_1.Factory.addGetterSetter(Tag, 'pointerWidth', 0, (0, Validators_1.getNumberValidator)());
177Factory_1.Factory.addGetterSetter(Tag, 'pointerHeight', 0, (0, Validators_1.getNumberValidator)());
178Factory_1.Factory.addGetterSetter(Tag, 'cornerRadius', 0, (0, Validators_1.getNumberOrArrayOfNumbersValidator)(4));
Note: See TracBrowser for help on using the repository browser.