Merge pull request #25 from LinkunGao/pwa

Update UI
ABI-CTT-Group · Oct 14, 2024 · 427bbf4 · 427bbf4
2 parents 31c86c6 + 9003c75
commit 427bbf4
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 121 deletions.
diff --git a/frontend/assets/sass/global.scss b/frontend/assets/sass/global.scss
@@ -5,9 +5,10 @@ body {
   background-color: #f8cdd6;
 }
 
-html {
-  overflow-y:hidden !important;
-}
+// html {
+//   overflow-y:hidden;
+//   @apply overflow-y-auto md:overflow-y-hidden;
+// }
 
 canvas {
   width: 100%;

diff --git a/frontend/components/model/LeftModel.vue b/frontend/components/model/LeftModel.vue
@@ -1,4 +1,5 @@
 <template>
+
   <div :class="model_panel" ref="leftContainer" :style="panelStyle" class="h-full">
     <div :class="model_title">
       <lazy-panel />
@@ -73,7 +74,9 @@ export default {
 
     window.addEventListener("resize", () => {
       setTimeout(() => {
-        if (!!this.scene) this.scene.onWindowResize();
+        if (!!this.scene) {
+          this.scene.onWindowResize();
+        }
       }, 500);
     });
   },
@@ -134,6 +137,8 @@ export default {
               });
             }
           });
+
+          this.scene.onWindowResize();
         });
         this.scene.loadViewUrl(viewURL);
          

diff --git a/frontend/components/model/Model.vue b/frontend/components/model/Model.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="model ">
-      <v-tabs class="fixed flex justify-center tab-main" @change="tabsOnChange">
+  <div class="model h-full">
+      <v-tabs class="absolute  flex justify-center tab-main" @change="tabsOnChange">
         <v-tab class="tab-sub w-40">{{ tab1 }}</v-tab>
         <v-tab class="tab-sub w-40">{{ tab2 }}</v-tab>
       </v-tabs>
 
-    <div ref="baseDomObject" :class="mdAndUp ? 'baseDom-md' : 'baseDom-sm'" />
+    <div ref="baseDomObject" class="h-full" :class="mdAndUp ? 'baseDom-md' : 'baseDom-sm'" />
     <div
         ref="threeDControls"
-        class="baseModelControl"
+        class="hidden baseModelControl md:flex"
         :class="mdAndUp ? 'baseModelControl-md' : 'baseModelControl-sm'"
       >
         <div class="baseModelCB" :class="mdAndUp ? 'baseModelCB-md' : ''">
@@ -110,8 +110,16 @@ export default {
       this.modelName = "normal";
     }
 
-    
     this.container.appendChild(this.baseContainer);
+
+    // setTimeout(() => {
+    //   this.mdAndUp
+    //     ? (this.baseContainer.style.height = "100vh")
+    //     : (this.baseContainer.style.height = "100vw");
+    //   this.container.appendChild(this.baseContainer);
+    //   this.start();
+    // }, 100);
+
     this.start();
 
     window.addEventListener("resize", () => {
@@ -213,6 +221,8 @@ export default {
                 }
                 this.modelData[this.modelName]["middle"] = data;
                 this.addContainerListener();
+                this.scene.onWindowResize();
+                $nuxt.$emit("finishLoad", true);
               }
               loadingContainer.style.display = "none";
             },
