From 8d5ac6689ea79dcadef86b342cd7f3ad9d6f545a Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Sat, 16 Mar 2024 18:53:03 -0400
Subject: [PATCH] Rename `Zoom` component to `Transform`

---
 .changeset/short-phones-tap.md                   |  5 +++++
 .../components/{Zoom.svelte => Transform.svelte} |  8 ++++----
 packages/layerchart/src/lib/components/index.ts  |  2 +-
 ...mControls.svelte => TransformControls.svelte} | 12 ++++++------
 .../components/{Zoom => Transform}/+page.svelte  | 16 ++++++++++------
 .../docs/components/{Zoom => Transform}/+page.ts |  4 ++--
 .../routes/docs/examples/LoftedArcs/+page.svelte | 10 ++++------
 .../src/routes/docs/examples/Pack/+page.svelte   | 16 ++++++++--------
 .../docs/examples/TranslucentGlobe/+page.svelte  |  8 ++++----
 .../src/routes/docs/examples/Tree/+page.svelte   | 16 ++++++++--------
 .../docs/examples/ZoomableMap/+page.svelte       | 14 +++++++-------
 .../docs/examples/ZoomableTileMap/+page.svelte   | 16 ++++++++--------
 12 files changed, 67 insertions(+), 60 deletions(-)
 create mode 100644 .changeset/short-phones-tap.md
 rename packages/layerchart/src/lib/components/{Zoom.svelte => Transform.svelte} (97%)
 rename packages/layerchart/src/lib/docs/{ZoomControls.svelte => TransformControls.svelte} (86%)
 rename packages/layerchart/src/routes/docs/components/{Zoom => Transform}/+page.svelte (87%)
 rename packages/layerchart/src/routes/docs/components/{Zoom => Transform}/+page.ts (73%)

diff --git a/.changeset/short-phones-tap.md b/.changeset/short-phones-tap.md
new file mode 100644
index 00000000..08bd3853
--- /dev/null
+++ b/.changeset/short-phones-tap.md
@@ -0,0 +1,5 @@
+---
+"layerchart": minor
+---
+
+Rename `Zoom` component to `Transform`
diff --git a/packages/layerchart/src/lib/components/Zoom.svelte b/packages/layerchart/src/lib/components/Transform.svelte
similarity index 97%
rename from packages/layerchart/src/lib/components/Zoom.svelte
rename to packages/layerchart/src/lib/components/Transform.svelte
index d9db09a4..10883a5b 100644
--- a/packages/layerchart/src/lib/components/Zoom.svelte
+++ b/packages/layerchart/src/lib/components/Transform.svelte
@@ -14,7 +14,7 @@
   export let clickDistance = 10;
 
   const dispatch = createEventDispatcher<{
-    zoom: { scale: number; translate: { x: number; y: number } };
+    transform: { scale: number; translate: { x: number; y: number } };
   }>();
 
   let dragging = false;
@@ -35,11 +35,11 @@
     $scale = initialScale;
   }
 
-  export function increase() {
+  export function zoomIn() {
     scaleTo(1.25, { x: $width / 2, y: $height / 2 });
   }
 
-  export function decrease() {
+  export function zoomOut() {
     scaleTo(0.8, { x: $width / 2, y: $height / 2 });
   }
 
@@ -220,7 +220,7 @@
     transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
   }
 
-  $: dispatch('zoom', { scale: $scale, translate: $translate });
+  $: dispatch('transform', { scale: $scale, translate: $translate });
 </script>
 
 <g
diff --git a/packages/layerchart/src/lib/components/index.ts b/packages/layerchart/src/lib/components/index.ts
index c3cf6816..1de132e7 100644
--- a/packages/layerchart/src/lib/components/index.ts
+++ b/packages/layerchart/src/lib/components/index.ts
@@ -50,4 +50,4 @@ export { default as TooltipSeparator } from './TooltipSeparator.svelte';
 export { default as Tree } from './Tree.svelte';
 export { default as Treemap } from './Treemap.svelte';
 export { default as Voronoi } from './Voronoi.svelte';
-export { default as Zoom } from './Zoom.svelte';
+export { default as Transform } from './Transform.svelte';
diff --git a/packages/layerchart/src/lib/docs/ZoomControls.svelte b/packages/layerchart/src/lib/docs/TransformControls.svelte
similarity index 86%
rename from packages/layerchart/src/lib/docs/ZoomControls.svelte
rename to packages/layerchart/src/lib/docs/TransformControls.svelte
index 589831f6..ccfad31f 100644
--- a/packages/layerchart/src/lib/docs/ZoomControls.svelte
+++ b/packages/layerchart/src/lib/docs/TransformControls.svelte
@@ -7,7 +7,7 @@
     mdiMagnifyMinusOutline,
     mdiImageFilterCenterFocus,
   } from '@mdi/js';
