@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/editor/tree/find.ts

@@ -0,0 +1,500 @@
+import { peek, reactive, read, write, type Signal } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+import icon from '~/components/icon';
+import fuzzy from '~/shared/fuzzy';
+import down from '@esportsplus/ui/svg/arrow-down.svg';
+import up from '@esportsplus/ui/svg/arrow-up.svg';
+import cross from '@esportsplus/ui/svg/close.svg';
+import sliders from '@esportsplus/ui/svg/sliders.svg';
+import Selection from './selection';
+import type { FileTreeElement as Element } from '.';
+
+
+type Hit = {
+    // The folder's children that match or hold a match, in the tree's order.
+    children: Hit[];
+    element: Element;
+    match: boolean;
+};
+
+// What the finder asks of its tree.
+type Host = {
+    compare?: (a: Element, b: Element) => number;
+    cursor: () => string | null;
+    elements: Element[];
+    folder: (element: Element) => boolean;
+    // Moves the cursor onto the row, opening the folders down to it and scrolling it into view.
+    go: (id: string) => void;
+    // Hidden for good, like an excluded path: never searched, and neither is anything inside it.
+    gone: (id: string) => boolean;
+    // Whether folders given without children fetch them, so they hold what the search can't see yet.
+    lazy: boolean;
+    // Hands focus back to the tree.
+    leave: VoidFunction;
+    // The query applied changed from within the tree rather than through 'set'.
+    searched?: (query: string) => void;
+    // Whether the row is on screen now, with every folder above it open.
+    shows: (id: string) => boolean;
+    // Filter mode's view: the folders down to the matches, in tree order, to open; null ends it. The rows are on
+    // screen by the time it returns, so a match can be scrolled to straight after.
+    sift: (folders: string[] | null) => void;
+};
+
+type Mode = 'filter' | 'highlight';
+
+type Result = {
+    // The folders holding a match, each before those inside it.
+    folders: string[];
+    matches: string[];
+    // Folders whose children haven't loaded, so weren't searched.
+    unloaded: number;
+};
+
+
+// Long enough that a burst of keys searches the tree once, short enough to follow typing.
+const SETTLE = 80;
+
+
+function collect(elements: Element[], query: string, host: Host, result: Result) {
+    let out: Hit[] = [];
+
+    for (let i = 0, n = elements.length; i < n; i++) {
+        let element = elements[i];
+
+        if (host.gone(element.id)) {
+            continue;
+        }
+
+        let children: Hit[] = [];
+
+        // A locked folder never opens, so nothing inside it could be shown.
+        if (host.folder(element) && element.selectable !== false) {
+            if (element.children) {
+                children = collect(element.children, query, host, result);
+            }
+            else if (host.lazy) {
+                result.unloaded++;
+            }
+        }
+
+        let match = fuzzy(query, element.name) !== null;
+
+        if (match || children.length) {
+            out.push({ children, element, match });
+        }
+    }
+
+    // Only what matches is put in order, not whole folders, so a narrow search of a large tree stays cheap.
+    if (host.compare) {
+        let compare = host.compare;
+
+        out.sort((a, b) => compare(a.element, b.element));
+    }
+
+    return out;
+}
+
+function flatten(hits: Hit[], result: Result) {
+    for (let i = 0, n = hits.length; i < n; i++) {
+        let hit = hits[i];
+
+        if (hit.match) {
+            result.matches.push(hit.element.id);
+        }
+
+        if (hit.children.length) {
+            result.folders.push(hit.element.id);
+            flatten(hit.children, result);
+        }
+    }
+
+    return result;
+}
+
+// Every match in the tree, closed and never built folders included, in the order the tree shows them.
+function search(query: string, host: Host) {
+    let result: Result = { folders: [], matches: [], unloaded: 0 };
+
+    return flatten(collect(host.elements, query, host, result), result);
+}
+
+
+// The find bar laid over the tree, as VS Code's explorer has: 'highlight' marks the matches among every row,
+// 'filter' leaves only them and the folders they sit in.
+class Finder {
+    private host: Host;
+    private input: HTMLInputElement | undefined;
+    // Filter mode's rows: the matches and the folders above them; null while nothing is filtered.
+    private keep: Set<string> | null = null;
+    private matched = new Selection();
+    private matches: string[] = [];
+    private query: Signal<string>;
+    // Opened by a key rather than by typing, so what the input held last is selected, to type over or keep.
+    private selecting = false;
+    // Whether the last search filtered, so the next one ends it when it no longer does.
+    private sifting = false;
+    private timer: ReturnType<typeof setTimeout> | undefined;
+
+    readonly state: {
+        count: number;
+        // The match the cursor was last moved to; empty when it's on none.
+        current: string;
+        // The query is a search field's outside the tree, so no find bar is drawn for it.
+        external: boolean;
+        index: number;
+        mode: Mode;
+        open: boolean;
+        text: string;
+        unloaded: number;
+    };
+
+
+    // 'query' is the search applied to the rows: empty while the bar is closed, and behind the input by a beat.
+    constructor(mode: Mode, query: Signal<string>, host: Host) {
+        this.host = host;
+        this.query = query;
+        this.state = reactive({ count: 0, current: '', external: false, index: -1, mode, open: false, text: '', unloaded: 0 });
+    }
+
+
+    // The match to stay on: the current one while it still matches, else the cursor's row if it's one. Failing both,
+    // a search typed moves to the first match shown, and leaves the cursor be when none is, so typing never opens
+    // folders; Enter and the arrows go on from there. Returns the match to move the cursor to, if any.
+    private land(jump: boolean) {
+        let matches = this.matches,
+            state = this.state,
+            index = matches.indexOf(state.current);
+
+        if (index === -1) {
+            index = matches.indexOf(this.host.cursor() ?? '');
+        }
+
+        if (index === -1 && jump) {
+            index = matches.findIndex(this.host.shows);
+        }
+
+        state.current = matches[index] ?? '';
+        state.index = index;
+
+        return jump ? state.current : '';
+    }
+
+    // 'quiet' when the query came from outside, which needn't hear it back.
+    private run(jump: boolean, quiet = false) {
+        clearTimeout(this.timer);
+
+        let state = this.state,
+            text = state.open ? state.text : '',
+            result = text ? search(text, this.host) : { folders: [], matches: [], unloaded: 0 },
+            filter = text !== '' && state.mode === 'filter',
+            sifted = filter || this.sifting;
+
+        if (!quiet && text !== peek(this.query)) {
+            this.host.searched?.(text);
+        }
+
+        this.keep = filter ? new Set([...result.matches, ...result.folders]) : null;
+        this.matched.replace(result.matches);
+        this.matches = result.matches;
+        state.count = result.matches.length;
+        state.unloaded = result.unloaded;
+        write(this.query, text);
+
+        if (sifted) {
+            this.sifting = filter;
+            this.host.sift(filter ? result.folders : null);
+        }
+
+        // Once filtering ends, the row the reader is on is brought back into view among the rows returning.
+        let target = this.land(jump) || (sifted && !filter ? this.host.cursor() : '');
+
+        if (target) {
+            this.host.go(target);
+        }
+    }
+
+
+    close(refocus: boolean) {
+        let state = this.state;
+
+        if (!state.open) {
+            return;
+        }
+
+        // An outside field's query is cleared rather than kept for the find bar to reopen with.
+        if (state.external) {
+            state.text = '';
+        }
+
+        state.open = false;
+        this.run(false);
+
+        if (refocus) {
+            this.host.leave();
+        }
+    }
+
+    dispose() {
+        clearTimeout(this.timer);
+    }
+
+    // Tracked: whether rows are being filtered out, so an empty tree is taken for no matches rather than no files.
+    filtering() {
+        return this.state.mode === 'filter' && read(this.query) !== '';
+    }
+
+    hides(id: string) {
+        return this.keep !== null && !this.keep.has(id);
+    }
+
+    // Keys pressed in the tree; true when the finder took the key.
+    key(event: KeyboardEvent) {
+        let state = this.state;
+
+        // By code, since macOS turns Option+F into a symbol.
+        if (event.altKey && (event.ctrlKey || event.metaKey) && event.code === 'KeyF') {
+            this.open();
+            return true;
+        }
+
+        if (!state.open) {
+            return false;
+        }
+
+        if (event.key === 'Escape') {
+            this.close(false);
+            return true;
+        }
+
+        if (event.key === 'F3' && state.count) {
+            this.step(event.shiftKey ? -1 : 1);
+            return true;
+        }
+
+        // Letters typed in the tree join the search, as those typed before its input has mounted do; a space still
+        // opens the row.
+        if (event.key.length === 1 && event.key !== ' ' && !event.altKey && !event.ctrlKey && !event.metaKey) {
+            this.type(event.key);
+            return true;
+        }
+
+        return false;
+    }
+
+    // Tracked, for a row's template.
+    mark(id: string) {
+        return this.matched.read(id) && (this.state.current === id ? 'current' : 'true');
+    }
+
+    // Opens the bar with 'text', or with what it last held, selected, and searches straight away.
+    open(text?: string) {
+        let state = this.state;
+
+        state.external = false;
+
+        if (text !== undefined) {
+            state.text = text;
+        }
+
+        this.selecting = text === undefined;
+
+        if (state.open) {
+            if (this.input) {
+                this.input.value = state.text;
+                this.input.focus();
+
+                if (this.selecting) {
+                    this.input.select();
+                }
+            }
+        }
+        else {
+            state.open = true;
+        }
+
+        this.run(true);
+    }
+
+    // The tree changed under the search: a file added may match, one renamed may no longer.
+    refresh() {
+        if (!peek(this.query)) {
+            return;
+        }
+
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => this.run(false), SETTLE);
+    }
+
+    render(tree: string) {
+        let state = this.state;
+
+        return html`
+            ${() => state.open && !state.external && html`
+                <div class='file-tree-find' role='search'>
+                    <div class='file-tree-find-bar'>
+                        <input
+                            aria-controls='${tree}'
+                            aria-label='Find'
+                            autocomplete='off'
+                            class='file-tree-find-input'
+                            placeholder='Find'
+                            spellcheck='false'
+                            type='text'
+                            ${{
+                                'aria-invalid': () => read(this.query) !== '' && !state.count ? 'true' : 'false',
+                                onconnect: (element: HTMLInputElement) => {
+                                    this.input = element;
+                                    element.value = state.text;
+                                    element.focus({ preventScroll: true });
+
+                                    if (this.selecting) {
+                                        element.select();
+                                    }
+                                },
+                                ondisconnect: () => {
+                                    this.input = undefined;
+                                },
+                                oninput: (event: Event) => {
+                                    state.text = (event.currentTarget as HTMLInputElement).value;
+                                    clearTimeout(this.timer);
+                                    this.timer = setTimeout(() => this.run(true), SETTLE);
+                                },
+                                onkeydown: (event: KeyboardEvent) => {
+                                    if (event.isComposing) {
+                                        return;
+                                    }
+
+                                    switch (event.key) {
+                                        case 'ArrowDown':
+                                            this.step(1);
+                                            break;
+                                        case 'ArrowUp':
+                                            this.step(-1);
+                                            break;
+                                        case 'Enter':
+                                        case 'F3':
+                                            this.step(event.shiftKey ? -1 : 1);
+                                            break;
+                                        case 'Escape':
+                                            this.close(true);
+                                            break;
+                                        default:
+                                            if (!this.key(event)) {
+                                                return;
+                                            }
+                                    }
+
+                                    event.preventDefault();
+                                }
+                            }}
+                        />
+                        <span aria-live='polite' class='file-tree-find-count'>
+                            ${() => {
+                                let count = state.count;
+
+                                if (!read(this.query)) {
+                                    return '';
+                                }
+
+                                if (!count) {
+                                    return 'No results';
+                                }
+
+                                return state.index === -1 ? `${count} ${count === 1 ? 'result' : 'results'}` : `${state.index + 1} of ${count}`;
+                            }}
+                        </span>
+                        <button
+                            aria-label='Previous match'
+                            class='file-tree-find-button'
+                            onclick='${() => this.step(-1)}'
+                            title='Previous match (Shift+Enter)'
+                            type='button'
+                            ${{ disabled: () => !state.count && 'true' }}
+                        >
+                            ${icon({ 'aria-hidden': 'true', class: 'file-tree-find-icon' }, up)}
+                        </button>
+                        <button
+                            aria-label='Next match'
+                            class='file-tree-find-button'
+                            onclick='${() => this.step(1)}'
+                            title='Next match (Enter)'
+                            type='button'
+                            ${{ disabled: () => !state.count && 'true' }}
+                        >
+                            ${icon({ 'aria-hidden': 'true', class: 'file-tree-find-icon' }, down)}
+                        </button>
+                        <button
+                            aria-label='Filter'
+                            class='file-tree-find-button'
+                            onclick='${() => this.toggle()}'
+                            title='Show only matches'
+                            type='button'
+                            ${{ 'aria-pressed': () => state.mode === 'filter' ? 'true' : 'false' }}
+                        >
+                            ${icon({ 'aria-hidden': 'true', class: 'file-tree-find-icon' }, sliders)}
+                        </button>
+                        <button
+                            aria-label='Close'
+                            class='file-tree-find-button'
+                            onclick='${() => this.close(true)}'
+                            title='Close (Escape)'
+                            type='button'
+                        >
+                            ${icon({ 'aria-hidden': 'true', class: 'file-tree-find-icon' }, cross)}
+                        </button>
+                    </div>
+                    ${() => state.unloaded > 0 && html`
+                        <p class='file-tree-find-note'>Unloaded folders not searched</p>
+                    `}
+                </div>
+            `}
+        `;
+    }
+
+    // A search field outside the tree applies the same search without drawing or focusing the find bar.
+    set(text: string, quiet = true) {
+        let state = this.state;
+
+        state.external = true;
+        state.open = text.trim() !== '';
+        state.text = text;
+        this.run(false, quiet);
+    }
+
+    // Wraps round, as VS Code's does.
+    step(by: 1 | -1) {
+        let n = this.matches.length,
+            state = this.state;
+
+        if (!n) {
+            return;
+        }
+
+        state.index = state.index === -1 ? (by === 1 ? 0 : n - 1) : (state.index + by + n) % n;
+        state.current = this.matches[state.index];
+        this.host.go(state.current);
+    }
+
+    toggle() {
+        this.state.mode = this.state.mode === 'filter' ? 'highlight' : 'filter';
+        this.run(true);
+    }
+
+    // A letter typed in the tree, when typing finds: it starts a search, or adds to the one open; in the outside field
+    // once one searches, until the find bar is opened.
+    type(character: string) {
+        let state = this.state,
+            text = state.open ? state.text + character : character;
+
+        if (state.external) {
+            this.set(text, false);
+        }
+        else {
+            this.open(text);
+        }
+    }
+}
+
+
+export default Finder;
+export type { Mode };

