chili3d 0.6.1

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

@@ -0,0 +1,243 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { a, button, collection, div, img, label, span, svg } from "chili-controls";
+import {
+    Constants,
+    I18n,
+    type I18nKeys,
+    type IApplication,
+    Localize,
+    ObservableCollection,
+    PubSub,
+    type RecentDocumentDTO,
+} from "chili-core";
+import style from "./home.module.css";
+import { LanguageSelector } from "./languageSelector";
+import { Navigation3DSelector } from "./navigation3DSelector";
+import { ThemeSelector } from "./themeSelector";
+
+interface ApplicationCommand {
+    display: I18nKeys;
+    icon?: string;
+    onclick: () => void;
+}
+
+const applicationCommands = new ObservableCollection<ApplicationCommand>(
+    {
+        display: "command.doc.new",
+        onclick: () => PubSub.default.pub("executeCommand", "doc.new"),
+    },
+    {
+        display: "command.doc.open",
+        onclick: () => PubSub.default.pub("executeCommand", "doc.open"),
+    },
+);
+
+export class Home extends HTMLElement {
+    constructor(readonly app: IApplication) {
+        super();
+        this.className = style.root;
+    }
+
+    private hasOpen(documentId: string) {
+        for (const document of this.app.documents) {
+            if (document.id === documentId) return true;
+        }
+        return false;
+    }
+
+    private async getDocuments() {
+        return new ObservableCollection(
+            ...(await this.app.storage.page(Constants.DBName, Constants.RecentTable, 0)),
+        );
+    }
+
+    async render() {
+        const documents = await this.getDocuments();
+        this.append(this.leftSection(), this.rightSection(documents));
+        this.app.mainWindow?.appendChild(this);
+    }
+
+    private leftSection() {
+        return div(
+            { className: style.left },
+            div(
+                { className: style.top },
+                this.logoSection(),
+                this.applicationCommands(),
+                this.currentDocument(),
+            ),
+
+            this.settings(),
+            this.links(),
+        );
+    }
+
+    private logoSection() {
+        return div(
+            { className: style.logo },
+            svg({ icon: "icon-chili" }),
+            span({ textContent: "CHILI3D" }),
+            span({ className: style.version, textContent: __APP_VERSION__ }),
+        );
+    }
+
+    private applicationCommands() {
+        return collection({
+            className: style.buttons,
+            sources: applicationCommands,
+            template: (item) =>
+                button({
+                    className: style.button,
+                    textContent: new Localize(item.display),
+                    onclick: item.onclick,
+                }),
+        });
+    }
+
+    private currentDocument() {
+        return this.app.activeView?.document
+            ? button({
+                  className: `${style.button} ${style.back}`,
+                  textContent: new Localize("common.back"),
+                  onclick: () => {
+                      PubSub.default.pub("displayHome", false);
+                  },
+              })
+            : "";
+    }
+
+    private settings() {
+        return div(
+            { className: style.settingsPanel },
+            div(
+                { className: style.settingItem },
+                span({
+                    className: style.settingLabel,
+                    textContent: new Localize("common.language"),
+                }),
+                div({ className: style.settingControl }, LanguageSelector({})),
+            ),
+            div(
+                { className: style.settingItem },
+                span({
+                    className: style.settingLabel,
+                    textContent: new Localize("common.theme"),
+                }),
+                div({ className: style.settingControl }, ThemeSelector({})),
+            ),
+            div(
+                { className: style.settingItem },
+                span({
+                    className: style.settingLabel,
+                    textContent: new Localize("common.3DNavigation"),
+                }),
+                div({ className: style.settingControl }, Navigation3DSelector({})),
+            ),
+        );
+    }
+
+    private links() {
+        return div(
+            { className: style.socialPanel },
+            a(
+                {
+                    className: style.socialItem,
+                    href: "https://github.com/xiangechen/chili3d",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                },
+                svg({ icon: "icon-github" }),
+                label({ textContent: "GitHub" }),
+            ),
+            button(
+                {
+                    className: style.socialItem,
+                    onclick: () => {
+                        PubSub.default.pub("executeCommand", "wechat.group");
+                    },
+                },
+                svg({
+                    icon: "icon-wechatGroup",
+                }),
+                label({ textContent: new Localize("command.wechat.group") }),
+            ),
+        );
+    }
+
+    private rightSection(documents: ObservableCollection<RecentDocumentDTO>) {
+        return div(
+            { className: style.right },
+            label({ className: style.welcome, textContent: new Localize("home.welcome") }),
+            div({ className: style.recent, textContent: new Localize("home.recent") }),
+            this.documentCollection(documents),
+        );
+    }
+
+    private documentCollection(documents: ObservableCollection<RecentDocumentDTO>) {
+        return collection({
+            className: style.documents,
+            sources: documents,
+            template: (item) => this.recentDocument(item, documents),
+        });
+    }
+
+    private recentDocument(item: RecentDocumentDTO, documents: ObservableCollection<RecentDocumentDTO>) {
+        return div(
+            {
+                className: style.document,
+                onclick: () => this.handleDocumentClick(item),
+            },
+            img({ className: style.img, src: item.image }),
+            this.documentDescription(item),
+            this.deleteIcon(item, documents),
+        );
+    }
+
+    private documentDescription(item: RecentDocumentDTO) {
+        return div(
+            { className: style.description },
+            span({ className: style.title, textContent: item.name }),
+            span({
+                className: style.date,
+                textContent: new Date(item.date).toLocaleDateString(),
+            }),
+        );
+    }
+
+    private deleteIcon(item: RecentDocumentDTO, documents: ObservableCollection<RecentDocumentDTO>) {
+        return svg({
+            className: style.delete,
+            icon: "icon-times",
+            onclick: async (e) => {
+                e.stopPropagation();
+                if (window.confirm(I18n.translate("prompt.deleteDocument{0}", item.name))) {
+                    await Promise.all([
+                        this.app.storage.delete(Constants.DBName, Constants.DocumentTable, item.id),
+                        this.app.storage.delete(Constants.DBName, Constants.RecentTable, item.id),
+                    ]);
+                    documents.remove(item);
+                }
+            },
+        });
+    }
+
+    private handleDocumentClick(item: RecentDocumentDTO) {
+        if (this.hasOpen(item.id)) {
+            PubSub.default.pub("displayHome", false);
+        } else {
+            PubSub.default.pub(
+                "showPermanent",
+                async () => {
+                    const document = await this.app.openDocument(item.id);
+                    document?.application.activeView?.cameraController.fitContent();
+                },
+                "toast.excuting{0}",
+                I18n.translate("command.doc.open"),
+            );
+        }
+    }
+}
+
+customElements.define("chili-home", Home);

