valtism

valtism

Front end developer with a love for design

Member Since 9 years ago

Pry Financials, Sydney, Australia

Experience Points
21
follower
Lessons Completed
26
follow
Lessons Completed
25
stars
Best Reply Awards
55
repos

285 contributions in the last year

Pinned
⚡ My Personal Resume (for nerds 🤓)
⚡ Personal blog
⚡ Create beautiful collages of your favourite albums
⚡ A react implementation of Ultimate Tic Tac Toe
⚡ Advent of Code 2020
Activity
Nov
26
4 days ago
Activity icon
issue

valtism issue comment airbnb/visx

valtism
valtism

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.

valtism
valtism

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

Activity icon
issue

valtism issue comment airbnb/visx

valtism
valtism

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.

valtism
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.

Activity icon
created branch
createdAt 4 days ago
push

valtism push valtism/visx

valtism
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 ago
push

valtism push valtism/visx

valtism
valtism

Fix child render for Safari

Add witdth and height to . Worked for Chrome but was not displaying anything for Safari.

commit sha: ce5cd189f4bb31fb5f2f5d9b4edc35053ddc40dd

push time in 4 days ago
pull request

valtism pull request airbnb/visx

valtism
valtism

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.

Activity icon
created branch

valtism in valtism/visx create branch annotation-label-foreignobject

createdAt 4 days ago
Nov
23
1 week ago
started
started time in 6 days ago
Activity icon
issue

valtism issue comment airbnb/visx

valtism
valtism

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
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.

pull request

valtism pull request airbnb/visx

valtism
valtism

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.

Activity icon
created branch

valtism in valtism/visx create branch drag-restrict-to-path

createdAt 6 days ago
Nov
19
1 week ago
started
started time in 1 week ago
Nov
15
2 weeks ago
push

valtism push valtism/visx

valtism
valtism

[@visx/text] Add 'shrink-only' option to 'scaleToFit' (#1362)

valtism
valtism

build(2b7c8106f5081e8763a10b605b671063ea326dc2): auto-commit package sizes

valtism
valtism

new(xychart): distinguish nearestDatum in renderGlyph (#1294)

  • distinguish nearestDatum in renderGlyph

  • lint

valtism
valtism

build(b9472fda714dd8b1fc99381de1199e81af37b44f): auto-commit package sizes

valtism
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
valtism

build(7c84a3a2fa1de173a7eedbf2d01bb72827fd7ec9): auto-commit package sizes

valtism
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
valtism

build(afe94c886fa4344454d484d0de1fe68c869b850d): auto-commit package sizes

valtism
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
valtism

build(3a86798e8b40a00e7b96239f268b9d955160b9a0): auto-commit package sizes

valtism
valtism

new(drag): add options to restrict area and control snapToPointer behaviour (#1368)

  • Add option to disable snap on drag

  • Make linter happy

  • [@visx/Drag] Allow restriction of drag area

Add object property restrict to useDrag (and ) to set a bounds for what space the dragged object can occupy.

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
valtism

build(afc2acc42426d657be22b15b08bce79b1ca0b7d8): auto-commit package sizes

commit sha: 3484291a96a215c66b7c94ea0669cb83d41254ba

push time in 2 weeks ago
Nov
10
2 weeks ago
Activity icon
issue

valtism issue comment airbnb/visx

valtism
valtism

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
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.

Oct
28
1 month ago
push

valtism push valtism/react-headless-datetime-picker

valtism
valtism

Remove mistakenly added files from bad remote

commit sha: 2016f1b90922b5ff296330526fef77e07d32ea10

push time in 1 month ago
Activity icon
issue

valtism issue comment airbnb/visx

valtism
valtism

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
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 😉

push

valtism push valtism/visx

valtism
valtism

commit sha: d58294576c4ce97269b383611b864cb99108f71e

push time in 1 month ago
open pull request

valtism wants to merge airbnb/visx

valtism
valtism

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
valtism

This is the structure I chose for limiting the drag area. Open to discuss other options for this if needed.

Previous