export

mhkeller · Mar 12, 2021 · 97c6094 · 97c6094
1 parent 9350d3f
commit 97c6094
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/src/layouts/Canvas.svelte b/src/layouts/Canvas.svelte
@@ -6,7 +6,8 @@
 	export let zIndex = undefined;
 	export let pointerEvents = undefined;
 
-	let canvasElement;
+	export let canvas;
+	export let ctx;
 
 	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
@@ -16,14 +17,12 @@
 
 	const { width, height, padding } = getContext('LayerCake');
 
-	let ctx;
-
 	const context = {
 		ctx: writable({})
 	};
 
 	onMount(() => {
-		ctx = canvasElement.getContext('2d');
+		ctx = canvas.getContext('2d');
 		scaleCanvas(ctx, $width, $height);
 	});
 
@@ -32,8 +31,8 @@
 </script>
 
 <canvas
-	bind:this={canvasElement}
+	bind:this={canvas}
 	class="layercake-layout-canvas"
 	style="width:100%;height:100%;top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;position:absolute;{zIndexStyle}{pointerEventsStyle}"
 ></canvas>
-<slot></slot>
+<slot {canvas} {ctx}></slot>
diff --git a/src/layouts/Html.svelte b/src/layouts/Html.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
 
-	let html;
+	export let div;
 	export let zIndex = undefined;
 	export let pointerEvents = undefined;
 
@@ -15,11 +15,11 @@
 </script>
 
 <div
-	bind:this={html}
+	bind:this={div}
 	class="layercake-layout-html"
 	style="top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;{zIndexStyle}{pointerEventsStyle}"
 >
-	<slot {html}></slot>
+	<slot {div}></slot>
 </div>
 
 <style>

diff --git a/src/layouts/ScaledSvg.svelte b/src/layouts/ScaledSvg.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
 
-	let svg;
+	export let svg;
 	export let fixedAspectRatio = 1;
 	export let viewBox = `0 0 100 ${100 / fixedAspectRatio}`;
 	export let zIndex = undefined;

diff --git a/src/layouts/Svg.svelte b/src/layouts/Svg.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { getContext } from 'svelte';
 
-	let svg;
-	let g;
+	export let svg;
+	export let g;
 	export let viewBox = undefined;
 	export let zIndex = undefined;
 	export let pointerEvents = undefined;

diff --git a/src/layouts/Webgl.svelte b/src/layouts/Webgl.svelte
@@ -6,17 +6,17 @@
 	export let zIndex = undefined;
 	export let pointerEvents = undefined;
 
-	let canvasElement;
+	export let canvas;
 	let testGl;
-	let gl;
+	export let gl;
 
 	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
 
 	let pointerEventsStyle = '';
 	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
 
-	const { width, height, padding } = getContext('LayerCake');
+	const { padding } = getContext('LayerCake');
 
 	const context = {
 		gl: writable({})
@@ -28,7 +28,7 @@
 		 */
 		const contexts = ['webgl', 'experimental-webgl', 'moz-webgl', 'webkit-3d'];
 		for (let j = 0; j < contexts.length; j++) {
-			testGl = canvasElement.getContext(contexts[j], contextAttributes);
+			testGl = canvas.getContext(contexts[j], contextAttributes);
 			if (testGl) {
 				gl = testGl;
 				break;
@@ -41,8 +41,8 @@
 </script>
 
 <canvas
-	bind:this={canvasElement}
+	bind:this={canvas}
 	class="layercake-layout-webgl"
 	style="width:100%;height:100%;top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;position:absolute;{zIndexStyle}{pointerEventsStyle}"
 ></canvas>
-<slot></slot>
+<slot {canvas} {gl}></slot>