From 44ef530c148fe2ea996f450c64c3c67977802fbc Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 2 Mar 2019 08:47:58 -0500
Subject: [PATCH] dimension/this bindings

---
 .../10-dimensions/app-a/App.svelte            | 20 +++++++
 .../10-dimensions/app-b/App.svelte            | 20 +++++++
 .../06-bindings/10-dimensions/text.md         | 17 ++++++
 .../06-bindings/11-this/app-a/App.svelte      | 58 ++++++++++++++++++
 .../06-bindings/11-this/app-b/App.svelte      | 59 +++++++++++++++++++
 .../tutorial/06-bindings/11-this/text.md      | 15 +++++
 site/content/tutorial/99-todo/99-todo/text.md |  6 +-
 site/static/logo-mask.svg                     |  6 ++
 8 files changed, 199 insertions(+), 2 deletions(-)
 create mode 100644 site/content/tutorial/06-bindings/10-dimensions/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/10-dimensions/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/10-dimensions/text.md
 create mode 100644 site/content/tutorial/06-bindings/11-this/app-a/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/11-this/app-b/App.svelte
 create mode 100644 site/content/tutorial/06-bindings/11-this/text.md
 create mode 100644 site/static/logo-mask.svg

diff --git a/site/content/tutorial/06-bindings/10-dimensions/app-a/App.svelte b/site/content/tutorial/06-bindings/10-dimensions/app-a/App.svelte
new file mode 100644
index 0000000000..59e11c79f0
--- /dev/null
+++ b/site/content/tutorial/06-bindings/10-dimensions/app-a/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	let w;
+	let h;
+	let size = 42;
+	let text = 'edit me';
+</script>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+</style>
+
+<input type=range bind:value={size}>
+<input bind:value={text}>
+
+<p>size: {w}px x {h}px</p>
+
+<div>
+	<span style="font-size: {size}px">{text}</span>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/10-dimensions/app-b/App.svelte b/site/content/tutorial/06-bindings/10-dimensions/app-b/App.svelte
new file mode 100644
index 0000000000..ca992599c1
--- /dev/null
+++ b/site/content/tutorial/06-bindings/10-dimensions/app-b/App.svelte
@@ -0,0 +1,20 @@
+<script>
+	let w;
+	let h;
+	let size = 42;
+	let text = 'edit me';
+</script>
+
+<style>
+	input { display: block; }
+	div { display: inline-block; }
+</style>
+
+<input type=range bind:value={size}>
+<input bind:value={text}>
+
+<p>size: {w}px x {h}px</p>
+
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<span style="font-size: {size}px">{text}</span>
+</div>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/10-dimensions/text.md b/site/content/tutorial/06-bindings/10-dimensions/text.md
new file mode 100644
index 0000000000..3f0a27a7ea
--- /dev/null
+++ b/site/content/tutorial/06-bindings/10-dimensions/text.md
@@ -0,0 +1,17 @@
+---
+title: Dimensions
+---
+
+Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
+
+```html
+<div bind:clientWidth={w} bind:clientHeight={h}>
+	<span style="font-size: {size}px">{text}</span>
+</div>
+```
+
+These bindings are readonly — changing the values of `w` and `h` won't have any effect.
+
+> Elements are measured using a technique similar to [this one](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). There is some overhead involved, so it's not recommended to use this for large numbers of elements.
+>
+> `display: inline` elements cannot be measured with this approach; nor can elements that can't contain other elements (such as `<canvas>`). In these cases you will need to measure a wrapper element instead.
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/11-this/app-a/App.svelte b/site/content/tutorial/06-bindings/11-this/app-a/App.svelte
new file mode 100644
index 0000000000..1dbb904ebc
--- /dev/null
+++ b/site/content/tutorial/06-bindings/11-this/app-a/App.svelte
@@ -0,0 +1,58 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let canvas;
+	let ctx;
+	let running = false;
+
+	const r = Math.random();
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let frame;
+
+		(function loop() {
+			frame = requestAnimationFrame(loop);
+
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+			for (let p = 0; p < imageData.data.length; p += 4) {
+				const i = p / 4;
+				const x = i % canvas.width;
+				const y = i / canvas.height >>> 0;
+
+				const t = window.performance.now();
+
+				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
+				const b = 128;
+
+				imageData.data[p + 0] = r;
+				imageData.data[p + 1] = g;
+				imageData.data[p + 2] = b;
+				imageData.data[p + 3] = 255;
+			}
+
+			ctx.putImageData(imageData, 0, 0);
+		}());
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+</script>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+		background-color: #eee;
+		-webkit-mask: url(logo-mask.svg) 50% 50% no-repeat;
+		mask: url(logo-mask.svg) 50% 50% no-repeat;
+	}
+</style>
+
+<canvas
+	width={32}
+	height={32}
+></canvas>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/11-this/app-b/App.svelte b/site/content/tutorial/06-bindings/11-this/app-b/App.svelte
new file mode 100644
index 0000000000..5416bbb9cd
--- /dev/null
+++ b/site/content/tutorial/06-bindings/11-this/app-b/App.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte';
+
+	let canvas;
+	let ctx;
+	let running = false;
+
+	const r = Math.random();
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		let frame;
+
+		(function loop() {
+			frame = requestAnimationFrame(loop);
+
+			const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+			for (let p = 0; p < imageData.data.length; p += 4) {
+				const i = p / 4;
+				const x = i % canvas.width;
+				const y = i / canvas.height >>> 0;
+
+				const t = window.performance.now();
+
+				const r = 64 + (128 * x / canvas.width) + (64 * Math.sin(t / 1000));
+				const g = 64 + (128 * y / canvas.height) + (64 * Math.cos(t / 1000));
+				const b = 128;
+
+				imageData.data[p + 0] = r;
+				imageData.data[p + 1] = g;
+				imageData.data[p + 2] = b;
+				imageData.data[p + 3] = 255;
+			}
+
+			ctx.putImageData(imageData, 0, 0);
+		}());
+
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	});
+</script>
+
+<style>
+	canvas {
+		width: 100%;
+		height: 100%;
+		background-color: #eee;
+		-webkit-mask: url(logo-mask.svg) 50% 50% no-repeat;
+		mask: url(logo-mask.svg) 50% 50% no-repeat;
+	}
+</style>
+
+<canvas
+	bind:this={canvas}
+	width={32}
+	height={32}
+></canvas>
\ No newline at end of file
diff --git a/site/content/tutorial/06-bindings/11-this/text.md b/site/content/tutorial/06-bindings/11-this/text.md
new file mode 100644
index 0000000000..e1aed607b0
--- /dev/null
+++ b/site/content/tutorial/06-bindings/11-this/text.md
@@ -0,0 +1,15 @@
+---
+title: This
+---
+
+The readonly `this` binding applies to every element (and component) and allows to you obtain a reference to rendered elements. For example, we can get a reference to a `<canvas>` element:
+
+```html
+<canvas
+	bind:this={canvas}
+	width={256}
+	height={256}
+></canvas>
+```
+
+Note that the value of `canvas` will be `undefined` until the component has mounted, so we put the logic inside the `onMount` [lifecycle function](tutorials/onmount).
\ No newline at end of file
diff --git a/site/content/tutorial/99-todo/99-todo/text.md b/site/content/tutorial/99-todo/99-todo/text.md
index 2b6f1ce7c7..ba93a02266 100644
--- a/site/content/tutorial/99-todo/99-todo/text.md
+++ b/site/content/tutorial/99-todo/99-todo/text.md
@@ -69,10 +69,12 @@ Another one should cover how to set up an editor for syntax highlighting.
 
 * [x] Form bindings (input, textarea, select, multiple select)
 * [x] deep/contextual bindings
-* [ ] Dimensions
-* [ ] `this`
+* [x] Dimensions
+* [x] `this`
 * [ ] shorthand
 
+Maybe lifecycle should go first, since we're using `onMount` in the `this` demo?
+
 
 ## Stores
 
diff --git a/site/static/logo-mask.svg b/site/static/logo-mask.svg
new file mode 100644
index 0000000000..d7919a61ab
--- /dev/null
+++ b/site/static/logo-mask.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
+	<path style="fill:black" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41
+
+	M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+</svg>
\ No newline at end of file