1 | "use strict";
|
---|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
---|
3 | exports.Line = void 0;
|
---|
4 | const Factory_1 = require("../Factory");
|
---|
5 | const Shape_1 = require("../Shape");
|
---|
6 | const Validators_1 = require("../Validators");
|
---|
7 | const Global_1 = require("../Global");
|
---|
8 | function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
|
---|
9 | var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)), d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)), fa = (t * d01) / (d01 + d12), fb = (t * d12) / (d01 + d12), p1x = x1 - fa * (x2 - x0), p1y = y1 - fa * (y2 - y0), p2x = x1 + fb * (x2 - x0), p2y = y1 + fb * (y2 - y0);
|
---|
10 | return [p1x, p1y, p2x, p2y];
|
---|
11 | }
|
---|
12 | function expandPoints(p, tension) {
|
---|
13 | var len = p.length, allPoints = [], n, cp;
|
---|
14 | for (n = 2; n < len - 2; n += 2) {
|
---|
15 | cp = getControlPoints(p[n - 2], p[n - 1], p[n], p[n + 1], p[n + 2], p[n + 3], tension);
|
---|
16 | if (isNaN(cp[0])) {
|
---|
17 | continue;
|
---|
18 | }
|
---|
19 | allPoints.push(cp[0]);
|
---|
20 | allPoints.push(cp[1]);
|
---|
21 | allPoints.push(p[n]);
|
---|
22 | allPoints.push(p[n + 1]);
|
---|
23 | allPoints.push(cp[2]);
|
---|
24 | allPoints.push(cp[3]);
|
---|
25 | }
|
---|
26 | return allPoints;
|
---|
27 | }
|
---|
28 | class Line extends Shape_1.Shape {
|
---|
29 | constructor(config) {
|
---|
30 | super(config);
|
---|
31 | this.on('pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva', function () {
|
---|
32 | this._clearCache('tensionPoints');
|
---|
33 | });
|
---|
34 | }
|
---|
35 | _sceneFunc(context) {
|
---|
36 | var points = this.points(), length = points.length, tension = this.tension(), closed = this.closed(), bezier = this.bezier(), tp, len, n;
|
---|
37 | if (!length) {
|
---|
38 | return;
|
---|
39 | }
|
---|
40 | context.beginPath();
|
---|
41 | context.moveTo(points[0], points[1]);
|
---|
42 | if (tension !== 0 && length > 4) {
|
---|
43 | tp = this.getTensionPoints();
|
---|
44 | len = tp.length;
|
---|
45 | n = closed ? 0 : 4;
|
---|
46 | if (!closed) {
|
---|
47 | context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);
|
---|
48 | }
|
---|
49 | while (n < len - 2) {
|
---|
50 | context.bezierCurveTo(tp[n++], tp[n++], tp[n++], tp[n++], tp[n++], tp[n++]);
|
---|
51 | }
|
---|
52 | if (!closed) {
|
---|
53 | context.quadraticCurveTo(tp[len - 2], tp[len - 1], points[length - 2], points[length - 1]);
|
---|
54 | }
|
---|
55 | }
|
---|
56 | else if (bezier) {
|
---|
57 | n = 2;
|
---|
58 | while (n < length) {
|
---|
59 | context.bezierCurveTo(points[n++], points[n++], points[n++], points[n++], points[n++], points[n++]);
|
---|
60 | }
|
---|
61 | }
|
---|
62 | else {
|
---|
63 | for (n = 2; n < length; n += 2) {
|
---|
64 | context.lineTo(points[n], points[n + 1]);
|
---|
65 | }
|
---|
66 | }
|
---|
67 | if (closed) {
|
---|
68 | context.closePath();
|
---|
69 | context.fillStrokeShape(this);
|
---|
70 | }
|
---|
71 | else {
|
---|
72 | context.strokeShape(this);
|
---|
73 | }
|
---|
74 | }
|
---|
75 | getTensionPoints() {
|
---|
76 | return this._getCache('tensionPoints', this._getTensionPoints);
|
---|
77 | }
|
---|
78 | _getTensionPoints() {
|
---|
79 | if (this.closed()) {
|
---|
80 | return this._getTensionPointsClosed();
|
---|
81 | }
|
---|
82 | else {
|
---|
83 | return expandPoints(this.points(), this.tension());
|
---|
84 | }
|
---|
85 | }
|
---|
86 | _getTensionPointsClosed() {
|
---|
87 | var p = this.points(), len = p.length, tension = this.tension(), firstControlPoints = getControlPoints(p[len - 2], p[len - 1], p[0], p[1], p[2], p[3], tension), lastControlPoints = getControlPoints(p[len - 4], p[len - 3], p[len - 2], p[len - 1], p[0], p[1], tension), middle = expandPoints(p, tension), tp = [firstControlPoints[2], firstControlPoints[3]]
|
---|
88 | .concat(middle)
|
---|
89 | .concat([
|
---|
90 | lastControlPoints[0],
|
---|
91 | lastControlPoints[1],
|
---|
92 | p[len - 2],
|
---|
93 | p[len - 1],
|
---|
94 | lastControlPoints[2],
|
---|
95 | lastControlPoints[3],
|
---|
96 | firstControlPoints[0],
|
---|
97 | firstControlPoints[1],
|
---|
98 | p[0],
|
---|
99 | p[1],
|
---|
100 | ]);
|
---|
101 | return tp;
|
---|
102 | }
|
---|
103 | getWidth() {
|
---|
104 | return this.getSelfRect().width;
|
---|
105 | }
|
---|
106 | getHeight() {
|
---|
107 | return this.getSelfRect().height;
|
---|
108 | }
|
---|
109 | getSelfRect() {
|
---|
110 | var points = this.points();
|
---|
111 | if (points.length < 4) {
|
---|
112 | return {
|
---|
113 | x: points[0] || 0,
|
---|
114 | y: points[1] || 0,
|
---|
115 | width: 0,
|
---|
116 | height: 0,
|
---|
117 | };
|
---|
118 | }
|
---|
119 | if (this.tension() !== 0) {
|
---|
120 | points = [
|
---|
121 | points[0],
|
---|
122 | points[1],
|
---|
123 | ...this._getTensionPoints(),
|
---|
124 | points[points.length - 2],
|
---|
125 | points[points.length - 1],
|
---|
126 | ];
|
---|
127 | }
|
---|
128 | else {
|
---|
129 | points = this.points();
|
---|
130 | }
|
---|
131 | var minX = points[0];
|
---|
132 | var maxX = points[0];
|
---|
133 | var minY = points[1];
|
---|
134 | var maxY = points[1];
|
---|
135 | var x, y;
|
---|
136 | for (var i = 0; i < points.length / 2; i++) {
|
---|
137 | x = points[i * 2];
|
---|
138 | y = points[i * 2 + 1];
|
---|
139 | minX = Math.min(minX, x);
|
---|
140 | maxX = Math.max(maxX, x);
|
---|
141 | minY = Math.min(minY, y);
|
---|
142 | maxY = Math.max(maxY, y);
|
---|
143 | }
|
---|
144 | return {
|
---|
145 | x: minX,
|
---|
146 | y: minY,
|
---|
147 | width: maxX - minX,
|
---|
148 | height: maxY - minY,
|
---|
149 | };
|
---|
150 | }
|
---|
151 | }
|
---|
152 | exports.Line = Line;
|
---|
153 | Line.prototype.className = 'Line';
|
---|
154 | Line.prototype._attrsAffectingSize = ['points', 'bezier', 'tension'];
|
---|
155 | (0, Global_1._registerNode)(Line);
|
---|
156 | Factory_1.Factory.addGetterSetter(Line, 'closed', false);
|
---|
157 | Factory_1.Factory.addGetterSetter(Line, 'bezier', false);
|
---|
158 | Factory_1.Factory.addGetterSetter(Line, 'tension', 0, (0, Validators_1.getNumberValidator)());
|
---|
159 | Factory_1.Factory.addGetterSetter(Line, 'points', [], (0, Validators_1.getNumberArrayValidator)());
|
---|