chili3d 0.6.1

package/packages/chili-ui/src/statusbar/statusbar.ts

@@ -0,0 +1,54 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, label } from "chili-controls";
+import { Config, I18n, type I18nKeys, Navigation3D, PubSub } from "chili-core";
+import { SnapConfig } from "./snapConfig";
+import style from "./statusbar.module.css";
+
+export class Statusbar extends HTMLElement {
+    private _isDefaultTip = true;
+
+    readonly tip = label({
+        textContent: "",
+        className: style.tip,
+    });
+
+    constructor(className: string) {
+        super();
+        this.className = `${style.panel} ${className}`;
+
+        this.setDefaultTip();
+        this.render();
+
+        PubSub.default.sub("statusBarTip", this.statusBarTip);
+        PubSub.default.sub("clearStatusBarTip", this.setDefaultTip);
+        Config.instance.onPropertyChanged(this.handleConfigChanged);
+    }
+
+    private readonly handleConfigChanged = (prop: keyof Config) => {
+        if (prop === "navigation3DIndex" && this._isDefaultTip) {
+            this.setDefaultTip();
+        }
+    };
+
+    private render() {
+        this.append(
+            div({ className: style.left }, this.tip),
+            div({ className: style.right }, new SnapConfig()),
+        );
+    }
+
+    private readonly statusBarTip = (tip: I18nKeys) => {
+        this._isDefaultTip = false;
+        I18n.set(this.tip, "textContent", tip);
+    };
+
+    private readonly setDefaultTip = () => {
+        this._isDefaultTip = true;
+        const { pan, rotate } = Navigation3D.navigationKeyMap();
+        I18n.set(this.tip, "textContent", "prompt.default{0}{1}", pan, rotate);
+    };
+}
+
+customElements.define("chili-statusbar", Statusbar);

package/packages/chili-ui/src/toast/index.ts

@@ -0,0 +1,4 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./toast";

package/packages/chili-ui/src/toast/toast.module.css

@@ -0,0 +1,27 @@
+.toast {
+    position: absolute;
+    left: 50%;
+    top: 30%;
+    transform: translate(-50%, 0%);
+    z-index: 10000;
+    border-radius: 0.8em;
+    background-color: var(--background-color);
+    backdrop-filter: blur(10px);
+    font-size: 1.2em;
+    padding: 1em;
+    opacity: 0.85;
+    color: var(--foreground-color);
+    border: 1px solid var(--border-color);
+}
+
+.info {
+    color: var(--foreground-color);
+}
+
+.error {
+    color: var(--error-color);
+}
+
+.warning {
+    color: var(--warning-color);
+}

package/packages/chili-ui/src/toast/toast.ts

@@ -0,0 +1,39 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { label } from "chili-controls";
+import { I18n, type I18nKeys } from "chili-core";
+import style from "./toast.module.css";
+
+export class Toast {
+    private static _lastToast: [number, HTMLElement] | undefined;
+
+    static readonly info = (message: I18nKeys, ...args: any[]) => {
+        Toast.display(style.info, I18n.translate(message, ...args));
+    };
+
+    static readonly error = (message: string) => {
+        Toast.display(style.error, message);
+    };
+
+    static readonly warn = (message: string) => {
+        Toast.display(style.warning, message);
+    };
+
+    private static display(type: string, message: string) {
+        if (Toast._lastToast) {
+            clearTimeout(Toast._lastToast[0]);
+            Toast._lastToast[1].remove();
+        }
+
+        const toast = label({ className: `${style.toast} ${type}`, textContent: message });
+        document.body.appendChild(toast);
+        Toast._lastToast = [
+            window.setTimeout(() => {
+                toast.remove();
+                Toast._lastToast = undefined;
+            }, 2000),
+            toast,
+        ];
+    }
+}

package/packages/chili-ui/src/viewport/flyout/flyout.module.css

@@ -0,0 +1,9 @@
+.root {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    margin-top: 15px;
+    margin-left: 15px;
+    opacity: 0.75;
+    z-index: 888;
+}

package/packages/chili-ui/src/viewport/flyout/flyout.ts

