chili3d 0.6.1

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

@@ -0,0 +1,288 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { a, collection, div, label, span, svg } from "chili-controls";
+import {
+    Binding,
+    ButtonSize,
+    Command,
+    type CommandKeys,
+    I18n,
+    type IApplication,
+    type ICommand,
+    type IConverter,
+    type IView,
+    Localize,
+    Logger,
+    Observable,
+    ObservableCollection,
+    PubSub,
+    Result,
+} from "chili-core";
+import { CommandContext } from "./commandContext";
+import style from "./ribbon.module.css";
+import { RibbonButton } from "./ribbonButton";
+import type { RibbonCommandData, RibbonGroupData, RibbonTabData } from "./ribbonData";
+import { RibbonStack } from "./ribbonStack";
+
+export class RibbonDataContent extends Observable {
+    readonly quickCommands = new ObservableCollection<CommandKeys>();
+    readonly ribbonTabs = new ObservableCollection<RibbonTabData>();
+    private _activeTab: RibbonTabData;
+    private _activeView: IView | undefined;
+
+    constructor(
+        readonly app: IApplication,
+        quickCommands: CommandKeys[],
+        ribbonTabs: RibbonTabData[],
+    ) {
+        super();
+        this.quickCommands.push(...quickCommands);
+        this.ribbonTabs.push(...ribbonTabs);
+        this._activeTab = ribbonTabs[0];
+        PubSub.default.sub("activeViewChanged", (v) => {
+            this.activeView = v;
+        });
+    }
+
+    get activeTab() {
+        return this._activeTab;
+    }
+    set activeTab(value: RibbonTabData) {
+        this.setProperty("activeTab", value);
+    }
+
+    get activeView() {
+        return this._activeView;
+    }
+    set activeView(value: IView | undefined) {
+        this.setProperty("activeView", value);
+    }
+}
+
+export const QuickButton = (command: ICommand) => {
+    const data = Command.getData(command);
+    if (!data) {
+        Logger.warn("commandData is undefined");
+        return span({ textContent: "null" });
+    }
+
+    return svg({
+        icon: data.icon,
+        title: new Localize(`command.${data.key}`),
+        onclick: () => PubSub.default.pub("executeCommand", data.key),
+    });
+};
+
+class ViewActiveConverter implements IConverter<IView> {
+    constructor(
+        readonly target: IView,
+        readonly style: string,
+        readonly activeStyle: string,
+    ) {}
+
+    convert(value: IView): Result<string> {
+        return Result.ok(this.target === value ? `${this.style} ${this.activeStyle}` : this.style);
+    }
+}
+
+class ActivedRibbonTabConverter implements IConverter<RibbonTabData> {
+    constructor(
+        readonly tab: RibbonTabData,
+        readonly style: string,
+        readonly activeStyle: string,
+    ) {}
+
+    convert(value: RibbonTabData): Result<string> {
+        return Result.ok(this.tab === value ? `${this.style} ${this.activeStyle}` : this.style);
+    }
+}
+
+class DisplayConverter implements IConverter<RibbonTabData> {
+    constructor(readonly tab: RibbonTabData) {}
+
+    convert(value: RibbonTabData): Result<string> {
+        return Result.ok(this.tab === value ? "" : "none");
+    }
+}
+
+export class Ribbon extends HTMLElement {
+    private readonly _commandContext = div({ className: style.commandContextPanel });
+    private commandContext?: CommandContext;
+
+    constructor(readonly dataContent: RibbonDataContent) {
+        super();
+        this.className = style.root;
+        this.append(this.header(), this.ribbonTabs(), this._commandContext);
+    }
+
+    private header() {
+        return div({ className: style.titleBar }, this.leftPanel(), this.centerPanel(), this.rightPanel());
+    }
+
+    private leftPanel() {
+        return div(
+            { className: style.left },
+            div(
+                { className: style.appIcon, onclick: () => PubSub.default.pub("displayHome", true) },
+                svg({ className: style.icon, icon: "icon-chili" }),
+                span({ id: "appName", textContent: `Chili3D - v${__APP_VERSION__}` }),
+            ),
+            div(
+                { className: style.ribbonTitlePanel },
+                svg({
+                    className: style.home,
+                    icon: "icon-home",
+                    onclick: () => PubSub.default.pub("displayHome", true),
+                }),
+                collection({
+                    className: style.quickCommands,
+                    sources: this.dataContent.quickCommands,
+                    template: (command: CommandKeys) => QuickButton(command as any),
+                }),
+                span({ className: style.split }),
+                this.createRibbonHeader(),
+            ),
+        );
+    }
+
+    private createRibbonHeader() {
+        return collection({
+            sources: this.dataContent.ribbonTabs,
+            template: (tab: RibbonTabData) => {
+                const converter = new ActivedRibbonTabConverter(tab, style.tabHeader, style.activedTab);
+                return label({
+                    className: new Binding(this.dataContent, "activeTab", converter),
+                    textContent: new Localize(tab.tabName),
+                    onclick: () => {
+                        this.dataContent.activeTab = tab;
+                    },
+                });
+            },
+        });
+    }
+
+    private centerPanel() {
+        return div(
+            { className: style.center },
+            collection({
+                className: style.views,
+                sources: this.dataContent.app.views,
+                template: (view) => this.createViewItem(view),
+            }),
+            svg({
+                className: style.new,
+                icon: "icon-plus",
+                title: I18n.translate("command.doc.new"),
+                onclick: () => PubSub.default.pub("executeCommand", "doc.new"),
+            }),
+        );
+    }
+
+    private createViewItem(view: IView) {
+        return div(
+            {
+                className: new Binding(
+                    this.dataContent,
+                    "activeView",
+                    new ViewActiveConverter(view, style.tab, style.active),
+                ),
+                onclick: () => {
+                    this.dataContent.app.activeView = view;
+                },
+            },
+            div({ className: style.name }, span({ textContent: new Binding(view.document, "name") })),
+            svg({
+                className: style.close,
+                icon: "icon-times",
+                onclick: (e) => {
+                    e.stopPropagation();
+                    view.close();
+                },
+            }),
+        );
+    }
+
+    private rightPanel() {
+        return div(
+            { className: style.right },
+            a(
+                { href: "https://github.com/xiangechen/chili3d", target: "_blank" },
+                svg({ title: "Github", className: style.icon, icon: "icon-github" }),
+            ),
+        );
+    }
+
+    private ribbonTabs() {
+        return collection({
+            className: style.tabContentPanel,
+            sources: this.dataContent.ribbonTabs,
+            template: (tab: RibbonTabData) => this.ribbonTab(tab),
+        });
+    }
+
+    private ribbonTab(tab: RibbonTabData) {
+        return collection({
+            className: style.groupPanel,
+            sources: tab.groups,
+            style: {
+                display: new Binding(this.dataContent, "activeTab", new DisplayConverter(tab)),
+            },
+            template: (group: RibbonGroupData) => this.ribbonGroup(group),
+        });
+    }
+
+    private ribbonGroup(group: RibbonGroupData) {
+        return div(
+            { className: style.ribbonGroup },
+            collection({
+                sources: group.items,
+                className: style.content,
+                template: (item) => this.ribbonButton(item),
+            }),
+            label({ className: style.header, textContent: new Localize(group.groupName) }),
+        );
+    }
+
+    private ribbonButton(item: RibbonCommandData) {
+        if (typeof item === "string") {
+            return RibbonButton.fromCommandName(item, ButtonSize.large)!;
+        } else if (item instanceof ObservableCollection) {
+            const stack = new RibbonStack();
+            item.forEach((b) => {
+                const button = RibbonButton.fromCommandName(b, ButtonSize.small);
+                if (button) stack.append(button);
+            });
+            return stack;
+        } else {
+            return new RibbonButton(item.display, item.icon, ButtonSize.large, item.onClick);
+        }
+    }
+
+    connectedCallback(): void {
+        PubSub.default.sub("openCommandContext", this.openContext);
+        PubSub.default.sub("closeCommandContext", this.closeContext);
+    }
+
+    disconnectedCallback(): void {
+        PubSub.default.remove("openCommandContext", this.openContext);
+        PubSub.default.remove("closeCommandContext", this.closeContext);
+    }
+
+    private readonly openContext = (command: ICommand) => {
+        if (this.commandContext) {
+            this.closeContext();
+        }
+        this.commandContext = new CommandContext(command);
+        this._commandContext.append(this.commandContext);
+    };
+
+    private readonly closeContext = () => {
+        this.commandContext?.remove();
+        this.commandContext?.dispose();
+        this.commandContext = undefined;
+        this._commandContext.innerHTML = "";
+    };
+}
+
+customElements.define("chili-ribbon", Ribbon);

