1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.alterHsl = exports.drawEllipse = exports.drawParticlePlugin = exports.drawPlugin = exports.drawShapeAfterEffect = exports.drawShape = exports.drawParticle = exports.drawGrabLine = exports.gradient = exports.drawConnectLine = exports.drawLinkTriangle = exports.drawLinkLine = exports.clear = exports.paintBase = void 0;
|
4 | const NumberUtils_1 = require("./NumberUtils");
|
5 | const ColorUtils_1 = require("./ColorUtils");
|
6 | const Enums_1 = require("../Enums");
|
7 | function drawLine(context, begin, end) {
|
8 | context.beginPath();
|
9 | context.moveTo(begin.x, begin.y);
|
10 | context.lineTo(end.x, end.y);
|
11 | context.closePath();
|
12 | }
|
13 | function drawTriangle(context, p1, p2, p3) {
|
14 | context.beginPath();
|
15 | context.moveTo(p1.x, p1.y);
|
16 | context.lineTo(p2.x, p2.y);
|
17 | context.lineTo(p3.x, p3.y);
|
18 | context.closePath();
|
19 | }
|
20 | function paintBase(context, dimension, baseColor) {
|
21 | context.save();
|
22 | context.fillStyle = baseColor !== null && baseColor !== void 0 ? baseColor : "rgba(0,0,0,0)";
|
23 | context.fillRect(0, 0, dimension.width, dimension.height);
|
24 | context.restore();
|
25 | }
|
26 | exports.paintBase = paintBase;
|
27 | function clear(context, dimension) {
|
28 | context.clearRect(0, 0, dimension.width, dimension.height);
|
29 | }
|
30 | exports.clear = clear;
|
31 | function drawLinkLine(context, width, begin, end, maxDistance, canvasSize, warp, backgroundMask, composite, colorLine, opacity, shadow) {
|
32 | let drawn = false;
|
33 | if ((0, NumberUtils_1.getDistance)(begin, end) <= maxDistance) {
|
34 | drawLine(context, begin, end);
|
35 | drawn = true;
|
36 | }
|
37 | else if (warp) {
|
38 | let pi1;
|
39 | let pi2;
|
40 | const endNE = {
|
41 | x: end.x - canvasSize.width,
|
42 | y: end.y,
|
43 | };
|
44 | const d1 = (0, NumberUtils_1.getDistances)(begin, endNE);
|
45 | if (d1.distance <= maxDistance) {
|
46 | const yi = begin.y - (d1.dy / d1.dx) * begin.x;
|
47 | pi1 = { x: 0, y: yi };
|
48 | pi2 = { x: canvasSize.width, y: yi };
|
49 | }
|
50 | else {
|
51 | const endSW = {
|
52 | x: end.x,
|
53 | y: end.y - canvasSize.height,
|
54 | };
|
55 | const d2 = (0, NumberUtils_1.getDistances)(begin, endSW);
|
56 | if (d2.distance <= maxDistance) {
|
57 | const yi = begin.y - (d2.dy / d2.dx) * begin.x;
|
58 | const xi = -yi / (d2.dy / d2.dx);
|
59 | pi1 = { x: xi, y: 0 };
|
60 | pi2 = { x: xi, y: canvasSize.height };
|
61 | }
|
62 | else {
|
63 | const endSE = {
|
64 | x: end.x - canvasSize.width,
|
65 | y: end.y - canvasSize.height,
|
66 | };
|
67 | const d3 = (0, NumberUtils_1.getDistances)(begin, endSE);
|
68 | if (d3.distance <= maxDistance) {
|
69 | const yi = begin.y - (d3.dy / d3.dx) * begin.x;
|
70 | const xi = -yi / (d3.dy / d3.dx);
|
71 | pi1 = { x: xi, y: yi };
|
72 | pi2 = { x: pi1.x + canvasSize.width, y: pi1.y + canvasSize.height };
|
73 | }
|
74 | }
|
75 | }
|
76 | if (pi1 && pi2) {
|
77 | drawLine(context, begin, pi1);
|
78 | drawLine(context, end, pi2);
|
79 | drawn = true;
|
80 | }
|
81 | }
|
82 | if (!drawn) {
|
83 | return;
|
84 | }
|
85 | context.lineWidth = width;
|
86 | if (backgroundMask) {
|
87 | context.globalCompositeOperation = composite;
|
88 | }
|
89 | context.strokeStyle = (0, ColorUtils_1.getStyleFromRgb)(colorLine, opacity);
|
90 | if (shadow.enable) {
|
91 | const shadowColor = (0, ColorUtils_1.colorToRgb)(shadow.color);
|
92 | if (shadowColor) {
|
93 | context.shadowBlur = shadow.blur;
|
94 | context.shadowColor = (0, ColorUtils_1.getStyleFromRgb)(shadowColor);
|
95 | }
|
96 | }
|
97 | context.stroke();
|
98 | }
|
99 | exports.drawLinkLine = drawLinkLine;
|
100 | function drawLinkTriangle(context, pos1, pos2, pos3, backgroundMask, composite, colorTriangle, opacityTriangle) {
|
101 | drawTriangle(context, pos1, pos2, pos3);
|
102 | if (backgroundMask) {
|
103 | context.globalCompositeOperation = composite;
|
104 | }
|
105 | context.fillStyle = (0, ColorUtils_1.getStyleFromRgb)(colorTriangle, opacityTriangle);
|
106 | context.fill();
|
107 | }
|
108 | exports.drawLinkTriangle = drawLinkTriangle;
|
109 | function drawConnectLine(context, width, lineStyle, begin, end) {
|
110 | context.save();
|
111 | drawLine(context, begin, end);
|
112 | context.lineWidth = width;
|
113 | context.strokeStyle = lineStyle;
|
114 | context.stroke();
|
115 | context.restore();
|
116 | }
|
117 | exports.drawConnectLine = drawConnectLine;
|
118 | function gradient(context, p1, p2, opacity) {
|
119 | const gradStop = Math.floor(p2.getRadius() / p1.getRadius());
|
120 | const color1 = p1.getFillColor();
|
121 | const color2 = p2.getFillColor();
|
122 | if (!color1 || !color2) {
|
123 | return;
|
124 | }
|
125 | const sourcePos = p1.getPosition();
|
126 | const destPos = p2.getPosition();
|
127 | const midRgb = (0, ColorUtils_1.colorMix)(color1, color2, p1.getRadius(), p2.getRadius());
|
128 | const grad = context.createLinearGradient(sourcePos.x, sourcePos.y, destPos.x, destPos.y);
|
129 | grad.addColorStop(0, (0, ColorUtils_1.getStyleFromHsl)(color1, opacity));
|
130 | grad.addColorStop(gradStop > 1 ? 1 : gradStop, (0, ColorUtils_1.getStyleFromRgb)(midRgb, opacity));
|
131 | grad.addColorStop(1, (0, ColorUtils_1.getStyleFromHsl)(color2, opacity));
|
132 | return grad;
|
133 | }
|
134 | exports.gradient = gradient;
|
135 | function drawGrabLine(context, width, begin, end, colorLine, opacity) {
|
136 | context.save();
|
137 | drawLine(context, begin, end);
|
138 | context.strokeStyle = (0, ColorUtils_1.getStyleFromRgb)(colorLine, opacity);
|
139 | context.lineWidth = width;
|
140 | context.stroke();
|
141 | context.restore();
|
142 | }
|
143 | exports.drawGrabLine = drawGrabLine;
|
144 | function drawParticle(container, context, particle, delta, fillColorValue, strokeColorValue, backgroundMask, composite, radius, opacity, shadow, gradient) {
|
145 | var _a, _b, _c, _d, _e, _f;
|
146 | const pos = particle.getPosition();
|
147 | const tiltOptions = particle.options.tilt;
|
148 | const rollOptions = particle.options.roll;
|
149 | context.save();
|
150 | if (tiltOptions.enable || rollOptions.enable) {
|
151 | const roll = rollOptions.enable && particle.roll;
|
152 | const tilt = tiltOptions.enable && particle.tilt;
|
153 | const rollHorizontal = roll && (rollOptions.mode === Enums_1.RollMode.horizontal || rollOptions.mode === Enums_1.RollMode.both);
|
154 | const rollVertical = roll && (rollOptions.mode === Enums_1.RollMode.vertical || rollOptions.mode === Enums_1.RollMode.both);
|
155 | context.setTransform(rollHorizontal ? Math.cos(particle.roll.angle) : 1, tilt ? Math.cos(particle.tilt.value) * particle.tilt.cosDirection : 0, tilt ? Math.sin(particle.tilt.value) * particle.tilt.sinDirection : 0, rollVertical ? Math.sin(particle.roll.angle) : 1, pos.x, pos.y);
|
156 | }
|
157 | else {
|
158 | context.translate(pos.x, pos.y);
|
159 | }
|
160 | context.beginPath();
|
161 | const angle = ((_b = (_a = particle.rotate) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 0) + (particle.options.rotate.path ? particle.velocity.angle : 0);
|
162 | if (angle !== 0) {
|
163 | context.rotate(angle);
|
164 | }
|
165 | if (backgroundMask) {
|
166 | context.globalCompositeOperation = composite;
|
167 | }
|
168 | const shadowColor = particle.shadowColor;
|
169 | if (shadow.enable && shadowColor) {
|
170 | context.shadowBlur = shadow.blur;
|
171 | context.shadowColor = (0, ColorUtils_1.getStyleFromRgb)(shadowColor);
|
172 | context.shadowOffsetX = shadow.offset.x;
|
173 | context.shadowOffsetY = shadow.offset.y;
|
174 | }
|
175 | if (gradient) {
|
176 | const gradientAngle = gradient.angle.value;
|
177 | const fillGradient = gradient.type === Enums_1.GradientType.radial
|
178 | ? context.createRadialGradient(0, 0, 0, 0, 0, radius)
|
179 | : context.createLinearGradient(Math.cos(gradientAngle) * -radius, Math.sin(gradientAngle) * -radius, Math.cos(gradientAngle) * radius, Math.sin(gradientAngle) * radius);
|
180 | for (const color of gradient.colors) {
|
181 | fillGradient.addColorStop(color.stop, (0, ColorUtils_1.getStyleFromHsl)({
|
182 | h: color.value.h.value,
|
183 | s: color.value.s.value,
|
184 | l: color.value.l.value,
|
185 | }, (_d = (_c = color.opacity) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : opacity));
|
186 | }
|
187 | context.fillStyle = fillGradient;
|
188 | }
|
189 | else {
|
190 | if (fillColorValue) {
|
191 | context.fillStyle = fillColorValue;
|
192 | }
|
193 | }
|
194 | const stroke = particle.stroke;
|
195 | context.lineWidth = (_e = particle.strokeWidth) !== null && _e !== void 0 ? _e : 0;
|
196 | if (strokeColorValue) {
|
197 | context.strokeStyle = strokeColorValue;
|
198 | }
|
199 | drawShape(container, context, particle, radius, opacity, delta);
|
200 | if (((_f = stroke === null || stroke === void 0 ? void 0 : stroke.width) !== null && _f !== void 0 ? _f : 0) > 0) {
|
201 | context.stroke();
|
202 | }
|
203 | if (particle.close) {
|
204 | context.closePath();
|
205 | }
|
206 | if (particle.fill) {
|
207 | context.fill();
|
208 | }
|
209 | context.restore();
|
210 | context.save();
|
211 | if (tiltOptions.enable && particle.tilt) {
|
212 | context.setTransform(1, Math.cos(particle.tilt.value) * particle.tilt.cosDirection, Math.sin(particle.tilt.value) * particle.tilt.sinDirection, 1, pos.x, pos.y);
|
213 | }
|
214 | else {
|
215 | context.translate(pos.x, pos.y);
|
216 | }
|
217 | if (angle !== 0) {
|
218 | context.rotate(angle);
|
219 | }
|
220 | if (backgroundMask) {
|
221 | context.globalCompositeOperation = composite;
|
222 | }
|
223 | drawShapeAfterEffect(container, context, particle, radius, opacity, delta);
|
224 | context.restore();
|
225 | }
|
226 | exports.drawParticle = drawParticle;
|
227 | function drawShape(container, context, particle, radius, opacity, delta) {
|
228 | if (!particle.shape) {
|
229 | return;
|
230 | }
|
231 | const drawer = container.drawers.get(particle.shape);
|
232 | if (!drawer) {
|
233 | return;
|
234 | }
|
235 | drawer.draw(context, particle, radius, opacity, delta, container.retina.pixelRatio);
|
236 | }
|
237 | exports.drawShape = drawShape;
|
238 | function drawShapeAfterEffect(container, context, particle, radius, opacity, delta) {
|
239 | if (!particle.shape) {
|
240 | return;
|
241 | }
|
242 | const drawer = container.drawers.get(particle.shape);
|
243 | if (!(drawer === null || drawer === void 0 ? void 0 : drawer.afterEffect)) {
|
244 | return;
|
245 | }
|
246 | drawer.afterEffect(context, particle, radius, opacity, delta, container.retina.pixelRatio);
|
247 | }
|
248 | exports.drawShapeAfterEffect = drawShapeAfterEffect;
|
249 | function drawPlugin(context, plugin, delta) {
|
250 | if (!plugin.draw) {
|
251 | return;
|
252 | }
|
253 | context.save();
|
254 | plugin.draw(context, delta);
|
255 | context.restore();
|
256 | }
|
257 | exports.drawPlugin = drawPlugin;
|
258 | function drawParticlePlugin(context, plugin, particle, delta) {
|
259 | if (plugin.drawParticle !== undefined) {
|
260 | context.save();
|
261 | plugin.drawParticle(context, particle, delta);
|
262 | context.restore();
|
263 | }
|
264 | }
|
265 | exports.drawParticlePlugin = drawParticlePlugin;
|
266 | function drawEllipse(context, particle, fillColorValue, radius, opacity, width, rotation, start, end) {
|
267 | const pos = particle.getPosition();
|
268 | if (fillColorValue) {
|
269 | context.strokeStyle = (0, ColorUtils_1.getStyleFromHsl)(fillColorValue, opacity);
|
270 | }
|
271 | if (width === 0) {
|
272 | return;
|
273 | }
|
274 | context.lineWidth = width;
|
275 | const rotationRadian = (rotation * Math.PI) / 180;
|
276 | context.beginPath();
|
277 | context.ellipse(pos.x, pos.y, radius / 2, radius * 2, rotationRadian, start, end);
|
278 | context.stroke();
|
279 | }
|
280 | exports.drawEllipse = drawEllipse;
|
281 | function alterHsl(color, type, value) {
|
282 | return {
|
283 | h: color.h,
|
284 | s: color.s,
|
285 | l: color.l + (type === Enums_1.AlterType.darken ? -1 : 1) * value,
|
286 | };
|
287 | }
|
288 | exports.alterHsl = alterHsl;
|