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

Pass Node ref to event at srcElement prop #125

Merged
merged 3 commits into from
Nov 23, 2021
Merged

Conversation

tk-fp
Copy link
Contributor

@tk-fp tk-fp commented Nov 23, 2021

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

No ability to use ref with Node symbol.

What is the new behavior?

You can now pass a ref to a Node to keep a reference to it.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

@tk-fp
Copy link
Contributor Author

tk-fp commented Nov 23, 2021

Ran into a issue while testing, lets hold on the pr for now.

@tk-fp tk-fp changed the title Wrap Node symbol in forwardRef to allow passing a ref through Pass Node ref to event at srcElement prop Nov 23, 2021
@tk-fp
Copy link
Contributor Author

tk-fp commented Nov 23, 2021

Cannot use forwardRef as it only ever references the first node loaded and does not change when selecting a new node.

Instead I am able to pass a ref to the node back on the onDragEnd event by setting the srcElement prop of the event to the node itself.

@@ -143,14 +144,10 @@ export const Node: FC<Partial<NodeProps>> = ({
onEnter = () => undefined,
onLeave = () => undefined
}) => {
const nodeRef = useRef<SVGRectElement>(null);
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
const nodeRef = useRef<SVGRectElement>(null);
const nodeRef = useRef<SVGRectElement | null>(null);

@@ -225,6 +222,8 @@ export const Node: FC<Partial<NodeProps>> = ({
if (!isDisabled && canDrag) {
// @ts-ignore
event.dragType = getDragType(false);
// @ts-ignore
event.srcElement = nodeRef.current;
Copy link
Member

Choose a reason for hiding this comment

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

Was the srcElement there before or is this a new prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's a new prop.

Copy link
Contributor Author

@tk-fp tk-fp Nov 23, 2021

Choose a reason for hiding this comment

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

It is a prop on the actual pointer event on event.event but this is one level up on the top level event. So you are able to see event.srcElement: the element that the onDragEnd event occurred from and event.event.srcElement: element the pointerup event happened on, same as event.event.target.

@amcdnl amcdnl merged commit d5828de into reaviz:master Nov 23, 2021
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.

2 participants