layerchart 0.38.2 → 0.38.4

package/dist/components/Chart.svelte

@@ -4,10 +4,11 @@
 // See: https://github.com/carbon-design-system/sveld/issues/104
 import { LayerCake, 
 // Canvas as _Canvas,
-Html as _Html, 
+// Html as _Html,
 // Svg as _Svg,
 WebGL as _WebGL, } from 'layercake';
 import _Canvas from './layout/Canvas.svelte';
+import _Html from './layout/Html.svelte';
 import _Svg from './layout/Svg.svelte';
 export const Canvas = _Canvas;
 export const Html = _Html;

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

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import { Html as _Html, WebGL as _WebGL } from 'layercake';
+import { WebGL as _WebGL } from 'layercake';
 import _Canvas from './layout/Canvas.svelte';
+import _Html from './layout/Html.svelte';
 import _Svg from './layout/Svg.svelte';
 export declare const Canvas: typeof _Canvas;
 export declare const Html: typeof _Html;
@@ -50,24 +51,15 @@ declare const __propDef: {
             projection: import("d3-geo").GeoProjection | import("d3-geo").GeoIdentityTransform;
             transform: {
                 scale: number;
-                setScale: ((new_value: number, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: number, opts?: import("svelte/motion").TweenedOptions<number> | undefined) => Promise<void>) | ((this: void, value: number) => void);
+                setScale: (value: number, options?: import("../stores/motionStore").MotionOptions | undefined) => void;
                 translate: {
                     x: number;
                     y: number;
                 };
-                setTranslate: ((new_value: {
+                setTranslate: (point: {
                     x: number;
                     y: number;
-                }, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: {
-                    x: number;
-                    y: number;
-                }, opts?: import("svelte/motion").TweenedOptions<{
-                    x: number;
-                    y: number;
-                }> | undefined) => Promise<void>) | ((this: void, value: {
-                    x: number;
-                    y: number;
-                }) => void);
+                }, options?: import("../stores/motionStore").MotionOptions | undefined) => void;
                 zoomTo: (center: {
                     x: number;
                     y: number;
@@ -80,7 +72,7 @@ declare const __propDef: {
             tooltip: {
                 y: number;
                 x: number;
-                data: null; /** Props passed to TransformContext */
+                data: null;
                 show: (e: PointerEvent, tooltipData?: any) => void;
                 hide: () => void;
             };

package/dist/components/GeoPath.svelte

@@ -24,6 +24,8 @@ export let tooltip = undefined;
  * @type {CurveFactory | CurveFactoryLineOnly | undefined}
  */
 export let curve = curveLinearClosed;
+let className = undefined;
+export { className as class };
 const dispatch = createEventDispatcher();
 const { width, height } = getContext('LayerCake');
 const canvas = getContext('canvas');
@@ -35,8 +37,8 @@ $: ctx = canvas?.ctx;
 $: if (renderContext === 'canvas' && $ctx) {
     let computedStyles = {};
     // Transfer classes defined on <GeoPath> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
-    if ($$props.class) {
-        $ctx.canvas.classList.add(...$$props.class.split(' '));
+    if (className) {
+        $ctx.canvas.classList.add(...className.split(' '));
         computedStyles = window.getComputedStyle($ctx.canvas);
     }
     // console.count('render');
@@ -79,7 +81,7 @@ $: if (renderContext === 'canvas' && $ctx) {
       on:pointerleave
       on:click={(event) => dispatch('click', { geoPath, event })}
       on:click
-      class={cls($$props.fill == null && 'fill-transparent', $$props.class)}
+      class={cls(fill == null && 'fill-transparent', className)}
     />
   </slot>
 {/if}

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

@@ -12,6 +12,7 @@ declare const __propDef: {
         strokeWidth?: number | string | undefined;
         tooltip?: TooltipContextValue | undefined;
         curve?: CurveFactory | CurveFactoryLineOnly | undefined;
+        class?: string | undefined;
     };
     events: {
         pointerenter: PointerEvent;

package/dist/components/HitCanvas.svelte

@@ -32,7 +32,7 @@ function* rgbColorGenerator(step = 500) {
 }
 $: colorGenerator = rgbColorGenerator();
 // Reset color generator whenever updated (width/height) so always reusing same colors (and not exhausting)
-const { translate, scale } = transformContext();
+const { translate, scale, dragging } = transformContext();
 $: {
     $width;
     $height;
@@ -89,4 +89,8 @@ function dispatchPointerMove(e) {
     }
   }}
 />
-<slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>
+
+<!-- Do not render while dragging to improve interaction performance -->
+{#if !$dragging}
+  <slot nextColor={() => colorGenerator.next().value} {setColorData}></slot>
+{/if}

package/dist/components/TransformContext.svelte

@@ -1,10 +1,15 @@
 <script context="module">import { getContext, setContext } from 'svelte';
-import { writable } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
 export const transformContextKey = Symbol();
+const defaultTranslate = writable({ x: 0, y: 0 });
+const defaultScale = writable(1);
 const defaultContext = {
     mode: 'none',
-    scale: writable(1),
-    translate: writable({ x: 0, y: 0 }),
+    scale: defaultScale,
+    setScale: defaultScale.set,
+    translate: defaultTranslate,
+    setTranslate: defaultTranslate.set,
+    moving: writable(false),
     dragging: writable(false),
     reset: () => { },
     zoomIn: () => { },
@@ -21,7 +26,7 @@ function setTransformContext(transform) {
 </script>
 
 <script>import { createEventDispatcher } from 'svelte';
-import { motionStore } from '../stores/motionStore.js';
+import { motionStore, motionFinishHandler } from '../stores/motionStore.js';
 const { width, height } = getContext('LayerCake');
 export let mode = 'none';
 export let translateOnScale = false;
@@ -76,17 +81,6 @@ export function zoomTo(center, rect) {
         $scale = $width < $height ? $width / rect.width : $height / rect.height;
     }
 }
-setTransformContext({
-    mode,
-    scale,
-    translate,
-    dragging,
-    reset,
-    zoomIn,
-    zoomOut,
-    translateCenter,
-    zoomTo,
-});
 function onPointerDown(e) {
     if (mode === 'none' || disablePointer)
         return;
@@ -111,11 +105,12 @@ function onPointerMove(e) {
     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);
+        setTranslate(processTranslate(startTranslate.x, startTranslate.y, deltaX, deltaY, $scale), spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
     }
 }
 function onPointerUp(e) {
     pointerDown = false;
+    $dragging = false;
     dispatch('dragend');
 }
 function onClick(e) {
@@ -152,7 +147,7 @@ function onWheel(e) {
 function scaleTo(value, point, options = undefined) {
     const currentScale = $scale;
     const newScale = $scale * value;
-    scale.set(newScale, options);
+    setScale(newScale, options);
     if (translateOnScale) {
         // Translate towards point (ex. mouse cursor/center) while zooming in/out
         const invertTransformPoint = {
@@ -163,9 +158,18 @@ function scaleTo(value, point, options = undefined) {
             x: point.x - invertTransformPoint.x * newScale,
             y: point.y - invertTransformPoint.y * newScale,
         };
-        translate.set(newTranslate, options);
+        setTranslate(newTranslate, options);
     }
 }
+const translating = motionFinishHandler();
+const scaling = motionFinishHandler();
+const moving = derived([dragging, translating, scaling], ([dragging, translating, scaling]) => dragging || translating || scaling);
+export function setTranslate(point, options) {
+    translating.handle(translate.set(point, options));
+}
+export function setScale(value, options) {
+    scaling.handle(scale.set(value, options));
+}
 function localPoint(e) {
     return {
         x: e.offsetX,
@@ -178,6 +182,20 @@ $: viewportCenter = {
     y: center.y - $translate.y,
 };
 $: dispatch('transform', { scale: $scale, translate: $translate });
+setTransformContext({
+    mode,
+    scale,
+    setScale,
+    translate,
+    setTranslate,
+    dragging,
+    moving,
+    reset,
+    zoomIn,
+    zoomOut,
+    translateCenter,
+    zoomTo,
+});
 </script>
 
 <div
@@ -202,9 +220,9 @@ $: dispatch('transform', { scale: $scale, translate: $translate });
   <slot
     transform={{
       scale: $scale,
-      setScale: scale.set,
+      setScale,
       translate: $translate,
-      setTranslate: translate.set,
+      setTranslate,
       zoomTo,
       reset,
     }}

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

@@ -4,10 +4,16 @@ export declare const transformContextKey: unique symbol;
 export type TransformContextValue = {
     mode: 'canvas' | 'manual' | 'none';
     scale: Writable<number>;
+    setScale(value: number, options?: MotionOptions): void;
     translate: Writable<{
         x: number;
         y: number;
     }>;
+    setTranslate(point: {
+        x: number;
+        y: number;
+    }, options?: MotionOptions): void;
+    moving: Readable<boolean>;
     dragging: Readable<boolean>;
     reset(): void;
     zoomIn(): void;
@@ -23,7 +29,7 @@ export type TransformContextValue = {
 };
 export type TransformContext = TransformContextValue;
 export declare function transformContext(): TransformContext;
-import { motionStore } from '../stores/motionStore.js';
+import { motionStore, type MotionOptions } from '../stores/motionStore.js';
 declare const __propDef: {
     props: {
         mode?: "none" | "canvas" | "manual" | undefined;
@@ -64,6 +70,11 @@ declare const __propDef: {
             width: number;
             height: number;
         }) => void) | undefined;
+        setTranslate?: ((point: {
+            x: number;
+            y: number;
+        }, options?: MotionOptions) => void) | undefined;
+        setScale?: ((value: number, options?: MotionOptions) => void) | undefined;
     };
     events: {
         click: MouseEvent;
@@ -86,24 +97,15 @@ declare const __propDef: {
         default: {
             transform: {
                 scale: number;
-                setScale: ((new_value: number, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: number, opts?: import("svelte/motion").TweenedOptions<number> | undefined) => Promise<void>) | ((this: void, value: number) => void);
+                setScale: (value: number, options?: MotionOptions) => void;
                 translate: {
                     x: number;
                     y: number;
                 };
-                setTranslate: ((new_value: {
-                    x: number;
-                    y: number;
-                }, opts?: import("svelte/motion").SpringUpdateOpts | undefined) => Promise<void>) | ((value: {
+                setTranslate: (point: {
                     x: number;
                     y: number;
-                }, opts?: import("svelte/motion").TweenedOptions<{
-                    x: number;
-                    y: number;
-                }> | undefined) => Promise<void>) | ((this: void, value: {
-                    x: number;
-                    y: number;
-                }) => void);
+                }, options?: MotionOptions) => void;
                 zoomTo: (center: {
                     x: number;
                     y: number;
@@ -142,5 +144,10 @@ export default class TransformContext extends SvelteComponentTyped<TransformCont
         width: number;
         height: number;
     } | undefined) => void;
+    get setTranslate(): (point: {
+        x: number;
+        y: number;
+    }, options?: MotionOptions | undefined) => void;
+    get setScale(): (value: number, options?: MotionOptions | undefined) => void;
 }
 export {};

package/dist/components/layout/Canvas.svelte

@@ -58,7 +58,7 @@ setContext('canvas', { ctx });
     'layercake-layout-canvas',
     'absolute w-full h-full',
     pointerEvents === false && 'pointer-events-none',
-    $$restProps.class
+    $$props.class
   )}
   aria-label={label}
   aria-labelledby={labelledBy}

package/dist/components/layout/Html.svelte

@@ -0,0 +1,41 @@
+<script>import { getContext } from 'svelte';
+import { cls } from 'svelte-ux';
+/** The layer's outermost `<div>` tag. Useful for bindings. */
+export let element = 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 `aria-role` on the `<div>` tag. This is `undefined` by default but will be set by default to `'figure'` if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in. */
+export let role = undefined;
+/** A string passed to the `aria-label` property on the `<div>` tag. */
+export let label = undefined;
+/** A string passed to the `aria-labelledby property` on the `<div>` tag. */
+export let labelledBy = undefined;
+/** A string passed to the `aria-describedby` property on the `<div>` tag. */
+export let describedBy = undefined;
+const { padding } = getContext('LayerCake');
+$: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
+</script>
+
+<div
+  bind:this={element}
+  class={cls(
+    'layercake-layout-html',
+    'absolute top-0 left-0',
+    pointerEvents === false && 'pointer-events-none',
+    $$props.class
+  )}
+  style:z-index={zIndex}
+  style:pointer-events={pointerEvents === false ? 'none' : null}
+  style:top="{$padding.top}px"
+  style:bottom="{$padding.bottom}px"
+  style:left="{$padding.left}px"
+  style:right="{$padding.right}px"
+  role={roleVal}
+  aria-label={label}
+  aria-labelledby={labelledBy}
+  aria-describedby={describedBy}
+>
+  <slot {element}></slot>
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        element?: HTMLDivElement | undefined;
+        zIndex?: undefined;
+        pointerEvents?: boolean | undefined;
+        role?: string | undefined;
+        label?: string | undefined;
+        labelledBy?: string | undefined;
+        describedBy?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            element: HTMLDivElement | undefined;
+        };
+    };
+};
+export type HtmlProps = typeof __propDef.props;
+export type HtmlEvents = typeof __propDef.events;
+export type HtmlSlots = typeof __propDef.slots;
+export default class Html extends SvelteComponentTyped<HtmlProps, HtmlEvents, HtmlSlots> {
+}
+export {};

package/dist/components/layout/Svg.svelte

@@ -41,7 +41,8 @@ $: if (mode === 'canvas') {
   class={cls(
     'layercake-layout-svg',
     'absolute top-0 left-0 overflow-visible',
-    pointerEvents === false && 'pointer-events-none'
+    pointerEvents === false && 'pointer-events-none',
+    $$props.class
   )}
   aria-label={label}
   aria-labelledby={labelledBy}

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

@@ -1,15 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        /** The layer's `<svg>` tag. Useful for bindings. */ element?: SVGElement | undefined;
-        /** The layer's `<g>` tag. Useful for bindings. */ innerElement?: SVGGElement | undefined;
-        /** The layer's z-index. */ zIndex?: undefined;
-        /** Set this to `false` to set `pointer-events: none;` on the entire layer. */ pointerEvents?: boolean | undefined;
-        /** A string passed to the `viewBox` property on the `<svg>` tag. */ viewBox?: string | undefined;
-        /** A string passed to the `aria-label` property on the `<svg>` tag. */ label?: string | undefined;
-        /** A string passed to the `aria-labelledby property` on the `<svg>` tag. */ labelledBy?: string | undefined;
-        /** A string passed to the `aria-describedby` property on the `<svg>` tag. */ describedBy?: string | 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. */ title?: string | undefined;
+        [x: string]: any;
+        element?: SVGElement | undefined;
+        innerElement?: SVGGElement | undefined;
+        zIndex?: undefined;
+        pointerEvents?: boolean | undefined;
+        viewBox?: string | undefined;
+        label?: string | undefined;
+        labelledBy?: string | undefined;
+        describedBy?: string | undefined;
+        title?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/stores/motionStore.d.ts

@@ -25,3 +25,7 @@ export declare function resolveOptions(prop: string, options: PropMotionOptions)
     spring: any;
     tweened: any;
 };
+export declare function motionFinishHandler(): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<boolean>, invalidate?: import("svelte/store").Invalidator<boolean> | undefined) => import("svelte/store").Unsubscriber;
+    handle: (promise: Promise<void> | void) => void;
+};

package/dist/stores/motionStore.js

@@ -35,3 +35,26 @@ export function resolveOptions(prop, options) {
                     : false,
     };
 }
+export function motionFinishHandler() {
+    let latestIndex = 0;
+    const moving = writable(false);
+    const handle = function (promise) {
+        latestIndex += 1;
+        if (!promise) {
+            // The store returned nothing, which means that the motion store is immediate.
+            moving.set(false);
+            return;
+        }
+        let thisIndex = latestIndex;
+        moving.set(true);
+        promise.then(() => {
+            if (thisIndex === latestIndex) {
+                moving.set(false);
+            }
+        });
+    };
+    return {
+        subscribe: moving.subscribe,
+        handle,
+    };
+}

package/package.json

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