Create a context menu with right click that interact with timevis event in Shiny

[teo lo piparo]

I am trying to add a new group in the timeline of the timevis package in R from the time https://visjs.github.io/vis-timeline library. I'd like to add a contextmenu with the right click of the mouse and have the option to add or remove a group in the timeline.

if (interactive()) { 

 library(shiny) 

 library(timevis) 

 library(htmlwidgets) 

 library(data.table) 

 rv <- reactiveValues() 

 rv$df <- data.frame( id = "", start = Sys.Date(), content = "", group = "") 

 rv$df2 <- data.frame(id = c(1,2), content = c("1","2"))  ## This should be added with the contextmenu dynamically 

 ui <- fluidPage( timevisOutput("appts"), 

 div("Selected items:", textOutput("selected", inline = TRUE)), 

 div("Visible window:", textOutput("window", inline = TRUE)), 

 DT::DTOutput("table") ) 

 server <- function(input, output) { 

 output$appts <- renderTimevis( timevis( rv$df, groups = rv$df2, 

 options = list( editable = TRUE, 

 multiselect = TRUE, 

 align = "center", 

 minorLabels = FALSE, 

 majorLabels = FALSE, 

 onAdd = htmlwidgets::JS( 'function(item, callback) { 

 var end = new Date(item.start); 

 item.content = "Rename me!<br/>" + item.content; 

 item.end = end.setMonth( end.getMonth() + 1); callback(item); 

 }' ), 

 onRemove = htmlwidgets::JS( 'function (item, callback) { 

 var r = confirm("Press OK to remove or cancel"); 

 if (r == true) { 

 txt = "You pressed OK!"; callback(item); 

} else { 

 txt = "You pressed Cancel!"; callback(null); } }' ), 

 onUpdate = htmlwidgets::JS( 'function(item, callback) {

 item.content = prompt("Edit items text:", item.content); 

 if (item.content != null) { 

 callback(item); // send back adjusted item 

 } else { 

 callback(null); // cancel updating the item } }' ) 

 ) ) ) 

 output$selected <- renderText(paste(input$appts_selected, collapse = " ")) 

 output$window <- renderText(paste( input$appts_window[1], "to", input$appts_window[2] )) output[["table"]] <- DT::renderDT({ DT::datatable(input$appts_data, editable = TRUE) }) 

 } 

 shinyApp(ui, server) 

}

This is the reprex with changing name with doubleclick on item, remove prompt after clicking the X, adding item with doubleclick on the timevis panel.

The documentation mention the following:

contextmenu

Passes a properties object as returned by the method

// Fired when right-clicked inside the Timeline. Note that in order to prevent the context menu from showing up, default behavior of the event must be stopped:

Timeline.getEventProperties(event). timeline.on('contextmenu', function (props) { 

 alert('Right click!'); 

 props.event.preventDefault(); 

});

The double click is already taken but maybe is possible to use the contextmenu or doubleclicking on the left side of the timeline or having some keyboard command + mouse. I am total n00b with this and your support would be great.

Best,

Teo