layerchart 0.36.5 → 0.37.1

package/dist/components/{Transform.svelte → TransformContext.svelte}

@@ -1,23 +1,53 @@
-<script>import { getContext, createEventDispatcher } from 'svelte';
+<script context="module">import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+export const transformContextKey = Symbol();
+const defaultContext = {
+    mode: 'none',
+    scale: writable(1),
+    translate: writable({ x: 0, y: 0 }),
+    dragging: writable(false),
+    reset: () => { },
+    zoomIn: () => { },
+    zoomOut: () => { },
+    translateCenter: () => { },
+    zoomTo: () => { },
+};
+export function transformContext() {
+    return getContext(transformContextKey) ?? defaultContext;
+}
+function setTransformContext(transform) {
+    setContext(transformContextKey, transform);
+}
+</script>
+
+<script>import { createEventDispatcher } from 'svelte';
 import { motionStore } from '../stores/motionStore.js';
-const { width, height, padding } = getContext('LayerCake');
-export let mode = 'svg';
+const { width, height } = getContext('LayerCake');
+export let mode = 'none';
 export let translateOnScale = false;
 export let spring = undefined;
 export let tweened = undefined;
+export let processTranslate = (x, y, deltaX, deltaY, scale) => {
+    return {
+        x: x + deltaX / scale,
+        y: y + deltaY / scale,
+    };
+};
+/** Disable pointer events including move/dragging */
 export let disablePointer = false;
+/** Action to take during wheel scroll */
 export let scroll = 'none';
+/** Distance/threshold to consider drag vs click (disable click propagation) */
 export let clickDistance = 10;
 const dispatch = createEventDispatcher();
-let dragging = false;
-let moved = false;
+let pointerDown = false;
+const dragging = writable(false);
 export let initialTranslate = { x: 0, y: 0 };
-const translate = motionStore(initialTranslate, { spring, tweened });
+export const translate = motionStore(initialTranslate, { spring, tweened });
 export let initialScale = 1;
-const scale = motionStore(initialScale, { spring, tweened });
+export const scale = motionStore(initialScale, { spring, tweened });
 let startPoint = { x: 0, y: 0 };
 let startTranslate = { x: 0, y: 0 };
-let svgEl = null;
 export function reset() {
     $translate = initialTranslate;
     $scale = initialScale;
@@ -44,44 +74,50 @@ export function zoomTo(center, rect) {
         $scale = $width < $height ? $width / rect.width : $height / rect.height;
     }
 }
