Creiamo una app con Vue ed Electron — Parte 5

La Ruota Cromatica e la Palette: usiamo una struttura dati per creare un CSS dinamico.

Eccoci al nostro quinto appuntamento, nel precedente Articolo abbiamo creato uno Store con Vuex e gestito Mutations e Actions.

Il componente Wheel

Siamo giunti finalmente al cuore dell’applicazione!
Il nostro obiettivo ora è trasformare in codice il design della ruota cromatica.

I problemi da risolvere sono i seguenti:
1. Disegnare una ruota
2. Colorarla affinché si presenti come una ruota cromatica
3. Far girare la ruota in modo che la posizione della nostra freccia sia coerente con il colore scelto
4. Far modificare la luminosità e la saturazione della ruota a seconda dei valori scelti dall’utente

Vediamo in dettaglio il design:

Fatte un po’ di ricerche online — è sempre utile evitare di reinventare la ruota 😉 — sono giunta alla conclusione che il metodo più veloce fosse quello di colorare un container con un gradiente conico e poi “tagliarlo” con una clip path.
Anche in questo caso ho usato Illustrator per creare la SVG.

La ruota è divisa in 6 parti per generare le sfumature necessarie. Partendo sempre dalla rappresentazione in HSL, abbiamo agli estremi il Rosso che ha Degree 0 e poi uno step ogni 60 gradi.

Di seguito un test in HTML e CSS

Referenze

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Passiamo allo script

Per generare e manipolare i colori usiamo il mio package Color Palettes Rage.

Questo script ci permetterà non solo di generare le palettes ma anche di manipolare i singoli colori modificando i valori di saturazione, luminosità e tonalità.

Importiamo il package nello Store
store/index.js

In WheelComponent inseriamo le props degree, saturation e brightness.
Queste ci consentiranno di gestire le computed wheel e rotate, che generano rispettivamente la proprietà background e transform rotate.
Questi dati sono passati ai nostri elementi HTML tramite :style.

🤨 Un bug da risolvere

Utilizzando il nostro form ci renderemo conto di aver creato un bug!
Quando uno dei valori esce dal range consentito, lo inviamo comunque al nostro Store. Questo ci crea un problema con la renderizzazione della Wheel.

Modifichiamo il componente Wheel in modo da fornire un dato di fallback.

Inseriamo la Wheel nella Home

Cosa succede a questo punto?
Se aggiorniamo i dati del form, si aggiorneranno anche i colori e la posizione della ruota e dei bottoni.

Router: passiamo alla pagina Palettes

Concentriamoci su come passare dalla generazione del colore alla pagina in cui si accede alle palettes.

Nel file delle nostre rotte abbiamo:

Vogliamo poter passare quindi alla pagina delle Palettes cliccando su Generate Color.

Useremo il metodo push di Router all’interno del nostro metodo submit().

In questo modo una volta effettuato il dispatch della nostra action, si passerà alla nuova rotta.

Come test può andare, ma stiamo cercando di creare il form dinamicamente tramite l’utilizzo di un object, quindi dobbiamo inserire la rotta di destinazione al click direttamente nel nostro Store. Così come dobbiamo rendere più flessibile la action che riguarda l’update dei dati.

Refactoring!

store/index.js

Abbiamo spostato tutti gli input di inserimento in data e ad ogni input associato una action e mutation di update.
Il submit sarà a parte e avrà una la rotta associata.
A questo punto dobbiamo cambiare la Mutation updateValue.

Torniamo nel nostro FormComponent

Modifichiamo il template separando i data e il submit in due InputComponent.

In JS invece modifichiamo la computed form e aggiungiamo submitButton
I methods anche sono modificati per poter utilizzare le action e le mutation associate a quel data.

Adesso se modifichiamo i dati negli input e clicchiamo su Generate Color i nostri dati saranno salvati nello Store e poi saremo portati sulla pagina Palettes.
Se torniamo alla Home le modifiche persisteranno in quanto preleviamo i dati dallo Store.

Ovviamente se facciamo refresh i dati saranno cancellati.
Per conservare nel nostro browser i dati potremmo utilizzare Window.localStorage.

PaletteComponent

Passiamo componente della Palette Singola che useremo come bottone per passare alla pagina Palette.
Il componente è formato da una ruota del colore scelto dall’utente e un pallino per ogni colore presente nella palette.

Prendendo ad esempio l’immagine seguente, nella palette Triadica abbiamo 3 colori, quello di base in questo caso è a 0 gradi, poi avremo altri due colori a +120gradi e -120gradi da quella posizione.

Il componente sarà gestito sempre tramite il nostro Store.

Per ogni Schema inseriamo un id e un name e un array colors nel quale salviamo la posizione in gradi dei singoli pallini.
Questa stringa sarà usata per creare la classe associata all’elemento.

Il template

SASS

Abbiamo un container principale .palette all’interno del quale troviamo il cerchio colorato .palette__content e un secondo cerchio bianco :after posizionato al suo centro.
L’altra parte interessante è quella della gestione dei pallini abbiamo un terzo container posizionato assolutamente rispetto al .pallette la lista .palette__number-color ogni li è un container della stessa dimensione ruotato con un transform rotate corrispondente ai gradi che abbiamo nel nostro array di dati.

Script

Con una computed gestiamo il colore di background.

Infine aggiungiamo al click sulla palette l’invio alla rotta Palette passando come parametro l’id.

Siamo ormai a buon punto!

Nel prossimo articolo faremo un altro po’ di refactoring per la validazione dei dati e passeremo alla visualizzazione della palette selezionata.

Abbiamo ancora da gestire
1. l’inserimento dei dati aggiuntivi per generare alcune delle palette
2. la visualizzazione della palette come ruota dei colori, in questo caso useremo ChartJs
3. la visualizzazione come griglia di quadrati.
4. esportazione dei dati in formato JSON e SCSS.