tridactyl/src/completions.ts

/*

Have an array of all completion sources. Completion sources display nothing if the filter doesn't match for them.

On each input event, call updateCompletions on the array. That will mutate the array and update the display as required.

How to handle cached e.g. buffer information going out of date?

Concrete completion classes have been moved to src/completions/.

*/

import * as Fuse from "fuse.js"
import { enumerate } from "@src/lib/itertools"
import { toNumber } from "@src/lib/convert"
import * as aliases from "@src/lib/aliases"

export const DEFAULT_FAVICON = browser.runtime.getURL(
    "static/defaultFavicon.svg",
)

// {{{ INTERFACES

type OptionState = "focused" | "hidden" | "normal"

export abstract class CompletionOption {
    /** What to fill into cmdline */
    value: string
    /** Control presentation of the option */
    state: OptionState
}

export abstract class CompletionSource {
    readonly options: CompletionOption[]
    node: HTMLElement
    public completion: string
    protected prefixes: string[] = []
    protected lastFocused: CompletionOption
    private _state: OptionState
    private _prevState: OptionState

    constructor(prefixes) {
        const commands = aliases.getCmdAliasMapping()

        // Now, for each prefix given as argument, add it to the completionsource's prefix list and also add any alias it has
        prefixes
            .map(p => p.trim())
            .forEach(p => {
                this.prefixes.push(p)
                if (commands[p])
                    this.prefixes = this.prefixes.concat(commands[p])
            })

        // Not sure this is necessary but every completion source has it
        this.prefixes = this.prefixes.map(p => p + " ")
    }

    /** Update [[node]] to display completions relevant to exstr */
    public abstract filter(exstr: string): Promise<void>

    /** Control presentation of Source */
    set state(newstate: OptionState) {
        switch (newstate) {
            case "normal":
                this.node.classList.remove("hidden")
                this.completion = undefined
                break
            case "hidden":
                this.node.classList.add("hidden")
                break
        }
        this._prevState = this._state
        this._state = newstate
    }

    get state() {
        return this._state
    }

    shouldRefresh() {
        // A completion source should be refreshed if it is not hidden or if it just became hidden
        return this._state !== "hidden" || this.state !== this._prevState
    }

    abstract next(inc?: number): boolean

    prev(inc = 1): boolean {
        return this.next(-1 * inc)
    }

    deselect() {
        this.completion = undefined
        if (this.lastFocused !== undefined) this.lastFocused.state = "normal"
    }
}

// Default classes

export abstract class CompletionOptionHTML extends CompletionOption {
    public html: HTMLElement
    public value

    private _state: OptionState = "hidden"

    /** Control presentation of element */
    set state(newstate: OptionState) {
        // console.log("state from to", this._state, newstate)
        switch (newstate) {
            case "focused":
                this.html.classList.add("focused")
                this.html.classList.remove("hidden")
                const myRect = this.html.getClientRects()[0]
                if (myRect) {
                    const container = document.getElementById("completions")
                    const boxRect = container.getClientRects()[0]
                    if (myRect.bottom > boxRect.bottom)
                        this.html.scrollIntoView()
                    else if (myRect.top < boxRect.top)
                        this.html.scrollIntoView(false)
                }
                break
            case "normal":
                this.html.classList.remove("focused")
                this.html.classList.remove("hidden")
                break
            case "hidden":
                this.html.classList.remove("focused")
                this.html.classList.add("hidden")
                break
        }
        this._state = newstate
    }

    get state() {
        return this._state
    }
}

export interface CompletionOptionFuse extends CompletionOptionHTML {
    // For fuzzy matching
    fuseKeys: any[]
}

export interface ScoredOption {
    index: number
    option: CompletionOptionFuse
    score: number
}

export abstract class CompletionSourceFuse extends CompletionSource {
    public node
    public options: CompletionOptionFuse[]

    fuseOptions: Fuse.FuseOptions<any> = {
        keys: ["fuseKeys"],
        shouldSort: true,
        id: "index",
        includeScore: true,
    }

    // PERF: Could be expensive not to cache Fuse()
    // yeah, it was.
    fuse = undefined

    protected lastExstr: string
    protected sortScoredOptions = false

    protected optionContainer = html`<table class="optionContainer"></table>`

    constructor(prefixes, className: string, title?: string) {
        super(prefixes)
        this.node = html`<div class="${className} hidden">
                <div class="sectionHeader">${title || className}</div>
            </div>`
        this.node.appendChild(this.optionContainer)
        this.state = "hidden"
    }

