@tsparticles/shape-image 4.0.0-beta.1 → 4.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/browser/index.js +1 -1
- package/cjs/index.js +1 -1
- package/dist_browser_GifUtils_Utils_js.js +1 -1
- package/dist_browser_ImageDrawer_js.js +1 -1
- package/dist_browser_ImagePreloaderInstance_js.js +1 -1
- package/dist_browser_ImagePreloader_js.js +1 -1
- package/esm/index.js +1 -1
- package/package.json +3 -4
- package/report.html +1 -1
- package/tsparticles.shape.image.js +2 -2
- package/tsparticles.shape.image.min.js +1 -1
- package/umd/GifUtils/ByteStream.js +0 -64
- package/umd/GifUtils/Constants.js +0 -15
- package/umd/GifUtils/Enums/DisposalMethod.js +0 -24
- package/umd/GifUtils/Types/ApplicationExtension.js +0 -12
- package/umd/GifUtils/Types/Frame.js +0 -12
- package/umd/GifUtils/Types/GIF.js +0 -12
- package/umd/GifUtils/Types/GIFDataHeaders.js +0 -23
- package/umd/GifUtils/Types/GIFProgressCallbackFunction.js +0 -12
- package/umd/GifUtils/Types/PlainTextData.js +0 -12
- package/umd/GifUtils/Utils.js +0 -435
- package/umd/IImageShape.js +0 -12
- package/umd/ImageDrawer.js +0 -135
- package/umd/ImagePreloader.js +0 -81
- package/umd/ImagePreloaderInstance.js +0 -25
- package/umd/Options/Classes/Preload.js +0 -50
- package/umd/Options/Interfaces/IPreload.js +0 -12
- package/umd/Utils.js +0 -104
- package/umd/index.js +0 -116
- package/umd/types.js +0 -12
package/umd/GifUtils/Utils.js
DELETED
|
@@ -1,435 +0,0 @@
|
|
|
1
|
-
(function (factory) {
|
|
2
|
-
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
-
var v = factory(require, exports);
|
|
4
|
-
if (v !== undefined) module.exports = v;
|
|
5
|
-
}
|
|
6
|
-
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "../Utils.js", "@tsparticles/engine", "./Constants.js", "./ByteStream.js", "./Enums/DisposalMethod.js", "./Types/GIFDataHeaders.js"], factory);
|
|
8
|
-
}
|
|
9
|
-
})(function (require, exports) {
|
|
10
|
-
"use strict";
|
|
11
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.getGIFLoopAmount = getGIFLoopAmount;
|
|
13
|
-
exports.decodeGIF = decodeGIF;
|
|
14
|
-
exports.drawGif = drawGif;
|
|
15
|
-
exports.loadGifImage = loadGifImage;
|
|
16
|
-
const Utils_js_1 = require("../Utils.js");
|
|
17
|
-
const engine_1 = require("@tsparticles/engine");
|
|
18
|
-
const Constants_js_1 = require("./Constants.js");
|
|
19
|
-
const ByteStream_js_1 = require("./ByteStream.js");
|
|
20
|
-
const DisposalMethod_js_1 = require("./Enums/DisposalMethod.js");
|
|
21
|
-
const GIFDataHeaders_js_1 = require("./Types/GIFDataHeaders.js");
|
|
22
|
-
const defaultFrame = 0, initialTime = 0, firstIndex = 0, defaultLoopCount = 0;
|
|
23
|
-
function parseColorTable(byteStream, count) {
|
|
24
|
-
const colors = [];
|
|
25
|
-
for (let i = 0; i < count; i++) {
|
|
26
|
-
colors.push({
|
|
27
|
-
r: byteStream.data[byteStream.pos],
|
|
28
|
-
g: byteStream.data[byteStream.pos + 1],
|
|
29
|
-
b: byteStream.data[byteStream.pos + 2],
|
|
30
|
-
});
|
|
31
|
-
byteStream.pos += 3;
|
|
32
|
-
}
|
|
33
|
-
return colors;
|
|
34
|
-
}
|
|
35
|
-
function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
|
|
36
|
-
switch (byteStream.nextByte()) {
|
|
37
|
-
case GIFDataHeaders_js_1.GIFDataHeaders.GraphicsControlExtension: {
|
|
38
|
-
const frame = gif.frames[getFrameIndex(false)];
|
|
39
|
-
byteStream.pos++;
|
|
40
|
-
const packedByte = byteStream.nextByte();
|
|
41
|
-
frame.GCreserved = (packedByte & 0xe0) >>> 5;
|
|
42
|
-
frame.disposalMethod = (packedByte & 0x1c) >>> 2;
|
|
43
|
-
frame.userInputDelayFlag = (packedByte & 2) === 2;
|
|
44
|
-
const transparencyFlag = (packedByte & 1) === 1;
|
|
45
|
-
frame.delayTime = byteStream.nextTwoBytes() * 0xa;
|
|
46
|
-
const transparencyIndex = byteStream.nextByte();
|
|
47
|
-
if (transparencyFlag) {
|
|
48
|
-
getTransparencyIndex(transparencyIndex);
|
|
49
|
-
}
|
|
50
|
-
byteStream.pos++;
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
53
|
-
case GIFDataHeaders_js_1.GIFDataHeaders.ApplicationExtension: {
|
|
54
|
-
byteStream.pos++;
|
|
55
|
-
const applicationExtension = {
|
|
56
|
-
identifier: byteStream.getString(8),
|
|
57
|
-
authenticationCode: byteStream.getString(3),
|
|
58
|
-
data: byteStream.readSubBlocksBin(),
|
|
59
|
-
};
|
|
60
|
-
gif.applicationExtensions.push(applicationExtension);
|
|
61
|
-
break;
|
|
62
|
-
}
|
|
63
|
-
case GIFDataHeaders_js_1.GIFDataHeaders.CommentExtension: {
|
|
64
|
-
gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
|
|
65
|
-
break;
|
|
66
|
-
}
|
|
67
|
-
case GIFDataHeaders_js_1.GIFDataHeaders.PlainTextExtension: {
|
|
68
|
-
if (gif.globalColorTable.length === 0) {
|
|
69
|
-
throw new EvalError("plain text extension without global color table");
|
|
70
|
-
}
|
|
71
|
-
byteStream.pos++;
|
|
72
|
-
gif.frames[getFrameIndex(false)].plainTextData = {
|
|
73
|
-
left: byteStream.nextTwoBytes(),
|
|
74
|
-
top: byteStream.nextTwoBytes(),
|
|
75
|
-
width: byteStream.nextTwoBytes(),
|
|
76
|
-
height: byteStream.nextTwoBytes(),
|
|
77
|
-
charSize: {
|
|
78
|
-
width: byteStream.nextTwoBytes(),
|
|
79
|
-
height: byteStream.nextTwoBytes(),
|
|
80
|
-
},
|
|
81
|
-
foregroundColor: byteStream.nextByte(),
|
|
82
|
-
backgroundColor: byteStream.nextByte(),
|
|
83
|
-
text: byteStream.readSubBlocks(),
|
|
84
|
-
};
|
|
85
|
-
break;
|
|
86
|
-
}
|
|
87
|
-
default:
|
|
88
|
-
byteStream.skipSubBlocks();
|
|
89
|
-
break;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
function readBits(imageData, pos, len) {
|
|
93
|
-
const bytePos = pos >>> 3, bitPos = pos & 7;
|
|
94
|
-
return (((imageData[bytePos] + (imageData[bytePos + 1] << 8) + (imageData[bytePos + 2] << 16)) &
|
|
95
|
-
(((1 << len) - 1) << bitPos)) >>>
|
|
96
|
-
bitPos);
|
|
97
|
-
}
|
|
98
|
-
async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
|
|
99
|
-
const frame = gif.frames[getFrameIndex(true)];
|
|
100
|
-
frame.left = byteStream.nextTwoBytes();
|
|
101
|
-
frame.top = byteStream.nextTwoBytes();
|
|
102
|
-
frame.width = byteStream.nextTwoBytes();
|
|
103
|
-
frame.height = byteStream.nextTwoBytes();
|
|
104
|
-
const packedByte = byteStream.nextByte(), localColorTableFlag = (packedByte & 0x80) === 0x80, interlacedFlag = (packedByte & 0x40) === 0x40;
|
|
105
|
-
frame.sortFlag = (packedByte & 0x20) === 0x20;
|
|
106
|
-
frame.reserved = (packedByte & 0x18) >>> 3;
|
|
107
|
-
const localColorCount = 1 << ((packedByte & 7) + 1);
|
|
108
|
-
if (localColorTableFlag) {
|
|
109
|
-
frame.localColorTable = parseColorTable(byteStream, localColorCount);
|
|
110
|
-
}
|
|
111
|
-
const getColor = (index) => {
|
|
112
|
-
const { r, g, b } = (localColorTableFlag ? frame.localColorTable : gif.globalColorTable)[index];
|
|
113
|
-
if (index !== getTransparencyIndex(null)) {
|
|
114
|
-
return { r, g, b, a: 255 };
|
|
115
|
-
}
|
|
116
|
-
return { r, g, b, a: avgAlpha ? Math.trunc((r + g + b) / 3) : 0 };
|
|
117
|
-
}, image = (() => {
|
|
118
|
-
try {
|
|
119
|
-
return new ImageData(frame.width, frame.height, canvasSettings);
|
|
120
|
-
}
|
|
121
|
-
catch (error) {
|
|
122
|
-
if (error instanceof DOMException && error.name === "IndexSizeError") {
|
|
123
|
-
return null;
|
|
124
|
-
}
|
|
125
|
-
throw error;
|
|
126
|
-
}
|
|
127
|
-
})();
|
|
128
|
-
if (image == null) {
|
|
129
|
-
throw new EvalError("GIF frame size is to large");
|
|
130
|
-
}
|
|
131
|
-
const minCodeSize = byteStream.nextByte(), imageData = byteStream.readSubBlocksBin(), clearCode = 1 << minCodeSize;
|
|
132
|
-
if (interlacedFlag) {
|
|
133
|
-
for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
|
|
134
|
-
if (Constants_js_1.InterlaceOffsets[pass] < frame.height) {
|
|
135
|
-
let pixelPos = 0, lineIndex = 0, exit = false;
|
|
136
|
-
while (!exit) {
|
|
137
|
-
const last = code;
|
|
138
|
-
code = readBits(imageData, pos, size);
|
|
139
|
-
pos += size + 1;
|
|
140
|
-
if (code === clearCode) {
|
|
141
|
-
size = minCodeSize + 1;
|
|
142
|
-
dic.length = clearCode + 2;
|
|
143
|
-
for (let i = 0; i < dic.length; i++) {
|
|
144
|
-
dic[i] = i < clearCode ? [i] : [];
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
else {
|
|
148
|
-
if (code >= dic.length) {
|
|
149
|
-
dic.push(dic[last].concat(dic[last][0]));
|
|
150
|
-
}
|
|
151
|
-
else if (last !== clearCode) {
|
|
152
|
-
dic.push(dic[last].concat(dic[code][0]));
|
|
153
|
-
}
|
|
154
|
-
for (const item of dic[code]) {
|
|
155
|
-
const { r, g, b, a } = getColor(item);
|
|
156
|
-
image.data.set([r, g, b, a], Constants_js_1.InterlaceOffsets[pass] * frame.width +
|
|
157
|
-
Constants_js_1.InterlaceSteps[pass] * lineIndex +
|
|
158
|
-
(pixelPos % (frame.width * 4)));
|
|
159
|
-
pixelPos += 4;
|
|
160
|
-
}
|
|
161
|
-
if (dic.length === 1 << size && size < 0xc) {
|
|
162
|
-
size++;
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
|
|
166
|
-
lineIndex++;
|
|
167
|
-
if (Constants_js_1.InterlaceOffsets[pass] + Constants_js_1.InterlaceSteps[pass] * lineIndex >= frame.height) {
|
|
168
|
-
exit = true;
|
|
169
|
-
}
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
progressCallback?.(byteStream.pos / (byteStream.data.length - 1), getFrameIndex(false) + 1, image, { x: frame.left, y: frame.top }, { width: gif.width, height: gif.height });
|
|
174
|
-
}
|
|
175
|
-
frame.image = image;
|
|
176
|
-
frame.bitmap = await createImageBitmap(image);
|
|
177
|
-
}
|
|
178
|
-
else {
|
|
179
|
-
let code = 0, size = minCodeSize + 1, pos = 0, pixelPos = -4;
|
|
180
|
-
const dic = [[0]];
|
|
181
|
-
for (;;) {
|
|
182
|
-
const last = code;
|
|
183
|
-
code = readBits(imageData, pos, size);
|
|
184
|
-
pos += size;
|
|
185
|
-
if (code === clearCode) {
|
|
186
|
-
size = minCodeSize + 1;
|
|
187
|
-
dic.length = clearCode + 2;
|
|
188
|
-
for (let i = 0; i < dic.length; i++) {
|
|
189
|
-
dic[i] = i < clearCode ? [i] : [];
|
|
190
|
-
}
|
|
191
|
-
}
|
|
192
|
-
else {
|
|
193
|
-
if (code === clearCode + 1) {
|
|
194
|
-
break;
|
|
195
|
-
}
|
|
196
|
-
if (code >= dic.length) {
|
|
197
|
-
dic.push(dic[last].concat(dic[last][0]));
|
|
198
|
-
}
|
|
199
|
-
else if (last !== clearCode) {
|
|
200
|
-
dic.push(dic[last].concat(dic[code][0]));
|
|
201
|
-
}
|
|
202
|
-
for (const item of dic[code]) {
|
|
203
|
-
const { r, g, b, a } = getColor(item);
|
|
204
|
-
pixelPos += 4;
|
|
205
|
-
image.data.set([r, g, b, a], pixelPos);
|
|
206
|
-
}
|
|
207
|
-
if (dic.length >= 1 << size && size < 0xc) {
|
|
208
|
-
size++;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
frame.image = image;
|
|
213
|
-
frame.bitmap = await createImageBitmap(image);
|
|
214
|
-
progressCallback?.((byteStream.pos + 1) / byteStream.data.length, getFrameIndex(false) + 1, frame.image, { x: frame.left, y: frame.top }, { width: gif.width, height: gif.height });
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback) {
|
|
218
|
-
switch (byteStream.nextByte()) {
|
|
219
|
-
case GIFDataHeaders_js_1.GIFDataHeaders.EndOfFile:
|
|
220
|
-
return true;
|
|
221
|
-
case GIFDataHeaders_js_1.GIFDataHeaders.Image:
|
|
222
|
-
await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, canvasSettings, progressCallback);
|
|
223
|
-
break;
|
|
224
|
-
case GIFDataHeaders_js_1.GIFDataHeaders.Extension:
|
|
225
|
-
parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
|
|
226
|
-
break;
|
|
227
|
-
default:
|
|
228
|
-
throw new EvalError("undefined block found");
|
|
229
|
-
}
|
|
230
|
-
return false;
|
|
231
|
-
}
|
|
232
|
-
function getGIFLoopAmount(gif) {
|
|
233
|
-
for (const extension of gif.applicationExtensions) {
|
|
234
|
-
if (extension.identifier + extension.authenticationCode !== "NETSCAPE2.0") {
|
|
235
|
-
continue;
|
|
236
|
-
}
|
|
237
|
-
return extension.data[1] + (extension.data[2] << 8);
|
|
238
|
-
}
|
|
239
|
-
return Number.NaN;
|
|
240
|
-
}
|
|
241
|
-
async function decodeGIF(gifURL, canvasSettings, progressCallback, avgAlpha) {
|
|
242
|
-
avgAlpha ??= false;
|
|
243
|
-
const res = await fetch(gifURL);
|
|
244
|
-
if (!res.ok && res.status === 404) {
|
|
245
|
-
throw new EvalError("file not found");
|
|
246
|
-
}
|
|
247
|
-
const buffer = await res.arrayBuffer(), gif = {
|
|
248
|
-
width: 0,
|
|
249
|
-
height: 0,
|
|
250
|
-
totalTime: 0,
|
|
251
|
-
colorRes: 0,
|
|
252
|
-
pixelAspectRatio: 0,
|
|
253
|
-
frames: [],
|
|
254
|
-
sortFlag: false,
|
|
255
|
-
globalColorTable: [],
|
|
256
|
-
backgroundImage: new ImageData(1, 1, canvasSettings),
|
|
257
|
-
comments: [],
|
|
258
|
-
applicationExtensions: [],
|
|
259
|
-
}, byteStream = new ByteStream_js_1.ByteStream(new Uint8ClampedArray(buffer));
|
|
260
|
-
if (byteStream.getString(6) !== "GIF89a") {
|
|
261
|
-
throw new Error("not a supported GIF file");
|
|
262
|
-
}
|
|
263
|
-
gif.width = byteStream.nextTwoBytes();
|
|
264
|
-
gif.height = byteStream.nextTwoBytes();
|
|
265
|
-
const packedByte = byteStream.nextByte(), globalColorTableFlag = (packedByte & 0x80) === 0x80;
|
|
266
|
-
gif.colorRes = (packedByte & 0x70) >>> 4;
|
|
267
|
-
gif.sortFlag = (packedByte & 8) === 8;
|
|
268
|
-
const globalColorCount = 1 << ((packedByte & 7) + 1), backgroundColorIndex = byteStream.nextByte();
|
|
269
|
-
gif.pixelAspectRatio = byteStream.nextByte();
|
|
270
|
-
if (gif.pixelAspectRatio !== 0) {
|
|
271
|
-
gif.pixelAspectRatio = (gif.pixelAspectRatio + 0xf) / 0x40;
|
|
272
|
-
}
|
|
273
|
-
if (globalColorTableFlag) {
|
|
274
|
-
gif.globalColorTable = parseColorTable(byteStream, globalColorCount);
|
|
275
|
-
}
|
|
276
|
-
const backgroundImage = (() => {
|
|
277
|
-
try {
|
|
278
|
-
return new ImageData(gif.width, gif.height, canvasSettings);
|
|
279
|
-
}
|
|
280
|
-
catch (error) {
|
|
281
|
-
if (error instanceof DOMException && error.name === "IndexSizeError") {
|
|
282
|
-
return null;
|
|
283
|
-
}
|
|
284
|
-
throw error;
|
|
285
|
-
}
|
|
286
|
-
})();
|
|
287
|
-
if (backgroundImage == null) {
|
|
288
|
-
throw new Error("GIF frame size is to large");
|
|
289
|
-
}
|
|
290
|
-
const { r, g, b } = gif.globalColorTable[backgroundColorIndex];
|
|
291
|
-
backgroundImage.data.set(globalColorTableFlag ? [r, g, b, 255] : [0, 0, 0, 0]);
|
|
292
|
-
for (let i = 4; i < backgroundImage.data.length; i *= 2) {
|
|
293
|
-
backgroundImage.data.copyWithin(i, 0, i);
|
|
294
|
-
}
|
|
295
|
-
gif.backgroundImage = backgroundImage;
|
|
296
|
-
let frameIndex = -1, incrementFrameIndex = true, transparencyIndex = -1;
|
|
297
|
-
const getframeIndex = (increment) => {
|
|
298
|
-
if (increment) {
|
|
299
|
-
incrementFrameIndex = true;
|
|
300
|
-
}
|
|
301
|
-
return frameIndex;
|
|
302
|
-
}, getTransparencyIndex = (newValue) => {
|
|
303
|
-
if (newValue != null) {
|
|
304
|
-
transparencyIndex = newValue;
|
|
305
|
-
}
|
|
306
|
-
return transparencyIndex;
|
|
307
|
-
};
|
|
308
|
-
try {
|
|
309
|
-
do {
|
|
310
|
-
if (incrementFrameIndex) {
|
|
311
|
-
gif.frames.push({
|
|
312
|
-
left: 0,
|
|
313
|
-
top: 0,
|
|
314
|
-
width: 0,
|
|
315
|
-
height: 0,
|
|
316
|
-
disposalMethod: DisposalMethod_js_1.DisposalMethod.Replace,
|
|
317
|
-
image: new ImageData(1, 1, canvasSettings),
|
|
318
|
-
plainTextData: null,
|
|
319
|
-
userInputDelayFlag: false,
|
|
320
|
-
delayTime: 0,
|
|
321
|
-
sortFlag: false,
|
|
322
|
-
localColorTable: [],
|
|
323
|
-
reserved: 0,
|
|
324
|
-
GCreserved: 0,
|
|
325
|
-
});
|
|
326
|
-
frameIndex++;
|
|
327
|
-
transparencyIndex = -1;
|
|
328
|
-
incrementFrameIndex = false;
|
|
329
|
-
}
|
|
330
|
-
} while (!(await parseBlock(byteStream, gif, avgAlpha, getframeIndex, getTransparencyIndex, canvasSettings, progressCallback)));
|
|
331
|
-
gif.frames.length--;
|
|
332
|
-
for (const frame of gif.frames) {
|
|
333
|
-
if (frame.userInputDelayFlag && frame.delayTime === 0) {
|
|
334
|
-
gif.totalTime = Infinity;
|
|
335
|
-
break;
|
|
336
|
-
}
|
|
337
|
-
gif.totalTime += frame.delayTime;
|
|
338
|
-
}
|
|
339
|
-
return gif;
|
|
340
|
-
}
|
|
341
|
-
catch (error) {
|
|
342
|
-
if (error instanceof EvalError) {
|
|
343
|
-
throw new Error(`error while parsing frame ${frameIndex.toString()} "${error.message}"`, { cause: error });
|
|
344
|
-
}
|
|
345
|
-
throw error;
|
|
346
|
-
}
|
|
347
|
-
}
|
|
348
|
-
function drawGif(data, canvasSettings) {
|
|
349
|
-
const { context, radius, particle, delta } = data, image = particle.image;
|
|
350
|
-
if (!image?.gifData || !image.gif) {
|
|
351
|
-
return;
|
|
352
|
-
}
|
|
353
|
-
const offscreenCanvas = new OffscreenCanvas(image.gifData.width, image.gifData.height), offscreenContext = offscreenCanvas.getContext("2d", canvasSettings);
|
|
354
|
-
if (!offscreenContext) {
|
|
355
|
-
throw new Error("could not create offscreen canvas context");
|
|
356
|
-
}
|
|
357
|
-
offscreenContext.imageSmoothingQuality = "low";
|
|
358
|
-
offscreenContext.imageSmoothingEnabled = false;
|
|
359
|
-
offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
360
|
-
particle.gifLoopCount ??= image.gifLoopCount ?? defaultLoopCount;
|
|
361
|
-
let frameIndex = particle.gifFrame ?? defaultFrame;
|
|
362
|
-
const pos = { x: -image.gifData.width * engine_1.half, y: -image.gifData.height * engine_1.half }, frame = image.gifData.frames[frameIndex];
|
|
363
|
-
particle.gifTime ??= initialTime;
|
|
364
|
-
if (!frame.bitmap) {
|
|
365
|
-
return;
|
|
366
|
-
}
|
|
367
|
-
context.scale(radius / image.gifData.width, radius / image.gifData.height);
|
|
368
|
-
switch (frame.disposalMethod) {
|
|
369
|
-
case DisposalMethod_js_1.DisposalMethod.UndefinedA:
|
|
370
|
-
case DisposalMethod_js_1.DisposalMethod.UndefinedB:
|
|
371
|
-
case DisposalMethod_js_1.DisposalMethod.UndefinedC:
|
|
372
|
-
case DisposalMethod_js_1.DisposalMethod.UndefinedD:
|
|
373
|
-
case DisposalMethod_js_1.DisposalMethod.Replace:
|
|
374
|
-
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
375
|
-
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
376
|
-
offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
377
|
-
break;
|
|
378
|
-
case DisposalMethod_js_1.DisposalMethod.Combine:
|
|
379
|
-
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
380
|
-
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
381
|
-
break;
|
|
382
|
-
case DisposalMethod_js_1.DisposalMethod.RestoreBackground:
|
|
383
|
-
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
384
|
-
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
385
|
-
offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
386
|
-
if (!image.gifData.globalColorTable.length) {
|
|
387
|
-
offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);
|
|
388
|
-
}
|
|
389
|
-
else {
|
|
390
|
-
offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
|
|
391
|
-
}
|
|
392
|
-
break;
|
|
393
|
-
case DisposalMethod_js_1.DisposalMethod.RestorePrevious:
|
|
394
|
-
{
|
|
395
|
-
const previousImageData = offscreenContext.getImageData(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
396
|
-
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
397
|
-
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
398
|
-
offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
399
|
-
offscreenContext.putImageData(previousImageData, engine_1.originPoint.x, engine_1.originPoint.y);
|
|
400
|
-
}
|
|
401
|
-
break;
|
|
402
|
-
}
|
|
403
|
-
particle.gifTime += delta.value;
|
|
404
|
-
if (particle.gifTime > frame.delayTime) {
|
|
405
|
-
particle.gifTime -= frame.delayTime;
|
|
406
|
-
if (++frameIndex >= image.gifData.frames.length) {
|
|
407
|
-
if (--particle.gifLoopCount <= defaultLoopCount) {
|
|
408
|
-
return;
|
|
409
|
-
}
|
|
410
|
-
frameIndex = firstIndex;
|
|
411
|
-
offscreenContext.clearRect(engine_1.originPoint.x, engine_1.originPoint.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
412
|
-
}
|
|
413
|
-
particle.gifFrame = frameIndex;
|
|
414
|
-
}
|
|
415
|
-
context.scale(image.gifData.width / radius, image.gifData.height / radius);
|
|
416
|
-
}
|
|
417
|
-
async function loadGifImage(image, canvasSettings) {
|
|
418
|
-
if (image.type !== "gif") {
|
|
419
|
-
await (0, Utils_js_1.loadImage)(image);
|
|
420
|
-
return;
|
|
421
|
-
}
|
|
422
|
-
image.loading = true;
|
|
423
|
-
try {
|
|
424
|
-
image.gifData = await decodeGIF(image.source, canvasSettings);
|
|
425
|
-
image.gifLoopCount = getGIFLoopAmount(image.gifData);
|
|
426
|
-
if (!image.gifLoopCount) {
|
|
427
|
-
image.gifLoopCount = Infinity;
|
|
428
|
-
}
|
|
429
|
-
}
|
|
430
|
-
catch {
|
|
431
|
-
image.error = true;
|
|
432
|
-
}
|
|
433
|
-
image.loading = false;
|
|
434
|
-
}
|
|
435
|
-
});
|
package/umd/IImageShape.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
(function (factory) {
|
|
2
|
-
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
-
var v = factory(require, exports);
|
|
4
|
-
if (v !== undefined) module.exports = v;
|
|
5
|
-
}
|
|
6
|
-
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports"], factory);
|
|
8
|
-
}
|
|
9
|
-
})(function (require, exports) {
|
|
10
|
-
"use strict";
|
|
11
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
});
|
package/umd/ImageDrawer.js
DELETED
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
(function (factory) {
|
|
2
|
-
if (typeof module === "object" && typeof module.exports === "object") {
|
|
3
|
-
var v = factory(require, exports);
|
|
4
|
-
if (v !== undefined) module.exports = v;
|
|
5
|
-
}
|
|
6
|
-
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@tsparticles/engine", "./Utils.js", "./GifUtils/Utils.js"], factory);
|
|
8
|
-
}
|
|
9
|
-
})(function (require, exports) {
|
|
10
|
-
"use strict";
|
|
11
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
|
-
exports.ImageDrawer = void 0;
|
|
13
|
-
const engine_1 = require("@tsparticles/engine");
|
|
14
|
-
const Utils_js_1 = require("./Utils.js");
|
|
15
|
-
const Utils_js_2 = require("./GifUtils/Utils.js");
|
|
16
|
-
const sides = 12;
|
|
17
|
-
class ImageDrawer {
|
|
18
|
-
_container;
|
|
19
|
-
_engine;
|
|
20
|
-
constructor(engine, container) {
|
|
21
|
-
this._engine = engine;
|
|
22
|
-
this._container = container;
|
|
23
|
-
}
|
|
24
|
-
draw(data) {
|
|
25
|
-
const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
|
|
26
|
-
if (!image) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
context.globalAlpha = opacity;
|
|
30
|
-
if (image.gif && image.gifData) {
|
|
31
|
-
(0, Utils_js_2.drawGif)(data, this._container.canvas.render.settings);
|
|
32
|
-
}
|
|
33
|
-
else if (element) {
|
|
34
|
-
const ratio = image.ratio, pos = {
|
|
35
|
-
x: -radius,
|
|
36
|
-
y: -radius,
|
|
37
|
-
}, diameter = radius * engine_1.double;
|
|
38
|
-
context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
|
|
39
|
-
}
|
|
40
|
-
context.globalAlpha = engine_1.defaultAlpha;
|
|
41
|
-
}
|
|
42
|
-
getSidesCount() {
|
|
43
|
-
return sides;
|
|
44
|
-
}
|
|
45
|
-
async init(container) {
|
|
46
|
-
const options = container.actualOptions;
|
|
47
|
-
if (!options.preload || !this._engine.loadImage) {
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
const promises = [];
|
|
51
|
-
for (const imageData of options.preload) {
|
|
52
|
-
promises.push(this._engine.loadImage(container, imageData));
|
|
53
|
-
}
|
|
54
|
-
await Promise.all(promises);
|
|
55
|
-
}
|
|
56
|
-
loadShape(particle) {
|
|
57
|
-
const { _container: container } = this;
|
|
58
|
-
if (!particle.shape || !Utils_js_1.shapeTypes.includes(particle.shape)) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
const imageData = particle.shapeData;
|
|
62
|
-
if (!imageData) {
|
|
63
|
-
return;
|
|
64
|
-
}
|
|
65
|
-
const images = this._engine.getImages?.(container), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
|
|
66
|
-
if (image) {
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
void this.loadImageShape(container, imageData).then(() => {
|
|
70
|
-
this.loadShape(particle);
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
particleInit(container, particle) {
|
|
74
|
-
if (particle.shape !== "image" && particle.shape !== "images") {
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
const images = this._engine.getImages?.(container), imageData = particle.shapeData;
|
|
78
|
-
if (!imageData) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
81
|
-
const color = particle.getFillColor(), image = images?.find((t) => t.name === imageData.name || t.source === imageData.src);
|
|
82
|
-
if (!image) {
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
const replaceColor = imageData.replaceColor;
|
|
86
|
-
if (image.loading) {
|
|
87
|
-
setTimeout(() => {
|
|
88
|
-
this.particleInit(container, particle);
|
|
89
|
-
});
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
void (async () => {
|
|
93
|
-
let imageRes;
|
|
94
|
-
if (image.svgData && color) {
|
|
95
|
-
imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle, container.hdr);
|
|
96
|
-
}
|
|
97
|
-
else {
|
|
98
|
-
imageRes = {
|
|
99
|
-
color,
|
|
100
|
-
data: image,
|
|
101
|
-
element: image.element,
|
|
102
|
-
gif: image.gif,
|
|
103
|
-
gifData: image.gifData,
|
|
104
|
-
gifLoopCount: image.gifLoopCount,
|
|
105
|
-
loaded: true,
|
|
106
|
-
ratio: imageData.width && imageData.height ? imageData.width / imageData.height : (image.ratio ?? engine_1.defaultRatio),
|
|
107
|
-
replaceColor: replaceColor,
|
|
108
|
-
source: imageData.src,
|
|
109
|
-
};
|
|
110
|
-
}
|
|
111
|
-
if (!imageRes.ratio) {
|
|
112
|
-
imageRes.ratio = 1;
|
|
113
|
-
}
|
|
114
|
-
const close = imageData.close ?? particle.shapeClose, imageShape = {
|
|
115
|
-
image: imageRes,
|
|
116
|
-
close,
|
|
117
|
-
};
|
|
118
|
-
particle.image = imageShape.image;
|
|
119
|
-
particle.shapeClose = imageShape.close;
|
|
120
|
-
})();
|
|
121
|
-
}
|
|
122
|
-
loadImageShape = async (container, imageShape) => {
|
|
123
|
-
if (!this._engine.loadImage) {
|
|
124
|
-
throw new Error(`Image shape not initialized`);
|
|
125
|
-
}
|
|
126
|
-
await this._engine.loadImage(container, {
|
|
127
|
-
gif: imageShape.gif,
|
|
128
|
-
name: imageShape.name,
|
|
129
|
-
replaceColor: imageShape.replaceColor,
|
|
130
|
-
src: imageShape.src,
|
|
131
|
-
});
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
exports.ImageDrawer = ImageDrawer;
|
|
135
|
-
});
|
package/umd/ImagePreloader.js
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
2
|
-
if (k2 === undefined) k2 = k;
|
|
3
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
4
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
5
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
6
|
-
}
|
|
7
|
-
Object.defineProperty(o, k2, desc);
|
|
8
|
-
}) : (function(o, m, k, k2) {
|
|
9
|
-
if (k2 === undefined) k2 = k;
|
|
10
|
-
o[k2] = m[k];
|
|
11
|
-
}));
|
|
12
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
13
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
14
|
-
}) : function(o, v) {
|
|
15
|
-
o["default"] = v;
|
|
16
|
-
});
|
|
17
|
-
var __importStar = (this && this.__importStar) || (function () {
|
|
18
|
-
var ownKeys = function(o) {
|
|
19
|
-
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
20
|
-
var ar = [];
|
|
21
|
-
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
22
|
-
return ar;
|
|
23
|
-
};
|
|
24
|
-
return ownKeys(o);
|
|
25
|
-
};
|
|
26
|
-
return function (mod) {
|
|
27
|
-
if (mod && mod.__esModule) return mod;
|
|
28
|
-
var result = {};
|
|
29
|
-
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
30
|
-
__setModuleDefault(result, mod);
|
|
31
|
-
return result;
|
|
32
|
-
};
|
|
33
|
-
})();
|
|
34
|
-
(function (factory) {
|
|
35
|
-
if (typeof module === "object" && typeof module.exports === "object") {
|
|
36
|
-
var v = factory(require, exports);
|
|
37
|
-
if (v !== undefined) module.exports = v;
|
|
38
|
-
}
|
|
39
|
-
else if (typeof define === "function" && define.amd) {
|
|
40
|
-
define(["require", "exports", "./Options/Classes/Preload.js"], factory);
|
|
41
|
-
}
|
|
42
|
-
})(function (require, exports) {
|
|
43
|
-
"use strict";
|
|
44
|
-
var __syncRequire = typeof module === "object" && typeof module.exports === "object";
|
|
45
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
46
|
-
exports.ImagePreloaderPlugin = void 0;
|
|
47
|
-
const Preload_js_1 = require("./Options/Classes/Preload.js");
|
|
48
|
-
class ImagePreloaderPlugin {
|
|
49
|
-
id = "image-preloader";
|
|
50
|
-
_engine;
|
|
51
|
-
constructor(engine) {
|
|
52
|
-
this._engine = engine;
|
|
53
|
-
}
|
|
54
|
-
async getPlugin(container) {
|
|
55
|
-
const { ImagePreloaderInstance } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImagePreloaderInstance.js"))) : new Promise((resolve_1, reject_1) => { require(["./ImagePreloaderInstance.js"], resolve_1, reject_1); }).then(__importStar));
|
|
56
|
-
return new ImagePreloaderInstance(this._engine, container);
|
|
57
|
-
}
|
|
58
|
-
loadOptions(_container, options, source) {
|
|
59
|
-
if (!source?.preload) {
|
|
60
|
-
return;
|
|
61
|
-
}
|
|
62
|
-
options.preload ??= [];
|
|
63
|
-
const preloadOptions = options.preload;
|
|
64
|
-
for (const item of source.preload) {
|
|
65
|
-
const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
|
|
66
|
-
if (existing) {
|
|
67
|
-
existing.load(item);
|
|
68
|
-
}
|
|
69
|
-
else {
|
|
70
|
-
const preload = new Preload_js_1.Preload();
|
|
71
|
-
preload.load(item);
|
|
72
|
-
preloadOptions.push(preload);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
needsPlugin() {
|
|
77
|
-
return true;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
exports.ImagePreloaderPlugin = ImagePreloaderPlugin;
|
|
81
|
-
});
|