From 61336879cb7509ca34b2f8f39b689bf5406a041d Mon Sep 17 00:00:00 2001
From: LinkunGao <gaolinkun123@gmail.com>
Date: Wed, 19 Oct 2022 13:53:31 +0800
Subject: [PATCH 1/3] add load files UI

---
 src/App.vue               |  11 ++++
 src/components/NavBar.vue |  10 +++-
 src/components/Upload.vue | 103 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 123 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Upload.vue

diff --git a/src/App.vue b/src/App.vue
index 742d269..97c17d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,9 @@
       @on-slice-change="getSliceChangedNum"
       @reset-main-area-size="resetMainAreaSize"
       @on-change-orientation="resetSlicesOrientation"
+      @on-open-dialog="onOpenDialog"
     ></NavBar>
+    <Upload :dialog="dialog" @on-close-dialog="onCloseDialog"></Upload>
   </div>
 </template>
 <script setup lang="ts">
@@ -35,6 +37,7 @@ import { GUI } from "dat.gui";
 import * as Copper from "copper3d_visualisation";
 import "copper3d_visualisation/dist/css/style.css";
 import NavBar from "./components/NavBar.vue";
+import Upload from "./components/Upload.vue";
 import { getCurrentInstance, onMounted, ref, watchEffect } from "vue";
 
 // let refs = null;
@@ -62,6 +65,7 @@ let readyC3 = ref(false);
 let readyC4 = ref(false);
 let allSlices: Array<any> = [];
 let isAxisClicked = ref(false);