package/packages/chili-ui/src/home/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 "./home";

package/packages/chili-ui/src/home/languageSelector.ts

@@ -0,0 +1,27 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type HTMLProps, option, select } from "chili-controls";
+import { Config, I18n } from "chili-core";
+
+export const LanguageSelector = (props: HTMLProps<HTMLElement>) => {
+    const languages: HTMLOptionElement[] = [];
+    I18n.getLanguages().forEach((language) => {
+        languages.push(
+            option({
+                selected: language.language === I18n.currentLanguage(),
+                textContent: language.display,
+            }),
+        );
+    });
+    return select(
+        {
+            onchange: (e) => {
+                const language = (e.target as HTMLSelectElement).selectedIndex;
+                Config.instance.language = I18n.getLanguages()[language].language;
+            },
+            ...props,
+        },
+        ...languages,
+    );
+};

package/packages/chili-ui/src/home/navigation3DSelector.ts

@@ -0,0 +1,27 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type HTMLProps, option, select } from "chili-controls";
+import { Config, Navigation3D } from "chili-core";
+
+export const Navigation3DSelector = (props: HTMLProps<HTMLElement>) => {
+    const nav3DTypes: HTMLOptionElement[] = [];
+    Navigation3D.types.forEach((nav3DType, index) =>
+        nav3DTypes.push(
+            option({
+                selected: index === Config.instance.navigation3DIndex,
+                textContent: nav3DType,
+            }),
+        ),
+    );
+    return select(
+        {
+            onchange: (e) => {
+                const nav3DType = (e.target as HTMLSelectElement).selectedIndex;
+                Config.instance.navigation3DIndex = nav3DType;
+            },
+            ...props,
+        },
+        ...nav3DTypes,
+    );
+};

package/packages/chili-ui/src/home/themeSelector.ts

@@ -0,0 +1,34 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type HTMLProps, option, select } from "chili-controls";
+import { Config, type I18nKeys, Localize } from "chili-core";
+
+export const ThemeSelector = (props: HTMLProps<HTMLElement>) => {
+    const themes = [
+        { value: "light", key: "common.theme.light" },
+        { value: "dark", key: "common.theme.dark" },
+        { value: "system", key: "common.theme.system" },
+    ];
+
+    const themeOptions: HTMLOptionElement[] = [];
+    themes.forEach((theme) =>
+        themeOptions.push(
+            option({
+                selected: theme.value === Config.instance.themeMode,
+                textContent: new Localize(theme.key as I18nKeys),
+                value: theme.value,
+            }),
+        ),
+    );
+    return select(
+        {
+            onchange: (e) => {
+                const themeMode = (e.target as HTMLSelectElement).value as "light" | "dark" | "system";
+                Config.instance.themeMode = themeMode;
+            },
+            ...props,
+        },
+        ...themeOptions,
+    );
+};

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

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

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

