@gradio/imageslider 0.3.1-dev.0 → 0.3.1

package/dist/shared/Slider.svelte

@@ -1,61 +1,83 @@
-<script>import { onMount } from "svelte";
-import { drag } from "d3-drag";
-import { select } from "d3-selection";
-function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-export let position = 0.5;
-export let disabled = false;
-export let slider_color = "var(--border-color-primary)";
-export let image_size = { top: 0, left: 0, width: 0, height: 0 };
-export let el = void 0;
-export let parent_el = void 0;
-let inner;
-let px = 0;
-let active = false;
-let container_width = 0;
-function set_position(width) {
-  container_width = parent_el?.getBoundingClientRect().width || 0;
-  if (width === 0) {
-    image_size.width = el?.getBoundingClientRect().width || 0;
-  }
-  px = clamp(
-    image_size.width * position + image_size.left,
-    0,
-    container_width
-  );
-}
-function round(n, points) {
-  const mod = Math.pow(10, points);
-  return Math.round((n + Number.EPSILON) * mod) / mod;
-}
-function update_position(x) {
-  px = clamp(x, 0, container_width);
-  position = round((x - image_size.left) / image_size.width, 5);
-}
-function drag_start(event) {
-  if (disabled) return;
-  active = true;
-  update_position(event.x);
-}
-function drag_move(event) {
-  if (disabled) return;
-  update_position(event.x);
-}
-function drag_end() {
-  if (disabled) return;
-  active = false;
-}
-function update_position_from_pc(pc) {
-  px = clamp(image_size.width * pc + image_size.left, 0, container_width);
-}
-$: set_position(image_size.width);
-$: update_position_from_pc(position);
-onMount(() => {
-  set_position(image_size.width);
-  const drag_handler = drag().on("start", drag_start).on("drag", drag_move).on("end", drag_end);
-  select(inner).call(drag_handler);
-});
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { drag } from "d3-drag";
+	import { select } from "d3-selection";
+
+	function clamp(value: number, min: number, max: number): number {
+		return Math.min(Math.max(value, min), max);
+	}
+
+	export let position = 0.5;
+	export let disabled = false;
+
+	export let slider_color = "var(--border-color-primary)";
+	export let image_size: {
+		top: number;
+		left: number;
+		width: number;
+		height: number;
+	} = { top: 0, left: 0, width: 0, height: 0 };
+	export let el: HTMLDivElement | undefined = undefined;
+	export let parent_el: HTMLDivElement | undefined = undefined;
+	let inner: Element;
+	let px = 0;
+	let active = false;
+	let container_width = 0;
+
+	function set_position(width: number): void {
+		container_width = parent_el?.getBoundingClientRect().width || 0;
+		if (width === 0) {
+			image_size.width = el?.getBoundingClientRect().width || 0;
+		}
+
+		px = clamp(
+			image_size.width * position + image_size.left,
+			0,
+			container_width
+		);
+	}
+
+	function round(n: number, points: number): number {
+		const mod = Math.pow(10, points);
+		return Math.round((n + Number.EPSILON) * mod) / mod;
+	}
+
+	function update_position(x: number): void {
+		px = clamp(x, 0, container_width);
+		position = round((x - image_size.left) / image_size.width, 5);
+	}
+
+	function drag_start(event: any): void {
+		if (disabled) return;
+		active = true;
+		update_position(event.x);
+	}
+
+	function drag_move(event: any): void {
+		if (disabled) return;
+		update_position(event.x);
+	}
+
+	function drag_end(): void {
+		if (disabled) return;
+		active = false;
+	}
+
+	function update_position_from_pc(pc: number): void {
+		px = clamp(image_size.width * pc + image_size.left, 0, container_width);
+	}
+
+	$: set_position(image_size.width);
+	$: update_position_from_pc(position);
+
+	onMount(() => {
+		set_position(image_size.width);
+		const drag_handler = drag()
+			.on("start", drag_start)
+			.on("drag", drag_move)
+			.on("end", drag_end);
+		select(inner).call(drag_handler);
+	});
 </script>
 
 <svelte:window on:resize={() => set_position(image_size.width)} />

package/dist/shared/Slider.svelte.d.ts

@@ -1,30 +1,39 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        position?: number;
-        disabled?: boolean;
-        slider_color?: string;
-        image_size?: {
-            top: number;
-            left: number;
-            width: number;
-            height: number;
-        };
-        el?: HTMLDivElement | undefined;
-        parent_el?: HTMLDivElement | undefined;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SliderProps = typeof __propDef.props;
-export type SliderEvents = typeof __propDef.events;
-export type SliderSlots = typeof __propDef.slots;
-export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Slider: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    position?: number;
+    disabled?: boolean;
+    slider_color?: string;
+    image_size?: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    el?: HTMLDivElement | undefined;
+    parent_el?: HTMLDivElement | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Slider = InstanceType<typeof Slider>;
+export default Slider;

package/dist/shared/SliderPreview.svelte

