feat(frontend): add default scale and offset for canvas

Author: RichardDorian

frontend/src/composables/store.ts

@@ -2,14 +2,16 @@ import { defineStore } from 'pinia';
 import { ref, watch } from 'vue';
 
 import type { CanvasColor } from './useApi';
+import { getDefaultOffset, getDefaultScale } from '@/utils';
 
 export const useCanvasStore = defineStore(
   'canvas',
   () => {
-    const scale = ref(1);
+    const scale = ref(getDefaultScale(1000));
 
-    const offsetX = ref(0);
-    const offsetY = ref(0);
+    const defaultOffset = getDefaultOffset(1000 * scale.value, 1000 * scale.value);
+    const offsetX = ref(defaultOffset.x);
+    const offsetY = ref(defaultOffset.y);
 
     const width = ref(0);
     const height = ref(0);

frontend/src/utils/defaultCanvasPosition.ts

@@ -0,0 +1,16 @@
+/**
+ * Calculates the scale you need to apply to the canvas
+ * so the canvas takes 90% of the height of the window.
+ * @param height Height of the canvas in pixels
+ * @returns The scale value
+ */
+export function getDefaultScale(height: number): number {
+  return (0.9 * globalThis.innerHeight) / height;
+}
+
+export function getDefaultOffset(width: number, height: number): { x: number; y: number } {
+  const x = (globalThis.innerWidth - width) / 2;
+  const y = (globalThis.innerHeight - height) / 2;
+
+  return { x, y };
+}

frontend/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './api';
 export * from './Color';
 export * from './logger';
+export * from './defaultCanvasPosition';