Migrate DrawView to vue3

Mercotui · Nov 1, 2024 · 1a9d454 · 1a9d454
1 parent 185953b
commit 1a9d454
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 177 deletions.
diff --git a/website/.eslintrc.js b/website/.eslintrc.js
@@ -3,9 +3,6 @@ module.exports = {
   env: {
     node: true,
   },
-  globals: {
-    definePage: "readonly",
-  },
   extends: [
     'plugin:vue/vue3-essential',
     'eslint:recommended',

diff --git a/website/package.json b/website/package.json
@@ -5,7 +5,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --fix --ignore-path .gitignore"
+    "lint": "eslint . --fix --ignore-path .gitignore",
+    "package": "tar -zcvf truncated-website-build.tar.gz -C dist ."
   },
   "browserslist": [
     "> 1%",

diff --git a/website/src/components/DrawingGrid.vue b/website/src/components/DrawingGrid.vue
@@ -1,73 +1,71 @@
 <template>
   <v-container>
-    <canvas id="lamp_canvas" :width="width" :height="height" style="image-rendering: pixelated; width: 300px; height: 300px;"></canvas>
+    <canvas id="lamp_canvas" :width="width" :height="height"
+            style="image-rendering: pixelated; width: 300px; height: 300px;"></canvas>
   </v-container>
 </template>
 
 <script>
 
-  export default {
-    props: ["color", "pixels", "width", "height"],
+export default {
+  props: ["color", "pixels", "width", "height"],
 
-    data () {
-      return {}
-    },
+  data() {
+    return {}
+  },
 
-    mounted: function () {
-      // initial setup once the DOM is completed
-      this.$nextTick(function () {
-        this.init();
-      })
-    },
+  mounted: function () {
+    // initial setup once the DOM is completed
+    this.$nextTick(function () {
+      this.init();
+    })
+  },
 
-    watch: {
-      pixels: function () {
+  watch: {
+    pixels: {
+      deep: true,
+      handler: function () {
         this.draw();
-      },
+      }
     },
+  },
 
-    methods: {
-      init: function () {
-        this.canvas = document.getElementById('lamp_canvas');
-        this.ctx = this.canvas.getContext('2d');
-        this.ctx.imageSmoothingEnabled = false;
-
-        this.display_width = this.canvas.offsetWidth;
-        this.display_height = this.canvas.offsetHeight;
+  methods: {
+    init: function () {
+      this.canvas = document.getElementById('lamp_canvas');
+      this.ctx = this.canvas.getContext('2d');
+      this.ctx.imageSmoothingEnabled = false;
 
-        this.display_pixel_width = this.display_width / this.width;
-        this.display_pixel_height = this.display_height / this.height;
+      this.canvas.addEventListener('mousedown', (e) => {
+        const element_relative_x = e.offsetX;
+        const element_relative_y = e.offsetY;
+        const canvas_x = element_relative_x * this.canvas.width / this.canvas.clientWidth;
+        const canvas_y = element_relative_y * this.canvas.height / this.canvas.clientHeight;
+        const pixel_x = Math.floor(canvas_x);
+        const pixel_y = Math.floor(canvas_y);
+        const pixel_y_inverted = (this.height - 1) - pixel_y;
 
-        this.canvas.addEventListener('mousedown', (e) => {
-          const element_relative_x = e.offsetX;
-          const element_relative_y = e.offsetY;
-          const canvas_x = element_relative_x * this.canvas.width / this.canvas.clientWidth;
-          const canvas_y = element_relative_y * this.canvas.height / this.canvas.clientHeight;
-          const pixel_x = Math.floor(canvas_x);
-          const pixel_y = Math.floor(canvas_y);
-          const pixel_y_inverted = (this.height - 1) - pixel_y;
-
-          this.$emit('setPixel', {
-            x: pixel_x,
-            y: pixel_y_inverted,
-            color: this.color,
-          });
-        })
+        this.$emit('setPixel', {
+          x: pixel_x,
+          y: pixel_y_inverted,
+          color: this.color,
+        });
+      })
 
-      },
+    },
 
-      draw: function () {
-        this.ctx.fillStyle = "black";
-        this.ctx.fillRect(0, 0, this.width, this.height);
+    draw: function () {
+      this.ctx.fillStyle = "black";
+      this.ctx.fillRect(0, 0, this.width, this.height);
 
-        for (let x = 0; x < this.width; x++) {
-          for (let y = 0; y < this.height; y++) {
-            var color = this.pixels[(this.height-1) - y][x];
-            this.ctx.fillStyle = color;
-            this.ctx.fillRect(x, y, 1, 1);
-          }
+      for (let x = 0; x < this.width; x++) {
+        for (let y = 0; y < this.height; y++) {
+          // use this pixel's color as fillStyle
+          this.ctx.fillStyle = this.pixels[(this.height - 1) - y][x];
+          this.ctx.fillRect(x, y, 1, 1);
         }
-      },
-    }
+      }
+    },
   }
+}
 </script>
diff --git a/website/src/mock-server.js b/website/src/mock-server.js
@@ -1,46 +1,50 @@
-import { Server, Model } from 'miragejs'
-
-export function makeServer({ environment = "development" } = {}) {
-
-let server = new Server({
-  environment,
-
-  models: {
-    scripts: Model,
-    script_contents: Model,
-  },
-
-  seeds(server) {
-    var image_val = "Y2xhc3MgQW5pbWF0aW9uIHsKICAjY29sb3IgPSAnIzA5MDkwOSc7CiAgI3ggPSAwOwogICN5ID0gMDsKCiAgdXBkYXRlIChjdHgpIHsKICAgIGN0eC5zY3JlZW4uc2V0UGl4ZWwodGhpcy4jeCwgdGhpcy4jeSwgdGhpcy4jY29sb3IpOwogICAgY3R4LnNjcmVlbi5zZXRQaXhlbCgwLCAwLCAncmVkJyk7CiAgICBjdHguc2NyZWVuLnNldFBpeGVsKDIsIDUsICdncmVlbicpOwogICAgY3R4LnNjcmVlbi5zZXRQaXhlbCg2LCA2LCAnYmx1ZScpOwogICAgY3R4LnNjcmVlbi5kcmF3KCk7CgogICAgdGhpcy4jeCsrOwogICAgaWYgKHRoaXMuI3ggPT09IDgpewogICAgICB0aGlzLiN4ID0gMDsKICAgICAgdGhpcy4jeSsrOwogICAgfQogICAgaWYgKHRoaXMuI3kgPT09IDgpIHsKICAgICAgdGhpcy4jeSA9IDA7CiAgICAgIGlmICh0aGlzLiNjb2xvciA9PT0gJyMwOTA5MDknKSB7CiAgICAgICAgdGhpcy4jY29sb3IgPSAnYmxhY2snOwogICAgICB9IGVsc2UgewogICAgICAgIHRoaXMuI2NvbG9yID0gJyMwOTA5MDknOwogICAgICB9CiAgICB9CgogICAgdmFyIG5leHQgPSBjdHguY3VycmVudF9mcmFtZV90aW1lOwogICAgbmV4dC5zZXRNaWxsaXNlY29uZHMobmV4dC5nZXRNaWxsaXNlY29uZHMoKSArIDEwMCk7CiAgICByZXR1cm4gbmV4dDsKICB9Cn0K"
-
-    var script_val = "Y2xhc3MgQW5pbWF0aW9uIHsKICAjY29sb3IgPSAnIzA5MDkwOSc7CiAgI3ggPSAwOwogICN5ID0gMDsKCiAgdXBkYXRlIChjdHgpIHsKICAgIGN0eC5zY3JlZW4uc2V0UGl4ZWwodGhpcy4jeCwgdGhpcy4jeSwgdGhpcy4jY29sb3IpOwogICAgY3R4LnNjcmVlbi5zZXRQaXhlbCgwLCAwLCAncmVkJyk7CiAgICBjdHguc2NyZWVuLnNldFBpeGVsKDIsIDUsICdncmVlbicpOwogICAgY3R4LnNjcmVlbi5zZXRQaXhlbCg2LCA2LCAnYmx1ZScpOwogICAgY3R4LnNjcmVlbi5kcmF3KCk7CgogICAgdGhpcy4jeCsrOwogICAgaWYgKHRoaXMuI3ggPT09IDgpewogICAgICB0aGlzLiN4ID0gMDsKICAgICAgdGhpcy4jeSsrOwogICAgfQogICAgaWYgKHRoaXMuI3kgPT09IDgpIHsKICAgICAgdGhpcy4jeSA9IDA7CiAgICAgIGlmICh0aGlzLiNjb2xvciA9PT0gJyMwOTA5MDknKSB7CiAgICAgICAgdGhpcy4jY29sb3IgPSAnYmxhY2snOwogICAgICB9IGVsc2UgewogICAgICAgIHRoaXMuI2NvbG9yID0gJyMwOTA5MDknOwogICAgICB9CiAgICB9CgogICAgdmFyIG5leHQgPSBjdHguY3VycmVudF9mcmFtZV90aW1lOwogICAgbmV4dC5zZXRNaWxsaXNlY29uZHMobmV4dC5nZXRNaWxsaXNlY29uZHMoKSArIDEwMCk7CiAgICByZXR1cm4gbmV4dDsKICB9Cn0K"
-
-    server.create("script", { name: "first-test", type: ["animation"], script: script_val })
-    server.create("script", { name: "second-dummy", type: ["animation"], script: script_val })
-    server.create("script", { name: "a-default-test", type: ["animation", "default"], script: script_val })
-    server.create("script", { name: "first-image", type: ["image"], script: image_val })
-    server.create("script", { name: "second-image", type: ["image"], script: image_val })
-    server.create("script", { name: "a-default-image", type: ["image", "default"], script: image_val })
-  },
-
-  routes() {
-    this.namespace = "api"
-
-    this.get("/scripts/", schema => {
-      return schema.scripts.all()
-    })
-
-    this.get("/scripts/:name", (schema, request) => {
-      return schema.scripts.findBy({name: request.params.name}).attrs
-    })
-
-    this.put("/scripts/:name", () => {})
-
-    this.delete("/scripts/:name", () => {})
-
-    this.put("/runner/run", () => {})
-  },
+import {Model, Server} from 'miragejs'
+
+export function makeServer({environment = "development"} = {}) {
+  return new Server({
+    environment,
+
+    models: {
+      scripts: Model,
+      script_contents: Model,
+    },
+
+    seeds(server) {
+      const image_val = "Y2xhc3MgQW5pbWF0aW9uIHsKICBjb25zdHJ1Y3RvcigpIHsKICAgIHRoaXMucGl4ZWxzID0gW1siIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLF0sWyIjMDAwIiwiIzAwMCIsIiM4MjZFMDQiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsXSxbIiMwMDAiLCIjODI2RTA0IiwiIzAwMCIsIiMwMDAiLCIjODI2RTA0IiwiIzgyNkUwNCIsIiM4MjZFMDQiLCIjMDAwIixdLFsiIzAwMCIsIiM4MjZFMDQiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLF0sWyIjMDAwIiwiIzgyNkUwNCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsXSxbIiMwMDAiLCIjODI2RTA0IiwiIzAwMCIsIiMwMDAiLCIjODI2RTA0IiwiIzgyNkUwNCIsIiM4MjZFMDQiLCIjMDAwIixdLFsiIzAwMCIsIiMwMDAiLCIjODI2RTA0IiwiIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLF0sWyIjMDAwIiwiIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsIiMwMDAiLCIjMDAwIiwiIzAwMCIsXSxdOwogICAgdGhpcy5yZXNvbHV0aW9uX3ggPSA4OwogICAgdGhpcy5yZXNvbHV0aW9uX3kgPSA4OwogIH0KCiAgdXBkYXRlIChjdHgpIHsKICAgIGZvciAodmFyIHggPSAwOyB4IDwgdGhpcy5yZXNvbHV0aW9uX3g7IHgrKyl7CiAgICAgIGZvciAodmFyIHkgPSAwOyB5IDwgdGhpcy5yZXNvbHV0aW9uX3k7IHkrKyl7CiAgICAgICAgY3R4LnNjcmVlbi5zZXRQaXhlbCh4LCB5LCB0aGlzLnBpeGVsc1t4XVt5XSk7CiAgICAgIH0KICAgIH0KICAgIGN0eC5zY3JlZW4uZHJhdygpOwogICAgcmV0dXJuIHVuZGVmaW5lZDsKICB9Cn0K";
+
+      const script_val = "Y2xhc3MgQW5pbWF0aW9uIHsKICAjY29sb3IgPSAnIzA5MDkwOSc7CiAgI3ggPSAwOwogICN5ID0gMDsKCiAgdXBkYXRlIChjdHgpIHsKICAgIGN0eC5zY3JlZW4uc2V0UGl4ZWwodGhpcy4jeCwgdGhpcy4jeSwgdGhpcy4jY29sb3IpOwogICAgY3R4LnNjcmVlbi5zZXRQaXhlbCgwLCAwLCAncmVkJyk7CiAgICBjdHguc2NyZWVuLnNldFBpeGVsKDIsIDUsICdncmVlbicpOwogICAgY3R4LnNjcmVlbi5zZXRQaXhlbCg2LCA2LCAnYmx1ZScpOwogICAgY3R4LnNjcmVlbi5kcmF3KCk7CgogICAgdGhpcy4jeCsrOwogICAgaWYgKHRoaXMuI3ggPT09IDgpewogICAgICB0aGlzLiN4ID0gMDsKICAgICAgdGhpcy4jeSsrOwogICAgfQogICAgaWYgKHRoaXMuI3kgPT09IDgpIHsKICAgICAgdGhpcy4jeSA9IDA7CiAgICAgIGlmICh0aGlzLiNjb2xvciA9PT0gJyMwOTA5MDknKSB7CiAgICAgICAgdGhpcy4jY29sb3IgPSAnYmxhY2snOwogICAgICB9IGVsc2UgewogICAgICAgIHRoaXMuI2NvbG9yID0gJyMwOTA5MDknOwogICAgICB9CiAgICB9CgogICAgdmFyIG5leHQgPSBjdHguY3VycmVudF9mcmFtZV90aW1lOwogICAgbmV4dC5zZXRNaWxsaXNlY29uZHMobmV4dC5nZXRNaWxsaXNlY29uZHMoKSArIDEwMCk7CiAgICByZXR1cm4gbmV4dDsKICB9Cn0K";
+
+      server.create("script", {name: "first-test", type: ["animation"], script: script_val})
+      server.create("script", {name: "second-dummy", type: ["animation"], script: script_val})
+      server.create("script", {name: "a-default-test", type: ["animation", "default"], script: script_val})
+      server.create("script", {name: "template script", type: ["animation", "template  "], script: script_val})
+      server.create("script", {name: "first-image", type: ["image"], script: image_val})
+      server.create("script", {name: "second-image", type: ["image"], script: image_val})
+      server.create("script", {name: "a-default-image", type: ["image", "default"], script: image_val})
+      server.create("script", {name: "template image", type: ["image", "template"], script: image_val})
+    },
+
+    routes() {
+      this.namespace = "api"
+
+      this.get("/scripts/", schema => {
+        // Get all script entries, strip the script value, and send the remaining objects
+        // eslint-disable-next-line no-unused-vars
+        return schema.scripts.all();
+      })
+
+      this.get("/scripts/:name", (schema, request) => {
+        return schema.scripts.findBy({name: request.params.name}).attrs
+      })
+
+      this.put("/scripts/:name", () => {
+      })
+
+      this.delete("/scripts/:name", () => {
+      })
+
+      this.put("/runner/run", () => {
+      })
+    },
   })
-
-  return server
 }
diff --git a/website/src/plugins/router.js b/website/src/plugins/router.js
@@ -1,36 +1,27 @@
-
 /**
  * router/index.ts
  *
  * Automatic routes for `./src/pages/*.vue`
  */
 
 // Composables
-import { createRouter, createWebHistory } from 'vue-router/auto'
-import { routes } from 'vue-router/auto-routes'
+import {createMemoryHistory, createRouter} from 'vue-router'
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-})
+// Views
+import IndexView from '../views/IndexView';
+// import ScriptView from '../views/ScriptView';
+import DrawView from '../views/DrawView';
 
-// Workaround for https://github.com/vitejs/vite/issues/11804
-router.onError((err, to) => {
-  if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
-    if (!localStorage.getItem('vuetify:dynamic-reload')) {
-      console.log('Reloading page to fix dynamic import error')
-      localStorage.setItem('vuetify:dynamic-reload', 'true')
-      location.assign(to.fullPath)
-    } else {
-      console.error('Dynamic import error, reloading page did not fix it', err)
-    }
-  } else {
-    console.error(err)
-  }
-})
+const router = new createRouter({
+    history: createMemoryHistory(),
+    routes: [
+        {path: '/', component: IndexView},
+        {path: '/draw/', component: DrawView, props: true},
+        {path: '/draw/:name', component: DrawView, props: true},
+        // {path: '/script/', component: ScriptView, props: true},
+        // {path: '/script/:name', component: ScriptView, props: true},
+    ],
 
-router.isReady().then(() => {
-  localStorage.removeItem('vuetify:dynamic-reload')
 })
 
 export default router