Skip to content

Commit 58b0299

Browse files
jchan444jchan444
committed
cleaned up code and added comments
1 parent e74a6d4 commit 58b0299

File tree

5 files changed

+17
-79
lines changed

5 files changed

+17
-79
lines changed

‎src/components/Canvas.vue

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
<!-- https://www.npmjs.com/package/vue-draggable-resizable -->
1313
<p class="cssContainerText">
1414
CSS Container</p>
15+
16+
<!--each component box in canvas will have these properties-->
1517
<vue-draggable-resizable
1618
class-name="component-box"
1719
v-for="componentData in activeRouteArray"
@@ -217,13 +219,14 @@
217219
</div>
218220
<div v-if="element.text === 'navbar'" class="htmlNavbar"></div>
219221
</div>
222+
<!--change color icon-->
220223
<q-icon v-if="componentData.componentName === this.activeComponent"
221224
size="25px"
222225
z-layer="0"
223226
name="palette"
224227
class="colorLogo"
225228
@click="handleEditColor" />
226-
<!-- start of right click function-->
229+
<!-- start of right click on component box function-->
227230
<q-menu context-menu>
228231
<q-list color="black" class="menu">
229232
<q-item clickable v-ripple v-close-popup id="layer-item">
@@ -298,9 +301,8 @@
298301
</div>
299302
</q-dialog>
300303