@@ -0,0 +1,77 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type I18nKeys, type MessageType, PubSub, type Result } from "chili-core";
+import style from "./flyout.module.css";
+import { Input } from "./input";
+import { Tip } from "./tip";
+
+export class Flyout extends HTMLElement {
+    private _tip: HTMLElement | undefined;
+    private _input: Input | undefined;
+    private lastFocus: HTMLElement | null = null;
+
+    constructor() {
+        super();
+        this.className = style.root;
+    }
+
+    connectedCallback(): void {
+        PubSub.default.sub("showFloatTip", this.showTip);
+        PubSub.default.sub("clearFloatTip", this.clearTip);
+        PubSub.default.sub("showInput", this.displayInput);
+        PubSub.default.sub("clearInput", this.clearInput);
+    }
+
+    disconnectedCallback(): void {
+        PubSub.default.remove("showFloatTip", this.showTip);
+        PubSub.default.remove("clearFloatTip", this.clearTip);
+        PubSub.default.remove("showInput", this.displayInput);
+        PubSub.default.remove("clearInput", this.clearInput);
+    }
+
+    private readonly showTip = (dom: HTMLElement | { level: MessageType; msg: string }) => {
+        if (dom instanceof HTMLElement) {
+            this._tip?.remove();
+
+            this._tip = dom;
+            this.append(this._tip);
+        } else if (this._tip instanceof Tip) {
+            this._tip.set(dom.msg, dom.level);
+        } else {
+            this._tip?.remove();
+
+            this._tip = new Tip(dom.msg, dom.level);
+            this.append(this._tip);
+        }
+    };
+
+    private readonly clearTip = () => {
+        if (this._tip !== undefined) {
+            this._tip.remove();
+            this._tip = undefined;
+        }
+    };
+
+    private readonly displayInput = (text: string, handler: (text: string) => Result<string, I18nKeys>) => {
+        if (this._input === undefined) {
+            this.lastFocus = document.activeElement as HTMLElement;
+            this._input = new Input(text, handler);
+            this._input.onCancelled(this.clearInput);
+            this._input.onCompleted(this.clearInput);
+            this.append(this._input);
+            this._input.focus();
+        }
+    };
+
+    private readonly clearInput = () => {
+        if (this._input !== undefined) {
+            this.removeChild(this._input);
+            this._input.dispose();
+            this._input = undefined;
+            this.lastFocus?.focus();
+        }
+    };
+}
+
+customElements.define("chili-flyout", Flyout);

package/packages/chili-ui/src/viewport/flyout/index.ts

@@ -0,0 +1,6 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./flyout";
+export * from "./input";
+export * from "./tip";

package/packages/chili-ui/src/viewport/flyout/input.module.css

@@ -0,0 +1,21 @@
+.panel {
+    font-size: 13px;
+    background-color: var(--panel-background-color);
+    color: var(--foreground-color);
+    opacity: 0.85;
+    display: flex;
+    flex-direction: column;
+    border-radius: 4px;
+    margin: 2px 0px;
+
+    input {
+        background-color: var(--control-background-color);
+        color: var(--input-text-color);
+        border: 1px solid var(--input-border-color);
+    }
+}
+
+.error {
+    color: red;
+    font-size: 11px;
+}

package/packages/chili-ui/src/viewport/flyout/input.ts

@@ -0,0 +1,89 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { input, label } from "chili-controls";
+import { I18n, type I18nKeys, type IDisposable, Localize, type Result } from "chili-core";
+import style from "./input.module.css";
+
+export class Input extends HTMLElement implements IDisposable {
+    private readonly _cancelledCallbacks: (() => void)[] = [];
+    private readonly _completedCallbacks: (() => void)[] = [];
+    private readonly textbox: HTMLInputElement;
+    private tip?: HTMLLabelElement;
+
+    constructor(
+        text: string,
+        readonly handler: (text: string) => Result<string, I18nKeys>,
+    ) {
+        super();
+        this.className = style.panel;
+        this.textbox = input({
+            value: text,
+            onkeydown: this.handleKeyDown,
+        });
+        this.append(this.textbox);
+    }
+
+    onCancelled(callback: () => void) {
+        this._cancelledCallbacks.push(callback);
+    }
+
+    onCompleted(callback: () => void) {
+        this._completedCallbacks.push(callback);
+    }
+
+    get text(): string {
+        return this.textbox.value;
+    }
+
+    override focus() {
+        this.textbox.focus();
+    }
+
+    dispose() {
+        this._cancelledCallbacks.length = 0;
+        this._completedCallbacks.length = 0;
+    }
+
+    private showTip(tip: I18nKeys) {
+        if (this.tip === undefined) {
+            this.tip = label({
+                textContent: new Localize(tip),
+                className: style.error,
+            });
+            this.append(this.tip);
+        } else {
+            I18n.set(this.tip, "textContent", tip);
+        }
+    }
+
+    private removeTip() {
+        if (this.tip === undefined) return;
+        this.removeChild(this.tip);
+        this.tip = undefined;
+    }
+
+    private readonly handleKeyDown = (e: KeyboardEvent) => {
+        e.stopPropagation();
+        if (e.key === "Enter") {
+            this.processEnterKey();
+        } else if (e.key === "Escape") {
+            this._cancelledCallbacks.forEach((callback) => callback());
+        } else {
+            this.removeTip();
+        }
+    };
+
+    private processEnterKey() {
+        this.textbox.readOnly = true;
+        const error = this.handler(this.textbox.value);
+        if (error.isOk) {
+            this._completedCallbacks.forEach((callback) => callback());
+        } else {
+            this.textbox.readOnly = false;
+            this.showTip(error.error);
+        }
+    }
+}
+
+customElements.define("chili-input", Input);

