1 | ;
|
2 | var __extends = (this && this.__extends) || (function () {
|
3 | var extendStatics = Object.setPrototypeOf ||
|
4 | ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
5 | function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
6 | return function (d, b) {
|
7 | extendStatics(d, b);
|
8 | function __() { this.constructor = d; }
|
9 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
10 | };
|
11 | })();
|
12 | Object.defineProperty(exports, "__esModule", { value: true });
|
13 | var Module_1 = require("./../Module");
|
14 | var index_1 = require("./../index");
|
15 | var _1 = require("./../Tool/");
|
16 | /**
|
17 | * The module to display shapes
|
18 | */
|
19 | var Shape = (function (_super) {
|
20 | __extends(Shape, _super);
|
21 | /* LIFECYCLE */
|
22 | /**
|
23 | * @constructor
|
24 | */
|
25 | function Shape() {
|
26 | var _this = _super.call(this) || this;
|
27 | /**
|
28 | * PIXI Container
|
29 | * @readonly
|
30 | */
|
31 | _this.container = new index_1.PIXI.Graphics();
|
32 | _this.setProps({
|
33 | stroke: _1.Color.transparent,
|
34 | strokeAlpha: 1,
|
35 | strokeThickness: 1,
|
36 | fill: _1.Color.white,
|
37 | fillAlpha: 1,
|
38 | box: _1.Enum.BOX.RECTANGLE
|
39 | });
|
40 | _this.signals.propChange.bind(["box", "fill", "stroke", "strokeThickness", "strokeAlpha", "fillAlpha", "width", "height", "radius"], _this._updateShape.bind(_this));
|
41 | return _this;
|
42 | }
|
43 | /* METHODS */
|
44 | /**
|
45 | * The arc method creates an arc/curve (used to create circles, or parts of circles)
|
46 | * @param cx - The position of the center of the circle in x axis
|
47 | * @param cy - The position of the center of the circle in y axis
|
48 | * @param radius - The radius of the circle
|
49 | * @param startAngle - The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
|
50 | * @param endAngle - The ending angle, in radians
|
51 | * @param anticlockwise - Specifies whether the drawing should be counter-clockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise
|
52 | */
|
53 | Shape.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise) {
|
54 | if (anticlockwise === void 0) { anticlockwise = false; }
|
55 | this.container.arc(cx, cy, radius, startAngle, endAngle, anticlockwise);
|
56 | return this;
|
57 | };
|
58 | /**
|
59 | * The arcTo() method creates an arc/curve between two tangents on the canvas
|
60 | * @param x1 - The position of the beginning of the arc in x axis
|
61 | * @param y1 - The position of the beginning of the arc in y axis
|
62 | * @param x2 - The position of the end of the arc in x axis
|
63 | * @param y2 - The position of the end of the arc in y axis
|
64 | * @param radius - The radius of the arc
|
65 | */
|
66 | Shape.prototype.arcTo = function (x1, y1, x2, y2, radius) {
|
67 | this.container.arcTo(x1, y1, x2, y2, radius);
|
68 | return this;
|
69 | };
|
70 | /**
|
71 | * Specifies a simple one-color fill that subsequent calls to other Shape methods (such as lineTo() or drawCircle()), use when drawing
|
72 | * @param color - The color of the fill
|
73 | * @param alpha - The alpha of the fill
|
74 | */
|
75 | Shape.prototype.beginFill = function (color, alpha) {
|
76 | if (alpha === void 0) { alpha = 1; }
|
77 | this.container.beginFill(_1.Util.colorToDecimal(color), alpha);
|
78 | return this;
|
79 | };
|
80 | /**
|
81 | * Applies a fill to the lines and shapes that were added since the last call to te beginFill() method
|
82 | */
|
83 | Shape.prototype.endFill = function () {
|
84 | this.container.endFill();
|
85 | return this;
|
86 | };
|
87 | /**
|
88 | * Calculate the points for a bezier curve and the draws it
|
89 | * @param cpX - Control point in x axis
|
90 | * @param cpY - Control point in y axis
|
91 | * @param cpX2 - Second control point in x axis
|
92 | * @param cpY2 - Second control point in y axis
|
93 | * @param toX - Destination point in x axis
|
94 | * @param toY - Destination point in y axis
|
95 | */
|
96 | Shape.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY) {
|
97 | this.container.bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY);
|
98 | return this;
|
99 | };
|
100 | /**
|
101 | * Draws a circle
|
102 | * @param x - The coordinate of the center of the circle in x axis
|
103 | * @param y - The coordinate of the center of the circle in y axis
|
104 | * @param radius - The radius of the circle
|
105 | */
|
106 | Shape.prototype.circle = function (x, y, radius) {
|
107 | this.container.drawCircle(x, y, radius);
|
108 | return this;
|
109 | };
|
110 | /**
|
111 | * Draws an ellipse
|
112 | * @param x - The coordinate of the center of the ellipse in x axis
|
113 | * @param y - The coordinate of the center of the ellipse in y axis
|
114 | * @param width - The half width of the ellipse
|
115 | * @param height - The half height of the ellipse
|
116 | */
|
117 | Shape.prototype.ellipse = function (x, y, width, height) {
|
118 | this.container.drawEllipse(x, y, width, height);
|
119 | return this;
|
120 | };
|
121 | /**
|
122 | * Draws a polygon using the given path
|
123 | * @param path - The path data used to constructh the polygon
|
124 | */
|
125 | Shape.prototype.polygon = function (path) {
|
126 | this.container.drawPolygon(path);
|
127 | return this;
|
128 | };
|
129 | /**
|
130 | * Draws a rectangle
|
131 | * @param x - The coordinate of the top-left of the rectangle in x axis
|
132 | * @param y - The coordinate of the top-left of the rectangle in y axis
|
133 | * @param width - The width of the rectangle
|
134 | * @param height - The height of the rectangle
|
135 | */
|
136 | Shape.prototype.rectangle = function (x, y, width, height) {
|
137 | this.container.drawRect(x, y, width, height);
|
138 | return this;
|
139 | };
|
140 | /**
|
141 | * Draws a rounded rectangle
|
142 | * @param x - The coordinate of the top-left of the rectangle in x axis
|
143 | * @param y - The coordinate of the top-left of the rectangle in y axis
|
144 | * @param width - The width of the rectangle
|
145 | * @param height - The height of the rectangle
|
146 | * @param radius - The radius of the rectangle corners
|
147 | */
|
148 | Shape.prototype.roundedRectangle = function (x, y, width, height, radius) {
|
149 | this.container.drawRoundedRect(x, y, width, height, radius);
|
150 | return this;
|
151 | };
|
152 | /**
|
153 | * Specifies the line style used for subsequent calls to the Shape methods such as the lineTo() method or the circle() method
|
154 | * @param width - Width of the line to draw, will update the objects stored style
|
155 | * @param color - Color of the line to draw, will update the objects stored style
|
156 | * @param alpha - Alpha of the line to draw, will update the objects stored style
|
157 | */
|
158 | Shape.prototype.lineStyle = function (width, color, alpha) {
|
159 | if (width === void 0) { width = 0; }
|
160 | if (alpha === void 0) { alpha = 1; }
|
161 | this.container.lineStyle(width, _1.Util.colorToDecimal(color), alpha);
|
162 | return this;
|
163 | };
|
164 | /**
|
165 | * Draws a line using the current line style from the current drawing position to (x, y); The current drawing position is then set to (x, y).
|
166 | * @param x - The coordinate in x axis to draw to
|
167 | * @param y - The coordinate in y axis to draw to
|
168 | */
|
169 | Shape.prototype.lineTo = function (x, y) {
|
170 | this.container.lineTo(x, y);
|
171 | return this;
|
172 | };
|
173 | /**
|
174 | * Moves the current drawing position to (x, y)
|
175 | * @param x - The coordinate in x axis to move to
|
176 | * @param y - The coordinate in y axis to move to
|
177 | */
|
178 | Shape.prototype.moveTo = function (x, y) {
|
179 | this.container.moveTo(x, y);
|
180 | return this;
|
181 | };
|
182 | /**
|
183 | * Calculate the points for a quadratic bezier curve and the draws it
|
184 | * @param cpX - Control point in x axis
|
185 | * @param cpY - Control point in y axis
|
186 | * @param toX - Destination point in x axis
|
187 | * @param toY - Destination point in y axis
|
188 | */
|
189 | Shape.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY) {
|
190 | this.container.quadraticCurveTo(cpX, cpY, toX, toY);
|
191 | return this;
|
192 | };
|
193 | /**
|
194 | * Clears the graphics that were drawn to this shape objetct, and resets fill and line style settings
|
195 | */
|
196 | Shape.prototype.clear = function () {
|
197 | this.container.clear();
|
198 | return this;
|
199 | };
|
200 | /**
|
201 | * Clone the current shape
|
202 | * @param props - Properties to pass to the cloned shape
|
203 | * @returns The cloned shape
|
204 | */
|
205 | Shape.prototype.clone = function (props) {
|
206 | var clonedShape = new Shape();
|
207 | clonedShape.container = this.container.clone();
|
208 | return clonedShape;
|
209 | };
|
210 | /* PRIVATE */
|
211 | /**
|
212 | * Update the current shape
|
213 | * @private
|
214 | */
|
215 | Shape.prototype._updateShape = function () {
|
216 | if (!this.props.box) {
|
217 | return null;
|
218 | }
|
219 | var stroke = _1.Util.colorToDecimal(this.props.stroke), fill = this.props.fill === "transparent" ? 0x000000 : _1.Util.colorToDecimal(this.props.fill);
|
220 | this.container.clear();
|
221 | if (this.props.stroke !== _1.Color.transparent && !isNaN(stroke)) {
|
222 | this.container.lineStyle(this.props.strokeThickness, stroke, this.props.strokeAlpha);
|
223 | }
|
224 | this.container.beginFill(fill, this.props.fill === _1.Color.transparent ? 0 : this.props.fillAlpha);
|
225 | this._drawShape();
|
226 | this.container.endFill();
|
227 | };
|
228 | /**
|
229 | * Draw the shape with the current type value
|
230 | * @private
|
231 | */
|
232 | Shape.prototype._drawShape = function () {
|
233 | var _a = this.props, offsetX = _a.offsetX, offsetY = _a.offsetY, width = _a.width, height = _a.height, radius = _a.radius, box = _a.box;
|
234 | switch (box) {
|
235 | case _1.Enum.BOX.CIRCLE:
|
236 | if (width !== height) {
|
237 | this.ellipse(width / 2, height / 2, width / 2, height / 2);
|
238 | }
|
239 | else {
|
240 | this.circle(width / 2, width / 2, width / 2);
|
241 | }
|
242 | break;
|
243 | case _1.Enum.BOX.RECTANGLE:
|
244 | if (this.props.radius) {
|
245 | this.roundedRectangle(offsetX, offsetY, width, height, radius);
|
246 | }
|
247 | else {
|
248 | this.rectangle(offsetX, offsetY, width, height);
|
249 | }
|
250 | break;
|
251 | }
|
252 | };
|
253 | return Shape;
|
254 | }(Module_1.Module));
|
255 | exports.Shape = Shape;
|