Skip to content

Commit f66b132

Browse files
JaceCroweJaceCrowe
committed
added ability to make notes for HTML Elements and have that rendered on the canvas. Mutations, state, actions made. Also started to work with the problem of html element menu bugs for element selection over component selection. First issue is when working with HTML element, if Icons are present and selected, the new element will be nested into the html that is being edited and not to the component. Removed Icons menu when html element is being edited
1 parent eb2bd13 commit f66b132

File tree

7 files changed

+57
-16
lines changed

7 files changed

+57
-16
lines changed

‎src/components/Canvas.vue

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
element.w !== 0 ? {'width': element.w} : {'width': '25%'},
6363
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
6464
{'background-color': componentData.color}]">
65-
<p class="innerHtmlText">{{element.text}}</p>
65+
<p class="innerHtmlText">{{element.note !== '' ? element.note : element.text}}</p>
6666
</div>
6767
<div v-if="element.text === 'div'"
6868
class="htmlDiv"
@@ -72,7 +72,7 @@
7272
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
7373
{'background-color': componentData.color}]"
7474
>
75-
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
75+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
7676
</div>
7777
<div v-if="element.text === 'footer'" class="htmlFooter"></div>
7878
<div v-if="element.text === 'h1'"
@@ -83,7 +83,7 @@
8383
element.h !== 0 ? {'height' : element.h} : {'height' : '20%'},
8484
{'background-color': componentData.color}]"
8585
>
86-
<p class="innerHtmlText" style="font-size: 3em">Lorem Ipsum</p>
86+
<p class="innerHtmlText" style="font-size: 4em">{{element.note !== '' ? element.note :'Lorem Ipsum'}}</p>
8787
</div>
8888
<div v-if="element.text === 'h2'"
8989
class="htmlHead"
@@ -93,7 +93,7 @@
9393
element.h !== 0 ? {'height' : element.h} : {'height' : '15%'},
9494
{'background-color': componentData.color}]"
9595
>
96-
<p class="innerHtmlText" style="font-size: 2.5em">dolor sit amet</p>
96+
<p class="innerHtmlText" style="font-size: 2.5em">{{element.note !== '' ? element.note : 'dolor sit amet'}}</p>
9797
</div>
9898
<div v-if="element.text === 'h3'"
9999
class="htmlHead"
@@ -103,7 +103,7 @@
103103
element.h !== 0 ? {'height' : element.h} : {'height' : '12%'},
104104
{'background-color': componentData.color}]"
105105
>
106-
<p class="innerHtmlText" style="font-size: 2.2em">consectetur adipiscing elit</p>
106+
<p class="innerHtmlText" style="font-size: 2.2em">{{element.note !== '' ? element.note : 'consectetur adipiscing elit'}}</p>
107107
</div>
108108
<div v-if="element.text === 'h4'"
109109
class="htmlHead"
@@ -113,7 +113,7 @@
113113
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
114114
{'background-color': componentData.color}]"
115115
>
116-
<p class="innerHtmlText" style="font-size: 2em">sed do eiusmod tempor incididunt</p>
116+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : 'sed do eiusmod tempor incididunt'}}</p>
117117
</div>
118118
<div v-if="element.text === 'h5'"
119119
class="htmlHead"
@@ -123,7 +123,7 @@
123123
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
124124
{'background-color': componentData.color}]"
125125
>
126-
<p class="innerHtmlText" style="font-size: 2em">ut labore et dolore magna aliqua</p>
126+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : 'ut labore et dolore magna aliqua'}}</p>
127127
</div>
128128
<div v-if="element.text === 'h6'"
129129
class="htmlHead"
@@ -133,7 +133,7 @@
133133
element.h !== 0 ? {'height' : element.h} : {'height' : '10%'},
134134
{'background-color': componentData.color}]"
135135
>
136-
<p class="innerHtmlText" style="font-size: 2em">Ut enim ad minim veniam</p>
136+
<p class="innerHtmlText" style="font-size: 2em">{{element.note !== '' ? element.note : 'Ut enim ad minim veniam'}}</p>
137137
</div>
138138
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
139139
<div v-if="element.text === 'form'"
@@ -144,7 +144,7 @@
144144
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
145145
{'background-color': componentData.color}]"
146146
>
147-
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
147+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
148148
</div>
149149
<div v-if="element.text === 'header'" class="htmlHeader"></div>
150150
<div v-if="element.text === 'img'"
@@ -155,7 +155,7 @@
155155
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
156156
{'background-color': componentData.color}]"
157157
>
158-
<p class="innerHtmlText" style="font-size: 3em">{{element.text}}</p>
158+
<p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p>
159159
</div>
160160
<input v-if="element.text === 'input'" class="htmlInput"/>
161161
<div v-if="element.text === 'list'" class="htmlList"></div>
@@ -185,7 +185,7 @@
185185
element.h !== 0 ? {'height' : element.h} : {'height' : '40%'},
186186
{'background-color': componentData.color}]"
187187
>
188-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
188+
<p>{{element.note !== '' ? element.note : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'}}</p>
189189
</div>
190190
</div>
191191
<q-icon v-if="componentData.componentName === this.activeComponent"
@@ -1063,13 +1063,9 @@ color:black;
10631063
position: absolute;
10641064
color: $menutext;
10651065
font-weight: bolder !important;
1066+
text-overflow: clip;
10661067
}
10671068
1068-
.htmlH6{
1069-
position: absolute;
1070-
color: $menutext;
1071-
font-weight: bolder !important;
1072-
}
10731069
10741070
.htmlImg{
10751071
position: absolute;
@@ -1109,6 +1105,8 @@ color:black;
11091105
position: absolute;
11101106
text-align: center;
11111107
opacity: 0.5;
1108+
overflow: hidden;
1109+
text-overflow: clip;
11121110
}
11131111
11141112
.htmlNavbar{

‎src/components/left-sidebar/ComponentTab/CreateMenu.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export default {
8181
"selectedElementList",
8282
"activeComponent",
8383
"activeHTML",
84+
"attributeModalOpen",
8485
"userActions",
8586
"userState",
8687
"userProps",
@@ -114,6 +115,11 @@ export default {
114115
useCreateComponent.bind(this)({}) //invokes composable
115116
},
116117
},
118+
watch: {
119+
attributeModalOpen() {
120+
this.attributeModal = this.attributeModalOpen;
121+
},
122+
}
117123
};
118124
</script>
119125

‎src/components/left-sidebar/ComponentTab/InputHTMLMenu.vue

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,11 @@
1313
<i id="comp-btn" class="fa-solid fa-right-to-bracket"
1414
:disable="classText.length > 0 ? false : true" @click.self="submitClass(classText, this.activeHTML)"></i>
1515
</q-input>
16+
<q-input label="Add Inner Text" filled dark autofocus true hide-bottom-space v-model="noteText" @keyup.enter="submitNote">
17+
<i class="fa-solid fa-right-to-bracket" color="secondary" label="Submit Note"
18+
:disable="noteText.length > 0 ? false : true" @click.self="submitNote(noteText, this.activeHTML)">
19+
</i>
20+
</q-input>
1621
<p class="title">Adjust Height and Elevation:</p>
1722
<q-slider
1823
v-model="heightText"
@@ -105,6 +110,7 @@ export default {
105110
widthText: '0',
106111
topText: '0',
107112
leftText: '0',
113+
noteText: '',
108114
}
109115
},
110116
computed: {
@@ -126,6 +132,7 @@ export default {
126132
'setActiveLayer',
127133
'openAttributeModal',
128134
'addActiveComponentClass',
135+
'addActiveComponentElementNote',
129136
'addActiveComponentHeight',
130137
'addActiveComponentWidth',
131138
'addActiveComponentTop',
@@ -142,6 +149,17 @@ export default {
142149
this.addActiveComponentClass(payload);
143150
this.classText = '';
144151
},
152+
submitNote(element, idNum) {
153+
if (element === '') {
154+
return;
155+
}
156+
let payload = {
157+
note: element,
158+
id: idNum
159+
}
160+
this.addActiveComponentElementNote(payload);
161+
this.note = '';
162+
},
145163
submitHeight(element, idNum) {
146164
if (element === '') {
147165
return;

‎src/components/left-sidebar/ComponentTab/UpdateMenu.vue

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ Description:
5050
<q-expansion-item group="accordion" label="HTML Elements">
5151
<div class="icon-container">
5252
<Icons
53+
v-model="attributeModal"
54+
v-if="attributeModal === false"
5355
class="icons"
5456
@getClickedIcon="addToSelectedElementList"
5557
@activeElement="addToComponentElementList"

‎src/store/actions.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@ const actions = {
6363
[types.addActiveComponentLeft]: ({ commit }, payload) => {
6464
commit(types.ADD_ACTIVE_COMPONENT_LEFT, payload);
6565
},
66+
67+
[types.addActiveComponentElementNote]: ({ commit }, payload) => {
68+
commit(types.ADD_ACTIVE_COMPONENT_ELEMENT_NOTE, payload)
69+
},
6670
//
6771
[types.registerComponent]: ({ state, commit }, payload) => {
6872
/* this action has a lot of mutations deployed

‎src/store/mutations.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -860,6 +860,7 @@ const mutations = {
860860
}
861861
})
862862
},
863+
863864
[types.DELETE_ACTIVE_COMPONENT_CLASS]: (state, payload) => {
864865
state.componentMap[state.activeComponent].classList.forEach((el, ind) => {
865866
if (payload === el) {
@@ -897,6 +898,14 @@ const mutations = {
897898
}
898899
})
899900
},
901+
902+
[types.ADD_ACTIVE_COMPONENT_ELEMENT_NOTE]: (state, payload) => {
903+
state.componentMap[state.activeComponent].htmlList.forEach((el) => {
904+
if (payload.id === el.id) {
905+
el.note = payload.note
906+
}
907+
})
908+
},
900909
// *** PROJECTS *** //////////////////////////////////////////////
901910

902911
[types.ADD_PROJECT]: (state, payload) => {

‎src/store/types.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,8 @@ export const ADD_ACTIVE_COMPONENT_HEIGHT = 'ADD_ACTIVE_COMPONENT_HEIGHT'
7878
export const ADD_ACTIVE_COMPONENT_WIDTH = 'ADD_ACTIVE_COMPONENT_WIDTH'
7979
export const ADD_ACTIVE_COMPONENT_TOP = 'ADD_ACTIVE_COMPONENT_TOP'
8080
export const ADD_ACTIVE_COMPONENT_LEFT = 'ADD_ACTIVE_COMPONENT_LEFT'
81+
export const ADD_ACTIVE_COMPONENT_ELEMENT_NOTE = 'ADD_ACTIVE_COMPONENT_ELEMENT_NOTE'
82+
8183

8284
//
8385
export const REMOVE_ALL_STATE_PROPS_ACTIONS = 'REMOVE_ALL_STATE_PROPS_ACTIONS'
@@ -101,6 +103,8 @@ export const addActiveComponentHeight = 'addActiveComponentHeight'
101103
export const addActiveComponentWidth = 'addActiveComponentWidth'
102104
export const addActiveComponentTop = 'addActiveComponentTop'
103105
export const addActiveComponentLeft = 'addActiveComponentLeft'
106+
export const addActiveComponentElementNote = 'addActiveComponentElementNote'
107+
104108

105109

106110
//

0 commit comments

Comments
 (0)