Merge pull request #181 from LinkunGao/release/v1.13.17

Release/v1.13.17

Author: LinkunGao

docs/source/release/release.md

@@ -1437,3 +1437,7 @@ const resetMainAreaSize = (factor: number) => {
 ## Release v1.13.16 - version for Nuxt - heart app
 
 - fixed the gui bug
+
+## Release v1.13.17
+
+- add web work in nrrd tools for export/download masks.

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "copper3d_visualisation",
   "description": "A 3d visualisation package base on threejs provides multiple scenes and Nrrd image load funtion.",
-  "version": "1.13.16",
+  "version": "1.13.17",
   "main": "dist/bundle.umd.js",
   "moudle": "dist/bundle.esm.js",
   "types": "dist/types/index.d.ts",

package.json

@@ -5,6 +5,7 @@ import { environments, environmentType } from "../lib/environment/index";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
 import Stats from "three/examples/jsm/libs/stats.module";
 import { GUI, GUIController } from "dat.gui";
+import ExportGltf from "../Utils/gltfExporter";
 import { optType, stateType, modelVisualisationDataType } from "../types/types";
 
 export default class baseRenderer {
@@ -23,6 +24,7 @@ export default class baseRenderer {
   private visualiseFolder: GUI | null;
   private visualCtrls: Array<GUIController> = [];
   private cameraFolder: GUI | null;
+  private exporter: ExportGltf | null = null;
 
   constructor(container: HTMLDivElement, options?: optType) {
     this.container = container;
@@ -69,6 +71,14 @@ export default class baseRenderer {
       directColor: 0xffffff,
       bgColor1: "#5454ad",
       bgColor2: "#18e5a7",
+      exportGltf: () => {
+        if (!this.exporter) {
+          this.exporter = new ExportGltf({
+            animations: this.currentScene.exportContent.animations,
+          });
+        }
+        this.exporter.export(this.currentScene.exportContent);
+      },
     };
     this.visualiseFolder = null;
     this.cameraFolder = null;
@@ -186,7 +196,7 @@ export default class baseRenderer {
       );
     }
 
-    // gui.add(this.state, "exportGltf");
+    gui.add(this.state, "exportGltf");
   }
 
   updateGui() {

src/Renderer/baseRenderer.ts

@@ -0,0 +1,56 @@
+import { GLTFExporter } from "three/examples/jsm/exporters/GLTFExporter";
+import { optionsGltfExporterType } from "../types/types";
+
+export default class ExportGltf {
+  private gltfExporter: GLTFExporter = new GLTFExporter();
+  private options: optionsGltfExporterType = {
+    trs: false,
+    onlyVisible: true,
+    truncateDrawRange: true,
+    binary: false,
+    maxTextureSize: 40960000000,
+    animations: [],
+  };
+  private link: HTMLAnchorElement;
+
+  constructor(opts: optionsGltfExporterType) {
+    Object.assign(this.options, opts);
+    this.link = document.createElement("a");
+    this.link.style.display = "none";
+    document.body.appendChild(this.link);
+  }
+
+  export(input: any) {
+    const name: string = input.name ? input.name : "export";
+    this.gltfExporter.parse(
+      input,
+      (result) => {
+        if (result instanceof ArrayBuffer) {
+          this.saveArrayBuffer(result, name + ".glb");
+        } else {
+          const output = JSON.stringify(result, null, 2);
+          this.saveString(output, name + ".gltf");
+        }
+      },
+      function (error) {
+        console.log("An error happened during parsing", error);
+      },
+      this.options
+    );
+  }
+
+  save(blob: Blob, fileName: string) {
+    this.link.href = URL.createObjectURL(blob);
+    this.link.download = fileName;
+    this.link.click();
+  }
+  saveString(text: string, fileName: string) {
+    this.save(new Blob([text], { type: "text/plain" }), fileName);
+  }
+  saveArrayBuffer(buffer: ArrayBuffer, fileName: string) {
+    this.save(
+      new Blob([buffer], { type: "application/octet-stream" }),
+      fileName
+    );
+  }
+}

src/Utils/gltfExporter.ts

@@ -18,8 +18,8 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import copperMScene from "../Scene/copperMScene";
 import copperScene from "../Scene/copperScene";
 import { throttle } from "./raycaster";
-import { saveFileAsJson } from "./download";
 import { switchEraserSize } from "./utils";
+import { saveFileAsJson } from "./download";
 
 export class nrrd_tools {
   container: HTMLDivElement;
@@ -2433,107 +2433,39 @@ export class nrrd_tools {
     //   this.paintImages.y,
     //   this.paintImages.y.length
     // );
-    exportDataFormat.z = this.restructData(
-      this.paintImages.z,
-      this.paintImages.z.length,
-      this.nrrd_states.nrrd_x_centimeter,
-      this.nrrd_states.nrrd_y_centimeter
-    );
 
-    window.alert("Export all images, starting!!!");
-    try {
-      for (let i = 0; i < 3; i++) {
-        switch (i) {
-          case 0:
-            if (exportDataFormat.x.length > 0) {
-              const blob = new Blob([JSON.stringify(exportDataFormat.x)], {
-                type: "text/plain;charset=utf-8",
-              });
-              saveFileAsJson(blob, "copper3D_export data_x.json");
-            }
-            break;
-
-          case 1:
-            if (exportDataFormat.y.length > 0) {
-              const blob1 = new Blob([JSON.stringify(exportDataFormat.y)], {
-                type: "text/plain;charset=utf-8",
-              });
-              saveFileAsJson(blob1, "copper3D_export data_y.json");
-            }
-            break;
-          case 2:
-            if (exportDataFormat.z.length > 0) {
-              const blob2 = new Blob([JSON.stringify(exportDataFormat.z)], {
-                type: "text/plain;charset=utf-8",
-              });
-              saveFileAsJson(blob2, "copper3D_export data_z.json");
-            }
-            break;
-        }
+    const worker = new Worker(
+      new URL("./workers/reformatSaveDataWorker.ts", import.meta.url),
+      {
+        type: "module",
       }
+    );
+    window.alert("Export masks, starting!!!");
+    worker.postMessage({
+      masksData: this.paintImages.z,
+      len: this.paintImages.z.length,
+      width: this.nrrd_states.nrrd_x_centimeter,
+      height: this.nrrd_states.nrrd_y_centimeter,
+      type: "reformat",
+    });
 
-      window.alert("Export all images successfully!!!");
-    } catch (error) {
-      console.log(error);
+    worker.onmessage = (ev: MessageEvent) => {
+      const result = ev.data;
+      if (result.type === "reformat") {
+        exportDataFormat.z = result.masks;
 
-      window.alert("Export failed!");
-    }
-  }
-  restructData(
-    originArr: paintImageType[],
-    len: number,
-    width: number,
-    height: number
-  ) {
-    const reformatData = [];
-    // const convertCanvas = document.createElement("canvas");
-    // const convertCtx = convertCanvas.getContext(
-    //   "2d"
-    // ) as CanvasRenderingContext2D;
-    for (let i = 0; i < len; i++) {
-      let exportTemp: exportPaintImageType = {
-        sliceIndex: 0,
-        dataFormat:
-          "RGBA - Each successive 4-digit number forms a pixel point in data array",
-        width,
-        height,
-        voxelSpacing: this.nrrd_states.voxelSpacing,
-        spaceOrigin: this.nrrd_states.spaceOrigin,
-        data: [],
-      };
-      exportTemp.sliceIndex = originArr[i].index;
-
-      // this.setEmptyCanvasSize();
-      // convertCanvas.width = this.nrrd_states.originWidth;
-      // convertCanvas.height = this.nrrd_states.originHeight;
-      // this.emptyCtx.putImageData(originArr[i].image, 0, 0);
-
-      // convertCtx.drawImage(
-      //   this.emptyCanvas,
-      //   0,
-      //   0,
-      //   convertCanvas.width,
-      //   convertCanvas.height
-      // );
-
-      // const imageData = convertCtx.getImageData(
-      //   0,
-      //   0,
-      //   convertCanvas.width,
-      //   convertCanvas.height
-      // );
-
-      const imageData = originArr[i].image;
-
-      const temp = [];
-      for (let j = 0; j < imageData.data.length; j++) {
-        temp.push(imageData.data[j]);
+        worker.postMessage({
+          masksData: exportDataFormat.z,
+          type: "saveBlob",
+        });
+      } else if (result.type === "saveBlob") {
+        if (result.data) {
+          saveFileAsJson(result.data, "copper3D_export data_z.json");
+          window.alert("Export masks successfully!!!");
+        } else {
+          window.alert("Export failed!");
+        }
       }
-
-      exportTemp.data = temp;
-      reformatData.push(exportTemp);
-    }
-
-    return reformatData;
+    };
   }
 }

src/Utils/nrrd_tool.ts

@@ -0,0 +1,126 @@
+import { paintImageType } from "../../types/types";
+
+addEventListener("message", (event) => {
+  const data = event.data;
+  if (data.type === "reformat") {
+    // 在 Worker 中执行计算量大的代码
+    const masks = restructData(
+      data.masksData,
+      data.len,
+      data.width,
+      data.height
+    );
+    const result = {
+      masks,
+      type: "reformat",
+    };
+    // 发送计算结果到主线程
+    postMessage(result);
+  } else if (data.type === "saveBlob") {
+    const result = convertReformatDataToBlob(data.maskData);
+    postMessage({
+      type: "saveBlob",
+      data: result,
+    });
+  }
+});
+
+function deepCopy(obj: any): unknown {
+  if (obj === null || typeof obj !== "object") {
+    return obj;
+  }
+
+  if (obj instanceof Date) {
+    return new Date(obj);
+  }
+
+  if (obj instanceof Array) {
+    let copiedArray = [];
+    for (let i = 0; i < obj.length; i++) {
+      copiedArray[i] = deepCopy(obj[i]);
+    }
+    return copiedArray;
+  }
+
+  if (obj instanceof Object) {
+    let copiedObject: any = {};
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        copiedObject[key] = deepCopy(obj[key]);
+      }
+    }
+    return copiedObject;
+  }
+
+  throw new Error("Unable to copy obj! Its type isn't supported.");
+}
+
+function pruningData(originArr: paintImageType[]) {
+  let pruningArray = [];
+  for (let i = 0; i < originArr.length; i++) {
+    pruningArray.push(originArr[i].image.data);
+  }
+  return pruningArray;
+}
+
+function restructData(
+  originArr: paintImageType[],
+  len: number,
+  width: number,
+  height: number
+) {
+  const reformatData = [];
+
+  let start: unknown = new Date();
+
+  const copiedArray = deepCopy(originArr) as paintImageType[];
+
+  let end: unknown = new Date();
+  let timeDiff = (end as number) - (start as number); // time difference in milliseconds
+
+  let start_c: unknown = new Date();
+  for (let i = 0; i < len; i++) {
+    let exportTemp = {
+      sliceIndex: 0,
+      dataFormat:
+        "RGBA - Each successive 4-digit number forms a pixel point in data array",
+      width,
+      height,
+      voxelSpacing: 0,
+      spaceOrigin: 0,
+      data: [],
+    };
+
+    exportTemp.sliceIndex = originArr[i].index;
+
+    const imageData = copiedArray[i].image;
+
+    // const temp = Array.from(imageData.data).map((x) => Number(x));
+    const temp = [];
+    for (let j = 0; j < imageData.data.length; j++) {
+      temp.push(imageData.data[j]);
+    }
+
+    (exportTemp as any).data = temp;
+    reformatData.push(exportTemp);
+  }
+  let end_c: unknown = new Date();
+  let timeDiff_c = (end_c as number) - (start_c as number);
+  return reformatData;
+}
+
+function convertReformatDataToBlob(maskData: paintImageType[]) {
+  try {
+    const blob = new Blob([JSON.stringify(maskData)], {
+      type: "text/plain;charset=utf-8",
+    });
+    // saveFileAsJson(blob, name);
+    return blob;
+  } catch (error) {
+    console.log(error);
+
+    return false;
+  }
+}
+
+export { pruningData, restructData };