@gradio/imageslider 0.2.0

package/dist/shared/SliderPreview.svelte

@@ -0,0 +1,201 @@
+<script>import Slider from "./Slider.svelte";
+import ImageEl from "./ImageEl.svelte";
+import {
+  BlockLabel,
+  Empty,
+  IconButton,
+  IconButtonWrapper,
+  FullscreenButton
+} from "@gradio/atoms";
+import { Image, Download, Undo, Clear } from "@gradio/icons";
+import {} from "@gradio/client";
+import { DownloadLink } from "@gradio/wasm/svelte";
+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 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 is_full_screen = false;
+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>
+
+<BlockLabel {show_label} Icon={Image} label={label || i18n("image.image")} />
+{#if (value === null || value[0] === null || value[1] === null) && !show_single}
+	<Empty unpadded_box={true} size="large"><Image /></Empty>
+{:else}
+	<div class="image-container" bind:this={image_container}>
+		<IconButtonWrapper>
+			<IconButton
+				Icon={Undo}
+				label={i18n("common.undo")}
+				disabled={$transform.z === 1}
+				on:click={() => zoomable_image?.reset_zoom()}
+			/>
+			{#if show_fullscreen_button}
+				<FullscreenButton container={image_container} bind:is_full_screen />
+			{/if}
+
+			{#if show_download_button}
+				<DownloadLink
+					href={value[1]?.url}
+					download={value[1]?.orig_name || "image"}
+				>
+					<IconButton Icon={Download} label={i18n("common.download")} />
+				</DownloadLink>
+			{/if}
+			{#if interactive}
+				<IconButton
+					Icon={Clear}
+					label="Remove Image"
+					on:click={(event) => {
+						value = [null, null];
+						dispatch("clear");
+						event.stopPropagation();
+					}}
+				/>
+			{/if}
+		</IconButtonWrapper>
+		<div
+			class="slider-wrap"
+			bind:this={slider_wrap_parent}
+			bind:clientWidth={el_width}
+			class:limit_height={!is_full_screen}
+		>
+			<Slider
+				bind:position
+				{slider_color}
+				bind:el={slider_wrap}
+				bind:parent_el
+				{image_size}
+			>
+				<ImageEl
+					src={value?.[0]?.url}
+					alt=""
+					loading="lazy"
+					bind:img_el={img}
+					variant="preview"
+					transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
+					fullscreen={is_full_screen}
+					{max_height}
+					on:load={handle_image_load}
+				/>
+				<ImageEl
+					variant="preview"
+					fixed={layer_images}
+					hidden={!value?.[1]?.url}
+					src={value?.[1]?.url}
+					alt=""
+					loading="lazy"
+					{style}
+					transform="translate({$transform.x}px, {$transform.y}px) scale({$transform.z})"
+					fullscreen={is_full_screen}
+					{max_height}
+					on:load={handle_image_load}
+				/>
+			</Slider>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.slider-wrap {
+		user-select: none;
+		height: 100%;
+		width: 100%;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.limit_height :global(img) {
+		max-height: 500px;
+	}
+
+	.image-container {
+		height: 100%;
+		position: relative;
+		min-width: var(--size-20);
+	}
+</style>

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

@@ -0,0 +1,32 @@
+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] | undefined;
+        label?: string | undefined;
+        show_download_button?: boolean | undefined;
+        show_label: boolean;
+        i18n: I18nFormatter;
+        position: number;
+        layer_images?: boolean | undefined;
+        show_single?: boolean | undefined;
+        slider_color: string;
+        show_fullscreen_button?: boolean | undefined;
+        el_width?: number | undefined;
+        max_height: number;
+        interactive?: boolean | undefined;
+    };
+    events: {
+        clear: CustomEvent<void>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/SliderUpload.svelte

@@ -0,0 +1,41 @@
+<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>
+
+<Image
+	slider_color="var(--border-color-primary)"
+	position={0.5}
+	bind:value
+	bind:dragging
+	{root}
+	on:edit
+	on:clear
+	on:stream
+	on:drag={({ detail }) => (dragging = detail)}
+	on:upload
+	on:select
+	on:share
+	{label}
+	{show_label}
+	{upload_count}
+	{stream_handler}
+	{upload}
+	{max_file_size}
+	{max_height}
+	{i18n}
+>
+	<slot />
+</Image>

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

@@ -0,0 +1,71 @@
+import { SvelteComponent } from "svelte";
+import type { I18nFormatter } from "@gradio/utils";
+import { type Client } from "@gradio/client";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        value?: [FileData | null, FileData | null] | undefined;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        label: string;
+        show_label: boolean;
+        i18n: I18nFormatter;
+        root: string;
+        upload_count?: number | undefined;
+        dragging: boolean;
+        max_height: number;
+        max_file_size?: (number | null) | undefined;
+    };
+    events: {
+        edit: CustomEvent<undefined>;
+        clear: CustomEvent<undefined>;
+        stream: CustomEvent<string | null>;
+        upload: CustomEvent<[any, any]>;
+        select: CustomEvent<import("@gradio/utils").SelectData>;
+        share: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SliderUploadProps = typeof __propDef.props;
+export type SliderUploadEvents = typeof __propDef.events;
+export type SliderUploadSlots = typeof __propDef.slots;
+export default class SliderUpload extends SvelteComponent<SliderUploadProps, SliderUploadEvents, SliderUploadSlots> {
+    get value(): [any, any] | undefined;
+    /**accessor*/
+    set value(_: [any, any] | undefined);
+    get upload(): Client;
+    /**accessor*/
+    set upload(_: Client);
+    get stream_handler(): Client;
+    /**accessor*/
+    set stream_handler(_: Client);
+    get label(): string;
+    /**accessor*/
+    set label(_: string);
+    get show_label(): boolean;
+    /**accessor*/
+    set show_label(_: boolean);
+    get i18n(): any;
+    /**accessor*/
+    set i18n(_: any);
+    get root(): string;
+    /**accessor*/
+    set root(_: string);
+    get upload_count(): number | undefined;
+    /**accessor*/
+    set upload_count(_: number | undefined);
+    get dragging(): boolean;
+    /**accessor*/
+    set dragging(_: boolean);
+    get max_height(): number;
+    /**accessor*/
+    set max_height(_: number);
+    get max_file_size(): number | null | undefined;
+    /**accessor*/
+    set max_file_size(_: number | null | undefined);
+}
+export {};

package/dist/shared/zoom.d.ts

@@ -0,0 +1,69 @@
+export declare class ZoomableImage {
+    container: HTMLDivElement;
+    image: HTMLImageElement;
+    scale: number;
+    offsetX: number;
+    offsetY: number;
+    isDragging: boolean;
+    lastX: number;
+    lastY: number;
+    initial_left_padding: number;
+    initial_top_padding: number;
+    initial_width: number;
+    initial_height: number;
+    subscribers: (({ x, y, scale }: {
+        x: number;
+        y: number;
+        scale: number;
+    }) => void)[];
+    handleImageLoad: () => void;
+    real_image_size: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    last_touch_distance: number;
+    constructor(container: HTMLDivElement, image: HTMLImageElement);
+    handleResize(): void;
+    init(): void;
+    reset_zoom(): void;
+    handleMouseDown(e: MouseEvent): void;
+    handleMouseMove(e: MouseEvent): void;
+    handleMouseUp(): void;
+    handleWheel(e: WheelEvent): Promise<void>;
+    compute_new_position({ position, scale, anchor_position }: {
+        position: number;
+        scale: number;
+        anchor_position: number;
+    }): number;
+    compute_new_offset({ cursor_position, current_offset, new_scale, old_scale }: {
+        cursor_position: number;
+        current_offset: number;
+        new_scale: number;
+        old_scale: number;
+    }): number;
+    constrain_to_bounds(pan?: boolean): void;
+    updateTransform(): void;
+    destroy(): void;
+    subscribe(cb: ({ x, y, scale }: {
+        x: number;
+        y: number;
+        scale: number;
+    }) => void): void;
+    unsubscribe(cb: ({ x, y, scale }: {
+        x: number;
+        y: number;
+        scale: number;
+    }) => void): void;
+    notify({ x, y, scale }: {
+        x: number;
+        y: number;
+        scale: number;
+    }): void;
+    handleTouchStart(e: TouchEvent): void;
+    get_image_size(img: HTMLImageElement | null): void;
+    handleTouchMove(e: TouchEvent): void;
+    handleTouchEnd(e: TouchEvent): void;
+    calculate_position(screen_coord: number, image_anchor: number, axis: "x" | "y"): number;
+}