+let dialog = ref(false);
 
 onMounted(() => {
   console.log(
@@ -101,6 +105,13 @@ onMounted(() => {
   appRenderer.animate();
 });
 
+const onOpenDialog = (flag: boolean) => {
+  dialog.value = flag;
+};
+const onCloseDialog = (flag: boolean) => {
+  dialog.value = flag;
+};
+
 const resetSlicesOrientation = (axis: "x" | "y" | "z") => {
   nrrdTools.setSliceOrientation(axis);
   const status = nrrdTools.getIsShowContrastState();
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index f56cd63..9987c67 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -23,6 +23,9 @@
         <span @click="onSwitchSliceOrientation('y')"
           ><img class="image" src="../assets/images/y.ico" alt=""
         /></span>
+        <span @click="openDialog">
+          <ion-icon name="cloud-upload-outline"></ion-icon>
+        </span>
       </div>
     </div>
   </div>
@@ -59,7 +62,11 @@ const emit = defineEmits([
   "onSliceChange",
   "resetMainAreaSize",
   "onChangeOrientation",
+  "onOpenDialog",
 ]);
+const openDialog = () => {
+  emit("onOpenDialog", true);
+};
 
 const onSwitchSliceOrientation = (axis: string) => {
   emit("onChangeOrientation", axis);
@@ -112,7 +119,7 @@ watchEffect(() => {
 
 <style scoped>
 .el-slider {
-  max-width: 30vw;
+  max-width: 35vw;
   margin-right: 10px;
   --el-slider__bar-bg-color: red !important;
 }
@@ -140,6 +147,7 @@ watchEffect(() => {
   box-shadow: 0 30px 30px rgba(0, 0, 0, 0.05);
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 .nav .content .arrows {
   display: flex;
diff --git a/src/components/Upload.vue b/src/components/Upload.vue
new file mode 100644
index 0000000..9493b8b
--- /dev/null
+++ b/src/components/Upload.vue
@@ -0,0 +1,103 @@
+<template>
+  <div v-if="dialog" @click="closeDialog" class="upload_container">
+    <el-upload
+      :auto-upload="false"
+      @change="loaded"
+      class="upload-demo"
+      drag
+      action="/"
+      multiple
+    >
+      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+      <div class="el-upload__text">
+        Drop file here or <em>click to upload</em>
+      </div>
+      <template #tip>
+        <div class="el-upload__tip">
+          jpg/png files with a size less than 500kb
+        </div>
+      </template>
+    </el-upload>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UploadFilled } from "@element-plus/icons-vue";
+import type { UploadFile } from "element-plus";
+import { ref, reactive, toRefs, shallowReactive } from "vue";
+type Props = {
+  dialog?: boolean;
+};
+
+withDefaults(defineProps<Props>(), {
+  dialog: false,
+});
+
+let files: Array<File> = [];
+
+const emit = defineEmits(["onCloseDialog"]);
+const closeDialog = (e: MouseEvent) => {
+  let e1 = e.currentTarget;
+  let e2 = e.target;
+  if (e1 === e2) {
+    // openDialog.value = false;
+    console.log(files);
+
+    emit("onCloseDialog", false);
+  }
+};
+
+const loaded = (uploadFile: UploadFile) => {
+  //   console.log(uploadFile);
+  //   console.log(uploadFile.name);
+  //   console.log(uploadFile.raw);
+
+  console.log(1);
+
+  //   let filename = uploadFile.name;
+  //   let file: File | undefined;
+  //   if (filename.match(/\.(nrrd)$/)) {
+  //     file = uploadFile.raw as File;
+  //     files.push(file);
+  //   }
+  //   if (!file) {
+  //     onError("No .nrrd asset found!");
+  //   }
+};
+/**
+ * @param  {Error} error
+ */
+const onError = (error: string | Error) => {
+  let message = ((error as Error) || {}).message || error.toString();
+  if (message.match(/ProgressEvent/)) {
+    message =
+      "Unable to retrieve this file. Check JS console and browser network tab.";
+  } else if (message.match(/Unexpected token/)) {
+    message = `Unable to parse file content. Verify that this file is valid. Error: "${message}"`;
+  } else if (
+    error &&
+    (error as any).target &&
+    (error as any).target instanceof Image
+  ) {
+    message = "Missing texture: " + (error as any).target.src.split("/").pop();
+  }
+  window.alert(message);
+  console.error(error);
+};
+</script>
+
+<style scoped>
+.upload_container {
+  position: fixed;
+  z-index: 1000;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.upload-demo {
+  width: 60vw;
+}
+</style>

From e28a53ebe4f4d265e5955f33fa2cd77998597d9d Mon Sep 17 00:00:00 2001
From: LinkunGao <gaolinkun123@gmail.com>
Date: Sat, 22 Oct 2022 08:35:14 +0800
Subject: [PATCH 2/3] update init slice number

---
 package.json              | 2 +-
 src/App.vue               | 5 ++++-
 src/components/NavBar.vue | 8 +++++++-
 yarn.lock                 | 8 ++++----
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index c60a575..9e3b32a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "copper3d_visualisation": "^1.11.31",
+    "copper3d_visualisation": "^1.11.32",
     "element-plus": "^2.2.17",
     "sass": "^1.55.0",
     "vue": "^3.2.37"
diff --git a/src/App.vue b/src/App.vue
index 97c17d4..d3d5188 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,6 +24,7 @@
       :immediate-slice-num="immediateSliceNum"
       :contrast-index="contrastNum"
       :is-axis-clicked="isAxisClicked"
+      :init-slice-index="initSliceIndex"
       @on-slice-change="getSliceChangedNum"
       @reset-main-area-size="resetMainAreaSize"
       @on-change-orientation="resetSlicesOrientation"
@@ -46,6 +47,7 @@ let max = ref(0);
 let immediateSliceNum = ref(0);
 let contrastNum = ref(0);
 let fileNum = ref(0);
+let initSliceIndex = ref(0);
 
 let base_container = ref<HTMLDivElement>();
 let intro = ref<HTMLDivElement>();
@@ -69,7 +71,7 @@ let dialog = ref(false);
 
 onMounted(() => {
   console.log(
-    "%cNRRD Segmentation App %cBeta:v2.1.7",
+    "%cNRRD Segmentation App %cBeta:v2.1.8",
     "padding: 3px;color:white; background:#d94607",
     "padding: 3px;color:white; background:#219EBC"
   );
@@ -151,6 +153,7 @@ watchEffect(() => {
     });
 
     nrrdTools.setAllSlices(allSlices);
+    initSliceIndex.value = nrrdTools.getCurrentSliceIndex();
     const getSliceNum = (index: number, contrastindex: number) => {
       immediateSliceNum.value = index;
       contrastNum.value = contrastindex;
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 9987c67..6ace2e7 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -38,6 +38,7 @@ type Props = {
   fileNum: number;
   min?: number;
   max?: number;
+  initSliceIndex?: number;
   immediateSliceNum?: number;
   contrastIndex?: number;
   isAxisClicked?: boolean;
@@ -50,7 +51,8 @@ let p = withDefaults(defineProps<Props>(), {
   isAxisClicked: false,
 });
 const state = reactive(p);
-const { max, immediateSliceNum, contrastIndex, isAxisClicked } = toRefs(state);
+const { max, immediateSliceNum, contrastIndex, isAxisClicked, initSliceIndex } =
+  toRefs(state);
 const sliceNum = ref(0);
 let preViousSliceNum = p.min;
 let previousMax = 0;
@@ -92,6 +94,10 @@ const onChangeSlider = () => {
   preViousSliceNum += step;
 };
 
+watchEffect(() => {
+  initSliceIndex?.value && (sliceNum.value = initSliceIndex.value);
+});
+
 watchEffect(() => {
   if (isShowContrast) {
     sliceNum.value = immediateSliceNum.value * p.fileNum + contrastIndex.value;
diff --git a/yarn.lock b/yarn.lock
index 64d9601..4ad7cc4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -286,10 +286,10 @@ copper3d_plugin_heartjs_config@^1.0.7:
   resolved "https://registry.npmjs.org/copper3d_plugin_heartjs_config/-/copper3d_plugin_heartjs_config-1.0.7.tgz"
   integrity sha512-rWhe19DQjC7Ap96uPKmQNy+IBihXTHelAowr5VdgHee+LDTLTLJ75IHsbBxi5ls1LHMxsXhGmWmT3Oy+pgva+Q==
 
-copper3d_visualisation@^1.11.31:
-  version "1.11.31"
-  resolved "https://registry.yarnpkg.com/copper3d_visualisation/-/copper3d_visualisation-1.11.31.tgz#1581fe466721c7db0478c0066d77b9d0db38a772"
-  integrity sha512-851sZQho5Ga1FnbBtAnd/btOxdHOxatwhaw2zarEy+Bs3hoTSt2+Xbn7F/Kk+xj0BUdMuzaKng7SK9vihtga+w==
+copper3d_visualisation@^1.11.32:
+  version "1.11.32"
+  resolved "https://registry.yarnpkg.com/copper3d_visualisation/-/copper3d_visualisation-1.11.32.tgz#f76c292fc9e09889a96e67c7f0f9bfaa10cebd79"
+  integrity sha512-eOEfcaKKYpBPC2PhhejYcrXf06gS1Ph/jVHdM+07IbfL3QTxuP7FRmFGVbcDi7p0JEt1Jhb4TknTqWOaooJDsA==
   dependencies:
     "@types/dat.gui" "^0.7.7"
     "@types/three" "^0.140.0"

From 8d374a6127d742e6db3b5e88939df8a7d73cd962 Mon Sep 17 00:00:00 2001
From: LinkunGao <gaolinkun123@gmail.com>
Date: Tue, 25 Oct 2022 06:29:33 +0800
Subject: [PATCH 3/3] fixed paint drag bugs, changed painting default method to
 sgementation

---
 package.json              | 2 +-
 src/App.vue               | 5 +++--
 src/components/NavBar.vue | 6 ++++++
 yarn.lock                 | 8 ++++----
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 9e3b32a..7ef3aa5 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "copper3d_visualisation": "^1.11.32",
+    "copper3d_visualisation": "^1.11.33",
     "element-plus": "^2.2.17",
     "sass": "^1.55.0",
     "vue": "^3.2.37"
diff --git a/src/App.vue b/src/App.vue
index d3d5188..93bd528 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -71,7 +71,7 @@ let dialog = ref(false);
 
 onMounted(() => {
   console.log(
-    "%cNRRD Segmentation App %cBeta:v2.1.8",
+    "%cNRRD Segmentation App %cBeta:v2.1.9",
     "padding: 3px;color:white; background:#d94607",
     "padding: 3px;color:white; background:#219EBC"
   );
@@ -153,7 +153,7 @@ watchEffect(() => {
     });
 
     nrrdTools.setAllSlices(allSlices);
-    initSliceIndex.value = nrrdTools.getCurrentSliceIndex();
+
     const getSliceNum = (index: number, contrastindex: number) => {
       immediateSliceNum.value = index;
       contrastNum.value = contrastindex;
@@ -165,6 +165,7 @@ watchEffect(() => {
     nrrdTools.draw(scene as Copper.copperScene, gui);
 
     scene?.addPreRenderCallbackFunction(nrrdTools.start);
+    initSliceIndex.value = nrrdTools.getCurrentSliceIndex();
 
     max.value = nrrdTools.getMaxSliceNum()[0];
   }
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6ace2e7..649d11f 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -59,6 +59,7 @@ let previousMax = 0;
 let isShowContrast = false;
 let count = 0;
 let magnification = 1;
+let initFlag = false;
 
 const emit = defineEmits([
   "onSliceChange",
@@ -96,6 +97,7 @@ const onChangeSlider = () => {
 
 watchEffect(() => {
   initSliceIndex?.value && (sliceNum.value = initSliceIndex.value);
+  initFlag = true;
 });
 
 watchEffect(() => {
@@ -120,6 +122,10 @@ watchEffect(() => {
     preViousSliceNum = sliceNum.value;
     previousMax = max.value;
   }
+  if (initFlag) {
+    sliceNum.value = initSliceIndex?.value as number;
+    initFlag = false;
+  }
 });
 </script>
 
diff --git a/yarn.lock b/yarn.lock
index 4ad7cc4..174f7fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -286,10 +286,10 @@ copper3d_plugin_heartjs_config@^1.0.7:
   resolved "https://registry.npmjs.org/copper3d_plugin_heartjs_config/-/copper3d_plugin_heartjs_config-1.0.7.tgz"
   integrity sha512-rWhe19DQjC7Ap96uPKmQNy+IBihXTHelAowr5VdgHee+LDTLTLJ75IHsbBxi5ls1LHMxsXhGmWmT3Oy+pgva+Q==
 
-copper3d_visualisation@^1.11.32:
-  version "1.11.32"
-  resolved "https://registry.yarnpkg.com/copper3d_visualisation/-/copper3d_visualisation-1.11.32.tgz#f76c292fc9e09889a96e67c7f0f9bfaa10cebd79"
-  integrity sha512-eOEfcaKKYpBPC2PhhejYcrXf06gS1Ph/jVHdM+07IbfL3QTxuP7FRmFGVbcDi7p0JEt1Jhb4TknTqWOaooJDsA==
+copper3d_visualisation@^1.11.33:
+  version "1.11.33"
+  resolved "https://registry.yarnpkg.com/copper3d_visualisation/-/copper3d_visualisation-1.11.33.tgz#203f7fd0570c5d2a875a54d1abf3cf313cea0351"
+  integrity sha512-QF87k3SBgsXDfpTeLPp9SCUmEYMJCB2osaeJKsMvWzIRxcsM5dKmrhkWvtna6IpCYVcIFVhmRm9Phxc4fDgzoA==
   dependencies:
     "@types/dat.gui" "^0.7.7"
     "@types/three" "^0.140.0"