chili3d 0.6.1

package/packages/chili/src/utils.ts

@@ -0,0 +1,19 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { I18n, type IApplication, PubSub, Transaction } from "chili-core";
+
+export async function importFiles(application: IApplication, files: File[] | FileList) {
+    const document = application.activeView?.document ?? (await application.newDocument("Untitled"));
+    PubSub.default.pub(
+        "showPermanent",
+        async () => {
+            await Transaction.executeAsync(document, "import model", async () => {
+                await document.application.dataExchange.import(document, files);
+            });
+            document.application.activeView?.cameraController.fitContent();
+        },
+        "toast.excuting{0}",
+        I18n.translate("command.file.import"),
+    );
+}

package/packages/chili/test/command.test.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.
+
+test("test command", () => {});

package/packages/chili-builder/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "chili-builder",
+  "version": "0.6.1",
+  "description": "",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "chili": "*",
+    "chili-i18n": "*",
+    "chili-three": "*",
+    "chili-ui": "*",
+    "chili-wasm": "*"
+  }
+}

package/packages/chili-builder/src/additionalModule.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 { CommandKeys, I18nKeys, Locale } from "chili-core";
+
+export interface AdditionalCommand {
+    tabName: I18nKeys;
+    groupName: I18nKeys;
+    command: CommandKeys;
+}
+
+export interface IAdditionalModule {
+    i18n(): Locale[];
+    ribbonCommands(): AdditionalCommand[];
+}

package/packages/chili-builder/src/appBuilder.ts

@@ -0,0 +1,176 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { Application, CommandService, EditEventHandler, EditorService, HotkeyService } from "chili";
+import {
+    Config,
+    I18n,
+    type IApplication,
+    type IDataExchange,
+    type IDocument,
+    type INode,
+    type IService,
+    type IShapeFactory,
+    type IStorage,
+    type IVisualFactory,
+    type IWindow,
+    type Locale,
+    Logger,
+} from "chili-core";
+import type { IAdditionalModule } from "./additionalModule";
+import { DefaultDataExchange } from "./defaultDataExchange";
+
+export class AppBuilder {
+    protected readonly _inits: (() => Promise<void>)[] = [];
+    protected readonly _additionalModules: IAdditionalModule[] = [];
+    protected _storage?: IStorage;
+    protected _visualFactory?: IVisualFactory;
+    protected _shapeFactory?: IShapeFactory;
+    protected _window?: IWindow;
+
+    constructor() {
+        this.initI18n();
+        this.initConfig();
+    }
+
+    protected initConfig() {
+        Config.instance.init("config");
+        return this;
+    }
+
+    protected initI18n() {
+        this._inits.push(async () => {
+            Logger.info("initializing i18n");
+
+            const i18n = await import("chili-i18n");
+            for (const key of Object.keys(i18n)) {
+                I18n.addLanguage((i18n as { [key: string]: Locale })[key]);
+            }
+        });
+    }
+
+    useIndexedDB() {
+        this._inits.push(async () => {
+            Logger.info("initializing IndexedDBStorage");
+
+            const db = await import("chili-storage");
+            this._storage = new db.IndexedDBStorage();
+        });
+        return this;
+    }
+
+    useWasmOcc() {
+        this._inits.push(async () => {
+            Logger.info("initializing wasm occ");
+
+            const wasm = await import("chili-wasm");
+            await wasm.initWasm();
+            this._shapeFactory = new wasm.ShapeFactory();
+        });
+        return this;
+    }
+
+    useThree(): this {
+        this._inits.push(async () => {
+            Logger.info("initializing three");
+
+            const three = await import("chili-three");
+            this._visualFactory = new three.ThreeVisulFactory();
+        });
+        return this;
+    }
+
+    useUI(): this {
+        this._inits.push(async () => {
+            Logger.info("initializing MainWindow");
+
+            this.loadAdditionalI18n();
+
+            const ui = await import("chili-ui");
+            const app = document.getElementById("app") as HTMLElement;
+            this._window = new ui.MainWindow(await this.getRibbonTabs(), "iconfont.js", app);
+        });
+        return this;
+    }
+
+    addAdditionalModules(...modules: IAdditionalModule[]): this {
+        this._additionalModules.push(...modules);
+        return this;
+    }
+
+    async getRibbonTabs() {
+        const defaultRibbon = await import("./ribbon");
+        return defaultRibbon.DefaultRibbon;
+    }
+
+    async build(): Promise<IApplication> {
+        for (const init of this._inits) {
+            await init();
+        }
+        this.ensureNecessary();
+
+        const app = this.createApp();
+        await this._window?.init(app);
+
+        this.loadAdditionalCommands();
+
+        Logger.info("Application build completed");
+
+        return app;
+    }
+
+    createApp() {
+        return new Application({
+            storage: this._storage!,
+            shapeFactory: this._shapeFactory!,
+            visualFactory: this._visualFactory!,
+            services: this.getServices(),
+            mainWindow: this._window,
+            dataExchange: this.initDataExchange(),
+        });
+    }
+
+    initDataExchange(): IDataExchange {
+        return new DefaultDataExchange();
+    }
+
+    private ensureNecessary() {
+        if (this._shapeFactory === undefined) {
+            throw new Error("ShapeFactory not set");
+        }
+        if (this._visualFactory === undefined) {
+            throw new Error("VisualFactory not set");
+        }
+        if (this._storage === undefined) {
+            throw new Error("storage has not been initialized");
+        }
+    }
+
+    private loadAdditionalI18n() {
+        for (const module of this._additionalModules) {
+            module.i18n().forEach((local) => {
+                I18n.combineTranslation(local.language, local.translation);
+            });
+        }
+    }
+
+    private loadAdditionalCommands() {
+        for (const module of this._additionalModules) {
+            if (this._window) {
+                module.ribbonCommands().forEach((command) => {
+                    this._window!.registerRibbonCommand(command.tabName, command.groupName, command.command);
+                });
+            }
+        }
+    }
+
+    protected getServices(): IService[] {
+        return [
+            new CommandService(),
+            new HotkeyService(),
+            new EditorService((document: IDocument, selected: INode[]) => {
+                return new EditEventHandler(document, selected);
+            }),
+        ];
+    }
+}