@@ -0,0 +1,144 @@
+svg {
+    color: inherit;
+    fill: currentColor;
+}
+
+input,
+textarea,
+select {
+    color: var(--input-text-color);
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-border-color);
+}
+
+button,
+.button {
+    color: var(--foreground-color);
+    background-color: var(--control-background-color);
+    border: 1px solid var(--border-color);
+}
+
+a {
+    color: var(--foreground-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--foreground-color);
+}
+
+p,
+span,
+div {
+    color: var(--foreground-color);
+}
+
+chili3d-main-window {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--control-background-colo);
+    border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--foreground-muted-color);
+    border-radius: 2em;
+    transition: background-color 0.3s;
+    cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(144, 147, 153, 0.3);
+}
+
+:root[theme="light"] {
+    --checked-color: rgba(25, 25, 25, 0.2);
+    --control-background-color: #ffffff;
+    --primary-color: #0e62d7;
+    --secondary-color: #6a9ee6;
+    --foreground-color: #333;
+    --foreground-secondary-color: #666;
+    --foreground-muted-color: #999;
+    --border-color: #dddddd;
+    --border-hover-color: #bbbbbb;
+    --background-color: #eeeeee;
+    --panel-background-color: #ffffff;
+    --panel-hover-background-color: #f5f5f5;
+    --hover-background-color: rgba(25, 25, 25, 0.15);
+    --active-background-color: rgba(25, 25, 25, 0.25);
+    --titlebar-forground-color: #333;
+    --titlebar-background-color: #eeeeee;
+    --title-background: rgba(25, 25, 25, 0.08);
+    --title-checked: #ffffff;
+    --statusbar-foreground-color: #333;
+    --statusbar-background-color: #eeeeee;
+    --viewport-background-color: #888;
+    --input-background-color: #ffffff;
+    --input-border-color: #dddddd;
+    --input-text-color: #333;
+    --button-primary-background: #0e62d7;
+    --button-primary-hover: #0d5bc7;
+    --button-secondary-background: #ffffff;
+    --button-secondary-hover: #f5f5f5;
+    --backdrop-color: rgba(0, 0, 0, 0.75);
+    --loading-border-color: rgba(0, 0, 0, 0.2);
+    --panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    --resizer-gradient: linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.12));
+    --resizer-gradient-hover: linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.18));
+    --error-color: #ff0000;
+    --warning-color: #ffc107;
+}
+
+:root[theme="dark"] {
+    --checked-color: rgba(255, 255, 255, 0.2);
+    --control-background-color: #2a2a2a;
+    --primary-color: #4a9eff;
+    --secondary-color: #6a9ee6;
+    --foreground-color: #ffffff;
+    --foreground-secondary-color: #b0b0b0;
+    --foreground-muted-color: #808080;
+    --border-color: #4e4e4e;
+    --border-hover-color: #505050;
+    --background-color: #181818;
+    --panel-background-color: #1f1f1f;
+    --panel-hover-background-color: #323232;
+    --hover-background-color: rgba(255, 255, 255, 0.08);
+    --active-background-color: rgba(255, 255, 255, 0.15);
+    --titlebar-forground-color: #ffffff;
+    --titlebar-background-color: #1a1a1a;
+    --title-background: rgba(255, 255, 255, 0.08);
+    --title-checked: #2a2a2a;
+    --statusbar-foreground-color: #ffffff;
+    --statusbar-background-color: #1a1a1a;
+    --viewport-background-color: #242424;
+    --input-background-color: #1e1e1e;
+    --input-border-color: #404040;
+    --input-text-color: #ffffff;
+    --button-primary-background: #4a9eff;
+    --button-primary-hover: #3a8eef;
+    --button-secondary-background: #2a2a2a;
+    --button-secondary-hover: #323232;
+    --backdrop-color: rgba(0, 0, 0, 0.75);
+    --loading-border-color: rgba(255, 255, 255, 0.2);
+    --panel-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --resizer-gradient: linear-gradient(to right, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12));
+    --resizer-gradient-hover: linear-gradient(to right, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.18));
+    --error-color: #ff6b6b;
+    --warning-color: #ffd93d;
+}

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

