131 lines
2.9 KiB
Svelte
131 lines
2.9 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte/internal';
|
|
import { c, s } from 'services/utils';
|
|
|
|
export let mode = 'h';
|
|
export let basisFirst = 0.5;
|
|
export let basisSecond = 0.5;
|
|
export let minSize = 100;
|
|
|
|
let divide;
|
|
let dragging = false;
|
|
let size = 5;
|
|
let total = 0;
|
|
|
|
$: classes = c({
|
|
divide: true,
|
|
'divide--vertical': mode === 'v',
|
|
});
|
|
|
|
$: classesDivider = c({
|
|
divide__divider: true,
|
|
'divide__divider--vertical': mode === 'v',
|
|
});
|
|
|
|
$: style = s({
|
|
'--divide-size': `${size}px`,
|
|
'--divide-basis-first': `${basisFirst * 100}%`,
|
|
'--divide-basis-second': `${basisSecond * 100}%`,
|
|
'--divide-min-width': minSize > 0 && mode === 'h' ? `${minSize}px` : '0',
|
|
'--divide-min-height': minSize > 0 && mode === 'v' ? `${minSize}px` : '0',
|
|
});
|
|
|
|
function getTotal() {
|
|
return mode === 'h' ? divide.clientWidth : divide.clientHeight;
|
|
}
|
|
|
|
function handleMousedown(event) {
|
|
if (event.button === 0) {
|
|
dragging = true;
|
|
total = getTotal();
|
|
}
|
|
}
|
|
|
|
function handleMousemove(event) {
|
|
if (dragging) {
|
|
const dragPos =
|
|
mode === 'h' ? event.x - divide.getBoundingClientRect().x : event.y - divide.getBoundingClientRect().y;
|
|
basisFirst = dragPos / total;
|
|
basisSecond = 1 - basisFirst;
|
|
}
|
|
}
|
|
|
|
function handleMouseup() {
|
|
dragging = false;
|
|
}
|
|
|
|
function handleMouseenter(event) {
|
|
if (event.buttons !== 1) {
|
|
dragging = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.divide {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.divide__divider {
|
|
cursor: ew-resize;
|
|
width: var(--divide-size);
|
|
height: 100%;
|
|
background-color: var(--color-foreground);
|
|
}
|
|
|
|
.divide__divider:hover {
|
|
background-color: var(--color-foreground-light);
|
|
}
|
|
|
|
.divide__elem {
|
|
flex: 0 0 50%;
|
|
min-width: var(--divide-min-width);
|
|
max-width: calc(100% - var(--divide-size) - var(--divide-min-width));
|
|
min-height: var(--divide-min-height);
|
|
max-height: calc(100% - var(--divide-size) - var(--divide-min-height));
|
|
}
|
|
|
|
.divide__elem > :global(*) {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.divide__elem--first {
|
|
flex-basis: calc(var(--divide-basis-first) - var(--divide-size) / 2);
|
|
}
|
|
|
|
.divide__elem--second {
|
|
flex-basis: calc(var(--divide-basis-second) - var(--divide-size) / 2);
|
|
}
|
|
|
|
.divide--vertical {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.divide__divider--vertical {
|
|
cursor: ns-resize;
|
|
width: 100%;
|
|
height: var(--divide-size);
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
class="{classes}"
|
|
{style}
|
|
bind:this="{divide}"
|
|
on:mousemove|preventDefault="{handleMousemove}"
|
|
on:mouseup|preventDefault="{handleMouseup}"
|
|
on:mouseenter|preventDefault="{handleMouseenter}"
|
|
>
|
|
<div class="divide__elem divide__elem--first">
|
|
<slot name="1"></slot>
|
|
</div>
|
|
<div class="{classesDivider}" draggable="true" on:mousedown|preventDefault="{handleMousedown}"></div>
|
|
<div class="divide__elem divide__elem--second">
|
|
<slot name="2"></slot>
|
|
</div>
|
|
</div>
|