-  import type Zoom from '$lib/components/Zoom.svelte';
+  import type Transform from '$lib/components/Transform.svelte';
 
   type Placement =
     | 'top-left'
@@ -20,7 +20,7 @@
     | 'bottom'
     | 'bottom-right';
 
-  export let zoom: Zoom;
+  export let transform: Transform;
   export let placement: Placement | undefined = 'top-right';
   export let orientation: 'horizontal' | 'vertical' = 'vertical';
 </script>
@@ -45,28 +45,28 @@
   <Tooltip title="Zoom in">
     <Button
       icon={mdiMagnifyPlusOutline}
-      on:click={() => zoom.increase()}
+      on:click={() => transform.zoomIn()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Zoom out">
     <Button
       icon={mdiMagnifyMinusOutline}
-      on:click={() => zoom.decrease()}
+      on:click={() => transform.zoomOut()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Center">
     <Button
       icon={mdiImageFilterCenterFocus}
-      on:click={() => zoom.translateCenter()}
+      on:click={() => transform.translateCenter()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
   <Tooltip title="Reset">
     <Button
       icon={mdiArrowULeftTop}
-      on:click={() => zoom.reset()}
+      on:click={() => transform.reset()}
       class="text-surface-content/50 p-2"
     />
   </Tooltip>
diff --git a/packages/layerchart/src/routes/docs/components/Zoom/+page.svelte b/packages/layerchart/src/routes/docs/components/Transform/+page.svelte
similarity index 87%
rename from packages/layerchart/src/routes/docs/components/Zoom/+page.svelte
rename to packages/layerchart/src/routes/docs/components/Transform/+page.svelte
index 3071c6df..b1c9f79a 100644
--- a/packages/layerchart/src/routes/docs/components/Zoom/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Transform/+page.svelte
@@ -8,15 +8,15 @@
   import Circle from '$lib/components/Circle.svelte';
   import Spline from '$lib/components/Spline.svelte';
   import Points from '$lib/components/Points.svelte';
-  import Zoom from '$lib/components/Zoom.svelte';
+  import Transform from '$lib/components/Transform.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
-  import ZoomControls from '$lib/docs/ZoomControls.svelte';
+  import TransformControls from '$lib/docs/TransformControls.svelte';
 
   import { getSpiral } from '$lib/utils/genData.js';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
 
-  let zoom;
+  let transform: Transform;
   let pointCount = 500;
   let angle = 137.5; //
   let showPoints = true;
@@ -58,10 +58,14 @@
 
 <Preview {data}>
   <div class="h-[500px] p-4 border rounded relative overflow-hidden">
-    <ZoomControls {zoom} />
+    <TransformControls {transform} />
     <Chart {data} x="x" y="y">
       <Svg>
-        <Zoom bind:this={zoom} scroll={scrollMode} tweened={{ duration: 800, easing: cubicOut }}>
+        <Transform
+          bind:this={transform}
+          scroll={scrollMode}
+          tweened={{ duration: 800, easing: cubicOut }}
+        >
           {#if showPath}
             <Spline {curve} {tweened} />
           {/if}
@@ -78,7 +82,7 @@
               {/each}
             </Points>
           {/if}
-        </Zoom>
+        </Transform>
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/components/Zoom/+page.ts b/packages/layerchart/src/routes/docs/components/Transform/+page.ts
similarity index 73%
rename from packages/layerchart/src/routes/docs/components/Zoom/+page.ts
rename to packages/layerchart/src/routes/docs/components/Transform/+page.ts
index ab31e6ed..8deaff77 100644
--- a/packages/layerchart/src/routes/docs/components/Zoom/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Transform/+page.ts
@@ -1,5 +1,5 @@
-import api from '$lib/components/Zoom.svelte?raw&sveld';
-import source from '$lib/components/Zoom.svelte?raw';
+import api from '$lib/components/Transform.svelte?raw&sveld';
+import source from '$lib/components/Transform.svelte?raw';
 import pageSource from './+page.svelte?raw';
 
 export async function load() {
diff --git a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte
index 8494fa03..58f030e8 100644
--- a/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/LoftedArcs/+page.svelte
@@ -13,7 +13,7 @@
   import GeoPath from '$lib/components/GeoPath.svelte';
   import GeoEdgeFade from '$lib/components/GeoEdgeFade.svelte';
   import Graticule from '$lib/components/Graticule.svelte';
-  import Zoom from '$lib/components/Zoom.svelte';
+  import Transform from '$lib/components/Transform.svelte';
 
   import links from '../_data/geo/world-links.json';
   import GeoSpline from '$lib/components/GeoSpline.svelte';
@@ -28,7 +28,6 @@
   let roll = 0;
   let sensitivity = 75;
 
-  let zoom;
   let debug = false;
 
   // Use a single link per source
@@ -103,12 +102,11 @@
         <GeoDebug class="absolute top-0 right-0 z-10" />
       {/if}
       <Svg>
-        <Zoom
+        <Transform
           mode="manual"
-          bind:this={zoom}
           scroll="none"
           tweened={{ duration: 800, easing: cubicOut }}
-          on:zoom={(e) => {
+          on:transform={(e) => {
             yaw = e.detail.translate.x * (sensitivity / projection.scale());
             pitch = -e.detail.translate.y * (sensitivity / projection.scale());
           }}
@@ -133,7 +131,7 @@
               <GeoSpline {link} class="stroke-danger stroke-2" loft={1.3} />
             </GeoEdgeFade>
           {/each}
-        </Zoom>
+        </Transform>
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
index f840e28c..960d4ed2 100644
--- a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
@@ -24,7 +24,7 @@
   import Group from '$lib/components/Group.svelte';
   import Circle from '$lib/components/Circle.svelte';
   import Pack from '$lib/components/Pack.svelte';
-  import Zoom from '$lib/components/Zoom.svelte';
+  import Transform from '$lib/components/Transform.svelte';
 
   import { findAncestor } from '$lib/utils/hierarchy.js';
 
@@ -37,12 +37,12 @@
   let colorBy = 'parent';
 
   let padding = 3;
-  let selected;
-  let zoom;
+  let selected: any;
+  let transform: Transform;
 
-  $: if (zoom && selected) {
+  $: if (transform && selected) {
     const diameter = selected.r * 2;
-    zoom.zoomTo({ x: selected.x, y: selected.y }, { width: diameter, height: diameter });
+    transform.zoomTo({ x: selected.x, y: selected.y }, { width: diameter, height: diameter });
   }
 
   const sequentialColor = scaleSequential([4, -1], chromatic.interpolateGnBu);
@@ -100,8 +100,8 @@
   <div class="h-[600px] p-4 border rounded overflow-hidden">
     <Chart data={complexHierarchy}>
       <Svg>
-        <Zoom
-          bind:this={zoom}
+        <Transform
+          bind:this={transform}
           let:scale
           tweened={{ duration: 800, easing: cubicOut }}
           disablePointer
@@ -145,7 +145,7 @@
               </g>
             {/each}
           </Pack>
-        </Zoom>
+        </Transform>
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
index 84701d64..68ba6e6a 100644
--- a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
@@ -9,7 +9,7 @@
   import GeoPath from '$lib/components/GeoPath.svelte';
   import Graticule from '$lib/components/Graticule.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
-  import Zoom from '$lib/components/Zoom.svelte';
+  import Transform from '$lib/components/Transform.svelte';
 
   export let data;
 
@@ -42,11 +42,11 @@
       let:projection
     >
       <Svg>
-        <Zoom
+        <Transform
           mode="manual"
           scroll="none"
           tweened={{ duration: 800, easing: cubicOut }}
-          on:zoom={(e) => {
+          on:transform={(e) => {
             yaw = e.detail.translate.x * (sensitivity / projection.scale());
             pitch = -e.detail.translate.y * (sensitivity / projection.scale());
           }}
@@ -79,7 +79,7 @@
               {tooltip}
             />
           {/each}
-        </Zoom>
+        </Transform>
       </Svg>
 
       <Tooltip>
diff --git a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
index bcd522e3..f0ebe37e 100644
--- a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
@@ -11,10 +11,10 @@
   import Rect from '$lib/components/Rect.svelte';
   import Text from '$lib/components/Text.svelte';
   import Tree from '$lib/components/Tree.svelte';
-  import Zoom from '$lib/components/Zoom.svelte';
+  import Transform from '$lib/components/Transform.svelte';
 
   import Preview from '$lib/docs/Preview.svelte';
-  import ZoomControls from '$lib/docs/ZoomControls.svelte';
+  import TransformControls from '$lib/docs/TransformControls.svelte';
 
   import { complexData } from '../_data/hierarchy.js';
 
@@ -30,11 +30,11 @@
   let curve = curveBumpX;
   let layout = 'chart';
   let selected;
-  let zoom;
+  let transform: Transform;
 
   /*
-	$: if (zoom && selected) {
-		zoom.zoomTo({
+	$: if (transform && selected) {
+		transform.zoomTo({
 			x: (orientation === 'horizontal' ? selected.y : selected.x),
 			y: (orientation === 'horizontal' ? selected.x : selected.y)
 		})
@@ -87,13 +87,13 @@
 
 <Preview data={complexDataHierarchy}>
   <div class="h-[800px] p-4 border rounded overflow-hidden relative">
-    <ZoomControls {zoom} orientation="horizontal" />
+    <TransformControls {transform} orientation="horizontal" />
     <Chart
       data={complexDataHierarchy}
       padding={{ top: 24, left: nodeWidth / 2, right: nodeWidth / 2 }}
     >
       <Svg>
-        <Zoom bind:this={zoom} tweened={{ duration: 800, easing: cubicOut }}>
+        <Transform bind:this={transform} tweened={{ duration: 800, easing: cubicOut }}>
           <Tree let:nodes let:links {orientation} nodeSize={layout === 'node' ? nodeSize : null}>
             {#each links as link (getNodeKey(link.source) + '_' + getNodeKey(link.target))}
               <Link data={link} {orientation} {curve} tweened class="stroke-surface-content/20" />
@@ -134,7 +134,7 @@
               </Group>
             {/each}
           </Tree>
-        </Zoom>
+        </Transform>
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
index fc8607a9..90950264 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
@@ -7,12 +7,12 @@
   import { Field, SelectField, ToggleGroup, ToggleOption } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
-  import ZoomControls from '$lib/docs/ZoomControls.svelte';
+  import TransformControls from '$lib/docs/TransformControls.svelte';
 
   import Chart, { Svg } from '$lib/components/Chart.svelte';
   import GeoPath from '$lib/components/GeoPath.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
-  import Zoom from '$lib/components/Zoom.svelte';
+  import Transform from '$lib/components/Transform.svelte';
 
   export let data;
 
@@ -35,7 +35,7 @@
     ? counties.features.filter((f) => f.id.slice(0, 2) === selectedStateId)
     : [];
 
-  let zoom;
+  let transform: Transform;
   let scrollMode = 'scale';
 </script>
 
@@ -63,7 +63,7 @@
 
 <Preview data={states}>
   <div class="h-[600px] relative overflow-hidden">
-    <ZoomControls {zoom} />
+    <TransformControls {transform} />
     <Chart
       geo={{
         projection,
@@ -73,8 +73,8 @@
       let:tooltip
     >
       <Svg>
-        <Zoom
-          bind:this={zoom}
+        <Transform
+          bind:this={transform}
           scroll={scrollMode}
           tweened={{ duration: 800, easing: cubicOut }}
           let:zoomTo
@@ -120,7 +120,7 @@
               />
             </g>
           {/each}
-        </Zoom>
+        </Transform>
       </Svg>
       <Tooltip header={(data) => data.properties.name} />
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
index b6cc165d..7aa5ed9a 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
@@ -8,14 +8,14 @@
   import GeoDebug from '$lib/docs/GeoDebug.svelte';
   import Preview from '$lib/docs/Preview.svelte';
   import TilesetField from '$lib/docs/TilesetField.svelte';
-  import ZoomControls from '$lib/docs/ZoomControls.svelte';
+  import TransformControls from '$lib/docs/TransformControls.svelte';
 
   import Chart, { Svg } from '$lib/components/Chart.svelte';
   import GeoPath from '$lib/components/GeoPath.svelte';
   import GeoTile from '$lib/components/GeoTile.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import TooltipItem from '$lib/components/TooltipItem.svelte';
-  import Zoom from '$lib/components/Zoom.svelte';
+  import Transform from '$lib/components/Transform.svelte';
 
   export let data;
   const states = feature(data.geojson, data.geojson.objects.states);
@@ -32,7 +32,7 @@
   let selectedStateName = null;
   let serviceUrl;
   let zoomDelta = 0;
-  let zoom;
+  let transform: Transform;
   let scrollMode = 'scale';
   let debug = false;
 
@@ -61,7 +61,7 @@
 
 <Preview data={filteredStates}>
   <div class="h-[600px] relative overflow-hidden">
-    <ZoomControls {zoom} />
+    <TransformControls {transform} />
     <Chart
       geo={{
         projection: geoMercator,
@@ -77,7 +77,7 @@
         <GeoDebug class="absolute top-0 left-0 z-10" />
       {/if}
       <Svg>
-        <Zoom
+        <Transform
           mode="manual"
           translateOnScale
           initialScale={projection.scale()}
@@ -86,10 +86,10 @@
           tweened={{ duration: 800, easing: cubicOut }}
           let:zoomTo
           let:reset={resetZoom}
-          on:zoom={(e) => {
+          on:transform={(e) => {
             (scale = e.detail.scale), (translate = e.detail.translate);
           }}
-          bind:this={zoom}
+          bind:this={transform}
         >
           <GeoTile url={serviceUrl} {zoomDelta} {debug} />
           {#each filteredStates.features as feature}
@@ -125,7 +125,7 @@
               }}
             />
           {/each}
-        </Zoom>
+        </Transform>
       </Svg>
       <Tooltip header={(data) => data.properties.name} let:data>
         {@const [longitude, latitude] = projection.invert([tooltip.x, tooltip.y])}