Controle de estado em vanilla JS

[matheusbronca]

Oi pessoal, tudo bem? Eu espero que sim!
Estou com uma dúvida referente ao controle de estados de aplicações desenvolvidas com vanilla, desenvolvendo um app de desenho simples onde existe uma toolbar com todas as ferramentas (pincel, lápis, borracha e etc) qual seria a abordagem mais correta? Tipo, para controlar qual das ferramentas está ativa e consequentemente as propriedades de cada ferramenta eu to usando varias variáveis globais e estou sentindo que o código ta ficando uma maçaroca completa, se alguém puder me dar uma luz eu agradeço.

Abração! o/

[ojvribeiro]

Olá, Matheus!

Eu nunca trabalhei com um projeto desse tipo antes, mas eu usaria um objeto literal para armazenar os estados padrões de cada ferramenta. Por exemplo:

let toolState = {
  brush: 'active',
  eraser: 'inactive',
  pencil: 'disabled',
}

Usei string como valor pra poder setar 3 estados diferentes: active, inactive e disabled.

Se quiser ativar uma ferramenta, você vai precisar desativar as outras. Pra isso você faz um loop primeiro setando tudo pra inactive:

Object.keys(toolState).forEach(key => toolState[key] = 'inactive');

Encontrei essa belezinha de uma linha só nessa resposta do StackOverflow. 😍

Aí pode setar um valor pra active assim:

toolState.pencil = 'active';

Você pode, com isso, até criar uma função boladona que muda o estado de uma ferramenta pra active e faz o que tem de fazer depois disso:

function activateTool (toolName) {
  Object.keys(toolState).forEach(key => toolState[key] = 'inactive');

  toolState[toolName] = 'active';

  // O resto do seu código, como aplicar uma classe CSS ao botão da ferramenta, por exemplo...
}

Aí chama ela assim pra ativar a borracha:

activateTool('eraser');

É só uma abordagem que consegui pensar aqui. Podem haver outras melhores.

Espero ter ajudado. 😉

[matheusbronca]

Eu também pensei em algo semelhante a isso, porém eu pensei em utilizar classes. Mas tenho visto que o pessoal do JS não tem curtido muito a sintaxe sugar de classes, e meio que ta caindo em desuso, fico imaginando como poderiamos realizar esse mesmo controle mas utilizando uma abordagem mais funcional (nem sei se é possível).

Agradeço demais a resposta Victor, é de grande valor =D

[kivervinicius]

@matheusbronca Aproveitando o que o @ojvribeiro eu só trocar para o uso de Map https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map devido a você já conhecer os valores, faz mais sentido.

[ninetails]

Como Vanilla é cada um por si, não tem maneira certa pra fazer não... se quiser usar classes, desde que seus testes cubram bem a usabilidade, por que não? A diferença entre ser mais e menos funcional é só como vc vai guardar as informações.

Se quiser algo mais funcional é só ficar mais atento em relação a imutabilidade (e evitar usar os this).

// factoryzinha marota
const createStore = function (initialState = {}) {
  let state = initialState

  return {
    get: () => state,
    update: (newState) => {
      // usando como exemplo uma cópia shallow, mas você pode utilizar algum algoritmo
      // ou algo pronto pra deep copy, atentando em relação a imutabilidade
      state = {
        ...state,
        ...newState
      }
    },
    unset: (key) => {
      const { [key]: _, ...rest } = state
      state = rest
    }
  }
}

const myStore = createStore(/* tua store inicial */)

// e ficar atento a sempre chamar `myStore.get` pra pegar sempre
// a store atualizada, e repassando o `myStore` pra onde precisar.

[schirrel]

Completando as respostas anteriores, você pode tambem usar attributes como forma de visualmente, ou ate mesmo em codigo, qual ferramenta que esta sento usada.
Ficaria seu criterio usar os data-* ou simplismentente direto, como 'tool-active'.
Usando via element.getAttribute() ou element.setAttribute().
Ate mesmo para estilo voce consegue utilizar sem precisar de classe adicional com:

[data-active="true"], [tool-active] {
}

[matheusbronca]

A minha maior preocupação é referente a organização e efiência (re-uso) do código, em C# eu conseguia gerenciar tudo através de classes de maneira que o código escalava facilmente. Sei lá, meter um foreach e sair disparando eventos e adicionando classes me parece errado, parece que o código vai ficando muito confuso a cada linha de código.

[schirrel]

Você poderia fazer uma classe, estilo service, com Observer.
Essa classe seria responsável por ativar a ferramenta, adicionar estilos, e ter uma listagem d observables a serem chamados quando algo mudar. Essa seria singleton.
Em suas outras classes que necessitam de atualização teriam uma resposta da service de menu, vamos assim chamar, toda vez que uma nova ferramenta for ativa.

Sobre o padrão observer https://medium.com/@oieduardorabelo/padr%C3%B5es-em-js-observer-pattern-bff0ecc55d01