Fix unnecessary re-renders
This commit is contained in:
Lily Rose
parent
9501213af5
commit
38125e5a3e
89
index.html
89
index.html
|
|
@ -141,7 +141,7 @@
|
|||
<h2>Gleam Background Settings</h2>
|
||||
<p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p>
|
||||
</header>
|
||||
<form id="settings" oninput="renderPreview()" onchange="generateDownloadUrls()">
|
||||
<form id="settings" oninput="updatePreview()" onchange="updateSaveHrefs()">
|
||||
<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="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 img = document.createElement("img")
|
||||
|
||||
const renderPreview = () => {
|
||||
const width = Number(form.widthInput.value)
|
||||
const height = Number(form.heightInput.value)
|
||||
const logoScale = Number(form.logoScaleInput.value)
|
||||
const logoRotation = Number(form.logoRotationInput.value)
|
||||
const patternScale = Number(form.patternScaleInput.value)
|
||||
const patternSpacing = Number(form.patternSpacingInput.value)
|
||||
const patternRotation = Number(form.patternRotationInput.value)
|
||||
const patternLucyRotation = Number(form.patternLucyRotationInput.value)
|
||||
const winkingLucyLEnabled = form.winkingLucyLEnabledInput.checked
|
||||
const winkingLucyREnabled = form.winkingLucyREnabledInput.checked
|
||||
const colorSchemeName = form.colorSchemeInput.value
|
||||
const getFormData = () => {
|
||||
const formData = new FormData(form)
|
||||
const width = +formData.get("widthInput")
|
||||
const height = +formData.get("heightInput")
|
||||
const logoScale = +formData.get("logoScaleInput")
|
||||
const logoRotation = +formData.get("logoRotationInput")
|
||||
const patternScale = +formData.get("patternScaleInput")
|
||||
const patternSpacing = +formData.get("patternSpacingInput")
|
||||
const patternRotation = +formData.get("patternRotationInput")
|
||||
const patternLucyRotation = +formData.get("patternLucyRotationInput")
|
||||
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabledInput")
|
||||
const winkingLucyREnabled = !!formData.get("winkingLucyREnabledInput")
|
||||
const colorSchemeName = formData.get("colorSchemeInput")
|
||||
const isCustomColorScheme = colorSchemeName === "custom"
|
||||
if (isCustomColorScheme) colorSchemeInputs.classList.remove("hidden")
|
||||
else colorSchemeInputs.classList.add("hidden")
|
||||
const colorScheme = isCustomColorScheme ? {
|
||||
...colorSchemes.light,
|
||||
...Object.fromEntries(Object.entries({
|
||||
textPrimary: form.textPrimaryColorInput.value,
|
||||
textShadow: form.textShadowColorInput.value,
|
||||
lucy: form.lucyColorInput.value,
|
||||
lucyFace: form.lucyFaceColorInput.value,
|
||||
lambda: form.lambdaColorInput.value,
|
||||
outline: form.outlineColorInput.value,
|
||||
background: form.backgroundColorInput.value,
|
||||
backgroundLucy: form.backgroundLucyColorInput.value,
|
||||
}).filter(([_, v]) => v))
|
||||
textPrimary: formData.get("textPrimaryColorInput"),
|
||||
textShadow: formData.get("textShadowColorInput"),
|
||||
lucy: formData.get("lucyColorInput"),
|
||||
lucyFace: formData.get("lucyFaceColorInput"),
|
||||
lambda: formData.get("lambdaColorInput"),
|
||||
outline: formData.get("outlineColorInput"),
|
||||
background: formData.get("backgroundColorInput"),
|
||||
backgroundLucy: formData.get("backgroundLucyColorInput"),
|
||||
} : colorSchemes[colorSchemeName]
|
||||
const vignetteEnabled = vignetteEnabledInput.checked
|
||||
const vignetteEnabled = !!formData.get("vignetteEnabledInput")
|
||||
if (vignetteEnabled) vignetteInputs.classList.remove("hidden")
|
||||
else vignetteInputs.classList.add("hidden")
|
||||
const vignetteColor = vignetteEnabled ? form.vignetteColorInput.value : undefined
|
||||
const vignetteStart = Number(form.vignetteStartInput.value)
|
||||
const vignetteEnd = Number(form.vignetteEndInput.value)
|
||||
const vignetteBlendMode = form.vignetteBlendModeInput.value
|
||||
|
||||
const props = { width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }
|
||||
const svg = createSVG(props)
|
||||
preview.innerHTML = svg
|
||||
return { ...props, svg }
|
||||
const vignetteColor = vignetteEnabled ? formData.get("vignetteColorInput") : undefined
|
||||
const vignetteStart = +formData.get("vignetteStartInput")
|
||||
const vignetteEnd = +formData.get("vignetteEndInput")
|
||||
const vignetteBlendMode = formData.get("vignetteBlendModeInput")
|
||||
const svg = createSVG({ width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode })
|
||||
return { width, height, svg }
|
||||
}
|
||||
renderPreview()
|
||||
|
||||
const generateDownloadUrls = () => {
|
||||
let curData = getFormData()
|
||||
|
||||
const updatePreview = () => {
|
||||
curData = getFormData()
|
||||
preview.innerHTML = curData.svg
|
||||
}
|
||||
updatePreview()
|
||||
|
||||
const updateSaveHrefs = () => {
|
||||
savePNGButton.setAttribute("href", "#")
|
||||
saveSVGButton.setAttribute("href", "#")
|
||||
const { width, height, svg } = renderPreview()
|
||||
const svgBlob = new Blob([svg], { type: "image/svg+xml" })
|
||||
const svgBlob = new Blob([curData.svg], { type: "image/svg+xml" })
|
||||
const svgUrl = window.URL.createObjectURL(svgBlob)
|
||||
saveSVGButton.setAttribute("href", svgUrl)
|
||||
img.width = width
|
||||
img.height = height
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
img.width = curData.width
|
||||
img.height = curData.height
|
||||
canvas.width = curData.width
|
||||
canvas.height = curData.height
|
||||
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 => {
|
||||
const pngUrl = window.URL.createObjectURL(pngBlob)
|
||||
savePNGButton.setAttribute("href", pngUrl)
|
||||
|
|
@ -450,7 +451,7 @@
|
|||
}
|
||||
img.src = svgUrl
|
||||
}
|
||||
generateDownloadUrls()
|
||||
updateSaveHrefs()
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue