debug toolbar start

src/Dashboard.vue

@@ -93,6 +93,8 @@
 
       <Toolbar v-if="asciibirdMeta.length" />
 
+      <DebugPanel />
+
       <div class="border-gray-600">
         <router-view />
       </div>
@@ -102,13 +104,14 @@
 
 <script>
 import Toolbar from "./components/Toolbar.vue";
+import DebugPanel from "./components/DebugPanel.vue";
 export default {
   created() {
     this.mircColors = this.$store.state.mircColors;
     this.charCodes = this.$store.state.charCodes;
     this.asciibirdMeta = this.$store.state.asciibirdMeta;
   },
-  components: { Toolbar },
+  components: { Toolbar, DebugPanel },
   name: "Dashboard",
   data: () => ({
     forms: {

src/components/DebugPanel.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <vue-draggable-resizable 
+    @dragging="onDrag" 
+    style="z-index:100;min-height:300px;"
+    :min-width=200
+    :max-width=500
+    :min-height=300
+    :max-height=700
+    >
+    <div style="height:100%;min-height:300px;max-height:400px;">
+      <t-card header="Debug Info" style="height:100%;">
+          <p v-html="watchColorChange"></p>
+          <p v-html="debugStringTool"></p>
+      </t-card>
+    </div>
+    </vue-draggable-resizable>
+    
+  </div>
+</template>
+<script>
+export default {
+  created() {
+
+  },
+  name: "DebugPanel",
+  data: () => ({
+    floating: {
+      width: 0,
+      height: 0,
+      x: 100,
+      y: 100,
+    },
+    debugString: '',
+    debugStringTool: '',
+  }),
+  computed: {
+    watchColorChange() {
+      return this.$store.getters.getColor
+    },
+    watchToolChange() {
+      return this.$store.getters.getTool
+    },
+    makeColorButtonClass(color) {
+      return `background-color: ${color} !important;width:25px;height:25px;`;
+    },
+  },
+  watch: {
+    watchColorChange(val,old) {
+       this.debugString = val
+    },
+    watchToolChange(val,old) {
+       this.debugStringTool = val
+    }
+  },
+  methods: {
+    onResize(x, y, width, height) {
+      this.floating.x = x;
+      this.floating.y = y;
+      this.floating.width = width;
+      this.floating.height = height;
+    },
+    onDrag(x, y) {
+      this.floating.x = x;
+      this.floating.y = y;
+    },
+  },
+};
+</script>

src/components/Toolbar.vue

@@ -25,7 +25,7 @@
         <t-button
           type="button"
           v-for="(value, keyToolbar) in toolbar"
-          :key="keyToolbar"
+          :key="keyToolbar+50"
           :style="makeToolbarButtonClass(value)"
           class="border-gray-300 m-1"
           v-html="value.icon"

src/store/index.js

@@ -59,25 +59,21 @@ export default new Vuex.Store({
   },
   mutations: {
     changeTab(state, payload) {
-      state.asciibirdMeta.tab = payload;
+      state.tab = payload;
     },
     changeColor(state, payload) {
-      state.asciibirdMeta.toolbarState.currentColor = payload;
+      state.toolbarState.currentColor = payload;
     },
     changeTool(state, payload) {
-      state.asciibirdMeta.toolbarState.currentTool = payload;
+      state.toolbarState.currentTool = payload;
     },
     newAsciibirdMeta(state, payload) {
       state.asciibirdMeta.push(payload);
     },
   },
   getters: {
-    getColor() {
-      return this.state.toolbarState.currentColor ?? null
-    },
-    getTool() {
-      return this.state.toolbarState.currentTool ?? null
-    },
+    getColor: state => state.toolbarState.currentColor,
+    getTool: state => state.toolbarState.currentTool
   },
   actions: {},
   modules: {},

src/views/Editor.vue

@@ -106,10 +106,10 @@ export default {
       return this.currentAsciibirdMeta.title ?? "";
     },
     watchColorChange() {
-      return this.$store.getters.getColor()
+      return this.$store.getColor
     },
     watchToolChange() {
-      return this.$store.getters.getTool()
+      return this.$store.getTool
     },
   },
   watch: {