Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Fraction Explosion #256

Merged
merged 2 commits into from
Dec 2, 2024
Merged

Conversation

andymedinadev
Copy link
Contributor

Hola! 👋
Esta es mi primer Pull Request en GitHub! 😅

Codi.link es excelente, pero al cambiar el tamaño de los editores utilizando el drag a veces ocurre un bug que contrae los demás editores aleatoriamente, lo cual es bastante molesto.

Demo del error con un video de Midu 😎

demo.mp4

Creo que este error se genera cuando uno de los editores o "tracks" se contrae por completo. La dependencia de split-grid le asigna un fraction con valor de 0.

Después cuando la dependencia intenta calcular nuevamente el valor de los fraction (realiza una división) al tener un valor de 0 esto genera que los fraction restantes tomen valores muy elevados. Ahí es cuando el layout se rompe y empieza a volverse loco.

bug

Otra demo de este bug puede verse en esta issue de split-grid

Para solucionarlo establezco el tamaño mínimo de los "tracks" a 1px, para prevenir el valor default de 0fr.
Con esto la librería devuelve fractions muy pequeños, pero siempre mayores a cero.

solution

Ahora al tener editores ("tracks") de un 1px de tamaño como mínimo, ya no se generan valores de fractions exponenciales por el bug, pero se ya no se pueden apilar los draggers entre sí, siempre va a quedar 1px en cada lado.

problem

Para solucionar este segudo problema, le agregué a los draggers o "gutters" un box-shadow con CSS para cubrir esos pixeles sobrantes.

shadow

Eso sería todo 😅

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
By adding a minSize of 1px in the split-grid options,
the error that caused huge fractions by not controlling
the zero case is solved
By having fragments of minimum 1px,
the gutters can never be stacked next to each other

To fix this visual issue,
added 1px shadow on the sides of each gutter using CSS
@midudev midudev merged commit e9c046a into midudev:main Dec 2, 2024
@andymedinadev andymedinadev deleted the fix/fractionCalculation branch December 3, 2024 14:42
@andymedinadev andymedinadev restored the fix/fractionCalculation branch December 3, 2024 14:43
@andymedinadev andymedinadev deleted the fix/fractionCalculation branch December 3, 2024 14:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants