@gradio/imageeditor 0.12.14 → 0.14.0

package/dist/shared/ImageEditor.svelte

@@ -1,351 +1,634 @@
-<script context="module">import {} from "./utils/pixi";
-import {} from "./utils/commands";
-export const EDITOR_KEY = Symbol("editor");
-import {} from "./tools";
+<script context="module">export const EDITOR_KEY = Symbol("editor");
 </script>
 
-<script>import { onMount, setContext, createEventDispatcher, tick } from "svelte";
-import { writable } from "svelte/store";
-import { spring } from "svelte/motion";
-import { Rectangle } from "pixi.js";
-import { command_manager } from "./utils/commands";
-import {} from "./layers/utils";
-import { create_pixi_app } from "./utils/pixi";
+<script>import { onMount, createEventDispatcher, tick } from "svelte";
+import Toolbar, {} from "./Toolbar.svelte";
+import { CropTool } from "./crop/crop";
+import { ResizeTool } from "./resize/resize";
+import { Webcam } from "@gradio/image";
+import tinycolor, {} from "tinycolor2";
+import { ZoomTool } from "./zoom/zoom";
+import {} from "./utils/commands";
+import { ImageEditor } from "./core/editor";
+import {} from "./brush/types";
+import { BrushTool } from "./brush/brush";
+import { create_drag } from "@gradio/upload";
+import SecondaryToolbar from "./SecondaryToolbar.svelte";
+import { Check } from "@gradio/icons";
+import {} from "./types";
 import Controls from "./Controls.svelte";
-export let antialias = true;
-export let crop_size;
-export let changeable = false;
-export let history;
-export let bg = false;
-export let sources;
+import IconButton from "./IconButton.svelte";
+const { drag, open_file_upload } = create_drag();
 const dispatch = createEventDispatcher();
-export let crop_constraint = false;
+export const antialias = true;
+export const full_history = null;
+export let changeable = false;
+export let sources = ["upload", "webcam", "clipboard"];
+export let transforms = ["crop", "resize"];
 export let canvas_size;
-export let parent_height;
-export let full_history = null;
-$:
-  orig_canvas_size = canvas_size;
-const BASE_DIMENSIONS = canvas_size || [800, 600];
-let dimensions = writable(BASE_DIMENSIONS);
-export let height = 0;
-let editor_box = writable({
-  parent_width: 0,
-  parent_height,
-  parent_top: 0,
-  parent_left: 0,
-  parent_right: 0,
-  parent_bottom: 0,
-  child_width: 0,
-  child_height: parent_height,
-  child_top: 0,
-  child_left: 0,
-  child_right: 0,
-  child_bottom: 0
-});
-export let canvas_height = void 0;
-$:
-  height = $editor_box.child_height;
+export let is_dragging = false;
+export let background_image = false;
+export let brush_options;
+export let eraser_options;
+export let fixed_canvas = false;
+export let root;
+export let i18n;
+export let upload;
+export let composite;
+export let layers;
+export let background;
+export let border_region = 0;
+export let layer_options;
+export let current_tool;
+export let webcam_options;
+export let show_download_button = false;
+export let theme_mode;
+let pixi_target;
+let pixi_target_crop;
 $:
