From c3d6bcc4abbd82eece86485d6cbf5edce2af36ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= <chris.shank.23@gmail.com>
Date: Mon, 23 Dec 2024 21:11:34 -0800
Subject: [PATCH] fluid zoom

---
 .../fluid-semantic-zoom-in-a-canvas.html      | 118 ++++++++++++++++++
 website/canvas/responsive-canvas-shapes.html  |  20 +--
 2 files changed, 119 insertions(+), 19 deletions(-)
 create mode 100644 website/canvas/fluid-semantic-zoom-in-a-canvas.html
diff --git a/website/canvas/fluid-semantic-zoom-in-a-canvas.html b/website/canvas/fluid-semantic-zoom-in-a-canvas.html
new file mode 100644
index 0000000..447ce5b
--- /dev/null
+++ b/website/canvas/fluid-semantic-zoom-in-a-canvas.html
@@ -0,0 +1,118 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Fluid Semantic Zoom</title>
+    <style>
+      html {
+        height: 100%;
+      }
+
+      body {
+        font-family: monospace;
+        min-height: 100%;
+        position: relative;
+        margin: 0;
+      }
+
+      label {
+        display: flex;
+        align-items: center;
+        margin: 1rem;
+      }
+
+      folk-shape {
+        background: black;
+        border-radius: 5px;
+        color: white;
+        padding: 0.5rem;
+        min-width: max-content;
+
+        h2 {
+          margin: 0;
+          white-space: nowrap;
+        }
+
+        p {
+          font-size: clamp(0rem, calc(1.5rem * (var(--folk-zoom) - 0.35)), 1rem);
+          opacity: clamp(0, calc(var(--folk-zoom) + 0.5), 1);
+          max-width: clamp(20ch, calc(100ch * var(--folk-zoom)), 35ch);
+        }
+      }
+
+      @container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) {
+        p {
+          display: none;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <label>
+      Zoom:
+      <input type="range" min="0" max="1" value="0.5" step="0.01" />
+    </label>
+
+    <folk-shape id="box1" x="100" y="100">
+      <h2>Lorem ispum</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </p>
+    </folk-shape>
+
+    <folk-shape id="box2" x="400" y="400">
+      <h2>Dolor sit amet</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat.
+      </p>
+    </folk-shape>
+
+    <folk-shape id="box3" x="150" y="600">
+      <h2>Consectetur elit</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </p>
+    </folk-shape>
+
+    <folk-arrow source="#box1" target="#box2"></folk-arrow>
+    <folk-arrow source="#box2" target="#box3"></folk-arrow>
+    <folk-arrow source="#box1" target="#box3"></folk-arrow>
+
+    <script type="module">
+      import '@labs/standalone/folk-shape.ts';
+      import '@labs/standalone/folk-arrow.ts';
+
+      const range = document.querySelector('input');
+
+      function onZoom() {
+        const currentZoom = range.valueAsNumber;
+        let semanticZoom;
+
+        if (currentZoom < 0.25) {
+          semanticZoom = 0;
+        } else if (currentZoom < 0.5) {
+          semanticZoom = 0.25;
+        } else if (currentZoom < 0.75) {
+          semanticZoom = 0.5;
+        } else {
+          semanticZoom = 1;
+        }
+
+        document.body.style.setProperty('--folk-zoom', range.value);
+        document.body.style.setProperty('--folk-discrete-zoom', semanticZoom);
+      }
+
+      range.addEventListener('input', onZoom);
+
+      onZoom();
+    </script>
+  </body>
+</html>
diff --git a/website/canvas/responsive-canvas-shapes.html b/website/canvas/responsive-canvas-shapes.html
index cd424f3..38bc17d 100644
--- a/website/canvas/responsive-canvas-shapes.html
+++ b/website/canvas/responsive-canvas-shapes.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -71,26 +71,8 @@
       </section>
     </folk-shape>
 
-    <!-- <folk-shape id="box2" x="400" y="400">
-      <h2>Dolor sit amet</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.
-      </p>
-    </folk-shape>
-
-    <folk-shape id="box3" x="150" y="600">
-      <h2>Consectetur elit</h2>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua.
-      </p>
-    </folk-shape> -->
-
     <script type="module">
       import '@labs/standalone/folk-shape.ts';
-      import '@labs/standalone/folk-arrow.ts';
     </script>
   </body>
 </html>