package/packages/chili-ui/src/ribbon/ribbonButton.module.css

@@ -0,0 +1,75 @@
+.normal {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 4px;
+    margin: 4px;
+    border-radius: 4px;
+    min-width: 42px;
+    max-width: 100px;
+    width: auto;
+    min-height: 48px;
+    height: auto;
+}
+
+.normal:hover {
+    opacity: 0.85;
+    background-color: var(--hover-background-color);
+}
+
+.normal:active {
+    background-color: var(--active-background-color);
+}
+
+.small {
+    display: flex;
+    flex-direction: row;
+    justify-items: top;
+    padding: 4px;
+    margin: 0px 4px;
+}
+
+.checked {
+    background-color: var(--checked-color);
+}
+
+.small:hover {
+    opacity: 0.85;
+    background-color: var(--hover-background-color);
+}
+
+.small:active {
+    background-color: var(--active-background-color);
+}
+
+.largeButtonText .smallButtonText {
+    color: var(--foreground-color);
+    white-space: normal;
+    word-break: break-word;
+    overflow: visible;
+    width: 100%;
+    display: block;
+}
+
+.largeButtonText {
+    font-size: 12px;
+    text-align: center;
+}
+
+.smallButtonText {
+    font-size: 12px;
+    text-align: left;
+}
+
+.icon {
+    width: 30px;
+    height: 30px;
+    margin-bottom: 4px;
+}
+
+.smallIcon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    flex-shrink: 0;
+}

