chili3d 0.6.1

package/packages/chili-controls/src/controls.ts

@@ -0,0 +1,83 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { Localize } from "chili-core";
+import { Collection, type CollectionProps } from "./collection";
+import type { HTMLProps } from "./htmlProps";
+import { setProperties } from "./utils";
+
+export function createControl<K extends keyof HTMLElementTagNameMap>(tag: K) {
+    return (
+        props?: HTMLProps<HTMLElementTagNameMap[K]> | string | Node,
+        ...children: (Node | string)[]
+    ): HTMLElementTagNameMap[K] => {
+        const e: HTMLElementTagNameMap[K] = document.createElement(tag);
+        if (props) {
+            if (typeof props === "string" || props instanceof Node) {
+                e.append(props);
+            } else {
+                setProperties(e, props);
+            }
+        }
+        children.forEach((c) => e.append(c));
+        return e;
+    };
+}
+
+export const div = createControl("div");
+export const span = createControl("span");
+export const input = createControl("input");
+export const button = createControl("button");
+export const label = createControl("label");
+export const textarea = createControl("textarea");
+export const select = createControl("select");
+export const option = createControl("option");
+export const a = createControl("a");
+export const h1 = createControl("h1");
+export const h2 = createControl("h2");
+export const h3 = createControl("h3");
+export const p = createControl("p");
+export const ul = createControl("ul");
+export const li = createControl("li");
+export const img = createControl("img");
+export const dialog = createControl("dialog");
+export const canvas = createControl("canvas");
+export const sup = createControl("sup");
+export const form = createControl("form");
+export const br = createControl("br");
+
+export function svg(props: HTMLProps<HTMLElement> & { icon: string }) {
+    const ns = "http://www.w3.org/2000/svg";
+    const child = document.createElementNS(ns, "use");
+    child.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", `#${props.icon}`);
+    const svg = document.createElementNS(ns, "svg");
+    svg.append(child);
+    const className = String(props.className);
+    delete props.className;
+    setProperties(svg, props);
+    svg.classList.add(className);
+    if (props.title) {
+        addTitle(props, svg);
+    }
+    return svg;
+}
+
+export function setSVGIcon(svg: SVGSVGElement, newIcon: string) {
+    const child = svg.firstChild as SVGUseElement;
+    child?.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", `#${newIcon}`);
+}
+
+function addTitle(props: HTMLProps<HTMLElement> & { icon: string }, svg: SVGSVGElement) {
+    const title = document.createElementNS("http://www.w3.org/2000/svg", "title");
+    if (props.title instanceof Localize) {
+        props.title.set(title as any, "textContent");
+    } else if (typeof props.title === "string") {
+        title.textContent = props.title;
+    } else {
+        props.title?.setBinding(title, "textContent");
+    }
+
+    svg.appendChild(title);
+}
+
+export const collection = <T>(options: CollectionProps<T>) => new Collection(options);

package/packages/chili-controls/src/converters/colorConverter.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 { type IConverter, Result } from "chili-core";
+
+export class ColorConverter implements IConverter<number | string> {
+    convert(value: number | string): Result<string> {
+        // Handle undefined, null, or invalid values
+        if (value === undefined || value === null) {
+            return Result.ok("#808080"); // Default gray color
+        }
+
+        if (typeof value === "string") {
+            // If it's already a valid hex string, return it
+            if (value.startsWith("#") && /^#[0-9A-Fa-f]{6}$/.test(value)) {
+                return Result.ok(value);
+            }
+            // If it's a hex string without #, add it
+            if (/^[0-9A-Fa-f]{6}$/.test(value)) {
+                return Result.ok(`#${value}`);
+            }
+            // If it's an empty string or invalid, use default
+            return Result.ok("#808080");
+        }
+
+        if (typeof value === "number" && !isNaN(value)) {
+            return Result.ok(`#${value.toString(16).padStart(6, "0")}`);
+        }
+
+        // Fallback for any other invalid values
+        return Result.ok("#808080");
+    }
+
+    convertBack(value: string): Result<number> {
+        const hexValue = value.startsWith("#") ? value.substring(1) : value;
+        const result = parseInt(hexValue, 16);
+        return Number.isNaN(result) ? Result.err(`Invalid hex string: ${value}`) : Result.ok(result);
+    }
+}

package/packages/chili-controls/src/converters/index.ts

