Merge pull request #563 from KhronosGroup/feature/validatorDownload

Validator: Add download button/Remove text area

index.html

@@ -283,10 +283,8 @@ <h2 class="title is-spaced" v-bind:data="validationReport">glTF Validator</h2>
  <p>Number of warnings: {{validationReport?.issues?.numWarnings ?? 0}}</p>
  <p>Number of infos: {{validationReport?.issues?.numInfos ?? 0}}</p>
  </div>
- <button class="button is-rounded" style="width: fit-content; flex-shrink: 0;" v-on:click="copyToClipboard(JSON.stringify(validationReport, undefined, 4))">Copy</button>
- <textarea cols="25" readonly style="min-height: 200px; max-width: max-content;resize: none; margin-top: 20px; flex-grow: 1;">
- {{ validationReport }}
- </textarea>
+ <button class="button is-rounded" style="width: fit-content; flex-shrink: 0; margin-bottom: 12px;" v-on:click="copyToClipboard(JSON.stringify(validationReport, undefined, 4))">Copy</button>
+ <button class="button is-rounded" style="width: fit-content; flex-shrink: 0;" v-on:click="downloadJSON(validationReport?.uri?.substring(validationReport.uri.lastIndexOf('/') + 1) + '.report.json', validationReport)">Download</button>
  <span style="margin-top: 5px;">Powered by <a href="https://github.com/KhronosGroup/glTF-Validator" target="_blank" rel="noopener noreferrer">glTF-Validator</a></span>
  </b-field>
  </div>

package.json

@@ -26,7 +26,8 @@
  "build:ui": {
  "patterns": [
  "src",
- "main.js"
+ "main.js",
+ "index.html"
  ],
  "extensions": "js,scss,html",
  "delay": 1000,

src/main.js

@@ -56,8 +56,8 @@ export default async () => {
  const parent = model.mainFile.substring(0, model.mainFile.lastIndexOf("/") + 1);
  return new Promise((resolve, reject) => {
  fetch(parent + uri).then(response => {
- response.bytes().then(buffer => {
- resolve(buffer);
+ response.arrayBuffer().then(buffer => {
+ resolve(new Uint8Array(buffer));
  }).catch(error => {
  reject(error);
  });
@@ -67,9 +67,11 @@ export default async () => {
  });
  };
  const response = await fetch(model.mainFile);
- const buffer = await response.bytes();
- const result = await validateBytes(buffer, {externalResourceFunction: externalRefFunction, uri: model.mainFile});
- return result;
+ const buffer = await response.arrayBuffer();
+ return await validateBytes(new Uint8Array(buffer), {
+ externalResourceFunction: externalRefFunction,
+ uri: model.mainFile
+ });
  } else if (Array.isArray(model.mainFile)) {
  const externalRefFunction = (uri) => {
  uri = "/" + uri;
@@ -83,8 +85,8 @@ export default async () => {
  }
  }
  if (foundFile) {
- foundFile.bytes().then((buffer) => {
- resolve(buffer);
+ foundFile.arrayBuffer().then((buffer) => {
+ resolve(new Uint8Array(buffer));
  }).catch((error) => {
  reject(error);
  });
@@ -94,14 +96,17 @@ export default async () => {
  });
  };
 
- const buffer = await model.mainFile[1].bytes();
- return await validateBytes(buffer, {externalResourceFunction: externalRefFunction, uri: model.mainFile[0]});
+ const buffer = await model.mainFile[1].arrayBuffer();
+ return await validateBytes(new Uint8Array(buffer), {
+ externalResourceFunction: externalRefFunction,
+ uri: model.mainFile[0]
+ });
  }
  } catch (error) {
  console.error(error);
  }
  };
- return from(func(model));
+ return from(func(model)).pipe(catchError((error) => { console.error(`Validation failed: ${error}`); return EMPTY; }));
  })
  );
 

src/ui/ui.js

@@ -172,6 +172,17 @@ const appCreated = createApp({
  this.error("Error copying to clipboard.");
  }
  },
+ downloadJSON(filename, json) {
+ const text = JSON.stringify(json, undefined, 4);
+ const dataURL = "data:application/json;charset=utf-8," + encodeURIComponent(text);
+ const element = document.createElement("a");
+ element.setAttribute("href", dataURL);
+ element.setAttribute("download", filename);
+ element.style.display = "none";
+ document.body.appendChild(element);
+ element.click();
+ document.body.removeChild(element);
+ },
  getValidationCounter: function(){
  let number = 0;
  let color = "white";