expose layout nodes

mhkeller · Feb 27, 2021 · 9350d3f · 9350d3f
1 parent a73eb12
commit 9350d3f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/src/layouts/Html.svelte b/src/layouts/Html.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
 
+	let html;
 	export let zIndex = undefined;
 	export let pointerEvents = undefined;
 
@@ -14,10 +15,11 @@
 </script>
 
 <div
+	bind:this={html}
 	class="layercake-layout-html"
 	style="top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;{zIndexStyle}{pointerEventsStyle}"
 >
-	<slot></slot>
+	<slot {html}></slot>
 </div>
 
 <style>

diff --git a/src/layouts/ScaledSvg.svelte b/src/layouts/ScaledSvg.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
 
+	let svg;
 	export let fixedAspectRatio = 1;
 	export let viewBox = `0 0 100 ${100 / fixedAspectRatio}`;
 	export let zIndex = undefined;
@@ -16,6 +17,7 @@
 </script>
 
 <svg
+	bind:this={svg}
 	{viewBox}
 	preserveAspectRatio="none"
 	style="top: {$padding.top}px; right:0px; bottom:0px; left:{$padding.left}px;width:calc(100% - {($padding.left + $padding.right)}px);height:calc(100% - {($padding.top + $padding.bottom)}px);{zIndexStyle}{pointerEventsStyle}"
@@ -24,7 +26,7 @@
 		<slot name="defs"></slot>
 	</defs>
 
-	<slot></slot>
+	<slot {svg}></slot>
 </svg>
 
 <style>

diff --git a/src/layouts/Svg.svelte b/src/layouts/Svg.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { getContext } from 'svelte';
 
+	let svg;
+	let g;
 	export let viewBox = undefined;
 	export let zIndex = undefined;
 	export let pointerEvents = undefined;
@@ -14,6 +16,7 @@
 	const { containerWidth, containerHeight, padding } = getContext('LayerCake');
 </script>
 <svg
+	bind:this={svg}
 	class="layercake-layout-svg"
 	{viewBox}
 	width={$containerWidth}
@@ -23,8 +26,8 @@
 	<defs>
 		<slot name="defs"></slot>
 	</defs>
-	<g transform="translate({$padding.left}, {$padding.top})">
-		<slot></slot>
+	<g bind:this={g} class="layercake-layout-svg_g" transform="translate({$padding.left}, {$padding.top})">
+		<slot {svg} {g}></slot>
 	</g>
 </svg>
 

diff --git a/src/layouts/Webgl.svelte b/src/layouts/Webgl.svelte
@@ -20,7 +20,6 @@
 
 	const context = {
 		gl: writable({})
-		// canvas: writable({})
 	};
 
 	onMount(() => {
@@ -38,9 +37,7 @@
 	});
 
 	$: context.gl.set(gl);
-	// $: context.canvas.set(canvasElement);
 	setContext('gl', context);
-
 </script>
 
 <canvas