dynamic canvas size, make mobile back to work

frontend/src/lib/PaintCanvas.svelte

@@ -4,17 +4,17 @@
 	import { select } from 'd3-selection';
 	import { onMount } from 'svelte';
 	import { PUBLIC_UPLOADS } from '$env/static/public';
-	import { currZoomTransform, canvasEl, isRenderingCanvas } from '$lib/store';
+	import { currZoomTransform, canvasEl, isRenderingCanvas, canvasSize} from '$lib/store';
 
 	import { useMyPresence, useObject } from '$lib/liveblocks';
 	import type { PromptImgObject } from '$lib/types';
-	import { CANVAS_SIZE, FRAME_SIZE, GRID_SIZE } from '$lib/constants';
+	import { FRAME_SIZE, GRID_SIZE } from '$lib/constants';
 
 	const myPresence = useMyPresence({ addToHistory: true });
 	const promptImgStorage = useObject('promptImgStorage');
 
-	const height = CANVAS_SIZE.height;
-	const width = CANVAS_SIZE.width;
+	const height = $canvasSize.height;
+	const width = $canvasSize.width;
 
 	let containerEl: HTMLDivElement;
 	let canvasCtx: CanvasRenderingContext2D;

frontend/src/lib/PaintFrame.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
-	import { CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
+	import { FRAME_SIZE } from '$lib/constants';
 
 	import { drag } from 'd3-drag';
 	import { select } from 'd3-selection';
@@ -10,7 +10,7 @@
 	import { onMount } from 'svelte';
 
 	import { useMyPresence } from '$lib/liveblocks';
-	import { canvasEl, maskEl, loadingState, isRenderingCanvas } from '$lib/store';
+	import { canvasEl, maskEl, loadingState, isRenderingCanvas, canvasSize } from '$lib/store';
 	import { createEventDispatcher } from 'svelte';
 
 	import { Status } from './types';
@@ -23,8 +23,8 @@
 	let maskCtx: CanvasRenderingContext2D;
 
 	let position = {
-		x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
-		y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
+		x: $canvasSize.width / 2 - FRAME_SIZE / 2,
+		y: $canvasSize.height / 2 - FRAME_SIZE / 2
 	};
 
 	let frameElement: HTMLDivElement;
@@ -159,8 +159,8 @@
 		function dragged(event: Event) {
 			if (isLoading) return;
 
-			const x = round(transform.invertX(event.x - offsetX));
-			const y = round(transform.invertY(event.y - offsetY));
+			const x = round(transform.invertX(event.x - offsetX), $canvasSize);
+			const y = round(transform.invertY(event.y - offsetY), $canvasSize);
 			position = {
 				x,
 				y
@@ -179,8 +179,8 @@
 
 			isDragging = false;
 
-			const x = round(transform.invertX(event.x - offsetX));
-			const y = round(transform.invertY(event.y - offsetY));
+			const x = round(transform.invertX(event.x - offsetX), $canvasSize);
+			const y = round(transform.invertY(event.y - offsetY), $canvasSize);
 			cropCanvas({ x, y });
 
 			myPresence.update({

frontend/src/lib/constants.ts

@@ -16,10 +16,6 @@ export const EMOJIS = ['🐝', '🐌', '🐞', '🐜', '🦋', '🐛', '🐝', '
 
 export const MAX_CAPACITY = 50;
 
-export const CANVAS_SIZE = {
-	width: 512 * 16,
-	height: 512 * 16,
-}
 export const GRID_SIZE = 32
 
 export const FRAME_SIZE = 512

frontend/src/lib/store.ts

@@ -8,4 +8,8 @@ export const maskEl = writable<HTMLCanvasElement>();
 export const selectedRoomID = writable<string | null>();
 export const toggleAbout = writable<boolean>(false);
 export const isRenderingCanvas = writable<boolean>(true);
-export const showModal = writable<boolean>(false);
+export const showModal = writable<boolean>(false);
+export const canvasSize = writable<{
+    width: number;
+    height: number;
+}>({ width: 512 * 16, height: 512 * 16 });

frontend/src/lib/utils.ts

@@ -1,6 +1,5 @@
 import { PUBLIC_API_BASE } from '$env/static/public';
-import { CANVAS_SIZE, GRID_SIZE, FRAME_SIZE } from '$lib/constants';
-
+import { GRID_SIZE, FRAME_SIZE } from '$lib/constants';
 export function base64ToBlob(base64image: string): Promise<Blob> {
 	return new Promise((resolve) => {
 		const img = new Image();
@@ -50,10 +49,13 @@ export async function uploadImage(imagBlob: Blob, params: {
 
 	return res;
 }
-const MAX = CANVAS_SIZE.width - FRAME_SIZE
-export function round(pos: number) {
+export function round(pos: number, canvasSize: {
+	width: number;
+	height: number;
+}) {
+	const max = canvasSize.width - FRAME_SIZE
 	const value = pos % GRID_SIZE < GRID_SIZE / 2 ? pos - (pos % GRID_SIZE) : pos + GRID_SIZE - (pos % GRID_SIZE);
-	return Math.max(0, Math.min(Math.round(value), MAX))
+	return Math.max(0, Math.min(Math.round(value), max))
 }
 
 

frontend/src/routes/+page.svelte

@@ -7,9 +7,9 @@
 	import App from '$lib/App.svelte';
 	import About from '$lib/About.svelte';
 	import { PUBLIC_API_BASE } from '$env/static/public';
-	import { selectedRoomID, toggleAbout } from '$lib/store';
+	import { selectedRoomID, toggleAbout, canvasSize } from '$lib/store';
 	import type { RoomResponse } from '$lib/types';
-	import { MAX_CAPACITY, CANVAS_SIZE, FRAME_SIZE } from '$lib/constants';
+	import { MAX_CAPACITY, FRAME_SIZE } from '$lib/constants';
 	import { Status } from '$lib/types';
 
 	let loading = true;
@@ -19,6 +19,15 @@
 
 	onMount(() => {
 		// document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
+		// detect browser is mobile
+		if (
+			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+		) {
+			$canvasSize = {
+				width: 512 * 8,
+				height: 512 * 8
+			};
+		}
 		client = createClient({
 			authEndpoint: PUBLIC_API_BASE + '/auth'
 		});
@@ -58,8 +67,8 @@
 	const initialPresence = {
 		cursor: null,
 		frame: {
-			x: CANVAS_SIZE.width / 2 - FRAME_SIZE / 2,
-			y: CANVAS_SIZE.height / 2 - FRAME_SIZE / 2
+			x: $canvasSize.width / 2 - FRAME_SIZE / 2,
+			y: $canvasSize.height / 2 - FRAME_SIZE / 2
 		},
 		status: Status.dragging,
 		currentPrompt: ''