aboutsummaryrefslogtreecommitdiffhomepage
path: root/desktop_editor
diff options
context:
space:
mode:
authorThomas Van Iseghem <[email protected]>2022-12-26 18:09:08 +0100
committerThomas Van Iseghem <[email protected]>2022-12-26 18:09:08 +0100
commitf0635d10e908de84beb50b7ec74642180800fff5 (patch)
tree5ccd719fa08b2f9b186cf3bdc355366c23e73a54 /desktop_editor
parent0c993aa92ee4467b44f8915c5f3ee757f7b7fb7f (diff)
downloadOpenCortex-f0635d10e908de84beb50b7ec74642180800fff5.tar.gz
OpenCortex-f0635d10e908de84beb50b7ec74642180800fff5.zip
Added way to read splitter points
Diffstat (limited to 'desktop_editor')
-rw-r--r--desktop_editor/src/components/PresetBlock.vue8
-rw-r--r--desktop_editor/src/components/PresetChain.vue62
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;
+ }
}
+
+
}