Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(treemap): fix html parent label interpolation
  • Loading branch information
plouc committed Jan 2, 2022
1 parent b45f0d1 commit ba6071a
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 11 deletions.
4 changes: 2 additions & 2 deletions packages/treemap/src/TreeMapHtmlNode.tsx
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand Down
21 changes: 12 additions & 9 deletions packages/treemap/src/transitions.ts
Expand Up @@ -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)`
)

0 comments on commit ba6071a

Please sign in to comment.