querysub 0.2.0

package/src/library-components/ATag.tsx

@@ -0,0 +1,84 @@
+import preact from "preact";
+import { css } from "typesafecss";
+import { URLParam, parseSearchString, encodeSearchString } from "./URLParam";
+import { qreact } from "../4-dom/qreact";
+
+export type URLOverride<T = unknown> = {
+    param: URLParam<T>;
+    value: T;
+};
+
+export type ATagProps = (
+    Omit<preact.JSX.HTMLAttributes<HTMLAnchorElement>, "href">
+    & {
+        values?: URLOverride[];
+        // TODO:
+        /** For example: ["ArrowLeft", "ctrl+z", "shift+toggle"] */
+        hotkeys?: string[];
+
+        /** Instead of turning into a div when there are no values[], stays as a link. */
+        alwaysLink?: boolean;
+
+        /** Only act as a link, not using single page application value setting. This means
+         *      it results in a page load on click.
+         */
+        rawLink?: boolean;
+    }
+);
+
+export class ATag extends qreact.Component<ATagProps> {
+    render() {
+        const { values, children, alwaysLink, ...props } = this.props;
+        if (values?.length === 0 && !alwaysLink) {
+            return <div {...props as any}>{children}</div>;
+        }
+        let isCurrent = values?.every(value => value.param.value === value.value);
+        return (
+            <a
+                tabIndex={0}
+                {...props}
+                className={
+                    (isCurrent ? css.color("hsl(110, 75%, 80%)") : css.color("hsl(210, 100%, 80%)"))
+                    + css.textDecoration("none")
+                        .textDecoration("underline", "hover").outline("3px solid hsl(204, 100%, 50%)", "focus")
+                    + (props.className ?? props.class)
+
+                }
+                onClick={e => {
+                    if (this.props.rawLink) return;
+                    if (e.button !== 0) return;
+                    if (this.props.target !== "_blank") {
+                        e.preventDefault();
+                        for (let value of values || []) {
+                            value.param.value = value.value;
+                        }
+                    }
+                    props.onClick?.(e);
+                }}
+                onMouseOver={e => {
+                    // NOTE: Calculate the href dynamically, to prevent pages with a lot of links that
+                    //  reference frequently changing values from resulting in a huge number of DOM changes
+                    //  every time a value changes.
+                    let urlObj = new URL(document.location.href);
+                    let params = parseSearchString(urlObj.search);
+                    for (let value of values || []) {
+                        params[value.param.urlKey] = value.value;
+                    }
+                    urlObj.search = encodeSearchString(params);
+                    e.currentTarget.href = urlObj.toString();
+                    props.onMouseOver?.(e);
+                }}
+                onKeyDown={e => {
+                    if (e.key === "Enter") {
+                        e.currentTarget.click();
+                    }
+                    props.onKeyDown?.(e);
+                }}
+            >
+                {children}
+            </a>
+        );
+    }
+}
+export const Anchor = ATag;
+export const Link = ATag;

package/src/library-components/Button.tsx

