Added way to read splitter points

2 files changed, 59 insertions, 11 deletions

diff --git a/desktop_editor/src/components/PresetBlock.vue b/desktop_editor/src/components/PresetBlock.vue
index 0d9fbf3..e7bb734 100644
--- a/desktop_editor/src/components/PresetBlock.vue
+++ b/desktop_editor/src/components/PresetBlock.vue
@@ -139,7 +139,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .block{
     width: 4rem;
-    height: 100%;
+    height: 4rem;
     
 
     border-radius: 1rem;
@@ -164,9 +164,13 @@ export default defineComponent({
         background-color: rgba(0, 162, 255, 0);
         font-size: 1rem;
 
+        &:hover{
+            cursor: pointer;
+            transform: scale(1.1);
+            transition: transform 0.2s ease-in-out;
+        }
         &.isEmpty:hover{
             background-color: rgba(0, 162, 255, 0.2) !important;
-            cursor: pointer;
         }
     }
 
diff --git a/desktop_editor/src/components/PresetChain.vue b/desktop_editor/src/components/PresetChain.vue
index fa9bbbf..c604649 100644
--- a/desktop_editor/src/components/PresetChain.vue
+++ b/desktop_editor/src/components/PresetChain.vue
@@ -3,12 +3,24 @@
         <!-- The chain contains the input block, the line acros the screen, and the output block -->
         <button class="io-block">+</button>
         <div class="track">
-            <PresetBlock v-for="model in chain.models" :key="model" :model="model">
-            </PresetBlock>
+            <div class="chain-objects" v-for="chainObject in chainObjects" :key="chainObject">
+                <PresetBlock 
+                    v-if="chainObject.hash !== undefined"
+                   :model="chainObject">
+                </PresetBlock>
+                <div 
+                    class="control-point" 
+                    v-else-if="chainObject.type == 'controlPoint'" :class="{ isControlpoint: chainObject.value > 0}">
+                    {{ chainObject.loc }}
+                </div>
+            </div>
         </div>
-        <button class="io-block">+</button>
+        
+
+        <hr class="row-line">
 
-        <hr class="line">
+        <button class="io-block">+</button>
+       
     </div>
 </template>
 
@@ -26,8 +38,34 @@ export default defineComponent({
             required: true
         }
     },
+
+    data(){
+        return{
+            chainObjects: [] as any
+        }
+    },
     mounted(){
-        console.log(this.chain.models);
+        const models: any = this.chain.models;
+        const controlPoint = {"type": "controlPoint", "value": 0, "loc": 0};
+        const chainSplitControlPoints = this.chain.splitControlPoints;
+
+        this.chainObjects.push(controlPoint);
+        for(let i = 0; i < models.length; i++){
+            this.chainObjects.push(models[i]);
+            let cp = {"type": "controlPoint", "value": 0, "loc": i};
+            cp.loc = i + 1;
+
+            for(let j = 0; j < chainSplitControlPoints.length; j++){
+                if(chainSplitControlPoints[j].split == i + 1){
+                    cp.value = 1;
+                }
+                else if(chainSplitControlPoints[j].mix == i + 1){
+                    cp.value = 2;
+                }
+            }
+
+            this.chainObjects.push(cp);
+        }
     }
 })    
 </script>
@@ -61,22 +99,28 @@ export default defineComponent({
         color: rgb(41, 41, 41);
         cursor: pointer;
     }
-    .line {
+    .row-line {
         position: absolute;
-        border: 1px solid rgb(255, 255, 255);
         width: calc(100% - 8rem);
         margin: 0;
         z-index: 0;
+        border: 1px solid rgb(255, 255, 255);
     }
     .track {
         display: flex;
         flex-direction: row;
         justify-content: space-evenly;
-    
+        align-items: center;
         width: 100%;
         height: 4rem;
-        margin: 0 2rem;
+        z-index: 1;
+
+        .isControlpoint{
+            color: yellow;
+        }
     }
+
+    
 }