Spaces:
Running
Running
Better mobile UX
Browse files- src/routes/+page.svelte +10 -4
src/routes/+page.svelte
CHANGED
@@ -1,5 +1,5 @@
|
|
1 |
<script lang="ts">
|
2 |
-
import { onMount } from 'svelte';
|
3 |
|
4 |
let txt = '';
|
5 |
let isLoading = false;
|
@@ -13,7 +13,8 @@
|
|
13 |
|
14 |
const animImageDuration = 500 as const;
|
15 |
const animNoiseDuration = 3000 as const;
|
16 |
-
|
|
|
17 |
|
18 |
async function drawNoise() {
|
19 |
if (!ctx) {
|
@@ -163,7 +164,12 @@
|
|
163 |
}
|
164 |
}
|
165 |
|
166 |
-
onMount(() => {
|
|
|
|
|
|
|
|
|
|
|
167 |
const drawingBoard = new window.DrawingBoard.Board('board-container', {
|
168 |
size: 10,
|
169 |
controls: [
|
@@ -192,7 +198,7 @@
|
|
192 |
|
193 |
<div class="flex flex-wrap gap-x-8 justify-center mt-8">
|
194 |
<div class={isLoading ? 'pointer-events-none' : ''}>
|
195 |
-
<div id="board-container"
|
196 |
<div class="flex gap-x-2 mt-4 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
|
197 |
<input type="text" class="border-2 " placeholder="Add prompt" bind:value={txt} />
|
198 |
<button
|
|
|
1 |
<script lang="ts">
|
2 |
+
import { onMount, tick } from 'svelte';
|
3 |
|
4 |
let txt = '';
|
5 |
let isLoading = false;
|
|
|
13 |
|
14 |
const animImageDuration = 500 as const;
|
15 |
const animNoiseDuration = 3000 as const;
|
16 |
+
let canvasSize = 512;
|
17 |
+
let containerEl: HTMLDivElement;
|
18 |
|
19 |
async function drawNoise() {
|
20 |
if (!ctx) {
|
|
|
164 |
}
|
165 |
}
|
166 |
|
167 |
+
onMount(async () => {
|
168 |
+
const {innerWidth: windowWidth} = window;
|
169 |
+
canvasSize = Math.min(canvasSize, Math.floor(windowWidth*0.75));
|
170 |
+
containerEl.style.width = `${canvasSize}px`;
|
171 |
+
containerEl.style.height = `${canvasSize}px`;
|
172 |
+
await tick();
|
173 |
const drawingBoard = new window.DrawingBoard.Board('board-container', {
|
174 |
size: 10,
|
175 |
controls: [
|
|
|
198 |
|
199 |
<div class="flex flex-wrap gap-x-8 justify-center mt-8">
|
200 |
<div class={isLoading ? 'pointer-events-none' : ''}>
|
201 |
+
<div id="board-container" bind:this={containerEl} />
|
202 |
<div class="flex gap-x-2 mt-4 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
|
203 |
<input type="text" class="border-2 " placeholder="Add prompt" bind:value={txt} />
|
204 |
<button
|