drag frame

frontend/package.json

@@ -17,6 +17,7 @@
 		"@tailwindcss/forms": "^0.5.3",
 		"@tailwindcss/line-clamp": "^0.4.2",
 		"@types/cookie": "^0.5.1",
+		"@types/d3-drag": "^3.0.1",
 		"@types/d3-selection": "^3.0.3",
 		"@types/d3-zoom": "^3.0.1",
 		"@typescript-eslint/eslint-plugin": "^5.38.0",
@@ -41,6 +42,7 @@
 	"dependencies": {
 		"@fontsource/fira-mono": "^4.5.0",
 		"@liveblocks/client": "^0.18.2",
+		"d3-drag": "^3.0.0",
 		"d3-selection": "^3.0.0",
 		"d3-zoom": "^3.0.0",
 		"nanoid": "^4.0.0"

frontend/src/lib/App.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import Cursor from '$lib/Cursor.svelte';
 	import Frame from '$lib/Frame.svelte';
+	import PaintFrame from '$lib/PaintFrame.svelte';
 	import Canvas from '$lib/Canvas.svelte';
 	import Menu from '$lib/Menu.svelte';
 	import PromptModal from '$lib/PromptModal.svelte';
-	import type { Room } from '@liveblocks/client';
 	import { COLORS, EMOJIS } from '$lib/constants';
 	import { PUBLIC_WS_INPAINTING } from '$env/static/public';
-	import { onMount } from 'svelte';
-	import type { PromptImgObject, PromptImgKey } from '$lib/types';
+	import type { PromptImgObject, PromptImgKey, Presence } from '$lib/types';
 	import {
 		isLoading,
 		loadingState,
@@ -33,15 +32,15 @@
 	const others = useOthers();
 
 	// Set a default value for presence
-	myPresence.update({
-		name: '',
+	const initialPresence: Presence = {
 		cursor: null,
 		isPrompting: false,
+		isLoading: false,
+		isMoving: true,
 		currentPrompt: ''
-	});
-	$: {
-		console.log($others)
-	}
+	};
+	myPresence.update(initialPresence);
+
 	function getKey({ position }: PromptImgObject): PromptImgKey {
 		return `${position.x}_${position.y}`;
 	}
@@ -60,6 +59,9 @@
 
 	let canvasEl: HTMLCanvasElement;
 
+	function onPaintMode(e: CustomEvent) {
+		const mode = e.detail.mode;
+	}
 	async function onClose(e: CustomEvent) {
 		$isPrompting = false;
 	}
@@ -187,9 +189,11 @@
 	<PromptModal on:prompt={onPrompt} on:close={onClose} />
 {/if}
 <div class="fixed top-0 left-0 z-0 w-screen h-screen">
-	<Canvas bind:value={canvasEl} />
+	<Canvas bind:value={canvasEl}  />
 
 	<main class="z-10 relative">
+		<PaintFrame transform={$currZoomTransform} />
+
 		{#if promptImgList && $showFrames}
 			{#each promptImgList as promptImg, i}
 				<Frame
@@ -204,13 +208,12 @@
 			<Frame color={COLORS[0]} position={$clickedPosition} transform={$currZoomTransform} />
 		{/if} -->
 		{#if $myPresence?.cursor}
-			<!-- <Frame color={COLORS[0]} position={$myPresence.cursor} transform={$currZoomTransform} /> -->
+			<!-- <Frame color={COLORS[0]} position={$myPresence.cursor} transform={$currZoomTransform} />
 			<Cursor
-				emoji={EMOJIS[0]}
 				color={COLORS[0]}
 				position={$myPresence.cursor}
 				transform={$currZoomTransform}
-			/>
+			/> -->
 		{/if}
 
 		<!-- When others connected, iterate through others and show their cursors -->
@@ -238,7 +241,7 @@
 </div>
 
 <div class="fixed bottom-0 left-0 right-0 z-10 my-2">
-	<Menu />
+	<Menu on:paintMode={onPaintMode} />
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Canvas.svelte

@@ -4,6 +4,7 @@
 	import { onMount } from 'svelte';
 	import { PUBLIC_UPLOADS } from '$env/static/public';
 	import { currZoomTransform, isPrompting, clickedPosition } from '$lib/store';
+	import { round } from '$lib/utils';
 
 	import { useMyPresence, useObject } from '$lib/liveblocks';
 	import type { PromptImgObject } from '$lib/types';
@@ -11,8 +12,8 @@
 	const myPresence = useMyPresence();
 	const promptImgStorage = useObject('promptImgStorage');
 
-	const height = 512 * 5;
-	const width = 512 * 5;
+	const height = 512 * 4;
+	const width = 512 * 4;
 
 	let canvasEl: HTMLCanvasElement;
 	export { canvasEl as value };
@@ -41,14 +42,14 @@
 	onMount(() => {
 		const scale = width / containerEl.clientWidth;
 		const zoomHandler = zoom()
-			.scaleExtent([1 / scale / 1.5, 1])
+			.scaleExtent([1 / scale / 2, 1])
 			// .extent([
 			// 	[0, 0],
 			// 	[width, height]
 			// ])
 			.translateExtent([
-				[-width * 0.1, -height * 0.1],
-				[width * 1.1, height * 1.1]
+				[-width * 0.3, -height * 0.3],
+				[width * 1.3, height * 1.3]
 			])
 			.tapDistance(10)
 			.on('zoom', zoomed);
@@ -61,14 +62,11 @@
 				console.log('clicked', $clickedPosition);
 				return null;
 			})
-			// .call(zoomHandler.scaleTo as any, 1 / scale)
+			.call(zoomHandler.scaleTo as any, 1 / scale / 1.5)
 			.on('pointermove', handlePointerMove)
 			.on('pointerleave', handlePointerLeave);
 
 		canvasCtx = canvasEl.getContext('2d') as CanvasRenderingContext2D;
-		canvasCtx.strokeStyle = 'blue';
-		canvasCtx.lineWidth = 10;
-		canvasCtx.strokeRect(0, 0, width, height);
 	});
 
 	function renderImages(promptImgList: PromptImgObject[]) {
@@ -84,6 +82,7 @@
 								position: { x: number; y: number };
 								id: string;
 							};
+							canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
 							resolve(res);
 						};
 						const url = imgURL.split('/');
@@ -93,6 +92,7 @@
 		).then((images) => {
 			images.forEach(({ img, position, id }) => {
 				// keep track of images already rendered
+				//re draw in order
 				imagesOnCanvas.add(id);
 				canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
 			});
@@ -103,21 +103,12 @@
 		canvasEl.style.transform = `translate(${transform.x}px, ${transform.y}px) scale(${transform.k})`;
 	}
 
-	const r = 8;
-	function round(p, n) {
-		return p % n < n / 2 ? p - (p % n) : p + n - (p % n);
-	}
-	const grid = 10;
-
 	// Update cursor presence to current pointer location
 	function handlePointerMove(event: PointerEvent) {
 		event.preventDefault();
-		const x = Math.round($currZoomTransform.invertX(event.layerX) / grid) * grid;
-		const y = Math.round($currZoomTransform.invertY(event.layerY) / grid) * grid;
-		// const x = Math.round(event.layerX / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), 100);
-		// const y = Math.round(event.layerY / grid) * grid; //round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), 100);
-		// const x = round(Math.max(r, Math.min(512 * 5 - r, event.clientX)), grid);
-		// const y = round(Math.max(r, Math.min(512 * 5 - r, event.clientY)), grid);
+		const x = round($currZoomTransform.invertX(event.layerX));
+		const y = round($currZoomTransform.invertY(event.layerY));
+
 		myPresence.update({
 			cursor: {
 				x,
@@ -134,8 +125,9 @@
 	}
 </script>
 
-<div bind:this={containerEl} class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0">
-	<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0" />
+<div bind:this={containerEl} class="absolute top-0 left-0 right-0 bottom-0 overflow-hidden z-0 bg-gray-800">
+	<canvas bind:this={canvasEl} {width} {height} class="absolute top-0 left-0 bg-white" />
+	<slot />
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Cursor.svelte

@@ -3,7 +3,7 @@
 
 	export let transform: ZoomTransform;
 	export let color = '';
-	export let emoji = '';
+	export let emoji;
 	export let position = { x: 0, y: 0 };
 
 	$: coord = {
@@ -28,12 +28,14 @@
 			fill="#FFB800"
 		/>
 	</svg>
-	<div
-		class="absolute right-0 text-4xl col-start-2 row-start-2"
-		style={`text-shadow: 0px 5px 5px ${color}`}
-	>
-		{emoji}
-	</div>
+	{#if emoji}
+		<div
+			class="absolute right-0 text-4xl col-start-2 row-start-2"
+			style={`text-shadow: 0px 5px 5px ${color}`}
+		>
+			{emoji}
+		</div>
+	{/if}
 </div>
 
 <style lang="postcss" scoped>

frontend/src/lib/Menu.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
-	import { showFrames, text2img } from '$lib/store';
+	import { showFrames } from '$lib/store';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 </script>
 
 <div class="grid grid-cols-4 gap-3 text-sm w-max mx-auto">
@@ -10,23 +13,18 @@
 			bind:checked={$showFrames}
 			class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
 		/>
-		<label for="showframes" class="text-black dark:text-white cursor-pointer ml-2"
-			>Show Frames</label
-		>
-	</div>
-	<div class="flex items-center">
-		<input
-			id="txt2img"
-			type="checkbox"
-			bind:checked={$text2img}
-			class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
-		/>
-		<label for="txt2img" class="text-black dark:text-white cursor-pointer ml-2"
-			>Text2Image</label
-		>
+		<label for="showframes" class="text-white dark:text-white cursor-pointer ml-2">
+			Show Frames
+		</label>
 	</div>
-	<button class="button" title="Add Prompt"> Add Prompt </button>
-	<button class="button-paint bg-violet-100 text-violet-900" title="New Paint Frame">
+	<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-5 w-5 m-1 flex justify-center items-center border-2 border-dashed border-violet-700 mr-2"
 			>+</span

frontend/src/lib/PaintFrame.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import LoadingIcon from '$lib/LoadingIcon.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';
+
+	export let transform: ZoomTransform;
+	export let color = '';
+
+	let position = {
+		x: transform.invertX(768),
+		y: transform.invertX(768)
+	};
+	export let prompt = '';
+
+	let frameElement: HTMLDivElement;
+	$: coord = {
+		x: transform.applyX(position.x),
+		y: transform.applyY(position.y)
+	};
+
+	onMount(() => {
+		function dragstarted(event, d) {
+			// d3.select(this).raise().attr('stroke', 'black');
+		}
+
+		function dragged(event: CustomEvent) {
+			console.log(event.sourceEvent.layerX);
+			const grid = 20;
+			const x = round(transform.invertX(event.x) - 512 / 2);
+			const y = round(transform.invertY(event.y) - 512 / 2);
+			position = {
+				x,
+				y
+			};
+		}
+
+		function dragended(event, d) {
+			// d3.select(this).attr('stroke', null);
+		}
+
+		select(frameElement).call(
+			drag().on('start', dragstarted).on('drag', dragged).on('end', dragended)
+		);
+	});
+</script>
+
+<div
+	bind:this={frameElement}
+	class="frame z-0 flex relative"
+	style={`transform: translateX(${coord.x}px) translateY(${coord.y}px) scale(${transform.k});
+			background-image: linear-gradient(${color}, rgba(255,255,255,0));
+			color: ${color};
+	`}
+>
+	<div class="small-frame z-0 flex relative" />
+	<LoadingIcon />
+	<h2 class="text-lg">Click to paint</h2>
+
+	<div class="absolute bottom-0 font-bold">{prompt}}</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];
+		transform-origin: 0 0;
+	}
+	.small-frame {
+		@apply pointer-events-none touch-none absolute top-1/2  left-1/2 border-2 border-spacing-3 border-sky-500 w-[256px] h-[256px];
+		transform: translateX(-50%) translateY(-50%);
+	}
+</style>

frontend/src/lib/store.ts

@@ -1,16 +1,13 @@
 import { writable } from 'svelte/store';
-import type { Room } from '@liveblocks/client';
-
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 
-import type {Person } from "$lib/types"
 
 export const loadingState = writable<string>('');
 export const isLoading = writable<boolean>(false);
 export const isPrompting = writable<boolean>(false);
 export const clickedPosition = writable<{ x: number; y: number }>();
 export const showFrames = writable<boolean>(false);
-export const text2img = writable<boolean>(false);
+
 
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);
 

frontend/src/lib/types.ts

@@ -1,17 +1,13 @@
-import type { JsonObject } from "@liveblocks/client";
-
-
-export interface Presence extends JsonObject {
+export type Presence = {
 	cursor: {
 		x: number;
 		y: number;
 	} | null;
-};
-
-export type Storage = {
-	// animals: LiveList<string>,
-	// ...
-};
+	isPrompting: boolean;
+	isLoading: boolean;
+	isMoving: boolean;
+	currentPrompt: string
+}
 
 export type User = string;
 

frontend/src/lib/utils.ts

@@ -50,6 +50,10 @@ export async function uploadImage(imagBlob: Blob, prompt: string): string {
 	return url;
 }
 
+export function round(pos: number, size = 32) {
+	return pos % size < size / 2 ? pos - (pos % size) : pos + size - (pos % size);
+}
+
 function slugify(text: string) {
 	if (!text) return '';
 	return text
@@ -60,4 +64,4 @@ function slugify(text: string) {
 		.replace(/\-\-+/g, '-')
 		.replace(/^-+/, '')
 		.replace(/-+$/, '');
-}
+}