js/imageeditor/ImageEditor.stories.svelte

<script lang="ts">
	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
	import ImageEditor from "./Index.svelte";
	import { format } from "svelte-i18n";
	import { get } from "svelte/store";
	import { userEvent, within } from "@storybook/testing-library";
</script>

<Meta title="Components/Image Editor" component={ImageEditor} />

<Template let:args>
	<div
		class="image-container"
		style="width: 500px; position: relative;border-radius: var(--radius-lg);overflow: hidden;"
	>
		<ImageEditor i18n={get(format)} {...args} />
	</div>
</Template>

<Story
	name="Default Image Editor"
	args={{
		sources: ["webcam", "upload"],
		type: "pil",
		interactive: "true",
		brush: {
			default_size: "auto",
			colors: ["#ff0000", "#00ff00", "#0000ff"],
			default_color: "#ff0000",
			color_mode: "defaults"
		},
		eraser: {
			default_size: "auto"
		}
	}}
/>

<Story
	name="Image Editor Interactions"
	args={{
		value: {
			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
			orig_name: "cheetah.jpg"
		},
		type: "pil",
		sources: ["upload", "webcam"],
		interactive: "true",
		brush: {
			default_size: "auto",
			colors: ["#ff0000", "#00ff00", "#0000ff"],
			default_color: "#ff0000",
			color_mode: "defaults"
		},
		eraser: {
			default_size: "auto"
		}
	}}
	play={async ({ canvasElement }) => {
		const canvas = within(canvasElement);

		const drawButton = canvas.getAllByLabelText("Draw button")[0];

		userEvent.click(drawButton);

		const drawCanvas = document.getElementsByTagName("canvas")[0];
		if (!drawCanvas) {
			throw new Error("Could not find canvas");
		}

		await new Promise((r) => setTimeout(r, 1000));

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			target: drawCanvas,
			coords: { clientX: 300, clientY: 100 }
		});

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			target: drawCanvas,
			coords: { clientX: 300, clientY: 100 }
		});

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			target: drawCanvas,
			coords: { clientX: 300, clientY: 100 }
		});

		await userEvent.pointer({
			target: drawCanvas,
			coords: { clientX: 300, clientY: 300 }
		});

		await userEvent.pointer({
			target: drawCanvas,
			coords: { clientX: 300, clientY: 300 }
		});

		await userEvent.pointer({
			target: drawCanvas,
			coords: { clientX: 100, clientY: 100 }
		});

		await userEvent.click(canvas.getByLabelText("Color button"));

		var availableColors = document.querySelectorAll(
			"button.color:not(.empty):not(.selected):not(.hidden)"
		);

		await userEvent.click(availableColors[0]);

		await userEvent.keyboard("{Escape}");

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			target: drawCanvas,
			coords: { clientX: 50, clientY: 50 }
		});

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			target: drawCanvas,
			coords: { clientX: 100, clientY: 100 }
		});

		await userEvent.pointer({
			target: drawCanvas,
			coords: { clientX: 100, clientY: 300 }
		});

		await userEvent.pointer({
			target: drawCanvas,
			coords: { clientX: 300, clientY: 300 }
		});

		await userEvent.pointer({
			target: drawCanvas,
			coords: { clientX: 100, clientY: 100 }
		});

		await userEvent.click(canvas.getByLabelText("Transform button"));

		const bottomCropHandle =
			document.getElementsByClassName("handle corner b")[0];

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			target: bottomCropHandle,
			coords: { clientX: 1000, clientY: 200 }
		});

		await userEvent.pointer({
			target: bottomCropHandle,
			coords: { clientX: 500, clientY: 0 }
		});

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			target: bottomCropHandle,
			coords: { clientX: 500, clientY: 0 }
		});

		await userEvent.pointer({
			keys: "[MouseLeft>]",
			coords: { clientX: 500, clientY: 0 }
		});

		await userEvent.pointer({
			target: drawCanvas,
			coords: { clientX: 100, clientY: 300 }
		});

		userEvent.tripleClick(drawCanvas);

		await new Promise((r) => setTimeout(r, 1000));

		userEvent.click(canvas.getByLabelText("Show Layers"));

		await new Promise((r) => setTimeout(r, 1000));

		userEvent.click(canvas.getByLabelText("Add Layer"));

		await userEvent.click(canvas.getByLabelText("Image button"));

		await userEvent.click(canvas.getByLabelText("Undo"));

		await userEvent.click(canvas.getByLabelText("Redo"));
	}}
/>