fix table header color shuffling

Author: NomadRazor

README.md

@@ -33,6 +33,7 @@ An Open Source alternative to dbdiagram.io, aiming to have the same basic featur
 + 19. Added diagram fit function
 + 20. Fix key icon positioning
 + 21. Show key icon for columns in composite PK
++ 22. Fix table header color reshuffle when changing the code
 
 ## Architecture - Solution
 

web/src/components/VDbChart/VDbChart.vue

@@ -372,6 +372,7 @@
       y: p.y - (s.height / 2)
     }
     z = Math.min(zWidth, zHeight) - cor;
+    console.log('sizes', s, 'start pan ', props.startpan, 'zooms', z,zWidth,zHeight)
     store.$patch({
       pan: pan,
       zoom: z

web/src/components/VDbChart/VDbTable.vue

@@ -106,10 +106,12 @@
     const tableNameWidth = root.value.querySelectorAll('.db-table-header__name')[0].getComputedTextLength()*(0.08*16);
     const maxWidth = Math.max(maxFieldWidth, tableNameWidth);
     state.value.width = snap(Math.max(200, maxWidth), gridSnap)+20;
+    
   }
 
   const updateHeight = () => {
     state.value.height = 35 + (30 * props.fields.length);
+    
   }
 
   const checkIndexPK = (field) => {
@@ -118,20 +120,24 @@
 
   watch(() => props.useSchema, value => {
     updateWidth();
+    store.updateTable(props.id,state.value)
   });
   
   watch(() => props.name, value => {
     updateWidth();
+    store.updateTable(props.id,state.value)
   });
 
   watch(() => props.fields, value => {
     updateHeight();
     updateWidth();
+    store.updateTable(props.id,state.value)
   });
 
   onMounted(() => {
     updateHeight();
     updateWidth();
+    store.updateTable(props.id,state.value)
   })
 
   const emit = defineEmits([

web/src/store/chart.js

@@ -1,3 +1,4 @@
+
 import { defineStore } from "pinia";
 import { markRaw } from "vue";
 
@@ -10,6 +11,7 @@ export const useChartStore = defineStore("chart", {
     tableGroups: {},
     tables: {},
     tablesColors:{},
+    actualTables:{},
     refs: {},
     grid: {
       size: 100,
@@ -91,21 +93,62 @@ export const useChartStore = defineStore("chart", {
     getTableColor(state) {
       return (tablename, tableId, schema) => {
         let tfn = `${schema}.${tablename}`;
-        if (!(tfn in state.tablesColors)) {
-          state.tablesColors[tfn] = {
-            color:null
-        }
-        }
-        if (tablename in state.tablesColors) {
-          state.tablesColors[tfn] = state.tablesColors[tablename];
-          delete state.tablesColors[tablename];
-        }
+       
         if (tableId in state.tablesColors) {
-          state.tablesColors[tfn] = state.tablesColors[tableId];
-          delete state.tablesColors[tableId];
-        }    
 
-        return state.tablesColors[tfn];
+          if (Object.keys(state.tablesColors[tableId]).includes('color')){
+            const c = state.tablesColors[tableId].color;
+            state.tablesColors[tableId][tfn] = {color:c}
+            delete state.tablesColors[tableId].color
+          }
+
+          if (!(tfn in state.tablesColors[tableId])){
+            let founded = false;
+            for (const obj in state.tablesColors){
+              if (tfn in state.tablesColors[obj] && obj != tableId){
+                state.tablesColors[tableId][tfn] = state.tablesColors[obj][tfn]
+                delete state.tablesColors[obj][tfn]
+                founded = true
+              }
+            }
+            if (!founded) {
+              if (Object.keys(state.tablesColors[tableId]).length > 0) {
+                if (!(tfn in state.tablesColors[tableId])){
+                  const k = Object.keys(state.tablesColors[tableId])[0]
+                  state.tablesColors[tableId][tfn] = state.tablesColors[tableId][k]
+                  delete state.tablesColors[tableId][k]
+                }  
+              } else {
+                state.tablesColors[tableId] = {};
+                state.tablesColors[tableId][tfn] = {color:null} 
+              }     
+            }
+          }
+        } else {
+
+          state.tablesColors[tableId] = {};
+          state.tablesColors[tableId][tfn] = {color:null} 
+
+          if (tablename in state.tablesColors) {
+            state.tablesColors[tableId] = {};
+            state.tablesColors[tableId][tfn] = state.tablesColors[tablename];
+            delete state.tablesColors[tablename];
+          } else {
+            state.tablesColors[tableId] = {};
+            state.tablesColors[tableId][tfn] = {color:null} 
+          }
+
+          if (tfn in state.tablesColors) {
+            state.tablesColors[tableId] = {};
+            state.tablesColors[tableId][tfn] = state.tablesColors[tfn]
+            delete state.tablesColors[tfn];
+          } else {
+            state.tablesColors[tableId] = {};
+            state.tablesColors[tableId][tfn] = {color:null} 
+          }
+          
+        }   
+        return state.tablesColors[tableId][tfn];
       };
     },
     getTableGroup(state) {
@@ -210,22 +253,40 @@ export const useChartStore = defineStore("chart", {
       };
     },
     loadDatabase(database) {
-      for(const tableGroup of database.schemas[0].tableGroups)
-      {
-        this.getTableGroup(tableGroup.id);
-      }
-      for(const table of database.schemas[0].tables)
-      {
-        this.getTable(table.id);
-      }
-      for(const ref of database.schemas[0].refs)
-      {
-        this.getRef(ref.id);
+      let tablesList = [];
+      for (const schema of database.schemas){
+        for(const tableGroup of schema.tableGroups)
+        {
+          this.getTableGroup(tableGroup.id);
+        }
+        
+        for(const table of schema.tables)
+        {
+          this.getTable(table.id);
+          this.getTableColor(table.name,table.id,schema.name)
+        }
+        tablesList.push(...schema.tables.map((x)=> x.id));
+       
+        for(const ref of schema.refs)
+        {
+          this.getRef(ref.id);
+        }
+        console.log(schema);
       }
-      console.log(database.schemas[0]);
+      
+      
+      this.$patch({
+        actualTables:tablesList
+      })
       this.loaded = true;
     },
-    load(state) {
+    load(state) {      
+      console.log(Object.values(this.actualTables))
+      for (const tbl in state.tables) {
+          if (!(Object.values(this.actualTables).includes(Number(tbl)))){
+            delete state.tables[tbl]
+          } 
+      }
       this.$reset();
       this.$patch({
         ...state,
@@ -257,7 +318,7 @@ export const useChartStore = defineStore("chart", {
     updateTableColor(tablename,id, color,schema) {
       let tfn = `${schema}.${tablename}`;
       this.$patch({
-        tablesColors:{[tfn]: {'color': color }}
+        tablesColors:{[id]: { [tfn]: {'color': color }}}
       });
     },
     updateTable(tableId, newTable) {