@@ -1,99 +1,131 @@
-<script>import Slider from "./Slider.svelte";
-import ImageEl from "./ImageEl.svelte";
-import {
-  BlockLabel,
-  Empty,
-  IconButton,
-  IconButtonWrapper,
-  FullscreenButton,
-  DownloadLink
-} from "@gradio/atoms";
-import { Image, Download, Undo, Clear } from "@gradio/icons";
-import {} from "@gradio/client";
-import { ZoomableImage } from "./zoom";
-import { onMount } from "svelte";
-import { tweened } from "svelte/motion";
-import { createEventDispatcher } from "svelte";
-export let value = [null, null];
-export let label = void 0;
-export let show_download_button = true;
-export let show_label;
-export let i18n;
-export let position;
-export let layer_images = true;
-export let show_single = false;
-export let slider_color;
-export let show_fullscreen_button = true;
-export let fullscreen = false;
-export let el_width = 0;
-export let max_height;
-export let interactive = true;
-const dispatch = createEventDispatcher();
-let img;
-let slider_wrap;
-let image_container;
-let transform = tweened(
-  { x: 0, y: 0, z: 1 },
-  {
-    duration: 75
-  }
-);
-let parent_el;
-$: coords_at_viewport = get_coords_at_viewport(
-  position,
-  viewport_width,
-  image_size.width,
-  image_size.left,
-  $transform.x,
-  $transform.z
-);
-$: style = layer_images ? `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)` : "";
-function get_coords_at_viewport(viewport_percent_x, viewportWidth, image_width, img_offset_x, tx, scale) {
-  const px_relative_to_image = viewport_percent_x * image_width;
-  const pixel_position = px_relative_to_image + img_offset_x;
-  const normalised_position = (pixel_position - tx) / scale;
-  const percent_position = normalised_position / viewportWidth;
-  return percent_position;
-}
-let img_width = 0;
-let viewport_width = 0;
-let zoomable_image = null;
-let observer = null;
-function init_image(img2, slider_wrap2) {
-  if (!img2 || !slider_wrap2) return;
-  zoomable_image?.destroy();
-  observer?.disconnect();
-  img_width = img2?.getBoundingClientRect().width || 0;
-  viewport_width = slider_wrap2?.getBoundingClientRect().width || 0;
-  zoomable_image = new ZoomableImage(slider_wrap2, img2);
-  zoomable_image.subscribe(({ x, y, scale }) => {
-    transform.set({ x, y, z: scale });
-  });
-  observer = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      if (entry.target === slider_wrap2) {
-        viewport_width = entry.contentRect.width;
-      }
-      if (entry.target === img2) {
-        img_width = entry.contentRect.width;
-      }
-    }
-  });
-  observer.observe(slider_wrap2);
-  observer.observe(img2);
-}
-$: init_image(img, slider_wrap);
-onMount(() => {
-  return () => {
-    zoomable_image?.destroy();
-    observer?.disconnect();
-  };
-});
-let slider_wrap_parent;
-let image_size = { top: 0, left: 0, width: 0, height: 0 };
-function handle_image_load(event) {
-  image_size = event.detail;
-}
+<script lang="ts">
+	import Slider from "./Slider.svelte";
+	import ImageEl from "./ImageEl.svelte";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper,
+		FullscreenButton,
+		DownloadLink
+	} from "@gradio/atoms";
+	import { Image, Download, Undo, Clear } from "@gradio/icons";
+	import { type FileData } from "@gradio/client";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { ZoomableImage } from "./zoom";
+	import { onMount } from "svelte";
+	import { tweened, type Tweened } from "svelte/motion";
+	import { createEventDispatcher } from "svelte";
+
+	export let value: [null | FileData, null | FileData] = [null, null];
+	export let label: string | undefined = undefined;
+	export let show_download_button = true;
+	export let show_label: boolean;
+	export let i18n: I18nFormatter;
+	export let position: number;
+	export let layer_images = true;
+	export let show_single = false;
+	export let slider_color: string;
+	export let show_fullscreen_button = true;
+	export let fullscreen = false;
+	export let el_width = 0;
+	export let max_height: number;
+	export let interactive = true;
+	const dispatch = createEventDispatcher<{ clear: void }>();
+
+	let img: HTMLImageElement;
+	let slider_wrap: HTMLDivElement;
+	let image_container: HTMLDivElement;
+
+	let transform: Tweened<{ x: number; y: number; z: number }> = tweened(
+		{ x: 0, y: 0, z: 1 },
+		{
+			duration: 75
+		}
+	);
+	let parent_el: HTMLDivElement;
+
+	$: coords_at_viewport = get_coords_at_viewport(
+		position,
+		viewport_width,
+		image_size.width,
+		image_size.left,
+		$transform.x,
+		$transform.z
+	);
+	$: style = layer_images
+		? `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)`
+		: "";
+
+	function get_coords_at_viewport(
+		viewport_percent_x: number, // 0-1
+		viewportWidth: number,
+		image_width: number,
+		img_offset_x: number,
+		tx: number, // image translation x (in pixels)
+		scale: number // image scale (uniform)
+	): number {
+		const px_relative_to_image = viewport_percent_x * image_width;
+		const pixel_position = px_relative_to_image + img_offset_x;
+
+		const normalised_position = (pixel_position - tx) / scale;
+		const percent_position = normalised_position / viewportWidth;
+
+		return percent_position;
+	}
+
+	let img_width = 0;
+	let viewport_width = 0;
+
+	let zoomable_image: ZoomableImage | null = null;
+	let observer: ResizeObserver | null = null;
+
+	function init_image(
+		img: HTMLImageElement,
+		slider_wrap: HTMLDivElement
+	): void {
+		if (!img || !slider_wrap) return;
+		zoomable_image?.destroy();
+		observer?.disconnect();
+		img_width = img?.getBoundingClientRect().width || 0;
+		viewport_width = slider_wrap?.getBoundingClientRect().width || 0;
+		zoomable_image = new ZoomableImage(slider_wrap, img);
+		zoomable_image.subscribe(({ x, y, scale }) => {
+			transform.set({ x, y, z: scale });
+		});
+
+		observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				if (entry.target === slider_wrap) {
+					viewport_width = entry.contentRect.width;
+				}
+
+				if (entry.target === img) {
+					img_width = entry.contentRect.width;
+				}
+			}
+		});
+		observer.observe(slider_wrap);
+		observer.observe(img);
+	}
+
+	$: init_image(img, slider_wrap);
+
+	onMount(() => {
+		return () => {
+			zoomable_image?.destroy();
+			observer?.disconnect();
+		};
+	});
+
+	let slider_wrap_parent: HTMLDivElement;
+
+	let image_size: { top: number; left: number; width: number; height: number } =
+		{ top: 0, left: 0, width: 0, height: 0 };
+
+	function handle_image_load(event: CustomEvent): void {
+		image_size = event.detail;
+	}
 </script>
 
 <BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />

