feat(button): add button implementation

[swsoyee]

Close #23 .

A draft implementation of add button to the view.

r3dmol() %>%
  m_add_model(data = pdb_1j72, format = "pdb") %>%
  m_zoom_to() %>%
  m_button(
    name = "cartoon",
    label = "Cartoon",
    func = "
      function(){
        viewer.setStyle({cartoon:{}});
        viewer.render();
      }
    "
  )

Initiation

After Click the Cartoon Button

There is only one problem about this feature.

r3dmol() %>%
  m_add_model(data = pdb_1j72, format = "pdb") %>%
  m_zoom_to() %>%
  m_button(
    name = "cartoon",
    label = "Cartoon",
    func = "
      function(){
        viewer.setStyle({cartoon:{}});
        viewer.render();
      }
    "
  ) %>%
  m_button(
    name = "stick",
    label = "Stick",
    func = "
      function(){
        viewer.setStyle({stick:{}});
        viewer.render();
      }
    "
  )

If you add multiple buttons in the view, the css style of the button position needs to be automatically adjusted according to the number of button, or expose the position argments to the user.

r3dmol/inst/htmlwidgets/r3dmol.js

Line 191 in ed45b5e

button.setAttribute('style', 'position:absolute;top:10px;left:10px;z-index:1;');

@BradyAJohnston Could you mind helping to finish this implement?

[BradyAJohnston]

Okay this fix works and seems almost too-simple. Let me know if there is a reason why it shouldn't be done this way.
I'm just using display:inline-block; which then handles all of the button layout automatically.

I tested it with up to 10 buttons and the layout works. It also adjusts with the re-sizing of the window.

What I couldn't figure out was how to have the buttons anywhere other than the top-left. It's not that important, now that the buttons are working. (thanks so much for getting the buttons working, this is awesome!).

button.setAttribute('style', 'display:inline-block;');

r3dmol() %>%
  m_add_model(data = pdb_1j72, format = "pdb") %>%
  m_zoom_to() %>%
  m_button(
    name = "cartoon",
    label = "Cartoon",
    func = "
      function(){
        viewer.setStyle({cartoon:{}});
        viewer.render();
      }
    "
  ) %>%
  m_button(
    name = "stick",
    label = "Stick",
    func = "
      function(){
        viewer.setStyle({stick:{}});
        viewer.render();
      }
    "
  )

I also don't know why the checks are failing - the devtools::check() is running fine on my machine.

[swsoyee]

Thanks! Using inline-block it's a good idea for automatic layout.

What I couldn't figure out was how to have the buttons anywhere other than the top-left.

Maybe it could be done by adding display:flex to parent element, and do more css trick. I will have a try tonight.

I also don't know why the checks are failing - the devtools::check() is running fine on my machine.

In my experience, some CRAN dependencies may not be immediately available in Github Action if they have been recently updated. Or something cause it failed. You could re-run all action job by click the re-run button in action tab.

[swsoyee]

Not good enough, but now the buttons are able to align in top, center, bottom on the left. I want to use justify-content for horizontal alignment but it seems not working. I can't figure out why in a short time.

You could edit this PR for more friendly for user.

r3dmol() %>%
  m_add_model(data = pdb_1j72, format = "pdb") %>%
  m_zoom_to() %>%
  m_button(
    name = "cartoon",
    label = "Cartoon",
    style = "flex-end",
    func = "
      function(){
        viewer.setStyle({cartoon:{}});
        viewer.render();
      }
    "
  ) %>%
  m_button(
    name = "stick",
    label = "Stick",
    func = "
      function(){
        viewer.setStyle({stick:{}});
        viewer.render();
      }
    "
  )

Some useful references:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://yoksel.github.io/flex-cheatsheet/#section-justify-content

[swsoyee]

@BradyAJohnston I figure out how to fix the layout problem, please wait a moment.

[swsoyee]

Now your are able to layout all the button by css style. Ready for review.

r3dmol() %>%
  m_add_model(data = pdb_1j72, format = "pdb") %>%
  m_zoom_to() %>%
  m_button(
    name = "cartoon",
    label = "Cartoon",
    align_items = "flex-end",
    justify_content = "center",
    func = "
      function(){
        viewer.setStyle({cartoon:{}});
        viewer.render();
      }
    "
  ) %>%
  m_button(
    name = "stick",
    label = "Stick",
    func = "
      function(){
        viewer.setStyle({stick:{}});
        viewer.render();
      }
    "
  )

[BradyAJohnston]

All looks really good! Thanks for putting so much effort into this and getting it working so well.

I've got some ideas about default buttons etc that I will play around with and might put together a new PR soon.