Change all HTMLElement to RedrawableHTML + package updates

This commit is contained in:
Clément Pons
2025-12-10 14:47:38 +01:00
parent 1b0b9ca7f4
commit 4cd478b47a
16 changed files with 561 additions and 423 deletions

View File

@@ -1,5 +1,5 @@
import { Content, type LocalContent } from "./content.util";
import { dom } from "./dom.util";
import { dom, type RedrawableHTML } from "./dom.util";
import { clamp } from "./general.util";
export type Recursive<T> = T & {
@@ -138,14 +138,14 @@ export class Tree<T extends Omit<LocalContent, 'content'>>
}
export class TreeDOM
{
container: HTMLElement;
tree: Tree<Omit<LocalContent & { element?: HTMLElement }, "content">>;
container: RedrawableHTML;
tree: Tree<Omit<LocalContent & { element?: RedrawableHTML }, "content">>;
private filter?: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => boolean | undefined;
private folder: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement;
private leaf: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement;
private folder: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => RedrawableHTML;
private leaf: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => RedrawableHTML;
constructor(folder: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement, leaf: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => HTMLElement, filter?: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => boolean | undefined)
constructor(folder: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => RedrawableHTML, leaf: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => RedrawableHTML, filter?: (item: Recursive<Omit<LocalContent, 'content'>>, depth: number) => boolean | undefined)
{
this.tree = new Tree(Content.tree);
@@ -156,7 +156,7 @@ export class TreeDOM
const elements = this.tree.accumulate(this.render.bind(this));
this.container = dom('div', { class: 'list-none select-none text-light-100 dark:text-dark-100 text-sm ps-2' }, elements);
}
render(item: Recursive<Omit<LocalContent & { element?: HTMLElement }, "content">>, depth: number): HTMLElement | undefined
render(item: Recursive<Omit<LocalContent & { element?: RedrawableHTML }, "content">>, depth: number): RedrawableHTML | undefined
{
if(this.filter && !(this.filter(item, depth) ?? true))
return;
@@ -187,7 +187,7 @@ export class TreeDOM
{
this.container.replaceChildren(...this.tree.flatten.map(e => e.element!));
}
toggle(item?: Omit<LocalContent & { element?: HTMLElement }, 'content'>, state?: boolean)
toggle(item?: Omit<LocalContent & { element?: RedrawableHTML }, 'content'>, state?: boolean)
{
if(item && item.type === 'folder')
{
@@ -202,7 +202,7 @@ export class TreeDOM
});
}
}
opened(item?: Omit<LocalContent & { element?: HTMLElement }, 'content'>): boolean | undefined
opened(item?: Omit<LocalContent & { element?: RedrawableHTML }, 'content'>): boolean | undefined
{
return item ? item.element!.getAttribute('data-state') === 'open' : undefined;
}