@gradio/imageeditor 0.9.0 → 0.10.1

package/dist/shared/tools/ColorSwatch.svelte

@@ -0,0 +1,183 @@
+<script>import tinycolor from "tinycolor2";
+import { createEventDispatcher } from "svelte";
+export let selected_color;
+export let colors;
+export let user_colors = [];
+import { Palette } from "@gradio/icons";
+export let show_empty = false;
+export let current_mode = "hex";
+export let color_picker = false;
+const dispatch = createEventDispatcher();
+$:
+  _colors = show_empty ? colors : colors.filter((c) => c);
+function get_formatted_color(color, mode) {
+  if (mode === "hex") {
+    return tinycolor(color).toHexString();
+  } else if (mode === "rgb") {
+    return tinycolor(color).toRgbString();
+  }
+  return tinycolor(color).toHslString();
+}
+let current_index = `select-${colors.findIndex(
+  (c) => get_formatted_color(c, current_mode) === get_formatted_color(selected_color, current_mode)
+)}`;
+function handle_select(type, detail) {
+  current_index = `${type}-${detail.index}`;
+  dispatch(type, detail);
+}
+function handle_picker_click() {
+  dispatch("select", { index: null, color: selected_color });
+  color_picker = !color_picker;
+}
+</script>
+
+{#if !color_picker}
+	<span class:lg={user_colors}></span>
+{/if}
+
+<div class="swatch-wrap">
+	<span class="icon-wrap">
+		<Palette />
+	</span>
+	<div>
+		{#if user_colors}
+			<div class="swatch">
+				{#each user_colors as color, i}
+					<button
+						on:click={() => handle_select("edit", { index: i, color })}
+						class="color"
+						class:empty={color === null}
+						style="background-color: {color}"
+						class:selected={`edit-${i}` === current_index}
+					></button>
+				{/each}
+
+				<button
+					on:click={handle_picker_click}
+					class="color colorpicker"
+					class:hidden={!color_picker}
+				></button>
+			</div>
+		{/if}
+		<menu class="swatch">
+			{#each _colors as color, i}
+				<button
+					on:click={() => handle_select("select", { index: i, color })}
+					class="color"
+					class:empty={color === null}
+					style="background-color: {color}"
+					class:selected={`select-${i}` === current_index}
+				></button>
+			{/each}
+		</menu>
+	</div>
+</div>
+
+<style>
+	.icon-wrap {
+		width: 18px;
+		margin-top: 6px;
+
+		margin-left: var(--size-4);
+	}
+
+	.swatch-wrap {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+	}
+	span {
+		margin-top: 0px;
+	}
+
+	span.lg {
+		margin-top: var(--spacing-xl);
+	}
+	.swatch {
+		display: flex;
+		gap: var(--size-2-5);
+		justify-content: space-around;
+		margin-bottom: var(--size-2);
+		margin-right: var(--size-6);
+		padding-left: var(--size-2);
+	}
+
+	.empty {
+		border: 1px solid var(--block-border-color);
+		font-weight: var(--weight-bold);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding-top: 4px;
+		text-align: center;
+		font-size: var(--scale-0);
+		cursor: pointer;
+	}
+
+	.empty::after {
+		content: "+";
+		margin-bottom: var(--size-1);
+	}
+
+	.color {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+	}
+
+	.empty.selected,
+	.color.selected {
+		border: 2px solid var(--color-accent);
+	}
+
+	.colorpicker {
+		border: 1px solid var(--block-border-color);
+
+		background: conic-gradient(
+			red,
+			#ff0 60deg,
+			lime 120deg,
+			cyan 180deg,
+			blue 240deg,
+			magenta 300deg,
+			red 360deg
+		);
+		overflow: hidden;
+		position: relative;
+		color: white;
+		cursor: pointer;
+	}
+
+	.colorpicker::before {
+		content: "";
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.6);
+		opacity: 1;
+		transition: 0.1s;
+		top: 0;
+		left: 0;
+	}
+
+	.colorpicker::after {
+		display: flex;
+		justify-content: center;
+		align-content: center;
+		content: "⨯";
+		color: white;
+		font-size: var(--scale-5);
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		transform: translateY(-17px);
+		opacity: 1;
+		transition: 0.1s;
+		top: 0;
+	}
+
+	.colorpicker.hidden::after,
+	.colorpicker.hidden::before {
+		opacity: 0;
+	}
+</style>

package/dist/shared/tools/ColorSwatch.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        selected_color: string;
+        colors: string[];
+        user_colors?: ((string | null)[] | null) | undefined;
+        show_empty?: boolean | undefined;
+        current_mode?: ("hex" | "rgb" | "hsl") | undefined;
+        color_picker?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<{
+            index: number | null;
+            color: string | null;
+        }>;
+        edit: CustomEvent<{
+            index: number;
+            color: string | null;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColorSwatchProps = typeof __propDef.props;
+export type ColorSwatchEvents = typeof __propDef.events;
+export type ColorSwatchSlots = typeof __propDef.slots;
+export default class ColorSwatch extends SvelteComponent<ColorSwatchProps, ColorSwatchEvents, ColorSwatchSlots> {
+}
+export {};

package/dist/shared/tools/Crop.svelte

@@ -0,0 +1,155 @@
+<script>import { getContext, onDestroy, onMount, tick } from "svelte";
+import { TOOL_KEY } from "./Tools.svelte";
+import { EDITOR_KEY } from "../ImageEditor.svelte";
+import { crop_canvas, resize_and_reposition } from "./crop";
+import Cropper from "./Cropper.svelte";
+const { active_tool, register_tool } = getContext(TOOL_KEY);
+const {
+  dimensions,
+  editor_box,
+  pixi,
+  crop,
+  command_manager,
+  current_history
+} = getContext(EDITOR_KEY);
+let cropper;
+export let crop_constraint;
+let _crop_constraint = null;
+$: {
+  if (typeof crop_constraint === "string") {
+    const [w, h] = crop_constraint.split(":");
+    _crop_constraint = parseInt(w) / parseInt(h);
+  } else if (Array.isArray(crop_constraint)) {
+    _crop_constraint = crop_constraint[0] / crop_constraint[1];
+  }
+}
+let w_p = 1;
+let h_p = 1;
+let l_p = 0;
+let t_p = 0;
+let current_opacity = 0;
+let manually_cropped = false;
+$: {
+  if (!manually_cropped && _crop_constraint && $pixi && $active_tool) {
+    requestAnimationFrame(() => {
+      initial_crop();
+    });
+  }
+}
+let c = null;
+async function initial_crop() {
+  if (c || $current_history.previous)
+    return;
+  const { new_height, new_width, x_offset, y_offset } = resize_and_reposition(
+    $editor_box.child_width,
+    $editor_box.child_height,
+    "c",
+    _crop_constraint,
+    $editor_box.child_width,
+    $editor_box.child_height
+  );
+  w_p = new_width / $editor_box.child_width;
+  h_p = new_height / $editor_box.child_height;
+  l_p = x_offset / $editor_box.child_width;
+  t_p = y_offset / $editor_box.child_height;
+  c = crop_canvas($pixi.renderer, $pixi.mask_container, crop, 0.2);
+  c.start(...$dimensions, current_crop, false);
+  c.continue(
+    [
+      l_p * $dimensions[0],
+      t_p * $dimensions[1],
+      w_p * $dimensions[0],
+      h_p * $dimensions[1]
+    ],
+    false
+  );
+  c.stop();
+  c.execute();
+  c = null;
+  current_opacity = 0;
+}
+function handle_crop(type, {
+  x,
+  y,
+  width,
+  height
+}) {
+  if (!$pixi)
+    return;
+  if (type === "start") {
+    if (cropper) {
+      current_opacity = cropper.stop();
+      cropper = null;
+    }
+    cropper = crop_canvas(
+      $pixi?.renderer,
+      $pixi.mask_container,
+      crop,
+      current_opacity
+    );
+    cropper.start(...$dimensions, current_crop);
+  } else if (type === "continue") {
+    if (!cropper)
+      return;
+    cropper.continue([
+      x * $dimensions[0],
+      y * $dimensions[1],
+      width * $dimensions[0],
+      height * $dimensions[1]
+    ]);
+  } else if (type === "stop") {
+    if (!cropper)
+      return;
+    command_manager.execute(cropper);
+  }
+  manually_cropped = true;
+}
+let measured = false;
+function get_measurements() {
+  if (measured)
+    return;
+  if (!$editor_box.child_height)
+    return;
+  const _height = $editor_box.child_height;
+  const _width = $editor_box.child_width;
+  const _top = $editor_box.child_top - $editor_box.parent_top;
+  const _left = $editor_box.child_left - $editor_box.parent_left;
+  w_p = _width / $editor_box.child_width;
+  h_p = _height / $editor_box.child_height;
+  l_p = (_left - $editor_box.child_left + $editor_box.parent_left) / $editor_box.child_width;
+  t_p = (_top - $editor_box.child_top + $editor_box.parent_top) / $editor_box.child_height;
+  measured = true;
+}
+let current_crop;
+$:
+  current_crop = [
+    l_p * $dimensions[0],
+    t_p * $dimensions[1],
+    w_p * $dimensions[0],
+    h_p * $dimensions[1]
+  ];
+$: {
+  l_p = $crop[0];
+  t_p = $crop[1];
+  w_p = $crop[2];
+  h_p = $crop[3];
+}
+$:
+  $editor_box && get_measurements();
+const unregister = register_tool("crop");
+onDestroy(unregister);
+</script>
+
+{#if $active_tool === "crop" && measured}
+	<Cropper
+		crop_constraint={_crop_constraint}
+		{w_p}
+		{h_p}
+		{l_p}
+		{t_p}
+		{editor_box}
+		on:crop_start={({ detail }) => handle_crop("start", detail)}
+		on:crop_continue={({ detail }) => handle_crop("continue", detail)}
+		on:crop_end={({ detail }) => handle_crop("stop", detail)}
+	/>
+{/if}

package/dist/shared/tools/Crop.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        crop_constraint: [number, number] | `${string}:${string}` | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CropProps = typeof __propDef.props;
+export type CropEvents = typeof __propDef.events;
+export type CropSlots = typeof __propDef.slots;
+export default class Crop extends SvelteComponent<CropProps, CropEvents, CropSlots> {
+}
+export {};

package/dist/shared/tools/Cropper.svelte

@@ -0,0 +1,271 @@
+<script>import { createEventDispatcher } from "svelte";
+import Handle from "./Handle.svelte";
+import {} from "../ImageEditor.svelte";
+import { clamp } from "../utils/pixi";
+import { resize_and_reposition } from "./crop";
+export let editor_box;
+export let crop_constraint;
+const dispatch = createEventDispatcher();
+let _height = $editor_box.child_height;
+let _width = $editor_box.child_width;
+let _top = $editor_box.child_top - $editor_box.parent_top;
+let _left = $editor_box.child_left - $editor_box.parent_left;
+let _right = $editor_box.child_right - $editor_box.parent_left;
+let _bottom = 0;
+let dragging = false;
+export let w_p;
+export let h_p;
+export let l_p;
+export let t_p;
+const positions = ["tl", "br", "tr", "bl", "t", "b", "l", "r"];
+let finished;
+let timer;
+let triggered = false;
+$: {
+  if (dragging || position_drag) {
+    clearTimeout(timer);
+    finished = false;
+  } else {
+    set_finished_with_timeout_and_delay();
+  }
+}
+function set_finished_with_timeout_and_delay() {
+  if (timer) {
+    clearTimeout(timer);
+  }
+  timer = setTimeout(() => {
+    if (triggered) {
+      dispatch("crop_end", {
+        x: l_p,
+        y: t_p,
+        width: w_p,
+        height: h_p
+      });
+      triggered = false;
+    }
+    finished = true;
+    position_drag = false;
+  }, 1e3);
+}
+function handle_change({
+  top,
+  bottom,
+  left,
+  right
+}, position) {
+  _top = clamp(
+    top ? top - $editor_box.parent_top : _top,
+    $editor_box.child_top - $editor_box.parent_top,
+    $editor_box.child_bottom - $editor_box.parent_top
+  );
+  _left = clamp(
+    left ? left - $editor_box.parent_left : _left,
+    $editor_box.child_left - $editor_box.parent_left,
+    $editor_box.child_right - $editor_box.parent_left
+  );
+  _right = clamp(
+    right ? right - $editor_box.parent_left : _right,
+    $editor_box.child_left - $editor_box.parent_left,
+    $editor_box.child_right - $editor_box.parent_left
+  );
+  _bottom = clamp(
+    bottom ? bottom - $editor_box.parent_top : _bottom,
+    $editor_box.child_top - $editor_box.parent_top,
+    $editor_box.child_bottom - $editor_box.parent_top
+  );
+  _width = clamp(
+    right ? right - _left - $editor_box.parent_left : _width,
+    0,
+    _right - _left
+  );
+  _width = clamp(
+    left ? _right - left + $editor_box.parent_left : _width,
+    0,
+    _right - _left
+  );
+  _height = clamp(
+    bottom ? bottom - _top - $editor_box.parent_top : _height,
+    0,
+    _bottom - _top
+  );
+  _height = clamp(
+    top ? _bottom - top + $editor_box.parent_top : _height,
+    0,
+    _bottom - _top
+  );
+  const anchors_for_position = {
+    tl: "br",
+    tr: "bl",
+    bl: "tr",
+    br: "tl",
+    t: "b",
+    b: "t",
+    l: "r",
+    r: "l",
+    c: "c"
+  };
+  if (crop_constraint) {
+    const max_w = ["t", "b"].includes(position) ? $editor_box.child_width : _right - _left;
+    const max_h = ["l", "r"].includes(position) ? $editor_box.child_height : _bottom - _top;
+    let result = resize_and_reposition(
+      _width,
+      _height,
+      anchors_for_position[position],
+      crop_constraint,
+      max_w,
+      max_h
+    );
+    _width = result.new_width;
+    _height = result.new_height;
+    _left = _left + result.x_offset;
+    _top = _top + result.y_offset;
+    _right = _left + _width;
+    _bottom = _top + _height;
+  }
+  w_p = _width / $editor_box.child_width;
+  h_p = _height / $editor_box.child_height;
+  l_p = (_left - $editor_box.child_left + $editor_box.parent_left) / $editor_box.child_width;
+  t_p = (_top - $editor_box.child_top + $editor_box.parent_top) / $editor_box.child_height;
+  dispatch(triggered ? "crop_continue" : "crop_start", {
+    x: l_p,
+    y: t_p,
+    width: w_p,
+    height: h_p
+  });
+  triggered = true;
+}
+function resize() {
+  _width = w_p * $editor_box.child_width;
+  _height = h_p * $editor_box.child_height;
+  _left = l_p * $editor_box.child_width + ($editor_box.child_left - $editor_box.parent_left);
+  _top = t_p * $editor_box.child_height + ($editor_box.child_top - $editor_box.parent_top);
+  _right = _left + _width;
+  _bottom = _top + _height;
+}
+$:
+  $editor_box && resize();
+let start_x = 0;
+let start_y = 0;
+let position_drag = false;
+function handle_drag_start(e) {
+  position_drag = true;
+  start_x = e.clientX;
+  start_y = e.clientY;
+  if (!finished)
+    return;
+  finished = false;
+  dispatch("crop_start", {
+    x: l_p,
+    y: t_p,
+    width: w_p,
+    height: h_p
+  });
+}
+function handle_drag_end(e) {
+  if (!position_drag)
+    return;
+  position_drag = false;
+}
+function handle_dragging(e) {
+  if (!position_drag)
+    return;
+  const x_delta = e.clientX - start_x;
+  const y_delta = e.clientY - start_y;
+  _left = clamp(
+    _left + x_delta,
+    $editor_box.child_left - $editor_box.parent_left,
+    $editor_box.child_right - $editor_box.parent_left - _width
+  );
+  _top = clamp(
+    _top + y_delta,
+    $editor_box.child_top - $editor_box.parent_top,
+    $editor_box.child_bottom - $editor_box.parent_top - _height
+  );
+  _right = _left + _width;
+  _bottom = _top + _height;
+  l_p = (_left - $editor_box.child_left + $editor_box.parent_left) / $editor_box.child_width;
+  t_p = (_top - $editor_box.child_top + $editor_box.parent_top) / $editor_box.child_height;
+  start_x = e.clientX;
+  start_y = e.clientY;
+  dispatch("crop_continue", {
+    x: l_p,
+    y: t_p,
+    width: w_p,
+    height: h_p
+  });
+  triggered = true;
+}
+</script>
+
+<svelte:window on:mousemove={handle_dragging} on:mouseup={handle_drag_end} />
+
+<div class="wrap">
+	<div
+		class="box"
+		style:width="{_width}px"
+		style:height="{_height}px"
+		style:top="{_top}px"
+		style:left="{_left}px"
+	>
+		{#each positions as position}
+			<Handle
+				on:change={({ detail }) => handle_change(detail, position)}
+				bind:dragging
+				location={position}
+			/>
+		{/each}
+
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="grid" class:finished on:mousedown={handle_drag_start}>
+			{#each { length: 25 } as _}
+				<div></div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.grid {
+		height: 100%;
+		width: 100%;
+		display: grid;
+		grid-template-rows: 1fr 1px 1fr 1px 1fr;
+		grid-template-columns: 1fr 1px 1fr 1px 1fr;
+		overflow: hidden;
+		transition: 0.2s;
+		opacity: 1;
+		/* pointer-events: none; */
+	}
+
+	.grid.finished {
+		opacity: 0;
+	}
+
+	.grid > div {
+		width: 100%;
+		height: 100%;
+	}
+
+	.grid > div:nth-of-type(even) {
+		background: black;
+		opacity: 0.5;
+	}
+
+	.wrap {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+		/* transform: translateY(-20px); */
+	}
+
+	.box {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		border: 1px solid black;
+		z-index: var(--layer-top);
+	}
+</style>

package/dist/shared/tools/Cropper.svelte.d.ts

@@ -0,0 +1,41 @@
+import { SvelteComponent } from "svelte";
+import { type EditorContext } from "../ImageEditor.svelte";
+declare const __propDef: {
+    props: {
+        editor_box: EditorContext["editor_box"];
+        crop_constraint: number | null;
+        w_p: number;
+        h_p: number;
+        l_p: number;
+        t_p: number;
+    };
+    events: {
+        crop_start: CustomEvent<{
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }>;
+        crop_continue: CustomEvent<{
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }>;
+        crop_end: CustomEvent<{
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CropperProps = typeof __propDef.props;
+export type CropperEvents = typeof __propDef.events;
+export type CropperSlots = typeof __propDef.slots;
+export default class Cropper extends SvelteComponent<CropperProps, CropperEvents, CropperSlots> {
+}
+export {};