package/packages/chili-ui/src/viewport/flyout/tip.module.css

@@ -0,0 +1,21 @@
+.tip {
+    font-size: 13px;
+    background-color: var(--panel-background-color);
+    opacity: 0.85;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    padding: 1px 4px;
+    margin: 2px 0px;
+}
+
+.info {
+    color: var(--foreground-color);
+}
+
+.warn {
+    color: yellow;
+}
+
+.error {
+    color: red;
+}

package/packages/chili-ui/src/viewport/flyout/tip.ts

@@ -0,0 +1,45 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { MessageType } from "chili-core";
+import style from "./tip.module.css";
+
+export class Tip extends HTMLElement {
+    private color?: string;
+
+    constructor(msg: string, type: MessageType) {
+        super();
+        this.className = style.tip;
+        this.set(msg, type);
+    }
+
+    set(msg: string, type: MessageType) {
+        if (this.textContent !== msg) {
+            this.textContent = msg;
+        }
+
+        const newStyle = this.getStyle(type);
+        this.setStyle(newStyle);
+    }
+
+    private setStyle(newStyle: string) {
+        if (this.color !== newStyle && newStyle !== undefined) {
+            if (this.color !== undefined) this.classList.remove(this.color);
+            this.classList.add(newStyle);
+            this.color = newStyle;
+        }
+    }
+
+    private getStyle(type: MessageType) {
+        switch (type) {
+            case MessageType.error:
+                return style.error;
+            case MessageType.warn:
+                return style.warn;
+            default:
+                return style.info;
+        }
+    }
+}
+
+customElements.define("chili-tip", Tip);

package/packages/chili-ui/src/viewport/index.ts

@@ -0,0 +1,4 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./layoutViewport";

package/packages/chili-ui/src/viewport/layoutViewport.module.css

@@ -0,0 +1,21 @@
+.root {
+    display: flex;
+    flex-direction: row;
+    background: var(--viewport-background-color);
+    position: relative;
+}
+
+.viewports {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.viewport {
+    width: 100%;
+    height: 100%;
+}
+
+.hidden {
+    display: none;
+}

package/packages/chili-ui/src/viewport/layoutViewport.ts

@@ -0,0 +1,76 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    CollectionAction,
+    type CollectionChangedArgs,
+    type CursorType,
+    type IApplication,
+    type IView,
+    PubSub,
+} from "chili-core";
+import { Cursor } from "../cursor";
+import style from "./layoutViewport.module.css";
+import { Viewport } from "./viewport";
+
+export class LayoutViewport extends HTMLElement {
+    private readonly _viewports: Map<IView, Viewport> = new Map();
+
+    constructor(
+        readonly app: IApplication,
+        readonly showViewControls: boolean = true,
+    ) {
+        super();
+        this.className = style.root;
+        app.views.onCollectionChanged(this._handleViewCollectionChanged);
+    }
+
+    private readonly _handleViewCollectionChanged = (args: CollectionChangedArgs) => {
+        if (args.action === CollectionAction.add) {
+            args.items.forEach((view) => {
+                this.createViewport(view);
+            });
+        } else if (args.action === CollectionAction.remove) {
+            args.items.forEach((view) => {
+                const viewport = this._viewports.get(view);
+                viewport?.remove();
+                viewport?.dispose();
+                this._viewports.delete(view);
+            });
+        }
+    };
+
+    connectedCallback(): void {
+        PubSub.default.sub("activeViewChanged", this._handleActiveViewChanged);
+        PubSub.default.sub("viewCursor", this._handleCursor);
+    }
+
+    disconnectedCallback(): void {
+        PubSub.default.remove("activeViewChanged", this._handleActiveViewChanged);
+        PubSub.default.remove("viewCursor", this._handleCursor);
+    }
+
+    private readonly _handleCursor = (type: CursorType) => {
+        this.style.cursor = Cursor.get(type);
+    };
+
+    private createViewport(view: IView) {
+        const viewport = new Viewport(view, this.showViewControls);
+        viewport.classList.add(style.viewport, style.hidden);
+        this.appendChild(viewport);
+        this._viewports.set(view, viewport);
+        return viewport;
+    }
+
+    private readonly _handleActiveViewChanged = (view: IView | undefined) => {
+        this._viewports.forEach((v) => {
+            if (v.view === view) {
+                v.classList.remove(style.hidden);
+            } else {
+                v.classList.add(style.hidden);
+            }
+        });
+    };
+}
+
+customElements.define("chili-viewport", LayoutViewport);

