@tsparticles/shape-image 3.0.3 → 3.1.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.
Files changed (30) hide show
  1. package/browser/GifUtils/ByteStream.js +11 -8
  2. package/browser/GifUtils/Utils.js +17 -10
  3. package/browser/ImageDrawer.js +28 -22
  4. package/browser/ImagePreloader.js +1 -1
  5. package/browser/Utils.js +8 -6
  6. package/browser/index.js +9 -2
  7. package/cjs/GifUtils/ByteStream.js +11 -8
  8. package/cjs/GifUtils/Utils.js +17 -10
  9. package/cjs/ImageDrawer.js +27 -21
  10. package/cjs/ImagePreloader.js +1 -1
  11. package/cjs/Utils.js +8 -6
  12. package/cjs/index.js +9 -2
  13. package/esm/GifUtils/ByteStream.js +11 -8
  14. package/esm/GifUtils/Utils.js +17 -10
  15. package/esm/ImageDrawer.js +28 -22
  16. package/esm/ImagePreloader.js +1 -1
  17. package/esm/Utils.js +8 -6
  18. package/esm/index.js +9 -2
  19. package/package.json +2 -2
  20. package/report.html +2 -2
  21. package/tsparticles.shape.image.js +98 -50
  22. package/tsparticles.shape.image.min.js +1 -1
  23. package/tsparticles.shape.image.min.js.LICENSE.txt +1 -1
  24. package/types/ImageDrawer.d.ts +1 -1
  25. package/umd/GifUtils/ByteStream.js +11 -8
  26. package/umd/GifUtils/Utils.js +17 -10
  27. package/umd/ImageDrawer.js +27 -21
  28. package/umd/ImagePreloader.js +1 -1
  29. package/umd/Utils.js +8 -6
  30. package/umd/index.js +9 -2
package/umd/ImageDrawer.js CHANGED
@@ -12,6 +12,10 @@
12
12
  exports.ImageDrawer = void 0;
13
13
  const engine_1 = require("@tsparticles/engine");
14
14
  const Utils_js_1 = require("./Utils.js");
