querysub 0.433.0 → 0.437.0

package/src/https.ts

@@ -1,2 +1,2 @@
-import { httpsRequest } from "socket-function/src/https";
+import { httpsRequest } from "socket-function/src/https";
 export { httpsRequest };

package/src/library-components/AspectSizedComponent.tsx

@@ -1,88 +1,88 @@
-import { Querysub } from "../4-querysub/QuerysubController";
-import { css } from "../4-dom/css";
-import { qreact } from "../4-dom/qreact";
-
-export class AspectSizedComponent extends qreact.Component<{
-    aspectRatio: number;
-    onNewSize?: (width: number, height: number) => void;
-    center?: { x: number; y: number };
-    className?: string;
-    innerClassName?: string;
-    defaultWidth?: number;
-    defaultHeight?: number;
-    onClick?: (e: MouseEvent) => void;
-}> {
-    state = {
-        width: this.props.defaultWidth ?? 100,
-        height: this.props.defaultHeight ?? 100,
-    };
-    holder: HTMLDivElement | null = null;
-    getSize() {
-        let { aspectRatio } = this.props;
-        let { width, height } = this.state;
-        let leftFraction = 0;
-        let topFraction = 0;
-        let widthFraction = 1;
-        let heightFraction = 1;
-
-        let center = this.props.center ?? { x: 0.5, y: 0.5 };
-
-        if (width / height > aspectRatio) {
-            // Too wide
-            let newWidth = height * aspectRatio;
-            leftFraction = (width - newWidth) * center.x / width;
-            widthFraction = newWidth / width;
-        } else {
-            // Too tall
-            let newHeight = width / aspectRatio;
-            topFraction = (height - newHeight) * center.y / height;
-            heightFraction = newHeight / height;
-        }
-        return { leftFraction, topFraction, widthFraction, heightFraction };
-    }
-    observer: ResizeObserver = new ResizeObserver((val) => {
-        for (let t of val) {
-            if (t.target === this.holder) {
-                Querysub.serviceWriteDetached(() => {
-                    let width = t.contentRect.width;
-                    let height = t.contentRect.height;
-                    this.state.width = width;
-                    this.state.height = height;
-                    let { widthFraction, heightFraction } = this.getSize();
-                    let innerWidth = widthFraction * width;
-                    let innerHeight = heightFraction * height;
-                    this.props.onNewSize?.(innerWidth, innerHeight);
-                });
-            }
-        }
-    });
-    componentWillUnmount() {
-        this.observer.disconnect();
-    }
-    render() {
-        let { leftFraction, topFraction, widthFraction, heightFraction } = this.getSize();
-
-        return (
-            <div
-                className={css.size("100%", "100%").position("relative", "soft") + " " + this.props.className}
-                key="maindiv"
-                ref2={(x) => {
-                    if (this.holder) {
-                        this.observer.unobserve(this.holder);
-                    }
-                    this.observer.observe(x);
-                    this.holder = x;
-                }}
-                onClick={this.props.onClick}
-            >
-                <div className={this.props.innerClassName} style={{
-                    position: "absolute",
-                    left: `${leftFraction * 100}%`,
-                    top: `${topFraction * 100}%`,
-                    width: `${widthFraction * 100}%`,
-                    height: `${heightFraction * 100}%`,
-                }}>{this.props.children}</div>
-            </div>
-        );
-    }
+import { Querysub } from "../4-querysub/QuerysubController";
+import { css } from "../4-dom/css";
+import { qreact } from "../4-dom/qreact";
+
+export class AspectSizedComponent extends qreact.Component<{
+    aspectRatio: number;
+    onNewSize?: (width: number, height: number) => void;
+    center?: { x: number; y: number };
+    className?: string;
+    innerClassName?: string;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    onClick?: (e: MouseEvent) => void;
+}> {
+    state = {
+        width: this.props.defaultWidth ?? 100,
+        height: this.props.defaultHeight ?? 100,
+    };
+    holder: HTMLDivElement | null = null;
+    getSize() {
+        let { aspectRatio } = this.props;
+        let { width, height } = this.state;
+        let leftFraction = 0;
+        let topFraction = 0;
+        let widthFraction = 1;
+        let heightFraction = 1;
+
+        let center = this.props.center ?? { x: 0.5, y: 0.5 };
+
+        if (width / height > aspectRatio) {
+            // Too wide
+            let newWidth = height * aspectRatio;
+            leftFraction = (width - newWidth) * center.x / width;
+            widthFraction = newWidth / width;
+        } else {
+            // Too tall
+            let newHeight = width / aspectRatio;
+            topFraction = (height - newHeight) * center.y / height;
+            heightFraction = newHeight / height;
+        }
+        return { leftFraction, topFraction, widthFraction, heightFraction };
+    }
+    observer: ResizeObserver = new ResizeObserver((val) => {
+        for (let t of val) {
+            if (t.target === this.holder) {
+                Querysub.serviceWriteDetached(() => {
+                    let width = t.contentRect.width;
+                    let height = t.contentRect.height;
+                    this.state.width = width;
+                    this.state.height = height;
+                    let { widthFraction, heightFraction } = this.getSize();
+                    let innerWidth = widthFraction * width;
+                    let innerHeight = heightFraction * height;
+                    this.props.onNewSize?.(innerWidth, innerHeight);
+                });
+            }
+        }
+    });
+    componentWillUnmount() {
+        this.observer.disconnect();
+    }
+    render() {
+        let { leftFraction, topFraction, widthFraction, heightFraction } = this.getSize();
+
+        return (
+            <div
+                className={css.size("100%", "100%").position("relative", "soft") + " " + this.props.className}
+                key="maindiv"
+                ref2={(x) => {
+                    if (this.holder) {
+                        this.observer.unobserve(this.holder);
+                    }
+                    this.observer.observe(x);
+                    this.holder = x;
+                }}
+                onClick={this.props.onClick}
+            >
+                <div className={this.props.innerClassName} style={{
+                    position: "absolute",
+                    left: `${leftFraction * 100}%`,
+                    top: `${topFraction * 100}%`,
+                    width: `${widthFraction * 100}%`,
+                    height: `${heightFraction * 100}%`,
+                }}>{this.props.children}</div>
+            </div>
+        );
+    }
 }

package/src/library-components/ButtonSelector.tsx

@@ -1,65 +1,65 @@
-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={String(selectedValue)}
-                >
-                    {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>
-        );
-    }
+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={String(selectedValue)}
+                >
+                    {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

@@ -1,151 +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>
-        );
-    }
+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>
+        );
+    }
 }