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