@tsparticles/shape-image 4.0.0-beta.0 → 4.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/{682.min.js → 326.min.js} +1 -1
- package/{550.min.js → 562.min.js} +1 -1
- package/{814.min.js → 664.min.js} +1 -1
- package/{375.min.js → 979.min.js} +1 -1
- package/browser/ImageDrawer.js +5 -3
- package/browser/index.js +5 -5
- package/cjs/ImageDrawer.js +5 -3
- package/cjs/index.js +5 -5
- package/dist_browser_GifUtils_Utils_js.js +1 -1
- package/dist_browser_ImageDrawer_js.js +2 -2
- package/dist_browser_ImagePreloaderInstance_js.js +1 -1
- package/dist_browser_ImagePreloader_js.js +1 -1
- package/esm/ImageDrawer.js +5 -3
- package/esm/index.js +5 -5
- package/package.json +2 -2
- package/report.html +84 -29
- package/tsparticles.shape.image.js +2 -2
- package/tsparticles.shape.image.min.js +2 -2
- package/types/ImageDrawer.d.ts +2 -1
- package/umd/ImageDrawer.js +5 -3
- package/umd/index.js +5 -5
|
@@ -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
|
-
* v4.0.0-beta.
|
|
7
|
+
* v4.0.0-beta.1
|
|
8
8
|
*/
|
|
9
9
|
/*
|
|
10
10
|
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
|
|
@@ -54,7 +54,7 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
|
|
|
54
54
|
\*******************************/
|
|
55
55
|
(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
|
|
56
56
|
|
|
57
|
-
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ loadImageShape: () => (/* binding */ loadImageShape)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\nconst extLength = 3;\nfunction addLoadImageToEngine(engine) {\n engine.getImages ??= (container)=>{\n engine.images ??= new Map();\n let images = engine.images.get(container);\n if (!images) {\n images = [];\n engine.images.set(container, images);\n }\n return images;\n };\n engine.loadImage ??= async (container, data)=>{\n if (!engine.getImages) {\n throw new Error(\"No images collection found\");\n }\n if (!data.name && !data.src) {\n throw new Error(\"No image source provided\");\n }\n engine.images ??= new Map();\n const containerImages = engine.getImages(container);\n if (containerImages.some((t)=>t.name === data.name || t.source === data.src)) {\n return;\n }\n try {\n const image = {\n gif: data.gif,\n name: data.name ?? data.src,\n source: data.src,\n type: data.src.substring(data.src.length - extLength),\n error: false,\n loading: true,\n replaceColor: data.replaceColor,\n ratio: data.width && data.height ? data.width / data.height : undefined\n };\n containerImages.push(image);\n engine.images.set(container, containerImages);\n let imageFunc;\n if (data.gif) {\n const { loadGifImage } = await __webpack_require__.e(/*! import() */ \"dist_browser_GifUtils_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./GifUtils/Utils.js */ \"./dist/browser/GifUtils/Utils.js\"));\n imageFunc = (img)=>loadGifImage(img, {\n colorSpace: \"srgb\"\n });\n } else if (data.replaceColor) {\n const { downloadSvgImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"./dist/browser/Utils.js\"));\n imageFunc = downloadSvgImage;\n } else {\n const { loadImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"./dist/browser/Utils.js\"));\n imageFunc = loadImage;\n }\n await imageFunc(image);\n } catch {\n throw new Error(`${data.name ?? data.src} not found`);\n }\n };\n}\nasync function loadImageShape(engine) {\n engine.checkVersion(\"4.0.0-beta.
|
|
57
|
+
eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ loadImageShape: () => (/* binding */ loadImageShape)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Utils.js */ \"./dist/browser/Utils.js\");\n\nconst extLength = 3;\nfunction addLoadImageToEngine(engine) {\n engine.getImages ??= (container)=>{\n engine.images ??= new Map();\n let images = engine.images.get(container);\n if (!images) {\n images = [];\n engine.images.set(container, images);\n }\n return images;\n };\n engine.loadImage ??= async (container, data)=>{\n if (!engine.getImages) {\n throw new Error(\"No images collection found\");\n }\n if (!data.name && !data.src) {\n throw new Error(\"No image source provided\");\n }\n engine.images ??= new Map();\n const containerImages = engine.getImages(container);\n if (containerImages.some((t)=>t.name === data.name || t.source === data.src)) {\n return;\n }\n try {\n const image = {\n gif: data.gif,\n name: data.name ?? data.src,\n source: data.src,\n type: data.src.substring(data.src.length - extLength),\n error: false,\n loading: true,\n replaceColor: data.replaceColor,\n ratio: data.width && data.height ? data.width / data.height : undefined\n };\n containerImages.push(image);\n engine.images.set(container, containerImages);\n let imageFunc;\n if (data.gif) {\n const { loadGifImage } = await __webpack_require__.e(/*! import() */ \"dist_browser_GifUtils_Utils_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./GifUtils/Utils.js */ \"./dist/browser/GifUtils/Utils.js\"));\n imageFunc = (img)=>loadGifImage(img, {\n colorSpace: \"srgb\"\n });\n } else if (data.replaceColor) {\n const { downloadSvgImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"./dist/browser/Utils.js\"));\n imageFunc = downloadSvgImage;\n } else {\n const { loadImage } = await Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./Utils.js */ \"./dist/browser/Utils.js\"));\n imageFunc = loadImage;\n }\n await imageFunc(image);\n } catch {\n throw new Error(`${data.name ?? data.src} not found`);\n }\n };\n}\nasync function loadImageShape(engine) {\n engine.checkVersion(\"4.0.0-beta.1\");\n await engine.pluginManager.register(async (e)=>{\n const { ImagePreloaderPlugin } = await __webpack_require__.e(/*! import() */ \"dist_browser_ImagePreloader_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ImagePreloader.js */ \"./dist/browser/ImagePreloader.js\"));\n addLoadImageToEngine(e);\n e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));\n e.pluginManager.addShape(_Utils_js__WEBPACK_IMPORTED_MODULE_0__.shapeTypes, async (container)=>{\n const { ImageDrawer } = await Promise.all(/*! import() */[__webpack_require__.e(\"dist_browser_GifUtils_Utils_js\"), __webpack_require__.e(\"dist_browser_ImageDrawer_js\")]).then(__webpack_require__.bind(__webpack_require__, /*! ./ImageDrawer.js */ \"./dist/browser/ImageDrawer.js\"));\n return new ImageDrawer(e, container);\n });\n });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-image/./dist/browser/index.js?\n}");
|
|
58
58
|
|
|
59
59
|
/***/ }
|
|
60
60
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],r);else{var t="object"==typeof exports?r(require("@tsparticles/engine")):r(e.window);for(var
|
|
2
|
-
(`+
|
|
1
|
+
!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("@tsparticles/engine"));else if("function"==typeof define&&define.amd)define(["@tsparticles/engine"],r);else{var t="object"==typeof exports?r(require("@tsparticles/engine")):r(e.window);for(var a in t)("object"==typeof exports?exports:e)[a]=t[a]}}(this,e=>(()=>{"use strict";var r,t,a,o={303(r){r.exports=e},131(e,r,t){t.d(r,{d:()=>l,downloadSvgImage:()=>s,loadImage:()=>n,z:()=>o});var a=t(303);let o=["image","images"],i=/(#(?:[0-9a-f]{2}){2,4}|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[\d.]+%?\))|currentcolor/gi;async function n(e){return new Promise(r=>{e.loading=!0;let t=new Image;e.element=t,t.addEventListener("load",()=>{e.loading=!1,r()}),t.addEventListener("error",()=>{e.element=void 0,e.error=!0,e.loading=!1,(0,a.getLogger)().error(`Error loading image: ${e.source}`),r()}),t.src=e.source})}async function s(e){if("svg"!==e.type)return void await n(e);e.loading=!0;let r=await fetch(e.source);r.ok?e.svgData=await r.text():((0,a.getLogger)().error("Image not found"),e.error=!0),e.loading=!1}function l(e,r,t,o,s=!1){let c=function(e,r,t,o=!1){let{svgData:n}=e;if(!n)return"";let s=(0,a.getStyleFromHsl)(r,o,t);if(n.includes("fill"))return n.replaceAll(i,()=>s);let l=n.indexOf(">");return`${n.substring(0,l)} fill="${s}"${n.substring(l)}`}(e,t,o.opacity?.value??1,s),d={color:t,gif:r.gif,data:{...e,svgData:c},loaded:!1,ratio:r.width/r.height,replaceColor:r.replaceColor,source:r.src};return new Promise(r=>{let t=new Blob([c],{type:"image/svg+xml"}),a=URL.createObjectURL(t),o=new Image;o.addEventListener("load",()=>{d.loaded=!0,d.element=o,r(d),URL.revokeObjectURL(a)});let i=async()=>{URL.revokeObjectURL(a);let t={...e,error:!1,loading:!0};await n(t),d.loaded=!0,d.element=t.element,r(d)};o.addEventListener("error",()=>void i()),o.src=a})}}},i={};function n(e){var r=i[e];if(void 0!==r)return r.exports;var t=i[e]={exports:{}};return o[e](t,t.exports,n),t.exports}n.m=o,n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce((r,t)=>(n.f[t](e,r),r),[])),n.u=e=>""+e+".min.js",n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),s={},n.l=(e,r,t,a)=>{if(s[e])return void s[e].push(r);if(void 0!==t)for(var o,i,l=document.getElementsByTagName("script"),c=0;c<l.length;c++){var d=l[c];if(d.getAttribute("src")==e||d.getAttribute("data-webpack")=="@tsparticles/shape-image:"+t){o=d;break}}o||(i=!0,(o=document.createElement("script")).charset="utf-8",n.nc&&o.setAttribute("nonce",n.nc),o.setAttribute("data-webpack","@tsparticles/shape-image:"+t),o.src=e),s[e]=[r];var g=(r,t)=>{o.onerror=o.onload=null,clearTimeout(u);var a=s[e];if(delete s[e],o.parentNode&&o.parentNode.removeChild(o),a&&a.forEach(e=>e(t)),r)return r(t)},u=setTimeout(g.bind(null,void 0,{type:"timeout",target:o}),12e4);o.onerror=g.bind(null,o.onerror),o.onload=g.bind(null,o.onload),i&&document.head.appendChild(o)},n.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.g.importScripts&&(l=n.g.location+"");var s,l,c=n.g.document;if(!l&&c&&(c.currentScript&&"SCRIPT"===c.currentScript.tagName.toUpperCase()&&(l=c.currentScript.src),!l)){var d=c.getElementsByTagName("script");if(d.length)for(var g=d.length-1;g>-1&&(!l||!/^http(s?):/.test(l));)l=d[g--].src}if(!l)throw Error("Automatic publicPath is not supported in this browser");n.p=l=l.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),r={999:0},n.f.j=(e,t)=>{var a=n.o(r,e)?r[e]:void 0;if(0!==a)if(a)t.push(a[2]);else{var o=new Promise((t,o)=>a=r[e]=[t,o]);t.push(a[2]=o);var i=n.p+n.u(e),s=Error();n.l(i,t=>{if(n.o(r,e)&&(0!==(a=r[e])&&(r[e]=void 0),a)){var o=t&&("load"===t.type?"missing":t.type),i=t&&t.target&&t.target.src;s.message="Loading chunk "+e+` failed.
|
|
2
|
+
(`+o+": "+i+")",s.name="ChunkLoadError",s.type=o,s.request=i,a[1](s)}},"chunk-"+e,e)}},t=(e,t)=>{var a,o,[i,s,l]=t,c=0;if(i.some(e=>0!==r[e])){for(a in s)n.o(s,a)&&(n.m[a]=s[a]);l&&l(n)}for(e&&e(t);c<i.length;c++)o=i[c],n.o(r,o)&&r[o]&&r[o][0](),r[o]=0},(a=this.webpackChunk_tsparticles_shape_image=this.webpackChunk_tsparticles_shape_image||[]).forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a));var u={};n.r(u),n.d(u,{loadImageShape:()=>f});var p=n(131);async function f(e){e.checkVersion("4.0.0-beta.1"),await e.pluginManager.register(async e=>{let{ImagePreloaderPlugin:r}=await n.e(979).then(n.bind(n,979));e.getImages??=r=>{e.images??=new Map;let t=e.images.get(r);return t||(t=[],e.images.set(r,t)),t},e.loadImage??=async(r,t)=>{if(!e.getImages)throw Error("No images collection found");if(!t.name&&!t.src)throw Error("No image source provided");e.images??=new Map;let a=e.getImages(r);if(!a.some(e=>e.name===t.name||e.source===t.src))try{let o,i={gif:t.gif,name:t.name??t.src,source:t.src,type:t.src.substring(t.src.length-3),error:!1,loading:!0,replaceColor:t.replaceColor,ratio:t.width&&t.height?t.width/t.height:void 0};if(a.push(i),e.images.set(r,a),t.gif){let{loadGifImage:e}=await n.e(664).then(n.bind(n,664));o=r=>e(r,{colorSpace:"srgb"})}else if(t.replaceColor){let{downloadSvgImage:e}=await Promise.resolve().then(n.bind(n,131));o=e}else{let{loadImage:e}=await Promise.resolve().then(n.bind(n,131));o=e}await o(i)}catch{throw Error(`${t.name??t.src} not found`)}},e.pluginManager.addPlugin(new r(e)),e.pluginManager.addShape(p.z,async r=>{let{ImageDrawer:t}=await n.e(326).then(n.bind(n,326));return new t(e,r)})})}return u})());
|
package/types/ImageDrawer.d.ts
CHANGED
|
@@ -2,8 +2,9 @@ import { type Container, type IShapeDrawData, type IShapeDrawer } from "@tsparti
|
|
|
2
2
|
import { type ImageParticle } from "./Utils.js";
|
|
3
3
|
import type { ImageContainer, ImageEngine } from "./types.js";
|
|
4
4
|
export declare class ImageDrawer implements IShapeDrawer<ImageParticle> {
|
|
5
|
+
private readonly _container;
|
|
5
6
|
private readonly _engine;
|
|
6
|
-
constructor(engine: ImageEngine);
|
|
7
|
+
constructor(engine: ImageEngine, container: ImageContainer);
|
|
7
8
|
draw(data: IShapeDrawData<ImageParticle>): void;
|
|
8
9
|
getSidesCount(): number;
|
|
9
10
|
init(container: ImageContainer): Promise<void>;
|
package/umd/ImageDrawer.js
CHANGED
|
@@ -15,9 +15,11 @@
|
|
|
15
15
|
const Utils_js_2 = require("./GifUtils/Utils.js");
|
|
16
16
|
const sides = 12;
|
|
17
17
|
class ImageDrawer {
|
|
18
|
+
_container;
|
|
18
19
|
_engine;
|
|
19
|
-
constructor(engine) {
|
|
20
|
+
constructor(engine, container) {
|
|
20
21
|
this._engine = engine;
|
|
22
|
+
this._container = container;
|
|
21
23
|
}
|
|
22
24
|
draw(data) {
|
|
23
25
|
const { context, radius, particle, opacity } = data, image = particle.image, element = image?.element;
|
|
@@ -26,7 +28,7 @@
|
|
|
26
28
|
}
|
|
27
29
|
context.globalAlpha = opacity;
|
|
28
30
|
if (image.gif && image.gifData) {
|
|
29
|
-
(0, Utils_js_2.drawGif)(data,
|
|
31
|
+
(0, Utils_js_2.drawGif)(data, this._container.canvas.render.settings);
|
|
30
32
|
}
|
|
31
33
|
else if (element) {
|
|
32
34
|
const ratio = image.ratio, pos = {
|
|
@@ -52,7 +54,7 @@
|
|
|
52
54
|
await Promise.all(promises);
|
|
53
55
|
}
|
|
54
56
|
loadShape(particle) {
|
|
55
|
-
const { container } =
|
|
57
|
+
const { _container: container } = this;
|
|
56
58
|
if (!particle.shape || !Utils_js_1.shapeTypes.includes(particle.shape)) {
|
|
57
59
|
return;
|
|
58
60
|
}
|
package/umd/index.js
CHANGED
|
@@ -102,14 +102,14 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
102
102
|
};
|
|
103
103
|
}
|
|
104
104
|
async function loadImageShape(engine) {
|
|
105
|
-
engine.checkVersion("4.0.0-beta.
|
|
106
|
-
await engine.register(async (e) => {
|
|
105
|
+
engine.checkVersion("4.0.0-beta.1");
|
|
106
|
+
await engine.pluginManager.register(async (e) => {
|
|
107
107
|
const { ImagePreloaderPlugin } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImagePreloader.js"))) : new Promise((resolve_4, reject_4) => { require(["./ImagePreloader.js"], resolve_4, reject_4); }).then(__importStar));
|
|
108
108
|
addLoadImageToEngine(e);
|
|
109
|
-
e.addPlugin(new ImagePreloaderPlugin(e));
|
|
110
|
-
e.addShape(Utils_js_1.shapeTypes, async () => {
|
|
109
|
+
e.pluginManager.addPlugin(new ImagePreloaderPlugin(e));
|
|
110
|
+
e.pluginManager.addShape(Utils_js_1.shapeTypes, async (container) => {
|
|
111
111
|
const { ImageDrawer } = await (__syncRequire ? Promise.resolve().then(() => __importStar(require("./ImageDrawer.js"))) : new Promise((resolve_5, reject_5) => { require(["./ImageDrawer.js"], resolve_5, reject_5); }).then(__importStar));
|
|
112
|
-
return new ImageDrawer(e);
|
|
112
|
+
return new ImageDrawer(e, container);
|
|
113
113
|
});
|
|
114
114
|
});
|
|
115
115
|
}
|