Added colors to each component

Author: jchan444

src/components/Canvas.vue

@@ -32,7 +32,9 @@
       @resizestop="finishedResize"
       :onDragStart="recordInitialPosition"
       :onResizeStart="recordInitialSize"
+      :style="{'background-color': componentData.color}"
     >
+    
 
       <div class="component-title">
         <p>{{ componentData.componentName }}</p>
@@ -171,18 +173,14 @@
 
 <!--color selector-->
 <q-dialog v-model="colorModal" @update:model-value="handleEditColor">
+<!--may need to change starting to be current state?-->
 <ColorPicker 
   class="colorPicker"
   default-format="hex"
   id="color-picker-1"
   :visible-formats="['hex']"
-  :color="{
-    h: 1,
-    s: 1,
-    l: 0.5,
-    a: 1
-  }"
-  @color-change="updateColor"
+  :color="this.activeComponentData.color"
+  @color-change="updateColors"
 >
   <template #hue-range-input-label>
     <span class="sr-only">Hue</span>
@@ -415,6 +413,7 @@ export default {
       "deleteActiveComponentNote",
       "openNoteModal",
       "openColorModal",
+      "updateColor",
     ]),
     useExportComponentBound(){
       useExportComponent.bind(this)();
@@ -432,8 +431,15 @@ export default {
       this.initialPosition.y = this.activeComponentData.y;
     },
   //color change function
-    updateColor (data) {
-        console.log(data)
+    updateColors (data) {
+      let payload = {
+        color: data.cssColor,
+        activeComponent: this.activeComponent,
+        routeArray: this.routes[this.activeRoute],
+        activeComponentData: this.activeComponentData,
+      }
+        this.updateColor(payload)
+        
         },
 
     // records component's initial size/position in case of resize
@@ -796,15 +802,15 @@ li:hover{
 .component-box {
   color: $menutext;
   border: 1.2px dashed $darktext;
-  background-color: rgba($darktext, .42);
+  // background-color: rgba($darktext, .42);
   -webkit-transition: background-color 200ms linear;
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
   position: absolute;
 }
 .active {
-  background-color: rgba($secondary, .42);
-  border: 1px dashed $accent;
+  // background-color: rgba($secondary, .42);
+  border: 3px solid $primary;
 }
 .minorAction {
   font-weight: bolder !important;

src/components/composables/useCreateComponent.js

@@ -41,6 +41,7 @@ export function useCreateComponent(importObj) {
       state: [],
       parent: {},
       isActive: false,
+      color: "#ffffff00"
     };
 
     if (imported === true){

src/store/actions.js

@@ -113,7 +113,10 @@ const actions = {
   [types.updateComponentSize]: ({ commit }, payload) => {
     commit(types.UPDATE_COMPONENT_SIZE, payload);
   },
-
+  //color updater
+  [types.updateColor]: ({ commit }, payload) => {
+    commit(types.UPDATE_COLOR, payload);
+  },
   // copy the active component
   [types.copyActiveComponent]: ({ commit }, payload) => {
     commit(types.COPY_ACTIVE_COMPONENT);

src/store/mutations.js

@@ -626,6 +626,14 @@ const mutations = {
     updatedComponent.x = payload.x;
     updatedComponent.y = payload.y;
   },
+  //color updater
+  [types.UPDATE_COLOR]: (state, payload) => {
+    const updatedComponent = state.routes[state.activeRoute].filter(
+      (element) => element.componentName === payload.activeComponent
+    )[0];
+    
+    updatedComponent.color = payload.color
+  },
 
   [types.UPDATE_COMPONENT_LAYER]: (state, payload) => {
     const updatedComponent = state.routes[state.activeRoute].filter(

src/store/types.js

@@ -57,6 +57,7 @@ export const UPDATE_COMPONENT_CHILDREN_MULTISELECT_VALUE = 'UPDATE_COMPONENT_CHI
 export const UPDATE_COMPONENT_NAME_INPUT_VALUE = 'UPDATE_COMPONENT_NAME_INPUT_VALUE'
 export const UPDATE_COMPONENT_CHILDREN_VALUE = 'UPDATE_COMPONENT_CHILDREN_VALUE'
 export const UPDATE_COMPONENT_POSITION = 'UPDATE_COMPONENT_POSITION'
+export const UPDATE_COLOR = 'UPDATE_COLOR'
 export const UPDATE_COMPONENT_LAYER = 'UPDATE_COMPONENT_LAYER'
 export const UPDATE_COMPONENT_SIZE = 'UPDATE_COMPONENT_SIZE'
 export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
@@ -140,6 +141,7 @@ export const updateComponentLayer = 'updateComponentLayer'
 export const updateComponentNameInputValue = 'updateComponentNameInputValue'
 export const updateComponentPosition = 'updateComponentPosition'
 export const updateComponentSize = 'updateComponentSize'
+export const updateColor = 'updateColor'
 export const updateOpenModal = 'updateOpenModal'
 export const updateStartingPosition = 'updateStartingPosition'
 export const updateStartingSize = 'updateStartingSize'