Zoom buttons

edemaine · Nov 16, 2024 · 6ba0d62 · 6ba0d62
1 parent 9e3944b
commit 6ba0d62
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/App.civet b/src/App.civet
@@ -18,6 +18,7 @@ export function App()
   [tiles, setTiles] := createStore<Prototile[]> examples.aperiodic
   [numTiles, setNumTiles] := createSignal tiles#
   glues := colors
+  [zoom, setZoom] := createSignal 1
 
   function onDragEnd({draggable, droppable})
     return unless droppable
@@ -26,7 +27,7 @@ export function App()
   <DragDropProvider {onDragEnd}>
     <DragDropSensors>
     <h1>Wang Tiles → Three Tiles
-      <span style="font-size: smaller; margin-left: 1em">[<a href="https://arxiv.org/abs/2409.11582">paper</a>] [<a href="https://github.com/edemaine/three-tiles/">source code on GitHub</a>]
+      <span .postfix>[<a href="https://arxiv.org/abs/2409.11582">paper</a>] [<a href="https://github.com/edemaine/three-tiles/">source code on GitHub</a>]
     <hr>
     <h2>Input: Wang Tiles
     <h3>{glues()} Glues
@@ -56,4 +57,12 @@ export function App()
           <Tile {tile(), id}>
     <hr>
     <h2>Output: Three Tiles
-    <ThreeTiles {glues()} tiles=tiles[..<numTiles()]>
+      <span .postfix>🔍
+        <button title="Zoom in" onClick=
+          (e) => setZoom (2*)
+        >+
+        <button title="Zoom out" onClick=
+          (e) => setZoom (/2)
+        >−
+    <div .container>
+      <ThreeTiles {glues(), zoom()} tiles=tiles[..<numTiles()]>
diff --git a/src/ThreeTiles.civet b/src/ThreeTiles.civet
@@ -159,7 +159,7 @@ function unsignedToSigned(tiles: Prototile[], glues: number): {tiles: Prototile[
 
 margin := 1
 tileGap := 3 * l
-export function ThreeTiles(props: {tiles: Prototile[], glues: number})
+export function ThreeTiles(props: {tiles: Prototile[], glues: number, zoom: number})
   createMemo =>
     {tiles, glues} .= unsignedToSigned props.tiles, props.glues
     nBits := ceilLog2 glues
@@ -171,7 +171,7 @@ export function ThreeTiles(props: {tiles: Prototile[], glues: number})
     shurikenPoly.shift
       wheelPoly.maxX() - shurikenPoly.maxX()/2 - l * (cos(eps1) + sin(eps3))
       wheelPoly.maxY() - shurikenPoly.maxY()/2 - l * (cos(eps1) + sin(eps3))
-    <svg viewBox=`${-margin} ${-margin} ${shurikenPoly.maxX() + 2*margin} ${shurikenPoly.maxY() + 2*margin}`>
+    <svg viewBox=`${-margin} ${-margin} ${shurikenPoly.maxX() + 2*margin} ${shurikenPoly.maxY() + 2*margin}` width=`${props.zoom*100}%`>
       <polygon .ptile points=staplePoly.toPolygonString() fill="yellow">
       <polygon .ptile points=wheelPoly.toPolygonString() fill="#9142c3">
       <polygon .ptile points=shurikenPoly.toPolygonString() fill="green">

diff --git a/src/index.sass b/src/index.sass
@@ -8,6 +8,14 @@ body, input, textarea, button, select
 a, a:visited
   color: yellow
 
+.postfix
+  font-size: smaller
+  margin-left: 1rem
+
+.container
+  overflow-x: auto
+  width: 100%
+
 .glues
   display: flex
   gap: 3px