Merge pull request #498 from KhronosGroup/fix/images-subfolders

Fix loading images from subfolders when dropping files
KhronosGroup · Oct 4, 2023 · 98ff005 · 98ff005
2 parents 25ed2be + 1bff391
commit 98ff005
Show file tree

Hide file tree

Showing 9 changed files with 371 additions and 611 deletions.
diff --git a/app_web/main.js b/app_web/main.js
@@ -1,3 +1,3 @@
-import { main } from './GltfSVApp.js';
+import main from './GltfSVApp.js';
 
 main();
diff --git a/app_web/src/logic/uimodel.js b/app_web/src/logic/uimodel.js
diff --git a/app_web/src/main.js b/app_web/src/main.js
diff --git a/app_web/src/model_path_provider.js b/app_web/src/model_path_provider.js
@@ -1,10 +1,9 @@
 import axios from 'axios';
-
 import path from 'path';
 
-class gltfModelPathProvider
+export class GltfModelPathProvider
 {
-    constructor(modelIndexerPath, currentFalvour="glTF", ignoredVariants = ["glTF-Embedded"])
+    constructor(modelIndexerPath, ignoredVariants = ["glTF-Embedded"])
     {
         this.modelIndexerPath = modelIndexerPath;
         this.ignoredVariants = ignoredVariants;
@@ -14,10 +13,8 @@ class gltfModelPathProvider
     async initialize()
     {
         const self = this;
-        return axios.get(this.modelIndexerPath).then(response =>
-        {
-            self.populateDictionary(response.data);
-        });
+        const response = await axios.get(this.modelIndexerPath);
+        self.populateDictionary(response.data);
     }
 
     resolve(modelKey, flavour)
@@ -36,7 +33,6 @@ class gltfModelPathProvider
         this.modelsDictionary = {};
         for (const entry of modelIndexer)
         {
-            // TODO maybe handle undefined names better
             if (entry.variants === undefined || entry.name === undefined)
             {
                 continue;
@@ -54,7 +50,6 @@ class gltfModelPathProvider
                 const fileName = entry.variants[variant];
                 const modelPath = path.join(modelsFolder, entry.name, variant, fileName);
                 variants[variant] = modelPath;
-
             }
             this.modelsDictionary[entry.name] = variants;
         }
@@ -70,7 +65,7 @@ class gltfModelPathProvider
     }
 }
 
-function fillEnvironmentWithPaths(environmentNames, environmentsBasePath)
+export function fillEnvironmentWithPaths(environmentNames, environmentsBasePath)
 {
     Object.keys(environmentNames).map(function(name, index) {
         const title = environmentNames[name];
@@ -83,5 +78,3 @@ function fillEnvironmentWithPaths(environmentNames, environmentsBasePath)
     });
     return environmentNames;
 }
-
-export { gltfModelPathProvider, fillEnvironmentWithPaths };
diff --git a/app_web/src/ui/ui.js b/app_web/src/ui/ui.js
@@ -1,4 +1,4 @@
-import Vue from 'vue/dist/vue.esm.js'
+import Vue from 'vue/dist/vue.esm.js';
 import VueRx from 'vue-rx';
 import { Subject } from 'rxjs';
 import './sass.scss';
