From 6723bb0de146fbd02ed1fb2102a58c6b8440f841 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:15:10 -0700
Subject: [PATCH 01/32] Added ts component dependencies and configs

- added vue-property-decorator package

- added vuex-class package
---
 .swcrc            |  2 +-
 package-lock.json | 49 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  2 ++
 tsconfig.json     |  4 ++++
 4 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/.swcrc b/.swcrc
index 8c6e070..24717ba 100644
--- a/.swcrc
+++ b/.swcrc
@@ -3,7 +3,7 @@
     "parser": {
       "syntax": "typescript",
       "tsx": false,
-      "decorators": false,
+      "decorators": true,
       "dynamicImport": true
     },
     "transform": null,
diff --git a/package-lock.json b/package-lock.json
index 3c38bdd..7784eba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
         "vue-i18n": "^8.26.7",
         "vue-loader": "^15.9.8",
         "vue-markdown-loader": "^2.5.0",
+        "vue-property-decorator": "^9.1.2",
         "vue-router": "^3.5.3",
         "vue-style-loader": "^4.1.3",
         "vue-svg-loader": "^0.16.0",
@@ -57,6 +58,7 @@
         "vuetify": "^2.6.1",
         "vuetify-loader": "^1.7.3",
         "vuex": "^3.6.2",
+        "vuex-class": "^0.3.2",
         "webpack": "^5.64.4",
         "webpack-bundle-analyzer": "^4.5.0",
         "webpack-dev-server": "^4.6.0",
@@ -7229,6 +7231,15 @@
         "vue": "^2.6.6"
       }
     },
+    "node_modules/vue-class-component": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
+      "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
+      "peer": true,
+      "peerDependencies": {
+        "vue": "^2.0.0"
+      }
+    },
     "node_modules/vue-fragment": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.5.2.tgz",
@@ -7285,6 +7296,15 @@
         "vue-loader": ">=10.0.0"
       }
     },
+    "node_modules/vue-property-decorator": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
+      "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
+      "peerDependencies": {
+        "vue": "*",
+        "vue-class-component": "*"
+      }
+    },
     "node_modules/vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -7384,6 +7404,16 @@
         "vue": "^2.0.0"
       }
     },
+    "node_modules/vuex-class": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vuex-class/-/vuex-class-0.3.2.tgz",
+      "integrity": "sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ==",
+      "peerDependencies": {
+        "vue": "^2.5.0",
+        "vue-class-component": "^6.0.0 || ^7.0.0",
+        "vuex": "^3.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -13547,6 +13577,13 @@
         "easy-bem": "^1.0.2"
       }
     },
+    "vue-class-component": {
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
+      "integrity": "sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w==",
+      "peer": true,
+      "requires": {}
+    },
     "vue-fragment": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/vue-fragment/-/vue-fragment-1.5.2.tgz",
@@ -13586,6 +13623,12 @@
         "markdown-it": "^8.4.2"
       }
     },
+    "vue-property-decorator": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz",
+      "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
+      "requires": {}
+    },
     "vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
@@ -13662,6 +13705,12 @@
       "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
       "requires": {}
     },
+    "vuex-class": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/vuex-class/-/vuex-class-0.3.2.tgz",
+      "integrity": "sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ==",
+      "requires": {}
+    },
     "watchpack": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
diff --git a/package.json b/package.json
index 50e5a53..aef18ac 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "vue-i18n": "^8.26.7",
     "vue-loader": "^15.9.8",
     "vue-markdown-loader": "^2.5.0",
+    "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.3",
     "vue-style-loader": "^4.1.3",
     "vue-svg-loader": "^0.16.0",
@@ -67,6 +68,7 @@
     "vuetify": "^2.6.1",
     "vuetify-loader": "^1.7.3",
     "vuex": "^3.6.2",
+    "vuex-class": "^0.3.2",
     "webpack": "^5.64.4",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-dev-server": "^4.6.0",
diff --git a/tsconfig.json b/tsconfig.json
index 5e7fecd..809eafc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,7 @@
     "target": "ES5",
     "module": "ESNext",
     "moduleResolution": "node",
+    "experimentalDecorators": true,
     "strict": true,
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
@@ -24,5 +25,8 @@
       "DOM",
       "ESNext",
     ]
+  },
+  "vueCompilerOptions": {
+    "target": 2,
   }
 }
\ No newline at end of file

From 616a86cb04927aa73edefcb88017c5614100648d Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:23:30 -0700
Subject: [PATCH 02/32] Converted PatternItems components to ts

---
 src/components/PatternItems/Grid.vue          | 259 ++++++++++--------
 src/components/PatternItems/GridItem.vue      |  48 ++--
 .../PatternItems/GridItemSelector.vue         |  26 +-
 src/components/PatternItems/MosaicPreview.vue | 142 +++++-----
 src/components/PatternItems/SinglePreview.vue |  36 +--
 5 files changed, 271 insertions(+), 240 deletions(-)

diff --git a/src/components/PatternItems/Grid.vue b/src/components/PatternItems/Grid.vue
index 3823185..1a8565e 100644
--- a/src/components/PatternItems/Grid.vue
+++ b/src/components/PatternItems/Grid.vue
@@ -21,7 +21,7 @@
 </template>
 
 
