lily
/
bgleam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix unnecessary re-renders

This commit is contained in:
Lily Rose 2024-04-26 13:34:14 +10:00
parent 9501213af5
commit 38125e5a3e
1 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@ -141,7 +141,7 @@
<h2>Gleam Background Settings</h2> <h2>Gleam Background Settings</h2>
<p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p> <p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p>
</header> </header>
<form id="settings" oninput="renderPreview()" onchange="generateDownloadUrls()"> <form id="settings" oninput="updatePreview()" onchange="updateSaveHrefs()">
<label for="widthInput">Width</label> <label for="widthInput">Width</label>
<input id="widthRange" name="widthRange" type="range" min="200" max="8192" value="1920" oninput="this.form.widthInput.value = this.value"> <input id="widthRange" name="widthRange" type="range" min="200" max="8192" value="1920" oninput="this.form.widthInput.value = this.value">
<input id="widthInput" name="widthInput" type="number" min="200" max="8192" value="1920" oninput="this.form.widthRange.value = this.value"> <input id="widthInput" name="widthInput" type="number" min="200" max="8192" value="1920" oninput="this.form.widthRange.value = this.value">
@ -387,62 +387,63 @@
const canvas = document.createElement("canvas") const canvas = document.createElement("canvas")
const img = document.createElement("img") const img = document.createElement("img")
const renderPreview = () => { const getFormData = () => {
const width = Number(form.widthInput.value) const formData = new FormData(form)
const height = Number(form.heightInput.value) const width = +formData.get("widthInput")
const logoScale = Number(form.logoScaleInput.value) const height = +formData.get("heightInput")
const logoRotation = Number(form.logoRotationInput.value) const logoScale = +formData.get("logoScaleInput")
const patternScale = Number(form.patternScaleInput.value) const logoRotation = +formData.get("logoRotationInput")
const patternSpacing = Number(form.patternSpacingInput.value) const patternScale = +formData.get("patternScaleInput")
const patternRotation = Number(form.patternRotationInput.value) const patternSpacing = +formData.get("patternSpacingInput")
const patternLucyRotation = Number(form.patternLucyRotationInput.value) const patternRotation = +formData.get("patternRotationInput")
const winkingLucyLEnabled = form.winkingLucyLEnabledInput.checked const patternLucyRotation = +formData.get("patternLucyRotationInput")
const winkingLucyREnabled = form.winkingLucyREnabledInput.checked const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabledInput")
const colorSchemeName = form.colorSchemeInput.value const winkingLucyREnabled = !!formData.get("winkingLucyREnabledInput")
const colorSchemeName = formData.get("colorSchemeInput")
const isCustomColorScheme = colorSchemeName === "custom" const isCustomColorScheme = colorSchemeName === "custom"
if (isCustomColorScheme) colorSchemeInputs.classList.remove("hidden") if (isCustomColorScheme) colorSchemeInputs.classList.remove("hidden")
else colorSchemeInputs.classList.add("hidden") else colorSchemeInputs.classList.add("hidden")
const colorScheme = isCustomColorScheme ? { const colorScheme = isCustomColorScheme ? {
...colorSchemes.light, textPrimary: formData.get("textPrimaryColorInput"),
...Object.fromEntries(Object.entries({ textShadow: formData.get("textShadowColorInput"),
textPrimary: form.textPrimaryColorInput.value, lucy: formData.get("lucyColorInput"),
textShadow: form.textShadowColorInput.value, lucyFace: formData.get("lucyFaceColorInput"),
lucy: form.lucyColorInput.value, lambda: formData.get("lambdaColorInput"),
lucyFace: form.lucyFaceColorInput.value, outline: formData.get("outlineColorInput"),
lambda: form.lambdaColorInput.value, background: formData.get("backgroundColorInput"),
outline: form.outlineColorInput.value, backgroundLucy: formData.get("backgroundLucyColorInput"),
background: form.backgroundColorInput.value,
backgroundLucy: form.backgroundLucyColorInput.value,
}).filter(([_, v]) => v))
} : colorSchemes[colorSchemeName] } : colorSchemes[colorSchemeName]
const vignetteEnabled = vignetteEnabledInput.checked const vignetteEnabled = !!formData.get("vignetteEnabledInput")
if (vignetteEnabled) vignetteInputs.classList.remove("hidden") if (vignetteEnabled) vignetteInputs.classList.remove("hidden")
else vignetteInputs.classList.add("hidden") else vignetteInputs.classList.add("hidden")
const vignetteColor = vignetteEnabled ? form.vignetteColorInput.value : undefined const vignetteColor = vignetteEnabled ? formData.get("vignetteColorInput") : undefined
const vignetteStart = Number(form.vignetteStartInput.value) const vignetteStart = +formData.get("vignetteStartInput")
const vignetteEnd = Number(form.vignetteEndInput.value) const vignetteEnd = +formData.get("vignetteEndInput")
const vignetteBlendMode = form.vignetteBlendModeInput.value const vignetteBlendMode = formData.get("vignetteBlendModeInput")
const svg = createSVG({ width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode })
const props = { width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode } return { width, height, svg }
const svg = createSVG(props)
preview.innerHTML = svg
return { ...props, svg }
} }
renderPreview()
const generateDownloadUrls = () => { let curData = getFormData()
const updatePreview = () => {
curData = getFormData()
preview.innerHTML = curData.svg
}
updatePreview()
const updateSaveHrefs = () => {
savePNGButton.setAttribute("href", "#") savePNGButton.setAttribute("href", "#")
saveSVGButton.setAttribute("href", "#") saveSVGButton.setAttribute("href", "#")
const { width, height, svg } = renderPreview() const svgBlob = new Blob([curData.svg], { type: "image/svg+xml" })
const svgBlob = new Blob([svg], { type: "image/svg+xml" })
const svgUrl = window.URL.createObjectURL(svgBlob) const svgUrl = window.URL.createObjectURL(svgBlob)
saveSVGButton.setAttribute("href", svgUrl) saveSVGButton.setAttribute("href", svgUrl)
img.width = width img.width = curData.width
img.height = height img.height = curData.height
canvas.width = width canvas.width = curData.width
canvas.height = height canvas.height = curData.height
img.onload = () => { img.onload = () => {
canvas.getContext("2d").drawImage(img, 0, 0, width, height) canvas.getContext("2d").drawImage(img, 0, 0, curData.width, curData.height)
canvas.toBlob(pngBlob => { canvas.toBlob(pngBlob => {
const pngUrl = window.URL.createObjectURL(pngBlob) const pngUrl = window.URL.createObjectURL(pngBlob)
savePNGButton.setAttribute("href", pngUrl) savePNGButton.setAttribute("href", pngUrl)
@ -450,7 +451,7 @@
} }
img.src = svgUrl img.src = svgUrl
} }
generateDownloadUrls() updateSaveHrefs()
</script> </script>
</body> </body>
</html> </html>