package/packages/chili-ui/src/ribbon/ribbonButton.ts

@@ -0,0 +1,88 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { label, svg } from "chili-controls";
+import {
+    ButtonSize,
+    Command,
+    type CommandData,
+    type CommandKeys,
+    I18n,
+    type I18nKeys,
+    type IConverter,
+    Localize,
+    Logger,
+    PubSub,
+    Result,
+} from "chili-core";
+import style from "./ribbonButton.module.css";
+
+export class RibbonButton extends HTMLElement {
+    constructor(
+        display: I18nKeys,
+        icon: string,
+        size: ButtonSize,
+        readonly onClick: () => void,
+    ) {
+        super();
+        this.initHTML(display, icon, size);
+        this.addEventListener("click", onClick);
+    }
+
+    static fromCommandName(commandName: CommandKeys, size: ButtonSize) {
+        const data = Command.getData(commandName);
+        if (!data) {
+            Logger.warn(`commandData of ${commandName} is undefined`);
+            return undefined;
+        }
+        if (data.toggle) {
+            return new RibbonToggleButton(data, size);
+        }
+        return new RibbonButton(`command.${data.key}`, data.icon, size, () => {
+            PubSub.default.pub("executeCommand", commandName);
+        });
+    }
+
+    dispose(): void {
+        this.removeEventListener("click", this.onClick);
+    }
+
+    private initHTML(display: I18nKeys, icon: string, size: ButtonSize) {
+        const image = svg({ icon });
+        this.className = size === ButtonSize.large ? style.normal : style.small;
+        image.classList.add(size === ButtonSize.large ? style.icon : style.smallIcon);
+        const text = label({
+            className: size === ButtonSize.large ? style.largeButtonText : style.smallButtonText,
+            textContent: new Localize(display),
+        });
+        I18n.set(this, "title", display);
+        this.append(image, text);
+    }
+}
+
+customElements.define("ribbon-button", RibbonButton);
+
+class ToggleConverter implements IConverter {
+    constructor(
+        readonly className: string,
+        readonly active: string,
+    ) {}
+    convert(isChecked: boolean): Result<string, string> {
+        return isChecked ? Result.ok(`${this.className} ${this.active}`) : Result.ok(this.className);
+    }
+}
+
+export class RibbonToggleButton extends RibbonButton {
+    constructor(data: CommandData, size: ButtonSize) {
+        super(`command.${data.key}`, data.icon, size, () => {
+            PubSub.default.pub("executeCommand", data.key);
+        });
+
+        if (data.toggle) {
+            data.toggle.converter = new ToggleConverter(this.className, style.checked);
+            data.toggle.setBinding(this, "className");
+        }
+    }
+}
+
+customElements.define("ribbon-toggle-button", RibbonToggleButton);

