1 line
13 KiB
JavaScript
1 line
13 KiB
JavaScript
import{_ as e,c as t,o as a,N as r}from"./chunks/framework.0799945b.js";const g=JSON.parse('{"title":"Module: features/particles/particles","description":"","frontmatter":{"editLink":false},"headers":[],"relativePath":"api/modules/features/particles.md","lastUpdated":null}'),l={name:"api/modules/features/particles.md"},o=r('<h1 id="module-features-particles-particles" tabindex="-1">Module: features/particles/particles <a class="header-anchor" href="#module-features-particles-particles" aria-label="Permalink to "Module: features/particles/particles""></a></h1><h2 id="interfaces" tabindex="-1">Interfaces <a class="header-anchor" href="#interfaces" aria-label="Permalink to "Interfaces""></a></h2><h3 id="baseparticles" tabindex="-1">BaseParticles <a class="header-anchor" href="#baseparticles" aria-label="Permalink to "BaseParticles""></a></h3><p>• <strong>BaseParticles</strong>: <code>Object</code></p><p>The properties that are added onto a processed <a href="./particles#particlesoptions">ParticlesOptions</a> to create an <a href="./particles#particles">Particles</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>[Component]</code></td><td style="text-align:left;"><a href="./feature#genericcomponent"><code>GenericComponent</code></a></td><td style="text-align:left;">The Vue component used to render this feature.</td></tr><tr><td style="text-align:left;"><code>[GatherProps]</code></td><td style="text-align:left;">() => <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>unknown</code>></td><td style="text-align:left;">A function to gather the props the vue component requires for this feature.</td></tr><tr><td style="text-align:left;"><code>addEmitter</code></td><td style="text-align:left;">(<code>config</code>: <code>EmitterConfigV3</code>) => <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" rel="noreferrer"><code>Promise</code></a><<code>Emitter</code>></td><td style="text-align:left;">A function to asynchronously add an emitter to the canvas. The returned emitter can then be positioned as appropriate and started. <strong><code>See</code></strong> <a href="./particles#particles">Particles</a></td></tr><tr><td style="text-align:left;"><code>app</code></td><td style="text-align:left;"><code>Ref</code><<code>null</code> | <code>Application</code>></td><td style="text-align:left;">The Pixi.JS Application powering this particles canvas.</td></tr><tr><td style="text-align:left;"><code>id</code></td><td style="text-align:left;"><code>string</code></td><td style="text-align:left;">An auto-generated ID for identifying features that appear in the DOM. Will not persist between refreshes or updates.</td></tr><tr><td style="text-align:left;"><code>type</code></td><td style="text-align:left;">typeof <a href="./particles#particlestype"><code>ParticlesType</code></a></td><td style="text-align:left;">A symbol that helps identify features of the same type.</td></tr></tbody></table><h4 id="defined-in" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/87a2d6b/src/features/particles/particles.tsx#L31" target="_blank" rel="noreferrer">profectus/src/features/particles/particles.tsx:31</a></p><hr><h3 id="particlesoptions" tabindex="-1">ParticlesOptions <a class="header-anchor" href="#particlesoptions" aria-label="Permalink to "ParticlesOptions""></a></h3><p>• <strong>ParticlesOptions</strong>: <code>Object</code></p><p>An object that configures <a href="./particles#particles">Particles</a>.</p><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>classes?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type" target="_blank" rel="noreferrer"><code>Record</code></a><<code>string</code>, <code>boolean</code>>></td><td style="text-align:left;">Dictionary of CSS classes to apply to this feature.</td></tr><tr><td style="text-align:left;"><code>onContainerResized?</code></td><td style="text-align:left;">(<code>boundingRect</code>: <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMRect" target="_blank" rel="noreferrer"><code>DOMRect</code></a>) => <code>void</code></td><td style="text-align:left;">A function that is called when the particles canvas is resized.</td></tr><tr><td style="text-align:left;"><code>onHotReload?</code></td><td style="text-align:left;"><code>VoidFunction</code></td><td style="text-align:left;">A function that is called whenever the particles element is reloaded during development. For restarting particle effects.</td></tr><tr><td style="text-align:left;"><code>style?</code></td><td style="text-align:left;"><a href="./../util/computed#computable"><code>Computable</code></a><<a href="./feature#stylevalue"><code>StyleValue</code></a>></td><td style="text-align:left;">CSS to apply to this feature.</td></tr></tbody></table><h4 id="defined-in-1" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-1" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/87a2d6b/src/features/particles/particles.tsx#L17" target="_blank" rel="noreferrer">profectus/src/features/particles/particles.tsx:17</a></p><h2 id="type-aliases" tabindex="-1">Type Aliases <a class="header-anchor" href="#type-aliases" aria-label="Permalink to "Type Aliases""></a></h2><h3 id="genericparticles" tabindex="-1">GenericParticles <a class="header-anchor" href="#genericparticles" aria-label="Permalink to "GenericParticles""></a></h3><p>Ƭ <strong>GenericParticles</strong>: <a href="./particles#particles"><code>Particles</code></a><<a href="./particles#particlesoptions"><code>ParticlesOptions</code></a>></p><p>A type that matches any valid <a href="./particles#particles">Particles</a> object.</p><h4 id="defined-in-2" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-2" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/87a2d6b/src/features/particles/particles.tsx#L63" target="_blank" rel="noreferrer">profectus/src/features/particles/particles.tsx:63</a></p><hr><h3 id="particles" tabindex="-1">Particles <a class="header-anchor" href="#particles" aria-label="Permalink to "Particles""></a></h3><p>Ƭ <strong>Particles</strong><<code>T</code>>: <a href="./feature#replace"><code>Replace</code></a><<code>T</code> & <a href="./particles#baseparticles"><code>BaseParticles</code></a>, { <code>classes</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"classes"</code>]> ; <code>style</code>: <a href="./../util/computed#getcomputabletype"><code>GetComputableType</code></a><<code>T</code>[<code>"style"</code>]> }></p><p>An object that represents a feature that display particle effects on the screen. The config should typically be gotten by designing the effect using the <a href="https://pixijs.io/pixi-particles-editor/" target="_blank" rel="noreferrer">online particle effect editor</a> and passing it into the upgradeConfig from @pixi/particle-emitter.</p><h4 id="type-parameters" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters" aria-label="Permalink to "Type parameters""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./particles#particlesoptions"><code>ParticlesOptions</code></a></td></tr></tbody></table><h4 id="defined-in-3" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-3" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/87a2d6b/src/features/particles/particles.tsx#L54" target="_blank" rel="noreferrer">profectus/src/features/particles/particles.tsx:54</a></p><h2 id="variables" tabindex="-1">Variables <a class="header-anchor" href="#variables" aria-label="Permalink to "Variables""></a></h2><h3 id="particlestype" tabindex="-1">ParticlesType <a class="header-anchor" href="#particlestype" aria-label="Permalink to "ParticlesType""></a></h3><p>• <code>Const</code> <strong>ParticlesType</strong>: typeof <a href="./particles#particlestype"><code>ParticlesType</code></a></p><p>A symbol used to identify <a href="./particles#particles">Particles</a> features.</p><h4 id="defined-in-4" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-4" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/87a2d6b/src/features/particles/particles.tsx#L12" target="_blank" rel="noreferrer">profectus/src/features/particles/particles.tsx:12</a></p><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to "Functions""></a></h2><h3 id="createparticles" tabindex="-1">createParticles <a class="header-anchor" href="#createparticles" aria-label="Permalink to "createParticles""></a></h3><p>▸ <strong>createParticles</strong><<code>T</code>>(<code>optionsFunc?</code>): <a href="./particles#particles"><code>Particles</code></a><<code>T</code>></p><p>Lazily creates particles with the given options.</p><h5 id="type-parameters-1" tabindex="-1">Type parameters <a class="header-anchor" href="#type-parameters-1" aria-label="Permalink to "Type parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>T</code></td><td style="text-align:left;">extends <a href="./particles#particlesoptions"><code>ParticlesOptions</code></a></td></tr></tbody></table><h5 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to "Parameters""></a></h5><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td style="text-align:left;"><code>optionsFunc?</code></td><td style="text-align:left;"><a href="./feature#optionsfunc"><code>OptionsFunc</code></a><<code>T</code>, <a href="./particles#baseparticles"><code>BaseParticles</code></a>, <a href="./particles#genericparticles"><code>GenericParticles</code></a>></td><td style="text-align:left;">Particles options.</td></tr></tbody></table><h5 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to "Returns""></a></h5><p><a href="./particles#particles"><code>Particles</code></a><<code>T</code>></p><h4 id="defined-in-5" tabindex="-1">Defined in <a class="header-anchor" href="#defined-in-5" aria-label="Permalink to "Defined in""></a></h4><p><a href="https://github.com/profectus-engine/Profectus/blob/87a2d6b/src/features/particles/particles.tsx#L69" target="_blank" rel="noreferrer">profectus/src/features/particles/particles.tsx:69</a></p><h2 id="components" tabindex="-1">Components <a class="header-anchor" href="#components" aria-label="Permalink to "Components""></a></h2><h3 id="particles-component" tabindex="-1">Particles Component <a class="header-anchor" href="#particles-component" aria-label="Permalink to "Particles Component""></a></h3><h4 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to "Props""></a></h4><table><thead><tr><th style="text-align:left;">Name</th><th style="text-align:left;">Type</th></tr></thead><tbody><tr><td style="text-align:left;"><code>style</code></td><td style="text-align:left;"><code>processedPropType<StyleValue>(String, Object, Array)</code></td></tr><tr><td style="text-align:left;"><code>classes</code></td><td style="text-align:left;"><code>processedPropType<Record<string, boolean>>(Object)</code></td></tr><tr><td style="text-align:left;"><code>onInit</code>*</td><td style="text-align:left;"><code>(app: Application) => void</code></td></tr><tr><td style="text-align:left;"><code>id</code>*</td><td style="text-align:left;"><code>string</code></td></tr><tr><td style="text-align:left;"><code>onContainerResized</code></td><td style="text-align:left;"><code>(rect: DOMRect) => void</code></td></tr><tr><td style="text-align:left;"><code>onHotReload</code></td><td style="text-align:left;"><code>VoidFunction</code></td></tr></tbody></table>',51),i=[o];function s(c,d,n,p,h,f){return a(),t("div",null,i)}const y=e(l,[["render",s]]);export{g as __pageData,y as default};
|