From 747087ee2ee504e080c0a4ad10e2494557b3c7d9 Mon Sep 17 00:00:00 2001 From: Rouak-stha Date: Sat, 30 Sep 2023 21:57:50 +0545 Subject: [PATCH 1/6] feat(react): Allow Different Tree Orientations --- @beautiful-tree/react/src/BeautifulTree.tsx | 25 + .../src/stories/BeautifulTree.stories.ts | 60 + .../react/src/tests/BeautifulTree.test.tsx | 68 + .../__snapshots__/BeautifulTree.test.tsx.snap | 15049 ++++++++++++++++ 4 files changed, 15202 insertions(+) diff --git a/@beautiful-tree/react/src/BeautifulTree.tsx b/@beautiful-tree/react/src/BeautifulTree.tsx index 0669637..a526d16 100644 --- a/@beautiful-tree/react/src/BeautifulTree.tsx +++ b/@beautiful-tree/react/src/BeautifulTree.tsx @@ -23,6 +23,8 @@ export type NodeContentGetter = ( data?: Readonly> | undefined, ) => JSX.Element | string +type Orientation = 'D-T' | 'L-R' | 'R-L' | 'T-D' + export interface BeautifulTreeProps { readonly id: string readonly svgProps: { @@ -33,6 +35,7 @@ export interface BeautifulTreeProps { readonly nodeShape?: 'circle' | 'rect' readonly hCoef?: number readonly tree: Tree + readonly orientation?: Orientation readonly computeLayout?: | ((tree: Readonly) => Readonly) | undefined @@ -57,12 +60,31 @@ function runClassesGetter( return cssClasses.length === 0 ? '' : ` ${cssClasses.join(' ')}` } +function calculateTransformation(orientation: Orientation): string { + switch (orientation) { + case 'D-T': { + return 'rotate(180)' + } + case 'L-R': { + return 'rotate(-90)' + } + case 'R-L': { + return 'rotate(90)' + } + case 'T-D': { + //default + return '' + } + } +} + export function BeautifulTree({ id, svgProps, nodeShape, hCoef = 1, tree, + orientation = 'T-D', computeLayout, getNodeClass, getNodeShape, @@ -81,6 +103,8 @@ export function BeautifulTree({ const widthCenterShift = maxNodeWidth * 0.5 const heightCenterShift = maxNodeHeight * 0.5 const maxNodeRadius = maxNodeHeight * 0.5 + const transformValue = calculateTransformation(orientation) + const transform = { ...(transformValue && { transform: transformValue }) } return ( +
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 46 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 61 +
+ + + +
+ 46 +
+ + + +
+ 55 +
+ + + +
+ 56 +
+ + + +
+ 57 +
+ + + +
+ 58 +
+ + + +
+ 59 +
+ + + +
+ 60 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 52 +
+ + + +
+ 51 +
+ + + +
+ 50 +
+ + + +
+ 60 +
+ + + +
+ 59 +
+ + + +
+ 58 +
+ + + +
+ 57 +
+ + + +
+ 56 +
+ + + +
+ 55 +
+ + + +
+ 47 +
+ + + +
+ 46 +
+ + + +
+ 44 +
+ + + +
+ 61 +
+ + + +
+ 49 +
+ + + +
+ 48 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+ -4 +
+ + + +
+ -2.5 +
+ + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 2.5 +
+ + + +
+ 4 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+ , + "container":
+ + + + + + + + + + + + + + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`BeautifulTree : Smart Layout > renders small tree, with L-R orientation 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 46 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 61 +
+ + + +
+ 46 +
+ + + +
+ 55 +
+ + + +
+ 56 +
+ + + +
+ 57 +
+ + + +
+ 58 +
+ + + +
+ 59 +
+ + + +
+ 60 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 52 +
+ + + +
+ 51 +
+ + + +
+ 50 +
+ + + +
+ 60 +
+ + + +
+ 59 +
+ + + +
+ 58 +
+ + + +
+ 57 +
+ + + +
+ 56 +
+ + + +
+ 55 +
+ + + +
+ 47 +
+ + + +
+ 46 +
+ + + +
+ 44 +
+ + + +
+ 61 +
+ + + +
+ 49 +
+ + + +
+ 48 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+ -4 +
+ + + +
+ -2.5 +
+ + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 2.5 +
+ + + +
+ 4 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+ , + "container":
+ + + + + + + + + + + + + + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`BeautifulTree : Smart Layout > renders small tree, with R-L orientation 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 46 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 61 +
+ + + +
+ 46 +
+ + + +
+ 55 +
+ + + +
+ 56 +
+ + + +
+ 57 +
+ + + +
+ 58 +
+ + + +
+ 59 +
+ + + +
+ 60 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 52 +
+ + + +
+ 51 +
+ + + +
+ 50 +
+ + + +
+ 60 +
+ + + +
+ 59 +
+ + + +
+ 58 +
+ + + +
+ 57 +
+ + + +
+ 56 +
+ + + +
+ 55 +
+ + + +
+ 47 +
+ + + +
+ 46 +
+ + + +
+ 44 +
+ + + +
+ 61 +
+ + + +
+ 49 +
+ + + +
+ 48 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+ -4 +
+ + + +
+ -2.5 +
+ + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 2.5 +
+ + + +
+ 4 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+ , + "container":
+ + + + + + + + + + + + + + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`BeautifulTree : Smart Layout > renders small tree, with T-D orientation 1`] = ` +{ + "asFragment": [Function], + "baseElement": +
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 46 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 48 +
+ + + +
+ 49 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 61 +
+ + + +
+ 46 +
+ + + +
+ 55 +
+ + + +
+ 56 +
+ + + +
+ 57 +
+ + + +
+ 58 +
+ + + +
+ 59 +
+ + + +
+ 60 +
+ + + +
+ 50 +
+ + + +
+ 51 +
+ + + +
+ 47 +
+ + + +
+ 44 +
+ + + +
+ 52 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + +
+ 52 +
+ + + +
+ 51 +
+ + + +
+ 50 +
+ + + +
+ 60 +
+ + + +
+ 59 +
+ + + +
+ 58 +
+ + + +
+ 57 +
+ + + +
+ 56 +
+ + + +
+ 55 +
+ + + +
+ 47 +
+ + + +
+ 46 +
+ + + +
+ 44 +
+ + + +
+ 61 +
+ + + +
+ 49 +
+ + + +
+ 48 +
+ + + +
+ 45 +
+ + + +
+ 43 +
+ + + +
+ 42 +
+ + +
+
+ + + + + + + + + + + + + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+ -4 +
+ + + +
+ -2.5 +
+ + + +
+ -3 +
+ + + +
+ -1.5 +
+ + + +
+ -2 +
+ + + +
+ -0.5 +
+ + + +
+ -1 +
+ + + +
+ 0.5 +
+ + + +
+ 1.5 +
+ + + +
+ 2.5 +
+ + + +
+ 4 +
+ + + +
+ 3 +
+ + + +
+ 2 +
+ + + +
+ 1 +
+ + + +
+ 0 +
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + + +
+ + +
+
+ + + + + + + + + + + + + + +
+ , + "container":
+ + + + + + + + + + + + + + +
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + exports[`BeautifulTree : Smart Layout > renders wide tree A, with rect shape, node content display, and dynamic css classes 1`] = ` { "asFragment": [Function], From 6013fdde5c5a75934843865156ef54047f9dd992 Mon Sep 17 00:00:00 2001 From: Rouak-stha Date: Sun, 1 Oct 2023 16:33:05 +0545 Subject: [PATCH 2/6] feat(react): Allow Different Tree Orientations - Preserve Siblings Order on Rotation - Preserve Text Orientation --- @beautiful-tree/react/src/BeautifulTree.tsx | 21 +++--- .../src/stories/BeautifulTree.stories.ts | 71 ++++++++++++++----- 2 files changed, 67 insertions(+), 25 deletions(-) diff --git a/@beautiful-tree/react/src/BeautifulTree.tsx b/@beautiful-tree/react/src/BeautifulTree.tsx index a526d16..f09977f 100644 --- a/@beautiful-tree/react/src/BeautifulTree.tsx +++ b/@beautiful-tree/react/src/BeautifulTree.tsx @@ -60,20 +60,20 @@ function runClassesGetter( return cssClasses.length === 0 ? '' : ` ${cssClasses.join(' ')}` } -function calculateTransformation(orientation: Orientation): string { +function calculateTransformation(orientation: Orientation): [string, string] { switch (orientation) { case 'D-T': { - return 'rotate(180)' + return ['rotate(180) scale(-1, 1)', 'scale(-1, 1) rotate(180deg)'] } case 'L-R': { - return 'rotate(-90)' + return ['rotate(-90)', 'rotate(90deg)'] } case 'R-L': { - return 'rotate(90)' + return ['rotate(-90) scale(-1)', 'rotate(270deg)'] } case 'T-D': { //default - return '' + return ['', ''] } } } @@ -103,9 +103,11 @@ export function BeautifulTree({ const widthCenterShift = maxNodeWidth * 0.5 const heightCenterShift = maxNodeHeight * 0.5 const maxNodeRadius = maxNodeHeight * 0.5 - const transformValue = calculateTransformation(orientation) - const transform = { ...(transformValue && { transform: transformValue }) } - + const [svgTransformValue, contentTransformValue] = + calculateTransformation(orientation) + const transform = { + ...(svgTransformValue && { transform: svgTransformValue }), + } return ( {getNodeContent(node.data)}
diff --git a/@beautiful-tree/react/src/stories/BeautifulTree.stories.ts b/@beautiful-tree/react/src/stories/BeautifulTree.stories.ts index f85802f..2103116 100644 --- a/@beautiful-tree/react/src/stories/BeautifulTree.stories.ts +++ b/@beautiful-tree/react/src/stories/BeautifulTree.stories.ts @@ -221,53 +221,90 @@ export const Normal_Orientation_Small_Tree: Story = { }, tree: smallTree, orientation: 'T-D', - computeLayout: computeSmartLayout, - getNodeClass: getCssFromNodeData, - getEdgeClass: getCssFromEdgeData, + getNodeContent: (data) => data?.['v']?.toString() ?? '', }, } -export const LR_Orientation_Wide_Tree_A: Story = { +export const LR_Orientation_Small_Tree: Story = { args: { - id: 'lr_orientation_wide_tree_a', + id: 'lr_orientation_small_tree', svgProps: { width: 400, height: 400, }, - tree: wideTree_A, + tree: smallTree, orientation: 'L-R', - computeLayout: computeSmartLayout, - getNodeClass: getCssFromNodeData, - getEdgeClass: getCssFromEdgeData, + getNodeContent: (data) => data?.['v']?.toString() ?? '', }, } -export const RL_Orientation_Wide_Tree_Bm: Story = { +export const RL_Orientation_Small_Tree: Story = { args: { - id: 'rl_orientation_wide_tree_bm', + id: 'rl_orientation_small_tree', svgProps: { width: 400, height: 400, }, - tree: wideTree_Bm, + tree: smallTree, orientation: 'R-L', computeLayout: computeSmartLayout, - getNodeClass: getCssFromNodeData, - getEdgeClass: getCssFromEdgeData, + getNodeContent: (data) => data?.['v']?.toString() ?? '', }, } -export const DT_Orientation_Wide_Tree_D: Story = { +export const DT_Orientation_Small_Tree: Story = { args: { - id: 'dt_orientation_wide_tree_d', + id: 'dt_orientation_small_tree', svgProps: { width: 400, height: 400, }, - tree: wideTree_D, + tree: smallTree, orientation: 'D-T', computeLayout: computeSmartLayout, + getNodeContent: (data) => data?.['v']?.toString() ?? '', + }, +} + +export const LR_Orientation_Wide_Tree_A_On_Rectangle: Story = { + args: { + id: 'lr_orientation_wide_tree_a_on_rectangle', + svgProps: { + width: 250, + height: 450, + }, + tree: wideTree_A, + orientation: 'L-R', + computeLayout: computeSmartLayout, getNodeClass: getCssFromNodeData, getEdgeClass: getCssFromEdgeData, }, } + +export const RL_Orientation_Wide_Tree_Bm_On_Rectangle: Story = { + args: { + id: 'rl_orientation_wide_tree_bm_on_rectangle', + svgProps: { + width: 250, + height: 450, + }, + tree: smallTree, + orientation: 'R-L', + computeLayout: computeSmartLayout, + getNodeContent: (data) => data?.['v']?.toString() ?? '', + }, +} + +export const DT_Orientation_Wide_Tree_D_On_Rectangle: Story = { + args: { + id: 'dt_orientation_wide_tree_d_on_rectangle', + svgProps: { + width: 250, + height: 450, + }, + tree: smallTree, + orientation: 'D-T', + computeLayout: computeSmartLayout, + getNodeContent: (data) => data?.['v']?.toString() ?? '', + }, +} From 874a37d7cb48a80477758d5a5dd374e18c2da6a7 Mon Sep 17 00:00:00 2001 From: Rouak-stha Date: Sun, 1 Oct 2023 16:39:08 +0545 Subject: [PATCH 3/6] feat(react): Allow Different Tree Orientations - Update Test Tree Snapshot --- .../tests/__snapshots__/BeautifulTree.test.tsx.snap | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/@beautiful-tree/react/src/tests/__snapshots__/BeautifulTree.test.tsx.snap b/@beautiful-tree/react/src/tests/__snapshots__/BeautifulTree.test.tsx.snap index 80596e8..b8ceba9 100644 --- a/@beautiful-tree/react/src/tests/__snapshots__/BeautifulTree.test.tsx.snap +++ b/@beautiful-tree/react/src/tests/__snapshots__/BeautifulTree.test.tsx.snap @@ -5334,7 +5334,7 @@ exports[`BeautifulTree : Smart Layout > renders small tree, with D-T orientation class="beautiful-tree-react" id="smart-small-tree" style="width: 400px; height: 400px;" - transform="rotate(90)" + transform="rotate(-90) scale(-1)" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" > @@ -5421,7 +5421,7 @@ exports[`BeautifulTree : Smart Layout > renders small tree, with D-T orientation class="beautiful-tree-react" id="smart-small-tree" style="width: 400px; height: 400px;" - transform="rotate(180)" + transform="rotate(180) scale(-1, 1)" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" > @@ -5509,7 +5509,7 @@ exports[`BeautifulTree : Smart Layout > renders small tree, with D-T orientation class="beautiful-tree-react" id="smart-small-tree" style="width: 400px; height: 400px;" - transform="rotate(180)" + transform="rotate(180) scale(-1, 1)" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" > @@ -12946,7 +12946,7 @@ exports[`BeautifulTree : Smart Layout > renders small tree, with R-L orientation class="beautiful-tree-react" id="smart-small-tree" style="width: 400px; height: 400px;" - transform="rotate(90)" + transform="rotate(-90) scale(-1)" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" > @@ -13034,7 +13034,7 @@ exports[`BeautifulTree : Smart Layout > renders small tree, with R-L orientation class="beautiful-tree-react" id="smart-small-tree" style="width: 400px; height: 400px;" - transform="rotate(90)" + transform="rotate(-90) scale(-1)" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" > From c60917326662970ecdf26e05c8a0401948b17531 Mon Sep 17 00:00:00 2001 From: Rouak-stha Date: Wed, 4 Oct 2023 22:53:53 +0545 Subject: [PATCH 4/6] feat(react): Allow Different Tree Orientations - Respect the Height and Width on Different Orientation --- @beautiful-tree/react/src/BeautifulTree.tsx | 72 ++- @beautiful-tree/react/src/helper/index.ts | 173 +++++++ .../__snapshots__/BeautifulTree.test.tsx.snap | 437 +++++++++--------- 3 files changed, 417 insertions(+), 265 deletions(-) create mode 100644 @beautiful-tree/react/src/helper/index.ts diff --git a/@beautiful-tree/react/src/BeautifulTree.tsx b/@beautiful-tree/react/src/BeautifulTree.tsx index f09977f..4baf85b 100644 --- a/@beautiful-tree/react/src/BeautifulTree.tsx +++ b/@beautiful-tree/react/src/BeautifulTree.tsx @@ -3,6 +3,8 @@ import { edgesIterator, postOrderIterator, } from '@beautiful-tree/algorithms' +// eslint-disable-next-line sort-imports +import { computeAxesCoefAndNodeDimension, coordinateCreators } from './helper' import { Fragment } from 'react' import type { Tree } from '@beautiful-tree/types' import type { WrappedTreeWithLayout } from '@beautiful-tree/algorithms' @@ -23,7 +25,7 @@ export type NodeContentGetter = ( data?: Readonly> | undefined, ) => JSX.Element | string -type Orientation = 'D-T' | 'L-R' | 'R-L' | 'T-D' +export type Orientation = 'D-T' | 'L-R' | 'R-L' | 'T-D' export interface BeautifulTreeProps { readonly id: string @@ -60,24 +62,6 @@ function runClassesGetter( return cssClasses.length === 0 ? '' : ` ${cssClasses.join(' ')}` } -function calculateTransformation(orientation: Orientation): [string, string] { - switch (orientation) { - case 'D-T': { - return ['rotate(180) scale(-1, 1)', 'scale(-1, 1) rotate(180deg)'] - } - case 'L-R': { - return ['rotate(-90)', 'rotate(90deg)'] - } - case 'R-L': { - return ['rotate(-90) scale(-1)', 'rotate(270deg)'] - } - case 'T-D': { - //default - return ['', ''] - } - } -} - export function BeautifulTree({ id, svgProps, @@ -96,18 +80,32 @@ export function BeautifulTree({ const { tree: treeWithLayout, mX, mY } = computeLayout(tree) const { width, height, sizeUnit = 'px' } = svgProps - const xCoef = width / (mX + 2) - const yCoef = height / (mY + 2) - const maxNodeWidth = xCoef * 0.5 - const maxNodeHeight = Math.min(yCoef * 0.5, maxNodeWidth * hCoef) + const { xCoef, yCoef, maxNodeHeight, maxNodeWidth } = + computeAxesCoefAndNodeDimension(orientation, { + width, + height, + hCoef, + mX, + mY, + }) + const widthCenterShift = maxNodeWidth * 0.5 const heightCenterShift = maxNodeHeight * 0.5 const maxNodeRadius = maxNodeHeight * 0.5 - const [svgTransformValue, contentTransformValue] = - calculateTransformation(orientation) - const transform = { - ...(svgTransformValue && { transform: svgTransformValue }), - } + + const { + circleCoordinateCreator, + lineCoordinateCreator, + rectCoordinateCreator, + } = coordinateCreators(orientation, { + width, + height, + xCoef, + yCoef, + heightCenterShift, + widthCenterShift, + }) + return (