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)
})