|
<script lang="ts"> |
|
import { createEventDispatcher } from "svelte"; |
|
import Handle from "./Handle.svelte"; |
|
import { type EditorContext } from "../ImageEditor.svelte"; |
|
import { clamp } from "../utils/pixi"; |
|
import { resize_and_reposition } from "./crop"; |
|
|
|
export let editor_box: EditorContext["editor_box"]; |
|
export let crop_constraint: number | null; |
|
|
|
const dispatch = createEventDispatcher<{ |
|
crop_start: { |
|
x: number; |
|
y: number; |
|
width: number; |
|
height: number; |
|
}; |
|
crop_continue: { |
|
x: number; |
|
y: number; |
|
width: number; |
|
height: number; |
|
}; |
|
crop_end: { |
|
x: number; |
|
y: number; |
|
width: number; |
|
height: number; |
|
}; |
|
}>(); |
|
|
|
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: number; |
|
export let h_p: number; |
|
export let l_p: number; |
|
export let t_p: number; |
|
|
|
const positions = ["tl", "br", "tr", "bl", "t", "b", "l", "r"] as const; |
|
|
|
let finished: boolean; |
|
|
|
let timer: NodeJS.Timeout; |
|
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(): void { |
|
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; |
|
}, 1000); |
|
} |
|
|
|
function handle_change( |
|
{ |
|
top, |
|
bottom, |
|
left, |
|
right |
|
}: { |
|
top: number | undefined; |
|
bottom: number | undefined; |
|
left: number | undefined; |
|
right: number | undefined; |
|
}, |
|
position: (typeof positions)[number] |
|
): void { |
|
_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" |
|
} as const; |
|
|
|
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(): void { |
|
_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: MouseEvent): void { |
|
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: MouseEvent): void { |
|
if (!position_drag) return; |
|
|
|
position_drag = false; |
|
} |
|
|
|
function handle_dragging(e: MouseEvent): void { |
|
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} |
|
|
|
|
|
<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; |
|
} |
|
</style> |
|
|
