rename SvgSsr; add pointer events

mhkeller · May 30, 2020 · df01f6a · df01f6a
1 parent 44c546c
commit df01f6a
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 20 deletions.
diff --git a/src/Layouts/Canvas.svelte b/src/Layouts/Canvas.svelte
@@ -4,16 +4,17 @@
 	import scaleCanvas from '../lib/scaleCanvas.js';
 
 	export let zIndex = undefined;
+	export let pointerEvents = undefined;
+
 	let canvasElement;
-	let zIndexStyle = '';
 
+	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
 
-	const {
-		width,
-		height,
-		padding
-	} = getContext('LayerCake');
+	let pointerEventsStyle = '';
+	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
+
+	const { width, height, padding } = getContext('LayerCake');
 
 	let ctx;
 
@@ -33,6 +34,6 @@
 <canvas
 	bind:this={canvasElement}
 	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}"
+	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>
diff --git a/src/Layouts/Html.svelte b/src/Layouts/Html.svelte
@@ -2,17 +2,20 @@
 	import { getContext } from 'svelte';
 
 	export let zIndex = undefined;
-	let zIndexStyle = '';
+	export let pointerEvents = undefined;
 
+	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
 
-	const { padding } = getContext('LayerCake');
+	let pointerEventsStyle = '';
+	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
 
+	const { padding } = getContext('LayerCake');
 </script>
 
 <div
 	class="layercake-layout-html"
-	style="top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;{zIndexStyle}"
+	style="top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;{zIndexStyle}{pointerEventsStyle}"
 >
 	<slot></slot>
 </div>

diff --git a/src/Layouts/SvgSsr.svelte → src/Layouts/ScaledSvg.svelte b/src/Layouts/SvgSsr.svelte → src/Layouts/ScaledSvg.svelte
@@ -1,20 +1,28 @@
 <script>
 	import { getContext } from 'svelte';
 
-	export let zIndex = undefined;
 	export let viewBox = '0 0 100 100';
-	let zIndexStyle = '';
+	export let zIndex = undefined;
+	export let pointerEvents = undefined;
 
+	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
 
+	let pointerEventsStyle = '';
+	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
+
 	const { padding } = getContext('LayerCake');
 </script>
 
 <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}"
+	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}"
 >
+	<defs>
+		<slot name="defs"></slot>
+	</defs>
+
 	<slot></slot>
 </svg>
 

diff --git a/src/Layouts/Svg.svelte b/src/Layouts/Svg.svelte
@@ -1,19 +1,28 @@
 <script>
 	import { getContext } from 'svelte';
 
+	export let viewBox = undefined;
 	export let zIndex = undefined;
-	let zIndexStyle = '';
+	export let pointerEvents = undefined;
 
+	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
 
+	let pointerEventsStyle = '';
+	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
+
 	const { containerWidth, containerHeight, padding } = getContext('LayerCake');
 </script>
 <svg
 	class="layercake-layout-svg"
+	{viewBox}
 	width={$containerWidth}
 	height={$containerHeight}
-	style="{zIndexStyle}"
+	style="{zIndexStyle}{pointerEventsStyle}"
 >
+	<defs>
+		<slot name="defs"></slot>
+	</defs>
 	<g transform="translate({$padding.left}, {$padding.top})">
 		<slot></slot>
 	</g>

diff --git a/src/Layouts/Webgl.svelte b/src/Layouts/Webgl.svelte
@@ -4,18 +4,22 @@
 
 	export let contextOptions;
 	export let zIndex = undefined;
+
 	let canvasElement;
 	let testGl;
 	let gl;
-	let zIndexStyle = '';
 
+	let zIndexStyle = '';
 	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
 
+	let pointerEventsStyle = '';
+	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
+
 	const { width, height, padding } = getContext('LayerCake');
 
 	const context = {
-		gl: writable({}),
-		canvas: writable({})
+		gl: writable({})
+		// canvas: writable({})
 	};
 
 	onMount(() => {
@@ -41,6 +45,6 @@
 <canvas
 	bind:this={canvasElement}
 	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}"
+	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>
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 export { default as LayerCake } from './LayerCake.svelte';
 export { default as Html } from './layouts/Html.svelte';
 export { default as Svg } from './layouts/Svg.svelte';
-export { default as SvgSsr } from './layouts/SvgSsr.svelte';
+export { default as ScaledSvg } from './layouts/ScaledSvg.svelte';
 export { default as Canvas } from './layouts/Canvas.svelte';
 export { default as WebGL } from './layouts/Webgl.svelte';