Replaced tsparticles with pixi-emitter
This commit is contained in:
parent
69468d88c0
commit
ecc4b9fb5f
4 changed files with 879 additions and 848 deletions
1546
package-lock.json
generated
1546
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,11 +9,11 @@
|
|||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@pixi/particle-emitter": "^5.0.4",
|
||||
"core-js": "^3.6.5",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"nanoevents": "^6.0.2",
|
||||
"particles.vue3": "^2.0.3",
|
||||
"tsparticles": "^2.0.3",
|
||||
"pixi.js": "^6.3.0",
|
||||
"vue": "^3.2.26",
|
||||
"vue-next-select": "^2.10.2",
|
||||
"vue-panzoom": "^1.1.6",
|
||||
|
|
|
|||
|
|
@ -1,89 +1,74 @@
|
|||
onMounted,
|
||||
<template>
|
||||
<Particles
|
||||
:id="id"
|
||||
:class="{
|
||||
'not-fullscreen': !fullscreen
|
||||
}"
|
||||
:style="{
|
||||
zIndex
|
||||
}"
|
||||
ref="particles"
|
||||
:particlesInit="particlesInit"
|
||||
:particlesLoaded="particlesLoaded"
|
||||
:options="{
|
||||
fpsLimit: 60,
|
||||
fullScreen: { enable: fullscreen, zIndex },
|
||||
particles: {
|
||||
number: {
|
||||
value: 0
|
||||
}
|
||||
},
|
||||
emitters: {
|
||||
autoPlay: false
|
||||
}
|
||||
}"
|
||||
v-bind="$attrs"
|
||||
<div
|
||||
ref="resizeListener"
|
||||
class="resize-listener"
|
||||
:style="unref(style)"
|
||||
:class="unref(classes)"
|
||||
/>
|
||||
<div ref="resizeListener" class="resize-listener" />
|
||||
</template>
|
||||
|
||||
<script lang="tsx">
|
||||
import { loadFull } from "tsparticles";
|
||||
import { Engine, Container } from "tsparticles-engine";
|
||||
import { Emitters } from "tsparticles-plugin-emitters/Emitters";
|
||||
import { EmitterContainer } from "tsparticles-plugin-emitters/EmitterContainer";
|
||||
import { defineComponent, inject, nextTick, onMounted, PropType, ref } from "vue";
|
||||
import { ParticlesComponent } from "particles.vue3";
|
||||
import { StyleValue } from "features/feature";
|
||||
import { FeatureNode, NodesInjectionKey } from "game/layers";
|
||||
import { Application } from "pixi.js";
|
||||
import { processedPropType } from "util/vue";
|
||||
import {
|
||||
defineComponent,
|
||||
inject,
|
||||
nextTick,
|
||||
onBeforeUnmount,
|
||||
onMounted,
|
||||
PropType,
|
||||
ref,
|
||||
unref
|
||||
} from "vue";
|
||||
|
||||
// TODO get typing support on the Particles component
|
||||
export default defineComponent({
|
||||
props: {
|
||||
zIndex: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
style: processedPropType<StyleValue>(String, Object, Array),
|
||||
classes: processedPropType<Record<string, boolean>>(Object),
|
||||
onInit: {
|
||||
type: Function as PropType<(container: EmitterContainer & Container) => void>,
|
||||
type: Function as PropType<(app: Application) => void>,
|
||||
required: true
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
onContainerResized: Function as PropType<(rect: DOMRect) => void>
|
||||
onContainerResized: Function as PropType<(rect: DOMRect) => void>,
|
||||
onHotReload: Function as PropType<VoidFunction>
|
||||
},
|
||||
components: { Particles: ParticlesComponent },
|
||||
setup(props) {
|
||||
const particles = ref<null | { particles: { container: Emitters } }>(null);
|
||||
|
||||
async function particlesInit(engine: Engine) {
|
||||
await loadFull(engine);
|
||||
}
|
||||
|
||||
function particlesLoaded(container: EmitterContainer & Container) {
|
||||
props.onInit(container);
|
||||
}
|
||||
const app = ref<null | Application>(null);
|
||||
|
||||
const resizeObserver = new ResizeObserver(updateBounds);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const nodes = inject(NodesInjectionKey)!;
|
||||
|
||||
const resizeListener = ref<Element | null>(null);
|
||||
const resizeListener = ref<HTMLElement | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
// ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
|
||||
const resListener = resizeListener.value;
|
||||
if (resListener != null) {
|
||||
resizeObserver.observe(resListener);
|
||||
app.value = new Application({
|
||||
resizeTo: resListener,
|
||||
backgroundAlpha: 0
|
||||
});
|
||||
resizeListener.value?.appendChild(app.value.view);
|
||||
props.onInit(app.value as Application);
|
||||
}
|
||||
updateBounds();
|
||||
if (module.hot?.status() === "apply" && props.onHotReload) {
|
||||
nextTick(props.onHotReload);
|
||||
}
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
app.value?.destroy();
|
||||
});
|
||||
|
||||
let isDirty = true;
|
||||
|
|
@ -93,20 +78,20 @@ export default defineComponent({
|
|||
nextTick(() => {
|
||||
if (resizeListener.value != null && props.onContainerResized) {
|
||||
// TODO don't overlap with Links.vue
|
||||
(Object.values(nodes.value) as FeatureNode[]).forEach(
|
||||
(Object.values(nodes.value).filter(n => n) as FeatureNode[]).forEach(
|
||||
node => (node.rect = node.element.getBoundingClientRect())
|
||||
);
|
||||
props.onContainerResized(resizeListener.value.getBoundingClientRect());
|
||||
app.value?.resize();
|
||||
}
|
||||
isDirty = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
document.fonts.ready.then(updateBounds);
|
||||
|
||||
return {
|
||||
particles,
|
||||
particlesInit,
|
||||
particlesLoaded,
|
||||
unref,
|
||||
resizeListener
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,24 @@
|
|||
import ParticlesComponent from "features/particles/Particles.vue";
|
||||
import { Container } from "tsparticles-engine";
|
||||
import { IEmitter } from "tsparticles-plugin-emitters/Options/Interfaces/IEmitter";
|
||||
import { EmitterInstance } from "tsparticles-plugin-emitters/EmitterInstance";
|
||||
import { EmitterContainer } from "tsparticles-plugin-emitters/EmitterContainer";
|
||||
import { Ref, shallowRef } from "vue";
|
||||
import { Component, GatherProps, getUniqueID, Replace, setDefault } from "features/feature";
|
||||
import { Ref, shallowRef, unref } from "vue";
|
||||
import { Component, GatherProps, getUniqueID, Replace, StyleValue } from "features/feature";
|
||||
import { createLazyProxy } from "util/proxies";
|
||||
import { Application } from "pixi.js";
|
||||
import { Emitter, EmitterConfigV3, upgradeConfig } from "@pixi/particle-emitter";
|
||||
import { Computable, GetComputableType } from "util/computed";
|
||||
|
||||
export const ParticlesType = Symbol("Particles");
|
||||
|
||||
export interface ParticlesOptions {
|
||||
fullscreen?: boolean;
|
||||
zIndex?: number;
|
||||
classes?: Computable<Record<string, boolean>>;
|
||||
style?: Computable<StyleValue>;
|
||||
onContainerResized?: (boundingRect: DOMRect) => void;
|
||||
onHotReload?: VoidFunction;
|
||||
}
|
||||
|
||||
export interface BaseParticles {
|
||||
id: string;
|
||||
containerRef: Ref<null | (EmitterContainer & Container)>;
|
||||
addEmitter: (
|
||||
options: IEmitter & { particles: Required<IEmitter>["particles"] }
|
||||
) => Promise<EmitterInstance>;
|
||||
removeEmitter: (emitter: EmitterInstance) => void;
|
||||
app: Ref<null | Application>;
|
||||
addEmitter: (config: EmitterConfigV3) => Promise<Emitter>;
|
||||
type: typeof ParticlesType;
|
||||
[Component]: typeof ParticlesComponent;
|
||||
[GatherProps]: () => Record<string, unknown>;
|
||||
|
|
@ -30,18 +27,12 @@ export interface BaseParticles {
|
|||
export type Particles<T extends ParticlesOptions> = Replace<
|
||||
T & BaseParticles,
|
||||
{
|
||||
fullscreen: undefined extends T["fullscreen"] ? true : T["fullscreen"];
|
||||
zIndex: undefined extends T["zIndex"] ? 1 : T["zIndex"];
|
||||
classes: GetComputableType<T["classes"]>;
|
||||
style: GetComputableType<T["style"]>;
|
||||
}
|
||||
>;
|
||||
|
||||
export type GenericParticles = Replace<
|
||||
Particles<ParticlesOptions>,
|
||||
{
|
||||
fullscreen: boolean;
|
||||
zIndex: number;
|
||||
}
|
||||
>;
|
||||
export type GenericParticles = Particles<ParticlesOptions>;
|
||||
|
||||
export function createParticles<T extends ParticlesOptions>(
|
||||
optionsFunc: () => T & ThisType<Particles<T>>
|
||||
|
|
@ -52,46 +43,38 @@ export function createParticles<T extends ParticlesOptions>(
|
|||
particles.type = ParticlesType;
|
||||
particles[Component] = ParticlesComponent;
|
||||
|
||||
particles.containerRef = shallowRef(null);
|
||||
particles.addEmitter = (
|
||||
options: IEmitter & { particles: Required<IEmitter>["particles"] }
|
||||
): Promise<EmitterInstance> => {
|
||||
particles.app = shallowRef(null);
|
||||
particles.addEmitter = (config: EmitterConfigV3): Promise<Emitter> => {
|
||||
const genericParticles = particles as GenericParticles;
|
||||
if (genericParticles.containerRef.value) {
|
||||
// TODO why does addEmitter require a position parameter
|
||||
return Promise.resolve(genericParticles.containerRef.value.addEmitter(options));
|
||||
if (genericParticles.app.value) {
|
||||
return Promise.resolve(new Emitter(genericParticles.app.value.stage, config));
|
||||
}
|
||||
return new Promise<EmitterInstance>(resolve => {
|
||||
emittersToAdd.push({ resolve, options });
|
||||
return new Promise<Emitter>(resolve => {
|
||||
emittersToAdd.push({ resolve, config });
|
||||
});
|
||||
};
|
||||
particles.removeEmitter = (emitter: EmitterInstance) => {
|
||||
// TODO I can't find a proper way to remove an emitter without accessing private functions
|
||||
emitter.emitters.removeEmitter(emitter);
|
||||
};
|
||||
|
||||
let emittersToAdd: {
|
||||
resolve: (value: EmitterInstance | PromiseLike<EmitterInstance>) => void;
|
||||
options: IEmitter & { particles: Required<IEmitter>["particles"] };
|
||||
resolve: (value: Emitter | PromiseLike<Emitter>) => void;
|
||||
config: EmitterConfigV3;
|
||||
}[] = [];
|
||||
|
||||
function onInit(container: EmitterContainer & Container) {
|
||||
(particles as GenericParticles).containerRef.value = container;
|
||||
emittersToAdd.forEach(({ resolve, options }) => resolve(container.addEmitter(options)));
|
||||
function onInit(app: Application) {
|
||||
(particles as GenericParticles).app.value = app;
|
||||
emittersToAdd.forEach(({ resolve, config }) => resolve(new Emitter(app.stage, config)));
|
||||
emittersToAdd = [];
|
||||
}
|
||||
|
||||
setDefault(particles, "fullscreen", true);
|
||||
setDefault(particles, "zIndex", 1);
|
||||
particles.onContainerResized = particles.onContainerResized?.bind(particles);
|
||||
|
||||
particles[GatherProps] = function (this: GenericParticles) {
|
||||
const { id, fullscreen, zIndex, onContainerResized } = this;
|
||||
const { id, style, classes, onContainerResized, onHotReload } = this;
|
||||
return {
|
||||
id,
|
||||
fullscreen,
|
||||
zIndex,
|
||||
style: unref(style),
|
||||
classes,
|
||||
onContainerResized,
|
||||
onHotReload,
|
||||
onInit
|
||||
};
|
||||
};
|
||||
|
|
@ -99,3 +82,10 @@ export function createParticles<T extends ParticlesOptions>(
|
|||
return particles as unknown as Particles<T>;
|
||||
});
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
upgradeConfig: typeof upgradeConfig;
|
||||
}
|
||||
}
|
||||
window.upgradeConfig = upgradeConfig;
|
||||
|
|
|
|||
Loading…
Reference in a new issue