package/packages/chili-builder/src/defaultDataExchange.ts

@@ -0,0 +1,152 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import {
+    EditableShapeNode,
+    I18n,
+    type IDataExchange,
+    type IDocument,
+    type INode,
+    type IShape,
+    PubSub,
+    Result,
+    ShapeNode,
+    type VisualNode,
+} from "chili-core";
+
+export class DefaultDataExchange implements IDataExchange {
+    importFormats(): string[] {
+        return [".step", ".stp", ".iges", ".igs", ".brep", ".stl"];
+    }
+
+    exportFormats(): string[] {
+        return [".step", ".iges", ".brep", ".stl", ".stl binary", ".ply", ".ply binary", ".obj"];
+    }
+
+    async import(document: IDocument, files: FileList | File[]): Promise<void> {
+        for (const file of files) {
+            await this.handleSingleFileImport(document, file);
+        }
+    }
+
+    private async handleSingleFileImport(document: IDocument, file: File) {
+        let importResult: Result<INode> | undefined;
+
+        const fileName = file.name.toLocaleLowerCase();
+        if (this.extensionIs(fileName, ".brep")) {
+            importResult = await this.importBrep(document, file);
+        } else if (this.extensionIs(fileName, ".stl")) {
+            importResult = await this.importStl(document, file);
+        } else if (this.extensionIs(fileName, ".step", ".stp")) {
+            importResult = await this.importStep(document, file);
+        } else if (this.extensionIs(fileName, ".iges", ".igs")) {
+            importResult = await this.importIges(document, file);
+        }
+
+        this.handleImportResult(document, fileName, importResult);
+    }
+
+    private extensionIs(fileName: string, ...extensions: string[]): boolean {
+        return extensions.some((ext) => fileName.endsWith(ext));
+    }
+
+    private handleImportResult(document: IDocument, name: string, nodeResult: Result<INode> | undefined) {
+        if (!nodeResult?.isOk) {
+            alert(I18n.translate("error.import.unsupportedFileType:{0}", name));
+            return;
+        }
+
+        const node = nodeResult.value;
+        node.name = name;
+        document.modelManager.addNode(node);
+        document.visual.update();
+    }
+
+    async importBrep(document: IDocument, file: File) {
+        const shape = document.application.shapeFactory.converter.convertFromBrep(await file.text());
+        if (!shape.isOk) {
+            return Result.err(shape.error);
+        }
+        return Result.ok(new EditableShapeNode(document, file.name, shape.value));
+    }
+
+    private async importStl(document: IDocument, file: File) {
+        const content = new Uint8Array(await file.arrayBuffer());
+        return document.application.shapeFactory.converter.convertFromSTL(document, content);
+    }
+
+    private async importIges(document: IDocument, file: File) {
+        const content = new Uint8Array(await file.arrayBuffer());
+        return document.application.shapeFactory.converter.convertFromIGES(document, content);
+    }
+
+    private async importStep(document: IDocument, file: File) {
+        const content = new Uint8Array(await file.arrayBuffer());
+        return document.application.shapeFactory.converter.convertFromSTEP(document, content);
+    }
+
+    async export(type: string, nodes: VisualNode[]): Promise<BlobPart[] | undefined> {
+        if (nodes.length === 0) return undefined;
+
+        const document = nodes[0].document;
+        let shapeResult: Result<BlobPart> | undefined;
+        if (type === ".stl") {
+            shapeResult = document.visual.meshExporter.exportToStl(nodes, true);
+        } else if (type === ".stl binary") {
+            shapeResult = document.visual.meshExporter.exportToStl(nodes, false);
+        } else if (type === ".ply") {
+            shapeResult = document.visual.meshExporter.exportToPly(nodes, true);
+        } else if (type === ".ply binary") {
+            shapeResult = document.visual.meshExporter.exportToPly(nodes, false);
+        } else if (type === ".obj") {
+            shapeResult = document.visual.meshExporter.exportToObj(nodes);
+        } else {
+            const shapes = this.getExportShapes(nodes);
+            if (!shapes.length) return undefined;
+            if (type === ".step") shapeResult = this.exportStep(document, shapes);
+            if (type === ".iges") shapeResult = this.exportIges(document, shapes);
+            if (type === ".brep") shapeResult = this.exportBrep(document, shapes);
+        }
+
+        if (shapeResult) {
+            return this.handleExportResult(shapeResult);
+        }
+        return undefined;
+    }
+
+    private getExportShapes(nodes: VisualNode[]): IShape[] {
+        const shapes = nodes
+            .filter((x): x is ShapeNode => x instanceof ShapeNode)
+            .map((x) => x.shape.value.transformedMul(x.worldTransform()));
+
+        !shapes.length && PubSub.default.pub("showToast", "error.export.noNodeCanBeExported");
+        return shapes;
+    }
+
+    private exportStep(doc: IDocument, shapes: IShape[]) {
+        return doc.application.shapeFactory.converter.convertToSTEP(...shapes);
+    }
+
+    private exportIges(doc: IDocument, shapes: IShape[]) {
+        return doc.application.shapeFactory.converter.convertToIGES(...shapes);
+    }
+
+    private exportBrep(document: IDocument, shapes: IShape[]) {
+        const comp = document.application.shapeFactory.combine(shapes);
+        if (!comp.isOk) {
+            return Result.err(comp.error);
+        }
+
+        const result = document.application.shapeFactory.converter.convertToBrep(comp.value);
+        comp.value.dispose();
+        return result;
+    }
+
+    private handleExportResult(result: Result<BlobPart> | undefined) {
+        if (!result?.isOk) {
+            PubSub.default.pub("showToast", "error.default:{0}", result?.error);
+            return undefined;
+        }
+        return [result.value];
+    }
+}