@@ -22,7 +22,7 @@ Vue.component('toggle-button', {
     },
     methods:
     {
-        buttonclicked: function(value)
+        buttonclicked: function()
         {
             this.isOn = !this.isOn;
             this.name = this.isOn ? this.ontext : this.offtext;
@@ -40,7 +40,7 @@ Vue.component('json-to-ui-template', {
     template:'#jsonToUITemplate'
 });
 
-const app = new Vue({
+export const app = new Vue({
     domStreams: ['modelChanged$', 'flavourChanged$', 'sceneChanged$', 'cameraChanged$',
         'environmentChanged$', 'debugchannelChanged$', 'tonemapChanged$', 'skinningChanged$',
         'punctualLightsChanged$', 'iblChanged$', 'blurEnvChanged$', 'morphingChanged$',
@@ -138,7 +138,7 @@ const app = new Vue({
             img.style.height = "22px";
             document.getElementById("tabsContainer").childNodes[0].childNodes[0].appendChild(a);
             a.appendChild(img);
-        })
+        });
 
     },
     methods:
@@ -147,7 +147,7 @@ const app = new Vue({
         {
             this.$refs.animationState.setState(value);
         },
-        iblTriggered: function(value)
+        iblTriggered: function()
         {
             if(this.ibl == false)
             {
@@ -158,7 +158,7 @@ const app = new Vue({
                 this.renderEnv = this.environmentVisiblePrefState;
             }
         },
-        transmissionTriggered: function(value)
+        transmissionTriggered: function()
         {
             if(this.transmissionEnabled == false)
             {
@@ -199,14 +199,14 @@ const app = new Vue({
             this.$buefy.toast.open({
                 message: message,
                 type: 'is-warning'
-            })
+            });
         },
         error(message, duration = 5000) {
             this.$buefy.toast.open({
                 message: message,
                 type: 'is-danger',
                 duration: duration
-            })
+            });
         },
         goToLoadingState() {
             if(this.loadingComponent !== undefined)
@@ -215,7 +215,7 @@ const app = new Vue({
             }
             this.loadingComponent = this.$buefy.loading.open({
                 container: null
-            })
+            });
         },
         exitLoadingState()
         {
@@ -239,7 +239,7 @@ const app = new Vue({
     }
 }).$mount('#app');
 
-const canvasUI = new Vue({
+new Vue({
     data() {
         return {
             fullscreen: false,
@@ -249,7 +249,7 @@ const canvasUI = new Vue({
     methods:
     {
         toggleFullscreen() {
-            if(this.fullscreen) {
+            if (this.fullscreen) {
                 app.show();
             } else {
                 app.hide();
@@ -270,33 +270,28 @@ const canvasUI = new Vue({
 
 }).$mount('#canvasUI');
 
-
-export { app };
-
 // pipe error messages to UI
-(function(){
-
-    var originalWarn = console.warn;
-    var originalError = console.error;
+(() => {
+    const originalWarn = console.warn;
+    const originalError = console.error;
 
     console.warn = function(txt) {
         app.warn(txt);
         originalWarn.apply(console, arguments);
-    }
+    };
     console.error = function(txt) {
         app.error(txt);
         originalError.apply(console, arguments);
-    }
+    };
 
     window.onerror = function(msg, url, lineNo, columnNo, error) {
-        var message = [
+        app.error([
             'Message: ' + msg,
             'URL: ' + url,
             'Line: ' + lineNo,
             'Column: ' + columnNo,
             'Error object: ' + JSON.stringify(error)
-          ].join(' - ');
-        app.error(message);
+        ].join(' - '));
     };
 })();
 
diff --git a/source/ResourceLoader/loader.js b/source/ResourceLoader/loader.js
@@ -57,7 +57,7 @@ class gltfLoader
     {
         if (appendix && appendix.length > 0)
         {
-            if (appendix[0] instanceof Type)
+            if (appendix[0] instanceof Type || appendix[0][1] instanceof Type)
             {
                 return appendix;
             }

diff --git a/source/ResourceLoader/resource_loader.js b/source/ResourceLoader/resource_loader.js
@@ -71,10 +71,10 @@ class ResourceLoader
                 console.error("Only .glb files can be loaded from an array buffer");
             }
         }
-        else if (typeof (File) !== 'undefined' && gltfFile instanceof File)
+        else if (Array.isArray(gltfFile) && typeof(File) !== 'undefined' && gltfFile[1] instanceof File)
         {
-            let fileContent = gltfFile;
-            filename = gltfFile.name;
+            let fileContent = gltfFile[1];
+            filename = gltfFile[1].name;
             isGlb = getIsGlb(filename);
             if (isGlb)
             {

diff --git a/source/gltf/buffer.js b/source/gltf/buffer.js
@@ -59,13 +59,12 @@ class gltfBuffer extends GltfObject
             return false;
         }
 
-        const foundFile = files.find(function(file)
-        {
+        const foundFile = files.find(([path, file]) => {
             if (file.name === this.uri || file.fullPath === this.uri)
             {
                 return true;
             }
-        }, this);
+        });
 
         if (foundFile === undefined)
         {
@@ -79,7 +78,7 @@ class gltfBuffer extends GltfObject
             self.buffer = event.target.result;
             callback();
         };
-        reader.readAsArrayBuffer(foundFile);
+        reader.readAsArrayBuffer(foundFile[1]);
 
         return true;
     }

diff --git a/source/gltf/image.js b/source/gltf/image.js
@@ -30,12 +30,9 @@ class gltfImage extends GltfObject
 
     resolveRelativePath(basePath)
     {
-        if (typeof this.uri === 'string' || this.uri instanceof String)
-        {
-            if (this.uri.startsWith('./'))
-            {
-                // Remove preceding './' from URI.
-                this.uri = this.uri.substr(2);
+        if (typeof this.uri === 'string' || this.uri instanceof String) {
+            if (this.uri.startsWith('./')) {
+                this.uri = this.uri.substring(2);
             }
             this.uri = basePath + this.uri;
         }
@@ -53,7 +50,7 @@ class gltfImage extends GltfObject
         }
 
         if (!await this.setImageFromBufferView(gltf) &&
-            !await this.setImageFromFiles(additionalFiles, gltf) &&
+            !await this.setImageFromFiles(gltf, additionalFiles) &&
             !await this.setImageFromUri(gltf))
         {
             console.error("Was not able to resolve image with uri '%s'", this.uri);
@@ -190,21 +187,18 @@ class gltfImage extends GltfObject
         return true;
     }
 
-    async setImageFromFiles(files, gltf)
+    async setImageFromFiles(gltf, files)
     {
         if (this.uri === undefined || files === undefined)
         {
             return false;
         }
 
-        let foundFile = files.find(function(file)
-        {
-            const uriName = this.uri.split('\\').pop().split('/').pop();
-            if (file.name === uriName)
-            {
+        let foundFile = files.find(file => {
+            if (file[0] == "/" + this.uri) {
                 return true;
             }
-        }, this);
+        });
 
         if (foundFile === undefined)
         {
@@ -213,15 +207,15 @@ class gltfImage extends GltfObject
 
         if (this.mimeType === undefined)
         {
-            this.setMimetypeFromFilename(foundFile.name);
+            this.setMimetypeFromFilename(foundFile[0]);
         }
 
 
         if(this.mimeType === ImageMimeType.KTX2)
         {
             if (gltf.ktxDecoder !== undefined)
             {
-                const data = new Uint8Array(await foundFile.arrayBuffer());
+                const data = new Uint8Array(await foundFile[1].arrayBuffer());
                 this.image = await gltf.ktxDecoder.loadKtxFromBuffer(data);
             }
             else
@@ -231,7 +225,7 @@ class gltfImage extends GltfObject
         }
         else if (typeof(Image) !== 'undefined' && (this.mimeType === ImageMimeType.JPEG || this.mimeType === ImageMimeType.PNG))
         {
-            const imageData = await AsyncFileReader.readAsDataURL(foundFile).catch( () => {
+            const imageData = await AsyncFileReader.readAsDataURL(foundFile[1]).catch( () => {
                 console.error("Could not load image with FileReader");
             });
             this.image = await gltfImage.loadHTMLImage(imageData).catch( () => {