layerchart 0.36.2 → 0.36.4

package/dist/components/Bar.svelte

@@ -33,6 +33,7 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
         outer: groupPaddingOuter,
     },
 });
+$: dimensions = $getDimensions(bar);
 </script>
 
 <Rect
@@ -42,7 +43,7 @@ $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
   {stroke}
   stroke-width={strokeWidth}
   rx={radius}
-  {...$getDimensions(bar)}
+  {...dimensions}
   {...$$restProps}
   on:click
 />

package/dist/components/GeoPoint.svelte

@@ -2,6 +2,7 @@
 import { scaleCanvas } from 'layercake';
 import { geoContext } from './GeoContext.svelte';
 import Circle from './Circle.svelte';
+import Group from './Group.svelte';
 /** Latitude */
 export let lat;
 /** Longitude */
@@ -27,9 +28,9 @@ $: if (renderContext === 'canvas' && $ctx) {
 
 {#if renderContext === 'svg'}
   {#if $$slots.default}
-    <g transform="translate({x},{y})">
+    <Group {x} {y} {...$$restProps}>
       <slot />
-    </g>
+    </Group>
   {:else}
     <Circle cx={x} cy={y} {...$$restProps} />
   {/if}

package/dist/components/GeoTile.svelte

@@ -14,13 +14,13 @@ const geo = geoContext();
 $: tile = d3Tile()
     .size([$width, $height])
     .scale($geo.scale() * 2 * Math.PI)
-    .translate($geo([0, 0]))
+    .translate($geo([0, 0]) ?? [0, 0]) // TODO: Only works with Mercator
     .tileSize(tileSize)
     .zoomDelta(zoomDelta);
 $: tiles = tile();
 $: ({
     translate: [tx, ty],
-    scale: k
+    scale: k,
 } = tiles);
 $: renderContext = canvas ? 'canvas' : 'svg';
 $: ctx = canvas?.ctx;

package/dist/docs/GeoDebug.svelte

@@ -6,32 +6,35 @@ const geo = geoContext();
 let showCenter = false;
 </script>
 
-<div class={cls('bg-black/5 rounded m-1 backdrop-blur p-2', $$props.class)}>
-  <div class="grid gap-2 ml-2 text-xs">
-    <div><span class="text-surface-content/50">scale:</span> {format($geo.scale(), 'decimal')}</div>
+<div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
+  <div class="grid gap-2 text-xs">
+    <div><span class="opacity-50">scale:</span> {format($geo.scale(), 'decimal')}</div>
 
     <div>
-      <span class="text-surface-content/50">translate:</span>
+      <span class="opacity-50">translate:</span>
       {#each $geo.translate() as coord}
-        <div class="ml-2">{format(coord, 'decimal')}</div>
+        <div class="text-right">{format(coord, 'decimal')}</div>
       {/each}
     </div>
 
     <div>
-      <span class="text-surface-content/50">rotate:</span>
+      <span class="opacity-50">rotate:</span>
       {#each $geo.rotate() as angle}
-        <div class="ml-2">{format(angle, 'decimal')}</div>
+        <div class="text-right">{format(angle, 'decimal')}</div>
       {/each}
     </div>
 
-    <div><span class="text-surface-content/50">center:</span> {$geo.center?.()}</div>
+    <div class="grid grid-cols-[auto,1fr]">
+      <span class="opacity-50">center:</span>
+      <span class="text-right">
+        {$geo.center?.()}
+      </span>
+    </div>
 
     <div>
-      <span class="text-surface-content/50"
-        >long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span
-      >
+      <span class="opacity-50">long/lat: <Checkbox bind:checked={showCenter} size="xs" /></span>
       {#each $geo.invert?.([$width / 2, $height / 2]) as coord}
-        <div class="ml-2">{format(coord, 'decimal')}</div>
+        <div class="text-right">{format(coord, 'decimal')}</div>
       {/each}
     </div>
   </div>

package/dist/docs/TransformControls.svelte

@@ -7,7 +7,7 @@ export let orientation = 'vertical';
 
 <div
   class={cls(
-    'bg-surface-content/5 rounded-full m-1 backdrop-blur z-10 flex',
+    'bg-surface-300/50 rounded-full m-1 backdrop-blur z-10 flex',
     orientation === 'vertical' && 'flex-col',
     {
       'top-left': 'absolute top-0 left-0',
@@ -26,28 +26,28 @@ export let orientation = 'vertical';
     <Button
       icon={mdiMagnifyPlusOutline}
       on:click={() => transform.zoomIn()}
-      class="text-surface-content/50 p-2"
+      class="text-surface-content p-2"
     />
   </Tooltip>
   <Tooltip title="Zoom out">
     <Button
       icon={mdiMagnifyMinusOutline}
       on:click={() => transform.zoomOut()}
-      class="text-surface-content/50 p-2"
+      class="text-surface-content p-2"
     />
   </Tooltip>
   <Tooltip title="Center">
     <Button
       icon={mdiImageFilterCenterFocus}
       on:click={() => transform.translateCenter()}
-      class="text-surface-content/50 p-2"
+      class="text-surface-content p-2"
     />
   </Tooltip>
   <Tooltip title="Reset">
     <Button
       icon={mdiArrowULeftTop}
       on:click={() => transform.reset()}
-      class="text-surface-content/50 p-2"
+      class="text-surface-content p-2"
     />
   </Tooltip>
 </div>

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { Svg, Html } from 'layercake';
+export { Canvas, Html, Svg, WebGL } from 'layercake';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Svg, Html } from 'layercake';
+export { Canvas, Html, Svg, WebGL } from 'layercake';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/utils/rect.js

@@ -3,10 +3,13 @@ import { max, min } from 'd3-array';
 import { groupScaleBand, isScaleBand } from './scales.js';
 // TOOD: Pass in overrides for `x` and `y` accessors
 export function createDimensionGetter(context, options) {
-    const { flatData, xGet, yGet, xRange, yRange, xScale, yScale, x: xAccessor, y: yAccessor, } = context;
+    const { flatData, xGet, yGet, xScale, yScale, x: xAccessor, y: yAccessor } = context;
     const groupBy = options?.groupBy;
     const inset = options?.inset ?? 0;
-    return derived([flatData, xGet, yGet, xRange, yRange, xScale, yScale, xAccessor, yAccessor], ([$flatData, $xGet, $yGet, $xRange, $yRange, $xScale, $yScale, $xAccessor, $yAccessor]) => {
+    return derived([flatData, xGet, yGet, xScale, yScale, xAccessor, yAccessor], ([$flatData, $xGet, $yGet, $xScale, $yScale, $xAccessor, $yAccessor]) => {
+        // Use `xscale.domain()` instead of `$xDomain` to include `nice()` being applied
+        const [minXDomain, maxXDomain] = $xScale.domain();
+        const [minYDomain, maxYDomain] = $yScale.domain();
         return function getter(item) {
             if (isScaleBand($yScale)) {
                 // Horizontal band
@@ -35,13 +38,13 @@ export function createDimensionGetter(context, options) {
                 }
                 else if (xValue > 0) {
                     // Positive value
-                    left = min($xRange); // or `0`?
+                    left = max([0, minXDomain]);
                     right = xValue;
                 }
                 else {
                     // Negative value
                     left = xValue;
-                    right = min($xRange); // or `0`?
+                    right = min([0, maxXDomain]);
                 }
                 return {
                     x: $xScale(left),
@@ -78,11 +81,11 @@ export function createDimensionGetter(context, options) {
                 else if (yValue > 0) {
                     // Positive value
                     top = yValue;
-                    bottom = min($yRange); // or `0`?
+                    bottom = max([0, minYDomain]);
                 }
                 else {
                     // Negative value
-                    top = min($yRange); // or `0`?
+                    top = min([0, maxYDomain]);
                     bottom = yValue;
                 }
                 return {

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.36.2",
+  "version": "0.36.4",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",