From ab3014bf4bdf82331412ae1a9fe7b7c266e0c8b6 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Tue, 22 Aug 2023 14:32:15 +0800
Subject: [PATCH] Add tree chart and drag to scroll function

---
 app/src/App.vue                          |  10 +-
 app/src/components/HeaderPart.vue        |  79 ++++++----
 app/src/components/QuestPart.vue         |  20 +--
 app/src/components/TreeChart.vue         | 192 +++++++++++++++++++++++
 app/src/components/VisualizationPart.vue |  62 +++++++-
 app/src/main.js                          |   4 +-
 6 files changed, 315 insertions(+), 52 deletions(-)
 create mode 100644 app/src/components/TreeChart.vue

diff --git a/app/src/App.vue b/app/src/App.vue
index c0fcaaf..eb03e44 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -11,13 +11,13 @@ import VisualizationPart from './components/VisualizationPart.vue'
 <template>
   <div class="bg-background-primary h-screen">
     <!--header-->
-    <div id="header" class="bg-background-secondary content-center h-[6%] p-1">
+    <div id="header" class="bg-background-secondary content-center h-[6vh] p-1">
       <HeaderPart />
     </div>
     <!--main-->
-    <div id="main" class="h-[94%] grid grid-cols-3 gap-3 p-3">
+    <div id="main" class="h-[94vh] grid grid-cols-3 gap-3 p-3">
       <!--Topic and Command List-->
-      <div class="bg-background-secondary inline-block h-full rounded-lg">
+      <div class="bg-background-secondary h-full rounded-lg">
         <section id="quest" class="h-2/3 m-3">
           <QuestPart />
         </section>
@@ -27,7 +27,7 @@ import VisualizationPart from './components/VisualizationPart.vue'
         </section>
       </div>
       <!--Terminal and Hint-->
-      <div class="bg-background inline-block h-full py-2 rounded-lg">
+      <div class="bg-background h-full rounded-lg">
         <section id="terminal" class="h-3/5">
           <TerminalPart />
         </section>
@@ -36,7 +36,7 @@ import VisualizationPart from './components/VisualizationPart.vue'
         </section>
       </div>
       <!--Visualization-->
-      <div class="bg-background-primary inline-block h-full">
+      <div class="h-full">
         <div class="bg-border rounded-xl h-[90%] px-3 py-6">
           <div class="bg-background rounded-xl h-full px-1 py-6">
             <section id="visualization" class="bg-background-primary h-full">
diff --git a/app/src/components/HeaderPart.vue b/app/src/components/HeaderPart.vue
index c8095d8..6333239 100644
--- a/app/src/components/HeaderPart.vue
+++ b/app/src/components/HeaderPart.vue
@@ -1,38 +1,51 @@
 <script setup></script>
 
 <template>
-  <div class="inline-block">
-    <button id="stream" class="p-1">
-      <font-awesome-icon
-        :icon="['fas', 'bars-staggered']"
-        class="text-text-primary"
-      />
-    </button>
-    <button id="backward" class="p-1">
-      <font-awesome-icon :icon="['fas', 'arrow-left']" class="text-border" />
-    </button>
-    <button>
-      <p class="text-text-primary inline font-bold p-1">1. Command's Basics</p>
-    </button>
-    <p class="text-text-primary inline font-bold p-1">‧</p>
-    <button>
-      <p class="text-text-primary inline font-bold p-1">
-        1. Try Your First Command
-      </p>
-    </button>
-  </div>
-  <div class="float-right inline-block">
-    <button id="warning" class="p-1">
-      <font-awesome-icon
-        :icon="['fas', 'triangle-exclamation']"
-        class="text-text-primary"
-      />
-    </button>
-    <button id="setting" class="p-1">
-      <font-awesome-icon :icon="['fas', 'gear']" class="text-text-primary" />
-    </button>
-    <button id="fullscreen" class="p-1">
-      <font-awesome-icon :icon="['fas', 'expand']" class="text-text-primary" />
-    </button>
+  <div class="h-full flex items-center justify-center mx-3">
+    <div class="flex items-center gap-3">
+      <button id="stream" class="flex items-center">
+        <font-awesome-icon
+          :icon="['fas', 'bars']"
+          class="text-text-primary h-5 w-5"
+        />
+      </button>
+      <button id="backward" class="flex items-center">
+        <font-awesome-icon
+          :icon="['fas', 'arrow-left']"
+          class="text-text-line h-5 w-5"
+        />
+      </button>
+      <button>
+        <p class="text-text-primary inline-block font-bold whitespace-nowrap">
+          1. Command's Basics
+        </p>
+      </button>
+      <p class="text-text-primary inline-block font-bold">●</p>
+      <button>
+        <p class="text-text-primary inline-block font-bold whitespace-nowrap">
+          1. Try Your First Command
+        </p>
+      </button>
+    </div>
+    <div class="h-full w-full flex gap-3 items-center justify-end">
+      <button id="warning" class="flex items-center">
+        <font-awesome-icon
+          :icon="['fas', 'triangle-exclamation']"
+          class="text-text-primary h-5 w-5"
+        />
+      </button>
+      <button id="setting" class="flex items-center">
+        <font-awesome-icon
+          :icon="['fas', 'gear']"
+          class="text-text-primary h-5 w-5"
+        />
+      </button>
+      <button id="fullscreen" class="flex items-center">
+        <font-awesome-icon
+          :icon="['fas', 'expand']"
+          class="text-text-primary h-5 w-5"
+        />
+      </button>
+    </div>
   </div>
 </template>
