Skip to content

Commit d0f484d

Browse files
megateramegatera
authored
Merge pull request #7 from oslabs-beta/bugSquash/bryan
bug fixes: clicking canvas deactivates component, paste no longer wor…
2 parents 1fdcb10 + 4c5dde8 commit d0f484d

File tree

4 files changed

+25
-220
lines changed

4 files changed

+25
-220
lines changed

‎src/components/ComponentDisplay.vue

Lines changed: 10 additions & 211 deletions
Original file line numberDiff line numberDiff line change
@@ -323,9 +323,12 @@ export default {
323323
*/
324324
// unhighlights all inactive components
325325
onActivated(componentData) {
326+
if (!componentData){
327+
return;
328+
}
326329
if (this.$refs.boxes) {
327330
this.$refs.boxes.forEach((element) => {
328-
if (element.$attrs.id !== componentData.componentName) {
331+
if (element.$attrs.id !== componentData?.componentName) {
329332
element.enabled = false;
330333
element.$emit("deactivated");
331334
element.$emit("update:active", false);
@@ -335,7 +338,9 @@ export default {
335338
if (!(componentData.componentName === this.activeComponent)) {
336339
this.setActiveComponent(componentData.componentName);
337340
}
338-
this.activeComponentData.isActive = true;
341+
if (componentData){
342+
this.activeComponentData.isActive = true;
343+
}
339344
},
340345
// deactivated is emitted before activated
341346
onDeactivated() {
@@ -367,221 +372,14 @@ export default {
367372
// if user clicks on display grid, resets active component to ''
368373
handleClick(event) {
369374
if (event.target.className === "component-display grid-bg") {
370-
if (!(this.activeComponent === "")) this.setActiveComponent("");
375+
this.setActiveComponent("");
371376
}
372377
},
373-
// showExportDialog() {
374-
// ipcRenderer
375-
// .invoke("exportComponent", {
376-
// title: "Choose location to save folder in",
377-
// message: "Choose location to save folder in",
378-
// nameFieldLabel: "Component Name",
379-
// })
380-
// .then((result) => this.exportFile(result.filePath))
381-
// .catch((err) => console.log(err));
382-
// },
383-
// /**
384-
// * @description: creates component code <template>, <script>, <style>
385-
// * invokes writeTemplate, writeScript, writeStyle
386-
// */
387-
// createComponentCode(componentLocation, componentName, children) {
388-
// fs.writeFileSync(
389-
// componentLocation + ".vue",
390-
// this.writeTemplate(componentName, children) +
391-
// this.writeScript(componentName, children) +
392-
// this.writeStyle(componentName)
393-
// );
394-
// },
395-
// writeTemplateTag(componentName) {
396-
// // create reference object
397-
// const htmlElementMap = {
398-
// div: ["<div>", "</div>"],
399-
// button: ["<button>", "</button>"],
400-
// form: ["<form>", "</form>"],
401-
// img: ["<img>", ""],
402-
// link: ['<a href="#"/>', ""],
403-
// list: ["<li>", "</li>"],
404-
// paragraph: ["<p>", "</p>"],
405-
// "list-ol": ["<ol>", "</ol>"],
406-
// "list-ul": ["<ul>", "</ul>"],
407-
// input: ["<input />", ""],
408-
// navbar: ["<nav>", "</nav>"],
409-
// };
410-
// // function to loop through nested elements
411-
// function writeNested(childrenArray, indent) {
412-
// if (!childrenArray.length) {
413-
// return "";
414-
// }
415-
// let indented = indent + " ";
416-
// let nestedString = "";
417-
// childrenArray.forEach((child) => {
418-
// nestedString += indented;
419-
// if (!child.text) {
420-
// nestedString += `<${child}/>\n`;
421-
// } else {
422-
// if (child.children.length) {
423-
// nestedString += htmlElementMap[child.text][0];
424-
// nestedString += "\n";
425-
// nestedString += writeNested(child.children, indented);
426-
// nestedString += indented + htmlElementMap[child.text][1];
427-
// nestedString += "\n";
428-
// } else {
429-
// nestedString +=
430-
// htmlElementMap[child.text][0] +
431-
// htmlElementMap[child.text][1] +
432-
// "\n";
433-
// }
434-
// }
435-
// });
436-
// return nestedString;
437-
// }
438-
// // iterate through component's htmllist
439-
// let htmlArr = this.componentMap[componentName].htmlList;
440-
// let outputStr = ``;
441-
// // eslint-disable-next-line no-unused-vars
442-
// for (let el of htmlArr) {
443-
// if (!el.text) {
444-
// outputStr += ` <${el}/>\n`;
445-
// } else {
446-
// outputStr += ` `;
447-
// if (el.children.length) {
448-
// outputStr += htmlElementMap[el.text][0];
449-
// outputStr += "\n";
450-
// outputStr += writeNested(el.children, ` `);
451-
// outputStr += ` `;
452-
// outputStr += htmlElementMap[el.text][1];
453-
// outputStr += ` \n`;
454-
// } else {
455-
// outputStr +=
456-
// htmlElementMap[el.text][0] + htmlElementMap[el.text][1] + "\n";
457-
// }
458-
// }
459-
// }
460-
// return outputStr;
461-
// },
462-
// /**
463-
// * @description creates the <router-link> boilerplate for /views/components
464-
// * also creates the <template></template> tag for each component
465-
// */
466-
// writeTemplate(componentName, children) {
467-
// let str = "";
468-
// str += `<div>\n`;
469-
// // writes the HTML tag boilerplate
470-
// let templateTagStr = this.writeTemplateTag(componentName);
471-
// return `<template>\n\t${str}${templateTagStr}\t</div>\n</template>`;
472-
// },
473-
// /**
474-
// * @description imports child components into <script>
475-
// */
476-
// writeScript(componentName, children) {
477-
// // add import mapstate and mapactions if they exist
478-
// const currentComponent = this.componentMap[componentName];
479-
// let imports = "";
480-
// if (currentComponent.actions.length || currentComponent.state.length) {
481-
// imports += "import { ";
482-
// if (
483-
// currentComponent.actions.length &&
484-
// currentComponent.state.length
485-
// ) {
486-
// imports += "mapState, mapActions";
487-
// } else if (currentComponent.state.length) imports += "mapState";
488-
// else imports += "mapActions";
489-
// imports += ' } from "vuex"\n';
490-
// }
491-
// // add imports for children
492-
// children.forEach((name) => {
493-
// imports += `import ${name} from '@/components/${name}.vue';\n`;
494-
// });
495-
// // add components section
496-
497-
// // if true add data section and populate with props
498-
// let childrenComponentNames = "";
499-
// children.forEach((name) => {
500-
// childrenComponentNames += ` ${name},\n`;
501-
// });
502-
// // if true add data section and populate with props
503-
// let data = "";
504-
// if (currentComponent.props.length) {
505-
// data += " data () {\n return {";
506-
// currentComponent.props.forEach((prop) => {
507-
// data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`;
508-
// });
509-
// data += "\n";
510-
// data += " }\n";
511-
// data += " },\n";
512-
// }
513-
// // if true add computed section and populate with state
514-
// let computed = "";
515-
// if (currentComponent.state.length) {
516-
// computed += " computed: {";
517-
// computed += "\n ...mapState([";
518-
// currentComponent.state.forEach((state) => {
519-
// computed += `\n "${state}",`;
520-
// });
521-
// computed += "\n ]),\n";
522-
// computed += " },\n";
523-
// }
524-
// // if true add methods section and populate with actions
525-
// let methods = "";
526-
// if (currentComponent.actions.length) {
527-
// methods += " methods: {";
528-
// methods += "\n ...mapActions([";
529-
// currentComponent.actions.forEach((action) => {
530-
// methods += `\n "${action}",`;
531-
// });
532-
// methods += "\n ]),\n";
533-
// methods += " },\n";
534-
// }
535-
// // concat all code within script tags
536-
// let output = "\n\n<script>\n";
537-
// output +=
538-
// imports + "\nexport default {\n name: '" + componentName + "'";
539-
// output += ",\n components: {\n";
540-
// output += childrenComponentNames + " },\n";
541-
// output += data;
542-
// output += computed;
543-
// output += methods;
544-
// // eslint-disable-next-line no-useless-escape
545-
// output += "};\n<\/script>";
546-
// return output;
547-
// },
548-
// /**
549-
// * @description writes the <style> in vue component
550-
// * if component is 'App', writes css, else returns <style scoped>
551-
// */
552-
// writeStyle(componentName) {
553-
// return `\n\n<style scoped>\n</style>`;
554-
// },
555-
556-
// exportFile(data) {
557-
// if (data === undefined) return;
558-
// if (!fs.existsSync(data)) {
559-
// fs.mkdirSync(data);
560-
// // console.log(`data: ${data}`); // displays the directory path
561-
// }
562-
// // main logic below for creating single component
563-
// // eslint-disable-next-line no-unused-vars
564-
// this.createComponentCode(
565-
// path.join(data, this.activeComponent),
566-
// this.activeComponent,
567-
// this.componentMap[this.activeComponent].children
568-
// );
569-
// },
570-
// // OVERVUE 6.0: export active component
571-
// handleExportComponent(event) {
572-
// this.showExportDialog();
573-
// },
574-
575-
// event handler for copying (ctrl+C)
576378
copyActiveComponent() {},
577379
},
578380
watch: {
579381
activeComponent: function () {
580-
if (this.activeComponent) {
581-
this.onActivated(this.activeComponentObj);
582-
} else {
583-
this.onDeactivated();
584-
}
382+
this.onActivated(this.activeComponentObj);
585383
},
586384
},
587385
};
@@ -652,6 +450,7 @@ export default {
652450
-webkit-transition: background-color 200ms linear;
653451
-ms-transition: background-color 200ms linear;
654452
transition: background-color 200ms linear;
453+
position: absolute;
655454
}
656455
.active {
657456
background-color: rgba(105, 179, 190, 0.514);

‎src/components/dashboard_items/CodeSnippet.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Description:
1919
class="my-editor"
2020
readonly
2121
/>
22-
</div>
22+
</div>
2323
</template>
2424

2525
<script>
@@ -304,6 +304,7 @@ export default {
304304
font-size: 12px;
305305
background: #2d2d2d;
306306
color: #ccc;
307+
max-height: 70vh;
307308
/* you must provide font-family font-size line-height. Example: */
308309
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
309310
line-height: 1.5;
@@ -319,8 +320,3 @@ export default {
319320
}
320321
</style>
321322

322-
<style lang="scss" scoped>
323-
::-webkit-scrollbar {
324-
display: none;
325-
}
326-
</style>

‎src/store/actions.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,10 @@ const actions = {
8585
},
8686
// paste the active component copy
8787
[types.pasteActiveComponent]: ({ commit, state }) => {
88+
//if nothing is copied, don't commit anything
89+
if (!state.copiedComponent.componentName){
90+
return
91+
}
8892
commit(types.PASTE_ACTIVE_COMPONENT);
8993
// if no other parents, update as parent of active route in componentMap
9094
if (!Object.keys(state.pastedComponent.parent).length) {

‎src/store/mutations.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -279,9 +279,9 @@ const mutations = {
279279
if (state.copiedComponent) {
280280
const { copiedComponent } = state;
281281
// offset duplicate's coordinates
282-
copiedComponent.x += 20;
283-
copiedComponent.y += 20;
284282
const pastedComponent = { ...copiedComponent };
283+
pastedComponent.x = 20;
284+
pastedComponent.y = 20;
285285
state.componentMap[
286286
(pastedComponent.componentName += ` (${state.copyNumber})`)
287287
] = pastedComponent;
@@ -569,10 +569,16 @@ const mutations = {
569569
},
570570

571571
[types.SET_ACTIVE_COMPONENT]: (state, payload) => {
572+
if (payload === ''){
573+
state.activeComponent = '';
574+
state.activeComponentObj = {componentName: ''};
575+
576+
} else {
572577
state.activeComponent = payload;
573578
state.activeComponentObj = state.routes[state.activeRoute].filter(
574579
(comp) => comp.componentName === state.activeComponent
575-
)[0];
580+
)[0];
581+
}
576582
state.activeHTML = "";
577583
state.activeLayer = {
578584
id: "",

0 commit comments

Comments
 (0)