1 | "use strict";
|
---|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
3 | exports.Tag = exports.Label = void 0;
|
---|
4 | const Factory_1 = require("../Factory");
|
---|
5 | const Shape_1 = require("../Shape");
|
---|
6 | const Group_1 = require("../Group");
|
---|
7 | const Validators_1 = require("../Validators");
|
---|
8 | const Global_1 = require("../Global");
|
---|
9 | var 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;
|
---|
22 | class 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 | }
|
---|
92 | exports.Label = Label;
|
---|
93 | Label.prototype.className = 'Label';
|
---|
94 | (0, Global_1._registerNode)(Label);
|
---|
95 | class 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 | }
|
---|
172 | exports.Tag = Tag;
|
---|
173 | Tag.prototype.className = 'Tag';
|
---|
174 | (0, Global_1._registerNode)(Tag);
|
---|
175 | Factory_1.Factory.addGetterSetter(Tag, 'pointerDirection', NONE);
|
---|
176 | Factory_1.Factory.addGetterSetter(Tag, 'pointerWidth', 0, (0, Validators_1.getNumberValidator)());
|
---|
177 | Factory_1.Factory.addGetterSetter(Tag, 'pointerHeight', 0, (0, Validators_1.getNumberValidator)());
|
---|
178 | Factory_1.Factory.addGetterSetter(Tag, 'cornerRadius', 0, (0, Validators_1.getNumberOrArrayOfNumbersValidator)(4));
|
---|