@@ -0,0 +1,8 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./colorConverter";
+export * from "./numberConverter";
+export * from "./stringConverter";
+export * from "./urlConverter";
+export * from "./xyzConverter";

package/packages/chili-controls/src/converters/numberConverter.ts

@@ -0,0 +1,15 @@
+// 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, Result } from "chili-core";
+
+export class NumberConverter implements IConverter<number> {
+    convert(value: number): Result<string> {
+        return Number.isNaN(value) ? Result.err("Number is NaN") : Result.ok(String(value));
+    }
+
+    convertBack(value: string): Result<number> {
+        const n = Number(value);
+        return Number.isNaN(n) ? Result.err(`${value} can not convert to number`) : Result.ok(n);
+    }
+}

package/packages/chili-controls/src/converters/stringConverter.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 { type IConverter, Result } from "chili-core";
+
+export class StringConverter implements IConverter<string> {
+    convert(value: string): Result<string> {
+        return Result.ok(value);
+    }
+    convertBack(value: string): Result<string> {
+        return Result.ok(value);
+    }
+}

package/packages/chili-controls/src/converters/urlConverter.ts

@@ -0,0 +1,10 @@
+// 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, Result } from "chili-core";
+
+export class UrlStringConverter implements IConverter<string> {
+    convert(value: string): Result<string> {
+        return Result.ok(`url('${value}')`);
+    }
+}

package/packages/chili-controls/src/converters/xyzConverter.ts

@@ -0,0 +1,28 @@
+// 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, Result, XY, XYZ } from "chili-core";
+
+export class XYConverter implements IConverter<XY> {
+    convert(value: XY) {
+        return Result.ok(`${value.x},${value.y}`);
+    }
+
+    convertBack(value: string): Result<XY> {
+        const vs = value.split(",").map(Number).filter(isFinite);
+        return vs.length === 2 ? Result.ok(new XY(vs[0], vs[1])) : Result.err(`${value} convert to XY error`);
+    }
+}
+
+export class XYZConverter implements IConverter<XYZ> {
+    convert(value: XYZ) {
+        return Result.ok(`${value.x},${value.y},${value.z}`);
+    }
+
+    convertBack(value: string): Result<XYZ> {
+        const vs = value.split(",").map(Number).filter(isFinite);
+        return vs.length === 3
+            ? Result.ok(new XYZ(vs[0], vs[1], vs[2]))
+            : Result.err(`${value} convert to XYZ error`);
+    }
+}

package/packages/chili-controls/src/expander/expander.module.css

@@ -0,0 +1,38 @@
+.rootPanel {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+}
+
+.headerPanel {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 4px 6px;
+    background-color: var(--border-color);
+}
+
+.headerPanel:hover {
+    background-color: var(--hover-background-color);
+}
+
+.contextPanel {
+    display: flex;
+    flex-direction: column;
+    padding: 8px 16px;
+}
+
+.expanderIcon {
+    width: 12px;
+    height: 12px;
+    margin-right: 12px;
+}
+
+.headerText {
+    font-size: 14px;
+}
+
+.hidden {
+    display: none;
+}

package/packages/chili-controls/src/expander/expander.ts

@@ -0,0 +1,59 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { type I18nKeys, Localize } from "chili-core";
+import { div, label, setSVGIcon, svg } from "../controls";
+import style from "./expander.module.css";
+
+export class Expander extends HTMLElement {
+    private _isExpanded = true;
+    private readonly expanderIcon: SVGSVGElement;
+    private readonly headerPanel = div({ className: style.headerPanel });
+    readonly contenxtPanel = div({ className: style.contextPanel });
+
+    constructor(header: I18nKeys) {
+        super();
+        this.className = style.rootPanel;
+        this.expanderIcon = svg({
+            icon: this.getExpanderIcon(),
+            className: style.expanderIcon,
+            onclick: this._handleExpanderClick,
+        });
+        const text = label({
+            textContent: new Localize(header),
+            className: style.headerText,
+        });
+        this.headerPanel.append(this.expanderIcon, text);
+        super.append(this.headerPanel, this.contenxtPanel);
+    }
+
+    override appendChild<T extends Node>(node: T): T {
+        return this.contenxtPanel.appendChild(node);
+    }
+
+    override append(...nodes: Node[]): void {
+        this.contenxtPanel.append(...nodes);
+    }
+
+    override removeChild<T extends Node>(child: T): T {
+        return this.contenxtPanel.removeChild(child);
+    }
+
+    addItem(...nodes: Node[]) {
+        this.append(...nodes);
+        return this;
+    }
+
+    private getExpanderIcon() {
+        return this._isExpanded ? "icon-angle-down" : "icon-angle-right";
+    }
+
+    private readonly _handleExpanderClick = (e: MouseEvent) => {
+        e.stopPropagation();
+        this._isExpanded = !this._isExpanded;
+        setSVGIcon(this.expanderIcon, this.getExpanderIcon());
+        this.contenxtPanel.classList.toggle(style.hidden, !this._isExpanded);
+    };
+}
+
+customElements.define("chili-expander", Expander);

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

