use style diretives for layout components

mhkeller · Feb 19, 2022 · 85684a9 · 85684a9
1 parent c51506a
commit 85684a9
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 47 deletions.
diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte
@@ -3,7 +3,7 @@
 	Layer Cake component
  -->
 <script>
-	import { setContext } from 'svelte';
+	import { setContext, onMount } from 'svelte';
 	import { writable, derived } from 'svelte/store';
 
 	import makeAccessor from './utils/makeAccessor.js';
@@ -116,6 +116,16 @@
 	/** @type {Object} custom Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */
 	export let custom = {};
 
+	/* --------------------------------------------
+	 * Keep track of whethr the component has mounted
+	 * This is used to emit warnings once we have measured
+	 * the container object and it doesn't have proper dimensions
+	 */
+	let isMounted = false;
+	onMount(() => {
+		isMounted = true;
+	})
+
 	/* --------------------------------------------
 	 * Preserve a copy of our passed in settings before we modify them
 	 * Return this to the user's context so they can reference things if need be
@@ -250,11 +260,11 @@
 		b.left = $padding.left;
 		b.width = b.right - b.left;
 		b.height = b.bottom - b.top;
-		if (b.width <= 0) {
-			console.error('[LayerCake] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?');
+		if (b.width <= 0 && isMounted === true) {
+			console.warn('[LayerCake] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?');
 		}
-		if (b.height <= 0) {
-			console.error('[LayerCake] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?');
+		if (b.height <= 0 && isMounted === true) {
+			console.warn('[LayerCake] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?');
 		}
 		return b;
 	});
@@ -361,11 +371,12 @@
 	<div
 		bind:this={element}
 		class="layercake-container"
-		style="
-			position:{position};
-			{position === 'absolute' ? 'top:0;right:0;bottom:0;left:0;' : ''}
-			{pointerEvents === false ? 'pointer-events:none;' : ''}
-		"
+		style:position
+		style:top={position === 'absolute' ? '0' : null}
+		style:right={position === 'absolute' ? '0' : null}
+		style:bottom={position === 'absolute' ? '0' : null}
+		style:left={position === 'absolute' ? '0' : null}
+		style:pointer-events={pointerEvents === false ? 'none' : null}
 		bind:clientWidth={containerWidth}
 		bind:clientHeight={containerHeight}
 	>

diff --git a/src/lib/layouts/Canvas.svelte b/src/lib/layouts/Canvas.svelte
@@ -19,13 +19,6 @@
 	/** @type {Boolean} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
 	export let pointerEvents = undefined;
 
-
-	let zIndexStyle = '';
-	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
-
-	let pointerEventsStyle = '';
-	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
-
 	const { width, height, padding } = getContext('LayerCake');
 
 	const cntxt = {
@@ -44,6 +37,12 @@
 <canvas
 	bind:this={element}
 	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}"
+	style:z-index={zIndex}
+	style:pointer-events={pointerEvents === false ? 'none' : null}
+	style:top={$padding.top + 'px'}
+	style:right={$padding.right + 'px'}
+	style:bottom={$padding.bottom + 'px'}
+	style:left={$padding.left + 'px'}
+	style="width:100%;height:100%;position:absolute;"
 ></canvas>
 <slot {element} {context}></slot>
diff --git a/src/lib/layouts/Html.svelte b/src/lib/layouts/Html.svelte
@@ -14,19 +14,18 @@
 	/** @type {Boolean} [pointerEvents] Set this to `false` to set `pointer-events: none;` on the entire layer. */
 	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>
 
 <div
 	bind:this={element}
 	class="layercake-layout-html"
-	style="top: {$padding.top}px; right:{$padding.right}px; bottom:{$padding.bottom}px; left:{$padding.left}px;{zIndexStyle}{pointerEventsStyle}"
+	style:z-index={zIndex}
+	style:pointer-events={pointerEvents === false ? 'none' : null}
+	style:top={$padding.top + 'px'}
+	style:right={$padding.right + 'px'}
+	style:bottom={$padding.bottom + 'px'}
+	style:left={$padding.left + 'px'}
 >
 	<slot {element}></slot>
 </div>

