From 2b46908894bdb87c3d879afbaec4d68efc4f040e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Wed, 12 Feb 2025 11:42:54 -0500
Subject: [PATCH] feat(Html): Apply `transformContext` when using
 `mode='canvas'` (align with `Svg` and `Canvas`)

---
 .changeset/eight-pumas-think.md               |  5 ++++
 .../src/lib/components/layout/Html.svelte     | 23 ++++++++++++++++++-
 .../src/lib/components/layout/Svg.svelte      |  1 -
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/eight-pumas-think.md

diff --git a/.changeset/eight-pumas-think.md b/.changeset/eight-pumas-think.md
new file mode 100644
index 000000000..35ae85c5c
--- /dev/null
+++ 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
index 81420db9f..f9a962489 100644
--- 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
index 397b97fa4..f8d1ea625 100644
--- 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