@gradio/imageeditor 0.12.14 → 0.13.0

package/dist/shared/layers/Layers.svelte

@@ -1,231 +0,0 @@
-<script>import { getContext, onMount, tick } from "svelte";
-import { click_outside } from "../utils/events";
-import { layer_manager } from "./utils";
-import { EDITOR_KEY } from "../ImageEditor.svelte";
-import { Layers } from "@gradio/icons";
-let show_layers = false;
-export let layer_files = [];
-export let enable_layers = true;
-const {
-  pixi,
-  current_layer,
-  dimensions,
-  register_context,
-  command_manager,
-  current_history
-} = getContext(EDITOR_KEY);
-const { can_undo } = command_manager;
-const LayerManager = layer_manager();
-const manager_current_layer = LayerManager.active_layer;
-const layers = LayerManager.layers;
-$:
-  current_layer.set($manager_current_layer);
-register_context("layers", {
-  init_fn: () => {
-    new_layer();
-  },
-  reset_fn: () => {
-    LayerManager.reset();
-  }
-});
-async function validate_layers() {
-  let invalid = $layers.some(
-    (layer) => layer.composite.texture?.width != $dimensions[0] || layer.composite.texture?.height != $dimensions[1]
-  );
-  if (invalid) {
-    LayerManager.reset();
-    if (!layer_files || layer_files.length == 0)
-      new_layer();
-    else
-      render_layer_files(layer_files);
-  }
-}
-$:
-  $dimensions, validate_layers();
-async function new_layer() {
-  if (!$pixi)
-    return;
-  const new_layer2 = LayerManager.add_layer(
-    $pixi.layer_container,
-    $pixi.renderer,
-    ...$dimensions
-  );
-  if ($can_undo || $layers.length > 0) {
-    command_manager.execute(new_layer2);
-  } else {
-    new_layer2.execute();
-  }
-}
-$:
-  render_layer_files(layer_files);
-function is_not_null(x) {
-  return x !== null;
-}
-async function render_layer_files(_layer_files) {
-  await tick();
-  if (!_layer_files || _layer_files.length == 0) {
-    LayerManager.reset();
-    new_layer();
-    return;
-  }
-  if (!$pixi)
-    return;
-  const fetch_promises = await Promise.all(
-    _layer_files.map((f) => {
-      if (!f || !f.url)
-        return null;
-      return fetch(f.url);
-    })
-  );
-  const blobs = await Promise.all(
-    fetch_promises.map((p) => {
-      if (!p)
-        return null;
-      return p.blob();
-    })
-  );
-  LayerManager.reset();
-  for (const blob of blobs.filter(is_not_null)) {
-    const new_layer2 = await LayerManager.add_layer_from_blob(
-      $pixi.layer_container,
-      $pixi.renderer,
-      blob,
-      $pixi.view
-    );
-    if ($can_undo && $layers.length === 0) {
-      command_manager.execute(new_layer2);
-    } else {
-      new_layer2.execute();
-    }
-  }
-}
-onMount(async () => {
-  await tick();
-  if (!$pixi)
-    return;
-  $pixi = { ...$pixi, get_layers: LayerManager.get_layers };
-});
-</script>
-
-{#if enable_layers}
-	<div
-		class="layer-wrap"
-		class:closed={!show_layers}
-		use:click_outside={() => (show_layers = false)}
-	>
-		<button
-			aria-label="Show Layers"
-			on:click={() => (show_layers = !show_layers)}
-			><span class="icon"><Layers /></span> Layer {$layers.findIndex(
-				(l) => l === $current_layer
-			) + 1}
-		</button>
-		{#if show_layers}
-			<ul>
-				{#each $layers as layer, i (i)}
-					<li>
-						<button
-							class:selected_layer={$current_layer === layer}
-							aria-label={`layer-${i + 1}`}
-							on:click={() =>
-								($current_layer = LayerManager.change_active_layer(i))}
-							>Layer {i + 1}</button
-						>
-					</li>
-				{/each}
-				<li>
-					<button aria-label="Add Layer" on:click={new_layer}> +</button>
-				</li>
-			</ul>
-		{/if}
-
-		<span class="sep"></span>
-	</div>
-{/if}
-
-<style>
-	.icon {
-		width: 14px;
-		margin-right: var(--spacing-md);
-		color: var(--block-label-text-color);
-		margin-right: var(--spacing-lg);
-		margin-top: 1px;
-	}
-
-	.layer-wrap {
-		position: relative;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.layer-wrap button {
-		justify-content: flex-start;
-		align-items: flex-start;
-		width: 100%;
-		border-bottom: 1px solid var(--block-border-color);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: var(--scale-000);
-		line-height: var(--line-sm);
-		padding-bottom: 1px;
-		margin-left: var(--spacing-xl);
-		padding: var(--spacing-sm) 0;
-	}
-
-	.layer-wrap li:last-child button {
-		border-bottom: none;
-		text-align: center;
-		font-size: var(--scale-0);
-		line-height: 1;
-		font-weight: var(--weight-bold);
-		padding: 5px 0 1px 0;
-	}
-
-	.closed > button {
-		border-bottom: none;
-	}
-
-	.layer-wrap button:hover {
-		background-color: none;
-	}
-
-	.layer-wrap button:hover .icon {
-		color: var(--color-accent);
-	}
-
-	.selected_layer {
-		background-color: var(--block-background-fill);
-		color: var(--color-accent);
-		font-weight: bold;
-	}
-
-	ul {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		background: var(--block-background-fill);
-		width: calc(100% + 1px);
-		list-style: none;
-		z-index: var(--layer-top);
-		border: 1px solid var(--block-border-color);
-		padding: var(--spacing-sm) 0;
-		text-wrap: none;
-		transform: translate(-1px, 1px);
-		border-radius: var(--radius-sm);
-		border-bottom-right-radius: 0;
-	}
-
-	.layer-wrap ul > li > button {
-		margin-left: 0;
-	}
-
-	.sep {
-		height: 12px;
-		background-color: var(--block-border-color);
-		width: 1px;
-		display: block;
-		margin-left: var(--spacing-xl);
-	}
-</style>

package/dist/shared/layers/Layers.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        layer_files?: ((FileData | null)[] | null) | undefined;
-        enable_layers?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LayersProps = typeof __propDef.props;
-export type LayersEvents = typeof __propDef.events;
-export type LayersSlots = typeof __propDef.slots;
-export default class Layers extends SvelteComponent<LayersProps, LayersEvents, LayersSlots> {
-}
-export {};

package/dist/shared/layers/utils.d.ts

@@ -1,73 +0,0 @@
-import { Container, type IRenderer, RenderTexture, Sprite, Filter } from "pixi.js";
-import { type Command } from "../utils/commands";
-import { type Writable } from "svelte/store";
-/**
- * GLSL Shader that takes two textures and erases the second texture from the first.
- */
-export declare const erase_shader = "\nprecision highp float;\n\nuniform sampler2D uDrawingTexture;\nuniform sampler2D uEraserTexture;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void) {\n\tvec4 drawingColor = texture2D(uDrawingTexture,vTextureCoord);\n\tvec4 eraserColor = texture2D(uEraserTexture, vTextureCoord);\n\n\t// Use the alpha of the eraser to determine how much to \"erase\" from the drawing\n\tfloat alpha = 1.0 - eraserColor.a;\n\tgl_FragColor = vec4(drawingColor.rgb * alpha, drawingColor.a * alpha);\n}";
-/**
- * Interface holding data for a layer
- */
-export interface LayerScene {
-    /**
-     * The texture used for tracking brush strokes.
-     */
-    draw_texture: RenderTexture;
-    /**
-     * The texture used for tracking eraser strokes.
-     */
-    erase_texture: RenderTexture;
-    /**
-     * The sprite used for displaying the composite of the draw and erase textures.
-     */
-    composite: Sprite;
-    /**
-     * The filter used for combining the draw and erase textures into a composite texture.
-     */
-    filter?: Filter;
-}
-/**
- * Interface for managing layers.
- */
-interface LayerManager {
-    /**
-     * Adds a layer to the container.
-     * @param layer The container to add the layer to.
-     * @param renderer The renderer to use for the layer.
-     * @param width the width of the layer
-     * @param height the height of the layer
-     */
-    add_layer(container: Container, renderer: IRenderer, width: number, height: number, sprite?: Sprite): Command;
-    /**
-     * Swaps the layer with the layer above or below it.
-     * @param layer The index layer to swap.
-     * @param direction The direction to swap the layer.
-     */
-    swap_layers(layer: number, direction: "up" | "down"): LayerScene;
-    /**
-     * Changes the active layer.
-     * @param layer The index of the layer to make active.
-     */
-    change_active_layer(layer: number): LayerScene;
-    /**
-     * Resizes the layers.
-     * @param width The new width of the layers.
-     * @param height The new height of the layers.
-     */
-    reset(): void;
-    /**
-     * Gets the layers.
-     * @returns The layers.
-     */
-    get_layers(): LayerScene[];
-    layers: Writable<LayerScene[]>;
-    active_layer: Writable<LayerScene | null>;
-    add_layer_from_blob(container: Container, renderer: IRenderer, blob: Blob, view: HTMLCanvasElement): Promise<Command>;
-}
-/**
- * Creates a layer manager.
- * @param canvas_resize a function to resize the canvas
- * @returns a layer manager
- */
-export declare function layer_manager(): LayerManager;
-export {};

package/dist/shared/layers/utils.js

@@ -1,156 +0,0 @@
-import { Container, RenderTexture, Texture, Sprite, Filter } from "pixi.js";
-import {} from "../utils/commands";
-import { get, writable } from "svelte/store";
-/**
- * GLSL Shader that takes two textures and erases the second texture from the first.
- */
-export const erase_shader = `
-precision highp float;
-
-uniform sampler2D uDrawingTexture;
-uniform sampler2D uEraserTexture;
-
-varying vec2 vTextureCoord;
-
-void main(void) {
-	vec4 drawingColor = texture2D(uDrawingTexture,vTextureCoord);
-	vec4 eraserColor = texture2D(uEraserTexture, vTextureCoord);
-
-	// Use the alpha of the eraser to determine how much to "erase" from the drawing
-	float alpha = 1.0 - eraserColor.a;
-	gl_FragColor = vec4(drawingColor.rgb * alpha, drawingColor.a * alpha);
-}`;
-/**
- * Swaps two adjacent elements in an array.
- * @param array The array to swap elements in.
- * @param index The index of the first element to swap.
- */
-function swap_adjacent(array, index) {
-    if (index < 0 || index >= array.length - 1) {
-        throw new Error("Index out of bounds");
-    }
-    [array[index], array[index + 1]] = [array[index + 1], array[index]];
-}
-/**
- * Creates a layer manager.
- * @param canvas_resize a function to resize the canvas
- * @returns a layer manager
- */
-export function layer_manager() {
-    let _layers = [];
-    let current_layer = 0;
-    let position = 0;
-    return {
-        add_layer: function (container, renderer, width, height, sprite) {
-            let layer_container;
-            let layer_number;
-            let that = this;
-            return {
-                execute: function () {
-                    layer_container = new Container();
-                    position++;
-                    layer_container.zIndex = position;
-                    const composite_texture = RenderTexture.create({
-                        width,
-                        height
-                    });
-                    const composite = new Sprite(composite_texture);
-                    layer_container.addChild(composite);
-                    composite.zIndex = position;
-                    const layer_scene = {
-                        draw_texture: RenderTexture.create({
-                            width,
-                            height
-                        }),
-                        erase_texture: RenderTexture.create({
-                            width,
-                            height
-                        }),
-                        composite
-                    };
-                    const erase_filter = new Filter(undefined, erase_shader, {
-                        uEraserTexture: layer_scene.erase_texture,
-                        uDrawingTexture: layer_scene.draw_texture
-                    });
-                    composite.filters = [erase_filter];
-                    container.addChild(layer_container);
-                    _layers.push(layer_scene);
-                    that.layers.update((s) => [...s, layer_scene]);
-                    that.active_layer.set(layer_scene);
-                    layer_number = get(that.layers).length - 1;
-                    if (sprite) {
-                        renderer.render(sprite, {
-                            renderTexture: layer_scene.draw_texture
-                        });
-                    }
-                },
-                undo: function () {
-                    container.removeChild(layer_container);
-                    _layers = get(that.layers);
-                    _layers = _layers.filter((_, i) => i !== layer_number);
-                    that.layers.set(_layers);
-                    const new_layer = _layers[layer_number - 1] || _layers[0] || null;
-                    that.active_layer.set(new_layer);
-                }
-            };
-        },
-        swap_layers: function (layer, direction) {
-            if (direction === "up") {
-                swap_adjacent(_layers, layer);
-            }
-            else {
-                swap_adjacent(_layers, layer - 1);
-            }
-            return _layers[layer];
-        },
-        change_active_layer: function (layer) {
-            // current_layer = layer;
-            this.active_layer.set(get(this.layers)[layer]);
-            return _layers[layer];
-        },
-        reset() {
-            _layers.forEach((layer) => {
-                layer.draw_texture.destroy(true);
-                layer.erase_texture.destroy(true);
-                layer.composite.destroy(true);
-            });
-            _layers = [];
-            current_layer = 0;
-            position = 0;
-            this.active_layer.set(null);
-            this.layers.set([]);
-        },
-        async add_layer_from_blob(container, renderer, blob, view) {
-            const img = await createImageBitmap(blob);
-            const bitmap_texture = Texture.from(img);
-            const [w, h] = resize_to_fit(bitmap_texture.width, bitmap_texture.height, view.width, view.height);
-            const sprite = new Sprite(bitmap_texture);
-            sprite.zIndex = 0;
-            sprite.width = w;
-            sprite.height = h;
-            return this.add_layer(container, renderer, view.width, view.height, sprite);
-        },
-        get_layers() {
-            return _layers;
-        },
-        layers: writable([]),
-        active_layer: writable(null)
-    };
-}
-function resize_to_fit(inner_width, inner_height, outer_width, outer_height) {
-    if (inner_width <= outer_width && inner_height <= outer_height) {
-        return [inner_width, inner_height];
-    }
-    const inner_aspect = inner_width / inner_height;
-    const outer_aspect = outer_width / outer_height;
-    let new_width, new_height;
-    if (inner_aspect > outer_aspect) {
-        new_width = outer_width;
-        new_height = outer_width / inner_aspect;
-    }
-    else {
-        new_height = outer_height;
-        new_width = outer_height * inner_aspect;
-    }
-    return [new_width, new_height];
-}

package/dist/shared/tools/Brush.svelte

@@ -1,215 +0,0 @@
-<script context="module">import {} from "tinycolor2";
-</script>
-
-<script>import tinycolor from "tinycolor2";
-import { clamp } from "../utils/pixi";
-import { getContext, onMount, tick } from "svelte";
-import { TOOL_KEY } from "./Tools.svelte";
-import { EDITOR_KEY } from "../ImageEditor.svelte";
-import { draw_path } from "./brush";
-import BrushOptions from "./BrushOptions.svelte";
-export let default_size;
-export let default_color = void 0;
-export let colors = void 0;
-export let color_mode = void 0;
-export let mode;
-let processed_colors = [];
-let old_colors = [];
-if (colors && JSON.stringify(old_colors) !== JSON.stringify(colors)) {
-  processed_colors = colors.map(process_color).filter((_, i) => i < 4);
-  old_colors = processed_colors;
-}
-let selected_color = process_color(default_color || "#000000");
-$:
-  if (mode === "draw") {
-    current_color.set(selected_color);
-  }
-let brush_options = false;
-const {
-  pixi,
-  dimensions,
-  current_layer,
-  command_manager,
-  register_context,
-  editor_box,
-  crop,
-  toolbar_box
-} = getContext(EDITOR_KEY);
-const { active_tool, register_tool, current_color } = getContext(TOOL_KEY);
-let drawing = false;
-let draw;
-function generate_sizes(x, y) {
-  const min = clamp(Math.min(x, y), 500, 1e3);
-  return Math.round(min * 2 / 100);
-}
-$:
-  mode === "draw" && current_color.set(selected_color);
-let selected_size = default_size === "auto" ? generate_sizes(...$dimensions) : default_size;
-function pointer_down_handler(event) {
-  if ($active_tool !== mode) {
-    return;
-  }
-  drawing = true;
-  if (!$pixi || !$current_layer) {
-    return;
-  }
-  draw = draw_path(
-    $pixi.renderer,
-    $pixi.layer_container,
-    $current_layer,
-    mode
-  );
-  draw.start({
-    x: event.screen.x,
-    y: event.screen.y,
-    color: selected_color || void 0,
-    size: selected_size,
-    opacity: 1
-  });
-}
-function pointer_up_handler(event) {
-  if (!$pixi || !$current_layer) {
-    return;
-  }
-  if ($active_tool !== mode) {
-    return;
-  }
-  draw.stop();
-  command_manager.execute(draw);
-  drawing = false;
-}
-function pointer_move_handler(event) {
-  if ($active_tool !== mode) {
-    return;
-  }
-  if (drawing) {
-    draw.continue({
-      x: event.screen.x,
-      y: event.screen.y
-    });
-  }
-  const x_bound = $crop[0] * $dimensions[0];
-  const y_bound = $crop[1] * $dimensions[1];
-  if (x_bound > event.screen.x || y_bound > event.screen.y || event.screen.x > x_bound + $crop[2] * $dimensions[0] || event.screen.y > y_bound + $crop[3] * $dimensions[1]) {
-    brush_cursor = false;
-    document.body.style.cursor = "auto";
-  } else {
-    brush_cursor = true;
-    document.body.style.cursor = "none";
-  }
-  if (brush_cursor) {
-    pos = {
-      x: event.clientX - $editor_box.child_left,
-      y: event.clientY - $editor_box.child_top
-    };
-  }
-}
-let brush_cursor = false;
-async function toggle_listeners(on_off) {
-  $pixi?.layer_container[on_off]("pointerdown", pointer_down_handler);
-  $pixi?.layer_container[on_off]("pointerup", pointer_up_handler);
-  $pixi?.layer_container[on_off]("pointermove", pointer_move_handler);
-  $pixi?.layer_container[on_off](
-    "pointerenter",
-    (event) => {
-      if ($active_tool === mode) {
-        brush_cursor = true;
-        document.body.style.cursor = "none";
-      }
-    }
-  );
-  $pixi?.layer_container[on_off](
-    "pointerleave",
-    () => (brush_cursor = false, document.body.style.cursor = "auto")
-  );
-}
-register_context(mode, {
-  init_fn: () => {
-    toggle_listeners("on");
-  },
-  reset_fn: () => {
-    toggle_listeners("off");
-  }
-});
-const toggle_options = debounce_toggle();
-const unregister = register_tool(mode, {
-  cb: toggle_options
-});
-onMount(() => {
-  return () => {
-    unregister();
-    toggle_listeners("off");
-  };
-});
-let recent_colors = [null, null, null];
-function process_color(color) {
-  return tinycolor(color).toRgbString();
-}
-let pos = { x: 0, y: 0 };
-$:
-  brush_size = selected_size / $dimensions[0] * $editor_box.child_width * 2;
-function debounce_toggle() {
-  let timeout = null;
-  return function executedFunction(should_close) {
-    const later = () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-      if (should_close !== void 0) {
-        brush_options = should_close;
-        return;
-      }
-      brush_options = !brush_options;
-    };
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-    timeout = setTimeout(later, 100);
-  };
-}
-</script>
-
-<svelte:window
-	on:keydown={({ key }) => key === "Escape" && toggle_options(false)}
-/>
-
-<span
-	style:transform="translate({pos.x}px, {pos.y}px)"
-	style:top="{$editor_box.child_top -
-		$editor_box.parent_top -
-		brush_size / 2}px"
-	style:left="{$editor_box.child_left -
-		$editor_box.parent_left -
-		brush_size / 2}px"
-	style:width="{brush_size}px"
-	style:height="{brush_size}px"
-	style:opacity={brush_cursor ? 1 : 0}
-/>
-
-{#if brush_options}
-	<div>
-		<BrushOptions
-			show_swatch={mode === "draw"}
-			on:click_outside={() => toggle_options()}
-			colors={processed_colors}
-			bind:selected_color
-			{color_mode}
-			bind:recent_colors
-			bind:selected_size
-			dimensions={$dimensions}
-			parent_width={$editor_box.parent_width}
-			parent_height={$editor_box.parent_height}
-			parent_left={$editor_box.parent_left}
-			toolbar_box={$toolbar_box}
-		/>
-	</div>
-{/if}
-
-<style>
-	span {
-		position: absolute;
-		background: rgba(0, 0, 0, 0.5);
-		pointer-events: none;
-		border-radius: 50%;
-	}
-</style>