@gradio/imageeditor 0.12.13 → 0.13.0

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

@@ -1,29 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type ColorInput } from "tinycolor2";
-export interface Eraser {
-    /**
-     * The default size of the eraser.
-     */
-    default_size: number | "auto";
-}
-export interface Brush extends Eraser {
-    /**
-     * The default color of the brush.
-     */
-    default_color: ColorInput;
-    /**
-     * The colors to show in the color swatch
-     */
-    colors: ColorInput[];
-    /**
-     * Whether to show _only_ the color swatches specified in `colors`, or to show the color swatches specified in `colors` along with the colorpicker.
-     */
-    color_mode: "fixed" | "defaults";
-}
-declare const __propDef: any;
-export type BrushProps = typeof __propDef.props;
-export type BrushEvents = typeof __propDef.events;
-export type BrushSlots = typeof __propDef.slots;
-export default class Brush extends SvelteComponent<BrushProps, BrushEvents, BrushSlots> {
-}
-export {};

package/dist/shared/tools/Crop.svelte

@@ -1,155 +0,0 @@
-<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.background_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.background_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

@@ -1,16 +0,0 @@
-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

@@ -1,271 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-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 {};