Grid works, need to fix component positioning dragfinish bug

Author: Koregano73

src/components/Canvas.vue

@@ -7,13 +7,12 @@
 <template>
   <!-- the background Canvas grid -->
   <div class="component-display grid-bg" :style="mockBg" v-on:click="handleClick" v-on:click.right="handleRight">
-  <div class="cssContainer">
+  <div class="cssContainer" :style="{ 'background-size': `${this.gridLayout[0]}px ${this.gridLayout[1]}px, ${this.gridLayout[0]}px ${this.gridLayout[1]}px` }">
     <!-- This is the actual component box -->
     <!-- https://www.npmjs.com/package/vue-draggable-resizable -->
-    <p class="cssContainerText">
-    CSS Container</p>
-  
+    <p class="cssContainerText"> CSS Container {{ this.activeComponentObj }}</p>
     <!--each component box in canvas will have these properties-->
+    <!-- !For property :Grid - look into setting it as a store variable/ input variable - no dynamic :grid changing for props- need to implement -->
     <vue-draggable-resizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
@@ -23,8 +22,9 @@
       :x="componentData.x"
       :y="componentData.y"
       :z="componentData.z"
-      :w="componentData.w"
-      :h="componentData.h"
+      :w="2 * this.gridLayout[0]"
+      :h="2 * this.gridLayout[1]"
+      :grid="this.gridLayout"
       :preventDeactivation="true"
       @activated="onActivated(componentData)"
       @deactivated="onDeactivated(componentData)"
@@ -69,7 +69,7 @@
             {'background-color': componentData.color}]"
         >
           <p class="innerHtmlText" style="font-size: 3em">{{element.note !== '' ? element.note : element.text}}</p> 
-        </div>
+        </div>sss
         <div v-if="element.text === 'footer'" class="htmlFooter"></div>
                 <div v-if="element.text === 'form'"
           class="htmlGeneral"
@@ -344,7 +344,7 @@
 import { useExportComponent } from "./composables/useExportComponent.js";
 import { mapState, mapActions } from "vuex";
 import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
-import Vue3DraggableResizable from 'vue3-draggable-resizable'
+// import Vue3DraggableResizable from 'vue3-draggable-resizable'
 import VueMultiselect from "vue-multiselect";
 import "vue-draggable-resizable/src/components/vue-draggable-resizable.css";
 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
