[d565449] | 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));
|
---|