-  canvas_height = $editor_box.child_height + 1;
-const crop = writable([0, 0, 1, 1]);
-const position_spring = spring(
-  { x: 0, y: 0 },
-  {
-    stiffness: 0.1,
-    damping: 0.5
+  if (layer_options) {
+    if (check_if_should_init()) {
+      editor.set_layer_options(layer_options);
+      refresh_tools();
+    }
+  }
+function refresh_tools() {
+  editor.set_tool(current_tool);
+  editor.set_subtool(current_subtool);
+}
+function check_if_should_init() {
+  return layer_options && editor && ready;
+}
+export let has_drawn = false;
+export async function get_blobs() {
+  if (!editor)
+    return { background: null, layers: [], composite: null };
+  if (!background_image && !has_drawn && !layers.length)
+    return { background: null, layers: [], composite: null };
+  const blobs = await editor.get_blobs();
+  return blobs;
+}
+let editor;
+export function add_image(image) {
+  editor.add_image({ image });
+}
+let pending_bg;
+export async function add_image_from_url(source) {
+  if (!editor || !source || !check_if_should_init())
+    return;
+  let url;
+  if (typeof source === "string") {
+    url = source;
+  } else if (source?.meta?._type === "gradio.FileData" && source?.url) {
+    url = source.url;
+  } else {
+    console.warn("Invalid source provided to add_image_from_url:", source);
+    return;
   }
-);
-const pixi = writable(null);
-const CommandManager = command_manager();
-const { can_redo, can_undo, current_history } = CommandManager;
-function get_start_history(history2) {
-  if (history2.previous) {
-    return get_start_history(history2.previous);
+  try {
+    pending_bg = editor.add_image_from_url(url);
+    let pending_crop = crop.add_image_from_url(url);
+    await Promise.all([pending_bg, pending_crop]);
+    crop.set_tool("image");
+    crop.set_subtool("crop");
+    background_image = true;
+    dispatch("upload");
+    dispatch("input");
+  } catch (error) {
+    console.error("Error adding image from URL:", error);
   }
-  return history2;
 }
-$:
-  $current_history.previous, dispatch("change");
-$:
-  dispatch("history", get_start_history($current_history));
-$: {
-  history = !!$current_history.previous || $active_tool !== "bg";
+export async function add_layers_from_url(source) {
+  if (!editor || !source.length || !check_if_should_init())
+    return;
+  if (Array.isArray(source) && source.every((item) => item?.meta?._type === "gradio.FileData")) {
+    try {
+      await pending_bg;
+      await editor.add_layers_from_url(source.map((item) => item.url));
+      dispatch("change");
+      dispatch("input");
+    } catch (error) {
+      console.error("Error adding layer from URL:", error);
+    }
+  }
 }
-const is_browser = typeof window !== "undefined";
-const active_tool = writable("bg");
-const reset_context = writable({});
-const init_context = writable({});
-const contexts = writable([]);
-const toolbar_box = writable(
-  is_browser ? new DOMRect() : {}
-);
-const sort_order = ["bg", "layers", "crop", "draw", "erase"];
-const editor_context = setContext(EDITOR_KEY, {
-  pixi,
-  current_layer: writable(null),
-  dimensions,
-  editor_box,
-  toolbar_box,
-  active_tool,
-  crop,
-  position_spring,
-  command_manager: CommandManager,
-  current_history,
-  register_context: (type, {
-    reset_fn,
-    init_fn
-  }) => {
-    contexts.update((c) => [...c, type]);
-    init_context.update((c) => ({ ...c, [type]: init_fn }));
-    reset_context.update((c) => ({ ...c, [type]: reset_fn }));
-  },
-  reset: (clear_image, dimensions2) => {
-    bg = false;
-    const _sorted_contexts = $contexts.sort((a, b) => {
-      return sort_order.indexOf(a) - sort_order.indexOf(b);
+let brush;
+let zoom;
+let zoom_level = 1;
+let ready = false;
+let mounted = false;
+let min_zoom = true;
+let last_dimensions = { width: 0, height: 0 };
+async function handle_visibility_change() {
+  if (!editor || !ready || !zoom)
+    return;
+  await tick();
+  const is_visible = pixi_target.offsetParent !== null;
+  if (is_visible) {
+    const current_dimensions = pixi_target.getBoundingClientRect();
+    if (current_dimensions.width !== last_dimensions.width || current_dimensions.height !== last_dimensions.height) {
+      zoom.set_zoom("fit");
+      last_dimensions = {
+        width: current_dimensions.width,
+        height: current_dimensions.height
+      };
+    }
+  }
+}
+onMount(() => {
+  let intersection_observer;
+  let resize_observer;
+  init_image_editor().then(() => {
+    mounted = true;
+    intersection_observer = new IntersectionObserver(() => {
+      handle_visibility_change();
     });
-    for (const k of _sorted_contexts) {
-      if (k in $reset_context && typeof $reset_context[k] === "function") {
-        $reset_context[k]?.();
-      }
+    resize_observer = new ResizeObserver(() => {
+      handle_visibility_change();
+    });
+    intersection_observer.observe(pixi_target);
+    resize_observer.observe(pixi_target);
+  });
+  return () => {
+    if (intersection_observer) {
+      intersection_observer.disconnect();
     }
-    for (const k of _sorted_contexts) {
-      if (k in $init_context && typeof $init_context[k] === "function") {
-        if (k === "bg" && !clear_image) {
-          continue;
-        } else {
-          $init_context[k]?.(dimensions2);
-        }
-      }
-      CommandManager.reset();
-      $pixi?.resize?.(...dimensions2);
+    if (resize_observer) {
+      resize_observer.disconnect();
     }
-  }
+    if (editor) {
+      editor.destroy();
+    }
+  };
 });
-let pixi_target;
-let canvas_wrap;
-function get_dimensions(parent, child) {
-  if (!parent || !child)
-    return;
-  const {
-    width: parent_width,
-    height: parent_height2,
-    top: parent_top,
-    left: parent_left,
-    right: parent_right,
-    bottom: parent_bottom
-  } = canvas_wrap.getBoundingClientRect();
-  const {
-    width: child_width,
-    height: child_height,
-    top: child_top,
-    left: child_left,
-    right: child_right,
-    bottom: child_bottom
-  } = child.getBoundingClientRect();
-  editor_box.set({
-    child_width,
-    child_height,
-    child_left,
-    child_right,
-    child_top,
-    child_bottom,
-    parent_width,
-    parent_height: parent_height2,
-    parent_left,
-    parent_right,
-    parent_top,
-    parent_bottom
+let crop;
+let crop_zoom;
+async function init_image_editor() {
+  brush = new BrushTool();
+  zoom = new ZoomTool();
+  editor = new ImageEditor({
+    target_element: pixi_target,
+    width: canvas_size[0],
+    height: canvas_size[1],
+    tools: ["image", zoom, new ResizeTool(), brush],
+    fixed_canvas,
+    border_region,
+    layer_options,
+    theme_mode
+  });
+  brush.on("change", () => {
+    has_drawn = true;
+  });
+  crop_zoom = new ZoomTool();
+  crop = new ImageEditor({
+    target_element: pixi_target_crop,
+    width: canvas_size[0],
+    height: canvas_size[1],
+    tools: ["image", crop_zoom, new CropTool()],
+    dark: true,
+    fixed_canvas: false,
+    border_region: 0,
+    pad_bottom: 40
+  });
+  editor.scale.subscribe((_scale) => {
+    zoom_level = _scale;
+  });
+  editor.min_zoom.subscribe((is_min_zoom) => {
+    min_zoom = is_min_zoom;
+  });
+  editor.dimensions.subscribe((dimensions) => {
+    last_dimensions = { ...dimensions };
+  });
+  await Promise.all([editor.ready, crop.ready]).then(() => {
+    handle_tool_change({ tool: "image" });
+    ready = true;
+    if (sources.length > 0) {
+      handle_tool_change({ tool: "image" });
+    } else {
+      handle_tool_change({ tool: "draw" });
+    }
+    crop.set_subtool("crop");
   });
+  editor.on("change", () => {
+    dispatch("change");
+  });
+  if (background || layers.length > 0) {
+    if (background) {
+      await add_image_from_url(background);
+    }
+    if (layers.length > 0) {
+      await add_layers_from_url(layers);
+    }
+    handle_tool_change({ tool: "draw" });
+  } else if (composite) {
+    await add_image_from_url(composite);
+    handle_tool_change({ tool: "draw" });
+  }
 }
 $:
-  if (crop_constraint && bg && !history) {
-    set_crop();
+  if (background == null && layers.length == 0 && composite == null && editor && ready) {
+    editor.reset_canvas();
+    handle_tool_change({ tool: "image" });
+    background_image = false;
+    has_drawn = false;
   }
-function set_crop() {
-  requestAnimationFrame(() => {
-    tick().then((v) => $active_tool = "crop");
-  });
-}
-function reposition_canvas() {
-  if (!$editor_box)
+$:
+  current_tool === "image" && current_subtool === "crop" && crop_zoom.set_zoom("fit");
+async function handle_files(files) {
+  if (files == null)
     return;
-  const [l, t, w, h] = $crop;
-  const cx = 0;
-  const cy = 0;
-  const cw = $editor_box.child_width;
-  const ch = $editor_box.child_height;
-  const x = 0.5 * $editor_box.child_width - cx - cw / 2;
-  const y = 0.5 * $editor_box.child_height - cy - ch / 2;
-  position_spring.set({ x, y });
-}
-export async function get_blobs() {
-  if (!$pixi || !$pixi.get_layers)
-    return { background: null, layers: [], composite: null };
-  const [l, t, w, h] = $crop;
-  return $pixi?.get_blobs(
-    $pixi.get_layers(),
-    new Rectangle(
-      Math.round(0),
-      Math.round(0),
-      Math.round(1 * $dimensions[0]),
-      Math.round(1 * $dimensions[1])
-    ),
-    $dimensions
-  );
+  if (!sources.includes("upload"))
+    return;
+  const _file = Array.isArray(files) ? files[0] : files;
+  await editor.add_image({ image: _file });
+  await crop.add_image({ image: _file });
+  crop.reset();
+  background_image = true;
+  handle_tool_change({ tool: "draw" });
+  dispatch("upload");
+  dispatch("input");
+  dispatch("change");
 }
-$:
-  $crop && reposition_canvas();
-$:
-  $position_spring && get_dimensions(canvas_wrap, pixi_target);
-export function handle_remove() {
-  editor_context.reset(
-    true,
-    orig_canvas_size ? orig_canvas_size : $dimensions
-  );
-  if (!sources.length) {
-    set_tool("draw");
-  } else {
-    set_tool("bg");
+function handle_tool_change({ tool }) {
+  editor.set_tool(tool);
+  current_tool = tool;
+  if (tool === "image") {
+    crop.set_tool("image");
+    crop.set_subtool("crop");
   }
-  dispatch("clear");
-  let _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
-  editor_context.reset(true, _size);
 }
-onMount(() => {
-  const _size = (canvas_size ? canvas_size : crop_size) || [800, 600];
-  const app = create_pixi_app({
-    target: pixi_target,
-    dimensions: _size,
-    antialias
-  });
-  function resize(width, height2) {
-    app.resize(width, height2);
-    dimensions.set([width, height2]);
+function handle_subtool_change({
+  tool,
+  subtool
+}) {
+  editor.set_subtool(subtool);
+  current_subtool = subtool;
+  if (subtool === null) {
+    return;
   }
-  pixi.set({ ...app, resize });
-  const resizer = new ResizeObserver((entries) => {
-    for (const entry of entries) {
-      get_dimensions(canvas_wrap, pixi_target);
-    }
-  });
-  resizer.observe(canvas_wrap);
-  resizer.observe(pixi_target);
-  for (const k of $contexts) {
-    if (k in $init_context && typeof $init_context[k] === "function") {
-      $init_context[k]?.($dimensions);
+  if (tool === "draw") {
+    if (subtool === "size") {
+      brush_size_visible = true;
+    } else if (subtool === "color") {
+      brush_color_visible = true;
     }
   }
-  resize(...$dimensions);
-  tick().then(() => {
-    if (full_history) {
-      CommandManager.hydrate(full_history);
+  if (tool === "erase" && subtool === "size") {
+    eraser_size_visible = true;
+  }
+  if (tool === "image" && subtool === "paste") {
+    process_clipboard();
+  }
+  if (tool === "image" && subtool === "upload") {
+    tick().then(() => {
+      disable_click = false;
+      open_file_upload();
+    });
+  }
+}
+let eraser_size_visible = false;
+let selected_color;
+let selected_size;
+let selected_opacity = 1;
+let selected_eraser_size;
+$: {
+  if (brush_options) {
+    update_brush_options();
+  }
+  if (eraser_options) {
+    update_eraser_options();
+  }
+}
+function update_brush_options() {
+  const default_color = brush_options.default_color === "auto" ? brush_options.colors[0] : brush_options.default_color;
+  if (Array.isArray(default_color)) {
+    selected_color = default_color[0];
+    selected_opacity = default_color[1];
+  } else {
+    selected_color = default_color;
+    const color = tinycolor(default_color);
+    if (color.getAlpha() < 1) {
+      selected_opacity = color.getAlpha();
+    } else {
+      selected_opacity = 1;
     }
-  });
-  return () => {
-    $pixi?.destroy();
-    resizer.disconnect();
-    for (const k of $contexts) {
-      if (k in $reset_context) {
-        $reset_context[k]?.();
+  }
+  selected_size = typeof brush_options.default_size === "number" ? brush_options.default_size : 25;
+}
+function update_eraser_options() {
+  selected_eraser_size = eraser_options.default_size === "auto" ? 25 : eraser_options.default_size;
+}
+let brush_size_visible = false;
+let brush_color_visible = false;
+$:
+  brush?.set_brush_color(
+    (() => {
+      let color_value;
+      if (selected_color === "auto") {
+        const default_color = brush_options.colors.find(
+          (color) => Array.isArray(color) ? color[0] === brush_options.default_color : color === brush_options.default_color
+        ) || brush_options.colors[0];
+        color_value = Array.isArray(default_color) ? default_color[0] : default_color;
+      } else {
+        color_value = selected_color;
       }
+      return color_value;
+    })()
+  );
+$:
+  brush?.set_brush_size(
+    typeof selected_size === "number" ? selected_size : 25
+  );
+$:
+  brush?.set_eraser_size(
+    typeof selected_eraser_size === "number" ? selected_eraser_size : 25
+  );
+$:
+  disable_click = current_tool !== "image" || current_tool === "image" && background_image || current_tool === "image" && current_subtool === "webcam" || !sources.includes("upload");
+let current_subtool = null;
+let preview = false;
+$:
+  brush?.preview_brush(preview);
+$:
+  brush?.set_brush_opacity(selected_opacity);
+function handle_zoom_change(zoom_level2) {
+  zoom.set_zoom(zoom_level2);
+}
+function zoom_in_out(direction) {
+  zoom.set_zoom(
+    direction === "in" ? zoom_level + (zoom_level < 1 ? 0.1 : zoom_level * 0.1) : zoom_level - (zoom_level < 1 ? 0.1 : zoom_level * 0.1)
+  );
+}
+async function process_clipboard() {
+  const items = await navigator.clipboard.read();
+  for (let i = 0; i < items.length; i++) {
+    const type = items[i].types.find((t) => t.startsWith("image/"));
+    if (type) {
+      const blob = await items[i].getType(type);
+      handle_files(blob);
     }
-  };
-});
-let saved_history = $current_history;
+  }
+}
+function handle_capture(e) {
+  if (e.detail !== null) {
+    handle_files(e.detail);
+  }
+  handle_subtool_change({ tool: current_tool, subtool: null });
+}
 function handle_save() {
-  saved_history = $current_history;
   dispatch("save");
 }
-export function set_tool(tool) {
-  $active_tool = tool;
+$:
+  add_image_from_url(composite || background);
+$:
+  add_layers_from_url(layers);
+async function handle_crop_confirm() {
+  const { image } = await crop.get_crop_bounds();
+  if (!image)
+    return;
+  await editor.add_image({
+    image,
+    resize: false
+  });
+  handle_subtool_change({ tool: "image", subtool: null });
+  dispatch("change");
+  dispatch("input");
+}
+async function handle_download() {
+  const blobs = await editor.get_blobs();
+  const blob = blobs.composite;
+  if (!blob) {
+    dispatch("download_error", "Unable to generate image to download.");
+    return;
+  }
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = "image.png";
+  link.click();
+  URL.revokeObjectURL(url);
 }
 </script>
 
-<svelte:window on:scroll={() => get_dimensions(canvas_wrap, pixi_target)} />
+<div
+	data-testid="image"
+	class="image-container"
+	class:dark-bg={current_subtool === "crop"}
+	use:drag={{
+		on_drag_change: (dragging) => (is_dragging = dragging),
+		on_files: handle_files,
+		accepted_types: "image/*",
+		disable_click: disable_click
+	}}
+	aria-label={"Click to upload or drop files"}
+	aria-dropeffect="copy"
+>
+	{#if ready}
+		{#if current_subtool !== "crop"}
+			<Controls
+				{changeable}
+				on:set_zoom={(e) => handle_zoom_change(e.detail)}
+				on:zoom_in={() => zoom_in_out("in")}
+				on:zoom_out={() => zoom_in_out("out")}
+				{min_zoom}
+				current_zoom={zoom_level}
+				on:remove_image={() => {
+					editor.reset_canvas();
+					handle_tool_change({ tool: "image" });
+					background_image = false;
+					has_drawn = false;
+				}}
+				tool={current_tool}
+				can_save={true}
+				on:save={handle_save}
+				on:pan={(e) => {
+					handle_tool_change({ tool: "pan" });
+				}}
+				enable_download={show_download_button}
+				on:download={() => handle_download()}
+			/>
+		{/if}
 
-<div data-testid="image" class="image-container">
-	<Controls
-		can_undo={$can_undo}
-		can_redo={$can_redo}
-		can_save={saved_history !== $current_history}
-		{changeable}
-		on:undo={CommandManager.undo}
-		on:redo={CommandManager.redo}
-		on:remove_image={handle_remove}
-		on:save={handle_save}
-	/>
-	<div class="container">
-		<div class="wrap" bind:this={canvas_wrap}>
-			<div bind:this={pixi_target} class="stage-wrap" class:bg={!bg}></div>
-		</div>
-		<div class="tools-wrap">
-			<slot />
+		{#if current_subtool !== "crop"}
+			<Toolbar
+				{sources}
+				{transforms}
+				background={background_image}
+				on:tool_change={(e) => handle_tool_change(e.detail)}
+				on:subtool_change={(e) => handle_subtool_change(e.detail)}
+				show_brush_size={brush_size_visible}
+				show_brush_color={brush_color_visible}
+				show_eraser_size={eraser_size_visible}
+				{brush_options}
+				{eraser_options}
+				bind:selected_color
+				bind:selected_size
+				bind:selected_eraser_size
+				bind:selected_opacity
+				bind:preview
+				tool={current_tool}
+				subtool={current_subtool}
+			/>
+		{/if}
+
+		{#if current_tool === "image" && current_subtool === "webcam"}
+			<div class="modal">
+				<div class="modal-inner">
+					<Webcam
+						{upload}
+						{root}
+						on:capture={handle_capture}
+						on:error
+						on:drag
+						streaming={false}
+						mode="image"
+						include_audio={false}
+						{i18n}
+						mirror_webcam={webcam_options.mirror}
+						webcam_constraints={webcam_options.constraints}
+					/>
+				</div>
+			</div>
+		{/if}
+
+		{#if current_subtool !== "crop" && !layer_options.disabled}
+			<SecondaryToolbar
+				enable_additional_layers={layer_options.allow_additional_layers}
+				layers={editor.layers}
+				on:new_layer={() => {
+					editor.add_layer();
+				}}
+				on:change_layer={(e) => {
+					editor.set_layer(e.detail);
+					if (current_tool === "draw") {
+						handle_tool_change({ tool: "draw" });
+					}
+				}}
+				on:move_layer={(e) => {
+					editor.move_layer(e.detail.id, e.detail.direction);
+				}}
+				on:delete_layer={(e) => {
+					editor.delete_layer(e.detail);
+				}}
+				on:toggle_layer_visibility={(e) => {
+					editor.toggle_layer_visibility(e.detail);
+				}}
+			/>
+		{/if}
+	{/if}
+	<div
+		class="pixi-target"
+		class:visible={current_subtool !== "crop"}
+		bind:this={pixi_target}
+	></div>
+	<div
+		class="pixi-target-crop"
+		class:visible={current_subtool === "crop"}
+		bind:this={pixi_target_crop}
+	></div>
+
+	{#if current_subtool === "crop"}
+		<div class="crop-confirm-button">
+			<IconButton
+				Icon={Check}
+				label="Confirm crop"
+				show_label={true}
+				size="large"
+				padded={true}
+				color="white"
+				background="var(--color-green-500)"
+				label_position="right"
+				on:click={handle_crop_confirm}
+			/>
 		</div>
-		<div
-			class="canvas"
-			class:no-border={!bg && $active_tool === "bg" && !history}
-			style:width="{$editor_box.child_width + 1}px"
-			style:height="{$editor_box.child_height + 1}px"
-			style:top="{$editor_box.child_top - $editor_box.parent_top - 0.5}px"
-			style:left="{$editor_box.child_left - $editor_box.parent_left - 0.5}px"
-		></div>
-	</div>
+	{/if}
+	<slot></slot>
 </div>
 
 <style>
-	.wrap {
+	.image-container {
 		display: flex;
-		width: 100%;
 		height: 100%;
-		position: relative;
+		flex-direction: column;
 		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+		border-radius: var(--radius-sm);
 	}
-	.canvas {
+
+	.pixi-target {
+		width: 100%;
+		height: 100%;
 		position: absolute;
-		border: var(--block-border-color) 1px solid;
+		top: 0;
+		left: 0;
+		z-index: 1;
+		display: block;
+		opacity: 0;
 		pointer-events: none;
-		border-radius: var(--radius-md);
+		border-radius: var(--radius-sm);
 	}
 
-	.container {
-		position: relative;
-		margin: var(--spacing-md);
-		/* in case the canvas_size is really small */
-		/* set min-height so that upload text does not cover the toolbar */
-		min-height: 100px;
+	.pixi-target-crop {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 2;
+		display: block;
+		opacity: 0;
+		pointer-events: none;
+		border-radius: var(--radius-sm);
 	}
 
-	.no-border {
-		border: none;
+	.visible {
+		opacity: 1;
+		pointer-events: auto;
 	}
 
-	.stage-wrap {
-		margin-bottom: var(--size-1);
-		border-radius: var(--radius-md);
+	.pixi-target {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
 		overflow: hidden;
-		height: fit-content;
-		width: auto;
 	}
 
-	.tools-wrap {
+	.modal {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		left: 0;
+		right: 0;
+		margin: auto;
+		z-index: var(--layer-top);
 		display: flex;
-		justify-content: center;
 		align-items: center;
-		padding: 0 var(--spacing-xl) 0 0;
-		border: 1px solid var(--block-border-color);
-		border-radius: var(--radius-sm);
-		margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
-		width: fit-content;
-		margin: 0 auto;
 	}
 
-	.image-container {
-		display: flex;
+	.modal-inner {
 		height: 100%;
-		flex-direction: column;
-		justify-content: center;
+		width: 100%;
+		background: var(--block-background-fill);
+	}
+
+	.dark-bg {
+		background: #333;
+	}
+
+	.crop-confirm-button {
+		position: absolute;
+		bottom: 8px;
+		left: 0;
+		right: 0;
+		margin: auto;
+		z-index: var(--layer-top);
+		display: flex;
 		align-items: center;
-		max-height: 100%;
+		justify-content: center;
 	}
 </style>