✨ feat: add Materials

packages/chili-core/src/application.ts

@@ -20,5 +20,5 @@ export interface IApplication extends IPropertyChanged {
     activeView: IView | undefined;
     newDocument(name: string): Promise<IDocument>;
     openDocument(id: string): Promise<IDocument | undefined>;
-    loadDocument(data: Serialized): Promise<IDocument>;
+    loadDocument(data: Serialized): Promise<IDocument | undefined>;
 }

packages/chili-core/src/config.ts

@@ -1,24 +1,25 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
-import { Color, Lazy, PubSub } from "./foundation";
+import { Lazy, PubSub } from "./foundation";
 import { ObjectSnapType } from "./snapType";
 
-export class VisualConfig {
-    faceEdgeColor: Color = Color.fromRGB(0.75, 0.75, 0.75);
-    highlightEdgeColor: Color = Color.fromRGB(0.95, 0.95, 0.95);
-    highlightFaceColor: Color = Color.fromHex(0xfef08a);
-    selectedEdgeColor: Color = Color.fromRGB(1, 1, 1);
-    selectedFaceColor: Color = Color.fromHex(0xfde047);
-    editVertexSize: number = 5;
-    editVertexColor: Color = Color.fromHex(0x666);
-    hintVertexSize: number = 3;
-    hintVertexColor: Color = Color.fromHex(0x666);
-    trackingVertexSize: number = 5;
-    trackingVertexColor: Color = Color.fromHex(0x888);
-    temporaryVertexSize: number = 3;
-    temporaryVertexColor: Color = Color.fromHex(0x888);
-    temporaryEdgeColor: Color = Color.fromHex(0x888);
-}
+export const VisualConfig = {
+    defaultEdgeColor: 0xcccccc,
+    defaultFaceColor: 0xdedede,
+    highlightEdgeColor: 0xfef08a,
+    highlightFaceColor: 0xfef08a,
+    selectedEdgeColor: 0xffffff,
+    selectedFaceColor: 0xfde047,
+    editVertexSize: 5,
+    editVertexColor: 0x0000ff,
+    hintVertexSize: 3,
+    hintVertexColor: 0x0000ff,
+    trackingVertexSize: 5,
+    trackingVertexColor: 0x0000ff,
+    temporaryVertexSize: 3,
+    temporaryVertexColor: 0x0000ff,
+    temporaryEdgeColor: 0xeeeeee,
+};
 
 export class Config {
     private static readonly _lazy = new Lazy(() => new Config());
@@ -27,8 +28,6 @@ export class Config {
         return this._lazy.value;
     }
 
-    readonly visual: VisualConfig = new VisualConfig();
-
     private _snapType: ObjectSnapType;
     get snapType() {
         return this._snapType;

packages/chili-core/src/converter/colorConverter.ts

@@ -1,14 +1,19 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
-import { Color, Result } from "../foundation";
+import { Result } from "../foundation";
 import { IConverter } from "./converter";
 
-export class ColorConverter implements IConverter<Color> {
-    convert(value: Color): Result<string> {
-        return Result.success(value.toHexStr());
+export class ColorConverter implements IConverter<number> {
+    convert(value: number): Result<string> {
+        return Result.success("#" + value.toString(16).padStart(6, "0"));
     }
 
-    convertBack(value: string): Result<Color> {
-        return Color.fromHexStr(value);
+    convertBack(value: string): Result<number> {
+        if (value.startsWith("#")) {
+            value = value.substring(1);
+        }
+        let result = parseInt(value, 16);
+        if (Number.isNaN(value)) return Result.error("Invalid hex string: " + value);
+        return Result.success(result);
     }
 }

packages/chili-core/src/document.ts

@@ -1,7 +1,8 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
 import { IApplication } from "./application";
-import { History, IDisposable, IPropertyChanged } from "./foundation";
+import { History, IDisposable, IPropertyChanged, ObservableCollection } from "./foundation";
+import { Material } from "./material";
 import { INode, INodeLinkedList } from "./model/node";
 import { ISelection } from "./selection";
 import { ISerialize, Serialized } from "./serialize";
@@ -16,6 +17,7 @@ export interface IDocument extends IPropertyChanged, IDisposable, ISerialize {
     readonly visual: IVisual;
     readonly rootNode: INodeLinkedList;
     readonly application: IApplication;
+    materials: ObservableCollection<Material>;
     addNode(...nodes: INode[]): void;
     save(): Promise<void>;
     close(): Promise<void>;

packages/chili-core/src/foundation/index.ts

@@ -2,7 +2,6 @@
 
 export * from "./asyncController";
 export * from "./collection";
-export * from "./color";
 export * from "./disposable";
 export * from "./dto";
 export * from "./equalityComparer";

packages/chili-core/src/foundation/pubsub.ts

@@ -3,6 +3,7 @@
 import { CommandKeys, ICommand } from "../command";
 import { IDocument } from "../document";
 import { I18nKeys } from "../i18n";
+import { Material } from "../material";
 import { IModel, INode } from "../model";
 import { ObjectSnapType } from "../snapType";
 import { CursorType, IView } from "../visual";
@@ -39,6 +40,7 @@ export interface PubSubEventMap {
     showPermanent: (action: () => Promise<void>, message: I18nKeys, ...args: any[]) => void;
     showDialog: (title: I18nKeys, context: IPropertyChanged, callback: () => void) => void;
     viewCursor: (cursor: CursorType) => void;
+    editMaterial: (document: IDocument, material: Material, callback: (material: Material) => void) => void;
 }
 
 export class PubSub implements IDisposable {

packages/chili-core/src/foundation/utils/readFileAsync.ts

@@ -7,7 +7,11 @@ export interface FileData {
     data: string;
 }
 
-export async function readFileAsync(accept: string, multiple: boolean): Promise<Result<FileData[]>> {
+export async function readFileAsync(
+    accept: string,
+    multiple: boolean,
+    reader: "readAsText" | "readAsDataURL" = "readAsText",
+): Promise<Result<FileData[]>> {
     return new Promise((resolve, _reject) => {
         let result: FileData[] = [];
         let input = document.createElement("input");
@@ -17,7 +21,7 @@ export async function readFileAsync(accept: string, multiple: boolean): Promise<
         input.accept = accept;
         input.onchange = async () => {
             document.body.removeChild(input);
-            await resolveFiles(input, result, resolve);
+            await resolveFiles(input, result, resolve, reader);
         };
         input.oncancel = () => {
             document.body.removeChild(input);
@@ -32,6 +36,7 @@ async function resolveFiles(
     input: HTMLInputElement,
     result: FileData[],
     resolve: (value: Result<FileData[]> | PromiseLike<Result<FileData[]>>) => void,
+    reader: "readAsText" | "readAsDataURL",
 ) {
     if (!input.files) {
         resolve(Result.error(`no files`));
@@ -40,7 +45,7 @@ async function resolveFiles(
     for (let i = 0; i < input.files.length; i++) {
         let file = input.files.item(i);
         if (!file) continue;
-        let data = await asyncFileReader(file);
+        let data = await asyncFileReader(file, reader);
         if (data.success) {
             result.push({
                 fileName: file.name,
@@ -53,7 +58,7 @@ async function resolveFiles(
     resolve(Result.success(result));
 }
 
-function asyncFileReader(file: File): Promise<Result<string>> {
+function asyncFileReader(file: File, method: any): Promise<Result<string>> {
     return new Promise((resolve, reject) => {
         let reader = new FileReader();
         reader.onload = (e) => {
@@ -62,6 +67,6 @@ function asyncFileReader(file: File): Promise<Result<string>> {
         reader.onerror = (e) => {
             resolve(Result.error(`Error occurred reading file: ${file.name}`));
         };
-        reader.readAsText(file);
+        (reader as any)[method](file);
     });
 }

packages/chili-core/src/geometry/meshData.ts

@@ -1,7 +1,6 @@
 // Copyright 2022-2023 the Chili authors. All rights reserved. AGPL-3.0 license.
 
-import { Config } from "../config";
-import { Color, Colors } from "../foundation";
+import { VisualConfig } from "../config";
 import { XYZ } from "../math";
 import { LineType } from "./lineType";
 import { IShape } from "./shape";
@@ -22,7 +21,7 @@ export interface ShapeMeshGroup {
 export interface ShapeMeshData {
     positions: number[];
     groups: ShapeMeshGroup[];
-    color: Color | number[];
+    color: number | number[];
 }
 
 export namespace ShapeMeshData {
@@ -44,7 +43,7 @@ export interface VertexMeshData extends ShapeMeshData {
 }
 
 export namespace VertexMeshData {
-    export function from(point: XYZ, size: number, color: Color): VertexMeshData {
+    export function from(point: XYZ, size: number, color: number): VertexMeshData {
         return {
             positions: [point.x, point.y, point.z],
             groups: [],
@@ -59,7 +58,7 @@ export interface EdgeMeshData extends ShapeMeshData {
 }
 
 export namespace EdgeMeshData {
-    export function from(start: XYZ, end: XYZ, color: Color, lineType: LineType): EdgeMeshData {
+    export function from(start: XYZ, end: XYZ, color: number, lineType: LineType): EdgeMeshData {
         return {
             positions: [start.x, start.y, start.z, end.x, end.y, end.z],
             color,
@@ -78,10 +77,10 @@ export interface FaceMeshData extends ShapeMeshData {
 export abstract class MeshDataBuilder<T extends ShapeMeshData> {
     protected readonly _positions: number[] = [];
     protected readonly _groups: ShapeMeshGroup[] = [];
-    protected _color: Color | undefined;
+    protected _color: number | undefined;
     protected _vertexColor: number[] | undefined;
 
-    setColor(color: Color) {
+    setColor(color: number) {
         this._color = color;
     }
 
@@ -92,7 +91,7 @@ export abstract class MeshDataBuilder<T extends ShapeMeshData> {
     }
 
     protected getColor() {
-        let color: Color | number[] | undefined = this._vertexColor;
+        let color: number | number[] | undefined = this._vertexColor;
         if (this._vertexColor?.length !== this._positions.length) {
             color = this._color;
         }
@@ -118,7 +117,7 @@ export class EdgeMeshDataBuilder extends MeshDataBuilder<EdgeMeshData> {
 
     constructor() {
         super();
-        this._color = Config.instance.visual.faceEdgeColor;
+        this._color = VisualConfig.defaultEdgeColor;
     }
 
     setType(type: LineType) {
@@ -168,7 +167,7 @@ export class FaceMeshDataBuilder extends MeshDataBuilder<FaceMeshData> {
 
     constructor() {
         super();
-        this._color = Colors.Gray;
+        this._color = VisualConfig.defaultFaceColor;
     }
 
     override newGroup() {