@@ -0,0 +1,154 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type Button,
+    type CommandKeys,
+    Config,
+    debounce,
+    I18n,
+    type I18nKeys,
+    type IApplication,
+    type IWindow,
+    PubSub,
+    type RibbonTab,
+} from "chili-core";
+import { Dialog } from "./dialog";
+import { Editor } from "./editor";
+import { Home } from "./home";
+import { Permanent } from "./permanent";
+import { Toast } from "./toast";
+
+export class MainWindow extends HTMLElement implements IWindow {
+    private _inited: boolean = false;
+    private _home?: Home;
+    private _editor?: Editor;
+
+    constructor(
+        readonly tabs: RibbonTab[],
+        readonly iconFont: string,
+        dom?: HTMLElement,
+    ) {
+        super();
+        this.tabIndex = 0;
+        this.ensureDom(dom);
+    }
+
+    protected ensureDom(dom?: HTMLElement) {
+        if (dom) {
+            dom.append(this);
+        } else {
+            document.body.appendChild(this);
+        }
+
+        this.oncontextmenu = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this.addEventListener("scroll", (e) => {
+            this.scrollTop = 0;
+        });
+    }
+
+    async init(app: IApplication): Promise<void> {
+        if (this._inited) {
+            throw new Error("MainWindow is already inited");
+        }
+        this._inited = true;
+
+        I18n.changeLanguage(Config.instance.language);
+
+        await this.loadCss();
+        await this.fetchIconFont();
+
+        this.applyTheme();
+        await this._initHome(app);
+        this._initEditor(app);
+        this._initEventHandlers(app);
+    }
+
+    protected async loadCss() {
+        await import("./mainWindow.module.css");
+    }
+
+    protected async fetchIconFont() {
+        const response = await fetch(this.iconFont);
+        const text = await response.text();
+
+        new Function(text)();
+    }
+
+    private _initEventHandlers(app: IApplication) {
+        const displayHome = debounce(this.displayHome, 100);
+        PubSub.default.sub("showToast", Toast.info);
+        PubSub.default.sub("displayError", Toast.error);
+        PubSub.default.sub("showDialog", Dialog.show);
+        PubSub.default.sub("showPermanent", Permanent.show);
+        PubSub.default.sub("activeViewChanged", (view) => displayHome(app, view === undefined));
+        PubSub.default.sub("displayHome", (show) => displayHome(app, show));
+
+        Config.instance.onPropertyChanged(this.handleConfigChanged);
+        window.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", () => {
+            if (Config.instance.themeMode === "system") {
+                this.applyTheme();
+            }
+        });
+    }
+
+    private readonly displayHome = (app: IApplication, displayHome: boolean) => {
+        if (this._home) {
+            this._home.remove();
+            this._home = undefined;
+        }
+        if (displayHome) {
+            this._initHome(app);
+        }
+    };
+
+    private async _initHome(app: IApplication) {
+        this._home = new Home(app);
+        await this._home.render();
+    }
+
+    private async _initEditor(app: IApplication) {
+        this._editor = new Editor(app, this.tabs);
+    }
+
+    registerHomeCommand(groupName: I18nKeys, command: CommandKeys | Button): void {
+        throw new Error("Method not implemented.");
+    }
+
+    registerRibbonCommand(tabName: I18nKeys, groupName: I18nKeys, command: CommandKeys | Button) {
+        this._editor?.registerRibbonCommand(tabName, groupName, command);
+    }
+
+    private applyTheme() {
+        const themeMode = Config.instance.themeMode;
+        let theme: "light" | "dark";
+
+        if (themeMode === "system") {
+            theme = window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        } else {
+            theme = themeMode;
+        }
+
+        document.documentElement.setAttribute("theme", theme);
+    }
+
+    private readonly handleConfigChanged = (prop: keyof Config) => {
+        if (prop === "themeMode") {
+            this.applyTheme();
+        }
+
+        if (prop === "language") {
+            I18n.changeLanguage(Config.instance.language);
+        }
+
+        const shouldSaveProps: (keyof Config)[] = ["themeMode", "language", "navigation3DIndex"];
+        if (shouldSaveProps.includes(prop)) {
+            Config.instance.saveToStorage();
+        }
+    };
+}
+
+customElements.define("chili3d-main-window", MainWindow);

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

@@ -0,0 +1,54 @@
+.root {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 16px;
+    border-radius: 12px;
+    box-shadow: var(--panel-shadow);
+    background-color: var(--panel-background-color);
+    padding: 6px;
+
+    .panel {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .icon {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            border-radius: 8px;
+            padding: 4px;
+
+            &:hover {
+                background-color: var(--hover-background-color);
+            }
+
+            svg {
+                width: 24px;
+                height: 24px;
+                margin: 4px;
+            }
+
+            span {
+                font-size: 12px;
+                user-select: none;
+                cursor: default;
+            }
+        }
+    }
+
+    .spacer {
+        height: 1px;
+        width: 100%;
+        background-color: var(--border-color);
+        margin: 6px 0px;
+    }
+}