chili3d 0.6.1

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

@@ -0,0 +1,147 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { button, ColorConverter, collection, div, span, svg } from "chili-controls";
+import { UrlStringConverter } from "chili-controls/src/converters/urlConverter";
+import {
+    Binding,
+    type IConverter,
+    Localize,
+    type Material,
+    PathBinding,
+    Property,
+    PubSub,
+    Result,
+    Texture,
+} from "chili-core";
+import { findPropertyControl } from "../utils";
+import type { MaterialDataContent } from "./materialDataContent";
+import style from "./materialEditor.module.css";
+
+class ActiveStyleConverter implements IConverter<Material> {
+    constructor(readonly material: Material) {}
+
+    convert(value: Material): Result<string> {
+        return Result.ok(this.material === value ? `${style.material} ${style.active}` : style.material);
+    }
+}
+
+export class MaterialEditor extends HTMLElement {
+    private readonly editingControl: HTMLElement;
+    private readonly colorConverter = new ColorConverter();
+
+    constructor(readonly dataContent: MaterialDataContent) {
+        super();
+        this.editingControl = div({ className: style.properties });
+        this.initEditingControl(dataContent.editingMaterial);
+        this.append(this.createEditorUI());
+    }
+
+    private createEditorUI() {
+        return div(
+            { className: style.root },
+            this.titleSection(),
+            this.materialsCollection(),
+            this.editingControl,
+            this.buttons(),
+        );
+    }
+
+    private titleSection() {
+        return div(
+            { className: style.title },
+            span({ textContent: new Localize("common.material") }),
+            this.iconButton("icon-plus", () => this.dataContent.addMaterial()),
+            this.iconButton("icon-clone", () => this.dataContent.copyMaterial()),
+            this.iconButton("icon-trash", () => this.dataContent.deleteMaterial()),
+        );
+    }
+
+    private iconButton(icon: string, onclick: () => void) {
+        return svg({ icon, onclick });
+    }
+
+    private materialsCollection() {
+        return collection({
+            className: style.materials,
+            sources: this.dataContent.document.modelManager.materials,
+            template: (material: Material) => this.material(material),
+        });
+    }
+
+    private material(material: Material) {
+        return span({
+            className: new Binding(this.dataContent, "editingMaterial", new ActiveStyleConverter(material)),
+            title: material.name,
+            style: {
+                backgroundColor: new Binding(material, "color", this.colorConverter),
+                backgroundImage: new PathBinding(material, "map.image", new UrlStringConverter()),
+                backgroundBlendMode: "multiply",
+                backgroundSize: "contain",
+            },
+            onclick: () => {
+                this.dataContent.editingMaterial = material;
+            },
+            ondblclick: () => {
+                this.dataContent.callback(material);
+                this.remove();
+            },
+        });
+    }
+
+    private buttons() {
+        return div(
+            { className: style.bottom },
+            button({
+                textContent: new Localize("common.confirm"),
+                onclick: () => {
+                    this.dataContent.callback(this.dataContent.editingMaterial);
+                    this.remove();
+                },
+            }),
+            button({
+                textContent: new Localize("common.cancel"),
+                onclick: () => this.remove(),
+            }),
+        );
+    }
+
+    connectedCallback() {
+        this.dataContent.onPropertyChanged(this._onEditingMaterialChanged);
+        PubSub.default.sub("showProperties", this._handleShowProperty);
+    }
+
+    disconnectedCallback() {
+        PubSub.default.remove("showProperties", this._handleShowProperty);
+    }
+
+    private readonly _handleShowProperty = () => {
+        this.remove();
+    };
+
+    private readonly _onEditingMaterialChanged = (property: keyof MaterialDataContent) => {
+        if (property !== "editingMaterial") return;
+        this.editingControl.firstChild?.remove();
+        this.initEditingControl(this.dataContent.editingMaterial);
+    };
+
+    private initEditingControl(material: Material) {
+        this.editingControl.innerHTML = "";
+
+        const isTexture = (p: Property) => {
+            return (material as any)[p.name] instanceof Texture;
+        };
+
+        const properties = Property.getProperties(material);
+        this.editingControl.append(
+            ...properties
+                .filter((x) => !isTexture(x))
+                .map((x) => findPropertyControl(this.dataContent.document, [material], x)),
+            ...properties
+                .filter(isTexture)
+                .map((x) => findPropertyControl(this.dataContent.document, [material], x)),
+        );
+    }
+}
+
+customElements.define("material-editor", MaterialEditor);

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

