Merge pull request #411 from kitsuyui/refurb-treemap

refurb: treemap
kitsuyui · May 4, 2024 · fa1e5c1 · fa1e5c1
2 parents d14906b + 4d8e3a0
commit fa1e5c1
Showing 1 changed file with 7 additions and 31 deletions.
diff --git a/packages/treemap/src/treemap.tsx b/packages/treemap/src/treemap.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useMeasure } from 'react-use'
+import { dividing } from '@kitsuyui/rectangle-dividing'
 
 interface Rect {
   x: number
@@ -68,19 +69,6 @@ const previousBoustrophedonDirection = (rect1: Rect, rect2: Rect): Direction =>
   return nextBoustrophedonDirection(rect2, rect1)
 }
 
-const invertDirection = (direction: Direction): Direction => {
-  switch (direction) {
-    case 'right':
-      return 'left'
-    case 'down':
-      return 'up'
-    case 'left':
-      return 'right'
-    case 'up':
-      return 'down'
-  }
-}
-
 const rectsToRectInfos = (rects: Rect[]): RectInfo[] => {
   const rectInfos: RectInfo[] = rects.map((rect, index) => ({
     ...rect,
@@ -111,6 +99,9 @@ const rectsToRectInfos = (rects: Rect[]): RectInfo[] => {
 }
 
 
+const DEFAULT_ASPECT_RATIO = 16 / 9
+
+
 export const Treemap = (props: {
   weightedItems: WeightedItem[]
   verticalFirst?: boolean
@@ -120,29 +111,14 @@ export const Treemap = (props: {
   const [ref, { width, height }] = useMeasure<HTMLDivElement>()
   const { weightedItems } = props
   const verticalFirst = props.verticalFirst ?? true
-  const aspectRatio = props.aspectRatio ?? 16 / 9
+  const aspectRatio = props.aspectRatio ?? DEFAULT_ASPECT_RATIO
   const boustrophedon = props.boustrophedon ?? false
   const [inAreas, setInAreas] = useState<Rect[]>([])
-  const [dividing, setDividing] = useState<
-    typeof import('@kitsuyui/rectangle-dividing') | null
-  >(null)
-
-  useEffect(() => {
-    ; (async () => {
-      if (dividing) return
-      const d = await import('@kitsuyui/rectangle-dividing')
-      setDividing(d)
-    })()
-  })
 
   useEffect(() => {
-    if (!dividing) {
-      setInAreas([])
-      return
-    }
     const rect: Rect = { x: 0, y: 0, w: width, h: height }
     const weights = new Float32Array(weightedItems.map(({ weight }) => weight))
-    const ia: Rect[] = dividing.dividing(
+    const ia: Rect[] = dividing(
       rect,
       weights,
       aspectRatio,
@@ -159,7 +135,6 @@ export const Treemap = (props: {
     aspectRatio,
     verticalFirst,
     boustrophedon,
-    dividing,
   ])
 
   const rectInfos = rectsToRectInfos(inAreas)
@@ -196,6 +171,7 @@ const TreemapByRect = (props: { items: RectItem[] }) => {
         const { x, y, w, h, index } = rect
         return (<TreemapContext.Provider value={rect} key={index}>
           <div
+            key={index}
             style={{
               position: 'absolute',
               overflow: 'hidden',