@tsparticles/shape-image 3.0.0-beta.0 → 3.0.0-beta.1
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/Utils.js +2 -2
- package/browser/ImageDrawer.js +1 -1
- package/browser/ImagePreloader.js +1 -1
- package/browser/Utils.js +1 -1
- package/browser/index.js +3 -3
- package/browser/package.json +1 -0
- package/cjs/GifUtils/Utils.js +7 -7
- package/cjs/ImageDrawer.js +2 -2
- package/cjs/ImagePreloader.js +2 -2
- package/cjs/Utils.js +3 -3
- package/cjs/index.js +6 -6
- package/cjs/package.json +1 -0
- package/esm/GifUtils/Utils.js +2 -2
- package/esm/ImageDrawer.js +1 -1
- package/esm/ImagePreloader.js +1 -1
- package/esm/Utils.js +1 -1
- package/esm/index.js +3 -3
- package/esm/package.json +1 -0
- package/package.json +16 -4
- package/report.html +2 -2
- package/tsparticles.shape.image.js +1 -1
- package/tsparticles.shape.image.min.js.LICENSE.txt +1 -1
- package/types/GifUtils/Types/Frame.d.ts +2 -2
- package/types/GifUtils/Types/GIF.d.ts +2 -2
- package/types/GifUtils/Utils.d.ts +2 -2
- package/types/ImageDrawer.d.ts +2 -2
- package/types/ImagePreloader.d.ts +1 -1
- package/types/Options/Classes/Preload.d.ts +1 -1
- package/types/Utils.d.ts +2 -2
- package/types/index.d.ts +1 -1
- package/types/types.d.ts +3 -3
- package/umd/GifUtils/Utils.js +8 -8
- package/umd/ImageDrawer.js +3 -3
- package/umd/ImagePreloader.js +3 -3
- package/umd/Utils.js +4 -4
- package/umd/index.js +7 -7
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { InterlaceOffsets, InterlaceSteps } from "./Constants";
|
|
2
|
-
import { ByteStream } from "./ByteStream";
|
|
1
|
+
import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
|
|
2
|
+
import { ByteStream } from "./ByteStream.js";
|
|
3
3
|
function parseColorTable(byteStream, count) {
|
|
4
4
|
const colors = [];
|
|
5
5
|
for (let i = 0; i < count; i++) {
|
package/browser/ImageDrawer.js
CHANGED
package/browser/Utils.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { errorPrefix, getLogger, getStyleFromHsl } from "@tsparticles/engine";
|
|
2
|
-
import { decodeGIF, getGIFLoopAmount } from "./GifUtils/Utils";
|
|
2
|
+
import { decodeGIF, getGIFLoopAmount } from "./GifUtils/Utils.js";
|
|
3
3
|
const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
|
|
4
4
|
function replaceColorSvg(imageShape, color, opacity) {
|
|
5
5
|
const { svgData } = imageShape;
|
package/browser/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { downloadSvgImage, loadGifImage, loadImage } from "./Utils";
|
|
2
|
-
import { ImageDrawer } from "./ImageDrawer";
|
|
3
|
-
import { ImagePreloaderPlugin } from "./ImagePreloader";
|
|
1
|
+
import { downloadSvgImage, loadGifImage, loadImage } from "./Utils.js";
|
|
2
|
+
import { ImageDrawer } from "./ImageDrawer.js";
|
|
3
|
+
import { ImagePreloaderPlugin } from "./ImagePreloader.js";
|
|
4
4
|
import { errorPrefix } from "@tsparticles/engine";
|
|
5
5
|
function addLoadImageToEngine(engine) {
|
|
6
6
|
if (engine.loadImage) {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/cjs/GifUtils/Utils.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.decodeGIF = exports.getGIFLoopAmount = void 0;
|
|
4
|
-
const
|
|
5
|
-
const
|
|
4
|
+
const Constants_js_1 = require("./Constants.js");
|
|
5
|
+
const ByteStream_js_1 = require("./ByteStream.js");
|
|
6
6
|
function parseColorTable(byteStream, count) {
|
|
7
7
|
const colors = [];
|
|
8
8
|
for (let i = 0; i < count; i++) {
|
|
@@ -112,7 +112,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
112
112
|
};
|
|
113
113
|
if (interlacedFlag) {
|
|
114
114
|
for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
|
|
115
|
-
if (
|
|
115
|
+
if (Constants_js_1.InterlaceOffsets[pass] < frame.height) {
|
|
116
116
|
for (let pixelPos = 0, lineIndex = 0;;) {
|
|
117
117
|
const last = code;
|
|
118
118
|
code = readBits(pos, size);
|
|
@@ -133,8 +133,8 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
133
133
|
}
|
|
134
134
|
for (let i = 0; i < dic[code].length; i++) {
|
|
135
135
|
const { r, g, b, a } = getColor(dic[code][i]);
|
|
136
|
-
image.data.set([r, g, b, a],
|
|
137
|
-
|
|
136
|
+
image.data.set([r, g, b, a], Constants_js_1.InterlaceOffsets[pass] * frame.width +
|
|
137
|
+
Constants_js_1.InterlaceSteps[pass] * lineIndex +
|
|
138
138
|
(pixelPos % (frame.width * 4)));
|
|
139
139
|
pixelPos += 4;
|
|
140
140
|
}
|
|
@@ -144,7 +144,7 @@ async function parseImageBlock(byteStream, gif, avgAlpha, getFrameIndex, getTran
|
|
|
144
144
|
}
|
|
145
145
|
if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
|
|
146
146
|
lineIndex++;
|
|
147
|
-
if (
|
|
147
|
+
if (Constants_js_1.InterlaceOffsets[pass] + Constants_js_1.InterlaceSteps[pass] * lineIndex >= frame.height) {
|
|
148
148
|
break;
|
|
149
149
|
}
|
|
150
150
|
}
|
|
@@ -236,7 +236,7 @@ async function decodeGIF(gifURL, progressCallback, avgAlpha) {
|
|
|
236
236
|
backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
|
|
237
237
|
comments: [],
|
|
238
238
|
applicationExtensions: [],
|
|
239
|
-
}, byteStream = new
|
|
239
|
+
}, byteStream = new ByteStream_js_1.ByteStream(new Uint8ClampedArray(buffer));
|
|
240
240
|
if (byteStream.getString(6) !== "GIF89a") {
|
|
241
241
|
throw new Error("not a supported GIF file");
|
|
242
242
|
}
|
package/cjs/ImageDrawer.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ImageDrawer = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const
|
|
5
|
+
const Utils_js_1 = require("./Utils.js");
|
|
6
6
|
class ImageDrawer {
|
|
7
7
|
constructor(engine) {
|
|
8
8
|
this.loadImageShape = async (imageShape) => {
|
|
@@ -155,7 +155,7 @@ class ImageDrawer {
|
|
|
155
155
|
(async () => {
|
|
156
156
|
let imageRes;
|
|
157
157
|
if (image.svgData && color) {
|
|
158
|
-
imageRes = await (0,
|
|
158
|
+
imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle);
|
|
159
159
|
}
|
|
160
160
|
else {
|
|
161
161
|
imageRes = {
|
package/cjs/ImagePreloader.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.ImagePreloaderPlugin = void 0;
|
|
4
|
-
const
|
|
4
|
+
const Preload_js_1 = require("./Options/Classes/Preload.js");
|
|
5
5
|
class ImagePreloaderPlugin {
|
|
6
6
|
constructor(engine) {
|
|
7
7
|
this.id = "imagePreloader";
|
|
@@ -24,7 +24,7 @@ class ImagePreloaderPlugin {
|
|
|
24
24
|
existing.load(item);
|
|
25
25
|
}
|
|
26
26
|
else {
|
|
27
|
-
const preload = new
|
|
27
|
+
const preload = new Preload_js_1.Preload();
|
|
28
28
|
preload.load(item);
|
|
29
29
|
preloadOptions.push(preload);
|
|
30
30
|
}
|
package/cjs/Utils.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.replaceImageColor = exports.downloadSvgImage = exports.loadGifImage = exports.loadImage = void 0;
|
|
4
4
|
const engine_1 = require("@tsparticles/engine");
|
|
5
|
-
const
|
|
5
|
+
const Utils_js_1 = require("./GifUtils/Utils.js");
|
|
6
6
|
const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
|
|
7
7
|
function replaceColorSvg(imageShape, color, opacity) {
|
|
8
8
|
const { svgData } = imageShape;
|
|
@@ -43,8 +43,8 @@ async function loadGifImage(image) {
|
|
|
43
43
|
}
|
|
44
44
|
image.loading = true;
|
|
45
45
|
try {
|
|
46
|
-
image.gifData = await (0,
|
|
47
|
-
image.gifLoopCount = (0,
|
|
46
|
+
image.gifData = await (0, Utils_js_1.decodeGIF)(image.source);
|
|
47
|
+
image.gifLoopCount = (0, Utils_js_1.getGIFLoopAmount)(image.gifData) ?? 0;
|
|
48
48
|
if (image.gifLoopCount === 0) {
|
|
49
49
|
image.gifLoopCount = Infinity;
|
|
50
50
|
}
|
package/cjs/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.loadImageShape = void 0;
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
4
|
+
const Utils_js_1 = require("./Utils.js");
|
|
5
|
+
const ImageDrawer_js_1 = require("./ImageDrawer.js");
|
|
6
|
+
const ImagePreloader_js_1 = require("./ImagePreloader.js");
|
|
7
7
|
const engine_1 = require("@tsparticles/engine");
|
|
8
8
|
function addLoadImageToEngine(engine) {
|
|
9
9
|
if (engine.loadImage) {
|
|
@@ -31,7 +31,7 @@ function addLoadImageToEngine(engine) {
|
|
|
31
31
|
ratio: data.width && data.height ? data.width / data.height : undefined,
|
|
32
32
|
};
|
|
33
33
|
engine.images.push(image);
|
|
34
|
-
const imageFunc = data.gif ?
|
|
34
|
+
const imageFunc = data.gif ? Utils_js_1.loadGifImage : data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
|
|
35
35
|
await imageFunc(image);
|
|
36
36
|
}
|
|
37
37
|
catch {
|
|
@@ -41,8 +41,8 @@ function addLoadImageToEngine(engine) {
|
|
|
41
41
|
}
|
|
42
42
|
async function loadImageShape(engine, refresh = true) {
|
|
43
43
|
addLoadImageToEngine(engine);
|
|
44
|
-
const preloader = new
|
|
44
|
+
const preloader = new ImagePreloader_js_1.ImagePreloaderPlugin(engine);
|
|
45
45
|
await engine.addPlugin(preloader, refresh);
|
|
46
|
-
await engine.addShape(["image", "images"], new
|
|
46
|
+
await engine.addShape(["image", "images"], new ImageDrawer_js_1.ImageDrawer(engine), refresh);
|
|
47
47
|
}
|
|
48
48
|
exports.loadImageShape = loadImageShape;
|
package/cjs/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "commonjs" }
|
package/esm/GifUtils/Utils.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { InterlaceOffsets, InterlaceSteps } from "./Constants";
|
|
2
|
-
import { ByteStream } from "./ByteStream";
|
|
1
|
+
import { InterlaceOffsets, InterlaceSteps } from "./Constants.js";
|
|
2
|
+
import { ByteStream } from "./ByteStream.js";
|
|
3
3
|
function parseColorTable(byteStream, count) {
|
|
4
4
|
const colors = [];
|
|
5
5
|
for (let i = 0; i < count; i++) {
|
package/esm/ImageDrawer.js
CHANGED
package/esm/ImagePreloader.js
CHANGED
package/esm/Utils.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { errorPrefix, getLogger, getStyleFromHsl } from "@tsparticles/engine";
|
|
2
|
-
import { decodeGIF, getGIFLoopAmount } from "./GifUtils/Utils";
|
|
2
|
+
import { decodeGIF, getGIFLoopAmount } from "./GifUtils/Utils.js";
|
|
3
3
|
const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
|
|
4
4
|
function replaceColorSvg(imageShape, color, opacity) {
|
|
5
5
|
const { svgData } = imageShape;
|
package/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { downloadSvgImage, loadGifImage, loadImage } from "./Utils";
|
|
2
|
-
import { ImageDrawer } from "./ImageDrawer";
|
|
3
|
-
import { ImagePreloaderPlugin } from "./ImagePreloader";
|
|
1
|
+
import { downloadSvgImage, loadGifImage, loadImage } from "./Utils.js";
|
|
2
|
+
import { ImageDrawer } from "./ImageDrawer.js";
|
|
3
|
+
import { ImagePreloaderPlugin } from "./ImagePreloader.js";
|
|
4
4
|
import { errorPrefix } from "@tsparticles/engine";
|
|
5
5
|
function addLoadImageToEngine(engine) {
|
|
6
6
|
if (engine.loadImage) {
|
package/esm/package.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{ "type": "module" }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/shape-image",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.1",
|
|
4
4
|
"description": "tsParticles image shape",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
@@ -40,14 +40,26 @@
|
|
|
40
40
|
"bugs": {
|
|
41
41
|
"url": "https://github.com/matteobruni/tsparticles/issues"
|
|
42
42
|
},
|
|
43
|
-
"
|
|
43
|
+
"sideEffects": false,
|
|
44
44
|
"jsdelivr": "tsparticles.shape.image.min.js",
|
|
45
45
|
"unpkg": "tsparticles.shape.image.min.js",
|
|
46
|
+
"browser": "browser/index.js",
|
|
47
|
+
"main": "cjs/index.js",
|
|
46
48
|
"module": "esm/index.js",
|
|
47
49
|
"types": "types/index.d.ts",
|
|
48
|
-
"
|
|
50
|
+
"exports": {
|
|
51
|
+
".": {
|
|
52
|
+
"types": "./types/index.d.ts",
|
|
53
|
+
"browser": "./browser/index.js",
|
|
54
|
+
"import": "./esm/index.js",
|
|
55
|
+
"require": "./cjs/index.js",
|
|
56
|
+
"umd": "./umd/index.js",
|
|
57
|
+
"default": "./cjs/index.js"
|
|
58
|
+
},
|
|
59
|
+
"./package.json": "./package.json"
|
|
60
|
+
},
|
|
49
61
|
"dependencies": {
|
|
50
|
-
"@tsparticles/engine": "^3.0.0-beta.
|
|
62
|
+
"@tsparticles/engine": "^3.0.0-beta.1"
|
|
51
63
|
},
|
|
52
64
|
"publishConfig": {
|
|
53
65
|
"access": "public"
|
package/report.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8"/>
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
|
6
|
-
<title>@tsparticles/shape-image [
|
|
6
|
+
<title>@tsparticles/shape-image [25 Aug 2023 at 16:14]</title>
|
|
7
7
|
<link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
|
|
8
8
|
|
|
9
9
|
<script>
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
<body>
|
|
32
32
|
<div id="app"></div>
|
|
33
33
|
<script>
|
|
34
|
-
window.chartData = [{"label":"tsparticles.shape.image.js","isAsset":true,"statSize":
|
|
34
|
+
window.chartData = [{"label":"tsparticles.shape.image.js","isAsset":true,"statSize":25719,"parsedSize":29421,"gzipSize":7101,"groups":[{"label":"dist/browser","path":"./dist/browser","statSize":25677,"groups":[{"id":496,"label":"index.js + 7 modules (concatenated)","path":"./dist/browser/index.js + 7 modules (concatenated)","statSize":25677,"parsedSize":29421,"gzipSize":7101,"concatenated":true,"groups":[{"label":"dist/browser","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser","statSize":25677,"groups":[{"id":null,"label":"index.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/index.js","statSize":1516,"parsedSize":1737,"gzipSize":419,"inaccurateSizes":true},{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Utils.js","statSize":3207,"parsedSize":3674,"gzipSize":886,"inaccurateSizes":true},{"id":null,"label":"ImagePreloader.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/ImagePreloader.js","statSize":774,"parsedSize":886,"gzipSize":214,"inaccurateSizes":true},{"id":null,"label":"ImageDrawer.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/ImageDrawer.js","statSize":6609,"parsedSize":7572,"gzipSize":1827,"inaccurateSizes":true},{"label":"GifUtils","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/GifUtils","statSize":12981,"groups":[{"id":null,"label":"Utils.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/GifUtils/Utils.js","statSize":11636,"parsedSize":13332,"gzipSize":3217,"inaccurateSizes":true},{"id":null,"label":"Constants.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/GifUtils/Constants.js","statSize":89,"parsedSize":101,"gzipSize":24,"inaccurateSizes":true},{"id":null,"label":"ByteStream.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/GifUtils/ByteStream.js","statSize":1256,"parsedSize":1439,"gzipSize":347,"inaccurateSizes":true}],"parsedSize":14873,"gzipSize":3589,"inaccurateSizes":true},{"label":"Options/Classes","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes","statSize":590,"groups":[{"id":null,"label":"Preload.js","path":"./dist/browser/index.js + 7 modules (concatenated)/dist/browser/Options/Classes/Preload.js","statSize":590,"parsedSize":676,"gzipSize":163,"inaccurateSizes":true}],"parsedSize":676,"gzipSize":163,"inaccurateSizes":true}],"parsedSize":29421,"gzipSize":7101,"inaccurateSizes":true}]}],"parsedSize":29421,"gzipSize":7101},{"label":"engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles","statSize":42,"groups":[{"id":533,"label":"engine\",\"root\":\"window\"}","path":"./engine\",\"commonjs2\":\"@tsparticles/engine\",\"amd\":\"@tsparticles/engine\",\"root\":\"window\"}","statSize":42}],"parsedSize":0,"gzipSize":0}],"isInitialByEntrypoint":{"tsparticles.shape.image":true}}];
|
|
35
35
|
window.entrypoints = ["tsparticles.shape.image","tsparticles.shape.image.min"];
|
|
36
36
|
window.defaultSizes = "parsed";
|
|
37
37
|
</script>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* Demo / Generator : https://particles.js.org/
|
|
5
5
|
* GitHub : https://www.github.com/matteobruni/tsparticles
|
|
6
6
|
* How to use? : Check the GitHub README
|
|
7
|
-
* v3.0.0-beta.
|
|
7
|
+
* v3.0.0-beta.1
|
|
8
8
|
*/
|
|
9
9
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
10
10
|
if(typeof exports === 'object' && typeof module === 'object')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! tsParticles Image Shape v3.0.0-beta.
|
|
1
|
+
/*! tsParticles Image Shape v3.0.0-beta.1 by Matteo Bruni */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type { DisposalMethod } from "../Enums/DisposalMethod";
|
|
1
|
+
import type { DisposalMethod } from "../Enums/DisposalMethod.js";
|
|
2
2
|
import type { IRgb } from "@tsparticles/engine";
|
|
3
|
-
import type { PlainTextData } from "./PlainTextData";
|
|
3
|
+
import type { PlainTextData } from "./PlainTextData.js";
|
|
4
4
|
export interface Frame {
|
|
5
5
|
GCreserved: number;
|
|
6
6
|
bitmap?: ImageBitmap;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { ApplicationExtension } from "./ApplicationExtension";
|
|
2
|
-
import type { Frame } from "./Frame";
|
|
1
|
+
import type { ApplicationExtension } from "./ApplicationExtension.js";
|
|
2
|
+
import type { Frame } from "./Frame.js";
|
|
3
3
|
import type { IRgb } from "@tsparticles/engine";
|
|
4
4
|
export interface GIF {
|
|
5
5
|
applicationExtensions: ApplicationExtension[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { GIF } from "./Types/GIF";
|
|
2
|
-
import type { GIFProgressCallbackFunction } from "./Types/GIFProgressCallbackFunction";
|
|
1
|
+
import type { GIF } from "./Types/GIF.js";
|
|
2
|
+
import type { GIFProgressCallbackFunction } from "./Types/GIFProgressCallbackFunction.js";
|
|
3
3
|
export declare function getGIFLoopAmount(gif: GIF): number;
|
|
4
4
|
export declare function decodeGIF(gifURL: string, progressCallback?: GIFProgressCallbackFunction, avgAlpha?: boolean): Promise<GIF>;
|
package/types/ImageDrawer.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type Container, type IDelta, type IShapeDrawer } from "@tsparticles/engine";
|
|
2
|
-
import type { IImage, ImageParticle } from "./Utils";
|
|
3
|
-
import type { ImageContainer, ImageEngine } from "./types";
|
|
2
|
+
import type { IImage, ImageParticle } from "./Utils.js";
|
|
3
|
+
import type { ImageContainer, ImageEngine } from "./types.js";
|
|
4
4
|
export declare class ImageDrawer implements IShapeDrawer {
|
|
5
5
|
private readonly _engine;
|
|
6
6
|
constructor(engine: ImageEngine);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Engine, IContainerPlugin, IPlugin, RecursivePartial } from "@tsparticles/engine";
|
|
2
|
-
import type { IPreloadOptions, PreloadOptions } from "./types";
|
|
2
|
+
import type { IPreloadOptions, PreloadOptions } from "./types.js";
|
|
3
3
|
export declare class ImagePreloaderPlugin implements IPlugin {
|
|
4
4
|
readonly id: string;
|
|
5
5
|
private readonly _engine;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { IOptionLoader, RecursivePartial } from "@tsparticles/engine";
|
|
2
|
-
import type { IPreload } from "../Interfaces/IPreload";
|
|
2
|
+
import type { IPreload } from "../Interfaces/IPreload.js";
|
|
3
3
|
export declare class Preload implements IPreload, IOptionLoader<IPreload> {
|
|
4
4
|
gif: boolean;
|
|
5
5
|
height?: number;
|
package/types/Utils.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type IHsl, type Particle } from "@tsparticles/engine";
|
|
2
|
-
import type { GIF } from "./GifUtils/Types/GIF";
|
|
3
|
-
import type { IImageShape } from "./IImageShape";
|
|
2
|
+
import type { GIF } from "./GifUtils/Types/GIF.js";
|
|
3
|
+
import type { IImageShape } from "./IImageShape.js";
|
|
4
4
|
export interface IImage {
|
|
5
5
|
color?: IHsl;
|
|
6
6
|
element?: HTMLImageElement;
|
package/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { ImageEngine } from "./types";
|
|
1
|
+
import type { ImageEngine } from "./types.js";
|
|
2
2
|
export declare function loadImageShape(engine: ImageEngine, refresh?: boolean): Promise<void>;
|
package/types/types.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Container, Engine, IOptions, Options } from "@tsparticles/engine";
|
|
2
|
-
import type { IImage } from "./Utils";
|
|
3
|
-
import type { IPreload } from "./Options/Interfaces/IPreload";
|
|
4
|
-
import type { Preload } from "./Options/Classes/Preload";
|
|
2
|
+
import type { IImage } from "./Utils.js";
|
|
3
|
+
import type { IPreload } from "./Options/Interfaces/IPreload.js";
|
|
4
|
+
import type { Preload } from "./Options/Classes/Preload.js";
|
|
5
5
|
export type ImageEngine = Engine & {
|
|
6
6
|
images?: IImage[];
|
|
7
7
|
loadImage?: (data: IPreload) => Promise<void>;
|
package/umd/GifUtils/Utils.js
CHANGED
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "./Constants", "./ByteStream"], factory);
|
|
7
|
+
define(["require", "exports", "./Constants.js", "./ByteStream.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.decodeGIF = exports.getGIFLoopAmount = void 0;
|
|
13
|
-
const
|
|
14
|
-
const
|
|
13
|
+
const Constants_js_1 = require("./Constants.js");
|
|
14
|
+
const ByteStream_js_1 = require("./ByteStream.js");
|
|
15
15
|
function parseColorTable(byteStream, count) {
|
|
16
16
|
const colors = [];
|
|
17
17
|
for (let i = 0; i < count; i++) {
|
|
@@ -121,7 +121,7 @@
|
|
|
121
121
|
};
|
|
122
122
|
if (interlacedFlag) {
|
|
123
123
|
for (let code = 0, size = minCodeSize + 1, pos = 0, dic = [[0]], pass = 0; pass < 4; pass++) {
|
|
124
|
-
if (
|
|
124
|
+
if (Constants_js_1.InterlaceOffsets[pass] < frame.height) {
|
|
125
125
|
for (let pixelPos = 0, lineIndex = 0;;) {
|
|
126
126
|
const last = code;
|
|
127
127
|
code = readBits(pos, size);
|
|
@@ -142,8 +142,8 @@
|
|
|
142
142
|
}
|
|
143
143
|
for (let i = 0; i < dic[code].length; i++) {
|
|
144
144
|
const { r, g, b, a } = getColor(dic[code][i]);
|
|
145
|
-
image.data.set([r, g, b, a],
|
|
146
|
-
|
|
145
|
+
image.data.set([r, g, b, a], Constants_js_1.InterlaceOffsets[pass] * frame.width +
|
|
146
|
+
Constants_js_1.InterlaceSteps[pass] * lineIndex +
|
|
147
147
|
(pixelPos % (frame.width * 4)));
|
|
148
148
|
pixelPos += 4;
|
|
149
149
|
}
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
}
|
|
154
154
|
if (pixelPos === frame.width * 4 * (lineIndex + 1)) {
|
|
155
155
|
lineIndex++;
|
|
156
|
-
if (
|
|
156
|
+
if (Constants_js_1.InterlaceOffsets[pass] + Constants_js_1.InterlaceSteps[pass] * lineIndex >= frame.height) {
|
|
157
157
|
break;
|
|
158
158
|
}
|
|
159
159
|
}
|
|
@@ -245,7 +245,7 @@
|
|
|
245
245
|
backgroundImage: new ImageData(1, 1, { colorSpace: "srgb" }),
|
|
246
246
|
comments: [],
|
|
247
247
|
applicationExtensions: [],
|
|
248
|
-
}, byteStream = new
|
|
248
|
+
}, byteStream = new ByteStream_js_1.ByteStream(new Uint8ClampedArray(buffer));
|
|
249
249
|
if (byteStream.getString(6) !== "GIF89a") {
|
|
250
250
|
throw new Error("not a supported GIF file");
|
|
251
251
|
}
|
package/umd/ImageDrawer.js
CHANGED
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@tsparticles/engine", "./Utils"], factory);
|
|
7
|
+
define(["require", "exports", "@tsparticles/engine", "./Utils.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.ImageDrawer = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
-
const
|
|
14
|
+
const Utils_js_1 = require("./Utils.js");
|
|
15
15
|
class ImageDrawer {
|
|
16
16
|
constructor(engine) {
|
|
17
17
|
this.loadImageShape = async (imageShape) => {
|
|
@@ -164,7 +164,7 @@
|
|
|
164
164
|
(async () => {
|
|
165
165
|
let imageRes;
|
|
166
166
|
if (image.svgData && color) {
|
|
167
|
-
imageRes = await (0,
|
|
167
|
+
imageRes = await (0, Utils_js_1.replaceImageColor)(image, imageData, color, particle);
|
|
168
168
|
}
|
|
169
169
|
else {
|
|
170
170
|
imageRes = {
|
package/umd/ImagePreloader.js
CHANGED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "./Options/Classes/Preload"], factory);
|
|
7
|
+
define(["require", "exports", "./Options/Classes/Preload.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.ImagePreloaderPlugin = void 0;
|
|
13
|
-
const
|
|
13
|
+
const Preload_js_1 = require("./Options/Classes/Preload.js");
|
|
14
14
|
class ImagePreloaderPlugin {
|
|
15
15
|
constructor(engine) {
|
|
16
16
|
this.id = "imagePreloader";
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
existing.load(item);
|
|
34
34
|
}
|
|
35
35
|
else {
|
|
36
|
-
const preload = new
|
|
36
|
+
const preload = new Preload_js_1.Preload();
|
|
37
37
|
preload.load(item);
|
|
38
38
|
preloadOptions.push(preload);
|
|
39
39
|
}
|
package/umd/Utils.js
CHANGED
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "@tsparticles/engine", "./GifUtils/Utils"], factory);
|
|
7
|
+
define(["require", "exports", "@tsparticles/engine", "./GifUtils/Utils.js"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.replaceImageColor = exports.downloadSvgImage = exports.loadGifImage = exports.loadImage = void 0;
|
|
13
13
|
const engine_1 = require("@tsparticles/engine");
|
|
14
|
-
const
|
|
14
|
+
const Utils_js_1 = require("./GifUtils/Utils.js");
|
|
15
15
|
const currentColorRegex = /(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;
|
|
16
16
|
function replaceColorSvg(imageShape, color, opacity) {
|
|
17
17
|
const { svgData } = imageShape;
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
}
|
|
53
53
|
image.loading = true;
|
|
54
54
|
try {
|
|
55
|
-
image.gifData = await (0,
|
|
56
|
-
image.gifLoopCount = (0,
|
|
55
|
+
image.gifData = await (0, Utils_js_1.decodeGIF)(image.source);
|
|
56
|
+
image.gifLoopCount = (0, Utils_js_1.getGIFLoopAmount)(image.gifData) ?? 0;
|
|
57
57
|
if (image.gifLoopCount === 0) {
|
|
58
58
|
image.gifLoopCount = Infinity;
|
|
59
59
|
}
|
package/umd/index.js
CHANGED
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
if (v !== undefined) module.exports = v;
|
|
5
5
|
}
|
|
6
6
|
else if (typeof define === "function" && define.amd) {
|
|
7
|
-
define(["require", "exports", "./Utils", "./ImageDrawer", "./ImagePreloader", "@tsparticles/engine"], factory);
|
|
7
|
+
define(["require", "exports", "./Utils.js", "./ImageDrawer.js", "./ImagePreloader.js", "@tsparticles/engine"], factory);
|
|
8
8
|
}
|
|
9
9
|
})(function (require, exports) {
|
|
10
10
|
"use strict";
|
|
11
11
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
12
12
|
exports.loadImageShape = void 0;
|
|
13
|
-
const
|
|
14
|
-
const
|
|
15
|
-
const
|
|
13
|
+
const Utils_js_1 = require("./Utils.js");
|
|
14
|
+
const ImageDrawer_js_1 = require("./ImageDrawer.js");
|
|
15
|
+
const ImagePreloader_js_1 = require("./ImagePreloader.js");
|
|
16
16
|
const engine_1 = require("@tsparticles/engine");
|
|
17
17
|
function addLoadImageToEngine(engine) {
|
|
18
18
|
if (engine.loadImage) {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
ratio: data.width && data.height ? data.width / data.height : undefined,
|
|
41
41
|
};
|
|
42
42
|
engine.images.push(image);
|
|
43
|
-
const imageFunc = data.gif ?
|
|
43
|
+
const imageFunc = data.gif ? Utils_js_1.loadGifImage : data.replaceColor ? Utils_js_1.downloadSvgImage : Utils_js_1.loadImage;
|
|
44
44
|
await imageFunc(image);
|
|
45
45
|
}
|
|
46
46
|
catch {
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
}
|
|
51
51
|
async function loadImageShape(engine, refresh = true) {
|
|
52
52
|
addLoadImageToEngine(engine);
|
|
53
|
-
const preloader = new
|
|
53
|
+
const preloader = new ImagePreloader_js_1.ImagePreloaderPlugin(engine);
|
|
54
54
|
await engine.addPlugin(preloader, refresh);
|
|
55
|
-
await engine.addShape(["image", "images"], new
|
|
55
|
+
await engine.addShape(["image", "images"], new ImageDrawer_js_1.ImageDrawer(engine), refresh);
|
|
56
56
|
}
|
|
57
57
|
exports.loadImageShape = loadImageShape;
|
|
58
58
|
});
|