chili3d 0.6.1

package/packages/chili-ui/src/property/utils.ts

@@ -0,0 +1,48 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type IConverter, type IDocument, Logger, type Property, Texture } from "chili-core";
+import { CheckProperty } from "./check";
+import { ColorProperty } from "./colorProperty";
+import { InputProperty } from "./input";
+import { TextureProperty } from "./material/textureEditor";
+import { MaterialProperty } from "./materialProperty";
+
+export function findPropertyControl(
+    document: IDocument,
+    objs: any[],
+    prop: Property,
+    converter?: IConverter,
+) {
+    if (prop === undefined || objs.length === 0) return "";
+
+    if (prop.type === "color") {
+        return new ColorProperty(document, objs, prop);
+    }
+
+    if (prop.type === "materialId" && canShowMaterialProperty(objs, prop)) {
+        return new MaterialProperty(document, objs, prop);
+    }
+
+    const value = objs[0][prop.name];
+    if (value instanceof Texture) {
+        return new TextureProperty(document, prop.display, value);
+    }
+
+    if (["object", "string", "number"].includes(typeof value)) {
+        return new InputProperty(document, objs, prop, converter);
+    }
+
+    if (typeof value === "boolean") {
+        return new CheckProperty(document, objs, prop);
+    }
+
+    Logger.warn(`Property ${prop.name} not found in ${Object.getPrototypeOf(objs[0]).constructor.name}`);
+    return "";
+}
+
+function canShowMaterialProperty(objs: any[], prop: Property) {
+    if (objs.length === 0) return false;
+    if (objs.length === 1) return true;
+    return objs.every((obj) => obj[prop.name] === objs[0][prop.name]);
+}

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

@@ -0,0 +1,73 @@
+.panel {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin: 2px 8px;
+    gap: 12px;
+}
+
+.title {
+    font-weight: bold;
+}
+
+.group {
+    display: flex;
+    margin-left: 6px;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+}
+
+.button {
+    padding: 2px 12px;
+    font-size: 1em;
+    border-radius: 6px;
+    color: var(--foreground-color);
+    border: 1px solid var(--border-color);
+    background-color: var(--control-background-color);
+
+    &:hover {
+        background-color: var(--hover-background-color);
+    }
+}
+
+.icon {
+    width: 14px;
+    height: 14px;
+}
+
+.input {
+    margin-left: 8px;
+    width: 64px;
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-border-color);
+    color: var(--input-text-color);
+}
+
+.select {
+    margin-left: 8px;
+    padding: 2px 12px;
+    font-size: 1em;
+    border-radius: 6px;
+    color: var(--foreground-color);
+    border: 1px solid var(--border-color);
+    background-color: var(--control-background-color);
+}
+
+.materialButton {
+    flex: 1 1 auto;
+    font-size: 1rem;
+    padding: 2px 24px;
+    outline: none;
+    background-color: transparent;
+
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin: 0px;
+
+    &:hover {
+        background-color: var(--hover-background-color);
+    }
+}

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

