layerchart 0.44.0 → 0.51.0

package/dist/components/Points.svelte

@@ -1,22 +1,29 @@
-<script>import {} from 'svelte';
+<script>import { getContext } from 'svelte';
 import { extent } from 'd3-array';
 import { pointRadial } from 'd3-shape';
-import { notNull } from 'svelte-ux';
+import { notNull } from '@layerstack/utils/typeGuards';
 import { chartContext } from './ChartContext.svelte';
 import Circle from './Circle.svelte';
 import Link from './Link.svelte';
 import { isScaleBand } from '../utils/scales.js';
 const context = chartContext();
-const { data: contextData, xGet, y, yGet, xScale, yScale, rGet, config } = context;
+const { data: contextData, x, xScale, xGet, y, yScale, yGet, cGet, rGet, padding, containerWidth, containerHeight, config, radial, } = context;
 /** Override data instead of using context */
 export let data = undefined;
 export let r = 5;
 export let offsetX = undefined;
 export let offsetY = undefined;
-/** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial points are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-export let radial = false;
 /** Enable showing links between related points (array x/y accessors) */
 export let links = false;
+export let fill = undefined;
+export let stroke = undefined;
+export let strokeWidth = undefined;
+/** Render to canvas */
+export let render = undefined;
+let className = undefined;
+export { className as class };
+const canvas = getContext('canvas');
+const DEFAULT_FILL = 'rgb(0, 0, 0)';
 function getOffset(value, offset, scale) {
     if (typeof offset === 'function') {
         return offset(value, context);
@@ -24,7 +31,7 @@ function getOffset(value, offset, scale) {
     else if (offset != null) {
         return offset;
     }
-    else if (isScaleBand(scale) && !radial) {
+    else if (isScaleBand(scale) && !$radial) {
         return scale.bandwidth() / 2;
     }
     else {
@@ -32,51 +39,62 @@ function getOffset(value, offset, scale) {
     }
 }
 $: pointsData = data ?? $contextData;
-$: points = pointsData.flatMap((d) => {
-    if (Array.isArray($config.x)) {
+$: points = pointsData
+    .flatMap((d) => {
+    const xValue = $x(d);
+    const yValue = $y(d);
+    if (Array.isArray(xValue)) {
         /*
-                  x={["prop1" ,"prop2"]}
-                  y="prop3"
-              */
-        return $xGet(d)
-            .filter(notNull)
-            .map((x) => {
+                x={["prop1" ,"prop2"]}
+                y="prop3"
+            */
+        return xValue.filter(notNull).map((xValue) => {
             return {
-                x: x + getOffset(x, offsetX, $xScale),
-                y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
+                x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+                y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+                r: $config.r ? $rGet(d) : r,
+                xValue,
+                yValue,
                 data: d,
             };
         });
     }
-    else if (Array.isArray($config.y)) {
+    else if (Array.isArray(yValue)) {
         /*
-                  x="prop1"
-                  y={["prop2" ,"prop3"]}
-              */
-        return $yGet(d)
-            .filter(notNull)
-            .map((y) => {
+                x="prop1"
+                y={["prop2" ,"prop3"]}
+            */
+        return yValue.filter(notNull).map((yValue) => {
             return {
-                x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-                y: y + getOffset(y, offsetY, $yScale),
+                x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+                y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+                r: $config.r ? $rGet(d) : r,
+                xValue,
+                yValue,
                 data: d,
             };
         });
     }
-    else {
+    else if (xValue != null && yValue != null) {
         /*
-                  x="prop1"
-                  y="prop2"
-              */
+                x="prop1"
+                y="prop2"
+            */
         return {
-            x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
+            x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+            y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+            r: $config.r ? $rGet(d) : r,
+            xValue,
+            yValue,
             data: d,
         };
     }
-});
+})
+    .filter((p) => p);
 $: _links = pointsData.flatMap((d) => {
-    if (Array.isArray($config.x)) {
+    const xValue = $x(d);
+    const yValue = $y(d);
+    if (Array.isArray(xValue)) {
         /*
                   x={["prop1" ,"prop2"]}
                   y="prop3"
@@ -85,16 +103,16 @@ $: _links = pointsData.flatMap((d) => {
         const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
         return {
             source: {
-                x: xMin + getOffset(xMin, offsetX, $xScale) + r,
+                x: xMin + getOffset(xMin, offsetX, $xScale) + ($config.r ? $rGet(d) : r),
                 y,
             },
             target: {
-                x: xMax + getOffset(xMax, offsetX, $xScale) - r,
+                x: xMax + getOffset(xMax, offsetX, $xScale) - ($config.r ? $rGet(d) : r),
                 y: y,
             },
         };
     }
-    else if (Array.isArray($config.y)) {
+    else if (Array.isArray(yValue)) {
         /*
                   x="prop1"
                   y={["prop2" ,"prop3"]}
@@ -113,31 +131,67 @@ $: _links = pointsData.flatMap((d) => {
         };
     }
 });
+$: renderContext = canvas ? 'canvas' : 'svg';
+$: 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 (className) {
+        $ctx.canvas.classList.add(...className.split(' '));
+        computedStyles = window.getComputedStyle($ctx.canvas);
+    }
+    // Clear with negative offset due to Canvas `context.translate(...)`
+    $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
+    if (render) {
+        render($ctx, points);
+    }
+    else {
+        points.forEach((point) => {
+            $ctx.beginPath();
+            $ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI, false);
+            $ctx.lineWidth = Number(strokeWidth ?? 0);
+            $ctx.strokeStyle =
+                (stroke ?? computedStyles.stroke === 'none')
+                    ? 'transparent'
+                    : (computedStyles.stroke ?? '');
+            $ctx.stroke();
+            $ctx.fillStyle =
+                fill ??
+                    (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
+                    'transparent';
+            $ctx.fill();
+        });
+    }
+}
 </script>
 
 <slot {points}>
-  {#if links}
-    <g class="link-group">
-      {#each _links as link}
-        <Link
-          data={link}
-          class="stroke-surface-content/50"
-          {...typeof links === 'object' ? links : null}
+  {#if renderContext === 'svg'}
+    {#if links}
+      <g class="link-group">
+        {#each _links as link}
+          <Link
+            data={link}
+            class="stroke-surface-content/50"
+            {...typeof links === 'object' ? links : null}
+          />
+        {/each}
+      </g>
+    {/if}
+
+    <g class="point-group">
+      {#each points as point}
+        {@const radialPoint = pointRadial(point.x, point.y)}
+        <Circle
+          cx={$radial ? radialPoint[0] : point.x}
+          cy={$radial ? radialPoint[1] : point.y}
+          r={point.r}
+          fill={fill ?? ($config.c ? $cGet(point.data) : null)}
+          {stroke}
+          class={className}
+          {...$$restProps}
         />
       {/each}
     </g>
   {/if}
-
-  <g class="point-group">
-    {#each points as point}
-      {@const radialPoint = pointRadial(point.x, point.y)}
-      <Circle
-        cx={radial ? radialPoint[0] : point.x}
-        cy={radial ? radialPoint[1] : point.y}
-        {r}
-        fill={$config.r ? $rGet(point.data) : null}
-        {...$$restProps}
-      />
-    {/each}
-  </g>
 </slot>

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

@@ -8,15 +8,33 @@ declare const __propDef: {
         r?: number | undefined;
         offsetX?: number | ((value: number, context: any) => number) | undefined;
         offsetY?: number | ((value: number, context: any) => number) | undefined;
-        radial?: boolean | undefined;
         links?: (boolean | Partial<ComponentProps<Link>>) | undefined;
+        fill?: string | undefined;
+        stroke?: string | undefined;
+        strokeWidth?: number | string | undefined;
+        render?: ((ctx: CanvasRenderingContext2D, points: {
+            x: number;
+            y: number;
+            r: number;
+            xValue: any;
+            yValue: any;
+            data: any;
+        }[]) => any) | undefined;
+        class?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
-            points: any;
+            points: {
+                x: number;
+                y: number;
+                r: number;
+                xValue: any;
+                yValue: any;
+                data: any;
+            }[];
         };
     };
 };

package/dist/components/RadialGradient.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux';
+<script>import { uniqueId } from '@layerstack/utils';
 /** Unique id for linearGradient */
 export let id = uniqueId('radialGradient-');
 /** Array array of strings (colors), will equally distributed from 0-100%.  If array of tuples, will use first value as the offset, and second as color */

package/dist/components/Rect.svelte

@@ -1,5 +1,5 @@
 <script>import { tick } from 'svelte';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { motionStore, resolveOptions, } from '../stores/motionStore.js';
 export let x = 0;
 export let initialX = x;
@@ -33,6 +33,7 @@ $: tick().then(() => {
   class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
+  on:pointerenter
   on:pointerover
   on:pointermove
   on:pointerout

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

@@ -20,6 +20,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        pointerenter: PointerEvent;
         pointerover: PointerEvent;
         pointermove: PointerEvent;
         pointerout: PointerEvent;

package/dist/components/RectClipPath.svelte

@@ -1,4 +1,4 @@
-<script>import { uniqueId } from 'svelte-ux';
+<script>import { uniqueId } from '@layerstack/utils';
 import ClipPath from './ClipPath.svelte';
 import Rect from './Rect.svelte';
 /** Unique id for clipPath */

package/dist/components/Rule.svelte

@@ -1,5 +1,5 @@
 <script>import { extent } from 'd3-array';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
 import Line from './Line.svelte';
 const { xScale, yScale, xRange, yRange } = chartContext();

package/dist/components/Spline.svelte

@@ -6,22 +6,21 @@ import { cubicInOut } from 'svelte/easing';
 import { line as d3Line, lineRadial } from 'd3-shape';
 // import { interpolateString } from 'd3-interpolate';
 import { interpolatePath } from 'd3-interpolate-path';
-import { cls } from 'svelte-ux';
+import { max } from 'd3-array';
+import { cls } from '@layerstack/tailwind';
 import { chartContext } from './ChartContext.svelte';
 import Group from './Group.svelte';
 import { motionStore } from '../stores/motionStore.js';
 import { accessor } from '../utils/common.js';
 import { isScaleBand } from '../utils/scales.js';
-const { data: contextData, xScale, yScale, x: contextX, y: contextY } = chartContext();
+const { data: contextData, xScale, yScale, x: contextX, y: contextY, radial } = chartContext();
 /** Override data instead of using context */
 export let data = undefined;
 /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
 export let pathData = undefined;
-/** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-export let radial = false;
-/** Override `x` accessor from Chart context.  Applies to `angle` when `radial=true` */
+/** Override `x` accessor from Chart context */
 export let x = undefined;
-/** Override `y` accessor from Chart context.  Applies to `radius` when `radial=true` */
+/** Override `y` accessor from Chart context */
 export let y = undefined;
 /** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
 export let tweened = undefined;
@@ -39,17 +38,21 @@ export let draw = undefined;
 export let curve = undefined;
 export let defined = undefined;
 function getScaleValue(data, scale, accessor) {
+    let value = accessor(data);
+    if (Array.isArray(value)) {
+        value = max(value);
+    }
     if (scale.domain().length) {
         // If scale is defined with domain, map value
-        return scale(accessor(data));
+        return scale(value);
     }
     else {
         // Use raw value
-        return accessor(data);
+        return value;
     }
 }
-const _x = accessor(x);
-const _y = accessor(y);
+const xAccessor = x ? accessor(x) : $contextX;
+const yAccessor = y ? accessor(y) : $contextY;
 $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
 $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
 let d = '';
@@ -57,17 +60,16 @@ let d = '';
 $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
 $: tweened_d = motionStore('', { tweened: tweenedOptions });
 $: {
-    const path = radial
+    const path = $radial
         ? lineRadial()
-            .angle((d) => getScaleValue(d, $xScale, x ? _x : $contextX))
-            .radius((d) => getScaleValue(d, $yScale, y ? _y : $contextY))
+            .angle((d) => getScaleValue(d, $xScale, xAccessor))
+            .radius((d) => getScaleValue(d, $yScale, yAccessor))
         : d3Line()
-            .x((d) => getScaleValue(d, $xScale, x ? _x : $contextX) + xOffset)
-            .y((d) => getScaleValue(d, $yScale, y ? _y : $contextY) + yOffset);
+            .x((d) => getScaleValue(d, $xScale, xAccessor) + xOffset)
+            .y((d) => getScaleValue(d, $yScale, yAccessor) + yOffset);
+    path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
     if (curve)
         path.curve(curve);
-    if (defined)
-        path.defined(defined);
     d = pathData ?? path(data ?? $contextData) ?? '';
     tweened_d.set(d);
 }
@@ -115,9 +117,15 @@ $: {
   <path
     d={$tweened_d}
     {...$$restProps}
-    class={cls('path-line fill-none', !$$props.stroke && 'stroke-surface-content', $$props.class)}
+    class={cls(
+      'path-line',
+      !$$props.fill && 'fill-none',
+      !$$props.stroke && 'stroke-surface-content',
+      $$props.class
+    )}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
+    on:pointerenter
     on:pointermove
     on:pointerleave
     bind:this={pathEl}

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         [x: string]: any;
         data?: any;
         pathData?: string | undefined | null;
-        radial?: boolean | undefined;
         x?: Accessor;
         y?: Accessor;
         tweened?: boolean | Parameters<typeof tweenedStore>[1];
@@ -18,6 +17,7 @@ declare const __propDef: {
     };
     events: {
         click: MouseEvent;
+        pointerenter: PointerEvent;
         pointermove: PointerEvent;
         pointerleave: PointerEvent;
     } & {

package/dist/components/Text.svelte

@@ -1,5 +1,5 @@
 <script>import { tick } from 'svelte';
-import { cls } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { getStringWidth } from '../utils/string.js';
 import { motionStore } from '../stores/motionStore.js';
 /*

package/dist/components/Threshold.svelte

@@ -1,91 +1,29 @@
-<script>/*
-  See also:
-    - https://observablehq.com/@d3/difference-chart
-    - https://github.com/airbnb/visx/issues/245
-*/
-import { area as d3Area, line as d3Line } from 'd3-shape';
-import { min, max } from 'd3-array';
+<script>import { min } from 'd3-array';
 import { chartContext } from './ChartContext.svelte';
-import { accessor } from '../utils/common.js';
-const { data: contextData, xGet, yGet, yRange } = chartContext();
-// Properties to override what is used from context
-export let data = undefined; // TODO: Update Type
-export let x = undefined;
-export let y0 = undefined;
-export let y1 = undefined;
+import Area from './Area.svelte';
+import ClipPath from './ClipPath.svelte';
+const { y, yDomain } = chartContext();
 export let curve = undefined;
 export let defined = undefined;
-export let id = Math.random().toString(16).slice(-4);
-const _x = accessor(x);
-const _y0 = accessor(y0);
-const _y1 = accessor(y1);
-$: areaPath = d3Area()
-    .x(x ? _x : $xGet)
-    .y0(y0 ? _y0 : (d) => $yGet(d)[0])
-    .y1(y1 ? _y1 : (d) => $yGet(d)[1]);
-$: if (curve)
-    areaPath.curve(curve);
-$: if (defined)
-    areaPath.defined(defined);
-$: clipPathBelow = d3Area()
-    .x(x ? _x : $xGet)
-    .y0(y0 ? _y0 : (d) => $yGet(d)[0])
-    .y1(y1 ? _y1 : (d) => max($yRange));
-$: if (curve)
-    clipPathBelow.curve(curve);
-$: if (defined)
-    clipPathBelow.defined(defined);
-$: clipPathAbove = d3Area()
-    .x(x ? _x : $xGet)
-    .y0(y0 ? _y0 : (d) => max($yRange))
-    .y1(y1 ? _y1 : (d) => $yGet(d)[1]);
-$: if (curve)
-    clipPathAbove.curve(curve);
-$: if (defined)
-    clipPathAbove.defined(defined);
-$: linePathAbove = d3Line()
-    .x(x ? _x : $xGet)
-    .y(y0 ? _y0 : (d) => $yGet(d)[0]);
-$: if (curve)
-    linePathAbove.curve(curve);
-$: if (defined)
-    linePathAbove.defined(defined);
-$: linePathBelow = d3Line()
-    .x(x ? _x : $xGet)
-    .y(y1 ? _y1 : (d) => $yGet(d)[1]);
-$: if (curve)
-    linePathBelow.curve(curve);
-$: if (defined)
-    linePathBelow.defined(defined);
 </script>
 
 <!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->
 {#key curve}
-  <g class="clip-paths">
-    <defs>
-      <clipPath id="threshold-clip-below-{id}">
-        <path d={clipPathBelow(data ?? $contextData)} />
-      </clipPath>
-      <clipPath id="threshold-clip-above-{id}">
-        <path d={clipPathAbove(data ?? $contextData)} />
-      </clipPath>
-    </defs>
-  </g>
+  <ClipPath>
+    <svelte:fragment slot="clip">
+      <Area y0={(d) => $y(d)[0]} y1={(d) => min($yDomain)} {curve} {defined} />
+    </svelte:fragment>
 
-  <slot
-    name="pathAbove"
-    areaPathData={areaPath(data ?? $contextData)}
-    clipPath="url(#threshold-clip-below-{id})"
-    linePathData={linePathAbove(data ?? $contextData)}
-  />
+    <slot name="above" {curve} {defined} />
+  </ClipPath>
 
-  <slot
-    name="pathBelow"
-    areaPathData={areaPath(data ?? $contextData)}
-    clipPath="url(#threshold-clip-above-{id})"
-    linePathData={linePathBelow(data ?? $contextData)}
-  />
-{/key}
+  <ClipPath>
+    <svelte:fragment slot="clip">
+      <Area y0={(d) => min($yDomain)} y1={(d) => $y(d)[1]} {curve} {defined} />
+    </svelte:fragment>
+
+    <slot name="below" {curve} {defined} />
+  </ClipPath>
 
-<!-- Fix `<Threshold> received an unexpected slot "default".` warning -->
-<slot />
+  <slot {curve} {defined} />
+{/key}

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

@@ -1,35 +1,28 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ComponentProps } from 'svelte';
 import type { CurveFactory } from 'd3-shape';
-import { type Accessor } from '../utils/common.js';
+import Area from './Area.svelte';
 declare const __propDef: {
     props: {
-        data?: any;
-        x?: Accessor;
-        y0?: Accessor;
-        y1?: Accessor;
         curve?: CurveFactory | undefined;
-        defined?: Parameters<{
-            (): (d: [number, number], index: number, data: [number, number][]) => boolean;
-            (defined: boolean): import("d3-shape").Area<[number, number]>;
-            (defined: (d: [number, number], index: number, data: [number, number][]) => boolean): import("d3-shape").Area<[number, number]>;
-        }>[0] | undefined;
-        id?: string;
+        defined?: ComponentProps<Area>["defined"] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        pathAbove: {
-            areaPathData: string | null;
-            clipPath: string;
-            linePathData: string | null;
+        above: {
+            curve: CurveFactory | undefined;
+            defined: ((d: any, index: number, data: any[]) => boolean) | undefined;
         };
-        pathBelow: {
-            areaPathData: string | null;
-            clipPath: string;
-            linePathData: string | null;
+        below: {
+            curve: CurveFactory | undefined;
+            defined: ((d: any, index: number, data: any[]) => boolean) | undefined;
+        };
+        default: {
+            curve: CurveFactory | undefined;
+            defined: ((d: any, index: number, data: any[]) => boolean) | undefined;
         };
-        default: {};
     };
 };
 export type ThresholdProps = typeof __propDef.props;

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

@@ -62,7 +62,7 @@ declare const __propDef: {
             y: number;
         }>;
         initialScale?: number | undefined;
-        scale?: import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number>;
+        scale?: Writable<number> | import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number>;
         setScrollMode?: (mode: TransformScrollMode) => void;
         reset?: () => void;
         zoomIn?: () => void;
@@ -137,7 +137,7 @@ export default class TransformContext extends SvelteComponentTyped<TransformCont
         x: number;
         y: number;
     }> | undefined>;
-    get scale(): NonNullable<import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | Writable<number> | undefined>;
+    get scale(): NonNullable<Writable<number> | import("svelte/motion").Spring<number> | import("svelte/motion").Tweened<number> | undefined>;
     get setScrollMode(): (mode: TransformScrollMode) => void;
     get reset(): () => void;
     get zoomIn(): () => void;

package/dist/components/TransformControls.svelte

@@ -1,4 +1,5 @@
-<script>import { Button, Icon, MenuButton, Tooltip, cls } from 'svelte-ux';
+<script>import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
+import { cls } from '@layerstack/tailwind';
 import { mdiArrowULeftTop, mdiMagnifyPlusOutline, mdiMagnifyMinusOutline, mdiImageFilterCenterFocus, mdiChevronDown, mdiResize, mdiArrowExpandAll, mdiCancel, } from '@mdi/js';
 import { transformContext } from './TransformContext.svelte';
 export let placement = 'top-right';

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

@@ -2,9 +2,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: ("center" | "left" | "right" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+        placement?: ("left" | "right" | "center" | "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
         orientation?: ("horizontal" | "vertical") | undefined;
-        show?: ("reset" | "center" | "scrollMode" | "zoomIn" | "zoomOut")[] | undefined;
+        show?: ("reset" | "scrollMode" | "zoomIn" | "zoomOut" | "center")[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;