301-
<!--color selector-->
304+
<!--color selector logic - color changer will start at current state of the color-->
302305
<q-dialog v-model="colorModal" @update:model-value="handleEditColor">
303-
<!--may need to change starting to be current state?-->
304306
<ColorPicker class="colorPicker" default-format="hex" id="color-picker-1" :visible-formats="['hex']"
305307
:color="this.activeComponentData.color" @color-change="updateColors">
306308
<template #hue-range-input-label>
@@ -376,21 +378,6 @@ export default {
376378
};
377379
},
378380
mounted() {
379-
// when component is mounted, add ability to delete
380-
// window.addEventListener("keyup", (event) => {
381-
// if (event.key === "Backspace") {
382-
// if (this.activeComponent !== '' && this.noteModalOpen === false) {
383-
// this.$store.dispatch("deleteActiveComponent");
384-
// }
385-
// }
386-
// });
387-
// window.addEventListener("keyup", (event) => {
388-
// if (event.key === "Delete") {
389-
// if (this.activeComponent !== '' && this.noteModalOpen === false) {
390-
// this.$store.dispatch("deleteActiveComponent");
391-
// }
392-
// }
393-
// });
394381
// listener for the copy
395382
window.addEventListener("copy", () => {
396383
// if there is an activeComponent, copy info to state using dispatch
@@ -588,7 +575,7 @@ export default {
588575
payload.z--;
589576
this.updateComponentLayer(payload);
590577
},
591-
578+
//drag and drop function
592579
finishedDrag: function (x, y) {
593580
let payload = {
594581
x: x,
@@ -647,7 +634,7 @@ export default {
647634
this.openNoteModal();
648635
}
649636
},
650-
637+
//color editor - opens the pop up
651638
handleEditColor() {
652639
if (this.wasDragged === false && this.activeComponent !== '') {
653640
this.openColorModal();

‎src/components/composables/useExportComponent.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@ export function useExportComponent() {
148148
// writes the HTML tag boilerplate
149149
let templateTagStr = writeTemplateTag(componentName);
150150

151+
//used to loop through - and apply class/id in code snippet
151152
if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id !== "") {
152153
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
153154
} else if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id === "") {

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

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,19 @@
1616
</q-item>
1717
</q-list>
1818
</q-btn-dropdown>
19-
19+
<!--Attribute (id/class so far) change function for main component parent-->
2020
<q-input @keyup.enter="createAttribute(attributeText)" color="white" dark outlined bottom-slots
2121
v-model="attributeText" label="Enter Label" dense class="input-add" v-on:keyup.delete.stop>
2222
<template v-slot:append>
2323
<q-btn flat icon="add" @click="createAttribute(attributeText)" />
2424
</template>
2525
</q-input>
26-
26+
<!--delete buttons to remove class/id-->
2727
<button v-if="this.activeComponentObj.htmlAttributes.class !== ''" class="deleteButton"
2828
@click="deleteAttribute('class')" color="primary">Remove class</button>
2929

3030
<button v-if="this.activeComponentObj.htmlAttributes.id !== ''" class="deleteButton" @click="deleteAttribute('id')"
3131
color="primary">Remove id</button>
32-
33-
<!-- <div>
34-
<q-btn
35-
v-if="selectProps.length"
36-
id="add-props-btn"
37-
class="add-btn"
38-
color="secondary"
39-
label="Add Prop(s)"
40-
@click="addPropsToComp"
41-
/>
42-
</div> -->
4332
</div>
4433
</template>
4534

@@ -79,7 +68,7 @@ export default {
7968
stopDelete(e) {
8069
if (e.code === "Backspace") e.stopPropogation();
8170
},
82-
71+
//attribute change function to create attribute
8372
createAttribute(attributeText) {
8473
this.editAttribute({
8574
attribute: this.attributeSelection,
@@ -90,11 +79,12 @@ export default {
9079
})
9180
this.attributeText = "";
9281
},
93-
82+
//function to change the state of the attribute selection dropdown menu
9483
changeAttribute(attribute) {
9584
this.attributeSelection = attribute;
9685
},
9786
87+
//delete attribute after the delete bvutton has been clicked
9888
deleteAttribute(attribute) {
9989
this.editAttribute({
10090
attribute: attribute,
@@ -116,9 +106,6 @@ export default {
116106
}
117107
118108
.input-add {
119-
// position:absolute;
120-
// margin-left: 7em;
121-
// bottom:-100%;
122109
margin-top: 1em;
123110
margin-bottom: -1em;
124111
}

‎src/components/nav-buttons/ExportMenu.vue

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ export default {
250250
251251
// writes the HTML tag boilerplate
252252
let templateTagStr = this.writeTemplateTag(componentName);
253-
253+
//adds class/id into code snippet with exporting
254254
if(this.componentMap[componentName].htmlAttributes) {
255255
if (this.componentMap[componentName].htmlAttributes.class !== "" && this.componentMap[componentName].htmlAttributes.id !== "") {
256256
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
@@ -285,22 +285,9 @@ export default {
285285
if (this.exportAsTypescript === "on") {
286286
imports += 'import { defineComponent } from "vue";\n';
287287
}
288-
// add imports for children
289-
// for (let child in children) {
290-
// imports += `import ${children[child].componentName} from '@/components/${children[child].componentName}.vue';\n`;
291-
// }
292-
// children.forEach((name) => {
293-
// });
294-
// add components section
295288
296-
// if true add data section and populate with props
297289
let childrenComponentNames = "";
298-
// for (let child in children) {
299-
// childrenComponentNames += ` ${children[child].componentName},\n`;
300-
// }
301-
// children.forEach((name) => {
302-
// });
303-
// if true add data section and populate with props
290+
304291
let data = "";
305292
data += " data () {\n return {";
306293
if (currentComponent.props.length) {
@@ -365,14 +352,8 @@ export default {
365352
} else {
366353
let str = "";
367354
368-
// for (let child in children) {
369-
// str += `import ${children[child].componentName} from '@/components/${children[child].componentName}.vue';\n`;
370-
// }
371-
372355
let childrenComponentNames = "";
373-
// for (let child in children) {
374-
// childrenComponentNames += ` ${children[child].componentName},\n`;
375-
// }
356+
376357
// eslint-disable-next-line no-useless-escape
377358
if (this.exportAsTypescript === "on") {
378359
return `\n\n<script lang="ts">\nimport { defineComponent } from "vue";\n ${str}\nexport default defineComponent ({\n name: '${componentName}',\n components: {\n${childrenComponentNames} }\n});\n<\/script>`;

‎src/components/nav-buttons/SaveProject.vue

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -102,25 +102,7 @@ export default {
102102
103103
let state = this.$store.state;
104104
let routes = state.routes;
105-
106-
// for each route call parseAndDelete on htmlList
107-
// eslint-disable-next-line no-unused-vars
108-
/* Cannot mutatue outside of Vuex
109-
for (let view in routes ) {
110-
routes[view].forEach((component) => {
111-
let htmlList = component.htmlList;
112-
this.parseAndDelete(htmlList);
113-
});
114-
}
115-
let componentMap = this.$store.state.componentMap;
116-
// eslint-disable-next-line no-unused-vars
117-
for (let component in componentMap) {
118-
if (component.htmlList) {
119-
let comphtml = component.htmlList;
120-
this.parseAndDelete(comphtml);
121-
}
122-
}
123-
*/
105+
124106
fs.writeFileSync(data, JSON.stringify(state));
125107
localforage.setItem(
126108
fileName,

0 commit comments

Comments
 (0)