@tsparticles/shape-image 3.0.0-beta.0 → 3.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/README.md +1 -1
- 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 +18 -6
- package/report.html +23 -5
- 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
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
[](https://www.npmjs.com/package/@tsparticles/shape-image)
|
|
7
7
|
[](https://www.npmjs.com/package/@tsparticles/shape-image) [](https://github.com/sponsors/matteobruni)
|
|
8
8
|
|
|
9
|
-
[tsParticles](https://github.com/
|
|
9
|
+
[tsParticles](https://github.com/tsparticles/tsparticles) additional image shape.
|
|
10
10
|
|
|
11
11
|
## How to use it
|
|
12
12
|
|
|
@@ -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,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tsparticles/shape-image",
|
|
3
|
-
"version": "3.0.0-beta.
|
|
3
|
+
"version": "3.0.0-beta.2",
|
|
4
4
|
"description": "tsParticles image shape",
|
|
5
5
|
"homepage": "https://particles.js.org",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
8
|
-
"url": "git+https://github.com/
|
|
8
|
+
"url": "git+https://github.com/tsparticles/tsparticles.git",
|
|
9
9
|
"directory": "shapes/image"
|
|
10
10
|
},
|
|
11
11
|
"keywords": [
|
|
@@ -38,16 +38,28 @@
|
|
|
38
38
|
"author": "Matteo Bruni <matteo.bruni@me.com>",
|
|
39
39
|
"license": "MIT",
|
|
40
40
|
"bugs": {
|
|
41
|
-
"url": "https://github.com/
|
|
41
|
+
"url": "https://github.com/tsparticles/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.2"
|
|
51
63
|
},
|
|
52
64
|
"publishConfig": {
|
|
53
65
|
"access": "public"
|