Spaces:
Runtime error
Runtime error
fix scales
Browse files- frontend/src/lib/App.svelte +3 -2
- frontend/src/lib/Canvas.svelte +13 -16
- frontend/src/lib/Cursor.svelte +10 -3
- frontend/src/lib/Frame.svelte +14 -3
- frontend/src/routes/+page.svelte +1 -1
frontend/src/lib/App.svelte
CHANGED
@@ -111,7 +111,7 @@
|
|
111 |
</script>
|
112 |
|
113 |
<!-- Show the current user's cursor location -->
|
114 |
-
<div class="text">
|
115 |
{$myPresence?.cursor
|
116 |
? `${$myPresence.cursor.x} × ${$myPresence.cursor.y}`
|
117 |
: 'Move your cursor to broadcast its position to other people in the room.'}
|
@@ -121,7 +121,7 @@
|
|
121 |
{#if $isPrompting}
|
122 |
<PromptModal on:prompt={onPrompt} on:close={onClose} />
|
123 |
{/if}
|
124 |
-
<div class="fixed top-0 left-0 z-0 w-screen h-screen
|
125 |
<Canvas />
|
126 |
|
127 |
<main class="z-10 relative">
|
@@ -132,6 +132,7 @@
|
|
132 |
position={$imagesList.get(i).position}
|
133 |
images={$imagesList.get(i).images}
|
134 |
transform={$currZoomTransform}
|
|
|
135 |
/>
|
136 |
{/each}
|
137 |
{/if}
|
|
|
111 |
</script>
|
112 |
|
113 |
<!-- Show the current user's cursor location -->
|
114 |
+
<div class="text touch-none pointer-events-none">
|
115 |
{$myPresence?.cursor
|
116 |
? `${$myPresence.cursor.x} × ${$myPresence.cursor.y}`
|
117 |
: 'Move your cursor to broadcast its position to other people in the room.'}
|
|
|
121 |
{#if $isPrompting}
|
122 |
<PromptModal on:prompt={onPrompt} on:close={onClose} />
|
123 |
{/if}
|
124 |
+
<div class="fixed top-0 left-0 z-0 w-screen h-screen">
|
125 |
<Canvas />
|
126 |
|
127 |
<main class="z-10 relative">
|
|
|
132 |
position={$imagesList.get(i).position}
|
133 |
images={$imagesList.get(i).images}
|
134 |
transform={$currZoomTransform}
|
135 |
+
dumped={false}
|
136 |
/>
|
137 |
{/each}
|
138 |
{/if}
|
frontend/src/lib/Canvas.svelte
CHANGED
@@ -14,12 +14,6 @@
|
|
14 |
let xScale: (x: number) => number;
|
15 |
let yScale: (y: number) => number;
|
16 |
|
17 |
-
const margin = { top: 100, right: 100, bottom: 100, left: 100 };
|
18 |
-
const extent = [
|
19 |
-
[-margin.left, -margin.top],
|
20 |
-
[width + margin.right, height + margin.bottom]
|
21 |
-
] as [[number, number], [number, number]];
|
22 |
-
|
23 |
onMount(() => {
|
24 |
xScale = scaleLinear().domain([0, width]).range([0, width]);
|
25 |
yScale = scaleLinear().domain([0, height]).range([0, height]);
|
@@ -27,12 +21,14 @@
|
|
27 |
const scale = width / containerEl.clientWidth;
|
28 |
const zoomHandler = zoom()
|
29 |
.scaleExtent([1 / scale / 1.5, 1])
|
30 |
-
// .
|
31 |
// [0, 0],
|
32 |
// [width, height]
|
33 |
// ])
|
34 |
-
|
35 |
-
|
|
|
|
|
36 |
.on('zoom', zoomed);
|
37 |
|
38 |
select(canvasEl.parentElement)
|
@@ -65,16 +61,20 @@
|
|
65 |
function round(p, n) {
|
66 |
return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
|
67 |
}
|
68 |
-
const grid =
|
69 |
|
70 |
// Update cursor presence to current pointer location
|
71 |
function handlePointerMove(event: PointerEvent) {
|
72 |
event.preventDefault();
|
73 |
-
const x = Math.round(event.layerX / grid) * grid;
|
74 |
-
const y = Math.round(event.layerY / grid) * grid;
|
|
|
|
|
75 |
// const x = round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), grid);
|
76 |
// const y = round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), grid);
|
77 |
|
|
|
|
|
78 |
$myPresence = {
|
79 |
cursor: {
|
80 |
x,
|
@@ -91,10 +91,7 @@
|
|
91 |
}
|
92 |
</script>
|
93 |
|
94 |
-
<div
|
95 |
-
bind:this={containerEl}
|
96 |
-
class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden border-4 border-black z-0"
|
97 |
-
>
|
98 |
<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0" />
|
99 |
</div>
|
100 |
|
|
|
14 |
let xScale: (x: number) => number;
|
15 |
let yScale: (y: number) => number;
|
16 |
|
|
|
|
|
|
|
|
|
|
|
|
|
17 |
onMount(() => {
|
18 |
xScale = scaleLinear().domain([0, width]).range([0, width]);
|
19 |
yScale = scaleLinear().domain([0, height]).range([0, height]);
|
|
|
21 |
const scale = width / containerEl.clientWidth;
|
22 |
const zoomHandler = zoom()
|
23 |
.scaleExtent([1 / scale / 1.5, 1])
|
24 |
+
// .extent([
|
25 |
// [0, 0],
|
26 |
// [width, height]
|
27 |
// ])
|
28 |
+
.translateExtent([
|
29 |
+
[-width * 0.1, -height * 0.1],
|
30 |
+
[width * 1.1, height * 1.1]
|
31 |
+
])
|
32 |
.on('zoom', zoomed);
|
33 |
|
34 |
select(canvasEl.parentElement)
|
|
|
61 |
function round(p, n) {
|
62 |
return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
|
63 |
}
|
64 |
+
const grid = 10;
|
65 |
|
66 |
// Update cursor presence to current pointer location
|
67 |
function handlePointerMove(event: PointerEvent) {
|
68 |
event.preventDefault();
|
69 |
+
const x = Math.round($currZoomTransform.invertX(event.layerX) / grid) * grid;
|
70 |
+
const y = Math.round($currZoomTransform.invertY(event.layerY) / grid) * grid;
|
71 |
+
// const x = Math.round(event.layerX / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), 100);
|
72 |
+
// const y = Math.round(event.layerY / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), 100);
|
73 |
// const x = round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), grid);
|
74 |
// const y = round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), grid);
|
75 |
|
76 |
+
console.log(x, y);
|
77 |
+
|
78 |
$myPresence = {
|
79 |
cursor: {
|
80 |
x,
|
|
|
91 |
}
|
92 |
</script>
|
93 |
|
94 |
+
<div bind:this={containerEl} class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0">
|
|
|
|
|
|
|
95 |
<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0" />
|
96 |
</div>
|
97 |
|
frontend/src/lib/Cursor.svelte
CHANGED
@@ -14,12 +14,15 @@
|
|
14 |
damping: 0.35
|
15 |
});
|
16 |
// Update spring when x and y change
|
17 |
-
$: coords.set(
|
|
|
|
|
|
|
18 |
</script>
|
19 |
|
20 |
<div
|
21 |
-
class="
|
22 |
-
style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px);`}
|
23 |
>
|
24 |
<svg
|
25 |
class="block z-0 col-span-2 row-span-2"
|
@@ -42,4 +45,8 @@
|
|
42 |
</div>
|
43 |
|
44 |
<style lang="postcss" scoped>
|
|
|
|
|
|
|
|
|
45 |
</style>
|
|
|
14 |
damping: 0.35
|
15 |
});
|
16 |
// Update spring when x and y change
|
17 |
+
$: coords.set({
|
18 |
+
x: transform.applyX(position.x),
|
19 |
+
y: transform.applyY(position.y)
|
20 |
+
});
|
21 |
</script>
|
22 |
|
23 |
<div
|
24 |
+
class="cursor"
|
25 |
+
style={`transform: translateX(${$coords.x}px) translateY(${$coords.y}px) scale(${transform.k});`}
|
26 |
>
|
27 |
<svg
|
28 |
class="block z-0 col-span-2 row-span-2"
|
|
|
45 |
</div>
|
46 |
|
47 |
<style lang="postcss" scoped>
|
48 |
+
.cursor {
|
49 |
+
@apply absolute top-0 left-0 grid grid-cols-3 touch-none pointer-events-none;
|
50 |
+
transform-origin: 0 0;
|
51 |
+
}
|
52 |
</style>
|
frontend/src/lib/Frame.svelte
CHANGED
@@ -8,6 +8,7 @@
|
|
8 |
export let color = '';
|
9 |
export let position = { x: 0, y: 0 };
|
10 |
export let images: string[];
|
|
|
11 |
|
12 |
// Spring animation for cursor
|
13 |
const coords = spring(position, {
|
@@ -15,12 +16,22 @@
|
|
15 |
damping: 0.35
|
16 |
});
|
17 |
// Update spring when x and y change
|
18 |
-
$: coords.set(
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
19 |
</script>
|
20 |
|
21 |
<div
|
22 |
class="frame z-0 flex relative"
|
23 |
-
style={`transform: translateX(${
|
24 |
background-image: linear-gradient(${color}, rgba(255,255,255,0));
|
25 |
color: ${color};
|
26 |
`}
|
@@ -38,7 +49,7 @@
|
|
38 |
|
39 |
<style lang="postcss" scoped>
|
40 |
.frame {
|
41 |
-
@apply pointer-events-none touch-none absolute top-0 left-0 border-2 border-sky-500 w-[512px] h-[512px];
|
42 |
transform-origin: 0 0;
|
43 |
}
|
44 |
</style>
|
|
|
8 |
export let color = '';
|
9 |
export let position = { x: 0, y: 0 };
|
10 |
export let images: string[];
|
11 |
+
export let dumped: boolean = true;
|
12 |
|
13 |
// Spring animation for cursor
|
14 |
const coords = spring(position, {
|
|
|
16 |
damping: 0.35
|
17 |
});
|
18 |
// Update spring when x and y change
|
19 |
+
$: coords.set({
|
20 |
+
x: transform.applyX(position.x),
|
21 |
+
y: transform.applyY(position.y)
|
22 |
+
});
|
23 |
+
|
24 |
+
$: ncoord = dumped
|
25 |
+
? $coords
|
26 |
+
: {
|
27 |
+
x: transform.applyX(position.x),
|
28 |
+
y: transform.applyY(position.y)
|
29 |
+
};
|
30 |
</script>
|
31 |
|
32 |
<div
|
33 |
class="frame z-0 flex relative"
|
34 |
+
style={`transform: translateX(${ncoord.x}px) translateY(${ncoord.y}px) scale(${transform.k});
|
35 |
background-image: linear-gradient(${color}, rgba(255,255,255,0));
|
36 |
color: ${color};
|
37 |
`}
|
|
|
49 |
|
50 |
<style lang="postcss" scoped>
|
51 |
.frame {
|
52 |
+
@apply pointer-events-none touch-none absolute top-0 left-0 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
|
53 |
transform-origin: 0 0;
|
54 |
}
|
55 |
</style>
|
frontend/src/routes/+page.svelte
CHANGED
@@ -42,7 +42,7 @@
|
|
42 |
});
|
43 |
</script>
|
44 |
|
45 |
-
<div class="max-w-screen-md mx-auto p-5 relative
|
46 |
<h1 class="text-lg md:text-3xl font-bold leading-normal">
|
47 |
Stable Diffussion Outpainting Multiplayer
|
48 |
</h1>
|
|
|
42 |
});
|
43 |
</script>
|
44 |
|
45 |
+
<div class="max-w-screen-md mx-auto p-5 relative pointer-events-none touch-none z-10">
|
46 |
<h1 class="text-lg md:text-3xl font-bold leading-normal">
|
47 |
Stable Diffussion Outpainting Multiplayer
|
48 |
</h1>
|