package/packages/chili-controls/src/htmlProps.ts

@@ -0,0 +1,10 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import type { IPropertyChanged, Localize, PathBinding } from "chili-core";
+
+export type HTMLProps<T> = {
+    [P in keyof T]?: T[P] extends object
+        ? HTMLProps<T[P]>
+        : (T[P] | PathBinding<IPropertyChanged>) | (P extends "textContent" | "title" ? Localize : never);
+};

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

@@ -0,0 +1,10 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+export * from "./collection";
+export * from "./controls";
+export * from "./converters";
+export * from "./expander";
+export * from "./htmlProps";
+export * from "./radioGroup";
+export * from "./utils";

package/packages/chili-controls/src/radioGroup.module.css

@@ -0,0 +1,20 @@
+.radioGroup {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-items: center;
+
+    input {
+        font-size: 1em;
+        width: 1.5em;
+        height: 1.5em;
+        justify-content: center;
+    }
+
+    label {
+        justify-content: center;
+        font-size: 1em;
+        margin-left: 2px;
+        margin-right: 16px;
+    }
+}

package/packages/chili-controls/src/radioGroup.ts

@@ -0,0 +1,54 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import type { SelectableItems } from "chili-core";
+import { div, input, label } from "./controls";
+import style from "./radioGroup.module.css";
+
+export class RadioGroup extends HTMLElement {
+    constructor(
+        readonly header: string,
+        readonly context: SelectableItems<any>,
+    ) {
+        super();
+        this.appendChild(this.render());
+    }
+
+    render() {
+        return div(
+            { className: style.radioGroup },
+            ...this.context.items.flatMap((x, i) => [
+                input({
+                    type: "radio",
+                    value: x,
+                    checked: this.context.selectedItems.has(x),
+                    id: `radio-${i}`,
+                }),
+                label({
+                    htmlFor: `radio-${i}`,
+                    textContent: x,
+                }),
+            ]),
+        );
+    }
+
+    connectedCallback() {
+        this.addEventListener("click", this._onClick);
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener("click", this._onClick);
+    }
+
+    private readonly _onClick = (e: MouseEvent) => {
+        const target = e.target as HTMLInputElement;
+        if (target?.type === "radio") {
+            this.querySelectorAll("input").forEach((x) => {
+                x.checked = x === target;
+            });
+            this.context.selectedItems = new Set([target.value]);
+        }
+    };
+}
+
+customElements.define("chili-radios", RadioGroup);

package/packages/chili-controls/src/utils.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 { Localize, PathBinding } from "chili-core";
+import type { HTMLProps } from "./htmlProps";
+
+export function setProperties<T extends { [K: string]: any }>(left: T, prop: HTMLProps<T>) {
+    for (const key in prop) {
+        const value = prop[key];
+        if (value instanceof Localize && (key === "textContent" || key === "title")) {
+            value.set(left, key);
+        } else if (value instanceof PathBinding) {
+            value.setBinding(left, key);
+        } else if (typeof value === "object" && typeof left[key] === "object") {
+            setProperties(left[key], value);
+        } else {
+            (left as any)[key] = value;
+        }
+    }
+}

package/packages/chili-controls/test/converter.test.ts

