From bcdb9a9c4b11e21ab8803be37101686c9ab9c524 Mon Sep 17 00:00:00 2001 From: Alexander Bocken Date: Fri, 1 May 2026 14:27:21 +0200 Subject: [PATCH] refactor(recipes): split base + cake-form multipliers Cake-form scaling no longer overwrites the base multiplier (pill buttons + custom input). Both factors stay independent and compose as effectiveMultiplier = multiplier * formMultiplier, which feeds ingredient amounts, portions, nested-recipe links, HefeSwapper, and NutritionSummary. Pills reflect the base only; the existing cake-form badge keeps showing the form factor whenever it deviates from 1, so the two contributions stay visually distinct. Drop the formDriven flag, the effect that wrote formMultiplier into multiplier, and the now-redundant oninput=applyFormMultiplier hooks (bind:value already triggers recomputation). resetCakeForm only resets form fields now. --- package.json | 2 +- .../components/recipes/IngredientsPage.svelte | 49 +++++++------------ 2 files changed, 18 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index ba131e2b..663d547a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "homepage", - "version": "1.57.1", + "version": "1.57.2", "private": true, "type": "module", "scripts": { diff --git a/src/lib/components/recipes/IngredientsPage.svelte b/src/lib/components/recipes/IngredientsPage.svelte index 0cae126c..38ec7bdb 100644 --- a/src/lib/components/recipes/IngredientsPage.svelte +++ b/src/lib/components/recipes/IngredientsPage.svelte @@ -180,18 +180,16 @@ const formMultiplier = $derived( hasDefaultForm && defaultFormArea > 0 ? userFormArea / defaultFormArea : 1 ); -// Track whether multiplier is driven by form or manual buttons -let formDriven = $state(false); -let cakeFormExpanded = $state(false); +// Effective multiplier consumed by ingredient/portion calculations. +// Base multiplier (pill buttons / custom input) stays independent of the +// cake-form scaling so the two factors are visually distinct. +const effectiveMultiplier = $derived(multiplier * formMultiplier); -function applyFormMultiplier() { - formDriven = true; -} +let cakeFormExpanded = $state(false); /** @param {string} shape */ function pickShape(shape) { userFormShape = shape; - applyFormMultiplier(); } const isDefaultForm = $derived( @@ -217,19 +215,8 @@ function resetCakeForm() { userFormWidth = data.defaultForm.width || 20; userFormLength = data.defaultForm.length || 30; userFormInnerDiameter = data.defaultForm.innerDiameter || 8; - formDriven = false; - multiplier = 1; - updateUrl(1); } -// Reactively update multiplier when form dimensions change and form is driving -$effect(() => { - if (formDriven) { - multiplier = formMultiplier; - updateUrl(multiplier); - } -}); - /** @param {number} value */ function updateUrl(value) { if (browser) { @@ -298,7 +285,6 @@ function handleMultiplierClick(event, value) { if (browser) { event.preventDefault(); multiplier = value; - formDriven = false; updateUrl(value); } // If no JS, form will submit normally @@ -310,7 +296,6 @@ function handleCustomInput(event) { const value = parseFloat(/** @type {HTMLInputElement} */ (event.target).value); if (!isNaN(value) && value > 0) { multiplier = value; - formDriven = false; updateUrl(value); } } @@ -757,7 +742,7 @@ const nutritionFlatIngredients = $derived.by(() => {
{#if data.portions}

{labels.portions}

- {@html convertFloatsToFractions(multiplyFirstAndSecondNumbers(data.portions, multiplier))} + {@html convertFloatsToFractions(multiplyFirstAndSecondNumbers(data.portions, effectiveMultiplier))} {/if}

{labels.adjustAmount}

@@ -799,7 +784,7 @@ const nutritionFlatIngredients = $derived.by(() => { {cakeSummaryText} - {#if formDriven && Math.abs(formMultiplier - 1) > 0.005} + {#if Math.abs(formMultiplier - 1) > 0.005} {formMultiplier.toFixed(2)}× {/if} @@ -860,7 +845,7 @@ const nutritionFlatIngredients = $derived.by(() => { @@ -868,14 +853,14 @@ const nutritionFlatIngredients = $derived.by(() => { @@ -883,14 +868,14 @@ const nutritionFlatIngredients = $derived.by(() => { @@ -911,7 +896,7 @@ const nutritionFlatIngredients = $derived.by(() => { {#each flattenedIngredients as list, listIndex} {#if list.name} {#if list.isReference} -

{@html list.name}

+

{@html list.name}

{:else}

{@html list.name}

{/if} @@ -919,12 +904,12 @@ const nutritionFlatIngredients = $derived.by(() => { {#if list.list}
{#each list.list as item, ingredientIndex} -
{@html adjust_amount(item.amount, multiplier)} {item.unit}
+
{@html adjust_amount(item.amount, effectiveMultiplier)} {item.unit}
- {@html item.name.replace("{{multiplier}}", isNaN(parseFloat(item.amount)) ? multiplier : multiplier * parseFloat(item.amount))} + {@html item.name.replace("{{multiplier}}", isNaN(parseFloat(item.amount)) ? effectiveMultiplier : effectiveMultiplier * parseFloat(item.amount))} {#if item.name.toLowerCase() === "frischhefe" || item.name.toLowerCase() === "trockenhefe" || item.name.toLowerCase() === "fresh yeast" || item.name.toLowerCase() === "dry yeast"} {@const yeastId = yeastIds[`${listIndex}-${ingredientIndex}`] ?? 0} - + {/if}
{/each} @@ -937,7 +922,7 @@ const nutritionFlatIngredients = $derived.by(() => { nutritionMappings={data.nutritionMappings} sectionNames={nutritionSectionNames} referencedNutrition={data.referencedNutrition || []} - {multiplier} + multiplier={effectiveMultiplier} portions={data.portions} isEnglish={isEnglish} >