feat(Html): Apply transformContext when using mode='canvas' (alig…

…n with `Svg` and `Canvas`)
techniq · Feb 12, 2025 · 2b46908 · 2b46908
1 parent dcf6c2e
commit 2b46908
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/.changeset/eight-pumas-think.md b/.changeset/eight-pumas-think.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Html): Apply `transformContext` when using `mode='canvas'` (align with `Svg` and `Canvas`)
diff --git a/packages/layerchart/src/lib/components/layout/Html.svelte b/packages/layerchart/src/lib/components/layout/Html.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
   import { chartContext } from '../ChartContext.svelte';
+  import { transformContext } from '../TransformContext.svelte';
 
   /** The layer's outermost `<div>` tag. Useful for bindings. */
   export let element: HTMLDivElement | undefined = undefined;
@@ -23,9 +24,27 @@
   /** A string passed to the `aria-describedby` property on the `<div>` tag. */
   export let describedBy: string | undefined = undefined;
 
-  const { padding } = chartContext();
+  /**
+   * Translate children to center (useful for radial layouts)
+   */
+  export let center: boolean | 'x' | 'y' = false;
 
   $: roleVal = role || (label || labelledBy || describedBy ? 'figure' : undefined);
+
+  const { width, height, padding } = chartContext();
+  const { mode, scale, translate } = transformContext();
+
+  $: transform = center
+    ? `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`
+    : '';
+  $: 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}px,${newTranslate.y}px) scale(${$scale})`;
+  }
 </script>
 
 <div
@@ -36,6 +55,8 @@
     pointerEvents === false && 'pointer-events-none',
     $$props.class
   )}
+  style:transform
+  style:transform-origin="top left"
   style:z-index={zIndex}
   style:pointer-events={pointerEvents === false ? 'none' : null}
   style:top="{$padding.top}px"

diff --git a/packages/layerchart/src/lib/components/layout/Svg.svelte b/packages/layerchart/src/lib/components/layout/Svg.svelte
@@ -37,7 +37,6 @@
   export let center: boolean | 'x' | 'y' = false;
 
   const { containerWidth, containerHeight, width, height, padding } = chartContext();
-
   const { mode, scale, translate } = transformContext();
 
   $: transform = center