package/packages/chili-ui/src/ribbon/ribbonData.ts

@@ -0,0 +1,66 @@
+// 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,
+    type I18nKeys,
+    Observable,
+    ObservableCollection,
+    type RibbonGroup,
+    type RibbonTab,
+} from "chili-core";
+
+export type RibbonCommandData = CommandKeys | ObservableCollection<CommandKeys> | Button;
+
+export class RibbonGroupData extends Observable {
+    readonly items: ObservableCollection<RibbonCommandData>;
+
+    get groupName(): I18nKeys {
+        return this.getPrivateValue("groupName");
+    }
+    set groupName(value: I18nKeys) {
+        this.setProperty("groupName", value);
+    }
+
+    constructor(groupName: I18nKeys, ...items: RibbonCommandData[]) {
+        super();
+        this.setPrivateValue("groupName", groupName);
+        this.items = new ObservableCollection<RibbonCommandData>(...items);
+    }
+
+    static fromProfile(profile: RibbonGroup) {
+        return new RibbonGroupData(
+            profile.groupName,
+            ...profile.items.map((item) => {
+                return Array.isArray(item) ? new ObservableCollection(...item) : item;
+            }),
+        );
+    }
+}
+
+export class RibbonTabData extends Observable {
+    readonly groups = new ObservableCollection<RibbonGroupData>();
+
+    get tabName(): I18nKeys {
+        return this.getPrivateValue("tabName");
+    }
+    set tabName(value: I18nKeys) {
+        this.setProperty("tabName", value);
+    }
+
+    constructor(tabName: I18nKeys, ...groups: RibbonGroupData[]) {
+        super();
+        this.setPrivateValue("tabName", tabName);
+        this.groups.push(...groups);
+    }
+
+    static fromProfile(profile: RibbonTab) {
+        return new RibbonTabData(
+            profile.tabName,
+            ...profile.groups.map((group) => RibbonGroupData.fromProfile(group)),
+        );
+    }
+}
+
+export type RibbonData = RibbonTabData[];

package/packages/chili-ui/src/ribbon/ribbonStack.module.css

@@ -0,0 +1,6 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+}

package/packages/chili-ui/src/ribbon/ribbonStack.ts

@@ -0,0 +1,13 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import style from "./ribbonStack.module.css";
+
+export class RibbonStack extends HTMLElement {
+    constructor() {
+        super();
+        this.className = style.root;
+    }
+}
+
+customElements.define("ribbon-stack", RibbonStack);

package/packages/chili-ui/src/ribbon/ribbonToggleButton.module.css