package/packages/chili-ui/src/viewport/viewport.module.css

@@ -0,0 +1,179 @@
+.root {
+    position: relative;
+}
+
+.actsContainer {
+    position: absolute;
+    bottom: 12px;
+    z-index: 99999;
+    width: 100%;
+    pointer-events: all;
+
+    .border {
+        display: inline-block;
+        position: relative;
+        margin: auto;
+        width: fit-content;
+        max-width: 75%;
+
+        &::before {
+            position: absolute;
+            bottom: 0;
+            left: 1px;
+            height: 50px;
+            width: calc(100% - 2px);
+            margin-top: 40px;
+            content: "";
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            background-color: var(--panel-background-color);
+            backdrop-filter: blur(10px);
+        }
+
+        .acts {
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            gap: 6px;
+            cursor: pointer;
+            height: 96px;
+            margin: 0px 8px;
+            overflow-y: hidden;
+            overflow-x: auto;
+            pointer-events: all;
+            --floatControlVisible: none;
+
+            &::-webkit-scrollbar {
+                height: 6px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: var(--foreground-muted-color);
+                border-radius: 3px;
+            }
+
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
+
+            div {
+                position: relative;
+                flex: 0 0 auto;
+                padding: 8px;
+                margin-top: 43px;
+                width: 72px;
+                border-radius: 8px;
+                user-select: none;
+                background-color: var(--panel-background-color);
+                border: 1px solid var(--border-color);
+                color: var(--foreground-color);
+                font-size: 14px;
+                justify-content: center;
+                opacity: 0.75;
+                height: 18px;
+
+                span {
+                    display: block;
+                    max-width: 64px;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    text-align: center;
+                }
+
+                &:hover {
+                    opacity: 1;
+                    --floatControlVisible: flex;
+                }
+
+                .tools {
+                    display: var(--floatControlVisible);
+                    background-color: transparent;
+                    border: none;
+                    position: absolute;
+                    margin: 0;
+                    padding: 8px;
+                    top: -34px;
+                    left: 0px;
+                    gap: 4px;
+
+                    svg {
+                        width: 14px;
+                        height: 14px;
+                        padding: 4px;
+                        border-radius: 100%;
+                        background-color: var(--panel-background-color);
+                        opacity: 0.75;
+
+                        &:hover {
+                            opacity: 1;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.viewControls {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 16px;
+    z-index: 999;
+    pointer-events: none;
+    padding-top: 160px;
+    color: var(--foreground-color);
+
+    svg {
+        border: none;
+        background: transparent;
+        width: 22px;
+        height: 22px;
+        padding: 8px;
+        border-radius: 7.5px;
+        color: inherit;
+        fill: currentColor;
+
+        &:hover {
+            background: var(--hover-background-color);
+        }
+
+        &:active {
+            background: var(--active-background-color);
+        }
+    }
+
+    .actived {
+        background: var(--checked-color);
+    }
+
+    .border {
+        border: 1px solid var(--border-color);
+        background: var(--panel-background-color);
+        border-radius: 10px;
+        margin: 1px 0px;
+        padding: 2px;
+        pointer-events: all;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        color: var(--foreground-color);
+
+        div {
+            padding: 0;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            border-radius: 7.5px;
+            color: inherit;
+        }
+    }
+}
+
+@media (max-width: 680px) {
+    .viewControls {
+        display: none;
+    }
+}