package/dist/shared/SliderPreview.svelte.d.ts

@@ -1,36 +1,38 @@
-import { SvelteComponent } from "svelte";
 import { type FileData } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        value?: [null | FileData, null | FileData];
-        label?: string | undefined;
-        show_download_button?: boolean;
-        show_label: boolean;
-        i18n: I18nFormatter;
-        position: number;
-        layer_images?: boolean;
-        show_single?: boolean;
-        slider_color: string;
-        show_fullscreen_button?: boolean;
-        fullscreen?: boolean;
-        el_width?: number;
-        max_height: number;
-        interactive?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        fullscreen: CustomEvent<boolean>;
-        clear: CustomEvent<void>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SliderPreviewProps = typeof __propDef.props;
-export type SliderPreviewEvents = typeof __propDef.events;
-export type SliderPreviewSlots = typeof __propDef.slots;
-export default class SliderPreview extends SvelteComponent<SliderPreviewProps, SliderPreviewEvents, SliderPreviewSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SliderPreview: $$__sveltets_2_IsomorphicComponent<{
+    value?: [null | FileData, null | FileData];
+    label?: string | undefined;
+    show_download_button?: boolean;
+    show_label: boolean;
+    i18n: I18nFormatter;
+    position: number;
+    layer_images?: boolean;
+    show_single?: boolean;
+    slider_color: string;
+    show_fullscreen_button?: boolean;
+    fullscreen?: boolean;
+    el_width?: number;
+    max_height: number;
+    interactive?: boolean;
+}, {
+    fullscreen: CustomEvent<boolean>;
+    clear: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SliderPreview = InstanceType<typeof SliderPreview>;
+export default SliderPreview;

package/dist/shared/SliderUpload.svelte

@@ -1,21 +1,28 @@
 <svelte:options accessors={true} />
 
-<script>import Image from "./Image.svelte";
-import {} from "@gradio/client";
-export let value = [null, null];
-export let upload;
-export let stream_handler;
-export let label;
-export let show_label;
-export let i18n;
-export let root;
-export let upload_count = 1;
-export let dragging;
-export let max_height;
-export let max_file_size = null;
+<script lang="ts">
+	import type { I18nFormatter } from "@gradio/utils";
+	import Image from "./Image.svelte";
+	import { type Client } from "@gradio/client";
+
+	import type { FileData } from "@gradio/client";
+
+	export let value: [FileData | null, FileData | null] = [null, null];
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let label: string;
+	export let show_label: boolean;
+	export let i18n: I18nFormatter;
+	export let root: string;
+	export let upload_count = 1;
+	export let dragging: boolean;
+	export let max_height: number;
+	export let max_file_size: number | null = null;
+	export let upload_promise: Promise<any> | null = null;
 </script>
 
 <Image
+	bind:upload_promise
 	slider_color="var(--border-color-primary)"
 	position={0.5}
 	bind:value