From d3489696e4240aafe39a197e8c8fc0c508a57ef7 Mon Sep 17 00:00:00 2001
From: Lukas Mertens <git@lukas-mertens.de>
Date: Mon, 18 Mar 2024 23:33:12 +0100
Subject: [PATCH] feat(ConfigPage): allow to dynamically adjust ui element
 sizes

Closes #30

Signed-off-by: Lukas Mertens <git@lukas-mertens.de>

commit-id:910a94c1
---
 package.json                             |  2 ++
 pnpm-lock.yaml                           | 42 ++++++++++++++++++++++
 src/components/EvConfigCanvas.vue        |  4 +--
 src/main.scss                            | 14 ++++++++
 src/modules/evconf_konva/config_stage.ts |  3 +-
 src/pages/ConfigPage.vue                 | 44 +++++++++++++++++-------
 6 files changed, 94 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index 614df82c..f953c15f 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "markdown-it": "^14.0.0",
     "notyf": "^3.10.0",
     "pinia": "^2.1.7",
+    "splitpanes": "^3.1.5",
     "vee-validate": "^4.12.6",
     "vue": "^3.4.19",
     "vue-class-component": "^7.2.6",
@@ -40,6 +41,7 @@
   "devDependencies": {
     "@babel/types": "^7.23.0",
     "@types/node": "^20.10.6",
+    "@types/splitpanes": "^2.2.6",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
     "@vitejs/plugin-vue": "^4.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 363d85f9..942b818c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ dependencies:
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.3.3)(vue@3.4.19)
+  splitpanes:
+    specifier: ^3.1.5
+    version: 3.1.5
   vee-validate:
     specifier: ^4.12.6
     version: 4.12.6(vue@3.4.19)
@@ -88,6 +91,9 @@ devDependencies:
   '@types/node':
     specifier: ^20.10.6
     version: 20.10.6
+  '@types/splitpanes':
+    specifier: ^2.2.6
+    version: 2.2.6
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.17.0
     version: 6.17.0(@typescript-eslint/parser@6.17.0)(eslint@8.57.0)(typescript@5.3.3)
@@ -1942,6 +1948,12 @@ packages:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
+  /@types/splitpanes@2.2.6:
+    resolution: { integrity: sha512-3dV5sO1Ht74iER4jJU03mreL3f+Q2h47ZqXS6Sfbqc6hkCvsDrX1GA0NbYWRdNvZemPyTDzUoApWKeoGbALwkQ== }
+    dependencies:
+      vue: 2.7.16
+    dev: true
+
   /@types/trusted-types@2.0.7:
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
     dev: true
@@ -2291,6 +2303,16 @@ packages:
       '@vue/shared': 3.4.5
     dev: true
 
+  /@vue/compiler-sfc@2.7.16:
+    resolution: { integrity: sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg== }
+    dependencies:
+      '@babel/parser': 7.24.0
+      postcss: 8.4.35
+      source-map: 0.6.1
+    optionalDependencies:
+      prettier: 2.8.8
+    dev: true
+
   /@vue/compiler-sfc@3.4.19:
     resolution: {integrity: sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==}
     dependencies:
@@ -4088,6 +4110,14 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier@2.8.8:
+    resolution: { integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== }
+    engines: { node: '>=10.13.0' }
+    hasBin: true
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /pretty-bytes@5.6.0:
     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
     engines: {node: '>=6'}
@@ -4404,6 +4434,10 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /splitpanes@3.1.5:
+    resolution: { integrity: sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw== }
+    dev: false
+
   /string.prototype.matchall@4.0.10:
     resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
     dependencies:
@@ -4876,6 +4910,14 @@ packages:
       typescript: 5.3.3
     dev: true
 
+  /vue@2.7.16:
+    resolution: { integrity: sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw== }
+    deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.
+    dependencies:
+      '@vue/compiler-sfc': 2.7.16
+      csstype: 3.1.3
+    dev: true
+
   /vue@3.4.19(typescript@5.3.3):
     resolution: {integrity: sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==}
     peerDependencies:
diff --git a/src/components/EvConfigCanvas.vue b/src/components/EvConfigCanvas.vue
index a75be9b9..7ba9d80b 100644
--- a/src/components/EvConfigCanvas.vue
+++ b/src/components/EvConfigCanvas.vue
@@ -2,7 +2,7 @@
 <!-- Copyright 2020 - 2024 Pionix GmbH and Contributors to EVerest -->
 
 <template>
