File size: 1,395 Bytes
0ad74ed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<script lang="ts">
import { click_outside } from "../utils/events";
import { createEventDispatcher } from "svelte";
import { BrushSize } from "@gradio/icons";
export let selected_size: number;
export let min: number;
export let max: number;
const dispatch = createEventDispatcher<{
click_outside: void;
}>();
let width = 0;
let height = 0;
let c_width = 0;
let c_height = 0;
let wrap_el: HTMLDivElement;
let anchor_right = false;
let anchor_top = false;
$: {
if (wrap_el && (width || height || c_height || c_width)) {
const box = wrap_el.getBoundingClientRect();
anchor_right = box.width + 30 > width / 2;
anchor_top = box.y < 80;
}
}
</script>
<svelte:window bind:innerHeight={height} bind:innerWidth={width} />
<div
class="wrap"
use:click_outside={() => dispatch("click_outside")}
bind:this={wrap_el}
bind:clientWidth={c_width}
bind:clientHeight={c_height}
class:right={anchor_right}
class:top={anchor_top}
class:bottom={!anchor_top}
>
<span>
<BrushSize />
</span>
<input type="range" bind:value={selected_size} {min} {max} step={1} />
</div>
<style>
.wrap {
width: 100%;
display: flex;
gap: var(--size-4);
background: var(--background-fill-secondary);
padding: 0 var(--size-4);
cursor: default;
padding-top: var(--size-2-5);
}
input {
width: 100%;
}
span {
width: 26px;
color: var(--body-text-color);
}
</style>
|