package/packages/chili-builder/src/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 "./additionalModule";
+export * from "./appBuilder";

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

@@ -0,0 +1,129 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import type { RibbonTab } from "chili-core";
+
+export const DefaultRibbon: RibbonTab[] = [
+    {
+        tabName: "ribbon.tab.startup",
+        groups: [
+            {
+                groupName: "ribbon.group.draw",
+                items: [
+                    "create.line",
+                    "create.extrude",
+                    ["create.arc", "create.rect", "create.circle"],
+                    ["create.loft", "create.sweep", "create.revol"],
+                    ["create.ellipse", "create.bezier", "create.polygon"],
+                    ["create.box", "create.pyramid", "create.cylinder"],
+                    ["create.cone", "create.sphere", "create.thickSolid"],
+                ],
+            },
+            {
+                groupName: "ribbon.group.modify",
+                items: [
+                    "modify.move",
+                    ["modify.rotate", "modify.mirror", "modify.array"],
+                    ["modify.split", "modify.break", "modify.trim"],
+                    ["modify.fillet", "modify.chamfer", "modify.explode"],
+                    ["modify.deleteNode", "modify.removeShapes", "modify.removeFeature"],
+                    ["modify.brushAdd", "modify.brushRemove", "modify.brushClear"],
+                ],
+            },
+            {
+                groupName: "ribbon.group.converter",
+                items: ["convert.toWire", ["convert.toFace", "convert.toShell", "convert.toSolid"]],
+            },
+            {
+                groupName: "ribbon.group.boolean",
+                items: [["boolean.common", "boolean.cut", "boolean.join"]],
+            },
+            {
+                groupName: "ribbon.group.workingPlane",
+                items: [
+                    "workingPlane.toggleDynamic",
+                    ["workingPlane.set", "workingPlane.alignToPlane", "workingPlane.fromSection"],
+                ],
+            },
+            {
+                groupName: "ribbon.group.tools",
+                items: [
+                    "convert.curveProjection",
+                    "create.group",
+                    ["create.section", "create.offset", "create.copyShape"],
+                ],
+            },
+            {
+                groupName: "ribbon.group.measure",
+                items: [["measure.length", "measure.angle", "measure.select"]],
+            },
+            {
+                groupName: "ribbon.group.act",
+                items: ["act.alignCamera"],
+            },
+            {
+                groupName: "ribbon.group.importExport",
+                items: ["file.import", "file.export"],
+            },
+            {
+                groupName: "ribbon.group.other",
+                items: ["wechat.group"],
+            },
+        ],
+    },
+    {
+        tabName: "ribbon.tab.draw",
+        groups: [
+            {
+                groupName: "ribbon.group.2d",
+                items: [
+                    "create.line",
+                    "create.rect",
+                    "create.circle",
+                    "create.arc",
+                    "create.ellipse",
+                    "create.polygon",
+                    "create.bezier",
+                ],
+            },
+            {
+                groupName: "ribbon.group.3d",
+                items: [
+                    "create.box",
+                    "create.pyramid",
+                    "create.cylinder",
+                    "create.cone",
+                    "create.sphere",
+                    "create.thickSolid",
+                ],
+            },
+        ],
+    },
+    {
+        tabName: "ribbon.tab.tools",
+        groups: [
+            {
+                groupName: "ribbon.group.modify",
+                items: [
+                    "modify.break",
+                    "modify.trim",
+                    "modify.fillet",
+                    "modify.chamfer",
+                    "modify.removeFeature",
+                ],
+            },
+            {
+                groupName: "ribbon.group.tools",
+                items: ["create.section", "modify.split", "convert.toWire", "convert.toFace"],
+            },
+            {
+                groupName: "ribbon.group.act",
+                items: ["act.alignCamera"],
+            },
+            {
+                groupName: "ribbon.group.other",
+                items: ["test.performance"],
+            },
+        ],
+    },
+];