@@ -357,7 +357,7 @@ const cloneDeep = require("lodash.clonedeep");
 export default {
   name: "Canvas",
   components: {
-    Vue3DraggableResizable,
+    // Vue3DraggableResizable,
     VueDraggableResizable,
     VueMultiselect,
     ColorPicker,
@@ -406,7 +406,8 @@ export default {
       'selectedElementList',
       'activeLayer',
       "colorModalOpen",
-      "activeRouteDisplay"
+      "activeRouteDisplay",
+      "gridLayout",
     ]),
     // used in VueDraggableResizeable component
     activeRouteArray() {
@@ -503,6 +504,7 @@ export default {
       "openNoteModal",
       "openColorModal",
       "updateColor",
+      "updateStateComponentPosition"
     ]),
     useExportComponentBound() {
       useExportComponent.bind(this)();
@@ -557,7 +559,6 @@ export default {
         payload.h !== this.initialSize.h
       ) {
         this.updateComponentSize(payload);
-
       }
       this.refresh();
     },
@@ -575,7 +576,7 @@ export default {
       payload.z--;
       this.updateComponentLayer(payload);
     },
-//drag and drop function
+    //!drag and drop function
     finishedDrag: function (x, y) {
       let payload = {
         x: x,
@@ -588,6 +589,7 @@ export default {
         payload.x !== this.initialPosition.x ||
         payload.y !== this.initialPosition.y
       ) {
+        // console.log(payload);
         this.updateComponentPosition(payload);
       }
       this.wasDragged = true;
@@ -874,6 +876,27 @@ li:hover {
   border: 1px solid black;
   width: 1000px;
   height: 900px;
+  background-color: rgba(223, 218, 218, 0.886);
+  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+  // background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -webkit-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+    -webkit-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -moz-linear-gradient(0, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    -moz-linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+    -moz-linear-gradient(0, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+  background-image: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
+    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
+  -pie-background: linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
+    linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px) -2px -2px / 100px,
+    linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px / 20px,
+    linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px) -1px -1px / 20px,
+    $secondary;
+  behavior: url(/pie/PIE.htc);
 }
 
 .cssContainerText {

src/components/composables/useCreateComponent.js

@@ -29,10 +29,11 @@ export function useCreateComponent(importObj) {
     // boilerplate properties for each component upon creation
     const component = {
       x: 0,
-      y: 20,
+      y: 0,
       z: 0,
-      w: 200,
-      h: 200,
+      // !Chris: disabling this temporarily to see if we can have create component dynamically fit into grid- less snapping bugs
+      // w: 200,
+      // h: 200,
       htmlList: this.selectedElementList,
       noteList: [],
       children: [],
@@ -47,7 +48,7 @@ export function useCreateComponent(importObj) {
       htmlAttributes: {
         class: "",
         id: ""
-      }
+      },
     };
 
     if (imported === true) {

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

@@ -8,6 +8,7 @@ Description:
 <template>
   <div class="create-component-div drawer-menu">
     <q-expansion-item group="accordion" label="Import Component">
+      <!-- !THIS IS THE IMPORT COMPONENT TAB WE NEED TO WORK ON -->
       <ImportComponent v-if="activeComponent === ''" @imported="createComponent" title="Import Component (coming soon)" class="sidebar-btn" :disable = "true"/>
     </q-expansion-item>
     <q-expansion-item group="accordion" label="Create Component">

src/store/actions.js

@@ -133,6 +133,7 @@ const actions = {
   [types.updateComponentPosition]: ({ commit }, payload) => {
     commit(types.UPDATE_COMPONENT_POSITION, payload);
   },
+  
   [types.addBindingText]: ({ commit }, payload) => {
     commit(types.addBindingText, payload);
   },

src/store/mutations.js

@@ -522,7 +522,7 @@ const mutations = {
     }
     state.activeHTML = "";
   },
-  //Drag-andDrop
+  //!Drag-andDrop
   //store id of dragged html element in activeComponent
   [types.SET_ID_DRAG]: (state, payload) => {
     const componentName = state.activeComponent;
@@ -765,11 +765,22 @@ const mutations = {
     updatedComponent.y = payload.y;
   },
 
-  [types.UPDATE_COMPONENT_SIZE]: (state, payload) => {
+  // updates state to code snippet component position
+  [types.UPDATE_COMPONENT_POSITION]: (state, payload) => {
+    //! this thing is returning undefined for some reason
     const updatedComponent = state.routes[state.activeRoute].filter(
       (element) => element.componentName === payload.activeComponent
     )[0];
+    console.log(updatedComponent, 'this is payload', payload);
+    updatedComponent.x = payload.x;
+    updatedComponent.y = payload.y;
+  },
 
+  [types.UPDATE_COMPONENT_SIZE]: (state, payload) => {
+    const updatedComponent = state.routes[state.activeRoute].filter(
+      (element) => element.componentName === payload.activeComponent
+    )[0];
+    console.log(updatedComponent, 'this is payload', payload);
     updatedComponent.h = payload.h;
     updatedComponent.w = payload.w;
     updatedComponent.x = payload.x;

src/store/state/index.js

@@ -68,6 +68,9 @@ const newState = {
   showTutorial: true,
   tutorialFirstOpen: true,
   pasteTimer: 0,
+  gridLayout: [70, 70],
+  x: 0,
+  y: 0,
 }
 
 // closured method to ensure we only ever write the default state ONCE

src/store/types.js

@@ -85,7 +85,7 @@ export const CLEAR_ACTIVE_HTML = 'CLEAR_ACTIVE_HTML'
 //
 export const REMOVE_ALL_STATE_PROPS_ACTIONS = 'REMOVE_ALL_STATE_PROPS_ACTIONS'
 export const UPDATE_PASTE_TIMER = 'UPDATE_PASTE_TIMER'
-//Drag and Drop
+//!Drag and Drop
 export const SET_ID_DRAG = 'SET_ID_DRAG'
 export const SET_ID_DROP = 'SET_ID_DROP'
 export const SET_SELECTED_ID_DRAG = 'SET_SELECTED_ID_DRAG'