Example of the annotation in action. Notice the <div> handles text reflow much better. The label is also much easier to style how you want.
https://user-images.githubusercontent.com/1286001/143527056-b6de800a-a564-4976-9f12-cf655568765c.mov
Pinned
valtism/resume
1
⚡ My Personal Resume (for nerds 🤓)
valtism/valtism.github.io
1
⚡ Personal blog
valtism/music-list
1
⚡ Create beautiful collages of your favourite albums
valtism/ultimate-tic-tac-toe
0
⚡ A react implementation of Ultimate Tic Tac Toe
valtism/advent-of-code-2020
1
⚡ Advent of Code 2020
valtism/dotfiles
0
Activity
Nov
26
4 days ago
valtism issue comment airbnb/visx
valtism
valtism push valtism/visx
valtism
Remove console log
commit sha： 9b9c60d9bcf7fe0167b82829222f53db9a6ee42e
push time in 3 days ago
valtism issue comment airbnb/visx
valtism
valtism
CONTRIBUTOR
createdAt 3 days ago
Annotation label <foreignobject> render
:rocket: Enhancements
Add option to pass in an element to render as a label as a child.
Uses
Related to this discussion: https://github.com/airbnb/visx/issues/1173
This has the benefit of letting the element handle text reflow, with the drawback being that the user need to manage min and max width of the container element they render.
This approach seems much better imo, favouring composability over configuration which is much more in line with the philosophy of d3.
valtism
@williaster Not sure how I can see the issues with Happo. I don't think there should be any visual regressions from this PR thought.
valtism push valtism/visx
valtism
Fix test cases
Not sure how idomatic all the dive()s are, but I've heard complaints
about them so I'm guess it's the way to go.
commit sha： a3bfc41fa17d95df38780f80aab5095a4151c9cf
push time in 4 days agovaltism push valtism/visx
valtism
Fix child render for Safari
Add witdth and height to
commit sha： ce5cd189f4bb31fb5f2f5d9b4edc35053ddc40dd
push time in 4 days agovaltism pull request airbnb/visx
valtism
valtism
CONTRIBUTOR
createdAt 4 days ago
Annotation label <foreignobject> render
:rocket: Enhancements
Add option to pass in an element to render as a label as a child.
Uses
Related to this discussion: https://github.com/airbnb/visx/issues/1173
This has the benefit of letting the element handle text reflow, with the drawback being that the user need to manage min and max width of the container element they render.
This approach seems much better imo, favouring composability over configuration which is much more in line with the philosophy of d3.
valtism in valtism/visx create branch annotation-label-foreignobject
createdAt 4 days ago
Nov
25
5 days ago
valtism push valtism/advent-of-code-2020
valtism
Day 19 complete
commit sha： 1f5f8bcf2ecfdcfeb8b13a10edab04ecf60d90d0
push time in 5 days agovaltism push valtism/advent-of-code-2020
valtism
Update dependencies
commit sha： 80807ccb5c1fa74079bc6737bf9c75ea64cbecbd
push time in 5 days ago
Nov
23
1 week ago
valtism issue comment airbnb/visx
valtism
valtism
CONTRIBUTOR
createdAt 6 days ago
Add restrictToPath as a Drag parameter
:rocket: Enhancements
Allow the user to pass an SVGGeometryElement to restrict the drag area to following the path of an SVG.
Useful for constraining the drag of an object to a curved line.
valtism
@williaster Hardly had the last drag enhancement merged when I realised I needed another way to constrain my drag. This PR adds a way to constrain drag to an SVGGeometry like path. Simply constraining on onDragMove leads to jitter like this:
https://user-images.githubusercontent.com/1286001/142977510-c870dbe3-caed-4fe0-88a9-a2ca2df1a0b4.mov
With the constraint applied, the drag becomes much smoother.
https://user-images.githubusercontent.com/1286001/142977548-2366d189-ceff-4d57-8cb5-191468f15f82.mov
This should work even if the path is nested deeply within the SVG, as it applies a transform based on the parent SVG it is relative to.
valtism pull request airbnb/visx
valtism
valtism
CONTRIBUTOR
createdAt 6 days ago
Add restrictToPath as a Drag parameter
:rocket: Enhancements
Allow the user to pass an SVGGeometryElement to restrict the drag area to following the path of an SVG.
Useful for constraining the drag of an object to a curved line.
Nov
19
1 week ago
Nov
15
2 weeks ago
valtism push valtism/visx
valtism
valtism
build(2b7c8106f5081e8763a10b605b671063ea326dc2): auto-commit package sizes
valtism
valtism
changelog: v2.3.0
valtism
new(xychart): distinguish nearestDatum in renderGlyph (#1294)
-
distinguish nearestDatum in renderGlyph
-
lint
valtism
build(b9472fda714dd8b1fc99381de1199e81af37b44f): auto-commit package sizes
valtism
new(shape/BarRounded): export useBarRounded, support render functions (#1097)
-
new(shape/BarRounded): export useBarRounded hook, allow children render function
-
fix(shape/BarRounded): useBarRounded => useBarRoundedPath
-
Update packages/visx-shape/test/BarRounded.test.tsx
valtism
build(7c84a3a2fa1de173a7eedbf2d01bb72827fd7ec9): auto-commit package sizes
valtism
Update Readme.md (#1372)
valtism
new(xychart/BarSeries,BarGroup,BarStack): add support for bar radius (#1098)
-
new(xychart/BarSeries,BarGroup,BarStack): add support for bar radius
-
fix(xychart/AnimatedBars): use consistent className in BarRounded
-
fix(xychart): pass radiusAll in AnimatedBars, fix BarSeries prop types
-
test(xychart): remove mount from new tests
-
test(xychart): fix BarStack test
-
lint(xychart)
valtism
build(afe94c886fa4344454d484d0de1fe68c869b850d): auto-commit package sizes
valtism
valtism
changelog: v2.4.0
valtism
fix(responsive): fix shallow equality check on default array value for ParentSize (#1370)
-
Fix shallow equality check on default array value for ParentSize
-
lint
-
lint
-
PR updates
valtism
build(3a86798e8b40a00e7b96239f268b9d955160b9a0): auto-commit package sizes
valtism
valtism
changelog: v2.4.1
valtism
new(drag): add options to restrict
-
Add option to disable snap on drag
-
Make linter happy
-
[@visx/Drag] Allow restriction of drag area
Add object property restrict to useDrag (and
Min and max values can be set in the x and y plane (or left undefined for unbounded). This restricts the centre of the object to these bounds.
This works with both the resetOnStart and snapToPointer options.
-
Make linter happy (again)
-
docs(drag): add periods to prop annotations
Co-authored-by: Chris Williams [email protected]
valtism
build(afc2acc42426d657be22b15b08bce79b1ca0b7d8): auto-commit package sizes
valtism
commit sha： 3484291a96a215c66b7c94ea0669cb83d41254ba
push time in 2 weeks ago
Nov
10
2 weeks ago
valtism issue comment airbnb/visx
valtism
valtism
CONTRIBUTOR
createdAt 2 weeks ago
new(drag): add options to restrict <Drag> area and control snapToPointer behaviour
:rocket: Enhancements
- Restrict draggable area
- Option to disable snapping to centre of pointer on drag start.
Started from this discussion https://github.com/airbnb/visx/discussions/1365
snapToCursor (default behaviour):
https://user-images.githubusercontent.com/1286001/139196553-633e9a86-00b2-4391-bc4d-849489ff8e74.mov
snapToCursor={false}:
https://user-images.githubusercontent.com/1286001/139196579-6b81de6f-db42-499f-91f5-8b5d1eb9ebc0.mov
Restricted to chart area (draggable area extends beyond):
https://user-images.githubusercontent.com/1286001/139196632-19d10701-fb10-48e1-8d95-174697701fd7.mov
valtism
Well the undefined thing was pretty minor, so I don't know if it is worth changing if it could cause a regression for other packages. Let me know if there's anything else you need for this otherwise I'm happy with what we have.
Nov
5
3 weeks ago
valtism push valtism/ultimate-tic-tac-toe
valtism
Update readme
commit sha： 1317e3dd821079934178c93b6ea4fdb6f31682cc
push time in 3 weeks agovaltism push valtism/ultimate-tic-tac-toe
valtism
Update readme
commit sha： 52fd675bd7f0d739ad7588e7a8a1ed34f15d39f0
push time in 3 weeks ago
Oct
28
1 month ago
valtism push valtism/dotfiles
valtism
newline
commit sha： ae91142ca17789074c97a3b4b20dcf24b9dce53a
push time in 1 month agovaltism push valtism/ultimate-tic-tac-toe
valtism
Progress
valtism
Merge branch 'master' of https://github.com/valtism/ultimate-tic-tac-toe
commit sha： 68f25f4da956290601fe5dcc4e1fde6a14664d92
push time in 1 month agovaltism push valtism/react-headless-datetime-picker
valtism
Final fixes
commit sha： 614d9e7abeb684feecc451cd95ed23a6a64a2f66
push time in 1 month agovaltism push valtism/react-headless-datetime-picker
valtism
Remove mistakenly added files from bad remote
commit sha： 2016f1b90922b5ff296330526fef77e07d32ea10
push time in 1 month agovaltism push valtism/react-headless-datetime-picker
valtism
Progress
commit sha： 00f3d9374d66be44dea6536118d28b1739341687
push time in 1 month agovaltism push valtism/music-list
valtism
Progress
commit sha： bfe1be00ee35b1731a53ca60499e4b55cf5d3867
push time in 1 month agovaltism push valtism/react-headless-datetime-picker
valtism
Implemented drag restrict
commit sha： f5102fb70a84b64a93a62975336573ade7ae1986
push time in 1 month ago
valtism issue comment airbnb/visx
valtism
valtism
CONTRIBUTOR
createdAt 1 month ago
Restrict <Drag> area & Disable snapToPointer behaviour option
:rocket: Enhancements
- Restrict draggable area
- Option to disable snapping to centre of pointer on drag start.
Started from this discussion https://github.com/airbnb/visx/discussions/1365
snapToCursor (default behaviour):
https://user-images.githubusercontent.com/1286001/139196553-633e9a86-00b2-4391-bc4d-849489ff8e74.mov
snapToCursor={false}:
https://user-images.githubusercontent.com/1286001/139196579-6b81de6f-db42-499f-91f5-8b5d1eb9ebc0.mov
Restricted to chart area (draggable area extends beyond):
https://user-images.githubusercontent.com/1286001/139196632-19d10701-fb10-48e1-8d95-174697701fd7.mov
valtism
@williaster This is ready to go. Let me know what you think.
Aside: If this is good to merge before the end of the month, I still need one more Hacktoberfest PR so it would be great to get the hacktoberfest-accepted tag on it 😉
valtism push valtism/visx
valtism
Make linter happy (again)
commit sha： d58294576c4ce97269b383611b864cb99108f71e
push time in 1 month agovaltism wants to merge airbnb/visx
valtism
valtism
CONTRIBUTOR
createdAt 1 month ago
Add option to disable snap on drag
:rocket: Enhancements
- Option to disable snapping to centre of pointer on drag start.
This is preliminary work needed for limitations on draggable items https://github.com/airbnb/visx/discussions/1365
As you can see here, even when movement in one plane is restricted (dx is never changed), the item can still be moved because it will snap to the centre of the pointer on dragStart.
https://user-images.githubusercontent.com/1286001/138999808-56da166f-07f0-4c98-af14-dd125b8d32b4.mov
We need the option to prevent this behaviour to truly restrict movement to a single axis.
valtism
This is the structure I chose for limiting the drag area. Open to discuss other options for this if needed.
Previous
Next
Annotation label <foreignobject> render
:rocket: Enhancements
Add option to pass in an element to render as a label as a child. Uses to allow user to pass in an HTML element.
Related to this discussion: https://github.com/airbnb/visx/issues/1173
This has the benefit of letting the element handle text reflow, with the drawback being that the user need to manage min and max width of the container element they render.
This approach seems much better imo, favouring composability over configuration which is much more in line with the philosophy of d3.