diff --git a/app/src/components/QuestPart.vue b/app/src/components/QuestPart.vue
index a79d8a9..39df401 100644
--- a/app/src/components/QuestPart.vue
+++ b/app/src/components/QuestPart.vue
@@ -9,7 +9,8 @@ api
   .get('/quests/helloworld')
   .then((res) => {
     console.log(res.data)
-    questData.value = JSON.stringify(res.data.content)
+    questData.value = JSON.stringify(res.data.instruction)
+    questData.value = '--Quest Information--'
   })
   .catch((err) => {
     questErr.value = err
@@ -17,14 +18,13 @@ api
 </script>
 
 <template>
-  <h1 id="topic" class="text-text">Try Your First Command</h1>
-  <hr class="border-text-line border-2 my-2" />
-  <div>
-    <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
-    <p class="text-text" v-else-if="questData">--Quest Information--</p>
-    <!--
-    <p class="text-text" v-else-if="quest" v-html="questData"></p>
-    -->
-    <p class="text-text" v-else>Loading...</p>
+  <div class="overflow-auto h-full w-full max-h-full">
+    <h1 id="topic" class="text-text">Try Your First Command</h1>
+    <hr class="border-text-line border-2 my-2" />
+    <div>
+      <p class="text-red-500" v-if="questErr">{{ questErr.message }}</p>
+      <p class="text-text" v-else-if="questData" v-html="questData"></p>
+      <p class="text-text" v-else>Loading...</p>
+    </div>
   </div>
 </template>
diff --git a/app/src/components/TreeChart.vue b/app/src/components/TreeChart.vue
new file mode 100644
index 0000000..03c5d69
--- /dev/null
+++ b/app/src/components/TreeChart.vue
@@ -0,0 +1,192 @@
+<script setup></script>
+
+<template>
+  <div class="tree w-max h-max">
+    <ul>
+      <li>
+        <a href="#">Parent</a>
+        <ul>
+          <li>
+            <a href="#">Child</a>
+            <ul>
+              <li>
+                <a href="#">Grand Child</a>
+              </li>
+            </ul>
+          </li>
+          <li>
+            <a href="#">Child</a>
+            <ul>
+              <li><a href="#">Grand Child</a></li>
+              <li>
+                <a href="#">Grand Child</a>
+                <ul>
+                  <li>
+                    <a href="#"
+                      >Great Grand Child
+                      aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a
+                    >
+                  </li>
+                  <li>
+                    <a href="#">Great Grand Child</a>
+                  </li>
+                  <li>
+                    <a href="#">Great Grand Child</a>
+                    <ul>
+                      <li><a>Grand Child</a></li>
+                      <li>
+                        <a>Grand Child</a>
+                        <ul>
+                          <li>
+                            <a>Great Grand Child</a>
+                          </li>
+                          <li>
+                            <a>Great Grand Child</a>
+                            <ul>
+                              <li>
+                                <a>Great Grand Child</a>
+                              </li>
+                              <li>
+                                <a>Great Grand Child</a>
+                                <ul>
+                                  <li>
+                                    <a>Great Grand Child</a>
+                                  </li>
+                                  <li>
+                                    <a>Great Grand Child</a>
+                                    <ul>
+                                      <li>
+                                        <a>Great Grand Child</a>
+                                      </li>
+                                      <li>
+                                        <a>Great Grand Child</a>
+                                      </li>
+                                    </ul>
+                                  </li>
+                                </ul>
+                              </li>
+                            </ul>
+                          </li>
+                        </ul>
+                      </li>
+                      <li><a>Grand Child</a></li>
+                    </ul>
+                  </li>
+                </ul>
+              </li>
+              <li><a href="#">Grand Child</a></li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+.tree ul {
+  padding-top: 20px;
+  position: relative;
+
+  transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+}
+
+.tree li {
+  display: inline-block;
+  text-align: center;
+  list-style-type: none;
+  position: relative;
+  padding: 20px 5px 0 5px;
+  vertical-align: top;
+
+  transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+}
+
+.tree li::before,
+.tree li::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 50%;
+  border-top: 1px solid #ccc;
+  width: 50%;
+  height: 20px;
+}
+.tree li::after {
+  right: auto;
+  left: 50%;
+  border-left: 1px solid #ccc;
+}
+
+.tree li:only-child::after,
+.tree li:only-child::before {
+  display: none;
+}
+
+.tree li:only-child {
+  padding-top: 0;
+}
+
+.tree li:first-child::before,
+.tree li:last-child::after {
+  border: 0 none;
+}
+
+.tree li:last-child::before {
+  border-right: 1px solid #ccc;
+  border-radius: 0 5px 0 0;
+  -webkit-border-radius: 0 5px 0 0;
+  -moz-border-radius: 0 5px 0 0;
+}
+.tree li:first-child::after {
+  border-radius: 5px 0 0 0;
+  -webkit-border-radius: 5px 0 0 0;
+  -moz-border-radius: 5px 0 0 0;
+}
+
+.tree ul ul::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  border-left: 1px solid #ccc;
+  width: 0;
+  height: 20px;
+}
+
+.tree li a {
+  border: 1px solid #ccc;
+  padding: 5px 10px;
+  text-decoration: none;
+  color: #666;
+  font-family: arial, verdana, tahoma;
+  font-size: 11px;
+  display: inline-block;
+
+  border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+
+  transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+}
+
+.tree li a:hover,
+.tree li a:hover + ul li a {
+  background: #c8e4f8;
+  color: #000;
+  border: 1px solid #94a0b4;
+}
+
+.tree li a:hover + ul li::after,
+.tree li a:hover + ul li::before,
+.tree li a:hover + ul::before,
+.tree li a:hover + ul ul::before {
+  border-color: #94a0b4;
+}
+</style>
diff --git a/app/src/components/VisualizationPart.vue b/app/src/components/VisualizationPart.vue
index 9301816..f1c9a77 100644
--- a/app/src/components/VisualizationPart.vue
+++ b/app/src/components/VisualizationPart.vue
@@ -1,5 +1,63 @@
-<script setup></script>
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import TreeChart from './TreeChart.vue'
+
+const treeRef = ref(null)
+let pos = { top: 0, left: 0, x: 0, y: 0 }
+
+function mouseMoveHandler(e) {
+  const dx = e.clientX - pos.x
+  const dy = e.clientY - pos.y
+
+  treeRef.value.scrollTop = pos.top - dy
+  treeRef.value.scrollLeft = pos.left - dx
+}
+
+function mouseUpHandler() {
+  treeRef.value.style.cursor = 'grab'
+  treeRef.value.style.removeProperty('user-select')
+
+  document.removeEventListener('mousemove', mouseMoveHandler)
+  document.removeEventListener('mouseup', mouseUpHandler)
+}
+
+function mouseDownHandler(e) {
+  treeRef.value.style.cursor = 'grabbing'
+  treeRef.value.style.userSelect = 'none'
+
+  pos = {
+    left: treeRef.value.scrollLeft,
+    top: treeRef.value.scrollTop,
+    x: e.clientX,
+    y: e.clientY,
+  }
+
+  document.addEventListener('mousemove', mouseMoveHandler)
+  document.addEventListener('mouseup', mouseUpHandler)
+}
+
+onMounted(() => {
+  treeRef.value.style.cursor = 'grab'
+  treeRef.value.addEventListener('mousedown', mouseDownHandler)
+})
+
+onUnmounted(() => {
+  treeRef.value.removeEventListener('mousedown', mouseDownHandler)
+})
+</script>
 
 <template>
-  <p class="text-text">--Visualization--</p>
+  <div
+    id="tree"
+    ref="treeRef"
+    class="h-full w-full overflow-auto cursor-grabbing"
+  >
+    <TreeChart />
+  </div>
 </template>
+
+<style>
+::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/app/src/main.js b/app/src/main.js
index 27ca8ff..84f3945 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -9,7 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 /* import specific icons */
 import {
-  faBarsStaggered,
+  faBars,
   faArrowLeft,
   faList,
   faGear,
@@ -28,7 +28,7 @@ import App from './App.vue'
 
 /* add icons to the library */
 library.add(
-  faBarsStaggered,
+  faBars,
   faArrowLeft,
   faTriangleExclamation,
   faGear,