@@ -0,0 +1,3 @@
+.checked {
+    background-color: var(--secondary-color);
+}

package/packages/chili-ui/src/ribbon/ribbonToggleButton.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.
+
+import { ButtonSize, CommandData, IConverter, PubSub, Result } from "chili-core";
+import { RibbonButton } from "./ribbonButton";
+import style from "./ribbonToggleButton.module.css";

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

package/packages/chili-ui/src/statusbar/snapConfig.module.css

@@ -0,0 +1,25 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    color: var(--foreground-color);
+
+    div {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+        user-select: none;
+
+        input {
+            width: 12px;
+            height: 12px;
+        }
+
+        label {
+            color: var(--foreground-color);
+            font-size: 12px;
+        }
+    }
+}

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

@@ -0,0 +1,92 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, input, label } from "chili-controls";
+import { Config, type I18nKeys, Localize, ObjectSnapType } from "chili-core";
+import style from "./snapConfig.module.css";
+
+const SnapTypes: Array<{
+    type: ObjectSnapType;
+    display: I18nKeys;
+}> = [
+    {
+        type: ObjectSnapType.endPoint,
+        display: "snap.end",
+    },
+    {
+        type: ObjectSnapType.midPoint,
+        display: "snap.mid",
+    },
+    {
+        type: ObjectSnapType.center,
+        display: "snap.center",
+    },
+    {
+        type: ObjectSnapType.perpendicular,
+        display: "snap.perpendicular",
+    },
+    {
+        type: ObjectSnapType.intersection,
+        display: "snap.intersection",
+    },
+];
+
+export class SnapConfig extends HTMLElement {
+    constructor() {
+        super();
+        this.className = style.container;
+        Config.instance.onPropertyChanged(this.snapTypeChanged);
+
+        this.render();
+    }
+
+    private readonly snapTypeChanged = (property: keyof Config) => {
+        if (property === "snapType" || property === "enableSnap" || property === "enableSnapTracking") {
+            this.innerHTML = "";
+            this.render();
+        }
+    };
+
+    private handleSnapClick(snapType: ObjectSnapType) {
+        if (ObjectSnapType.has(Config.instance.snapType, snapType)) {
+            Config.instance.snapType = ObjectSnapType.remove(Config.instance.snapType, snapType);
+        } else {
+            Config.instance.snapType = ObjectSnapType.add(Config.instance.snapType, snapType);
+        }
+    }
+
+    private render() {
+        this.append(
+            ...SnapTypes.map((snapType) => {
+                return div(
+                    input({
+                        type: "checkbox",
+                        id: `snap-${snapType.type}`,
+                        checked: ObjectSnapType.has(Config.instance.snapType, snapType.type),
+                        onclick: () => this.handleSnapClick(snapType.type),
+                    }),
+                    label({
+                        htmlFor: `snap-${snapType.type}`,
+                        textContent: new Localize(snapType.display),
+                    }),
+                );
+            }),
+            div(
+                input({
+                    type: "checkbox",
+                    id: "snap-tracking",
+                    checked: Config.instance.enableSnapTracking,
+                    onclick: () => {
+                        Config.instance.enableSnapTracking = !Config.instance.enableSnapTracking;
+                    },
+                }),
+                label({
+                    htmlFor: "snap-tracking",
+                    textContent: new Localize("statusBar.tracking"),
+                }),
+            ),
+        );
+    }
+}
+
+customElements.define("chili-snap-config", SnapConfig);

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

@@ -0,0 +1,28 @@
+.panel {
+    background: var(--statusbar-background-color);
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 8px;
+}
+
+.left {
+    flex: 1;
+
+    .tip {
+        font-size: 12px;
+        margin: 4px 8px;
+        color: var(--statusbar-foreground-color);
+    }
+}
+
+.right {
+    flex: 0 1 auto;
+}
+
+@media (max-width: 680px) {
+    .right {
+        display: none;
+    }
+}