-function onMouseDown(e) {
+setTransformContext({
+    mode,
+    scale,
+    translate,
+    dragging,
+    reset,
+    zoomIn,
+    zoomOut,
+    translateCenter,
+    zoomTo,
+});
+function onPointerDown(e) {
     if (disablePointer)
         return;
     e.preventDefault();
-    dragging = true;
-    moved = false;
-    svgEl = e.currentTarget.ownerSVGElement; // capture for reference in mousemove event
-    startPoint = localPoint(svgEl, e);
+    pointerDown = true;
+    $dragging = false;
+    startPoint = localPoint(e);
     startTranslate = $translate;
-    window.addEventListener('mousemove', onMouseMove, { capture: true });
-    window.addEventListener('mouseup', onMouseUp);
     dispatch('dragstart');
 }
-function onMouseMove(e) {
-    if (!dragging)
+function onPointerMove(e) {
+    if (!pointerDown)
         return;
     e.preventDefault(); // Stop text selection
-    e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
-    const endPoint = localPoint(svgEl, e);
+    const endPoint = localPoint(e);
     const deltaX = endPoint.x - startPoint.x;
     const deltaY = endPoint.y - startPoint.y;
-    translate.set({
-        x: startTranslate.x + deltaX / (mode === 'manual' ? 1 : $scale),
-        y: startTranslate.y + deltaY / (mode === 'manual' ? 1 : $scale),
-    }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
-    if (!moved) {
+    if (!$dragging) {
         // If dragged beyond threshold, disable click propagation
-        moved = deltaX * deltaX + deltaY * deltaY > clickDistance;
+        $dragging = deltaX * deltaX + deltaY * deltaY > clickDistance;
+    }
+    if ($dragging) {
+        e.stopPropagation(); // Stop tooltip from trigging (along with `capture: true`)
+        e.currentTarget.setPointerCapture(e.pointerId);
+        translate.set(processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
-function onMouseUp(e) {
-    dragging = false;
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
+function onPointerUp(e) {
+    pointerDown = false;
     dispatch('dragend');
 }
 function onClick(e) {
-    if (moved) {
+    if ($dragging) {
         // Do not propagate click event to children if drag/moved.  Registered in capture phase (top-down)
         e.stopPropagation();
     }
@@ -89,15 +125,14 @@ function onClick(e) {
 function onDoubleClick(e) {
     if (disablePointer)
         return;
-    const point = localPoint(svgEl, e);
+    const point = localPoint(e);
     scaleTo(e.shiftKey ? 0.5 : 2, point);
 }
 function onWheel(e) {
     if (scroll === 'none' || disablePointer)
         return;
     e.preventDefault();
-    svgEl = e.currentTarget.ownerSVGElement;
-    const point = (startPoint = localPoint(svgEl, e));
+    const point = (startPoint = localPoint(e));
     // Pinch to zoom is registered as a wheel event with control key
     const pinchToZoom = e.ctrlKey;
     if (scroll === 'scale' || pinchToZoom) {
@@ -106,10 +141,7 @@ function onWheel(e) {
         scaleTo(Math.pow(2, scaleBy), point, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
     else if (scroll === 'translate') {
-        translate.update((startTranslate) => ({
-            x: startTranslate.x + -e.deltaX / (mode === 'manual' ? 1 : $scale),
-            y: startTranslate.y + -e.deltaY / (mode === 'manual' ? 1 : $scale),
-        }), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
+        translate.update((startTranslate) => processTranslate(startTranslate.x, startTranslate.y, -e.deltaX, -e.deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
 /**
@@ -132,59 +164,38 @@ function scaleTo(value, point, options = undefined) {
         translate.set(newTranslate, options);
     }
 }
-function localPoint(svgEl, e) {
-    if (svgEl) {
-        const screenCTM = svgEl.getScreenCTM();
-        let point = svgEl.createSVGPoint();
-        point.x = e.clientX;
-        point.y = e.clientY;
-        point = point.matrixTransform(screenCTM?.inverse());
-        return {
-            x: point.x,
-            y: point.y,
-        };
-    }
-    else {
-        return {
-            x: e.clientX,
-            y: e.clientY,
-        };
-    }
+function localPoint(e) {
+    return {
+        x: e.offsetX,
+        y: e.offsetY,
+    };
 }
 $: center = { x: $width / 2, y: $height / 2 };
 $: viewportCenter = {
     x: center.x - $translate.x,
     y: center.y - $translate.y,
 };
-let transform = '';
-$: if (mode === 'svg') {
-    const newTranslate = {
-        x: $translate.x * $scale + center.x - center.x * $scale,
-        y: $translate.y * $scale + center.y - center.y * $scale,
-    };
-    transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
-}
 $: dispatch('transform', { scale: $scale, translate: $translate });
 </script>
 
-<g
+<div
   on:mousewheel={onWheel}
-  on:mousedown={onMouseDown}
+  on:pointerdown={onPointerDown}
+  on:pointermove={onPointerMove}
+  on:touchmove={(e) => {
+    // Touch events cause pointer events to be interrupted.
+    // Typically `touch-action: none` works, but doesn't appear to with SVG, but `preventDefault()` works here
+    // https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#touch-action_css_property
+    e.preventDefault();
+  }}
+  on:pointerup={onPointerUp}
   on:dblclick={onDoubleClick}
   on:click|capture={onClick}
   on:click
   on:keydown
   on:keyup
   on:keypress
+  class="h-full"
 >
-  <rect
-    x={-$padding.left}
-    y={-$padding.top}
-    width={$width + $padding.left + $padding.right}
-    height={$height + $padding.top + $padding.bottom}
-    fill="transparent"
-  />
-  <g {transform}>
-    <slot scale={$scale} {zoomTo} {reset} />
-  </g>
-</g>
+  <slot transform={{ scale: $scale, translate: $translate, zoomTo, reset }} />
+</div>

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

@@ -0,0 +1,111 @@
+import { SvelteComponentTyped } from "svelte";
+import { type Readable, type Writable } from 'svelte/store';
+export declare const transformContextKey: unique symbol;
+export type TransformContextValue = {
+    mode: 'canvas' | 'none';
+    scale: Writable<number>;
+    translate: Writable<{
+        x: number;
+        y: number;
+    }>;
+    dragging: Readable<boolean>;
+    reset(): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    translateCenter(): void;
+    zoomTo(center: {
+        x: number;
+        y: number;
+    }, rect?: {
+        width: number;
+        height: number;
+    }): void;
+};
+export type TransformContext = TransformContextValue;
+export declare function transformContext(): TransformContext;
+import { motionStore } from '../stores/motionStore.js';
+declare const __propDef: {
+    props: {
+        mode?: "none" | "canvas" | undefined;
+        translateOnScale?: boolean | undefined;
+        spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
+        tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
+        processTranslate?: ((x: number, y: number, deltaX: number, deltaY: number, scale: number) => {
+            x: number;
+            y: number;
+        }) | undefined;
+        /** Disable pointer events including move/dragging */ disablePointer?: boolean | undefined;
+        /** Action to take during wheel scroll */ scroll?: "none" | "scale" | "translate" | undefined;
+        /** Distance/threshold to consider drag vs click (disable click propagation) */ clickDistance?: number | undefined;
+        initialTranslate?: {
+            x: number;
+            y: number;
+        } | undefined;
+        translate?: import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined;
+        initialScale?: number | undefined;
+        scale?: import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined;
+        reset?: (() => void) | undefined;
+        zoomIn?: (() => void) | undefined;
+        zoomOut?: (() => void) | undefined;
+        translateCenter?: (() => void) | undefined;
+        zoomTo?: ((center: {
+            x: number;
+            y: number;
+        }, rect?: {
+            width: number;
+            height: number;
+        }) => void) | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        dragstart: CustomEvent<null>;
+        dragend: CustomEvent<null>;
+        transform: CustomEvent<{
+            scale: number;
+            translate: {
+                x: number;
+                y: number;
+            };
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            transform: {
+                scale: any;
+                translate: any;
+                zoomTo: (center: {
+                    x: number;
+                    y: number;
+                }, rect?: {
+                    width: number;
+                    height: number;
+                }) => void;
+                reset: () => void;
+            };
+        };
+    };
+};
+export type TransformContextProps = typeof __propDef.props;
+export type TransformContextEvents = typeof __propDef.events;
+export type TransformContextSlots = typeof __propDef.slots;
+export default class TransformContext extends SvelteComponentTyped<TransformContextProps, TransformContextEvents, TransformContextSlots> {
+    get translate(): NonNullable<import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined>;
+    get scale(): NonNullable<import("svelte/motion").Spring<any> | import("svelte/motion").Tweened<any> | Writable<any> | undefined>;
+    get reset(): () => void;
+    get zoomIn(): () => void;
+    get zoomOut(): () => void;
+    get translateCenter(): () => void;
+    get zoomTo(): (center: {
+        x: number;
+        y: number;
+    }, rect?: {
+        width: number;
+        height: number;
+    } | undefined) => void;
+}
+export {};

package/dist/components/Voronoi.svelte

@@ -33,9 +33,13 @@ $: boundHeight = Math.max($height, 0);
       <GeoPath
         geojson={feature}
         class={cls('fill-transparent', classes.path)}
-        on:mousemove={(e) =>
-          dispatch('mousemove', { event: e, data: feature.properties.site.data, feature })}
-        on:mouseleave
+        on:pointermove={(e) =>
+          dispatch('pointermove', { event: e, data: feature.properties.site.data, feature })}
+        on:pointerleave
+        on:touchmove={(e) => {
+          // Prevent touch to not interfer with pointer
+          e.preventDefault();
+        }}
         on:click={(e) => dispatch('click', { data: feature.properties.site.data, feature })}
       />
     {/each}
@@ -45,8 +49,12 @@ $: boundHeight = Math.max($height, 0);
       <path
         d={voronoi.renderCell(i)}
         class={cls('fill-transparent', classes.path)}
-        on:mousemove={(e) => dispatch('mousemove', { event: e, data: point.data, point })}
-        on:mouseleave
+        on:pointermove={(e) => dispatch('pointermove', { event: e, data: point.data, point })}
+        on:pointerleave
+        on:touchmove={(e) => {
+          // Prevent touch to not interfer with pointer
+          e.preventDefault();
+        }}
         on:click={(e) => dispatch('click', { data: point.data, point })}
       />
     {/each}

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

@@ -10,14 +10,14 @@ declare const __propDef: {
         } | undefined;
     };
     events: {
-        mouseleave: MouseEvent;
+        pointerleave: PointerEvent;
         click: CustomEvent<{
             data: any;
             point?: [number, number] | undefined;
             feature?: GeoPermissibleObjects | undefined;
         }>;
-        mousemove: CustomEvent<{
-            event: MouseEvent;
+        pointermove: CustomEvent<{
+            event: PointerEvent;
             data: any;
             point?: [number, number] | undefined;
             feature?: GeoPermissibleObjects | undefined;

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export { Html, WebGL } from 'layercake';
 export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
@@ -7,6 +8,7 @@ export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
+export { default as Canvas } from './layout/Canvas.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
@@ -26,6 +28,7 @@ export { default as GeoVisible } from './GeoVisible.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
+export { default as HitCanvas } from './HitCanvas.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
@@ -44,6 +47,7 @@ export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
 export { default as Rule } from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
+export { default as Svg } from './layout/Svg.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
@@ -51,7 +55,7 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
+export { default as TransformContext, transformContext } from './TransformContext.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 Transform } from './Transform.svelte';

package/dist/components/index.js

@@ -1,3 +1,5 @@
+// Re-export for easy access (Svg and Canvas are provided by LayerChart)
+export { Html, WebGL } from 'layercake';
 export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
 export { default as AreaStack } from './AreaStack.svelte';
@@ -7,6 +9,7 @@ export { default as Bars } from './Bars.svelte';
 export { default as Blur } from './Blur.svelte';
 export { default as Bounds } from './Bounds.svelte';
 export { default as Calendar } from './Calendar.svelte';
+export { default as Canvas } from './layout/Canvas.svelte';
 export { default as Chart } from './Chart.svelte';
 export { default as ChartClipPath } from './ChartClipPath.svelte';
 export { default as Circle } from './Circle.svelte';
@@ -26,6 +29,7 @@ export { default as GeoVisible } from './GeoVisible.svelte';
 export { default as Graticule } from './Graticule.svelte';
 export { default as Group } from './Group.svelte';
 export { default as Highlight } from './Highlight.svelte';
+export { default as HitCanvas } from './HitCanvas.svelte';
 export { default as Hull } from './Hull.svelte';
 export { default as Labels } from './Labels.svelte';
 export { default as Legend } from './Legend.svelte';
@@ -44,6 +48,7 @@ export { default as Rect } from './Rect.svelte';
 export { default as RectClipPath } from './RectClipPath.svelte';
 export { default as Rule } from './Rule.svelte';
 export { default as Sankey } from './Sankey.svelte';
+export { default as Svg } from './layout/Svg.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
@@ -51,7 +56,7 @@ export { default as Tooltip } from './Tooltip.svelte';
 export { default as TooltipContext } from './TooltipContext.svelte';
 export { default as TooltipItem } from './TooltipItem.svelte';
 export { default as TooltipSeparator } from './TooltipSeparator.svelte';
+export { default as TransformContext, transformContext } from './TransformContext.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 Transform } from './Transform.svelte';

package/dist/components/layout/Canvas.svelte

@@ -0,0 +1,78 @@
+<script>import { getContext, onMount, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { scaleCanvas } from 'layercake';
+import { cls } from 'svelte-ux';
+import { transformContext } from '../TransformContext.svelte';
+const { width, height, padding } = getContext('LayerCake');
+/** The `<canvas>` tag. Useful for bindings. */
+export let element = undefined;
+/** The `<canvas>`'s 2d context. Useful for bindings. */
+export let context = undefined;
+/** Force the use of a software (instead of hardware accelerated) 2D canvas and can save memory when calling getImageData() frequently.
+ * see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#willreadfrequently */
+export let willReadFrequently = false;
+/** The layer's z-index. */
+export let zIndex = undefined;
+/** Set this to `false` to set `pointer-events: none;` on the entire layer. */
+export let pointerEvents = undefined;
+/** Text to display if the browser won't render a canvas tag. You can also set arbitrary HTML via the "fallback" slot but this is fine if you just need text. If you use the "fallback" slot, this prop is ignored. */
+export let fallback = '';
+/** A string passed to the `aria-label` on the `<canvas>` tag. */
+export let label = undefined;
+/** A string passed to the `aria-labelledby` on the `<canvas>` tag. */
+export let labelledBy = undefined;
+/** A string passed to `aria-describedby` property on the `<canvas>` tag. */
+export let describedBy = undefined;
+const ctx = writable({});
+onMount(() => {
+    context = element?.getContext('2d', { willReadFrequently });
+});
+const { mode, scale, translate } = transformContext();
+$: if (context) {
+    scaleCanvas(context, $width, $height);
+    context.clearRect(0, 0, $width, $height);
+    if (mode === 'canvas') {
+        const center = { x: $width / 2, y: $height / 2 };
+        const newTranslate = {
+            x: $translate.x * $scale + center.x - center.x * $scale,
+            y: $translate.y * $scale + center.y - center.y * $scale,
+        };
+        context.translate(newTranslate.x, newTranslate.y);
+        context.scale($scale, $scale);
+    }
+    // Force children to re-draw
+    $ctx = context;
+}
+$: ctx.set(context);
+setContext('canvas', { ctx });
+</script>
+
+<canvas
+  bind:this={element}
+  style:top="{$padding.top}px"
+  style:right="{$padding.right}px"
+  style:bottom="{$padding.bottom}px"
+  style:left="{$padding.left}px"
+  style:z-index={zIndex}
+  class={cls(
+    'layercake-layout-canvas',
+    'absolute w-full h-full',
+    pointerEvents === false && 'pointer-events-none',
+    $$restProps.class
+  )}
+  aria-label={label}
+  aria-labelledby={labelledBy}
+  aria-describedby={describedBy}
+  on:pointerenter
+  on:pointermove
+  on:pointerleave
+  on:pointerleave
+  on:touchmove
+  on:click
+>
+  <slot name="fallback">
+    {fallback || ''}
+  </slot>
+</canvas>
+
+<slot {element} {context}></slot>

package/dist/components/layout/Canvas.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        element?: HTMLCanvasElement | undefined;
+        context?: CanvasRenderingContext2D | undefined;
+        willReadFrequently?: boolean | undefined;
+        zIndex?: undefined;
+        pointerEvents?: boolean | undefined;
+        fallback?: string | undefined;
+        label?: string | undefined;
+        labelledBy?: string | undefined;
+        describedBy?: string | undefined;
+    };
+    events: {
+        pointerenter: PointerEvent;
+        pointermove: PointerEvent;
+        pointerleave: PointerEvent;
+        touchmove: TouchEvent;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        fallback: {};
+        default: {
+            element: HTMLCanvasElement | undefined;
+            context: CanvasRenderingContext2D;
+        };
+    };
+};
+export type CanvasProps = typeof __propDef.props;
+export type CanvasEvents = typeof __propDef.events;
+export type CanvasSlots = typeof __propDef.slots;
+export default class Canvas extends SvelteComponentTyped<CanvasProps, CanvasEvents, CanvasSlots> {
+}
+export {};

package/dist/components/layout/Svg.svelte

@@ -0,0 +1,68 @@
+<script>import { getContext } from 'svelte';
+import { cls } from 'svelte-ux';
+import { transformContext } from '../TransformContext.svelte';
+/** The layer's `<svg>` tag. Useful for bindings. */
+export let element = undefined;
+/** The layer's `<g>` tag. Useful for bindings. */
+export let innerElement = undefined;
+/** The layer's z-index. */
+export let zIndex = undefined;
+/** Set this to `false` to set `pointer-events: none;` on the entire layer. */
+export let pointerEvents = undefined;
+/** A string passed to the `viewBox` property on the `<svg>` tag. */
+export let viewBox = undefined;
+/** A string passed to the `aria-label` property on the `<svg>` tag. */
+export let label = undefined;
+/** A string passed to the `aria-labelledby property` on the `<svg>` tag. */
+export let labelledBy = undefined;
+/** A string passed to the `aria-describedby` property on the `<svg>` tag. */
+export let describedBy = undefined;
+/** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
+export let title = undefined;
+const { containerWidth, containerHeight, width, height, padding } = getContext('LayerCake');
+const { mode, scale, translate } = transformContext();
+let transform = '';
+$: if (mode === 'canvas') {
+    const center = { x: $width / 2, y: $height / 2 };
+    const newTranslate = {
+        x: $translate.x * $scale + center.x - center.x * $scale,
+        y: $translate.y * $scale + center.y - center.y * $scale,
+    };
+    transform = `translate(${newTranslate.x},${newTranslate.y}) scale(${$scale})`;
+}
+</script>
+
+<svg
+  bind:this={element}
+  {viewBox}
+  width={$containerWidth}
+  height={$containerHeight}
+  style:z-index={zIndex}
+  class={cls(
+    'layercake-layout-svg',
+    'absolute top-0 left-0 overflow-visible',
+    pointerEvents === false && 'pointer-events-none'
+  )}
+  aria-label={label}
+  aria-labelledby={labelledBy}
+  aria-describedby={describedBy}
+  on:click
+>
+  <slot name="title">
+    {#if title}<title>{title}</title>{/if}
+  </slot>
+
+  <defs>
+    <slot name="defs"></slot>
+  </defs>
+
+  <g
+    bind:this={innerElement}
+    class="layercake-layout-svg_g"
+    transform="translate({$padding.left}, {$padding.top})"
+  >
+    <g {transform}>
+      <slot {element}></slot>
+    </g>
+  </g>
+</svg>