svelte-subdivide v3 PR

README.md

@@ -19,7 +19,7 @@ yarn add @sveltejs/svelte-subdivide
 
 <script>
   import Subdivide from '@sveltejs/svelte-subdivide';
-  import Pane from './Pane.html';
+  import Pane from './Pane.svelte';
 
   export default {
     components: { Subdivide },
@@ -36,13 +36,13 @@ yarn add @sveltejs/svelte-subdivide
 The component constructor you supply to `<Subdivide>` will be instantiated for each cell of your layout. Typically, it would be a component that allows the user to select from a variety of different panes.
 
 ```html
-<!-- Pane.html -->
+<!-- Pane.svelte -->
 <div>
   {#if selected}
     <svelte:component this={selected.component}/>
   {:else}
     {#each options as option}
-      <button on:click="set({ selected: option })">
+      <button on:click="{() => set({ selected: option })}">
         {selected.label}
       </button>
     {/each}
@@ -80,7 +80,7 @@ You can also specify a `layout` parameter, to implement save and restore:
 
 <script>
   import Subdivide from '@sveltejs/svelte-subdivide';
-  import Item from './Item.html';
+  import Item from './Item.svelte';
 
   export default {
     components: {
@@ -109,16 +109,16 @@ You can listen for `open`, `close` and `layout` events. Each event is an object
 ```html
 <Subdivide
   component={Pane}
-  on:open="console.log(`opened ${event.pane.id}`)"
-  on:close="console.log(`closed ${event.pane.id}`)"
-  on:layout="console.log(`updated layout`)"
+  on:open="{(e) => console.log(`opened ${e.pane.id}`)}"
+  on:close="{(e) => console.log(`closed ${e.pane.id}`)}"
+  on:layout="{(e) => console.log(`updated layout`)}"
 />
 ```
 
 
 ## Configuring webpack
 
-If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), make sure that you add `"svelte"` to [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config. This ensures that webpack imports the uncompiled component (`src/index.html`) rather than the compiled version (`index.mjs`) — this is more efficient.
+If you're using webpack with [svelte-loader](https://github.com/sveltejs/svelte-loader), make sure that you add `"svelte"` to [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#resolve-mainfields) in your webpack config. This ensures that webpack imports the uncompiled component (`src/index.svelte`) rather than the compiled version (`index.mjs`) — this is more efficient.
 
 If you're using Rollup with [rollup-plugin-svelte](https://github.com/rollup/rollup-plugin-svelte), this will happen automatically.
 

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@sveltejs/svelte-subdivide",
-  "version": "2.2.0",
+  "version": "3.0.0-alpha.1",
   "description": "A <Subdivide> component for building Blender-style layouts in Svelte apps",
-  "svelte": "src/Subdivide.html",
+  "svelte": "src/Subdivide.svelte",
   "module": "index.mjs",
   "main": "index.js",
   "scripts": {
@@ -14,17 +14,17 @@
     "pretest": "npm run build"
   },
   "devDependencies": {
-    "port-authority": "^1.0.3",
-    "puppeteer": "^1.2.0",
-    "rollup": "^0.59.4",
-    "rollup-plugin-commonjs": "^9.1.0",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-svelte": "^4.1.0",
-    "serve-handler": "^3.0.0",
-    "svelte": "^2.7.1",
+    "port-authority": "^1.0.5",
+    "puppeteer": "^1.9.0",
+    "rollup": "^1.6.0",
+    "rollup-plugin-commonjs": "^9.2.0",
+    "rollup-plugin-node-resolve": "^4.0.1",
+    "rollup-plugin-svelte": "^5.0.3",
+    "sirv": "^0.2.2",
+    "svelte": "^3.0.0-beta.15",
     "tap-diff": "^0.1.1",
-    "tap-dot": "^1.0.5",
-    "tape-modern": "^1.0.0"
+    "tap-dot": "^2.0.0",
+    "tape-modern": "^1.1.1"
   },
   "repository": "https://github.com/sveltejs/svelte-subdivide",
   "author": "Rich Harris",

rollup.config.js

@@ -5,7 +5,7 @@ import pkg from './package.json';
 
 export default [
 	{
-		input: 'src/Subdivide.html',
+		input: 'src/Subdivide.svelte',
 		output: [
 			{ file: pkg.module, 'format': 'es' },
 			{ file: pkg.main, 'format': 'umd', name: 'Subdivide' }

src/Divider.html → src/Divider.svelte

@@ -1,3 +1,25 @@
+<script>
+	import * as constants from './constants.js';
+
+	export let divider;
+
+	export let style;
+	$: {
+		const group = divider.parent;
+
+		const x = group.getLeft();
+		const y = group.getTop();
+		const w = group.getWidth();
+		const h = group.getHeight();
+
+		if (divider.type === 'horizontal') {
+			style = `left: ${x * 100}%; top: ${(y + divider.position * h) * 100}%; width: ${w * 100}%`;
+		} else {
+			style = `top: ${y * 100}%; left: ${(x + divider.position * w) * 100}%; height: ${h * 100}%`;
+		}
+	}
+</script>
+
 <div class="{divider.type} divider" {style} on:mousedown/>
 
 <style>
@@ -34,27 +56,4 @@
 		height: calc(100% + var(--thickness));
 		background-color: var(--color);
 	}
-</style>
-
-<script>
-	import * as constants from './constants.js';
-
-	export default {
-		computed: {
-			style: ({ divider }) => {
-				const group = divider.parent;
-
-				const x = group.getLeft();
-				const y = group.getTop();
-				const w = group.getWidth();
-				const h = group.getHeight();
-
-				if (divider.type === 'horizontal') {
-					return `left: ${x * 100}%; top: ${(y + divider.position * h) * 100}%; width: ${w * 100}%`;
-				} else {
-					return `top: ${y * 100}%; left: ${(x + divider.position * w) * 100}%; height: ${h * 100}%`;
-				}
-			}
-		}
-	};
-</script>
+</style>

src/Pane.svelte

@@ -0,0 +1,102 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	import * as constants from './constants.js';
+
+	const THRESHOLD = 100;
+
+	function wasCmdOrCtrlPressed(event) {
+		return constants.IS_MAC ? event.metaKey : event.ctrlKey;
+	}
+
+	export let _keyPressed;
+	export let edge = null;
+	export let pane;
+	export let component;
+
+	export let cursor;
+
+	let paneElement;
+
+	$: {
+		if (!_keyPressed || !edge) cursor = 'default';
+
+		cursor = (
+			edge === constants.NORTH ? 's-resize' :
+			edge === constants.SOUTH ? 'n-resize' :
+			edge === constants.WEST ? 'e-resize' :
+			edge === constants.EAST ? 'w-resize' :
+			'default'
+		);
+	}
+
+	function findEdge(event) {
+		const { top, right, bottom, left } = paneElement.getBoundingClientRect();
+
+		const d = [
+			{type: constants.NORTH, position: event.clientY - top},
+			{type: constants.SOUTH, position: bottom - event.clientY},
+			{type: constants.EAST, position: right - event.clientX},
+			{type: constants.WEST, position: event.clientX -left}
+		];
+
+		if (d[0].position > THRESHOLD && d[1].position > THRESHOLD && d[2].position > THRESHOLD && d[3].position > THRESHOLD) return null;
+
+		d.sort((a, b) => a.position - b.position);
+
+		return d[0].type;
+	}
+
+	function handleMousedown(event) {
+		if (!wasCmdOrCtrlPressed(event)) return;
+
+		const edge = findEdge(event);
+		if (!edge) return;
+
+		dispatch('split', {
+			edge,
+			clientX: event.clientX,
+			clientY: event.clientY
+		});
+	}
+
+	function handleMousemove(event) {
+		edge = findEdge(event);
+	}
+</script>
+
+<div
+	bind:this={paneElement}
+	class="pane"
+	style="
+		left: {pane.getLeft() * 100}%;
+		top: {pane.getTop() * 100}%;
+		width: {pane.getWidth() * 100}%;
+		height: {pane.getHeight() * 100}%;
+		cursor: {cursor}
+	"
+	on:mousedown="{handleMousedown}"
+	on:mousemove="{handleMousemove}"
+>
+	<div class="inner">
+		<svelte:component this={component} {pane}/>
+	</div>
+</div>
+
+<style>
+	.pane {
+		position: absolute;
+		overflow: hidden;
+		box-sizing: border-box;
+		padding: calc(var(--thickness) / 2);
+	}
+
+	.inner {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+</style>