@@ -0,0 +1,344 @@
+import preact from "preact";
+import { isNode, list, nextId } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { qreact } from "../4-dom/qreact";
+
+export type ButtonProps = (
+    preact.JSX.HTMLAttributes<HTMLButtonElement>
+    & {
+        flavor?: "large" | "small" | "tiny" | "noui";
+        square?: boolean;
+        /**
+            For example: ["ArrowLeft", "ctrl+z", "shift+toggle", "global+shift+enter"]
+                "toggle" will trigger the button twice, once on press and once on release.
+                Order matters, and the correct order is "global+ctrl+shift+alt+X"
+        */
+        hotkeys?: string[];
+        /**
+         *  Allows overriding hotkeys with ones of higher priority.
+         *  All hotkeys with the max priority are pressed at once, other keys are NOT pressed.
+         *      - Useful for things like popups, which shouldn't press hotkeys in the main window
+         * */
+        hotkeyPriority?: number;
+        showHotkeys?: boolean | "vertical" | "reverse";
+        hideHotkeys?: boolean;
+        /** Immediately repeats, every animation frame */
+        immediateRepeat?: boolean;
+
+        /** By default the last hotkey handler (which is probably the latest) is called. If this is
+         *      true we also call this hotkey handler, no matter what.
+         */
+        callEvenIfRedundant?: boolean;
+
+        /** Uses userSelect: "none", instead of preventDefault. Using userSelect: "none"
+         *      has numerous drawbacks, such as not preventing them from selecting other elements
+         *      if they click on the button and drag. It is better to use preventDefault, that way
+         *      we get the same effect (they don't accidentally select text when clicking), but
+         *      with other elements, and they can still select the button text if they want to.
+         *  - This is required if you need mousedown to trigger the default browser behavior.
+         */
+        useLegacySelection?: boolean;
+
+        /** Causes the output component to be a type other than "button" */
+        typeOverride?: string;
+
+        /** Default right */
+        hotkeyPosition?: "left" | "right" | "above";
+
+        hue?: number;
+    }
+);
+
+/** Allows setting the default of some fields (just hotkeyPriority for now), of all Buttons under this. */
+export class ButtonHotkeyRegion extends qreact.Component<{ hotkeyPriority?: number }> {
+    render() {
+        return this.props.children;
+    }
+}
+
+type Watcher = {
+    props: {
+        hotkeys?: string[];
+        hotkeyPriority?: number;
+        immediateRepeat?: boolean;
+        callEvenIfRedundant?: boolean;
+    };
+    element: HTMLElement | null;
+};
+let registeredWatches = new Set<Watcher>();
+
+if (!isNode()) {
+    let insideAnims = new Set<Watcher>();
+    let keyUpListener = new Set<() => void>();
+    document.addEventListener("keyup", e => {
+        for (let listener of keyUpListener) {
+            listener();
+        }
+    });
+    document.addEventListener("keydown", e => {
+        let isAmbientEvent = (
+            e.target === document.body
+            // Some elements are commonly selected, but shouldn't handling key events
+            || (e.target as HTMLElement).tagName === "BUTTON"
+            || (e.target as HTMLElement).tagName === "A"
+            || (e.target as HTMLElement).tagName === "INPUT" && (e.target as HTMLInputElement).type === "checkbox"
+            //|| (e.target as HTMLElement).tagName === "INPUT" && (e.target as HTMLInputElement).type === "number" && Number.isNaN(+e.key) && !e.key.includes("Arrow")
+            //|| ["INPUT", "TEXTAREA"].includes((e.target as HTMLElement).tagName)
+        );
+        if (e.key === "Escape") {
+            (document.activeElement as any)?.blur();
+        }
+        let keyFull = e.code;
+        if (keyFull.startsWith("Key")) {
+            keyFull = keyFull.slice("Key".length);
+        }
+        if (e.metaKey) keyFull = "meta+" + keyFull;
+        if (e.altKey) keyFull = "alt+" + keyFull;
+        if (e.shiftKey) keyFull = "shift+" + keyFull;
+        if (e.ctrlKey || e.metaKey) keyFull = "ctrl+" + keyFull;
+        if (!isAmbientEvent) {
+            trigger("global+" + keyFull);
+        } else {
+            trigger("global+" + keyFull);
+            trigger(keyFull);
+        }
+
+        function trigger(keyFull: string) {
+            keyFull = keyFull.toLowerCase();
+            let listeners = Array.from(registeredWatches).map(x => {
+                let props = Querysub.localRead(() => ({ ...x.props }));
+                let match = props.hotkeys?.find(x => {
+                    let hotkey = x.toLowerCase();
+                    if (hotkey.endsWith("+toggle")) {
+                        hotkey = hotkey.slice(0, -"+toggle".length);
+                    }
+                    return hotkey === keyFull;
+                }) || "";
+                let hotkeyPriority = match && (
+                    props.hotkeyPriority
+                    ?? Querysub.localRead(() => qreact.getAncestorProps(ButtonHotkeyRegion, x)?.hotkeyPriority)
+                    ?? Number.MIN_SAFE_INTEGER
+                ) || Number.MIN_SAFE_INTEGER;
+                return { match, listener: x, props, hotkeyPriority };
+            }).filter(x => x.match);
+            if (!listeners.length) return;
+            console.log(`Triggering hotkey ${JSON.stringify(keyFull)} for ${listeners.length} listeners`);
+            e.preventDefault();
+            e.stopPropagation();
+            let maxPriority = Array.from(listeners).reduce((a, b) => Math.max(a, b.hotkeyPriority), Number.MIN_SAFE_INTEGER);
+            listeners = listeners.filter(x => x.hotkeyPriority === maxPriority);
+            if (listeners.length === 0) return;
+            listeners = listeners.filter((x, index) => x.props.callEvenIfRedundant || index === listeners.length - 1);
+            for (let { match, listener, props } of listeners) {
+                if (insideAnims.has(listener)) continue;
+                listener.element?.click();
+                if (!keyFull.includes("global+")) {
+                    listener.element?.focus();
+                }
+                if (match.includes("+toggle")) {
+                    function onKeyUp() {
+                        keyUpListener.delete(onKeyUp);
+                        listener.element?.click();
+                    }
+                    keyUpListener.add(onKeyUp);
+                }
+                if (Querysub.localRead(() => props.immediateRepeat)) {
+                    insideAnims.add(listener);
+                    let dead = false;
+                    function onKeyUp() {
+                        keyUpListener.delete(onKeyUp);
+                        insideAnims.delete(listener);
+                        dead = true;
+                    }
+                    keyUpListener.add(onKeyUp);
+                    let prevFrame = Date.now();
+                    function onFrame() {
+                        if (dead) {
+                            animationDuration = 0;
+                            return;
+                        }
+                        let now = Date.now();
+                        animationDuration = now - prevFrame;
+                        prevFrame = now;
+                        listener.element?.click();
+                        requestAnimationFrame(onFrame);
+                    }
+                    requestAnimationFrame(onFrame);
+                }
+            }
+        }
+    });
+}
+
+let animationDuration = 0;
+// NOTE: This doesn't actually work, and I'm not sure why. Our tracked time between frames
+//  does not account for lag, even though we have more than enough precision to do it.
+export function getAnimationFrames() {
+    let frames = Math.max(1, (animationDuration / 1000 * 120));
+    return frames;
+}
+
+export class Button extends qreact.Component<ButtonProps> {
+    onFocusText = "";
+    element: HTMLButtonElement | null = null;
+    componentDidMount(): void {
+        registeredWatches.add(this);
+    }
+    componentWillUnmount(): void {
+        registeredWatches.delete(this);
+    }
+    static renderInline(props: ButtonProps) { return true; }
+    render() {
+        let { square, flavor, children, className, style, hue, showHotkeys, hotkeys, hotkeyPosition: typeHotkeyPosition, ...props } = this.props;
+
+        delete props["class"];
+
+        let flavorOverrides: preact.JSX.CSSProperties = {};
+        if (square) {
+            flavorOverrides.padding = "1px";
+        }
+        if (flavor === "large") {
+            flavorOverrides = {
+                fontSize: 18,
+                padding: "10px 15px",
+            };
+            if (square) {
+                flavorOverrides.padding = "10px";
+            }
+        }
+        if (flavor === "small") {
+            flavorOverrides = {
+                fontSize: 12,
+                padding: "5px 10px",
+            };
+            if (square) {
+                flavorOverrides.padding = "5px";
+            }
+        }
+        if (flavor === "tiny") {
+            flavorOverrides = {
+                fontSize: 10,
+                padding: "3px 6px",
+            };
+            if (square) {
+                flavorOverrides.padding = "3px";
+            }
+        }
+
+        let colorStyle = (
+            hue !== undefined &&
+            css.background(`hsl(${hue}, 50%, 50%)`, "soft")
+                .background(`hsl(${hue}, 50%, 40%)`, "active", "soft")
+                .border(`1px solid hsl(${hue}, 0%, 50%)`, "soft")
+                .outline(`3px solid hsl(204, 100%, 50%)`, "focus", "soft")
+                .color("white")
+            || css.background("hsl(0, 0%, 39%)", "soft")
+                .background("hsl(0, 0%, 50%)", "hover", "soft")
+                .background("hsl(0, 0%, 50%)", "active", "soft")
+                .border("1px solid hsl(0, 0%, 50%)", "soft")
+                .outline("3px solid hsl(204, 100%, 50%)", "focus", "soft")
+                .color("white")
+        );
+
+
+        let type = this.props.typeOverride || this.props.flavor === "noui" && "div" || "button";
+        return qreact.createElement(
+            type,
+            {
+                ...props,
+                className: (
+                    (className || this.props.class || "")
+                    + " trigger-hover"
+                    + css.zIndex(1, "hover").position("relative", "soft")
+                    + (
+                        flavor !== "noui" && (
+                            colorStyle.display("flex", "soft")
+                                .cursor("pointer")
+                                .padding("4px 6px" as "1px")
+                                .filter("brightness(1.1)", "hover", "soft")
+                        )
+                    )
+                ),
+                style: flavor === "noui" ? {} : {
+                    alignItems: "center",
+                    userSelect: this.props.useLegacySelection ? "none" : undefined,
+                    flexDirection: (
+                        this.props.showHotkeys === "vertical" && "column"
+                        || this.props.showHotkeys === "reverse" && "row-reverse"
+                        || "row"
+                    ),
+                    ...flavorOverrides,
+                    ...style as any,
+                },
+                ref: (x: any) => this.element = x,
+                onMouseDown: ((e: MouseEvent) => {
+                    // NOTE: THIS is the correct way to prevent selection. This prevent clicking
+                    //  on a button from accidentally selecting text (EVEN other text), while
+                    //  still allowing the user to select the button text if they want to.
+                    if (!this.props.useLegacySelection) {
+                        e.preventDefault();
+                    }
+                    return this.props.onMouseDown?.(e as any);
+                })
+            },
+            <>
+                {children}
+                {
+                    <div class={
+                        (this.props.hideHotkeys && " ")
+                        || showHotkeys && hotkeys?.length && css.marginLeft(10).vbox(6).pointerEvents("none")
+                        || (
+                            css.absolute.zIndex(1).pointerEvents("none")
+
+                                .whiteSpace("nowrap")
+                            + " show-on-hover"
+                            + (
+                                typeHotkeyPosition === "left" && css.pos("0%", "50%").offset("-100%", "-50%")
+                                || typeHotkeyPosition === "above" && css.pos("50%", "0%").offset("-50%", "-100%")
+                                || css.pos("100%", "50%").offset("6px", "-50%")
+                            )
+                        )
+                    }>
+                        {this.props.hotkeys?.map((x, i) =>
+                            <div class={
+                                "" + (
+                                    css
+                                        .center
+                                        .height(showHotkeys ? 20 : 35)
+                                        .minWidth(showHotkeys ? 20 : 35)
+                                        .pad(0, 10)
+                                        .fontSize(14)
+                                        .color("hsl(0, 0%, 20%)")
+                                        .background("hsl(0, 0%, 90%)")
+                                        .background("hsl(0, 0%, 70%)", "hover")
+                                        .background("hsl(0, 0%, 60%)", "active")
+                                        .borderRadius(3)
+                                        .boxShadow("0px 2px 4px rgba(0, 0, 0, 0.5)")
+                                        .boxShadow("0px 2px 4px rgba(0, 0, 0, 0.9)", "active")
+                                        .transition("all 0.2s ease-in-out")
+                                        .whiteSpace("nowrap")
+                                )
+                            }
+                            >
+                                {formatHotkey(x)}
+                            </div>
+                        )}
+                    </div>
+                }
+            </>
+
+        );
+    }
+}
+
+function formatHotkey(key: string) {
+    key = key.replace(/\b\w/g, x => x.toUpperCase());
+    if (key === "Minus") {
+        return "‒";
+    }
+    if (key === "Equal") {
+        return "+";
+    }
+    return key;
+}

