Merge pull request #2 from oslabs-beta/chris/readme

Chris/readme

Author: Koregano73

README.md

@@ -60,11 +60,15 @@
 - Adding notes functionality  <sub><sup>(v6.0)</sup></sub>
 - Enhanced component tree hierarchy display <sub><sup>(v6.0)</sup></sub>
 - Added drag and drop of HTML elements  <sub><sup>(v7.0)</sup></sub>
-- Added color customization of compoents <sub><sup>(v7.0)</sup></sub>
+- Added color customization of components <sub><sup>(v7.0)</sup></sub>
 - More attribute options, class and v-model <sub><sup>(v7.0)</sup></sub>
 - Added scoped style tags for components <sub><sup>(v7.0)</sup></sub>
 - Size and position specification of HTML elements <sub><sup>(v7.0)</sup></sub>
-<br>
+- Added component snap to grid functionality <sub><sup>(v8.0)</sup></sub>
+- Ability to import vue component from Element Plus component library <sub><sup>(v8.0)</sup></sub>
+- Child component grid area CSS styling <sub><sup>(v8.0)</sup></sub>
+- Export project component hierarchy and enhanced boilerplate code <sub><sup>(v8.0)</sup></sub>
+
 [↥Back to top](#table-of-contents)
 
 ### Changelog 2.0
@@ -188,8 +192,26 @@
 <h4><strong>Bug Fixes</strong></h4>
 <li>Fixed undo and redo capabilities </li>
 <li>Fixed badge number not rendering for nested HTML tags</li>
-<li></li>
+</ul>
+</details>
 
+### Changelog 8.0
+
+<details><summary>OverVue 8.0</summary>
+<ul>
+<li>Added component snap to grid functionality </li>
+<li>Code snippet reflects CSS grid area styling of components </li>
+<li>Ability to import components from Element Plus library</li>
+<li>Exported project template code now more accurately reflects component placement in app</li>
+<li>Improved canvas drag and deselect</li>
+<li>Improved WSL developer installation instructions</li>
+<br>
+<h4><strong>Bug Fixes</strong></h4>
+<li>Fixed routing components in project exports </li>
+<li>Fixed component hierarchy in project exports </li>
+<li>Fixed import statements of route child components</li>
+<li>Fixed edge case HTML element bugs in project exports </li>
+<li>Fixed in app component movement bugs which caused position to not update correctly </li>
 </ul>
 </details>
 <br/>
@@ -278,8 +300,19 @@ npm run build
 **The ability to load the application and/or devtools requires a tool/application to run a linux display as WSL does not have any display drivers since it is based off of just a CLI.
 I recommend X410 (https://x410.dev/), althought it does cost \$15, for ease of use. There are free options such as VcXsrv(https://sourceforge.net/projects/vcxsrv/) that you can get, but requires more set up.**
 
+If you choose to use VcXsrv, you will need to select a couple options:
+
+<ul>
+<li>Launch XLaunch</li>
+<li>Select multiple windows and display number=0.</li>
+<li>Select no client.</li>
+<li>Select Clipboard, Primary Selection, Native opengl, and disable access control.</li>
+<li>If Windows firewall pops up - select Public for this server to work.</li>
+</ul>
+
 If you choose to use x410, you will need to set the environment DISPLAY variable on each console:
 
+
 So, to open either the Vue devtools or OverVue in dev mode, first start your X Server then enter into the terminal:
 For WSL 1 :
 
@@ -293,19 +326,34 @@ For WSL 2 :
 export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0
 export LIBGL_ALWAYS_INDIRECT=1
 ```
+Then run the following command to run both OverVue and Vue developer tools.
+```
+npm run dev
+```
 
-followed by the command for the s or devmode. If you want both open, enter commands above followed by starting the devtools:
+To launch the Vue devloper tool, use the following command.
 
 ```
 ./node_modules/.bin/vue-devtools
 ```
 
-Then open a new terminal instance, set the DISPLAY value again (re-enter above command for DISPLAY), and start OverVue in dev mode:
+Then to start only OverVue in developer mode, open a new terminal instance and set the DISPLAY value again (re-enter above command for DISPLAY):
 
 ```
 quasar dev -m electron
 ```
-**NOTE** Electron-deeplink currently does not work on our WSL2 computers and output an error during installing the dependency which prevented the application to open in dev mode. Go to /src-electron/electron-main.js and comment out line 3/import line to bypass error. The developers did not find any impacts on application so far.
+**NOTE**: 
+<ul>
+<li>Electron-deeplink currently does not work on our WSL2 computers and output an error during installing the dependency which prevented the application to open in dev mode. Go to /src-electron/electron-main.js and comment out line 3/import line to bypass error. The developers did not find any impacts on application so far.</li>
+<li>There might be an npm install error despite all instructions. Try the following command below:</li>
+</ul>
+
+```
+sudo apt install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev
+```
+
+
+
 
 ## Running the Docker Image
 
@@ -423,7 +471,6 @@ Here are some features we're thinking about adding:
 
 
 - Ability to place child components into HTML elements
-- More semantic HTML tag options
 - Ability to export Vuex store boilerplate
 - Ability to add two-way binding to input elements
 - More granular typing options for TypeScript mode
@@ -468,10 +515,14 @@ Johnny Chan @jchan444
 Jace Crowe @JaceCrowe
 Keyla Koizumi Nishimura @keylakoizumin
 Katherine Kim @katherinek123
+Chris Wong @Koregano73
+Honghao(Michael) Sun @sunhonghaoparis
+Alex Law @alexlaw528
+Emma Genesen @EGenesen
 ```
 
 Inspired by [PreVue](https://github.com/open-source-labs/PreVue)
 
 <br/>
 
-[↥Back to top](#table-of-contents)
+[↥Back to top](#table-of-contents)

src/components/composables/useCreateComponent.js

@@ -50,7 +50,7 @@ export function useCreateComponent(importObj) {
       htmlAttributes: {
         class: "",
         id: "",
-        gridArea: [0, 2, 0, 2],
+        gridArea: [0, 0, 2, 2],
       },
     };
 

src/components/nav-buttons/ExportMenu.vue

@@ -248,12 +248,14 @@ export default {
       let str = "";
       let routeStr = "";
       
+      // Creates router-link boilerplate for App
       if (componentName === "App") {
         str += `<div id="app">\n\t\t<div id="nav">\n`;
         for(let route in routes) {
           if (route === "HomeView") {
             str += `\t\t\t<router-link to="/" class = "componentLinks">${route}</router-link>\n`;
-          } else {
+          } 
+          else {
             str += `\t\t\t<router-link to="/${route}" class = "componentLinks">${route}</router-link>\n`;
           }}
           str += `\t\t</div>\n\t\t<router-view class = "router-view"></router-view>\n`;

src/store/mutations.js

@@ -778,11 +778,12 @@ const mutations = {
     // update CSS grid grid area fr [Y beginning, Y end + 1, x beginning, x end + 1]
     if (updatedComponent.w === undefined) { updatedComponent.w = (2 * state.containerW / state.gridLayout[0]); }
     if (updatedComponent.h === undefined) { updatedComponent.h = (2 * state.containerH / state.gridLayout[1]); }
-    const rowStart = Math.round(state.gridLayout[0] * updatedComponent.x / state.containerW) ;
-    const rowEnd = Math.round(state.gridLayout[0] * (updatedComponent.x + updatedComponent.w) / state.containerW);
-    const colStart = Math.round(state.gridLayout[1] * updatedComponent.y / state.containerH);
-    const colEnd = Math.round(state.gridLayout[1] * (updatedComponent.y + updatedComponent.h) / state.containerH);
-    updatedComponent.htmlAttributes.gridArea = [rowStart, rowEnd, colStart, colEnd];
+    // add one - CSS grid-area is one-indexed
+    const rowStart = 1 + Math.round(state.gridLayout[0] * updatedComponent.x / state.containerW) ;
+    const colStart = 1 + Math.round(state.gridLayout[1] * updatedComponent.y / state.containerH);
+    const rowEnd = 1 + Math.round(state.gridLayout[0] * (updatedComponent.x + updatedComponent.w) / state.containerW);
+    const colEnd = 1 + Math.round(state.gridLayout[1] * (updatedComponent.y + updatedComponent.h) / state.containerH);
+    updatedComponent.htmlAttributes.gridArea = [rowStart, colStart, rowEnd, colEnd];
     console.log('this is the grid area', updatedComponent.htmlAttributes.gridArea);
   },