package/packages/chili-controls/package.json

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

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

@@ -0,0 +1,96 @@
+// Part of the Chili3d Project, under the AGPL-3.0 License.
+// See LICENSE file in the project root for full license information.
+
+import { CollectionAction, type CollectionChangedArgs, ObservableCollection } from "chili-core";
+import type { HTMLProps } from "./htmlProps";
+import { setProperties } from "./utils";
+
+export type CollectionProps<T> = HTMLProps<Collection<T>> & {
+    sources: ObservableCollection<T> | Array<T>;
+    template: (item: T, index: number) => HTMLElement | SVGSVGElement;
+};
+
+export class Collection<T> extends HTMLElement {
+    private readonly _itemMap = new Map<T, HTMLElement | SVGSVGElement>();
+    constructor(readonly props: CollectionProps<T>) {
+        super();
+        setProperties(this, props as any);
+    }
+
+    getItem(item: T): HTMLElement | SVGSVGElement | undefined {
+        return this._itemMap.get(item);
+    }
+
+    connectedCallback() {
+        const items = Array.isArray(this.props.sources) ? this.props.sources : this.props.sources.items;
+        this.append(...this._mapItems(items));
+        if (this.props.sources instanceof ObservableCollection)
+            this.props.sources.onCollectionChanged(this._onCollectionChanged);
+    }
+
+    disconnectedCallback() {
+        this._itemMap.forEach((x) => x.remove());
+        this._itemMap.clear();
+        if (this.props.sources instanceof ObservableCollection)
+            this.props.sources.removeCollectionChanged(this._onCollectionChanged);
+    }
+
+    private readonly _onCollectionChanged = (args: CollectionChangedArgs) => {
+        switch (args.action) {
+            case CollectionAction.add:
+                this.append(...this._mapItems(args.items));
+                break;
+            case CollectionAction.remove:
+                this._removeItem(args.items);
+                break;
+            case CollectionAction.move:
+                this._moveItem(args.from, args.to);
+                break;
+            case CollectionAction.replace:
+                this._replaceItem(args.index, args.item, args.items);
+                break;
+            default:
+                throw new Error("Unknown collection action");
+        }
+    };
+
+    private _moveItem(from: number, to: number) {
+        const item1 = this.children.item(from);
+        const item2 = this.children.item(to);
+        if (item1 && item2) this.insertBefore(item1, item2);
+    }
+
+    private _replaceItem(index: number, item: T, items: T[]) {
+        const child = this._itemMap.get(item);
+        if (child) {
+            items.forEach((item, i) => {
+                const e = this.props.template(item, index + i);
+                this._itemMap.set(item, e);
+                this.insertBefore(e, child);
+            });
+            this._removeItem([item]);
+        }
+    }
+
+    private _mapItems(items: T[]) {
+        const index = this._itemMap.size;
+        return items.map((item, i) => {
+            if (this._itemMap.has(item)) return this._itemMap.get(item)!;
+            const e = this.props.template(item, index + i);
+            this._itemMap.set(item, e);
+            return e;
+        });
+    }
+
+    private _removeItem(items: T[]) {
+        items.forEach((item) => {
+            const child = this._itemMap.get(item);
+            if (child) {
+                child.remove();
+                this._itemMap.delete(item);
+            }
+        });
+    }
+}
+
+customElements.define("chili-collection", Collection);