Skip to content

Commit

Permalink
Implement snapping for panes
Browse files Browse the repository at this point in the history
  • Loading branch information
Dlurak committed Jun 23, 2024
1 parent f606142 commit a3076b5
Showing 3 changed files with 67 additions and 11 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/format.yml → .github/workflows/lint.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
name: Linting & formatting
name: Lint

on:
push:
branches: ['master', 'actions']
branches: 'master'
workflow_dispatch:

jobs:
73 changes: 65 additions & 8 deletions src/lib/components/panes/Panes.svelte
Original file line number Diff line number Diff line change
@@ -1,18 +1,23 @@
<script context="module" lang="ts">
const isTouchEvent = (e: MouseEvent | TouchEvent): e is TouchEvent => 'touches' in e;
import { calculatePercentage } from '$lib/utils/math/percentages';
const isTouchEvent = (e: Event): e is TouchEvent => 'touches' in e;
interface Props {
setPos: (p: number) => void;
getPos: () => number;
setShowSideBar: (show: boolean) => void;
setPercentages: (p: number) => void;
min: number;
max: number;
}
const handleMouseDownOrTouchStart =
({ setPos, getPos, min, max }: Props) =>
({ setPos, getPos, setShowSideBar, setPercentages, min, max }: Props) =>
(e: MouseEvent | TouchEvent) => {
let isDragging = true;
let initialPosition = isTouchEvent(e) ? e.touches[0].clientX : e.clientX;
let percentage = 0;
const handleMouseMoveOrTouchMove = (e: MouseEvent | TouchEvent) => {
if (!isDragging) return;
@@ -21,19 +26,32 @@
const delta = clientX - initialPosition;
const potentialPos = getPos() + delta;
if (potentialPos <= min) {
percentage = Math.min(
calculatePercentage((potentialPos - min) * -1, ((min - min / 3) / 5) * 4),
100
);
setPercentages(percentage);
return setPos(min);
}
percentage = 0;
setPercentages(percentage);
if (potentialPos >= max) return setPos(max);
if (potentialPos <= min) return setPos(min);
setPos(potentialPos);
initialPosition = clientX;
};
const handleMouseUpOrTouchEnd = () => {
isDragging = false;
document.removeEventListener('mousemove', handleMouseMoveOrTouchMove);
document.removeEventListener('touchmove', handleMouseMoveOrTouchMove);
document.removeEventListener('mouseup', handleMouseUpOrTouchEnd);
document.removeEventListener('touchend', handleMouseUpOrTouchEnd);
isDragging = false;
if (percentage >= 70) setShowSideBar(false);
percentage = 0;
setPercentages(percentage);
};
document.addEventListener('mousemove', handleMouseMoveOrTouchMove);
@@ -45,38 +63,77 @@

<script lang="ts">
import { clamp } from '$lib/utils/numbers/clamp';
import { ArrowLeft, ChevronLeft, Icon } from 'svelte-hero-icons';
import QuickAction from '../buttons/QuickAction.svelte';
export let min = 120;
export let max = 550;
export let position = clamp(min, 160, max);
export let showSidebar = true;
let percentageCollapsing = 0;
const handler = handleMouseDownOrTouchStart({
max,
min,
setPos: (p) => (position = p),
getPos: () => position
getPos: () => position,
setShowSideBar: (b) => (showSidebar = b),
setPercentages: (p) => (percentageCollapsing = p)
});
</script>

<div
class="grid h-full w-full max-w-full grid-cols-1 grid-rows-1 gap-2 md:grid-cols-[var(--w),1fr]"
class="grid h-full w-full max-w-full grid-cols-1 grid-rows-1 gap-2"
class:md:grid-cols-[var(--w),1fr]={showSidebar}
class:grid-cols-1={!showSidebar}
style:--w={`${position}px`}
>
<div class="h-full">
<div class="relative flex h-full flex-col gap-2 px-2 py-1" class:hidden={!showSidebar}>
<div class="hidden md:inline-block">
<QuickAction
icon={ChevronLeft}
small
on:click={() => {
showSidebar = false;
}}
/>
</div>

<slot name="a" />

<div
class="absolute inset-0 flex h-full w-full items-center justify-center rounded bg-black bg-opacity-[--effect]"
class:hidden={percentageCollapsing === 0}
style:--effect={Math.round(percentageCollapsing) / 100}
>
<div class="aspect-square scale-[--effect] rounded-full bg-emerald-300 p-2">
<Icon src={ArrowLeft} class="h-7 w-7" small />
</div>
</div>
</div>

<div class="flex h-full w-full max-w-full gap-2 overflow-hidden">
<button
class="hidden cursor-col-resize px-1 md:inline-block"
class:md:hidden={!showSidebar}
tabindex="-1"
on:mousedown={handler}
on:touchstart={handler}
>
<div class="h-full w-1 rounded-full bg-zinc-200 touch:w-1.5 dark:bg-zinc-700" />
</button>

<div class="flex w-full max-w-full overflow-hidden p-1">
<div class="flex w-full max-w-full flex-col gap-2 overflow-hidden p-1">
<div class="hidden md:inline-block" class:md:hidden={showSidebar}>
<QuickAction
icon={ChevronLeft}
small
on:click={() => {
showSidebar = true;
}}
/>
</div>
<slot name="b" />
</div>
</div>
1 change: 0 additions & 1 deletion src/lib/components/select/NotTyppable.svelte
Original file line number Diff line number Diff line change
@@ -4,7 +4,6 @@
import { flip, offset, shift } from '@floating-ui/core';
import { createFloatingActions } from 'svelte-floating-ui';
import { ChevronDown, Icon } from 'svelte-hero-icons';
import QuickAction from '../buttons/QuickAction.svelte';
import Frame from '../input/Frame.svelte';
import type { Readable } from 'svelte/store';
import Store from '../utils/Store.svelte';

0 comments on commit a3076b5

Please sign in to comment.