@@ -0,0 +1,46 @@
+.root {
+    margin-top: 8px;
+}
+
+.expander {
+    display: flex;
+    flex-direction: row;
+}
+
+.properties {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.image {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 4px;
+    border-radius: 8px;
+    position: relative;
+    margin-left: 16px;
+
+    &:hover {
+        --delete-visiblity: visible;
+    }
+
+    img {
+        width: 96px;
+        height: 96px;
+        border-radius: 4px;
+    }
+
+    svg {
+        position: absolute;
+        background-color: rgba(255, 0, 0, 0.45);
+        border-radius: 50%;
+        padding: 4px;
+        top: 2px;
+        right: 2px;
+        width: 16px;
+        height: 16px;
+        visibility: var(--delete-visiblity);
+    }
+}

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

@@ -0,0 +1,61 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, Expander, img, svg } from "chili-controls";
+import { UrlStringConverter } from "chili-controls/src/converters/urlConverter";
+import {
+    type I18nKeys,
+    type IDocument,
+    PathBinding,
+    Property,
+    readFileAsync,
+    type Texture,
+} from "chili-core";
+import { findPropertyControl } from "../utils";
+import style from "./textureEditor.module.css";
+
+export class TextureProperty extends Expander {
+    constructor(
+        readonly document: IDocument,
+        display: I18nKeys,
+        readonly texture: Texture,
+    ) {
+        super(display);
+        this.classList.add(style.root);
+        this.append(this.render());
+    }
+
+    private render() {
+        const properties = Property.getProperties(this.texture)
+            .filter((x) => (x.name as keyof Texture) !== "image")
+            .map((x) => findPropertyControl(this.document, [this.texture], x));
+
+        return div(
+            { className: style.expander },
+            div({ className: style.properties }, ...properties),
+            div(
+                { className: style.image },
+                img({
+                    style: {
+                        backgroundImage: new PathBinding(this.texture, "image", new UrlStringConverter()),
+                        backgroundSize: "contain",
+                    },
+                    onclick: this.selectTexture,
+                }),
+                svg({
+                    icon: "icon-times",
+                    onclick: () => {
+                        this.texture.image = "";
+                    },
+                }),
+            ),
+        );
+    }
+
+    private readonly selectTexture = async () => {
+        const file = await readFileAsync(".png, .jpg, .jpeg", false, "readAsDataURL");
+        this.texture.image = file.value[0].data;
+    };
+}
+
+customElements.define("texture-editor", TextureProperty);

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

