diff --git a/packages/treemap/src/treemap.tsx b/packages/treemap/src/treemap.tsx index 84521ab7..dd0ee631 100644 --- 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() 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([]) - 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 (