search

CSUFTitanRover / TitanRover2018

Titan Rover 2018 Edition: Calypso
http://titanrover.com/
Apache License 2.0
12 stars 10 forks source link

Add draggable sources behavior to the GL Playground #56

Closed Weffe closed 6 years ago

Weffe commented 6 years ago

Also, update the dependecies.

Weffe commented 6 years ago

I wanted to get draggable components working before moving on to adding the Camera components. I have settled for using data attributes as a means to create the dragSources for the Playground, however, I don't really like this approach as it doesn't feel right. This is because there is a race condition as to when the GoldenLayout mounts to the DOM and when the HTML elements for the drag sources mount to the DOM. If the HTML elements don't mount in time and the GoldenLayout tries to create the drag sources then it will fail passively and no drag sources will be created. Fortunately, for now, it always seems that the GoldenLayout takes longer to finish mounting and so the HTML elements are available in time to be used as drag sources.

I would like to go back and refactor this approach later on to a much cleaner way. I was thinking of using the Redux store to hold the initiated GL Playground element, however, I remember reading that using a redux store in this way is supposed to be a bad practice but I think in our case it may be the best way to go. Will need to test and see.

This pull request address issue #39

codecov[bot] commented 6 years ago

Codecov Report

Merging #56 into UserInterface will decrease coverage by 0.3%. The diff coverage is 3.57%.

Impacted file tree graph

@@               Coverage Diff                @@
##           UserInterface     #56      +/-   ##
================================================
- Coverage           3.22%   2.92%   -0.31%     
================================================
  Files                 17      23       +6     
  Lines                279     308      +29     
  Branches              27      32       +5     
================================================
  Hits                   9       9              
- Misses               244     268      +24     
- Partials              26      31       +5
Impacted Files Coverage Δ
...er-interface/src/components/ExampleSensor/index.js 0% <ø> (ø) :arrow_up:
homebase/user-interface/src/actions/menu.js 100% <ø> (ø)
...e/src/containers/GoldenLayout/default-gl-config.js 0% <0%> (ø)
...nterface/src/containers/GoldenLayout/Playground.js 0% <0%> (ø)
...nterface/src/components/ComponentMenuList/index.js 0% <0%> (ø) :arrow_up:
.../components/ComponentMenuList/ComponentMenuItem.js 0% <0%> (ø)
homebase/user-interface/src/App.js 0% <0%> (ø) :arrow_up:
...c/containers/GoldenLayout/GoldenLayoutContainer.js 0% <0%> (ø)
...ser-interface/src/containers/GoldenLayout/index.js 0% <0%> (ø)
...se/user-interface/src/containers/LeftMenu/index.js 0% <0%> (ø) :arrow_up:
... and 11 more

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update f2fb73f...5228eed. Read the comment docs.

Weffe commented 6 years ago

@bluesun212 Does things look good to you? You can see a live example of this right now: https://deploy-preview-56--userinterface2018.netlify.com/