Height, zoom, scroll - Githubissues

Hi everyone, I'm trying to use this library. But I'm having problems with its height, I can set several sizes, but it doesn't change, in addition to the zoom not working, can anyone help me to solve it? Captura de tela de 2023-06-10 22-46-11

I would also like to know how the structure would look without the SVGViewer.

Hey @Rafhael369!

I'll try answer your questions below as best I can with what you mentioned, more information would help me pinpoint the issue better so i can fix it.

Hi everyone, I'm trying to use this library. But I'm having problems with its height, I can set several sizes, but it doesn't change, in addition to the zoom not working, can anyone help me to solve it?

Can you show the code or something so i can re-produce your issue? as you can see on the storybook link the height is possible to set directly into the SVGViewer like so in my example code


function Template({ ...args }) {
  const [width, height] = useWindowSize();
  const finalWidth = Math.max(width - 50, 500);
  const finalHeight = Math.max(height - 100, 500);
  return (
    <SingleElimBracketLeaderboard
      // currentRound={4}
      svgWrapper={({ children, ...props }) => (
        <StyledSvgViewer width={finalWidth} height={finalHeight} {...props}>
          {children}
        </StyledSvgViewer>
      )}
      {...args}
    />
  );
}

Could you show how you're setting up the SVGViewer and rendering the bracket within it?

I would also like to know how the structure would look without the SVGViewer.

Without SVGViewer the structure will be the same but the Bracket will be as big as it's contents. no scrollbars or anything. you'd have to implement that yourself with some kind of wrapping div with overflow set to scroll or auto both ways. (or whatever solution you prefer)

Thanks for the answers.

I managed to solve the problem with horizontal scrolling and zooming, it was a problem on the page where I was rendering the component, I realized that I was having a loop.

However, I still have a problem with vertical scrolling, it seems that something is blocking my height.

In the image below, you can see that it frees up space to scroll to the right, but blocks scrolling up or down.

Bracket

Here's the code snippet I'm using the component.

import { Row, Spin } from "antd";
import { SingleEliminationBracket, Match, SVGViewer } from '@g-loot/react-tournament-brackets';
import { getAllPartidasByTorneioId } from "../../servicos/PartidaService";
import { useEffect, useState } from "react";

function montar_partida(partidas: any[]) {
    const matches = [];
    console.log("partidas", partidas.length);
    for (let i = 0; i < partidas.length; i++) {
        const partida = partidas[i];
        if (partida.etapa.toUpperCase() !== "PRIMEIRA FASE") {
            const match = {
                "id": partida.id,
                "name": partida.etapa.toUpperCase(),
                "nextMatchId": partida.id_proxima_partida,
                "tournamentRoundText": "Eliminatório",
                "startTime": "09/06/2023",
                "state": "DONE",
                "participants": [
                    {
                        "id": partida.inscricao_atleta1?.id ?? 0,
                        "resultText": partida.pontos_atleta_1.toString(),
                        "isWinner": false,
                        "status": null,
                        "name": partida.inscricao_atleta1?.usuario.nome ?? "A Definir"
                    },
                    {
                        "id": partida.inscricao_atleta2?.id ?? 0,
                        "resultText": partida.pontos_atleta_2.toString(),
                        "isWinner": false,
                        "status": null,
                        "name": partida.inscricao_atleta2?.usuario.nome ?? "A Definir"
                    }
                ]
            };
            matches.push(match);
        }
    }
    console.log("matches", matches);
    return matches;
}

interface IFaseEliminatoriaProps { }

export const FaseEliminatoria = ({ }: IFaseEliminatoriaProps) => {
    const [match_todas, setMatch_todas] = useState<any[]>([]);
    const torneioId = 1;

    useEffect(() => {
        const fetchPartidas = async () => {
            if (!torneioId) return;
            await getAllPartidasByTorneioId(torneioId).then((partidaData) => {
                setMatch_todas(montar_partida(partidaData));
            });
        };
        fetchPartidas();
    }, [torneioId]);

    const finalWidth = Math.max(window.innerWidth - 50, 500);
    const finalHeight = Math.max(window.innerHeight - 100, 800);
    console.log(finalHeight, finalWidth)

    return (
        <>
            <div
                style={{
                    display: "flex",
                    justifyContent: "center",
                    flexDirection: "column",
                    alignItems: "center",
                    marginTop: "20px",
                    margin: "20px 20px",
                }}
            >
                <Row gutter={[24, 0]} style={{ width: "100%", height: "100%" }}>
                    {match_todas.length > 0 ? (
                        <SingleEliminationBracket
                            matches={match_todas}
                            matchComponent={Match}
                            svgWrapper={({ children, ...props }) => (
                                <SVGViewer width={finalWidth} height={finalHeight} {...props}>
                                    {children}
                                </SVGViewer>
                            )}
                        />
                    ) : (
                        <Spin size="large" />
                    )}
                </Row>

            </div>
        </>
    );
};

I'm still looking for this bug, I believe it could be in my code too.

I was also able to identify a div that limits my height to a dynamic value, but I could not identify it in the codes. Below is a print of the browser console.

console

I am grateful for the attention so far, if you identify something that I may be doing wrong, I would be even more grateful for the support.

I also realized that the connection between the keys is not being done correctly, I analyzed my data and did not find any errors.

[
  {
    "id": 31,
    "name": "OITAVAS DE FINAL",
    "nextMatchId": 36,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 1,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Administrador"
      },
      {
        "id": 18,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 17"
      }
    ]
  },
  {
    "id": 32,
    "name": "OITAVAS DE FINAL",
    "nextMatchId": 36,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 2,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 1"
      },
      {
        "id": 17,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 16"
      }
    ]
  },
  {
    "id": 33,
    "name": "QUARTAS DE FINAL",
    "nextMatchId": 38,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 5,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 4"
      },
      {
        "id": 14,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 13"
      }
    ]
  },
  {
    "id": 34,
    "name": "QUARTAS DE FINAL",
    "nextMatchId": 38,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 6,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 5"
      },
      {
        "id": 13,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 12"
      }
    ]
  },
  {
    "id": 35,
    "name": "QUARTAS DE FINAL",
    "nextMatchId": 37,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 9,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 8"
      },
      {
        "id": 10,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "Usuário 9"
      }
    ]
  },
  {
    "id": 36,
    "name": "QUARTAS DE FINAL",
    "nextMatchId": 37,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      },
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      }
    ]
  },
  {
    "id": 37,
    "name": "SEMIFINAL",
    "nextMatchId": 39,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      },
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      }
    ]
  },
  {
    "id": 38,
    "name": "SEMIFINAL",
    "nextMatchId": 39,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      },
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      }
    ]
  },
  {
    "id": 39,
    "name": "FINAL",
    "nextMatchId": null,
    "tournamentRoundText": "Eliminatório",
    "startTime": "09/06/2023",
    "state": "DONE",
    "participants": [
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      },
      {
        "id": 0,
        "resultText": "0",
        "isWinner": false,
        "status": null,
        "name": "A Definir"
      }
    ]
  }
]

As shown in the image below, the match named "QUARTAS DE FINAL" was supposed to have two players, named "A definir".

Bracket

g-loot / react-tournament-brackets

Height, zoom, scroll #58