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.

Sign up for GitHub

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

Jump to bottom

Drag & Drop Cabling #17

Merged
merged 20 commits into from Sep 18, 2018
Merged

Drag & Drop Cabling #17

merged 20 commits into from Sep 18, 2018

Conversation

timoxley
Copy link
Contributor

@timoxley timoxley commented Sep 17, 2018 •
edited

  • Adds some module & port state styling.
  • Implements draggable cables.

cable-dragging

Known issues:

  • Flicker of (+) icon when dragging (??)
  • Ports have a white square around them when dragging (Needs a "DragLayer")
  • Currently cabling offset is incorrect when page is scrolled Fixed

@timoxley
[userpages Canvas/Edit] Quick pass over module/cable styling to bring…
c6cfb33 
… closer to mocks.
@timoxley
[userpages Canvas/Edit] Also display connections from outputs.
a82e140
@timoxley
[userpages Canvas/Edit] Add basics of draggable input/output ports. S…
6b01e91 
…how possible connections when dragging a port.
@timoxley
[userpages Canvas/Edit] Factor out Port/Cable/Module handling.
c4140e5
@timoxley
[userpages Canvas/Edit] Pass port/module dnd actions as props, define…
de3b0bd 
… at top level.
@timoxley
[userpages Canvas/Edit] Fix so offscreen cables still render after sc…
99179d0 
…roll.
@timoxley
[userpages Canvas/Edit] Update module connections with drag and drop.
a61cafe
@timoxley
[userpages Canvas/Edit] Factor out canvas module/port update+query op…
b8470d5 
…erations. Create module/port convenience indexes.
@timoxley
[userpages Canvas/Edit] Treat drag from connected input as if drag fr…
e2aca52 
…om output.
@timoxley
[userpages Canvas/Edit] Disconnect ports if dragging from connected i…
2a7fe89 
…nput into nowhere.
@timoxley
[userpages Canvas/Edit] Key canvas editor by id + updated.
7a10f1e
@timoxley
[userpages Canvas/Edit] Split out memoization.
1a11cba
@timoxley
[userpages Canvas/Edit] Move Drag/Drop handling into Canvas/index.
3be3a44
@timoxley
[userpages Canvas/Edit] Move position handling into state.
209d69d
@timoxley
[userpages Canvas/Edit] Rearrange dnd api prop.
83a0a53
@timoxley
[userpages Canvas/Edit] Show dragging cable during port drag.
d61238b
@timoxley
[userpages Canvas/Edit] Show dragging cable during module drag.
2a47d21
@timoxley
[userpages Canvas/Edit] Account for page scroll during drag/drop.
246d809
@timoxley
[userpages Canvas/Edit] Use raf.
8b1cada
@fonty1
Copy link
Member

fonty1 commented Sep 17, 2018

The green icon seems to be a common issue with dnd library,
react-dnd/react-dnd#414

maybe try

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'
This worked for me on chrome. Just put it in the "dragstart" and "dragend" events as those are the only ones that have access to the dataTransfer object.

fonty1
fonty1 approved these changes Sep 17, 2018
View reviewed changes
Copy link
Member

@fonty1 fonty1 left a comment

Choose a reason for hiding this comment

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

Good start, nothing to complain about : )

@timoxley timoxley merged commit 80bc2c2 into master Sep 18, 2018
@timoxley timoxley deleted the EDITOR-39-drag-drop-cabling branch October 10, 2018 03:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fonty1 fonty1 fonty1 approved these changes

@mondoreale mondoreale Awaiting requested review from mondoreale

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@timoxley @fonty1