-<script>
+<script lang="ts">
 import {
   without,
   concat,
@@ -33,135 +33,160 @@ import {
   min,
   max,
 } from "lodash";
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import { VContainer, VSpacer } from "vuetify/lib";
 import GridItemSelector from "@/components/PatternItems/GridItemSelector.vue"
 import GridItem from "@/components/PatternItems/GridItem.vue";
+import { PatternItem } from "@/libs/storage";
 
-export default {
+type PatternItemGroup = PatternItem[];
+
+@Component({
   components: {
     GridItem,
     GridItemSelector,
     VContainer,
     VSpacer,
   },
-  props: {
-    expandMosaics: {
-      type: Boolean,
-      default: () => false,
-    },
-    patternItems: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedPatternItemGroupSlices: [],
-    };
-  },
-  computed: {
-    patternItemsGrouped() {
-      const grouped = groupBy(
-        this.patternItems,
-        patternItem => patternItem.mosaicId,
-      );
-      if (!this.expandMosaics)
-        return grouped;
-      // modify the groups
-      const psuedoGrouped = Object.entries(grouped)
-        .reduce((acc, [id, group]) => {
-          if (group.length === 1)
-            acc[id] = group
-          else
-            for (let i = 0; i < group.length; ++i)
-              acc[`${id}-${i}`] = [group[i]];
-          return acc;
-        }, {});
-      return psuedoGrouped;
-    },
-    mosaicItems() {
-      const mosaicItems = Object.entries(this.patternItemsGrouped)
-        .map(([
-          mosaicId,
-          patternItemGroup,
-        ]) => ({
-          id: mosaicId,
-          patternItemGroup,
-        }));
-      return sortBy(
-        mosaicItems,
-        [
-          ({ patternItemGroup }) => -first(patternItemGroup).createdDate.getTime(),
-          ({ patternItemGroup }) => first(patternItemGroup).row,
-          ({ patternItemGroup }) => first(patternItemGroup).col,
-        ],
-      );
-    },
-    patternItemGroups() {
-      return this.mosaicItems
-        .map(mosaicItem => mosaicItem.patternItemGroup);
-    },
-    // reverse array mapping
-    patternItemGroupToIdx() {
-      return new Map(Array.from(
-        this.patternItemGroups
-          .entries()
-      ).map(([k, v]) => [v, k]));
-    },
-    selectedPatternItemGroups() {
-      return sortBy(
-        uniq(concat(...this.selectedPatternItemGroupSlices)),
-        patternItemGroup => this.patternItemGroupToIdx.get(patternItemGroup),
-      );
-    },
-    selectedPatternItems() {
-      return this.selectedPatternItemGroups.flat(2);
-    },
-  },
-  methods: {
-    onClick(event, patternItemGroup) {
-      if (event.shiftKey) {
-        const initialIdx = this.patternItemGroupToIdx.get(
-          first(last(this.selectedPatternItemGroupSlices))
+})
+export default class Grid extends Vue {
+  @Prop({
+    type: Boolean,
+    default: () => false,
+  }) readonly expandMosaics!: boolean;
+
+  @Prop({
+    type: Array,
+    required: true,
+  }) readonly patternItems!: PatternItem[];
+  
+  /** The selected slices when repeated shift/ctrl selecting. */
+  selectedPatternItemGroupSlices: PatternItemGroup[][] = [];
+  
+  /**
+   * The pattern items grouped by mosaic id or pseudo mosaic ids.
+   * In expanded mode gives each pattern item a unique generated mosaic id.
+   */
+  get patternItemsGrouped() {
+    const grouped = groupBy(
+      this.patternItems,
+      patternItem => patternItem.mosaicId,
+    );
+    if (!this.expandMosaics)
+      return grouped;
+    // modify the groups
+    const psuedoGrouped = Object.entries(grouped)
+      .reduce<typeof grouped>((acc, [id, group]) => {
+        if (group.length === 1)
+          acc[id] = group
+        else
+          for (let i = 0; i < group.length; ++i)
+            acc[`${id}-${i}`] = [group[i]];
+        return acc;
+      }, {});
+    return psuedoGrouped;
+  }
+  
+  /**
+   * Wrapped pattern groups in objects with mosaic ids for list rendering.
+   * Also sorts mosaic items by date, row, col.
+   */
+  get mosaicItems() {
+    const mosaicItems = Object.entries(this.patternItemsGrouped)
+      .map(([
+        mosaicId,
+        patternItemGroup,
+      ]) => ({
+        id: mosaicId,
+        patternItemGroup,
+      }));
+    return sortBy(
+      mosaicItems,
+      [
+        ({ patternItemGroup }) => -(first(patternItemGroup) as PatternItem).createdDate.getTime(),
+        ({ patternItemGroup }) => (first(patternItemGroup) as PatternItem).row,
+        ({ patternItemGroup }) => (first(patternItemGroup) as PatternItem).col,
+      ],
+    );
+  }
+  
+  /**
+   * The cumalative pattern item groups of all mosaics.
+   */
+  get patternItemGroups() {
+    return this.mosaicItems
+      .map(mosaicItem => mosaicItem.patternItemGroup);
+  }
+  
+  /**
+   * Reverse mapping of pattern item groups to their index.
+   */
+  get patternItemGroupToIdx() {
+    return new Map(Array.from(
+      this.patternItemGroups
+        .entries()
+    ).map(([k, v]) => [v, k]));
+  }
+  
+  /**
+   * The selected pattern item groups.
+   */
+  get selectedPatternItemGroups() {
+    return sortBy(
+      uniq(concat(...this.selectedPatternItemGroupSlices)),
+      patternItemGroup => this.patternItemGroupToIdx.get(patternItemGroup),
+    );
+  }
+  
+  /**
+   * The selected pattern items.
+   */
+  get selectedPatternItems() {
+    return this.selectedPatternItemGroups.flat(2);
+  }
+  
+  onClick(event: MouseEvent, patternItemGroup: PatternItem[]) {
+    if (event.shiftKey) {
+      const initialIdx = this.patternItemGroupToIdx.get(
+        first(last(this.selectedPatternItemGroupSlices) as PatternItemGroup[]) as PatternItemGroup
+      ) as number;
+      const currIdx = this.patternItemGroups.indexOf(patternItemGroup);
+      const willReverse = initialIdx > currIdx;
+      const patternItemGroupSlice = this.patternItemGroups
+        .slice(
+          min([initialIdx, currIdx]),
+          (max([initialIdx, currIdx]) as number) + 1,
+        );
+      if (willReverse)
+        patternItemGroupSlice.reverse();
+      this.selectedPatternItemGroupSlices = !event.ctrlKey
+        ? [patternItemGroupSlice]
+        : concat(
+          this.selectedPatternItemGroupSlices,
+          [patternItemGroupSlice]
         );
-        const currIdx = this.patternItemGroups.indexOf(patternItemGroup);
-        const willReverse = initialIdx > currIdx;
-        const patternItemGroupSlice = this.patternItemGroups
-          .slice(
-            min([initialIdx, currIdx]),
-            max([initialIdx, currIdx]) + 1,
-          );
-        if (willReverse)
-          patternItemGroupSlice.reverse();
-        this.selectedPatternItemGroupSlices = !event.ctrlKey
-          ? [patternItemGroupSlice]
-          : concat(
-            this.selectedPatternItemGroupSlices,
-            [patternItemGroupSlice]
-          );
-      }
-      else if (event.ctrlKey && !event.shiftKey) {
-        // remove pattern group from all slices
-        if (this.selectedPatternItemGroups.includes(patternItemGroup))
-          this.selectedPatternItemGroupSlices = this.selectedPatternItemGroupSlices
-            .map(patternItemGroupSlice => without(patternItemGroupSlice, patternItemGroup))
-            .filter(patternItemGroupSlice => Boolean(patternItemGroupSlice.length));
-        else // add single pattern group as a slice
-          this.selectedPatternItemGroupSlices = concat(
-            this.selectedPatternItemGroupSlices,
-            [[patternItemGroup]],
-          );
-      }
-      else
-        this.selectedPatternItemGroupSlices = [[patternItemGroup]];
-      this.$emit('selectPatternItems', this.selectedPatternItems);
-      this.$emit('selectPatternItemGroups', this.selectedPatternItemGroups);
     }
-  },
-  watch: {
-    patternItems() {
-      this.selectedPatternItemGroupSlices = [];
+    else if (event.ctrlKey && !event.shiftKey) {
+      // remove pattern group from all slices
+      if (this.selectedPatternItemGroups.includes(patternItemGroup))
+        this.selectedPatternItemGroupSlices = this.selectedPatternItemGroupSlices
+          .map(patternItemGroupSlice => without(patternItemGroupSlice, patternItemGroup))
+          .filter(patternItemGroupSlice => Boolean(patternItemGroupSlice.length));
+      else // add single pattern group as a slice
+        this.selectedPatternItemGroupSlices = concat(
+          this.selectedPatternItemGroupSlices,
+          [[patternItemGroup]],
+        );
     }
+    else
+      this.selectedPatternItemGroupSlices = [[patternItemGroup]];
+    this.$emit('selectPatternItems', this.selectedPatternItems);
+    this.$emit('selectPatternItemGroups', this.selectedPatternItemGroups);
+  }
+  
+  @Watch('patternItems')
+  onPatternItemsChanged() {
+    this.selectedPatternItemGroupSlices = [];
   }
 }
 </script>
diff --git a/src/components/PatternItems/GridItem.vue b/src/components/PatternItems/GridItem.vue
index 39e48d6..bd0a60e 100644
--- a/src/components/PatternItems/GridItem.vue
+++ b/src/components/PatternItems/GridItem.vue
@@ -25,43 +25,45 @@
 </template>
 
 
-<script>
+<script lang="ts">
 import { first } from "lodash";
 import {
   VCard,
   VCardText,
   VSpacer,
 } from "vuetify/lib";
+import {
+  Vue,
+  Component,
+  Prop,
+} from "vue-property-decorator";
 import MosaicPreview from "@/components/PatternItems/MosaicPreview.vue";
+import { PatternItem } from "@/libs/storage";
 
-export default {
+@Component({
   components: {
     VCard,
     VCardText,
     VSpacer,
     MosaicPreview,
   },
-  props: {
-    patternItemGroup: {
-      type: Array,
-      required: true,
-      validator: (patternItemGroup) => patternItemGroup.length >= 1,
-    },
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    patternItem() {
-      return first(this.patternItemGroup);
-    },
-  },
-  methods: {
-    onClick(event) {
-      event.stopPropagation();
-      this.$emit('click', event);
-    }
-  },
+})
+export default class GridItem extends Vue {
+  @Prop({
+    type: Array,
+    required: true,
+    validator: (patternItemGroup) => patternItemGroup.length >= 1,
+  }) readonly patternItemGroup!: PatternItem[];
+  
+  /** The first pattern item of the pattern item group. */
+  get patternItem(): PatternItem {
+    return first(this.patternItemGroup) as PatternItem;
+  }
+  
+  onClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.$emit('click', event);
+  }
 };
 </script>
 
diff --git a/src/components/PatternItems/GridItemSelector.vue b/src/components/PatternItems/GridItemSelector.vue
index dbc1c39..3d98e3e 100644
--- a/src/components/PatternItems/GridItemSelector.vue
+++ b/src/components/PatternItems/GridItemSelector.vue
@@ -14,25 +14,23 @@
   </VBadge>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { VBadge } from "vuetify/lib";
 import colors from "@/styles/colors.scss";
 
-export default {
+@Component({
   components: {
     VBadge,
-  },
-  props: {
-    value: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  data() {
-    return {
-      colors,
-    };
-  },
+  }
+})
+export default class GridItemSelector extends Vue {
+  @Prop({
+    type: Boolean,
+    default: () => false
+  }) readonly value!: boolean;
+  
+  readonly colors = colors;
 };
 </script>
 
diff --git a/src/components/PatternItems/MosaicPreview.vue b/src/components/PatternItems/MosaicPreview.vue
index 53bb99e..a8af156 100644
--- a/src/components/PatternItems/MosaicPreview.vue
+++ b/src/components/PatternItems/MosaicPreview.vue
@@ -21,85 +21,91 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import {
   min,
   max,
   uniqBy,
   sortBy,
 } from "lodash";
-import { PatternItem } from "@/libs/storage";
+import { Vue, Component, Prop } from "vue-property-decorator";
 import SinglePreview from "@/components/PatternItems/SinglePreview.vue"
+import { PatternItem } from "@/libs/storage";
 
-// will not always produce a square image when 
-// there are missing patterns in the mosaic
-// or if mosaic rows & cols is not equal
-export default {
+@Component({
   components: {
     SinglePreview,
   },
-  props: {
-    /**
-     * A group of pattern items that share a `mosaicId` value.
-     * @type {PatternItem[]}
-     */
-    patternItemGroup: {
-      type: Array,
-      required: true,
-      default: () => new Array(),
-    },
-    expanded: {
-      type: Boolean,
-      default: () => false,
-    }
-  },
-  data() {
-    return {};
-  },
-  computed: {
-    /** @type {PatternItem[]} */
-    processedPatternItems() {
-      return uniqBy(sortBy(
-        this.patternItemGroup,
-        pi => pi.row,
-        pi => pi.col,
-      ), pi => `${pi.row} ${pi.col}`);
-    },
-    rowVals() {
-      return this.processedPatternItems.map(pi => pi.row);
-    },
-    colVals() {
-      return this.processedPatternItems.map(pi => pi.col);
-    },
-    /** @type {number} The minimum row index. */
-    minRowVal() {
-      return min(this.rowVals);
-    },
-    /** @type {number} The maximum row index. */
-    maxRowVal() {
-      return max(this.rowVals);
-    },
-    /** @type {number} The minimum column index. */
-    minColVal() {
-      return min(this.colVals)
-    },
-    /** @type {number} The maximum column index. */
-    maxColVal() {
-      return max(this.colVals)
-    },
-    /** @type {number} The number of rows. */
-    rows() {
-      return this.maxRowVal - this.minRowVal + 1;
-    },
-    /** @type {number} The number of columns. */
-    cols() {
-      return this.maxColVal - this.minColVal + 1;
-    },
-    /** @type {number} The maximum size as a square */
-    size() {
-      return max([this.rows, this.cols])
-    },
-  },
+})
+export default class MosaicPreview extends Vue {
+  /**
+   * The pattern item group to render.
+   */
+  @Prop() readonly patternItemGroup!: PatternItem[];
+  
+  /**
+   * When true, generates a square preview.
+   */
+  @Prop({
+    type: Boolean,
+    default: (): boolean => false,
+  }) readonly expanded!: boolean;
+  
+  /**
+   * The pattern items filtered down.
+   */
+  get processedPatternItems(): PatternItem[] {
+    return uniqBy(sortBy(
+      this.patternItemGroup,
+      pi => pi.row,
+      pi => pi.col,
+    ), pi => `${pi.row} ${pi.col}`);
+  }
+  
+  /** The row indexes. */
+  get rowVals(): number[] {
+    return this.processedPatternItems.map(pi => pi.row);
+  }
+  
+  /** The column indexes. */
+  get colVals(): number[] {
+    return this.processedPatternItems.map(pi => pi.col);
+  }
+  
+  /** The minimum row index. */
+  get minRowVal(): number {
+    return min(this.rowVals) as number;
+  }
+  
+  /** The maxiumum row index. */
+  get maxRowVal(): number {
+    return max(this.rowVals) as number;
+  }
+
+  /** The minimum column index. */
+  get minColVal(): number {
+    return min(this.colVals) as number;
+  }
+  
+  /** The maximum column index. */
+  get maxColVal(): number {
+    return max(this.colVals) as number;
+  }
+  
+  /** The number of rows. */
+  get rows(): number {
+    return this.maxRowVal - this.minRowVal + 1;
+  }
+  
+  /** The number of columns. */
+  get cols(): number {
+    return this.maxColVal - this.minColVal + 1;
+  }
+  
+  /** The maximum size as a square */
+  get size(): number {
+    return max([this.rows, this.cols]) as number;
+  }
 }
 </script>
 
diff --git a/src/components/PatternItems/SinglePreview.vue b/src/components/PatternItems/SinglePreview.vue
index b451e46..982df05 100644
--- a/src/components/PatternItems/SinglePreview.vue
+++ b/src/components/PatternItems/SinglePreview.vue
@@ -5,30 +5,30 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator"
+import { PatternItem } from "@/libs/storage";
 import DrawingTool from "@/libs/DrawingTool";
 
 /**
  * PatternItem hash to dataURL mapping.
- * @type {Map<string, string>}
  */
-const srcCache = new Map();
+const srcCache = new Map<string, string>();
 
 /**
  * A PatternItem preview that can cache its own preview.
- */
-export default {
-  props: {
-    patternItem: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      src: "",
-    };
-  },
+*/
+@Component
+export default class SinglePreview extends Vue {
+  /** The pattern item to be rendered for the preview. */
+  @Prop({
+    type: Object,
+    required: true,
+  }) readonly patternItem!: PatternItem;
+  
+  /** The src string for the image. Will be generated if not in cache. */
+  src: string = "";
+  
   mounted() {
     if (!srcCache.has(this.patternItem.fullHash)) {
       // draw the pattern
@@ -42,8 +42,8 @@ export default {
       const dataUrl = canvas.toDataURL("image/png");
       srcCache.set(this.patternItem.fullHash, dataUrl);
     }
-    this.src = srcCache.get(this.patternItem.fullHash);
-  },
+    this.src = srcCache.get(this.patternItem.fullHash) as string;
+  }
 };
 </script>
 

From 8cb13bd022e637ac4d9e983320bbc620ea2d352d Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:23:57 -0700
Subject: [PATCH 03/32] Converted icon components to ts

---
 src/components/icons/IconColorBlob.vue | 18 ++++++++++--------
 src/components/icons/IconStamp.vue     | 18 +++++++++---------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/components/icons/IconColorBlob.vue b/src/components/icons/IconColorBlob.vue
index f0d959f..2207459 100644
--- a/src/components/icons/IconColorBlob.vue
+++ b/src/components/icons/IconColorBlob.vue
@@ -25,14 +25,16 @@
   </svg>
 </template>
 
-<script>
-export default {
-  props: {
-    color: {
-      type: String,
-      required: true
-    }
-  },
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component
+export default class IconColorBlob extends Vue {
+  /** The css color of the color blob. */
+  @Prop({
+    type: String,
+    required: true,
+  }) readonly color!: string;
 };
 </script>
 
diff --git a/src/components/icons/IconStamp.vue b/src/components/icons/IconStamp.vue
index 46847a0..dd7562a 100644
--- a/src/components/icons/IconStamp.vue
+++ b/src/components/icons/IconStamp.vue
@@ -111,15 +111,15 @@
 </template>
 
 
-<script>
-export default {
-  name: "IconStamp",
-  props: {
-    dateText: {
-      required: true,
-      type: String
-    }
-  }
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component
+export default class IconStamp extends Vue {
+  @Prop({
+    type: String,
+    required: true,
+  }) dateText!: string;
 };
 </script>
 

From fa00a3bedcf50a91134fe40afc9c2c0140572c87 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:25:10 -0700
Subject: [PATCH 04/32] Converted modal components to ts

---
 src/components/modals/CancelButton.vue |  14 +-
 src/components/modals/Publish.vue      | 201 ++++++++++++++-----------
 2 files changed, 117 insertions(+), 98 deletions(-)

diff --git a/src/components/modals/CancelButton.vue b/src/components/modals/CancelButton.vue
index 1f7129c..cc4b675 100644
--- a/src/components/modals/CancelButton.vue
+++ b/src/components/modals/CancelButton.vue
@@ -12,7 +12,8 @@
   </VBtn>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import {
   VIcon,
   VBtn,
@@ -20,17 +21,14 @@ import {
 
 import colors from '@/styles/colors.scss';
 
-export default {
-  name: "CancelButton",
+@Component({
   components: {
     VIcon,
     VBtn,
   },
-  data: function () {
-    return {
-      colors,
-    };
-  },
+})
+export default class CancelButton extends Vue {
+  readonly colors = colors;
 };
 </script>
 
diff --git a/src/components/modals/Publish.vue b/src/components/modals/Publish.vue
index f765da2..24da2a1 100644
--- a/src/components/modals/Publish.vue
+++ b/src/components/modals/Publish.vue
@@ -109,7 +109,8 @@
   </VCard>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import {
   VCard,
   VCardTitle,
@@ -130,8 +131,20 @@ import {
 import colors from './../../styles/colors.scss';
 import { computeOptsList } from "./../../libs/component-helpers";
 
-export default {
-  name: "Publish",
+type PatternDetails = {
+  title: string,
+  creator: {
+    id: number,
+    name: string,
+  },
+  town: {
+    id: number,
+    name: string,
+  }
+  type: number,
+};
+
+@Component({
   components: {
     VCard,
     VCardTitle,
@@ -142,94 +155,102 @@ export default {
     CancelButton,
     IconGenerator,
   },
-  props: {
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
-    },
-    patternDetails: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: function () {
-    const styles = Object.values(StyleTag);
-    const types = Object.values(TypeTag);
-    const selectedStyles = new Array(3).fill("");
-    const selectedTypes = new Array(3).fill("");
-    return {
-      colors,
-      styles,
-      types,
-      details: {
-        ...this.$props.patternDetails,
-      },
-      selectedStyles,
-      selectedTypes,
-      isNSFW: false,
-      isUploading: false,
-    };
-  },
-  computed: {
-    styleOptsList() {
-      return computeOptsList(
-        this.selectedStyles,
-        [{ text: '- - -', value: "" }],
-        this.styles.map(style => ({ text: style, value: style })),
-      );
-    },
-    typeOptsList() {
-      return computeOptsList(
-        this.selectedTypes,
-        [{ text: '- - -', value: "" }],
-        this.types.map(type => ({ text: type, value: type })),
-      );
-    },
-  },
-  methods: {
-    update() {
-      this.details.title = this.details.title.trim();
-      this.details.town.name = this.details.town.name.trim();
-      this.details.creator.name = this.details.creator.name.trim();
-      if (this.originalType !== this.details.type) {
-        const msg =
-          "A change in pattern type may cause the pattern to change in specific areas. Do you wish to proceed?";
-        const confirm = window.confirm(msg);
-        if (!confirm) return;
-      }
-
-      this.$emit("update-details", {
-        ...this.details,
-      });
-    },
-
-    async publish() {
-      if (this.isUploading) return;
-      const title = this.details.title;
-      const town = this.details.town.name;
-      const author = this.details.town.author;
-      const isNSFW = this.isNSFW;
-      this.isUploading = true;
-      const uplStatus = await upload(
-        btoa(this.drawingTool.toString()),
-        ...this.selectedStyles,
-        ...this.selectedTypes,
-        isNSFW
+})
+export default class Publish extends Vue {
+  /** The drawing tool to publish. */
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  /** The extracted pattern details. */
+  @Prop({
+    type: Object,
+    required: true,
+  }) patternDetails!: PatternDetails;
+  
+  readonly colors = colors;
+  
+  /** The available styles for access. */
+  styles = Object.values(StyleTag);
+
+  /** The available types for access. */
+  types = Object.values(TypeTag);
+  
+  /** The three selected styles. */
+  selectedStyles: [string, string, string] = ["", "", ""];
+  
+  /** The three selected types. */
+  selectedTypes: [string, string, string] = ["", "", ""];
+  
+  /** Whether or not the pattern is NSFW. */
+  isNSFW: boolean = false;
+
+  /** Whether or not the pattern is in the middle of being uploaded. */
+  isUploading: boolean = false;
+  
+  /** The duplicated pattern details for update tracking. */
+  details = this.patternDetails;
+  
+  /** The list of style options available. */
+  get styleOptsList() {
+    return computeOptsList(
+      this.selectedStyles,
+      [{ text: '- - -', value: "" }],
+      this.styles.map(style => ({ text: style, value: style })),
+    );
+  }
+  
+  /** The list of type options available. */
+  get typeOptsList() {
+    return computeOptsList(
+      this.selectedTypes,
+      [{ text: '- - -', value: "" }],
+      this.types.map(type => ({ text: type, value: type })),
+    );
+  }
+  
+  // update() {
+  //   this.details.title = this.details.title.trim();
+  //   this.details.town.name = this.details.town.name.trim();
+  //   this.details.creator.name = this.details.creator.name.trim();
+  //   if (this.originalType !== this.details.type) {
+  //     const msg =
+  //       "A change in pattern type may cause the pattern to change in specific areas. Do you wish to proceed?";
+  //     const confirm = window.confirm(msg);
+  //     if (!confirm) return;
+  //   }
+
+  //   this.$emit("update-details", {
+  //     ...this.details,
+  //   });
+  // }
+
+  async publish() {
+    if (this.isUploading) return;
+    const title = this.details.title;
+    const town = this.details.town.name;
+    const author = this.details.creator.name;
+    const isNSFW = this.isNSFW;
+    this.isUploading = true;
+    const uplStatus = await upload(
+      window.btoa(this.drawingTool.toString()),
+      ...this.selectedStyles,
+      ...this.selectedTypes,
+      isNSFW
+    );
+    if (uplStatus && uplStatus["upload"]) {
+      this.$router.push({ hash: `H:${uplStatus["upload"]}` });
+      window.alert("Successfully uploaded to database");
+      this.$emit("close");
+    } else if (!uplStatus) {
+      window.alert(
+        "A pattern just like this already exists in the database!"
       );
-      if (uplStatus && uplStatus["upload"]) {
-        this.open = false;
-        this.$router.push({ hash: `H:${uplStatus["upload"]}` });
-        window.alert("Successfully uploaded to database");
-        this.$emit("close");
-      } else if (!uplStatus) {
-        window.alert(
-          "A pattern just like this already exists in the database!"
-        );
-        this.$emit("close");
-      }
-      this.isUploading = false;
-    },
-  },
+      this.$emit("close");
+    }
+    this.isUploading = false;
+  }
 };
 </script>
 

From 57cbf7b8e2120efc5a7c92c7dd026784594e9a81 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:25:26 -0700
Subject: [PATCH 05/32] Converted positioned components to ts

---
 src/components/positioned/Banner.vue          |  6 +-
 .../positioned/NavigationButton.vue           | 13 ++-
 src/components/positioned/NavigationMenu.vue  | 85 +++++++++----------
 .../positioned/PatternContainer.vue           | 61 ++++++-------
 src/components/positioned/UtilityBar.vue      | 42 +++++----
 5 files changed, 98 insertions(+), 109 deletions(-)

diff --git a/src/components/positioned/Banner.vue b/src/components/positioned/Banner.vue
index 21a3ddb..e039138 100644
--- a/src/components/positioned/Banner.vue
+++ b/src/components/positioned/Banner.vue
@@ -8,13 +8,15 @@
 </template>
 
 <script>
+import { Vue, Component } from "vue-property-decorator";
 import IconBanner from "@/assets/icons/banner.svg?inline";
 
-export default {
-  name: "Banner",
+@Component({
   components: {
     IconBanner,
   },
+})
+export default class Banner extends Vue {
 };
 </script>
 
diff --git a/src/components/positioned/NavigationButton.vue b/src/components/positioned/NavigationButton.vue
index 29d7810..6f19e94 100644
--- a/src/components/positioned/NavigationButton.vue
+++ b/src/components/positioned/NavigationButton.vue
@@ -20,22 +20,21 @@
   </button>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import { VDialog } from "vuetify/lib";
 import NavigationMenu from "@/components/positioned/NavigationMenu.vue";
 import IconCompass from "@/assets/icons/nookphone/compass.svg?inline";
 
-export default {
-  data: function () {
-    return {
-      open: false,
-    };
-  },
+@Component({
   components: {
     VDialog,
     NavigationMenu,
     IconCompass,
   },
+})
+export default class NavigationButton extends Vue {
+  open: boolean = false;
 };
 </script>
 
diff --git a/src/components/positioned/NavigationMenu.vue b/src/components/positioned/NavigationMenu.vue
index 4f9c59f..f5c49e1 100644
--- a/src/components/positioned/NavigationMenu.vue
+++ b/src/components/positioned/NavigationMenu.vue
@@ -111,14 +111,14 @@
   </VCard>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import { VCard } from "vuetify/lib";
-
 // header svgs
 import IconNookHead from "@/assets/icons/nookphone/nook-head.svg?inline";
 import IconNookGPS from "@/assets/icons/nookphone/nook-gps.svg?inline";
 import IconNookService from "@/assets/icons/nookphone/nook-service.svg?inline";
-
+// nav icons
 import IconNavBrowse from "@/assets/icons/nav/browse.svg?inline";
 import IconNavEditor from "@/assets/icons/nav/editor.svg?inline";
 import IconNavFaq from "@/assets/icons/nav/faq.svg?inline";
@@ -131,8 +131,8 @@ import IconNavTwitter from "@/assets/icons/nav/twitter.svg?inline";
 import CancelButton from "@/components/modals/CancelButton.vue";
 
 const menuTitleDefault = "Main Menu";
-export default {
-  name: "NookPhoneMenu",
+
+@Component({
   components: {
     VCard,
     IconNavHome,
@@ -148,49 +148,46 @@ export default {
     IconNookService,
     CancelButton,
   },
-  data: function () {
-    return {
-      menuTitle: "Main Menu",
-    };
-  },
-  computed: {
-    dateObj: () =>  new Date(),
-    time: {
-      get: () => {
-      return new Date().toLocaleTimeString("en-US", {
+})
+export default class NookPhoneMenu extends Vue {
+  menuTitle: string = "MainMenu";
+  currDateTime: Date = new Date();
+  interval: number | undefined;
+  
+  get time() {
+    return this.currDateTime.toLocaleTimeString(
+      "en-US", {
         hour: "2-digit",
         timeZoneName: "short",
-      });
       },
-      set: (value) => {
-        return value;
-      }
-    },
-  },
-  mounted() {
-    const interval = setInterval(
-      () =>
-        (this.time = this.dateObj.toLocaleTimeString("en-US", {
-          hour: "2-digit",
-          timeZoneName: "short",
-        })),
-      1000
     );
-  },
-  methods: {
-    enterNavItem: async function (menuTitle = menuTitleDefault) {
-      this.menuTitle = menuTitle;
-    },
-    leaveNavItem: async function () {
-      const curr = this.menuTitle;
-      await new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve();
-        }, 300);
-      });
-      if (this.menuTitle === curr) this.menuTitle = menuTitleDefault;
-    },
-  },
+  }
+  
+  async enterNavItem(menuTitle: string = menuTitleDefault) {
+    this.menuTitle = menuTitle;
+  }
+  
+  async leaveNavItem() {
+    const curr = this.menuTitle;
+    await new Promise<void>((resolve, reject) => {
+      setTimeout(() => {
+        resolve();
+      }, 300);
+    });
+    if (this.menuTitle === curr)
+      this.menuTitle = menuTitleDefault;
+  }
+  
+  mounted() {
+    this.interval = window.setInterval(() => {
+      this.currDateTime = new Date();
+    }, 1000);
+  }
+  
+  unmounted() {
+    window.clearInterval(this.interval);
+    this.interval = undefined;
+  }
 };
 </script>
 
diff --git a/src/components/positioned/PatternContainer.vue b/src/components/positioned/PatternContainer.vue
index 2108740..6712caa 100644
--- a/src/components/positioned/PatternContainer.vue
+++ b/src/components/positioned/PatternContainer.vue
@@ -91,7 +91,8 @@
   </VCard>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import {
   VToolbar,
   VToolbarTitle,
@@ -111,12 +112,12 @@ import Grid from "@/components/PatternItems/Grid.vue";
 import GridItemSelector from "@/components/PatternItems/GridItemSelector.vue";
 import GridItem from "@/components/PatternItems/GridItem.vue";
 import CancelButton from "@/components/modals/CancelButton.vue";
-import UtilityBar from "@/components/positioned/UtilityBar.vue";
-
+import UtilityBar, { UtilityBarOption } from "@/components/positioned/UtilityBar.vue";
+import { PatternItem } from "@/libs/storage";
 import colors from "@/styles/colors.scss";
 
-export default {
-  name: "PatternContainer",
+
+@Component({
   components: {
     VToolbar,
     VToolbarTitle,
@@ -137,34 +138,28 @@ export default {
     UtilityBar,
     BrushIcon,
   },
-  props: {
-    patternItems: {
-      type: Array,
-      required: true,
-      default: () => new Array(),
-    },
-    selected: {
-      type: Array,
-      required: false,
-      default: () => new Array(),
-    },
-    options: {
-      type: Array,
-      required: false,
-      default: () => new Array(),
-    },
-  },
-  data: function () {
-    return {
-      expandMosaics: false,
-      colors,
-      isOptionsOpen: false,
-    };
-  },
-  methods: {
-    isSelected(patternItem) {
-      return this.selected.includes(patternItem);
-    }
+})
+export default class PatternContainer extends Vue {
+  @Prop({
+    type: Array,
+    required: true,
+  }) readonly patternItems!: PatternItem[];
+  
+  @Prop({
+    type: Array,
+    default: () => [],
+  }) readonly selected!: PatternItem[];
+  
+  @Prop({
+    type: Array,
+    default: () => [],
+  }) readonly options!: UtilityBarOption[];
+  
+  readonly colors = colors;
+  expandMosaics: boolean = false;
+
+  isSelected(patternItem: PatternItem) {
+    return this.selected.includes(patternItem);
   }
 };
 </script>
diff --git a/src/components/positioned/UtilityBar.vue b/src/components/positioned/UtilityBar.vue
index 47ffdc3..f81b420 100644
--- a/src/components/positioned/UtilityBar.vue
+++ b/src/components/positioned/UtilityBar.vue
@@ -9,7 +9,7 @@
   >
     <VBtn
       v-for="(option) in options"
-      :key="option.message"
+      :key="option.label"
       class="btn"
       value="''"
       @click="option.callback()"
@@ -21,7 +21,8 @@
 </template>
 
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import {
   VBottomNavigation,
   VBtn,
@@ -29,32 +30,27 @@ import {
 } from "vuetify/lib";
 import colors from "@/styles/colors.scss";
 
-/**
- * INTERFACE FOR OPTIONS
- * interface Option {
- *  icon: string,
- *  label: string,
- *  callback: function,
- * }
- */
-export default {
-  name: "UtilityBar",
+
+export interface UtilityBarOption {
+  icon: string,
+  label: string,
+  callback: Function,
+}
+
+@Component({
   components: {
     VBottomNavigation,
     VBtn,
     VIcon,
   },
-  props: {
-    options: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      colors,
-    };
-  }
+})
+export default class UtilityBar extends Vue {
+  @Prop({
+    type: Array,
+    default: () => [],
+  }) readonly options!: UtilityBarOption[];
+  
+  readonly colors = colors;
 };
 </script>
 

From 717d6486d2411caea8b6521e0a277e76370f09de Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:25:46 -0700
Subject: [PATCH 06/32] Converted wrapper components to ts

---
 src/components/wrapper/FileLoader.vue         |  70 ++--
 .../wrapper/FileLoaderCollection.vue          | 354 +++++++++---------
 2 files changed, 218 insertions(+), 206 deletions(-)

diff --git a/src/components/wrapper/FileLoader.vue b/src/components/wrapper/FileLoader.vue
index 9a24ad8..05372a5 100644
--- a/src/components/wrapper/FileLoader.vue
+++ b/src/components/wrapper/FileLoader.vue
@@ -13,46 +13,50 @@
   </Fragment>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { Fragment } from "vue-fragment";
 import { VFileInput } from "vuetify/lib";
 import { zipExts, extsToRead } from "@/libs/reader";
+import { read } from "@/libs/reader";
 
-export default {
-  name: "FileLoader",
+@Component({
   components: {
     VFileInput,
     Fragment,
   },
-  props: {
-    exts: {
-      type: Array,
-      required: true,
-    },
-  },
-  data: function() {
-    // single file (not in array) if not multiple
-    return {
-      files: null,
-    };
-  },
-  computed: {
-    accept() { return this.exts.join(","); },
-    multiple() { return this.exts === zipExts; }
-  },
-  methods: {
-    open() {
-      this.$refs.files.$el.querySelector("input").click();
-    },
-    async onChange() {
-      const drawingTools = await extsToRead.get(this.exts)(
-        this.multiple
-        ? this.files
-        : [this.files]
-      );;
-      this.$emit("load", drawingTools);
-      this.files = null; // reset
-    },
-  },
+})
+export default class FileLoader extends Vue {
+  $refs!: { files: Vue; }
+  
+  @Prop({
+    type: Array,
+    required: true,
+  }) readonly exts!: string[];
+  
+  files: File | File[] | null = null;
+  
+  get accept() { return this.exts.join(","); }
+  
+  get multiple() { return this.exts === zipExts; }
+  
+  /** Forcefully opens the browser file dialog. */
+  open() {
+    (
+      this.$refs.files.$el
+        .querySelector("input") as HTMLInputElement
+    )
+    .click();
+  }
+  
+  async onChange() {
+    const drawingTools = await (extsToRead.get(this.exts) as read)((
+      this.multiple
+      ? this.files
+      : [this.files]
+    ) as File[]);
+    this.$emit("load", drawingTools);
+    this.files = null; // reset
+  }
 };
 </script>
\ No newline at end of file
diff --git a/src/components/wrapper/FileLoaderCollection.vue b/src/components/wrapper/FileLoaderCollection.vue
index 502474d..8bfaa3e 100644
--- a/src/components/wrapper/FileLoaderCollection.vue
+++ b/src/components/wrapper/FileLoaderCollection.vue
@@ -31,9 +31,10 @@
   </Fragment>
 </template>
 
-<script>
-import { mapActions } from "vuex";
+<script lang="ts">
 import { first } from "lodash";
+import { Vue, Component } from "vue-property-decorator";
+import { namespace } from "vuex-class";
 import { VDialog } from "vuetify/lib";
 import { Fragment } from "vue-fragment";
 import PatternContainer from "@/components/positioned/PatternContainer.vue";
@@ -44,199 +45,206 @@ import {
   namedBlobsToNamedZipBlob,
   downloadNamedBlob,
 } from "@/libs/downloader";
-import { createPatternItem } from "@/libs/storage";
+import { UtilityBarOption } from "@/components/positioned/UtilityBar.vue";
+import { PatternItem, createPatternItem } from "@/libs/storage";
 import { zipExts } from "@/libs/reader";
+import DrawingTool from "@/libs/DrawingTool";
 
-export default {
-  name: "FileLoaderCollection",
+const storageModule = namespace('storage');
+
+@Component({
   components: {
     VDialog,
     Fragment,
     PatternContainer,
     FileLoader,
   },
-  data() {
-    return {
-      showDialog: false,
-      zipExts,
-      patternItems: [],
-      selected: [],
-    };
-  },
-  computed: {
-    options() {
-      const { selected, patternItems } = this;
-      let options = [];
-      if (patternItems.length === 0) return options;
+})
+export default class FileLoaderCollection extends Vue {
+  $refs! : { collectionFileLoader: FileLoader; }
+  
+  zipExts = zipExts;
+  
+  showDialog: boolean = false;
+  
+  patternItems: PatternItem[] = [];
+  
+  selected: PatternItem[] = [];
+  
+  get options(): UtilityBarOption[] {
+    const { selected, patternItems } = this;
+    let options: UtilityBarOption[] = [];
+    if (patternItems.length === 0) return options;
 
-      const open = {
-        icon: 'mdi-application-edit',
-        label: `Open`,
-        callback: async () => {
-          const patternItem = first(selected);
-          this.$emit("load", [patternItem.drawingTool]);
-          this.$emit("close");
-        },
-      };
+    const open = {
+      icon: 'mdi-application-edit',
+      label: `Open`,
+      callback: async () => {
+        const patternItem = first(selected) as PatternItem;
+        this.$emit("load", [patternItem.drawingTool]);
+        this.$emit("close");
+      },
+    };
 
-      const remove = {
-        icon: 'mdi-trash-can',
-        label: `Remove`,
-        callback: async () => {
-          this.patternItems = this.patternItems.filter(pi => !selected.includes(pi));
-          this.selected = this.selected.filter(pi => !selected.includes(pi));
-        },
-      };
+    const remove = {
+      icon: 'mdi-trash-can',
+      label: `Remove`,
+      callback: async () => {
+        this.patternItems = this.patternItems.filter(pi => !selected.includes(pi));
+        this.selected = this.selected.filter(pi => !selected.includes(pi));
+      },
+    };
 
-      const saveToStorage = {
-        icon: 'mdi-file-cabinet',
-        label: `Storage`,
-        callback: async () => {
-          const [
-            message,
-            source
-          ] = selected.length === 0
-            ? [
-              "Saved all patterns to storage.",
-              patternItems,
-            ]
-            : [
-              "Saved selected patterns to storage.",
-              selected,
-            ];
-          await this.add(source);
-          window.alert(message);
-        },
-      };
+    const saveToStorage = {
+      icon: 'mdi-file-cabinet',
+      label: `Storage`,
+      callback: async () => {
+        const [
+          message,
+          source
+        ] = selected.length === 0
+          ? [
+            "Saved all patterns to storage.",
+            patternItems,
+          ]
+          : [
+            "Saved selected patterns to storage.",
+            selected,
+          ];
+        await this.add(source);
+        window.alert(message);
+      },
+    };
 
-      const downloadAsPattern = {
-        icon: 'mdi-file',
-        label: `.ACNL/.ACNH`,
-        callback: async () => {
-          if (selected.length === 1) {
-            const namedPatternBlob = await drawingToolToNamedPatternBlob(
-              first(selected).drawingTool
-            );
-            await downloadNamedBlob(namedPatternBlob);
-            return;
-          }
-          const source = selected.length
-            ? selected
-            : patternItems;
-          const namedPatternBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedPatternBlob(dt))
+    const downloadAsPattern = {
+      icon: 'mdi-file',
+      label: `.ACNL/.ACNH`,
+      callback: async () => {
+        if (selected.length === 1) {
+          const namedPatternBlob = await drawingToolToNamedPatternBlob(
+            (first(selected) as PatternItem).drawingTool
           );
-          const namedZipBlob = await namedBlobsToNamedZipBlob(namedPatternBlobs);
-          await downloadNamedBlob(namedZipBlob);
-        },
-      };
+          await downloadNamedBlob(namedPatternBlob);
+          return;
+        }
+        const source = selected.length
+          ? selected
+          : patternItems;
+        const namedPatternBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedPatternBlob(dt))
+        );
+        const namedZipBlob = await namedBlobsToNamedZipBlob(namedPatternBlobs);
+        await downloadNamedBlob(namedZipBlob);
+      },
+    };
 
-      const downloadAsPng = {
-        icon: 'mdi-image',
-        label: `QR/PBL`,
-        callback: async () => {
-          if (selected.length === 1) {
-            const namedImageBlob = await drawingToolToNamedImageBlob(
-              first(selected).drawingTool
-            );
-            await downloadNamedBlob(namedImageBlob);
-            return;
-          }
-          const source = selected.length
-            ? selected
-            : patternItems;
-          const namedImageBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedImageBlob(dt))
+    const downloadAsPng = {
+      icon: 'mdi-image',
+      label: `QR/PBL`,
+      callback: async () => {
+        if (selected.length === 1) {
+          const namedImageBlob = await drawingToolToNamedImageBlob(
+            (first(selected) as PatternItem).drawingTool
           );
-          const namedZipBlob = await namedBlobsToNamedZipBlob(namedImageBlobs);
-          await downloadNamedBlob(namedZipBlob);
-        },
-      };
+          await downloadNamedBlob(namedImageBlob);
+          return;
+        }
+        const source = selected.length
+          ? selected
+          : patternItems;
+        const namedImageBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedImageBlob(dt))
+        );
+        const namedZipBlob = await namedBlobsToNamedZipBlob(namedImageBlobs);
+        await downloadNamedBlob(namedZipBlob);
+      },
+    };
 
-      const downloadAsBoth = {
-        icon: 'mdi-zip-box',
-        label: `Both`,
-        callback: async () => {
-          if (selected.length === 1) {
-            const namedPatternBlob = await drawingToolToNamedPatternBlob(
-              first(selected).drawingTool
-            );
-            const namedImageBlob = await drawingToolToNamedImageBlob(
-              first(selected).drawingTool
-            );
-            const namedZipBlob = await namedBlobsToNamedZipBlob([
-              namedPatternBlob,
-              namedImageBlob,
-            ]);
-            await downloadNamedBlob(namedZipBlob);
-            return;
-          }
-          let source = selected.length
-            ? selected
-            : patternItems;
-          const namedPatternBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedPatternBlob(dt))
+    const downloadAsBoth = {
+      icon: 'mdi-zip-box',
+      label: `Both`,
+      callback: async () => {
+        if (selected.length === 1) {
+          const namedPatternBlob = await drawingToolToNamedPatternBlob(
+            (first(selected) as PatternItem).drawingTool
           );
-          const namedImageBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedImageBlob(dt))
+          const namedImageBlob = await drawingToolToNamedImageBlob(
+            (first(selected) as PatternItem).drawingTool
           );
           const namedZipBlob = await namedBlobsToNamedZipBlob([
-            ...namedPatternBlobs,
-            ...namedImageBlobs,
+            namedPatternBlob,
+            namedImageBlob,
           ]);
           await downloadNamedBlob(namedZipBlob);
-        },
-      };
+          return;
+        }
+        let source = selected.length
+          ? selected
+          : patternItems;
+        const namedPatternBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedPatternBlob(dt))
+        );
+        const namedImageBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedImageBlob(dt))
+        );
+        const namedZipBlob = await namedBlobsToNamedZipBlob([
+          ...namedPatternBlobs,
+          ...namedImageBlobs,
+        ]);
+        await downloadNamedBlob(namedZipBlob);
+      },
+    };
 
-      if (selected.length === 1)
-        options.push(open);
-      if (selected.length >= 1)
-        options.push(remove);
-      options.push(
-        saveToStorage,
-        downloadAsPattern,
-        downloadAsPng,
-        downloadAsBoth
-      );
-      return options;
-    },
-  },
-  methods: {
-    ...mapActions("storage", ["add"]),
-    open() {
-      // will trigger multiload which clears
-      this.$refs.collectionFileLoader.open();
-    },
-    close() {
-      Object.assign(this, {
-        showDialog: false,
-        patternItem: [],
-        selected: [],
-      });
-    },
-    multiload(drawingTools) {
-      // clear
-      const date = new Date();
-      Object.assign(this, {
-        showDialog: true,
-        patternItems: drawingTools.map(
-          drawingTool => createPatternItem({
-            drawingTool,
-            createdDate: new Date(date.getTime()),
-          })
-        ),
-        selected: [],
-      });
-    },
-  },
+    if (selected.length === 1)
+      options.push(open);
+    if (selected.length >= 1)
+      options.push(remove);
+    options.push(
+      saveToStorage,
+      downloadAsPattern,
+      downloadAsPng,
+      downloadAsBoth
+    );
+    return options;
+  }
+  
+  @storageModule.Action('add') add: any;
+  
+  open() {
+    // will trigger multiload which clears
+    this.$refs.collectionFileLoader.open();
+  }
+  
+  close() {
+    Object.assign(this, {
+      showDialog: false,
+      patternItem: [],
+      selected: [],
+    });
+  }
+  
+  multiload(drawingTools: DrawingTool[]) {
+    // clear
+    const date = new Date();
+    Object.assign(this, {
+      showDialog: true,
+      patternItems: drawingTools.map(
+        drawingTool => createPatternItem({
+          drawingTool,
+          createdDate: new Date(date.getTime()),
+        })
+      ),
+      selected: [],
+    });
+  }
 };
 </script>
 

From ed6c2968d8c5ef830dc22a068bf0d34377288ee9 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:27:19 -0700
Subject: [PATCH 07/32] Converted more shared components to ts

---
 src/components/ACNLQRGenerator.vue  |  52 +++----
 src/components/Banner.vue           |  18 +--
 src/components/IconGenerator.vue    | 227 +++++++++++++++-------------
 src/components/MarkdownPage.vue     |   8 +-
 src/components/MarkdownStyled.vue   |   8 +-
 src/components/PreviewGenerator.vue |  80 +++++-----
 6 files changed, 209 insertions(+), 184 deletions(-)

diff --git a/src/components/ACNLQRGenerator.vue b/src/components/ACNLQRGenerator.vue
index 2303955..56c9d07 100644
--- a/src/components/ACNLQRGenerator.vue
+++ b/src/components/ACNLQRGenerator.vue
@@ -2,38 +2,36 @@
   <img :src="image" @click="pattClick" />
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import generateACNLQR from "@/libs/ACNLQRGenerator";
 
-export default {
-  name: "ACNLQRGenerator",
-  props: {
-    pattern: {
-      type: String,
-      required: true,
-    },
-  },
-  data: function () {
-    return { image: "" };
-  },
-  watch: {
-    //Whenever pattern changes, draw it!
-    pattern(newData, oldData) {
-      generateACNLQR(newData).then((d) => {
-        this.image = d;
-      });
-    },
-  },
-  mounted: function () {
+@Component
+export default class ACNLQRGenerator extends Vue {
+  @Prop({
+    type: String,
+    required: true,
+  }) pattern!: string;
+  
+  image: string = "";
+  
+  pattClick() {
+    this.$emit("pattclick", this.pattern);
+  }
+  
+  //Whenever pattern changes, draw it!
+  @Watch('pattern')
+  onPatternChange(newData: string) {
+    generateACNLQR(newData).then((d) => {
+      this.image = d;
+    });
+  }
+  
+  mounted() {
     generateACNLQR(this.pattern).then((d) => {
       this.image = d;
     });
-  },
-  methods: {
-    pattClick() {
-      this.$emit("pattclick", this.pattern);
-    },
-  },
+  }
 };
 </script>
 
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 3a84cb9..549ea7c 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -4,15 +4,15 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "Banner",
-  props: {
-    bannerText: String,
-  },
-  data: function () {
-    return {};
-  },
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component
+export default class Banner extends Vue {
+  @Prop({
+    type: String,
+    required: true,
+  }) bannerText!: string;
 };
 </script>
 
diff --git a/src/components/IconGenerator.vue b/src/components/IconGenerator.vue
index f1796de..61e34c6 100644
--- a/src/components/IconGenerator.vue
+++ b/src/components/IconGenerator.vue
@@ -2,118 +2,143 @@
   <canvas ref="iCanvas" @click="pattClick" :width="width" :height="height" />
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import DrawingTool from "@/libs/DrawingTool";
 import { drawPreviewFromTool } from "@/libs/Preview3D";
 
-export default {
-  name: "IconGenerator",
-  props: ["pattern", "decoration", "text", "width", "height"],
-  watch: {
-    //Whenever pattern changes, draw it!
-    pattern(newData, oldData) {
-      this.draw(newdata);
-    },
-  },
-  mounted: async function () {
+@Component
+export default class IconGenerator extends Vue {
+  $refs!: { iCanvas: HTMLCanvasElement; }
+  
+  @Prop({
+    required: true,
+  }) pattern!: ConstructorParameters<typeof DrawingTool>[0];
+
+  @Prop({
+    type: Boolean,
+    default: () => false,
+  }) decoration!: boolean;
+
+  @Prop({
+    type: String,
+    required: false,
+  }) text: string | undefined;
+
+  @Prop({
+    type: Number,
+    required: true,
+  }) width!: number;
+
+  @Prop({
+    type: Number,
+    required: true,
+  }) height!: number;
+
+  @Watch('pattern')
+  onPatternChanged(newData: typeof this.pattern) {
+    this.draw(newData);
+  }
+  
+  async mounted() {
     await this.draw(this.pattern);
-  },
-  methods: {
-    pattClick() {
-      this.$emit("pattclick", this.pattern);
-    },
-    async draw(newData) {
-      const width = this.$refs.iCanvas.width;
-      const height = this.$refs.iCanvas.height;
-      //Load pattern, prepare render canvas
-      let d;
-      if (newData instanceof DrawingTool) {
-        d = newData;
-      } else {
-        d = new DrawingTool(newData);
-      }
+  }
+  
+  pattClick() {
+    this.$emit("pattclick", this.pattern);
+  }
+  
+  async draw(newData: typeof this.pattern) {
+    const width = this.$refs.iCanvas.width;
+    const height = this.$refs.iCanvas.height;
+    //Load pattern, prepare render canvas
+    let d;
+    if (newData instanceof DrawingTool) {
+      d = newData;
+    } else {
+      d = new DrawingTool(newData);
+    }
 
-      //Ensure blitted images are not smoothed ( = keep pixel look!)
-      let ctx = this.$refs.iCanvas.getContext("2d");
+    //Ensure blitted images are not smoothed ( = keep pixel look!)
+    let ctx = this.$refs.iCanvas.getContext("2d") as CanvasRenderingContext2D;
 
-      if (this.decoration) {
-        //Create pretty background pattern on temp canvas
-        const bgCanvas = document.createElement("canvas");
-        bgCanvas.width = 45;
-        bgCanvas.height = 45;
-        const bgCtx = bgCanvas.getContext("2d");
-        bgCtx.fillStyle = "#FFFFFF";
-        bgCtx.fillRect(0, 0, 45, 45);
-        bgCtx.fillStyle = "#9b9b9b44";
-        bgCtx.rotate(Math.PI / 4);
-        bgCtx.fillRect(0, -80, 16, 160);
-        bgCtx.fillRect(32, -80, 16, 160);
-        bgCtx.rotate(-Math.PI / 2);
-        bgCtx.fillRect(0, -80, 16, 160);
-        bgCtx.fillRect(-32, -80, 16, 160);
-        //Copy background to main canvas
-        ctx.fillStyle = ctx.createPattern(bgCanvas, "repeat");
-        ctx.fillRect(0, 0, width, height);
-      }
+    const bgCanvas = document.createElement("canvas");
+    const bgCtx = bgCanvas.getContext("2d") as CanvasRenderingContext2D;
+    if (this.decoration) {
+      //Create pretty background pattern on temp canvas
+      bgCanvas.width = 45;
+      bgCanvas.height = 45;
+      bgCtx.fillStyle = "#FFFFFF";
+      bgCtx.fillRect(0, 0, 45, 45);
+      bgCtx.fillStyle = "#9b9b9b44";
+      bgCtx.rotate(Math.PI / 4);
+      bgCtx.fillRect(0, -80, 16, 160);
+      bgCtx.fillRect(32, -80, 16, 160);
+      bgCtx.rotate(-Math.PI / 2);
+      bgCtx.fillRect(0, -80, 16, 160);
+      bgCtx.fillRect(-32, -80, 16, 160);
+      //Copy background to main canvas
+      ctx.fillStyle = ctx.createPattern(bgCanvas, "repeat") as CanvasPattern;
+      ctx.fillRect(0, 0, width, height);
+    }
 
-      //Draw pattern preview itself
-      await drawPreviewFromTool(
-        ctx,
-        d,
-        0,
-        this.text ? 20 : 0,
-        width,
-        this.text ? height - 20 : height
-      );
+    //Draw pattern preview itself
+    await drawPreviewFromTool(
+      ctx,
+      d,
+      0,
+      this.text ? 20 : 0,
+      width,
+      this.text ? height - 20 : height
+    );
 
-      if (this.text) {
-        //Prepare background pattern for text
-        bgCanvas.width = 1;
-        bgCanvas.height = 2;
-        bgCtx.fillStyle = "#585858";
-        bgCtx.fillRect(0, 0, 1, 1);
-        bgCtx.fillStyle = "#3e3e3e";
-        bgCtx.fillRect(0, 1, 1, 1);
-        const txtBg = ctx.createPattern(bgCanvas, "repeat");
+    if (this.text) {
+      //Prepare background pattern for text
+      bgCanvas.width = 1;
+      bgCanvas.height = 2;
+      bgCtx.fillStyle = "#585858";
+      bgCtx.fillRect(0, 0, 1, 1);
+      bgCtx.fillStyle = "#3e3e3e";
+      bgCtx.fillRect(0, 1, 1, 1);
+      const txtBg = ctx.createPattern(bgCanvas, "repeat") as CanvasPattern;
 
-        const drawTxtWithBg = (x, y, txt, fore) => {
-          const txtProps = ctx.measureText(txt);
-          var h =
-            (txtProps.fontBoundingBoxAscent
-              ? txtProps.fontBoundingBoxAscent
-              : txtProps.actualBoundingBoxAscent) +
-            (txtProps.fontBoundingBoxDescent
-              ? txtProps.fontBoundingBoxDescent
-              : txtProps.actualBoundingBoxDescent) +
-            4;
-          var w = txtProps.width - h / 2;
-          ctx.fillStyle = txtBg;
-          ctx.strokeStyle = fore;
-          //Calculate background
-          ctx.beginPath();
-          ctx.arc(x - w / 2, y, h / 2, 0.5 * Math.PI, 1.5 * Math.PI);
-          ctx.lineTo(x + w / 2, y - h / 2);
-          ctx.arc(x + w / 2, y, h / 2, 1.5 * Math.PI, 0.5 * Math.PI);
-          ctx.lineTo(x + -w / 2, y + h / 2);
-          ctx.fill();
-          ctx.stroke();
-          ctx.fillStyle = "#00000088";
-          ctx.strokeStyle = "#00000088";
-          ctx.fillText(txt, x + 2, y + 2);
-          ctx.fillStyle = fore;
-          ctx.strokeStyle = fore;
-          ctx.fillText(txt, x, y);
-        };
+      const drawTxtWithBg = (x: number, y: number, txt: string, fore: string) => {
+        const txtProps = ctx.measureText(txt);
+        var h =
+          (txtProps.fontBoundingBoxAscent
+            ? txtProps.fontBoundingBoxAscent
+            : txtProps.actualBoundingBoxAscent) +
+          (txtProps.fontBoundingBoxDescent
+            ? txtProps.fontBoundingBoxDescent
+            : txtProps.actualBoundingBoxDescent) +
+          4;
+        var w = txtProps.width - h / 2;
+        ctx.fillStyle = txtBg;
+        ctx.strokeStyle = fore;
+        //Calculate background
+        ctx.beginPath();
+        ctx.arc(x - w / 2, y, h / 2, 0.5 * Math.PI, 1.5 * Math.PI);
+        ctx.lineTo(x + w / 2, y - h / 2);
+        ctx.arc(x + w / 2, y, h / 2, 1.5 * Math.PI, 0.5 * Math.PI);
+        ctx.lineTo(x + -w / 2, y + h / 2);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = "#00000088";
+        ctx.strokeStyle = "#00000088";
+        ctx.fillText(txt, x + 2, y + 2);
+        ctx.fillStyle = fore;
+        ctx.strokeStyle = fore;
+        ctx.fillText(txt, x, y);
+      };
 
-        //Write text
-        ctx.textBaseline = "middle";
-        ctx.textAlign = "center";
+      //Write text
+      ctx.textBaseline = "middle";
+      ctx.textAlign = "center";
 
-        ctx.font = "10pt Calibri";
-        drawTxtWithBg(width / 2, 10, d.title, "#FFFFFF");
-      }
-    },
-  },
+      ctx.font = "10pt Calibri";
+      drawTxtWithBg(width / 2, 10, d.title, "#FFFFFF");
+    }
+  }
 };
 </script>
 
diff --git a/src/components/MarkdownPage.vue b/src/components/MarkdownPage.vue
index adde10d..18022e8 100644
--- a/src/components/MarkdownPage.vue
+++ b/src/components/MarkdownPage.vue
@@ -6,12 +6,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import MarkdownStyled from "@/components/MarkdownStyled.vue";
 
-export default {
+@Component({
   components: { MarkdownStyled },
-  name: "MarkdownPage",
+})
+export default class MarkdownPage extends Vue {
 };
 </script>
 
diff --git a/src/components/MarkdownStyled.vue b/src/components/MarkdownStyled.vue
index 5a4c096..2df5134 100644
--- a/src/components/MarkdownStyled.vue
+++ b/src/components/MarkdownStyled.vue
@@ -4,9 +4,11 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: "StyledMarkdown",
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
+@Component
+export default class StyledMarkdown extends Vue {
 };
 </script>
 
diff --git a/src/components/PreviewGenerator.vue b/src/components/PreviewGenerator.vue
index 9c747cc..a957015 100644
--- a/src/components/PreviewGenerator.vue
+++ b/src/components/PreviewGenerator.vue
@@ -3,51 +3,49 @@
   </canvas>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import DrawingTool from "@/libs/DrawingTool";
 
-export default {
-  name: "PreviewGenerator",
-  props: {
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
-    },
-  },
-  data: function () {
-    return {};
-  },
-  watch: {
-    //Whenever pattern changes, draw it!
-    drawingTool(newVal) {
-      const width = this.$refs.canvas.width;
-      const height = this.$refs.canvas.height;
-      const ctx = this.$refs.canvas.getContext("2d");
-      ctx.clearRect(0, 0, width, height);
-      this.draw();
-    },
-  },
-  mounted: async function () {
+@Component
+export default class PreviewGenerator extends Vue {
+  $refs!: { canvas: HTMLCanvasElement }
+  
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  @Watch('drawingTool')
+  onDrawingToolChange(newVal: DrawingTool) {
+    const width = this.$refs.canvas.width;
+    const height = this.$refs.canvas.height;
+    const ctx = this.$refs.canvas.getContext("2d") as CanvasRenderingContext2D;
+    ctx.clearRect(0, 0, width, height);
+    this.draw();
+  }
+  
+  async mounted() {
     await this.draw();
-  },
-  methods: {
-    pattClick() {
-      this.$emit("pattclick", this.pattern);
-    },
-    async draw() {
-      const canvas = document.createElement("canvas");
-      canvas.width = this.drawingTool.typeInfo.size;
-      canvas.height = this.drawingTool.typeInfo.size;
-      this.drawingTool.addCanvas(canvas);
-      this.drawingTool.render();
+  }
+  
+  pattClick() {
+    this.$emit("pattclick", this.drawingTool);
+  }
 
-      const width = this.$refs.canvas.width;
-      const height = this.$refs.canvas.height;
-      const ctx = this.$refs.canvas.getContext("2d");
-      ctx.imageSmoothingEnabled = false;
-      ctx.drawImage(canvas, 0, 0, width, height);
-    },
-  },
+  async draw() {
+    const canvas = document.createElement("canvas");
+    canvas.width = this.drawingTool.typeInfo.size;
+    canvas.height = this.drawingTool.typeInfo.size;
+    this.drawingTool.addCanvas(canvas);
+    this.drawingTool.render();
+
+    const width = this.$refs.canvas.width;
+    const height = this.$refs.canvas.height;
+    const ctx = this.$refs.canvas.getContext("2d") as CanvasRenderingContext2D;
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(canvas, 0, 0, width, height);
+  }
 };
 </script>
 

From cc54b843a7fe1b710846f7f332453647f9167824 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:27:35 -0700
Subject: [PATCH 08/32] Converted About page components to ts

---
 src/pages/About/About.vue    | 279 ++++++++++++++++++-----------------
 src/pages/About/InfoItem.vue |  33 +++--
 src/pages/About/Passport.vue | 115 ++++++++-------
 3 files changed, 228 insertions(+), 199 deletions(-)

diff --git a/src/pages/About/About.vue b/src/pages/About/About.vue
index de2e113..8490ff5 100644
--- a/src/pages/About/About.vue
+++ b/src/pages/About/About.vue
@@ -23,149 +23,162 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import Passport from "./Passport.vue";
+import { InfoItemOptions } from "./InfoItem.vue";
 import photoViet from "@/assets/images/char/photo_viet.jpg";
 import photoThulinma from "@/assets/images/char/photo_thulinma.svg";
 import photoTero from "@/assets/images/char/photo_tero.jpg";
 import photoMyumi from "@/assets/images/char/photo_myumi.jpg";
 import photoMelon from "@/assets/images/char/photo_melon.png";
 
-export default {
+export interface MemberOptions {
+  headerTextColor?: string,
+  accentColor?: string,
+  photo?: string,
+  name?: string,
+  greeting?: string,
+  title?: string,
+  role?: string,
+  roleIcon?: string,
+  topInfoItems?: InfoItemOptions[],
+  bottomInfoItems?: InfoItemOptions[],
+}
+
+@Component({
   components: {
     Passport,
   },
-  data: function () {
-    return {
-      members: [
-        {
-          headerTextColor: "#91a28a",
-          accentColor: "#e6eccf",
-          photo: photoThulinma,
-          name: "Thulinma",
-          greeting: "acpatterns.com!",
-          title: "Computer Magician",
-          role: "Tool Developer",
-          roleIcon: "mdi-wrench",
-          topInfoItems: [
-            {
-              icon: "mdi-island",
-              iconFill: "#318746",
-              label: "Thulopia",
-            }
-          ],
-          bottomInfoItems: [
-            {
-              icon: "mdi-account",
-              iconFill: "#66afb8",
-              label: "Portfolio",
-              url: "https://thulinma.com",
-            },
-          ],
-        },
-        {
-          headerTextColor: "#838486",
-          accentColor: "#d7d7d7",
-          photo: photoViet,
-          name: "DamSenViet",
-          role: "Tool Developer",
-          roleIcon: "mdi-wrench",
-          greeting: "Sleeping atm.",
-          title: "Sleeping Human",
-          topInfoItems: [
-            {
-              icon: "mdi-island",
-              iconFill: "#318746",
-              label: "Norende",
-            }
-          ],
-          bottomInfoItems: [
-            {
-              icon: "mdi-account",
-              iconFill: "#66afb8",
-              label: "Portfolio",
-              url: "https://vietdaitran.com",
-            },
-          ],
-        },
-        {
-          headerTextColor: "#9fa8a7",
-          accentColor: "#dfebd5",
-          photo: photoMyumi,
-          name: "Myumi K.",
-          role: "Tool Developer",
-          roleIcon: "mdi-wrench",
-          greeting: "(๑•̀ㅂ•́)و",
-          title: "Aggressive Birthday Girl",
-          topInfoItems: [
-            {
-              icon: "mdi-island",
-              iconFill: "#318746",
-              label: "Willowtale",
-            }
-          ],
-          bottomInfoItems: [
-            {
-              icon: "mdi-github",
-              iconFill: "#000000",
-              label: "GitHub",
-              url: "https://github.com/myumi",
-            },
-          ],
-        },
-        {
-          headerTextColor: "#a09d7e",
-          accentColor: "#fbeec1",
-          photo: photoTero,
-          name: "Tero",
-          role: "Icon Designer",
-          roleIcon: "mdi-brush",
-          greeting: "Graphic design is my passion",
-          title: "Easy-Breezy Designer",
-          topInfoItems: [
-            {
-              icon: "mdi-island",
-              iconFill: "#318746",
-              label: "Koron",
-            },
-          ],
-          bottomInfoItems: [
-            {
-              icon: "mdi-account",
-              iconFill: "#66afb8",
-              label: "Portfolio",
-              url: "https://tero.space",
-            },
-          ],
-        },
-        {
-          headerTextColor: "#b59e8e",
-          accentColor: "#f7e7d6",
-          photo: photoMelon,
-          name: "MelonSpeedruns",
-          greeting: "Yahoo!!",
-          role: "Data Miner",
-          roleIcon: "mdi-pickaxe",
-          title: "Fruit Person",
-          topInfoItems: [
-            {
-              icon: "mdi-island",
-              iconFill: "#318746",
-              label: "Fruita",
-            },
-          ],
-          bottomInfoItems: [
-            {
-              icon: "mdi-twitter",
-              iconFill: "#1da1f2",
-              label: "Twitter",
-              url: "https://twitter.com/MelonSpeedruns",
-            },
-          ],
-        },
-      ],
-    };
-  },
+})
+export default class About extends Vue {
+    members: MemberOptions[] = [
+      {
+        headerTextColor: "#91a28a",
+        accentColor: "#e6eccf",
+        photo: photoThulinma,
+        name: "Thulinma",
+        greeting: "acpatterns.com!",
+        title: "Computer Magician",
+        role: "Tool Developer",
+        roleIcon: "mdi-wrench",
+        topInfoItems: [
+          {
+            icon: "mdi-island",
+            iconFill: "#318746",
+            label: "Thulopia",
+          }
+        ],
+        bottomInfoItems: [
+          {
+            icon: "mdi-account",
+            iconFill: "#66afb8",
+            label: "Portfolio",
+            url: "https://thulinma.com",
+          },
+        ],
+      },
+      {
+        headerTextColor: "#838486",
+        accentColor: "#d7d7d7",
+        photo: photoViet,
+        name: "DamSenViet",
+        role: "Tool Developer",
+        roleIcon: "mdi-wrench",
+        greeting: "Sleeping atm.",
+        title: "Sleeping Human",
+        topInfoItems: [
+          {
+            icon: "mdi-island",
+            iconFill: "#318746",
+            label: "Norende",
+          }
+        ],
+        bottomInfoItems: [
+          {
+            icon: "mdi-account",
+            iconFill: "#66afb8",
+            label: "Portfolio",
+            url: "https://vietdaitran.com",
+          },
+        ],
+      },
+      {
+        headerTextColor: "#9fa8a7",
+        accentColor: "#dfebd5",
+        photo: photoMyumi,
+        name: "Myumi K.",
+        role: "Tool Developer",
+        roleIcon: "mdi-wrench",
+        greeting: "(๑•̀ㅂ•́)و",
+        title: "Aggressive Birthday Girl",
+        topInfoItems: [
+          {
+            icon: "mdi-island",
+            iconFill: "#318746",
+            label: "Willowtale",
+          }
+        ],
+        bottomInfoItems: [
+          {
+            icon: "mdi-github",
+            iconFill: "#000000",
+            label: "GitHub",
+            url: "https://github.com/myumi",
+          },
+        ],
+      },
+      {
+        headerTextColor: "#a09d7e",
+        accentColor: "#fbeec1",
+        photo: photoTero,
+        name: "Tero",
+        role: "Icon Designer",
+        roleIcon: "mdi-brush",
+        greeting: "Graphic design is my passion",
+        title: "Easy-Breezy Designer",
+        topInfoItems: [
+          {
+            icon: "mdi-island",
+            iconFill: "#318746",
+            label: "Koron",
+          },
+        ],
+        bottomInfoItems: [
+          {
+            icon: "mdi-account",
+            iconFill: "#66afb8",
+            label: "Portfolio",
+            url: "https://tero.space",
+          },
+        ],
+      },
+      {
+        headerTextColor: "#b59e8e",
+        accentColor: "#f7e7d6",
+        photo: photoMelon,
+        name: "MelonSpeedruns",
+        greeting: "Yahoo!!",
+        role: "Data Miner",
+        roleIcon: "mdi-pickaxe",
+        title: "Fruit Person",
+        topInfoItems: [
+          {
+            icon: "mdi-island",
+            iconFill: "#318746",
+            label: "Fruita",
+          },
+        ],
+        bottomInfoItems: [
+          {
+            icon: "mdi-twitter",
+            iconFill: "#1da1f2",
+            label: "Twitter",
+            url: "https://twitter.com/MelonSpeedruns",
+          },
+        ],
+      },
+    ]
 };
 </script>
 
diff --git a/src/pages/About/InfoItem.vue b/src/pages/About/InfoItem.vue
index fe7014d..f8385b0 100644
--- a/src/pages/About/InfoItem.vue
+++ b/src/pages/About/InfoItem.vue
@@ -21,26 +21,33 @@
   </li>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { VIcon } from "vuetify/lib";
 import { Fragment } from "vue-fragment";
 
-export default {
+export interface InfoItemOptions {
+  icon?: string,
+  iconFill?: string,
+  label?: string,
+  url?: string,
+}
+
+@Component({
   components: {
     VIcon,
     Fragment,
   },
-  props: {
-    infoItem: {
-      type: Object,
-      required: true,
-    },
-  },
-  computed: {
-    hasLink() {
-      return this.infoItem.url;
-    },
-  },
+})
+export default class InfoItem extends Vue {
+  @Prop({
+    type: Object,
+    required: true,
+  }) infoItem!: InfoItemOptions;
+  
+  get hasLink() {
+    return Boolean(this.infoItem.url);
+  }
 };
 </script>
 
diff --git a/src/pages/About/Passport.vue b/src/pages/About/Passport.vue
index 958d62d..77030e4 100644
--- a/src/pages/About/Passport.vue
+++ b/src/pages/About/Passport.vue
@@ -73,67 +73,76 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { VIcon } from "vuetify/lib";
+import { InfoItemOptions } from "./About.vue";
 import InfoItem from "./InfoItem.vue";
 import colors from "@/styles/colors.scss";
 
-export default {
+@Component({
   components: {
     VIcon,
     InfoItem,
   },
-  props: {
-    headerTextColor: {
-      type: String,
-      default: () => "#91a28a",
-    },
-    accentColor: {
-      type: String,
-      default: () => "#e6eccf",
-    },
-    photo: {
-      type: String,
-      default: () => "",
-    },
-    name: {
-      type: String,
-      default: () => "Tom Nook",
-    },
-    greeting: {
-      type: String,
-      default: () => "...",
-    },
-    title: {
-      type: String,
-      default: () => "Aspiring Millionaire",
-    },
-    role: {
-      type: String,
-      default: () => "Snake oil salesman",
-    },
-    roleIcon: {
-      type: String,
-      default: () => "mdi-wrench",
-    },
-    topInfoItems: {
-      type: Array,
-      default: () => [],
-    },
-    bottomInfoItems: {
-      type: Array,
-      default: () => [],
-    },
-    bottomLeftText: {
-      type: String,
-      default: () => "",
-    },
-  },
-  data() {
-    return {
-      colors,
-    };
-  },
+})
+export default class Passport extends Vue {
+  @Prop({
+    type: String,
+    default: () => "#91a28a",
+  }) headerTextColor!: string;
+  
+  @Prop({
+    type: String,
+    default: () => "#e6eccf",
+  }) accentColor!: string;
+  
+  @Prop({
+    type: String,
+    default: () => "",
+  }) photo!: string;
+  
+  @Prop({
+    type: String,
+    default: () => "Tom Nook",
+  }) name!: string;
+  
+  @Prop({
+    type: String,
+    default: () => "...",
+  }) greeting!: string;
+  
+  @Prop({
+    type: String,
+    default: () => "Aspiring Millionaire",
+  }) title!: string;
+  
+  @Prop({
+    type: String,
+    default: () => "Snake oil salesman",
+  }) role!: string;
+  
+  @Prop({
+    type: String,
+    default: () => "mdi-wrench",
+  }) roleIcon!: string;
+  
+  @Prop({
+    type: Array,
+    default: () => [],
+  }) topInfoItems!: InfoItemOptions[];
+  
+  @Prop({
+    type: Array,
+    default: () => [],
+  }) bottomInfoItems!: InfoItemOptions[];
+  
+  @Prop({
+    type: String,
+    default: () => "",
+  }) bottomLeftText!: string;
+  
+  readonly colors = colors;
 };
 </script>
 

From 13bdb449e8cce610d58c0c994ca9f0d20ab547b4 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:27:59 -0700
Subject: [PATCH 09/32] Converted FAQ page components to ts

---
 src/pages/FAQ/FAQ.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/FAQ/FAQ.vue b/src/pages/FAQ/FAQ.vue
index dccf350..89068b4 100644
--- a/src/pages/FAQ/FAQ.vue
+++ b/src/pages/FAQ/FAQ.vue
@@ -5,15 +5,17 @@
 </template>
 
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import MarkdownPage from "@/components/MarkdownPage.vue";
 import FAQMarkdown from "./FAQ.md";
 
-export default {
-  name: "FAQ",
+@Component({
   components: {
     MarkdownPage,
     FAQMarkdown,
   },
+})
+export default class FAQ extends Vue {
 };
 </script>

From 5d4bdbb6d8bb3f98b9330dea6534ca48389d2835 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 8 Oct 2022 19:28:13 -0700
Subject: [PATCH 10/32] Updated DrawingTool interface types

---
 src/libs/DrawingTool.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/libs/DrawingTool.js b/src/libs/DrawingTool.js
index 43cb2d1..e2a834c 100644
--- a/src/libs/DrawingTool.js
+++ b/src/libs/DrawingTool.js
@@ -154,7 +154,7 @@ function toHex(n){return (n<16?"0":"")+n.toString(16);}
 
 class DrawingTool{
   /**
-   * @param {string | Uint8Array} data 
+   * @param {string | Uint8Array | DrawingTool} data 
    */
   constructor(data = null){
     this.renderTargets = []; //TODO: Should this be a map, perhaps? How do maps work in JS? Can we de-duplicate..?
@@ -282,13 +282,13 @@ class DrawingTool{
   get fullHash(){return this.pattern.fullHash();}
   /** @type {string} */
   get pixelHash(){return this.pattern.pixelHash();}
-  /** @type {number} */
+  /** @type {string} The name of the pattern. */
   get title(){return this.pattern.title;}
   set title(n){this.pattern.title = n;}
-  /** @type {string} */
+  /** @type {[string, number]} Creator name and id. */
   get creator(){return this.pattern.creator;}
   set creator(n){this.pattern.creator = n;}
-  /** @type {string} */
+  /** @type {[string, number]} */
   get town(){return this.pattern.town;}
   set town(n){this.pattern.town = n;}
   fixIssues(){this.pattern.fixIssues();}

From 72b4cc88f7d15845d72061def966dde22a60e2f1 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 15 Oct 2022 14:12:18 -0700
Subject: [PATCH 11/32] Converted Passport component to ts

---
 src/pages/About/Passport.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/About/Passport.vue b/src/pages/About/Passport.vue
index 77030e4..177686c 100644
--- a/src/pages/About/Passport.vue
+++ b/src/pages/About/Passport.vue
@@ -76,7 +76,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-property-decorator";
 import { VIcon } from "vuetify/lib";
-import { InfoItemOptions } from "./About.vue";
+import { MemberOptions } from "./About.vue";
 import InfoItem from "./InfoItem.vue";
 import colors from "@/styles/colors.scss";
 
@@ -130,12 +130,12 @@ export default class Passport extends Vue {
   @Prop({
     type: Array,
     default: () => [],
-  }) topInfoItems!: InfoItemOptions[];
+  }) topInfoItems!: MemberOptions[];
   
   @Prop({
     type: Array,
     default: () => [],
-  }) bottomInfoItems!: InfoItemOptions[];
+  }) bottomInfoItems!: MemberOptions[];
   
   @Prop({
     type: String,

From 92e316b7d0152612910099cc771a5e7fd0cd7347 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 15 Oct 2022 16:30:01 -0700
Subject: [PATCH 12/32] Convert Browse page components to ts

---
 src/libs/component-helpers.ts     |   2 +-
 src/pages/Browse/Browse.vue       | 487 ++++++++++++++++--------------
 src/pages/Browse/PatternEntry.vue |  23 +-
 3 files changed, 275 insertions(+), 237 deletions(-)

diff --git a/src/libs/component-helpers.ts b/src/libs/component-helpers.ts
index 3f6c073..f0dfd2f 100644
--- a/src/libs/component-helpers.ts
+++ b/src/libs/component-helpers.ts
@@ -1,5 +1,5 @@
 
-type Option<T> = {
+export type Option<T> = {
   text: string,
   value: T
 };
diff --git a/src/pages/Browse/Browse.vue b/src/pages/Browse/Browse.vue
index 6d30ce5..2c7debf 100644
--- a/src/pages/Browse/Browse.vue
+++ b/src/pages/Browse/Browse.vue
@@ -65,7 +65,7 @@
         <div class="filter-title">Town</div>
           <VTextField
             class="text-field"
-            v-model="nextOptions.authorFilter"
+            v-model="nextOptions.townFilter"
             @keyup.enter="onSearch"
             outlined
             clearable
@@ -124,18 +124,23 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import qs from "qs";
 import {
   Sorting,
   StyleTag,
   TypeTag,
+  PatternEntry,
 } from "@/libs/origin";
 import {
   createOptions,
   cloneOptions,
+  SearchOptions,
 } from "@/store/modules/browse/helpers";
-import { createNamespacedHelpers } from "vuex";
+
+import { namespace } from "vuex-class"
+import { Vue, Component } from "vue-property-decorator";
+import { NavigationGuardNext, Route } from "vue-router";
 
 import {
   VPagination,
@@ -143,12 +148,15 @@ import {
   VSelect,
   VTextField,
 } from "vuetify/lib";
-import PatternEntry from "./PatternEntry";
+
+import VPatternEntry from "./PatternEntry.vue";
 import BxRefresh from "@/assets/icons/bx-refresh.svg?inline";
 
-import { computeOptsList } from "@/libs/component-helpers";
+import { Option, computeOptsList } from "@/libs/component-helpers";
 import colors from "@/styles/colors.scss";
 
+const browseModule = namespace('browse');
+
 // const colors = {
 //   natural: "#EAC558",
 //   cute: "#E96598",
@@ -175,213 +183,16 @@ import colors from "@/styles/colors.scss";
 //   meme: "#52307C",
 // };
 
-export default {
-  name: "Browse",
-  
+@Component({
   components: {
     VPagination,
     VIcon,
     VSelect,
     VTextField,
-    PatternEntry,
+    PatternEntry: VPatternEntry,
     BxRefresh,
   },
-  
-  data() {
-    return {
-      colors,
-      // enumerated values from origin
-      styleTagOptions: Object.values(StyleTag),
-      typeTagOptions: Object.values(TypeTag),
-      // search options replicated from browse
-      currOptions: createOptions(),
-      currResults: new Array(),
-      nextOptions: createOptions(),
-      isLoading: false,
-      // current page number 0 indexed
-      pageSize: 30,
-      pageNumber: 0,
-    };
-  },
-  
-  computed: {
-    
-    /**
-     * Style tag options lists available at each selected style tag index.
-     */
-    styleOptsList() {
-      return computeOptsList(
-        this.nextOptions.styleTagsFilter,
-        [{ text: '- - -', value: null }],
-        this.styleTagOptions.map(style => ({ text: style, value: style })),
-      );
-    },
-
-    /**
-     * Type tag options lists available at each selected style tag index.
-     */
-    typeOptsList() {
-      return computeOptsList(
-        this.nextOptions.typeTagsFilter,
-        [{ text: '- - -', value: null }],
-        this.typeTagOptions.map(style => ({ text: style, value: style })),
-      );
-    },
-    
-    /**
-     * Sorting options.
-     */
-    sortingOpts() {
-      return Object.entries(Sorting)
-        .reverse()
-        .map(([text, value]) => ({
-            text,
-            value,
-          }));
-    },
-    
-    isOptionsChanged() {
-      return (
-        JSON.stringify(this.nextOptions) !==
-        JSON.stringify(this.currOptions)
-      );
-    },
-    
-    // last page number available 0 indexed
-    maxPageNumber() {
-      // calculate results with undefined trailing removed
-      const maxPageNumber = Math.floor(
-        this.currResults.length /
-        this.pageSize
-      );
-      return maxPageNumber;
-    },
-    
-    currPageResults() {
-      const startingIndex = this.pageNumber * this.pageSize;
-      const endingIndex = (this.pageNumber + 1) * this.pageSize;
-      return this.currResults
-        .slice(startingIndex, endingIndex)
-        .filter(result => result != null);
-    },
-    
-    isCurrPageEmpty() {
-      return !this.isLoading && this.currPageResults.length === 0;
-    },
-  },
-  
-  methods: {
-    ...createNamespacedHelpers('browse')
-      .mapActions(['updateResults']),
-    async updateCurrResults() {
-        this.isLoading = true;
-        let results;
-        try {
-          results = await this.updateResults({
-            options: cloneOptions(this.currOptions),
-            localPageSize: this.pageSize,
-            localPageNumber: this.pageNumber,
-          });
-        }
-        catch (error) {
-          this.isLoading = false;
-          return;
-        }
-        this.currResults = results.slice();
-        this.isLoading = false;
-    },
-    
-    updateOptions(options, newPageNumber) {
-      options = cloneOptions(options);
-      newPageNumber = parseInt(newPageNumber);
-      const defaultOptions = createOptions();
-
-      this.currOptions.titleFilter = (
-        options.titleFilter ||
-        defaultOptions.titleFilter
-      );
-      this.currOptions.authorFilter = (
-        options.authorFilter ||
-        defaultOptions.authorFilter
-      );
-      this.currOptions.townFilter = (
-        options.townFilter ||
-        defaultOptions.townFilter
-      );
-      this.currOptions.styleTagsFilter = (
-        options.styleTagsFilter ||
-        defaultOptions.styleTagsFilter
-      );
-      this.currOptions.typeTagsFilter = (
-        options.typeTagsFilter ||
-        defaultOptions.typeTagsFilter
-      );
-      
-      this.pageNumber = newPageNumber || 0;
-      this.updateCurrResults();
-    },
-    
-    // update route with options
-    updateRoute(options, newPageNumber) {
-      newPageNumber = Number.parseInt(newPageNumber);
-      const currentRoute = this.$router.currentRoute;
-      const routeOptions = {
-        path: currentRoute.path,
-        query: {
-          ...cloneOptions(options),
-          pageNumber: newPageNumber,
-        },
-      };
-      
-      const currentQs = qs.stringify(currentRoute.query);
-      const nextQs = qs.stringify(routeOptions.query);
-      const willUpdate = currentQs !== nextQs;
-      if (willUpdate)
-        this.$router.push(routeOptions);
-    },
-    
-    onChangePage(newPageNumber) {
-      this.pageNumber = Math.min(
-        Math.max(newPageNumber, 0),
-        this.maxPageNumber,
-      );
-      this.updateRoute(
-        this.currOptions,
-        Math.min(this.maxPageNumber, Math.max(this.pageNumber, 0)),
-      );
-    },
-    
-    onPrevPage() {
-      this.updateRoute(this.currOptions, Math.max(this.pageNumber - 1), 0);
-    },
-    
-    onNextPage() {
-      this.updateRoute(this.currOptions, Math.min(this.maxPageNumber, this.pageNumber + 1));
-    },
-    
-    onJumpPage() {
-      const response = window.prompt("Page number to jump to:");
-      if (response == null || response === "") return;
-      try {
-        const pn = Number.parseInt(response);
-        const errorMessage = `Page does not exist: ${pn}`;
-        if (pn < 0)
-          throw new Error(errorMessage)
-        else if (pn > this.maxPageNumber)
-          throw new Error(errorMessage);
-        this.updateRoute(this.currOptions, pn);
-      }
-      catch (error) {
-        window.alert(error.message);
-      }
-    },
-    
-    onSearch() {
-      // will trigger updateOptions
-      this.updateRoute(this.nextOptions, 0);
-    },
-  },
-  beforeRouteEnter (to, from, next) {
+  beforeRouteEnter (to, from, next: NavigationGuardNext<Browse>) {
     const defaultOptions = createOptions();
     const {
       titleFilter,
@@ -392,34 +203,29 @@ export default {
       pageNumber,
     } = to.query;
     
-    const options = {
-      titleFilter,
-      townFilter,
-      authorFilter,
-      styleTagsFilter,
-      typeTagsFilter,
-    };
-    
     const normalizedOptions = {
       titleFilter: titleFilter || defaultOptions.titleFilter,
       townFilter: townFilter || defaultOptions.townFilter,
       authorFilter: authorFilter || defaultOptions.authorFilter,
-      styleTagsFilter: (styleTagsFilter || defaultOptions.styleTagsFilter)
+      styleTagsFilter: (styleTagsFilter as SearchOptions['styleTagsFilter'] || defaultOptions.styleTagsFilter)
+        // @ts-ignore
         .filter(stf => stf !== "")
         .concat(defaultOptions.styleTagsFilter)
         .slice(0, defaultOptions.styleTagsFilter.length),
-      typeTagsFilter: (typeTagsFilter || defaultOptions.typeTagsFilter)
+      typeTagsFilter: (typeTagsFilter as SearchOptions['typeTagsFilter'] || defaultOptions.typeTagsFilter)
+        // @ts-ignore
         .filter(ttf => ttf !== "")
         .concat(defaultOptions.typeTagsFilter)
         .slice(0, defaultOptions.typeTagsFilter.length),
-    };
+    } as SearchOptions;
     
     next(vm => {
-      vm.updateOptions(normalizedOptions, pageNumber || 0);
-      vm.updateRoute(normalizedOptions, pageNumber || 0);
+      vm.updateOptions(normalizedOptions, pageNumber as string || 0);
+      vm.updateRoute(normalizedOptions, pageNumber as string || 0);
     });
   },
-  beforeRouteUpdate (to, from, next) {
+  beforeRouteUpdate (to, _from, next: NavigationGuardNext<Browse>) {
+    const defaultOptions = createOptions();
     let {
       titleFilter,
       townFilter,
@@ -430,16 +236,251 @@ export default {
     } = to.query;
     
     const options = {
-      titleFilter,
-      townFilter,
-      authorFilter,
+      titleFilter: titleFilter || defaultOptions.titleFilter,
+      townFilter: townFilter || defaultOptions.townFilter,
+      authorFilter: authorFilter || defaultOptions.authorFilter,
       styleTagsFilter,
       typeTagsFilter,
     };
     
+    // @ts-ignore
     this.updateOptions(options, pageNumber);
     next();
-  },
+  }
+})
+export default class Browse extends Vue {
+  readonly colors = colors;
+  readonly styleTagOptions = Object.values(StyleTag);
+  readonly typeTagOptions = Object.values(TypeTag);
+  
+  /**
+   * The current search options as determined by the route query parameters.
+   */
+  currOptions: SearchOptions = createOptions();
+  
+  /**
+   * The current search results for the current search options.
+   */
+  currResults: PatternEntry[] = new Array();
+  
+  /**
+   * The search options to update the page route to when search is executed.
+   */
+  nextOptions: SearchOptions = createOptions();
+  
+  /**
+   * Whether or not the page is waiting on new results.
+   */
+  isLoading: boolean = false;
+  
+  /**
+   * The number of patterns to be displayed on the current page.
+   * Since the pages are virtualized pages, we can set it to any number.
+   */
+  pageSize: number = 30;
+  
+  /**
+   * The 0-indexed page number.
+   */
+  pageNumber: number = 0;
+  
+  /**
+   * Style tag options lists available at each selected style tag index.
+   */
+  get styleOptsList(): Option<StyleTag | null>[][] {
+    return computeOptsList(
+      this.nextOptions.styleTagsFilter,
+      [{ text: '- - -', value: null }],
+      this.styleTagOptions.map(style => ({ text: style, value: style })),
+    );
+  }
+
+  /**
+   * Type tag options lists available at each selected style tag index.
+   */
+  get typeOptsList(): Option<TypeTag | null>[][] {
+    return computeOptsList(
+      this.nextOptions.typeTagsFilter,
+      [{ text: '- - -', value: null }],
+      this.typeTagOptions.map(style => ({ text: style, value: style })),
+    );
+  }
+  
+  /**
+   * Sorting options.
+   */
+  get sortingOpts(): Option<Sorting>[] {
+    return Object.entries(Sorting)
+      .reverse()
+      .map(([text, value]) => ({
+          text,
+          value,
+        }));
+  }
+  
+  /**
+   * Whether or not any options have changed.
+   */
+  get isOptionsChanged(): boolean {
+    // console.log('curr', JSON.stringify(this.currOptions))
+    // console.log('next', JSON.stringify(this.nextOptions))
+    return (
+      JSON.stringify(this.nextOptions) !==
+      JSON.stringify(this.currOptions)
+    );
+  }
+  
+  /**
+   * The last page number available 0 indexed.
+   */
+  get maxPageNumber(): number {
+    // calculate results with undefined trailing removed
+    const maxPageNumber = Math.floor(
+      this.currResults.length /
+      this.pageSize
+    );
+    return maxPageNumber;
+  }
+  
+  get currPageResults() {
+    const startingIndex = this.pageNumber * this.pageSize;
+    const endingIndex = (this.pageNumber + 1) * this.pageSize;
+    return this.currResults
+      .slice(startingIndex, endingIndex)
+      .filter(result => result != null);
+  }
+  
+  /**
+   * Whether or not we have 0 search results after searching.
+   */
+  get isCurrPageEmpty(): boolean {
+    return !this.isLoading && this.currPageResults.length === 0;
+  }
+  
+  @browseModule.Action('updateResults')
+  updateResults!: ({
+    options,
+    localPageSize,
+    localPageNumber,
+  }: {
+    options: SearchOptions,
+    localPageSize: number,
+    localPageNumber: number,
+  }) => Promise<PatternEntry[]>;
+  
+  async updateCurrResults() {
+      this.isLoading = true;
+      let results: PatternEntry[];
+      try {
+        results = await this.updateResults({
+          options: cloneOptions(this.currOptions),
+          localPageSize: this.pageSize,
+          localPageNumber: this.pageNumber,
+        });
+      }
+      catch (error) {
+        this.isLoading = false;
+        return;
+      }
+      this.currResults = results.slice();
+      this.isLoading = false;
+  }
+  
+  updateOptions(options: SearchOptions, newPageNumber: string | number) {
+    options = cloneOptions(options);
+    const pageNumber = typeof newPageNumber === 'string'
+      ? parseInt(newPageNumber)
+      : newPageNumber;
+    const defaultOptions = createOptions();
+
+    this.currOptions.titleFilter = (
+      options.titleFilter ||
+      defaultOptions.titleFilter
+    );
+    this.currOptions.authorFilter = (
+      options.authorFilter ||
+      defaultOptions.authorFilter
+    );
+    this.currOptions.townFilter = (
+      options.townFilter ||
+      defaultOptions.townFilter
+    );
+    this.currOptions.styleTagsFilter = (
+      options.styleTagsFilter ||
+      defaultOptions.styleTagsFilter
+    );
+    this.currOptions.typeTagsFilter = (
+      options.typeTagsFilter ||
+      defaultOptions.typeTagsFilter
+    );
+    
+    this.pageNumber = pageNumber || 0;
+    this.updateCurrResults();
+  }
+  
+  // update route with options
+  updateRoute(options: SearchOptions, newPageNumber: string | number) {
+    const pageNumber = typeof newPageNumber === 'string'
+      ? parseInt(newPageNumber)
+      : newPageNumber;
+    const currentRoute = this.$router.currentRoute;
+    const routeOptions = {
+      path: currentRoute.path,
+      query: {
+        ...cloneOptions(options),
+        pageNumber,
+      },
+    };
+    
+    const currentQs = qs.stringify(currentRoute.query);
+    const nextQs = qs.stringify(routeOptions.query);
+    const willUpdate = currentQs !== nextQs;
+    if (willUpdate)
+      this.$router.push(`${currentRoute.path}?${nextQs}`);
+  }
+  
+  onChangePage(newPageNumber: number) {
+    this.pageNumber = Math.min(
+      Math.max(newPageNumber, 0),
+      this.maxPageNumber,
+    );
+    this.updateRoute(
+      this.currOptions,
+      Math.min(this.maxPageNumber, Math.max(this.pageNumber, 0)),
+    );
+  }
+  
+  onPrevPage() {
+    this.updateRoute(this.currOptions, Math.max(this.pageNumber - 1));
+  }
+  
+  onNextPage() {
+    this.updateRoute(this.currOptions, Math.min(this.maxPageNumber, this.pageNumber + 1));
+  }
+  
+  onJumpPage() {
+    const response = window.prompt("Page number to jump to:");
+    if (response == null || response === "") return;
+    try {
+      const pn = Number.parseInt(response);
+      const errorMessage = `Page does not exist: ${pn}`;
+      if (pn < 0)
+        throw new Error(errorMessage)
+      else if (pn > this.maxPageNumber)
+        throw new Error(errorMessage);
+      this.updateRoute(this.currOptions, pn);
+    }
+    catch (error) {
+      // window.alert(error.message);
+    }
+  }
+  
+  onSearch() {
+    // clearing it sets it to null for some reason, fix it
+    // https://github.com/vuetifyjs/vuetify/issues/4144
+    this.nextOptions.titleFilter = this.nextOptions.titleFilter || "";
+    this.updateRoute(this.nextOptions, 0);
+  }
 };
 </script>
 
diff --git a/src/pages/Browse/PatternEntry.vue b/src/pages/Browse/PatternEntry.vue
index e5a5f6a..253c22b 100644
--- a/src/pages/Browse/PatternEntry.vue
+++ b/src/pages/Browse/PatternEntry.vue
@@ -24,24 +24,21 @@
 </template>
 
 
-<script>
+<script lang="ts">
+import { PatternEntry } from "@/libs/origin";
+import { Vue, Component, Prop } from "vue-property-decorator";
 import IconGenerator from "@/components/IconGenerator.vue";
 
-export default {
-  name: "PatternEntry",
+@Component({
   components: {
     IconGenerator,
   },
-  props: {
-    patternEntry: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: function () {
-    return {};
-  },
-  methods: {},
+})
+export default class VPatternEntry extends Vue {
+  @Prop({
+    type: Object,
+    required: true,
+  }) readonly patternEntry!: PatternEntry;
 };
 </script>
 

From 81bc545d7e4d7aa216bcb7d5c51388495af3b710 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 15 Oct 2022 17:44:32 -0700
Subject: [PATCH 13/32] Converted ConvertImage component to ts

---
 .../Editor/ConvertImage/ConvertImage.vue      | 194 ++++++++++--------
 .../Editor/ConvertImage/Stages/Adjusting.vue  | 164 ++++++++-------
 .../Editor/ConvertImage/Stages/Cropping.vue   | 113 +++++-----
 .../ConvertImage/Stages/GridStencil.vue       |   1 +
 .../Editor/ConvertImage/Stages/Saving.vue     | 173 ++++++++--------
 .../Editor/ConvertImage/Stages/Uploading.vue  |  73 +++----
 6 files changed, 387 insertions(+), 331 deletions(-)

diff --git a/src/pages/Editor/ConvertImage/ConvertImage.vue b/src/pages/Editor/ConvertImage/ConvertImage.vue
index e91d895..08a8632 100644
--- a/src/pages/Editor/ConvertImage/ConvertImage.vue
+++ b/src/pages/Editor/ConvertImage/ConvertImage.vue
@@ -106,7 +106,8 @@
   </VCard>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import {
   VCard,
   VCardTitle,
@@ -128,12 +129,13 @@ import SavingStage from "./Stages/Saving.vue";
 import { debounce } from "lodash";
 import { ImageSmoothingQuality, canvasIsTransparent } from "@/libs/canvasHelpers";
 import {
+  PaletteSelector,
   selectMedianCutPaletteFromImgData,
   convertCanvas,
   drawingToolGridToImage,
 } from "@/libs/converter";
 
-import colors from "./../../../styles/colors.scss";
+import colors from "@/styles/colors.scss";
 
 // FINITE STATE MACHINE PATTERN
 // ENUM STATES
@@ -144,8 +146,7 @@ const states = Object.freeze({
   saving: 4, // avail only on non 1x1 patterns
 });
 
-export default {
-  name: "ImageLoader",
+@Component({
   components: {
     VCard,
     VCardTitle,
@@ -161,83 +162,114 @@ export default {
     AdjustingStage,
     SavingStage,
   },
-  data: function () {
-    return {
-      colors,
-      states,
-      state: states.uploading,
-      dataURL: null,
-      filename: null,
-      rows: 1,
-      columns: 1,
-      transparency: 100, // range: [0, 100]
-      saturation: 100, // range: [0, 200] 100 = no change
-      paletteSelector: selectMedianCutPaletteFromImgData,
-      imageSmoothingQuality: ImageSmoothingQuality.sharp,
-      isSplitPalette: true,
-      croppedCanvas: null,
-      previewDataURL: null,
-      outputs: [],
-    };
-  },
-  computed: {
-    isMosaic() { return this.rows > 1 || this.columns > 1; },
-    alphaThreshold() { return this.transparency * 2.55; },
-    croppedIsTransparent()  { return canvasIsTransparent(this.croppedCanvas); },
-  },
-  props: {
-    sourcetool: {
-      type: DrawingTool,
-      required: true,
-      default: () => new DrawingTool(),
-    }
-  },
-  methods: {
-    // state swapping (forward only)
-    croppingToAdjusting(croppedCanvas) {
-      if (croppedCanvas == null)
-        return;
-      this.state = states.adjusting;
-      this.croppedCanvas = croppedCanvas;
-      this.updatePreviewDataURL();
-    },
-    updatePreviewDataURL: debounce(function() {
-      const drawingToolGrid = convertCanvas(
-        this.croppedCanvas,
-        this.sourcetool,
-        this.rows,
-        this.columns,
-        this.alphaThreshold,
-        this.saturation,
-        this.imageSmoothingQuality,
-        this.isSplitPalette,
-        this.paletteSelector,
-      );
-      for (const drawingToolGridRow of drawingToolGrid)
-        for (const drawingTool of drawingToolGridRow)
-          drawingTool.title = this.filename;
-      const preview = drawingToolGridToImage(drawingToolGrid);
-      this.previewDataURL = preview.toDataURL("image/png");
-      this.outputs = drawingToolGrid.flat(1);
-    }, 150),
-  },
-  watch: {
-    saturation() {
-      this.updatePreviewDataURL();
-    },
-    alphaThreshold() {
-      this.updatePreviewDataURL();
-    },
-    imageSmoothingQuality() {
-      this.updatePreviewDataURL();
-    },
-    isSplitPalette() {
-      this.updatePreviewDataURL();
-    },
-    paletteSelector() {
-      this.updatePreviewDataURL();
-    },
-  },
+})
+export default class ConvertImage extends Vue{
+  @Prop({
+    type: DrawingTool,
+    default: () => new DrawingTool(),
+  }) readonly sourcetool!: DrawingTool;
+  
+  readonly colors = colors;
+  readonly states = states;
+  state = states.uploading;
+  dataURL: string | null = null;
+  filename: string | null = null;
+  rows: number = 1;
+  columns: number = 1;
+  
+  /**
+   * Transparency threshold of hte image on a a range of [0, 100].
+   */
+  transparency: number = 100;
+  
+  /**
+   * Saturation of the image on a range of [0, 200]. 100 = no change.
+   */
+  saturation: number = 100;
+  
+  /**
+   * The palette selection method to use when choosing colors from the image.
+   */
+  paletteSelector: PaletteSelector = selectMedianCutPaletteFromImgData;
+  
+  /**
+   * The browser image smoothing technique when redrawing images internally.
+   */
+  imageSmoothingQuality: ImageSmoothingQuality = ImageSmoothingQuality.sharp;
+  
+  /**
+   * Whether or not each generated pattern's palette is independent of the others.
+   */
+  isSplitPalette: boolean = true;
+  
+  /**
+   * The cropped canvas generated by the cropper.
+   */
+  croppedCanvas: HTMLCanvasElement | null = null;
+  
+  /**
+   * The final preview data URL.
+   */
+  previewDataURL: string | null = null;
+  
+  /**
+   * The generated drawing tools.
+   */
+  outputs: DrawingTool[] = [];
+
+  /**
+   * Whether or not the generated will be a mosaic or a single pattern.
+   */
+  get isMosaic(): boolean { return this.rows > 1 || this.columns > 1; }
+
+  /**
+   * The equivalent alpha value for the transparency.
+   */
+  get alphaThreshold(): number { return this.transparency * 2.55; }
+
+  /**
+   * Whether or not the cropped canvas from the copper includes transparency in the image.
+   */
+  get croppedIsTransparent(): boolean { return canvasIsTransparent(this.croppedCanvas as HTMLCanvasElement); }
+  
+  
+  // state swapping (forward only)
+  croppingToAdjusting(croppedCanvas: typeof this.croppedCanvas): void {
+    if (croppedCanvas == null)
+      return;
+    this.state = states.adjusting;
+    this.croppedCanvas = croppedCanvas;
+    this.updatePreviewDataURL();
+  }
+  
+  updatePreviewDataURL = debounce(function(this: ConvertImage): void {
+    const drawingToolGrid = convertCanvas(
+      this.croppedCanvas as HTMLCanvasElement,
+      this.sourcetool,
+      this.rows,
+      this.columns,
+      this.alphaThreshold,
+      this.saturation,
+      this.imageSmoothingQuality,
+      this.isSplitPalette,
+      this.paletteSelector,
+    );
+    for (const drawingToolGridRow of drawingToolGrid)
+      for (const drawingTool of drawingToolGridRow)
+        drawingTool.title = this.filename as string;
+    const preview = drawingToolGridToImage(drawingToolGrid);
+    this.previewDataURL = preview.toDataURL("image/png");
+    this.outputs = drawingToolGrid.flat(1);
+  }, 150);
+  
+  @Watch('saturation')
+  @Watch('alphaThreshold')
+  @Watch('imageSmoothingQuality')
+  @Watch('isSplitPalette')
+  @Watch('paletteSelector')
+  onConvertOptionsChanged(): void {
+    this.updatePreviewDataURL();
+  }
 };
 </script>
 
diff --git a/src/pages/Editor/ConvertImage/Stages/Adjusting.vue b/src/pages/Editor/ConvertImage/Stages/Adjusting.vue
index 2d9798f..396cecb 100644
--- a/src/pages/Editor/ConvertImage/Stages/Adjusting.vue
+++ b/src/pages/Editor/ConvertImage/Stages/Adjusting.vue
@@ -63,9 +63,9 @@
         >
           <VRadio
             v-for="option in imageSmoothingQualityOptions"
-            :key="option.imageSmoothingQuality"
-            :label="option.name"
-            :value="option.imageSmoothingQuality"
+            :key="option.text"
+            :label="option.text"
+            :value="option.value"
             :color="colors.jambalaya"
           />
         </VRadioGroup>
@@ -79,9 +79,9 @@
         >
           <VRadio
             v-for="option in isSplitPaletteOptions"
-            :key="option.isSplitPalette"
-            :label="option.name"
-            :value="option.isSplitPalette"
+            :key="option.text"
+            :label="option.text"
+            :value="option.value"
             :color="colors.jambalaya"
           />
         </VRadioGroup>
@@ -96,9 +96,9 @@
         >
           <VRadio
             v-for="option in paletteSelectorOptions"
-            :key="option.name"
-            :label="option.name"
-            :value="option.paletteSelector"
+            :key="option.text"
+            :label="option.text"
+            :value="option.value"
             :color="colors.jambalaya"
           />
         </VRadioGroup>
@@ -107,10 +107,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { VBtn, VCheckbox, VRadio, VRadioGroup, VSlider } from "vuetify/lib";
 import { ImageSmoothingQuality } from "@/libs/canvasHelpers";
 import {
+  PaletteSelector,
   selectRGBPaletteFromImgData,
   selectYUVPaletteFromImgData,
   selectMedianCutPaletteFromImgData,
@@ -118,99 +120,65 @@ import {
   selectSepiaPalettefromImgData,
   selectLowestDistancePalette,
 } from "@/libs/converter";
+import { Option } from "@/libs/component-helpers";
 
 
 import colors from "@/styles/colors.scss";
 
-const paletteSelectorOptions = [
+const paletteSelectorOptions: Option<PaletteSelector>[] = [
   {
-    name: "RGB Colors",
-    paletteSelector: selectRGBPaletteFromImgData,
+    text: "RGB Colors",
+    value: selectRGBPaletteFromImgData,
   },
   {
-    name: "YUV Colors",
-    paletteSelector: selectYUVPaletteFromImgData,
+    text: "YUV Colors",
+    value: selectYUVPaletteFromImgData,
   },
   {
-    name: "Median Cut",
-    paletteSelector: selectMedianCutPaletteFromImgData,
+    text: "Median Cut",
+    value: selectMedianCutPaletteFromImgData,
   },
   {
-    name: "Greyscale",
-    paletteSelector: selectGreyscalePaletteFromImgData,
+    text: "Greyscale",
+    value: selectGreyscalePaletteFromImgData,
   },
   {
-    name: "Sepia",
-    paletteSelector: selectSepiaPalettefromImgData,
+    text: "Sepia",
+    value: selectSepiaPalettefromImgData,
   },
 ];
 
-const imageSmoothingQualityOptions = [
+const imageSmoothingQualityOptions: Option<ImageSmoothingQuality>[] = [
   {
-    name: "Sharpened",
-    imageSmoothingQuality: ImageSmoothingQuality.sharp,
+    text: "Sharpened",
+    value: ImageSmoothingQuality.sharp,
   },
   {
-    name: "Low Quality",
-    imageSmoothingQuality: ImageSmoothingQuality.low,
+    text: "Low Quality",
+    value: ImageSmoothingQuality.low,
   },
   {
-    name: "Medium Quality",
-    imageSmoothingQuality: ImageSmoothingQuality.medium,
+    text: "Medium Quality",
+    value: ImageSmoothingQuality.medium,
   },
   {
-    name: "High Quality",
-    imageSmoothingQuality: ImageSmoothingQuality.high,
+    text: "High Quality",
+    value: ImageSmoothingQuality.high,
   },
 ];
 
-const isSplitPaletteOptions = [
+const isSplitPaletteOptions: Option<boolean>[] = [
   {
-    name: "Split Palette",
-    isSplitPalette: true,
+    text: "Split Palette",
+    value: true,
   },
   {
-    name: "Shared Palette",
-    isSplitPalette: false,
+    text: "Shared Palette",
+    value: false,
   },
 ];
 
-export default {
-  name: "Adjusting",
-  props: {
-    isMosaic: {
-      type: Boolean,
-      required: true,
-    },
-    croppedIsTransparent: {
-      type: Boolean,
-      required: false,
-    },
-    transparency: {
-      type: Number,
-      required: true,
-    },
-    saturation: {
-      type: Number,
-      required: true,
-    },
-    imageSmoothingQuality: {
-      type: String,
-      required: true,
-    },
-    isSplitPalette: {
-      type: Boolean,
-      required: true,
-    },
-    paletteSelector: {
-      type: Function,
-      required: true,
-    },
-    previewDataURL: {
-      type: String,
-      required: false,
-    },
-  },
+@Component({
   components: {
     VBtn,
     VCheckbox,
@@ -218,14 +186,52 @@ export default {
     VRadioGroup,
     VSlider,
   },
-  data: function () {
-    return {
-      colors,
-      imageSmoothingQualityOptions,
-      isSplitPaletteOptions,
-      paletteSelectorOptions,
-    };
-  },
+})
+export default class AdjustingStage extends Vue {
+  @Prop({
+    type: Boolean,
+    required: true,
+  }) readonly isMosaic!: boolean;
+  
+  @Prop({
+    type: Boolean,
+    required: true,
+  }) readonly croppedIsTransparent!: boolean;
+  
+  @Prop({
+    type: Number,
+    required: true,
+  }) readonly transparency!: number;
+  
+  @Prop({
+    type: Number,
+    required: true,
+  }) readonly saturation!: number;
+  
+  @Prop({
+    type: String,
+    required: true,
+  }) readonly imageSmoothingQuality!: string;
+  
+  @Prop({
+    type: Boolean,
+    required: true,
+  }) readonly isSplitPalette!: boolean;
+  
+  @Prop({
+    type: Function,
+    required: true,
+  }) readonly paletteSelector!: PaletteSelector;
+  
+  @Prop({
+    type: String,
+    required: false,
+  }) readonly previewDataURL!: string
+  
+  readonly colors = colors;
+  readonly imageSmoothingQualityOptions = imageSmoothingQualityOptions;
+  readonly isSplitPaletteOptions = isSplitPaletteOptions;
+  readonly paletteSelectorOptions = paletteSelectorOptions;
 };
 </script>
 
diff --git a/src/pages/Editor/ConvertImage/Stages/Cropping.vue b/src/pages/Editor/ConvertImage/Stages/Cropping.vue
index 38b97c3..0af1f41 100644
--- a/src/pages/Editor/ConvertImage/Stages/Cropping.vue
+++ b/src/pages/Editor/ConvertImage/Stages/Cropping.vue
@@ -93,7 +93,8 @@
 </template>
 
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { VIcon, VBtn, VSlider, VTextField } from "vuetify/lib";
 import { Cropper } from "vue-advanced-cropper";
 import GridStencil from "./GridStencil.vue";
@@ -101,8 +102,7 @@ import "vue-advanced-cropper/dist/style.css";
 
 import colors from "@/styles/colors.scss";
 
-export default {
-  name: "Cropping",
+@Component({
   components: {
     VIcon,
     VBtn,
@@ -110,54 +110,65 @@ export default {
     VTextField,
     Cropper,
   },
-  props: {
-    dataURL: {
-      type: [String, null],
-      required: false,
-    },
-    rows: {
-      type: Number,
-      required: true,
-    },
-    columns: {
-      type: Number,
-      required: true,
-    },
-  },
-  data: function () {
-    return {
-      colors,
-      showAdvanced: false,
-      GridStencil,
-    };
-  },
-  computed: {
-    aspectRatio() {
-      return this.columns / this.rows;
-    },
-  },
-  methods: {
-    onRowsInput(value) {
-      const rows = Number(value);
-      this.$forceUpdate();
-      if (Number.isNaN(rows)) return;
-      if (!Number.isInteger(rows)) return;
-      if (rows <= 0) return;
-      this.$emit("update:rows", rows);
-    },
-    onColumnsInput(value) {
-      const columns = Number(value);
-      this.$forceUpdate();
-      if (Number.isNaN(columns)) return;
-      if (!Number.isInteger(columns)) return;
-      if (columns <= 0) return;
-      this.$emit("update:columns", columns);
-    },
-    onNext(event) {
-      const { canvas: croppedCanvas } = this.$refs.cropper.getResult();
-      this.$emit("next", croppedCanvas);
-    },
-  },
+})
+export default class CroppingStage extends Vue {
+  $refs! : { cropper: Cropper; }
+  
+  @Prop({
+    required: false,
+  }) readonly dataURL!: string | null;
+  
+  @Prop({
+    type: Number,
+    required: true,
+  }) readonly rows!: number;
+  
+  @Prop({
+    type: Number,
+    required: true,
+  }) readonly columns!: number;
+  
+  readonly colors = colors;
+  
+  /**
+   * Whether to show the mosaic options.
+   */
+  showAdvanced = false;
+  
+  GridStencil = GridStencil;
+  
+  /**
+   * The aspect ratio of the crop stencil.
+   */
+  get aspectRatio(): number {
+    return this.columns / this.rows;
+  }
+  
+  onRowsInput(value: string) {
+    const rows = Number(value);
+    this.$forceUpdate();
+    if (Number.isNaN(rows)) return;
+    if (!Number.isInteger(rows)) return;
+    if (rows <= 0) return;
+    this.$emit("update:rows", rows);
+  }
+  
+  onColumnsInput(value: string) {
+    const columns = Number(value);
+    this.$forceUpdate();
+    if (Number.isNaN(columns)) return;
+    if (!Number.isInteger(columns)) return;
+    if (columns <= 0) return;
+    this.$emit("update:columns", columns);
+  }
+  
+  /**
+   * Advances the cropping stage.
+   */
+  onNext() {
+    const { canvas: croppedCanvas } = this.$refs.cropper.getResult();
+    this.$emit("next", croppedCanvas);
+  }
 };
 </script>
 
diff --git a/src/pages/Editor/ConvertImage/Stages/GridStencil.vue b/src/pages/Editor/ConvertImage/Stages/GridStencil.vue
index 38c5075..01a6a16 100644
--- a/src/pages/Editor/ConvertImage/Stages/GridStencil.vue
+++ b/src/pages/Editor/ConvertImage/Stages/GridStencil.vue
@@ -59,6 +59,7 @@
 </template>
 
 <script>
+// NOTE: DON'T CONVERT TO TS, CUSTOM 3RD PARTY COMPONENT
 import classnames from "classnames";
 import bem from "easy-bem";
 import {
diff --git a/src/pages/Editor/ConvertImage/Stages/Saving.vue b/src/pages/Editor/ConvertImage/Stages/Saving.vue
index 684e3a8..b641394 100644
--- a/src/pages/Editor/ConvertImage/Stages/Saving.vue
+++ b/src/pages/Editor/ConvertImage/Stages/Saving.vue
@@ -16,8 +16,8 @@
         >
           <VRadio
             v-for="option in savingMethodOptions"
-            :key="option.name"
-            :label="option.name"
+            :key="option.text"
+            :label="option.text"
             :value="option.value"
             :color="colors.jambalaya"
           />
@@ -31,11 +31,12 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { VBtn, VRadio, VRadioGroup } from "vuetify/lib";
 import { v4 as uuidv4 } from "uuid";
-import { mapActions } from "vuex";
-import { createPatternItem } from "@/libs/storage";
+import { namespace } from "vuex-class";
+import { createPatternItem, PatternItem } from "@/libs/storage";
 import {
   drawingToolToNamedPatternBlob,
   drawingToolToNamedImageBlob,
@@ -46,8 +47,9 @@ import DrawingTool from "@/libs/DrawingTool";
 
 import colors from "@/styles/colors.scss";
 
+const storageModule = namespace('storage');
 
-const dtToStorage = async function(drawingTools) {
+const dtToStorage = async function(this: SavingStage, drawingTools: DrawingTool[]) {
   const mosaicId = uuidv4(); // share id so they can be rendered together
   const date = new Date();
   const mockedPatternItems = drawingTools.map((drawingTool, i) => createPatternItem({
@@ -60,7 +62,7 @@ const dtToStorage = async function(drawingTools) {
   await this.add(mockedPatternItems);
 };
 
-const dtAsImageZip = async function(drawingTools) {
+const dtAsImageZip = async function(drawingTools: DrawingTool[]) {
   const namedImageBlobs = await Promise.all(drawingTools.map(dt =>
     drawingToolToNamedImageBlob(dt)
   ));
@@ -68,7 +70,7 @@ const dtAsImageZip = async function(drawingTools) {
   downloadNamedBlob(namedZipBlob);
 };
 
-const dtAsPatternZip =  async function(drawingTools) {
+const dtAsPatternZip =  async function(drawingTools: DrawingTool[]) {
   const namedPatternBlobs = await Promise.all(drawingTools.map(dt =>
     drawingToolToNamedPatternBlob(dt)
   ));
@@ -76,95 +78,106 @@ const dtAsPatternZip =  async function(drawingTools) {
   downloadNamedBlob(namedZipBlob);
 };
 
-const dtAsBothZip = async function(drawingTools) {
+const dtAsBothZip = async function(drawingTools: DrawingTool[]) {
   const namedBothBlobs = await Promise.all([
-    ...drawingTools.map(drawingToolToNamedPatternBlob),
-    ...drawingTools.map(drawingToolToNamedImageBlob),
+    ...drawingTools.map(dt => drawingToolToNamedPatternBlob(dt)),
+    ...drawingTools.map(dt => drawingToolToNamedImageBlob(dt)),
   ]);
   const namedZipBlob = await namedBlobsToNamedZipBlob(namedBothBlobs);
   downloadNamedBlob(namedZipBlob);
 };
 
-export default {
-  name: "Saving",
+@Component({
   components: {
     VBtn,
     VRadio,
     VRadioGroup,
   },
-  props: {
-    previewDataURL: {
-      type: String,
-      required: true,
-    },
-    columns: {
-      type: Number,
-      required: true,
-    },
-    outputs: {
-      type: Array,
-      required: true,
-    },
-  },
-  data: function () {
-    return {
-      colors,
-      savingMethod: this.outputs.length === 1
-        ? this.load
-        : dtToStorage,
+})
+export default class SavingStage extends Vue {
+  @Prop({
+    type: String,
+    required: true,
+  }) readonly previewDataURL!: string;
+  
+  @Prop({
+    type: Number,
+    required: true,
+  }) readonly columns!: number;
+  
+  @Prop({
+    type: Array,
+    required: true,
+  }) readonly outputs!: DrawingTool[];
+  
+  readonly colors = colors;
+  
+  savingMethod: (...args: any[]) => Promise<void> = this.outputs.length === 1
+    ? this.load
+    : dtToStorage;
+  
+  get savingMethodOptions() {
+    const loadIntoEditor = {
+      text: "Onto Pattern",
+      value: this.load,
     };
-  },
-  computed: {
-    savingMethodOptions() {
-      const loadIntoEditor = {
-        name: "Onto Pattern",
-        value: this.load,
-      };
-      const saveToStorage = {
-        name: "To Storage",
-        value: dtToStorage,
-      };
-      const saveAsQrs = {
-        name: "QRs as .ZIP",
-        value: dtAsImageZip,
-      };
-      const saveAsPattern = {
-        name: "ACNLs/ACNHs as .ZIP",
-        value: dtAsPatternZip,
-      };
-      const saveAsBoth = {
-        name: "Both as .ZIP",
-        value: dtAsBothZip,
-      };
-      
-      const options = [
+    const saveToStorage = {
+      text: "To Storage",
+      value: dtToStorage,
+    };
+    const saveAsQrs = {
+      text: "QRs as .ZIP",
+      value: dtAsImageZip,
+    };
+    const saveAsPattern = {
+      text: "ACNLs/ACNHs as .ZIP",
+      value: dtAsPatternZip,
+    };
+    const saveAsBoth = {
+      text: "Both as .ZIP",
+      value: dtAsBothZip,
+    };
+    
+    const options = [
+      saveToStorage,
+      saveAsQrs,
+      saveAsPattern,
+      saveAsBoth,
+    ];
+    
+    if (this.outputs.length === 1)
+      return [
+        loadIntoEditor,
         saveToStorage,
         saveAsQrs,
         saveAsPattern,
         saveAsBoth,
       ];
-      
-      if (this.outputs.length === 1)
-        options.unshift(loadIntoEditor);
-      return options;
-    },
-  },
-  methods: {
-    ... mapActions("storage", ["add"]),
-    async load() {
-      this.$emit("load", this.outputs);
-      window.alert("Conversion successfully loaded onto pattern.")
-    },
-    async save() {
-      const drawingTools = this.outputs.map((output) => {
-        const drawingTool = new DrawingTool(output.toString());
-        return drawingTool;
-      });
-      await this.savingMethod(drawingTools);
-      if (this.savingMethod === dtToStorage)
-        window.alert("Patterns successfully saved to Storage.");
-    },
-  },
+    return [
+      saveToStorage,
+      saveAsQrs,
+      saveAsPattern,
+      saveAsBoth,
+    ];
+  }
+  
+  @storageModule.Action('add') add!:
+    (patternItems: PatternItem[]) => Promise<void>;
+  
+  async load(): Promise<void> {
+    this.$emit("load", this.outputs);
+    window.alert("Conversion successfully loaded onto pattern.")
+  }
+  
+  async save(): Promise<void> {
+    const drawingTools = this.outputs.map((output) => {
+      const drawingTool = new DrawingTool(output.toString());
+      return drawingTool;
+    });
+    await this.savingMethod(drawingTools);
+    if (this.savingMethod === dtToStorage)
+      window.alert("Patterns successfully saved to Storage.");
+  }
 };
 </script>
 
diff --git a/src/pages/Editor/ConvertImage/Stages/Uploading.vue b/src/pages/Editor/ConvertImage/Stages/Uploading.vue
index 8309aae..1b78106 100644
--- a/src/pages/Editor/ConvertImage/Stages/Uploading.vue
+++ b/src/pages/Editor/ConvertImage/Stages/Uploading.vue
@@ -22,7 +22,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Watch } from "vue-property-decorator";
 import {
   VFileInput,
   VChip,
@@ -30,49 +31,41 @@ import {
 
 import colors from "@/styles/colors.scss";
 
-export default {
-  name: "Uploading",
+@Component({
   components: {
     VFileInput,
     VChip,
   },
-  props: {
-    value: {
-      type: File,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      colors,
-      file: null,
-    };
-  },
-  methods: {
-    async onFileChange() {
-      if (this.file == null)
-        return;
-      const filename = this.file.name.split(".")[0];
-      const fileReader = new FileReader();
-      const dataURL = await new Promise((resolve, reject) => {
-        fileReader.onerror = () => {
-          fileReader.abort();
-          reject(new DOMException("Problem parsing input file."));
-        };
-        fileReader.onload = () => {
-          resolve(fileReader.result);
-        };
-        fileReader.readAsDataURL(this.file);
-      });
-      this.$emit("update:filename", filename);
-      this.$emit("update:dataURL", dataURL);
-      this.$emit("next");
-    },
-  },
-  watch: {
-    file() {
-      this.onFileChange();
-    },
+})
+export default class UploadingStage extends Vue {
+  
+  readonly colors = colors;
+  
+  file: File | null = null;
+  
+  async onFileChange() {
+    if (this.file == null)
+      return;
+    const filename = this.file.name.split(".")[0];
+    const fileReader = new FileReader();
+    const dataURL = await new Promise((resolve, reject) => {
+      fileReader.onerror = () => {
+        fileReader.abort();
+        reject(new DOMException("Problem parsing input file."));
+      };
+      fileReader.onload = () => {
+        resolve(fileReader.result);
+      };
+      fileReader.readAsDataURL(this.file as File);
+    });
+    this.$emit("update:filename", filename);
+    this.$emit("update:dataURL", dataURL);
+    this.$emit("next");
+  }
+  
+  @Watch('file')
+  onFileChanged() {
+    this.onFileChange();
   }
 };
 </script>
\ No newline at end of file

From 30aa4379f8d54a899496c0ed9c79c7c7dc3e37ec Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Tue, 25 Oct 2022 23:38:55 -0700
Subject: [PATCH 14/32] Converted Editor's ColorTools components to ts

---
 src/libs/ACNHFormat.js                        |  14 +
 src/libs/DrawingTool.js                       |  20 +-
 .../Editor/ColorTools/ACNHColorPicker.vue     | 261 +++++++++---------
 .../Editor/ColorTools/ACNLColorPicker.vue     |  90 +++---
 src/pages/Editor/ColorTools/ColorTools.vue    | 113 ++++----
 src/pages/Editor/ColorTools/Palette.vue       |  95 +++----
 6 files changed, 311 insertions(+), 282 deletions(-)

diff --git a/src/libs/ACNHFormat.js b/src/libs/ACNHFormat.js
index 7c8be96..876af75 100644
--- a/src/libs/ACNHFormat.js
+++ b/src/libs/ACNHFormat.js
@@ -351,6 +351,13 @@ class ACNHFormat{
   static bytesForType(t){
     return ACNHFormat.texWidthForType(t) > 32 ? 2216 : 680;
   }
+  /**
+   * Converts slider positions to a css 6 digit hex color.
+   * @param {number} hIn 
+   * @param {number} sIn 
+   * @param {number} vIn 
+   * @returns {string}
+   */
   static slidersToColor(hIn, sIn, vIn){
     const s = Sinc*sIn/100.0;
     const v = (Vstart+Vinc*vIn)/100.0;
@@ -379,6 +386,13 @@ class ACNHFormat{
     while(hex.length<6) hex = '0'+hex;
     return `#${hex.toUpperCase()}`;
   }
+  /**
+   * Converts a css 6 digit hex color or numeric rgb values to slider positions.
+   * @param {string | number} r A css 6 digit hex color or numeric red rgb value.
+   * @param {number} g Numeric green rgb value.
+   * @param {number} b Numeric blue rgb value.
+   * @returns {[number, number, number]} Red, green, blue values.
+   */
   static colorToSliders(r,g,b){
     if (typeof r == "string" && r.length == 7 && r.substr(0, 1) == '#'){r = r.substr(1);}
     if (typeof r == "string" && r.length == 6){
diff --git a/src/libs/DrawingTool.js b/src/libs/DrawingTool.js
index e2a834c..e5d52b7 100644
--- a/src/libs/DrawingTool.js
+++ b/src/libs/DrawingTool.js
@@ -560,7 +560,11 @@ class DrawingTool{
     this.render();
   }
 
-  /// Returns the HTML color of the given palette index
+  /**
+   * Gets the css 6 digit hex color of the palette color at the index.
+   * @param {number} idx 0 - 14 only, #15 is the transparent ref
+   * @returns {string}
+   */
   getPalette(idx){
     if (idx < 0 || idx > 14){return "";}//abort for invalid indexes
     if (this.pattern instanceof ACNHFormat){
@@ -815,9 +819,12 @@ class DrawingTool{
     }
   }
 
-  /// When called with a function as parameter, adds an event handler for color changes.
-  /// When called without parameter (or with null), calls all onColorChange event handlers in sequence.
-  /// Called automatically whenever colors in the palette change, or a new pattern is loaded.
+  /**
+   * When called with a function as parameter, adds an event handler for color changes.
+   * When called without parameter (or with null), calls all onColorChange event handlers in sequence.
+   * Called automatically whenever colors in the palette change, or a new pattern is loaded.
+   * @param {null | Function} f 
+   */
   onColorChange(f = null){
     if (f === null){
       for (let i in this.handleColorChange){
@@ -828,7 +835,10 @@ class DrawingTool{
     }
   }
 
-  // removes a handler
+  /**
+   * Removes a handler.
+   * @param {null | Function} f 
+   */
   onColorChangeRemove(f = null) {
     if ((typeof f) === "function") {
       const idx = this.handleColorChange.indexOf(f);
diff --git a/src/pages/Editor/ColorTools/ACNHColorPicker.vue b/src/pages/Editor/ColorTools/ACNHColorPicker.vue
index e3afec9..67b6641 100644
--- a/src/pages/Editor/ColorTools/ACNHColorPicker.vue
+++ b/src/pages/Editor/ColorTools/ACNHColorPicker.vue
@@ -174,7 +174,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import { VSlider } from "vuetify/lib";
 import ACNHFormat from "@/libs/ACNHFormat";
 
@@ -182,145 +183,142 @@ import IconLeftArrow from "@/assets/icons/bxs-left-arrow.svg?inline";
 import IconRightArrow from "@/assets/icons/bxs-right-arrow.svg?inline";
 
 import colors from "@/styles/colors.scss";
+import DrawingTool from "@/libs/DrawingTool";
 
 const hues = 30;
 const vividnesses = 15;
 const brightnesses = 15;
 
-export default {
-  name: "ACNHColorPicker",
+@Component({
   components: {
     VSlider,
     IconLeftArrow,
     IconRightArrow,
   },
-  props: {
-    drawingTool: Object,
-  },
-  data() {
-    return {
-      hues,
-      vividnesses,
-      brightnesses,
-      
-      colors,
-      hue: 0,
-      vividness: 0,
-      brightness: 0,
-      hueSliderColors: [],
-      vividnessSliderColors: [],
-      brightnessSliderColors: [],
-      hueGradient: {
-        background: "",
-      },
-      vividnessGradient: {
-        background: "",
-      },
-      brightnessGradient: {
-        background: "",
-      },
-      currentColor: 0,
-      acnh: this.drawingTool.compatMode === "ACNH",
-    };
-  },
-  methods: {
-    setSliderColors: function () {
-      // color of draw tool will be in HSV format
-      // increments based on slots in sliders in ACNH
-      // H = hue 1 - 30
-      // S = vividness 1 - 15
-      // V = brightness 1 - 15
+})
+export default class ACNHColorPicker extends Vue {
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  readonly hues = hues;
+  readonly vividnesses = vividnesses;
+  readonly brightnesses = brightnesses;
+  readonly colors = colors;
+  
+  hueSliderColors: string[] = [];
+  vividnessSliderColors: string[] = [];
+  brightnessSliderColors: string[] = [];
+  
+  hue: number = 0;
+  vividness: number = 0;
+  brightness: number = 0;
+  
+  hueGradient = { background: "" };
+  vividnessGradient = { background: "" };
+  brightnessGradient = { background: "" };
+  
+  currentColor: string = "";
+  
+  acnh = this.drawingTool.compatMode === "ACNH";
+  
+  setSliderColors(): void {
+    // color of draw tool will be in HSV format
+    // increments based on slots in sliders in ACNH
+    // H = hue 1 - 30
+    // S = vividness 1 - 15
+    // V = brightness 1 - 15
 
-      // hue
-      let hueSlider = [];
-      for (let i = 0; i < hues; i++) {
-        hueSlider.push(
-          ACNHFormat.slidersToColor(i, this.vividness, this.brightness)
-        );
-      }
-      this.hueSliderColors = [...hueSlider];
+    // hue
+    let hueSlider = [];
+    for (let i = 0; i < hues; i++) {
+      hueSlider.push(
+        ACNHFormat.slidersToColor(i, this.vividness, this.brightness)
+      );
+    }
+    this.hueSliderColors = [...hueSlider];
 
-      // vividness & brightness
-      let vividnessSlider = [];
-      for (let i = 0; i < vividnesses; i++) {
-        vividnessSlider.push(
-          ACNHFormat.slidersToColor(this.hue, i, this.brightness)
-        );
-      }
-      
-      let brightnessSlider = [];
-      for (let i = 0; i < brightnesses; i++) {
-        brightnessSlider.push(
-          ACNHFormat.slidersToColor(this.hue, this.vividness, i)
-        );
-      }
-      
-      this.vividnessSliderColors = [...vividnessSlider];
-      this.brightnessSliderColors = [...brightnessSlider];
-      
-      const hueStops = this.hueSliderColors.map((color, i) => {
-        if (i === 0)
-          return `${color} ${i * 100/hueSlider.length}%`;
-        return `${color} ${i * 100/hueSlider.length}% ${(i + 1) * 100/hueSlider.length}%`;
-      });
-      
-      const vividnessStops = this.vividnessSliderColors.map((color, i) => {
-        if (i === 0)
-          return `${color} ${(i + 1) * 100/vividnessSlider.length}%`;
-        return `${color} ${i * 100/vividnessSlider.length}% ${(i + 1) * 100/vividnessSlider.length}%`;
-      });
-      
-      const brightnessStops = this.brightnessSliderColors.map((color, i) => {
-        if (i === 0)
-          return `${color} ${(i + 1) * 100/brightnessSlider.length}%`;
-        return `${color} ${i * 100/brightnessSlider.length}% ${(i + 1) * 100/brightnessSlider.length}%`;
-      });
-      
-      this.hueGradient.background =
-        `linear-gradient(to right, ${hueStops.join(",")})`;
-      this.vividnessGradient.background =
-        `linear-gradient(to right, ${vividnessStops.join(",")})`;
-      this.brightnessGradient.background =
-        `linear-gradient(to right, ${brightnessStops.join(",")})`;
-      if (
-        this.currentColor !==
+    // vividness & brightness
+    let vividnessSlider = [];
+    for (let i = 0; i < vividnesses; i++) {
+      vividnessSlider.push(
+        ACNHFormat.slidersToColor(this.hue, i, this.brightness)
+      );
+    }
+    
+    let brightnessSlider = [];
+    for (let i = 0; i < brightnesses; i++) {
+      brightnessSlider.push(
+        ACNHFormat.slidersToColor(this.hue, this.vividness, i)
+      );
+    }
+    
+    this.vividnessSliderColors = [...vividnessSlider];
+    this.brightnessSliderColors = [...brightnessSlider];
+    
+    const hueStops = this.hueSliderColors.map((color, i) => {
+      if (i === 0)
+        return `${color} ${i * 100/hueSlider.length}%`;
+      return `${color} ${i * 100/hueSlider.length}% ${(i + 1) * 100/hueSlider.length}%`;
+    });
+    
+    const vividnessStops = this.vividnessSliderColors.map((color, i) => {
+      if (i === 0)
+        return `${color} ${(i + 1) * 100/vividnessSlider.length}%`;
+      return `${color} ${i * 100/vividnessSlider.length}% ${(i + 1) * 100/vividnessSlider.length}%`;
+    });
+    
+    const brightnessStops = this.brightnessSliderColors.map((color, i) => {
+      if (i === 0)
+        return `${color} ${(i + 1) * 100/brightnessSlider.length}%`;
+      return `${color} ${i * 100/brightnessSlider.length}% ${(i + 1) * 100/brightnessSlider.length}%`;
+    });
+    
+    this.hueGradient.background =
+      `linear-gradient(to right, ${hueStops.join(",")})`;
+    this.vividnessGradient.background =
+      `linear-gradient(to right, ${vividnessStops.join(",")})`;
+    this.brightnessGradient.background =
+      `linear-gradient(to right, ${brightnessStops.join(",")})`;
+    if (
+      this.currentColor !==
+      ACNHFormat.slidersToColor(this.hue, this.vividness, this.brightness)
+    ) {
+      this.currentColor = ACNHFormat.slidersToColor(
+        this.hue,
+        this.vividness,
+        this.brightness
+      );
+      this.$emit(
+        "color-picked",
         ACNHFormat.slidersToColor(this.hue, this.vividness, this.brightness)
-      ) {
-        this.currentColor = ACNHFormat.slidersToColor(
-          this.hue,
-          this.vividness,
-          this.brightness
-        );
-        this.$emit(
-          "color-picked",
-          ACNHFormat.slidersToColor(this.hue, this.vividness, this.brightness)
-        );
-      }
-    },
-    setSliderPosition: function (currentColor) {
-      // when user switches between colors on the palettes,
-      // we need to display the correct colors on the sliders
-      // as well as have the sliders in the right positions
+      );
+    }
+  }
+  
+  setSliderPosition(currentColor: string): void {
+    // when user switches between colors on the palettes,
+    // we need to display the correct colors on the sliders
+    // as well as have the sliders in the right positions
 
-      // set selected drawing color
-      // todo: need to call this from editor at same time as onChangedCurrentColor
-      let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(currentColor);
-      if (!rgb) {
-        return;
-      }
+    // set selected drawing color
+    // todo: need to call this from editor at same time as onChangedCurrentColor
+    let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(currentColor);
+    if (!rgb) { return; }
 
-      rgb = {
-        r: parseInt(rgb[1], 16),
-        g: parseInt(rgb[2], 16),
-        b: parseInt(rgb[3], 16),
-      };
+    const parsedRgb = {
+      r: parseInt(rgb[1], 16),
+      g: parseInt(rgb[2], 16),
+      b: parseInt(rgb[3], 16),
+    };
 
-      const sliderPositions = ACNHFormat.colorToSliders(rgb.r, rgb.g, rgb.b);
-      this.hue = sliderPositions[0];
-      this.vividness = sliderPositions[1];
-      this.brightness = sliderPositions[2];
-    },
-  },
+    const sliderPositions = ACNHFormat.colorToSliders(parsedRgb.r, parsedRgb.g, parsedRgb.b);
+    this.hue = sliderPositions[0];
+    this.vividness = sliderPositions[1];
+    this.brightness = sliderPositions[2];
+  }
+  
   mounted() {
     this.setSliderPosition(this.drawingTool.color);
     this.setSliderColors();
@@ -328,12 +326,17 @@ export default {
       this.setSliderPosition(this.drawingTool.color);
       this.setSliderColors();
     });
-  },
-  watch: {
-    hue() { this.setSliderColors(); },
-    vividness() { this.setSliderColors(); },
-    brightness() { this.setSliderColors(); },
   }
+  
+  
+    @Watch('hue')
+    onHueChanged() { this.setSliderColors(); }
+    
+    @Watch('vividness')
+    onVividnessChanged() { this.setSliderColors(); }
+    
+    @Watch('brightness')
+    onBrightnessChanged() { this.setSliderColors(); }
 };
 </script>
 
diff --git a/src/pages/Editor/ColorTools/ACNLColorPicker.vue b/src/pages/Editor/ColorTools/ACNLColorPicker.vue
index 7f5d1d2..200aa00 100644
--- a/src/pages/Editor/ColorTools/ACNLColorPicker.vue
+++ b/src/pages/Editor/ColorTools/ACNLColorPicker.vue
@@ -43,56 +43,58 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import DrawingTool from "@/libs/DrawingTool";
 import ACNLFormat from "@/libs/ACNLFormat";
 
-export default {
-  name: "ACNLColorPicker",
-  props: {
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
-    },
-  },
-  data: function () {
-    const vibrantBlocks = [];
-    for (let i = 0x00; i < 0xff; i += 0x10) {
-      let vibrantBlock = [];
-      for (let j = 0x00; j < 0x09; j += 0x01)
-        vibrantBlock.push(ACNLFormat.paletteColors[i + j]);
-      vibrantBlocks.push(vibrantBlock);
-    }
-    const monoBlock = [];
-    for (let i = 0x0f; i < 0xff; i += 0x10)
-      monoBlock.push(ACNLFormat.paletteColors[i]);
-    return {
-      vibrantBlocks,
-      monoBlock,
-      currColor: this.drawingTool.color,
-    };
-  },
-  methods: {
-    onColorClick: function (event, color) {
-      // if color is the same, gets blocked at parent
+const vibrantBlocks: string[][] = [];
+for (let i = 0x00; i < 0xff; i += 0x10) {
+  let vibrantBlock = [];
+  for (let j = 0x00; j < 0x09; j += 0x01)
+    vibrantBlock.push(ACNLFormat.paletteColors[i + j]);
+  vibrantBlocks.push(vibrantBlock);
+}
+
+const monoBlock: string[] = [];
+for (let i = 0x0f; i < 0xff; i += 0x10)
+  monoBlock.push(ACNLFormat.paletteColors[i]);
+
+@Component
+export default class ACNLColorPicker extends Vue {
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  readonly vibrantBlocks = vibrantBlocks;
+  readonly monoBlock = monoBlock;
+  
+  currColor: string = this.drawingTool.color;
+  
+  onColorClick(_event: MouseEvent, color: string): void {
+    // if color is the same, gets blocked at parent
+    this.$emit("color-picked", color);
+  }
+  
+  onColorMousemove(event: MouseEvent, color: string): void {
+    // if color is the same, gets blocked at parent
+    if (event.buttons === 1) {
       this.$emit("color-picked", color);
-    },
-    onColorMousemove: function (event, color) {
-      // if color is the same, gets blocked at parent
-      if (event.buttons === 1) {
-        this.$emit("color-picked", color);
-      }
-    },
-    updateCurrColor: function () {
-      this.$data.currColor = this.drawingTool.color;
-    },
-  },
-  mounted: function () {
+    }
+  }
+  
+  updateCurrColor(): void {
+    this.$data.currColor = this.drawingTool.color;
+  }
+
+  mounted() {
     this.drawingTool.onColorChange(this.updateCurrColor);
-  },
-  beforeDestroy: function () {
+  }
+  
+  beforeDestroy() {
     this.drawingTool.onColorChangeRemove(this.updateCurrColor);
-  },
+  }
 };
 </script>
 
diff --git a/src/pages/Editor/ColorTools/ColorTools.vue b/src/pages/Editor/ColorTools/ColorTools.vue
index 9ac748e..7e3aad4 100644
--- a/src/pages/Editor/ColorTools/ColorTools.vue
+++ b/src/pages/Editor/ColorTools/ColorTools.vue
@@ -62,7 +62,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import {
   VCard,
   VCardText,
@@ -71,15 +72,14 @@ import {
   VTabsItems,
   VTabItem,
 } from "vuetify/lib";
-import Palette from "./Palette";
+import Palette from "./Palette.vue";
 import DrawingTool from "@/libs/DrawingTool";
-import ACNLColorPicker from "./ACNLColorPicker";
-import ACNHColorPicker from "./ACNHColorPicker";
+import ACNLColorPicker from "./ACNLColorPicker.vue";
+import ACNHColorPicker from "./ACNHColorPicker.vue";
 
 import colors from "@/styles/colors.scss";
 
-export default {
-  name: "ColorTools",
+@Component({
   components: {
     VCard,
     VCardText,
@@ -91,57 +91,56 @@ export default {
     ACNLColorPicker,
     ACNHColorPicker,
   },
-  props: {
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
-    },
-    prevColorPicker: {
-      type: String,
-      required: false,
-    },
-    colorPicker: {
-      type: String,
-      required: false,
-    },
-  },
-  data() {
-    return {
-      colors,
-      modes: ["acnl", "acnh"],
-    };
-  },
-  computed: {
-    isPicking: function () {
-      return this.colorPicker != null;
-    },
-    isACNL: function () {
-      return this.colorPicker === "acnl";
-    },
-    isACNH: function () {
-      return this.colorPicker === "acnh";
-    },
-    isWheel: function () {
-      return this.colorPicker === "wheel";
-    },
-    modeIndex() {
-      if (this.colorPicker == null)
-        return 0;
-      return this.modes.indexOf(this.colorPicker);
-    },
-  },
-  methods: {
-    onModeIndex(modeIndex) {
-      this.$emit("change-color-picker", this.modes[modeIndex]);
-    },
-    // also responsible for closing, send null to close
-    onChangeColorPicker: function (colorPickerMode) {
-      this.$emit("change-color-picker", colorPickerMode);
-    },
-    onChangeCurrentColor: function (idx) {
-      this.$emit("change-current-color", idx);
-    },
-  },
+})
+export default class ColorTools extends Vue {
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  @Prop({
+    type: String,
+    required: false,
+  }) prevColorPicker!: "acnl" | "acnh" | null;
+  
+  @Prop({
+    type: String,
+    required: false,
+  }) colorPicker!: "acnl" | "acnh" | null;
+  
+  readonly colors = colors;
+  readonly modes = ["acnl", "acnh"];
+  
+  get isPicking(): boolean {
+    return this.colorPicker != null;
+  }
+  
+  get isACNL(): boolean {
+    return this.colorPicker === "acnl";
+  }
+  
+  get isACNH(): boolean {
+    return this.colorPicker === "acnh";
+  }
+  
+  get modeIndex(): number {
+    if (this.colorPicker == null)
+      return 0;
+    return this.modes.indexOf(this.colorPicker);
+  }
+  
+  onModeIndex(modeIndex: number): void {
+    this.$emit("change-color-picker", this.modes[modeIndex]);
+  }
+  
+  // also responsible for closing, send null to close
+  onChangeColorPicker(colorPickerMode: "acnl" | "acnh" | null): void {
+    this.$emit("change-color-picker", colorPickerMode);
+  }
+  
+  onChangeCurrentColor(idx: number): void {
+    this.$emit("change-current-color", idx);
+  }
 };
 </script>
 
diff --git a/src/pages/Editor/ColorTools/Palette.vue b/src/pages/Editor/ColorTools/Palette.vue
index bcc5057..1b35705 100644
--- a/src/pages/Editor/ColorTools/Palette.vue
+++ b/src/pages/Editor/ColorTools/Palette.vue
@@ -44,67 +44,68 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import DrawingTool from "@/libs/DrawingTool";
 
+import { Vue, Component, Prop } from "vue-property-decorator";
 // svg icons
 import IconColorBlob from "@/components/icons/IconColorBlob.vue";
 import IconTransparentBlob from "@/components/icons/IconTransparentBlob.vue";
 
-export default {
-  name: "Palette",
+@Component({
   components: {
     IconColorBlob,
     IconTransparentBlob,
   },
-  props: {
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
-    },
-  },
-  data: function () {
-    const paletteColors = [];
-    for (let i = 0; i < 15; ++i)
-      paletteColors.push(this.drawingTool.getPalette(i));
-    return {
-      paletteColors,
-    };
-  },
-  methods: {
-    invalidIdx: function (idx) {
-      if (idx > 15 || idx < 0) {
-        console.log("detected invalid current color value:", idx);
-        return true;
-      }
-    },
-    onColorClick: function (event, idx) {
+})
+export default class Palette extends Vue {
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  paletteColors = new Array(16)
+    .fill(0)
+    .map((_v, i) => this.drawingTool.getPalette(i));
+    
+  invalidIdx(idx: number): boolean {
+    if (idx > 15 || idx < 0) {
+      console.log("detected invalid current color value:", idx);
+      return true;
+    }
+    return false;
+  }
+  
+  onColorClick(_event: MouseEvent, idx: number): void {
+    if (this.invalidIdx(idx)) return;
+    // DOUBLE CLICK, OPEN COLOR PICKER
+    if (this.drawingTool.currentColor === idx) {
+      this.$emit("change-color-picker");
+    }
+    this.$emit("change-current-color", idx);
+  }
+  
+  onColorMousemove(event: MouseEvent, idx: number): void {
+    if (event.buttons === 1) {
       if (this.invalidIdx(idx)) return;
-      // DOUBLE CLICK, OPEN COLOR PICKER
-      if (this.drawingTool.currentColor === idx) {
-        this.$emit("change-color-picker");
-      }
       this.$emit("change-current-color", idx);
-    },
-    onColorMousemove: function (event, idx) {
-      if (event.buttons === 1) {
-        if (this.invalidIdx(idx)) return;
-        this.$emit("change-current-color", idx);
-      }
-    },
-    updatePaletteColors: function () {
-      for (let i = 0; i < 15; ++i) {
-        const paletteColor = this.drawingTool.getPalette(i);
-        this.paletteColors.splice(i, 1, paletteColor);
-      }
-    },
-  },
-  mounted: function () {
+    }
+  }
+  
+  updatePaletteColors(): void {
+    for (let i = 0; i < 15; ++i) {
+      const paletteColor = this.drawingTool.getPalette(i);
+      this.paletteColors.splice(i, 1, paletteColor);
+    }
+  }
+  
+  mounted() {
     this.drawingTool.onColorChange(this.updatePaletteColors);
-  },
-  beforeDestroy: function () {
+  }
+  
+  beforeDestroy() {
     this.drawingTool.onColorChangeRemove(this.updatePaletteColors);
-  },
+  }
 };
 </script>
 

From 8cd1bf282e224c46145c91af3a82b90fa7e226ba Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Tue, 22 Nov 2022 23:13:31 -0800
Subject: [PATCH 15/32] Converted App component to ts

---
 src/App.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 57a2836..514f747 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,7 +10,8 @@
   </VApp>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import {
   VApp,
   VMain,
@@ -19,17 +20,15 @@ import {
 import NavigationButton from "./components/positioned/NavigationButton.vue";
 import Banner from "./components/positioned/Banner.vue";
 
-export default {
-  name: "App",
+@Component({
   components: {
     VApp,
     VMain,
     NavigationButton,
     Banner,
   },
-  data: function () {
-    return {};
-  },
+})
+export default class App extends Vue{
 };
 </script>
 

From f50978bb6bc23a20aef4db8dad0f7d0d73e904e3 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Tue, 22 Nov 2022 23:14:04 -0800
Subject: [PATCH 16/32] Converted Missing component to ts

---
 src/pages/Missing.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/Missing.vue b/src/pages/Missing.vue
index a8b452f..5c6b6a4 100644
--- a/src/pages/Missing.vue
+++ b/src/pages/Missing.vue
@@ -3,9 +3,11 @@
 </template>
 
 
-<script>
-export default {
-  name: "Missing",
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
+@Component
+export default class Missing extends Vue {
 };
 </script>
 

From 67954c21d35d8d9552197a27a3b82043566a7f25 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Tue, 22 Nov 2022 23:14:59 -0800
Subject: [PATCH 17/32] Converted Home component to ts

---
 src/pages/Home.vue | 42 ++++++++++++++++++++++--------------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index d65f99e..7c5f062 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -98,7 +98,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
 import IconNavBrowse from "@/assets/icons/nav/browse.svg?inline";
 import IconNavEditor from "@/assets/icons/nav/editor.svg?inline";
 import IconNavFaq from "@/assets/icons/nav/faq.svg?inline";
@@ -107,8 +109,8 @@ import IconNavDiscord from "@/assets/icons/nav/discord.svg?inline";
 import IconRibbonTailLeft from "@/components/icons/IconRibbonTailLeft.vue";
 import IconStamp from "@/components/icons/IconStamp.vue";
 
-export default {
-  name: "Home",
+
+@Component({
   components: {
     IconNavBrowse,
     IconNavEditor,
@@ -118,23 +120,23 @@ export default {
     IconRibbonTailLeft,
     IconStamp,
   },
-  data: function () {
-    return {};
-  },
-  methods: {
-    goToBrowse: function () {
-      this.$router.push({ path: `/browse` });
-    },
-    goToEditor: function () {
-      this.$router.push({ path: `/editor` });
-    },
-    goToFAQ: function () {
-      this.$router.push({ path: `/faq` });
-    },
-    goToChanges: function () {
-      this.$router.push({ path: `/updates` });
-    },
-  },
+})
+export default class Home extends Vue {
+  goToBrowse() {
+    this.$router.push({ path: `/browse` });
+  }
+  
+  goToEditor() {
+    this.$router.push({ path: `/editor` });
+  }
+  
+  goToFAQ() {
+    this.$router.push({ path: `/faq` });
+  }
+  
+  goToChanges() {
+    this.$router.push({ path: `/updates` });
+  }
 };
 </script>
 

From 9257700bba5d8797672692fa59add929eba3c345 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Tue, 22 Nov 2022 23:17:00 -0800
Subject: [PATCH 18/32] Converted ImportMenuItem component to ts

---
 src/pages/Editor/ImportMenuItem.vue | 28 ++++++++++++++++++----------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/pages/Editor/ImportMenuItem.vue b/src/pages/Editor/ImportMenuItem.vue
index 49db633..1fe2656 100644
--- a/src/pages/Editor/ImportMenuItem.vue
+++ b/src/pages/Editor/ImportMenuItem.vue
@@ -46,26 +46,34 @@
   </FileLoaderCollection>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import { VListItem, VListItemTitle } from "vuetify/lib";
 import FileLoader from "@/components/wrapper/FileLoader.vue";
 import FileLoaderCollection from "@/components/wrapper/FileLoaderCollection.vue";
 
-export default {
-  name: "ImportMenuItem",
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    }
-  },
+export type MenuItem = { label: string } & ({
+  onSelect: Function,
+} | {
+  exts: string[],
+  onLoad: Function,
+} | {
+  onLoadCollection: Function,
+});
+
+@Component({
   components: {
     VListItem,
     VListItemTitle,
     FileLoader,
     FileLoaderCollection,
   },
-  data() { return {}; },
+})
+export default class ImportMenuItem extends Vue {
+  @Prop({
+    type: Object,
+    required: true,
+  }) item!: MenuItem;
 }
 </script>
 

From 3f514a18b146fafe0658789d8053de8b5bc4a3d8 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 18:02:31 -0800
Subject: [PATCH 19/32] Converted Updates page components to ts

---
 src/pages/Updates/Updates.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/pages/Updates/Updates.vue b/src/pages/Updates/Updates.vue
index f5bd3f5..4812be3 100644
--- a/src/pages/Updates/Updates.vue
+++ b/src/pages/Updates/Updates.vue
@@ -5,15 +5,17 @@
 </template>
 
 
-<script>
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
 import MarkdownPage from "@/components/MarkdownPage.vue";
 import UpdatesMarkdown from "./Updates.md";
 
-export default {
+@Component({
   name: "Changelog",
   components: {
     MarkdownPage,
     UpdatesMarkdown,
-  }
-};
+  },
+})
+export default class Updates extends Vue {};
 </script>
\ No newline at end of file

From 2d1171981bbdff45447cd741260422faebfa39d4 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 18:03:42 -0800
Subject: [PATCH 20/32] Converted Moderator page components to ts

---
 src/pages/moderator/Dashboard.vue | 141 ++++++++++++++++++++----------
 src/pages/moderator/Index.vue     |  62 ++++++++-----
 src/pages/moderator/Login.vue     | 133 ++++++++++++++++++----------
 3 files changed, 218 insertions(+), 118 deletions(-)

diff --git a/src/pages/moderator/Dashboard.vue b/src/pages/moderator/Dashboard.vue
index 740bb37..57eefb3 100644
--- a/src/pages/moderator/Dashboard.vue
+++ b/src/pages/moderator/Dashboard.vue
@@ -26,8 +26,8 @@
         <IconGenerator
           class="pickPattern"
           :pattern="opt.bytes"
-          width="150"
-          height="150"
+          :width="150"
+          :height="150"
         />
         <div class="pattern-details">
           <span>by {{ opt.author }}</span>
@@ -148,65 +148,115 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { UploadEntry, StyleTag } from "@/libs/origin";
+import { namespace } from "vuex-class";
+import { Vue, Component } from "vue-property-decorator";
 import { mapGetters, mapState, mapActions } from "vuex";
 import DrawingTool from "@/libs/DrawingTool";
 import IconGenerator from "@/components/IconGenerator.vue";
 
-const colors = {
-  natural: "#EAC558",
-  cute: "#E96598",
-  sporty: "#5EC299",
-  cool: "#6BB6DC",
-  rustic: "#74940D",
-  hip: "#EB7E32",
-  harmonious: "#DC3D32",
-  elegant: "#D589E8",
-  modern: "#5BC0B3",
-  historical: "#8D2E4B",
-  civic: "#4F57C8",
-  silly: "#E64369",
-  spooky: "#363655",
-  "sci-fi": "#408877",
-  aquatic: "#328BCE",
-  floral: "#EA80DA",
-  animal: "#AF2E33",
-  holiday: "#48903B",
-  food: "#B156FD",
-  brand: "#E93F33",
-  anime: "#EB8D77",
-  "video-game": "#0D1010",
-  meme: "#52307C",
+const colors: Record<StyleTag, string> = {
+  [StyleTag.Natural]: "#EAC558",
+  [StyleTag.Cute]: "#E96598",
+  [StyleTag.Sporty]: "#5EC299",
+  [StyleTag.Cool]: "#6BB6DC",
+  [StyleTag.Rustic]: "#74940D",
+  [StyleTag.Hip]: "#EB7E32",
+  [StyleTag.Harmonious]: "#DC3D32",
+  [StyleTag.Elegant]: "#D589E8",
+  [StyleTag.Modern]: "#5BC0B3",
+  [StyleTag.Historical]: "#8D2E4B",
+  [StyleTag.Civic]: "#4F57C8",
+  [StyleTag.Silly]: "#E64369",
+  [StyleTag.Spooky]: "#363655",
+  [StyleTag.SciFi]: "#408877",
+  [StyleTag.Aquatic]: "#328BCE",
+  [StyleTag.Floral]: "#EA80DA",
+  [StyleTag.Animal]: "#AF2E33",
+  [StyleTag.Holiday]: "#48903B",
+  [StyleTag.Food]: "#B156FD",
+  [StyleTag.Brand]: "#E93F33",
+  [StyleTag.Anime]: "#EB8D77",
+  [StyleTag.VideoGame]: "#0D1010",
+  [StyleTag.Meme]: "#52307C",
 };
 
-export default {
+const modModule = namespace('profile');
+
+@Component({
   name: "ModeratorDashboard",
   components: {
     IconGenerator,
   },
-  computed: {
-    ...mapState("profile", ["username", "pending"]),
-    ...mapGetters("profile", ["isLoggedIn"]),
-  },
-  methods: {
-    ...mapActions("profile", ["logOut", "getPending", "reject", "approve"]),
-    onLogOut: async function () {
+})
+export default class ModeratorDashboard extends Vue {
+  /**
+   * The username of this moderator user.
+   */
+  @modModule.State('username') readonly username!: string;
+  
+  /**
+   * The list of entries pending approval  pending approval.
+   */
+  @modModule.State('pending') readonly pending!: Array<UploadEntry>;
+  
+  /**
+   * Whether the current moderator is logged in.
+   */
+  @modModule.Getter('isLoggedIn') readonly isLoggedIn!: boolean;
+  
+  /**
+   * Logs out this moderator user.
+   */
+  @modModule.Action('logOut') logOut!: () => void;
+  
+  /**
+   * Refrehes the list of entries pending approval.
+   */
+  @modModule.Action('getPending') getPending!: () => void;
+  
+  /**
+   * Rejects the pattern.
+   */
+  @modModule.Action('reject') reject!: (hash: string) => void;
+  
+  /**
+   * Approves the pattern with options.
+   */
+  @modModule.Action('approve')
+  approve!: ({
+    hash,
+    options,
+  } : {
+    hash: string,
+    options: UploadEntry,
+  }) => void;
+  
+    async onLogOut() {
       await this.logOut();
-    },
-    onGetPending: async function () {
+    }
+    
+    async onGetPending() {
       await this.getPending();
-    },
-    tagClass(tag) {
+    }
+    
+    tagClass(tag: StyleTag) {
       if (tag != null)
         return {
-          backgroundColor: `${colors[tag.toLowerCase().replace(" ", "-")]}`,
+          backgroundColor: `${colors[tag]}`,
         };
-    },
-    wipePattern: async function (bytes) {
+    }
+    
+    /**
+     * @param bytes The bytes string of the upload entry.
+     */
+    async wipePattern(bytes: string): Promise<void> {
       const dT = new DrawingTool(bytes);
       await this.reject(dT.pixelHash);
-    },
-    okPattern: async function (options) {
+    }
+    
+    async okPattern(options: UploadEntry): Promise<void> {
       //Opt may contain:
       // nsfc: 0/1
       // offensive: 0/1
@@ -216,8 +266,7 @@ export default {
       const dT = new DrawingTool(options.bytes);
       const hash = dT.pixelHash;
       await this.approve({ hash, options });
-    },
-  },
+    }
 };
 </script>
 
diff --git a/src/pages/moderator/Index.vue b/src/pages/moderator/Index.vue
index 48fb3a7..bffa658 100644
--- a/src/pages/moderator/Index.vue
+++ b/src/pages/moderator/Index.vue
@@ -2,35 +2,49 @@
   <router-view @redirect="redirect"></router-view>
 </template>
 
-<script>
+<script lang="ts">
+import { namespace } from "vuex-class";
+import { Vue, Component, Watch } from "vue-property-decorator";
 import { mapGetters, mapActions } from "vuex";
 
-export default {
+const modModule = namespace('profile');
+
+@Component({
   name: "ModeratorIndex",
-  computed: {
-    ...mapGetters("profile", ["isLoggedIn"]),
-  },
-  methods: {
-    ...mapActions("profile", ["continue"]),
-    // corrects link upon landing
-    redirect: function () {
-      let target;
-      if (!this.isLoggedIn) target = "login";
-      else target = "dashboard";
-      let targetPath = `/moderator/${target}`;
-      if (this.$route.path === targetPath) return;
-      this.$router.push(`/moderator/${target}`);
-    },
-  },
-  watch: {
-    isLoggedIn: function (newVal, oldVal) {
-      this.redirect();
-    },
-  },
-  mounted: async function () {
+})
+export default class ModeratorIndex extends Vue {
+  /**
+   * Whether the current moderator is logged in.
+   */
+  @modModule.Getter('isLoggedIn') readonly isLoggedIn!: boolean;
+
+  /**
+   * Attempts to skip the login process using our username and password from
+   * the last time if did not log out.
+   */
+  @modModule.Action('continue') continue!: () => void;
+
+  /**
+   * Corrects the page where we should be upon landing..
+   */
+  redirect(): void {
+    let target;
+    if (!this.isLoggedIn) target = "login";
+    else target = "dashboard";
+    let targetPath = `/moderator/${target}`;
+    if (this.$route.path === targetPath) return;
+    this.$router.push(`/moderator/${target}`);
+  }
+  
+  @Watch('isLoggedIn')
+  onIsLoggedInChanged() {
+    this.redirect();
+  }
+  
+  async mounted() {
     await this.continue();
     this.redirect();
-  },
+  }
 };
 </script>
 
diff --git a/src/pages/moderator/Login.vue b/src/pages/moderator/Login.vue
index 8c9136d..de77f08 100644
--- a/src/pages/moderator/Login.vue
+++ b/src/pages/moderator/Login.vue
@@ -46,59 +46,96 @@
   </div>
 </template>
 
-<script>
-import { mapGetters, mapActions, mapState } from "vuex";
+<script lang="ts">
+import { namespace } from "vuex-class";
+import { Vue, Component } from "vue-property-decorator";
 
-export default {
+const modModule = namespace("profile");
+
+@Component({
   name: "ModeratorLogin",
-  data: function () {
-    return {
-      username: "",
-      password: "",
-      didFail: false,
-    };
-  },
-  computed: {
-    ...mapState("profile", {
-      usedUsername: "username",
-      usedPassword: "password",
-    }),
-    ...mapGetters("profile", ["isLoggedIn"]),
-  },
-  methods: {
-    ...mapActions("profile", ["logIn"]),
-    onUsernameChange: function (event) {
-      const username = event.target.value;
-      this.username = username;
-      this.didFail = false;
-    },
-    onPasswordChange: function (event) {
-      const password = event.target.value;
-      this.password = password;
-      this.didFail = false;
-    },
-    // refocuses if one field is missing, submit with all fields
-    onLogIn: async function () {
-      const { username, password, $refs } = this;
-      if (username.length <= 0) {
-        $refs.username.focus();
-        return;
-      }
-      if (password.length <= 0) {
-        $refs.password.focus();
-        return;
-      }
-      await this.logIn({ username, password });
-      if (!this.isLoggedIn) this.didFail = true;
-      else this.$emit("redirect");
-    },
-  },
-  mounted: function () {
+})
+export default class ModeratorLogin extends Vue {
+  $refs!: {
+    username: HTMLInputElement;
+    password: HTMLInputElement;
+  };
+
+  /**
+   * The account username from the last session (if any).
+   */
+  @modModule.State("username") readonly usedUsername!: string;
+
+  /**
+   * The account password from the last session (if any).
+   */
+  @modModule.State("password") readonly usedPassword!: string;
+
+  /**
+   * Whether the user is logged into the account.
+   */
+  @modModule.Getter("isLoggedIn") readonly isLoggedIn!: string;
+
+  @modModule.Action("logIn")
+  logIn!: ({
+    username,
+    password,
+  }: {
+    username: string;
+    password: string;
+  }) => Promise<void>;
+
+  /**
+   * The user's moderator account username.
+   */
+
+  username: string = "";
+
+  /**
+   * The user's moderator account password.
+   */
+  password: string = "";
+
+  /**
+   * Whether we failed to log in with these credentials.`
+   * Used for form feedback.
+   */
+  didFail: boolean = false;
+
+  onUsernameChange(event: KeyboardEvent) {
+    const username = (event.target as HTMLInputElement).value;
+    this.username = username;
+    this.didFail = false;
+  }
+
+  onPasswordChange(event: KeyboardEvent) {
+    const password = (event.target as HTMLInputElement).value;
+    this.password = password;
+    this.didFail = false;
+  }
+
+  // refocuses if one field is missing, submit with all fields
+  async onLogIn() {
+    const { username, password, $refs } = this;
+    if (username.length <= 0) {
+      $refs.username.focus();
+      return;
+    }
+    if (password.length <= 0) {
+      $refs.password.focus();
+      return;
+    }
+    await this.logIn({ username, password });
+    if (!this.isLoggedIn) this.didFail = true;
+    else this.$emit("redirect");
+  }
+
+  mounted() {
     // only restores on success, handles back navigation edge case
     this.username = this.usedUsername;
     this.password = this.usedPassword;
-  },
-};
+  }
+}
 </script>
 
 

From 5913d335ca08e144e428a79bb409f173a427652e Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 21:45:17 -0800
Subject: [PATCH 21/32] Converted IconRibbonTailLeft copmonent to ts

---
 src/components/icons/IconRibbonTailLeft.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/icons/IconRibbonTailLeft.vue b/src/components/icons/IconRibbonTailLeft.vue
index ae1ee03..dc7dba7 100644
--- a/src/components/icons/IconRibbonTailLeft.vue
+++ b/src/components/icons/IconRibbonTailLeft.vue
@@ -19,9 +19,13 @@
 </template>
 
 
-<script>
-export default {
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
+@Component({
   name: "IconRibbonTailLeft"
+})
+export default class IconRibbonTailLeft extends Vue  {
 };
 </script>
 

From 0609f864b5b08c14cf134f9e5c18249fb7febf73 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 21:45:40 -0800
Subject: [PATCH 22/32] Converted Banner component to ts

---
 src/components/positioned/Banner.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/positioned/Banner.vue b/src/components/positioned/Banner.vue
index e039138..17043e6 100644
--- a/src/components/positioned/Banner.vue
+++ b/src/components/positioned/Banner.vue
@@ -7,7 +7,7 @@
   </router-link>
 </template>
 
-<script>
+<script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
 import IconBanner from "@/assets/icons/banner.svg?inline";
 

From 3389335e72a35d22b976900c781e6d078eca7d28 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 23:40:23 -0800
Subject: [PATCH 23/32] Updated DrawingTool interface types

---
 src/libs/DrawingTool.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/libs/DrawingTool.js b/src/libs/DrawingTool.js
index e5d52b7..79a8a26 100644
--- a/src/libs/DrawingTool.js
+++ b/src/libs/DrawingTool.js
@@ -171,13 +171,19 @@ class DrawingTool{
       if (data != null){this.load(data);}
     }
   }
-
+  
   ///Clears all data (except render targets and onLoad handlers) to defaults
   reset(){
     this.pattern = new ACNLFormat();
     this.pixels_buffer = new ArrayBuffer(4096);
     this.pixels = new Uint8Array(this.pixels_buffer);
+    /**
+     * @type {(x: number, y: number, tool: DrawingTool) => void}
+     */
     this.drawHandler = basicDrawing;
+    /**
+     * @type {(x: number, y: number, tool: DrawingTool) => void}
+     */
     this.drawHandlerAlt = basicDrawing;
     this.currentColor = 0;
     this.undoHistory = [];
@@ -404,6 +410,10 @@ class DrawingTool{
 
     this.onLoad();
   }
+  
+  /**
+   * @type {typeof ACNLFormat.typeInfo | typeof ACNHFormat.typeInfo}
+   */
   get allTypes(){
     if (this.pattern instanceof ACNHFormat){
       return ACNHFormat.typeInfo;
@@ -809,6 +819,12 @@ class DrawingTool{
   /// When called with a function as parameter, adds an event handler for pattern loads.
   /// When called without parameter (or with null), calls all onLoad event handlers in sequence.
   /// Called automatically whenever pattern changes type, when it is reset, or when an entirely new pattern is loaded
+  
+  /**
+   * Triggers onload handlers when called with a null argument or adds a handler
+   * when a callback is passed through.
+   * @param {(drawingTool: DrawingTool) => any | null} f 
+   */
   onLoad(f = null){
     if (f === null){
       for (let i in this.handleOnLoad){

From 9619856af05e35ca9951324582c473f8c15e436f Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 23:42:32 -0800
Subject: [PATCH 24/32] Converted Editor component to ts

---
 src/pages/Editor/Editor.vue | 636 +++++++++++++++++++++---------------
 1 file changed, 375 insertions(+), 261 deletions(-)

diff --git a/src/pages/Editor/Editor.vue b/src/pages/Editor/Editor.vue
index 7e8e42a..5d9794b 100644
--- a/src/pages/Editor/Editor.vue
+++ b/src/pages/Editor/Editor.vue
@@ -168,7 +168,7 @@
   </main>
 </template>
 
-<script>
+<script lang="ts">
 /* libs */
 import DrawingTool from "@/libs/DrawingTool";
 import { view } from "@/libs/origin";
@@ -182,8 +182,10 @@ import {
   patternExts,
   qrImageExts,
 } from "@/libs/reader";
-import { createPatternItem } from "@/libs/storage";
+import { PatternItem, createPatternItem } from "@/libs/storage";
 // components
+import { Vue, Component } from "vue-property-decorator";
+import { namespace } from "vuex-class";
 import { mapActions } from "vuex";
 import {
   VDialog,
@@ -202,7 +204,28 @@ import ThreeDRender from "@/components/ThreeDRender.vue";
 import Toolbar from "./Toolbar.vue";
 import CancelButton from "@/components/modals/CancelButton.vue";
 
-export default {
+const storageModule = namespace('storage');
+
+/**
+ * Mirrored pattern details in an object to sync w/ pattern as it changes.
+ */
+export interface PatternDetails {
+  title: string,
+  creator: {
+    id: number,
+    name: string,
+    gender?: "Male" | "Female",
+  },
+  town: {
+    id: number,
+    name: string,
+  },
+  type: number,
+}
+
+export type ColorPickerMode = "acnl" | "acnh";
+
+@Component({
   name: "Editor",
   components: {
     VDialog,
@@ -220,286 +243,377 @@ export default {
     Publish,
     CancelButton,
   },
-  data() {
-    // randomize the gender
-    const randomBinary = Math.floor(Math.random());
-    return {
-      patternExts,
-      qrImageExts,
-
-      drawingTool: new DrawingTool(),
-      patternDetails: {
-        // redundant mirrored properties, need these to sync
-        title: "Empty",
-        creator: {
-          id: 0,
-          name: "Unknown",
-        },
-        town: {
-          id: 0,
-          name: "Unknown",
-        },
-        type: 9,
+})
+export default class Editor extends Vue {
+  $refs!: {
+    main: HTMLCanvasElement,
+    preview: HTMLCanvasElement,
+  };
+  
+  readonly patternExts!: typeof patternExts;
+  readonly qrImageExts!: typeof qrImageExts;
+  
+  drawingTool: DrawingTool = new DrawingTool();
+  
+  /**
+   * Mirrored pattern details in an object to sync w/DrawingTool as it changes.
+   * Cannot completely track internal drawing tool changes (vue limitation).
+   */
+  patternDetails: PatternDetails = {
+    title: "Empty",
+    creator: {
+      id: 0,
+      name: "Unknown",
+    },
+    town: {
+      id: 0,
+      name: "Unknown",
+    },
+    type: 9,
+  };
+  
+  /**
+   * The current color picker opened or null if not open.
+   */
+  colorPicker: ColorPickerMode | null = null;
+  /**
+   * Used to track the last opened color picker type to re-open if tools need them.
+   */
+  prevColorPicker: ColorPickerMode = "acnl";
+  
+  /**
+   * Whether the convert image modal is open.
+   */
+  convertImage: boolean = false;
+  /**
+   * Whether the publishing modal is open.
+   */
+  publishing: boolean = false;
+  
+  // menu states
+  forceShowImportMenu: boolean = false;
+  forceShowExportMenu: boolean = false;
+  
+  // main pattern canvas settings
+  mainGrid: boolean = true;
+  
+  get importMenuItems() {
+    const items = [
+      {
+        label: "Convert from IMG",
+        onSelect: () => {
+          this.convertImage = true;
+        }
       },
-
-      // colorTool & toolbar fields
-      prevColorPicker: "acnl",
-      colorPicker: null, // color picker mode
-
-      // modals
-      convertImage: null,
-      publishing: false,
-
-      // menu states
-      forceShowImportMenu: false,
-      forceShowExportMenu: false,
-
-      // main pattern canvas settings
-      mainGrid: true,
-    };
-  },
-  computed: {
-    importMenuItems() {
-      const items = [
+      {
+        label: "Open QR Code",
+        exts: qrImageExts,
+        onLoad: this.load,
+      },
+      {
+        label: "Open .ACNL / .ACNH",
+        exts: patternExts,
+        onLoad: this.load,
+      },
+      {
+        label: "Open .ZIP / .DAT",
+        onLoadCollection: this.load,
+      }
+    ];
+    return items;
+  };
+  
+  
+  get exportMenuItems() {
+    const items = [];
+    if (this.drawingTool.compatMode === "ACNL") {
+      items.push(
         {
-          label: "Convert from IMG",
-          onSelect: () => {
-            this.convertImage = true;
-          }
+          label: "as .ACNL",
+          onSelect: this.downloadBinary,
         },
         {
-          label: "Open QR Code",
-          exts: qrImageExts,
-          onLoad: this.load,
+          label: "as QR Code",
+          onSelect: this.downloadQR,
         },
+      );
+    }
+    if (this.drawingTool.compatMode === "ACNH") {
+      items.push(
         {
-          label: "Open .ACNL / .ACNH",
-          exts: patternExts,
-          onLoad: this.load,
+          label: "as .ACNH",
+          onSelect: this.downloadBinary,
         },
         {
-          label: "Open .ZIP / .DAT",
-          onLoadCollection: this.load,
-        }
-      ];
-      return items;
-    },
-    exportMenuItems() {
-      const items = [];
-      if (this.drawingTool.compatMode === "ACNL") {
-        items.push(
-          {
-            label: "as .ACNL",
-            onSelect: this.downloadBinary,
-          },
-          {
-            label: "as QR Code",
-            onSelect: this.downloadQR,
-          },
-        );
-      }
-      if (this.drawingTool.compatMode === "ACNH") {
-        items.push(
-          {
-            label: "as .ACNH",
-            onSelect: this.downloadBinary,
-          },
-          {
-            label: "as PBL",
-            onSelect: this.downloadQR,
-          },
-        );
-      }
+          label: "as PBL",
+          onSelect: this.downloadQR,
+        },
+      );
+    }
+    items.push({
+      label: "to Storage",
+      onSelect: this.saveToStorage,
+    });
+    if (this.drawingTool.compatMode === "ACNL") {
       items.push({
-        label: "to Storage",
-        onSelect: this.saveToStorage,
+            label: "Publish",
+            onSelect: this.beginPublishing,
       });
-      if (this.drawingTool.compatMode === "ACNL") {
-        items.push({
-              label: "Publish",
-              onSelect: this.beginPublishing,
-        });
-      }
-      return items;
-    },
-  },
-  methods: {
-    ...mapActions("storage", ["add"]),
-    // ------------------
-    // REACTION FUNCTIONS
-    // ------------------
-    // data can be binary string or any drawingTool accepted data type
-    load([drawingTool]) {
-      this.drawingTool.load(drawingTool.toString());
-      this.drawingTool.render();
-      this.syncPatternDetails();
-    },
-    onColorPicked: function (color, log = true) {
-      if (this.drawingTool.currentColor === 15) {
-        return alert("This one has to stay transparent!");
-      }
-      const currentColor = this.drawingTool.currentColor;
-      if (this.drawingTool.getPalette(currentColor) === color) return;
-      this.drawingTool.pushUndo();
-      this.drawingTool.setPalette(this.drawingTool.currentColor, color);
-      if (log) console.log(`color picked: ${color}`);
-    },
-    onChangeCurrentColor: function (idx, log = true) {
-      if (this.drawingTool.currentColor === idx) return;
-      this.drawingTool.currentColor = idx;
-      this.drawingTool.onColorChange();
-      if (log) console.log(`changed current color: ${idx}`);
-    },
-    onChangeColorPicker: function (mode) {
-      if (this.colorPicker != null) this.prevColorPicker = this.colorPicker;
-      this.colorPicker = mode;
-    },
-    onChangePrevColorPicker: function (mode) {
-      if (!["acnh", "acnl"].includes(mode)) return;
-      else this.prevColorPicker = mode;
-    },
-    updatePatternDetails: function (patternDetails) {
-      // update current with incoming
-      this.patternDetails = {
-        ...this.patternDetails,
-        ...patternDetails,
-      };
-
-      // alias everything and update drawingTool
-      const { title, creator, town, type } = this.patternDetails;
-      this.drawingTool.title = title;
-      this.drawingTool.patternType = type;
-      this.drawingTool.creator = [creator.name, creator.id];
-      this.drawingTool.town = [town.name, town.id];
-    },
-    updateMainGrid: function (newGridStatus) {
-      this.$data.mainGrid = newGridStatus;
-      this.drawingTool.changeCanvasGrid(this.$refs.main, { grid: newGridStatus });
-      this.drawingTool.render();
-    },
-    // ------------------
-    // SAVING FUNCTIONS
-    // ------------------
-    async downloadBinary() {
-      const namedPatternBlob = await drawingToolToNamedPatternBlob(this.drawingTool);
-      await downloadNamedBlob(namedPatternBlob);
-    },
-    async downloadQR() {
-      const namedImageBlob = await drawingToolToNamedImageBlob(this.drawingTool);
-      await downloadNamedBlob(namedImageBlob);
-    },
-    async saveToStorage() {
-      const copy = new DrawingTool(this.drawingTool.toString());
-      await this.add([createPatternItem({
-        drawingTool: copy,
-        createdDate: new Date(),
-      })]);
-      window.alert("Successfully saved to Storage!");
-    },
-
-    // MODAL REACTION
-    beginPublishing() {
-      if (this.drawingTool.compatMode === "ACNH") {
-        window.alert(
-          "Publishing is not available for ACNH formatted patterns."
-        );
-        return;
-      }
-      this.publishing = true;
-    },
+    }
+    return items;
+  }
+  
+  @storageModule.Action('add')
+  add!: (patternItems: PatternItem[]) => Promise<void>
+  
+  // ------------------
+  // REACTION FUNCTIONS
+  // ------------------
+  load([drawingTool]: DrawingTool[]) {
+    this.drawingTool.load(drawingTool.toString());
+    this.drawingTool.render();
+    this.syncPatternDetails();
+  }
+  
+  
+  /**
+   * When a color is picked, update the drawing tool with the color picked.
+   * @param color The css hex color string to attempt changing to.
+   * @param log Whether to log the change.
+   */
+  onColorPicked(color: string, log = true) {
+    if (this.drawingTool.currentColor === 15) {
+      return alert("This one has to stay transparent!");
+    }
+    const currentColor = this.drawingTool.currentColor;
+    if (this.drawingTool.getPalette(currentColor) === color) return;
+    this.drawingTool.pushUndo();
+    this.drawingTool.setPalette(this.drawingTool.currentColor, color);
+    if (log) console.log(`color picked: ${color}`);
+  }
+  
+  
+  /**
+   * When the current color is changed,
+   * @param idx The index of the current color.
+   * @param log Whether to log the change.
+   */
+  onChangeCurrentColor(idx: number, log = true) {
+    if (this.drawingTool.currentColor === idx) return;
+    this.drawingTool.currentColor = idx;
+    this.drawingTool.onColorChange();
+    if (log) console.log(`changed current color: ${idx}`);
+  }
+  
+  
+  /**
+   * When the color picker changes between ACNL and ACNH modes.
+   * Updates color picker mode and tracking data.
+   */
+  onChangeColorPicker(mode: ColorPickerMode | null) {
+    if (this.colorPicker != null) this.prevColorPicker = this.colorPicker;
+    this.colorPicker = mode;
+  }
+  
+  
+  /**
+   * When the previous color picker mode changes.
+   */
+  onChangePrevColorPicker(mode: ColorPickerMode) {
+    if (!["acnh", "acnl"].includes(mode)) return;
+    else this.prevColorPicker = mode;
+  }
+  
+  
+  /**
+   * Updates the current pattern details with new pattern details.
+   */
+  updatePatternDetails(patternDetails: PatternDetails) {
+    // update current with incoming
+    this.patternDetails = {
+      ...this.patternDetails,
+      ...patternDetails,
+    };
+    
+    // alias everything and update drawingTool
+    const { title, creator, town, type } = this.patternDetails;
+    this.drawingTool.title = title;
+    this.drawingTool.patternType = type;
+    this.drawingTool.creator = [creator.name, creator.id];
+    this.drawingTool.town = [town.name, town.id];
+  }
+  
+  
+  /**
+   * Update the canvas by setting or unsetting grid lines.
+   * @param newGridStatus Whether the grid lines should be turned on.
+   */
+  updateMainGrid(newGridStatus: boolean) {
+    this.mainGrid = newGridStatus;
+    this.drawingTool.changeCanvasGrid(this.$refs.main, { grid: newGridStatus });
+    this.drawingTool.render();
+  }
+  
+  
+  // ------------------
+  // SAVING FUNCTIONS
+  // ------------------
+  /**
+   * Downloads the pattern file for the current pattern.
+   */
+  async downloadBinary() {
+    const namedPatternBlob = await drawingToolToNamedPatternBlob(this.drawingTool);
+    await downloadNamedBlob(namedPatternBlob);
+  }
+  
+  /**
+   * Downloads the qr code for the current pattern.
+   */
+  async downloadQR() {
+    const namedImageBlob = await drawingToolToNamedImageBlob(this.drawingTool);
+    await downloadNamedBlob(namedImageBlob);
+  }
+  
+  
+  /**
+   * Saves the current pattern in the drawing tool to the storage.
+   */
+  async saveToStorage() {
+    const copy = new DrawingTool(this.drawingTool.toString());
+    await this.add([createPatternItem({
+      drawingTool: copy,
+      createdDate: new Date(),
+    })]);
+    window.alert("Successfully saved to Storage!");
+  }
+  
+  
+  // MODAL REACTION
+  beginPublishing() {
+    if (this.drawingTool.compatMode === "ACNH") {
+      window.alert(
+        "Publishing is not available for ACNH formatted patterns."
+      );
+      return;
+    }
+    this.publishing = true;
+  }
 
-    // ---------------------------------------------
-    // ROUTE LOADING / COMPONENT MOUNTING  FUNCTIONS
-    // ---------------------------------------------
-    // sets up an new (already existing) instance of drawingTool
-    initializePattern: async function () {
-      // intial color palette
-      const initialColors = [
-        "#FFFFFF",
-        "#888888",
-        "#000000",
-        "#FF0000",
-        "#FF6600",
-        "#FFFF00",
-        "#22DD22",
-        "#008833",
-        "#00CDFF",
-        "#1077FF",
-        "#0000FF",
-        "#CC00FF",
-        "#FF00CC",
-        "#FFAA88",
-        "#993200",
-      ];
-      let currentColor = 0;
-      for (const color of initialColors) {
-        this.onChangeCurrentColor(currentColor, false);
-        this.onColorPicked(color, false);
-        ++currentColor;
-      }
-      // generate stitching patterns
-      const stichingColor = initialColors.indexOf("#FFAA88");
-      this.onChangeCurrentColor(stichingColor, false);
-      for (let i = 1; i < 32; ++i) {
-        this.drawingTool.setPixel(15, i); // vertical stiches
-        this.drawingTool.setPixel(i, 15); // horizontal stiches
-        if ((i + 1) % 3 === 0) ++i;
-      }
-      this.drawingTool.setPixel(15, 15);
-      // reset current color back to normal
-      this.onChangeCurrentColor(0, false);
-      console.log("new pattern initialized");
-    },
-    // load a pattern from the route, set up new pattern if none in route
-    loadFromRoute: async function () {
-      const isPatternInUrlHash = this.$router.currentRoute.hash.length > 1;
-      if (!isPatternInUrlHash) {
-        this.initializePattern();
-        return;
-      }
-      // pattern stored in URL
-      const fragment = this.$router.currentRoute.hash.substring(1);
-      // determine protocols
-      const isHashProtocol = fragment.startsWith("H:");
-      if (isHashProtocol) {
-        const hash = fragment.substring(2);
-        const bytes = await view(hash);
-        this.drawingTool.load(bytes);
-      } else {
-        this.drawingTool.load(lzString.compressToUTF16("TEST"));
-      }
-      return true;
-    },
-    // syncs relevant details for updateDetails
-    syncPatternDetails: async function () {
-      // copy details from drawingTool
-      const { creator, town } = this.patternDetails;
-      this.patternDetails.title = this.drawingTool.title;
-      this.patternDetails.type = this.drawingTool.patternType;
-      [creator.name, creator.id, creator.gender] = this.drawingTool.creator;
-      [town.name, town.id] = this.drawingTool.town;
-    },
-    onImportTouchStart() {
-      this.forceShowImportMenu = !this.forceShowImportMenu;
-    },
-    onExportTouchStart() {
-      this.forceShowExportClick = !this.forceShowExportClick;
-    },
-  },
-  mounted: async function () {
+  // ---------------------------------------------
+  // ROUTE LOADING / COMPONENT MOUNTING  FUNCTIONS
+  // ---------------------------------------------
+  /**
+   * sets up an new (already existing) instance of drawingTool
+   */
+  async initializePattern(): Promise<void> {
+    // intial color palette
+    const initialColors = [
+      "#FFFFFF",
+      "#888888",
+      "#000000",
+      "#FF0000",
+      "#FF6600",
+      "#FFFF00",
+      "#22DD22",
+      "#008833",
+      "#00CDFF",
+      "#1077FF",
+      "#0000FF",
+      "#CC00FF",
+      "#FF00CC",
+      "#FFAA88",
+      "#993200",
+    ];
+    let currentColor = 0;
+    for (const color of initialColors) {
+      this.onChangeCurrentColor(currentColor, false);
+      this.onColorPicked(color, false);
+      ++currentColor;
+    }
+    // generate stitching patterns
+    const stichingColor = initialColors.indexOf("#FFAA88");
+    this.onChangeCurrentColor(stichingColor, false);
+    for (let i = 1; i < 32; ++i) {
+      this.drawingTool.setPixel(15, i); // vertical stiches
+      this.drawingTool.setPixel(i, 15); // horizontal stiches
+      if ((i + 1) % 3 === 0) ++i;
+    }
+    this.drawingTool.setPixel(15, 15);
+    // reset current color back to normal
+    this.onChangeCurrentColor(0, false);
+    console.log("new pattern initialized");
+  }
+  
+  
+  /**
+   * Load a pattern from the route, set up new pattern if none in route
+   * Returns true when successfully loaded from url.
+   */
+  async loadFromRoute(): Promise<boolean | undefined> {
+    const isPatternInUrlHash = this.$router.currentRoute.hash.length > 1;
+    if (!isPatternInUrlHash) {
+      this.initializePattern();
+      return;
+    }
+    // pattern stored in URL
+    const fragment = this.$router.currentRoute.hash.substring(1);
+    // determine protocols
+    const isHashProtocol = fragment.startsWith("H:");
+    if (isHashProtocol) {
+      const hash = fragment.substring(2);
+      const bytes = await view(hash);
+      this.drawingTool.load(bytes);
+    } else {
+      this.drawingTool.load(lzString.compressToUTF16("TEST"));
+    }
+    return true;
+  }
+  
+  
+  /**
+   * Syncs relevant details between the drawing tool and the pattern details.
+   */
+  syncPatternDetails() {
+    // copy details from drawingTool
+    const { creator, town } = this.patternDetails;
+    this.patternDetails.title = this.drawingTool.title;
+    this.patternDetails.type = this.drawingTool.patternType;
+    [creator.name, creator.id] = this.drawingTool.creator;
+    // [creator.name, creator.id, creator.gender] = this.drawingTool.creator;
+    [town.name, town.id] = this.drawingTool.town;
+  }
+  
+  
+  /**
+   * To force import menu to open when touching.
+   */
+  onImportTouchStart() {
+    this.forceShowImportMenu = !this.forceShowImportMenu;
+  }
+  
+  
+  /**
+   * To force export menu to open when touhcing.
+   */
+  onExportTouchStart() {
+    this.forceShowExportMenu = !this.forceShowExportMenu;
+  }
+  
+  
+  async mounted() {
     // setup drawingTool
     await this.loadFromRoute();
     this.syncPatternDetails();
 
     // mount canvases and render
-    this.drawingTool.addCanvas(this.$refs.main, { grid: this.$data.mainGrid });
+    this.drawingTool.addCanvas(this.$refs.main, { grid: this.mainGrid });
     this.drawingTool.addCanvas(this.$refs.preview);
     this.drawingTool.render();
 
     this.drawingTool.onLoad(() => {
       this.syncPatternDetails();
     });
-  },
+  }
 };
 </script>
 

From f2082bafcd0c7da104bd5ab87286d6322d52e616 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 23:43:07 -0800
Subject: [PATCH 25/32] Converted Preview component to ts

---
 src/pages/Editor/PatternSettings.vue | 199 ++++++++++++++++-----------
 src/pages/Editor/Preview.vue         |  93 ++++++++-----
 2 files changed, 177 insertions(+), 115 deletions(-)

diff --git a/src/pages/Editor/PatternSettings.vue b/src/pages/Editor/PatternSettings.vue
index b903d4f..198f8d2 100644
--- a/src/pages/Editor/PatternSettings.vue
+++ b/src/pages/Editor/PatternSettings.vue
@@ -124,7 +124,8 @@
   </VCard>
 </template>
 
-<script>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
 import {
   VCard,
   VCardTitle,
@@ -136,8 +137,11 @@ import {
 } from "vuetify/lib";
 import CancelButton from "@/components/modals/CancelButton.vue";
 import DrawingTool from "@/libs/DrawingTool";
+import ACNLFormat from "@/libs/ACNLFormat";
+import ACNHFormat from "@/libs/ACNHFormat";
+import { PatternDetails } from "./Editor.vue";
 
-export default {
+@Component({
   name: "Settings",
   components: {
     VCard,
@@ -149,95 +153,128 @@ export default {
     VIcon,
     CancelButton,
   },
-  props: {
-    types: {
-      type: Array,
-      required: true,
+})
+export default class Settings extends Vue {
+  @Prop({
+    type: Array,
+    required: true,
+  }) readonly types!: typeof ACNLFormat.typeInfo | typeof ACNHFormat.typeInfo;
+  
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  /**
+   * The initial pattern details before settings are changed.
+   */
+  @Prop({
+    type: Object,
+    required: true,
+  }) readonly patternDetails!: PatternDetails;
+  
+  /**
+   * Reference to the props `types`.
+   * TODO: exchange references for the props reference. Unnecessary reference duplication.
+   */
+  patternTypes: typeof ACNLFormat.typeInfo | typeof ACNHFormat.typeInfo = this.types;
+  
+  /**
+   * A copy of the original details. Allows for canceling of updating the pattern details.
+   */
+  details: PatternDetails = {
+    ...this.patternDetails,
+  };
+  
+  /**
+   * Whether to show the advanced meta options.
+   */
+  showAdvanced: boolean = false;
+  
+  
+  /**
+   * A copy of the original patternDetails type.
+   */
+  originalType: number = this.patternDetails.type;
+  
+  
+  /**
+   * A copy of the original creator and town data.
+   */
+  storedMeta:{
+    creator: PatternDetails['creator'],
+    town: PatternDetails['town'],
+  } = {
+    creator: {
+      id: 0,
+      name: "",
     },
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
+    town: {
+      id: 0,
+      name: "",
     },
-    patternDetails: {
-      type: Object,
-      required: true,
-    },
-  },
-  data: function () {
-    return {
-      patternTypes: this.$props.types,
-      details: {
-        ...this.$props.patternDetails,
-      },
-      storedAuthorHuman: undefined,
-      showAdvanced: false,
-      originalType: this.$props.patternDetails.type,
-      storedMeta: {
-        creator: {
-          id: 0,
-          name: "",
-        },
-        town: {
-          id: 0,
-          name: "",
-        },
-      },
-    };
-  },
-  computed: {
-    metaCreatorStr() {
-      const creatorStr = `creator: ${this.storedMeta.creator.id} ${this.storedMeta.creator.name}`;
-      return creatorStr;
-    },
-    metaTownStr() {
-      const townStr = `town: ${this.storedMeta.town.id} ${this.storedMeta.town.name}`;
-      return townStr;
-    },
-  },
-  methods: {
-    update() {
-      this.details.title = this.details.title.trim();
-      this.details.town.name = this.details.town.name.trim();
-      this.details.creator.name = this.details.creator.name.trim();
-      if (this.originalType !== this.details.type) {
-        const msg =
-          "A change in pattern type may cause the pattern to change in specific areas. Do you wish to proceed?";
-        const confirm = window.confirm(msg);
-        if (!confirm) return;
-      }
+  };
+  
+  get metaCreatorStr() {
+    const creatorStr = `creator: ${this.storedMeta.creator.id} ${this.storedMeta.creator.name}`;
+    return creatorStr;
+  }
+  
+  get metaTownStr() {
+    const townStr = `town: ${this.storedMeta.town.id} ${this.storedMeta.town.name}`;
+    return townStr;
+  }
+  
+  update() {
+    this.details.title = this.details.title.trim();
+    this.details.town.name = this.details.town.name.trim();
+    this.details.creator.name = this.details.creator.name.trim();
+    if (this.originalType !== this.details.type) {
+      const msg =
+        "A change in pattern type may cause the pattern to change in specific areas. Do you wish to proceed?";
+      const confirm = window.confirm(msg);
+      if (!confirm) return;
+    }
 
-      this.$emit("update-details", {
-        ...this.details,
-      });
-    },
-    storeMeta() {
-      const { town, creator } = this.details;
-      const meta = JSON.stringify({
-        creator: { ...creator },
-        town: { ...town },
-      });
+    this.$emit("update-details", {
+      ...this.details,
+    });
+  }
+  
+  
+  storeMeta() {
+    const { town, creator } = this.details;
+    const meta = JSON.stringify({
+      creator: { ...creator },
+      town: { ...town },
+    });
 
-      this.storedMeta.creator = { ...creator };
-      this.storedMeta.town = { ...town };
-      localStorage.setItem("acnl_meta", meta);
-    },
-    loadMeta() {
-      const meta = JSON.parse(localStorage.getItem("acnl_meta"));
-      if (meta == null) return;
-      this.details.creator.id = meta.creator.id;
-      this.details.creator.name = meta.creator.name;
-      this.details.town.id = meta.town.id;
-      this.details.town.name = meta.town.name;
-    },
-  },
-  mounted() {
+    this.storedMeta.creator = { ...creator };
+    this.storedMeta.town = { ...town };
+    localStorage.setItem("acnl_meta", meta);
+  }
+  
+  
+  loadMeta() {
+    // @ts-ignore
     const meta = JSON.parse(localStorage.getItem("acnl_meta"));
     if (meta == null) return;
+    this.details.creator.id = meta.creator.id;
+    this.details.creator.name = meta.creator.name;
+    this.details.town.id = meta.town.id;
+    this.details.town.name = meta.town.name;
+  }
+  
+  
+  mounted() {
+    const storedMetaStr = localStorage.getItem("acnl_meta");
+    if (storedMetaStr == null) return;
+    const meta = JSON.parse(localStorage.getItem("acnl_meta") as string);
     this.storedMeta.creator.id = meta.creator.id;
     this.storedMeta.creator.name = meta.creator.name;
     this.storedMeta.town.id = meta.town.id;
     this.storedMeta.town.name = meta.town.name;
-  },
+  }
 };
 </script>
 
diff --git a/src/pages/Editor/Preview.vue b/src/pages/Editor/Preview.vue
index 2519d27..463345e 100644
--- a/src/pages/Editor/Preview.vue
+++ b/src/pages/Editor/Preview.vue
@@ -71,7 +71,9 @@
   </VCard>
 </template>
 
-<script>
+<script lang="ts">
+import { saveAs } from "file-saver";
+import { Vue, Component, Prop } from "vue-property-decorator"
 import {
   VDialog,
   VBtn,
@@ -98,7 +100,8 @@ import generateACNHKeypresses from "@/libs/ACNHKeypressGenerator";
 
 import colors from "@/styles/colors.scss";
 
-export default {
+
+@Component({
   name: "Preview",
   components: {
     VDialog,
@@ -116,44 +119,66 @@ export default {
     ACNLQRGenerator,
     ACNLToACNHInfo,
   },
-  props: {
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
-    },
-  },
-  data: function () {
-    const dataURL = "";
-    return {
-      colors,
-      dataURL,
-      gameModeInfo: false,
-      showKeypressModal: false,
-      showKeypressCopied: false,
-    };
-  },
-  methods: {
-    async downloadPNG() {
-      if (this.dataURL === "") return;
-      saveAs(this.dataURL, this.drawingTool.title + ".png");
-    },
-    async copyKeypresses(){
-      let presses = await generateACNHKeypresses(this.drawingTool);
-      try {
-        await navigator.clipboard.writeText(presses);
-      } catch (err) {
-        alert("Error! Could not copy: "+e);
-      }
-      this.showKeypressCopied = true;
-    },
-  },
+})
+export default class Preview extends Vue {
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) readonly drawingTool!: DrawingTool;
+
+  readonly colors: typeof colors = colors;
+
+  /**
+   * The data URL of the fully generated qr code.
+   */
+  dataURL: string = "";
+
+  /**
+   * Whether show the modal warning users about the game mode change.
+   */
+  gameModeInfo: boolean = false;
+
+  /**
+   * Whether to show the keypress modal.
+   */
+  showKeypressModal: boolean = false;
+
+  /**
+   * Whether to show the clipboard copy confirmation
+   */
+  showKeypressCopied: boolean = false;
+
+
+  /**
+   * Downloads the qr code as apng file.
+   */
+  async downloadPNG() {
+    if (this.dataURL === "") return;
+    saveAs(this.dataURL, this.drawingTool.title + ".png");
+  }
+
+
+  /**
+   * Copies the keypresses data.
+   */
+  async copyKeypresses(){
+    let presses = await generateACNHKeypresses(this.drawingTool);
+    try {
+      await navigator.clipboard.writeText(presses);
+    } catch (err) {
+      alert("Error! Could not copy: "+ err);
+    }
+    this.showKeypressCopied = true;
+  }
+
+
   async mounted() {
     if (this.drawingTool.compatMode == "ACNL") {
       this.dataURL = await generateACNLQR(this.drawingTool);
     } else {
       this.dataURL = await generateACNHPBL(this.drawingTool);
     }
-  },
+  }
 };
 </script>
 

From 516428a597dae1ea9b46aa0a1caa0b8596fc3246 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 23:43:38 -0800
Subject: [PATCH 26/32] Converted Storage component to ts

---
 src/pages/Editor/Storage.vue | 297 ++++++++++++++++++-----------------
 1 file changed, 150 insertions(+), 147 deletions(-)

diff --git a/src/pages/Editor/Storage.vue b/src/pages/Editor/Storage.vue
index 7305c21..3640ece 100644
--- a/src/pages/Editor/Storage.vue
+++ b/src/pages/Editor/Storage.vue
@@ -10,14 +10,13 @@
   </PatternContainer>
 </template>
 
-<script>
+<script lang="ts">
 import { first, without } from "lodash";
-import {
-  mapGetters,
-  mapMutations,
-  mapActions,
-} from "vuex";
+import { namespace } from "vuex-class";
+import { Vue, Component } from "vue-property-decorator";
 import PatternContainer from "@/components/positioned/PatternContainer.vue";
+import { UtilityBarOption } from "@/components/positioned/UtilityBar.vue"
+import { PatternItem } from "@/libs/storage";
 import {
   drawingToolToNamedPatternBlob,
   drawingToolToNamedImageBlob,
@@ -25,164 +24,168 @@ import {
   downloadNamedBlob,
 } from "@/libs/downloader";
 
-export default {
+const storageModule = namespace('storage');
+
+@Component({
   name: "Storage",
   components: {
     PatternContainer,
   },
-  data() {
-    return {
-      selected: [],
-    };
-  },
-  computed: {
-    ...mapGetters("storage", ["patternItems"]),
-    drawingTools() {
-      return this.patternItems.map(pi => pi.drawingTool);
-    },
-    options() {
-      const { selected, patternItems } = this;
-      let options = [];
-      if (patternItems.length === 0) return options;
+})
+export default class Storage extends Vue {
+  selected: PatternItem[] = [];
+  
+  @storageModule.Getter('patternItems') readonly patternItems!: PatternItem[];
+  
+  get drawingTools() {
+    return this.patternItems.map(pi => pi.drawingTool);
+  }
+  
+  get options() {
+    const { selected, patternItems } = this;
+    let options: UtilityBarOption[] = [];
+    if (patternItems.length === 0) return options;
 
-      const open = {
-        icon: 'mdi-application-edit',
-        label: `Open`,
-        callback: async () => {
-          const patternItem = first(selected);
-          this.$emit("load", [patternItem.drawingTool]);
-          this.$emit("close");
-        },
-      };
+    const open = {
+      icon: 'mdi-application-edit',
+      label: `Open`,
+      callback: async () => {
+        const patternItem = first(selected) as PatternItem;
+        this.$emit("load", [patternItem.drawingTool]);
+        this.$emit("close");
+      },
+    };
 
-      const del = {
-        icon: 'mdi-trash-can',
-        label: `Delete`,
-        callback: async () => {
-          const [
-            message,
-            source
-          ] = selected.length !== 0
-            ? [
-              "Are you sure you want to delete these patterns from storage?",
-              selected,
-            ]
-            : [
-              "Are you sure you want to clear the storage?",
-              patternItems,
-            ];
-          if (!window.confirm(message))
-            return;
-          await this.remove(source);
-          this.selected = without(
-            this.selected,
-            ...source,
-          );
-        },
-      };
+    const del = {
+      icon: 'mdi-trash-can',
+      label: `Delete`,
+      callback: async () => {
+        const [
+          message,
+          source
+        ] = selected.length !== 0
+          ? [
+            "Are you sure you want to delete these patterns from storage?",
+            selected,
+          ]
+          : [
+            "Are you sure you want to clear the storage?",
+            patternItems,
+          ];
+        if (!window.confirm(message))
+          return;
+        await this.remove(source);
+        this.selected = without(
+          this.selected,
+          ...source,
+        );
+      },
+    };
 
-      const downloadAsPattern = {
-        icon: 'mdi-file',
-        label: `.ACNL/.ACNH`,
-        callback: async () => {
-          if (selected.length === 1) {
-            const namedPatternBlob = await drawingToolToNamedPatternBlob(
-              first(selected).drawingTool
-            );
-            await downloadNamedBlob(namedPatternBlob);
-            return;
-          }
-          const source = selected.length
-            ? selected
-            : patternItems;
-          const namedPatternBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedPatternBlob(dt))
+    const downloadAsPattern = {
+      icon: 'mdi-file',
+      label: `.ACNL/.ACNH`,
+      callback: async () => {
+        if (selected.length === 1) {
+          const namedPatternBlob = await drawingToolToNamedPatternBlob(
+            (first(selected) as PatternItem).drawingTool
           );
-          const namedZipBlob = await namedBlobsToNamedZipBlob(namedPatternBlobs);
-          await downloadNamedBlob(namedZipBlob);
-        },
-      };
+          await downloadNamedBlob(namedPatternBlob);
+          return;
+        }
+        const source = selected.length
+          ? selected
+          : patternItems;
+        const namedPatternBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedPatternBlob(dt))
+        );
+        const namedZipBlob = await namedBlobsToNamedZipBlob(namedPatternBlobs);
+        await downloadNamedBlob(namedZipBlob);
+      },
+    };
 
-      const downloadAsPng = {
-        icon: 'mdi-image',
-        label: `QR/PBL`,
-        callback: async () => {
-          if (selected.length === 1) {
-            const namedImageBlob = await drawingToolToNamedImageBlob(
-              first(selected).drawingTool
-            );
-            await downloadNamedBlob(namedImageBlob);
-            return;
-          }
-          const source = selected.length
-            ? selected
-            : patternItems;
-          const namedImageBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedImageBlob(dt))
+    const downloadAsPng = {
+      icon: 'mdi-image',
+      label: `QR/PBL`,
+      callback: async () => {
+        if (selected.length === 1) {
+          const namedImageBlob = await drawingToolToNamedImageBlob(
+            (first(selected) as PatternItem).drawingTool
           );
-          const namedZipBlob = await namedBlobsToNamedZipBlob(namedImageBlobs);
-          await downloadNamedBlob(namedZipBlob);
-        },
-      };
+          await downloadNamedBlob(namedImageBlob);
+          return;
+        }
+        const source = selected.length
+          ? selected
+          : patternItems;
+        const namedImageBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedImageBlob(dt))
+        );
+        const namedZipBlob = await namedBlobsToNamedZipBlob(namedImageBlobs);
+        await downloadNamedBlob(namedZipBlob);
+      },
+    };
 
-      const downloadAsBoth = {
-        icon: 'mdi-zip-box',
-        label: `Both`,
-        callback: async () => {
-          if (selected.length === 1) {
-            const namedPatternBlob = await drawingToolToNamedPatternBlob(
-              first(selected).drawingTool
-            );
-            const namedImageBlob = await drawingToolToNamedImageBlob(
-              first(selected).drawingTool
-            );
-            const namedZipBlob = await namedBlobsToNamedZipBlob([
-              namedPatternBlob,
-              namedImageBlob,
-            ]);
-            await downloadNamedBlob(namedZipBlob);
-            return;
-          }
-          let source = selected.length
-            ? selected
-            : patternItems;
-          const namedPatternBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedPatternBlob(dt))
+    const downloadAsBoth = {
+      icon: 'mdi-zip-box',
+      label: `Both`,
+      callback: async () => {
+        if (selected.length === 1) {
+          const namedPatternBlob = await drawingToolToNamedPatternBlob(
+            (first(selected) as PatternItem).drawingTool
           );
-          const namedImageBlobs = await Promise.all(
-            source
-              .map(pi => pi.drawingTool)
-              .map(dt => drawingToolToNamedImageBlob(dt))
+          const namedImageBlob = await drawingToolToNamedImageBlob(
+            (first(selected) as PatternItem).drawingTool
           );
           const namedZipBlob = await namedBlobsToNamedZipBlob([
-            ...namedPatternBlobs,
-            ...namedImageBlobs,
+            namedPatternBlob,
+            namedImageBlob,
           ]);
           await downloadNamedBlob(namedZipBlob);
-        },
-      };
+          return;
+        }
+        let source = selected.length
+          ? selected
+          : patternItems;
+        const namedPatternBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedPatternBlob(dt))
+        );
+        const namedImageBlobs = await Promise.all(
+          source
+            .map(pi => pi.drawingTool)
+            .map(dt => drawingToolToNamedImageBlob(dt))
+        );
+        const namedZipBlob = await namedBlobsToNamedZipBlob([
+          ...namedPatternBlobs,
+          ...namedImageBlobs,
+        ]);
+        await downloadNamedBlob(namedZipBlob);
+      },
+    };
 
-      if (selected.length === 1)
-        options.push(open);
-      options.push(del);
-      options.push(
-        downloadAsPattern,
-        downloadAsPng,
-        downloadAsBoth,
-      );
-      return options;
-    },
-  },
-  methods: {
-    ...mapMutations("storage", ["init"]),
-    ...mapActions("storage", ["remove"]),
-  },
+    if (selected.length === 1)
+      options.push(open);
+    options.push(del);
+    options.push(
+      downloadAsPattern,
+      downloadAsPng,
+      downloadAsBoth,
+    );
+    return options;
+  }
+  
+  @storageModule.Mutation('init')
+  init!: () => Promise<void>;
+  
+  @storageModule.Action('remove')
+  remove!: (patternItems: PatternItem[]) => Promise<void>
+  
   mounted() {
     this.init();
   }

From 36b563297cc2befdf32cd0b31786cea0b5485727 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 23:43:52 -0800
Subject: [PATCH 27/32] Converted Toolbar component to ts

---
 src/pages/Editor/Toolbar.vue | 403 ++++++++++++++++++++---------------
 1 file changed, 235 insertions(+), 168 deletions(-)

diff --git a/src/pages/Editor/Toolbar.vue b/src/pages/Editor/Toolbar.vue
index eead91d..382b4f4 100644
--- a/src/pages/Editor/Toolbar.vue
+++ b/src/pages/Editor/Toolbar.vue
@@ -139,7 +139,7 @@
               }"
               v-bind="attrs"
               v-on="on"
-              @click="selectTool('fill', null)"
+              @click="selectTool('fill', '')"
               :ripple="false"
               elevation="0"
             >
@@ -165,7 +165,7 @@
               }"
               v-bind="attrs"
               v-on="on"
-              @click="selectTool('eyeDropper', null)"
+              @click="selectTool('eyeDropper', '')"
               :ripple="false"
               elevation="0"
             >
@@ -422,8 +422,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { v4 as uuidv4 } from "uuid";
+import { Vue, Component, Prop } from "vue-property-decorator";
 import {
   VDialog,
   VCard,
@@ -464,14 +465,15 @@ import IconGrid from "@/assets/icons/bx-grid.svg?inline";
 
 
 import colors from "@/styles/colors.scss";
+import { ColorPickerMode, PatternDetails } from "./Editor.vue";
 
 // tool functions IIFE
 const brush = (() => {
-  const small = (x, y, tool) => {
+  const small = (x: number, y: number, tool: DrawingTool) => {
     tool.drawPixel(x, y);
   };
 
-  const medium = (x, y, tool) => {
+  const medium = (x: number, y: number, tool: DrawingTool) => {
     const color = tool.setPixel(x, y);
     tool.setPixel(x - 1, y, color); // left
     tool.setPixel(x + 1, y, color); // right
@@ -480,8 +482,8 @@ const brush = (() => {
     tool.render();
   };
 
-  const large = (x, y, tool) => {
-    const color = tool.setPixel(x, y, color);
+  const large = (x: number, y: number, tool: DrawingTool) => {
+    const color = tool.setPixel(x, y);
     tool.setPixel(x - 1, y, color); // left
     tool.setPixel(x - 2, y, color); // left left
     tool.setPixel(x + 1, y, color); // right
@@ -499,7 +501,7 @@ const brush = (() => {
   return { small, medium, large };
 })();
 
-const eyeDropper = (x, y, tool) => {
+const eyeDropper = (x: number, y: number, tool: DrawingTool) => {
   let newColor = tool.getPixel(x, y);
   if (newColor !== false) {
     tool.currentColor = newColor;
@@ -507,13 +509,13 @@ const eyeDropper = (x, y, tool) => {
   }
 };
 
-const fill = (x, y, tool) => {
+const fill = (x: number, y: number, tool: DrawingTool) => {
   const prevColor = tool.getPixel(x, y);
   const newColor = tool.currentColor;
   if (prevColor === false) return; // invalid pixel
   if (prevColor === newColor) return; // nothing to flood
   let counter = 0;
-  const reColor = (inX, inY) => {
+  const reColor = (inX: number, inY: number) => {
     const thisColor = tool.getPixel(inX, inY);
     // not we're setting color on pixel data, has not been rendered, speed optimization
     if (
@@ -531,14 +533,17 @@ const fill = (x, y, tool) => {
   tool.render();
 };
 
+type Tool = (x: number, y: number, drawingTool: DrawingTool) => void;
+type ToolMap = Record<string, Tool>
+
 // string to handler mappings
-const toolMappings = {
+const toolMappings: Record<string, Tool | ToolMap> = {
   brush,
   fill,
   eyeDropper,
 };
 
-export default {
+@Component({
   name: "ToolBar",
   components: {
     VDialog,
@@ -573,176 +578,238 @@ export default {
     ACNLToACNHInfo,
     ACNHToACNLInfo,
   },
-  props: {
-    drawingTool: {
-      type: DrawingTool,
-      required: true,
-    },
-    prevColorPicker: {
-      type: String,
-      required: false,
-    },
-    colorPicker: {
-      type: String,
-      required: false,
-    },
-    patternDetails: {
-      type: Object,
-      required: true,
-    },
-    mainGrid: {
-      type: Boolean,
-      required: true,
+})
+export default class Toolbar extends Vue {
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  @Prop({
+    type: String,
+    required: false,
+  }) prevColorPicker: ColorPickerMode = "acnl";
+  
+  @Prop({
+    required: true,
+  }) colorPicker!: ColorPickerMode | null;
+  
+  @Prop({
+    type: Object,
+    required: true,
+  }) patternDetails!: PatternDetails;
+  
+  @Prop({
+    type: Boolean,
+    required: true,
+  }) mainGrid!: boolean;
+  
+  readonly colors: typeof colors = colors;
+  
+  /**
+   * A string referring to a key in the tool mapping.
+   */
+  tool: string = "";
+  
+  /**
+   * A string referring to a key in the tool in the tool mapping.
+   * e.g. with a tool set to "brush", option can be set to "small"
+   */
+  option: string = "";
+  
+  
+  /**
+   * Whether to show the pattern settings modal.
+   */
+  settingsOpen: boolean = false;
+  
+  
+  /**
+   * Whether to show the preview modal.
+   */
+  previewOpen: boolean = false;
+  
+  
+  /**
+   * Whether to show the storage mdodal.
+   */
+  storageOpen: boolean = false;
+  
+  
+  /**
+   * Whether the game mode is ACNH
+   */
+  gameMode: boolean = this.drawingTool.compatMode === "ACNH";
+  
+  
+  /**
+   * Whether to show the modal warning users about a game mode change.
+   */
+  gameModeWarning: boolean = false;
+  
+  
+  /**
+   * Whether to forever dismiss the game mode warning modal.
+   */
+  dismissForever: boolean = false;
+  
+  
+  /**
+   * Component metadata.
+   */
+  gridInputId: string = uuidv4();
+  
+  /**
+   * Combines two vue event listener
+   */
+  readonly combineOns: typeof combineOns = combineOns;
+  
+  
+  load(binaryString: string) {
+    this.$emit("load", binaryString);
+  }
+  
+  
+  onChangeColorPicker(mode: ColorPickerMode) {
+    this.$emit("change-color-picker", mode);
+  }
+  
+  
+  /**
+   * Selects the primary tool for the left mouse button.
+   * @param alt Whether to select the secondary tool for the right mouse button instead.
+   */
+  selectTool(newTool: string, newOption: string, alt: boolean = false) {
+    // no matching tool, bail
+    if (!(newTool in toolMappings)) return;
+    let tool = toolMappings[newTool];
+    if (newOption && typeof toolMappings[newTool] === "object") {
+      if (!(newOption in toolMappings[newTool])) return;
+      tool = (tool as ToolMap)[newOption];
     }
-  },
-  data() {
-    return {
-      colors,
-      tool: null,
-      option: null,
-      settingsOpen: false,
-      previewOpen: false,
-      storageOpen: false,
-      // isACNH
-      gameMode: this.drawingTool.compatMode === "ACNH",
-      gameModeWarning: false,
-      dismissForever: false,
-      // component metadata
-      gridInputId: uuidv4(),
-    };
-  },
-  methods: {
-    combineOns,
-    load: function (binaryString) {
-      this.$emit("load", binaryString);
-    },
-    onChangeColorPicker: function (mode) {
-      this.$emit("change-color-picker", mode);
-    },
-    /**
-     * Sets the tool to the mouse button
-     *
-     * @param {String} mode
-     * @param {String} option
-     */
-    selectTool: function (newTool, newOption = null, alt = false) {
-      // no matching tool, bail
-      if (!(newTool in toolMappings)) return;
-      let tool = toolMappings[newTool];
-      if (newOption && typeof toolMappings[newTool] === "object") {
-        if (!(newOption in toolMappings[newTool])) return;
-        tool = tool[newOption];
-      }
-      if (alt) this.drawingTool.drawHandlerAlt = tool;
-      else {
-        this.drawingTool.drawHandler = tool;
-        this.tool = newTool;
-        this.option = newOption;
-      }
-    },
-    // helps determines if the passed tool is the current tool drawHandler
-    // can also determine if a tool has options
-    // -1 means invalid, none matching
-    // 0 counts itself
-    // 1+ for options not counting itself
-    countToolOptions: function (newTool, newOption) {
-      if (!(newTool in toolMappings)) return -1;
-      if (typeof toolMappings[newTool] === "function") return 0;
-      if (typeof toolMappings[newTool] === "object") {
-        if (newOption == null) return Object.keys(toolMappings[newTool]).length;
-        if (!(newOption in toolMappings[newTool])) return -1;
-        else return 0;
-      }
-      return -1;
-    },
-    cycleOptions: function () {
-      const { tool, option } = this;
-      if (this.option == null) return;
-      const options = Object.keys(toolMappings[tool]);
-      const idx = options.indexOf(option);
-      const nextIdx = (idx + 1) % options.length;
-      const nextOption = options[nextIdx];
-      this.option = nextOption;
-      this.selectTool(tool, nextOption);
-    },
-    onKey: async function (event) {
-      const { ctrlKey, altKey, metaKey, shiftKey, code, preventDefault } =
-        event;
-      const noMod = !ctrlKey && !altKey && !metaKey && !shiftKey;
-      if (noMod) {
-        // cycle tool options
-        if (code === "KeyT") {
-          this.cycleOptions();
-          return;
-        }
-        // qrPreview
-        else if (code === "KeyP") {
-          this.settingsOpen = false;
-          this.$emit("change-color-picker", null);
-          // need to wait 2 ticks for portal to process
-          await this.$nextTick();
-          await this.$nextTick();
-          this.previewOpen = true;
-          return;
-        }
-      }
-      // undo redos
-      if (ctrlKey && !altKey && !metaKey) {
-        if (code === "KeyZ") {
-          if (shiftKey) this.drawingTool.redo();
-          else this.drawingTool.undo();
-        }
+    if (alt) this.drawingTool.drawHandlerAlt = tool as Tool;
+    else {
+      this.drawingTool.drawHandler = tool as Tool;
+      this.tool = newTool;
+      this.option = newOption;
+    }
+  }
+  
+  
+  // helps determines if the passed tool is the current tool drawHandler
+  // can also determine if a tool has options
+  // -1 means invalid, none matching
+  // 0 counts itself
+  // 1+ for options not counting itself
+  countToolOptions(newTool: string, newOption: string): number {
+    if (!(newTool in toolMappings)) return -1;
+    if (typeof toolMappings[newTool] === "function") return 0;
+    if (typeof toolMappings[newTool] === "object") {
+      if (newOption == null) return Object.keys(toolMappings[newTool]).length;
+      if (!(newOption in toolMappings[newTool])) return -1;
+      else return 0;
+    }
+    return -1;
+  }
+  
+  
+  cycleOptions() {
+    const { tool, option } = this;
+    if (this.option == null) return;
+    const options = Object.keys(toolMappings[tool]);
+    const idx = options.indexOf(option);
+    const nextIdx = (idx + 1) % options.length;
+    const nextOption = options[nextIdx];
+    this.option = nextOption;
+    this.selectTool(tool, nextOption);
+  }
+  
+  
+  async onKey(event: KeyboardEvent) {
+    const { ctrlKey, altKey, metaKey, shiftKey, code, preventDefault } =
+      event;
+    const noMod = !ctrlKey && !altKey && !metaKey && !shiftKey;
+    if (noMod) {
+      // cycle tool options
+      if (code === "KeyT") {
+        this.cycleOptions();
+        return;
       }
-    },
-    changeGameModeWithWarning() {
-      const targetCompatMode =
-        this.drawingTool.compatMode === "ACNH" ? "ACNL" : "ACNH";
-      const currentCompatMode = targetCompatMode === "ACNH" ? "ACNL" : "ACNH";
-      const dismissForever =
-        localStorage.getItem(
-          `dismiss${currentCompatMode}To${targetCompatMode}`
-        ) === "true";
-      if (!dismissForever) {
-        this.gameModeWarning = true;
+      // qrPreview
+      else if (code === "KeyP") {
+        this.settingsOpen = false;
+        this.$emit("change-color-picker", null);
+        // need to wait 2 ticks for portal to process
+        await this.$nextTick();
+        await this.$nextTick();
+        this.previewOpen = true;
         return;
       }
-      this.drawingTool.compatMode = targetCompatMode;
-      this.gameMode = this.drawingTool.compatMode === "ACNH";
-      this.$emit(
-        "change-prev-color-picker",
-        this.drawingTool.compatMode.toLowerCase()
-      );
-    },
-    changeGameModeFromWarning(dismissForever) {
-      this.gameModeWarning = false;
-      const targetCompatMode =
-        this.drawingTool.compatMode === "ACNH" ? "ACNL" : "ACNH";
-      const currentCompatMode = targetCompatMode === "ACNH" ? "ACNL" : "ACNH";
-      if (dismissForever) {
-        localStorage.setItem(
-          `dismiss${currentCompatMode}To${targetCompatMode}`,
-          true
-        );
+    }
+    // undo redos
+    if (ctrlKey && !altKey && !metaKey) {
+      if (code === "KeyZ") {
+        if (shiftKey) this.drawingTool.redo();
+        else this.drawingTool.undo();
       }
-      this.drawingTool.compatMode = targetCompatMode;
-      this.gameMode = this.drawingTool.compatMode === "ACNH";
-      this.$emit(
-        "change-prev-color-picker",
-        this.drawingTool.compatMode.toLowerCase()
+    }
+  }
+  
+  
+  changeGameModeWithWarning() {
+    const targetCompatMode =
+      this.drawingTool.compatMode === "ACNH" ? "ACNL" : "ACNH";
+    const currentCompatMode = targetCompatMode === "ACNH" ? "ACNL" : "ACNH";
+    const dismissForever =
+      localStorage.getItem(
+        `dismiss${currentCompatMode}To${targetCompatMode}`
+      ) === "true";
+    if (!dismissForever) {
+      this.gameModeWarning = true;
+      return;
+    }
+    this.drawingTool.compatMode = targetCompatMode;
+    this.gameMode = this.drawingTool.compatMode === "ACNH";
+    this.$emit(
+      "change-prev-color-picker",
+      this.drawingTool.compatMode.toLowerCase()
+    );
+  }
+  
+  
+  changeGameModeFromWarning(dismissForever: boolean) {
+    this.gameModeWarning = false;
+    const targetCompatMode =
+      this.drawingTool.compatMode === "ACNH" ? "ACNL" : "ACNH";
+    const currentCompatMode = targetCompatMode === "ACNH" ? "ACNL" : "ACNH";
+    if (dismissForever) {
+      localStorage.setItem(
+        `dismiss${currentCompatMode}To${targetCompatMode}`,
+        String(true)
       );
-    },
-  },
+    }
+    this.drawingTool.compatMode = targetCompatMode;
+    this.gameMode = this.drawingTool.compatMode === "ACNH";
+    this.$emit(
+      "change-prev-color-picker",
+      this.drawingTool.compatMode.toLowerCase()
+    );
+  }
+  
+  
   mounted() {
     this.selectTool("brush", "small");
-    this.selectTool("eyeDropper", null, true);
+    this.selectTool("eyeDropper", "", true);
     window.addEventListener("keydown", this.onKey);
     this.drawingTool.onLoad((t) => {
       this.gameMode = t.compatMode == "ACNH";
     });
-  },
+  }
+  
+  
   beforeDestroy() {
     window.removeEventListener("keydown", this.onKey);
-  },
+  }
 };
 </script>
 

From 2972441b7403f930023dbfb9ad24ef04044c4378 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 7 Jan 2023 23:45:20 -0800
Subject: [PATCH 28/32] Converted ThreeDRender component to ts

- removed optimize three plugin b/c it's
  incompatible with type

- updated files affected by plugin removal
---
 config/webpack.config.js        |   2 -
 package-lock.json               |  30 +-
 package.json                    |   5 +-
 src/components/ThreeDRender.vue | 475 ++++++++++++++++++--------------
 src/libs/Preview3D.js           |   2 +-
 5 files changed, 276 insertions(+), 238 deletions(-)

diff --git a/config/webpack.config.js b/config/webpack.config.js
index df49944..ad84b31 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -8,7 +8,6 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const { VuetifyLoaderPlugin } = require('vuetify-loader');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeThreePlugin = require('@vxna/optimize-three-webpack-plugin');
 const env = require('../etc/env'); // assume already loaded, checked
 const {
   pathToClientSrc,
@@ -264,7 +263,6 @@ const htmlWebpackOptions = {
 const plugins = [
   new VueLoaderPlugin(),
   new VuetifyLoaderPlugin(),
-  new OptimizeThreePlugin(),
   new webpack.DefinePlugin({ "env": JSON.stringify(clientEnv) }),
 ];
 
diff --git a/package-lock.json b/package-lock.json
index 7784eba..180334f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,9 +16,8 @@
         "@types/lodash": "^4.14.178",
         "@types/lz-string": "^1.3.34",
         "@types/papaparse": "^5.3.1",
-        "@types/three": "^0.137.0",
+        "@types/three": "0.137.0",
         "@types/uuid": "^8.3.4",
-        "@vxna/optimize-three-webpack-plugin": "^5.1.3",
         "@zxing/library": "^0.17.1",
         "axios": "^0.24.0",
         "copy-webpack-plugin": "^11.0.0",
@@ -42,7 +41,7 @@
         "stream": "^0.0.2",
         "swc-loader": "^0.1.15",
         "terser-webpack-plugin": "^5.2.5",
-        "three": "^0.135.0",
+        "three": "0.137.0",
         "uuid": "^8.3.2",
         "vue": "^2.6.14",
         "vue-advanced-cropper": "^1.9.0",
@@ -1028,14 +1027,6 @@
         "prettier": "^1.18.2 || ^2.0.0"
       }
     },
-    "node_modules/@vxna/optimize-three-webpack-plugin": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/@vxna/optimize-three-webpack-plugin/-/optimize-three-webpack-plugin-5.1.3.tgz",
-      "integrity": "sha512-mPTJd5o+fSRb50dF1pSh4+K7iA0gFNyUSn9FdjYzch++axtq4LjlSDc8DYGFziebbpY3NRzvlF7iPRStjLv5fw==",
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -6889,9 +6880,9 @@
       }
     },
     "node_modules/three": {
-      "version": "0.135.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.135.0.tgz",
-      "integrity": "sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ=="
+      "version": "0.137.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.137.0.tgz",
+      "integrity": "sha512-rzSDhia6cU35UCy6y+zEEws6vSgytfHqFMSaBvUcySgzwvDO6vETyswtSNi/+aVqJw8WLMwyT1mlQQ1T/dxxOA=="
     },
     "node_modules/through2": {
       "version": "4.0.2",
@@ -8867,11 +8858,6 @@
         "vue-template-es2015-compiler": "^1.9.0"
       }
     },
-    "@vxna/optimize-three-webpack-plugin": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/@vxna/optimize-three-webpack-plugin/-/optimize-three-webpack-plugin-5.1.3.tgz",
-      "integrity": "sha512-mPTJd5o+fSRb50dF1pSh4+K7iA0gFNyUSn9FdjYzch++axtq4LjlSDc8DYGFziebbpY3NRzvlF7iPRStjLv5fw=="
-    },
     "@webassemblyjs/ast": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -13302,9 +13288,9 @@
       }
     },
     "three": {
-      "version": "0.135.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.135.0.tgz",
-      "integrity": "sha512-kuEpuuxRzLv0MDsXai9huCxOSQPZ4vje6y0gn80SRmQvgz6/+rI0NAvCRAw56zYaWKMGMfqKWsxF9Qa2Z9xymQ=="
+      "version": "0.137.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.137.0.tgz",
+      "integrity": "sha512-rzSDhia6cU35UCy6y+zEEws6vSgytfHqFMSaBvUcySgzwvDO6vETyswtSNi/+aVqJw8WLMwyT1mlQQ1T/dxxOA=="
     },
     "through2": {
       "version": "4.0.2",
diff --git a/package.json b/package.json
index aef18ac..dfa986d 100644
--- a/package.json
+++ b/package.json
@@ -26,9 +26,8 @@
     "@types/lodash": "^4.14.178",
     "@types/lz-string": "^1.3.34",
     "@types/papaparse": "^5.3.1",
-    "@types/three": "^0.137.0",
+    "@types/three": "0.137.0",
     "@types/uuid": "^8.3.4",
-    "@vxna/optimize-three-webpack-plugin": "^5.1.3",
     "@zxing/library": "^0.17.1",
     "axios": "^0.24.0",
     "copy-webpack-plugin": "^11.0.0",
@@ -52,7 +51,7 @@
     "stream": "^0.0.2",
     "swc-loader": "^0.1.15",
     "terser-webpack-plugin": "^5.2.5",
-    "three": "^0.135.0",
+    "three": "0.137.0",
     "uuid": "^8.3.2",
     "vue": "^2.6.14",
     "vue-advanced-cropper": "^1.9.0",
diff --git a/src/components/ThreeDRender.vue b/src/components/ThreeDRender.vue
index 57dff1c..236f1dd 100644
--- a/src/components/ThreeDRender.vue
+++ b/src/components/ThreeDRender.vue
@@ -8,7 +8,7 @@
   />
 </template>
 
-<script>
+<script lang="ts">
 import DrawingTool from "@/libs/DrawingTool";
 import { applyFilter } from "@/libs/xbrz";
 import {
@@ -18,6 +18,7 @@ import {
 } from "@/libs/typeMappings";
 
 import {
+  Object3D,
   Scene,
   Texture,
   sRGBEncoding,
@@ -28,222 +29,278 @@ import {
   AmbientLight,
   DoubleSide,
   TextureLoader,
+  SkinnedMesh,
 } from "three";
-import { GLTFLoader } from "@three/loaders/GLTFLoader";
-import { OrbitControls } from "@three/controls/OrbitControls";
-import { clothingStand } from "@/models";
+import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import ModelUrlData, { clothingStand } from "@/models";
+import { Vue, Component, Prop } from "vue-property-decorator";
 
 const scale = 50;
 
 const gltfLoader = new GLTFLoader();
 const textureLoader = new TextureLoader();
 
-export default {
+@Component({
   name: "ThreeDRender",
-  props: {
-    drawingTool: DrawingTool,
-    width: Number,
-    height: Number,
-  },
-  data: function () {
-    const pixelCanvas = document.createElement("canvas");
-    const renderCanvas = document.createElement("canvas");
-    return {
-      
-      pixelCanvas,
-      renderCanvas,
-      scene: new Scene(),
-      camera: new OrthographicCamera(
-        -this.width / scale,
-        this.width / scale,
-        this.height / scale,
-        -this.height / scale,
-        0.1,
-        1000
-      ),
-      renderer: null,
-      texture: null,
-      dirLight: false,
-      model: null,
-      stand: null,
-      adjusting: false,
-      rotating: false,
-      hasAnimReq: false,
-      loading: false,
-      controls: null,
-      mixImg: null,
-    };
-  },
-  methods: {
-    cleanUp() {
-      if (this.model) this.scene.remove(this.model);
-        this.model = null;
-      if (this.stand) this.scene.remove(this.stand);
-    },
-    setupTexture() {
-      this.texture = new Texture(this.renderCanvas);
-      this.texture.needsUpdate = true;
-      this.texture.encoding = sRGBEncoding;
-      this.texture.flipY = false;
-    },
-    async loadModel() {
-      //This prevents a race condition from happening when changing pattern while a model was still being loaded
-      //We simply postpone the event by 100ms repeatedly until the previous load completed.
-      if (this.loading) {
-        setTimeout(this.loadModel, 100, this.drawingTool);
-        return;
+})
+export default class ThreeDRender extends Vue {
+  $refs!: { canvas3d: HTMLCanvasElement }
+  
+  @Prop({
+    type: DrawingTool,
+    required: true,
+  }) drawingTool!: DrawingTool;
+  
+  @Prop({
+    type: Number,
+    required: true,
+  }) width!: number;
+
+  @Prop({
+    type: Number,
+    required: true,
+  })  height!: number;
+  
+  pixelCanvas: HTMLCanvasElement = document.createElement("canvas");
+  
+  renderCanvas: HTMLCanvasElement = document.createElement("canvas");
+  
+  scene: Scene = new Scene();
+  
+  camera: OrthographicCamera = new OrthographicCamera(
+    -this.width / scale,
+    this.width / scale,
+    this.height / scale,
+    -this.height / scale,
+    0.1,
+    1000
+  );
+  
+  renderer: WebGLRenderer | null = null;
+  
+  texture: Texture | null = null;
+  
+  dirLight: DirectionalLight = new DirectionalLight(0xffffff, 0.8);
+  
+  model: Object3D | null = null;
+  
+  stand: Object3D | null  = null;
+  
+  /**
+   * Whether to automatically rotate the pattern model.
+   * TODO: rotate stand with it if there is one.
+   */
+  rotating: boolean = false;
+  
+  /**
+   * 0 if there's no animation request, non-zero when there is.
+   */
+  hasAnimReq: number = 0;
+  
+  /**
+   * Whether models are in the middle of loading already.
+   * Tracking this prevents async related errors.
+   */
+  loading = false;
+  
+  controls: OrbitControls | null = null;
+  
+  mixImg: HTMLImageElement | null = null;
+
+  // data: function () {
+  //   const pixelCanvas = document.createElement("canvas");
+  //   const renderCanvas = document.createElement("canvas");
+  //   return {
+  //     model: null,
+  //     stand: null,
+  //     rotating: false,
+  //     hasAnimReq: false,
+  //     loading: false,
+  //     controls: null,
+  //     mixImg: null,
+  //   };
+  // },
+  /**
+   * Cleans up the scene for the next model loading cycle.
+   */
+  cleanUp() {
+    if (this.model) this.scene.remove(this.model);
+      this.model = null;
+    if (this.stand) this.scene.remove(this.stand);
+  }
+  
+  
+  setupTexture() {
+    this.texture = new Texture(this.renderCanvas);
+    this.texture.needsUpdate = true;
+    this.texture.encoding = sRGBEncoding;
+    this.texture.flipY = false;
+  }
+  
+  
+  /**
+   * Loads the models into the scene.
+   */
+  async loadModel() {
+    //This prevents a race condition from happening when changing pattern while a model was still being loaded
+    //We simply postpone the event by 100ms repeatedly until the previous load completed.
+    if (this.loading) {
+      setTimeout(this.loadModel, 100, this.drawingTool);
+      return;
+    }
+    this.loading = true;
+    //Remove old model from the scene
+    this.cleanUp();
+    //Get new model properties
+    const modelType = typeInfoToModelType.get(this.drawingTool.typeInfo);
+    if (modelType === ModelType.Standee)
+      return;
+    const modelUrlData = typeInfoToModelUrlData.get(this.drawingTool.typeInfo) as ModelUrlData;
+    const modelOffset = { x: 0, y: -6, z: 0, rough: 1.5 };
+    (this.controls as OrbitControls).maxZoom = 2.0;
+    (this.controls as OrbitControls).minZoom = 0.8;
+    this.camera.position.set(0, 20, 100);
+    switch (modelType) {
+      case ModelType.Cloth: //easel style
+        modelOffset.rough = 0.5;
+        modelOffset.y = -7;
+        (this.controls as OrbitControls).maxZoom = 2.0;
+        (this.controls as OrbitControls).minZoom = 0.8;
+        break;
+      case ModelType.Top: //clothing style
+        (this.controls as OrbitControls).maxZoom = 4.0;
+        (this.controls as OrbitControls).minZoom = 1.5;
+        break;
+      case ModelType.Hat: //hat style
+        modelOffset.y = -1;
+        (this.controls as OrbitControls).maxZoom = 2.0;
+        (this.controls as OrbitControls).minZoom = 0.8;
+        break;
+    }
+    (this.controls as OrbitControls).update();
+    this.$refs.canvas3d.dispatchEvent(
+      new WheelEvent("wheel", { deltaY: 50 })
+    );
+    //Remove stand and re-add if it should be displayed
+    if (modelType === ModelType.Top && this.stand)
+      this.scene.add(this.stand);
+    this.setupTexture();
+    // Wipe the renderCanvas
+    (this.renderCanvas.getContext("2d") as CanvasRenderingContext2D).clearRect(0, 0, 128, 1);
+    this.mixImg = null;
+    this.pixelCanvas.height = this.pixelCanvas.width =
+      this.drawingTool.texWidth;
+    this.renderCanvas.height = this.renderCanvas.width =
+      this.drawingTool.texWidth * 4;
+    this.drawingTool.render();
+    //The loader has an async callback. This is fine, as we don't run any other code after it.
+    const gltf = await new Promise<GLTF>((resolve) => {
+      gltfLoader.load(modelUrlData.modelUrl, resolve);
+    });
+    if (this.model) this.scene.remove(this.model);
+    this.model = gltf.scene.children[0];
+    // need to start targeting specific meshes
+    //  need to create mappings for specific targets
+    this.model.traverse((child) => {
+      if (!(child instanceof SkinnedMesh)) return;
+      if (modelUrlData.nrmUrl) {
+        const nrmTexture = textureLoader.load(modelUrlData.nrmUrl, () => this.redraw());
+        child.material.normalMap = nrmTexture;
+        child.material.normalMap.flipY = false;
       }
-      this.loading = true;
-      //Remove old model from the scene
-      this.cleanUp();
-      //Get new model properties
-      const modelType = typeInfoToModelType.get(this.drawingTool.typeInfo);
-      if (modelType === ModelType.Standee)
-        return;
-      const modelUrlData = typeInfoToModelUrlData.get(this.drawingTool.typeInfo);
-      const modelOffset = { x: 0, y: -6, z: 0, rough: 1.5 };
-      this.controls.maxZoom = 2.0;
-      this.controls.minZoom = 0.8;
-      this.camera.position.set(0, 20, 100);
-      switch (modelType) {
-        case ModelType.Cloth: //easel style
-          modelOffset.rough = 0.5;
-          modelOffset.y = -7;
-          this.controls.maxZoom = 2.0;
-          this.controls.minZoom = 0.8;
-          this.controls.zoom = 1.5;
-          break;
-        case ModelType.Top: //clothing style
-          this.controls.maxZoom = 4.0;
-          this.controls.minZoom = 1.5;
-          break;
-        case ModelType.Hat: //hat style
-          modelOffset.y = -1;
-          this.controls.maxZoom = 2.0;
-          this.controls.minZoom = 0.8;
-          break;
+      if (modelUrlData.crvUrl) {
+        const crvTexture = textureLoader.load(modelUrlData.crvUrl, () => this.redraw());
+        child.material.lightMap = crvTexture;
+        child.material.lightMap.flipY = false;
       }
-      this.controls.update();
-      this.$refs.canvas3d.dispatchEvent(
-        new WheelEvent("wheel", { deltaY: 50 })
-      );
-      //Remove stand and re-add if it should be displayed
-      if (modelType === ModelType.Top && this.stand)
-        this.scene.add(this.stand);
-      this.setupTexture();
-      // Wipe the renderCanvas
-      this.renderCanvas.getContext("2d").clearRect(0, 0, 128, 1);
-      this.mixImg = false;
-      this.pixelCanvas.height = this.pixelCanvas.width =
-        this.drawingTool.texWidth;
-      this.renderCanvas.height = this.renderCanvas.width =
-        this.drawingTool.texWidth * 4;
-      this.drawingTool.render();
-      //The loader has an async callback. This is fine, as we don't run any other code after it.
-      const gltf = await new Promise((resolve) => {
-        gltfLoader.load(modelUrlData.modelUrl, resolve);
-      });
-      if (this.model) this.scene.remove(this.model);
-      this.model = gltf.scene.children[0];
-      // need to start targeting specific meshes
-      //  need to create mappings for specific targets
-      this.model.traverse((child) => {
-        if (!(child instanceof Mesh)) return;
-        //child.material = new MeshPhongMaterial();
-        if (modelUrlData.nrmUrl) {
-          const nrmTexture = textureLoader.load(modelUrlData.nrmUrl, () => this.redraw());
-          child.material.normalMap = nrmTexture;
-          child.material.normalMap.flipY = false;
-        }
-        if (modelUrlData.crvUrl) {
-          const crvTexture = textureLoader.load(modelUrlData.crvUrl, () => this.redraw());
-          child.material.lightMap = crvTexture;
-          child.material.lightMap.flipY = false;
-        }
-        if (modelUrlData.opUrl) {
-          const opTexture = textureLoader.load(modelUrlData.opUrl, () => this.redraw());
-          child.material.alphaMap = opTexture;
-          child.material.alphaMap.flipY = false;
-          child.material.transparent = true;
-          child.material.alphaTest = 0.5;
-        }
-        if (modelUrlData.mixUrl) {
-          this.mixImg = new Image();
-          this.mixImg.onload = () => this.redraw();
-          this.mixImg.src = modelUrlData.mixUrl
-        }
-        if (modelUrlData.albUrl) {
-          const albTexture = textureLoader.load(modelUrlData.albUrl, () => this.redraw());
-          child.material.map = albTexture;
-          child.material.map.flipY = false;
-        }
-        if (
-          child.skeleton &&
-          child.skeleton.bones &&
-          child.skeleton.bones.length
-        ) {
-          for (let b in child.skeleton.bones) {
-            if (child.skeleton.bones[b].name == "Arm_1_R") {
-              child.skeleton.bones[b].rotation.z += 0.75;
-            }
-            if (child.skeleton.bones[b].name == "Arm_1_L") {
-              child.skeleton.bones[b].rotation.z -= 0.75;
-            }
+      if (modelUrlData.opUrl) {
+        const opTexture = textureLoader.load(modelUrlData.opUrl, () => this.redraw());
+        child.material.alphaMap = opTexture;
+        child.material.alphaMap.flipY = false;
+        child.material.transparent = true;
+        child.material.alphaTest = 0.5;
+      }
+      if (modelUrlData.mixUrl) {
+        this.mixImg = new Image();
+        this.mixImg.onload = () => this.redraw();
+        this.mixImg.src = modelUrlData.mixUrl
+      }
+      if (modelUrlData.albUrl) {
+        const albTexture = textureLoader.load(modelUrlData.albUrl, () => this.redraw());
+        child.material.map = albTexture;
+        child.material.map.flipY = false;
+      }
+      if (
+        child.skeleton &&
+        child.skeleton.bones &&
+        child.skeleton.bones.length
+      ) {
+        for (let b in child.skeleton.bones) {
+          if (child.skeleton.bones[b].name == "Arm_1_R") {
+            child.skeleton.bones[b].rotation.z += 0.75;
+          }
+          if (child.skeleton.bones[b].name == "Arm_1_L") {
+            child.skeleton.bones[b].rotation.z -= 0.75;
           }
         }
-        if (
-          !child.material.map ||
-          (child.material.map.image &&
-            child.material.map.image.width == 1 &&
-            child.material.map.image.height == 1)
-        )
-          child.material.map = this.texture;
+      }
+      if (
+        !child.material.map ||
+        (child.material.map.image &&
+          child.material.map.image.width == 1 &&
+          child.material.map.image.height == 1)
+      )
+        child.material.map = this.texture;
+      child.material.side = DoubleSide;
+      child.material.metalness = 0;
+      child.material.shininess = 9;
+      child.material.roughness = modelOffset.rough;
+    });
+    this.model.position.x = modelOffset.x;
+    this.model.position.y = modelOffset.y;
+    this.model.position.z = modelOffset.z;
+    this.scene.add(this.model);
+    this.redraw();
+    this.loading = false;
+  }
+  
+  redraw() {
+    if (!this.hasAnimReq)
+      this.hasAnimReq = requestAnimationFrame(this.animate);
+  }
+  
+  animate() {
+    (this.controls as OrbitControls).update();
+    this.dirLight.position.set(
+      this.camera.position.x + 2,
+      this.camera.position.y + 1,
+      this.camera.position.z + 4
+    );
+    this.dirLight.position.multiplyScalar(50);
+    (this.renderer as WebGLRenderer).render(this.scene, this.camera);
+    if (!this.rotating || !this.model) {
+      this.hasAnimReq = 0;
+    } else {
+      this.model.rotation.y += 0.01;
+      this.hasAnimReq = requestAnimationFrame(this.animate);
+    }
+  }
+  
+  async loadClothingStand() {
+    const gltf = await new Promise<GLTF>(resolve => gltfLoader.load(clothingStand.modelUrl, resolve));
+    this.stand = gltf.scene.children[0];
+    this.stand.traverse((child) => {
+      if (child instanceof Mesh) {
         child.material.side = DoubleSide;
-        child.material.metalness = 0;
-        child.material.shininess = 9;
-        child.material.roughness = modelOffset.rough;
-      });
-      this.model.position.x = modelOffset.x;
-      this.model.position.y = modelOffset.y;
-      this.model.position.z = modelOffset.z;
-      this.scene.add(this.model);
-      this.redraw();
-      this.loading = false;
-    },
-    redraw() {
-      if (!this.hasAnimReq)
-        this.hasAnimReq = requestAnimationFrame(this.animate);
-    },
-    animate() {
-      this.controls.update();
-      this.dirLight.position.set(
-        this.camera.position.x + 2,
-        this.camera.position.y + 1,
-        this.camera.position.z + 4
-      );
-      this.dirLight.position.multiplyScalar(50);
-      this.renderer.render(this.scene, this.camera);
-      if (!this.rotating || !this.model) {
-        this.hasAnimReq = false;
-      } else {
-        this.model.rotation.y += 0.01;
-        this.hasAnimReq = requestAnimationFrame(this.animate);
+        child.material.metalness = 0.3;
+        child.material.roughness = 0.3;
       }
-    },
-    async loadClothingStand() {
-      const gltf = await new Promise(resolve => gltfLoader.load(clothingStand.modelUrl, resolve));
-      this.stand = gltf.scene.children[0];
-      this.stand.traverse((child) => {
-        if (child instanceof Mesh) {
-          child.material.side = DoubleSide;
-          child.material.metalness = 0.3;
-          child.material.roughness = 0.3;
-        }
-      });
-      this.stand.position.y = -6;
-    },
-  },
-  mounted: async function () {
+    });
+    this.stand.position.y = -6;
+  }
+  
+  async mounted() {
     await this.loadClothingStand();
     this.setupTexture();
     this.renderer = new WebGLRenderer({
@@ -261,7 +318,7 @@ export default {
       drawCallback: () => {
         applyFilter(this.pixelCanvas, this.renderCanvas);
         if (this.mixImg) {
-          const ctx = this.renderCanvas.getContext("2d");
+          const ctx = this.renderCanvas.getContext("2d") as CanvasRenderingContext2D;
           ctx.globalAlpha = 0.75;
           ctx.drawImage(
             this.mixImg,
@@ -272,14 +329,14 @@ export default {
           );
           ctx.globalAlpha = 1;
         }
-        this.texture.needsUpdate = true;
+        (this.texture as Texture).needsUpdate = true;
         if (!this.hasAnimReq) {
           this.hasAnimReq = requestAnimationFrame(this.animate);
         }
       },
     });
 
-    const renderContext = this.renderCanvas.getContext("2d");
+    const renderContext = this.renderCanvas.getContext("2d") as CanvasRenderingContext2D;
     renderContext.fillStyle = "rgba(255,255,255,0)";
     renderContext.fillRect(0, 0, 32, 128);
 
@@ -294,16 +351,14 @@ export default {
     this.controls.update();
 
     this.scene.add(new AmbientLight(0xffffff, 0.2));
-
-    this.dirLight = new DirectionalLight(0xffffff, 0.8);
     this.scene.add(this.dirLight);
 
     this.hasAnimReq = requestAnimationFrame(this.animate);
 
     // If the type of pattern changes, change the model too
     this.drawingTool.onLoad(() => this.loadModel());
-    await this.loadModel(this.drawingTool);
-  },
+    await this.loadModel();
+  }
 };
 </script>
 
diff --git a/src/libs/Preview3D.js b/src/libs/Preview3D.js
index 6189410..bb97edf 100644
--- a/src/libs/Preview3D.js
+++ b/src/libs/Preview3D.js
@@ -22,7 +22,7 @@ import {
   TextureLoader,
   Vector3,
 } from "three";
-import { GLTFLoader } from '@three/loaders/GLTFLoader';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 
 //Global canvas and renderer
 let threeCanvas = document.createElement("canvas");

From 64eaa58c7d98167b2af4460d004ed6ca1a0cef82 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 17 Jun 2023 17:47:28 -0700
Subject: [PATCH 29/32] Update package-lock

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 8086493..20214b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
   "packages": {
     "": {
       "name": "ac-pattern-tool",
-      "version": "1.3.0",
+      "version": "1.4.0",
       "license": "WTFPL",
       "dependencies": {
         "@juggle/resize-observer": "^3.2.0",

From 0447681149b69e18279ec11310eaf5e154229c24 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sat, 17 Jun 2023 17:47:57 -0700
Subject: [PATCH 30/32] Add container configs

---
 .dockerignore | 3 +++
 Dockerfile    | 8 ++++++++
 2 files changed, 11 insertions(+)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..5570e00
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,3 @@
+build
+node_modules
+stats
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..a349f86
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,8 @@
+FROM node:16-alpine
+WORKDIR /app
+COPY . .
+ENV DEV_HOST=0.0.0.0
+ENV DEV_PORT=3000
+EXPOSE 3000
+RUN npm install
+CMD ["npm", "run", "dev"]
\ No newline at end of file

From 03213ae6f45f5a6ba1dd8ccae67e5e9c925d6f64 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sun, 18 Jun 2023 04:18:44 -0700
Subject: [PATCH 31/32] Debounced auto search browse options

---
 src/pages/Browse/Browse.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/pages/Browse/Browse.vue b/src/pages/Browse/Browse.vue
index 2c7debf..e2830d8 100644
--- a/src/pages/Browse/Browse.vue
+++ b/src/pages/Browse/Browse.vue
@@ -4,14 +4,13 @@
       <VTextField
         class="searchbar"
         v-model="nextOptions.titleFilter"
-        @keyup.enter="onSearch"
+        @input="onSearchDebounced"
         outlined
         clearable
         placeholder="Search..."
       >
         <template #prepend-inner>
-          <VIcon v-if="isOptionsChanged" :color="colors.jambalaya">mdi-cached</VIcon>
-          <VIcon v-else :color="colors.jambalaya">mdi-magnify</VIcon>
+          <VIcon color="colors.jambalaya">mdi-magnify</VIcon>
         </template>
       </VTextField>
     </div>
@@ -26,7 +25,7 @@
           :items="typeOptsList[i]"
           outlined
           hide-details
-          @keyup.enter.prevent="onSearch"
+          @input="onSearchDebounced"
           :menu-props="{
             'content-class': 'browse-tag--menu',
           }"
@@ -42,7 +41,7 @@
           :items="styleOptsList[i]"
           outlined
           hide-details
-          @keyup.enter.prevent="onSearch"
+          @input="onSearchDebounced"
           :menu-props="{
             'content-class': 'browse-tag--menu',
           }"
@@ -54,7 +53,7 @@
           <VTextField
             class="text-field"
             v-model="nextOptions.authorFilter"
-            @keyup.enter="onSearch"
+            @input="onSearchDebounced"
             outlined
             clearable
             hide-details
@@ -66,7 +65,7 @@
           <VTextField
             class="text-field"
             v-model="nextOptions.townFilter"
-            @keyup.enter="onSearch"
+            @input="onSearchDebounced"
             outlined
             clearable
             hide-details
@@ -81,7 +80,7 @@
           :items="sortingOpts"
           outlined
           hide-details
-          @keyup.enter="onSearch"
+          @input="onSearchDebounced"
           :menu-props="{
             'content-class': 'browse-tag--menu',
           }"
@@ -126,6 +125,7 @@
 
 <script lang="ts">
 import qs from "qs";
+import { debounce } from "lodash";
 import {
   Sorting,
   StyleTag,
@@ -481,6 +481,8 @@ export default class Browse extends Vue {
     this.nextOptions.titleFilter = this.nextOptions.titleFilter || "";
     this.updateRoute(this.nextOptions, 0);
   }
+  
+  public onSearchDebounced = debounce(this.onSearch, 200);
 };
 </script>
 

From dafc02835b7d3c9182195cdfffd357e87a7878b8 Mon Sep 17 00:00:00 2001
From: Viet <26016342+DamSenViet@users.noreply.github.com>
Date: Sun, 18 Jun 2023 04:24:37 -0700
Subject: [PATCH 32/32] Fix standee modal loading race condition

---
 src/components/ThreeDRender.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ThreeDRender.vue b/src/components/ThreeDRender.vue
index 236f1dd..5c8b455 100644
--- a/src/components/ThreeDRender.vue
+++ b/src/components/ThreeDRender.vue
@@ -154,8 +154,10 @@ export default class ThreeDRender extends Vue {
     this.cleanUp();
     //Get new model properties
     const modelType = typeInfoToModelType.get(this.drawingTool.typeInfo);
-    if (modelType === ModelType.Standee)
+    if (modelType === ModelType.Standee) {
+      this.loading = false;
       return;
+    }
     const modelUrlData = typeInfoToModelUrlData.get(this.drawingTool.typeInfo) as ModelUrlData;
     const modelOffset = { x: 0, y: -6, z: 0, rough: 1.5 };
     (this.controls as OrbitControls).maxZoom = 2.0;