From 5f665cef19efbb79c0aaef161bcb9bc6d61bf485 Mon Sep 17 00:00:00 2001
From: Thomas Van Iseghem <thomas.van.iseghem@gmail.com>
Date: Mon, 26 Dec 2022 19:02:19 +0100
Subject: Now able to open blocks and see their parameters

---
 desktop_editor/src/components/PresetBlock.vue | 10 +++++++++-
 desktop_editor/src/components/PresetChain.vue | 12 +++++++++++-
 desktop_editor/src/components/PresetGrid.vue  | 21 ++++++++++++++++-----
 desktop_editor/src/views/PresetViewer.vue     | 27 +++++++++++++++++++++++----
 4 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/desktop_editor/src/components/PresetBlock.vue b/desktop_editor/src/components/PresetBlock.vue
index e7bb734..5e59787 100644
--- a/desktop_editor/src/components/PresetBlock.vue
+++ b/desktop_editor/src/components/PresetBlock.vue
@@ -2,7 +2,8 @@
     <div class="block">
         <button class="block-btn" 
             :class="{ isEmpty: model.hash == 0 }"
-            :style="{ background: blockColor }">
+            :style="{ background: blockColor }"
+            @click="showParams">
             <!-- <img src="rsquare.png" alt="block"> -->
             {{ modelData.model._attributes.name }}
         </button>
@@ -21,6 +22,8 @@ export default defineComponent({
         },
     },
 
+    emits: ['show-params'],
+
     data(){
         return {
             modelData: {} as any,
@@ -131,6 +134,11 @@ export default defineComponent({
             else{
                 this.blockColor = "rgba(0,0,0,0)";
             }
+        },
+
+        showParams(){
+            // Emit back to the parent component
+            this.$emit('show-params', this.model, this.modelData);
         }
     }
 });
diff --git a/desktop_editor/src/components/PresetChain.vue b/desktop_editor/src/components/PresetChain.vue
index c604649..9e5357e 100644
--- a/desktop_editor/src/components/PresetChain.vue
+++ b/desktop_editor/src/components/PresetChain.vue
@@ -6,7 +6,8 @@
             <div class="chain-objects" v-for="chainObject in chainObjects" :key="chainObject">
                 <PresetBlock 
                     v-if="chainObject.hash !== undefined"
-                   :model="chainObject">
+                   :model="chainObject"
+                   @show-params="showParams">
                 </PresetBlock>
                 <div 
                     class="control-point" 
@@ -32,6 +33,7 @@ export default defineComponent({
     components: {
         PresetBlock
     },
+
     props: {
         chain: {
             type: Object,
@@ -39,6 +41,8 @@ export default defineComponent({
         }
     },
 
+    emits: ['show-params'],
+
     data(){
         return{
             chainObjects: [] as any
@@ -66,6 +70,12 @@ export default defineComponent({
 
             this.chainObjects.push(cp);
         }
+    },
+
+    methods:{
+        showParams(model: any, modelData: any){
+            this.$emit('show-params', model, modelData);
+        }
     }
 })    
 </script>
diff --git a/desktop_editor/src/components/PresetGrid.vue b/desktop_editor/src/components/PresetGrid.vue
index 96a0da2..482d0af 100644
--- a/desktop_editor/src/components/PresetGrid.vue
+++ b/desktop_editor/src/components/PresetGrid.vue
@@ -8,10 +8,10 @@
     </div>
     
     <div v-if="preset" class="grid">
-        <chain :chain="preset.chains[0]"></chain>
-        <chain :chain="preset.chains[1]"></chain>
-        <chain :chain="preset.chains[2]"></chain>
-        <chain :chain="preset.chains[3]"></chain>
+        <chain :chain="preset.chains[0]" @show-params="showParams"></chain>
+        <chain :chain="preset.chains[1]" @show-params="showParams"></chain>
+        <chain :chain="preset.chains[2]" @show-params="showParams"></chain>
+        <chain :chain="preset.chains[3]" @show-params="showParams"></chain>
     </div>
 </template>
 
@@ -24,12 +24,21 @@ export default defineComponent({
     components: {
         Chain
     },
+
+    emits: ['show-params'],
+
     props: {
         preset: {
             type: Object,
             required: true
         }
-    }
+    },
+
+    methods: {
+        showParams(model: any, modelData: any){
+            this.$emit('show-params', model, modelData);
+        }
+    },
 })
 </script>
 
@@ -45,6 +54,8 @@ export default defineComponent({
     flex-direction: column;
     justify-content: space-evenly;
 
+    margin-bottom: 2rem;
+
 }
 
 .preset-name {
diff --git a/desktop_editor/src/views/PresetViewer.vue b/desktop_editor/src/views/PresetViewer.vue
index 9c10955..7016c87 100644
--- a/desktop_editor/src/views/PresetViewer.vue
+++ b/desktop_editor/src/views/PresetViewer.vue
@@ -3,10 +3,18 @@
 <template>
     <h1>Preset viewer</h1>
     <div class="content-container">
-        <PresetGrid 
-            v-if="preset" 
+        <PresetGrid
+            v-if="preset"
             :preset="preset"
+            @show-params="showParams"
         ></PresetGrid>
+
+        <div v-if="selectedModel">
+            <div v-for="(param, index) in selectedModel.params" :key="param">
+                <p>{{ selectedModelStructure.model.Parameter[index]._attributes.name }}</p>
+                <input type="range" min="0" max="100" :value="param.paramValues[0].floatValue * 100" >
+            </div>
+        </div>
     </div>
 </template>
 
@@ -23,7 +31,9 @@ export default defineComponent({
 
     data(){
         return {
-            preset: null as any
+            preset: null as any,
+            selectedModel: null as any,
+            selectedModelStructure: null as any
         }
     },
 
@@ -31,14 +41,23 @@ export default defineComponent({
         this.preset = store.state.currentPreset;
     },
     methods: {
+        showParams(model: any, modelData: any){
+            console.log(model, modelData);
+            this.selectedModel = model;
+            this.selectedModelStructure = modelData;
+        }
     },
 })
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .content-container {
     max-width: 1200px;
     margin: 0 auto;
+
+    .preset-grid{
+        margin-bottom: 3rem;
+    }
 }
 </style>
\ No newline at end of file
-- 
cgit v1.2.3