chili3d 0.6.1

package/packages/chili-ui/src/project/tree/treeItem.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 { label, setSVGIcon, svg } from "chili-controls";
+import { Binding, type IDocument, type INode, Transaction } from "chili-core";
+import style from "./treeItem.module.css";
+
+export abstract class TreeItem extends HTMLElement {
+    readonly name: HTMLLabelElement;
+    readonly visibleIcon: SVGSVGElement;
+
+    private _node: INode;
+    get node() {
+        return this._node;
+    }
+
+    constructor(
+        private document: IDocument,
+        node: INode,
+    ) {
+        super();
+        this._node = node;
+        this.draggable = true;
+        this.name = label({
+            className: style.name,
+            textContent: new Binding(node, "name"),
+        });
+        this.visibleIcon = svg({
+            className: style.icon,
+            icon: this.getVisibleIcon(),
+            onclick: this.onVisibleIconClick,
+        });
+        this.setVisibleStyle(node.parentVisible);
+    }
+
+    connectedCallback(): void {
+        this.node.onPropertyChanged(this.onPropertyChanged);
+    }
+
+    disconnectedCallback(): void {
+        this.node.removePropertyChanged(this.onPropertyChanged);
+    }
+
+    private readonly onPropertyChanged = (property: keyof INode, model: INode) => {
+        if (property === "visible") {
+            setSVGIcon(this.visibleIcon, this.getVisibleIcon());
+        } else if (property === "parentVisible") {
+            this.setVisibleStyle(model[property]);
+        }
+    };
+
+    private setVisibleStyle(parentVisible?: boolean) {
+        if (parentVisible === true) {
+            this.visibleIcon.classList.remove(style["parent-hidden"]);
+        } else {
+            this.visibleIcon.classList.add(style["parent-hidden"]);
+        }
+    }
+
+    addSelectedStyle(style: string) {
+        this.getSelectedHandler().classList.add(style);
+    }
+
+    removeSelectedStyle(style: string) {
+        this.getSelectedHandler().classList.remove(style);
+    }
+
+    abstract getSelectedHandler(): HTMLElement;
+
+    dispose() {
+        this.remove();
+        this.node.removePropertyChanged(this.onPropertyChanged);
+        this.visibleIcon.removeEventListener("click", this.onVisibleIconClick);
+        this.document = null as any;
+        this._node = null as any;
+    }
+
+    private getVisibleIcon() {
+        return this.node.visible ? "icon-eye" : "icon-eye-slash";
+    }
+
+    private readonly onVisibleIconClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        Transaction.execute(this.document, "change visible", () => {
+            this.node.visible = !this.node.visible;
+        });
+        this.document.visual.update();
+    };
+}

package/packages/chili-ui/src/project/tree/treeItemGroup.module.css

@@ -0,0 +1,33 @@
+.expanderIcon {
+    width: 12px;
+    height: 12px;
+    padding: 2px 4px;
+}
+
+.left16px {
+    padding-left: 16px;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.hide {
+    display: none;
+}
+
+.header {
+    padding: 4px;
+    border-radius: 2px;
+}
+
+.header:hover {
+    background-color: var(--hover-background-color);
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}

package/packages/chili-ui/src/project/tree/treeItemGroup.ts

@@ -0,0 +1,85 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, setSVGIcon, svg } from "chili-controls";
+import type { IDocument, INodeLinkedList } from "chili-core";
+import { TreeItem } from "./treeItem";
+import style from "./treeItemGroup.module.css";
+
+export class TreeGroup extends TreeItem {
+    private _isExpanded = true;
+    readonly header: HTMLElement;
+    readonly items: HTMLDivElement = div({ className: `${style.container} ${style.left16px}` });
+    readonly expanderIcon: SVGSVGElement;
+
+    constructor(document: IDocument, node: INodeLinkedList) {
+        super(document, node);
+        this.expanderIcon = svg({
+            icon: this.getExpanderIcon(),
+            className: style.expanderIcon,
+            onclick: this.handleExpanderClick,
+        });
+        this.header = div(
+            { className: `${style.row} ${style.header}` },
+            this.expanderIcon,
+            this.name,
+            this.visibleIcon,
+        );
+        super.append(div({ className: style.container }, this.header, this.items));
+    }
+
+    get isExpanded(): boolean {
+        return this._isExpanded;
+    }
+
+    set isExpanded(value: boolean) {
+        this._isExpanded = value;
+        setSVGIcon(this.expanderIcon, this.getExpanderIcon());
+        this.items.classList.toggle(style.hide, !this._isExpanded);
+    }
+
+    getSelectedHandler(): HTMLElement {
+        return this.header;
+    }
+
+    override dispose() {
+        super.dispose();
+        this.header.remove();
+        this.expanderIcon.removeEventListener("click", this.handleExpanderClick);
+    }
+
+    private readonly handleExpanderClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        this.isExpanded = !this._isExpanded;
+    };
+
+    private getExpanderIcon() {
+        return this._isExpanded ? "icon-angle-down" : "icon-angle-right";
+    }
+
+    override appendChild<T extends Node>(node: T): T {
+        this.items.appendChild(node);
+        return node;
+    }
+
+    override append(...nodes: Node[]): void {
+        this.items.append(...nodes);
+    }
+
+    override removeChild<T extends Node>(child: T): T {
+        if (child.parentNode === this.items) this.items.removeChild(child);
+        return child;
+    }
+
+    addItem(...items: Node[]) {
+        this.items.append(...items);
+        return this;
+    }
+
+    insertAfter(item: TreeItem, child: TreeItem | null): void {
+        const referenceNode = child ? child.nextSibling : this.items.firstChild;
+        this.items.insertBefore(item, referenceNode);
+    }
+}
+
+customElements.define("tree-group", TreeGroup);

