Merge pull request #174 from LinkunGao/release/v1.13.10

Release/v1.13.10

Author: LinkunGao

docs/source/conf.py

@@ -22,7 +22,7 @@
 author = 'LinkunGao'
 
 # The full version, including alpha/beta/rc tags
-release = 'v1.13.7'
+release = 'v1.13.10'
 
 
 # -- General configuration ---------------------------------------------------

docs/source/features/08_transfer_large_file.md

@@ -0,0 +1,21 @@
+# Transfer large file to backend
+
+- try async await
+  - not work
+- try web worker
+  - not work: when use the original object.
+  - test deep copy the object: will cost `50s`
+    - Good news: the deep copy not affect the draw function on canvas
+    - Bad news: Causes browser crashes, if deal with the deep copy too many times.
+  - test pruning PaintImages array first, then use deep copy to deal with the object.
+    - Good news: pruning Array only include Uint8ClampedArray cause `0s`
+    - Good news: reformat the Uint8ClampedArray to normal list cause `1ms`
+    - Bad news: deep copy the object still cost `50s`
+  - test pruning PaintImages array(to Uint8ClampedArray[]), then reformat it without the deep copy.
+    - Bad news: the reformat array without deep copy will affect the paint function on canvas.
+  - test axios send the Uint8ClampedArray[] direactly
+    - Bad news: the JSON cannot convert the Uint8ClampedArray[] when use the axios.
+- Choose solution with Web worker, deepcopy, reformat array, axios.
+  - deepCopy: `40s`
+  - reformat data: `1ms`
+  - axios send to backend: `2~4ms`

docs/source/release/release.md

@@ -1299,3 +1299,19 @@ const resetMainAreaSize = (factor: number) => {
 ## Release v1.13.9
 
 - remove the gltf-exporter for test in nuxt.js
+
+## Release v1.13.10
+
+- solved the eraser size issue.
+- add opts in draw function.
+  ```ts
+  interface nrrdDrawImageOptType {
+    getMaskData?: (
+      masks: paintImageType[],
+      len: number,
+      width: number,
+      height: number
+    ) => void;
+  }
+  ```
+  - We can use this callback function to get the mask data.

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.9",
+  "version": "1.13.10",
   "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;
@@ -55,14 +57,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);
-      //   },
+      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;

src/Renderer/baseRenderer.ts

@@ -119,6 +119,7 @@ export default class copperScene extends baseScene {
 
     models.forEach((model) => {
       const geometries: Array<THREE.BufferGeometry> = [];
+
       model.urls.forEach((url, index) => {
         vtkLoader.load(url, (geometry) => {
           geometry.center();

src/Scene/copperScene.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
+    );
+  }
+}