From 9c93982c97f60ec7e366f65cdf4005d8e32c0e7f Mon Sep 17 00:00:00 2001
From: LinkunGao <gaolinkun123@gmail.com>
Date: Mon, 14 Oct 2024 15:50:15 +1300
Subject: [PATCH] update UI

---
 docker-compose.yml                           |  8 ++
 dockerfile                                   | 15 ++++
 frontend/assets/sass/global.scss             |  7 +-
 frontend/components/model/LeftModel.vue      |  9 ++-
 frontend/components/model/Model.vue          | 48 ++++++++---
 frontend/components/model/PanelControls.vue  | 23 +++++-
 frontend/components/navigation/RightPane.vue | 64 ++-------------
 frontend/layouts/default.vue                 | 83 +++++++++-----------
 frontend/nuxt.config.js                      |  2 +-
 frontend/plugins/copper.js                   |  2 +-
 10 files changed, 139 insertions(+), 122 deletions(-)
 create mode 100644 docker-compose.yml
 create mode 100644 dockerfile

diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..c2c839e
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,8 @@
+version: "3"
+services:
+  web:
+    build:
+      context: ./
+      dockerfile: dockerfile
+    ports:
+      - "3158:3158"
diff --git a/dockerfile b/dockerfile
new file mode 100644
index 0000000..8666dcd
--- /dev/null
+++ b/dockerfile
@@ -0,0 +1,15 @@
+FROM node:16-alpine
+
+WORKDIR /app
+
+COPY frontend  .
+
+RUN yarn \
+    && yarn generate 
+
+
+ENV PORT 3158  
+
+EXPOSE 3158    
+
+CMD ["yarn", "start"]
\ No newline at end of file
diff --git a/frontend/assets/sass/global.scss b/frontend/assets/sass/global.scss
index f1cb1df..2ca80d1 100644
--- 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
index 0c8351f..5886635 100644
--- 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);
     });
   },
@@ -97,6 +100,7 @@ export default {
       this.loadModel(this.modelUrlsArray[this.navPanelName][0], this.navPanelName+"left");
     },
     start() {
+
       if (this.navPanelName === null) {
         this.loadModel(this.modelUrlsArray.normal[0], this.navPanelName+"left");
       }else{
@@ -105,6 +109,7 @@ export default {
     },
 
     loadModel(model_url, model_name) {
+
       let viewURL = "";
       if (this.navPanelName === null) {
         viewURL = this.modelUrlsArray.normal[1];
@@ -132,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
index b2ea4b0..11342f3 100644
--- 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
index 85821df..b819cd8 100644
--- 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
index 3ba10e7..31245dd 100644
--- 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>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 249fe13..d4baf2d 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,46 +1,37 @@
 <template>
-  <v-app ref="base_background" class="root">
-    <div v-show="load_app" class="loading">
+  <v-app ref="base_background" class="select-none p-0 m-0 ">
+    <div v-show="loadApp" class="loading">
       <loading-bar />
     </div>
-    <div class="rightPanel">
-      <div>
-        <div class="pa-0 black">
-
-          <Nuxt />
-        </div>
-      </div>
+    <div class="rightPanel pa-0">
+      <Nuxt />
     </div>
     <div
       class="firefox"
       :class="mdAndUp ? 'outer-large' : 'outer-small'"
       ref="leftPanel"
     >
-      <div class="pa-0">
-        <v-row class="d-flex" no-gutters>
-          <v-col>
-            <div class="pa-0" :class="mdAndUp ? 'full-height' : 'h-96'">
-              <v-row class="d-flex flex-column" no-gutters>
-                <v-col ref="panel" class="out-card">
-                  <v-card
-                    outlined
-                    tile
-                    class="pa-0 transparent"
-                    :class="mdAndUp ? 'panel-height' + multiplier : ''"
-                  >
-                    <left-pane :panel-height="panelHeight" />
-                  </v-card>
-                </v-col>
-                <v-col class="d-none d-md-block fix-it">
-                  <navigation />
-                </v-col>
-              </v-row>
-            </div>
-          </v-col>
-        </v-row>
-        <div class="d-md-none fixed left-0 bottom-0">
-          <navigation />
-        </div>
+      <v-row class="flex" no-gutters>
+        <div class="pa-0 w-full" :class="mdAndUp ? 'full-height' : 'h-96'">
+            <v-row class="d-flex flex-column" no-gutters>
+              <v-col ref="panel" class="out-card">
+                <v-card
+                  outlined
+                  tile
+                  class="pa-0 transparent"
+                  :class="mdAndUp ? 'panel-height' + multiplier : ''"
+                >
+                  <left-pane :panel-height="panelHeight" />
+                </v-card>
+              </v-col>
+              <v-col class="d-none d-md-block fix-it">
+                <navigation />
+              </v-col>
+            </v-row>
+          </div>
+      </v-row>
+      <div class="flex fixed md:hidden left-0 bottom-0">
+        <navigation />
       </div>
     </div>
   </v-app>
@@ -55,13 +46,13 @@ export default {
       multiplier: 1,
       panelHeight: 0,
       isVideo: true,
-      load_app: true,
+      loadApp: true,
     };
   },
 
   computed: {
     mdAndUp() {
-      this.load_app = false;
+      // this.loadApp = false;
       return this.$vuetify.breakpoint.mdAndUp;
     },
   },
@@ -76,7 +67,7 @@ export default {
         this.panelHeight = this.$refs.panel.clientHeight;
       }, 200);
     };
-
+    this.$nuxt.$on("finishLoad", this.onFinishLoad);
     document.addEventListener("fullscreenchange", () => {
       updateFullscreen();
     });
@@ -88,11 +79,19 @@ export default {
     });
   },
 
+  methods: {
+    onFinishLoad() {
+      this.loadApp = false;
+    },
+  },
+
   watch: {
     panelHeight: (height) => {},
   },
 
   updated() {
+    console.log("updated", this.$refs.panel.clientHeight);
+    
     this.panelHeight = this.$refs.panel.clientHeight;
   },
 
@@ -114,11 +113,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.root {
-  user-select: none;
-  margin: 0;
-  padding: 0;
-}
+
 .loading {
   position: fixed;
   top: 0;
@@ -133,7 +128,7 @@ export default {
 }
 .outer-large {
   min-width: 499px;
-  width: 33vw;
+  width: 30vw;
   position: fixed;
   top: 0;
   left: 0;
@@ -162,7 +157,7 @@ export default {
   opacity: 0.8;
 }
 .out-card {
-  border-left: 1px solid black;
+  // border-left: 1px solid black;
   margin: 0;
   padding: 0;
 }
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 195d098..c4b18b3 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -76,7 +76,7 @@ export default {
   ],
   server: {
     host: "0.0.0.0", // default: localhost
-    port: 3055, // default: 3000
+    port: 3158, // default: 3000
   },
 
   // Global CSS: https://go.nuxtjs.dev/config-css
diff --git a/frontend/plugins/copper.js b/frontend/plugins/copper.js
index e64e715..6f23546 100644
--- a/frontend/plugins/copper.js
+++ b/frontend/plugins/copper.js
@@ -6,7 +6,7 @@ const modelToScenes = {};
 
 const container = document.createElement("div");
 container.style.width = "100vw";
-container.style.height = "100vh";
+container.style.height = "100%";
 container.style.margin = 0;
 container.style.padding = 0;
 const guiOpen = false;