@@ -0,0 +1,30 @@
+.material {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 4px;
+
+    div {
+        font-size: 14px;
+        opacity: 0.75;
+        color: var(--color);
+        min-width: 72px;
+        flex: 0 1 auto;
+    }
+
+    button {
+        flex: 1 1 auto;
+        font-size: 1rem;
+        padding: 4px;
+        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/property/materialProperty.ts

@@ -0,0 +1,86 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { button, ColorConverter, collection, div, span, UrlStringConverter } from "chili-controls";
+import {
+    Binding,
+    type IDocument,
+    Localize,
+    type Material,
+    ObservableCollection,
+    PathBinding,
+    type Property,
+    PubSub,
+    Transaction,
+} from "chili-core";
+import style from "./materialProperty.module.css";
+import { PropertyBase } from "./propertyBase";
+
+export class MaterialProperty extends PropertyBase {
+    private readonly materials: ObservableCollection<Material>;
+
+    constructor(
+        readonly document: IDocument,
+        objects: { materialId: string | string[] }[],
+        readonly property: Property,
+    ) {
+        super(objects);
+        this.materials = this.materialCollection(objects[0].materialId);
+        this.append(
+            collection({
+                sources: this.materials,
+                template: (material, index) => this.materialControl(document, material, index),
+            }),
+        );
+    }
+
+    private materialControl(document: IDocument, material: Material, index: number) {
+        return div(
+            { className: style.material },
+            div(
+                span({ textContent: new Localize("common.material") }),
+                this.materials.length > 1 ? span({ textContent: ` ${index + 1}` }) : "",
+            ),
+            button({
+                textContent: material.name,
+                style: {
+                    backgroundColor: new Binding(material, "color", new ColorConverter()),
+                    backgroundImage: new PathBinding(material, "map.image", new UrlStringConverter()),
+                    backgroundBlendMode: "multiply",
+                    backgroundSize: "cover",
+                    cursor: "pointer",
+                },
+                onclick: (e) => {
+                    PubSub.default.pub("editMaterial", document, material, (material) => {
+                        this.setMaterial(e, material, index);
+                    });
+                },
+            }),
+        );
+    }
+
+    private setMaterial(e: MouseEvent, material: Material, index: number) {
+        Transaction.execute(this.document, "change material", () => {
+            this.materials.replace(index, material);
+            this.objects.forEach((x) => {
+                if (this.property.name in x) {
+                    x.materialId =
+                        this.materials.length > 1
+                            ? x.materialId.toSpliced(index, 1, material.id)
+                            : material.id;
+                }
+            });
+        });
+        this.document.visual.update();
+    }
+
+    private materialCollection(id: string | string[]) {
+        const findMaterial = (id: string) => this.document.modelManager.materials.find((m) => m.id === id);
+        const materials = Array.isArray(id)
+            ? id.map(findMaterial).filter(Boolean)
+            : [findMaterial(id)].filter(Boolean);
+        return new ObservableCollection(...materials) as ObservableCollection<Material>;
+    }
+}
+
+customElements.define("chili-material-property", MaterialProperty);

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

@@ -0,0 +1,147 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    type GroupNode,
+    type IConverter,
+    type IDocument,
+    Matrix4,
+    Result,
+    type VisualNode,
+    type XYZLike,
+} from "chili-core";
+import { InputProperty } from "./input";
+import { PropertyBase } from "./propertyBase";
+
+export class MatrixProperty extends PropertyBase {
+    readonly first: VisualNode | GroupNode;
+
+    constructor(
+        readonly document: IDocument,
+        geometries: (VisualNode | GroupNode)[],
+        className: string,
+    ) {
+        super(geometries);
+        this.first = geometries[0];
+        this.className = className;
+        this.append(
+            new InputProperty(
+                document,
+                [this.first],
+                {
+                    name: "transform",
+                    display: "transform.translation",
+                },
+                new TranslationConverter(this.first),
+            ),
+            new InputProperty(
+                document,
+                [this.first],
+                {
+                    name: "transform",
+                    display: "transform.scale",
+                },
+                new ScalingConverter(this.first),
+            ),
+            new InputProperty(
+                document,
+                [this.first],
+                {
+                    name: "transform",
+                    display: "transform.rotation",
+                },
+                new RotateConverter(this.first),
+            ),
+        );
+    }
+
+    private readonly onPropertyChanged = (property: keyof (VisualNode | GroupNode)) => {
+        if (property === "transform") {
+            this.objects.forEach((obj) => {
+                if (obj === this.first) return;
+                obj.transform = this.first.transform;
+            });
+        }
+    };
+
+    connectedCallback() {
+        (this.first as VisualNode).onPropertyChanged(this.onPropertyChanged);
+    }
+
+    disconnectedCallback() {
+        (this.first as VisualNode).removePropertyChanged(this.onPropertyChanged);
+    }
+}
+
+customElements.define("matrix-property", MatrixProperty);
+
+export abstract class MatrixConverter implements IConverter<Matrix4, string> {
+    constructor(readonly geometry: VisualNode | GroupNode) {}
+
+    convert(value: Matrix4): Result<string, string> {
+        const [x, y, z] = this.convertFrom(value);
+        return Result.ok(`${x.toFixed(6)}, ${y.toFixed(6)}, ${z.toFixed(6)}`);
+    }
+
+    protected abstract convertFrom(value: Matrix4): [number, number, number];
+    protected abstract convertTo(values: XYZLike): Matrix4;
+
+    convertBack(value: string): Result<Matrix4, string> {
+        const values = value
+            .split(",")
+            .map(Number)
+            .filter((x) => !isNaN(x));
+        if (values.length !== 3) return Result.err("invalid number of values");
+        const newValue = {
+            x: values[0],
+            y: values[1],
+            z: values[2],
+        };
+        const matrix = this.convertTo(newValue);
+        return Result.ok(matrix);
+    }
+}
+
+export class TranslationConverter extends MatrixConverter {
+    protected convertFrom(matrix: Matrix4): [number, number, number] {
+        const position = matrix.translationPart();
+        return [position.x, position.y, position.z];
+    }
+    protected convertTo(values: XYZLike): Matrix4 {
+        const rotation = this.geometry.transform.getEulerAngles();
+        const scale = this.geometry.transform.getScale();
+        return Matrix4.createFromTRS(values, rotation, scale);
+    }
+}
+
+export class ScalingConverter extends MatrixConverter {
+    protected convertFrom(matrix: Matrix4): [number, number, number] {
+        const s = matrix.getScale();
+        return [s.x, s.y, s.z];
+    }
+    protected convertTo(values: XYZLike): Matrix4 {
+        const rotation = this.geometry.transform.getEulerAngles();
+        const translation = this.geometry.transform.translationPart();
+        return Matrix4.createFromTRS(translation, rotation, values);
+    }
+}
+
+export class RotateConverter extends MatrixConverter {
+    protected convertFrom(matrix: Matrix4): [number, number, number] {
+        const s = matrix.getEulerAngles();
+        return [(s.pitch * 180) / Math.PI, (s.yaw * 180) / Math.PI, (s.roll * 180) / Math.PI];
+    }
+    protected convertTo(values: XYZLike): Matrix4 {
+        const scale = this.geometry.transform.getScale();
+        const translation = this.geometry.transform.translationPart();
+        return Matrix4.createFromTRS(
+            translation,
+            {
+                pitch: (values.x * Math.PI) / 180,
+                yaw: (values.y * Math.PI) / 180,
+                roll: (values.z * Math.PI) / 180,
+            },
+            scale,
+        );
+    }
+}

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

@@ -0,0 +1,3 @@
+.panel {
+    margin: 3px 0;
+}

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

@@ -0,0 +1,14 @@
+// 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 "./propertyBase.module.css";
+
+export abstract class PropertyBase extends HTMLElement {
+    constructor(readonly objects: any[]) {
+        super();
+        this.className = style.panel;
+        if (objects.length === 0) {
+            throw new Error(`there are no objects`);
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+.root {
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    margin: 2px 18px;
+    font-size: 1.15rem;
+    font-weight: bold;
+    flex: 0;
+}
+
+.panel {
+    flex: 1;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    overflow-y: auto;
+    border-top: 2px solid transparent;
+    border-bottom: 2px solid transparent;
+    background-color: var(--panel-background-color);
+}
+
+.properties {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.name {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 10px;
+    align-items: center;
+}

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

@@ -0,0 +1,115 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { div, Expander, label } from "chili-controls";
+import {
+    FolderNode,
+    GroupNode,
+    type IDocument,
+    type INode,
+    type IView,
+    Localize,
+    Node,
+    Property,
+    PubSub,
+    VisualNode,
+} from "chili-core";
+import { MatrixProperty } from "./matrixProperty";
+import style from "./propertyView.module.css";
+import { findPropertyControl } from "./utils";
+
+export class PropertyView extends HTMLElement {
+    private readonly panel = div({ className: style.panel });
+
+    constructor(props: { className: string }) {
+        super();
+        this.classList.add(props.className, style.root);
+        this.append(
+            label({
+                className: style.header,
+                textContent: new Localize("properties.header"),
+            }),
+            this.panel,
+        );
+        PubSub.default.sub("showProperties", this.handleShowProperties);
+        PubSub.default.sub("activeViewChanged", this.handleActiveViewChanged);
+    }
+
+    private readonly handleActiveViewChanged = (view: IView | undefined) => {
+        if (view) {
+            const nodes = view.document.selection.getSelectedNodes();
+            this.handleShowProperties(view.document, nodes);
+        }
+    };
+
+    private readonly handleShowProperties = (document: IDocument, nodes: INode[]) => {
+        this.removeProperties();
+        if (nodes.length === 0) return;
+        this.addModel(document, nodes);
+        this.addGeometry(nodes, document);
+    };
+
+    private removeProperties() {
+        while (this.panel.lastElementChild) {
+            this.panel.removeChild(this.panel.lastElementChild);
+        }
+    }
+
+    private addModel(document: IDocument, nodes: INode[]) {
+        if (nodes.length === 0) return;
+
+        let controls: (HTMLElement | string)[] = [];
+        if (nodes[0] instanceof FolderNode) {
+            controls = Property.getProperties(Object.getPrototypeOf(nodes[0])).map((x) =>
+                findPropertyControl(document, nodes, x),
+            );
+        } else if (nodes[0] instanceof Node) {
+            controls = Property.getOwnProperties(Node.prototype).map((x) =>
+                findPropertyControl(document, nodes, x),
+            );
+        }
+
+        this.panel.append(div({ className: style.properties }, ...controls));
+    }
+
+    private addGeometry(nodes: INode[], document: IDocument) {
+        const geometries = nodes.filter((x) => x instanceof VisualNode || x instanceof GroupNode);
+        if (geometries.length === 0 || !this.isAllElementsOfTypeFirstElement(geometries)) return;
+        this.addTransform(document, geometries);
+        this.addParameters(geometries, document);
+    }
+
+    private addTransform(document: IDocument, geometries: (VisualNode | GroupNode)[]) {
+        const matrix = new Expander("common.matrix");
+        this.panel.append(matrix);
+
+        matrix.contenxtPanel.append(new MatrixProperty(document, geometries, style.properties));
+    }
+
+    private addParameters(geometries: (VisualNode | GroupNode)[], document: IDocument) {
+        const entities = geometries.filter((x) => x instanceof VisualNode);
+        if (entities.length === 0 || !this.isAllElementsOfTypeFirstElement(entities)) return;
+        const parameters = new Expander(entities[0].display());
+        parameters.contenxtPanel.append(
+            ...Property.getProperties(Object.getPrototypeOf(entities[0]), Node.prototype).map((x) =>
+                findPropertyControl(document, entities, x),
+            ),
+        );
+        this.panel.append(parameters);
+    }
+
+    private isAllElementsOfTypeFirstElement(arr: any[]): boolean {
+        if (arr.length <= 1) {
+            return true;
+        }
+        const firstElementType = Object.getPrototypeOf(arr[0]).constructor;
+        for (let i = 1; i < arr.length; i++) {
+            if (Object.getPrototypeOf(arr[i]).constructor !== firstElementType) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+
+customElements.define("chili-property-view", PropertyView);