layerchart 0.36.4 → 0.37.0

package/dist/components/Arc.svelte

@@ -159,8 +159,10 @@ $: yOffset = -Math.cos(angle) * offset;
   transform="translate({xOffset}, {yOffset})"
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointerenter
+  on:pointermove
+  on:pointerleave
+  on:touchmove
 />
 
 <slot value={$tweened_value} centroid={trackArcCentroid} {boundingBox} />

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

@@ -21,8 +21,10 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointerenter: PointerEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
+        touchmove: TouchEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Area.svelte

@@ -56,6 +56,6 @@ $: {
   {...$$restProps}
   class={cls('path-area', $$props.class)}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />

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

@@ -30,8 +30,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Axis.svelte

@@ -8,9 +8,15 @@ import Circle from './Circle.svelte';
 import Line from './Line.svelte';
 import Text from './Text.svelte';
 import { isScaleBand } from '../utils/scales.js';
-const { xScale, yScale, xRange, yRange, width } = getContext('LayerCake');
+const { xScale, yScale, xRange, yRange, width, height, padding } = getContext('LayerCake');
 /** Location of axis */
 export let placement;
+/** Axis label */
+export let label = '';
+/** Location of axis label */
+export let labelPlacement = 'middle';
+/** Props applied label Text */
+export let labelProps = undefined;
 /** Draw a rule line.  Use Rule component for greater rendering order control */
 export let rule = false;
 /** Draw a grid lines */
@@ -19,8 +25,10 @@ export let grid = false;
 export let ticks = placement === 'left' || placement === 'right' ? 4 : undefined;
 /** Length of the tick line */
 export let tickLength = 4;
+/** Format tick labels */
 export let format = undefined;
-export let labelProps = undefined;
+/** Props to apply to each tick label */
+export let tickLabelProps = undefined;
 export let spring = undefined;
 export let tweened = undefined;
 export let transitionIn = tweened ? fade : () => { };
@@ -77,7 +85,7 @@ function getCoords(tick) {
             };
     }
 }