package/src/components/editor/tree/glob.ts

@@ -0,0 +1,76 @@
+const REGEXP_CHARACTERS = /[$()*+.?[\\\]^{|}]/g;
+
+
+function escape(text: string) {
+    return text.replace(REGEXP_CHARACTERS, '\\$&');
+}
+
+// One pattern as an expression: '*' and '?' stay within a path segment, '**' as a whole segment spans any number of
+// them, '{a,b}' matches either side.
+function source(pattern: string) {
+    let depth = 0,
+        out = '';
+
+    for (let i = 0, n = pattern.length; i < n; i++) {
+        let c = pattern[i];
+
+        if (c === '*') {
+            if (pattern[i + 1] !== '*') {
+                out += '[^/]*';
+                continue;
+            }
+
+            let start = i === 0 || pattern[i - 1] === '/';
+
+            i++;
+
+            if (start && i + 1 === n) {
+                out += '.*';
+            }
+            else if (start && pattern[i + 1] === '/') {
+                out += '(?:.*/)?';
+                i++;
+            }
+            else {
+                out += '[^/]*';
+            }
+        }
+        else if (c === '/' && pattern.slice(i) === '/**') {
+            // The folder itself as well as what's inside, so excluding 'dist/**' leaves no empty folder behind.
+            out += '(?:/.*)?';
+            break;
+        }
+        else if (c === '?') {
+            out += '[^/]';
+        }
+        else if (c === '{') {
+            depth++;
+            out += '(?:';
+        }
+        else if (c === '}' && depth) {
+            depth--;
+            out += ')';
+        }
+        else if (c === ',' && depth) {
+            out += '|';
+        }
+        else {
+            out += escape(c);
+        }
+    }
+
+    // An unclosed '{' leaves no alternatives to read, so the pattern is taken as a plain name.
+    return depth ? escape(pattern) : out;
+}
+
+
+// A test for paths like 'src/index.ts', true when any pattern matches the whole path; null when there are none.
+export default (patterns: string[]) => {
+    if (!patterns.length) {
+        return null;
+    }
+
+    let expression = new RegExp(`^(?:${patterns.map(source).join('|')})$`);
+
+    return (path: string) => expression.test(path);
+};