@@ -0,0 +1,239 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { MultistepCommand } from "chili";
+import {
+    button,
+    ColorConverter,
+    div,
+    input,
+    label,
+    option,
+    select,
+    svg,
+    UrlStringConverter,
+} from "chili-controls";
+import {
+    Binding,
+    CancelableCommand,
+    Combobox,
+    Command,
+    I18n,
+    type I18nKeys,
+    type ICommand,
+    type IDisposable,
+    Localize,
+    Observable,
+    PathBinding,
+    Property,
+    PubSub,
+} from "chili-core";
+import style from "./commandContext.module.css";
+
+export class CommandContext extends HTMLElement implements IDisposable {
+    private readonly propMap: Map<string | number | symbol, [Property, HTMLElement][]> = new Map();
+
+    constructor(readonly command: ICommand) {
+        super();
+        this.className = style.panel;
+        const data = Command.getData(command);
+        this.append(
+            svg({ className: style.icon, icon: data!.icon }),
+            label({ className: style.title, textContent: new Localize(`command.${data!.key}`) }, `: `),
+        );
+        this.initContext();
+    }
+
+    connectedCallback(): void {
+        if (this.command instanceof Observable) {
+            this.command.onPropertyChanged(this.onPropertyChanged);
+        }
+    }
+
+    disconnectedCallback(): void {
+        if (this.command instanceof Observable) {
+            this.command.removePropertyChanged(this.onPropertyChanged);
+        }
+    }
+
+    dispose() {
+        this.propMap.clear();
+    }
+
+    private readonly onPropertyChanged = (property: string | number | symbol) => {
+        if (this.propMap.has(property)) {
+            const items = this.propMap.get(property)!;
+            for (const [prop, control] of items) {
+                this.setVisible(control, prop);
+            }
+        }
+    };
+
+    private initContext() {
+        const groupMap = new Map<I18nKeys, HTMLDivElement>();
+        Property.getProperties(this.command).forEach((property) => {
+            const group = this.findGroup(groupMap, property);
+            const item = this.createItem(this.command, property);
+            this.setVisible(item, property);
+            this.cacheDependencies(item, property);
+            group.append(item);
+        });
+    }
+
+    private cacheDependencies(item: HTMLElement, g: Property) {
+        if (g.dependencies) {
+            for (const d of g.dependencies) {
+                const items = this.propMap.get(d.property);
+                this.propMap.set(d.property, [...(items ?? []), [g, item]]);
+            }
+        }
+    }
+
+    private setVisible(control: HTMLElement, property: Property) {
+        let visible = true;
+        if (property.dependencies) {
+            for (const d of property.dependencies) {
+                if ((this.command as any)[d.property] !== d.value) {
+                    visible = false;
+                    break;
+                }
+            }
+        }
+        control.style.display = visible ? "inherit" : "none";
+    }
+
+    private findGroup(groupMap: Map<I18nKeys, HTMLDivElement>, prop: Property) {
+        let group = groupMap.get(prop.group!);
+        if (group === undefined) {
+            group = div({ className: style.group });
+            groupMap.set(prop.group!, group);
+            this.append(group);
+        }
+        return group;
+    }
+
+    private createItem(command: ICommand, g: Property) {
+        const noType = command as any;
+        const type = typeof noType[g.name];
+
+        if (g.type === "materialId") {
+            return this.materialEditor(g, noType);
+        }
+
+        switch (type) {
+            case "function":
+                return this.newButton(g, noType);
+            case "boolean":
+                return this.newCheckbox(g, noType);
+            case "number":
+                return this.newInput(g, noType, parseFloat);
+            case "string":
+                return this.newInput(g, noType);
+            default:
+                if (noType[g.name] instanceof Combobox) {
+                    return this.newCombobox(noType, g);
+                }
+                throw new Error("暂不支持的类型");
+        }
+    }
+
+    private newCombobox(noType: any, g: Property) {
+        const combobox = noType[g.name] as Combobox<any>;
+        const options = combobox.items.map((item, index) => {
+            return option({
+                selected: index === combobox.selectedIndex,
+                textContent: I18n.isI18nKey(item)
+                    ? new Localize(item)
+                    : (combobox.converter?.convert(item).unchecked() ?? String(item)),
+            });
+        });
+
+        return div(
+            label({ textContent: new Localize(g.display) }),
+            select(
+                {
+                    className: style.select,
+                    onchange: (e) => {
+                        combobox.selectedIndex = (e.target as HTMLSelectElement).selectedIndex;
+                    },
+                },
+                ...options,
+            ),
+        );
+    }
+
+    private newInput(g: Property, noType: any, converter?: (v: string) => any) {
+        return div(
+            label({ textContent: new Localize(g.display) }),
+            input({
+                type: "text",
+                className: style.input,
+                value: new Binding(noType, g.name),
+                onblur: (e) => {
+                    const input = e.target as HTMLInputElement;
+                    noType[g.name] = converter ? converter(input.value) : input.value;
+                },
+                onkeydown: (e) => {
+                    e.stopPropagation();
+                    if (e.key === "Enter") {
+                        const input = e.target as HTMLInputElement;
+                        input.blur();
+                    }
+                },
+            }),
+        );
+    }
+
+    private newCheckbox(g: Property, noType: any) {
+        return div(
+            label({ textContent: new Localize(g.display) }),
+            input({
+                type: "checkbox",
+                checked: new Binding(noType, g.name),
+                onclick: () => {
+                    noType[g.name] = !noType[g.name];
+                },
+            }),
+        );
+    }
+
+    private newButton(g: Property, noType: any) {
+        return button({
+            className: style.button,
+            textContent: new Localize(g.display),
+            onclick: () => noType[g.name](),
+        });
+    }
+
+    private materialEditor(g: Property, noType: any) {
+        if (!(this.command instanceof CancelableCommand)) {
+            throw new Error("MaterialEditor only support CancelableCommand");
+        }
+
+        const material = this.command.document.modelManager.materials.find((x) => x.id === noType[g.name])!;
+        const display = material.clone();
+
+        return button({
+            className: style.materialButton,
+            style: {
+                backgroundColor: new Binding(display, "color", new ColorConverter()),
+                backgroundImage: new PathBinding(display, "map.image", new UrlStringConverter()),
+                backgroundBlendMode: "multiply",
+                backgroundSize: "cover",
+                cursor: "pointer",
+            },
+            textContent: new Localize(g.display),
+            onclick: () => {
+                if (this.command instanceof MultistepCommand) {
+                    PubSub.default.pub("editMaterial", this.command.document, material, (newMaterial) => {
+                        noType[g.name] = newMaterial.id;
+                        display.color = newMaterial.color;
+                        display.map = newMaterial.map;
+                    });
+                }
+            },
+        });
+    }
+}
+
+customElements.define("command-context", CommandContext);

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

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

