Skip to content

Sandbox for wrapping react component/app in a webgme-visualizer

License

Notifications You must be signed in to change notification settings

pmeijer/webgme-react-viz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

webgme-react-viz

This is a template repository for wrapping a react bundle into a webgme visualizer. The basic outline is the following:

  • The webgme visualizer panel is defined in WebGMEReactVizPanel.js.
  • The visualizer panel loads the reactViz.bundle.js which is the react app from src wrapped as a requirejs module and constructor like function that provides the id of the DOM-element where react app should attach.
  • The webgme (backbone) state is propagated via mediator globally available. The react app can also trigger state events (as shown with setActiveNode/Selection). In addition panel-events such as readOnly, isActivePanel and destroy are propagated.
  • The state in the react component is handled by redux and provided to the component ChildrenList.jsx via a wrapper-container ChildrenList.jsx.

The entry point for the react application is index.js and this example also shows how to bundle css with webpack. To rebuild the reactViz.bundle.js/css run npm run webpack.

Installation

First, install the react-viz following:

Second, start mongodb locally by running the mongod executable in your mongodb installation (you may need to create a data directory or set --dbpath).

Then, run webgme start from the project root to start . Finally, navigate to http://localhost:8888 to start using react-viz!

About

Sandbox for wrapping react component/app in a webgme-visualizer

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published