layerchart 0.41.3 → 0.41.5

package/dist/components/GeoCircle.svelte.d.ts

@@ -9,7 +9,10 @@ declare const __propDef: {
     events: {
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
-        click: CustomEvent<any>;
+        click: CustomEvent<{
+            geoPath: import("d3-geo").GeoPath<any, import("d3-geo").GeoPermissibleObjects>;
+            event: MouseEvent;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/GeoPath.svelte

@@ -27,7 +27,7 @@ export let curve = curveLinearClosed;
 let className = undefined;
 export { className as class };
 const dispatch = createEventDispatcher();
-const { width, height } = getContext('LayerCake');
+const { containerWidth, containerHeight, padding } = getContext('LayerCake');
 const canvas = getContext('canvas');
 const geo = geoContext();
 /**
@@ -48,7 +48,8 @@ $: if (renderContext === 'canvas' && $ctx) {
         computedStyles = window.getComputedStyle($ctx.canvas);
     }
     // console.count('render');
-    $ctx.clearRect(0, 0, $width, $height);
+    // Clear with negative offset due to Canvas `context.translate(...)`
+    $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
     if (render) {
         geoPath = geoCurvePath(_projection, curve, $ctx);
         render($ctx, { geoPath });
@@ -87,7 +88,6 @@ $: if (renderContext === 'canvas' && $ctx) {
       on:pointerleave
       on:pointerdown
       on:click={(event) => dispatch('click', { geoPath, event })}
-      on:click
       class={cls(fill == null && 'fill-transparent', className)}
     />
   </slot>

package/dist/components/GeoPath.svelte.d.ts

@@ -20,7 +20,10 @@ declare const __propDef: {
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
         pointerdown: PointerEvent;
-        click: CustomEvent<any>;
+        click: CustomEvent<{
+            geoPath: GeoPath;
+            event: MouseEvent;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/GeoTile.svelte

@@ -21,17 +21,15 @@ $: tile = d3Tile()
 $: tiles = tile();
 $: ({
     translate: [tx, ty],
-    scale: k,
+    scale,
 } = tiles);
 $: renderContext = canvas ? 'canvas' : 'svg';
 $: ctx = canvas?.ctx;
 $: if (renderContext === 'canvas' && $ctx && url) {
-    // console.count('render');
-    // $ctx.clearRect(0, 0, $width, $height);
     tiles.forEach(([x, y, z]) => {
         const image = new Image();
         image.onload = () => {
-            $ctx.drawImage(image, (x + tx) * k, (y + ty) * k, k, k);
+            $ctx.drawImage(image, (x + tx) * scale, (y + ty) * scale, scale, scale);
         };
         image.src = url(x, y, z);
     });
@@ -42,7 +40,7 @@ $: if (renderContext === 'canvas' && $ctx && url) {
   <slot {tiles}>
     <Group x={-$padding.left} y={-$padding.top}>
       {#each tiles as [x, y, z] (url(x, y, z))}
-        <TileImage {url} {x} {y} {z} {tx} {ty} {k} {disableCache} {debug} />
+        <TileImage {url} {x} {y} {z} {tx} {ty} {scale} {disableCache} {debug} />
       {/each}
     </Group>
   </slot>

package/dist/components/TileImage.svelte

@@ -8,9 +8,9 @@ export let y;
 export let z;
 /** translate x */
 export let tx;
-/** scale */
+/** translate y */
 export let ty;
-export let k;
+export let scale;
 export let disableCache = false;
 export let debug = false;
 export let url;
@@ -58,17 +58,23 @@ $: if (!disableCache) {
 <!-- To avoid aliasing artifacts (thin white lines) between tiles, two layers of tiles are drawn, with the lower layer’s tiles enlarged by one pixel -->
 <image
   xlink:href={href}
-  x={(x + tx) * k - 0.5}
-  y={(y + ty) * k - 0.5}
-  width={k + 1}
-  height={k + 1}
+  x={(x + tx) * scale - 0.5}
+  y={(y + ty) * scale - 0.5}
+  width={scale + 1}
+  height={scale + 1}
 />
-<image xlink:href={href} x={(x + tx) * k} y={(y + ty) * k} width={k} height={k} />
+<image xlink:href={href} x={(x + tx) * scale} y={(y + ty) * scale} width={scale} height={scale} />
 {#if debug}
-  <rect x={(x + tx) * k} y={(y + ty) * k} width={k} height={k} class="stroke-danger/50 fill-none" />
+  <rect
+    x={(x + tx) * scale}
+    y={(y + ty) * scale}
+    width={scale}
+    height={scale}
+    class="stroke-danger/50 fill-none"
+  />
   <Text
-    x={(x + tx) * k}
-    y={(y + ty) * k}
+    x={(x + tx) * scale}
+    y={(y + ty) * scale}
     verticalAnchor="start"
     dx={2}
     dy={-2}

package/dist/components/TileImage.svelte.d.ts

@@ -5,8 +5,8 @@ declare const __propDef: {
         y: number;
         z: number;
         /** translate x */ tx: number;
-        /** scale */ ty: number;
-        k: number;
+        /** translate y */ ty: number;
+        scale: number;
         disableCache?: boolean | undefined;
         debug?: boolean | undefined;
         url: (x: number, y: number, z: number) => string;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.41.3",
+  "version": "0.41.5",
   "devDependencies": {
     "@changesets/cli": "^2.27.5",
     "@mdi/js": "^7.4.47",
@@ -12,6 +12,7 @@
     "@sveltejs/adapter-auto": "^3.2.1",
     "@sveltejs/kit": "^2.5.10",
     "@sveltejs/package": "^2.3.1",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
     "@tailwindcss/typography": "^0.5.13",
     "@types/d3-array": "^3.2.1",
@@ -62,7 +63,6 @@
   },
   "type": "module",
   "dependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",