@@ -0,0 +1,70 @@
+// 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, XYZ } from "chili-core";
+import { ColorConverter } from "../src/converters/colorConverter";
+import { NumberConverter } from "../src/converters/numberConverter";
+import { StringConverter } from "../src/converters/stringConverter";
+import { XYZConverter } from "../src/converters/xyzConverter";
+
+describe("converter test", () => {
+    test("test type", () => {
+        const converters = [new XYZConverter(), new NumberConverter()];
+        expect(converters.every((x) => (x as IConverter).convert !== undefined)).toBeTruthy();
+    });
+
+    test("test XYZConverter", () => {
+        const converter = new XYZConverter();
+        const xyz = XYZ.unitX;
+        const c = converter.convert(xyz);
+        expect(c.value).toStrictEqual("1,0,0");
+        expect(converter.convertBack(c.value).value.x).toBe(1);
+        expect(converter.convertBack("1").isOk).toBe(false);
+        expect(converter.convertBack("1, 1, 1, 1").isOk).toBe(false);
+        expect(converter.convertBack("1, 1, 1").value).toStrictEqual(new XYZ(1, 1, 1));
+    });
+
+    test("test NumberConverter", () => {
+        const converter = new NumberConverter();
+        expect(converter.convert(Number.NaN).isOk).toBe(false);
+        expect(converter.convert(-20).value).toBe("-20");
+        expect(converter.convert(20).value).toBe("20");
+        expect(converter.convert(1e3).value).toBe("1000");
+        expect(converter.convertBack("NaN").isOk).toBeFalsy();
+        expect(converter.convertBack("1a").isOk).toBeFalsy();
+        expect(converter.convertBack("1E-3").value).toBe(0.001);
+        expect(converter.convertBack("-3").value).toBe(-3);
+    });
+
+    test("test StringConverter", () => {
+        const converter = new StringConverter();
+        expect(converter.convert("").value).toBe("");
+        expect(converter.convertBack("").value).toBe("");
+    });
+
+    test("test ColorConverter", () => {
+        const converter = new ColorConverter();
+
+        // Test normal number conversion
+        expect(converter.convert(0xff0000).value).toBe("#ff0000");
+        expect(converter.convert(255).value).toBe("#0000ff");
+        expect(converter.convert(0).value).toBe("#000000");
+
+        // Test string conversion
+        expect(converter.convert("#ff0000").value).toBe("#ff0000");
+        expect(converter.convert("ff0000").value).toBe("#ff0000");
+        expect(converter.convert("#FF0000").value).toBe("#FF0000");
+
+        // Test undefined and null handling (NEW)
+        expect(converter.convert(undefined as any).value).toBe("#808080");
+        expect(converter.convert(null as any).value).toBe("#808080");
+        expect(converter.convert("" as any).value).toBe("#808080");
+        expect(converter.convert("invalid" as any).value).toBe("#808080");
+        expect(converter.convert(NaN as any).value).toBe("#808080");
+
+        // Test convertBack
+        expect(converter.convertBack("#ff0000").value).toBe(0xff0000);
+        expect(converter.convertBack("ff0000").value).toBe(0xff0000);
+        expect(converter.convertBack("invalid").isOk).toBe(false);
+    });
+});

package/packages/chili-controls/test/styleMock.js

@@ -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.
+
+module.exports = {};

package/packages/chili-core/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "chili-core",
+  "version": "0.6.1",
+  "description": "",
+  "main": "src/index.ts",
+  "devDependencies": {}
+}

package/packages/chili-core/src/application.ts

@@ -0,0 +1,38 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import type { ICommand } from "./command";
+import type { IDataExchange } from "./dataExchange";
+import type { IDocument } from "./document";
+import type { IStorage, ObservableCollection } from "./foundation";
+import type { Serialized } from "./serialize";
+import type { IService } from "./service";
+import type { IShapeFactory } from "./shape";
+import type { IWindow } from "./ui/window";
+import type { IView, IVisualFactory } from "./visual";
+
+export interface IApplication {
+    readonly mainWindow?: IWindow;
+    readonly dataExchange: IDataExchange;
+    readonly visualFactory: IVisualFactory;
+    readonly shapeFactory: IShapeFactory;
+    readonly services: IService[];
+    readonly storage: IStorage;
+    readonly views: ObservableCollection<IView>;
+    readonly documents: Set<IDocument>;
+    executingCommand: ICommand | undefined;
+    activeView: IView | undefined;
+    newDocument(name: string): Promise<IDocument>;
+    openDocument(id: string): Promise<IDocument | undefined>;
+    loadDocument(data: Serialized): Promise<IDocument | undefined>;
+    loadFileFromUrl(url: string): Promise<void>;
+}
+
+let currentApplication: IApplication | undefined;
+export function getCurrentApplication() {
+    return currentApplication;
+}
+
+export function setCurrentApplication(app: IApplication): void {
+    currentApplication = app;
+}