Rename Zoom component to Transform

techniq · Mar 16, 2024 · 8d5ac66 · 8d5ac66
1 parent bec9a47
commit 8d5ac66
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 60 deletions.
diff --git a/.changeset/short-phones-tap.md b/.changeset/short-phones-tap.md
@@ -0,0 +1,5 @@
+---
+"layerchart": minor
+---
+
+Rename `Zoom` component to `Transform`
diff --git a/...layerchart/src/lib/components/Zoom.svelte → ...chart/src/lib/components/Transform.svelte b/...layerchart/src/lib/components/Zoom.svelte → ...chart/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
@@ -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/...yerchart/src/lib/docs/ZoomControls.svelte → ...art/src/lib/docs/TransformControls.svelte b/...yerchart/src/lib/docs/ZoomControls.svelte → ...art/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/.../routes/docs/components/Zoom/+page.svelte → ...es/docs/components/Transform/+page.svelte b/.../routes/docs/components/Zoom/+page.svelte → ...es/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/.../src/routes/docs/components/Zoom/+page.ts → ...routes/docs/components/Transform/+page.ts b/.../src/routes/docs/components/Zoom/+page.ts → ...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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>