layerchart 0.36.5 → 0.37.1

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

@@ -0,0 +1,32 @@
+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;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        defs: {};
+        default: {
+            element: SVGElement | undefined;
+        };
+    };
+};
+export type SvgProps = typeof __propDef.props;
+export type SvgEvents = typeof __propDef.events;
+export type SvgSlots = typeof __propDef.slots;
+export default class Svg extends SvelteComponentTyped<SvgProps, SvgEvents, SvgSlots> {
+}
+export {};

package/dist/docs/TransformControls.svelte

@@ -1,8 +1,9 @@
 <script>import { Button, Tooltip, cls } from 'svelte-ux';
 import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, } from '@mdi/js';
-export let transform;
+import { transformContext } from '../components/TransformContext.svelte';
 export let placement = 'top-right';
 export let orientation = 'vertical';
+const transform = transformContext();
 </script>
 
 <div
@@ -19,7 +20,8 @@ export let orientation = 'vertical';
       'bottom-left': 'absolute bottom-0 left-0',
       bottom: 'absolute bottom-0 left-1/2 -translate-x-1/2',
       'bottom-right': 'absolute bottom-0 right-0',
-    }[placement]
+    }[placement],
+    $$props.class
   )}
 >
   <Tooltip title="Zoom in">

package/dist/docs/TransformControls.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
-import type Transform from '../components/Transform.svelte';
 declare const __propDef: {
     props: {
-        transform: Transform;
+        [x: string]: any;
         placement?: ("center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
     };

package/dist/docs/TransformDebug.svelte

@@ -0,0 +1,21 @@
+<script>import { format, cls } from 'svelte-ux';
+import { transformContext } from '../components/TransformContext.svelte';
+const transform = transformContext();
+const { translate, scale } = transform;
+</script>
+
+<div class={cls('bg-surface-300/50 rounded m-1 backdrop-blur p-2 tabular-nums', $$props.class)}>
+  <div class="grid gap-2 text-xs">
+    <div><span class="opacity-50">scale:</span> {format($scale, 'decimal')}</div>
+
+    <div>
+      <span class="opacity-50">translate:</span>
+      <div class="text-right">{format($translate.x, 'decimal')}</div>
+      <div class="text-right">{format($translate.y, 'decimal')}</div>
+
+      <span class="opacity-50">delta:</span>
+      <div class="text-right">{format($translate.deltaX, 'decimal')}</div>
+      <div class="text-right">{format($translate.deltaY, 'decimal')}</div>
+    </div>
+  </div>
+</div>

package/dist/docs/TransformDebug.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TransformDebugProps = typeof __propDef.props;
+export type TransformDebugEvents = typeof __propDef.events;
+export type TransformDebugSlots = typeof __propDef.slots;
+export default class TransformDebug extends SvelteComponentTyped<TransformDebugProps, TransformDebugEvents, TransformDebugSlots> {
+}
+export {};

package/dist/index.d.ts

@@ -1,3 +1,2 @@
-export { Canvas, Html, Svg, WebGL } from 'layercake';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -1,3 +1,2 @@
-export { Canvas, Html, Svg, WebGL } from 'layercake';
 export * from './components/index.js';
 export * from './utils/index.js';

package/dist/utils/event.d.ts

@@ -1,4 +1,4 @@
-export declare function localPoint(node: Element, event: MouseEvent | TouchEvent): {
+export declare function localPoint(node: Element, event: MouseEvent | TouchEvent | PointerEvent): {
     x: number;
     y: number;
 } | null;

package/package.json

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

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

@@ -1,76 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { motionStore } from '../stores/motionStore.js';
-declare const __propDef: {
-    props: {
-        mode?: "svg" | "manual" | undefined;
-        translateOnScale?: boolean | undefined;
-        spring?: boolean | Parameters<typeof motionStore>[1]['spring'];
-        tweened?: boolean | Parameters<typeof motionStore>[1]['tweened'];
-        disablePointer?: boolean | undefined;
-        scroll?: "none" | "scale" | "translate" | undefined;
-        clickDistance?: number | undefined;
-        initialTranslate?: {
-            x: number;
-            y: number;
-        } | undefined;
-        initialScale?: number | 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: {
-            scale: any;
-            zoomTo: (center: {
-                x: number;
-                y: number;
-            }, rect?: {
-                width: number;
-                height: number;
-            }) => void;
-            reset: () => void;
-        };
-    };
-};
-export type TransformProps = typeof __propDef.props;
-export type TransformEvents = typeof __propDef.events;
-export type TransformSlots = typeof __propDef.slots;
-export default class Transform extends SvelteComponentTyped<TransformProps, TransformEvents, TransformSlots> {
-    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 {};