A API EyeDropper oferece um mecanismo para criar uma ferramenta de conta-gotas que permite que os usuários usem amostras de cores nas próprias telas, inclusive fora da janela do navegador. Saiba como o editor de modelos 3D do Blockbench usa essa API na base de código.
Introdução
Este artigo também está disponível na forma de vídeo.
O Blockbench é um editor de modelos moderno e sem custo financeiro para modelos de baixa polilinha com texturas de pixel art. Se você já jogou Minecraft, provavelmente viu recursos criados com o Blockbench, por exemplo, a cabra, que foi adicionado ao Minecraft como parte da Atualização de Cavernas e Cliffs, Parte 1. O código do Blockbench licenciado da GPL versão 3 é de código aberto no GitHub (link em inglês).
Para testar o Blockbench, inicie o app navegando até web.blockbench.net. Como um PWA, você pode instalá-lo na sua área de trabalho e iniciá-lo em uma janela independente. Se você não tem experiência com modelagem 3D, comece com um dos muitos exemplos de arquivo .bbmodel de código aberto que podem ser encontrados no código de pesquisa do GitHub. Por exemplo, teste o modelo de treinamento que você pode conferir na captura de tela a seguir.
A API EyeDropper
Entre muitos outros recursos, o Blockbench oferece um recurso de pintura. Assim, se você sempre quis marcar um trem, agora é possível. Não faça isso no mundo real. Você pode ver que, para minha marcação, eu usei um laranja brilhante.
Na verdade, esse é um laranja que extraí diretamente do plano de fundo do macOS Ventura pela API EyeDropper. Como você pode ver na captura de tela a seguir, o conta-gotas (o círculo laranja à esquerda da janela do app) pode chegar fora do aplicativo diretamente na minha área de trabalho ou em qualquer outro aplicativo que eu tenha aberto.
Como o Blockbench é de código aberto, é possível saber como os desenvolvedores implementaram a API. O código em questão está em JannisX11/blockbench/blob/master/js/texturing/color.js. O Blockbench também está disponível como um app Electron.js. Como mostrado no comentário, ele tem um processamento de caso especial para um problema no Electron, em que o seletor de cores não pode escolher cores fora da janela. Com a API Web, que pode ser vista na parte destacada do snippet de código, isso não é um problema. O uso da API é simples. Crie uma nova instância de EyeDropper e chame o método open() dela. Esse método é resolvido com uma string sRGBHex representando a cor selecionada em formato sRGB hexadecimal.
new Action("pick_screen_color", {
icon: "colorize",
category: "color",
condition: () => typeof EyeDropper == "function",
click: async function () {
if (Blockbench.platform == "win32") {
// workaround for https://github.com/electron/electron/issues/27980
ipcRenderer.send("request-color-picker", {
sync: settings.sync_color.value,
});
} else if (typeof EyeDropper == "function") {
let dropper = new EyeDropper();
let { sRGBHex } = await dropper.open();
ColorPanel.set(sRGBHex);
}
},
});
Conclusões
Os seletores de cores são um software de criatividade pequeno, mas importante, como o Blockbench. Na maioria das vezes, a cor desejada não faz parte da janela do app, e sim em algum lugar fora, talvez até mesmo em uma tela diferente. Um seletor de cores que não permita escolher cores nesses casos pode ser quase inútil. A API EyeDropper foi criada exatamente para casos de uso como esse e tem funcionado muito bem para o Blockbench desde que foi implementada, em novembro de 2021. Se você brinca com o Blockbench, aproveite para escolher as cores!