better UI

frontend/src/app.d.ts

@@ -17,6 +17,10 @@ declare global {
 		transform: ZoomTransform;
 		x: number;
 		y: number;
+		subject: {
+			x: number;
+			y: number;
+		}
 		sourceEvent: PointerEvent | MouseEvent | TouchEvent
 	}
 }

frontend/src/lib/App.svelte

@@ -196,7 +196,11 @@
 	<PaintCanvas bind:canvasEl />
 
 	<main class="z-10 relative">
-		<PaintFrame transform={$currZoomTransform} interactive={!isPrompting} />
+		<PaintFrame
+			on:paintMode={onPaintMode}
+			transform={$currZoomTransform}
+			interactive={!isPrompting}
+		/>
 
 		<!-- When others connected, iterate through others and show their cursors -->
 		{#if $others}

frontend/src/lib/Buttons/DragButton.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Move from '$lib/Icons/Move.svelte';
+	export let isActive = false;
+</script>
+
+<button
+	on:click
+	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	title="Enable Dragging"
+>
+	<Move />
+</button>
+
+<style lang="postcss" scoped>
+</style>

frontend/src/lib/Buttons/MaskButton.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import Mask from '$lib/Icons/Mask.svelte';
+	export let isActive = false;
+</script>
+
+<button
+	on:click
+	class="bg-white rounded-full p-2 {isActive ? 'text-blue-700' : 'text-gray-800'}"
+	title="Enable Dragging"
+>
+	<Mask />
+</button>
+
+<style lang="postcss" scoped>
+</style>

frontend/src/lib/Buttons/PPButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+</script>
+
+<button on:click class="button-paint bg-violet-100 text-violet-900" title="New Paint Frame">
+	<span
+		class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
+	>
+		+
+	</span>
+	<span>Prompt + Paint</span>
+</button>
+
+<style lang="postcss" scoped>
+	/* .button {
+		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
+	} */
+	.button-paint {
+		@apply font-mono flex justify-center items-center disabled:opacity-50  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
+	}
+</style>

frontend/src/lib/Frame.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import LoadingIcon from '$lib/LoadingIcon.svelte';
+	import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
 
 	import type { ZoomTransform } from 'd3-zoom';
 
@@ -18,7 +18,7 @@
 </script>
 
 <div
-	class="frame z-0 relative grid grid-cols-3 grid-rows-3
+	class="frame
 	{!interactive ? 'pointer-events-none touch-none' : ''}
 	{isDragging ? 'cursor-grabbing' : 'cursor-grab'}"
 	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k}); border-color: ${color};`}
@@ -36,13 +36,18 @@
 	{/if}
 
 	<h2 class="text-lg">Click to paint</h2>
-
 	<div class="absolute bottom-0 font-bold text-lg">{prompt}</div>
+	<div class="absolute top-full">
+		<slot name="bottom" />
+	</div>
+	<div class="absolute left-full bottom-0">
+		<slot name="right" />
+	</div>
 </div>
 
 <style lang="postcss" scoped>
 	.frame {
-		@apply absolute top-0 left-0 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
+		@apply absolute top-0 left-0  grid grid-cols-3 grid-rows-3 border-2 border-spacing-3 border-sky-500 w-[512px] h-[512px];
 		transform-origin: 0 0;
 	}
 	.small-frame {

frontend/src/lib/Icons/Mask.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let classList = '';
+</script>
+
+<svg
+	class={classList}
+	width="20"
+	height="20"
+	viewBox="0 0 11 11"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M5.5 10C7.98528 10 10 7.98528 10 5.5C10 3.01472 7.98528 1 5.5 1C3.01472 1 1 3.01472 1 5.5C1 7.98528 3.01472 10 5.5 10Z"
+		stroke="currentColor"
+		stroke-width="0.899979"
+	/>
+	<path
+		d="M7.07441 1.28369C5.36599 1.92179 4.14941 3.56879 4.14941 5.50019C4.14941 7.43137 5.36599 9.07837 7.07441 9.71669M8.42441 2.12519L4.14941 5.05019M9.32441 3.25019L4.37441 6.62519M9.77441 4.60019L5.04941 7.97519M9.77441 6.40019L5.94941 9.10019"
+		stroke="currentColor"
+		stroke-width="0.899979"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

frontend/src/lib/Icons/Move.svelte

@@ -4,15 +4,15 @@
 
 <svg
 	class={classList}
-	width="11"
-	height="11"
+	width="20"
+	height="20"
 	viewBox="0 0 11 11"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
 >
 	<path
 		d="M2.4 4.26667L1 5.66667L2.4 7.06667M4.26667 2.4L5.66667 1L7.06667 2.4M7.06667 8.93333L5.66667 10.3333L4.26667 8.93333M8.93333 4.26667L10.3333 5.66667L8.93333 7.06667M1 5.66667H10.3333M5.66667 1V10.3333"
-		stroke="#397DFF"
+		stroke="currentColor"
 		stroke-width="0.933333"
 		stroke-linecap="round"
 		stroke-linejoin="round"

frontend/src/lib/Menu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, createEventDispatcher } from 'svelte';
-
+	import PPButton from '$lib/Buttons/PPButton.svelte';
 	const dispatch = createEventDispatcher();
 
 	const onKeyup = (e: KeyboardEvent) => {
@@ -31,24 +31,5 @@
 	<!-- <button class="button" title="Move" on:click={() => dispatch('paintMode', { mode: 'move' })}>
 		Move
 	</button> -->
-	<button
-		class="button-paint bg-violet-100 text-violet-900"
-		title="New Paint Frame"
-		on:click={() => dispatch('paintMode', { mode: 'paint' })}
-	>
-		<span
-			class="rounded-sm h-6 w-6 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
-			>+</span
-		>
-		<span>Paint</span>
-	</button>
+	<PPButton on:click={() => dispatch('paintMode', { mode: 'paint' })} />
 </div>
-
-<style lang="postcss" scoped>
-	/* .button {
-		@apply disabled:opacity-50 dark:bg-white dark:text-black bg-black text-white rounded-2xl text-xs shadow-sm focus:outline-none focus:border-gray-400;
-	} */
-	.button-paint {
-		@apply flex justify-center items-center disabled:opacity-50  dark:bg-white dark:text-black rounded-2xl px-3 py-1 shadow-sm focus:outline-none focus:border-gray-400;
-	}
-</style>

frontend/src/lib/PaintFrame.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
 	import Frame from '$lib/Frame.svelte';
-	import Move from '$lib/Icons/Move.svelte';
+	import PPButton from '$lib/Buttons/PPButton.svelte';
+	import DragButton from '$lib/Buttons/DragButton.svelte';
+	import MaskButton from '$lib/Buttons/MaskButton.svelte';
+
 	import { drag } from 'd3-drag';
 	import { select } from 'd3-selection';
 	import { round } from '$lib/utils';
 
 	import type { ZoomTransform } from 'd3-zoom';
-	import { onMount } from 'svelte';
+	import { onMount, createEventDispatcher } from 'svelte';
 
 	import { useMyPresence } from '$lib/liveblocks';
 	import { loadingState } from '$lib/store';
 	const myPresence = useMyPresence();
 
+	const dispatch = createEventDispatcher();
+
 	export let transform: ZoomTransform;
 	export let color = 'black';
 	export let interactive = false;
@@ -100,5 +105,24 @@
 		{isLoading}
 		{isDragging}
 		{interactive}
-	/>
+	>
+		<div slot="bottom">
+			{#if !isDragging}
+				<div class="py-2">
+					<PPButton on:click={() => dispatch('paintMode', { mode: 'paint' })} />
+				</div>
+			{/if}
+		</div>
+		<div slot="right">
+			{#if !isDragging}
+				<div class="px-2 flex flex-col gap-2">
+					<DragButton />
+					<MaskButton />
+				</div>
+			{/if}
+		</div>
+	</Frame>
 </div>
+
+<style lang="postcss" scoped>
+</style>