From b5f752d8fb19946992bedd78b75b54d0c6ae5ff6 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Thu, 9 Mar 2023 12:56:13 -0500
Subject: [PATCH] upgrade <SplitPane> component - fixes #135

---
 package.json                            |   1 +
 pnpm-lock.yaml                          |  11 +-
 src/lib/components/SplitPane.svelte     | 256 ------------------------
 src/routes/tutorial/[slug]/+page.svelte |   2 +-
 4 files changed, 12 insertions(+), 258 deletions(-)
 delete mode 100644 src/lib/components/SplitPane.svelte

diff --git a/package.json b/package.json
index 72ae87ee9..1668bda1d 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/roboto-mono": "^4.5.10",
+		"@rich_harris/svelte-split-pane": "^1.0.0",
 		"@webcontainer/api": "^1.0.2",
 		"adm-zip": "^0.5.10",
 		"base64-js": "^1.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3b2b74667..ddb33e8a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,6 +3,7 @@ lockfileVersion: 5.4
 specifiers:
   '@fontsource/roboto-mono': ^4.5.10
   '@playwright/test': ^1.30.0
+  '@rich_harris/svelte-split-pane': ^1.0.0
   '@sveltejs/adapter-vercel': 2.0.4
   '@sveltejs/kit': ^1.7.2
   '@sveltejs/site-kit': ^3.2.2
@@ -31,6 +32,7 @@ specifiers:
 
 dependencies:
   '@fontsource/roboto-mono': 4.5.10
+  '@rich_harris/svelte-split-pane': 1.0.0_svelte@3.55.1
   '@webcontainer/api': 1.0.2
   adm-zip: 0.5.10
   base64-js: 1.5.1
@@ -530,6 +532,14 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@rich_harris/svelte-split-pane/1.0.0_svelte@3.55.1:
+    resolution: {integrity: sha512-nHc6DSIEoyiIAxfSBJkxJOvbUVhPA8HyWi6vzKGZcbQkCMuv6h29Qbotdzs12+zHDxWqECa0X9P0cYY4iDQimA==}
+    peerDependencies:
+      svelte: ^3.54.0
+    dependencies:
+      svelte: 3.55.1
+    dev: false
+
   /@rollup/pluginutils/4.2.1:
     resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
     engines: {node: '>= 8.0.0'}
@@ -1621,7 +1631,6 @@ packages:
   /svelte/3.55.1:
     resolution: {integrity: sha512-S+87/P0Ve67HxKkEV23iCdAh/SX1xiSfjF1HOglno/YTbSTW7RniICMCofWGdJJbdjw3S+0PfFb1JtGfTXE0oQ==}
     engines: {node: '>= 8'}
-    dev: true
 
   /tar/6.1.13:
     resolution: {integrity: sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==}
