@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
|
@@ -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.2
|
|
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.2 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
|
});
|