Merge pull request #15 from JojuOlaode/undoRedo

Undo redo

Author: keliphan

HomeView.png

@@ -83,7 +83,7 @@ export default {
   components: {
     VueDraggableResizable
   },
-  data() {
+  data () {
     // console.log("Component Map", this.componentMap);
     return {
       modalOpen: false,
@@ -96,13 +96,13 @@ export default {
       initialSize:{w:0,h:0,},
     };
   },
-  mounted() {
+  mounted () {
     // when component is mounted add ability to delete
 
     window.addEventListener("keyup", event => {
       if (event.key === "Backspace") {
-        if (this.activeComponent && this.activeComponentData.isActive) {
-         // console.log('this:', this)
+        if (this.activeComponent /*&& this.activeComponentData.isActive*/) {
+          // console.log('this:', this)
           this.$store.dispatch("deleteActiveComponent");
         }
       }
@@ -138,7 +138,7 @@ export default {
         // console.log('component parent',component.parent)
         // console.log('component parent parent', component.parent.parent)
         if (!Object.keys(component.parent).length) return lineage;
-        for(var parents in component.parent){
+        for(var parents in component.parent) {
           //for each parent in our component
           console.log('parents', parents)
           lineage.push(parents); //push the parent into lineage
@@ -168,21 +168,21 @@ export default {
       });
     },
     userImage() {
-      const imgSrc = this.imagePath.length ? `file://` + this.imagePath[0] : "";
+      console.log('userImage is working')
+      const imgSrc = `file://` + this.imagePath[this.activeRoute];
       // const imgSrc1 = this.imagePath;
       console.log(`imgSrc: ${imgSrc}`);
       return imgSrc;
     },
     mockBg() {
-      return this.imagePath.length
+      console.log('mockBg is working', this.imagePath[this.activeRoute])
+      return this.imagePath[this.activeRoute]
         ? {
-            background: `url("${this.userImage}") no-repeat center`,
-            "background-size": "cover"
-          }
-        : {};
+          background: `url("${this.userImage}") center/contain no-repeat`
+        }
+        : {}
     }
   },
-
   updated() {
     //console.log("updated")
     if(this.activeComponent === '')
@@ -194,20 +194,18 @@ export default {
           element.$emit('update:active', false)
         
       })}
+    } else {
+      this.$refs.boxes.forEach((element)=>{
+        // added "element.enabled === false to stop it from emitting a change every frame the box moves
+        // may need to re-enable to track box movement and resizing since that stuff isn't part of a single source of truth.
+        if (this.activeComponent === element.$attrs.id && element.enabled === false) {
+          element.enabled = true
+          element.$emit('activated')
+          element.$emit('update:active', true)
+        }
+      })
     }
-    else{
-        this.$refs.boxes.forEach((element)=>{
-          // added "element.enabled === false to stop it from emitting a change every frame the box moves
-          //may need to re-enable to track box movement and resizing since that stuff isn't part of a single source of truth.
-          if(this.activeComponent === element.$attrs.id && element.enabled === false)
-          {
-            element.enabled = true
-            element.$emit('activated')
-            element.$emit('update:active', true)
-          }
-        })
-      }
-    },
+  },
 
   methods: {
     ...mapActions([
@@ -236,8 +234,8 @@ export default {
       console.log("we started a drag")
       console.log("this.intialPosition",this.initialPosition)
       console.log("WHAT IS THIS", this)
-       if(this.activeComponent !== e.target.id){
-      this.setActiveComponent(e.target.id)
+      if (this.activeComponent !== e.target.id) {
+        this.setActiveComponent(e.target.id)
       }
       this.initialPosition.x = this.activeComponentData.x
       this.initialPosition.y = this.activeComponentData.y
@@ -246,7 +244,7 @@ export default {
       // console.log(this.initialPosition.x)
       // console.log(this.initialPosition.y)
 
-        let payload = {
+      let payload = {
         x: this.initialPosition.x,
         y: this.initialPosition.y,
         activeComponent: this.activeComponent,
@@ -257,15 +255,14 @@ export default {
       //this.updateStartingPosition(payload);
     },
 
-    recordInitialSize: function(e){
-      console.log("MAKE MY MONSTER GROW!")
-     
+    recordInitialSize: function (e) {
+      // console.log("MAKE MY MONSTER GROW!")
       this.initialSize.h = this.activeComponentData.h
       this.initialSize.w = this.activeComponentData.w
       this.initialPosition.x = this.activeComponentData.x
       this.initialPosition.y = this.activeComponentData.y
 
-        let payload = {
+      let payload = {
         h: this.initialSize.h,
         w: this.initialSize.w,
         x: this.activeComponentData.x,
@@ -279,7 +276,7 @@ export default {
 
     },
 
-    finishedResize: function(x,y,w,h){
+    finishedResize: function(x,y,w,h) {
       console.log("FINISHED RESIZING")
       let payload = {
         x: x,
@@ -290,8 +287,8 @@ export default {
         routeArray: this.routes[this.activeRoute],
         activeComponentData: this.activeComponentData
       }
-      if(payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y || 
-          payload.w !== this.initialSize.w || payload.h !==this.initialSize.h){
+      if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y || 
+          payload.w !== this.initialSize.w || payload.h !==this.initialSize.h) {
       this.updateComponentSize(payload)
       }
     },
@@ -305,7 +302,7 @@ export default {
       this.userImage;
     },
 
-    finishedDrag: function(x,y){
+    finishedDrag: function(x,y) {
       console.log("FINISHED DRAGGING")
       let payload = {
         x: x,
@@ -316,7 +313,7 @@ export default {
       }
       // console.log("Payload.x = ", payload.x, "this.initialPosition.x", this.initialPosition.x)
       //  console.log("Payload.y = ", payload.y, "this.initialPosition.y", this.initialPosition.y)
-      if(payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y){
+      if (payload.x !== this.initialPosition.x || payload.y !== this.initialPosition.y) {
         this.updateComponentPosition(payload);
       }
     },
@@ -333,29 +330,27 @@ export default {
       // console.log("this is what is currently active",this.activeComponent)
       // console.log("this is this", this)
       // console.log('!(componentData.componentName === this.activeComponent)?',!(componentData.componentName === this.activeComponent))
-      if(!(componentData.componentName === this.activeComponent)){
+      if (!(componentData.componentName === this.activeComponent)) {
         this.setActiveComponent(componentData.componentName);
       }
       this.activeComponentData.isActive = true;
-      
-  
     },
 
     // deactivated is emitted before activated
   
-    onDeactivated(componentData) {
-      if(this.activeComponent !== ''){
-      this.activeComponentData.isActive = false;
+    onDeactivated (componentData) {
+      if (this.activeComponent !== '') {
+        this.activeComponentData.isActive = false;
       }
-     // console.log("Componentdataname", componentData.componentName)
-     // console.log("active component",this.activeComponent)
+      // console.log("Componentdataname", componentData.componentName)
+      // console.log("active component",this.activeComponent)
       // if(componentData.componentName === this.activeComponent)
       // {
       //   console.log("We just clicked without making a new active component")
       // }
     },
-    onDoubleClick(compData) {
-       if(!(componentData.componentName === this.activeComponent)){
+    onDoubleClick (compData) {
+      if (!(componentData.componentName === this.activeComponent)) {
         this.setActiveComponent(componentData.componentName);
       }
       this.activeComponentData.isActive = true;
@@ -411,7 +406,7 @@ export default {
   z-index: -1;
 }
 .component-children {
-  position: absolute;
+  position: relative;
   top: 0rem;
   left: 2px;
   color: black;

Route2.png

@@ -68,7 +68,7 @@ export default {
         return false;
       }
       const component = {
-        componentName: this.componentNameInputValue,
+        componentName: this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, ''),
         x: 0,
         y: 20,
         z: 0,
@@ -84,10 +84,9 @@ export default {
 
     },
     resetActiveComponent () {
-      if(!this.activeComponent === ''){
-      this.setActiveComponent('')
-      }
-      
+      if (this.activeComponent !== '') {
+        this.setActiveComponent('')
+      }   
     },
     handleIconClick () {
       if (this.activeComponent === '') this.setClickedElementList()

Route3.png

@@ -99,7 +99,7 @@ export default {
       children = this.componentMap[componentName].children
       )
     */
-    createComponentCode(componentLocation, componentName, children) {
+    createComponentCode (componentLocation, componentName, children) {
       if (componentName === "App") {
         fs.writeFileSync(
           componentLocation + ".vue",
@@ -115,13 +115,19 @@ export default {
         );
       }
     },
+    createAssetFile (targetLocation, assetLocation) {
+      let saved = remote.nativeImage.createFromPath(assetLocation)
+      let urlData = saved.toPNG()
+      // console.log('urlData is ', urlData);
+      fs.writeFileSync(targetLocation + ".png", urlData);
+    },
     /**
      * @description helper function for writeTemplate
      * @name writeTemplateTag
      *  - gets objects from htmlList from appropriate component and adds them to the template string, then inserts into writeTemplate return str
      * @input: componentMap['component'].htmlList[tag elements]
      */
-    writeTemplateTag(compName) {
+    writeTemplateTag (compName) {
       console.log("writeTemplateTag invoked!");
       // create reference object
       const htmlElementMap = {
@@ -327,7 +333,7 @@ export default {
       str += `\n}`;
       fs.writeFileSync(path.join(location, "package.json"), str);
     },
-    exportFile(data){
+    exportFile(data) {
       if (!fs.existsSync(data)) {
         fs.mkdirSync(data);
         console.log("FOLDER CREATED!");
@@ -343,23 +349,32 @@ export default {
       this.createMainFile(data);
       this.createBabel(data);
       this.createPackage(data);
-      // main logic below for creating components?
+      // main logic below for creating components
       this.createRouter(data);
+      for (let [routeImage, imageLocation] of Object.entries(this.imagePath)) {
+        // console.log('routeImage is ', routeImage);
+        this.createAssetFile(path.join(data, "src", "assets", routeImage), imageLocation)
+      };
       for (let componentName in this.componentMap) {
+        // if componentName is a route:
         if (componentName !== "App") {
           if (this.$store.state.routes[componentName]) {
+            // console.log('THIS IS JUST A ROUTE ', componentName)
             this.createComponentCode(
               path.join(data, "src", "views", componentName),
               componentName,
               this.componentMap[componentName].children
             );
+            // if componentName is a just a component
           } else {
+            // console.log('THIS IS JUST A COMPONENT ', componentName)
             this.createComponentCode(
               path.join(data, "src", "components", componentName),
               componentName,
               this.componentMap[componentName].children
             );
           }
+          // if componentName is App
         } else {
           this.createComponentCode(
             path.join(data, "src", componentName),
@@ -371,7 +386,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(["componentMap"])
+    ...mapState(["componentMap", "imagePath"])
   }
 }
 

src/components/ComponentDisplay.vue

@@ -14,19 +14,27 @@ export default {
   name: 'OpenProjectComponent',
   methods: {
     ...mapActions([
-      'setComponentMap',
-      'setRoutes',
+      // 'setComponentMap',
+      // 'setRoutes',
+      // 'setImagePath',
+      'openProject'
     ]),
     parseFileName(file) {
       //Obtains json file name from file path
       return file.split('/').pop();
     },
-    openJSONFile(data){
+    openJSONFile (data) {
       const jsonFile = JSON.parse(fs.readFileSync(data[0], 'utf8'))
-      this.setComponentMap(jsonFile.componentMap)
-      this.setRoutes(jsonFile.routes)
+      console.log('json file', jsonFile.imagePath)
+      // this.setComponentMap(jsonFile.componentMap)
+      // this.setRoutes(jsonFile.routes)
+      // if (jsonFile.imagePath) {
+      //   this.setImagePath(jsonFile.imagePath)
+      // }
+      // open project action
+      this.openProject(jsonFile)
     },
-    showOpenJSONDialog(){
+    showOpenJSONDialog () {
       remote.dialog.showOpenDialog({
         properties: ['openFile'],
         filters: [{

src/components/CreateComponent.vue

@@ -27,7 +27,7 @@ export default {
     Routes
   },
   computed: {
-    ...mapState(['routes'])
+    ...mapState(['routes', 'componentMap'])
   },
   data () {
     return {
@@ -37,7 +37,12 @@ export default {
   methods: {
     ...mapActions(['addRouteToRouteMap', 'setRoutes']),
     handleEnterKeyPress () {
-      this.addRouteToRouteMap(this.newRoute)
+      const newRouteName = this.newRoute.replace(/[^a-z0-9-_.]/gi, '')
+      if (!this.newRoute.trim() || this.routes[newRouteName] || this.componentMap[newRouteName] ) {
+        event.preventDefault();
+        return false;
+      }
+      this.addRouteToRouteMap(newRouteName)
         .then(() => {
           this.newRoute = ''
         })