From ba6071a334bc657afda369e9c07ce4657c1fdfd7 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Mon, 3 Jan 2022 01:26:37 +0900
Subject: [PATCH] feat(treemap): fix html parent label interpolation

---
 packages/treemap/src/TreeMapHtmlNode.tsx |  4 ++--
 packages/treemap/src/transitions.ts      | 21 ++++++++++++---------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/treemap/src/TreeMapHtmlNode.tsx b/packages/treemap/src/TreeMapHtmlNode.tsx
index 184b862e75..418d31b30e 100644
--- a/packages/treemap/src/TreeMapHtmlNode.tsx
+++ b/packages/treemap/src/TreeMapHtmlNode.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react'
 import { animated } from '@react-spring/web'
 import { useTheme } from '@nivo/core'
 import { NodeProps } from './types'
-import { htmlNodeTransform, htmlLabelTransform } from './transitions'
+import { htmlNodeTransform, htmlLabelTransform, htmlParentLabelTransform } from './transitions'
 
 const NonMemoizedTreeMapHtmlNode = <Datum extends object>({
     node,
@@ -94,7 +94,7 @@ const NonMemoizedTreeMapHtmlNode = <Datum extends object>({
                         height: 10,
                         color: node.parentLabelTextColor,
                         transformOrigin: 'top left',
-                        transform: htmlLabelTransform(
+                        transform: htmlParentLabelTransform(
                             animatedProps.parentLabelX,
                             animatedProps.parentLabelY,
                             animatedProps.parentLabelRotation
diff --git a/packages/treemap/src/transitions.ts b/packages/treemap/src/transitions.ts
index 5d5077b690..cfa5449620 100644
--- a/packages/treemap/src/transitions.ts
+++ b/packages/treemap/src/transitions.ts
@@ -18,12 +18,15 @@ export const htmlLabelTransform = (
     rotation: SpringValue<number>
 ) => to([x, y, rotation], (x, y, rotation) => `translate(${x}px,${y}px) rotate(${rotation}deg)`)
 
-// export const htmlParentLabelTransform = () => to()
-
-/*
-parentLabelHtmlTransform: `translate(${
-    node.parentLabelX - (node.parentLabelRotation === 0 ? 0 : 5)
-}px,${node.parentLabelY - (node.parentLabelRotation === 0 ? 5 : 0)}px) rotate(${
-    node.parentLabelRotation
-}deg)`,
-*/
+export const htmlParentLabelTransform = (
+    x: SpringValue<number>,
+    y: SpringValue<number>,
+    rotation: SpringValue<number>
+) =>
+    to(
+        [x, y, rotation],
+        (x, y, rotation) =>
+            `translate(${x - (rotation === 0 ? 0 : 5)}px,${
+                y - (rotation === 0 ? 5 : 0)
+            }px) rotate(${rotation}deg)`
+    )