Spaces:
Runtime error
Runtime error
dynamic canvas size, make mobile back to work
Browse files
frontend/src/lib/PaintCanvas.svelte
CHANGED
@@ -4,17 +4,17 @@
|
|
4 |
import { select } from 'd3-selection';
|
5 |
import { onMount } from 'svelte';
|
6 |
import { PUBLIC_UPLOADS } from '$env/static/public';
|
7 |
-
import { currZoomTransform, canvasEl, isRenderingCanvas } from '$lib/store';
|
8 |
|
9 |
import { useMyPresence, useObject } from '$lib/liveblocks';
|
10 |
import type { PromptImgObject } from '$lib/types';
|
11 |
-
import {
|
12 |
|
13 |
const myPresence = useMyPresence({ addToHistory: true });
|
14 |
const promptImgStorage = useObject('promptImgStorage');
|
15 |
|
16 |
-
const height =
|
17 |
-
const width =
|
18 |
|
19 |
let containerEl: HTMLDivElement;
|
20 |
let canvasCtx: CanvasRenderingContext2D;
|
|
|
4 |
import { select } from 'd3-selection';
|
5 |
import { onMount } from 'svelte';
|
6 |
import { PUBLIC_UPLOADS } from '$env/static/public';
|
7 |
+
import { currZoomTransform, canvasEl, isRenderingCanvas, canvasSize} from '$lib/store';
|
8 |
|
9 |
import { useMyPresence, useObject } from '$lib/liveblocks';
|
10 |
import type { PromptImgObject } from '$lib/types';
|
11 |
+
import { FRAME_SIZE, GRID_SIZE } from '$lib/constants';
|
12 |
|
13 |
const myPresence = useMyPresence({ addToHistory: true });
|
14 |
const promptImgStorage = useObject('promptImgStorage');
|
15 |
|
16 |
+
const height = $canvasSize.height;
|
17 |
+
const width = $canvasSize.width;
|
18 |
|
19 |
let containerEl: HTMLDivElement;
|
20 |
let canvasCtx: CanvasRenderingContext2D;
|
frontend/src/lib/PaintFrame.svelte
CHANGED
@@ -1,6 +1,6 @@
|
|
1 |
<script lang="ts">
|
2 |
import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
|
3 |
-
import {
|
4 |
|
5 |
import { drag } from 'd3-drag';
|
6 |
import { select } from 'd3-selection';
|
@@ -10,7 +10,7 @@
|
|
10 |
import { onMount } from 'svelte';
|
11 |
|
12 |
import { useMyPresence } from '$lib/liveblocks';
|
13 |
-
import { canvasEl, maskEl, loadingState, isRenderingCanvas } from '$lib/store';
|
14 |
import { createEventDispatcher } from 'svelte';
|
15 |
|
16 |
import { Status } from './types';
|
@@ -23,8 +23,8 @@
|
|
23 |
let maskCtx: CanvasRenderingContext2D;
|
24 |
|
25 |
let position = {
|
26 |
-
x:
|
27 |
-
y:
|
28 |
};
|
29 |
|
30 |
let frameElement: HTMLDivElement;
|
@@ -159,8 +159,8 @@
|
|
159 |
function dragged(event: Event) {
|
160 |
if (isLoading) return;
|
161 |
|
162 |
-
const x = round(transform.invertX(event.x - offsetX));
|
163 |
-
const y = round(transform.invertY(event.y - offsetY));
|
164 |
position = {
|
165 |
x,
|
166 |
y
|
@@ -179,8 +179,8 @@
|
|
179 |
|
180 |
isDragging = false;
|
181 |
|
182 |
-
const x = round(transform.invertX(event.x - offsetX));
|
183 |
-
const y = round(transform.invertY(event.y - offsetY));
|
184 |
cropCanvas({ x, y });
|
185 |
|
186 |
myPresence.update({
|
|
|
1 |
<script lang="ts">
|
2 |
import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
|
3 |
+
import { FRAME_SIZE } from '$lib/constants';
|
4 |
|
5 |
import { drag } from 'd3-drag';
|
6 |
import { select } from 'd3-selection';
|
|
|
10 |
import { onMount } from 'svelte';
|
11 |
|
12 |
import { useMyPresence } from '$lib/liveblocks';
|
13 |
+
import { canvasEl, maskEl, loadingState, isRenderingCanvas, canvasSize } from '$lib/store';
|
14 |
import { createEventDispatcher } from 'svelte';
|
15 |
|
16 |
import { Status } from './types';
|
|
|
23 |
let maskCtx: CanvasRenderingContext2D;
|
24 |
|
25 |
let position = {
|
26 |
+
x: $canvasSize.width / 2 - FRAME_SIZE / 2,
|
27 |
+
y: $canvasSize.height / 2 - FRAME_SIZE / 2
|
28 |
};
|
29 |
|
30 |
let frameElement: HTMLDivElement;
|
|
|
159 |
function dragged(event: Event) {
|
160 |
if (isLoading) return;
|
161 |
|
162 |
+
const x = round(transform.invertX(event.x - offsetX), $canvasSize);
|
163 |
+
const y = round(transform.invertY(event.y - offsetY), $canvasSize);
|
164 |
position = {
|
165 |
x,
|
166 |
y
|
|
|
179 |
|
180 |
isDragging = false;
|
181 |
|
182 |
+
const x = round(transform.invertX(event.x - offsetX), $canvasSize);
|
183 |
+
const y = round(transform.invertY(event.y - offsetY), $canvasSize);
|
184 |
cropCanvas({ x, y });
|
185 |
|
186 |
myPresence.update({
|
frontend/src/lib/constants.ts
CHANGED
@@ -16,10 +16,6 @@ export const EMOJIS = ['π', 'π', 'π', 'π', 'π¦', 'π', 'π', '
|
|
16 |
|
17 |
export const MAX_CAPACITY = 50;
|
18 |
|
19 |
-
export const CANVAS_SIZE = {
|
20 |
-
width: 512 * 16,
|
21 |
-
height: 512 * 16,
|
22 |
-
}
|
23 |
export const GRID_SIZE = 32
|
24 |
|
25 |
export const FRAME_SIZE = 512
|
|
|
16 |
|
17 |
export const MAX_CAPACITY = 50;
|
18 |
|
|
|
|
|
|
|
|
|
19 |
export const GRID_SIZE = 32
|
20 |
|
21 |
export const FRAME_SIZE = 512
|
frontend/src/lib/store.ts
CHANGED
@@ -8,4 +8,8 @@ export const maskEl = writable<HTMLCanvasElement>();
|
|
8 |
export const selectedRoomID = writable<string | null>();
|
9 |
export const toggleAbout = writable<boolean>(false);
|
10 |
export const isRenderingCanvas = writable<boolean>(true);
|
11 |
-
export const showModal = writable<boolean>(false);
|
|
|
|
|
|
|
|
|
|
8 |
export const selectedRoomID = writable<string | null>();
|
9 |
export const toggleAbout = writable<boolean>(false);
|
10 |
export const isRenderingCanvas = writable<boolean>(true);
|
11 |
+
export const showModal = writable<boolean>(false);
|
12 |
+
export const canvasSize = writable<{
|
13 |
+
width: number;
|
14 |
+
height: number;
|
15 |
+
}>({ width: 512 * 16, height: 512 * 16 });
|
frontend/src/lib/utils.ts
CHANGED
@@ -1,6 +1,5 @@
|
|
1 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
2 |
-
import {
|
3 |
-
|
4 |
export function base64ToBlob(base64image: string): Promise<Blob> {
|
5 |
return new Promise((resolve) => {
|
6 |
const img = new Image();
|
@@ -50,10 +49,13 @@ export async function uploadImage(imagBlob: Blob, params: {
|
|
50 |
|
51 |
return res;
|
52 |
}
|
53 |
-
|
54 |
-
|
|
|
|
|
|
|
55 |
const value = pos % GRID_SIZE < GRID_SIZE / 2 ? pos - (pos % GRID_SIZE) : pos + GRID_SIZE - (pos % GRID_SIZE);
|
56 |
-
return Math.max(0, Math.min(Math.round(value),
|
57 |
}
|
58 |
|
59 |
|
|
|
1 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
2 |
+
import { GRID_SIZE, FRAME_SIZE } from '$lib/constants';
|
|
|
3 |
export function base64ToBlob(base64image: string): Promise<Blob> {
|
4 |
return new Promise((resolve) => {
|
5 |
const img = new Image();
|
|
|
49 |
|
50 |
return res;
|
51 |
}
|
52 |
+
export function round(pos: number, canvasSize: {
|
53 |
+
width: number;
|
54 |
+
height: number;
|
55 |
+
}) {
|
56 |
+
const max = canvasSize.width - FRAME_SIZE
|
57 |
const value = pos % GRID_SIZE < GRID_SIZE / 2 ? pos - (pos % GRID_SIZE) : pos + GRID_SIZE - (pos % GRID_SIZE);
|
58 |
+
return Math.max(0, Math.min(Math.round(value), max))
|
59 |
}
|
60 |
|
61 |
|
frontend/src/routes/+page.svelte
CHANGED
@@ -7,9 +7,9 @@
|
|
7 |
import App from '$lib/App.svelte';
|
8 |
import About from '$lib/About.svelte';
|
9 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
10 |
-
import { selectedRoomID, toggleAbout } from '$lib/store';
|
11 |
import type { RoomResponse } from '$lib/types';
|
12 |
-
import { MAX_CAPACITY,
|
13 |
import { Status } from '$lib/types';
|
14 |
|
15 |
let loading = true;
|
@@ -19,6 +19,15 @@
|
|
19 |
|
20 |
onMount(() => {
|
21 |
// document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
22 |
client = createClient({
|
23 |
authEndpoint: PUBLIC_API_BASE + '/auth'
|
24 |
});
|
@@ -58,8 +67,8 @@
|
|
58 |
const initialPresence = {
|
59 |
cursor: null,
|
60 |
frame: {
|
61 |
-
x:
|
62 |
-
y:
|
63 |
},
|
64 |
status: Status.dragging,
|
65 |
currentPrompt: ''
|
|
|
7 |
import App from '$lib/App.svelte';
|
8 |
import About from '$lib/About.svelte';
|
9 |
import { PUBLIC_API_BASE } from '$env/static/public';
|
10 |
+
import { selectedRoomID, toggleAbout, canvasSize } from '$lib/store';
|
11 |
import type { RoomResponse } from '$lib/types';
|
12 |
+
import { MAX_CAPACITY, FRAME_SIZE } from '$lib/constants';
|
13 |
import { Status } from '$lib/types';
|
14 |
|
15 |
let loading = true;
|
|
|
19 |
|
20 |
onMount(() => {
|
21 |
// document.addEventListener('wheel', (e) => e.preventDefault(), { passive: false });
|
22 |
+
// detect browser is mobile
|
23 |
+
if (
|
24 |
+
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
|
25 |
+
) {
|
26 |
+
$canvasSize = {
|
27 |
+
width: 512 * 8,
|
28 |
+
height: 512 * 8
|
29 |
+
};
|
30 |
+
}
|
31 |
client = createClient({
|
32 |
authEndpoint: PUBLIC_API_BASE + '/auth'
|
33 |
});
|
|
|
67 |
const initialPresence = {
|
68 |
cursor: null,
|
69 |
frame: {
|
70 |
+
x: $canvasSize.width / 2 - FRAME_SIZE / 2,
|
71 |
+
y: $canvasSize.height / 2 - FRAME_SIZE / 2
|
72 |
},
|
73 |
status: Status.dragging,
|
74 |
currentPrompt: ''
|