diff --git a/src/lib/components/SplitPane.svelte b/src/lib/components/SplitPane.svelte
deleted file mode 100644
index 7bc6d6faf..000000000
--- a/src/lib/components/SplitPane.svelte
+++ /dev/null
@@ -1,256 +0,0 @@
-<script>
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	/** @type {'horizontal' | 'vertical'} */
-	export let type;
-	export let pos = '50%';
-	export let disabled = false;
-	export let min = '0%';
-	export let max = '100%';
-
-	/** @type {'min' | 'max'}*/
-	export let priority = 'min';
-
-	/** @type {HTMLElement} */
-	let container;
-
-	let dragging = false;
-	let w = 0;
-	let h = 0;
-	let position = pos;
-
-	// constrain position
-	$: if (container) {
-		const size = type === 'horizontal' ? w : h;
-
-		let min_px = parseFloat(min);
-		let max_px = parseFloat(max);
-		let pos_px = parseFloat(pos);
-
-		if (min.endsWith('%')) min_px = (size * min_px) / 100;
-		if (max.endsWith('%')) max_px = (size * max_px) / 100;
-		if (pos.endsWith('%')) pos_px = (size * pos_px) / 100;
-
-		if (min_px < 0) min_px += size;
-		if (max_px < 0) max_px += size;
-
-		pos_px =
-			priority === 'min'
-				? Math.max(min_px, Math.min(max_px, pos_px))
-				: Math.min(max_px, Math.max(min_px, pos_px));
-
-		position = pos.endsWith('%') ? (size ? `${(100 * pos_px) / size}%` : '0%') : `${pos_px}px`;
-	}
-
-	/**
-	 * @param {number} x
-	 * @param {number} y
-	 */
-	function update(x, y) {
-		if (disabled) return;
-
-		const { top, left } = container.getBoundingClientRect();
-
-		const pos_px = type === 'horizontal' ? x - left : y - top;
-		const size = type === 'horizontal' ? w : h;
-
-		position = pos.endsWith('%') ? `${(100 * pos_px) / size}%` : `${pos_px}px`;
-
-		dispatch('change');
-	}
-
-	/**
-	 * @param {HTMLElement} node
-	 * @param {(event: MouseEvent) => void} callback
-	 */
-	function drag(node, callback) {
-		/** @param {MouseEvent} event */
-		const mousedown = (event) => {
-			if (event.button !== 0) return;
-
-			event.preventDefault();
-
-			dragging = true;
-
-			const onmouseup = () => {
-				dragging = false;
-
-				window.removeEventListener('mousemove', callback, false);
-				window.removeEventListener('mouseup', onmouseup, false);
-			};
-
-			window.addEventListener('mousemove', callback, false);
-			window.addEventListener('mouseup', onmouseup, false);
-		};
-
-		node.addEventListener('mousedown', mousedown, false);
-
-		return {
-			destroy() {
-				node.removeEventListener('mousedown', mousedown, false);
-			}
-		};
-	}
-
-	/**
-	 * @param {HTMLElement} node
-	 * @param {(event: TouchEvent) => void} callback
-	 */
-	function touchDrag(node, callback) {
-		/** @param {TouchEvent} event */
-		const touchdown = (event) => {
-			if (event.targetTouches.length > 1) return;
-
-			event.preventDefault();
-
-			dragging = true;
-
-			const ontouchend = () => {
-				dragging = false;
-
-				window.removeEventListener('touchmove', callback, false);
-				window.removeEventListener('touchend', ontouchend, false);
-			};
-
-			window.addEventListener('touchmove', callback, false);
-			window.addEventListener('touchend', ontouchend, false);
-		};
-
-		node.addEventListener('touchstart', touchdown, {
-			capture: true,
-			passive: false
-		});
-
-		return {
-			destroy() {
-				node.removeEventListener('touchstart', touchdown, {
-					capture: true,
-					passive: false
-				});
-			}
-		};
-	}
-</script>
-
-<div
-	class="container {type}"
-	bind:this={container}
-	bind:clientWidth={w}
-	bind:clientHeight={h}
-	style="--pos: {position}"
->
-	<div class="pane">
-		<slot name="a" />
-	</div>
-
-	<div class="pane">
-		<slot name="b" />
-	</div>
-
-	{#if pos !== '0%' && pos !== '100%'}
-		<div
-			class="{type} divider"
-			class:disabled
-			use:drag={(e) => update(e.clientX, e.clientY)}
-			use:touchDrag={(e) => update(e.touches[0].clientX, e.touches[0].clientY)}
-		/>
-	{/if}
-</div>
-
-{#if dragging}
-	<div class="mousecatcher" />
-{/if}
-
-<style>
-	.container {
-		--sp-thickness: var(--thickness, 8px);
-		/* --sp-color: var(--color, #eee); */
-		--sp-color: transparent;
-		display: grid;
-		position: relative;
-		width: 100%;
-		height: 100%;
-	}
-
-	.container.vertical {
-		grid-template-rows: var(--pos) 1fr;
-	}
-
-	.container.horizontal {
-		grid-template-columns: var(--pos) 1fr;
-	}
-
-	.pane {
-		width: 100%;
-		height: 100%;
-		overflow: auto;
-	}
-
-	.pane > :global(*) {
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-	}
-
-	.mousecatcher {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		background: rgba(255, 255, 255, 0.0001);
-	}
-
-	.divider {
-		position: absolute;
-		z-index: 10;
-	}
-
-	.divider::after {
-		content: '';
-		position: absolute;
-		background-color: var(--sp-color);
-	}
-
-	.horizontal > .divider {
-		padding: 0 calc(0.5 * var(--sp-thickness));
-		width: 0;
-		height: 100%;
-		cursor: ew-resize;
-		left: var(--pos);
-		transform: translate(calc(-0.5 * var(--sp-thickness)), 0);
-	}
-
-	.horizontal > .divider.disabled {
-		cursor: default;
-	}
-
-	.horizontal > .divider::after {
-		left: 50%;
-		top: 0;
-		width: 1px;
-		height: 100%;
-	}
-
-	.vertical > .divider {
-		padding: calc(0.5 * var(--sp-thickness)) 0;
-		width: 100%;
-		height: 0;
-		cursor: ns-resize;
-		top: var(--pos);
-		transform: translate(0, calc(-0.5 * var(--sp-thickness)));
-	}
-
-	.vertical > .divider.disabled {
-		cursor: default;
-	}
-
-	.vertical > .divider::after {
-		top: 50%;
-		left: 0;
-		width: 100%;
-		height: 1px;
-	}
-</style>
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index aeb9c6c18..f456ffac9 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -4,7 +4,7 @@
 	import { afterNavigate } from '$app/navigation';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
-	import SplitPane from '$lib/components/SplitPane.svelte';
+	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import Icon from '@sveltejs/site-kit/components/Icon.svelte';
 	import { writable } from 'svelte/store';
 	import Editor from './Editor.svelte';