@tsparticles/shape-image 3.2.2 → 3.4.0
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/GifUtils/Enums/DisposalMethod.js +11 -1
- package/browser/GifUtils/Types/GIFDataHeaders.js +10 -1
- package/browser/GifUtils/Utils.js +19 -17
- package/browser/ImageDrawer.js +42 -38
- package/browser/ImagePreloader.js +1 -1
- package/browser/Utils.js +1 -1
- package/browser/index.js +4 -3
- package/cjs/GifUtils/Enums/DisposalMethod.js +12 -0
- package/cjs/GifUtils/Types/GIFDataHeaders.js +11 -0
- package/cjs/GifUtils/Utils.js +20 -41
- package/cjs/ImageDrawer.js +43 -62
- package/cjs/ImagePreloader.js +1 -1
- package/cjs/Utils.js +1 -1
- package/cjs/index.js +6 -28
- package/esm/GifUtils/Enums/DisposalMethod.js +11 -1
- package/esm/GifUtils/Types/GIFDataHeaders.js +10 -1
- package/esm/GifUtils/Utils.js +19 -17
- package/esm/ImageDrawer.js +42 -38
- package/esm/ImagePreloader.js +1 -1
- package/esm/Utils.js +1 -1
- package/esm/index.js +4 -3
- package/package.json +2 -2
- package/report.html +1 -1
- package/tsparticles.shape.image.js +82 -200
- package/tsparticles.shape.image.min.js +1 -1
- package/tsparticles.shape.image.min.js.LICENSE.txt +1 -1
- package/types/GifUtils/Enums/DisposalMethod.d.ts +1 -1
- package/types/GifUtils/Types/GIFDataHeaders.d.ts +1 -1
- package/types/GifUtils/Utils.d.ts +1 -1
- package/types/ImageDrawer.d.ts +5 -4
- package/umd/GifUtils/Enums/DisposalMethod.js +12 -0
- package/umd/GifUtils/Types/GIFDataHeaders.js +11 -0
- package/umd/GifUtils/Utils.js +21 -43
- package/umd/ImageDrawer.js +44 -64
- package/umd/ImagePreloader.js +1 -1
- package/umd/Utils.js +1 -1
- package/umd/index.js +7 -30
- package/21.min.js +0 -2
- package/21.min.js.LICENSE.txt +0 -1
- package/618.min.js +0 -2
- package/618.min.js.LICENSE.txt +0 -1
- package/623.min.js +0 -2
- package/623.min.js.LICENSE.txt +0 -1
- package/dist_browser_GifUtils_Utils_js.js +0 -50
- package/dist_browser_ImageDrawer_js.js +0 -30
- package/dist_browser_ImagePreloader_js.js +0 -40
|
@@ -1 +1,11 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var DisposalMethod;
|
|
2
|
+
(function (DisposalMethod) {
|
|
3
|
+
DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
|
|
4
|
+
DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
|
|
5
|
+
DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
|
|
6
|
+
DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
|
|
7
|
+
DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
|
|
8
|
+
DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
|
|
9
|
+
DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
|
|
10
|
+
DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
|
|
11
|
+
})(DisposalMethod || (DisposalMethod = {}));
|
|
@@ -1 +1,10 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var GIFDataHeaders;
|
|
2
|
+
(function (GIFDataHeaders) {
|
|
3
|
+
GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
|
|
4
|
+
GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
|
|
5
|
+
GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
|
|
6
|
+
GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
|
|
7
|
+
GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
|
|
8
|
+
GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
|
|
9
|
+
GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
|
|
10
|
+
})(GIFDataHeaders || (GIFDataHeaders = {}));
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
import { loadImage } from "../Utils.js";
|
|
1
2
|
import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
|
|
2
3
|
import { ByteStream } from "./ByteStream.js";
|
|
4
|
+
import { DisposalMethod } from "./Enums/DisposalMethod.js";
|
|
5
|
+
import { GIFDataHeaders } from "./Types/GIFDataHeaders.js";
|
|
3
6
|
const origin = {
|
|
4
7
|
x: 0,
|
|
5
8
|
y: 0,
|
|
@@ -18,7 +21,7 @@ function parseColorTable(byteStream, count) {
|
|
|
18
21
|
}
|
|
19
22
|
function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
|
|
20
23
|
switch (byteStream.nextByte()) {
|
|
21
|
-
case
|
|
24
|
+
case GIFDataHeaders.GraphicsControlExtension: {
|
|
22
25
|
const frame = gif.frames[getFrameIndex(false)];
|
|
23
26
|
byteStream.pos++;
|
|
24
27
|
const packedByte = byteStream.nextByte();
|
|
@@ -34,7 +37,7 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
34
37
|
byteStream.pos++;
|
|
35
38
|
break;
|
|
36
39
|
}
|
|
37
|
-
case
|
|
40
|
+
case GIFDataHeaders.ApplicationExtension: {
|
|
38
41
|
byteStream.pos++;
|
|
39
42
|
const applicationExtension = {
|
|
40
43
|
identifier: byteStream.getString(8),
|
|
@@ -44,11 +47,11 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
44
47
|
gif.applicationExtensions.push(applicationExtension);
|
|
45
48
|
break;
|
|
46
49
|
}
|
|
47
|
-
case
|
|
50
|
+
case GIFDataHeaders.CommentExtension: {
|
|
48
51
|
gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
|
|
49
52
|
break;
|
|
50
53
|
}
|
|
51
|
-
case
|
|
54
|
+
case GIFDataHeaders.PlainTextExtension: {
|
|
52
55
|
if (gif.globalColorTable.length === 0) {
|
|
53
56
|
throw new EvalError("plain text extension without global color table");
|
|
54
57
|
}
|
|
@@ -201,12 +204,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
201
204
|
}
|
|
202
205
|
async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
|
|
203
206
|
switch (byteStream.nextByte()) {
|
|
204
|
-
case
|
|
207
|
+
case GIFDataHeaders.EndOfFile:
|
|
205
208
|
return true;
|
|
206
|
-
case
|
|
209
|
+
case GIFDataHeaders.Image:
|
|
207
210
|
await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
|
|
208
211
|
break;
|
|
209
|
-
case
|
|
212
|
+
case GIFDataHeaders.Extension:
|
|
210
213
|
parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
|
|
211
214
|
break;
|
|
212
215
|
default:
|
|
@@ -301,7 +304,7 @@ export async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
|
301
304
|
top: 0,
|
|
302
305
|
width: 0,
|
|
303
306
|
height: 0,
|
|
304
|
-
disposalMethod:
|
|
307
|
+
disposalMethod: DisposalMethod.Replace,
|
|
305
308
|
image: new ImageData(1, 1, { colorSpace: "srgb" }),
|
|
306
309
|
plainTextData: null,
|
|
307
310
|
userInputDelayFlag: false,
|
|
@@ -358,20 +361,20 @@ export function drawGif(data) {
|
|
|
358
361
|
}
|
|
359
362
|
context.scale(radius / image.gifData.width, radius / image.gifData.height);
|
|
360
363
|
switch (frame.disposalMethod) {
|
|
361
|
-
case
|
|
362
|
-
case
|
|
363
|
-
case
|
|
364
|
-
case
|
|
365
|
-
case
|
|
364
|
+
case DisposalMethod.UndefinedA:
|
|
365
|
+
case DisposalMethod.UndefinedB:
|
|
366
|
+
case DisposalMethod.UndefinedC:
|
|
367
|
+
case DisposalMethod.UndefinedD:
|
|
368
|
+
case DisposalMethod.Replace:
|
|
366
369
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
367
370
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
368
371
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
369
372
|
break;
|
|
370
|
-
case
|
|
373
|
+
case DisposalMethod.Combine:
|
|
371
374
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
372
375
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
373
376
|
break;
|
|
374
|
-
case
|
|
377
|
+
case DisposalMethod.RestoreBackground:
|
|
375
378
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
376
379
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
377
380
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
@@ -382,7 +385,7 @@ export function drawGif(data) {
|
|
|
382
385
|
offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
|
|
383
386
|
}
|
|
384
387
|
break;
|
|
385
|
-
case
|
|
388
|
+
case DisposalMethod.RestorePrevious:
|
|
386
389
|
{
|
|
387
390
|
const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
388
391
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
@@ -408,7 +411,6 @@ export function drawGif(data) {
|
|
|
408
411
|
}
|
|
409
412
|
export async function loadGifImage(image) {
|
|
410
413
|
if (image.type !== "gif") {
|
|
411
|
-
const { loadImage } = await import("../Utils.js");
|
|
412
414
|
await loadImage(image);
|
|
413
415
|
return;
|
|
414
416
|
}
|
package/browser/ImageDrawer.js
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { errorPrefix } from "@tsparticles/engine";
|
|
2
|
+
import { replaceImageColor } from "./Utils.js";
|
|
3
|
+
import { drawGif } from "./GifUtils/Utils.js";
|
|
2
4
|
const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
|
|
3
5
|
export class ImageDrawer {
|
|
4
6
|
constructor(engine) {
|
|
7
|
+
this.validTypes = ["image", "images"];
|
|
5
8
|
this.loadImageShape = async (imageShape) => {
|
|
6
9
|
if (!this._engine.loadImage) {
|
|
7
10
|
throw new Error(`${errorPrefix} image shape not initialized`);
|
|
@@ -21,14 +24,13 @@ export class ImageDrawer {
|
|
|
21
24
|
}
|
|
22
25
|
this._engine.images.push(image);
|
|
23
26
|
}
|
|
24
|
-
|
|
27
|
+
draw(data) {
|
|
25
28
|
const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
|
|
26
29
|
if (!image) {
|
|
27
30
|
return;
|
|
28
31
|
}
|
|
29
32
|
context.globalAlpha = opacity;
|
|
30
33
|
if (image.gif && image.gifData) {
|
|
31
|
-
const { drawGif } = await import("./GifUtils/Utils.js");
|
|
32
34
|
drawGif(data);
|
|
33
35
|
}
|
|
34
36
|
else if (element) {
|
|
@@ -52,7 +54,7 @@ export class ImageDrawer {
|
|
|
52
54
|
await this._engine.loadImage(imageData);
|
|
53
55
|
}
|
|
54
56
|
}
|
|
55
|
-
|
|
57
|
+
loadShape(particle) {
|
|
56
58
|
if (particle.shape !== "image" && particle.shape !== "images") {
|
|
57
59
|
return;
|
|
58
60
|
}
|
|
@@ -65,11 +67,12 @@ export class ImageDrawer {
|
|
|
65
67
|
}
|
|
66
68
|
const image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
|
|
67
69
|
if (!image) {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
+
void this.loadImageShape(imageData).then(() => {
|
|
71
|
+
this.loadShape(particle);
|
|
72
|
+
});
|
|
70
73
|
}
|
|
71
74
|
}
|
|
72
|
-
|
|
75
|
+
particleInit(container, particle) {
|
|
73
76
|
if (particle.shape !== "image" && particle.shape !== "images") {
|
|
74
77
|
return;
|
|
75
78
|
}
|
|
@@ -87,41 +90,42 @@ export class ImageDrawer {
|
|
|
87
90
|
const replaceColor = imageData.replaceColor ?? image.replaceColor;
|
|
88
91
|
if (image.loading) {
|
|
89
92
|
setTimeout(() => {
|
|
90
|
-
|
|
93
|
+
this.particleInit(container, particle);
|
|
91
94
|
});
|
|
92
95
|
return;
|
|
93
96
|
}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
97
|
+
void (async () => {
|
|
98
|
+
let imageRes;
|
|
99
|
+
if (image.svgData && color) {
|
|
100
|
+
imageRes = await replaceImageColor(image, imageData, color, particle);
|
|
101
|
+
}
|
|
102
|
+
else {
|
|
103
|
+
imageRes = {
|
|
104
|
+
color,
|
|
105
|
+
data: image,
|
|
106
|
+
element: image.element,
|
|
107
|
+
gif: image.gif,
|
|
108
|
+
gifData: image.gifData,
|
|
109
|
+
gifLoopCount: image.gifLoopCount,
|
|
110
|
+
loaded: true,
|
|
111
|
+
ratio: imageData.width && imageData.height
|
|
112
|
+
? imageData.width / imageData.height
|
|
113
|
+
: image.ratio ?? defaultRatio,
|
|
114
|
+
replaceColor: replaceColor,
|
|
115
|
+
source: imageData.src,
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
if (!imageRes.ratio) {
|
|
119
|
+
imageRes.ratio = 1;
|
|
120
|
+
}
|
|
121
|
+
const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
|
|
122
|
+
image: imageRes,
|
|
123
|
+
fill,
|
|
124
|
+
close,
|
|
113
125
|
};
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
}
|
|
118
|
-
const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
|
|
119
|
-
image: imageRes,
|
|
120
|
-
fill,
|
|
121
|
-
close,
|
|
122
|
-
};
|
|
123
|
-
particle.image = imageShape.image;
|
|
124
|
-
particle.shapeFill = imageShape.fill;
|
|
125
|
-
particle.shapeClose = imageShape.close;
|
|
126
|
+
particle.image = imageShape.image;
|
|
127
|
+
particle.shapeFill = imageShape.fill;
|
|
128
|
+
particle.shapeClose = imageShape.close;
|
|
129
|
+
})();
|
|
126
130
|
}
|
|
127
131
|
}
|
|
@@ -17,7 +17,7 @@ export class ImagePreloaderPlugin {
|
|
|
17
17
|
}
|
|
18
18
|
const preloadOptions = options.preload;
|
|
19
19
|
for (const item of source.preload) {
|
|
20
|
-
const existing = preloadOptions.find(
|
|
20
|
+
const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
|
|
21
21
|
if (existing) {
|
|
22
22
|
existing.load(item);
|
|
23
23
|
}
|
package/browser/Utils.js
CHANGED
|
@@ -61,7 +61,7 @@ export function replaceImageColor(image, imageData, color, particle) {
|
|
|
61
61
|
replaceColor: imageData.replaceColor,
|
|
62
62
|
source: imageData.src,
|
|
63
63
|
};
|
|
64
|
-
return new Promise(
|
|
64
|
+
return new Promise(resolve => {
|
|
65
65
|
const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
|
|
66
66
|
img.addEventListener("load", () => {
|
|
67
67
|
imageRes.loaded = true;
|
package/browser/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { downloadSvgImage, loadImage } from "./Utils.js";
|
|
2
|
+
import { ImageDrawer } from "./ImageDrawer.js";
|
|
3
|
+
import { ImagePreloaderPlugin } from "./ImagePreloader.js";
|
|
2
4
|
import { errorPrefix } from "@tsparticles/engine";
|
|
5
|
+
import { loadGifImage } from "./GifUtils/Utils.js";
|
|
3
6
|
const extLength = 3;
|
|
4
7
|
function addLoadImageToEngine(engine) {
|
|
5
8
|
if (engine.loadImage) {
|
|
@@ -29,7 +32,6 @@ function addLoadImageToEngine(engine) {
|
|
|
29
32
|
engine.images.push(image);
|
|
30
33
|
let imageFunc;
|
|
31
34
|
if (data.gif) {
|
|
32
|
-
const { loadGifImage } = await import("./GifUtils/Utils.js");
|
|
33
35
|
imageFunc = loadGifImage;
|
|
34
36
|
}
|
|
35
37
|
else {
|
|
@@ -44,8 +46,7 @@ function addLoadImageToEngine(engine) {
|
|
|
44
46
|
}
|
|
45
47
|
export async function loadImageShape(engine, refresh = true) {
|
|
46
48
|
addLoadImageToEngine(engine);
|
|
47
|
-
const { ImagePreloaderPlugin } = await import("./ImagePreloader.js"), { ImageDrawer } = await import("./ImageDrawer.js");
|
|
48
49
|
const preloader = new ImagePreloaderPlugin(engine);
|
|
49
50
|
await engine.addPlugin(preloader, refresh);
|
|
50
|
-
await engine.addShape(
|
|
51
|
+
await engine.addShape(new ImageDrawer(engine), refresh);
|
|
51
52
|
}
|
|
@@ -1,2 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DisposalMethod = void 0;
|
|
4
|
+
var DisposalMethod;
|
|
5
|
+
(function (DisposalMethod) {
|
|
6
|
+
DisposalMethod[DisposalMethod["Replace"] = 0] = "Replace";
|
|
7
|
+
DisposalMethod[DisposalMethod["Combine"] = 1] = "Combine";
|
|
8
|
+
DisposalMethod[DisposalMethod["RestoreBackground"] = 2] = "RestoreBackground";
|
|
9
|
+
DisposalMethod[DisposalMethod["RestorePrevious"] = 3] = "RestorePrevious";
|
|
10
|
+
DisposalMethod[DisposalMethod["UndefinedA"] = 4] = "UndefinedA";
|
|
11
|
+
DisposalMethod[DisposalMethod["UndefinedB"] = 5] = "UndefinedB";
|
|
12
|
+
DisposalMethod[DisposalMethod["UndefinedC"] = 6] = "UndefinedC";
|
|
13
|
+
DisposalMethod[DisposalMethod["UndefinedD"] = 7] = "UndefinedD";
|
|
14
|
+
})(DisposalMethod || (exports.DisposalMethod = DisposalMethod = {}));
|
|
@@ -1,2 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.GIFDataHeaders = void 0;
|
|
4
|
+
var GIFDataHeaders;
|
|
5
|
+
(function (GIFDataHeaders) {
|
|
6
|
+
GIFDataHeaders[GIFDataHeaders["Extension"] = 33] = "Extension";
|
|
7
|
+
GIFDataHeaders[GIFDataHeaders["ApplicationExtension"] = 255] = "ApplicationExtension";
|
|
8
|
+
GIFDataHeaders[GIFDataHeaders["GraphicsControlExtension"] = 249] = "GraphicsControlExtension";
|
|
9
|
+
GIFDataHeaders[GIFDataHeaders["PlainTextExtension"] = 1] = "PlainTextExtension";
|
|
10
|
+
GIFDataHeaders[GIFDataHeaders["CommentExtension"] = 254] = "CommentExtension";
|
|
11
|
+
GIFDataHeaders[GIFDataHeaders["Image"] = 44] = "Image";
|
|
12
|
+
GIFDataHeaders[GIFDataHeaders["EndOfFile"] = 59] = "EndOfFile";
|
|
13
|
+
})(GIFDataHeaders || (exports.GIFDataHeaders = GIFDataHeaders = {}));
|
package/cjs/GifUtils/Utils.js
CHANGED
|
@@ -1,31 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
3
|
exports.loadGifImage = exports.drawGif = exports.decodeGIF = exports.getGIFLoopAmount = void 0;
|
|
4
|
+
const Utils_js_1 = require("../Utils.js");
|
|
27
5
|
const Constants_js_1 = require("./Constants.js");
|
|
28
6
|
const ByteStream_js_1 = require("./ByteStream.js");
|
|
7
|
+
const DisposalMethod_js_1 = require("./Enums/DisposalMethod.js");
|
|
8
|
+
const GIFDataHeaders_js_1 = require("./Types/GIFDataHeaders.js");
|
|
29
9
|
const origin = {
|
|
30
10
|
x: 0,
|
|
31
11
|
y: 0,
|
|
@@ -44,7 +24,7 @@ function parseColorTable(byteStream, count) {
|
|
|
44
24
|
}
|
|
45
25
|
function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex) {
|
|
46
26
|
switch (byteStream.nextByte()) {
|
|
47
|
-
case
|
|
27
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.GraphicsControlExtension: {
|
|
48
28
|
const frame = gif.frames[getFrameIndex(false)];
|
|
49
29
|
byteStream.pos++;
|
|
50
30
|
const packedByte = byteStream.nextByte();
|
|
@@ -60,7 +40,7 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
60
40
|
byteStream.pos++;
|
|
61
41
|
break;
|
|
62
42
|
}
|
|
63
|
-
case
|
|
43
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.ApplicationExtension: {
|
|
64
44
|
byteStream.pos++;
|
|
65
45
|
const applicationExtension = {
|
|
66
46
|
identifier: byteStream.getString(8),
|
|
@@ -70,11 +50,11 @@ function parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyInde
|
|
|
70
50
|
gif.applicationExtensions.push(applicationExtension);
|
|
71
51
|
break;
|
|
72
52
|
}
|
|
73
|
-
case
|
|
53
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.CommentExtension: {
|
|
74
54
|
gif.comments.push([getFrameIndex(false), byteStream.readSubBlocks()]);
|
|
75
55
|
break;
|
|
76
56
|
}
|
|
77
|
-
case
|
|
57
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.PlainTextExtension: {
|
|
78
58
|
if (gif.globalColorTable.length === 0) {
|
|
79
59
|
throw new EvalError("plain text extension without global color table");
|
|
80
60
|
}
|
|
@@ -227,12 +207,12 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
227
207
|
}
|
|
228
208
|
async function parseBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback) {
|
|
229
209
|
switch (byteStream.nextByte()) {
|
|
230
|
-
case
|
|
210
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.EndOfFile:
|
|
231
211
|
return true;
|
|
232
|
-
case
|
|
212
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.Image:
|
|
233
213
|
await parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTransparencyIndex, progressCallback);
|
|
234
214
|
break;
|
|
235
|
-
case
|
|
215
|
+
case GIFDataHeaders_js_1.GIFDataHeaders.Extension:
|
|
236
216
|
parseExtensionBlock(byteStream, gif, getFrameIndex, getTransparencyIndex);
|
|
237
217
|
break;
|
|
238
218
|
default:
|
|
@@ -328,7 +308,7 @@ async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
|
328
308
|
top: 0,
|
|
329
309
|
width: 0,
|
|
330
310
|
height: 0,
|
|
331
|
-
disposalMethod:
|
|
311
|
+
disposalMethod: DisposalMethod_js_1.DisposalMethod.Replace,
|
|
332
312
|
image: new ImageData(1, 1, { colorSpace: "srgb" }),
|
|
333
313
|
plainTextData: null,
|
|
334
314
|
userInputDelayFlag: false,
|
|
@@ -386,20 +366,20 @@ function drawGif(data) {
|
|
|
386
366
|
}
|
|
387
367
|
context.scale(radius / image.gifData.width, radius / image.gifData.height);
|
|
388
368
|
switch (frame.disposalMethod) {
|
|
389
|
-
case
|
|
390
|
-
case
|
|
391
|
-
case
|
|
392
|
-
case
|
|
393
|
-
case
|
|
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:
|
|
394
374
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
395
375
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
396
376
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
397
377
|
break;
|
|
398
|
-
case
|
|
378
|
+
case DisposalMethod_js_1.DisposalMethod.Combine:
|
|
399
379
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
400
380
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
401
381
|
break;
|
|
402
|
-
case
|
|
382
|
+
case DisposalMethod_js_1.DisposalMethod.RestoreBackground:
|
|
403
383
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
404
384
|
context.drawImage(offscreenCanvas, pos.x, pos.y);
|
|
405
385
|
offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
@@ -410,7 +390,7 @@ function drawGif(data) {
|
|
|
410
390
|
offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
|
|
411
391
|
}
|
|
412
392
|
break;
|
|
413
|
-
case
|
|
393
|
+
case DisposalMethod_js_1.DisposalMethod.RestorePrevious:
|
|
414
394
|
{
|
|
415
395
|
const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
|
|
416
396
|
offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
|
|
@@ -437,8 +417,7 @@ function drawGif(data) {
|
|
|
437
417
|
exports.drawGif = drawGif;
|
|
438
418
|
async function loadGifImage(image) {
|
|
439
419
|
if (image.type !== "gif") {
|
|
440
|
-
|
|
441
|
-
await loadImage(image);
|
|
420
|
+
await (0, Utils_js_1.loadImage)(image);
|
|
442
421
|
return;
|
|
443
422
|
}
|
|
444
423
|
image.loading = true;
|
package/cjs/ImageDrawer.js
CHANGED
|
@@ -1,33 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
-
}) : function(o, v) {
|
|
16
|
-
o["default"] = v;
|
|
17
|
-
});
|
|
18
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
-
if (mod && mod.__esModule) return mod;
|
|
20
|
-
var result = {};
|
|
21
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
-
__setModuleDefault(result, mod);
|
|
23
|
-
return result;
|
|
24
|
-
};
|
|
25
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
3
|
exports.ImageDrawer = void 0;
|
|
27
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
+
const Utils_js_1 = require("./Utils.js");
|
|
6
|
+
const Utils_js_2 = require("./GifUtils/Utils.js");
|
|
28
7
|
const double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
|
|
29
8
|
class ImageDrawer {
|
|
30
9
|
constructor(engine) {
|
|
10
|
+
this.validTypes = ["image", "images"];
|
|
31
11
|
this.loadImageShape = async (imageShape) => {
|
|
32
12
|
if (!this._engine.loadImage) {
|
|
33
13
|
throw new Error(`${engine_1.errorPrefix} image shape not initialized`);
|
|
@@ -47,15 +27,14 @@ class ImageDrawer {
|
|
|
47
27
|
}
|
|
48
28
|
this._engine.images.push(image);
|
|
49
29
|
}
|
|
50
|
-
|
|
30
|
+
draw(data) {
|
|
51
31
|
const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
|
|
52
32
|
if (!image) {
|
|
53
33
|
return;
|
|
54
34
|
}
|
|
55
35
|
context.globalAlpha = opacity;
|
|
56
36
|
if (image.gif && image.gifData) {
|
|
57
|
-
|
|
58
|
-
drawGif(data);
|
|
37
|
+
(0, Utils_js_2.drawGif)(data);
|
|
59
38
|
}
|
|
60
39
|
else if (element) {
|
|
61
40
|
const ratio = image.ratio, pos = {
|
|
@@ -78,7 +57,7 @@ class ImageDrawer {
|
|
|
78
57
|
await this._engine.loadImage(imageData);
|
|
79
58
|
}
|
|
80
59
|
}
|
|
81
|
-
|
|
60
|
+
loadShape(particle) {
|
|
82
61
|
if (particle.shape !== "image" && particle.shape !== "images") {
|
|
83
62
|
return;
|
|
84
63
|
}
|
|
@@ -91,11 +70,12 @@ class ImageDrawer {
|
|
|
91
70
|
}
|
|
92
71
|
const image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
|
|
93
72
|
if (!image) {
|
|
94
|
-
|
|
95
|
-
|
|
73
|
+
void this.loadImageShape(imageData).then(() => {
|
|
74
|
+
this.loadShape(particle);
|
|
75
|
+
});
|
|
96
76
|
}
|
|
97
77
|
}
|
|
98
|
-
|
|
78
|
+
particleInit(container, particle) {
|
|
99
79
|
if (particle.shape !== "image" && particle.shape !== "images") {
|
|
100
80
|
return;
|
|
101
81
|
}
|
|
@@ -113,42 +93,43 @@ class ImageDrawer {
|
|
|
113
93
|
const replaceColor = imageData.replaceColor ?? image.replaceColor;
|
|
114
94
|
if (image.loading) {
|
|
115
95
|
setTimeout(() => {
|
|
116
|
-
|
|
96
|
+
this.particleInit(container, particle);
|
|
117
97
|
});
|
|
118
98
|
return;
|
|
119
99
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
100
|
+
void (async () => {
|
|
101
|
+
let imageRes;
|
|
102
|
+
if (image.svgData && color) {
|
|
103
|
+
imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle);
|
|
104
|
+
}
|
|
105
|
+
else {
|
|
106
|
+
imageRes = {
|
|
107
|
+
color,
|
|
108
|
+
data: image,
|
|
109
|
+
element: image.element,
|
|
110
|
+
gif: image.gif,
|
|
111
|
+
gifData: image.gifData,
|
|
112
|
+
gifLoopCount: image.gifLoopCount,
|
|
113
|
+
loaded: true,
|
|
114
|
+
ratio: imageData.width && imageData.height
|
|
115
|
+
? imageData.width / imageData.height
|
|
116
|
+
: image.ratio ?? defaultRatio,
|
|
117
|
+
replaceColor: replaceColor,
|
|
118
|
+
source: imageData.src,
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
if (!imageRes.ratio) {
|
|
122
|
+
imageRes.ratio = 1;
|
|
123
|
+
}
|
|
124
|
+
const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
|
|
125
|
+
image: imageRes,
|
|
126
|
+
fill,
|
|
127
|
+
close,
|
|
139
128
|
};
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
const fill = imageData.fill ?? particle.shapeFill, close = imageData.close ?? particle.shapeClose, imageShape = {
|
|
145
|
-
image: imageRes,
|
|
146
|
-
fill,
|
|
147
|
-
close,
|
|
148
|
-
};
|
|
149
|
-
particle.image = imageShape.image;
|
|
150
|
-
particle.shapeFill = imageShape.fill;
|
|
151
|
-
particle.shapeClose = imageShape.close;
|
|
129
|
+
particle.image = imageShape.image;
|
|
130
|
+
particle.shapeFill = imageShape.fill;
|
|
131
|
+
particle.shapeClose = imageShape.close;
|
|
132
|
+
})();
|
|
152
133
|
}
|
|
153
134
|
}
|
|
154
135
|
exports.ImageDrawer = ImageDrawer;
|
package/cjs/ImagePreloader.js
CHANGED
|
@@ -20,7 +20,7 @@ class ImagePreloaderPlugin {
|
|
|
20
20
|
}
|
|
21
21
|
const preloadOptions = options.preload;
|
|
22
22
|
for (const item of source.preload) {
|
|
23
|
-
const existing = preloadOptions.find(
|
|
23
|
+
const existing = preloadOptions.find(t => t.name === item.name || t.src === item.src);
|
|
24
24
|
if (existing) {
|
|
25
25
|
existing.load(item);
|
|
26
26
|
}
|
package/cjs/Utils.js
CHANGED
|
@@ -66,7 +66,7 @@ function replaceImageColor(image, imageData, color, particle) {
|
|
|
66
66
|
replaceColor: imageData.replaceColor,
|
|
67
67
|
source: imageData.src,
|
|
68
68
|
};
|
|
69
|
-
return new Promise(
|
|
69
|
+
return new Promise(resolve => {
|
|
70
70
|
const svg = new Blob([svgColoredData], { type: "image/svg+xml" }), domUrl = URL || window.URL || window.webkitURL || window, url = domUrl.createObjectURL(svg), img = new Image();
|
|
71
71
|
img.addEventListener("load", () => {
|
|
72
72
|
imageRes.loaded = true;
|