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

@@ -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",

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%;

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;
+}

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) {

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>