    /* abstract onUpdate(query: string, prefix: string, options: CompletionOptionFuse[]) */
    abstract onInput(exstr: string)

    // Helpful default implementations

    public async filter(exstr: string) {
        this.lastExstr = exstr
        await this.onInput(exstr)
        return this.updateChain()
    }

    updateChain(exstr = this.lastExstr, options = this.options) {
        if (options === undefined) {
            this.state = "hidden"
            return
        }

        const [prefix, query] = this.splitOnPrefix(exstr)

        // console.log(prefix, query, options)

        // Hide self and stop if prefixes don't match
        if (prefix) {
            // Show self if prefix and currently hidden
            if (this.state === "hidden") {
                this.state = "normal"
            }
        } else {
            this.state = "hidden"
            return
        }

        // Filter by query if query is not empty
        if (query) {
            this.setStateFromScore(this.scoredOptions(query))
            // Else show all options
        } else {
            options.forEach(option => (option.state = "normal"))
        }

        // Call concrete class
        this.updateDisplay()
    }

    select(option: CompletionOption) {
        if (this.lastExstr !== undefined && option !== undefined) {
            const [prefix] = this.splitOnPrefix(this.lastExstr)
            this.completion = prefix + option.value
            option.state = "focused"
            this.lastFocused = option
        } else {
            throw new Error("lastExstr and option must be defined!")
        }
    }

    splitOnPrefix(exstr: string) {
        for (const prefix of this.prefixes) {
            if (exstr.startsWith(prefix)) {
                const query = exstr.replace(prefix, "")
                return [prefix, query]
            }
        }
        return [undefined, undefined]
    }

    /** Rtn sorted array of {option, score} */
    scoredOptions(query: string, options = this.options): ScoredOption[] {
        const searchThis = this.options.map((elem, index) => {
            return { index, fuseKeys: elem.fuseKeys }
        })
        this.fuse = new Fuse(searchThis, this.fuseOptions)
        return this.fuse.search(query).map(result => {
            // console.log(result, result.item, query)
            const index = toNumber(result.item)
            return {
                index,
                option: this.options[index],
                score: result.score as number,
            }
        })
    }

    /** Set option state by score

        For now just displays all scored elements (see threshold in fuse) and
        focus the best match.
    */
    setStateFromScore(scoredOpts: ScoredOption[], autoselect = false) {
        const matches = scoredOpts.map(res => res.index)

        const hidden_options = []
        for (const [index, option] of enumerate(this.options)) {
            if (matches.includes(index)) option.state = "normal"
            else {
                option.state = "hidden"
                hidden_options.push(option)
            }
        }

        // ideally, this would not deselect anything unless it fell off the list of matches
        if (matches.length && autoselect) {
            this.select(this.options[matches[0]])
        } else {
            this.deselect()
        }

        // sort this.options by score
        if (this.sortScoredOptions) {
            const sorted_options = matches.map(index => this.options[index])
            this.options = sorted_options.concat(hidden_options)
        }
    }

    /** Call to replace the current display */
    // TODO: optionContainer.replaceWith and optionContainer.remove don't work.
    // I don't know why, but it means we can't replace the div in one go. Maybe
    // an iframe thing.
    updateDisplay() {
        /* const newContainer = html`<div>` */

        while (this.optionContainer.hasChildNodes()) {
            this.optionContainer.removeChild(this.optionContainer.lastChild)
        }

        for (const option of this.options) {
            /* newContainer.appendChild(option.html) */
            if (option.state !== "hidden")
                this.optionContainer.appendChild(option.html)
        }
        this.next(0)

        /* console.log('updateDisplay', this.optionContainer, newContainer) */

        /* let result1 = this.optionContainer.remove() */
        /* let res2 = this.node.appendChild(newContainer) */
        /* console.log('results', result1, res2) */
    }

    next(inc = 1) {
        if (this.state !== "hidden") {
            const visopts = this.options.filter(o => o.state !== "hidden")
            const currind = visopts.findIndex(o => o.state === "focused")
            this.deselect()
            // visopts.length + 1 because we want an empty completion at the end
            const max = visopts.length + 1
            const opt = visopts[(currind + inc + max) % max]
            if (opt) this.select(opt)
            return true
        } else return false
    }
}

// }}}