package/src/library-components/ButtonSelector.tsx

@@ -0,0 +1,64 @@
+import preact from "preact"; import { qreact } from "../../src/4-dom/qreact";
+import { Querysub } from "../../src/4-querysub/QuerysubController";
+import { css } from "../../src/4-dom/css";
+import { Button } from "../../src/library-components/Button";
+
+
+export class ButtonSelector<T> extends qreact.Component<{
+    title?: string;
+    value: T;
+    options: { value: T; title: preact.ComponentChild; isDefault?: boolean; hotkeys?: string[] }[];
+    onChange: (value: T) => void;
+    noPadding?: boolean;
+    noDefault?: boolean;
+    noUI?: boolean;
+
+    classWrapper?: string;
+}> {
+    render() {
+        const { options, onChange, title } = this.props;
+        const selectedValue = this.props.value;
+        let selectedOption = (
+            options.find(o => o.value === selectedValue)
+            || (!this.props.noDefault ? (options.find(o => o.isDefault) || options[0]) : undefined)
+        )?.value;
+        return (
+            <div class={css.hbox(2).wrap + this.props.classWrapper}>
+                {title && <div
+                    class={
+                        css.fontWeight("bold")
+                            .hsl(0, 0, 25)
+                            .border("1px solid hsl(0, 0%, 5%)").pad(4, 6)
+                            .color("white")
+                    }
+                >
+                    {title}
+                </div>}
+                {options.map(({ value, title, hotkeys }) =>
+                    <Button
+                        style={{
+                            background: (
+                                this.props.noUI && "transparent"
+                                || selectedOption === value && "hsl(110, 75%, 40%)"
+                                || this.props.noPadding && "hsl(0, 0%, 40%)"
+                                || ""
+                            ),
+                            border: this.props.noUI ? "none" : undefined,
+                        }}
+                        onClick={() => onChange(value)}
+                        hotkeys={hotkeys}
+                        showHotkeys
+                        className={
+                            css.button.flex
+                            + ((this.props.noPadding || this.props.noUI) && css.pad(0))
+                        }
+                        flavor={(this.props.noPadding || this.props.noUI) ? "noui" : undefined}
+                        title={String(value)}
+                    >
+                        {title}
+                    </Button>
+                )}
+            </div>
+        );
+    }
+}