-  <v-sheet id="konva-stage-container" width="100%" height="100vh" elevation="4">
+  <v-sheet id="konva-stage-container" width="100%" height="100vh" elevation="0">
     <div id="konva-stage" />
     <!-- <v-sheet id="config-stage-info" class="pa-2" height="100" width="200" elevation="2" v-if="selected_interface">
       {{ selected_interface }} <v-btn color="primary" x-small @click="discard_selected_terminal">Discard</v-btn>
@@ -97,7 +97,7 @@ export default defineComponent({
 <style lang="scss">
 #konva-stage-container {
   position: relative;
-  max-height: calc(100vh - 96px);
+  max-height: calc(100vh - 64px);
 }
 #konva-stage {
   height: 100%;
diff --git a/src/main.scss b/src/main.scss
index 1dd4aed1..c111a1db 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -1,3 +1,17 @@
 html {
   scrollbar-color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)) rgb(var(--v-theme-background));
 }
+
+.splitpanes__pane {
+  background-color: transparent !important;
+  overflow-y: scroll !important;
+  padding: 0;
+
+  &:nth-of-type(3) {
+    overflow-y: hidden !important;
+  }
+}
+
+.splitpanes__splitter {
+  background-color: rgba(var(--v-theme-on-background), 0.05) !important;
+}
diff --git a/src/modules/evconf_konva/config_stage.ts b/src/modules/evconf_konva/config_stage.ts
index 8ec41053..ebdf1bfd 100644
--- a/src/modules/evconf_konva/config_stage.ts
+++ b/src/modules/evconf_konva/config_stage.ts
@@ -131,7 +131,8 @@ export default class ConfigStage {
     context.set_container(this._stage.container());
     this.context.add_observer((ev) => this._handle_stage_context_event(ev));
     this.registerListeners();
-    this.resizeStage();
+
+    setTimeout(() => this.resizeStage(), 1500); // we have to wait for the animation of the splitpanes to finish
   }
 
   private setNewPosAndScale(static_layer: Layer, newPos: { x: number; y: number }, newScale: number) {
diff --git a/src/pages/ConfigPage.vue b/src/pages/ConfigPage.vue
index 3f2e23c3..a5a8198a 100644
--- a/src/pages/ConfigPage.vue
+++ b/src/pages/ConfigPage.vue
@@ -2,18 +2,29 @@
 <!-- Copyright 2020 - 2024 Pionix GmbH and Contributors to EVerest -->
 
 <template>
-  <v-container fluid class="fill-height">
-    <v-row class="fill-height">
-      <v-col cols="2" class="overflow-y-auto pa-0" style="max-height: calc(100vh - 96px)">
-        <ev-module-list />
-      </v-col>
-      <v-col class="pt-0" cols="7">
-        <ev-config-canvas />
-      </v-col>
-      <v-col cols="3" class="overflow-y-auto pa-0 pr-2" style="max-height: calc(100vh - 96px)">
-        <ev-module-info />
-      </v-col>
-    </v-row>
+  <v-container fluid class="fill-height px-0 py-0">
+    <splitpanes class="default-theme" style="height: calc(100vh - 64px)" @resize="on_splitpanes_resize">
+      <pane size="15">
+        <ev-module-list/>
+      </pane>
+      <pane size="70">
+        <ev-config-canvas/>
+      </pane>
+      <pane size="15">
+        <ev-module-info/>
+      </pane>
+    </splitpanes>
+    <!--
+          <v-col cols="2" class="overflow-y-auto pa-0" style="max-height: calc(100vh - 96px)">
+
+          </v-col>
+          <v-col class="pt-0" cols="7">
+
+          </v-col>
+          <v-col cols="3" class="overflow-y-auto pa-0 pr-2" style="max-height: calc(100vh - 96px)">
+
+          </v-col>
+    -->
   </v-container>
 </template>
 
@@ -23,12 +34,21 @@ import {defineComponent} from "vue";
 import EvConfigCanvas from "../components/EvConfigCanvas.vue";
 import EvModuleList from "../components/EvModuleList.vue";
 import EvModuleInfo from "../components/EvModuleInfo.vue";
+import {Pane, Splitpanes} from "splitpanes";
+import 'splitpanes/dist/splitpanes.css'
 
 export default defineComponent({
   components: {
     EvConfigCanvas,
     EvModuleList,
     EvModuleInfo,
+    Splitpanes,
+    Pane,
+  },
+  methods: {
+    on_splitpanes_resize() {
+      window.dispatchEvent(new Event('resize'));
+    },
   },
 });
 </script>