fixes #3; redraws on shiny input change + add to example vignette

Author: DavZim

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: reactflow
 Title: Create beautiful, customizable, and interactive diagrams based on React Flow
-Version: 0.0.1
+Version: 0.0.2
 Authors@R: c(
     person("David", "Zimmermann-Kollenda", , "david_j_zimmermann@hotmail.com", role = c("aut", "cre"))
   )

R/reactflow.R

@@ -2,14 +2,21 @@
 #' @export
 htmlwidgets::JS
 
-#' A
+#' A ReactFlow object
 #'
-#' A
-#' @param message a
-#' @param width a
+#' @param nodes a
+#' @param edges 
+#' @param controls 
+#' @param mini_map 
+#' @param background 
+#' @param allow_edge_connection 
+#' @param use_dagre 
+#' @param dagre_direction 
+#' @param dagre_config 
+#' @param ... elements passed to ReactFlow (see <https://reactflow.dev/api-reference/react-flow>)
+#' @param width 
 #' @param height a
 #' @param elementId a
-#' @param ... elements passed to ReactFlow (see https://reactflow.dev/api-reference/react-flow)
 #'
 #' @import htmlwidgets
 #'
@@ -21,7 +28,7 @@ reactflow <- function(nodes, edges, controls = NULL, mini_map = NULL,
                       ...,
                       width = NULL, height = NULL,
                       elementId = NULL) {
-
+  
   dagre_direction <- match.arg(dagre_direction)
 
   # describe a React component to send to the browser for rendering.
@@ -32,16 +39,20 @@ reactflow <- function(nodes, edges, controls = NULL, mini_map = NULL,
          use_dagre = use_dagre, dagre_direction = dagre_direction,
          dagre_config = dagre_config, ...)
   )
-
+  
   # create widget
   hw <- htmlwidgets::createWidget(
     name = "reactflow",
     reactR::reactMarkup(component),
     width = width,
     height = height,
-    package = "reactflow"
+    package = "reactflow",
+    sizingPolicy = htmlwidgets::sizingPolicy(
+      defaultWidth = "auto",
+      defaultHeight = "auto"
+    )
   )
-
+  
   children <- list(controls, background, mini_map)
   children <- children[!sapply(children, is.null)]
 
@@ -53,11 +64,12 @@ reactflow <- function(nodes, edges, controls = NULL, mini_map = NULL,
 #' Called by HTMLWidgets to produce the widget's root element.
 #' @noRd
 widget_html.reactflow <- function(id, style, class, ...) {
-  htmltools::tagList(
+  htmltools::tags$div(
     # Necessary for RStudio viewer version < 1.2
     reactR::html_dependency_corejs(),
     reactR::html_dependency_react(),
     reactR::html_dependency_reacttools(),
+    
     htmltools::tags$div(id = id, class = class, style = style)
   )
 }
@@ -79,8 +91,8 @@ widget_html.reactflow <- function(id, style, class, ...) {
 #' @name reactflow-shiny
 #'
 #' @export
-reactflowOutput <- function(outputId, width = '100%', height = '400px'){
-  htmlwidgets::shinyWidgetOutput(outputId, 'reactflow', width, height, package = 'reactflow')
+reactflowOutput <- function(outputId, width = "100%", height = "400px"){
+  htmlwidgets::shinyWidgetOutput(outputId, "reactflow", width, height, package = "reactflow")
 }
 
 #' @rdname reactflow-shiny

README.Rmd

@@ -36,7 +36,7 @@ Layout Examples
 
 ## Examples
 
-```r
+```{r}
 nodes <- list(
   list(id = "s", type = "input", data = list(label = "Start"), 
        className = "startNode", position = list(x = 0, y = 0)),

error-redraw.R

@@ -1,4 +1,4 @@
-import React, { memo, Fragment, useCallback } from 'react';
+import React, { memo, Fragment, useCallback, useEffect, useState } from 'react';
 
 import {
   ReactFlow as ReactFlowOrig,
@@ -86,47 +86,34 @@ export default function ReactFlow({
   ...props
 }) {
 
-  // if dagre is enabled, we need to layout the nodes
+  var nodes_used = nodes;
+  
   if (use_dagre) {
-    // Overwrite nodes with layouted nodes
-    nodes = getLayoutedNodes(nodes, edges, dagre_direction, dagre_config);
+    nodes_used = getLayoutedNodes(nodes_used, edges, dagre_direction, dagre_config);
   }
-    
-  const [final_nodes, setNodes, onNodesChange] = useNodesState(nodes);
+  
+  const [final_nodes, setNodes, onNodesChange] = useNodesState(nodes_used);
   const [final_edges, setEdges, onEdgesChange] = useEdgesState(edges);
 
-  // TODO make onNodeChange, onEdgeChange, onConnect a JS function that can be passed ?? 
+  useEffect(() => {
+    setNodes(nodes_used);
+    setEdges(edges);
+  }, [nodes, edges]);
 
   const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
 
-  // for the minimap
-  function nodeColor(node) {
-    switch (node.type) {
-      case 'input':
-        return 'lightgreen';
-      case 'output':
-        return 'coral';
-      default:
-        return 'lightblue';
-    }
-  }
-    
-  // when the layout changes, recalculate the positions
   const onLayout = useCallback(
     (dagre_direction) => {
-      nodes2 = getLayoutedNodes(nodes, edges, dagre_direction, dagre_config);
-  
-      setNodes([...nodes2]);
-      setEdges([...edges]);
-      
+      const layoutedNodes = getLayoutedNodes(nodes, edges, dagre_direction, dagre_config);
+      setNodes(layoutedNodes);
+      setEdges(edges);
       window.requestAnimationFrame(() => {
         fitView();
       });
-      
     },
     [nodes, edges, dagre_direction, dagre_config],
   );
-  
+
   return (
     <ReactFlowOrig
       nodes={final_nodes}
@@ -136,18 +123,17 @@ export default function ReactFlow({
       onLayout={onLayout}
       onConnect={allow_edge_connection ? onConnect : undefined}
       nodeTypes={nodeTypes}
-      
-      onNodeDrag={(event, node, nodes) => {
+      onNodeClick={(event, node) => {
         Shiny.setInputValue(elementId + "_click", {node: node.id, edge: null});
       }}
-      onNodeClick={(event, node) => {
+      // the node is selected when dragging in CSS! this makes it consistent
+      onNodeDrag={(event, node) => {
         Shiny.setInputValue(elementId + "_click", {node: node.id, edge: null});
       }}
       onEdgeClick={(event, edge) => {
         Shiny.setInputValue(elementId + "_click", {node: null, edge: edge.id});
       }}
       {...props}
-    >
-    </ReactFlowOrig>
-  )
+    />
+  );
 }