-function getDefaultLabelProps(tick) {
+function getDefaultTickLabelProps(tick) {
     switch (placement) {
         case 'top':
             return {
@@ -166,20 +174,61 @@ function getDefaultLabelProps(tick) {
     {/if}
   {/if}
 
+  {#if label}
+    {@const resolvedLabelProps = {
+      value: label,
+      x:
+        placement === 'left' || (orientation === 'horizontal' && labelPlacement === 'start')
+          ? -$padding.left
+          : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
+            ? $width + $padding.right
+            : $width / 2,
+      y:
+        placement === 'top' || (orientation === 'vertical' && labelPlacement === 'start')
+          ? -$padding.top
+          : orientation === 'vertical' && labelPlacement === 'middle'
+            ? $height / 2
+            : placement === 'bottom' || labelPlacement === 'end'
+              ? $height + $padding.bottom
+              : 0,
+      textAnchor:
+        labelPlacement === 'middle'
+          ? 'middle'
+          : placement === 'right' || (orientation === 'horizontal' && labelPlacement === 'end')
+            ? 'end'
+            : 'start',
+      verticalAnchor:
+        placement === 'top' ||
+        (orientation === 'vertical' && labelPlacement === 'start') ||
+        (placement === 'left' && labelPlacement === 'middle')
+          ? 'start'
+          : 'end',
+      rotate: orientation === 'vertical' && labelPlacement === 'middle' ? -90 : 0,
+      capHeight: '.5rem', // text-[10px]
+      ...labelProps,
+      class: cls(
+        'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
+        labelProps?.class
+      ),
+    }}
+
+    <Text value={label} {...resolvedLabelProps} />
+  {/if}
+
   {#each tickVals as tick, index (tick)}
     {@const tickCoords = getCoords(tick)}
     {@const radialTickCoords = pointRadial(tickCoords.x, tickCoords.y)}
-    {@const textLabelProps = {
+    {@const resolvedTickLabelProps = {
       x: orientation === 'angle' ? radialTickCoords[0] : tickCoords.x,
       y: orientation === 'angle' ? radialTickCoords[1] : tickCoords.y,
       value: formatValue(tick, format ?? scale.tickFormat?.() ?? ((v) => v)),
-      ...getDefaultLabelProps(tick),
+      ...getDefaultTickLabelProps(tick),
       tweened,
       spring,
-      ...labelProps,
+      ...tickLabelProps,
       class: cls(
-        'label text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
-        labelProps?.class
+        'tickLabel text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
+        tickLabelProps?.class
       ),
     }}
 
@@ -254,8 +303,8 @@ function getDefaultLabelProps(tick) {
         />
       {/if}
 
-      <slot name="label" labelProps={textLabelProps} {index}>
-        <Text {...textLabelProps} />
+      <slot name="tickLabel" labelProps={resolvedTickLabelProps} {index}>
+        <Text {...resolvedTickLabelProps} />
       </slot>
     </g>
   {/each}

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

@@ -8,12 +8,15 @@ import Text from './Text.svelte';
 declare const __propDef: {
     props: {
         /** Location of axis */ placement: 'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius';
+        /** Axis label */ label?: string | undefined;
+        /** Location of axis label */ labelPlacement?: "start" | "end" | "middle" | undefined;
+        /** Props applied label Text */ labelProps?: Partial<ComponentProps<Text>> | undefined;
         /** Draw a rule line.  Use Rule component for greater rendering order control */ rule?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Draw a grid lines */ grid?: boolean | SVGAttributes<SVGLineElement> | undefined;
         /** Control the number of ticks*/ ticks?: number | any[] | Function | undefined;
         /** Length of the tick line */ tickLength?: number | undefined;
-        format?: FormatType | undefined;
-        labelProps?: Partial<ComponentProps<Text>> | undefined;
+        /** Format tick labels */ format?: FormatType | undefined;
+        /** Props to apply to each tick label */ tickLabelProps?: Partial<ComponentProps<Text>> | undefined;
         spring?: boolean | Parameters<typeof springStore>[1];
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
         transitionIn?: typeof fade | (() => void) | undefined;
@@ -23,7 +26,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {
+        tickLabel: {
             labelProps: any;
             index: any;
         };

package/dist/components/Calendar.svelte

@@ -49,8 +49,8 @@ $: cells = yearDays.map((date) => {
       width={cellWidth}
       height={cellHeight}
       fill={cell.color}
-      on:mousemove={(e) => tooltip?.show(e, cell.data)}
-      on:mouseleave={(e) => tooltip?.hide()}
+      on:pointermove={(e) => tooltip?.show(e, cell.data)}
+      on:pointerleave={(e) => tooltip?.hide()}
       class="stroke-surface-content/5"
       {...$$restProps}
     />

package/dist/components/Chart.svelte

@@ -2,18 +2,25 @@
 // export { Svg, Html };
 // TODO: Workaround for sveld error: `Cannot read properties of null (reading 'type')` in `ComponentParser`
 // See: https://github.com/carbon-design-system/sveld/issues/104
-import { LayerCake, Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL, } from 'layercake';
-export const Svg = _Svg;
-export const Html = _Html;
+import { LayerCake, 
+// Canvas as _Canvas,
+Html as _Html, 
+// Svg as _Svg,
+WebGL as _WebGL, } from 'layercake';
+import _Canvas from './layout/Canvas.svelte';
+import _Svg from './layout/Svg.svelte';
 export const Canvas = _Canvas;
+export const Html = _Html;
+export const Svg = _Svg;
 export const WebGL = _WebGL;
 </script>
 
 <script>import { max, min } from 'd3-array';
 import { get } from 'lodash-es';
 import { isScaleBand } from '../utils/scales.js';
-import TooltipContext from './TooltipContext.svelte';
 import GeoContext from './GeoContext.svelte';
+import TooltipContext from './TooltipContext.svelte';
+import TransformContext from './TransformContext.svelte';
 /**
  *  Resolve a value from data based on the accessor type
  */
@@ -59,8 +66,14 @@ $: if (yBaseline != null) {
  * see: https://github.com/mhkeller/layercake/issues/83
  */
 $: yReverse = yScale ? !isScaleBand(yScale) : true;
-export let tooltip = undefined;
+/** Props passed to GeoContext */
 export let geo = undefined;
+/** Props passed to TooltipContext */
+export let tooltip = undefined;
+/** Props passed to TransformContext */
+export let transform = undefined;
+export let transformContext = undefined;
+let geoProjection = undefined;
 </script>
 
 <LayerCake
@@ -90,30 +103,60 @@ export let geo = undefined;
   let:data
   let:flatData
 >
-  <GeoContext {...geo} let:projection>
-    {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
-    <TooltipContext {...tooltipProps} let:tooltip>
-      <slot
-        {aspectRatio}
-        {containerHeight}
-        {containerWidth}
-        {height}
-        {width}
-        {element}
-        {projection}
-        {tooltip}
-        {xScale}
-        {xGet}
-        {yScale}
-        {yGet}
-        {zScale}
-        {zGet}
-        {rScale}
-        {rGet}
-        {padding}
-        {data}
-        {flatData}
-      />
-    </TooltipContext>
-  </GeoContext>
+  <TransformContext
+    bind:this={transformContext}
+    processTranslate={geo
+      ? (x, y, deltaX, deltaY, scale) => {
+          if (geo.applyTransform?.includes('rotate')) {
+            // When applying transform to rotate, invert `y` values and reduce sensitivity based on projection scale
+            // see: https://observablehq.com/@benoldenburg/simple-globe and https://observablehq.com/@michael-keith/draggable-globe-in-d3
+            const projectionScale = $geoProjection.scale();
+            const sensitivity = 75;
+            return {
+              x: x + deltaX * (sensitivity / projectionScale),
+              y: y + deltaY * (sensitivity / projectionScale) * -1,
+            };
+          } else if (geo.applyTransform?.includes('translate')) {
+            // When applying to `translate`, use pointer values as is (with no `scale` adjustment)
+            return { x: x + deltaX, y: y + deltaY };
+          } else {
+            // Apply default TransformContext.processTransform (passing `undefined` below appears to not work when checking for `geo?.applyTransform` exists)
+            return { x: x + deltaX / scale, y: y + deltaY / scale };
+          }
+        }
+      : undefined}
+    {...transform}
+    let:transform={_transform}
+    on:transform
+    on:dragstart
+    on:dragend
+  >
+    <GeoContext {...geo} bind:geo={geoProjection} let:projection>
+      {@const tooltipProps = typeof tooltip === 'object' ? tooltip : {}}
+      <TooltipContext {...tooltipProps} let:tooltip>
+        <slot
+          {aspectRatio}
+          {containerHeight}
+          {containerWidth}
+          {height}
+          {width}
+          {element}
+          {projection}
+          transform={_transform}
+          {tooltip}
+          {xScale}
+          {xGet}
+          {yScale}
+          {yGet}
+          {zScale}
+          {zGet}
+          {rScale}
+          {rGet}
+          {padding}
+          {data}
+          {flatData}
+        />
+      </TooltipContext>
+    </GeoContext>
+  </TransformContext>
 </LayerCake>

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

@@ -1,12 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
-import { Svg as _Svg, Html as _Html, Canvas as _Canvas, WebGL as _WebGL } from 'layercake';
-export declare const Svg: typeof _Svg;
-export declare const Html: typeof _Html;
+import { Html as _Html, WebGL as _WebGL } from 'layercake';
+import _Canvas from './layout/Canvas.svelte';
+import _Svg from './layout/Svg.svelte';
 export declare const Canvas: typeof _Canvas;
+export declare const Html: typeof _Html;
+export declare const Svg: typeof _Svg;
 export declare const WebGL: typeof _WebGL;
 import type { ComponentProps } from 'svelte';
-import TooltipContext from './TooltipContext.svelte';
 import GeoContext from './GeoContext.svelte';
+import TooltipContext from './TooltipContext.svelte';
+import TransformContext from './TransformContext.svelte';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -16,10 +19,22 @@ declare const __propDef: {
         yScale?: Function | undefined;
         xBaseline?: number | null | undefined;
         yBaseline?: number | null | undefined;
-        tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
         geo?: Partial<ComponentProps<GeoContext>> | undefined;
+        tooltip?: Partial<ComponentProps<TooltipContext>> | boolean | undefined;
+        transform?: Partial<ComponentProps<TransformContext>> | undefined;
+        transformContext?: TransformContext | undefined;
     };
     events: {
+        transform: CustomEvent<{
+            scale: number;
+            translate: {
+                x: number;
+                y: number;
+            };
+        }>;
+        dragstart: CustomEvent<null>;
+        dragend: CustomEvent<null>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
@@ -31,11 +46,23 @@ declare const __propDef: {
             width: number;
             element: Element;
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
+            transform: {
+                scale: any;
+                translate: any;
+                zoomTo: (center: {
+                    x: number;
+                    y: number;
+                }, rect?: {
+                    width: number;
+                    height: number;
+                } | undefined) => void;
+                reset: () => void;
+            };
             tooltip: {
                 y: number;
                 x: number;
                 data: null;
-                show: (event: MouseEvent | TouchEvent, tooltipData?: any) => void;
+                show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };
             xScale: any;

package/dist/components/Circle.svelte

@@ -26,6 +26,6 @@ $: tick().then(() => {
   class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
-  on:mousemove
-  on:mouseleave
+  on:pointermove
+  on:pointerleave
 />

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

@@ -14,8 +14,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/ClipPath.svelte

@@ -21,7 +21,7 @@ export let disabled = false;
   {#if disabled}
     <slot />
   {:else}
-    <g style:clip-path="url(#{id})" on:click on:mousemove on:mouseleave on:keydown>
+    <g style:clip-path="url(#{id})" on:click on:pointermove on:pointerleave on:keydown>
       <slot {id} url="url(#{id})" {useId} />
     </g>
   {/if}

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

@@ -8,8 +8,8 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
         keydown: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/GeoCircle.svelte

@@ -9,4 +9,4 @@ export let precision = 6;
 $: geojson = geoCircle().radius(radius).center(center).precision(precision)();
 </script>
 
-<GeoPath {geojson} {...$$restProps} on:mousemove on:mouseleave on:click />
+<GeoPath {geojson} {...$$restProps} on:pointermove on:pointerleave on:click />

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

@@ -7,8 +7,8 @@ declare const __propDef: {
         precision?: number | undefined;
     };
     events: {
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
         click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/GeoContext.svelte

@@ -1,6 +1,7 @@
 <script context="module">import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import {} from 'd3-geo';
+import { transformContext } from './TransformContext.svelte';
 export const geoContextKey = Symbol();
 export function geoContext() {
     return getContext(geoContextKey);
@@ -22,24 +23,47 @@ export let rotate = undefined;
 export let scale = undefined;
 export let translate = undefined;
 export let center = undefined;
+/** Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are mutually selected  */
+export let applyTransform = [];
 export let reflectX = undefined;
 export let reflectY = undefined;
-const geo = writable(projection?.());
+/** Exposed to allow binding in Chart */
+export let geo = writable(projection?.());
 setGeoContext(geo);
+const { scale: transformScale, translate: transformTranslate } = transformContext();
 $: fitSizeRange = (fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
 $: if (projection) {
     const _projection = projection();
     if (fitGeojson && 'fitSize' in _projection) {
         _projection.fitSize(fitSizeRange, fitGeojson);
     }
-    if (scale && 'scale' in _projection) {
-        _projection.scale(scale);
+    if ('scale' in _projection) {
+        if (scale) {
+            _projection.scale(scale);
+        }
+        if (applyTransform.includes('scale')) {
+            _projection.scale($transformScale);
+        }
     }
-    if (rotate && 'rotate' in _projection) {
-        _projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
+    if ('rotate' in _projection) {
+        if (rotate) {
+            _projection.rotate([rotate.yaw, rotate.pitch, rotate.roll]);
+        }
+        if (applyTransform.includes('rotate')) {
+            _projection.rotate([
+                $transformTranslate.x, // yaw
+                $transformTranslate.y, // pitch
+                // TODO: `roll` from `transformContext`?
+            ]);
+        }
     }
-    if (translate && 'translate' in _projection) {
-        _projection.translate(translate);
+    if ('translate' in _projection) {
+        if (translate) {
+            _projection.translate(translate);
+        }
+        if (applyTransform.includes('translate')) {
+            _projection.translate([$transformTranslate.x, $transformTranslate.y]);
+        }
     }
     if (center && 'center' in _projection) {
         _projection.center(center);

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

@@ -22,8 +22,10 @@ declare const __propDef: {
         scale?: number | undefined;
         translate?: [number, number] | undefined;
         center?: [number, number] | undefined;
+        /** Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are mutually selected  */ applyTransform?: ("rotate" | "scale" | "translate")[] | undefined;
         reflectX?: boolean | undefined;
         reflectY?: boolean | undefined;
+        /** Exposed to allow binding in Chart */ geo?: Writable<GeoProjection | GeoIdentityTransform> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/GeoPath.svelte

@@ -1,16 +1,15 @@
 <script>import { createEventDispatcher, getContext } from 'svelte';
 import {} from 'd3-geo';
-import { scaleCanvas } from 'layercake';
 import { cls } from 'svelte-ux';
 import { geoContext } from './GeoContext.svelte';
 import { curveLinearClosed } from 'd3-shape';
 import { geoCurvePath } from '../utils/geo.js';
-export let geojson;
+export let geojson = undefined;
+/** Render to canvas */
+export let render = undefined;
 export let fill = undefined;
 export let stroke = undefined;
 export let strokeWidth = undefined;
-/** Render to canvas */
-export let render = undefined;
 /**
  * Tooltip context to setup mouse events to show tooltip for related data
  */
@@ -41,7 +40,6 @@ $: if (renderContext === 'canvas' && $ctx) {
         computedStyles = window.getComputedStyle($ctx.canvas);
     }
     // console.count('render');
-    scaleCanvas($ctx, $width, $height);
     $ctx.clearRect(0, 0, $width, $height);
     if (render) {
         geoPath = geoCurvePath($geo, curve, $ctx);
@@ -58,7 +56,8 @@ $: if (renderContext === 'canvas' && $ctx) {
                 'transparent';
         $ctx.fill();
         $ctx.lineWidth = strokeWidth;
-        $ctx.strokeStyle = stroke ?? computedStyles.stroke;
+        $ctx.strokeStyle =
+            stroke ?? computedStyles.stroke === 'none' ? 'transparent' : computedStyles.stroke;
         $ctx.stroke();
     }
 }
@@ -71,10 +70,13 @@ $: if (renderContext === 'canvas' && $ctx) {
       d={geoPath(geojson)}
       {fill}
       {stroke}
-      on:mousemove={(e) => tooltip?.show(e, geojson)}
-      on:mousemove
-      on:mouseleave={(e) => tooltip?.hide()}
-      on:mouseleave
+      stroke-width={strokeWidth}
+      on:pointerenter={(e) => tooltip?.show(e, geojson)}
+      on:pointerenter
+      on:pointermove={(e) => tooltip?.show(e, geojson)}
+      on:pointermove
+      on:pointerleave={(e) => tooltip?.hide()}
+      on:pointerleave
       on:click={(event) => dispatch('click', { geoPath, event })}
       on:click
       class={cls($$props.fill == null && 'fill-transparent', $$props.class)}

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

@@ -1,23 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
-import { type GeoPermissibleObjects } from 'd3-geo';
+import { type GeoPath, type GeoPermissibleObjects } from 'd3-geo';
 import type { TooltipContextValue } from './TooltipContext.svelte';
 import { type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        geojson: GeoPermissibleObjects;
+        geojson?: GeoPermissibleObjects | undefined;
+        render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }) => any) | undefined;
         fill?: string | undefined;
         stroke?: string | undefined;
         strokeWidth?: number | string | undefined;
-        render?: ((ctx: CanvasRenderingContext2D, { geoPath: GeoPath }: {
-            geoPath: any;
-        }) => any) | undefined;
         tooltip?: TooltipContextValue | undefined;
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
     };
     events: {
-        mousemove: MouseEvent;
-        mouseleave: MouseEvent;
+        pointerenter: PointerEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
         click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/dist/components/GeoPoint.svelte

@@ -1,5 +1,4 @@
 <script>import { getContext } from 'svelte';
-import { scaleCanvas } from 'layercake';
 import { geoContext } from './GeoContext.svelte';
 import Circle from './Circle.svelte';
 import Group from './Group.svelte';
@@ -16,8 +15,7 @@ $: [x, y] = $geo([long, lat]) ?? [0, 0];
 $: renderContext = canvas ? 'canvas' : 'svg';
 $: ctx = canvas?.ctx;
 $: if (renderContext === 'canvas' && $ctx) {
-    scaleCanvas($ctx, $width, $height);
-    $ctx.clearRect(0, 0, $width, $height);
+    // $ctx.clearRect(0, 0, $width, $height);
     // Transfer classes defined on <GeoPoint> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
     if ($$props.class) {
         $ctx.canvas.classList.add(...$$props.class.split(' '));