package/src/components/editor/tree/glyph.ts

@@ -0,0 +1,49 @@
+import icon from '~/components/icon';
+import { resolver, type Options } from './icons';
+import { FILES, FOLDERS } from './sprites';
+
+
+type Element = Parameters<ReturnType<typeof resolver>>[0];
+
+
+// One sprite per row, as every other icon in the library is drawn; the color is the modifier's, so a monochrome tree
+// leaves it to the row.
+function renderer(options: Options = {}) {
+    let colored = options.colored !== false,
+        remap = options.remap ?? {},
+        resolve = resolver(options);
+
+    return (element: Element, open = false) => {
+        let { custom, name } = resolve(element),
+            color = name.startsWith('folder') ? 'folder' : name,
+            sprite = name;
+
+        if (!custom) {
+            if (name === 'file') {
+                sprite = remap.file ?? FILES.file;
+            }
+            else if (name === 'folder') {
+                sprite = (open ? remap['folder-open'] : remap.folder) ?? FOLDERS.folder[open ? 1 : 0];
+            }
+            else if (Object.hasOwn(FOLDERS, name)) {
+                sprite = FOLDERS[name as keyof typeof FOLDERS][open ? 1 : 0];
+            }
+            else {
+                sprite = FILES[name as keyof typeof FILES];
+            }
+        }
+
+        return icon({
+            'aria-hidden': 'true',
+            class: colored && !custom ? `file-tree-icon file-tree-icon--${color}` : 'file-tree-icon',
+            'data-file-tree-icon': name
+        }, sprite);
+    };
+}
+
+
+const glyph = renderer();
+
+
+export default glyph;
+export { renderer };