package/packages/chili-ui/src/project/tree/treeModel.module.css

@@ -0,0 +1,11 @@
+.panel {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-radius: 2px;
+    padding: 4px;
+}
+
+.panel:hover {
+    background-color: var(--hover-background-color);
+}

package/packages/chili-ui/src/project/tree/treeModel.ts

@@ -0,0 +1,20 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import type { IDocument, INode } from "chili-core";
+import { TreeItem } from "./treeItem";
+import style from "./treeModel.module.css";
+
+export class TreeModel extends TreeItem {
+    constructor(document: IDocument, node: INode) {
+        super(document, node);
+        this.append(this.name, this.visibleIcon);
+        this.classList.add(style.panel);
+    }
+
+    getSelectedHandler(): HTMLElement {
+        return this;
+    }
+}
+
+customElements.define("tree-model", TreeModel);

package/packages/chili-ui/src/property/check.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 { div, input, span } from "chili-controls";
+import { Binding, type IDocument, Localize, type Property, Transaction } from "chili-core";
+import commonStyle from "./common.module.css";
+import { PropertyBase } from "./propertyBase";
+
+export class CheckProperty extends PropertyBase {
+    constructor(
+        readonly document: IDocument,
+        objects: any[],
+        readonly property: Property,
+    ) {
+        super(objects);
+        this.appendChild(
+            div(
+                { className: commonStyle.panel },
+                span({ className: commonStyle.propertyName, textContent: new Localize(property.display) }),
+                input({
+                    type: "checkbox",
+                    checked: new Binding(objects[0], property.name),
+                    onclick: () => {
+                        const value = !objects[0][property.name];
+
+                        Transaction.execute(document, "modify property", () => {
+                            objects.forEach((x) => {
+                                x[property.name] = value;
+                            });
+                            document.visual.update();
+                        });
+                    },
+                }),
+            ),
+        );
+    }
+}
+
+customElements.define("chili-check-property", CheckProperty);

package/packages/chili-ui/src/property/colorPorperty.module.css

@@ -0,0 +1,6 @@
+.color {
+    width: 64px;
+    height: 32px;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}

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

@@ -0,0 +1,63 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { ColorConverter, div, input, label } from "chili-controls";
+import { Binding, type IDocument, Localize, type Property, PubSub, Transaction } from "chili-core";
+import colorStyle from "./colorPorperty.module.css";
+import commonStyle from "./common.module.css";
+import { PropertyBase } from "./propertyBase";
+
+export class ColorProperty extends PropertyBase {
+    readonly converter = new ColorConverter();
+    readonly input: HTMLInputElement;
+
+    constructor(
+        readonly document: IDocument,
+        objects: any[],
+        readonly property: Property,
+    ) {
+        super(objects);
+        this.input = this.createInput(objects[0]);
+        this.appendChild(this.createPanel());
+    }
+
+    private createInput(object: any): HTMLInputElement {
+        return input({
+            className: colorStyle.color,
+            type: "color",
+            value: new Binding(object, this.property.name, this.converter),
+            onchange: this.setColor,
+        });
+    }
+
+    private createPanel(): HTMLElement {
+        return div(
+            { className: commonStyle.panel },
+            label({
+                className: commonStyle.propertyName,
+                textContent: new Localize(this.property.display),
+            }),
+            this.input,
+        );
+    }
+
+    disconnectedCallback(): void {
+        this.input.removeEventListener("onchange", this.setColor);
+    }
+
+    private readonly setColor = (e: Event) => {
+        const value = (e.target as HTMLInputElement).value;
+        const color = this.converter.convertBack(value).value;
+        if (color === undefined) {
+            PubSub.default.pub("showToast", "toast.converter.invalidColor");
+            return;
+        }
+        Transaction.execute(this.document, "change color", () => {
+            this.objects.forEach((x) => {
+                x[this.property.name] = color;
+            });
+        });
+    };
+}
+
+customElements.define("chili-color-property", ColorProperty);

