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

feat: DraggablePoint in solids #1485

Merged
merged 12 commits into from
May 22, 2024
Merged

feat: DraggablePoint in solids #1485

merged 12 commits into from
May 22, 2024

Conversation

wodeni
Copy link
Member

@wodeni wodeni commented Jun 14, 2023

Description

Resolves #issue.

This PR adds a DraggablePoint component to @penrose/solids, which is inspired by Movable points in Mafs.

Implementation strategy and design decisions

  • Separate out drag-handling code into DraggablePoint.tsx and use it in eigenvalues.tsx
  • Fix a small build issue with rose now that it's introduced by refactor: integrate Rose #1636.

Checklist

  • I have commented my code, particularly in hard-to-understand areas
  • I have reviewed any generated registry diagram changes

Examples and how to reproduce them

Run nx run solids:dev to see the eigenvalue example. All draggable points use `DraggablePoint".

Open questions

  • The API is not the cleanest: DraggablePoint will need a ref to the outer SVG to compute the right transforms. I think usually people use contexts to pass these things around.
  • transform is technically not needed if x and y are in the SVG screen space. It's only needed because DraggablePoint updates x and y after dragging. Should we expose them as callbacks instead?

@github-actions
Copy link

github-actions bot commented Jun 14, 2023

± Registry diff

M	solid/eigenspace.svg
M	solid/vectors.svg

📊 Performance

Key

Note that each bar component rounds up to the nearest 100ms, so each full bar is an overestimate by up to 400ms.

     0s   1s   2s   3s   4s   5s   6s
     |    |    |    |    |    |    |
name ▝▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▄▄▞▀▀▀▀▀▀▀▀▀▘
      compiling optimizing rendering

If a row has only one bar instead of four, that means it's not a trio and the bar just shows the total time spent for that example, again rounded up to the nearest 100ms.

Data

                                                          0s   1s   2s   3s   4s   5s
                                                          |    |    |    |    |    |
set-theory-domain/tree-venn                               ▝▚▘
set-theory-domain/tree-tree                               ▝▚▘
group-theory/quaternion-multiplication-table              ▝▀▚▀▘
walk-on-spheres/SignedAngleOutside                        ▝▀▚▘
spectral-graphs/examples/hypercube                        ▝▀▞
group-theory/quaternion-cayley-graph                      ▝▚▘
set-theory-domain/tree-venn-3d                            ▝▞
atoms-and-bonds/one-water-molecule                        ▝▞
structural-formula/molecules/caffeine                     ▝▀▚▄▀
walk-on-spheres/walk-on-stars                             ▝▀▀▀▄▀▀▘
set-theory-domain/continuousmap                           ▝▞
mobius/mobius                                             ▝▞
linear-algebra-domain/two-vectors-perp                    ▝▞
tutorials/tutorial1                                       ▝▞
tutorials/tutorial2                                       ▝▞
tutorials/tutorial3                                       ▝▞
molecules/nitricacid-lewis                                ▝▀▞
array-models/insertionSort                                ▝▀▚▀
exterior-algebra/vector-wedge                             ▝▞
shape-spec/all-shapes                                     ▝▞▀
shape-spec/arrowheads                                     ▝▞
graph-domain/textbook/sec1/fig1                           ▝▀▄▘
graph-domain/textbook/sec1/fig2                           ▝▀▄▄▘
graph-domain/textbook/sec1/fig3                           ▝▀▄▄▞
graph-domain/textbook/sec1/fig4                           ▝▀▚▄▄▘
spectral-graphs/examples/hexagonal-lattice                ▝▀▀▀▀▀▀▀▀▚▄▄▀
dinoshade/dinoshade                                       ▝▀▀▀▀▚▀
spectral-graphs/examples/star-graph                       ▝▀▀▀▀▀▀▀▀▀▀▚▘
spectral-graphs/examples/box                              ▝▀▀▀▀▀▀▀▚▘
graph-domain/textbook/sec1/fig5                           ▝▀▚▄▄▄▘
graph-domain/textbook/sec1/fig6                           ▝▀▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▘
graph-domain/textbook/sec1/fig7                           ▝▚▞
graph-domain/textbook/sec1/fig8a                          ▝▀▚▄▄▄▘
graph-domain/textbook/sec1/fig8b                          ▝▀▄▄▄▘
graph-domain/textbook/sec1/fig9                           ▝▀▄▞
graph-domain/textbook/sec1/fig10                          ▝▀▞
graph-domain/textbook/sec1/fig11                          ▝▀▄▀
graph-domain/textbook/sec1/fig12                          ▝▀▚▄▞
graph-domain/textbook/sec1/fig13                          ▝▀▄▄▞
graph-domain/textbook/sec2/fig3                           ▝▀▀▀▄▄▄▄▄▄▄▄▄▘
graph-domain/textbook/sec2/fig4                           ▝▀▚▄▄▄▄▞
graph-domain/textbook/sec2/fig5                           ▝▀▀▚▄▄▄▄▄▄▄▄▘
graph-domain/textbook/sec2/fig6                           ▝▀▀▀▚▄▄▄▄▄▄▘
graph-domain/textbook/sec2/fig9                           ▝▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig10a                         ▝▀▄▞
graph-domain/textbook/sec2/fig10b                         ▝▚▞
graph-domain/textbook/sec2/fig11a                         ▝▚▘
graph-domain/textbook/sec2/fig11b                         ▝▚▘
graph-domain/textbook/sec2/fig11c                         ▝▚▞
graph-domain/textbook/sec2/fig12                          ▝▚▘
graph-domain/textbook/sec2/fig13                          ▝▀▀▀▚▄▄▄▄▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig14                          ▝▀▄▞
graph-domain/textbook/sec2/fig16b                         ▝▚▘
geometry-domain/textbook_problems/c05p13                  ▝▚▘
geometry-domain/textbook_problems/c01p01                  ▝▚▘
geometry-domain/textbook_problems/c03p01                  ▝▚▘
geometry-domain/textbook_problems/c05p01                  ▝▚▘
geometry-domain/textbook_problems/ex                      ▝▀▄▘
triangle-mesh-3d/two-triangles                            ▝▚▘
random-sampling/test                                      ▝▀▚▘
geometry-domain/textbook_problems/c11p12                  ▝▀▄▘
curve-examples/catmull-rom/catmull-rom                    ▝▞
word-cloud/example                                        ▝▚▄▘
geometry-domain/siggraph-teaser                           ▝▀▞
minkowski-tests/maze/non-convex                           ▝▚▘
lagrange-bases/lagrange-bases                             ▝▞
hypergraph/hypergraph                                     ▝▀▚▄▄▄▄▄▄▄▄▞
persistent-homology/persistent-homology                   ▝▚▄▄▄▄▞
walk-on-spheres/laplace-estimator                         ▝▚▘
walk-on-spheres/poisson-estimator                         ▝▀▞
walk-on-spheres/nested-estimator                          ▝▀▞
walk-on-spheres/offcenter-estimator                       ▝▀▞
shape-distance/points-around-star                         ▝▀▞
shape-distance/points-around-polyline                     ▝▚▘
shape-distance/points-around-line                         ▝▚▘
shape-distance/lines-around-rect                          ▝▞
fake-3d-linear-algebra/projection                         ▝▞
animation/center-shrink-circle                            ▝▞
graph-domain/other-examples/hamiltonian-cycle             ▝▀▄▄▘
structural-formula/reactions/methane-combustion           ▝▀▚▄▄▄▄▄▘
molecules/glutamine                                       ▝▚▘
matrix-ops/tests/matrix-matrix-addition                   ▝▞
matrix-ops/tests/matrix-matrix-division-elementwise       ▝▚▘
matrix-ops/tests/matrix-matrix-multiplication-elementwise ▝▞
matrix-ops/tests/matrix-matrix-multiplication             ▝▞
matrix-ops/tests/matrix-matrix-subtraction                ▝▞
matrix-ops/tests/matrix-transpose                         ▝▞
matrix-ops/tests/matrix-vector-left-multiplication        ▝▞
matrix-ops/tests/matrix-vector-right-multiplication       ▝▞
matrix-ops/tests/scalar-vector-division                   ▝▞
matrix-ops/tests/scalar-vector-left-multiplication        ▝▞
matrix-ops/tests/scalar-vector-right-multiplication       ▝▞
matrix-ops/tests/vector-vector-addition                   ▝▞
matrix-ops/tests/vector-vector-division-elementwise       ▝▞
matrix-ops/tests/vector-vector-multiplication-elementwise ▝▞
matrix-ops/tests/vector-vector-outerproduct               ▝▞
matrix-ops/tests/vector-vector-subtraction                ▝▞
logic-circuit-domain/half-adder                           ▝▞
curve-examples/cubic-bezier                               ▝▄▄▘
triangle-mesh-2d/diagrams/cotan-formula                   ▝▚▘
triangle-mesh-2d/diagrams/concyclic-pair                  ▝▚▞
triangle-mesh-2d/diagrams/halfedge-mesh                   ▝▚▘
triangle-mesh-2d/diagrams/relative-orientation            ▝▚▘
triangle-mesh-2d/diagrams/triangle-centers                ▝▚▘
triangle-mesh-2d/diagrams/angle-equivalence               ▝▀▄▄▘
timeline/penrose                                          ▝▀▄▀
graph-domain/textbook/sec5/ex32                           ▝▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▘
curve-examples/open-elastic-curve                         ▝▀▄▞
curve-examples/closed-elastic-curve                       ▝▚▄▘
graph-domain/other-examples/arpanet                       ▝▀▀▀▚▄▄▄▄▄▄▄▄▄▄▄▄▄▄▘
graph-domain/other-examples/nyc-subway                    ▝▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▘
fancy-text/fancy-text                                     ▝▚▄▘
curve-examples/blobs                                      ▝▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▞
curve-examples/space-curves                               ▝▀▀▀▄▄▄▘
geometric-queries/ray-intersect/test-group                ▝▀▀▀▞
ray-tracing/path-trace                                    ▝▞
ray-tracing/bidirectional                                 ▝▞
ray-tracing/next-event-estimation                         ▝▞
geometric-queries/test                                    ▝▚▘
geometric-queries/closest-point/test-group                ▝▚▘
geometric-queries/closest-point/test                      ▝▞
geometric-queries/closest-silhouette-point/test           ▝▞
geometric-queries/ray-intersect/test                      ▝▀▀▚▘
box-arrow-diagram/computer-architecture                   ▝▀▀▀▚▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▞
stochastic-process/stochastic-process                     ▝▀▀▀▀▀▀▀▀▀▀▀▀▞▀▀
stochastic-process/epsilon-shell/AbsorbingBoundary        ▝▀▀▀▀▀▀▀▀▞
solid/eigenspace                                          ▐▌
solid/triangles                                           ▐
solid/vectors                                             ▐
tsne/tsne                                                 ▝▀▀▀▀▀▄▄▄▄▄▄▄▄▄▘
spectral-graphs/examples/4x4-sudoku-graph                 ▝▀▞
spectral-graphs/examples/dodecahedral-graph               ▝▚▘
matrix-library/crossProductMatrix                         ▝▞
matrix-library/diagonal2d                                 ▝▞
matrix-library/diagonal3d                                 ▝▞
matrix-library/identity2d                                 ▝▞
matrix-library/identity3d                                 ▝▞
matrix-library/inverse2d                                  ▝▞
matrix-library/inverse3d                                  ▝▞
matrix-library/matrix2d                                   ▝▞
matrix-library/matrix3d                                   ▝▞
matrix-library/outerProduct2d                             ▝▞
matrix-library/outerProduct3d                             ▝▞
matrix-library/rotate                                     ▝▞
matrix-library/rotate2d                                   ▝▞
matrix-library/rotate3d                                   ▝▞
matrix-library/rotate3dh                                  ▝▞
matrix-library/scale2d                                    ▝▞
matrix-library/scale3d                                    ▝▞
matrix-library/shear2d                                    ▝▞
matrix-library/shear3d                                    ▝▚▘
matrix-library/skew2d                                     ▝▞
matrix-library/translate2d                                ▝▞
matrix-library/translate3dh                               ▝▞
atoms-and-bonds/wet-floor                                 ▝▄▘
curve-examples/offset                                     ▝▄▘
curve-examples/frenet-frame                               ▝▞
curve-examples/osculating-circle                          ▝▞
curve-examples/evolute-of-cardioid                        ▝▀▀▞
spectral-graphs/examples/truncated-cube-graph             ▝▚▘
spectral-graphs/examples/torus                            ▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▄▞
spectral-graphs/examples/mobius                           ▝▀▀▀▀▀▀▀▀▀▀▀▀▀▄▄▘
impossible-ngon/ngon                                      ▝▀▀▀▀▀▞▀
impossible-ngon/parameters                                ▝▞
impossible-ngon/nsides-chirality                          ▝▚▘
spectral-graphs/examples/periodic-hexagonal-lattice       ▝▀▀▀▀▄▘
alloy-models/dining-philosophers                          ▝▞
alloy-models/message-passing                              ▝▚▄▄▄▘
alloy-models/ring-leader-election                         ▝▞
alloy-models/river-crossing                               ▝▞▀
alloy-models/workstations                                 ▝▄▞
alloy-models/generic                                      ▝▀▀▄▄▄▄▄▄▄▄▘
Dynamics/Lyapunov                                         ▝▞
fractals/chaos-game/sierpinski-triangle                   ▝▀▀▀▀▀▄▀▀▀
fractals/chaos-game/vicsek-fractal                        ▝▀▀▀▀▀▀▚▄▀▀▀
fractals/l-systems/tree                                   ▝▀▞
fractals/ifs/ifs                                          ▝▀▀▀▀▀▀▞▀▀▘
dataviz/linearreg                                         ▝▞
dataviz/residual                                          ▝▞

@cloudflare-pages
Copy link

cloudflare-pages bot commented Jun 14, 2023

Deploying penrose with  Cloudflare Pages  Cloudflare Pages

Latest commit: b10c79e
Status: ✅  Deploy successful!
Preview URL: https://aee0f703.penrose-72l.pages.dev
Branch Preview URL: https://drag.penrose-72l.pages.dev

View logs

@wodeni wodeni marked this pull request as ready for review March 29, 2024 14:38
@wodeni wodeni requested a review from samestep March 29, 2024 14:38
Copy link
Collaborator

@samestep samestep left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! I didn't review the code in too too much detail though, so let me know if there are any specific parts you want me to take a look at.

@wodeni wodeni merged commit 165adfb into main May 22, 2024
10 checks passed
@wodeni wodeni deleted the drag branch May 22, 2024 18:47
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