use pinia for most inputs

eslint.config.mjs

@@ -0,0 +1,46 @@
+import pluginVitest from '@vitest/eslint-plugin'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+import pluginPlaywright from 'eslint-plugin-playwright'
+import pluginVue from 'eslint-plugin-vue'
+
+export default [
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}']
+  },
+
+  {
+    name: 'app/files-to-ignore',
+    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**']
+  },
+
+  ...pluginVue.configs['flat/essential'],
+  ...vueTsEslintConfig(),
+
+  {
+    ...pluginVitest.configs.recommended,
+    files: ['src/**/__tests__/*']
+  },
+
+  {
+    ...pluginPlaywright.configs['flat/recommended'],
+    files: ['e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'],
+    rules: {
+      ...pluginPlaywright.configs['flat/recommended'].rules
+    }
+  },
+  skipFormatting,
+  {
+    rules: {
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        {
+          allowShortCircuit: true,
+          allowTernary: true
+        }
+      ],
+      'vue/multi-word-component-names': 'off'
+    }
+  }
+]

package.json

@@ -24,7 +24,7 @@
     "test:e2e": "playwright test",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint": "eslint . --fix",
     "format": "prettier --write src/"
   },
   "dependencies": {
@@ -36,18 +36,21 @@
     "vuetify": "3.6.15"
   },
   "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.15.0",
     "@playwright/test": "^1.48.2",
-    "@rushstack/eslint-patch": "^1.10.4",
     "@tsconfig/node18": "^18.2.4",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^22.9.0",
     "@vitejs/plugin-vue": "^5.2.0",
+    "@vitest/eslint-plugin": "1.1.10",
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.3",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.6.0",
     "eslint": "9.15.0",
+    "eslint-plugin-playwright": "^2.0.1",
     "eslint-plugin-vue": "^9.31.0",
     "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.5",

src/components/CanvasItem.vue

@@ -7,14 +7,14 @@ const props = defineProps<{
     canvasHeight: number
   }>(),
   emit = defineEmits<{
-    canvasContext: [canvas: HTMLCanvasElement]
+    canvasElement: [canvas: HTMLCanvasElement]
     updateBackground: [file: string]
     updateScale: [scale: number]
     updatePos: [left: number, top: number]
     updateRotation: [rotation: number]
   }>(),
   canvasDragged = ref(false),
-  canvasModel: Ref<HTMLCanvasElement | null> = ref(null),
+  canvasElement: Ref<HTMLCanvasElement | null> = ref(null),
   canvasDrop = function (e: DragEvent) {
     if (e.dataTransfer!.items && e.dataTransfer!.items.length === 1) {
       //Emit('string', e.dataTransfer!.items[0])
@@ -35,19 +35,19 @@ const props = defineProps<{
   canvasMouseDown = function (e: MouseEvent) {
     if ((e.buttons & 1) === 1) {
       canvasDragged.value = true
-      canvasModel.value!.classList.add('cursor-grabbing')
-      canvasModel.value!.classList.remove('cursor-grab')
+      canvasElement.value!.classList.add('cursor-grabbing')
+      canvasElement.value!.classList.remove('cursor-grab')
     }
     // Wheel button
     if (((e.buttons >> 2) & 1) === 1) {
       emit('updateRotation', 90)
     }
   },
   windowMouseUp = function (e: MouseEvent) {
-    if (canvasModel.value !== null && (e.buttons & 1) === 0) {
+    if (canvasElement.value !== null && (e.buttons & 1) === 0) {
       canvasDragged.value = false
-      canvasModel.value!.classList.remove('cursor-grabbing')
-      canvasModel.value!.classList.add('cursor-grab')
+      canvasElement.value!.classList.remove('cursor-grabbing')
+      canvasElement.value!.classList.add('cursor-grab')
     }
   },
   windowMouseMove = function (e: MouseEvent) {
@@ -59,7 +59,7 @@ const props = defineProps<{
 onMounted(() => {
   window.addEventListener('mousemove', windowMouseMove)
   window.addEventListener('mouseup', windowMouseUp)
-  emit('canvasContext', canvasModel.value!)
+  emit('canvasElement', canvasElement.value!)
 })
 </script>
 <template>
@@ -69,7 +69,7 @@ onMounted(() => {
       @drop.prevent="canvasDrop"
       @wheel.prevent="canvasWheel"
       @mousedown.prevent="canvasMouseDown"
-      ref="canvasModel"
+      ref="canvasElement"
       id="mainCanvas"
       :width="props.canvasWidth"
       :height="props.canvasHeight"