package/packages/chili-ui/src/property/common.module.css

@@ -0,0 +1,14 @@
+.panel {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+}
+
+.propertyName {
+    font-size: 14px;
+    opacity: 0.75;
+    color: var(--foreground-color);
+    min-width: 72px;
+    flex: 0 1 auto;
+}

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

package/packages/chili-ui/src/property/input.module.css

@@ -0,0 +1,19 @@
+.readonly {
+    opacity: 0.56;
+}
+
+.box {
+    flex: 1;
+    font-size: 1rem;
+    padding: 4px;
+    outline: none;
+    background-color: transparent;
+
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin: 0px;
+
+    &:focus {
+        border-color: var(--primary-color);
+    }
+}

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

@@ -0,0 +1,140 @@
+// 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,
+    NumberConverter,
+    StringConverter,
+    span,
+    XYConverter,
+    XYZConverter,
+} from "chili-controls";
+import {
+    Binding,
+    type IConverter,
+    type IDocument,
+    isPropertyChanged,
+    Localize,
+    type Property,
+    PubSub,
+    Result,
+    Transaction,
+    XY,
+    XYZ,
+} from "chili-core";
+import commonStyle from "./common.module.css";
+import style from "./input.module.css";
+import { PropertyBase } from "./propertyBase";
+
+class ArrayValueConverter implements IConverter {
+    constructor(
+        readonly objects: any[],
+        readonly property: Property,
+        readonly converter?: IConverter,
+    ) {}
+
+    convert(value: any): Result<string> {
+        return Result.ok(this.getDefaultValue());
+    }
+
+    convertBack?(value: string): Result<any> {
+        throw new Error("Method not implemented.");
+    }
+
+    private getValueString(obj: any): string {
+        const value = obj[this.property.name];
+        const cvalue = this.converter?.convert(value);
+        return cvalue?.isOk ? cvalue.value : String(value);
+    }
+
+    private getDefaultValue() {
+        const values = this.objects.map(this.getValueString.bind(this));
+        const uniqueValues = new Set(values);
+        return uniqueValues.size === 1 ? values[0] : "";
+    }
+}
+
+export class InputProperty extends PropertyBase {
+    readonly converter: IConverter | undefined;
+
+    constructor(
+        readonly document: IDocument,
+        objects: any[],
+        readonly property: Property,
+        converter?: IConverter,
+    ) {
+        super(objects);
+        this.converter = converter ?? this.getConverter();
+        const arrayConverter = new ArrayValueConverter(objects, property, this.converter);
+        this.append(
+            div(
+                { className: commonStyle.panel },
+                span({ className: commonStyle.propertyName, textContent: new Localize(property.display) }),
+                input({
+                    className: style.box,
+                    value: new Binding(objects[0], property.name, arrayConverter),
+                    readOnly: this.isReadOnly(),
+                    onkeydown: this.handleKeyDown,
+                    onblur: this.handleBlur,
+                }),
+            ),
+        );
+    }
+
+    private isReadOnly(): boolean {
+        let des = Object.getOwnPropertyDescriptor(this.objects[0], this.property.name);
+        if (!des) {
+            let proto = Object.getPrototypeOf(this.objects[0]);
+            while (isPropertyChanged(proto)) {
+                des = Object.getOwnPropertyDescriptor(proto, this.property.name);
+                if (des) break;
+                proto = Object.getPrototypeOf(proto);
+            }
+        }
+        return (
+            des?.set === undefined ||
+            (this.converter === undefined && typeof this.objects[0][this.property.name] !== "string")
+        );
+    }
+
+    private readonly handleBlur = (e: FocusEvent) => {
+        this.setValue(e.target as HTMLInputElement);
+    };
+
+    private readonly handleKeyDown = (e: KeyboardEvent) => {
+        e.stopPropagation();
+        if (this.converter && e.key === "Enter") {
+            this.setValue(e.target as HTMLInputElement);
+        }
+    };
+
+    private readonly setValue = (input: HTMLInputElement) => {
+        if (this.isReadOnly()) return;
+
+        const newValue = this.converter?.convertBack?.(input.value);
+        if (!newValue?.isOk) {
+            PubSub.default.pub("showToast", "error.default:{0}", newValue?.error);
+            return;
+        }
+        Transaction.execute(this.document, "modify property", () => {
+            this.objects.forEach((x) => {
+                x[this.property.name] = newValue.value;
+            });
+            this.document.visual.update();
+        });
+    };
+
+    private getConverter(): IConverter | undefined {
+        const name = this.objects[0][this.property.name].constructor.name;
+        const converters: { [key: string]: () => IConverter } = {
+            [XYZ.name]: () => new XYZConverter(),
+            [XY.name]: () => new XYConverter(),
+            [String.name]: () => new StringConverter(),
+            [Number.name]: () => new NumberConverter(),
+        };
+        return converters[name]?.();
+    }
+}
+
+customElements.define("chili-input-property", InputProperty);

