1 | "use strict";
|
2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
4 | return new (P || (P = Promise))(function (resolve, reject) {
|
5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
8 | step((generator = generator.apply(thisArg, _arguments || [])).next());
|
9 | });
|
10 | };
|
11 | Object.defineProperty(exports, "__esModule", { value: true });
|
12 | exports.Loader = void 0;
|
13 | const Container_1 = require("./Container");
|
14 | const Utils_1 = require("../Utils");
|
15 | const tsParticlesDom = [];
|
16 | function fetchError(statusCode) {
|
17 | console.error(`Error tsParticles - fetch status: ${statusCode}`);
|
18 | console.error("Error tsParticles - File config not found");
|
19 | }
|
20 | class Loader {
|
21 | static dom() {
|
22 | return tsParticlesDom;
|
23 | }
|
24 | static domItem(index) {
|
25 | const dom = Loader.dom();
|
26 | const item = dom[index];
|
27 | if (item && !item.destroyed) {
|
28 | return item;
|
29 | }
|
30 | dom.splice(index, 1);
|
31 | }
|
32 | static load(tagId, options, index) {
|
33 | return __awaiter(this, void 0, void 0, function* () {
|
34 | const domContainer = document.getElementById(tagId);
|
35 | if (!domContainer) {
|
36 | return;
|
37 | }
|
38 | return Loader.set(tagId, domContainer, options, index);
|
39 | });
|
40 | }
|
41 | static set(id, domContainer, options, index) {
|
42 | return __awaiter(this, void 0, void 0, function* () {
|
43 | const currentOptions = options instanceof Array ? Utils_1.Utils.itemFromArray(options, index) : options;
|
44 | const dom = Loader.dom();
|
45 | const oldIndex = dom.findIndex((v) => v.id === id);
|
46 | if (oldIndex >= 0) {
|
47 | const old = Loader.domItem(oldIndex);
|
48 | if (old && !old.destroyed) {
|
49 | old.destroy();
|
50 | dom.splice(oldIndex, 1);
|
51 | }
|
52 | }
|
53 | let canvasEl;
|
54 | let generatedCanvas;
|
55 | if (domContainer.tagName.toLowerCase() === "canvas") {
|
56 | canvasEl = domContainer;
|
57 | generatedCanvas = false;
|
58 | }
|
59 | else {
|
60 | const existingCanvases = domContainer.getElementsByTagName("canvas");
|
61 | if (existingCanvases.length) {
|
62 | canvasEl = existingCanvases[0];
|
63 | if (!canvasEl.className) {
|
64 | canvasEl.className = Utils_1.Constants.canvasClass;
|
65 | }
|
66 | generatedCanvas = false;
|
67 | }
|
68 | else {
|
69 | generatedCanvas = true;
|
70 | canvasEl = document.createElement("canvas");
|
71 | canvasEl.className = Utils_1.Constants.canvasClass;
|
72 | canvasEl.style.width = "100%";
|
73 | canvasEl.style.height = "100%";
|
74 | domContainer.appendChild(canvasEl);
|
75 | }
|
76 | }
|
77 | const newItem = new Container_1.Container(id, currentOptions);
|
78 | if (oldIndex >= 0) {
|
79 | dom.splice(oldIndex, 0, newItem);
|
80 | }
|
81 | else {
|
82 | dom.push(newItem);
|
83 | }
|
84 | newItem.canvas.loadCanvas(canvasEl, generatedCanvas);
|
85 | yield newItem.start();
|
86 | return newItem;
|
87 | });
|
88 | }
|
89 | static loadJSON(tagId, jsonUrl, index) {
|
90 | return __awaiter(this, void 0, void 0, function* () {
|
91 | const url = jsonUrl instanceof Array ? Utils_1.Utils.itemFromArray(jsonUrl, index) : jsonUrl;
|
92 | const response = yield fetch(url);
|
93 | if (response.ok) {
|
94 | return Loader.load(tagId, yield response.json());
|
95 | }
|
96 | else {
|
97 | fetchError(response.status);
|
98 | }
|
99 | });
|
100 | }
|
101 | static setJSON(id, domContainer, jsonUrl) {
|
102 | return __awaiter(this, void 0, void 0, function* () {
|
103 | const response = yield fetch(jsonUrl);
|
104 | if (response.ok) {
|
105 | const options = yield response.json();
|
106 | return Loader.set(id, domContainer, options);
|
107 | }
|
108 | else {
|
109 | fetchError(response.status);
|
110 | }
|
111 | });
|
112 | }
|
113 | static setOnClickHandler(callback) {
|
114 | const dom = Loader.dom();
|
115 | if (dom.length === 0) {
|
116 | throw new Error("Can only set click handlers after calling tsParticles.load() or tsParticles.loadJSON()");
|
117 | }
|
118 | for (const domItem of dom) {
|
119 | const el = domItem.interactivity.element;
|
120 | if (!el) {
|
121 | continue;
|
122 | }
|
123 | const clickOrTouchHandler = (e, pos) => {
|
124 | if (domItem.destroyed) {
|
125 | return;
|
126 | }
|
127 | const pxRatio = domItem.retina.pixelRatio;
|
128 | const posRetina = {
|
129 | x: pos.x * pxRatio,
|
130 | y: pos.y * pxRatio,
|
131 | };
|
132 | const particles = domItem.particles.quadTree.queryCircle(posRetina, domItem.retina.sizeValue);
|
133 | callback(e, particles);
|
134 | };
|
135 | const clickHandler = (e) => {
|
136 | if (domItem.destroyed) {
|
137 | return;
|
138 | }
|
139 | const mouseEvent = e;
|
140 | const pos = {
|
141 | x: mouseEvent.offsetX || mouseEvent.clientX,
|
142 | y: mouseEvent.offsetY || mouseEvent.clientY,
|
143 | };
|
144 | clickOrTouchHandler(e, pos);
|
145 | };
|
146 | const touchStartHandler = () => {
|
147 | if (domItem.destroyed) {
|
148 | return;
|
149 | }
|
150 | touched = true;
|
151 | touchMoved = false;
|
152 | };
|
153 | const touchMoveHandler = () => {
|
154 | if (domItem.destroyed) {
|
155 | return;
|
156 | }
|
157 | touchMoved = true;
|
158 | };
|
159 | const touchEndHandler = (e) => {
|
160 | var _a, _b, _c;
|
161 | if (domItem.destroyed) {
|
162 | return;
|
163 | }
|
164 | if (touched && !touchMoved) {
|
165 | const touchEvent = e;
|
166 | const lastTouch = touchEvent.touches[touchEvent.touches.length - 1];
|
167 | const canvasRect = (_a = domItem.canvas.element) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
168 | const pos = {
|
169 | x: lastTouch.clientX - ((_b = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.left) !== null && _b !== void 0 ? _b : 0),
|
170 | y: lastTouch.clientY - ((_c = canvasRect === null || canvasRect === void 0 ? void 0 : canvasRect.top) !== null && _c !== void 0 ? _c : 0),
|
171 | };
|
172 | clickOrTouchHandler(e, pos);
|
173 | }
|
174 | touched = false;
|
175 | touchMoved = false;
|
176 | };
|
177 | const touchCancelHandler = () => {
|
178 | if (domItem.destroyed) {
|
179 | return;
|
180 | }
|
181 | touched = false;
|
182 | touchMoved = false;
|
183 | };
|
184 | let touched = false;
|
185 | let touchMoved = false;
|
186 | el.addEventListener("click", clickHandler);
|
187 | el.addEventListener("touchstart", touchStartHandler);
|
188 | el.addEventListener("touchmove", touchMoveHandler);
|
189 | el.addEventListener("touchend", touchEndHandler);
|
190 | el.addEventListener("touchcancel", touchCancelHandler);
|
191 | }
|
192 | }
|
193 | }
|
194 | exports.Loader = Loader;
|