dragable panel w/ colors, better routing

package.json

@@ -13,6 +13,7 @@
     "postcss": "^7.0.35",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
     "vue": "^2.6.11",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-router": "^3.2.0",
     "vue-tailwind": "^2.0.0",
     "vuex": "^3.4.0",

src/Dashboard.vue

@@ -35,6 +35,27 @@
       </t-button>
 
       <div class="border-gray-600">
+
+              <vue-draggable-resizable @dragging="onDrag" style="left:70%;top:10%;" :resizable="false" v-if="asciibirdMeta.length">
+              <t-card
+                header="Tools and Stuff"
+                style="height:500px">             
+
+                  <t-button type="button" v-for="(value,key) in mircColors" :key="key" :style="makeButtonClass(value)" class="border-gray-300 m-1"></t-button>
+
+
+                  <hr>
+                  <h5>Brushes and Shit</h5>
+                  <hr>
+
+
+              </t-card>
+              </vue-draggable-resizable>        
+
+
+
+
+
         <router-view/>
       </div>
 
@@ -44,6 +65,8 @@
 </template>
 
 <script>
+
+
 export default {
   created() {
     this.asciibirdMeta = this.$store.state.asciibirdMeta;
@@ -72,15 +95,29 @@ export default {
       ],
     charCodes: [
       '*','-','=','+','^','#'
-    ]
+    ],
+    floating: {
+      width: 0,
+      height: 0,
+      x: 100,
+      y: 100
+    }
 
   }),
-  // computed: {
-  //   returnAsciiMetaIndex() {
-  //     return this.$store.state.asciibirdMeta[this.currentTab];
-  //   },
-  // },
   methods: {
+    makeButtonClass(color) {
+      return `background-color: ${color} !important;width:25px;height:25px;`
+    },
+    onResize: function (x, y, width, height) {
+      this.floating.x = x
+      this.floating.y = y
+      this.floating.width = width
+      this.floating.height = height
+    },
+    onDrag: function (x, y) {
+      this.floating.x = x
+      this.floating.y = y
+    }, 
     createClick() {
       this.forms.createAscii.title = `New ASCII ${this.asciibirdMeta.length}`;
       this.$modal.show('create-ascii-modal');
@@ -88,7 +125,7 @@ export default {
     changeTab(key, value) {
       // Update the router title
       // if (this.$router.params.ascii !== key) {
-      this.$router.push({ name: 'editor', params: { ascii: `/${key}` } });
+        this.$router.push({ name: 'editor', params: { ascii: key } });
       // }
 
       // Update the tab index in vuex store

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueTailwind from 'vue-tailwind';
+import VueDraggableResizable from 'vue-draggable-resizable'
 import {
   TInput,
   TTextarea,
@@ -25,8 +26,8 @@ import {
 import Dashboard from './Dashboard.vue';
 import router from './router';
 import store from './store';
-
-import './assets/styles/index.css';
+// optionally import default styles
+import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
 Vue.config.productionTip = false;
 
@@ -39,6 +40,30 @@ const settings = {
   //     {propToOverride2}: {newDefaultValue2}
   //   }
   // }
+  't-card': {
+    component: TCard,
+    props: {
+      fixedClasses: {
+        wrapper: 'border rounded shadow-sm ',
+        body: 'p-3',
+        header: 'border-b p-3 rounded-t',
+        footer: 'border-t p-3 rounded-b'
+      },
+      classes: {
+        wrapper: 'bg-white border-gray-100',
+        body: '',
+        header: 'border-gray-100',
+        footer: 'border-gray-100'
+      },
+      variants: {
+        danger: {
+          wrapper: 'bg-red-50 text-red-700 border-red-200',
+          header: 'border-red-200 text-red-700',
+          footer: 'border-red-200 text-red-700'
+        }
+      }
+    }
+  },
   't-input': {
     component: TInput,
     props: {
@@ -105,6 +130,7 @@ const settings = {
 };
 
 Vue.use(VueTailwind, settings);
+Vue.component('vue-draggable-resizable', VueDraggableResizable)
 
 new Vue({
   router,

src/views/Editor.vue

@@ -10,6 +10,9 @@
         @mousemove="processMouseMove"
         @mouseup="processMouseUp" -->
 
+
+
+
     <div id="canvas-area" style="position: relative">
       <canvas
         ref="grid"
@@ -27,6 +30,12 @@
         class="canvas"
       ></canvas>
     </div>
+
+
+          
+
+          
+
   </div>
 </template>
 
@@ -59,6 +68,7 @@ body {
 
 <script>
 import Block from "../components/Block.vue";
+import VueDraggableResizable from 'vue-draggable-resizable'
 
 export default {
   name: "Editor",
@@ -85,6 +95,7 @@ export default {
       height: 2048,
     },
     gridCtx: null,
+
   }),
   computed: {
     getFullPath() {
@@ -96,7 +107,7 @@ export default {
   },
   watch: {
     getFullPath(val, old) {
-      this.onChangeTab(val.split("/%2F").join(""));
+      this.onChangeTab(val.split('/').join(''));
     },
   },
   methods: {
@@ -104,11 +115,12 @@ export default {
     //   this.ctx = event.currentTarget.id;
     //   console.log(this.ctx);
     // },
+   
     onChangeTab(val) {
       // Get the asciimeta index from the route URL
       this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[val];
 
-      console.log(this.currentAsciibirdMeta);
+      console.log("val",val);
 
       // I dono some routs bs or some bs needs -1 to make it all work
       // Some lame canvas reference bug when changing routes

yarn.lock

@@ -9025,6 +9025,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-draggable-resizable@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/vue-draggable-resizable/-/vue-draggable-resizable-2.3.0.tgz#94c433ca748bc1a4d0959ba1c5c0e1c3536cee5b"
+  integrity sha512-77CLRj1TPwB30pwsjOf3pkd1UzYanCdKXbqhILJ0Oo5QQl50lvBfyQCXxMFzwWwTc3sbBbQH3FfWSV+BkoSElA==
+
 vue-eslint-parser@^7.0.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.3.0.tgz#894085839d99d81296fa081d19643733f23d7559"