El siguiente archivo Svelte produce un árbol en el que se puede hacer clic en los elementos.
El problema que tengo es que cuando hago clic en el elemento div, el elemento está enfocado, pero los elementos anteriores no están enfocados.
Solo un div está activo al mismo tiempo.
He intentado varias reescrituras de este código, pero parece que necesito hacer un seguimiento de algún tipo de historial para deshacer el enfoque.
<script lang="ts"> import type { FrontendFile } from '$lib/front'; export let content: FrontendFile; export let history: FrontendFile[]; let text: string; function focusUnfocus() { for (let i=0; i++; i < history.length) { history[i].status.focused = false; } content.status.focused = !content.status.focused; history.push(content); if (content.status.focused) { text = 'font-black'; } else { text = ''; } } </script> <div class="{text}" on:click={focusUnfocus}> {content.name} </div> ... {#each content.children as sub} <svelte:self bind:history bind:content={sub} /> {/each} ...Lo resolvi con lo siguiente
<script lang="ts"> import type { FrontendFile } from '$lib/front'; export let content: FrontendFile; export let lastFocused: FrontendFile; function focusUnfocus() { if (lastFocused) { lastFocused.status.focused = false; } content.status.focused = true; lastFocused = content; } let text: string = ''; $: if (content.status.focused) { text = 'font-black'; } else { text = ''; } </script> <div class=" {text}" on:click={focusUnfocus}> {content.name} </div> {#each content.children as sub} <svelte:self bind:lastFocused bind:content={sub} /> {/each} Cambié al historial de 1 objeto y cambié el enlace en el archivo index.svelte de nivel superior de la siguiente manera.
<script lang="ts"> export let lastFocused; </script> ... {#each filesystems as system} <RenderTree {lastFocused} bind:content={system} {/each} ...