@@ -0,0 +1,286 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.split {
+    width: 1px;
+    height: 14px;
+    margin: 0px 8px;
+    background-color: rgba(128, 128, 128, 0.45);
+}
+
+.titleBar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 2px 4px;
+
+    .left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-self: center;
+
+        .appIcon {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-self: center;
+            border-radius: 8px;
+            padding: 4px 8px;
+            margin: 2px;
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--hover-background-color);
+            }
+
+            .icon {
+                width: 24px;
+                height: 24px;
+                padding: 2px;
+            }
+
+            span {
+                margin-left: 16px;
+                font-weight: bolder;
+                text-wrap: nowrap;
+            }
+        }
+    }
+
+    .center {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: auto;
+        flex: 0 1 auto;
+        overflow: auto;
+
+        .views {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            border-radius: 8px;
+            padding: 2px 0px;
+            overflow: hidden;
+
+            .tab {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                border-radius: 6px;
+                height: 26px;
+                background-color: var(--title-background);
+                padding: 2px;
+                width: 220px;
+                overflow: hidden;
+                margin: 0px 2px;
+                cursor: default;
+                transition: width 0.2s ease-out;
+
+                &:hover {
+                    background-color: var(--hover-background-color);
+                }
+
+                .name {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    margin-right: auto;
+                    margin-left: 8px;
+                    text-wrap: nowrap;
+                    user-select: none;
+                    text-decoration: dashed;
+                    overflow: hidden;
+
+                    .split {
+                        padding: 0px 4px;
+                    }
+
+                    span {
+                        font-size: 12px;
+                    }
+                }
+
+                .close {
+                    width: 12px;
+                    height: 12px;
+                    margin: 4px;
+                    padding: 6px;
+                    border-radius: 6px;
+                    flex-shrink: 0;
+
+                    &:hover {
+                        background-color: var(--hover-background-color);
+                    }
+                }
+            }
+
+            .active {
+                width: 260px;
+                background-color: var(--title-checked);
+            }
+        }
+
+        .new {
+            width: 16px;
+            height: 16px;
+            margin-left: 2px;
+            padding: 6px;
+            border-radius: 6px;
+
+            &:hover {
+                background-color: var(--hover-background-color);
+            }
+        }
+    }
+
+    .right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin: 2px 8px;
+        flex: 0 0 auto;
+
+        .icon {
+            width: 24px;
+            height: 24px;
+            padding: 4px;
+            border-radius: 4px;
+
+            &:hover {
+                background-color: var(--hover-background-color);
+            }
+        }
+    }
+}
+
+.ribbonTitlePanel {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0px 4px;
+    flex: 0 0 auto;
+
+    .home {
+        width: 14px;
+        height: 14px;
+        padding: 6px;
+        border-radius: 4px;
+        margin: 0px 4px;
+
+        &:hover {
+            background-color: var(--hover-background-color);
+        }
+    }
+
+    & .quickCommands {
+        display: flex;
+        flex-direction: row;
+
+        svg {
+            width: 14px;
+            height: 14px;
+            padding: 6px;
+            border-radius: 4px;
+            margin: 0px 6px;
+
+            &:hover {
+                background-color: var(--hover-background-color);
+            }
+        }
+    }
+
+    .tabHeader {
+        color: var(--titlebar-forground-color);
+        padding: 5px 15px;
+
+        &:hover {
+            -webkit-text-stroke: 0.65px var(--foreground-color);
+            background-color: var(--hover-background-color);
+        }
+    }
+
+    .activedTab {
+        position: relative;
+
+        &::after {
+            content: "";
+            position: absolute;
+            bottom: -2px;
+            left: 8px;
+            right: 8px;
+            height: 3px;
+            background-color: var(--primary-color);
+        }
+    }
+}
+
+.tabContentPanel {
+    display: flex;
+    flex-direction: row;
+    background-color: var(--panel-background-color);
+    border-bottom: 1px solid var(--border-color);
+    overflow-x: auto;
+
+    &::-webkit-scrollbar {
+        height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--foreground-muted-color);
+        border-radius: 5px;
+    }
+
+    & .groupPanel {
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+.commandContextPanel {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    flex: 1 1 auto;
+    height: 32px;
+    background-color: var(--panel-background-color);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.ribbonGroup {
+    position: relative;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    justify-items: center;
+    flex-shrink: 0;
+
+    .header {
+        color: var(--foreground-color);
+        font-size: 12px;
+    }
+
+    .content {
+        height: 72px;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-items: center;
+        overflow: hidden;
+    }
+}
+
+.ribbonGroup::after {
+    content: "";
+    position: absolute;
+    display: grid;
+    right: 0px;
+    top: 6px;
+    bottom: 6px;
+    width: 1px;
+    background-color: var(--border-color);
+}