package/src/library-components/DropdownCustom.tsx

@@ -0,0 +1,151 @@
+import preact from "preact"; import { qreact } from "../../src/4-dom/qreact";
+
+import { Querysub } from "../../src/4-querysub/QuerysubController";
+import { Icon } from "../../src/library-components/icons";
+import { css } from "../../src/4-dom/css";
+import { LengthOrPercentage } from "../../src/4-dom/cssTypes";
+import { Button } from "../../src/library-components/Button";
+
+
+export class DropdownCustom<T> extends qreact.Component<{
+    class?: string;
+    optionClass?: string;
+    title?: string;
+    value: T;
+    onChange: (value: T, index: number) => void;
+    maxWidth?: LengthOrPercentage;
+    options: { value: T; label: (isOpen: boolean) => preact.ComponentChild; }[];
+}> {
+    state = {
+        isOpen: false,
+        tempIndexSelected: null as null | number,
+    };
+    base: HTMLElement | null = null;
+    componentDidMount(): void {
+        const handler = (e: MouseEvent) => {
+            Querysub.commit(() => {
+                if (!this.state.isOpen) return;
+                let el = e.target as HTMLElement | null;
+                while (el) {
+                    if (el === this.base) return;
+                    el = el.parentElement;
+                }
+                this.state.isOpen = false;
+            });
+        };
+        window.addEventListener("click", handler);
+        qreact.onUnmount(() => window.removeEventListener("click", handler));
+    }
+    render() {
+        const { options, value, title, onChange } = this.props;
+        let selectedIndex = options.findIndex(o => o.value === value);
+        if (selectedIndex === -1) selectedIndex = 0;
+        let selectedItem = options[selectedIndex] || { value: undefined, label: () => { } };
+
+        let renderOptions = () => {
+            let selIndex = this.state.tempIndexSelected ?? selectedIndex;
+            return (
+                <div class={css.absolute.width(this.props.maxWidth || "50vw")}>
+                    <Button
+                        class={css.opacity(0).visibility("hidden").absolute}
+                        hotkeys={["Enter", "Escape"]}
+                        onClick={() => {
+                            if (this.state.tempIndexSelected !== null) {
+                                this.props.onChange(options[this.state.tempIndexSelected].value, this.state.tempIndexSelected);
+                            }
+                            this.state.isOpen = false;
+                            this.state.tempIndexSelected = null;
+                        }}
+                    />
+                    <Button
+                        class={css.opacity(0).visibility("hidden").absolute}
+                        hotkeys={["ArrowUp"]}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            this.state.tempIndexSelected = (this.state.tempIndexSelected ?? selectedIndex) - 1;
+                            if (this.state.tempIndexSelected < 0) this.state.tempIndexSelected = options.length - 1;
+                        }}
+                    />
+                    <Button
+                        class={css.opacity(0).visibility("hidden").absolute}
+                        hotkeys={["ArrowDown"]}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            this.state.tempIndexSelected = (this.state.tempIndexSelected ?? selectedIndex) + 1;
+                            if (this.state.tempIndexSelected >= options.length) this.state.tempIndexSelected = 0;
+                        }}
+                    />
+                    <div
+                        class={
+                            css.pad(2).margin(2)
+                                .absolute.pos(0, 0).zIndex(1)
+                                .hsl(0, 0, 25)
+                                .vbox(2).alignItems("stretch")
+                                .overflow("auto")
+                                .maxHeight("50vh")
+                                .border("1px solid hsl(0, 0%, 10%)")
+                            + this.props.optionClass
+                        }
+                    >
+                        {this.props.options.map(({ value, label }, index, list) =>
+                            <>
+                                {index !== 0 &&
+                                    <div class={css.height(1).hsl(0, 0, 20)} />
+                                }
+                                <div
+                                    onClick={() => {
+                                        this.props.onChange(value, index);
+                                        this.state.isOpen = false;
+                                        this.state.tempIndexSelected = null;
+                                    }}
+                                    class={
+                                        " "
+                                        + (
+                                            index === selIndex && css.hsl(0, 0, 40)
+                                            || index % 2 === 0 && css.hsl(0, 0, 25)
+                                            || index % 2 === 1 && css.hsl(0, 0, 20)
+                                            || ""
+                                        )
+                                        + css.button.pad(2, 6)
+                                        + css.background("hsl(0, 0%, 60%)", "hover")
+                                        + this.props.optionClass
+                                    }
+                                >
+                                    {label(true)}
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div >
+            );
+        };
+
+        return (
+            <div
+                ref={e => this.base = e}
+                className={(this.state.isOpen && css.zIndex(1)) + (this.props.class || "")}
+            >
+                {this.props.title && (
+                    <div
+                        style={{
+                            fontWeight: "bold",
+                        }}
+                        onClick={() => this.setState({ isOpen: !this.state.isOpen })}
+                    >
+                        {this.props.title}
+                    </div>
+                )}
+                <div class={css.relative.vbox0.maxWidth(this.props.maxWidth)}>
+                    <div
+                        class={css.hbox(10).hsl(0, 0, 25).pad(4, 10).button + this.props.optionClass}
+                        onClick={() => this.setState({ isOpen: !this.state.isOpen })}
+                    >
+                        {selectedItem?.label(false)}
+                        {Icon.chevronDoubleDown()}
+                    </div>
+                    {this.state.isOpen && renderOptions()}
+                </div>
+            </div>
+        );
+    }
+}

package/src/library-components/DropdownSelector.tsx

@@ -0,0 +1,32 @@
+import preact from "preact";
+import { Querysub } from "../../src/4-querysub/QuerysubController";
+import { qreact } from "../../src/4-dom/qreact";
+
+
+export class DropdownSelector<T> extends qreact.Component<{
+    title?: string;
+    value: T;
+    onChange: (value: T) => void;
+    options: { value: T; label: string; }[];
+}> {
+    render() {
+        const { options, value, title, onChange } = this.props;
+        let optionValues = options.map(o => String(o.value));
+        return (
+            <label style={{ display: "flex", gap: 10, alignItems: "center" }}>
+                {title && <span>{title}</span>}
+                <select
+                    value={String(value)}
+                    onChange={e => {
+                        let option = options[optionValues.indexOf(e.currentTarget.value)];
+                        onChange(option ? option.value : e.currentTarget.value as T);
+                    }}
+                >
+                    {options.map(({ value, label }) =>
+                        <option value={String(value)}>{label}</option>
+                    )}
+                </select>
+            </label>
+        );
+    }
+}