@@ -240,11 +250,13 @@ export default {
       this.scene.onWindowResize();
     },
     addContainerListener() {
-      const data = this.modelData[this.modelName]["middle"];
-      if(this.mouseActions === null){
-          this.mouseActions = this.raycaster(this.scene, this.container, data.nrrdSliceZ, data.nrrdMesh, data.nrrdMaxIndex);
-        }
-      this.container.addEventListener("pointermove", this.mouseActions.mouseMove);
+      if(!!this.modelData[this.modelName]){
+        const data = this.modelData[this.modelName]["middle"];
+        if(this.mouseActions === null){
+            this.mouseActions = this.raycaster(this.scene, this.container, data.nrrdSliceZ, data.nrrdMesh, data.nrrdMaxIndex);
+          }
+        this.container.addEventListener("pointermove", this.mouseActions.mouseMove);
+      }
     },
     removeContainerListener() {
       if(this.mouseActions !== null){
@@ -277,11 +289,23 @@ export default {
   background: rgb(251,113,133);
   background: linear-gradient(90deg, rgba(251,113,133,1) 0%, rgba(253,164,175,1) 48%, rgba(251,113,133,1) 100%);
 }
+
+.baseDom-md {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+}
+.baseDom-sm {
+  width: 100vw;
+  height: 100vw;
+  margin: 0;
+  padding: 0;
+}
+
 .baseModelControl {
   width: 100vw;
   height: 120px;
-  // background: red;
-  display: flex;
   flex-direction: row;
   justify-content: center;
   align-content: center;

diff --git a/frontend/components/model/PanelControls.vue b/frontend/components/model/PanelControls.vue
@@ -5,7 +5,7 @@
       <span class="text-black text-base font-thin">{{ modelControl }}</span>
     </div>
 
-    <div ref="rightContainer" class="w-full h-full">
+    <div ref="rightContainer" class="w-full h-full" :class="mdAndUp ? 'baseDom-md' : 'baseDom-sm'">
     </div>
   </div>
 </template>
@@ -50,6 +50,11 @@ export default {
       },
     };
   },
+  computed: {
+    mdAndUp() {
+      return this.$vuetify.breakpoint.mdAndUp;
+    },
+  },
   mounted() {
     this.Copper = this.$Copper();
     this.THREE = this.$three();
@@ -67,6 +72,7 @@ export default {
       this.modelName = "normal";
     }
     
+    
     this.start();
 
     window.addEventListener("resize", () => {
@@ -89,7 +95,7 @@ export default {
       if (this.scene === undefined) {
         this.scene = this.baseRenderer.createScene(modelName);
         // this.scene.controls.staticMoving = true;
-        this.scene.controls.rotateSpeed = 0.5;
+        this.scene.controls.rotateSpeed = 1;
         this.scene.controls.minDistance = 500;
         this.scene.controls.maxDistance = 3000;
         this.scene.controls.panSpeed = 0.5;
@@ -232,4 +238,17 @@ box-shadow:  5px 5px 10px #e4949e,
     height: 500px;
   }
 }
+
+.baseDom-md {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+.baseDom-sm {
+  width: 100vw;
+  height: 100vw;
+  margin: 0;
+  padding: 0;
+}
 </style>
diff --git a/frontend/components/navigation/RightPane.vue b/frontend/components/navigation/RightPane.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="parent">
-    <div class="model-panel">
+  <div class="w-screen h-screen flex flex-col md:flex-row right-panel">
+    <div class="flex-1">
       <model />
     </div>
     <div
-      class="flex flex-col justify-center items-center md:fixed md:right-0 md:top-0 md:h-full md:w-1/4"
+      class="flex-1 flex flex-col justify-center items-center md:fixed md:right-0 md:top-0 md:h-full md:w-1/4"
     >
       <PanelControls />
       <div
@@ -41,35 +41,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.parent {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
+.right-panel {
+  background: rgb(251,113,133);
+  background: linear-gradient(90deg, rgba(251,113,133,1) 0%, rgba(253,164,175,1) 48%, rgba(251,113,133,1) 100%);
 }
-.model-panel {
-  // width: 100vw;
-  // height: auto;
-  flex: 1;
-}
-.model-rate {
-  position: relative;
-  width: 100%;
-  text-align: center;
-}
-
-.rate-mdAndUp {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  max-height: 20%;
-  .heart-rate {
-    margin-top: 10px;
-    width: 60%;
-    height: 100px;
-  }
-}
-
 .logo-mdAndUp {
   width: 50%;
   // height: 100px;
@@ -80,31 +55,4 @@ export default {
   height: 10%;
 }
 
-.trace-main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  align-items: center;
-  padding: 25px 3px;
-}
-.tracePanel-md {
-  position: fixed;
-  top: 0;
-  right: 0;
-  height: 100%;
-  min-width: 280px;
-  max-width: 25vw;
-}
-.tracePanel-sm {
-  width: 100vw;
-  height: auto;
-}
-.trace-md {
-  min-height: 60%;
-}
-.trace-sm {
-  width: 100%;
-  margin-bottom: 100px;
-  padding-right: 10px;
-}
 </style>