package/packages/chili-ui/src/property/material/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 "./materialDataContent";
+export * from "./materialEditor";

package/packages/chili-ui/src/property/material/materialDataContent.ts

@@ -0,0 +1,44 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type IDocument, Material, Observable } from "chili-core";
+
+let count = 1;
+
+export class MaterialDataContent extends Observable {
+    get editingMaterial(): Material {
+        return this.getPrivateValue("editingMaterial");
+    }
+    set editingMaterial(value: Material) {
+        this.setProperty("editingMaterial", value);
+    }
+
+    constructor(
+        readonly document: IDocument,
+        readonly callback: (material: Material) => void,
+        editingMaterial: Material,
+    ) {
+        super();
+        this.setPrivateValue("editingMaterial", editingMaterial);
+    }
+
+    deleteMaterial() {
+        if (this.document.modelManager.materials.length <= 1) return;
+        const tempMaterial = this.editingMaterial;
+        this.editingMaterial = this.document.modelManager.materials.find(
+            (m) => m.id !== this.editingMaterial.id,
+        )!;
+        this.callback(this.editingMaterial);
+        this.document.modelManager.materials.remove(tempMaterial);
+    }
+
+    addMaterial() {
+        this.document.modelManager.materials.push(
+            new Material(this.document, `Material ${count++}`, 0xdddddd),
+        );
+    }
+
+    copyMaterial() {
+        this.document.modelManager.materials.push(this.editingMaterial.clone());
+    }
+}

package/packages/chili-ui/src/property/material/materialEditor.module.css

@@ -0,0 +1,98 @@
+.root {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    border-radius: 12px;
+    box-shadow: var(--panel-shadow);
+    background-color: var(--background-color);
+    top: 16px;
+    left: 16px;
+    padding: 16px;
+    max-width: 480px;
+    max-height: 75%;
+    overflow: hidden;
+    z-index: 99999;
+}
+
+.title {
+    margin: 0px 6px;
+    display: flex;
+    flex: 0;
+    flex-direction: row;
+    align-items: center;
+
+    span {
+        font-size: medium;
+        flex: 1;
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+        padding: 6px;
+        margin: 0 3px;
+
+        &:hover {
+            background-color: var(--hover-background-color);
+        }
+    }
+}
+
+.materials {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    border-radius: 8px;
+    background-color: var(--panel-background-color);
+    border: 1px solid var(--border-color);
+    margin: 8px 0px;
+    padding: 4px;
+    min-height: 60px;
+    max-height: 120px;
+    flex: 0;
+    overflow: hidden;
+    overflow-y: auto;
+}
+
+.material {
+    border-radius: 8px;
+    width: 48px;
+    height: 48px;
+    border: 1px solid var(--border-color);
+    margin: 4px;
+}
+
+.active {
+    border: 5px solid var(--primary-color);
+}
+
+.properties {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    border-radius: 8px;
+    background-color: var(--panel-background-color);
+    border: 1px solid var(--border-color);
+    padding: 16px;
+    --delete-visiblity: hidden;
+    overflow: hidden;
+    overflow-y: auto;
+}
+
+.bottom {
+    display: flex;
+    flex-direction: row;
+    margin-top: 8px;
+
+    button {
+        width: 96px;
+        height: 28px;
+        margin-right: 8px;
+        border-radius: 6px;
+        border: 1px solid var(--border-color);
+        background-color: var(--panel-background-color);
+        &:hover {
+            background-color: var(--hover-background-color);
+        }
+    }
+}