feat: add FloorPlan Svelte component with SVG rendering and drag interaction

floorplan/frontend/FloorPlan.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let corners: [number, number][] = [];
+  export let furnitures: Array<{
+    object: string;
+    localisation: [number, number, number, number]; // [ymin, xmin, ymax, xmax]
+    description: string;
+  }> = [];
+  export let interactive = true;
+
+  const SVG_WIDTH = 800;
+  const SVG_HEIGHT = 600;
+
+  const dispatch = createEventDispatcher<{
+    change: { corners: [number, number][]; furnitures: typeof furnitures };
+  }>();
+
+  // Bound SVG element — used for pointer capture and coordinate scaling
+  let svgEl: SVGSVGElement;
+
+  // Room axis-aligned bounding box for clamping
+  $: roomMinX = corners.length ? Math.min(...corners.map((c) => c[0])) : 0;
+  $: roomMaxX = corners.length ? Math.max(...corners.map((c) => c[0])) : SVG_WIDTH;
+  $: roomMinY = corners.length ? Math.min(...corners.map((c) => c[1])) : 0;
+  $: roomMaxY = corners.length ? Math.max(...corners.map((c) => c[1])) : SVG_HEIGHT;
+
+  $: polygonPoints = corners.map((c) => c.join(",")).join(" ");
+
+  // Per-furniture drag offsets [dx, dy] in SVG user-space pixels
+  let offsets: [number, number][] = [];
+  $: {
+    // Only reset offsets when no drag is active to avoid corrupting mid-drag state
+    if (activeIdx === null) {
+      offsets = furnitures.map(() => [0, 0]);
+    }
+  }
+
+  // Drag state
+  let activeIdx: number | null = null;
+  let pointerStartX = 0; // in SVG user-space pixels
+  let pointerStartY = 0;
+  let startDx = 0;
+  let startDy = 0;
+  let savedOffsets: [number, number][] = [];
+
+  function clampOffset(
+    dx: number,
+    dy: number,
+    xmin: number,
+    ymin: number,
+    xmax: number,
+    ymax: number
+  ): [number, number] {
+    const clampedDx = Math.max(roomMinX - xmin, Math.min(roomMaxX - xmax, dx));
+    const clampedDy = Math.max(roomMinY - ymin, Math.min(roomMaxY - ymax, dy));
+    return [clampedDx, clampedDy];
+  }
+
+  function clientToSvg(clientX: number, clientY: number): [number, number] {
+    const rect = svgEl.getBoundingClientRect();
+    const scaleX = SVG_WIDTH / rect.width;
+    const scaleY = SVG_HEIGHT / rect.height;
+    return [
+      (clientX - rect.left) * scaleX,
+      (clientY - rect.top) * scaleY,
+    ];
+  }
+
+  function onPointerDown(e: PointerEvent, i: number) {
+    if (!interactive) return;
+    e.preventDefault();
+    activeIdx = i;
+    const [sx, sy] = clientToSvg(e.clientX, e.clientY);
+    pointerStartX = sx;
+    pointerStartY = sy;
+    startDx = offsets[i][0];
+    startDy = offsets[i][1];
+    savedOffsets = offsets.map((o) => [o[0], o[1]] as [number, number]);
+    // Capture on the SVG so pointermove/pointerup fire on the SVG during drag
+    svgEl.setPointerCapture(e.pointerId);
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (activeIdx === null) return;
+    const i = activeIdx;
+    const [ymin, xmin, ymax, xmax] = furnitures[i].localisation;
+    const [sx, sy] = clientToSvg(e.clientX, e.clientY);
+    const rawDx = startDx + (sx - pointerStartX);
+    const rawDy = startDy + (sy - pointerStartY);
+    const [dx, dy] = clampOffset(rawDx, rawDy, xmin, ymin, xmax, ymax);
+    offsets = offsets.map((o, idx) => (idx === i ? [dx, dy] : o)) as [number, number][];
+  }
+
+  function onPointerUp(_e: PointerEvent) {
+    svgEl.releasePointerCapture(_e.pointerId);
+    if (activeIdx === null) return;
+    const i = activeIdx;
+    const [ymin, xmin, ymax, xmax] = furnitures[i].localisation;
+    const [dx, dy] = offsets[i];
+
+    const updatedFurnitures = furnitures.map((f, idx) => {
+      if (idx !== i) return f;
+      return {
+        ...f,
+        localisation: [ymin + dy, xmin + dx, ymax + dy, xmax + dx] as [number, number, number, number],
+      };
+    });
+
+    // Absorb offset into localisation, reset offset
+    offsets = offsets.map((o, idx) => (idx === i ? [0, 0] : o)) as [number, number][];
+    activeIdx = null;
+
+    dispatch("change", { corners, furnitures: updatedFurnitures });
+  }
+
+  function onPointerCancel(_e: PointerEvent) {
+    svgEl.releasePointerCapture(_e.pointerId);
+    if (activeIdx === null) return;
+    offsets = savedOffsets;
+    activeIdx = null;
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<svg
+  bind:this={svgEl}
+  width={SVG_WIDTH}
+  height={SVG_HEIGHT}
+  style="border: 1px solid #ccc; background: #fafafa; display: block;"
+  on:pointermove={onPointerMove}
+  on:pointerup={onPointerUp}
+  on:pointercancel={onPointerCancel}
+>
+  <!-- Room outline -->
+  <polygon points={polygonPoints} fill="none" stroke="#333" stroke-width="2" />
+
+  <!-- Furniture bounding boxes -->
+  {#each furnitures as f, i}
+    {@const [ymin, xmin, ymax, xmax] = f.localisation}
+    {@const [dx, dy] = offsets[i] ?? [0, 0]}
+    {@const isActive = activeIdx === i}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <g
+      transform="translate({dx}, {dy})"
+      style="cursor: {interactive ? (isActive ? 'grabbing' : 'grab') : 'default'};"
+      on:pointerdown={(e) => onPointerDown(e, i)}
+    >
+      <rect
+        x={xmin}
+        y={ymin}
+        width={xmax - xmin}
+        height={ymax - ymin}
+        fill={isActive ? "rgba(249, 115, 22, 0.3)" : "rgba(100, 149, 237, 0.3)"}
+        stroke={isActive ? "#f97316" : "#6495ed"}
+        stroke-width={isActive ? 2.5 : 1.5}
+      />
+      <text
+        x={xmin + (xmax - xmin) / 2}
+        y={ymin + (ymax - ymin) / 2}
+        text-anchor="middle"
+        dominant-baseline="middle"
+        font-size="12"
+        fill="#222"
+        pointer-events="none"
+      >{i + 1} · {f.object}</text>
+    </g>
+  {/each}
+</svg>

floorplan/frontend/Index.svelte

@@ -1,112 +1,71 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-	import type { SimpleTextboxProps, SimpleTextboxEvents } from "./types";
-	import { Gradio } from "@gradio/utils";
-	import { BlockTitle } from "@gradio/atoms";
-	import { Block } from "@gradio/atoms";
-	import { StatusTracker } from "@gradio/statustracker";
-	import { tick } from "svelte";
+  import { tick } from "svelte";
+  import { Gradio } from "@gradio/utils";
+  import { Block } from "@gradio/atoms";
+  import { StatusTracker } from "@gradio/statustracker";
+  import FloorPlan from "./FloorPlan.svelte";
 
-	const props = $props();
-	const gradio = new Gradio<SimpleTextboxEvents, SimpleTextboxProps>(props);
+  type FurnitureItem = {
+    object: string;
+    localisation: [number, number, number, number]; // [ymin, xmin, ymax, xmax]
+    description: string;
+  };
 
-	let el: HTMLTextAreaElement | HTMLInputElement;
-	const container = true;
-	let old_value = $state(gradio.props.value);
+  type FloorPlanValue = {
+    corners: [number, number][];
+    furnitures: FurnitureItem[];
+  };
 
-	async function handle_keypress(e: KeyboardEvent): Promise<void> {
-		await tick();
-		if (e.key === "Enter") {
-			e.preventDefault();
-			gradio.dispatch("submit");
-		}
-	}
+  interface FloorPlanProps {
+    value: FloorPlanValue | null;
+  }
 
-	$effect(() => {
-		if (old_value != gradio.props.value) {
-			old_value = gradio.props.value;
-			gradio.dispatch("change");
-		}
-	});
+  interface FloorPlanEvents {
+    change: never;
+    clear_status: any;
+  }
+
+  const props = $props();
+  const gradio = new Gradio<FloorPlanEvents, FloorPlanProps>(props, {
+    value: null,
+  });
+
+  async function handleChange(event: CustomEvent<FloorPlanValue>) {
+    gradio.props.value = event.detail;
+    await tick();
+    gradio.dispatch("change");
+  }
 </script>
 
 <Block
-	visible={gradio.shared.visible}
-	elem_id={gradio.shared.elem_id}
-	elem_classes={gradio.shared.elem_classes}
-	scale={gradio.shared.scale}
-	min_width={gradio.shared.min_width}
-	allow_overflow={false}
-	padding={true}
-	rtl={gradio.props.rtl}
+  visible={gradio.shared.visible}
+  elem_id={gradio.shared.elem_id}
+  elem_classes={gradio.shared.elem_classes}
+  scale={gradio.shared.scale}
+  min_width={gradio.shared.min_width}
+  allow_overflow={false}
+  padding={true}
 >
-	{#if gradio.shared.loading_status}
-		<StatusTracker
-			autoscroll={gradio.shared.autoscroll}
-			i18n={gradio.i18n}
-			{...gradio.shared.loading_status}
-			on_clear_status={() =>
-				gradio.dispatch("clear_status", gradio.shared.loading_status)}
-		/>
-	{/if}
+  {#if gradio.shared.loading_status}
+    <StatusTracker
+      autoscroll={gradio.shared.autoscroll}
+      i18n={gradio.i18n}
+      {...gradio.shared.loading_status}
+      on_clear_status={() =>
+        gradio.dispatch("clear_status", gradio.shared.loading_status)}
+    />
+  {/if}
 
-	<label class:container>
-		<BlockTitle show_label={gradio.shared.show_label} info={undefined}
-			>{gradio.shared.label}</BlockTitle
-		>
-
-		<input
-			data-testid="textbox"
-			type="text"
-			class="scroll-hide"
-			bind:value={gradio.props.value}
-			bind:this={el}
-			placeholder={gradio.props.placeholder}
-			disabled={!gradio.shared.interactive}
-			dir={gradio.props.rtl ? "rtl" : "ltr"}
-			on:input={() => gradio.dispatch("input")}
-			on:keypress={handle_keypress}
-		/>
-	</label>
+  {#if gradio.props.value}
+    <FloorPlan
+      corners={gradio.props.value.corners}
+      furnitures={gradio.props.value.furnitures}
+      interactive={gradio.shared.interactive}
+      on:change={handleChange}
+    />
+  {:else}
+    <p style="color: #999; padding: 1rem;">No floor plan data provided.</p>
+  {/if}
 </Block>
-
-<style>
-	label {
-		display: block;
-		width: 100%;
-	}
-
-	input {
-		display: block;
-		position: relative;
-		outline: none !important;
-		box-shadow: var(--input-shadow);
-		background: var(--input-background-fill);
-		padding: var(--input-padding);
-		width: 100%;
-		color: var(--body-text-color);
-		font-weight: var(--input-text-weight);
-		font-size: var(--input-text-size);
-		line-height: var(--line-sm);
-		border: none;
-	}
-	.container > input {
-		border: var(--input-border-width) solid var(--input-border-color);
-		border-radius: var(--input-radius);
-	}
-	input:disabled {
-		-webkit-text-fill-color: var(--body-text-color);
-		-webkit-opacity: 1;
-		opacity: 1;
-	}
-
-	input:focus {
-		box-shadow: var(--input-shadow-focus);
-		border-color: var(--input-border-color-focus);
-	}
-
-	input::placeholder {
-		color: var(--input-placeholder-color);
-	}
-</style>

floorplan/frontend/floorplan.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+
+// Logic mirror test for clampOffset — tests the algorithm, not the component import
+function clampOffset(
+  dx: number,
+  dy: number,
+  xmin: number,
+  ymin: number,
+  xmax: number,
+  ymax: number,
+  roomMinX: number,
+  roomMinY: number,
+  roomMaxX: number,
+  roomMaxY: number
+): [number, number] {
+  const clampedDx = Math.max(roomMinX - xmin, Math.min(roomMaxX - xmax, dx));
+  const clampedDy = Math.max(roomMinY - ymin, Math.min(roomMaxY - ymax, dy));
+  return [clampedDx, clampedDy];
+}
+
+describe("clampOffset", () => {
+  const room = { minX: 50, minY: 50, maxX: 550, maxY: 450 };
+
+  it("allows movement within room", () => {
+    const [dx, dy] = clampOffset(50, 0, 100, 100, 300, 200, room.minX, room.minY, room.maxX, room.maxY);
+    expect(dx).toBe(50);
+    expect(dy).toBe(0);
+  });
+
+  it("clamps at right wall", () => {
+    const [dx] = clampOffset(300, 0, 100, 100, 300, 200, room.minX, room.minY, room.maxX, room.maxY);
+    expect(dx).toBe(250);
+  });
+
+  it("clamps at left wall", () => {
+    const [dx] = clampOffset(-200, 0, 100, 100, 300, 200, room.minX, room.minY, room.maxX, room.maxY);
+    expect(dx).toBe(-50);
+  });
+
+  it("clamps at bottom wall", () => {
+    const [, dy] = clampOffset(0, 400, 100, 100, 300, 200, room.minX, room.minY, room.maxX, room.maxY);
+    expect(dy).toBe(250);
+  });
+
+  it("clamps at top wall", () => {
+    const [, dy] = clampOffset(0, -200, 100, 100, 300, 200, room.minX, room.minY, room.maxX, room.maxY);
+    expect(dy).toBe(-50);
+  });
+});

floorplan/frontend/package.json

@@ -28,7 +28,8 @@
     "svelte": "^5.48.0"
   },
   "devDependencies": {
-    "@gradio/preview": "0.16.0"
+    "@gradio/preview": "0.16.0",
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
     "svelte": "^5.48.0"
@@ -38,4 +39,4 @@
     "url": "git+https://github.com/gradio-app/gradio.git",
     "directory": "js/simpletextbox"
   }
-}
+}