diff --git a/src/lib/layouts/ScaledSvg.svelte b/src/lib/layouts/ScaledSvg.svelte
@@ -20,20 +20,20 @@
 	/** @type {String} [viewBox=`0 0 100 ${100 / fixedAspectRatio}`] A string passed to the viewBox property on the `<svg>` tag. */
 	export let viewBox = `0 0 100 ${100 / fixedAspectRatio}`;
 
-	let zIndexStyle = '';
-	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
-
-	let pointerEventsStyle = '';
-	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
-
 	const { padding } = getContext('LayerCake');
 </script>
 
 <svg
 	bind:this={element}
 	{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}"
+	style:z-index={zIndex}
+	style:pointer-events={pointerEvents === false ? 'none' : null}
+	style:top={$padding.top + 'px'}
+	style:left={$padding.left + 'px'}
+	style:width={`calc(100% - ${($padding.left + $padding.right)}px)`}
+	style:height={`calc(100% - ${($padding.top + $padding.bottom)}px)`}
+	style="right:0px; bottom:0px;"
 >
 	<defs>
 		<slot name="defs"></slot>

diff --git a/src/lib/layouts/Svg.svelte b/src/lib/layouts/Svg.svelte
@@ -8,6 +8,9 @@
 	/** @type {Element} [element] The layer's `<svg>` tag. Useful for bindings. */
 	export let element = undefined;
 
+	/** @type {Element} [innerElement] The layer's `<g>` tag. Useful for bindings. */
+	export let innerElement = undefined;
+
 	/** @type {Number} [zIndex] The layer's z-index. */
 	export let zIndex = undefined;
 
@@ -17,12 +20,6 @@
 	/** @type {String} [viewBox] A string passed to the viewBox property on the `<svg>` tag. */
 	export let viewBox = 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
@@ -31,12 +28,16 @@
 	{viewBox}
 	width={$containerWidth}
 	height={$containerHeight}
-	style="{zIndexStyle}{pointerEventsStyle}"
+	style:z-index={zIndex}
+	style:pointer-events={pointerEvents === false ? 'none' : null}
 >
 	<defs>
 		<slot name="defs"></slot>
 	</defs>
-	<g class="layercake-layout-svg_g" transform="translate({$padding.left}, {$padding.top})">
+	<g
+		bind:this={innerElement}
+		class="layercake-layout-svg_g"
+		transform="translate({$padding.left}, {$padding.top})">
 		<slot {element}></slot>
 	</g>
 </svg>

diff --git a/src/lib/layouts/Webgl.svelte b/src/lib/layouts/Webgl.svelte
@@ -23,12 +23,6 @@
 
 	let testGl;
 
-	let zIndexStyle = '';
-	$: zIndexStyle = typeof zIndex !== 'undefined' ? `z-index:${zIndex};` : '';
-
-	let pointerEventsStyle = '';
-	$: pointerEventsStyle = pointerEvents === false ? 'pointer-events:none;' : '';
-
 	const { padding } = getContext('LayerCake');
 
 	const cntxt = {
@@ -43,6 +37,7 @@
 		for (let j = 0; j < contexts.length; j++) {
 			testGl = element.getContext(contexts[j], contextAttributes);
 			if (testGl) {
+				// @ts-ignore
 				context = testGl;
 				break;
 			}
@@ -56,6 +51,12 @@
 <canvas
 	bind:this={element}
 	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}"
+	style:z-index={zIndex}
+	style:pointer-events={pointerEvents === false ? 'none' : null}
+	style:top={$padding.top + 'px'}
+	style:right={$padding.right + 'px'}
+	style:bottom={$padding.bottom + 'px'}
+	style:left={$padding.left + 'px'}
+	style="width:100%;height:100%;position:absolute;"
 ></canvas>
 <slot {element} {context}></slot>