layerchart 0.13.4 → 0.14.1

package/components/Legend.svelte

@@ -1,17 +0,0 @@
-<script>import { getContext } from 'svelte';
-export let formatLabel = (label) => label;
-const { rScale, rDomain, rRange } = getContext('LayerCake');
-// zip values together
-export let items = $rDomain.map((d, i) => ({ label: d, color: $rRange[i] }));
-</script>
-
-<slot {items} scale={$rScale}>
-	<div {...$$restProps}>
-		{#each items as { label, color }}
-			<div class="flex items-center gap-1">
-				<div class="h-4 w-4 rounded-full" style:background-color={color} />
-				{formatLabel(label)}
-			</div>
-		{/each}
-	</div>
-</slot>

package/components/Legend.svelte.d.ts

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        formatLabel?: ((label: string) => string) | undefined;
-        items?: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            items: any;
-            scale: any;
-        };
-    };
-};
-export type LegendProps = typeof __propDef.props;
-export type LegendEvents = typeof __propDef.events;
-export type LegendSlots = typeof __propDef.slots;
-export default class Legend extends SvelteComponentTyped<LegendProps, LegendEvents, LegendSlots> {
-}
-export {};

package/components/Zoom.svelte

@@ -1,133 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { motionStore } from '../stores/motionStore';
-const { width, height, padding } = getContext('LayerCake');
-export let spring = undefined;
-export let tweened = undefined;
-export let disablePointer = false;
-let dragging = false;
-const translate = motionStore({ x: 0, y: 0 }, { spring, tweened });
-const scale = motionStore({ x: 1, y: 1 }, { spring, tweened });
-let startPoint;
-let startTranslate;
-let svgEl = null;
-export function reset() {
-    $translate = { x: 0, y: 0 };
-    $scale = { x: 1, y: 1 };
-}
-export function increase() {
-    $scale = {
-        x: $scale.x * 1.25,
-        y: $scale.y * 1.25
-    };
-}
-export function decrease() {
-    $scale = {
-        x: $scale.x * 0.8,
-        y: $scale.y * 0.8
-    };
-}
-export function translateCenter() {
-    $translate = {
-        x: 0,
-        y: 0
-    };
-}
-export function zoomTo(newTranslate, newScale) {
-    $translate = {
-        x: $width / 2 - newTranslate.x,
-        y: $height / 2 - newTranslate.y
-    };
-    if (newScale) {
-        $scale = {
-            x: Math.min($width, $height) / newScale.x,
-            y: Math.min($width, $height) / newScale.y
-        };
-    }
-}
-function handleMouseDown(e) {
-    if (disablePointer)
-        return;
-    dragging = true;
-    svgEl = e.target.ownerSVGElement;
-    startPoint = localPoint(svgEl, e);
-    startTranslate = $translate;
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-}
-function handleMouseUp(e) {
-    dragging = false;
-    window.removeEventListener('mousemove', handleMouseMove);
-    window.removeEventListener('mouseup', handleMouseUp);
-}
-function handleMouseMove(e) {
-    if (!dragging)
-        return;
-    const endPoint = localPoint(svgEl, e);
-    const deltaX = endPoint.x - startPoint.x;
-    const deltaY = endPoint.y - startPoint.y;
-    translate.set({
-        x: startTranslate.x + deltaX / $scale.x,
-        y: startTranslate.y + deltaY / $scale.y
-    }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
-}
-function handleDoubleClick() {
-    if (disablePointer)
-        return;
-    increase();
-}
-function handleWheel(e) {
-    if (disablePointer)
-        return;
-    e.preventDefault();
-    const scaleBy = -e.deltaY > 0 ? 1.1 : 0.9;
-    // TODO: Update to match d3-zoom delta
-    // https://github.com/d3/d3-zoom#zoom_wheelDelta
-    // const scaleBy = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002);
-    scale.set({
-        x: $scale.x * scaleBy,
-        y: $scale.y * scaleBy
-    }, spring ? { hard: true } : tweened ? { duration: 0 } : undefined);
-}
-function localPoint(svgEl, e) {
-    const screenCTM = svgEl.getScreenCTM();
-    const coords = {
-        x: e.clientX,
-        y: e.clientY
-    };
-    let point = svgEl.createSVGPoint();
-    point.x = coords.x;
-    point.y = coords.y;
-    point = point.matrixTransform(screenCTM.inverse());
-    return {
-        x: point.x,
-        y: point.y
-    };
-}
-$: center = { x: $width / 2, y: $height / 2 };
-$: viewportCenter = {
-    x: center.x - $translate.x,
-    y: center.y - $translate.y
-};
-$: newTranslate = {
-    x: $translate.x * $scale.x + center.x - center.x * $scale.x,
-    y: $translate.y * $scale.y + center.y - center.y * $scale.y
-};
-</script>
-
-<g
-	on:mousewheel={handleWheel}
-	on:mousedown={handleMouseDown}
-	on:dblclick={handleDoubleClick}
-	on:click
->
-	<rect
-		x={-$padding.left}
-		y={-$padding.top}
-		width={$width + $padding.left + $padding.right}
-		height={$height + $padding.top + $padding.bottom}
-		fill="transparent"
-	/>
-	<g transform="translate({newTranslate.x},{newTranslate.y}) scale({$scale.x},{$scale.y})">
-		<slot scale={$scale} />
-	</g>
-</g>