feat: Add the functionality to load files from URLs.

Author: xiangechen

packages/chili-core/src/application.ts

@@ -25,6 +25,7 @@ export interface IApplication {
     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;

packages/chili-ui/src/mainWindow.ts

@@ -56,8 +56,7 @@ export class MainWindow extends HTMLElement implements IWindow {
 
         await this.loadCss();
         await this.fetchIconFont();
-
-        this._initHome(app);
+        await this._initHome(app);
         this._initEditor(app);
         this._initSubs(app);
     }

packages/chili-web/src/index.ts

@@ -2,51 +2,32 @@
 // See LICENSE file in the project root for full license information.
 
 import { AppBuilder } from "chili-builder";
-import { Logger } from "chili-core";
+import { IApplication, Logger } from "chili-core";
 import { Loading } from "./loading";
 
 let loading = new Loading();
 document.body.appendChild(loading);
 
+async function handleApplicaionBuilt(app: IApplication) {
+    document.body.removeChild(loading);
+
+    const params = new URLSearchParams(window.location.search);
+    const url = params.get("url") ?? params.get("model");
+    if (url) {
+        Logger.info(`load file from url: ${url}`);
+
+        await app.loadFileFromUrl(url);
+    }
+}
+
 // prettier-ignore
 new AppBuilder()
     .useIndexedDB()
     .useWasmOcc()
     .useThree()
     .useUI()
     .build()
-    .then(async (app) => {
-        document.body.removeChild(loading);
-
-        const params = new URLSearchParams(window.location.search);
-        const modelUrl = params.get("model");
-        if (modelUrl) {
-            try {
-                const response = await fetch(modelUrl);
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch model: ${response.statusText}`);
-                }
-                const blob = await response.blob();
-                let filename = modelUrl.substring(modelUrl.lastIndexOf("/") + 1);
-                if (filename.includes("?")) {
-                    filename = filename.split("?")[0];
-                }
-                if (!filename) filename = "model.stp";
-
-                const file = new File([blob], filename, { type: blob.type });
-                const dataTransfer = new DataTransfer();
-                dataTransfer.items.add(file);
-
-                if (typeof (app as any).importFiles === "function") {
-                    await (app as any).importFiles(dataTransfer.files);
-                } else {
-                    Logger.error("Application does not support importFiles");
-                }
-            } catch (err) {
-                Logger.error(err);
-            }
-        }
-    })
+    .then(handleApplicaionBuilt)
     .catch((err) => {
         Logger.error(err);
     });

packages/chili/src/application.ts

@@ -15,6 +15,7 @@ import {
     IView,
     IVisualFactory,
     IWindow,
+    Logger,
     Material,
     ObservableCollection,
     Plane,
@@ -113,7 +114,7 @@ export class Application implements IApplication {
         }
     };
 
-    async importFiles(files: FileList | undefined) {
+    async importFiles(files: File[] | FileList | undefined) {
         if (!files || files.length === 0) {
             return;
         }
@@ -137,7 +138,7 @@ export class Application implements IApplication {
         );
     }
 
-    private groupFiles(files: FileList) {
+    private groupFiles(files: FileList | File[]) {
         const opens: File[] = [];
         const imports: File[] = [];
         for (const element of files) {
@@ -171,6 +172,26 @@ export class Application implements IApplication {
         return document;
     }
 
+    async loadFileFromUrl(url: string): Promise<void> {
+        return Promise.try(async () => {
+            const filename = url.substring(url.lastIndexOf("/") + 1);
+            if (!filename || !filename.includes(".")) {
+                throw new Error(`No file name in url: ${url}`);
+            }
+
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch model: ${response.statusText}`);
+            }
+
+            const blob = await response.blob();
+            const file = new File([blob], filename, { type: blob.type });
+            await this.importFiles([file]);
+        }).catch((err) => {
+            Logger.error(err);
+        });
+    }
+
     protected async createActiveView(document: IDocument | undefined) {
         if (document === undefined) return undefined;
         const view = document.visual.createView("3d", Plane.XY);