chars and char select

src/Dashboard.vue

@@ -68,6 +68,11 @@
       <Toolbar :canvas-x="canvasX" :canvas-y="canvasY" v-if="asciibirdMeta.length" />
       <DebugPanel :canvas-x="canvasX" :canvas-y="canvasY" v-if="asciibirdMeta.length" />
       <Editor @coordsupdate="updateCoords" v-if="asciibirdMeta.length" />
+      
+      <CharPicker v-if="$store.getters.getToolbarState.isChoosingChar" />
+      <ColourPicker v-if="$store.getters.getToolbarState.isChoosingFg || $store.getters.getToolbarState.isChoosingBg" />
+
+
     </div>
   </div>
 </template>
@@ -77,6 +82,8 @@ import Toolbar from "./components/Toolbar.vue";
 import DebugPanel from "./components/DebugPanel.vue";
 import Editor from "./views/Editor.vue";
 // import * as Anser from "anser";
+import CharPicker from "./components/parts/CharPicker.vue";
+import ColourPicker from "./components/parts/ColourPicker.vue";
 
 export default {
   async created() {
@@ -93,7 +100,7 @@ export default {
       window.location.href = "/";
     }
   },
-  components: { Toolbar, DebugPanel, Editor },
+  components: { Toolbar, DebugPanel, Editor, CharPicker, ColourPicker },
   name: "Dashboard",
   data: () => ({
     forms: {
@@ -123,6 +130,8 @@ export default {
     importFormat: null,
     canvasX: null,
     canvasY: null,
+    dashboardX: null,
+    dashboardY: null,
   }),
   methods: {
     updateCoords(value) {

src/components/Colours.vue

@@ -1,11 +1,6 @@
 <template>
   <t-card>
-    <ColourPicker
-      v-if="
-        $store.getters.getToolbarState.isChoosingFg ||
-        $store.getters.getToolbarState.isChoosingBg
-      "
-    />
+
 
     <t-button
       type="button"
@@ -44,22 +39,13 @@
       >{{ `${$store.getters.getToolbarState.selectedChar}` }}</t-button
     >
 
-    <CharPicker
-      v-if="
-        $store.getters.getToolbarState.isChoosingChar
-      "
-    />
 
   </t-card>
 </template>
 
 <script>
-import ColourPicker from "./parts/ColourPicker.vue";
-import CharPicker from "./parts/CharPicker.vue";
-
 export default {
   name: "Colours",
-  components: { ColourPicker, CharPicker },
   data: () => ({}),
   methods: {
     swapColours() {

src/components/parts/CharPicker.vue

@@ -1,5 +1,10 @@
 <template>
-  <t-card>
+    <vue-draggable-resizable
+      style="z-index: 5;"
+      :x="100"
+      :y="100"
+      :w="1000"
+    >
     <t-button
       type="button"
       v-for="(char, keyChar) in $store.getters.charCodes"
@@ -7,13 +12,14 @@
       class="border-gray-200 p-2 min-h-0"
       @click="onCharChange(char)"
     >{{ char }}</t-button>
-  </t-card>
+    </vue-draggable-resizable>
 </template>
 
 <script>
 export default {
   name: "CharPicker",
   async created() {},
+  props: ["canvasX", "canvasY"],
   methods: {
     onCharChange(char) {
         this.$store.commit("changeChar", char);

src/components/parts/ColourPicker.vue

@@ -1,14 +1,23 @@
 <template>
-  <t-card>
+    <vue-draggable-resizable
+      style="z-index: 5;"
+      :x="100"
+      :y="100"
+      :w="100"
+      :h="278"
+    >
+    <t-card>
     <t-button
       type="button"
       v-for="(value, keyColours) in $store.getters.mircColours"
       :key="keyColours"
       :style="`background-color: ${$store.getters.mircColours[keyColours]} !important;`"
-      class="border-gray-200 p-2"
+      class="border-gray-200 p-3"
       @click="onColourChange(keyColours)"
     ></t-button>
-  </t-card>
+    </t-card>
+    </vue-draggable-resizable>
+    
 </template>
 
 <script>