avatar-human-body v0.2.7
AVATAR HUMAN BODY
Avatar Web Component
installazione
Installare ultima versione del componente con il comando:
npm install avatar-human-body@latest --save
Dopo una corretta installazione viene copiato il file avatar.json nella cartella public/assets del progetto react, assicurarsi che il file esista.
importazione in react
Nel file principale index.js (o index.tsx) del progetto importare le definizioni del componente e inizilizzarlo
//esempio basato sul progetto starter creato con create-react-app (cra)
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import * as serviceWorker from './serviceWorker'
import { defineCustomElements as humanBody } from 'avatar-human-body/dist/loader' // <== aggiungere questo import
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.unregister();
humanBody(window) // <== eseguire questo metodo
Utilizzo del componente in react
ora è possibile importare il componente in tutto il progetto utilizzando il tag
<avatar-component />
Quando il componente è stato caricato, viene aggiunto una proprietà all'oggeto globale window è quindi possibile modificare tutte le proprietà , eseguire i metodi e mettersi in ascolto degli eventi, direttamente utilizzando tale oggetto globale
//modificare proprietà
window.AVATAR.parts="testa,collo";
//eseguire metodi
window.AVATAR.toggleLoading(true);
//o direttamente senza scrivere window
AVATAR.toggleLoading(true);
AVATAR.resetCamera()
//intercettare eventi
AVATAR.addEventListener('ready', function(event){
console.log("il componente è pronto")
})
AVATAR.addEventListener('partSelected', function(event){
console.log("è stata cliccata la parte", event.detail)
})
//etc..
tuttavia in ottica react è possiible anche utilizzare le props per settare le proprietà e il concetto di Ref per invocare metodi o mettersi in ascolto degli eventi
// sono state riportate solo le porzioni di codice interessanti
import React from 'react'
//.... altro codice..
function App(){
//inizializzo un ref
const AVATAR = React.useRef(null);
//creo un metodo di callback per l'evento
const onPartSelected = event => {
console.log("è stata cliccata la parte", event.detail)
}
//nuovo metodo al posto del vecchio componentDidMount
React.useEffect(() => {
//appena il mio componente react è pronto, mi metto in ascolto degli eventi
//IMPORTANTE nei React.ref la proprietà current contiene il componente html
AVATAR.current.addEventListener('partSelected', onPartSelected)
AVATAR.current.addEventListener('ready', avatarReady)
return () => {
//metodo che viene invoca quando il mio componente viene distrutto
AVATAR.current.removeEventListener('ready', avatarReady)
AVATAR.current.removeEventListener('partSelected', onPartSelected)
}
}, [])
//altro codice..
}
Proprietà del componente
Attribute | Description | Type | Default |
---|---|---|---|
loading | mostra/nasconde il loading | boolean | true |
model | il percorso del file avatar.json | any | './assets/avatar.json' |
part-color | il colore delle parti del corpo quando accese, accetta qualsiasi tipo di formato colore es: label-color="red" | label-color="#ff00ff" | label-color="rgba(255,255,255,.8)" | string | |
parts | la lista delle parti del corpo da accendere es: parts="collo,testa" | string | "" |
//esempi per impostare le proprietà iniziali
<avatar-component loading={false} parts="collo, testa" part-color="blue" />
// esmepio simile ma scritto wrapped per maggiore leggibilità
<avatar-component
model="./assets/avatar.json"
loading={false}
parts="collo, testa"
part-color="blue"
/>
Metodi
resetCamera() => Promise<void>
Resetta la camera allo stato iniziale
setParts(parts: string, customColor?: any) => Promise<any>
Imposta le parti del corpo visibili, e un colore opzionale per colorarle.
//esempi
AVATAR.setParts("collo");
AVATAR.setParts("collo, testa, addome", "red");
AVATAR.setParts("collo, addome", "#ff0055");
è possibile impostarle anche impostando la proprietà "parts"
toggleLoading(show?: boolean) => Promise<number | true>
Accende / spegne il loading
//esempi
AVATAR.toggleLoading(true);
AVATAR.toggleLoading(false);
Eventi
Event | Description | Type |
---|---|---|
ready | Emesso quando il componente è completamente caricato e il loading sparisce | CustomEvent<any> |
partSelected | Evento emesso ogni volta che viene cliccata una label di una parte del corpo, restituisce un oggetto evento che ha nella proprietà "detail" il nome della parte cliccata | CustomEvent<string> |
per mettersi in ascolto degli eventi utilizzare il classico addEventListener e nella funzione di callback intercettare l'evento
//esempi
AVATAR.addEventListener('partSelected', function(event){
console.log("è stata cliccata la parte", event.detail)
})