15
+ const origin = {
16
+ x: 0,
17
+ y: 0,
18
+ }, defaultLoopCount = 0, defaultFrame = 0, half = 0.5, initialTime = 0, firstIndex = 0, double = 2, defaultAlpha = 1, sides = 12, defaultRatio = 1;
15
19
  class ImageDrawer {
16
20
  constructor(engine) {
17
21
  this.loadImageShape = async (imageShape) => {
@@ -46,14 +50,14 @@
46
50
  }
47
51
  offscreenContext.imageSmoothingQuality = "low";
48
52
  offscreenContext.imageSmoothingEnabled = false;
49
- offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
53
+ offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
50
54
  if (particle.gifLoopCount === undefined) {
51
- particle.gifLoopCount = image.gifLoopCount ?? 0;
55
+ particle.gifLoopCount = image.gifLoopCount ?? defaultLoopCount;
52
56
  }
53
- let frameIndex = particle.gifFrame ?? 0;
54
- const pos = { x: -image.gifData.width * 0.5, y: -image.gifData.height * 0.5 }, frame = image.gifData.frames[frameIndex];
57
+ let frameIndex = particle.gifFrame ?? defaultFrame;
58
+ const pos = { x: -image.gifData.width * half, y: -image.gifData.height * half }, frame = image.gifData.frames[frameIndex];
55
59
  if (particle.gifTime === undefined) {
56
- particle.gifTime = 0;
60
+ particle.gifTime = initialTime;
57
61
  }
58
62
  if (!frame.bitmap) {
59
63
  return;
@@ -67,7 +71,7 @@
67
71
  case 0:
68
72
  offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
69
73
  context.drawImage(offscreenCanvas, pos.x, pos.y);
70
- offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
74
+ offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
71
75
  break;
72
76
  case 1:
73
77
  offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
@@ -76,9 +80,9 @@
76
80
  case 2:
77
81
  offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
78
82
  context.drawImage(offscreenCanvas, pos.x, pos.y);
79
- offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
80
- if (image.gifData.globalColorTable.length === 0) {
81
- offscreenContext.putImageData(image.gifData.frames[0].image, pos.x + frame.left, pos.y + frame.top);
83
+ offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
84
+ if (!image.gifData.globalColorTable.length) {
85
+ offscreenContext.putImageData(image.gifData.frames[firstIndex].image, pos.x + frame.left, pos.y + frame.top);
82
86
  }
83
87
  else {
84
88
  offscreenContext.putImageData(image.gifData.backgroundImage, pos.x, pos.y);
@@ -86,11 +90,11 @@
86
90
  break;
87
91
  case 3:
88
92
  {
89
- const previousImageData = offscreenContext.getImageData(0, 0, offscreenCanvas.width, offscreenCanvas.height);
93
+ const previousImageData = offscreenContext.getImageData(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
90
94
  offscreenContext.drawImage(frame.bitmap, frame.left, frame.top);
91
95
  context.drawImage(offscreenCanvas, pos.x, pos.y);
92
- offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
93
- offscreenContext.putImageData(previousImageData, 0, 0);
96
+ offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
97
+ offscreenContext.putImageData(previousImageData, origin.x, origin.y);
94
98
  }
95
99
  break;
96
100
  }
@@ -98,11 +102,11 @@
98
102
  if (particle.gifTime > frame.delayTime) {
99
103
  particle.gifTime -= frame.delayTime;
100
104
  if (++frameIndex >= image.gifData.frames.length) {
101
- if (--particle.gifLoopCount <= 0) {
105
+ if (--particle.gifLoopCount <= defaultLoopCount) {
102
106
  return;
103
107
  }
104
- frameIndex = 0;
105
- offscreenContext.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
108
+ frameIndex = firstIndex;
109
+ offscreenContext.clearRect(origin.x, origin.y, offscreenCanvas.width, offscreenCanvas.height);
106
110
  }
107
111
  particle.gifFrame = frameIndex;
108
112
  }
@@ -112,13 +116,13 @@
112
116
  const ratio = image.ratio, pos = {
113
117
  x: -radius,
114
118
  y: -radius,
115
- }, diameter = radius * 2;
119
+ }, diameter = radius * double;
116
120
  context.drawImage(element, pos.x, pos.y, diameter, diameter / ratio);
117
121
  }
118
- context.globalAlpha = 1;
122
+ context.globalAlpha = defaultAlpha;
119
123
  }
120
124
  getSidesCount() {
121
- return 12;
125
+ return sides;
122
126
  }
123
127
  async init(container) {
124
128
  const options = container.actualOptions;
@@ -142,7 +146,7 @@
142
146
  }
143
147
  const image = this._engine.images.find((t) => t.name === imageData.name || t.source === imageData.src);
144
148
  if (!image) {
145
- this.loadImageShape(imageData).then(() => {
149
+ void this.loadImageShape(imageData).then(() => {
146
150
  this.loadShape(particle);
147
151
  });
148
152
  }
@@ -169,7 +173,7 @@
169
173
  });
170
174
  return;
171
175
  }
172
- (async () => {
176
+ void (async () => {
173
177
  let imageRes;
174
178
  if (image.svgData && color) {
175
179
  imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle);
@@ -183,7 +187,9 @@
183
187
  gifData: image.gifData,
184
188
  gifLoopCount: image.gifLoopCount,
185
189
  loaded: true,
186
- ratio: imageData.width && imageData.height ? imageData.width / imageData.height : image.ratio ?? 1,
190
+ ratio: imageData.width && imageData.height
191
+ ? imageData.width / imageData.height
192
+ : image.ratio ?? defaultRatio,
187
193
  replaceColor: replaceColor,
188
194
  source: imageData.src,
189
195
  };
package/umd/ImagePreloader.js CHANGED
@@ -20,7 +20,7 @@
20
20
  return {};
21
21
  }
22
22
  loadOptions(options, source) {
23
- if (!source || !source.preload) {
23
+ if (!source?.preload) {
24
24
  return;
25
25
  }
26
26
  if (!options.preload) {
package/umd/Utils.js CHANGED
@@ -12,6 +12,7 @@
12
12
  exports.replaceImageColor = exports.downloadSvgImage = exports.loadGifImage = exports.loadImage = void 0;
13
13
  const engine_1 = require("@tsparticles/engine");
14
14
  const Utils_js_1 = require("./GifUtils/Utils.js");
15
+ const stringStart = 0, defaultLoopCount = 0, defaultOpacity = 1;
15
16
  const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
16
17
  function replaceColorSvg(imageShape, color, opacity) {
17
18
  const { svgData } = imageShape;
@@ -23,7 +24,7 @@
23
24
  return svgData.replace(currentColorRegex, () => colorStyle);
24
25
  }
25
26
  const preFillIndex = svgData.indexOf(">");
26
- return `${svgData.substring(0, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
27
+ return `${svgData.substring(stringStart, preFillIndex)} fill="${colorStyle}"${svgData.substring(preFillIndex)}`;
27
28
  }
28
29
  async function loadImage(image) {
29
30
  return new Promise((resolve) => {
@@ -53,8 +54,8 @@
53
54
  image.loading = true;
54
55
  try {
55
56
  image.gifData = await (0, Utils_js_1.decodeGIF)(image.source);
56
- image.gifLoopCount = (0, Utils_js_1.getGIFLoopAmount)(image.gifData) ?? 0;
57
- if (image.gifLoopCount === 0) {
57
+ image.gifLoopCount = (0, Utils_js_1.getGIFLoopAmount)(image.gifData) ?? defaultLoopCount;
58
+ if (!image.gifLoopCount) {
58
59
  image.gifLoopCount = Infinity;
59
60
  }
60
61
  }
@@ -82,7 +83,7 @@
82
83
  }
83
84
  exports.downloadSvgImage = downloadSvgImage;
84
85
  function replaceImageColor(image, imageData, color, particle) {
85
- const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? 1), imageRes = {
86
+ const svgColoredData = replaceColorSvg(image, color, particle.opacity?.value ?? defaultOpacity), imageRes = {
86
87
  color,
87
88
  gif: imageData.gif,
88
89
  data: {
@@ -102,7 +103,7 @@
102
103
  resolve(imageRes);
103
104
  domUrl.revokeObjectURL(url);
104
105
  });
105
- img.addEventListener("error", async () => {
106
+ const errorHandler = async () => {
106
107
  domUrl.revokeObjectURL(url);
107
108
  const img2 = {
108
109
  ...image,
@@ -113,7 +114,8 @@
113
114
  imageRes.loaded = true;
114
115
  imageRes.element = img2.element;
115
116
  resolve(imageRes);
116
- });
117
+ };
118
+ img.addEventListener("error", () => void errorHandler());
117
119
  img.src = url;
118
120
  });
119
121
  }
package/umd/index.js CHANGED
@@ -14,6 +14,7 @@
14
14
  const ImageDrawer_js_1 = require("./ImageDrawer.js");
15
15
  const ImagePreloader_js_1 = require("./ImagePreloader.js");
16
16
  const engine_1 = require("@tsparticles/engine");
17
+ const extLength = 3;
17
18
  function addLoadImageToEngine(engine) {
18
19
  if (engine.loadImage) {
19
20
  return;
@@ -33,14 +34,20 @@
33
34
  gif: data.gif ?? false,
34
35
  name: data.name ?? data.src,
35
36
  source: data.src,
36
- type: data.src.substring(data.src.length - 3),
37
+ type: data.src.substring(data.src.length - extLength),
37
38
  error: false,
38
39
  loading: true,
39
40
  replaceColor: data.replaceColor,
40
41
  ratio: data.width && data.height ? data.width / data.height : undefined,
41
42
  };
42
43
  engine.images.push(image);
43
- const imageFunc = data.gif ? Utils_js_1.loadGifImage : data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
44
+ let imageFunc;
45
+ if (data.gif) {
46
+ imageFunc = Utils_js_1.loadGifImage;
47
+ }
48
+ else {
49
+ imageFunc = data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
50
+ }
44
51
  await imageFunc(image);
45
52
  }
46
53
  catch {