From 3a653ce41b8474d2e3359be21e15721f4f43ea0c Mon Sep 17 00:00:00 2001
From: Preet Shihn <preetshihn@gmail.com>
Date: Sun, 19 Apr 2020 00:55:59 -0700
Subject: [PATCH] examples

---
 .npmignore                 |   3 +-
 examples/bezier.html       | 116 +++++++++++++++++++++++++++++++++++++
 examples/color-picker.html |  69 ++++++++++++++++++++++
 3 files changed, 187 insertions(+), 1 deletion(-)
 create mode 100644 examples/bezier.html
 create mode 100644 examples/color-picker.html
diff --git a/.npmignore b/.npmignore
index 6324898..4e0820a 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,4 +1,5 @@
 demo
 node_modules
 tsconfig.json
-bin
\ No newline at end of file
+bin
+examples
\ No newline at end of file
diff --git a/examples/bezier.html b/examples/bezier.html
new file mode 100644
index 0000000..4bc06f2
--- /dev/null
+++ b/examples/bezier.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>planar-range demo</title>
+  <style>
+    body {
+      padding: 60px 32px;
+      margin: 0;
+      text-align: center;
+      background: #fff;
+    }
+
+    #panel {
+      width: 300px;
+      height: 300px;
+      position: relative;
+      margin: 0 auto;
+    }
+
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    planar-range {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: 1px solid #000;
+    }
+
+    planar-range-thumb {
+      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+      border: none;
+      background: #888;
+      width: 15px;
+      height: 15px;
+    }
+
+    [name="cp1"],
+    [name="cp2"] {
+      background: orange;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="panel">
+    <canvas width="300" height="300"></canvas>
+    <planar-range>
+      <planar-range-thumb name="p1" x="0" y="1"></planar-range-thumb>
+      <planar-range-thumb name="cp1" x="0.15" y="0.15"></planar-range-thumb>
+      <planar-range-thumb name="cp2" x="0.85" y="0.85"></planar-range-thumb>
+      <planar-range-thumb name="p2" x="1" y="0"></planar-range-thumb>
+    </planar-range>
+  </div>
+
+  <script type="module" src="../lib/planar-range.js"></script>
+  <script type="module">
+    const range = document.querySelector('planar-range');
+    const ctx = document.querySelector('canvas').getContext('2d');
+
+    const render = () => {
+      let p1, p2, cp1, cp2;
+      range.values.forEach((value) => {
+        switch (value.name) {
+          case 'p1':
+            p1 = [value.x * 300, value.y * 300];
+            break;
+          case 'p2':
+            p2 = [value.x * 300, value.y * 300];
+            break;
+          case 'cp1':
+            cp1 = [value.x * 300, value.y * 300];
+            break;
+          case 'cp2':
+            cp2 = [value.x * 300, value.y * 300];
+            break;
+        }
+      });
+
+      ctx.clearRect(0, 0, 300, 300);
+
+      ctx.lineWidth = 1;
+      ctx.strokeStyle = 'blue';
+      ctx.beginPath();
+      ctx.moveTo(...cp1);
+      ctx.lineTo(...p1);
+      ctx.moveTo(...cp2);
+      ctx.lineTo(...p2);
+      ctx.stroke();
+
+      ctx.lineWidth = 3;
+      ctx.strokeStyle = 'black';
+      ctx.beginPath();
+      ctx.moveTo(...p1);
+      ctx.bezierCurveTo(...cp1, ...cp2, ...p2);
+      ctx.stroke();
+    }
+
+    range.addEventListener('change', () => {
+      requestAnimationFrame(() => render());
+    });
+
+    render();
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/color-picker.html b/examples/color-picker.html
new file mode 100644
index 0000000..ce2d1b5
--- /dev/null
+++ b/examples/color-picker.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>planar-range demo</title>
+  <style>
+    body {
+      padding: 60px 32px;
+      margin: 0;
+      text-align: center;
+    }
+
+    #panel {
+      width: 300px;
+      height: 300px;
+      background: rgb(255, 0, 0);
+      position: relative;
+      margin: 0 auto;
+    }
+
+    planar-range,
+    #l1,
+    #l2 {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    planar-range-thumb {
+      width: 15px;
+      height: 15px;
+      border: 2px solid white;
+      background: transparent;
+    }
+
+    #l1 {
+      background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    }
+
+    #l2 {
+      background: linear-gradient(to bottom, transparent 0%, #000 100%);
+    }
+  </style>
+</head>
+
+<body>
+  <div id="panel">
+    <div id="l1"></div>
+    <div id="l2"></div>
+    <planar-range>
+      <planar-range-thumb x="0.5" y="0.5"></planar-range-thumb>
+    </planar-range>
+  </div>
+
+  <script type="module" src="../lib/planar-range.js"></script>
+  <script type="module">
+    const range = document.querySelector('planar-range');
+    range.addEventListener('change', ({ detail }) => {
+      document.body.style.background = `hsl(0, ${detail.x * 100}%, ${(1 - detail.y) * 50 + (1 - detail.x) * 50}%)`;
+    });
+  </script>
+</body>
+
+</html>
\ No newline at end of file
